/* ─── ROOT ─── */
:root{
  --bg:#05080f;--bg2:#0a1020;--bg3:#0f1928;
  --border:rgba(255,255,255,.07);--border-hi:rgba(255,255,255,.13);
  --blue:var(--fi-gold);--blue-dim:rgba(var(--fi-gold-rgb),.14);
  --green:#22c55e;--green-dim:rgba(34,197,94,.14);
  --yellow:var(--fi-gold);--yellow-dim:rgba(var(--fi-gold-rgb),.14);
  --red:#ef4444;--accent:var(--fi-gold);
  --text:#e2e8f0;--muted:rgba(148,163,184,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Body — subtle dot-grid bg */
body{
  font-family:'Inter','Barlow Condensed',sans-serif;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;padding-bottom:90px;line-height:1.5;
}
html.light body{background:radial-gradient(ellipse 85% 55% at 12% 6%,rgba(var(--fi-gold-rgb),.13) 0%,transparent 48%),radial-gradient(ellipse 70% 45% at 88% 88%,rgba(79,70,229,.11) 0%,transparent 48%),radial-gradient(ellipse 50% 35% at 50% 50%,rgba(var(--fi-silver-rgb),.08) 0%,transparent 52%),linear-gradient(158deg,#e8eeff 0%,#f0f4ff 40%,#eaeffc 100%);color:#0f172a}
@media(min-width:1024px){body{padding-bottom:0}}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(var(--fi-gold-rgb),.055) 1px,transparent 1px);
  background-size:36px 36px;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;opacity:.018;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px;
}

/* ─── PLATFORM VIDEO ─── */
.fi-video{margin-top:8px}
.fi-video-grid{display:grid;gap:22px;align-items:center;padding:18px;border-radius:22px;border:1px solid rgba(var(--fi-gold-rgb),.18);background:linear-gradient(135deg,rgba(var(--fi-gold-rgb),.10),rgba(var(--fi-gold-rgb),.05) 60%,rgba(255,255,255,.02));box-shadow:0 30px 80px -40px rgba(var(--fi-gold-rgb),.55)}
@media(min-width:900px){.fi-video-grid{grid-template-columns:1.55fr 1fr;padding:22px;gap:30px}}
.fi-video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#02050c;border:1px solid rgba(255,255,255,.08)}
.fi-video-frame video,.fi-video-play{position:absolute;inset:0;width:100%;height:100%;border:0}
.fi-video-frame video{background:#000;object-fit:contain}
.fi-video-play picture{display:block;width:100%;height:100%}
.fi-video-frame .video-error{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;font-size:14px;color:#fff;background:#02050c}
.fi-video-play{padding:0;cursor:pointer;background:#02050c;display:block}
.fi-video-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fi-video-play:hover img{transform:scale(1.03)}
.fi-video-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(2,5,12,.05),rgba(2,5,12,.55))}
.fi-video-btn{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;color:#0a0f1a;background:linear-gradient(135deg,var(--fi-gold),var(--fi-gold-deep));box-shadow:0 0 0 10px rgba(var(--fi-gold-rgb),.18),0 18px 40px -10px rgba(0,0,0,.7);transition:transform .25s ease}
.fi-video-btn svg{margin-left:4px}
.fi-video-play:hover .fi-video-btn,.fi-video-play:focus-visible .fi-video-btn{transform:scale(1.08)}
.fi-video-play:focus-visible{outline:2px solid var(--fi-gold);outline-offset:-4px}
.fi-video-time{position:absolute;right:12px;bottom:12px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.65);padding:3px 8px;border-radius:6px}
.fi-video-h{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(28px,5vw,40px);line-height:1;letter-spacing:-.01em;margin:6px 0 12px}
.fi-video-p{font-size:15px;line-height:1.65;opacity:.75}
.fi-video-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fi-video-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s}
.fi-video-cta:hover{background:rgba(255,255,255,.08)}
.fi-video-cta--yt{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}
.fi-video-cta--yt i{color:#ef4444}
html.light .fi-video-frame{border-color:rgba(0,0,0,.08)}
html.light .fi-video-cta{border-color:rgba(15,23,42,.15);background:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){.fi-video-play img,.fi-video-btn{transition:none}.fi-video-play:hover img{transform:none}}

/* ─── GLASS ─── */
.glass{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border);background:rgba(255,255,255,.03)}
html.light .glass{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.09)}

/* ─── GRADIENT TEXT ─── */
.gradient-text{background:linear-gradient(90deg,var(--fi-gold),var(--fi-gold-deep));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── TICKER ─── */
.ticker-wrap{width:100%;overflow:hidden;background:linear-gradient(90deg,#000,#08101e,#000);border-bottom:1px solid rgba(var(--fi-gold-rgb),.18);padding:7px 0;position:sticky;top:0;z-index:200}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 80s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-content{display:inline-block;font-family:'Space Mono',monospace;font-size:clamp(9px,2vw,11px);color:#4ade80;font-weight:700;padding-right:60px;letter-spacing:.07em}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── NAV ─── */
nav.topnav{padding:0 16px;height:58px;display:flex;align-items:center;position:sticky;top:31px;z-index:150;background:rgba(5,8,15,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 4px 30px rgba(0,0,0,.45)}
@media(min-width:640px){nav.topnav{padding:0 24px}}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.nav-brand-main{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:clamp(17px,4vw,21px);text-transform:uppercase;letter-spacing:-.02em}
.nav-brand-sub{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;opacity:.28}
.live-badge{padding:5px 12px;border-radius:20px;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.08);font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;display:flex;align-items:center;gap:6px;color:#4ade80}
.theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .22s;color:var(--fi-gold);font-size:13px;flex-shrink:0}
.theme-btn:hover{background:rgba(var(--fi-gold-rgb),.12);border-color:rgba(var(--fi-gold-rgb),.35);box-shadow:0 0 14px rgba(var(--fi-gold-rgb),.2)}
html.light nav.topnav{background:rgba(255,255,255,.93);border-bottom-color:rgba(0,0,0,.07);box-shadow:0 4px 20px rgba(0,0,0,.08)}

/* ─── HAMBURGER BUTTON ─── */
.hamburger-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .22s;color:#e5e7eb;font-size:17px;flex-shrink:0;-webkit-tap-highlight-color:transparent;position:relative;z-index:160}
.hamburger-btn:hover{background:rgba(255,255,255,.08);border-color:var(--border-hi)}
.hamburger-btn.open{background:rgba(var(--fi-gold-rgb),.12);border-color:rgba(var(--fi-gold-rgb),.3);color:var(--fi-gold)}
html.light .hamburger-btn{color:#1e293b;border-color:rgba(0,0,0,.12)}

/* ─── HAMBURGER DROPDOWN ─── */
.hamburger-menu{position:fixed;top:90px;right:12px;width:272px;background:rgba(8,13,24,.97);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);z-index:145;overflow:hidden;transform:translateY(-14px) scale(.95);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.hamburger-menu.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
html.light .hamburger-menu{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1);box-shadow:0 20px 60px rgba(0,0,0,.15)}
.hm-header{padding:16px 18px 10px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:9px}
html.light .hm-header{border-bottom-color:rgba(0,0,0,.06)}
.hm-header-label{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;opacity:.38}
.hm-item{display:flex;align-items:center;gap:13px;padding:13px 18px;text-decoration:none;color:inherit;cursor:pointer;transition:background .18s;border:none;background:transparent;width:100%;text-align:left;-webkit-tap-highlight-color:transparent}
.hm-item:hover{background:rgba(255,255,255,.05)}
.hm-item:active{background:rgba(255,255,255,.09)}
html.light .hm-item:hover{background:rgba(0,0,0,.04)}
.hm-item-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.hm-item-text{display:flex;flex-direction:column;gap:2px}
.hm-item-name{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.hm-item-desc{font-family:'Space Mono',monospace;font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.36}
.hm-overlay{position:fixed;inset:0;z-index:140;display:none}
.hm-overlay.open{display:block}

/* ─── PULSE ─── */
.pulse-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;display:inline-block;flex-shrink:0;animation:pulse-anim 1.5s ease-in-out infinite;box-shadow:0 0 8px rgba(239,68,68,.6)}
@keyframes pulse-anim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.35)}}

