/* ApexDelta v3 motion layer (index.html). Additive only: loads after site.css,
   touches no selector site.js depends on. Everything degrades to the static v2
   page with JS off or prefers-reduced-motion. */

/* Scroll progress + header */
.scroll-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold);
  transform-origin:0 50%; transform:scaleX(var(--sp,0)); pointer-events:none;}
header{transition:background-color .3s var(--ease);}
header.m-scrolled{background:rgba(18,12,31,0.97);}

/* Hero: dot grid drifts with scroll, panel tilts toward the pointer */
.hero::before{background-position:0 calc(var(--hy,0) * 1px);}
.pnl-tilt{position:relative; z-index:2; transition:transform .5s var(--ease);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}

/* Hero market canvas: compounding curve over drifting candles */
.hero-market{position:absolute; left:0; right:0; top:var(--nav-h); bottom:0; width:100%; height:calc(100% - var(--nav-h));
  z-index:1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 85%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 85%, transparent 100%);}
.hero-market.on{opacity:1;}
.hero .wrap.hero-grid{z-index:2;}
.hero .live-strip{position:relative; z-index:3;}

/* Word-by-word headline rise */
h1.m-split{opacity:1; animation:none;}
.m-split .w, .m-split-late .w{display:inline-block;}
.m-split .w{opacity:0; transform:translateY(.45em); animation:mWord .7s var(--ease) forwards; animation-delay:calc(var(--i) * 55ms + 80ms);}
@keyframes mWord{to{opacity:1; transform:none;}}
.m-split-late .w{opacity:0; transform:translateY(.45em); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i) * 45ms);}
.m-split-late.m-seen .w{opacity:1; transform:none;}

/* Scroll flow: brokers -> one view -> benchmark */
.flow{padding:0; background:var(--paper);}
.flow .gain{color:var(--gain);} .flow .loss{color:var(--loss);}
.flow-track{height:320vh; position:relative;}
.flow-sticky{position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); display:grid;
  grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.flow-copy h2{font-size:clamp(28px,3.4vw,38px); line-height:1.15; margin-top:14px; font-weight:600; max-width:18ch;}
.flow-steps{margin-top:28px; display:flex; flex-direction:column; border-left:1px solid var(--line); position:relative;}
.flow-steps::before{content:''; position:absolute; left:-1px; top:0; width:2px; height:100%; background:var(--purple);
  transform-origin:top; transform:scaleY(var(--fp,0));}
.flow-step{padding:14px 0 14px 24px; opacity:.38; transition:opacity .4s var(--ease);}
.flow-step.is-active{opacity:1;}
.flow-n{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--purple);}
.flow-step h3{font-size:21px; font-weight:600; margin-top:4px;}
.flow-step p{margin:6px 0 0; font-size:15.5px; line-height:1.6; color:var(--text-dim); max-width:42ch;}
.flow-stage{position:relative; height:min(460px, 62vh); min-height:390px;}
.flow-tag{position:absolute; right:0; top:-36px; font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:99px; padding:4px 10px;}
.flow-panel{position:absolute; inset:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  opacity:0; transform:scale(.96); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.flow-stage:not([data-stage="0"]) .flow-panel{opacity:1; transform:none;}
.flow-panel-head{position:absolute; left:24px; right:24px; top:20px; display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13.5px; color:var(--text-dim);}
.flow-panel-head b{font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em;}
.flow-card{position:absolute; display:flex; align-items:center; gap:10px; box-sizing:border-box;
  left:var(--x0); top:var(--y0); width:64px; height:64px; padding:0; justify-content:center;
  background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 24px -14px rgba(18,12,31,.35);
  transform:rotate(var(--r0)); animation:mFloat 5s ease-in-out infinite; animation-delay:calc(var(--i) * -.7s);
  transition:left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .6s var(--ease), padding .6s var(--ease),
    transform .8s var(--ease), border-radius .5s, box-shadow .5s, border-color .5s;
  transition-delay:calc(var(--i) * 45ms);}
@keyframes mFloat{50%{translate:0 -8px;}}
.flow-logo{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--lc); color:#fff; font:600 14px/1 var(--mono); letter-spacing:-.02em; overflow:hidden;
  transition:width .6s var(--ease), height .6s var(--ease), border-radius .6s, font-size .6s;}
