:root{
  --bg:#FBFAF7; --paper:#fff; --ink:#171A20; --mut:#5C6470; --soft:#9AA1AD;
  --line:#EAE6DE; --line2:#F2EFE8;
  --am:#F59E0B; --or:#F97316; --deep:#C2410C; --aink:#7C2D12;
  --tint:#FFF6E9; --tint2:#FFFBF2; --ok:#15803D;
  --r:20px;
  --sh1:0 1px 2px rgba(23,26,32,.04),0 6px 20px -10px rgba(23,26,32,.10);
  --sh2:0 2px 6px rgba(23,26,32,.05),0 22px 48px -18px rgba(194,65,12,.18);
  --grad:linear-gradient(120deg,#F59E0B,#F97316 60%,#EA580C);
  --ease:cubic-bezier(.22,.65,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:16px/1.66 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PT Sans",Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#FDE9C8;color:#43200a}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #FBBF24;outline-offset:2px;border-radius:6px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- reveal / motion ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,28px) scale(1.07)}}
@keyframes dashmove{to{stroke-dashoffset:-14}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}55%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){
  .rv,.bars rect{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:.3px}
.logo:hover{text-decoration:none}
.logo svg{transition:transform .5s var(--ease)}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links>a:not(.btn){color:#3d4450;font-size:14.5px;font-weight:600;position:relative;padding:4px 0}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--grad);border-radius:2px;transition:right .3s var(--ease)}
.nav-links>a:not(.btn):hover{color:var(--ink);text-decoration:none}
.nav-links>a:not(.btn):hover::after{right:0}
#mtoggle{display:none}
.burger{display:none;margin-left:auto;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:14px;transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-acc{background:var(--grad);color:#FFE9C9!important;box-shadow:0 8px 24px -8px rgba(234,88,12,.5)}
.btn-acc::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  transition:left .5s ease}
.btn-acc:hover::after{left:130%}
.btn-acc:hover{box-shadow:0 12px 30px -8px rgba(234,88,12,.6)}
.btn-line{border-color:var(--line);color:var(--ink)!important;background:#fff;box-shadow:var(--sh1)}
.btn-dark{background:var(--ink);color:#fff!important;box-shadow:0 8px 22px -10px rgba(23,26,32,.5)}
.nav .btn{padding:9px 17px;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;padding:84px 0 66px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;
  animation:drift 19s ease-in-out infinite alternate}
.b1{width:560px;height:560px;right:-140px;top:-200px;
  background:radial-gradient(circle at 35% 35%,#FFDCA8 0%,#FFEDD5 55%,transparent 72%)}
.b2{width:440px;height:440px;left:-160px;bottom:-220px;animation-delay:-9s;
  background:radial-gradient(circle at 60% 40%,#FDE7C7 0%,transparent 66%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(23,26,32,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(23,26,32,.05) 1px,transparent 1px);background-size:46px 46px;
  mask-image:radial-gradient(760px 480px at 34% 30%,#000 25%,transparent 74%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;gap:9px;align-items:center;font-size:13px;font-weight:700;
  color:var(--aink);background:var(--tint);border:1px solid #FBE3BD;border-radius:999px;
  padding:7px 15px;margin-bottom:22px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:pulse 2.4s infinite}
.hero h1{font-size:clamp(34px,4.9vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.035em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin:24px 0 32px;font-size:18.5px;color:var(--mut);max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:flex;gap:38px;margin-top:44px;flex-wrap:wrap}
.stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,#1d222b,#4a3520);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13.5px;color:var(--mut)}

/* live demo card */
.livecard{position:relative;background:rgba(255,255,255,.86);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--sh2);padding:24px}
.demo{backdrop-filter:blur(6px);animation:floaty 7s ease-in-out infinite}
.scenes{display:grid}
.scene{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scene.on{visibility:visible;opacity:1;transform:none}
.demo-head{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:#3d4450;
  padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:16px}
.demo-head .tag{margin-left:auto;font-size:12px;font-weight:700;color:var(--aink);
  background:var(--tint);border-radius:999px;padding:4px 11px;transition:.3s}
.dstep{display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border-radius:16px;
  border:1px solid transparent;opacity:.42;transition:all .45s var(--ease);position:relative}
.dstep+.dstep{margin-top:8px}
.dstep .di{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#F4F1EA;color:#6b7280;transition:all .4s var(--ease)}
.dstep b{display:block;font-size:15px}
.dstep small{color:var(--mut);font-size:13px;line-height:1.45;display:block}
.dstep .bar{height:4px;border-radius:4px;background:var(--line2);margin-top:9px;overflow:hidden;visibility:hidden}
.dstep .bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:4px}
.dstep.on{opacity:1;border-color:#FBE3BD;background:var(--tint2)}
.dstep.on .di{background:var(--grad);color:#FFE9C9;animation:pulse 2s infinite}
.dstep.on .bar{visibility:visible}
.dstep.on .bar i{width:100%;transition:width 2.1s linear}
.dstep.done{opacity:.9}
.dstep.done .di{background:#DCFCE7;color:var(--ok);animation:none}
.dstep .hash{display:inline-block;visibility:hidden;font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--ok);
  background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;padding:3px 9px;margin-top:8px;width:max-content}
.dstep.on .hash,.dstep.done .hash{visibility:visible}

/* ---------- marquee ---------- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;padding:16px 0;animation:mq 36s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.chip{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;font-size:14px;font-weight:600;
  color:#3d4450;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 16px}
.chip svg{color:var(--or)}

/* ---------- sections ---------- */
section{padding:84px 0;position:relative}
.sec-head{max-width:660px;margin-bottom:46px}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--deep);font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase}
.kicker::before{content:"";width:28px;height:2px;background:var(--grad);border-radius:2px}
h2.t{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.sec-head p{color:var(--mut);margin-top:12px;font-size:16.5px}

/* how (3 шага) */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.how::before{content:"";position:absolute;top:44px;left:8%;right:8%;height:2px;z-index:0;
  background-image:linear-gradient(90deg,var(--am) 50%,transparent 0);background-size:14px 2px;opacity:.5}
.hstep{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh1);transition:all .4s var(--ease)}
.hstep .n{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:20px;
  background:#F4F1EA;color:#6b7280;margin-bottom:16px;transition:all .45s var(--ease)}
.hstep h3{font-size:18px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.hstep p{color:var(--mut);font-size:14.5px}
.hstep.now{transform:translateY(-6px);border-color:#FBE3BD;box-shadow:var(--sh2)}
.hstep.now .n{background:var(--grad);color:#FFE9C9;animation:pulse 2.2s infinite}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--sh1);grid-column:span 2;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:#F6DFBB}
.bcard .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--tint),#FFE9C9);color:var(--deep);border:1px solid #FBE3BD;
  transition:transform .35s var(--ease)}
.bcard:hover .ic{transform:rotate(-6deg) scale(1.08)}
.bcard h3{font-size:16.5px;font-weight:800;margin-bottom:7px;letter-spacing:-.01em}
.bcard p{font-size:14.5px;color:var(--mut)}
.bcard.f{grid-column:span 3;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.bcard.w{grid-column:span 6;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.bill{min-height:120px;display:grid;place-items:center}
.bill svg{max-width:100%;height:auto}
.flowline{stroke:var(--or);stroke-width:2;stroke-dasharray:7 7;fill:none;animation:dashmove 1.1s linear infinite}
.js .bars rect{transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.in .bars rect{transform:scaleY(1)}
.bars rect:nth-child(2){transition-delay:.12s}.bars rect:nth-child(3){transition-delay:.24s}
.bars rect:nth-child(4){transition-delay:.36s}.bars rect:nth-child(5){transition-delay:.48s}

/* архитектура */
.arch{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.spec{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.spec span{font-size:13.5px;font-weight:700;color:#3d4450;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:7px 13px;box-shadow:var(--sh1)}
.term{background:#16181D;border-radius:20px;box-shadow:0 24px 60px -22px rgba(23,26,32,.45);overflow:hidden}
.term-head{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid #262a33}
.term-head i{width:11px;height:11px;border-radius:50%;background:#3a3f4a}
.term-head i:first-child{background:#F87171}.term-head i:nth-child(2){background:#FBBF24}.term-head i:nth-child(3){background:#34D399}
.term pre{padding:22px 24px;font:13.5px/1.9 ui-monospace,'Cascadia Code',Consolas,monospace;color:#D8E0EC;
  white-space:pre-wrap;min-height:150px}
.term .c{color:#7d8798}.term .p{color:#FBBF24}
.term .cur{display:inline-block;width:8px;height:15px;background:#FBBF24;vertical-align:-2px;animation:blink 1s steps(1) infinite}

/* безопасность */
.sec-tint{background:linear-gradient(180deg,#fff,var(--tint2) 60%,#fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* цена */
.price{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.pwrap{position:relative;border-radius:26px;padding:2px;background:conic-gradient(from 140deg,#F5D8A8,#F97316,#FDE68A,#F59E0B,#F5D8A8)}
.pcard{background:#fff;border-radius:24px;padding:36px;height:100%}
.pcard .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aink);background:var(--tint);border-radius:999px;padding:5px 13px}
.pcard .sum{font-size:46px;font-weight:800;margin:16px 0 2px;letter-spacing:-.04em;
  background:linear-gradient(120deg,#171A20,#C2410C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard .per{color:var(--mut);font-size:14px}
.pcard ul{list-style:none;margin:24px 0 28px}
.pcard li{padding:7px 0 7px 30px;position:relative;color:#3d4450;font-size:14.5px}
.pcard li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23EA580C" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>')}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh1)}
.card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(135deg,var(--tint),#FFE9C9);color:var(--deep);border:1px solid #FBE3BD}
.card h3{font-size:16.5px;font-weight:800;margin-bottom:7px}
.card p{font-size:14.5px;color:var(--mut)}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* CTA стенд */
.cta{position:relative;overflow:hidden;border-radius:28px;border:1px solid #FBE3BD;
  background:linear-gradient(120deg,#FFF9EF,#FFEFD8);padding:52px 56px;display:flex;align-items:center;
  justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-110px;top:-130px;
  background:radial-gradient(closest-side,rgba(249,115,22,.22),transparent);filter:blur(6px);
  animation:drift 14s ease-in-out infinite alternate}
.cta h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
.cta p{color:var(--mut);margin-top:10px;max-width:540px}

/* ---------- подстраницы ---------- */
.page-hero{position:relative;overflow:hidden;padding:66px 0 50px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #FFF8EC)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(23,26,32,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(23,26,32,.045) 1px,transparent 1px);background-size:44px 44px;
  mask-image:radial-gradient(640px 340px at 22% 20%,#000 25%,transparent 75%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;max-width:840px}
.page-hero p{color:var(--mut);margin-top:14px;max-width:740px;font-size:16.5px}
.crumbs{font-size:13.5px;color:var(--soft);margin-bottom:18px}
.crumbs a{color:var(--mut)}
article.doc{max-width:860px;padding:54px 0 84px}
article.doc h2{font-size:24px;font-weight:800;margin:46px 0 14px;letter-spacing:-.02em;scroll-margin-top:88px}
article.doc h3{font-size:17.5px;font-weight:800;margin:26px 0 10px}
article.doc p{margin:11px 0;color:#333a45}
article.doc ul,article.doc ol{margin:11px 0 11px 24px;color:#333a45}
article.doc li{margin:6px 0}
article.doc table.tb{margin:16px 0}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--sh1)}
.toc b{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.toc ol{margin:10px 0 0 20px;font-size:14.5px}
.toc li{margin:5px 0}
table.tb{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--sh1);font-size:14.5px}
table.tb th{background:#F8F5EE;text-align:left;padding:12px 16px;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#5c6470}
table.tb td{padding:12px 16px;border-top:1px solid var(--line2);vertical-align:top;color:#333a45}
table.tb tr td:first-child{font-weight:700;color:var(--ink)}
table.tb tbody tr{transition:background .2s}
table.tb tr:hover td{background:var(--tint2)}
.tbl-scroll{overflow-x:auto;border-radius:14px}
pre.code{background:#16181D;color:#D8E0EC;border-radius:16px;padding:20px 22px;
  font:13.5px/1.75 ui-monospace,'Cascadia Code',Consolas,monospace;overflow-x:auto;margin:14px 0}
pre.code .c{color:#7d8798}
.note{border:1px solid #FBE3BD;border-left:4px solid var(--am);background:var(--tint2);
  border-radius:0 14px 14px 0;padding:14px 18px;margin:16px 0;font-size:14.5px;color:var(--aink)}
.frm{display:grid;gap:14px;max-width:560px}
.frm label{font-size:13.5px;font-weight:700;color:#3d4450}
.frm input,.frm select,.frm textarea{width:100%;margin-top:6px;padding:12px 15px;border:1px solid var(--line);
  border-radius:12px;font:inherit;background:#fff;transition:border-color .2s,box-shadow .2s}
.frm input:focus,.frm textarea:focus,.frm select:focus{outline:none;border-color:var(--am);
  box-shadow:0 0 0 4px rgba(245,158,11,.18)}

/* ---------- footer (светлый) ---------- */
footer.site{background:linear-gradient(180deg,#fff,var(--tint2));border-top:1px solid var(--line);margin-top:44px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:40px;padding:56px 0 42px}
footer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:15px;color:var(--soft)}
footer p,footer li{font-size:14.5px;color:#3d4450;line-height:1.7}
footer li{list-style:none;margin:7px 0}
footer a{color:#3d4450}
footer a:hover{color:var(--deep)}
footer .fine{border-top:1px solid var(--line);padding:20px 0;font-size:13px;color:var(--soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .demo{animation:none}
  .how{grid-template-columns:1fr}
  .how::before{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bcard,.bcard.f{grid-column:span 2;grid-template-columns:1fr}
  .bcard.w{grid-column:span 2;grid-template-columns:1fr}
  .arch,.price{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  section{padding:60px 0}
  .g3,.g2{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bcard,.bcard.f,.bcard.w{grid-column:span 1}
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;
    flex-direction:column;padding:20px 24px 26px;gap:18px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh2);align-items:flex-start}
  #mtoggle:checked ~ .nav-links{display:flex}
  .burger{display:block}
  .cta{padding:36px 28px}
  .stats{gap:26px}
  footer .cols{grid-template-columns:1fr}
}