/* ─── SENTIMENT BAR ─── */
.sentiment-bar{height:8px;border-radius:4px;background:linear-gradient(to right,#ef4444 0%,var(--fi-gold) 50%,#22c55e 100%);position:relative;margin:12px 0 6px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.marker{position:absolute;top:-9px;width:3px;height:26px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.95);border-radius:2px;transition:left 1.5s cubic-bezier(.4,0,.2,1)}
html.light .marker{background:#1e293b;box-shadow:0 0 10px rgba(0,0,0,.4)}
.sentiment-score{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:clamp(40px,10vw,64px);line-height:1;text-transform:uppercase;letter-spacing:-.02em}

/* ─── PRICE STRIP ─── */
.price-strip{background:rgba(10,16,32,.75);border:1px solid rgba(var(--fi-gold-rgb),.14);border-radius:20px;padding:12px;box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(min-width:640px){.price-strip{padding:14px}}
html.light .price-strip{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.07)}
.price-strip-header{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.price-strip-label{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;opacity:.5}

/* ─── SECTION HEADINGS ─── */
.section-heading-block{margin-bottom:28px}
.section-heading-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.28em;opacity:.4;margin-bottom:6px}
.section-heading-eyebrow span{display:inline-block;width:22px;height:1px;background:currentColor;opacity:.6}
.section-heading{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}

/* ─── WRAP ─── */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 28px}}

/* ─── DESKTOP TABS ─── */
.desktop-tabs{display:none}
@media(min-width:1024px){.desktop-tabs{display:flex;align-items:center;gap:2px;margin-left:28px}}
.desktop-tab{padding:7px 16px;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;background:transparent;color:#64748b;transition:all .22s;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.desktop-tab:hover{color:#e2e8f0;background:rgba(255,255,255,.06)}
.desktop-tab.active{color:var(--fi-gold);background:rgba(var(--fi-gold-rgb),.1);border-color:rgba(var(--fi-gold-rgb),.22)}
html.light .desktop-tab{color:#64748b}
html.light .desktop-tab:hover{color:#1e293b;background:rgba(0,0,0,.05)}
html.light .desktop-tab.active{color:var(--fi-gold);background:rgba(var(--fi-gold-rgb),.08);border-color:rgba(var(--fi-gold-rgb),.15)}

/* ─── GRIDS ─── */
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:768px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ─── APP DOWNLOAD SECTION ─── */
.app-download-card{background:rgba(10,17,34,.65);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .28s,border-color .28s,box-shadow .28s;position:relative;overflow:hidden}
.app-download-card:hover{transform:translateY(-3px);border-color:rgba(var(--fi-gold-rgb),.3);box-shadow:0 18px 50px rgba(0,0,0,.45)}
html.light .app-download-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.09)}
html.light .app-download-card:hover{border-color:rgba(var(--fi-gold-rgb),.35);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.app-icon-download{width:72px;height:72px;border-radius:22%;box-shadow:0 12px 32px rgba(0,200,83,.22)}
.app-download-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(20px,4.5vw,26px);letter-spacing:-.01em}
.app-download-sub{font-size:12px;opacity:.5;line-height:1.6;margin-top:6px;max-width:480px}
html.light .app-download-title{color:#0f172a}
html.light .app-download-sub{color:#334155;opacity:.75}
.gplay-btn{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#000;border:none;border-radius:12px;padding:.55rem 1.2rem;font-weight:800;font-size:.82rem;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .1s;letter-spacing:.01em}
.gplay-btn:hover{opacity:.88;transform:translateY(-1px)}
.gplay-btn svg{flex-shrink:0}
html.light .gplay-btn{background:#0b1629;color:#fff}

/* ─── REVEAL ANIMATION ─── */
@keyframes reveal-fallback{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
  /* CSS fallback: if JS never fires, show content after 400ms */
  animation:reveal-fallback 0.4s ease 0.4s forwards;
}
.reveal.visible{
  animation:none!important;
  opacity:1!important;
  transform:translateY(0)!important;
}
/* Page-hero: always instantly visible */
.page-hero{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}

/* ─── TAB PAGES ─── */
.tab-page{display:none}
#page-home.tab-page{display:block} /* home always visible before JS runs */
.tab-page.active{display:block}

/* ─── FOOTER ─── */
footer{border-top:1px solid rgba(255,255,255,.06)}
html.light footer{border-top-color:rgba(0,0,0,.07)}

/* ─── BOTTOM NAV — PREMIUM GLASSMORPHISM ─── */
.bottom-nav{
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  right:auto;
  width:calc(100% - 28px);
  max-width:360px;
  height:64px;
  padding:0 6px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(8,15,35,.78);
  border:1px solid rgba(var(--fi-gold-rgb),.22);
  border-radius:22px;
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  box-shadow:
    0 8px 40px rgba(0,0,0,.65),
    0 2px 10px rgba(0,0,0,.4),
    0 0 0 1px rgba(var(--fi-gold-rgb),.08),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.18);
  z-index:300;
}
@media(min-width:1024px){.bottom-nav{display:none}}

/* ── NAV ITEM ── */
.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 4px 7px;
  position:relative;
  cursor:pointer;
  border:none;
  border-radius:15px;
  margin:4px 2px;
  background:transparent;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),
             background .22s ease;
}
.nav-item:hover{background:rgba(var(--fi-gold-rgb),.08)}
.nav-item:hover i{opacity:.9;color:var(--fi-gold-hi);transform:scale(1.08)}
.nav-item:active{transform:scale(.84)!important}

.nav-item i{
  font-size:18px;
  opacity:.72;
  color:rgba(var(--fi-silver-rgb),.82);
  transition:opacity .25s,color .25s,
             transform .28s cubic-bezier(.34,1.56,.64,1),
             filter .28s;
}
.nav-item span{
  font-family:'Space Mono',monospace;
  font-size:7px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(var(--fi-silver-rgb),.68);
  opacity:1;
  transition:color .25s,opacity .25s;
}

/* ── ACTIVE STATE ── */
.nav-item.active{background:rgba(var(--fi-gold-rgb),.1)}
.nav-item.active i{opacity:1;transform:translateY(-2px) scale(1.14)}
.nav-item.active span{opacity:1;letter-spacing:.1em}

/* ── ANIMATED BOTTOM DOT ── */
.nav-item::before{
  content:'';
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  width:20px;height:3px;
  border-radius:2px;
  opacity:0;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .28s;
}
.nav-item.active::before{transform:translateX(-50%) scaleX(1);opacity:1}

/* ── KILL OLD TOP-LINE ── */
.nav-item::after,.nav-item.active::after{display:none!important;content:none!important}

/* ── PER-TAB ACCENT: HOME (blue) ── */
.nav-item[data-page=home].active i,
.nav-item[data-page=home].active span{color:var(--fi-gold)}
.nav-item[data-page=home].active i{filter:drop-shadow(0 0 8px rgba(var(--fi-gold-rgb),.8))}
.nav-item[data-page=home].active{box-shadow:inset 0 0 28px rgba(var(--fi-gold-rgb),.14)}
.nav-item[data-page=home]::before{background:linear-gradient(90deg,transparent,var(--fi-gold),transparent)}

/* ── PER-TAB ACCENT: STOCKS (green) ── */
.nav-item[data-page=stocks].active i,
.nav-item[data-page=stocks].active span{color:#4ade80}
.nav-item[data-page=stocks].active i{filter:drop-shadow(0 0 8px rgba(74,222,128,.8))}
.nav-item[data-page=stocks].active{box-shadow:inset 0 0 28px rgba(34,197,94,.12)}
.nav-item[data-page=stocks]::before{background:linear-gradient(90deg,transparent,#22c55e,transparent)}

/* ── PER-TAB ACCENT: COMMODITIES (amber) ── */
.nav-item[data-page=commodities].active i,
.nav-item[data-page=commodities].active span{color:var(--fi-gold)}
.nav-item[data-page=commodities].active i{filter:drop-shadow(0 0 8px rgba(var(--fi-gold-rgb),.8))}
.nav-item[data-page=commodities].active{box-shadow:inset 0 0 28px rgba(var(--fi-gold-rgb),.12)}
.nav-item[data-page=commodities]::before{background:linear-gradient(90deg,transparent,var(--fi-gold),transparent)}

/* ── LIGHT MODE ── */
html.light .bottom-nav{
  background:rgba(246,249,255,.92);
  border-color:rgba(var(--fi-gold-rgb),.14);
  box-shadow:
    0 8px 32px rgba(var(--fi-gold-rgb),.1),
    0 2px 10px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.98)
}
html.light .nav-item:hover{background:rgba(var(--fi-gold-rgb),.07)}
html.light .nav-item.active{background:rgba(var(--fi-gold-rgb),.1)}
html.light .nav-item span{color:#475569;opacity:1}
html.light .nav-item i{color:#475569;opacity:.8}

/* ─── PAGE HERO ─── */
.page-hero{padding:14px 0 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.28em;opacity:.37;margin-bottom:14px}
.eyebrow span{display:inline-block;width:18px;height:1px;background:currentColor;opacity:.6}
.page-hero h2,
.page-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(32px,8vw,62px);line-height:1;margin:0 0 10px;background:linear-gradient(135deg,#e2e8f0 30%,#94a3b8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero p{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.32;margin:0}

/* ─── CARDS ─── */
.card{background:rgba(10,16,30,.6);border:1px solid var(--border);border-radius:16px;padding:20px;text-decoration:none;color:inherit;display:block;transition:transform .28s,border-color .28s,box-shadow .28s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.14);box-shadow:0 24px 48px rgba(0,0,0,.4)}
html.light .card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.07)}

.blog-card{background:rgba(10,16,30,.55);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:transform .28s,box-shadow .28s}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.4)}
html.light .blog-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.07)}
.blog-img{width:100%;height:130px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.blog-body{padding:18px}
.blog-tag{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;padding:3px 8px;border-radius:5px;display:inline-block;margin-bottom:8px}
.blog-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:clamp(14px,3vw,18px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;margin-bottom:8px}
.blog-excerpt{font-size:11.5px;line-height:1.65;opacity:.52;margin-bottom:12px;font-family:'Inter',sans-serif}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta-item{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.38;display:flex;align-items:center;gap:4px}
.edu-card{background:rgba(10,16,30,.5);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px;transition:border-color .25s}
.edu-card:hover{border-color:rgba(255,255,255,.12)}
html.light .edu-card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.07)}
.metric-card{background:rgba(10,16,30,.6);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px;text-align:center;transition:box-shadow .25s,border-color .25s}
.metric-card:hover{box-shadow:0 0 24px rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
html.light .metric-card{background:rgba(255,255,255,.75)}
.src-card{background:rgba(10,16,30,.5);border:1px solid var(--border);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;display:block;transition:transform .22s,box-shadow .22s,border-color .22s}
.src-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.35);border-color:rgba(255,255,255,.12)}
html.light .src-card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.07)}
.section-h2{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(18px,4vw,24px);margin-bottom:20px;border-left:3px solid;padding-left:14px}
.section-head{margin-bottom:24px}
.section-head .eyebrow{justify-content:flex-start}
.section-head h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,5vw,38px);background:linear-gradient(135deg,#e2e8f0 30%,#94a3b8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 6px}
.section-head p{font-size:12px;opacity:.42;line-height:1.6;margin:0;font-family:'Inter',sans-serif}

/* ─── NEWS ─── */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.filter-btn{padding:6px 14px;border-radius:8px;font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(255,255,255,.08);background:transparent;color:#94a3b8;cursor:pointer;transition:all .2s}
.filter-btn:hover,.filter-btn.on{background:rgba(var(--fi-gold-rgb),.15);border-color:rgba(var(--fi-gold-rgb),.3);color:var(--fi-gold)}
.refresh-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:10px;background:rgba(var(--fi-gold-rgb),.1);border:1px solid rgba(var(--fi-gold-rgb),.22);font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fi-gold);cursor:pointer;transition:all .22s}
.refresh-btn:hover{background:rgba(var(--fi-gold-rgb),.22);box-shadow:0 0 18px rgba(var(--fi-gold-rgb),.22)}
.refresh-btn.spin i{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#news-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){#news-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(min-width:1000px){#news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card{background:rgba(10,16,30,.55);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--fi-gold);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;display:block;transition:background .2s,transform .22s,box-shadow .22s}
.news-card:hover{background:rgba(255,255,255,.05);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
html.light .news-card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.07)}
.nc-time{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.72;margin-bottom:5px}
.nc-title{font-size:12px;font-weight:700;line-height:1.45;text-transform:uppercase;font-style:italic;letter-spacing:.01em;margin-bottom:8px}
.nc-src{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.28;display:flex;align-items:center;gap:5px}
/* Publisher summary on a news card. Uses explicit colours rather than
   opacity so it stays legible in light mode as well as dark. */