.flow-logo img{width:100%; height:100%; object-fit:contain; background:#fff;}
.flow-name{flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:0; opacity:0; transition:opacity .4s var(--ease), max-width .6s var(--ease);}
.flow-status{flex:none; font:500 10.5px var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:99px;
  color:var(--text-dim); background:var(--paper-dim); display:none;}
.flow-status.live{color:var(--gain); background:rgba(21,128,61,.09);}
/* Wide scatter: motion.js measures the viewport and sets --sx/--sy per tile so the
   tiles start spread across the whole screen, drift inward as you scroll, then snap together. */
.flow-stage.flow-wide[data-stage="0"] .flow-card{left:0; top:0;
  transform:translate(calc(var(--cx,0px) + (var(--sx,0px) - var(--cx,0px)) * var(--spread,1)), calc(var(--cy,0px) + (var(--sy,0px) - var(--cy,0px)) * var(--spread,1))) rotate(var(--r0)) scale(var(--s0,1));
  transition:left 1s var(--ease), top 1s var(--ease), width .8s var(--ease), height .6s var(--ease), padding .6s var(--ease), transform .25s linear, border-radius .5s, box-shadow .5s, border-color .5s;}
.flow-stage.flow-wide .flow-card{z-index:3; transition-duration:1s, 1s, .8s, .6s, .6s, 1s, .5s, .5s, .5s;}
.flow-stage:not([data-stage="0"]) .flow-card{
  left:calc(24px + var(--c) * ((100% - 60px) / 2 + 12px)); top:calc(72px + var(--row) * 46px);
  width:calc((100% - 60px) / 2); height:40px; padding:0 10px 0 6px; justify-content:flex-start;
  transform:none; animation:none; border-radius:10px; box-shadow:none; border-color:var(--line);}
.flow-stage:not([data-stage="0"]) .flow-logo{width:28px; height:28px; border-radius:7px; font-size:11px;}
.flow-stage:not([data-stage="0"]) .flow-name{max-width:100%; opacity:1; transition-delay:calc(.55s + var(--i) * 45ms);}
.flow-stage:not([data-stage="0"]) .flow-status{display:inline-block; animation:mFade .4s var(--ease) both; animation-delay:calc(.7s + var(--i) * 45ms);}
@keyframes mFade{from{opacity:0;} to{opacity:1;}}
.flow-bench{position:absolute; left:24px; right:24px; bottom:22px; display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.flow-stage[data-stage="2"] .flow-bench{opacity:1; transform:none;}
.flow-bar{display:grid; grid-template-columns:112px 1fr 64px; align-items:center; gap:12px; font-size:13.5px; color:var(--text-dim);}
.flow-bar .t{height:10px; background:var(--paper-dim); border-radius:99px; overflow:hidden;}
.flow-bar .f{display:block; height:100%; width:0; border-radius:inherit; background:var(--purple-bright); transition:width 1s var(--ease) .25s;}
.flow-bar.you .f{background:var(--gain);}
.flow-bar b{font-family:var(--mono); font-weight:600; text-align:right; color:var(--text);}
.flow-bar.you b{color:var(--gain);}
.flow-stage[data-stage="2"] .flow-bar.you .f{width:88%;}
.flow-stage[data-stage="2"] .flow-bar:not(.you) .f{width:12%;}

/* Metrics: gold hairline sweeps across each stat when it scrolls in */
.metric{position:relative;}
.metric::before{content:''; position:absolute; left:24px; right:24px; top:-1px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); transition-delay:calc(var(--i,0) * 120ms + .2s);}
.metrics-grid.m-seen .metric::before{transform:scaleX(1);}

/* Insight: chart stays put while the three steps scroll past */
.m-steps .step > *{transition:opacity .4s var(--ease);}
.m-steps .step:not(.is-active) > *{opacity:.42;}
.m-steps .step.is-active .step-index{background:var(--gold); color:var(--ink);}
.chart-tab{position:relative; overflow:hidden;}
.chart-tab.m-timer::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:rgba(18,12,31,.35);
  transform-origin:left; animation:mTimer var(--dur,3.6s) linear forwards;}
