/* ============================================================
   FENBEN RESEARCH HUB — PREMIUM CSS v2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* ── Light theme backgrounds ── */
  --bg:          #f7f9ff;
  --bg2:         #ffffff;
  --surface:     #ffffff;
  --surface2:    #eef2ff;
  --surface3:    #e4eaff;
  /* ── Borders: very subtle dark on light ── */
  --border:      rgba(10,15,60,0.07);
  --border2:     rgba(10,15,60,0.13);
  --border3:     rgba(10,15,60,0.20);
  /* ── Accent palette (slightly deeper for light bg) ── */
  --gold:        #d97706;
  --gold-l:      #f59e0b;
  --gold-d:      #b45309;
  --emerald:     #059669;
  --emerald-d:   #047857;
  --blue:        #2563eb;
  --purple:      #7c3aed;
  /* ── Typography: dark on light ── */
  --text:        #0a0f23;
  --text-muted:  #3d4a6b;
  --text-dim:    #7a88a8;
  /* ── Gradients ── */
  --grad-gold:   linear-gradient(135deg, #f5a623 0%, #fbbf24 50%, #e09515 100%);
  --grad-hero:   radial-gradient(ellipse 80% 60% at 18% 40%, rgba(245,166,35,.22) 0%, transparent 55%),
                 radial-gradient(ellipse 60% 55% at 80% 18%, rgba(16,185,129,.15) 0%, transparent 52%),
                 radial-gradient(ellipse 50% 60% at 62% 88%, rgba(59,130,246,.1) 0%, transparent 52%);
  --grad-card:   linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,255,.98));
  /* ── Shadows: soft for light theme ── */
  --shadow-sm:   0 2px 12px rgba(10,15,60,.08);
  --shadow-md:   0 8px 36px rgba(10,15,60,.11);
  --shadow-lg:   0 18px 60px rgba(10,15,60,.15);
  --shadow-gold: 0 4px 30px rgba(245,166,35,.28);
  --shadow-gold-lg: 0 8px 50px rgba(245,166,35,.38);
  --shadow-emerald: 0 4px 30px rgba(16,185,129,.22);
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-full: 9999px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-back:   cubic-bezier(.68,-.6,.32,1.6);
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-display: 'Syne', sans-serif;
  --mx: 50%;
  --my: 50%;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased }
img,video { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none; transition:color .2s var(--ease) }
ul,ol { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,textarea,select { font-family:inherit }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--gold-d),var(--emerald-d)); border-radius:3px }

/* ─── NOISE TEXTURE ──────────────────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.016; pointer-events:none; z-index:9998;
}

/* ─── READING PROGRESS ───────────────────────────────────────── */
#reading-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--emerald),var(--blue));
  background-size:200% 100%;
  animation:progressShimmer 2s linear infinite;
  z-index:9999; transition:width .1s linear; pointer-events:none;
}
@keyframes progressShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.2; letter-spacing:-0.02em }
h1 { font-size:clamp(2.4rem,5vw,4.4rem) }
h2 { font-size:clamp(1.8rem,3.5vw,3.1rem) }
h3 { font-size:clamp(1.25rem,2.5vw,1.9rem) }
h4 { font-size:clamp(1.05rem,2vw,1.4rem) }
p  { font-size:clamp(.95rem,1.5vw,1.05rem); color:var(--text-muted); line-height:1.78 }
.lead { font-size:clamp(1.05rem,1.8vw,1.22rem); color:var(--text-muted); line-height:1.88 }
.display-text { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em }
.text-gold    { color:var(--gold) }
.text-emerald { color:var(--emerald) }
.text-muted   { color:var(--text-muted) }
.text-center  { text-align:center }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container        { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem }
.container-wide   { max-width:1440px }
.container-narrow { max-width:860px }
section     { padding:6.5rem 0 }
.section-sm { padding:3.5rem 0 }
.section-lg { padding:9rem 0 }

/* ─── GRID ───────────────────────────────────────────────────── */
.grid-2    { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem }
.flex         { display:flex }
.flex-center  { display:flex; align-items:center; justify-content:center }
.flex-between { display:flex; align-items:center; justify-content:space-between }
.flex-col     { flex-direction:column }
.gap-1{gap:.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem} .gap-4{gap:2rem}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.9rem 0; transition:all .4s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled {
  background:rgba(5,7,26,.92); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom-color:var(--border);
  box-shadow:0 8px 50px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem }
.nav-logo  { display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; white-space:nowrap }
.nav-logo-icon {
  width:38px; height:38px; background:var(--grad-gold); border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:var(--shadow-gold); transition:transform .35s var(--ease-spring), box-shadow .3s;
}
.nav-logo:hover .nav-logo-icon { transform:rotate(-8deg) scale(1.1); box-shadow:var(--shadow-gold-lg) }
.nav-logo-icon svg { width:22px; height:22px; fill:white }
.nav-logo span em { font-style:normal; color:var(--gold) }
.nav-links { display:flex; align-items:center; gap:.15rem }
.nav-links a {
  padding:.45rem .85rem; border-radius:var(--r-sm); font-size:.88rem; font-weight:500;
  color:var(--text-muted); transition:all .22s var(--ease); white-space:nowrap;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:5px; left:50%; right:50%;
  height:2px; background:var(--gold); border-radius:2px;
  transition:left .28s var(--ease), right .28s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(255,255,255,.04) }
.nav-links a:hover::after, .nav-links a.active::after { left:12px; right:12px }
.nav-cta {
  padding:.55rem 1.3rem!important; background:var(--grad-gold)!important;
  color:#0a0a0a!important; border-radius:var(--r-full)!important;
  font-weight:700!important; font-size:.85rem!important;
  box-shadow:var(--shadow-gold); transition:all .28s var(--ease-spring)!important;
  overflow:hidden; position:relative;
}
.nav-cta::after { display:none!important }
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%); transition:transform .45s var(--ease);
}
.nav-cta:hover { transform:scale(1.05)!important; box-shadow:var(--shadow-gold-lg)!important; color:#0a0a0a!important }
.nav-cta:hover::before { transform:translateX(100%) }
.nav-mobile-toggle { display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; padding:4px }
.nav-mobile-toggle span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all .3s var(--ease); transform-origin:left }
.nav-mobile-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(1px,-1px) }
.nav-mobile-toggle.open span:nth-child(2) { opacity:0; transform:translateX(-8px) }
.nav-mobile-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(1px,1px) }
.nav-mobile {
  display:none; position:fixed; inset:0; top:70px;
  background:rgba(5,7,26,.97); backdrop-filter:blur(28px);
  z-index:999; padding:2rem 1.5rem; flex-direction:column; gap:.5rem; overflow-y:auto;
}
.nav-mobile.open { display:flex }
.nav-mobile a {
  padding:.9rem 1.2rem; border-radius:var(--r-md); font-size:1rem; font-weight:500;
  color:var(--text-muted); border:1px solid var(--border);
  transition:all .22s var(--ease);
}
.nav-mobile a:hover { color:var(--text); background:var(--surface); border-color:var(--border2); transform:translateX(4px) }
.nav-mobile .nav-cta { background:var(--grad-gold)!important; color:#0a0a0a!important; border:none!important; text-align:center; margin-top:1rem; font-weight:700!important; justify-content:center }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:8rem 0 6rem }
.hero-bg   { position:absolute; inset:0; background:var(--bg); z-index:0 }
.hero-mesh { position:absolute; inset:0; background:var(--grad-hero); z-index:1 }
.hero-grid {
  position:absolute; inset:0; z-index:2;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);
}
/* Floating orbs */
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); z-index:2; pointer-events:none; animation:orbFloat 10s ease-in-out infinite }
.hero-orb-1 { width:700px; height:700px; background:radial-gradient(circle,rgba(245,166,35,.13) 0%,transparent 70%); top:30%; left:35%; animation-duration:12s }
.hero-orb-2 { width:450px; height:450px; background:radial-gradient(circle,rgba(16,185,129,.1) 0%,transparent 70%); top:10%; right:10%; animation-delay:-4s; animation-duration:14s }
.hero-orb-3 { width:320px; height:320px; background:radial-gradient(circle,rgba(59,130,246,.09) 0%,transparent 70%); bottom:15%; left:5%; animation-delay:-7s; animation-duration:11s }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1) }
  25%      { transform:translate(22px,-18px) scale(1.04) }
  50%      { transform:translate(-12px,22px) scale(.97) }
  75%      { transform:translate(16px,8px) scale(1.02) }
}
.hero-glow { position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(245,166,35,.1) 0%,transparent 70%); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; animation:pulseGlow 7s ease-in-out infinite }
@keyframes pulseGlow { 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)} }
.hero-content { position:relative; z-index:10 }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem;
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.22);
  border-radius:var(--r-full); font-size:.78rem; font-weight:700; color:var(--gold);
  margin-bottom:1.75rem; letter-spacing:.07em; text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.hero-badge-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:blink 2s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.hero h1 { margin-bottom:1.5rem; max-width:820px }
