:root{
  --bg:#060b16;--bg2:#0a1322;--panel:#0d1729;--panel2:#111f36;
  --line:#1e2c46;--line2:#2b3d5e;
  --text:#e6eefb;--muted:#93a3bd;--dim:#64748f;
  --blue:#2ea8ff;--cyan:#5eead4;--ice:#c9ecff;
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,.08);
  --radius:16px;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1100px 420px at 85% -5%,rgba(46,168,255,.12),transparent 55%),radial-gradient(900px 380px at 5% 0%,rgba(94,234,212,.07),transparent 50%),linear-gradient(180deg,var(--bg),var(--bg2) 60%,#05090f);background-attachment:fixed;color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
code{font-family:var(--mono);font-size:.86em;background:rgba(46,168,255,.1);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ice)}

/* ticker */
.ticker{display:flex;align-items:center;gap:12px;height:34px;padding:0 18px;background:#04070e;border-bottom:1px solid var(--line);font-size:12.5px;overflow:hidden}
.ticker-label{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);flex:0 0 auto}
.ticker-dot{width:7px;height:7px;border-radius:50%;background:#34d399;animation:blink 1.6s infinite}
@keyframes blink{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.ticker-view{flex:1;overflow:hidden;position:relative;height:100%}
.ticker-track{display:flex;gap:26px;align-items:center;height:100%;white-space:nowrap;width:max-content;animation:slide 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fx-item{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.fx-sym{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ice);background:rgba(46,168,255,.13);border:1px solid rgba(46,168,255,.3);border-radius:999px;padding:1px 7px}
.fx-price{font-weight:600}
.fx-chg{font-style:normal;font-size:11px;border-radius:999px;padding:0 6px}
.fx-chg.up{color:#6ee7b7;background:rgba(52,211,153,.13)}
.fx-chg.down{color:#fda4af;background:rgba(251,113,133,.13)}
.ticker-note{flex:0 0 auto;color:var(--dim);font-size:11px;font-family:var(--mono)}

/* header */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 26px;background:rgba(6,11,22,.92);backdrop-filter:blur(12px);border-bottom:1px solid transparent;background-image:linear-gradient(rgba(6,11,22,.94),rgba(6,11,22,.94)),linear-gradient(90deg,#2ea8ff,#5eead4,#7dd3fc,#2ea8ff);background-origin:border-box;background-clip:padding-box,border-box;background-size:100% 100%,200% 100%;animation:barflow 7s linear infinite}
@keyframes barflow{to{background-position:0 0,200% 0}}
.brand{display:flex;align-items:center}
.brand img{height:46px;width:auto;mix-blend-mode:screen;animation:logopulse 3.2s ease-in-out infinite}
@keyframes logopulse{0%,100%{filter:drop-shadow(0 0 4px rgba(46,168,255,.35));transform:translateY(0)}50%{filter:drop-shadow(0 0 16px rgba(94,234,212,.95));transform:translateY(-2px)}}
.topnav{margin-left:auto;display:flex;gap:4px}
.topnav a{color:#c4d2e8;font-weight:600;font-size:14.5px;padding:8px 14px;border-radius:10px}
.topnav a:hover{background:rgba(46,168,255,.1);color:#fff;text-decoration:none}
.topnav a.current{background:rgba(46,168,255,.16);color:var(--ice)}
.nav-btn{display:none;width:42px;height:42px;background:transparent;border:1px solid var(--line2);border-radius:12px;cursor:pointer;position:relative;margin-left:auto}
.nav-btn::before,.nav-btn::after,.nav-btn span{content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--blue)}
.nav-btn::before{top:13px}.nav-btn span{top:20px}.nav-btn::after{top:27px}

/* layout */
.wrap{max-width:1060px;margin:0 auto;padding:30px 26px 60px}
.crumbs{color:var(--dim);font-size:13px;margin:0 0 6px}
h1{font-size:38px;line-height:1.12;letter-spacing:-.02em;margin:.1em 0 .3em}
h2{font-size:22px;margin:1.6em 0 .4em;letter-spacing:-.01em}
.lede{color:var(--muted);font-size:17.5px;max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:26px 0 10px}
.hero-cta{display:flex;gap:12px;margin:20px 0 24px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:700;padding:11px 20px;border-radius:999px;font-size:15px}
.btn-primary{background:linear-gradient(180deg,#38bdf8,#0284c7);color:#02131f}
.btn-primary:hover{filter:brightness(1.1);text-decoration:none;color:#000}
.btn-ghost{border:1px solid var(--line2);color:var(--ice)}
.btn-ghost:hover{border-color:var(--blue);text-decoration:none}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:8px 26px;margin:0}
.hero-stats div{border-left:2px solid var(--line2);padding-left:12px}
.hero-stats dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.hero-stats dd{margin:0;font-weight:800;font-size:18px;color:var(--ice)}
.hero-art{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hero-art img{display:block;width:100%;height:auto}
.hero-art figcaption{padding:8px 14px;font-family:var(--mono);font-size:12px;color:var(--dim);border-top:1px solid var(--line)}

.kw{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 20px}
.kw li{font-family:var(--mono);font-size:12px;color:var(--ice);background:rgba(46,168,255,.1);border:1px solid rgba(46,168,255,.28);border-radius:999px;padding:4px 10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 8px}
.card{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;color:var(--text)}
.card:hover{border-color:rgba(46,168,255,.5);text-decoration:none;transform:translateY(-2px)}
.card b{font-size:17px;color:#fff}
.card span{color:var(--muted);font-size:14px;flex:1}
.card i{font-style:normal;color:var(--blue);font-weight:700;font-size:14px}

/* callout */
.warn{display:flex;gap:12px;align-items:flex-start;margin:26px 0;padding:14px 18px;background:var(--amber-bg);border:1px solid rgba(251,191,36,.35);border-radius:12px;font-size:14.5px}
.warn b{color:var(--amber);flex:0 0 auto}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.split h2{margin-top:0}
.split p{color:var(--muted)}

/* toc + steps + table */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin:18px 0;max-width:440px}
.toc b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px;color:var(--muted)}
.steps{list-style:none;margin:16px 0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.steps li::before{counter-increment:st;content:counter(st);flex:0 0 30px;height:30px;border-radius:50%;background:rgba(46,168,255,.15);border:1px solid rgba(46,168,255,.4);color:var(--ice);font-weight:800;display:flex;align-items:center;justify-content:center}
.grid-table{width:100%;border-collapse:collapse;margin:14px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14.5px}
.grid-table th,.grid-table td{border:1px solid var(--line);padding:9px 13px;text-align:left}
.grid-table th{background:rgba(46,168,255,.08);color:var(--ice)}

/* faq */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.faq details[open]{border-color:rgba(46,168,255,.4)}
.faq summary{cursor:pointer;font-weight:700;color:#fff;font-size:16px}
.faq p{color:var(--muted);margin:8px 0 2px}

/* 404 */
.nf{text-align:center;padding:70px 0}
.nf h1{font-size:44px}

/* footer */
.footer{border-top:1px solid var(--line);background:#04070e;padding:34px 26px 22px}
.foot-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot-grid img{height:30px;width:auto}
.foot-grid p{color:var(--dim);font-size:13.5px}
.foot-grid b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.foot-grid a,.foot-grid span{display:block;color:var(--muted);font-size:14px;margin:6px 0}
.foot-base{max-width:1060px;margin:22px auto 0;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px}

@media (max-width:880px){
  .ticker-note{display:none}
  .topbar{padding:8px 14px}
  .brand img{height:34px}
  .nav-btn{display:block}
  .topnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#070d18;border-bottom:1px solid var(--line);padding:8px 14px 14px}
  .topnav.open{display:flex}
  .topnav a{padding:11px 12px}
  .wrap{padding:22px 16px 44px}
  h1{font-size:29px}
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .foot-grid{grid-template-columns:1fr}
}