@keyframes mTimer{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@media (min-width: 901px){
  .insight-split > div:last-child{position:sticky; top:calc(var(--nav-h) + 40px);}
}

/* Feature cards: pointer spotlight + icons draw in */
.feature-card{position:relative; overflow:hidden;}
.feature-card::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(58,71,87,0.08), transparent 70%);}
.feature-card:hover::before{opacity:1;}
.feature-card > *{position:relative;}
.m-draw .feature-icon path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease) .25s;}
.m-draw.m-seen .feature-icon path{stroke-dashoffset:0;}

/* ---------- Index ticker in the top strip ---------- */
.live-item.idx{gap:8px;}
.live-item.idx b{letter-spacing:.04em;}
.idx-v{color:var(--on-deep); font-variant-numeric:tabular-nums; transition:color .6s var(--ease);}
.idx-c{font-variant-numeric:tabular-nums;}
.idx-c.up::before{content:'▲ ';} .idx-c.down::before{content:'▼ ';}
.idx.flash-up .idx-v{color:var(--up); transition:none;} .idx.flash-down .idx-v{color:var(--down); transition:none;}
.live-sep{flex:none; width:1px; align-self:stretch; margin:10px 0; background:var(--deep-line);}

/* ---------- SEO content blocks ---------- */
.seo-brokers{margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.seo-brokers h3{font-size:16px; font-weight:600; color:var(--text);}
.seo-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.seo-chips li{font-size:14px; color:var(--text); padding:7px 13px; border:1px solid var(--line); border-radius:99px; background:var(--white);
  transition:border-color .2s var(--ease), color .2s var(--ease);}
.seo-chips li:hover{border-color:var(--purple-bright); color:var(--purple);}
.seo-terms{padding-top:0;}
.seo-terms-grid{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0; border-top:1px solid var(--line);}
.seo-terms-grid > div{padding:22px 24px 22px 0; border-bottom:1px solid var(--line);}
.seo-terms-grid dt{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--purple); font-weight:500;}
.seo-terms-grid dd{margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--text-dim); max-width:36ch;}

/* ---------- Premium layer ---------- */
@property --ang{syntax:'<angle>'; initial-value:0deg; inherits:false;}
@keyframes ringSpin{to{--ang:360deg;}}
@keyframes sheen{0%,72%{transform:translateX(-120%) skewX(-20deg);} 100%{transform:translateX(220%) skewX(-20deg);}}
@keyframes goldFlow{to{background-position:-200% 0;}}
@keyframes scan{0%{left:-12%;} 100%{left:104%;}}

/* Primary buttons: periodic gold sheen + magnetic pull (motion.js sets --bx/--by) */
.btn-primary{position:relative; overflow:hidden; isolation:isolate; transform:translate(var(--bx,0), var(--by,0)); transition:filter .2s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);}
.btn-primary::after{content:''; position:absolute; top:0; bottom:0; left:0; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-120%) skewX(-20deg);}
.btn-primary:hover{box-shadow:0 10px 30px -10px rgba(217,166,87,.7);}