.nc-sum{font-size:10.5px;line-height:1.55;margin-bottom:8px;font-family:'Inter',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#94a3b8}
html.light .nc-sum{color:#475569}
/* Last-updated stamp. Explicit colours for the same reason as .nc-sum —
   the inherited colour is near-white and unreadable on a light background. */
.nc-stamp{color:#8f9bb0}
html.light .nc-stamp{color:#4b5f7a}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shine 1.5s infinite;border-radius:12px;height:80px}
html.light .skel{background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.06) 75%);background-size:200% 100%;animation:shine 1.5s infinite}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
#skel-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){#skel-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(min-width:1000px){#skel-grid{grid-template-columns:repeat(3,1fr)}}

/* ─── SECTION ANCHOR ─── */
.section-anchor{scroll-margin-top:100px}

/* ─── SENTIMENT ROW ─── */
.sentiment-row{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.sentiment-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sentiment-row{grid-template-columns:repeat(3,1fr)}}
.sentiment-card{background:rgba(10,17,34,.7);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .28s,box-shadow .28s,border-color .28s;position:relative;overflow:hidden}
.sentiment-card::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at top left,rgba(255,255,255,.04) 0%,transparent 65%);pointer-events:none}
.sentiment-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
html.light .sentiment-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.08)}

/* ─── DASHBOARD SECTION HEADER ─── */
.dash-section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.dash-section-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(18px,4vw,26px);letter-spacing:-.01em}

/* ─── DASHBOARD CARDS ─── */
.dash-cards-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:560px){.dash-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.dash-cards-grid{grid-template-columns:repeat(3,1fr)}}
.dash-card{background:rgba(10,17,34,.65);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;text-decoration:none;color:inherit;display:block;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .28s,box-shadow .28s,border-color .28s;position:relative;overflow:hidden}
.dash-card::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at top right,rgba(255,255,255,.04) 0%,transparent 65%);pointer-events:none}
.dash-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.15);box-shadow:0 24px 50px rgba(0,0,0,.45)}
html.light .dash-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.07)}

/* ═══════════════════════════════════════════════════════
   PREMIUM FINTECH UPGRADE
═══════════════════════════════════════════════════════ */