.hero h1 .gradient-text { background:linear-gradient(135deg,#f5a623 0%,#fbbf24 40%,#10b981 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-desc    { max-width:580px; margin-bottom:2.5rem; font-size:1.1rem; line-height:1.88; color:var(--text-muted) }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.hero-stats   { display:flex; align-items:center; gap:2.5rem; margin-top:4rem; padding-top:3rem; border-top:1px solid var(--border); flex-wrap:wrap }
.hero-stat-value { font-family:var(--font-display); font-size:2.1rem; font-weight:800; color:var(--text); display:block; letter-spacing:-.04em }
.hero-stat-label { font-size:.76rem; color:var(--text-dim); letter-spacing:.07em; text-transform:uppercase; margin-top:.25rem }
.hero-image-wrap { position:relative }
.hero-float-card {
  position:absolute; background:rgba(12,21,40,.9); backdrop-filter:blur(20px);
  border:1px solid var(--border2); border-radius:var(--r-md); padding:.75rem 1.1rem;
  display:flex; align-items:center; gap:.65rem; box-shadow:var(--shadow-md);
  animation:floatCard 4s ease-in-out infinite; transition:transform .15s var(--ease);
}
.hero-float-card.card-1 { top:15%; right:-20px; animation-delay:0s }
.hero-float-card.card-2 { bottom:20%; left:-25px; animation-delay:2s }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-float-icon  { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem }
.hero-float-icon.gold    { background:rgba(245,166,35,.15) }
.hero-float-icon.emerald { background:rgba(16,185,129,.15) }
.hero-float-text { font-size:.82rem; font-weight:600; color:var(--text); line-height:1.3 }
.hero-float-sub  { font-size:.72rem; color:var(--text-muted) }

/* Scroll indicator */
.scroll-indicator {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:10;
  animation:scrollBob 2s ease-in-out infinite;
}
.scroll-indicator-dot {
  width:22px; height:36px; border:2px solid rgba(245,166,35,.35); border-radius:12px;
  display:flex; align-items:flex-start; justify-content:center; padding-top:5px;
}
.scroll-indicator-dot::before {
  content:''; width:4px; height:8px; background:var(--gold); border-radius:2px;
  animation:scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot  { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(12px);opacity:0} }
@keyframes scrollBob  { 0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)} 50%{opacity:1;transform:translateX(-50%) translateY(-5px)} }
.scroll-indicator-text { font-size:.68rem; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.85rem; border-radius:var(--r-full); font-weight:700; font-size:.95rem;
  transition:all .28s var(--ease-spring); text-decoration:none; line-height:1;
  border:none; cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
}
/* Shimmer sweep */
.btn::before {
  content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg); transition:left .5s var(--ease); pointer-events:none;
}
.btn:hover::before { left:160% }
.btn-primary  { background:var(--grad-gold); color:#0a0a0a; box-shadow:var(--shadow-gold) }
.btn-primary:hover  { transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-gold-lg); color:#0a0a0a }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border2) }
.btn-secondary:hover { background:var(--surface2); border-color:rgba(245,166,35,.3); color:var(--text); transform:translateY(-2px); box-shadow:0 6px 28px rgba(0,0,0,.4) }
.btn-ghost  { background:transparent; color:var(--text); border:1px solid var(--border2) }
.btn-ghost:hover { background:var(--surface); border-color:var(--border2); color:var(--text) }
.btn-emerald { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:var(--shadow-emerald) }
.btn-emerald:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 8px 44px rgba(16,185,129,.38); color:#fff }
.btn-lg  { padding:1rem 2.3rem; font-size:1.05rem }
.btn-sm  { padding:.5rem 1.25rem; font-size:.86rem }
.btn svg { transition:transform .25s var(--ease-spring) }
.btn:hover svg { transform:translateX(4px) }
/* Click ripple */
.btn-ripple {
  position:absolute; border-radius:50%; background:rgba(255,255,255,.28);
  transform:scale(0); animation:rippleAnim .6s linear; pointer-events:none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0 } }

/* ─── CARDS ───────────────────────────────────────────────────── */
.card {
  background:var(--grad-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:2rem;
  transition:all .35s var(--ease); backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
/* Spotlight glow tracks cursor via --mx/--my set by JS */
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(245,166,35,.07), transparent 60%);
  opacity:0; transition:opacity .4s var(--ease);
}
.card:hover::before { opacity:1 }
.card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.card > * { position:relative; z-index:1 }
.card-glass       { background:rgba(12,21,40,.65); backdrop-filter:blur(24px) }
.card-hover-gold:hover { border-color:rgba(245,166,35,.22); box-shadow:var(--shadow-gold) }
/* Animated gradient border */
.card-premium {
  position:relative; background:var(--surface); border:1px solid transparent;
  background-clip:padding-box;
}
.card-premium::after {
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--r-lg) + 1px);
  background:linear-gradient(135deg,rgba(245,166,35,.35),rgba(16,185,129,.2),rgba(59,130,246,.15),rgba(245,166,35,.25));
  background-size:300% 300%; z-index:-1;
  animation:gradBorder 5s ease infinite;
}
@keyframes gradBorder { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.card-icon {
  width:52px; height:52px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; font-size:1.5rem;
  transition:transform .35s var(--ease-spring);
}
.card:hover .card-icon { transform:scale(1.12) rotate(-5deg) }
.card-icon-gold    { background:rgba(245,166,35,.12); color:var(--gold) }
.card-icon-emerald { background:rgba(16,185,129,.12); color:var(--emerald) }
.card-icon-blue    { background:rgba(59,130,246,.12); color:var(--blue) }
.card-icon-purple  { background:rgba(139,92,246,.12); color:var(--purple) }
.card h3 { margin-bottom:.6rem; font-size:1.15rem }
.card p  { font-size:.92rem; line-height:1.72 }

/* ─── SECTION HEADERS ────────────────────────────────────────── */
.section-badge {
  display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .95rem;
  background:rgba(245,166,35,.07); border:1px solid rgba(245,166,35,.18);
  border-radius:var(--r-full); font-size:.75rem; font-weight:700;
  color:var(--gold); letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2rem;
}
.section-header        { margin-bottom:3.5rem }
.section-header.center { text-align:center }
.section-header h2     { margin-bottom:1rem }
.section-header p      { max-width:620px; font-size:1.05rem; line-height:1.85 }
.section-header.center p { margin:0 auto }
.section-divider {
  width:60px; height:3px; background:var(--grad-gold);
  border-radius:2px; margin:1.25rem 0; position:relative; overflow:hidden;
}
.section-divider::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:rgba(255,255,255,.55); animation:divShimmer 2.5s ease-in-out infinite;
}
@keyframes divShimmer { 0%{left:-100%} 100%{left:200%} }
.section-divider.center { margin:1.25rem auto }

