:root {
  --obsidian:#08090C; --graphite:#0F141A; --surface:#11161D; --raised:#171D25;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13);
  --em:#00C076; --em-bright:#0CD986; --em-soft:rgba(0,192,118,.10); --em-line:rgba(0,192,118,.32);
  --red:#F5566B;
  --text:#F4F7FA; --text-2:#A7B2BE; --text-3:#646E7A;
  --disp:'Space Grotesk', sans-serif; --body:'Inter', sans-serif; --mono:'JetBrains Mono', monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--obsidian); color:var(--text); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
::selection { background:rgba(0,192,118,.3); color:#fff; }
.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }
h1,h2,h3,.disp { font-family:var(--disp); }

.progress { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--em),var(--em-bright)); z-index:100; width:0%; box-shadow:0 0 12px rgba(12,217,134,.6); }
.aurora { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.b1 { width:560px; height:560px; background:radial-gradient(circle,rgba(0,192,118,.20),transparent 70%); top:-180px; left:-120px; animation:float1 18s var(--ease) infinite; }
.b2 { width:480px; height:480px; background:radial-gradient(circle,rgba(40,90,200,.14),transparent 70%); top:35%; right:-160px; animation:float2 22s var(--ease) infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(80px,120px) scale(1.15);} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-100px,-60px) scale(1.1);} }