/* ── 1. DARK MODE BODY: richer base + depth gradient ── */
body{
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(var(--fi-gold-rgb),.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 85%, rgba(var(--fi-silver-rgb),.06) 0%, transparent 55%),
    linear-gradient(170deg,#030610 0%,#05080f 45%,#060a14 100%);
}

/* ── 2. LIGHT MODE: complete overhaul ── */
html.light body{
  background:
    radial-gradient(ellipse 80% 50% at 20% 5%, rgba(var(--fi-gold-rgb),.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 90%, rgba(var(--fi-silver-rgb),.04) 0%, transparent 50%),
    linear-gradient(160deg,#f0f4ff 0%,#f8faff 50%,#eef2f9 100%);
  color:#0f172a;
}

/* Light mode dot grid — softer blue */
html.light body::before{
  background-image:radial-gradient(rgba(var(--fi-gold-rgb),.06) 1px,transparent 1px);
}

/* ── 3. NAVBAR: light mode premium ── */
html.light nav.topnav{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(var(--fi-gold-rgb),.12);
  box-shadow:0 2px 24px rgba(var(--fi-gold-rgb),.08),0 1px 0 rgba(0,0,0,.05);
}
html.light .nav-brand-main{color:#0f172a}
html.light .nav-brand-sub{color:#64748b}

/* Desktop tab — active blue glow in both modes */
.desktop-tab{transition:all .24s cubic-bezier(.4,0,.2,1);font-weight:600;letter-spacing:.02em}
.desktop-tab:hover{color:var(--fi-gold-hi);background:rgba(var(--fi-gold-rgb),.1);box-shadow:inset 0 -2px 0 rgba(var(--fi-gold-rgb),.4)}
.desktop-tab.active{
  color:var(--fi-gold);background:rgba(var(--fi-gold-rgb),.12);
  border-color:rgba(var(--fi-gold-rgb),.28);
  box-shadow:0 0 0 1px rgba(var(--fi-gold-rgb),.15) inset, 0 4px 18px rgba(var(--fi-gold-rgb),.15);
}
html.light .desktop-tab:hover{color:#1d4ed8;background:rgba(var(--fi-gold-rgb),.07);box-shadow:inset 0 -2px 0 rgba(var(--fi-gold-rgb),.35)}
html.light .desktop-tab.active{
  color:var(--fi-gold);background:rgba(var(--fi-gold-rgb),.1);
  border-color:rgba(var(--fi-gold-rgb),.25);
  box-shadow:0 4px 16px rgba(var(--fi-gold-rgb),.12);
}

/* ── 4. TICKER: dark premium strip ── */
html.light .ticker-wrap{
  background:linear-gradient(90deg,#0f172a,#1e293b,#0f172a);
  border-bottom:1px solid rgba(var(--fi-gold-rgb),.2);
}

/* ── 5. PRICE STRIP / CHART: glow border + left feel ── */
.price-strip{
  border:1px solid rgba(var(--fi-gold-rgb),.22);
  box-shadow:
    0 0 0 1px rgba(var(--fi-gold-rgb),.07),
    0 8px 48px rgba(0,0,0,.5),
    0 0 60px rgba(var(--fi-gold-rgb),.06) inset;
  transition:box-shadow .35s,border-color .35s;
}
.price-strip:hover{
  border-color:rgba(var(--fi-gold-rgb),.36);
  box-shadow:
    0 0 0 1px rgba(var(--fi-gold-rgb),.12),
    0 12px 56px rgba(0,0,0,.55),
    0 0 80px rgba(var(--fi-gold-rgb),.1) inset;
}
html.light .price-strip{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(var(--fi-gold-rgb),.18);
  box-shadow:0 4px 32px rgba(var(--fi-gold-rgb),.1),0 1px 0 rgba(255,255,255,.9) inset;
}
.price-strip-header{border-bottom:1px solid rgba(var(--fi-gold-rgb),.1)}
html.light .price-strip-header{border-bottom-color:rgba(var(--fi-gold-rgb),.12)}

/* ── 6. SENTIMENT CARDS: enhanced depth ── */
.sentiment-card{
  box-shadow:0 4px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,border-color .28s;
}
.sentiment-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 56px rgba(0,0,0,.5),0 0 30px rgba(var(--fi-gold-rgb),.1),inset 0 1px 0 rgba(255,255,255,.08);
}
html.light .sentiment-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(var(--fi-gold-rgb),.12);
  box-shadow:0 4px 24px rgba(var(--fi-gold-rgb),.08),0 1px 0 rgba(255,255,255,.9) inset;
}
html.light .sentiment-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(var(--fi-gold-rgb),.14),0 2px 0 rgba(255,255,255,.9) inset;
  border-color:rgba(var(--fi-gold-rgb),.22);
}

/* Sentiment bar: glowing gradient in dark ── */
.sentiment-bar{
  box-shadow:0 0 12px rgba(var(--fi-gold-rgb),.15),0 2px 6px rgba(0,0,0,.3);
}
html.light .sentiment-bar{
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.marker{
  box-shadow:0 0 16px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.6);
}
html.light .marker{
  background:#0f172a;
  box-shadow:0 0 10px rgba(15,23,42,.4);
}

/* Sentiment score readability ── */
html.light .sentiment-score{color:inherit!important}
html.light #crypto-score{color:var(--fi-gold)!important}
html.light #equity-score{color:#16a34a!important}
html.light #hard-score{color:#b45309!important}

/* ── 7. DASH CARDS: premium hover with color glow ── */
.dash-card{
  box-shadow:0 2px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);
}
.dash-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 52px rgba(0,0,0,.5),0 0 28px rgba(var(--fi-gold-rgb),.09),inset 0 1px 0 rgba(255,255,255,.08);
}
html.light .dash-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 16px rgba(var(--fi-gold-rgb),.07),0 1px 0 rgba(255,255,255,.9) inset;
}
html.light .dash-card:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--fi-gold-rgb),.22);
  box-shadow:0 20px 48px rgba(var(--fi-gold-rgb),.12),0 2px 0 rgba(255,255,255,.9) inset;
}
/* dash-card p readability in light mode */
html.light .dash-card p{opacity:.65;color:#334155}
html.light .dash-card h3{color:#0f172a}

/* ── 8. GENERIC .card: light mode elevation ── */
html.light .card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 16px rgba(var(--fi-gold-rgb),.07),0 1px 0 rgba(255,255,255,.9) inset;
}
html.light .card:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--fi-gold-rgb),.2);
  box-shadow:0 18px 44px rgba(var(--fi-gold-rgb),.11);
}
html.light .card h3{color:#0f172a}
html.light .card p{opacity:.6;color:#334155}

/* ── 9. BLOG CARDS: light mode elevated ── */
html.light .blog-card{
  background:#ffffff;
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 18px rgba(var(--fi-gold-rgb),.07);
}
html.light .blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 48px rgba(var(--fi-gold-rgb),.12);
  border-color:rgba(var(--fi-gold-rgb),.18);
}
html.light .blog-excerpt{opacity:.62;color:#334155}
html.light .blog-title{color:#0f172a}
html.light .meta-item{color:#475569;opacity:.7}

/* ── 10. SECTION HEADINGS: light mode contrast ── */
html.light .section-heading{
  background:linear-gradient(130deg,#0f172a 0%,#1e40af 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
html.light .dash-section-title{color:inherit}
html.light .section-h2{color:inherit}
html.light .section-head h2{
  background:linear-gradient(130deg,#0f172a 0%,#1e40af 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
html.light .page-hero h2,
html.light .page-hero h1{
  background:linear-gradient(135deg,#0f172a 30%,#1e40af 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── 11. EDU + METRIC + SRC CARDS: light mode ── */
html.light .edu-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 14px rgba(var(--fi-gold-rgb),.06);
}
html.light .edu-card:hover{border-color:rgba(var(--fi-gold-rgb),.2)}
html.light .metric-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 14px rgba(var(--fi-gold-rgb),.06);
}
html.light .metric-card:hover{
  box-shadow:0 8px 28px rgba(var(--fi-gold-rgb),.12);
  border-color:rgba(var(--fi-gold-rgb),.2);
}
html.light .src-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 14px rgba(var(--fi-gold-rgb),.06);
}
html.light .src-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--fi-gold-rgb),.2);
  box-shadow:0 14px 36px rgba(var(--fi-gold-rgb),.1);
}

/* ── 12. NEWS CARDS: light mode ── */
html.light .news-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(var(--fi-gold-rgb),.1);
  box-shadow:0 2px 10px rgba(var(--fi-gold-rgb),.05);
}
html.light .news-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(var(--fi-gold-rgb),.1);
  border-color:rgba(var(--fi-gold-rgb),.2);
}
html.light .nc-title{color:#0f172a}
html.light .nc-time{color:#475569}
html.light .nc-src{color:#64748b}

/* ── 13. PAGE HERO (Stocks/Commodities): light ── */
html.light .page-hero{
  border-bottom:1px solid rgba(var(--fi-gold-rgb),.1);
}
html.light .page-hero p{color:#475569;opacity:.8}

/* ── 14. HAMBURGER MENU: light mode ── */
html.light .hamburger-menu{
  background:rgba(255,255,255,.99);
  border:1px solid rgba(var(--fi-gold-rgb),.12);
  box-shadow:0 20px 60px rgba(var(--fi-gold-rgb),.12),0 4px 16px rgba(0,0,0,.06);
}
html.light .hm-item:hover{background:rgba(var(--fi-gold-rgb),.05)}
html.light .hm-item-name{color:inherit}

/* ── 15. FOOTER: light mode ── */
html.light footer{
  border-top:1px solid rgba(var(--fi-gold-rgb),.1);
}

/* ── 16. BOTTOM NAV: light mode — handled by premium nav block ── */

/* ── 17. LIVE BADGE: light mode ── */
html.light .live-badge{
  background:rgba(22,163,74,.08);
  border-color:rgba(22,163,74,.28);
  color:#16a34a;
}

/* ── 18. FILTER + REFRESH BUTTONS: light mode ── */
html.light .filter-btn{
  border-color:rgba(var(--fi-gold-rgb),.18);
  color:#475569;
  background:rgba(255,255,255,.8);
}
html.light .filter-btn:hover,html.light .filter-btn.on{
  background:rgba(var(--fi-gold-rgb),.08);
  border-color:rgba(var(--fi-gold-rgb),.25);
  color:var(--fi-gold);
}
html.light .refresh-btn{
  background:rgba(var(--fi-gold-rgb),.08);
  border-color:rgba(var(--fi-gold-rgb),.22);
  color:var(--fi-gold);
}
html.light .refresh-btn:hover{
  background:rgba(var(--fi-gold-rgb),.15);
  box-shadow:0 0 18px rgba(var(--fi-gold-rgb),.15);
}

/* ── 19. REVEAL: premium spring easing ── */
.reveal{
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}

/* ── 20. SECTION EYEBROW: better spacing ── */
.section-heading-eyebrow{letter-spacing:.3em}
.eyebrow{letter-spacing:.3em}
html.light .section-heading-eyebrow{opacity:.55;color:#475569}
html.light .eyebrow{opacity:.55;color:#475569}

/* ── 21. DASH SECTION HEADER: light text ── */
html.light .dash-section-header{border-bottom:1px solid rgba(var(--fi-gold-rgb),.08);padding-bottom:16px}

/* ── 22. SENTIMENT card label/eyebrow: light ── */
html.light .hm-item-desc{color:#64748b}
html.light .hm-header-label{color:#64748b}

/* ── 23. SECTION H2 LEFT BORDER: light mode ── */
html.light .section-h2{color:#0f172a}

/* ── 24. PRICE STRIP LABEL: light ── */
html.light .price-strip-label{color:#475569;opacity:.8}

/* ── 25. GRADIENT TEXT: stays gold in both modes ── */
html.light .gradient-text{background:linear-gradient(90deg,var(--fi-gold-deep),#b45309);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── 26. THEME BUTTON: light mode ── */
html.light .theme-btn{
  background:rgba(var(--fi-gold-rgb),.07);
  border-color:rgba(var(--fi-gold-rgb),.2);
  color:var(--fi-gold);
}
html.light .theme-btn:hover{
  background:rgba(var(--fi-gold-rgb),.14);
  border-color:rgba(var(--fi-gold-rgb),.35);
  box-shadow:0 0 16px rgba(var(--fi-gold-rgb),.2);
}

/* ── 27. HAMBURGER BUTTON: light ── */
html.light .hamburger-btn{
  background:rgba(0,0,0,.03);
  border-color:rgba(var(--fi-gold-rgb),.18);
  color:#334155;
}
html.light .hamburger-btn:hover{
  background:rgba(var(--fi-gold-rgb),.06);
  border-color:rgba(var(--fi-gold-rgb),.3);
}

/* ── 28. BODY::before lighter in light mode ── */
html.light body::before{opacity:.5}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY UPGRADE
═══════════════════════════════════════════════════════ */

/* ── Base body text ── */
body{
  font-family:'Inter','Barlow Condensed',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Paragraph readability ── */
p{line-height:1.65}
html.light p{color:#334155}

/* ── Card titles sharp and bold ── */
.card h3,
.dash-card h3,
.blog-title,
.section-h2,
.dash-section-title,
.hm-item-name{
  font-weight:700;
  letter-spacing:.01em;
}

/* ── Card body text: readable, not washed out ── */
.card p,
.dash-card p{
  line-height:1.65;
  opacity:.62;
}
.blog-excerpt{
  line-height:1.7;
  opacity:.6;
}
html.light .card p,
html.light .dash-card p,
html.light .blog-excerpt{
  opacity:1;
  color:#475569;
}

/* ── Section eyebrows: sharper ── */
.section-heading-eyebrow,
.eyebrow,
.price-strip-label,
.hm-item-desc,
.meta-item,
.nc-time,
.nc-src{
  letter-spacing:.22em;
}

/* ── Sentiment score: bolder, crisper ── */
.sentiment-score{
  font-weight:900;
  letter-spacing:-.03em;
}

/* ── Score labels ── */
#crypto-label,#equity-label,#hard-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

/* ── Dash card h3: finance terminal style ── */
.dash-card h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#e2e8f0;
}
html.light .dash-card h3{color:#0f172a}

/* ── Regular card h3 ── */
.card h3{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e2e8f0;
}
html.light .card h3{color:#0f172a}

/* ── Blog titles bolder ── */
.blog-title{
  font-size:clamp(15px,3vw,19px);
  font-weight:900;
  line-height:1.25;
  color:#e2e8f0;
}
html.light .blog-title{color:#0f172a}

/* ── Section h2 (Stocks / Commodities) ── */
.section-h2{
  font-weight:900;
  letter-spacing:-.01em;
}

/* ── Page hero heading ── */
.page-hero h2,

/* ── Page hero heading ── */
.page-hero h1{
  font-weight:900;
  letter-spacing:-.03em;
}

/* ── Section head h2 ── */
.section-head h2{
  font-weight:900;
  letter-spacing:-.02em;
}

/* ── Footer text ── */
footer p{
  font-size:9px;
  letter-spacing:.3em;
}
html.light footer p{color:#64748b}

/* ── Navbar brand ── */
.nav-brand-main{
  font-weight:900;
  letter-spacing:-.025em;
}

/* ── "Live Market Fear & Greed Readings" subtitle ── */
html.light .section-heading-block+p{color:#475569;opacity:.9}

/* ── Ticker text: sharper ── */
.ticker-content{
  font-weight:700;
  letter-spacing:.08em;
}

/* ── edu-card, metric-card text ── */
html.light .edu-card,
html.light .metric-card{color:#0f172a}
html.light .edu-card p,
html.light .metric-card p{color:#475569}

/* ═══════════════════════════════════════════════════════
   ANIMATED BACKGROUND LAYER
═══════════════════════════════════════════════════════ */

/* ── Animated gradient orbs behind everything ── */
#bg-canvas{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}

/* Three slow-drifting colour orbs */
#bg-canvas .orb{
  position:absolute;border-radius:50%;
  filter:blur(100px);
  will-change:transform;
}
#bg-canvas .orb-1{
  width:clamp(320px,45vw,640px);
  height:clamp(200px,28vw,400px);
  background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.09) 0%,transparent 70%);
  top:-8%;left:-10%;
  animation:orb-a 22s ease-in-out infinite;
}
#bg-canvas .orb-2{
  width:clamp(260px,38vw,520px);
  height:clamp(160px,22vw,340px);
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.08) 0%,transparent 70%);
  bottom:-10%;right:-8%;
  animation:orb-b 28s ease-in-out infinite;
}
#bg-canvas .orb-3{
  width:clamp(180px,26vw,360px);
  height:clamp(120px,16vw,240px);
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.06) 0%,transparent 70%);
  top:42%;left:42%;
  animation:orb-c 18s ease-in-out infinite;
}

@keyframes orb-a{
  0%,100%{transform:translate(0,0)}
  40%{transform:translate(30px,-24px)}
  70%{transform:translate(-16px,20px)}
}
@keyframes orb-b{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(-28px,18px)}
  68%{transform:translate(20px,-22px)}
}
@keyframes orb-c{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-18px,-14px)}
}

/* Light mode orbs: weaker, cooler */
html.light #bg-canvas .orb-1{background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.05) 0%,transparent 70%)}
html.light #bg-canvas .orb-2{background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.04) 0%,transparent 70%)}
html.light #bg-canvas .orb-3{background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.035) 0%,transparent 70%)}

/* ── Floating finance icons ── */
#bg-icons{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
#bg-icons i{
  position:absolute;
  color:#fff;
  filter:blur(0.6px);
  will-change:transform;
  animation:fi-float linear infinite;
}

/* 10 icons: scattered positions, very low opacity, varying sizes/speeds */
#bg-icons i:nth-child(1) {top:5%;  left:3%;  font-size:clamp(18px,2.8vw,32px);opacity:.055;color:var(--fi-gold); animation-duration:14s;animation-delay:0s}
#bg-icons i:nth-child(2) {top:10%; right:5%; font-size:clamp(14px,2vw,24px); opacity:.045;color:var(--fi-silver); animation-duration:18s;animation-delay:3s}
#bg-icons i:nth-child(3) {top:30%; left:1%;  font-size:clamp(16px,2.4vw,28px);opacity:.05; color:var(--fi-silver); animation-duration:11s;animation-delay:6s}
#bg-icons i:nth-child(4) {top:55%; right:2%; font-size:clamp(20px,3vw,36px);  opacity:.055;color:var(--fi-gold); animation-duration:16s;animation-delay:1.5s}
#bg-icons i:nth-child(5) {bottom:20%;left:4%;font-size:clamp(14px,2vw,22px);  opacity:.04; color:#4ade80; animation-duration:20s;animation-delay:8s}
#bg-icons i:nth-child(6) {bottom:8%; right:6%;font-size:clamp(18px,2.6vw,30px);opacity:.05;color:var(--fi-gold); animation-duration:13s;animation-delay:4s}
#bg-icons i:nth-child(7) {top:72%; left:22%; font-size:clamp(12px,1.8vw,20px);opacity:.04; color:var(--fi-silver); animation-duration:17s;animation-delay:9s}
#bg-icons i:nth-child(8) {top:18%; left:48%; font-size:clamp(14px,2.2vw,26px);opacity:.045;color:var(--fi-silver); animation-duration:12s;animation-delay:2s}
#bg-icons i:nth-child(9) {bottom:32%;right:18%;font-size:clamp(16px,2.4vw,28px);opacity:.05;color:var(--fi-gold);animation-duration:15s;animation-delay:5s}
#bg-icons i:nth-child(10){top:42%; left:78%; font-size:clamp(12px,1.8vw,22px);opacity:.04; color:#4ade80; animation-duration:19s;animation-delay:7s}

@keyframes fi-float{
  0%  {transform:translateY(0)    rotate(0deg)}
  25% {transform:translateY(-12px) rotate(3deg)}
  50% {transform:translateY(-6px)  rotate(-2deg)}
  75% {transform:translateY(-14px) rotate(2deg)}
  100%{transform:translateY(0)    rotate(0deg)}
}

/* Light mode icons: even subtler */
html.light #bg-icons i{opacity:.025!important;filter:blur(0.8px)}

/* ── Ensure ALL content sits above bg layers ── */
#page-home,
#page-stocks,
#page-commodities,
#page-news{
  position:relative;z-index:1;
}
/* ── Keep positioned elements correct (do NOT override fixed/sticky) ── */
.ticker-wrap{position:sticky!important;top:0!important;z-index:200!important}
nav.topnav{position:sticky!important;top:31px!important;z-index:150!important}
.hamburger-menu{position:fixed!important;z-index:145!important}
.bottom-nav{position:fixed!important;z-index:300!important}
.hm-overlay{position:fixed!important;}

/* ═══════════════════════════════════════════════════════
   FINAL UI: BACKGROUND + SPACING + TYPOGRAPHY
═══════════════════════════════════════════════════════ */

/* ── 1. DARK MODE BACKGROUND: blue → navy → purple ── */
body{
  background:
    radial-gradient(ellipse 90% 55% at 15% 8%,  rgba(var(--fi-gold-rgb),.10) 0%, transparent 52%),
    radial-gradient(ellipse 70% 45% at 85% 88%,  rgba(var(--fi-silver-rgb),.09) 0%, transparent 52%),
    radial-gradient(ellipse 50% 35% at 50% 50%,  rgba(var(--fi-silver-rgb),.06)  0%, transparent 55%),
    linear-gradient(175deg,#020510 0%,#040818 35%,#060a18 65%,#050614 100%);
}

/* Dot grid: slightly brighter on richer bg */
body::before{
  background-image:radial-gradient(rgba(var(--fi-silver-rgb),.07) 1px, transparent 1px);
  background-size:32px 32px;
}

/* ── 2. LIGHT MODE BACKGROUND: animated soft gradient ── */
html.light body{
  color:#0f172a;
  background:
    radial-gradient(ellipse 80% 50% at 10% 5%,  rgba(var(--fi-gold-rgb),.07) 0%, transparent 50%),
    radial-gradient(ellipse 65% 40% at 88% 90%,  rgba(var(--fi-silver-rgb),.06) 0%, transparent 50%),
    radial-gradient(ellipse 45% 30% at 52% 52%,  rgba(var(--fi-silver-rgb),.04)  0%, transparent 55%),
    linear-gradient(160deg,#eef3ff 0%,#f5f8ff 45%,#edf0fb 100%);
}
html.light body::before{
  background-image:radial-gradient(rgba(var(--fi-gold-rgb),.055) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.6;
}

/* Light mode orbs: matching soft palette */
html.light #bg-canvas .orb-1{
  background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.06) 0%,transparent 70%);
}
html.light #bg-canvas .orb-2{
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.05) 0%,transparent 70%);
}
html.light #bg-canvas .orb-3{
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.045) 0%,transparent 70%);
}
html.light #bg-icons i{opacity:.03!important;filter:blur(0.6px)}

/* ── 3. SPACING: tighten vertical rhythm ── */

/* Main page content wrapper — reduce top/bottom padding */
.py-8{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.py-6{padding-top:1.25rem!important;padding-bottom:1.25rem!important}

/* Section gaps */
.space-y-12>*+*{margin-top:2.25rem!important}
.space-y-10>*+*{margin-top:2rem!important}
.space-y-8>*+*{margin-top:1.75rem!important}

/* Page hero: tighter */
.page-hero{padding:22px 0 18px;margin-bottom:24px}

/* Section heading block */
.section-heading-block{margin-bottom:20px}
.dash-section-header{margin-bottom:16px}
.section-head{margin-bottom:18px}

/* Card internal padding: slightly trimmed */
.card{padding:16px}
.dash-card{padding:18px}
.sentiment-card{padding:18px}
.blog-body{padding:14px}
.edu-card{padding:14px}
.metric-card{padding:12px}
.src-card{padding:12px 14px}

/* Grid gaps: tighter */
.grid-3{gap:12px}
.grid-2{gap:12px}
.grid-4{gap:8px}
.dash-cards-grid{gap:14px}
.sentiment-row{gap:14px}
#news-grid{gap:8px}
@media(min-width:600px){#news-grid{gap:10px}}

/* Footer: compact — handled by final block at bottom */

/* ── 4. ALIGNMENT: consistent section spacing ── */
.section-anchor{scroll-margin-top:90px}
.wrap{padding:0 14px}
@media(min-width:640px){.wrap{padding:0 24px}}

/* ── 5. TYPOGRAPHY: sharp hierarchy ── */

/* Base */
body{line-height:1.58;-webkit-font-smoothing:antialiased}

/* Headings: crisp and bold */
.section-heading{
  font-weight:900;
  line-height:.95;
  letter-spacing:-.025em;
}
.page-hero h2,
.page-hero h1{
  font-weight:900;
  line-height:1;
  letter-spacing:-.025em;
}
.section-head h2{
  font-weight:900;
  letter-spacing:-.022em;
  line-height:1.05;
}
.dash-section-title{
  font-weight:900;
  letter-spacing:-.015em;
  line-height:1.1;
}
.section-h2{
  font-weight:900;
  letter-spacing:-.015em;
}

/* Subtitles / labels */
.page-hero p{
  font-size:10px;
  letter-spacing:.18em;
  opacity:.5;
}
html.light .page-hero p{opacity:.65;color:#475569}

/* Card titles */
.dash-card h3{
  font-size:17px;
  font-weight:900;
  line-height:1.15;
  margin-bottom:6px;
  color:#e2e8f0;
}
html.light .dash-card h3{color:#0f172a}

.card h3{
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.04em;
  color:#e2e8f0;
}
html.light .card h3{color:#0f172a}

/* Card body text */
.dash-card p,.card p{
  font-size:11px;
  line-height:1.62;
  opacity:.58;
}
html.light .dash-card p,
html.light .card p{opacity:1;color:#475569}

/* Blog */
.blog-title{
  font-size:clamp(14px,2.8vw,18px);
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.01em;
}
.blog-excerpt{
  font-size:11px;
  line-height:1.68;
  opacity:.55;
}
html.light .blog-excerpt{opacity:1;color:#475569}
html.light .blog-title{color:#0f172a}

/* Muted text: avoid pure grey */
.price-strip-label{opacity:.6}
.section-heading-eyebrow{opacity:.5}
html.light .price-strip-label{opacity:.75;color:#334155}
html.light .section-heading-eyebrow{opacity:.65;color:#475569}

/* Sentiment score: maximum impact */
.sentiment-score{
  font-size:clamp(42px,10vw,66px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
}

/* Sub labels on sentiment */
#crypto-label,#equity-label,#hard-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}

/* Section description under section-head */
.section-head p{
  font-size:11.5px;
  line-height:1.6;
  opacity:.48;
}
html.light .section-head p{opacity:.7;color:#475569}

/* ═══════════════════════════════════════════════════════
   FINAL FIX: SPACING + LIGHT ANIMATION + RESPONSIVE
═══════════════════════════════════════════════════════ */

/* ── 1. SPACING: handled by final block at bottom ── */

/* ── 2. LIGHT MODE ANIMATION: make orbs actually visible ── */

/* Orbs: stronger opacity + less blur = more perceptible on white */
html.light #bg-canvas .orb-1{
  background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.13) 0%,transparent 65%);
  filter:blur(72px);
}
html.light #bg-canvas .orb-2{
  background:radial-gradient(ellipse,rgba(79,70,229,.11) 0%,transparent 65%);
  filter:blur(80px);
}
html.light #bg-canvas .orb-3{
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.10) 0%,transparent 65%);
  filter:blur(65px);
}

/* Icons: more visible in light mode */
html.light #bg-icons i{
  opacity:.042!important;
  filter:blur(0.4px);
  color:#1d4ed8!important;
}
/* Keep individual accent colours */
html.light #bg-icons i:nth-child(1){color:var(--fi-gold)!important}
html.light #bg-icons i:nth-child(2){color:#7c3aed!important}
html.light #bg-icons i:nth-child(3){color:#0891b2!important}
html.light #bg-icons i:nth-child(4){color:#b45309!important}
html.light #bg-icons i:nth-child(5){color:#15803d!important}
html.light #bg-icons i:nth-child(6){color:var(--fi-gold)!important}
html.light #bg-icons i:nth-child(7){color:#7c3aed!important}
html.light #bg-icons i:nth-child(8){color:#0891b2!important}
html.light #bg-icons i:nth-child(9){color:#b45309!important}
html.light #bg-icons i:nth-child(10){color:#15803d!important}

/* ── 3. Z-INDEX: ensure bg always behind content ── */

/* Body background is the deepest layer */
#bg-canvas{z-index:0}
#bg-icons{z-index:0}

/* Body::before dot grid stays passive */
body::before{z-index:0}

/* All main content confirmed above */
.ticker-wrap{z-index:200!important}
nav.topnav{z-index:150!important}
.bottom-nav{z-index:300!important}
.hamburger-menu{z-index:145!important}
#page-home,#page-stocks,#page-commodities,#page-news{
  position:relative;z-index:1;
}

/* Card backgrounds: semi-transparent so orbs show through gaps */
/* (only affects what's behind the card, not the card itself) */
html.light .card,
html.light .blog-card,
html.light .news-card{
  background:rgba(255,255,255,.88);
}
html.light .dash-card,
html.light .sentiment-card{
  background:rgba(255,255,255,.86);
}
html.light .edu-card,
html.light .metric-card,
html.light .src-card{
  background:rgba(255,255,255,.88);
}
html.light .price-strip{
  background:rgba(255,255,255,.92);
}

/* ── 4. RESPONSIVE: adaptive spacing ── */

/* Tablet */
@media(max-width:768px){
  .py-8{padding-top:.875rem!important;padding-bottom:.875rem!important}
  .space-y-12>*+*{margin-top:1.5rem!important}
  .page-hero{padding:14px 0 12px!important;margin-bottom:14px!important}
  .dash-cards-grid{gap:12px}
  .sentiment-row{gap:12px}
  .grid-2,.grid-3{gap:10px}
  .dash-card,.sentiment-card,.card{padding:14px}
}

/* Mobile */
@media(max-width:480px){
  .py-8{padding-top:.75rem!important;padding-bottom:.75rem!important}
  .space-y-12>*+*{margin-top:1.25rem!important}
  .page-hero{padding:12px 0 10px!important;margin-bottom:12px!important}
  .wrap{padding:0 12px!important}
  .dash-cards-grid{gap:10px}
  .sentiment-row{gap:10px}
  .grid-2,.grid-3{gap:8px}
  .dash-card,.sentiment-card,.card{padding:12px}
  .blog-body{padding:12px}
  .sentiment-score{font-size:clamp(36px,9vw,56px)}
  .section-heading{font-size:clamp(28px,9vw,60px)!important}
}

/* ── 5. LIGHT MODE: dot grid visibility boost ── */
html.light body::before{
  background-image:radial-gradient(rgba(var(--fi-gold-rgb),.07) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.7;
}

/* ═══════════════════════════════════════════════════════
   ROOT FIX: SPACING + LIGHT MODE ANIMATION
═══════════════════════════════════════════════════════ */

/* ── pg-wrap / section spacing: handled by final block at bottom ── */

/* ── Light mode animation: override the solid white ── */
/* Body already fixed at line 35 — these strengthen orbs */
html.light #bg-canvas{z-index:0}
html.light #bg-canvas .orb-1{
  background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.16) 0%,transparent 62%)!important;
  filter:blur(70px)!important;
}
html.light #bg-canvas .orb-2{
  background:radial-gradient(ellipse,rgba(79,70,229,.13) 0%,transparent 62%)!important;
  filter:blur(78px)!important;
}
html.light #bg-canvas .orb-3{
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.12) 0%,transparent 62%)!important;
  filter:blur(65px)!important;
}