/* ─── TRUST BAR ──────────────────────────────────────────────── */
.trust-bar { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0; overflow:hidden }
.trust-bar-inner { display:flex; align-items:center; gap:2rem; justify-content:center; flex-wrap:wrap; padding:1.25rem 0 }
/* Marquee variant (when .trust-bar-track exists) */
.trust-bar-track { display:flex; align-items:center; gap:3rem; padding:1.2rem 0; white-space:nowrap; animation:marqueeRun 32s linear infinite; width:max-content }
.trust-bar:hover .trust-bar-track { animation-play-state:paused }
@keyframes marqueeRun { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-item       { display:flex; align-items:center; gap:.6rem; font-size:.86rem; font-weight:500; color:var(--text-muted); white-space:nowrap }
.trust-item-icon  { font-size:1.1rem }
.trust-item strong { color:var(--text); font-weight:600 }
.trust-sep        { width:4px; height:4px; background:var(--border2); border-radius:50%; flex-shrink:0 }

/* ─── PRODUCT CARDS ──────────────────────────────────────────── */
.product-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-spring);
  position:relative; transform-style:preserve-3d;
}
.product-card::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(245,166,35,.09), transparent 58%);
  opacity:0; transition:opacity .4s;
}
.product-card:hover::before { opacity:1 }
.product-card:hover {
  border-color:rgba(245,166,35,.3);
  transform:translateY(-8px);
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 50px rgba(245,166,35,.08);
}
.product-card-badge {
  position:absolute; top:1rem; left:1rem;
  padding:.3rem .8rem; border-radius:var(--r-full);
  font-size:.71rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; z-index:3;
}
.badge-popular { background:var(--grad-gold); color:#0a0a0a; box-shadow:0 2px 14px rgba(245,166,35,.5) }
.badge-new     { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 2px 14px rgba(16,185,129,.4) }
.badge-value   { background:linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff; box-shadow:0 2px 14px rgba(139,92,246,.4) }
.product-card-img {
  aspect-ratio:4/3; overflow:hidden; position:relative;
  background:linear-gradient(145deg,var(--surface),var(--surface2));
}
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.product-card:hover .product-card-img img { transform:scale(1.09) }
.product-card-img::after {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(5,7,26,.7) 0%,transparent 55%);
  opacity:0; transition:opacity .4s;
}
.product-card:hover .product-card-img::after { opacity:1 }
.product-card-body     { padding:1.6rem; position:relative; z-index:2 }
.product-card-strength { font-size:.74rem; font-weight:800; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem }
.product-card-name     { font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:.65rem; line-height:1.3 }
.product-card-desc     { font-size:.88rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.25rem }
.product-card-features { display:flex; flex-direction:column; gap:.38rem; margin-bottom:1.5rem }
.product-feature       { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--text-muted); transition:color .2s }
.product-feature:hover { color:var(--text) }
.product-feature-dot   { width:5px; height:5px; background:var(--emerald); border-radius:50%; flex-shrink:0; box-shadow:0 0 6px rgba(16,185,129,.6) }
.product-card-cta {
  width:100%; padding:.8rem; background:var(--grad-gold); color:#0a0a0a;
  border-radius:var(--r-md); font-weight:700; font-size:.9rem; text-align:center;
  transition:all .28s var(--ease-spring); display:block;
  position:relative; overflow:hidden;
}
.product-card-cta::before {
  content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg); transition:left .5s var(--ease);
}
.product-card-cta:hover { box-shadow:var(--shadow-gold-lg); transform:translateY(-2px); color:#0a0a0a }
.product-card-cta:hover::before { left:160% }

/* ─── STATS ──────────────────────────────────────────────────── */
.stat-card {
  text-align:center; padding:2.25rem 1.5rem; border-radius:var(--r-lg);
  background:var(--grad-card); border:1px solid var(--border);
  transition:all .35s var(--ease); position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:100%; height:60%; border-radius:50%;
  background:radial-gradient(ellipse,rgba(245,166,35,.07) 0%,transparent 70%); pointer-events:none;
}
.stat-card:hover { border-color:rgba(245,166,35,.2); transform:translateY(-5px); box-shadow:var(--shadow-gold) }
.stat-number { font-family:var(--font-display); font-size:2.9rem; font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; letter-spacing:-.04em }
.stat-label  { font-size:.82rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; margin-top:.4rem; font-weight:500 }

/* ─── STEP / PROCESS ─────────────────────────────────────────── */
.step-line { position:relative; padding-left:3rem }
.step-line::before { content:''; position:absolute; left:19px; top:40px; bottom:-30px; width:2px; background:linear-gradient(to bottom,var(--gold-d),transparent) }
.step-line:last-child::before { display:none }
.step-number { position:absolute; left:0; top:0; width:40px; height:40px; background:var(--grad-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#0a0a0a; box-shadow:var(--shadow-gold) }

/* ─── COMPARISON TABLE ───────────────────────────────────────── */
.comparison-table { width:100%; border-collapse:separate; border-spacing:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md) }
.comparison-table th { background:var(--surface2); padding:1.1rem 1.5rem; text-align:left; font-size:.8rem; font-weight:700; color:var(--text-muted); letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--border2) }
.comparison-table th:first-child { width:35% }
.comparison-table th.highlight { background:rgba(245,166,35,.1); color:var(--gold) }
.comparison-table td { padding:.95rem 1.5rem; font-size:.9rem; color:var(--text-muted); border-bottom:1px solid var(--border); vertical-align:middle; transition:background .2s }
.comparison-table td:first-child { color:var(--text); font-weight:500 }
.comparison-table td.highlight { background:rgba(245,166,35,.05); color:var(--text) }
.comparison-table tr:last-child td { border-bottom:none }
.comparison-table tbody tr:hover td { background:rgba(255,255,255,.025) }
.comparison-table tbody tr:hover td.highlight { background:rgba(245,166,35,.08) }
.check { color:var(--emerald); font-size:1.1rem; text-shadow:0 0 10px rgba(16,185,129,.4) }
.cross { color:#f87171; font-size:1.1rem }

/* ─── FAQ ACCORDION ──────────────────────────────────────────── */
.faq-item { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-bottom:.75rem; transition:border-color .3s, box-shadow .3s }
.faq-item:hover { border-color:var(--border2) }
.faq-item.open  { border-color:rgba(245,166,35,.22); box-shadow:0 6px 30px rgba(0,0,0,.25) }
.faq-question {
  width:100%; text-align:left; padding:1.25rem 1.5rem; background:transparent;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--font-heading); font-size:1rem; font-weight:600; color:var(--text);
  cursor:pointer; transition:background .2s;
}
.faq-question:hover { background:rgba(255,255,255,.02) }
.faq-item.open .faq-question { background:rgba(245,166,35,.03) }
.faq-arrow { width:28px; height:28px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .35s var(--ease-spring) }
.faq-arrow svg { width:14px; height:14px; fill:var(--text-muted); transition:transform .35s var(--ease-spring), fill .3s }
.faq-item.open .faq-arrow { background:rgba(245,166,35,.15); transform:scale(1.1) }
.faq-item.open .faq-arrow svg { transform:rotate(180deg); fill:var(--gold) }
.faq-answer       { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(0,1,.3,1) }
.faq-answer-inner { padding:0 1.5rem 1.4rem; color:var(--text-muted); font-size:.95rem; line-height:1.8 }
.faq-item.open .faq-answer { max-height:500px }

/* ─── BLOG CARDS ─────────────────────────────────────────────── */
.blog-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  transition:all .38s var(--ease); position:relative;
}
.blog-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(245,166,35,.06), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.blog-card:hover::before { opacity:1 }
.blog-card:hover { border-color:rgba(245,166,35,.2); transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.blog-card-img { aspect-ratio:16/9; overflow:hidden; background:linear-gradient(145deg,var(--surface),var(--surface2)); position:relative }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.blog-card:hover .blog-card-img img { transform:scale(1.07) }
.blog-card-img::after { content:''; position:absolute; bottom:0; left:0; right:0; height:55%; background:linear-gradient(to top,rgba(5,7,26,.8),transparent); opacity:0; transition:opacity .4s; z-index:2 }
.blog-card:hover .blog-card-img::after { opacity:1 }
.blog-card-body    { padding:1.6rem; position:relative; z-index:2 }
.blog-tag { display:inline-flex; align-items:center; padding:.25rem .75rem; background:rgba(245,166,35,.09); color:var(--gold); border-radius:var(--r-full); font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.9rem; border:1px solid rgba(245,166,35,.15) }
.blog-card-title   { font-size:1.1rem; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:.65rem; transition:color .2s }
.blog-card:hover .blog-card-title { color:var(--gold-l) }
.blog-card-excerpt { font-size:.88rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.25rem }
.blog-card-meta    { display:flex; align-items:center; gap:1rem; font-size:.78rem; color:var(--text-dim) }
.blog-card-meta span { display:flex; align-items:center; gap:.35rem }
.blog-read-more    { display:inline-flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:700; color:var(--gold); margin-top:1rem; transition:gap .25s var(--ease-spring) }
.blog-card:hover .blog-read-more { gap:.75rem }

/* ─── TESTIMONIALS ───────────────────────────────────────────── */
.testimonial-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:2rem;
  transition:all .35s var(--ease); position:relative; overflow:hidden;
}
.testimonial-card::before { content:''; position:absolute; top:0; right:0; width:80px; height:80px; background:radial-gradient(circle at top right,rgba(245,166,35,.08),transparent 65%) }
.testimonial-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.testimonial-stars { display:flex; gap:.3rem; margin-bottom:1rem; color:var(--gold); font-size:1rem }
.testimonial-text { font-size:.95rem; color:var(--text-muted); line-height:1.82; font-style:italic; margin-bottom:1.5rem; position:relative; padding-left:1.75rem }
.testimonial-text::before { content:'"'; position:absolute; left:0; top:-.4rem; font-size:2.8rem; color:var(--gold); line-height:1; font-family:Georgia,serif; opacity:.45 }
.testimonial-author { display:flex; align-items:center; gap:.85rem }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#0a0a0a; flex-shrink:0; box-shadow:var(--shadow-gold) }
.testimonial-name { font-weight:600; font-size:.95rem; color:var(--text) }
.testimonial-role { font-size:.8rem; color:var(--text-dim) }

