@font-face{font-family:Onest;font-weight:400 800;font-display:swap;src:url(fonts/Onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:400 800;font-display:swap;src:url(fonts/Onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Unbounded;font-weight:700 800;font-display:swap;src:url(fonts/Unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-weight:700 800;font-display:swap;src:url(fonts/Unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --bg:#111214;--bg2:#0E0F11;--card:#1B1C21;--chip:#24262C;--line:#2E3036;--field:#2A2C33;
  --tx:#FEFFFC;--tx2:#B4B6BD;--tx3:#8E9097;
  --pr:#8116E0;--pr2:#6D3BF5;--ac:#00E676;--err:#FF6B6B;
  --r:18px;--dock:76px;
  --f-head:Unbounded,"Arial Black",system-ui,sans-serif;
  --f-body:Onest,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#F5F5F7;--bg2:#ECECF0;--card:#FFFFFF;--chip:#E9E9EE;--line:#DCDCE3;--field:#F0F0F4;
  --tx:#111214;--tx2:#4A4C54;--tx3:#7A7C85;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2{font-family:var(--f-head);font-weight:800;letter-spacing:-.02em;margin:0}
#app{max-width:560px;margin:0 auto;padding:0 16px calc(var(--dock) + 28px + env(safe-area-inset-bottom))}

/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px;position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 70%,transparent)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 18px var(--f-head);letter-spacing:-.03em}
.logo b{color:var(--ac)}
.bolt{width:22px;height:26px;background:var(--ac);clip-path:polygon(55% 0,0 58%,40% 58%,28% 100%,100% 38%,58% 38%,72% 0);filter:drop-shadow(0 0 8px rgba(0,230,118,.55))}
.top-phone{font-size:13px;color:var(--tx2);text-decoration:none;padding:7px 12px;border:1px solid var(--line);border-radius:99px}

/* hero */
.hero{position:relative;margin:10px 0 18px;padding:26px 20px 22px;border-radius:24px;overflow:hidden;background:
  radial-gradient(120% 90% at 100% 0%,rgba(129,22,224,.55),transparent 60%),
  radial-gradient(80% 70% at 0% 100%,rgba(0,230,118,.16),transparent 60%),var(--card);
  border:1px solid var(--line)}
.eyebrow{margin:0 0 8px;font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}
.hero h1{font-size:24px;line-height:1.18;margin-bottom:10px}
.lead{margin:0 0 18px;color:var(--tx2)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,opacity .12s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--pr2),var(--pr));color:#fff;box-shadow:0 8px 24px -8px rgba(129,22,224,.8)}
.btn-ghost{background:var(--chip);color:var(--tx);border:1px solid var(--line)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* категории */
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 14px;padding:2px 16px 6px;scrollbar-width:none;position:sticky;top:52px;z-index:4;background:linear-gradient(var(--bg) 75%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--chip);color:var(--tx2);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:#04140B}

/* карточки */
.grid{display:grid;gap:12px}
.card{position:relative;text-align:left;width:100%;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .12s}
.card:active{transform:scale(.985)}
.card:hover{border-color:#44474f}
.card h3{margin:0;font:700 16px/1.25 var(--f-body)}
.card p{margin:0;color:var(--tx2);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.price{font:800 16px var(--f-head);color:var(--ac);letter-spacing:-.02em}
.price small{font:500 12px var(--f-body);color:var(--tx3);margin-right:4px}
.go{color:var(--tx3);font-size:20px}
.tag{position:absolute;top:12px;right:12px;font:700 10px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--pr);padding:3px 8px;border-radius:99px}
.card:has(.tag) h3{padding-right:64px}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.why div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.why b{font-size:13px}.why span{font-size:12px;color:var(--tx3);line-height:1.3}
.foot{color:var(--tx3);font-size:12px;text-align:center}
.foot p{margin:4px 0}.foot a{color:var(--tx2)}
.muted{color:var(--tx3);font-size:13px}

/* нижняя плашка как на сайте */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%)}
.dock button{flex:1;max-width:180px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border-radius:16px;border:1px solid var(--line);background:rgba(27,28,33,.92);backdrop-filter:blur(10px);font:600 12px var(--f-body);cursor:pointer}
.dock button:first-child{background:linear-gradient(135deg,var(--pr2),var(--pr));border-color:transparent;color:#fff}
.i{width:20px;height:20px;background:currentColor;display:block;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6zM13 3.5V8h4.5M9 13h7M9 17h7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.i-phone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* шторки */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);animation:fade .2s}
.sheet-body{position:relative;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:up .25s cubic-bezier(.2,.8,.2,1)}
.sheet-body h2{font-size:20px;line-height:1.2;margin:0 40px 8px 0}
.sheet-body>p{color:var(--tx2);margin:0 0 12px}
.x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--chip);font-size:22px;line-height:1;cursor:pointer}
.incl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.incl li{position:relative;padding-left:26px}
.incl li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ac) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3L9.5 3.8' fill='none' stroke='%2304140B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.result{color:var(--ac)!important;font-weight:600}
.price-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 16px;flex-wrap:wrap}
.price-row .price{font-size:22px}
.row{display:flex;gap:10px}.row .btn{flex:1}

/* форма */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--chip);border-radius:14px;margin:6px 0 14px}
.seg button{border:0;background:none;padding:9px 4px;border-radius:10px;font-weight:600;font-size:13px;color:var(--tx2);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--bg);color:var(--tx);box-shadow:0 0 0 1px var(--line)}
.fld{display:block;margin-bottom:12px;font-size:13px;color:var(--tx2);font-weight:600}
.fld input,.fld select,.fld textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;background:var(--field);border:1px solid var(--line);border-radius:12px;font-size:16px;font-weight:400;color:var(--tx);outline:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--pr2);box-shadow:0 0 0 3px rgba(109,59,245,.25)}
.fld textarea{resize:vertical;min-height:84px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--tx2);margin:6px 0}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ac);flex:none}
.check a{color:var(--ac)}
.err{display:block;color:var(--err);font-size:12px;min-height:0;margin-top:4px}
.err:empty{display:none}
#f-submit{margin-top:10px}
.done{text-align:center;padding:12px 0 4px}
.done .ok{width:64px;height:64px;margin:6px auto 14px;border-radius:50%;background:var(--ac);color:#04140B;font-size:34px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 40px rgba(0,230,118,.4)}
.done h2{margin:0 0 8px}
.done p{color:var(--tx2);margin:0 0 18px}

@keyframes up{from{transform:translateY(30px);opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){#app{max-width:880px}.grid{grid-template-columns:1fr 1fr}.sheet{align-items:center}.sheet-body{border-radius:24px;border-bottom:1px solid var(--line);max-width:520px}}