/* Light mode icons: darker tones visible on light bg */
html.light #bg-icons i{filter:none!important}
html.light #bg-icons i:nth-child(1){opacity:.06!important;color:#1d4ed8!important}
html.light #bg-icons i:nth-child(2){opacity:.055!important;color:#6d28d9!important}
html.light #bg-icons i:nth-child(3){opacity:.05!important;color:#0e7490!important}
html.light #bg-icons i:nth-child(4){opacity:.055!important;color:#92400e!important}
html.light #bg-icons i:nth-child(5){opacity:.05!important;color:#166534!important}
html.light #bg-icons i:nth-child(6){opacity:.06!important;color:#1d4ed8!important}
html.light #bg-icons i:nth-child(7){opacity:.05!important;color:#6d28d9!important}
html.light #bg-icons i:nth-child(8){opacity:.055!important;color:#0e7490!important}
html.light #bg-icons i:nth-child(9){opacity:.05!important;color:#92400e!important}
html.light #bg-icons i:nth-child(10){opacity:.055!important;color:#166534!important}

/* Light mode cards: semi-transparent so bg shows through */
html.light .card,html.light .blog-card,html.light .news-card,
html.light .edu-card,html.light .metric-card,html.light .src-card{
  background:rgba(255,255,255,.82)!important;
}
html.light .dash-card,html.light .sentiment-card{
  background:rgba(255,255,255,.80)!important;
}
html.light .price-strip{background:rgba(255,255,255,.88)!important}
html.light nav.topnav{background:rgba(255,255,255,.92)!important}