/* ─── CTA BANNER ─────────────────────────────────────────────── */
.cta-banner {
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:4.5rem 3rem; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before { content:''; position:absolute; inset:0; background:var(--grad-hero); opacity:.55; pointer-events:none }
.cta-banner::after  { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; height:400px; background:radial-gradient(circle,rgba(245,166,35,.07) 0%,transparent 70%); border-radius:50%; animation:pulseGlow 6s ease-in-out infinite }
.cta-banner-content { position:relative; z-index:1 }
.cta-banner h2   { margin-bottom:1rem }
.cta-banner p    { margin-bottom:2rem; max-width:560px; margin-left:auto; margin-right:auto }
.cta-banner .actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ─── STICKY CTA ─────────────────────────────────────────────── */
.sticky-cta {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:900;
  background:var(--grad-gold); color:#0a0a0a;
  padding:.75rem 1.5rem; border-radius:var(--r-full); font-weight:700; font-size:.88rem;
  display:flex; align-items:center; gap:.5rem;
  transition:all .32s var(--ease-spring);
  animation:ctaPulse 3s ease-in-out infinite;
  overflow:hidden;
}
.sticky-cta::before {
  content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg); transition:left .5s var(--ease);
}
.sticky-cta:hover { transform:translateY(-4px) scale(1.06); box-shadow:0 14px 44px rgba(245,166,35,.55); color:#0a0a0a; animation:none }
.sticky-cta:hover::before { left:160% }
.sticky-cta.hidden { transform:translateY(40px); opacity:0; pointer-events:none; animation:none }
@keyframes ctaPulse { 0%,100%{box-shadow:0 8px 32px rgba(245,166,35,.4), 0 0 0 0 rgba(245,166,35,.25)} 50%{box-shadow:0 8px 32px rgba(245,166,35,.4), 0 0 0 10px rgba(245,166,35,0)} }
.sticky-cta-pulse { width:8px; height:8px; background:#0a0a0a; border-radius:50%; animation:blink 1.5s ease-in-out infinite }

/* ─── DISCLOSURE BAR ─────────────────────────────────────────── */
.disclosure-bar { background:rgba(59,130,246,.07); border-bottom:1px solid rgba(59,130,246,.14); padding:.55rem 0; font-size:.78rem; color:var(--text-dim); text-align:center }
.disclosure-bar a { color:var(--blue); text-decoration:underline; opacity:.7 }
.disclosure-bar a:hover { opacity:1 }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:5.5rem 0 2.5rem; position:relative; overflow:hidden;
}
.footer::before {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:700px; height:200px;
  background:radial-gradient(ellipse,rgba(245,166,35,.04) 0%,transparent 70%);
  pointer-events:none;
}
.footer-grid  { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:4rem }
.footer-logo  { display:flex; align-items:center; gap:.65rem; margin-bottom:1.2rem }
.footer-desc  { font-size:.9rem; color:var(--text-muted); line-height:1.82; max-width:320px; margin-bottom:1.5rem }
.footer-social { display:flex; gap:.65rem }
.footer-social a { width:38px; height:38px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--text-muted); transition:all .28s var(--ease-spring) }
.footer-social a:hover { background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); color:var(--gold); transform:translateY(-3px) }
.footer-heading { font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.3rem }
.footer-links   { display:flex; flex-direction:column; gap:.55rem }
.footer-links a { font-size:.88rem; color:var(--text-muted); transition:all .22s; line-height:1.4; position:relative; padding-left:0 }
.footer-links a::before { content:'→'; position:absolute; left:-16px; opacity:0; color:var(--gold); transition:all .22s; font-size:.74rem }
.footer-links a:hover { color:var(--gold); padding-left:18px }
.footer-links a:hover::before { opacity:1; left:0 }
.footer-bottom      { border-top:1px solid var(--border); padding-top:2rem; display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.footer-copy        { font-size:.82rem; color:var(--text-dim) }
.footer-copy a      { color:var(--text-muted) }
.footer-copy a:hover{ color:var(--gold) }
.footer-disclaimer  { font-size:.76rem; color:var(--text-dim); max-width:700px; line-height:1.68 }
.footer-disclaimer a { color:var(--text-dim); text-decoration:underline; opacity:.7 }

/* ─── PAGE HERO ──────────────────────────────────────────────── */
.page-hero { padding:10rem 0 6rem; background:var(--bg2); position:relative; overflow:hidden; text-align:center }
.page-hero::before { content:''; position:absolute; inset:0; background:var(--grad-hero); opacity:.7 }
.page-hero::after  { content:''; position:absolute; bottom:-1px; left:0; right:0; height:80px; background:linear-gradient(to bottom,transparent,var(--bg)); pointer-events:none }
.page-hero-content { position:relative; z-index:1 }
.page-hero h1 { margin-bottom:1rem }
.page-hero p  { max-width:580px; margin:0 auto; font-size:1.12rem }
.breadcrumb   { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-bottom:1.5rem; font-size:.84rem; color:var(--text-dim) }
.breadcrumb a { color:var(--text-muted); transition:color .2s }
.breadcrumb a:hover { color:var(--gold) }
.breadcrumb span { color:var(--text-dim) }

/* ─── ARTICLE / BLOG ─────────────────────────────────────────── */
.article-body { font-size:1.06rem; line-height:1.9; color:var(--text-muted) }
.article-body h2 { font-size:1.78rem; color:var(--text); margin:2.8rem 0 1rem; padding-bottom:.65rem; border-bottom:1px solid var(--border); position:relative }
.article-body h2::after { content:''; position:absolute; bottom:-1px; left:0; width:55px; height:2px; background:var(--grad-gold); border-radius:1px }
.article-body h3 { font-size:1.3rem; color:var(--text); margin:2rem 0 .8rem }
.article-body h4 { font-size:1.1rem; color:var(--text); margin:1.5rem 0 .5rem }
.article-body p  { margin-bottom:1.35rem }
.article-body ul,.article-body ol { margin:1rem 0 1.35rem 1.5rem; list-style:disc }
.article-body ol { list-style:decimal }
.article-body li { margin-bottom:.55rem }
.article-body blockquote { border-left:3px solid var(--gold); padding:1.2rem 1.8rem; background:rgba(245,166,35,.04); border-radius:0 var(--r-md) var(--r-md) 0; margin:2rem 0; font-style:italic; color:var(--text); font-size:1.06rem; position:relative }
.article-body blockquote::before { content:'"'; position:absolute; top:-.5rem; left:1rem; font-size:4rem; color:var(--gold); opacity:.18; font-family:Georgia,serif; line-height:1 }
.article-body strong { color:var(--text); font-weight:700 }
.article-body a { color:var(--gold); text-decoration:underline; opacity:.88; transition:opacity .2s }
.article-body a:hover { opacity:1 }
/* Buttons inside article body must NOT inherit link colour/underline/opacity */
.article-body .btn,
.article-body .btn:hover { text-decoration:none; opacity:1 }
.article-body .btn-primary,
.article-body .btn-primary:hover { color:#0a0a0a }
.article-body .btn-ghost,
.article-body .btn-ghost:hover { color:var(--text) }
.article-body .btn-secondary,
.article-body .btn-secondary:hover { color:var(--text) }
.article-body .btn-emerald,
.article-body .btn-emerald:hover { color:#fff }
.article-body .note-box { background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.18); border-radius:var(--r-md); padding:1.3rem 1.6rem; margin:1.75rem 0 }
.article-body .note-box p { margin:0; font-size:.92rem }
.article-cta-box {
  background:linear-gradient(135deg,rgba(245,166,35,.08),rgba(16,185,129,.05));
  border:1px solid rgba(245,166,35,.2); border-radius:var(--r-lg);
  padding:2.25rem; margin:3rem 0; text-align:center; position:relative; overflow:hidden;
}
.article-cta-box::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:150px; background:radial-gradient(ellipse,rgba(245,166,35,.06),transparent 70%); pointer-events:none }
.article-cta-box h3 { color:var(--text); margin-bottom:.65rem; font-size:1.25rem }
.article-cta-box p  { font-size:.92rem; margin-bottom:1.3rem }
.article-toc {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:1.5rem; margin-bottom:2.5rem;
  position:relative; overflow:hidden;
}
.article-toc::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--grad-gold) }
.article-toc h4  { color:var(--text); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem }
.article-toc ol  { list-style:none; margin:0; counter-reset:toc }
.article-toc li  { counter-increment:toc; padding:.3rem 0; font-size:.88rem }
.article-toc li::before { content:counter(toc)'. '; color:var(--gold); font-weight:700 }
.article-toc a   { color:var(--text-muted); transition:color .2s }
.article-toc a:hover { color:var(--gold) }
.article-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:1.3rem 0; border-bottom:1px solid var(--border); margin-bottom:2.5rem; font-size:.88rem; color:var(--text-dim) }
.article-meta span { display:flex; align-items:center; gap:.4rem }

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group   { margin-bottom:1.5rem }
.form-label   { display:block; font-size:.86rem; font-weight:600; color:var(--text); margin-bottom:.5rem; letter-spacing:.02em }
.form-input,.form-textarea,.form-select {
  width:100%; background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r-md); padding:.9rem 1.15rem; color:var(--text);
  font-size:.95rem; transition:border-color .25s, box-shadow .25s, background .25s; outline:none;
}
.form-textarea { min-height:140px; resize:vertical; line-height:1.65 }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-dim) }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,.1); background:var(--surface2) }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l-7-7h14z' fill='%238898b8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:10px; padding-right:2.5rem; cursor:pointer }
.form-select option { background:var(--surface2) }

