:root{
  --bg:#0b1120;--card:#131b2e;--card2:#1a2438;--line:#2a3650;
  --fg:#f1f5f9;--mut:#a3b1c6;--acc:#22c55e;--acc2:#38bdf8;--on-acc:#06210f;
  --tg:#2b5278;--tg-out:#2b5278;--r:18px;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(700px circle at 85% -10%,rgba(34,197,94,.14),transparent 60%),
  radial-gradient(600px circle at -10% 40%,rgba(56,189,248,.10),transparent 60%)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--acc);color:var(--on-acc);padding:8px 14px;border-radius:8px;z-index:50}

/* nav */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:20;width:min(960px,calc(100% - 24px));display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 20px;background:rgba(11,17,32,.78);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px}
.logo{font-weight:700;color:var(--acc)}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a:not(.btn){padding:10px 14px;color:var(--mut);font-size:14px;border-radius:999px;transition:color .2s,background .2s}
.nav nav a:not(.btn):hover{color:var(--fg);background:rgba(255,255,255,.06)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font:600 15px var(--sans);background:var(--acc);color:var(--on-acc);border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 8px 30px -10px rgba(34,197,94,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px -10px rgba(34,197,94,.8)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06);border-color:#3b4a69}
.btn.small{min-height:40px;padding:0 18px;font-size:14px}

section{max-width:1120px;margin:0 auto;padding:110px 24px 10px}
.eyebrow{color:var(--acc);font-size:13px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}}
h1{font-size:clamp(36px,6vw,68px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 20px;font-weight:700}
.grad{background:linear-gradient(110deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin:10px 0 10px;line-height:1.15}
.sub{color:var(--mut);max-width:640px;margin-bottom:34px}
.sub .mono{color:var(--fg);font-size:.92em}
.lead{color:var(--mut);font-size:18px;max-width:540px;margin-bottom:30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding-top:170px;min-height:88vh}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;list-style:none;font-size:12.5px;color:var(--mut)}
.facts li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.hero-visual{position:relative;height:360px}
.orb{position:absolute;inset:12% 6%;border-radius:50%;background:conic-gradient(from 200deg,var(--acc),var(--acc2),#0b1120 60%,var(--acc));filter:blur(60px);opacity:.35;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:14px;font-weight:500;box-shadow:0 20px 50px -20px #000;animation:bob 6s ease-in-out infinite}
.f1{top:6%;left:0}.f2{top:42%;right:0;animation-delay:-2s}.f3{bottom:6%;left:12%;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}

/* icons (inline SVG via mask) */
.ic{display:inline-block;width:22px;height:22px;background:var(--acc);flex:none;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.ic-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E")}
.ic-bolt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E")}
.ic-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4zM22 2 11 13'/%3E%3C/svg%3E")}
.ic-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
.ic-cart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E")}
.ic-table{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E")}
.ic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")}
.ic-key{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5 18 10'/%3E%3C/svg%3E")}

/* tabs */
.tabs{display:inline-flex;gap:6px;padding:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;margin-bottom:28px;flex-wrap:wrap}
.tab{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:var(--mut);font:600 14px var(--sans);cursor:pointer;transition:background .2s,color .2s}
.tab:hover{color:var(--fg)}
.tab.on{background:var(--acc);color:var(--on-acc)}

/* demo */
.demo{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start}
.phone{background:#0e1621;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px #000;display:flex;flex-direction:column;height:620px}
.phone-top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#17212b;border-bottom:1px solid #0b121a}
.phone-top b{display:block;font-size:15px;line-height:1.2}.phone-top small{color:#6d7f92;font-size:12px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);font-weight:700}
.chat{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.msg{max-width:84%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word;animation:pop .25s ease-out}
.msg.bot{background:#182533;border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--tg-out);border-bottom-right-radius:4px;align-self:flex-end}
.msg b{color:#fff}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.kb{display:flex;flex-direction:column;gap:5px;align-self:stretch;animation:pop .25s ease-out}
.kb .row{display:flex;gap:5px}
.kb button{flex:1;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:rgba(43,82,120,.55);color:#dbe8f6;font:500 13.5px var(--sans);cursor:pointer;transition:background .15s}
.kb button:hover{background:rgba(56,110,160,.75)}
.kb.used button{opacity:.45;pointer-events:none}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#182533;border-radius:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:#6d7f92;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.input{display:flex;gap:8px;padding:10px;background:#17212b}
.input input{flex:1;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #243242;background:#0e1621;color:var(--fg);font:15px var(--sans)}
.input input:disabled{opacity:.5}
.input input:focus{outline:2px solid var(--acc2)}
.input button{width:44px;height:44px;border:0;border-radius:50%;background:var(--acc);cursor:pointer;display:grid;place-items:center}
.input button:disabled{background:#243242;cursor:default}
.input button .ic{background:var(--on-acc);width:18px;height:18px}
.input button:disabled .ic{background:#6d7f92}

.info h3{font-size:26px;margin-bottom:8px}
.info>p{color:var(--mut);margin-bottom:20px}
.steps{list-style:none;display:grid;gap:10px;margin-bottom:24px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;color:var(--mut);font-size:15px}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--card2);color:var(--acc);font:700 12px var(--mono)}
.notify{margin-bottom:26px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.notify>span{font-size:12px;color:var(--mut)}
.note{margin-top:10px;padding:12px 14px;background:#182533;border-left:3px solid var(--acc);border-radius:8px;font-size:14px;white-space:pre-wrap;color:var(--mut);transition:color .3s}
.note.live{color:var(--fg);animation:pop .3s}

/* features */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.feat{padding:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .25s,transform .25s}
.feat:hover{border-color:rgba(34,197,94,.5);transform:translateY(-3px)}
.feat .ic{width:28px;height:28px;margin-bottom:14px}
.feat h3{font-size:18px;margin-bottom:6px}.feat p{color:var(--mut);font-size:15px}

/* code */
.codebox{background:#0a0f1c;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.codebar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--mut);font-size:12px}
.codebar span{width:11px;height:11px;border-radius:50%;background:#2a3650}
.codebar span:first-child{background:#ef4444}.codebar span:nth-child(2){background:#f59e0b}.codebar span:nth-child(3){background:var(--acc)}
.codebox pre{padding:22px;overflow-x:auto;font-size:13.5px;line-height:1.75;color:#cbd5e1;font-family:var(--mono)}
.codebox b{color:#c084fc;font-weight:500}.codebox u{color:#38bdf8;text-decoration:none}.codebox s{color:#86efac;text-decoration:none}.codebox i{color:#64748b;font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:18px;font-size:12.5px}
.chips li{padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--mut)}

/* timeline */
.timeline{list-style:none;display:grid;gap:14px;margin-top:28px}
.timeline li{display:flex;gap:20px;padding:22px 26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.timeline b{color:var(--acc);font-size:20px}
.timeline h3{margin-bottom:2px}.timeline p{color:var(--mut);font-size:15px}

.contact{text-align:center;margin:100px auto 0;padding:64px 24px;max-width:1072px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(500px circle at 50% 0,rgba(34,197,94,.16),transparent 65%),var(--card)}
.contact p{color:var(--mut);margin:10px 0 28px}
.contact .cta{justify-content:center}
footer{text-align:center;color:var(--mut);font-size:13px;padding:56px 20px 40px}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:130px;min-height:auto}.hero-visual{display:none}
  .demo{grid-template-columns:1fr;gap:28px}.phone{height:560px;max-width:420px;margin:0 auto;width:100%}
  .grid3{grid-template-columns:1fr 1fr}
  .nav nav a:not(.btn){display:none}
}
@media(max-width:560px){.grid3{grid-template-columns:1fr}.timeline li{flex-direction:column;gap:6px}section{padding-top:90px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}