/* ── Responsive spacing: handled by final block at bottom ── */

/* ═══════════════════════════════════════════════════════
   DEFINITIVE FIX: GAP + LIGHT BG + REVEAL
═══════════════════════════════════════════════════════ */

/* ── 1. Page-hero: ALWAYS instantly visible, zero delay ── */
.page-hero,
.page-hero.reveal,
.page-hero.reveal.visible{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  visibility:visible!important;
}

/* ── 2. Chart sections: skip translateY so no invisible jump ── */
.price-strip{min-height:0}
section.reveal .price-strip{opacity:1;transform:none}

/* ── 3. All sections on non-home pages show fast ── */
#page-stocks .reveal,
#page-commodities .reveal,
#page-news .reveal{
  transition:opacity .35s ease,transform .35s ease;
}

/* ── 4. pg-wrap: handled by final block at bottom ── */

/* ── 5. Wrap: no vertical padding ── */
.wrap{padding-top:0!important;margin-top:0!important}
.tab-page{padding-top:0!important;margin-top:0!important}

/* ── 6. page-hero: tightest possible ── */
.page-hero{
  padding:10px 0 8px!important;
  margin:0 0 0 0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
html.light .page-hero{border-bottom-color:rgba(var(--fi-gold-rgb),.1)!important}
.page-hero h2,
.page-hero h1{
  margin:0 0 3px 0!important;
  line-height:1!important;
}
.page-hero .eyebrow{margin-bottom:8px!important}
.page-hero p{margin:0!important}

/* ── 7. Light mode: body bg MUST win over all previous rules ── */
html.light body{
  background:
    radial-gradient(ellipse 80% 55% at 10% 8%,  rgba(var(--fi-gold-rgb),.15) 0%, transparent 45%),
    radial-gradient(ellipse 65% 45% at 88% 88%,  rgba(79,70,229,.13) 0%, transparent 45%),
    radial-gradient(ellipse 50% 35% at 52% 48%,  rgba(var(--fi-silver-rgb),.10) 0%, transparent 50%),
    linear-gradient(155deg,#e6edff 0%,#f0f5ff 42%,#eaeffb 100%)!important;
}

/* ── 8. Light mode orbs: max visibility ── */
html.light #bg-canvas .orb-1{
  background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.20) 0%,transparent 60%)!important;
  filter:blur(60px)!important;
}
html.light #bg-canvas .orb-2{
  background:radial-gradient(ellipse,rgba(79,70,229,.17) 0%,transparent 60%)!important;
  filter:blur(68px)!important;
}
html.light #bg-canvas .orb-3{
  background:radial-gradient(ellipse,rgba(var(--fi-silver-rgb),.15) 0%,transparent 58%)!important;
  filter:blur(55px)!important;
}

/* ── 9. Cards semi-transparent so bg shines through ── */
html.light .card,html.light .blog-card,
html.light .news-card,html.light .edu-card,
html.light .metric-card,html.light .src-card{
  background:rgba(255,255,255,.76)!important;
}
html.light .dash-card,html.light .sentiment-card{
  background:rgba(255,255,255,.74)!important;
}
html.light .price-strip{background:rgba(255,255,255,.85)!important}
html.light nav.topnav{background:rgba(248,250,255,.94)!important}

/* ── 10. Section gaps: handled by final block at bottom ── */

/* ═══════════════════════════════════════════════════════
   SPACING — MATCHES financeinfo.net LIVE SITE
═══════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ── */
.pg-wrap{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
  padding-top:4px!important;
  padding-bottom:8px!important;
}
@media(max-width:768px){.pg-wrap{gap:14px!important;padding-top:4px!important;padding-bottom:8px!important}}
@media(max-width:480px){.pg-wrap{gap:12px!important;padding-top:4px!important;padding-bottom:8px!important}}

