/* ===================== ElyAI — AI market terminal ===================== */
:root{
  --bg:#070614; --bg2:#0c0a22; --panel:rgba(22,20,48,.6); --panel-s:rgba(28,26,58,.75);
  --line:rgba(255,255,255,.09); --ink:#f1efff; --mut:#a79fd0; --dim:#7a74a8;
  --violet:#7c5cff; --indigo:#5b6cff; --cyan:#36d1ff; --up:#36e0b0; --dn:#ff6a8a;
  --r:18px; --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;width:100%;max-width:100%;position:relative}
img,canvas,svg,video{max-width:100%}
h1,h2,h3,.bname,.sec-h,.btn{font-family:Sora,sans-serif}
a{color:inherit;text-decoration:none}

/* aurora backdrop */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(180deg,var(--bg),var(--bg2))}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 22s ease-in-out infinite}
.aurora span:nth-child(1){width:620px;height:620px;background:#5b3cff;top:-180px;left:-120px}
.aurora span:nth-child(2){width:540px;height:540px;background:#1f7fff;top:10%;right:-160px;animation-delay:-7s}
.aurora span:nth-child(3){width:480px;height:480px;background:#00c2ff;bottom:-200px;left:30%;animation-delay:-13s;opacity:.3}
@keyframes drift{33%{transform:translate(60px,40px) scale(1.1)}66%{transform:translate(-40px,20px) scale(.95)}}

/* header */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(16px,4vw,40px);backdrop-filter:blur(14px);background:rgba(7,6,20,.6);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.bname{font-size:21px;font-weight:700;letter-spacing:-.02em}
.ai-pill{background:linear-gradient(100deg,var(--violet),var(--cyan));color:#07061a;border-radius:7px;padding:1px 6px;margin-left:1px}
.bar nav{display:flex;align-items:center;gap:6px}
.bar nav a{padding:8px 12px;border-radius:9px;color:var(--mut);font-weight:600;font-size:14.5px;transition:.15s}
.bar nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.bar nav a.pill{background:linear-gradient(100deg,var(--violet),var(--cyan));color:#070614;font-weight:700}

/* theme toggle */
.theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--mut);cursor:pointer;transition:.15s}
.theme-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun{display:none}
[data-theme="light"] .theme-btn .i-sun{display:block}
[data-theme="light"] .theme-btn .i-moon{display:none}

/* light theme */
[data-theme="light"]{
  --bg:#f4f3fe; --bg2:#eceafb; --panel:rgba(255,255,255,.72); --panel-s:rgba(255,255,255,.9);
  --line:rgba(40,30,90,.1); --ink:#1a163a; --mut:#5c5588; --dim:#8a84b4;
  --violet:#6a46f0; --indigo:#4a5bf0; --cyan:#0aa6d6;
}
[data-theme="light"] .aurora span{opacity:.22}
[data-theme="light"] .bar{background:rgba(255,255,255,.7)}
[data-theme="light"] .orbit-card,[data-theme="light"] .gauge-card,[data-theme="light"] .stream-card,
[data-theme="light"] .chat,[data-theme="light"] .ex,[data-theme="light"] .cap,[data-theme="light"] .step,
[data-theme="light"] .r,[data-theme="light"] .stat{box-shadow:0 12px 34px rgba(60,40,120,.08)}

main{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
section{padding:clamp(52px,7vw,96px) 0}
.sec-h{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sec-sub{color:var(--mut);max-width:620px;margin-top:10px;font-size:17px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);font-family:'JetBrains Mono',monospace}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.35}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;
  padding:13px 22px;border-radius:13px;border:1px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap}
.btn.primary{background:linear-gradient(100deg,var(--violet),var(--cyan));color:#070614;box-shadow:0 10px 28px rgba(124,92,255,.32)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(124,92,255,.45)}
.btn.ghost{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.big{padding:16px 30px;font-size:18px}
.btn[aria-disabled="true"]{opacity:.7;cursor:default;box-shadow:none;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ca2{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:13px}
.ca2 .ca-label{font-size:10px;letter-spacing:.1em;color:var(--cyan);background:rgba(54,209,255,.14);padding:3px 6px;border-radius:5px}

/* hero */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;padding-top:clamp(32px,5vw,56px)}
.hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.04;letter-spacing:-.03em;margin-top:16px}
.hero .grad{background:linear-gradient(100deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--mut);font-size:18px;margin-top:16px;max-width:520px}

/* chat */
.chat{margin-top:24px;background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.chat-top{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.co{display:flex;gap:5px}.co i{width:9px;height:9px;border-radius:50%;background:#3a3566}
.ctitle{font-weight:600;font-size:14px}
.cstate{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--up)}
.cstate i{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:blink 1.6s infinite}
.log{padding:16px;display:flex;flex-direction:column;gap:12px;max-height:280px;overflow-y:auto}
.msg{max-width:88%;padding:11px 15px;border-radius:14px;font-size:15px}
.msg.ai{align-self:flex-start;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.2);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:linear-gradient(100deg,var(--violet),var(--indigo));color:#fff;border-bottom-right-radius:5px}
.msg p+p{margin-top:8px}
.msg .coins{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.msg .coins li{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:14px;
  background:rgba(255,255,255,.04);border-radius:9px;padding:7px 10px}
.msg .coins .sym{color:var(--dim);font-size:12px;margin-left:6px}
.msg .up{color:var(--up)}.msg .dn{color:var(--dn)}
.typing{display:flex;gap:4px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:tp 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.chips button{font-family:Inter;font-weight:600;font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--mut);cursor:pointer;transition:.14s}
.chips button:hover{border-color:var(--violet);color:var(--ink)}
.askbar{display:flex;gap:8px;padding:0 14px 14px}
.askbar input{flex:1;font-family:Inter;font-size:15px;color:var(--ink);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.askbar input:focus{outline:none;border-color:var(--violet)}
.askbar button{width:46px;border:0;border-radius:12px;background:linear-gradient(100deg,var(--violet),var(--cyan));
  color:#070614;font-size:20px;font-weight:700;cursor:pointer;transition:.15s}
.askbar button:hover{filter:brightness(1.1)}.askbar button:disabled{opacity:.5;cursor:default}
.free-note{padding:0 16px 14px;color:var(--dim);font-size:12px}

/* live panel */
.live{display:flex;flex-direction:column;gap:16px}
.orbit-card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.orbit-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ohl{font-weight:600;font-size:14px}
.ohr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan)}
#orbit{width:100%;height:auto;display:block;border-radius:14px}
.orbit-foot{display:flex;gap:14px;align-items:center;margin-top:8px;font-size:12px;color:var(--mut)}
.orbit-foot i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.k-up{background:var(--up)}.k-dn{background:var(--dn)}
.orbit-foot .muted{margin-left:auto;color:var(--dim)}
.live-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.gauge-card,.stream-card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;padding:16px}
.lc-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--mut)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:blink 1.6s infinite}
.gauge{position:relative;margin-top:10px;display:grid;place-items:center}
.gauge svg{width:128px;height:128px;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.g-fg{fill:none;stroke:url(#gg);stroke-width:10;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;
  transition:stroke-dashoffset 1s ease;stroke:var(--up)}
.g-mid{position:absolute;text-align:center}
.g-mid b{display:block;font-family:Sora;font-size:26px;color:var(--ink)}
.g-mid span{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.stream{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:hidden}
.stream li{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);
  animation:slin .4s ease}
.stream li .s-sym{color:var(--ink);font-weight:500}
.stream li .s-up{color:var(--up)}.stream li .s-dn{color:var(--dn)}
.stream .s-empty{color:var(--dim)}
@keyframes slin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* examples */
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.ex{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:22px}
.ex .q{font-weight:600;font-size:16px;color:var(--cyan)}
.ex .a{color:var(--mut);font-size:15px;margin-top:10px}
.ex-tag{display:inline-block;margin-top:14px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--dim);
  border:1px solid var(--line);padding:4px 9px;border-radius:999px}

/* capabilities */
.can-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.cap{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:22px}
.cap-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(124,92,255,.14);margin-bottom:14px}
.cap-ic svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cap h3{font-size:18px;margin-bottom:6px}
.cap p{color:var(--mut);font-size:14.5px}
.soon{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--cyan);background:rgba(54,209,255,.14);padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:4px}

/* how */
.how{text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;text-align:left}
.step{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:24px}
.step .n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;font-family:Sora;font-weight:700;
  background:linear-gradient(100deg,var(--violet),var(--cyan));color:#070614;margin-bottom:13px}
.step h3{font-size:19px;margin-bottom:6px}.step p{color:var(--mut);font-size:15px}

/* token */
.token-card{background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(54,209,255,.08));border:1px solid var(--line);
  border-radius:26px;padding:clamp(24px,4vw,46px);display:grid;grid-template-columns:1.3fr 1fr;gap:38px;align-items:center}
.token-card h2{font-size:clamp(38px,5vw,60px);margin:8px 0 0;background:linear-gradient(100deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.token-left>p{color:var(--mut);font-size:17px;margin-top:12px}
.util{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.util li{padding-left:24px;position:relative;color:var(--mut)}.util li b{color:var(--ink)}
.util li::before{content:"◆";position:absolute;left:0;color:var(--cyan);font-size:12px;top:3px}
.token-right{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:rgba(7,6,20,.4);border:1px solid var(--line);border-radius:15px;padding:18px}
.stat b{display:block;font-family:Sora;font-size:23px;color:var(--cyan)}.stat span{font-size:13px;color:var(--mut)}

/* roadmap */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.r{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:15px;padding:20px}
.r span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.r.now span{color:var(--cyan)}.r.now{border-color:rgba(54,209,255,.3)}
.r p{margin-top:10px;color:var(--mut);font-size:14.5px}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:clamp(44px,6vw,70px) clamp(16px,4vw,40px) 40px;text-align:center}
.foot-cta{max-width:var(--max);margin:0 auto 32px}
.foot-cta h2{font-size:clamp(30px,5vw,50px)}
.foot-cta .actions{justify-content:center;margin-top:22px}
.fine{color:var(--dim);font-size:13px;max-width:700px;margin:7px auto 0;opacity:.85}

/* ---------------- responsive (every phone) ---------------- */
@media(max-width:920px){
  section{padding:clamp(40px,7vw,56px) 0}
  .hero{grid-template-columns:1fr;gap:26px;padding-top:24px}
  .hero h1{font-size:clamp(34px,9vw,48px)}
  .hero .lede{font-size:16px}
  .live{order:2}
  .ex-grid,.can-grid,.steps,.token-card,.token-right,.rail{grid-template-columns:1fr}
  .can-grid{grid-template-columns:1fr 1fr}
  .rail{grid-template-columns:1fr 1fr}
  .bar nav a:not(.pill):not([data-x]){display:none}
}
@media(max-width:560px){
  section{padding:38px 0}
  .live-row{grid-template-columns:1fr}
  .can-grid{grid-template-columns:1fr}
  .log{max-height:240px}
  .foot-cta .actions{flex-direction:column;align-items:stretch}
}