:root{
  --bg:#0a0d16; --bg2:#0e1322; --card:rgba(255,255,255,.04); --line:rgba(255,255,255,.09);
  --txt:#eef1f8; --dim:#98a2bc; --acc:#5b8cff; --acc2:#9a6bff; --ok:#3ddc84;
  --grad:linear-gradient(120deg,var(--acc),var(--acc2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:16px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;overflow-x:hidden}
::selection{background:rgba(91,140,255,.35)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:inherit}

#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20;background:var(--grad);
  transform-origin:0 50%;transform:scaleX(0)}

.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;left:-140px;top:-160px;background:rgba(91,140,255,.28)}
.aurora i:nth-child(2){width:460px;height:460px;right:-120px;top:22%;background:rgba(154,107,255,.22)}
.aurora i:nth-child(3){width:560px;height:560px;left:30%;bottom:-260px;background:rgba(61,220,132,.12)}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,-40px) scale(1.15)}
  100%{transform:translate(-50px,50px) scale(.95)}
}

nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(10,13,22,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;font-style:normal;font-size:14px}
.nav a.l{color:var(--dim);text-decoration:none;font-size:14.5px;margin-left:auto}
.nav a.l + a.l{margin-left:20px}
.nav a.l:hover{color:var(--txt)}
.nav a.l.on{color:var(--txt);border-bottom:2px solid var(--acc);padding-bottom:4px}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  font:600 14.5px/1 inherit;border-radius:10px;padding:11px 20px;transition:.25s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 24px rgba(91,140,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(91,140,255,.5)}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.btn.sm{padding:8px 16px;font-size:13.5px;margin-left:20px}