/* ─── RESEARCH HIGHLIGHT ─────────────────────────────────────── */
.research-highlight { background:linear-gradient(135deg,rgba(245,166,35,.06),rgba(16,185,129,.04)); border:1px solid rgba(245,166,35,.16); border-radius:var(--r-lg); padding:2.5rem; position:relative; overflow:hidden }
.research-highlight::before { content:'🔬'; position:absolute; right:1.5rem; top:1.5rem; font-size:3.5rem; opacity:.1 }

/* ─── BADGES ─────────────────────────────────────────────────── */
.badge        { display:inline-flex; align-items:center; padding:.25rem .75rem; border-radius:var(--r-full); font-size:.74rem; font-weight:700; letter-spacing:.04em }
.badge-gold   { background:rgba(245,166,35,.1);   color:var(--gold);   border:1px solid rgba(245,166,35,.2) }
.badge-emerald{ background:rgba(16,185,129,.1);   color:var(--emerald);border:1px solid rgba(16,185,129,.2) }
.badge-blue   { background:rgba(59,130,246,.1);   color:var(--blue);   border:1px solid rgba(59,130,246,.2) }
.badge-purple { background:rgba(139,92,246,.1);   color:var(--purple); border:1px solid rgba(139,92,246,.2) }

/* ─── TIMELINE ───────────────────────────────────────────────── */
.timeline::before { content:''; position:absolute; left:7px; top:10px; bottom:10px; width:2px; background:linear-gradient(to bottom,var(--gold-d),transparent) }
.timeline { position:relative; padding-left:2rem }
.timeline-item { position:relative; margin-bottom:2rem }
.timeline-dot  { position:absolute; left:-2rem; top:4px; width:16px; height:16px; background:var(--grad-gold); border-radius:50%; box-shadow:var(--shadow-gold) }
.timeline-date { font-size:.8rem; color:var(--text-dim); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.35rem }
.timeline-content h4 { color:var(--text); margin-bottom:.4rem; font-size:1rem }
.timeline-content p  { font-size:.9rem; line-height:1.65 }

