:root{
    --ink:#06060B; --ink-2:#0A0A11; --surf:#101018; --surf-2:#15151F;
    --line:rgba(255,255,255,.07); --line-2:rgba(123,92,255,.24);
    --text:#EDEEF4; --muted:#8E90A6; --faint:#5C5E73;
    --call:#7B5CFF; --put:#FF5C7A; --amber:#A18AFF; --cyan:#26D9F2;
    --call-dim:rgba(123,92,255,.14); --put-dim:rgba(255,92,122,.14);
    --r:16px; --maxw:1080px;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --disp:"Space Grotesk",system-ui,sans-serif;
    --poster:"Space Grotesk",system-ui,sans-serif;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--ink); color:var(--text);
    font-family:var(--sans); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  a{color:inherit}
  h1,h2,h3{font-family:var(--disp); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.02em}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

  /* ambient background */
  .bg{position:fixed; inset:0; z-index:-2; background:
      radial-gradient(1200px 620px at 72% -8%, rgba(123,92,255,.10), transparent 60%),
      radial-gradient(900px 520px at 8% 4%, rgba(161,138,255,.06), transparent 55%),
      var(--ink);}
  .grid{position:fixed; inset:0; z-index:-1; opacity:.5;
      background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
      background-size:52px 52px; mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 78%);}

  /* top bar */
  .bar{position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
      background:linear-gradient(180deg,rgba(8,11,17,.88),rgba(8,11,17,.55)); border-bottom:1px solid var(--line)}
  .bar-in{display:flex; align-items:center; gap:18px; height:60px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.03em}
  .spark{width:11px; height:11px; border-radius:3px; background:conic-gradient(from 210deg,var(--call),var(--cyan),var(--call)); box-shadow:0 0 16px rgba(123,92,255,.65)}
  .bar-ticker{display:flex; align-items:center; gap:9px; margin-left:auto; font-family:var(--mono); font-size:13px}
  .tk-sym{color:var(--muted)}
  .tk-px{font-weight:600; font-size:15px; transition:color .25s}
  .flash-up{color:var(--call)!important} .flash-dn{color:var(--put)!important}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--call); box-shadow:0 0 10px var(--call); animation:pulse 2.4s ease-in-out infinite}
  .dot.snap{background:var(--amber); box-shadow:0 0 10px var(--amber); animation:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .chip{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); padding:4px 9px; border-radius:999px}

  /* hero */
  .hero{padding:64px 0 24px}
  .hero h1{font-size:clamp(34px,6.4vw,68px); line-height:1.02; font-weight:800}
  .hero h1 .g{background:linear-gradient(92deg,var(--call),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .hero p{max-width:56ch; color:var(--muted); font-size:clamp(15px,1.7vw,18px); margin:20px 0 0}
  .hero .kpis{display:flex; flex-wrap:wrap; gap:26px; margin-top:26px}
  .kpi .n{font-family:var(--mono); font-size:22px; font-weight:600}
  .kpi .l{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

  section{padding:40px 0}
  .sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:22px}
  .sec-head h2{font-size:clamp(22px,3vw,30px)}
  .sec-head .idx{font-family:var(--mono); color:var(--call); font-size:13px}

  /* pricer */
  .term{border:1px solid var(--line-2); border-radius:var(--r); background:
      linear-gradient(180deg,var(--surf),var(--ink-2)); overflow:hidden;
      box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04)}
  .term-top{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--muted)}
  .term-top .b{width:11px; height:11px; border-radius:50%; background:var(--faint)}
  .term-top .b:nth-child(1){background:var(--put)} .term-top .b:nth-child(2){background:var(--amber)} .term-top .b:nth-child(3){background:var(--call)}
  .term-body{display:grid; grid-template-columns:1fr 1.05fr; gap:0}
  .pane{padding:24px}
  .pane.left{border-right:1px solid var(--line)}
  .field{margin-bottom:18px}
  .field > label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
  .seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:5px}
  .seg button{font-family:var(--disp); font-weight:700; font-size:14px; color:var(--muted); background:transparent; border:0; padding:11px; border-radius:8px; cursor:pointer; transition:.18s; letter-spacing:.01em}
  .seg button .s{display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:2px}
  .seg button[aria-pressed="true"][data-k="put"]{background:var(--put-dim); color:var(--put); box-shadow:inset 0 0 0 1px rgba(255,92,122,.4)}
  .seg button[aria-pressed="true"][data-k="call"]{background:var(--call-dim); color:var(--call); box-shadow:inset 0 0 0 1px rgba(123,92,255,.4)}
  .in{display:flex; align-items:center; gap:8px; background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:0 14px; transition:.18s}
  .in:focus-within{border-color:var(--line-2); box-shadow:0 0 0 3px rgba(161,138,255,.10)}
  .in .u{font-family:var(--mono); font-size:12px; color:var(--faint)}
  .in input{flex:1; width:100%; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--mono); font-size:17px; font-weight:500; padding:13px 0; font-variant-numeric:tabular-nums}
  .in input::-webkit-outer-spin-button,.in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .capwrap{transition:.2s; overflow:hidden}
  .capwrap[hidden]{display:none!important}

  /* quote readout */
  .prem{display:flex; align-items:flex-end; gap:12px; margin-bottom:6px}
  .prem .val{font-family:var(--mono); font-weight:600; font-size:clamp(38px,7vw,56px); line-height:.95; letter-spacing:-.02em}
  .prem .cur{font-family:var(--mono); font-size:15px; color:var(--muted); padding-bottom:8px}
  .prem-sub{font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-bottom:20px}
  .prem-sub b{color:var(--cyan); font-weight:600}
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:20px}
  .stat{background:var(--ink-2); padding:13px 15px}
  .stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:5px}
  .stat .v{font-family:var(--mono); font-size:16px; font-weight:600}
  .stat .v.pos{color:var(--call)} .stat .v.neg{color:var(--put)} .stat .v.amb{color:var(--amber)}

  /* payoff chart */
  .chart{border:1px solid var(--line); border-radius:12px; background:var(--ink-2); padding:14px}
  .chart .ch-head{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
  svg.pay{display:block; width:100%; height:150px}

  .note{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:16px; line-height:1.5}

  /* feature cards */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .card{border:1px solid var(--line); border-radius:14px; padding:22px; background:linear-gradient(180deg,var(--surf),var(--ink-2)); transition:.2s}
  .card:hover{border-color:var(--line-2); transform:translateY(-2px)}
  .card .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; margin-bottom:14px; font-family:var(--mono); font-weight:600; color:var(--call); background:var(--call-dim); border:1px solid rgba(123,92,255,.28)}
  .card h3{font-size:17px; margin-bottom:8px}
  .card p{color:var(--muted); font-size:13.5px; margin:0}

  /* flow */
  .flow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .step{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--surf); position:relative}
  .step .no{font-family:var(--mono); color:var(--faint); font-size:12px}
  .step h3{font-size:16px; margin:6px 0 7px}
  .step p{color:var(--muted); font-size:13px; margin:0}
  .badge{display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--call); border:1px solid rgba(123,92,255,.3); background:var(--call-dim); padding:8px 14px; border-radius:999px}

  .exo{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
  .exo .e{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surf); flex:1; min-width:200px}
  .exo .e .t{font-family:var(--disp); font-weight:700; font-size:15px; margin-bottom:4px}
  .exo .e .d{color:var(--muted); font-size:12.5px}
  .exo .e .soon{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber)}

  /* addresses / footer */
  .addr{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .addr .a{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--ink-2); padding:12px 15px; font-family:var(--mono); font-size:12.5px}
  .addr .a .lab{color:var(--muted)}
  .addr .a .hx{color:var(--cyan); word-break:break-all; text-align:right}
  footer{border-top:1px solid var(--line); margin-top:40px; padding:28px 0 48px; color:var(--faint); font-family:var(--mono); font-size:12px}
  footer .fr{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}

  @media (max-width:820px){
    .term-body{grid-template-columns:1fr}
    .pane.left{border-right:0; border-bottom:1px solid var(--line)}
    .cards,.flow{grid-template-columns:1fr}
    .bar-ticker .chip.hidem{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ============ shared: nav, footer menu, subpage prose, cookie banner ============ */

/* top-bar nav links */
.nav{display:flex; align-items:center; gap:22px; margin-left:auto}
.nav a{font-family:var(--sans); font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .15s}
.nav a:hover{color:var(--text)}
.nav a.cta{color:var(--call); border:1px solid rgba(123,92,255,.3); background:var(--call-dim); padding:7px 14px; border-radius:9px}
.nav a.cta:hover{color:var(--call); border-color:rgba(123,92,255,.55)}
.bar-in.hasnav{gap:14px}
@media (max-width:720px){ .nav{gap:14px} .nav a.hidem{display:none} }

/* full footer menu */
footer.site{border-top:1px solid var(--line); margin-top:56px; padding:44px 0 40px; color:var(--muted)}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px}
.fbrand .fb-top{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:18px; color:var(--text); letter-spacing:-.02em}
.fbrand p{font-size:13px; color:var(--muted); margin:12px 0 0; max-width:34ch; line-height:1.55}
.fcol h4,.fcol .fh{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; font-weight:500}
.fcol a{min-height:32px;display:flex;align-items:center;display:block; font-size:13.5px; color:var(--muted); text-decoration:none; padding:4px 0; transition:color .15s}
.fcol a:hover{color:var(--text)}
.fbot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:baseline; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.fbot .risk{max-width:74ch; line-height:1.5}
@media (max-width:720px){ .fgrid{grid-template-columns:1fr 1fr} .fbrand{grid-column:1/-1} }

/* subpage header + prose */
.pagehead{padding:56px 0 8px}
.pagehead .eyebrow{margin-bottom:14px}
.pagehead h1{font-family:var(--disp); font-weight:800; font-size:clamp(30px,5vw,50px); line-height:1.03; letter-spacing:-.02em}
.pagehead .lead{color:var(--muted); font-size:clamp(15px,1.7vw,18px); max-width:64ch; margin:16px 0 0}
.pagehead .updated{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:14px; letter-spacing:.04em}

.prose{max-width:760px; padding:24px 0 8px}
.prose h2{font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.01em; margin:40px 0 12px; scroll-margin-top:80px}
.prose h3{font-family:var(--disp); font-weight:600; font-size:17px; margin:26px 0 8px}
.prose p{color:#C9CBD9; margin:0 0 14px; line-height:1.68}
.prose ul,.prose ol{color:#C9CBD9; margin:0 0 16px; padding-left:22px; line-height:1.66}
.prose li{margin:6px 0}
.prose a{color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(161,138,255,.3)}
.prose a:hover{border-color:var(--cyan)}
.prose strong{color:var(--text); font-weight:600}
.prose code{font-family:var(--mono); font-size:.9em; background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--call)}
.prose hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.prose blockquote{border-left:2px solid rgba(123,92,255,.5); margin:16px 0; padding:6px 0 6px 18px; color:var(--muted)}
.prose .callout{border:1px solid var(--line); background:linear-gradient(180deg,var(--surf),var(--ink-2)); border-radius:12px; padding:16px 18px; margin:18px 0; color:#C9CBD9; font-size:14px}
.prose .callout.warn{border-color:rgba(161,138,255,.35); background:linear-gradient(180deg,rgba(161,138,255,.06),var(--ink-2))}
.prose table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500}
.prose td{color:#C9CBD9} .prose td.mono,.prose th.mono{font-family:var(--mono)}
.tablewrap{overflow-x:auto}

/* on-page toc for docs */
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px}
.toc a{font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px; transition:.15s}
.toc a:hover{color:var(--text); border-color:var(--line-2)}

/* faq accordion */
.faq{max-width:820px; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:8px 0}
.faq details{border-bottom:1px solid var(--line); background:var(--ink-2)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:18px 20px; font-family:var(--disp); font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--call); font-size:20px; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px; color:#C9CBD9; font-size:14px; line-height:1.66}
.faq .a p{margin:0 0 10px} .faq .a p:last-child{margin:0}

/* cookie banner */
.cookiebar{position:fixed; left:14px; right:14px; bottom:14px; z-index:60; max-width:560px; margin:0 auto;
  background:linear-gradient(180deg,var(--surf-2),var(--ink-2)); border:1px solid var(--line-2); border-radius:14px;
  padding:16px 18px; box-shadow:0 24px 60px -30px rgba(0,0,0,.9); display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.cookiebar p{margin:0; font-size:12.5px; color:var(--muted); flex:1; min-width:220px; line-height:1.5}
.cookiebar a{color:var(--cyan); text-decoration:none}
.cookiebar .btn-c{font-family:var(--sans); font-weight:600; font-size:13px; border:0; border-radius:9px; padding:10px 18px; min-height:40px; display:inline-flex; align-items:center; cursor:pointer; background:var(--call); color:#0A0618}
.cookiebar .btn-c.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}

/* ==================== FUTURISTIC LAYER ==================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* animated aurora background (enhances .bg globally) */
.bg{background:
    radial-gradient(1100px 600px at 72% -6%, rgba(123,92,255,.13), transparent 60%),
    radial-gradient(900px 520px at 6% 2%, rgba(161,138,255,.09), transparent 55%),
    radial-gradient(760px 620px at 96% 60%, rgba(38,217,242,.07), transparent 60%),
    var(--ink);
  animation:auroraDrift 26s ease-in-out infinite alternate;}
@keyframes auroraDrift{0%{filter:hue-rotate(0deg) saturate(1)}100%{filter:hue-rotate(24deg) saturate(1.18)}}
.grid{opacity:.42; animation:gridPan 40s linear infinite}
@keyframes gridPan{to{background-position:52px 52px}}

/* floating aurora blobs (global, via body pseudo) */
body::before{content:"";position:fixed; inset:-20% -20% auto -20%; height:70vh; z-index:-2; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(123,92,255,.16), transparent 70%) 20% 30%/40% 60% no-repeat,
    radial-gradient(closest-side, rgba(161,138,255,.14), transparent 70%) 80% 10%/44% 64% no-repeat,
    radial-gradient(closest-side, rgba(38,217,242,.10), transparent 70%) 55% 60%/50% 70% no-repeat;
  filter:blur(30px); animation:blobs 22s ease-in-out infinite alternate;}
@keyframes blobs{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,3%,0) scale(1.06)}100%{transform:translate3d(-2%,-2%,0) scale(1.02)}}
/* fine noise/grain overlay (global) */
body::after{content:"";position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.bar,.wrap,footer{position:relative; z-index:1}

/* hero: full-bleed MC canvas behind content */
.hero{position:relative; overflow:hidden; padding-top:78px; padding-bottom:40px}
#mc{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%)}
.hero > .wrap{position:relative; z-index:2}
.hero h1{text-shadow:0 0 42px rgba(123,92,255,.18)}
.hero h1 .g{filter:drop-shadow(0 0 22px rgba(123,92,255,.45))}
.spark{animation:sparkPulse 3.4s ease-in-out infinite}
@keyframes sparkPulse{0%,100%{box-shadow:0 0 16px rgba(123,92,255,.6)}50%{box-shadow:0 0 26px rgba(123,92,255,.95)}}

/* KPI glass tiles */
.hero .kpis{gap:14px}
.kpi{background:rgba(15,20,28,.5); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; padding:14px 18px; min-width:132px; transition:.25s}
.kpi:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 20px 40px -28px rgba(123,92,255,.5)}
.kpi .n{background:linear-gradient(180deg,#fff,#C9CBD9); -webkit-background-clip:text; background-clip:text; color:transparent}

/* rotating conic border for the pricer + cards */
.glowb{position:relative; isolation:isolate}
.glowb::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.4px; z-index:-1;
  background:conic-gradient(from var(--ang), transparent 0 62%, rgba(123,92,255,.9) 80%, rgba(161,138,255,.9) 92%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinang 7s linear infinite; opacity:.55}
@keyframes spinang{to{--ang:360deg}}
.term{box-shadow:0 50px 120px -60px rgba(0,0,0,.95), 0 0 60px -30px rgba(123,92,255,.25), inset 0 1px 0 rgba(255,255,255,.05)}
.card{position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:0; background:radial-gradient(220px 140px at var(--mx,50%) var(--my,0%), rgba(123,92,255,.14), transparent 70%); opacity:0; transition:opacity .3s; pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{box-shadow:0 30px 60px -40px rgba(123,92,255,.5)}
.card .ic{position:relative; overflow:hidden}
.card .ic::before{content:""; position:absolute; inset:0; background:conic-gradient(from var(--ang), transparent 60%, rgba(123,92,255,.6)); animation:spinang 5s linear infinite}

/* premium value glow + count style */
.prem .val{background:linear-gradient(180deg,#F2F0FF,#8E6BFF 130%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 24px rgba(123,92,255,.35))}
.badge{box-shadow:0 0 40px -12px rgba(123,92,255,.6)}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.revealed{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* section index chip glow */
.sec-head .idx{text-shadow:0 0 14px rgba(123,92,255,.6)}

/* addresses: mono glass rows with hover scan */
.addr .a{transition:.2s} .addr .a:hover{background:var(--surf-2)} .addr .a .hx{transition:.2s} .addr .a:hover .hx{color:#A18AFF}

/* live node graphic for chain section */
.chainviz{height:120px; margin-top:6px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--surf),var(--ink-2)); position:relative; overflow:hidden}
.chainviz canvas{position:absolute; inset:0; width:100%; height:100%}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .bg,.grid,body::before,.spark,.glowb::before,.card .ic::before{animation:none!important}
  #mc{opacity:.5}
}
@media (max-width:640px){ #mc{opacity:.7} .hero{padding-top:60px} }
.cards .card:nth-child(2){transition-delay:.1s}.cards .card:nth-child(3){transition-delay:.2s}
.flow .step:nth-child(2){transition-delay:.1s}.flow .step:nth-child(3){transition-delay:.2s}

/* ==================== display type + hero image ==================== */
.hero h1, .brand, .fbrand .fb-top{ font-family:var(--poster); font-weight:700; letter-spacing:-.03em }
.hero h1{ letter-spacing:0; line-height:.92; font-size:clamp(44px,9vw,104px); text-shadow:0 0 60px rgba(123,92,255,.30) }
.brand{ letter-spacing:.02em; font-size:22px }
.fbrand .fb-top{ letter-spacing:.02em; font-size:22px }
.sec-head h2{ font-family:var(--disp); font-weight:700 }

/* hero background image */
.hero-img{ position:absolute; inset:0; z-index:0; pointer-events:none }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:64% 42%; display:block }
.hero-img::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(11,11,13,.28) 0%, rgba(11,11,13,.55) 52%, var(--ink) 100%),
  linear-gradient(90deg, rgba(11,11,13,.9) 0%, rgba(11,11,13,.45) 42%, rgba(11,11,13,.05) 78%) }
.hero > .wrap{ position:relative; z-index:2 }
.hero .kpis{ gap:14px }

/* orange glow tuning */
.hero h1 .g{ background:linear-gradient(96deg,#7B5CFF,#A18AFF); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 26px rgba(123,92,255,.5)) }
.prem .val{ background:linear-gradient(180deg,#EDEBFF,#7B5CFF 130%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 24px rgba(123,92,255,.4)) }
.kpi .n{ background:linear-gradient(180deg,#fff,#DDDEE9); -webkit-background-clip:text; background-clip:text; color:transparent }
.spark{ border-radius:4px }
.term{ box-shadow:0 50px 120px -60px rgba(0,0,0,.95), 0 0 70px -34px rgba(123,92,255,.32), inset 0 1px 0 rgba(255,255,255,.05) }

/* seg buttons: call=violet, put=red */
.seg button[aria-pressed="true"][data-k="call"]{ background:var(--call-dim); color:var(--call); box-shadow:inset 0 0 0 1px rgba(123,92,255,.42) }
.seg button[aria-pressed="true"][data-k="put"]{ background:var(--put-dim); color:var(--put); box-shadow:inset 0 0 0 1px rgba(255,92,122,.42) }

/* accent links */
.nav a.cta{ color:var(--call); border-color:rgba(123,92,255,.32); background:var(--call-dim) }
.prose a{ color:var(--amber); border-bottom-color:rgba(161,138,255,.32) }
.prose code{ color:var(--call) }
.cookiebar .btn-c{ background:var(--call); color:#0A0618 }

@media (max-width:640px){ .hero-img img{ object-position:62% 42% } .hero h1{ font-size:clamp(40px,13vw,64px) } }

/* ==================== INTRO: digital decode + shutter reveal ==================== */
.intro{position:fixed; inset:0; z-index:9999; pointer-events:none}
.intro-panels{position:absolute; inset:0; display:flex}
.intro-panels i{flex:1; background:#08080a; border-right:1px solid rgba(123,92,255,.05); transition:transform .75s cubic-bezier(.76,0,.24,1)}
.intro.done .intro-panels i{transform:translateY(-101%)}
.intro.done .intro-panels i:nth-child(2){transition-delay:.06s}
.intro.done .intro-panels i:nth-child(3){transition-delay:.12s}
.intro.done .intro-panels i:nth-child(4){transition-delay:.18s}
.intro.done .intro-panels i:nth-child(5){transition-delay:.24s}
.intro-c{position:absolute; inset:0; display:grid; place-items:center; z-index:3; transition:opacity .35s ease, filter .35s ease}
.intro.done .intro-c{opacity:0; filter:blur(6px)}
.intro-word{font-family:var(--mono); font-weight:600; font-size:clamp(48px,15vw,132px); color:#fff; letter-spacing:.06em;
  text-shadow:0 0 46px rgba(123,92,255,.45); white-space:nowrap}
.intro-word .lit{color:var(--call)}
.intro-line{font-family:var(--mono); font-size:clamp(10px,2.4vw,12.5px); letter-spacing:.28em; color:var(--amber); margin-top:20px; min-height:1.2em; text-transform:uppercase}
.intro-line::after{content:"_"; color:var(--call); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.intro-scan{position:absolute; left:0; right:0; top:0; height:2px; z-index:4; opacity:.6;
  background:linear-gradient(90deg,transparent,var(--call),transparent); box-shadow:0 0 22px var(--call); animation:scanmove 1.5s ease-in-out infinite alternate}
@keyframes scanmove{0%{top:8%}100%{top:92%}}
body.intro-lock{overflow:hidden; height:100vh}
body.intro-lock .hero > .wrap > *{opacity:0; transform:translateY(20px)}
body.intro-go .hero > .wrap > *{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
body.intro-go .hero > .wrap > *:nth-child(2){transition-delay:.06s}
body.intro-go .hero > .wrap > *:nth-child(3){transition-delay:.14s}
body.intro-go .hero > .wrap > *:nth-child(4){transition-delay:.22s}

/* ==================== FUTURISTIC HEADER ==================== */
.scrollbar{position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--call),var(--amber)); box-shadow:0 0 12px rgba(123,92,255,.6)}
.bar{border-bottom:1px solid transparent; background:linear-gradient(180deg,rgba(11,11,13,.92),rgba(11,11,13,.6))}
.bar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent, rgba(123,92,255,.5) 30%, rgba(161,138,255,.5) 70%, transparent)}
.bar.scrolled{background:linear-gradient(180deg,rgba(11,11,13,.97),rgba(11,11,13,.82))}
.nav a{position:relative; padding:4px 0}
.nav a:not(.cta)::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:linear-gradient(90deg,var(--call),var(--amber));
  transform:scaleX(0); transform-origin:left; transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.nav a:not(.cta):hover::after{transform:scaleX(1)}
.nav a.cta{position:relative; overflow:hidden}
.nav a.cta::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent); transform:translateX(-120%)}
.nav a.cta:hover::before{transform:translateX(120%); transition:transform .6s ease}
.tk-live{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--call); text-transform:uppercase; padding:3px 8px; border:1px solid rgba(123,92,255,.25); border-radius:999px; background:rgba(123,92,255,.06)}
.tk-arrow{font-size:11px; transition:.2s}
.tk-arrow.up{color:var(--call)} .tk-arrow.dn{color:var(--put)}

@media (prefers-reduced-motion:reduce){
  .intro{transition:opacity .3s} .intro canvas{display:none}
  body.intro-lock .hero > .wrap > *{opacity:1; transform:none}
}
@media (max-width:560px){ .tk-live{display:none} }