/* Headline accent: liquid gold */
.hero h1.m-split em{background:none; color:inherit; -webkit-background-clip:border-box; background-clip:border-box;}
.hero h1:not(.m-split) em, .hero h1.m-split em .w{background:linear-gradient(90deg, #D9A657 0%, #F5D9A0 25%, #D9A657 50%, #B8862F 75%, #D9A657 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Rotating gold edge on the two dark data panels */
.pnl-panel, .signal-card{position:relative;}
.pnl-panel::after, .signal-card::after{content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--ang), transparent 0 62%, rgba(217,166,87,.0) 64%, rgba(217,166,87,.95) 82%, rgba(58,71,87,.6) 90%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}

/* Signal chart: scanning beam */
.signal-svg-wrap{position:relative; overflow:hidden;}
.signal-svg-wrap::after{content:''; position:absolute; top:0; bottom:0; width:12%; left:-12%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(217,166,87,.14) 70%, rgba(217,166,87,.55) 98%, transparent);}

/* Cards: animated gradient edge on hover */
.feature-card::after{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:conic-gradient(from var(--ang), #3A4757, #D9A657, #1B2532, #3A4757);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.feature-card:hover::after{opacity:1;}
.metric .num.m-done{animation:tickGlow 1.2s var(--ease);}
@keyframes tickGlow{0%{color:var(--gold);} 100%{color:var(--text);}}

/* Final CTA: horizon grid + rising gold, pointer spotlight */
.final-cta{position:relative; overflow:hidden;}
.final-cta > .wrap{position:relative; z-index:2;}
.cta-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.final-cta::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--so,0); transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(58,71,87,.18), transparent 70%);}

@media (prefers-reduced-motion: no-preference){
  .btn-primary::after{animation:sheen 4.5s var(--ease) infinite 1.2s;}
  .hero h1:not(.m-split) em{animation:goldFlow 6s linear infinite;}
  .hero h1.m-split em .w{animation:mWord .7s var(--ease) forwards, goldFlow 6s linear infinite; animation-delay:calc(var(--i) * 55ms + 80ms), 0s;}
  .pnl-panel::after, .signal-card::after, .feature-card::after{animation:ringSpin 7s linear infinite;}
  .signal-card.m-seen .signal-svg-wrap::after{animation:scan 3.6s cubic-bezier(.5,0,.5,1) infinite;}
}

@media (max-width: 900px){
  .flow-track{height:300vh;}
  .flow-sticky{grid-template-columns:1fr; gap:18px; align-content:center; padding-top:12px; padding-bottom:12px;}
  .flow-copy h2{font-size:24px;}
  .flow-steps{margin-top:14px;}
  .flow-step{display:none; padding-left:16px;}
  .flow-step.is-active{display:block;}
  .flow-stage{height:400px; min-height:0;}
  .flow-card{width:52px; height:52px;}
  .flow-logo{width:34px; height:34px; font-size:12px;}
  .flow-status{display:none!important;}
  .flow-stage:not([data-stage="0"]) .flow-card{top:calc(64px + var(--row) * 42px); height:36px;}
  .flow-tag{top:auto; bottom:-30px;}
}
@media (prefers-reduced-motion: reduce){
  .flow-card{animation:none;}
  .pnl-tilt{transform:none;}
}

/* ---------- Page loader: logo build (assets/loader.js), once per session. CSS lifts it at 1.6s if JS fails. ---------- */
.ad-loader{position:fixed; inset:0; z-index:10000; background:#0B0F14; display:grid; place-items:center; overflow:hidden; cursor:pointer;
  animation:adUp .35s cubic-bezier(.75,0,.2,1) 1.6s forwards;}
.ad-loader::before{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 68%); mask-image:radial-gradient(circle at 50% 50%, #000, transparent 68%);}
.ad-loader.skip{display:none;}
.ad-l-stage{position:relative; width:360px; height:301px; transform-origin:50% 50%;}
.ad-l-fallback{position:absolute; inset:0; width:100%; height:auto;}
.ad-l-skip{position:absolute; left:50%; bottom:clamp(20px,3.4vw,38px); transform:translateX(-50%); font:500 11px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#8F86A8; opacity:0; animation:adFadeIn .4s ease 1s forwards; pointer-events:none;}
@media (max-width:600px){ .ad-l-skip{display:none;} }
@keyframes adFadeIn{to{opacity:1;}}
@keyframes adUp{to{transform:translateY(-100%); visibility:hidden;}}
/* Hero entrance starts as the curtain lifts (~1.0s; loader.js plays at 2.6x). */
.ad-loading .hero p.lead{animation-delay:1.1s;}
.ad-loading .hero .hero-ctas{animation-delay:1.18s;}
.ad-loading .hero .hero-meta{animation-delay:1.26s;}
.ad-loading .hero h1.m-split .w{animation-delay:calc(var(--i) * 50ms + 1s);}
.ad-loading .hero h1.m-split em .w{animation-delay:calc(var(--i) * 50ms + 1s), 0s;}
@media (prefers-reduced-motion: reduce){ .ad-loader{display:none;} }

/* ---------- NSE market clock (strip label) ---------- */
.mk-clock{gap:8px; min-width:0;}
.mk-clock .mk-s{color:var(--on-deep);}
.mk-clock .mk-t{color:var(--on-deep-muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.mk-clock[data-state="open"] .live-dot{background:var(--up);}
.mk-clock[data-state="pre"] .live-dot{background:var(--gold);}
.mk-clock[data-state="closed"] .live-dot{background:var(--down); animation:none;}
.mk-clock[data-state="closed"] .live-dot::after{animation:none; display:none;}
@media (max-width: 640px){ .mk-clock .mk-cd{display:none;} }

/* ---------- Pricing block ---------- */
.price-home{padding-top:0;}
.price-grid{display:grid; grid-template-columns:1fr minmax(0, 420px); gap:56px; align-items:center;}
.price-calc{background:var(--ink); color:var(--on-deep); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; position:relative;}
.price-k{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-deep-muted);}
.price-row{display:flex; align-items:center; gap:16px;}
.price-row output{font-family:var(--mono); font-size:22px; font-weight:600; min-width:2ch; text-align:right; color:var(--gold);}
#priceSlider{flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:99px; outline-offset:6px;
  background:linear-gradient(90deg, var(--gold) 0 var(--pf,20%), rgba(255,255,255,.14) var(--pf,20%) 100%);}
#priceSlider::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--ivory); border:4px solid var(--gold); cursor:pointer; box-shadow:0 0 0 6px rgba(217,166,87,.15);}
#priceSlider::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--ivory); border:4px solid var(--gold); cursor:pointer;}
.price-out{display:flex; align-items:baseline; gap:10px; margin-top:6px;}
.price-out b{font-family:var(--mono); font-size:clamp(40px, 5vw, 52px); font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;}
.price-out span{color:var(--on-deep-muted); font-size:15px;}
.price-sub{font-family:var(--mono); font-size:13px; color:var(--on-deep-muted);}
.price-calc .btn-primary{align-self:flex-start; margin-top:8px;}
.price-calc .price-note{margin:0; font-size:13.5px; color:var(--on-deep-muted);}
.price-calc .price-note .inline-link{color:var(--gold)!important;}
@media (max-width: 900px){ .price-grid{grid-template-columns:1fr; gap:24px;} }

/* ---------- Sticky mobile CTA ---------- */
.m-sticky{display:none;}
@media (max-width: 720px){
  .m-sticky{display:flex; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:90;
    align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 16px; border-radius:16px;
    background:rgba(18,12,31,.94); border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transform:translateY(140%); opacity:0; transition:transform .45s var(--ease), opacity .3s var(--ease);}
  .m-sticky.show{transform:none; opacity:1;}
  .m-sticky-t{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .m-sticky-t b{color:var(--on-deep); font-size:14px; font-weight:600;}
  .m-sticky-t span{color:var(--on-deep-muted); font-size:12.5px;}
  .m-sticky .btn-primary{height:44px; padding:0 16px; font-size:14px; white-space:nowrap; flex:none;}
}

/* ---------- FII / DII section ---------- */
.fii-dii{padding-top:0;}
.fd-grid{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:20px; align-items:start;}
@media (max-width:860px){ .fd-grid{grid-template-columns:minmax(0,1fr);} }
.fd-today{background:var(--ink,#0B0F14); color:#FFFEF5; border-radius:18px; padding:22px 24px; display:flex; flex-direction:column; gap:16px;}
.fd-label{font:500 11.5px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#B7AFCB;}
.fd-big{display:flex; flex-direction:column; gap:4px;}
.fd-big span{font-size:14px; color:#CFC8DF;}
.fd-big b{font:600 clamp(26px,3vw,32px)/1.05 'JetBrains Mono',monospace; letter-spacing:-.02em;}
.fd-today .up{color:#7BE8B8;} .fd-today .dn{color:#F3A79C;}
.fd-mtd{display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:#CFC8DF;}
.fd-mtd b{font-family:'JetBrains Mono',monospace; font-weight:600;}
.fd-table-wrap{overflow-x:auto; border:1px solid var(--line,#E2DCEE); border-radius:18px; background:#fff;}
.fd-table{width:100%; min-width:560px; border-collapse:collapse; font-size:14.5px;}
.fd-table caption{caption-side:top; text-align:left; padding:16px 20px 6px; font-size:13px; color:#6B6479;}
.fd-table th, .fd-table td{padding:12px 20px; text-align:left; border-top:1px solid var(--line,#E2DCEE);}
.fd-table thead th{font:500 11px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#6B6479; border-top:none;}
.fd-table tbody th{font-weight:500; white-space:nowrap;} .fd-table tbody th span{display:block; font:400 12px 'JetBrains Mono',monospace; color:#6B6479;}
.fd-table td b{font:600 14px 'JetBrains Mono',monospace; white-space:nowrap;}
.fd-table td.up b{color:#15803D;} .fd-table td.dn b{color:#B91C1C;}
.fd-cell{display:flex; align-items:center; gap:10px;}
.fd-bar{flex:none; width:70px; height:8px; border-radius:4px; background:#EFEBF6; position:relative; overflow:hidden;}
.fd-bar::after{content:''; position:absolute; top:0; bottom:0; left:0; width:var(--w); border-radius:4px; background:#15803D; transform-origin:left; transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.fd-grid.fd-anim:not(.m-seen) .fd-bar::after{transform:scaleX(0);}
.fd-bar.neg::after{background:#B91C1C;}
.fd-grid.m-seen .fd-bar::after{transform:scaleX(1);}
.fd-table tbody tr:nth-child(2) .fd-bar::after{transition-delay:.06s;} .fd-table tbody tr:nth-child(3) .fd-bar::after{transition-delay:.12s;} .fd-table tbody tr:nth-child(4) .fd-bar::after{transition-delay:.18s;} .fd-table tbody tr:nth-child(5) .fd-bar::after{transition-delay:.24s;} .fd-table tbody tr:nth-child(6) .fd-bar::after{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){ .fd-bar::after{transform:none; transition:none;} }
.fd-note{margin:14px 0 0; font-size:13.5px; line-height:1.55; color:#6B6479; max-width:820px;}

/* Legal links row in footer */
.footer-legal{display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:18px; margin-top:18px; border-top:1px solid rgba(255,255,255,.1);}
.footer-legal a{font-size:14px;}
.footer-risk{font-size:12.5px; line-height:1.55; opacity:.75; margin-top:12px; margin-bottom:0;}

/* Index ticker items stay hidden until real index data has been painted
   (motion.js adds .has-indices to <html>). Until the backend serves that
   data there is nothing to show, and a row of dashes reads as broken. */
.live-item.idx, .live-sep{display:none;}
.has-indices .live-item.idx{display:inline-flex;}
.has-indices .live-sep{display:block;}