/* ─── DIVIDERS ───────────────────────────────────────────────── */
.divider      { border:none; border-top:1px solid var(--border); margin:0 }
.divider-gold { border-color:rgba(245,166,35,.18) }

/* ─── SCROLL REVEAL ──────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
[data-reveal].revealed { opacity:1; transform:none }
[data-reveal="left"]  { transform:translateX(-30px) }
[data-reveal="left"].revealed  { transform:none }
[data-reveal="right"] { transform:translateX(30px) }
[data-reveal="right"].revealed { transform:none }
[data-reveal="scale"] { transform:scale(.93); opacity:0 }
[data-reveal="scale"].revealed { transform:scale(1); opacity:1 }
[data-reveal="fade"]  { transform:none }
[data-reveal="fade"].revealed  { opacity:1 }
.delay-1 { transition-delay:.08s!important }
.delay-2 { transition-delay:.18s!important }
.delay-3 { transition-delay:.28s!important }
.delay-4 { transition-delay:.38s!important }
.delay-5 { transition-delay:.48s!important }
.delay-6 { transition-delay:.58s!important }

/* ─── GRADIENT TEXT ──────────────────────────────────────────── */
.gradient-text      { background:linear-gradient(135deg,#f5a623 0%,#fbbf24 45%,#e09515 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gradient-text-cool { background:linear-gradient(135deg,#3b82f6,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gradient-text-bio  { background:linear-gradient(135deg,#10b981,#3b82f6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ─── UTILITIES ──────────────────────────────────────────────── */
.hidden      { display:none!important }
.sr-only     { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0 }
.mb-0        { margin-bottom:0!important }
.mt-auto     { margin-top:auto }
.w-full      { width:100% }
.relative    { position:relative }
.overflow-hidden { overflow:hidden }
.rounded-full    { border-radius:var(--r-full) }
.border-top      { border-top:1px solid var(--border) }
.border-bottom   { border-bottom:1px solid var(--border) }

/* ─── PAGE HELPERS ───────────────────────────────────────────── */
.legal-content h2 { font-size:1.4rem; color:var(--text); margin:2.5rem 0 .85rem; padding-bottom:.5rem; border-bottom:1px solid var(--border) }
.legal-content h3 { font-size:1.1rem; color:var(--text); margin:1.5rem 0 .5rem }
.legal-content p,.legal-content li { font-size:.95rem; color:var(--text-muted); line-height:1.88; margin-bottom:.75rem }
.legal-content ul { list-style:disc; padding-left:1.5rem }
.legal-content a  { color:var(--gold) }
.contact-info-item { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem; background:var(--grad-card); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:1rem }
.contact-icon      { width:42px; height:42px; border-radius:var(--r-sm); background:rgba(245,166,35,.1); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; margin-top:.1rem }
.contact-info-label{ font-size:.8rem; color:var(--text-dim); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.25rem }
.contact-info-value{ font-size:.95rem; color:var(--text); font-weight:500 }
.contact-info-sub  { font-size:.82rem; color:var(--text-muted); margin-top:.15rem }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  section { padding:4.5rem 0 }
  .section-lg { padding:5.5rem 0 }
  .hero { padding:7rem 0 4rem }
  .hero-stats { gap:1.5rem }
  .hero-stat-value { font-size:1.6rem }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
  .nav-links { display:none }
  .nav-mobile-toggle { display:flex }
  .cta-banner { padding:3rem 1.5rem }
  .footer-grid { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; gap:1rem }
  h1 { font-size:2.2rem }
  h2 { font-size:1.75rem }
  .hero-float-card.card-2 { display:none }
  .comparison-table { font-size:.8rem }
  .comparison-table th,.comparison-table td { padding:.7rem .85rem }
  body::after { opacity:.018 }
}
@media (max-width:480px) {
  .container { padding:0 1rem }
  .hero-actions { flex-direction:column; align-items:flex-start }
  .btn-lg { padding:.9rem 1.8rem; font-size:1rem }
  .hero-stats { flex-direction:column; gap:1.5rem }
  .sticky-cta { bottom:1rem; right:1rem; font-size:.82rem; padding:.65rem 1.15rem }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CINEMATIC ARTICLE HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.article-hero-cinematic {
  position: relative;
  min-height: clamp(560px, 70vh, 760px);
  display: flex;
  align-items: flex-end;
  padding-bottom: 5.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Background photo — desaturated & dimmed, slow zoom in */
.ahc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.07);
  filter: saturate(0.28) brightness(0.28) contrast(1.1);
  will-change: transform;
  animation: ahcBgZoom 16s cubic-bezier(.18,0,.78,1) forwards;
}
@keyframes ahcBgZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1.00); }
}

/* Multi-layer cinematic gradient overlay */
.ahc-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5,7,26,.82) 0%,
      rgba(5,7,26,.18) 38%,
      rgba(5,7,26,.62) 68%,
      rgba(5,7,26,1)   100%
    ),
    linear-gradient(105deg,
      rgba(5,7,26,.65) 0%,
      transparent 45%
    );
  z-index: 1;
}

/* Fine grid texture — masked to centre */
.ahc-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 42% 55%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 75% at 42% 55%, black 0%, transparent 100%);
  z-index: 2;
}

/* Glow orbs */
.ahc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  pointer-events: none;
  z-index: 1;
}
.ahc-orb-1 {
  width: 640px; height: 420px;
  background: radial-gradient(circle, rgba(245,166,35,.17) 0%, transparent 65%);
  top: -60px; right: -80px;
  animation: orbFloat 10s ease-in-out infinite alternate;
}
.ahc-orb-2 {
  width: 520px; height: 480px;
  background: radial-gradient(circle, rgba(59,130,246,.13) 0%, transparent 65%);
  bottom: -100px; left: -60px;
  animation: orbFloat 14s ease-in-out infinite alternate-reverse;
}
/* Emerald variant orbs */
.article-hero-cinematic.ahc-emerald .ahc-orb-1 {
  background: radial-gradient(circle, rgba(16,185,129,.17) 0%, transparent 65%);
}
.article-hero-cinematic.ahc-emerald .ahc-orb-2 {
  background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 65%);
}

/* Bottom fade into page background */
.ahc-fade {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 9;
  pointer-events: none;
}

/* Inner content wrapper */
.ahc-inner { position: relative; z-index: 10; width: 100%; }
.ahc-content { max-width: 820px; padding-top: 8.5rem; }