header { position:fixed; top:0; left:0; right:0; z-index:80; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
header.scrolled { background:rgba(8,9,12,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom-color:var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-logo { height:25px; display:block; transition:transform .3s; }
.nav-logo:hover { transform:scale(1.06); }
.nav-right { display:flex; align-items:center; gap:8px; }
.nlink { color:var(--text-2); font-size:14px; font-weight:500; padding:9px 16px; border-radius:999px; transition:color .2s; }
.nlink:hover, .nlink.active { color:var(--text); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-weight:600; font-size:14px; padding:11px 22px; transition:transform .2s var(--ease), box-shadow .3s, background .2s; border:1px solid transparent; font-family:var(--body); white-space:nowrap; position:relative; overflow:hidden; cursor:pointer; }
.btn-ghost { color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--text-3); transform:translateY(-2px); }
.btn-em { background:var(--em); color:#04130C; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 22px rgba(0,192,118,.25); }
.btn-em:hover { transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 14px 38px rgba(0,192,118,.4); }
.btn-em::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent); transition:left .6s; }
.btn-em:hover::after { left:130%; }
.btn-lg { padding:15px 30px; font-size:15.5px; }

.hero { position:relative; min-height:94vh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 40px; overflow:hidden; }
#heroCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.55; -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent); mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent); }
.hero-inner { text-align:center; max-width:920px; margin:0 auto; }
.hero h1 { font-size:clamp(40px,7vw,80px); font-weight:700; letter-spacing:-.035em; line-height:.98; margin-bottom:26px; }
.hero h1 .line { display:block; opacity:0; animation:fadeUp .9s var(--ease) forwards; }
.hero h1 .line:nth-child(1){ animation-delay:.1s; } .hero h1 .line:nth-child(2){ animation-delay:.24s; }
.grad { background:linear-gradient(100deg,#0CD986,#00C076 40%,#7BE6B4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.sub { font-size:clamp(16px,2.1vw,20px); color:var(--text-2); max-width:580px; margin:0 auto 40px; opacity:0; animation:fadeUp .9s var(--ease) .4s forwards; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .9s var(--ease) .54s forwards; }
@keyframes fadeUp { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

.ticker { margin-top:54px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(15,20,26,.5); overflow:hidden; opacity:0; animation:fadeUp .9s var(--ease) .7s forwards; }
.ticker-track { display:flex; white-space:nowrap; animation:scrollX 40s linear infinite; width:max-content; }
.ticker:hover .ticker-track { animation-play-state:paused; }
@keyframes scrollX { to { transform:translateX(-50%); } }
.tk { display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-right:1px solid var(--line); font-family:var(--mono); font-size:13px; }
.tk .sym { color:var(--text); font-weight:700; } .tk .px { color:var(--text-2); }
.tk .ch { font-weight:700; } .tk .up { color:var(--em-bright); } .tk .dn { color:var(--red); }

.pagehead { padding:150px 0 50px; text-align:center; position:relative; }
.pagehead .tag { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--em); margin-bottom:16px; }
.pagehead h1 { font-size:clamp(34px,5.5vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1.02; }
.pagehead p { color:var(--text-2); font-size:17px; max-width:560px; margin:18px auto 0; }

section.block { padding:96px 0; position:relative; }
.shead { text-align:center; max-width:680px; margin:0 auto 64px; }
.shead .tag { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--em); margin-bottom:16px; }
.shead h2 { font-size:clamp(28px,4.4vw,46px); font-weight:700; letter-spacing:-.03em; line-height:1.06; }
.shead p { color:var(--text-2); font-size:16.5px; margin-top:18px; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat { background:linear-gradient(180deg,var(--surface),rgba(17,22,29,.4)); border:1px solid var(--line); border-radius:20px; padding:34px 24px; text-align:center; position:relative; overflow:hidden; transition:border-color .3s, transform .3s; }
.stat:hover { border-color:var(--em-line); transform:translateY(-4px); }
.stat::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--em-line),transparent); }
.stat .v { font-family:var(--disp); font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.stat .v .em { color:var(--em-bright); }
.stat .k { font-size:13px; color:var(--text-3); margin-top:12px; letter-spacing:.03em; }

.demo { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.demo-copy h2 { font-size:clamp(26px,3.8vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin-bottom:20px; }
.demo-copy p { color:var(--text-2); font-size:16px; margin-bottom:26px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { background:var(--raised); border:1px solid var(--line-strong); color:var(--text-2); border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:500; transition:all .2s var(--ease); cursor:pointer; }
.chip:hover { border-color:var(--em-line); color:var(--text); transform:translateY(-2px); }
.chip.active { background:var(--em-soft); border-color:var(--em-line); color:var(--em-bright); }
.demo-window { background:var(--graphite); border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.55); }
.dw-bar { display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(8,9,12,.5); }
.dw-bar .dt { width:11px; height:11px; border-radius:50%; background:var(--line-strong); }
.dw-bar .ttl { margin-left:8px; font-size:12.5px; color:var(--text-3); font-family:var(--mono); }
.dw-body { padding:22px; min-height:340px; }
.msg-user { display:flex; justify-content:flex-end; margin-bottom:18px; }
.msg-user span { background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 4px 14px; padding:11px 16px; font-size:14px; max-width:80%; }
.msg-bot { display:flex; gap:11px; }
.msg-bot .av { width:30px; height:30px; border-radius:9px; flex-shrink:0; background:var(--em-soft); border:1px solid var(--em-line); display:grid; place-items:center; font-size:9px; font-weight:700; color:var(--em-bright); font-family:var(--mono); }
.msg-bot .bd { flex:1; font-size:14px; color:var(--text-2); line-height:1.7; }
.demo-chart { margin:14px 0 6px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--obsidian); }
.demo-chart canvas { display:block; width:100%; height:150px; }
.dc-head { display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:11.5px; }
.dc-head .a { font-weight:700; color:var(--text); font-family:var(--mono); }
.dc-head .dir { font-size:9px; font-weight:700; letter-spacing:.1em; padding:3px 8px; border-radius:999px; }
.dir.long { background:var(--em-soft); color:var(--em-bright); border:1px solid var(--em-line); }
.dir.short { background:rgba(245,86,107,.1); color:var(--red); border:1px solid rgba(245,86,107,.3); }
.dc-head .sc { margin-left:auto; font-family:var(--mono); font-weight:700; color:var(--em-bright); }
.cur { display:inline-block; width:7px; height:14px; background:var(--em); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0;} }

.bento { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(180px,auto); gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; position:relative; overflow:hidden; transition:border-color .3s, transform .15s var(--ease); transform-style:preserve-3d; }
.card:hover { border-color:var(--line-strong); }
.card::after { content:''; position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(0,192,118,.10),transparent 65%); top:var(--my,50%); left:var(--mx,50%); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; pointer-events:none; }
.card:hover::after { opacity:1; }
.card.wide { grid-column:span 2; }
.card .ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; background:linear-gradient(145deg,#131A22,#0B0F14); border:1px solid var(--line-strong); }
.card .ico svg { width:22px; height:22px; stroke:var(--em-bright); fill:none; stroke-width:1.7; }
.card h3 { font-size:18.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:9px; }
.card p { color:var(--text-2); font-size:14.5px; line-height:1.62; }
.card .big-num { position:absolute; right:20px; bottom:-10px; font-family:var(--disp); font-size:120px; font-weight:700; color:rgba(255,255,255,.03); line-height:1; }

.band { background:linear-gradient(180deg,var(--graphite),var(--obsidian)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band-inner { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; }
.band h2 { font-size:clamp(26px,3.8vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:22px; }
.band p { color:var(--text-2); font-size:15.5px; line-height:1.78; margin-bottom:18px; }
.checks { list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:15px; }
.checks li { display:flex; gap:13px; align-items:flex-start; font-size:15px; }
.checks .ck { flex-shrink:0; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:var(--em-soft); border:1px solid var(--em-line); color:var(--em-bright); font-size:13px; margin-top:1px; }
.sigcard { background:var(--obsidian); border:1px solid var(--line-strong); border-radius:22px; padding:30px; box-shadow:0 40px 90px rgba(0,0,0,.5); transition:transform .12s var(--ease); transform-style:preserve-3d; }
.sigcard .h { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.sigcard .badge { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; padding:4px 11px; border-radius:999px; background:var(--em-soft); color:var(--em-bright); border:1px solid var(--em-line); }
.sigcard .asset { font-family:var(--disp); font-weight:700; font-size:19px; }
.sigcard .score { margin-left:auto; font-family:var(--mono); font-weight:700; font-size:30px; color:var(--em-bright); }
.sigcard .score .of { font-size:12px; color:var(--text-3); }
.sigcard .bar { height:4px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; margin-bottom:20px; }
.sigcard .fill { height:100%; width:91%; background:linear-gradient(90deg,var(--em),var(--em-bright)); border-radius:4px; }
.sigcard .row { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); font-size:14px; }
.sigcard .row span { color:var(--text-3); } .sigcard .row b { font-family:var(--mono); }
.sigcard .pos { color:var(--em-bright); } .sigcard .neg { color:var(--red); }
.sigcard .note { margin-top:16px; font-size:11.5px; color:var(--text-3); line-height:1.6; }

.mq { padding:40px 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mq-track { display:flex; white-space:nowrap; animation:scrollX 30s linear infinite; width:max-content; }
.mq-track span { font-family:var(--disp); font-size:clamp(24px,3.6vw,44px); font-weight:700; letter-spacing:-.03em; padding:0 36px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); }
.mq-track span.fill { color:var(--text); -webkit-text-stroke:0; }
.mq-track span.em { color:var(--em-bright); -webkit-text-stroke:0; }

.final { text-align:center; padding:130px 0; position:relative; overflow:hidden; }
.final::before { content:''; position:absolute; width:700px; height:400px; background:radial-gradient(ellipse,rgba(0,192,118,.16),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1; }
.final h2 { font-size:clamp(32px,5.5vw,60px); font-weight:700; letter-spacing:-.035em; line-height:1; margin-bottom:22px; }
.final p { color:var(--text-2); font-size:18px; max-width:520px; margin:0 auto 36px; }

footer { border-top:1px solid var(--line); padding:50px 0 60px; }
.foot-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px; margin-bottom:28px; }
.foot-logo { height:23px; }
.foot-links { display:flex; gap:24px; font-size:13.5px; color:var(--text-2); flex-wrap:wrap; }
.foot-links a:hover { color:var(--text); }
.foot-disc { font-size:12px; color:var(--text-3); line-height:1.7; border-top:1px solid var(--line); padding-top:24px; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (max-width:920px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .demo,.band-inner{ grid-template-columns:1fr; gap:40px; }
  .bento{ grid-template-columns:1fr; }
  .card.wide{ grid-column:span 1; }
  .nav-right .nlink{ display:none; }
  section.block{ padding:72px 0; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }