/* ═══════════════════════════════════════════════════════════════════════
   IMPELLO CAPITAL — Premium Design System v2
   Complete visual overhaul matching Impello Studio aesthetic
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ───────────────────────────────────────────────────────── */
:root {
  --ic-navy: #0F1C30;
  --ic-navy-light: #1A2B4A;
  --ic-navy-mid: #263D5C;
  --ic-slate: #64748b;
  --ic-muted: #94a3b8;
  --ic-bg: #F7F8FB;
  --ic-white: #ffffff;
  --ic-emerald: #10b981;
  --ic-border: rgba(15,28,48,0.06);
  --ic-radius: 16px;
  --ic-radius-sm: 10px;
  --ic-shadow-xs: 0 1px 2px rgba(15,28,48,0.04);
  --ic-shadow-sm: 0 2px 8px rgba(15,28,48,0.06);
  --ic-shadow: 0 4px 24px rgba(15,28,48,0.10);
  --ic-shadow-lg: 0 12px 48px rgba(15,28,48,0.14);
  --ic-transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Global Reset ─────────────────────────────────────────────────── */
body, html, p, h1, h2, h3, h4, h5, h6, a, li, ul, ol, span, div,
input, select, textarea, button, label, th, td,
.legal-body, .legal-body *, .legal-content, .legal-content * {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body {
  color: #334155;
  background: var(--ic-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(15,28,48,0.12); color: var(--ic-navy); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ─── Navigation — Glassmorphic ────────────────────────────────────── */
#mainNav {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid var(--ic-border) !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  transition: var(--ic-transition);
}
#mainNav.navbar-shrink {
  box-shadow: 0 1px 12px rgba(15,28,48,0.08) !important;
  background: rgba(255,255,255,0.95) !important;
}
.responsive-logo {
  max-height: 54px !important;
  height: 54px !important;
  width: auto !important;
  object-fit: contain;
}
@media (max-width: 768px) { .responsive-logo { max-height: 36px !important; height: 36px !important; } }
@media (max-width: 480px) { .responsive-logo { max-height: 30px !important; height: 30px !important; } }

#mainNav .navbar-nav .nav-item .nav-link {
  color: var(--ic-navy) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: -0.01em;
  padding: 0.5rem 0.9rem !important;
  border-radius: var(--ic-radius-sm);
  transition: var(--ic-transition);
  margin: 0 2px;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:focus {
  background: rgba(15,28,48,0.06) !important;
  color: var(--ic-navy) !important;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link { color: var(--ic-navy) !important; }
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover { color: var(--ic-navy-light) !important; }

.flag-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 1.5px solid var(--ic-border);
  transition: var(--ic-transition);
}
.flag-icon:hover { transform: scale(1.2); border-color: var(--ic-navy); }

/* ─── Hero / Masthead — Premium Gradient ───────────────────────────── */
header.masthead {
  background: linear-gradient(145deg, #0a1525 0%, #0F1C30 20%, #1A2B4A 50%, #1e3454 70%, #162544 100%) !important;
  min-height: 88vh !important;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
  position: relative;
  overflow: hidden;
}
/* Override the original body.paginaX background-image rules with matching specificity */
body.pagina1 header.masthead,
body.pagina2 header.masthead,
body.pagina3 header.masthead,
body.pagina4 header.masthead {
  background: linear-gradient(145deg, #0a1525 0%, #0F1C30 20%, #1A2B4A 50%, #1e3454 70%, #162544 100%) !important;
}

/* Ambient glow orbs */
header.masthead::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 20s ease-in-out infinite;
}
header.masthead::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 25s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

header.masthead h1, header.masthead .h1 {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  font-size: 2.2rem !important;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  header.masthead h1, header.masthead .h1 { font-size: 3rem !important; }
}
@media (min-width: 992px) {
  header.masthead h1, header.masthead .h1 { font-size: 3.8rem !important; }
  header.masthead { min-height: 92vh !important; }
}
@media (min-width: 1200px) {
  header.masthead h1, header.masthead .h1 { font-size: 4.2rem !important; }
}
header.masthead p {
  font-weight: 400 !important;
  line-height: 1.75 !important;
  font-size: 1.05rem !important;
  position: relative;
  z-index: 1;
}
.text-white-75 { color: rgba(255,255,255,0.65) !important; }

/* ─── Dividers ─────────────────────────────────────────────────────── */
hr.divider, .divider {
  border: none !important;
  height: 3px !important;
  width: 56px !important;
  margin: 1.2rem auto !important;
  border-radius: 2px !important;
  background: var(--ic-navy) !important;
  opacity: 0.7;
}
.divider-light { background: rgba(255,255,255,0.25) !important; }

/* ─── Sections ─────────────────────────────────────────────────────── */
.page-section {
  padding: 5.5rem 0 !important;
  position: relative;
}
.page-section:not(.bg-primary) {
  background: var(--ic-white) !important;
  color: #334155 !important;
}
/* Force dark text on ALL light sections */
.page-section:not(.bg-primary) h1,
.page-section:not(.bg-primary) h2,
.page-section:not(.bg-primary) h3,
.page-section:not(.bg-primary) h4,
.page-section:not(.bg-primary) .h1,
.page-section:not(.bg-primary) .h2,
.page-section:not(.bg-primary) .h3,
.page-section:not(.bg-primary) .h4 {
  color: var(--ic-navy) !important;
}
.page-section:not(.bg-primary) p,
.page-section:not(.bg-primary) li,
.page-section:not(.bg-primary) span,
.page-section:not(.bg-primary) .text-white-75 {
  color: var(--ic-slate) !important;
}
.page-section:not(.bg-primary) a:not(.btn):not(.nav-link):not(.footer-link) {
  color: var(--ic-navy) !important;
}

.bg-primary {
  background: linear-gradient(145deg, var(--ic-navy) 0%, var(--ic-navy-light) 60%, var(--ic-navy-mid) 100%) !important;
}
/* White text ONLY on dark bg-primary sections */
.bg-primary, .bg-primary p, .bg-primary h2, .bg-primary .h2,
.bg-primary h3, .bg-primary .h3, .bg-primary span {
  color: white !important;
}
.bg-primary .text-white-75 {
  color: rgba(255,255,255,0.65) !important;
}
.page-section h2 {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  font-size: 1.9rem !important;
}
.page-section:not(.bg-primary) h2 { color: var(--ic-navy) !important; }
.bg-primary h2, .page-section.bg-primary h2 { color: white !important; }

/* ─── Feature Cards ────────────────────────────────────────────────── */
.feature-card {
  padding: 2.5rem 2rem;
  border-radius: var(--ic-radius);
  background: var(--ic-white);
  border: 1px solid var(--ic-border);
  box-shadow: var(--ic-shadow-xs);
  transition: var(--ic-transition);
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ic-shadow-lg);
  border-color: rgba(15,28,48,0.1);
}
.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15,28,48,0.04) 0%, rgba(15,28,48,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: var(--ic-transition);
}
.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, var(--ic-navy) 0%, var(--ic-navy-light) 100%);
}
.feature-icon i, .icon-navy {
  color: var(--ic-navy) !important;
  font-size: 1.5rem !important;
  transition: var(--ic-transition);
}
.feature-card:hover .feature-icon i {
  color: white !important;
}
.feature-card .h4 {
  font-weight: 700 !important;
  color: var(--ic-navy) !important;
  letter-spacing: -0.015em;
  font-size: 1.1rem !important;
}
.text-muted {
  color: var(--ic-slate) !important;
  line-height: 1.7 !important;
  font-size: 0.9rem !important;
}