/* Staggered entrance animation */
.ahc-content > * {
  animation: ahcReveal .8s cubic-bezier(.16,1,.3,1) both;
  opacity: 0;
}
.ahc-content > *:nth-child(1) { animation-delay: .05s; }
.ahc-content > *:nth-child(2) { animation-delay: .18s; }
.ahc-content > *:nth-child(3) { animation-delay: .30s; }
.ahc-content > *:nth-child(4) { animation-delay: .40s; }
.ahc-content > *:nth-child(5) { animation-delay: .48s; }
@keyframes ahcReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb in hero */
.ahc-breadcrumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .79rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.ahc-breadcrumb a { color: rgba(255,255,255,.42); transition: color .2s; }
.ahc-breadcrumb a:hover { color: rgba(255,255,255,.85); }
.ahc-breadcrumb .sep { color: rgba(255,255,255,.2); }
.ahc-breadcrumb .cur { color: rgba(255,255,255,.65); }

/* Category pill */
.ahc-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .32rem .95rem .32rem .7rem;
  border-radius: var(--r-full);
  background: rgba(245,166,35,.14);
  border: 1px solid rgba(245,166,35,.32);
  color: var(--gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 1.35rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.article-hero-cinematic.ahc-emerald .ahc-pill {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.32);
  color: var(--emerald);
}

/* Hero headline */
.ahc-title {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.14;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
  margin: 0 0 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Meta row */
.ahc-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  font-size: .83rem;
  color: rgba(255,255,255,.52);
}
.ahc-meta span { display: flex; align-items: center; gap: .38rem; }

/* Tags */
.ahc-tags { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ── article-body premium section dividers ── */
.article-body h2 {
  position: relative;
  padding-top: 1rem;
}
/* Enhanced section scroll anchor spacing */
.article-body h2[id], .article-body h3[id] {
  scroll-margin-top: 90px;
}

/* ── Premium inline image wrapper (optional) ── */
.article-img-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 2rem 0;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.article-img-wrap img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
}
.article-img-wrap:hover img { transform: scale(1.02); }