/* ── PAGE HERO ── */
.page-hero{padding:10px 0 8px!important;margin:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
html.light .page-hero{border-bottom-color:rgba(var(--fi-gold-rgb),.1)!important}
.page-hero .eyebrow{margin-bottom:8px!important}
.page-hero h2,
.page-hero h1{margin:0 0 6px!important;line-height:1!important}
.page-hero p{margin:0!important}

/* ── SECTION HEADING BLOCKS ── */
.section-heading-block{margin-bottom:6px!important}
.dash-section-header{margin-bottom:6px!important;padding-bottom:0!important}
.section-head{margin-bottom:6px!important}

/* ── GRID GAPS ── */
.grid-2{gap:10px!important}
.grid-3{gap:10px!important}
.grid-4{gap:8px!important}
.dash-cards-grid{gap:10px!important}
.sentiment-row{gap:10px!important}
#news-grid{gap:8px!important}
@media(min-width:600px){#news-grid{gap:10px!important}}
@media(max-width:768px){.grid-2,.grid-3,.dash-cards-grid,.sentiment-row{gap:8px!important}}
@media(max-width:480px){.grid-2,.grid-3,.dash-cards-grid,.sentiment-row{gap:6px!important};.grid-4{gap:6px!important}}

/* ── CARD INTERNAL PADDING ── */
.card{padding:14px!important}
.dash-card{padding:14px!important}
.sentiment-card{padding:14px!important}
.blog-body{padding:14px!important}
.edu-card{padding:12px!important}
.metric-card{padding:10px!important}
.src-card{padding:10px 12px!important}
@media(max-width:768px){.card,.dash-card,.sentiment-card,.blog-body,.edu-card{padding:12px!important}}
@media(max-width:480px){.card,.dash-card,.sentiment-card,.blog-body,.edu-card,.metric-card{padding:10px!important}}

/* ── PRICE STRIP HEADER ── */
.price-strip-header{margin-bottom:8px!important;padding-bottom:8px!important}

/* ── SECTION H2 ── */
.section-h2{margin-bottom:8px!important}

/* ── FILTER BAR ── */
.filter-bar{margin-bottom:8px!important}

/* ── FOOTER ── */
footer,footer.py-8{margin-top:0!important;padding-top:14px!important;padding-bottom:14px!important}

/* ── WRAP ── */
.wrap{padding:0 14px!important;padding-top:0!important;margin-top:0!important}
@media(min-width:640px){.wrap{padding:0 24px!important;padding-top:0!important}}
.tab-page{padding-top:0!important;margin-top:0!important}

/* ── KILL GAP BETWEEN NAV AND FIRST SECTION ── */
#page-home,#page-stocks,#page-commodities,#page-news{margin-top:0!important;padding-top:0!important}
.pg-wrap>*:first-child{margin-top:0!important}

/* ── TAILWIND OVERRIDES ── */
.py-8{padding-top:1rem!important;padding-bottom:1rem!important}
.mt-4{margin-top:0!important}
.space-y-12>*+*,.space-y-10>*+*,.space-y-8>*+*{margin-top:1.25rem!important}

/* ── REVEAL: remove transition delay so content appears instantly on home ── */
.reveal{transform:translateY(6px)!important}
.reveal.visible{
  opacity:1!important;
  transform:translateY(0)!important;
  transition:none!important;
  animation:none!important;
}

/* ── FIRST SECTION: always instantly visible, no flicker ── */
#page-home .pg-wrap>section:first-child,
#page-home .pg-wrap>section:first-child.reveal,
#page-home .pg-wrap>section:first-child.reveal.visible{
  opacity:1!important;transform:none!important;
  transition:none!important;animation:none!important;
  visibility:visible!important;
}

/* ── PAGE HERO: instantly visible ── */
.page-hero,.page-hero.reveal,.page-hero.reveal.visible{
  opacity:1!important;transform:none!important;transition:none!important;
  animation:none!important;visibility:visible!important;
}

/* ── DESKTOP: lock min-width gaps so they don't override our values ── */
@media(min-width:640px){
  .pg-wrap{padding-top:4px!important;padding-bottom:8px!important;gap:16px!important}
  .wrap{padding:0 24px!important;padding-top:0!important}
}
@media(min-width:1024px){
  .pg-wrap{padding-top:4px!important;padding-bottom:8px!important;gap:16px!important}
}

/* ─── ASSET ICONS ─── */
.asset-icon{display:inline-block;width:14px;height:14px;vertical-align:middle;margin-right:3px;position:relative;top:-1px;flex-shrink:0}
.ticker-content .asset-icon{width:11px;height:11px;top:0;margin-right:2px}

/* ── SITE DISCLAIMER ──────────────────────────────────────────────
   Shown directly above the footer on every page. Styled as a calm
   informational panel in the site's own glass + blue palette, on
   purpose: the block it replaced used a red tint and red border, which
   read as an error/warning banner rather than a standing legal notice. */
.site-disclaimer{max-width:1120px;margin:0 auto;padding:0 16px 4px}
.site-disclaimer-inner{display:flex;align-items:flex-start;gap:14px;background:rgba(10,16,30,.55);border:1px solid var(--border);border-radius:18px;padding:18px 20px}
.site-disclaimer-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(var(--fi-gold-rgb),.12);border:1px solid rgba(var(--fi-gold-rgb),.22);color:var(--fi-gold)}
.site-disclaimer-body{min-width:0}
.site-disclaimer-label{display:block;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--fi-gold);margin-bottom:7px}
.site-disclaimer-text{font-size:13px;line-height:1.75;color:rgba(148,163,184,.92);margin:0;text-align:left}
html.light .site-disclaimer-inner{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.08)}
html.light .site-disclaimer-text{color:#475569}
html.light .site-disclaimer-label{color:var(--fi-gold)}
html.light .site-disclaimer-icon{background:rgba(var(--fi-gold-rgb),.1);border-color:rgba(var(--fi-gold-rgb),.2);color:var(--fi-gold)}
@media(min-width:640px){.site-disclaimer{padding:0 28px 4px}.site-disclaimer-text{font-size:13.5px}}
@media(max-width:520px){.site-disclaimer{padding:0 14px 4px}.site-disclaimer-inner{gap:12px;padding:15px 16px;border-radius:16px}.site-disclaimer-icon{width:30px;height:30px}.site-disclaimer-text{font-size:12.5px;line-height:1.7}}

/* HSZB Technologies social row (4 official profiles) */
.hszb-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hszb-social li{margin:0;padding:0}
.hszb-social a{position:relative;display:grid;place-items:center;width:44px;height:44px;text-decoration:none;transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease,background-color .25s ease}
.hszb-social a:hover{transform:translateY(-2px)}
.hszb-social svg{display:block}
.hszb-social-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font-size:9px;font-weight:700;line-height:1}
@media (prefers-reduced-motion:reduce){.hszb-social a{transition:none}.hszb-social a:hover{transform:none}}
.hszb-social a{color:rgba(148,163,184,.9);border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.03)}
.hszb-social a:hover{color:var(--fi-gold);border-color:rgba(var(--fi-gold-rgb),.5);background:rgba(var(--fi-gold-rgb),.1);box-shadow:0 0 18px -4px rgba(var(--fi-gold-rgb),.6)}
.hszb-social a:focus-visible{outline:2px solid var(--fi-gold);outline-offset:3px;color:var(--fi-gold)}
.hszb-social-badge{background:#05080f;border:1px solid rgba(var(--fi-gold-rgb),.6);color:var(--fi-gold);font-family:'Space Mono',monospace}
html.light .hszb-social a{color:#334155;border-color:rgba(15,23,42,.14);background:rgba(255,255,255,.7)}
html.light .hszb-social a:hover{color:#1d4ed8;border-color:rgba(var(--fi-gold-rgb),.45);background:rgba(var(--fi-gold-rgb),.08);box-shadow:0 0 16px -4px rgba(var(--fi-gold-rgb),.45)}
html.light .hszb-social-badge{background:#fff;border-color:rgba(161,98,7,.55);color:#92400e}

.gauge-note{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-top:6px;line-height:1.5}.gauge-note.is-live{opacity:.75;color:#4ade80}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ─── MULTI-PAGE NAVIGATION (2026-10-03) ─── */
a.desktop-tab{text-decoration:none;display:inline-flex;align-items:center}
a.nav-item{text-decoration:none;color:inherit}
.nav-item[data-page=markets].active i,.nav-item[data-page=markets].active span{color:#4ade80}
.nav-item[data-page=markets].active{box-shadow:inset 0 0 28px rgba(34,197,94,.12)}
.nav-item[data-page=markets]::before{background:linear-gradient(90deg,transparent,#22c55e,transparent)}
.nav-item[data-page=news].active i,.nav-item[data-page=news].active span{color:#f87171}
.nav-item[data-page=news].active{box-shadow:inset 0 0 28px rgba(239,68,68,.12)}
.nav-item[data-page=news]::before{background:linear-gradient(90deg,transparent,#ef4444,transparent)}
.nav-item[data-page=learn].active i,.nav-item[data-page=learn].active span{color:var(--fi-silver)}
.nav-item[data-page=learn].active{box-shadow:inset 0 0 28px rgba(var(--fi-silver-rgb),.12)}
.nav-item[data-page=learn]::before{background:linear-gradient(90deg,transparent,var(--fi-silver),transparent)}
.hm-item[aria-current=page]{background:rgba(255,255,255,.05)}
.crumbs{margin:2px 0 -6px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.crumbs li{display:flex;align-items:center;opacity:.75}
.crumbs li+li::before{content:'/';margin:0 8px;opacity:.35}
.crumbs a{color:var(--fi-gold);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li[aria-current]{opacity:.45}
.next-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.next-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.next-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:44px;padding:16px 40px 16px 16px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.next-card:hover{border-color:rgba(var(--fi-gold-rgb),.35);background:rgba(255,255,255,.06)}
.next-kicker{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.next-title{font-weight:700;font-size:15px;line-height:1.3}
.next-desc{font-size:12px;opacity:.6;line-height:1.5}
.next-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.45;font-size:16px}
html.light .next-card{background:rgba(255,255,255,.75);border-color:rgba(15,23,42,.1)}
.cat-links{display:flex;flex-wrap:wrap;gap:8px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;white-space:normal;max-width:100%}
.foot-links a{white-space:nowrap}
a.filter-btn{text-decoration:none;display:inline-flex;align-items:center}
.prose-note{font-size:13px;line-height:1.7;opacity:.7;max-width:760px}
.prose-note a{color:var(--fi-gold)}
.src-list{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:768px){.src-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.src-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:13px}
.src-row span{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.55}

/* ═══ FINANCEINFO DESIGN TOKENS (2026-10-03) ═══ */
:root{
  --fi-bg:#07090d;--fi-bg-2:#0a0d12;--fi-surface:#0e1218;--fi-surface-2:#131821;--fi-surface-3:#1a202a;
  --fi-line:rgba(255,255,255,.07);--fi-line-2:rgba(255,255,255,.12);
  --fi-gold:#e2b654;--fi-gold-hi:#f0c86b;--fi-gold-deep:#c8972a;--fi-gold-rgb:226,182,84;
  --fi-silver:#c3ccd8;--fi-silver-rgb:195,204,216;
  --fi-text:#eef1f5;--fi-text-2:#a7b1be;--fi-text-3:#7b8592;
  --fi-up:#4ade80;--fi-down:#f87171;
  --fi-r-lg:16px;--fi-r:12px;--fi-r-sm:10px;
  --fi-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 32px -20px rgba(0,0,0,.9);
  --fi-ease:cubic-bezier(.2,.7,.2,1);
}
html.light{
  --fi-bg:#f6f4ef;--fi-bg-2:#efece5;--fi-surface:#ffffff;--fi-surface-2:#fbfaf6;--fi-surface-3:#f1eee6;
  --fi-line:rgba(17,20,26,.09);--fi-line-2:rgba(17,20,26,.16);
  --fi-gold:#94650a;--fi-gold-hi:#a8750f;--fi-gold-deep:#7a5308;--fi-gold-rgb:176,123,16;
  --fi-silver:#4a5563;--fi-silver-rgb:74,85,99;
  --fi-text:#14181f;--fi-text-2:#4a5563;--fi-text-3:#6b7684;
}

/* ═══ FINANCEINFO THEME LAYER — dark terminal, restrained gold ═══
   Colour rules are scoped to the dark theme (html:not(.light)); the light theme
   keeps its own surfaces and picks up the deeper gold through the tokens. */
:root{--bg:var(--fi-bg);--text:var(--fi-text);--border:var(--fi-line);--accent:var(--fi-gold)}
::selection{background:rgba(var(--fi-gold-rgb),.28);color:var(--fi-text)}
:focus-visible{outline:2px solid var(--fi-gold);outline-offset:2px;border-radius:6px}

/* Typography: upright condensed display type, Inter for reading, mono for data labels */
.page-hero h1,.page-hero h2,.section-heading,.section-head h2,.section-h2,.fi-video-h,.dash-card h3,.dash-section-title,.app-download-title,.blog-title{font-style:normal!important}
.section-heading{font-size:clamp(30px,6vw,52px)!important;letter-spacing:-.01em!important;line-height:1!important}
.page-hero h1{font-size:clamp(34px,6vw,58px)!important;letter-spacing:-.01em!important}
.nc-title{font-family:'Inter',sans-serif!important;font-style:normal!important;text-transform:none!important;font-size:15px!important;line-height:1.38!important;font-weight:700!important;letter-spacing:-.005em!important}
.blog-title{font-family:'Inter',sans-serif!important;font-style:normal!important;text-transform:none!important;font-size:16px!important;line-height:1.35!important;font-weight:700!important;letter-spacing:-.005em!important}
.page-hero p{font-family:'Inter',sans-serif!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;line-height:1.6!important;max-width:64ch;margin-left:auto!important;margin-right:auto!important}

/* Canvas */
html:not(.light) body{background:radial-gradient(1200px 520px at 50% -180px,rgba(var(--fi-gold-rgb),.07),transparent 70%),var(--fi-bg)!important;color:var(--fi-text)}
html:not(.light) body::before{background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px)!important;background-size:28px 28px!important}
html:not(.light) #bg-canvas .orb-1{background:radial-gradient(ellipse,rgba(var(--fi-gold-rgb),.06) 0%,transparent 70%)!important}
#bg-canvas .orb-2,#bg-canvas .orb-3,#bg-icons{display:none!important}

/* Ticker */
html:not(.light) .ticker-wrap{background:#050608!important;border-bottom:1px solid rgba(var(--fi-gold-rgb),.16)!important}
html:not(.light) .ticker-content{color:var(--fi-text-2)!important}

/* Top navigation */
html:not(.light) nav.topnav{background:rgba(7,9,13,.88)!important;border-bottom:1px solid var(--fi-line)!important;box-shadow:none!important}
.nav-logo{text-decoration:none}
.gradient-text{background:linear-gradient(90deg,var(--fi-gold-hi),var(--fi-gold-deep))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html:not(.light) .desktop-tab{color:var(--fi-text-3)!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;position:relative}
html:not(.light) .desktop-tab:hover{color:var(--fi-text)!important;background:rgba(255,255,255,.04)!important}
html:not(.light) .desktop-tab.active{color:var(--fi-gold)!important;background:rgba(var(--fi-gold-rgb),.08)!important;border-color:rgba(var(--fi-gold-rgb),.22)!important}
html:not(.light) .live-badge{background:rgba(255,255,255,.03)!important;border:1px solid var(--fi-line-2)!important;color:var(--fi-text-2)!important}
html:not(.light) :is(.theme-btn,.hamburger-btn){background:var(--fi-surface-2)!important;border:1px solid var(--fi-line)!important;color:var(--fi-text-2)!important;transition:color .2s,border-color .2s}
html:not(.light) :is(.theme-btn,.hamburger-btn):hover{color:var(--fi-gold)!important;border-color:rgba(var(--fi-gold-rgb),.35)!important}
html:not(.light) .hamburger-menu{background:#0b0e13!important;border:1px solid var(--fi-line-2)!important;box-shadow:0 30px 60px -20px rgba(0,0,0,.85)!important}
html:not(.light) .hm-item:hover{background:rgba(255,255,255,.04)!important}
html:not(.light) .hm-item[aria-current]{background:rgba(var(--fi-gold-rgb),.08)!important}
html:not(.light) .hm-item-name{color:var(--fi-text)!important}
html:not(.light) .hm-item[aria-current] .hm-item-name{color:var(--fi-gold)!important}
html:not(.light) .hm-item-icon{background:rgba(var(--fi-gold-rgb),.09)!important;border:1px solid rgba(var(--fi-gold-rgb),.16)}
html:not(.light) .hm-item-icon i{color:var(--fi-gold)!important}

/* Mobile bottom navigation: one accent for every tab */
html:not(.light) .bottom-nav{background:rgba(11,14,19,.94)!important;border:1px solid var(--fi-line-2)!important;box-shadow:0 18px 40px -12px rgba(0,0,0,.9)!important}
html:not(.light) .nav-item i,html:not(.light) .nav-item span{color:var(--fi-text-3)!important;filter:none!important}
html:not(.light) .nav-item.active{background:rgba(var(--fi-gold-rgb),.09)!important;box-shadow:none!important}
html:not(.light) .nav-item.active i,html:not(.light) .nav-item.active span{color:var(--fi-gold)!important}
html:not(.light) .nav-item::before{background:linear-gradient(90deg,transparent,var(--fi-gold),transparent)!important}

/* Breadcrumbs */
.crumbs{margin:10px 0 2px!important}
html:not(.light) .crumbs a{color:var(--fi-gold)!important}
html:not(.light) .crumbs li[aria-current]{color:var(--fi-text-3);opacity:1!important}

/* Page heroes and section headings */
html:not(.light) .page-hero{border-bottom:1px solid var(--fi-line)!important;padding:18px 0 20px!important;margin-bottom:6px!important}
html:not(.light) .page-hero h1,html:not(.light) .page-hero h2,html:not(.light) .section-head h2{background:none!important;-webkit-text-fill-color:var(--fi-text)!important;color:var(--fi-text)!important}
html:not(.light) .page-hero p{color:var(--fi-text-2)!important;opacity:1!important}
html:not(.light) :is(.eyebrow,.section-heading-eyebrow){color:var(--fi-gold)!important;opacity:.9!important}
html:not(.light) .section-heading{background:linear-gradient(100deg,var(--fi-text) 0%,var(--fi-text) 55%,var(--fi-gold) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html:not(.light) .section-h2{color:var(--fi-text)!important;border-left:3px solid var(--fi-gold)!important}
html:not(.light) .section-head p{color:var(--fi-text-2);opacity:1!important}

/* Cards and panels: one surface system */
html:not(.light) :is(.dash-card,.sentiment-card,.blog-card,.edu-card,.src-card,.metric-card,.news-card,.next-card,.app-download-card,.site-disclaimer-inner,.price-strip){
  background:linear-gradient(180deg,var(--fi-surface-2),var(--fi-surface))!important;border:1px solid var(--fi-line)!important;
  box-shadow:var(--fi-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not(.light) :is(.dash-card,.sentiment-card,.blog-card,.src-card,.news-card,.next-card,.app-download-card):hover{
  border-color:rgba(var(--fi-gold-rgb),.32)!important;transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -22px rgba(0,0,0,.95)!important}
html:not(.light) .edu-card:hover{border-color:rgba(var(--fi-gold-rgb),.28)!important}
html:not(.light) .price-strip:hover{border-color:var(--fi-line-2)!important}
html:not(.light) .price-strip-header{border-bottom:1px solid var(--fi-line)!important}
html:not(.light) .news-card{border-left:2px solid rgba(var(--fi-gold-rgb),.55)!important}
html:not(.light) .dash-card h3{color:var(--fi-text)!important}
html:not(.light) :is(.dash-card,.card) p{color:var(--fi-text-2);opacity:1!important}
html:not(.light) .next-kicker{color:var(--fi-gold)!important}
html:not(.light) .next-desc{color:var(--fi-text-2)}
html:not(.light) .next-go{color:var(--fi-text-3);transition:transform .2s var(--fi-ease),color .2s}
html:not(.light) .next-card:hover .next-go{color:var(--fi-gold);transform:translateX(3px)}
html:not(.light) .site-disclaimer-icon{background:rgba(var(--fi-gold-rgb),.1)!important;border-color:rgba(var(--fi-gold-rgb),.25)!important;color:var(--fi-gold)!important}
html:not(.light) .site-disclaimer-label{color:var(--fi-gold)!important}
html:not(.light) .site-disclaimer-text{color:var(--fi-text-2)!important}
html:not(.light) .blog-excerpt{color:var(--fi-text-2)}
html:not(.light) .blog-meta,html:not(.light) .meta-item{color:var(--fi-text-3)}

/* Buttons: primary (gold), secondary (outline), text link */
.fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--fi-r);font-family:'Inter',sans-serif;font-size:14px;font-weight:700;text-decoration:none;letter-spacing:.005em;transition:background .2s,border-color .2s,color .2s,transform .2s var(--fi-ease)}
.fi-btn i{font-size:12px}
.fi-btn-primary{background:linear-gradient(180deg,var(--fi-gold-hi),var(--fi-gold));color:#111214!important;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -14px rgba(var(--fi-gold-rgb),.9)}
.fi-btn-primary:hover{transform:translateY(-1px);background:var(--fi-gold-hi)}
.fi-btn-secondary{background:transparent;color:var(--fi-text)!important;border:1px solid var(--fi-line-2)}
.fi-btn-secondary:hover{border-color:rgba(var(--fi-gold-rgb),.5);color:var(--fi-gold)!important}
.fi-btn-link{display:inline-flex;align-items:center;min-height:46px;padding:0 4px;color:var(--fi-gold)!important;font-size:14px;font-weight:600;text-decoration:none}
.fi-btn-link:hover{text-decoration:underline;text-underline-offset:4px}
html:not(.light) .fi-video-cta{border-color:var(--fi-line-2)!important;background:transparent!important;color:var(--fi-text)!important;border-radius:var(--fi-r)!important}
html:not(.light) .fi-video-cta:hover{border-color:rgba(var(--fi-gold-rgb),.5)!important;color:var(--fi-gold)!important}
html:not(.light) .fi-video-cta.fi-btn-primary{background:linear-gradient(180deg,var(--fi-gold-hi),var(--fi-gold))!important;color:#111214!important;border-color:rgba(0,0,0,.2)!important}
html:not(.light) .fi-video-cta--yt i{color:#ef4444}
html:not(.light) .filter-btn{border-color:var(--fi-line-2)!important;color:var(--fi-text-2)!important;background:transparent!important}
html:not(.light) .filter-btn:hover,html:not(.light) .filter-btn.on,html:not(.light) .filter-btn[aria-current]{background:rgba(var(--fi-gold-rgb),.1)!important;border-color:rgba(var(--fi-gold-rgb),.4)!important;color:var(--fi-gold)!important}
a.filter-btn{min-height:36px;font-size:9px!important}

/* Homepage hero */
.fi-hero{position:relative;padding:34px 0 30px;margin:6px 0 8px;border-bottom:1px solid var(--fi-line)}
.fi-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--fi-gold)}
.fi-hero-eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.7}
.fi-hero-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(40px,7.4vw,84px);line-height:.94;letter-spacing:-.012em;margin:14px 0 16px;color:var(--fi-text)}
.fi-hero-title span{color:var(--fi-gold)}
.fi-hero-lead{max-width:62ch;font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--fi-text-2);margin:0}
.fi-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:24px}

/* Platform video */
html:not(.light) .fi-video-grid{border:1px solid var(--fi-line)!important;background:linear-gradient(180deg,var(--fi-surface-2),var(--fi-surface))!important;box-shadow:var(--fi-shadow)!important}
html:not(.light) .fi-video-frame{border-color:var(--fi-line-2)!important}
html:not(.light) .fi-video-p{color:var(--fi-text-2);opacity:1!important}

/* Desk panels: the equity desk's categorical green follows the gold system (the gauges keep theirs) */
html:not(.light) :is(.dash-section-header,.dash-card) [style*="#4ade80"],html:not(.light) .dash-section-title[style*="#4ade80"]{color:var(--fi-gold)!important}
html:not(.light) :is(.dash-section-header,.dash-card) [style*="rgba(34,197,94"]{background:rgba(var(--fi-gold-rgb),.1)!important;border-color:rgba(var(--fi-gold-rgb),.25)!important}
html:not(.light) .dash-section-title{color:var(--fi-text)!important}

/* Sentiment gauges: semantic colours stay, chrome follows the system */
html:not(.light) .gauge-note{color:var(--fi-text-3);opacity:1!important}
html:not(.light) .gauge-note.is-live{color:var(--fi-up)!important}

/* Footer */
html:not(.light) footer{border-top:1px solid var(--fi-line)}
html:not(.light) footer .foot-links a{color:var(--fi-text-2)!important}
html:not(.light) footer .foot-links a:hover{color:var(--fi-gold)!important}
html:not(.light) .hszb-social a{background:var(--fi-surface-2)!important;border:1px solid var(--fi-line)!important;color:var(--fi-text-2)!important}
html:not(.light) .hszb-social a:hover{border-color:rgba(var(--fi-gold-rgb),.45)!important;color:var(--fi-gold)!important}
.foot-links a{display:inline-block;padding:4px 2px}

/* Touch and small screens */
@media (max-width:640px){
  .fi-hero{padding:24px 0 22px}
  .fi-hero-actions .fi-btn{flex:1 1 auto}
  .foot-links{font-size:12px!important;line-height:2.2!important}
  .page-hero{text-align:left}
  .page-hero .eyebrow{justify-content:flex-start}
  .page-hero p{margin-left:0!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}