/* ─── Contact Cards ────────────────────────────────────────────────── */
.contact-card {
  padding: 2.5rem 1.5rem;
  border-radius: var(--ic-radius);
  background: var(--ic-white);
  border: 1px solid var(--ic-border);
  box-shadow: var(--ic-shadow-sm);
  transition: var(--ic-transition);
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ic-shadow);
}
.contact-icon {
  margin-bottom: 1rem;
}
.contact-icon i { color: var(--ic-navy) !important; opacity: 0.7; }
.contact-card h4 {
  font-weight: 700;
  color: var(--ic-navy);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.contact-card a {
  color: var(--ic-navy) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(15,28,48,0.1);
  transition: var(--ic-transition);
  font-size: 0.9rem;
}
.contact-card a:hover { border-bottom-color: var(--ic-navy); }
.contact-card p { color: var(--ic-slate); font-size: 0.9rem; margin: 0; }

/* ─── Buttons — Premium ────────────────────────────────────────────── */
.btn-navy, .btn-consult {
  background: var(--ic-navy) !important;
  color: white !important;
  border: none !important;
  padding: 0.8rem 2rem !important;
  border-radius: var(--ic-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em;
  transition: var(--ic-transition);
  box-shadow: 0 2px 8px rgba(15,28,48,0.15) !important;
  text-decoration: none !important;
}
.btn-navy:hover, .btn-consult:hover {
  background: var(--ic-navy-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,28,48,0.2) !important;
  color: white !important;
}

.btn-light {
  background: white !important;
  color: var(--ic-navy) !important;
  border: none !important;
  padding: 0.8rem 2.2rem !important;
  border-radius: var(--ic-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  transition: var(--ic-transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  text-decoration: none !important;
}
.btn-light:hover {
  background: #f1f5f9 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
  color: var(--ic-navy) !important;
}
.btn-xl {
  padding: 1rem 2.8rem !important;
  font-size: 1rem !important;
  border-radius: var(--ic-radius) !important;
}

/* ─── Footer — Dark & Clean ────────────────────────────────────────── */
footer, footer.bg-light, .site-footer {
  background: var(--ic-navy) !important;
  padding: 2.5rem 0 !important;
  border-top: none !important;
  color: white !important;
}
.footer-inner {
  text-align: center;
}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.footer-link, footer .footer-link {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--ic-transition);
  letter-spacing: -0.01em;
}
.footer-link:hover, footer .footer-link:hover {
  color: rgba(255,255,255,0.9) !important;
}
.footer-sep, footer span {
  color: rgba(255,255,255,0.15) !important;
  font-size: 0.75rem !important;
}
.footer-copy, footer .small, footer .text-muted, footer .small.text-muted {
  color: rgba(255,255,255,0.25) !important;
  font-size: 0.72rem !important;
}
.footer-social-link, .footer-social-link i {
  color: rgba(255,255,255,0.4) !important;
  transition: var(--ic-transition);
  text-decoration: none;
}
.footer-social-link:hover, .footer-social-link:hover i {
  color: rgba(255,255,255,0.9) !important;
}
/* Kill old LinkedIn image button */
footer .linkedin-custom-btn { display: none !important; }

/* ─── Legal pages ──────────────────────────────────────────────────── */
.legal-body h2 {
  font-weight: 700;
  color: var(--ic-navy);
  font-size: 1.15rem;
  margin-top: 2rem;
  letter-spacing: -0.01em;
}
.legal-body p,
.legal-body li,
.legal-body ul,
.legal-body ol,
.legal-body td,
.legal-body th,
.legal-body span,
.legal-body div {
  font-size: 0.92rem;
  color: var(--ic-slate);
  line-height: 1.8;
}
.legal-body ul, .legal-body ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
.legal-body li {
  margin-bottom: 0.25rem;
}

/* ─── Staggered entrance animations ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-section .row > [class*="col-"] {
  animation: fadeUp 0.7s ease-out both;
}
.page-section .row > [class*="col-"]:nth-child(1) { animation-delay: 0.08s; }
.page-section .row > [class*="col-"]:nth-child(2) { animation-delay: 0.16s; }
.page-section .row > [class*="col-"]:nth-child(3) { animation-delay: 0.24s; }
.page-section .row > [class*="col-"]:nth-child(4) { animation-delay: 0.32s; }
.page-section .row > [class*="col-"]:nth-child(5) { animation-delay: 0.40s; }
.page-section .row > [class*="col-"]:nth-child(6) { animation-delay: 0.48s; }
.page-section .row > [class*="col-"]:nth-child(7) { animation-delay: 0.56s; }
.page-section .row > [class*="col-"]:nth-child(8) { animation-delay: 0.64s; }

/* ─── Card overrides (kill old styles) ─────────────────────────────── */
.card { border-radius: var(--ic-radius) !important; border: 1px solid var(--ic-border) !important; box-shadow: var(--ic-shadow-sm); }
.card-header { background: transparent !important; border: none !important; }
.card-bronze, .card-silver, .card-gold, .card-additional {
  border-width: 1px !important;
  border-color: var(--ic-border) !important;
  background: white !important;
  color: var(--ic-navy) !important;
}
.card-bronze .card-header, .card-silver .card-header, .card-gold .card-header { color: var(--ic-navy) !important; }

/* ─── Responsive polish ────────────────────────────────────────────── */
@media (max-width: 768px) {
  header.masthead { min-height: 70vh !important; padding-top: 120px !important; }
  .page-section { padding: 3.5rem 0 !important; }
  .feature-card { padding: 1.5rem 1.2rem; }
  .page-section h2 { font-size: 1.5rem !important; }
}