header{position:relative;padding:88px 0 72px;text-align:center}
header.small{padding:56px 0 40px}
@keyframes pulse{50%{opacity:.45}}
h1{font-size:clamp(38px,6vw,64px);line-height:1.08;margin:30px 0 14px;letter-spacing:-1.5px;font-weight:800}
h1 em{font-style:normal;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% 0}}
h1.page{font-size:clamp(30px,5vw,44px)}
.sub{color:var(--dim);font-size:clamp(16px,2.4vw,19px);max-width:640px;margin:0 auto 34px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.waves path{fill:none;stroke:rgba(91,140,255,.28);stroke-width:2;stroke-dasharray:14 10;
  animation:flow 3.2s linear infinite}
.waves path:nth-child(2){stroke:rgba(154,107,255,.2);animation-duration:5s;animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-240}}
header .wrap{position:relative;z-index:1}
.bigtime{font-size:clamp(84px,15vw,170px);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.timebar{width:min(340px,60%);height:3px;margin:18px auto 0;border-radius:2px;
  background:rgba(255,255,255,.08);overflow:hidden}
.timebar i{display:block;height:100%;width:0;background:var(--grad);transition:width 1s linear}

.timelabel{margin-top:16px;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:3px;color:var(--dim);transition:color .5s}
.bigtime.break{background:linear-gradient(120deg,#3ddc84,#2bb3c9);-webkit-background-clip:text;background-clip:text;animation:none}
.timebar.break i{background:linear-gradient(90deg,#3ddc84,#2bb3c9)}
.timelabel.break{color:var(--ok)}

#glow{position:fixed;top:0;left:0;width:600px;height:600px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(91,140,255,.13),transparent 60%);z-index:0;
  transform:translate(-50%,-50%)}

section{padding:64px 0}
.kicker{color:var(--acc);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px}
h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.8px;margin:10px 0 12px}
.lead{color:var(--dim);max-width:560px;margin-bottom:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
  transition:transform .25s,border-color .25s,background .25s;will-change:transform}
.card:hover{border-color:rgba(91,140,255,.4);background:rgba(255,255,255,.06)}

#downloads{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.dl .card{text-align:center;padding:32px 24px}
.dl .pl{font-size:30px;line-height:1}
.dl h3{margin:14px 0 2px;font-size:18px}
.dl .meta{color:var(--dim);font-size:13px;margin-bottom:18px}
.dl .btn{width:100%;justify-content:center}

/* живая макет-приложение */
.app{max-width:1360px;margin:44px auto 0;border-radius:18px;border:1px solid var(--line);
  background:#0f1424;box-shadow:0 40px 90px rgba(0,0,0,.55);overflow:hidden}
.app-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.app-bar i{width:11px;height:11px;border-radius:50%}
.app-bar i:nth-child(1){background:#ff5f57}
.app-bar i:nth-child(2){background:#febc2e}
.app-bar i:nth-child(3){background:#28c840}
.app-bar span{flex:1;text-align:center;font-size:12.5px;color:var(--dim);margin-right:52px}
.shot-live{background:#0a0d16}
.shot-live iframe{display:block;width:100%;aspect-ratio:1152/1400;border:0;background:#0a0d16}
/* возможности */
.rows{margin-top:36px;border-top:1px solid var(--line)}
.frow{display:grid;grid-template-columns:72px 1fr auto;gap:24px;align-items:center;padding:24px 10px;
  border-bottom:1px solid var(--line);transition:background .3s,padding-left .3s}
.frow .idx{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.3;transition:opacity .3s}
.frow:hover{background:rgba(255,255,255,.035);padding-left:22px}
.frow:hover .idx{opacity:1}
.frow h3{font-size:18px;margin-bottom:4px}
.frow p{color:var(--dim);font-size:14.5px;max-width:600px}
.frow .ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;transition:.3s}
.frow .ic svg{width:22px;height:22px;fill:none;stroke:#c9d4e8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frow:hover .ic{background:var(--grad);border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.frow:hover .ic svg{stroke:#fff}
@media(max-width:640px){.frow{grid-template-columns:44px 1fr}.frow .ic{display:none}}
.date{margin-top:8px;font:12.5px Consolas,monospace;color:var(--dim);opacity:.85}

.pitch{font-size:clamp(21px,3.6vw,32px);font-weight:700;letter-spacing:-.5px;line-height:1.55;
  text-align:center;max-width:780px;margin:0 auto}
.pitch em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch-more{margin-top:20px;text-align:center;color:var(--dim);font-size:15px}
.pitch-more a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(91,140,255,.4)}
.pitch-more a:hover{border-bottom-color:var(--acc)}


/* changelog */
.rel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;margin-bottom:16px}
.rel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ver{background:var(--grad);color:#fff;font-weight:700;font-size:14px;border-radius:8px;padding:4px 12px}
.rel-head time{color:var(--dim);font-size:14px}
.rel-head a{margin-left:auto;font-size:14px;color:var(--acc);text-decoration:none;font-weight:600}
.rel-head a:hover{text-decoration:underline}
.rel .grp{margin-top:14px}
.rel .grp b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);margin-bottom:8px}
.rel ul{list-style:none}
.rel li{position:relative;padding-left:26px;color:#c4cce0;font-size:15px;margin-bottom:6px}
.rel li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%}
.rel .added li::before{background:var(--ok)}
.rel .fixed li::before{background:var(--acc2)}
.rel .changed li::before{background:#f5b84f}

/* roadmap — карта сокровищ */
.map{position:relative;max-width:880px;margin:0 auto;padding:24px 0 40px}
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.contours ellipse{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1.5;stroke-dasharray:5 8}
.compass{position:absolute;top:0;right:6px;width:88px;height:88px;opacity:.55;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.st{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:6px;padding:3px 10px;margin-bottom:8px}
.done .st{color:var(--ok);border:1px solid rgba(61,220,132,.45)}
.wip .st{color:var(--acc);border:1px solid rgba(91,140,255,.5)}
.todo .st{color:var(--dim);border:1px solid var(--line)}
.start .st{color:#f5b84f;border:1px solid rgba(245,184,79,.45)}

.wp,.treasure{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center}
.wcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.wcard h3{font-size:17px;margin-bottom:4px}
.wcard p{color:var(--dim);font-size:14.5px}
.wp.r .wcard{grid-column:3}
.treasure .wcard{grid-column:3}
.node{grid-column:2;justify-self:center;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:3px solid var(--dim);font-size:13px;line-height:1;color:var(--dim)}
.wp.done .node{background:var(--ok);border-color:var(--ok);color:#04140b}
.wp.wip .node{border-color:var(--acc);box-shadow:0 0 14px rgba(91,140,255,.55);animation:pulse 2s infinite}
.wp.start .node{border-color:#f5b84f;color:#f5b84f}
.conn{display:grid;grid-template-columns:1fr 64px 1fr;height:64px}
.conn svg{grid-column:2;width:64px;height:64px;overflow:visible}
.conn path{fill:none;stroke:rgba(139,149,171,.55);stroke-width:2.5;stroke-dasharray:3 7;stroke-linecap:round;
  animation:ants 1.1s linear infinite}
@keyframes ants{to{stroke-dashoffset:-10}}
.treasure .xmark{grid-column:2;justify-self:center;width:64px;height:64px;display:grid;place-items:center;
  animation:xpulse 2.4s ease-in-out infinite}
.treasure .xmark svg{width:54px;height:54px}
@keyframes xpulse{50%{transform:scale(1.14);filter:drop-shadow(0 0 20px rgba(154,107,255,.9))}}
@media(max-width:640px){
  .wp,.treasure{grid-template-columns:48px 1fr;gap:14px}
  .wp .node,.treasure .xmark{grid-column:1;justify-self:start;margin-left:15px}
  .wcard,.wp.r .wcard,.treasure .wcard{grid-column:2}
  .conn{grid-template-columns:48px 1fr}
  .conn svg{grid-column:1;width:48px;margin-left:8px}
  .compass{width:56px;height:56px;right:0}
}

.rev{opacity:0;transform:translateY(18px);transition:.6s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .aurora i,.bigtime,h1 em,.waves path,.compass,.conn path,.xmark{animation:none}
}