/* ── stat chips inside article ── */
.article-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.75rem 0;
}
.article-stat-chip {
  flex: 1;
  min-width: 140px;
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.article-stat-chip .asc-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: .3rem;
}
.article-stat-chip .asc-label {
  font-size: .78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .article-hero-cinematic { min-height: 500px; padding-bottom: 3.5rem; }
  .ahc-content { padding-top: 6.5rem; }
  .ahc-title { font-size: 1.72rem; letter-spacing: -.01em; }
  .ahc-meta { gap: .75rem; font-size: .79rem; }
}
@media (max-width: 480px) {
  .article-hero-cinematic { min-height: 430px; }
  .ahc-content { padding-top: 5.5rem; }
  .ahc-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — PREMIUM OVERRIDES
   Body: #f7f9ff soft blue-white | Cards: white | Dark islands: hero + footer
   ═══════════════════════════════════════════════════════════════════ */

/* ── Body: ambient warm+cool wash for premium depth ── */
body {
  background:
    radial-gradient(ellipse 70% 50% at 10% 6%, rgba(245,166,35,.05) 0%, transparent 52%),
    radial-gradient(ellipse 55% 60% at 90% 94%, rgba(16,185,129,.04) 0%, transparent 52%),
    var(--bg);
}
/* Reduce grain opacity for light background */
body::after { opacity:.014 }
@media (max-width:768px) { body::after { opacity:.009 } }

/* ── Scrollbar ── */
::-webkit-scrollbar-track { background:#eef2ff }

/* ──────────────────────────────────────────────
   NAVIGATION
   Base state: transparent + dark hero → light text
   Scrolled: white frosted glass + dark text
   ────────────────────────────────────────────── */
.nav-logo span { color:#fff }
.nav-mobile-toggle span { background:#fff }
.nav-links a { color:rgba(255,255,255,.68) }
.nav-links a::after { background:rgba(255,255,255,.7) }
.nav-links a:hover,.nav-links a.active { color:#fff; background:rgba(255,255,255,.1) }

.navbar.scrolled {
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom-color:rgba(10,15,60,.08) !important;
  box-shadow:0 4px 32px rgba(10,15,60,.09), 0 1px 0 rgba(255,255,255,.95) !important;
}
.navbar.scrolled .nav-logo span { color:#0a0f23 }
.navbar.scrolled .nav-mobile-toggle span { background:#0a0f23 }
.navbar.scrolled .nav-links a { color:#4a5580 }
.navbar.scrolled .nav-links a::after { background:var(--gold) }
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active { color:#0a0f23; background:rgba(10,15,60,.05) }

/* Mobile nav — always fully expanded — needs white bg */
.nav-mobile {
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
}
.nav-mobile a { color:#4a5580 !important; border-color:rgba(10,15,60,.09) !important }
.nav-mobile a:hover { color:#0a0f23 !important; background:var(--surface2) !important; border-color:rgba(10,15,60,.15) !important }
.nav-mobile .nav-cta { background:var(--grad-gold) !important; color:#0a0a0a !important; border:none !important }

/* ──────────────────────────────────────────────
   HERO — keep premium deep dark
   ────────────────────────────────────────────── */
.hero { background:#05071a }
.hero-bg { background:#05071a !important }
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}
.hero h1 { color:#eef2ff }
.hero-desc { color:#8898b8 }
.hero-stat-value { color:#eef2ff }
.hero-stat-label { color:#49587a }
.hero-stats { border-top-color:rgba(255,255,255,.07) }
.hero-badge { color:var(--gold) }
.scroll-indicator-text { color:#49587a }
.scroll-indicator-dot { border-color:rgba(245,166,35,.35) }

/* Hero buttons on dark background */
.hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.28) }
.hero .btn-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.42); color:#fff }
.hero .btn-secondary { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2) }
.hero .btn-secondary:hover { background:rgba(255,255,255,.16); color:#fff }

/* Hero float cards — stay dark against the dark hero */
.hero-float-card {
  background:rgba(10,15,35,.88) !important;
  border-color:rgba(255,255,255,.1) !important;
}
.hero-float-text { color:#eef2ff }
.hero-float-sub  { color:#8898b8 }

/* ──────────────────────────────────────────────
   CARDS (light theme glassmorphism)
   ────────────────────────────────────────────── */
.card {
  box-shadow:0 2px 18px rgba(10,15,60,.07);
  border-color:rgba(10,15,60,.07);
}
.card:hover {
  box-shadow:0 16px 56px rgba(10,15,60,.14);
  border-color:rgba(10,15,60,.1);
}
.card-glass {
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(10,15,60,.08) !important;
  box-shadow:0 4px 24px rgba(10,15,60,.08) !important;
}

/* Card icon tints — slightly stronger on light bg */
.card-icon-gold    { background:rgba(245,166,35,.14) }
.card-icon-emerald { background:rgba(5,150,105,.13) }
.card-icon-blue    { background:rgba(37,99,235,.12) }
.card-icon-purple  { background:rgba(124,58,237,.12) }

/* ── Product cards ── */
.product-card {
  background:var(--surface);
  box-shadow:0 2px 18px rgba(10,15,60,.07);
}
.product-card:hover {
  box-shadow:0 24px 64px rgba(10,15,60,.14), 0 0 40px rgba(245,166,35,.07);
}
.product-card-img { background:linear-gradient(145deg, var(--surface2), var(--surface3)) }
.product-card-img::after {
  background:linear-gradient(to top, rgba(10,15,60,.2) 0%, transparent 55%) !important;
}

/* ── Stat cards ── */
.stat-card {
  box-shadow:0 4px 22px rgba(10,15,60,.08);
  border-color:rgba(10,15,60,.07);
}

/* ── Blog cards ── */
.blog-card {
  background:var(--surface);
  box-shadow:0 2px 16px rgba(10,15,60,.07);
  border-color:rgba(10,15,60,.07);
}
.blog-card:hover { box-shadow:0 20px 56px rgba(10,15,60,.13) }
.blog-card-img { background:linear-gradient(145deg, var(--surface2), var(--surface3)) }
.blog-card-img::after {
  background:linear-gradient(to top, rgba(10,15,60,.3), transparent) !important;
}

/* ── Testimonial cards ── */
.testimonial-card {
  box-shadow:0 2px 16px rgba(10,15,60,.07);
  border-color:rgba(10,15,60,.07);
}

/* ──────────────────────────────────────────────
   SECTION COMPONENTS
   ────────────────────────────────────────────── */

/* Trust bar */
.trust-bar {
  background:linear-gradient(to right, #fff 0%, var(--surface2) 50%, #fff 100%);
  border-color:rgba(10,15,60,.07);
}

/* Section badge — deeper gold for light bg */
.section-badge {
  background:rgba(217,119,6,.08);
  border-color:rgba(217,119,6,.2);
}

/* Comparison table */
.comparison-table th { background:var(--surface2); color:var(--text-muted) }
.comparison-table th.highlight { background:rgba(217,119,6,.1); color:var(--gold-d) }
.comparison-table td { color:var(--text-muted) }
.comparison-table td:first-child { color:var(--text) }
.comparison-table tbody tr:hover td { background:rgba(10,15,60,.022) }
.comparison-table tbody tr:hover td.highlight { background:rgba(217,119,6,.07) }

/* FAQ accordion */
.faq-item { background:var(--surface); box-shadow:0 2px 14px rgba(10,15,60,.06) }
.faq-item:hover { border-color:rgba(10,15,60,.13) }
.faq-item.open { box-shadow:0 8px 32px rgba(10,15,60,.1) }
.faq-question { color:var(--text) }
.faq-question:hover { background:rgba(10,15,60,.025) !important }
.faq-item.open .faq-question { background:rgba(217,119,6,.04) !important }
.faq-arrow { background:var(--surface2) !important }

/* Forms */
.form-input,.form-textarea,.form-select {
  background:var(--surface);
  border-color:rgba(10,15,60,.14);
  color:var(--text);
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-dim) }
.form-input:focus,.form-textarea:focus,.form-select:focus {
  background:var(--surface);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(217,119,6,.1);
}
.form-select option { background:var(--surface); color:var(--text) }

/* CTA banner — warm/cool pastel gradient on light */
.cta-banner {
  background:linear-gradient(135deg, #fffbf2 0%, #f0f7ff 50%, #faf0ff 100%) !important;
  border-color:rgba(217,119,6,.16) !important;
}

/* Research highlight box */
.research-highlight {
  background:linear-gradient(135deg, rgba(217,119,6,.07) 0%, rgba(5,150,105,.05) 100%);
  border-color:rgba(217,119,6,.18);
}

/* Article CTA box */
.article-cta-box {
  background:linear-gradient(135deg, rgba(217,119,6,.09) 0%, rgba(5,150,105,.06) 100%) !important;
  border-color:rgba(217,119,6,.22) !important;
  box-shadow:0 4px 24px rgba(10,15,60,.07);
}

/* ──────────────────────────────────────────────
   PAGE HERO (inner pages) — dark like homepage
   ────────────────────────────────────────────── */
.page-hero { background:#07091e !important }
/* Kill the bottom fade gradient — it caused the ugly dark→white stripe */
.page-hero::after { display:none !important }
/* Light text on dark hero */
.page-hero h1 { color:#eef2ff !important }
.page-hero p  { color:#8898b8 !important }
.breadcrumb   { color:#49587a }
.breadcrumb a { color:#8898b8 }
.breadcrumb a:hover { color:var(--gold) }
.breadcrumb span { color:#49587a }

/* ──────────────────────────────────────────────
   ARTICLE BODY (blog pages) — optimised for light
   ────────────────────────────────────────────── */
.article-body { color:var(--text-muted) }
.article-body h2,
.article-body h3,
.article-body h4 { color:var(--text) }
.article-body strong { color:var(--text) }
.article-body blockquote { background:rgba(217,119,6,.05) }
.article-toc {
  background:var(--surface);
  border-color:rgba(10,15,60,.08);
  box-shadow:0 2px 16px rgba(10,15,60,.07);
}
.article-img-wrap {
  border-color:rgba(10,15,60,.08);
  box-shadow:0 8px 36px rgba(10,15,60,.1);
}
.article-stat-chip {
  background:var(--surface);
  border-color:rgba(10,15,60,.08);
  box-shadow:0 2px 10px rgba(10,15,60,.06);
}
.article-meta { color:var(--text-dim); border-color:rgba(10,15,60,.08) }

/* ──────────────────────────────────────────────
   FOOTER — premium deep dark gradient
   ────────────────────────────────────────────── */
.footer {
  background:linear-gradient(160deg, #070a1f 0%, #04060f 55%, #07091e 100%) !important;
  border-top-color:rgba(255,255,255,.05) !important;
}
/* All footer typography → hardcode light values */
.footer-desc     { color:#8898b8 !important }
.footer-heading  { color:#49587a !important }
.footer-links a  { color:#8898b8 !important }
.footer-links a:hover { color:#f59e0b !important; padding-left:18px !important }
.footer-copy     { color:#49587a !important }
.footer-copy a   { color:#8898b8 !important }
.footer-copy a:hover { color:#f59e0b !important }
.footer-disclaimer   { color:#49587a !important }
.footer-disclaimer a { color:#49587a !important }
.footer-social a {
  background:#0c1528 !important;
  border-color:rgba(255,255,255,.06) !important;
  color:#8898b8 !important;
}
.footer-social a:hover {
  background:rgba(245,166,35,.1) !important;
  border-color:rgba(245,166,35,.28) !important;
  color:#f59e0b !important;
}
/* Footer logo — keep white */
.footer .nav-logo span   { color:#fff !important }
.footer .nav-logo span em { color:#f59e0b !important }

/* ──────────────────────────────────────────────
   MISC OVERRIDES
   ────────────────────────────────────────────── */
/* Disclosure bar — subtle blue tint on light */
.disclosure-bar { background:rgba(37,99,235,.05); border-color:rgba(37,99,235,.12) }

/* Dividers — dark-on-light */
.divider { border-color:rgba(10,15,60,.08) }
.divider-gold { border-color:rgba(217,119,6,.18) }

/* Contact info items */
.contact-info-item {
  background:var(--surface);
  border-color:rgba(10,15,60,.08);
  box-shadow:0 2px 14px rgba(10,15,60,.06);
}

/* Legal content */
.legal-content h2 { border-color:rgba(10,15,60,.08) }

/* Timeline */
.timeline::before { background:linear-gradient(to bottom, var(--gold-d), transparent) }

/* Sticky CTA — keep gold, no override needed */

/* ── Cinematic article hero: .ahc-fade already uses var(--bg) → fades to light bg ✓ ── */

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print {
  .navbar,.sticky-cta,.disclosure-bar,#reading-progress,body::after { display:none!important }
  body { background:#fff; color:#000 }
}