/* Headora.ai — лендинг. Тёмная тема в стиле bysol.pro: почти чёрный фон, синий акцент, Space Grotesk + Manrope. Токены на :root. */
/* ===== Tokens ===== */
:root{
  color-scheme:dark;
  --bg:#0A0A0D; --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.06);
  --surface-solid:#131318;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#FFFFFF; --muted:#A1A1AA; --dim:#6B6B75;
  --accent:#3B82F6; --on-accent:#FFFFFF; --accent-soft:rgba(59,130,246,.14);
  --glow:0 6px 22px rgba(59,130,246,.4);
  --success:#34D399; --gold:#FBBF24; --danger:#F87171; --on-danger:#1A0707;
  --warning:var(--gold);
  --bezel:#050507;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 1px 2px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.5);
  --f-display:"Space Grotesk","Manrope",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-lg:20px; --r-md:16px; --r-sm:10px;
  /* Единый вертикальный ритм: отступ между блоками. Секции задают только верхний отступ, чтобы паддинги не складывались. */
  --sec:clamp(64px,9vw,112px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;text-wrap:balance;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
.eyebrow{font:500 13px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.lead{color:var(--muted);font-size:18px;max-width:60ch}
.num{font-variant-numeric:tabular-nums}
section{position:relative}
.sec{padding-block:var(--sec) 0}
.sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4.4vw,56px);line-height:1.04}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding-inline:26px;border-radius:999px;font:600 16px/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{position:relative;background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)}
.btn-primary:hover{background:#2F74EA;box-shadow:0 8px 30px rgba(59,130,246,.55)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--text) 30%,transparent);background:var(--surface-2)}
.btn-gold{background:var(--accent);color:var(--on-accent)}
.btn-sm{height:40px;padding-inline:18px;font-size:14px}

/* ===== Header ===== */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 18px/1 var(--f-display);letter-spacing:-.02em}
.logo svg{width:28px;height:28px;color:var(--accent)}
.nav{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav a{text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--text)}
@media (max-width:860px){.nav{display:none}}

/* ===== Hero: см. hero.css ===== */
/* Оффер раннего доступа: ценность, во что она превращается, сколько мест осталось */
.offer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic txt cta" "meter meter meter";align-items:center;gap:12px 14px;width:100%;max-width:520px;padding:14px 14px 14px 16px;border-radius:18px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow)}
.offer-ic{grid-area:ic;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.offer-ic svg{width:20px;height:20px}
.offer-txt{grid-area:txt;display:grid;gap:3px;min-width:0}
.offer-val{font:600 16px/1.3 var(--f-body);color:var(--text)}
.offer-worth{font-size:13.5px;line-height:1.4;color:var(--muted)}
.offer-cta{grid-area:cta;display:inline-flex;align-items:center;gap:6px;height:38px;padding-inline:16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 14px/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.offer-cta:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text))}
.offer-cta:active{transform:scale(.98)}
.offer-meter{grid-area:meter;display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.offer-bar{position:relative;flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.offer-bar i{position:absolute;inset:0 auto 0 0;width:var(--p,32%);border-radius:inherit;background:var(--accent);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.offer-seats{flex:none;font:500 12.5px/1 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-seats b{color:var(--text);font-weight:600}
@media (max-width:480px){
  .offer{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic txt" ". cta" "meter meter";gap:10px 12px;padding:14px}
  .offer-cta{justify-self:start;height:34px;padding-inline:14px;font-size:13.5px}
  .offer-val{font-size:15px}
  .offer-meter{flex-wrap:wrap;gap:8px 12px}
  .offer-seats{font-size:12px}
}
.grad{color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font-size:13px;color:var(--dim);width:100%}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:24px;border-top:1px solid var(--line)}
.facts div{display:grid;gap:2px}
.facts b{font:600 20px/1.2 var(--f-display)}
.facts span{font-size:13px;color:var(--muted)}

/* ===== Model count (was a gradient) ===== */
.count-grad{color:var(--accent);font-weight:600;text-decoration:none}
a.count-grad:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== Catalog ===== */
.catalog{padding-block:var(--sec) 0;overflow:clip}
.catalog .sec-head{margin-bottom:36px}
.cat-shell{position:relative;display:grid;gap:18px}
.cat-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-4px}
.cat-tabs::-webkit-scrollbar{display:none}
.ctab{flex:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 14px/1 var(--f-body);cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.ctab:hover{color:var(--text);border-color:var(--line-2)}
.ctab .n{font:500 12px/1 var(--f-mono);padding:6px 9px;border-radius:999px;background:var(--surface-2);color:var(--text);transition:background .25s,color .25s}
.ctab[aria-selected="true"]{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.ctab[aria-selected="true"] .n{background:var(--accent);color:var(--on-accent)}

.search{position:relative;z-index:6}
.search-box{display:flex;align-items:center;gap:14px;height:68px;padding:0 12px 0 20px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),var(--shadow)}
.search-box > svg{width:22px;height:22px;flex:none;color:var(--muted);transition:color .25s}
.search-box:focus-within > svg{color:var(--accent)}
.search-box input{flex:1;min-width:0;height:100%;background:transparent;border:0;color:var(--text);font:400 17px/1 var(--f-body);text-overflow:ellipsis}
.search-box input:focus-visible{outline:none}
.search-box input::placeholder{color:var(--dim)}
.search-box input::-webkit-search-cancel-button{display:none}
.kbd{flex:none;font:500 12px/1 var(--f-mono);padding:6px 9px;border-radius:7px;border:1px solid var(--line-2);color:var(--dim)}
.clear{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);font-size:16px;cursor:pointer;display:grid;place-items:center}
.clear:hover{color:var(--text);background:color-mix(in srgb,var(--surface-2) 80%,var(--text))}
.results{position:absolute;left:0;right:0;top:calc(100% + 10px);margin:0;padding:8px;list-style:none;border-radius:18px;border:1px solid var(--line-2);background:var(--surface-solid);box-shadow:var(--shadow-lg);max-height:min(460px,62vh);overflow-y:auto;opacity:0;transform:translateY(-8px) scale(.99);transform-origin:top center;pointer-events:none;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.results.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s ease,transform .22s ease}
.res{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;animation:resIn .32s cubic-bezier(.2,.8,.2,1) both}
.res[aria-selected="true"],.res:hover{background:var(--surface-2)}
@keyframes resIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.res .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font:600 13px/1 var(--f-display);background:var(--accent-soft);color:var(--accent);border:1px solid transparent}
.res .nm{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .nm mark{background:none;color:var(--accent)}
.res small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.status{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);color:var(--success);white-space:nowrap}
.status i{width:7px;height:7px;border-radius:50%;background:var(--success);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
.res-foot,.res-empty{padding:12px;font-size:13.5px;color:var(--dim)}
.res-foot{border-top:1px solid var(--line);margin-top:6px}
.res-empty b{color:var(--text);font-weight:500}
@media (max-width:560px){
  .search-box{height:58px;padding-left:16px;border-radius:16px}
  .search-box input{font-size:16px}
  .kbd{display:none}
  .res{grid-template-columns:34px minmax(0,1fr)}
  .res .ic{width:34px;height:34px}
  .res .status{grid-column:2;margin-top:-4px}
}

.lanes{position:relative;display:grid;gap:12px;width:100vw;margin-left:calc(50% - 50vw);margin-top:18px;transition:opacity .28s ease}
.lanes.swap{opacity:0}
.lane{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.track{display:flex;gap:10px;width:max-content;padding-block:6px;will-change:transform}
.tag{flex:none;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:500 14.5px/1 var(--f-body);cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tag small{font:400 12px/1 var(--f-mono);color:var(--dim);transition:color .25s}
.tag:hover,.tag:focus-visible{outline:none;border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.tag:hover small,.tag:focus-visible small{color:var(--muted)}
.cat-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:22px;font-size:13.5px;color:var(--dim)}
.cat-foot b{color:var(--muted);font-weight:500}
@media (max-width:560px){.tag{height:40px;padding:0 14px;font-size:13.5px}.lanes{gap:8px}}
@media (prefers-reduced-motion:reduce){.lane{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ===== Memory ===== */
.memory{overflow:clip}
.pain{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}
.pain-card{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:grid;gap:12px;align-content:start}
.pain-card h3{font-size:15px;font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.pain-card.bad h3{color:var(--danger)}
.pain-card.good{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pain-card.good h3{color:var(--accent)}
.bubble{font-size:14.5px;padding:10px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);max-width:52ch}
.bubble.me{background:var(--accent-soft);border-color:transparent;justify-self:end}
.mem-stage{display:grid;grid-template-columns:1.35fr .9fr;gap:24px;align-items:stretch}
.mem-svg{padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.mem-svg svg{display:block;width:100%;height:auto}
.node rect{fill:var(--bg);stroke:var(--line-2);stroke-width:1;transition:all .35s}
.node text{font:500 15px var(--f-mono);fill:var(--muted);transition:fill .35s}
.node.on rect{stroke:var(--accent);fill:var(--accent-soft)}
.node.on text{fill:var(--text)}
.link{fill:none;stroke:var(--line-2);stroke-width:1.5;transition:stroke .35s}
.flow{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 12;opacity:0;transition:opacity .35s}
.flow.on{opacity:1}
.flow.in{animation:dash-in 1s linear infinite}
.flow.out{animation:dash-out 1s linear infinite}
@keyframes dash-in{to{stroke-dashoffset:-16}}
@keyframes dash-out{to{stroke-dashoffset:16}}
.core-bars line{stroke:var(--accent);stroke-width:3;stroke-linecap:round;opacity:.85}
.core-ring{fill:var(--bg);stroke:var(--accent);stroke-opacity:.5;stroke-width:1.5}
.core-ring-2{fill:none;stroke:var(--accent);stroke-opacity:.2}
.core-pulse{fill:none;stroke:var(--accent);stroke-opacity:.3;transform-origin:center;transform-box:fill-box;animation:corepulse 3s ease-out infinite}
@keyframes corepulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.35);opacity:0}}
.core-label{font:500 13px var(--f-mono);fill:var(--muted);letter-spacing:.08em}
.facts-panel{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:grid;gap:14px;align-content:start}
.facts-panel header{display:flex;justify-content:space-between;align-items:center;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fact{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14px;transition:all .35s}
.fact::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--dim)}
.fact.new{border-color:color-mix(in srgb,var(--success) 40%,transparent);background:color-mix(in srgb,var(--success) 8%,transparent)}
.fact.new::before{background:var(--success)}
.fact.used{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft)}
.fact.used::before{background:var(--accent)}
.fact.off{opacity:.3}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.step{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:transparent;color:var(--muted);text-align:left;cursor:pointer;font:500 14px/1.3 var(--f-body);transition:all .25s}
.step b{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--dim)}
.step[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.step[aria-pressed="true"] b{color:var(--accent)}
.caption{margin-top:16px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--muted);min-height:78px}
.caption strong{color:var(--text);font-weight:500}
.mem-bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.mem-bullets h3{font-size:16px;margin-bottom:8px}
.mem-bullets p{color:var(--muted);font-size:15px}
@media (max-width:900px){.pain,.mem-stage,.mem-bullets{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}

/* ===== Pricing (pay-as-you-go packs) ===== */
.guarantees{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.guarantees li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);font-size:14.5px;font-weight:500}
.guarantees svg{flex:none;width:22px;height:22px}
.cur-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:28px}
.cur-label{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cur{display:inline-grid;grid-auto-flow:column;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.cur button{height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 13px/1 var(--f-mono);letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s}
.cur button[aria-checked="true"]{background:var(--text);color:var(--bg)}
.cur-note{font-size:13.5px;color:var(--muted)}
.packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
/* Пять пакетов (число — из админки): 3 + 2 по центру, карточки той же ширины, что и при четырёх в ряд не помещались бы. */
.packs.n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.packs.n5 .pack{grid-column:span 2}
.packs.n5 .pack:nth-child(4){grid-column:2/span 2}
.pack{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 22px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.pack:hover{transform:translateY(-4px)}
.pack header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.pack h3{font-size:18px;letter-spacing:.02em}
.pack-for{color:var(--muted);font-size:14px;min-height:42px}
.pack-price{display:grid;gap:6px}
.pack-price .amt{font:600 clamp(30px,2.6vw,38px)/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap;transition:opacity .2s,transform .2s}
.pack-price .amt.tick{opacity:0;transform:translateY(6px)}
.pack-price .sub{font-size:13px;color:var(--dim)}
.pack .btn{width:100%;height:50px}
.pay-methods{margin-top:-8px;text-align:center;font:500 11.5px/1.3 var(--f-mono);color:var(--dim)}
.limits{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:14px}
.limits li{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:0 8px}
.limits .do{font:500 20px/1 var(--f-display);color:var(--muted)}
.limits b{font:600 20px/1 var(--f-display);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.limits .lbl{font-size:14px;color:var(--muted);line-height:1.3}
.limits small{grid-column:2/-1;font-size:12.5px;color:var(--dim);margin-top:4px}
.pack.pro{border:1.5px solid var(--accent);box-shadow:var(--shadow-lg)}
.pack.pro .do{color:var(--accent)}
.pop{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;color:var(--on-accent);background:var(--accent);white-space:nowrap}
.pack.master{border:1px solid var(--line-2);background:var(--surface-2)}
.pack.master h3{color:var(--text);font-family:var(--f-mono);font-weight:500;letter-spacing:.14em}
.pack.master .do{color:var(--muted)}
.tag-gold{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.btn-gold-solid{background:var(--text);color:var(--bg)}
.btn-gold-solid:hover{background:color-mix(in srgb,var(--text) 85%,var(--bg))}
.pack-dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.pack-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--line-2);cursor:pointer;transition:width .25s,background .25s}
.pack-dots button[aria-current="true"]{width:24px;background:var(--accent)}
.foot-note{margin-top:24px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:92ch}
.foot-note span{display:block;margin-top:6px;color:var(--dim)}
@media (max-width:1180px){.packs,.packs.n5{grid-template-columns:repeat(2,minmax(0,1fr))}.packs.n5 .pack,.packs.n5 .pack:nth-child(4){grid-column:auto}.guarantees{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .guarantees{grid-template-columns:1fr 1fr;gap:8px}
  .guarantees li{padding:12px;font-size:13.5px;gap:10px}
  .cur{width:100%;grid-auto-columns:1fr}
  .cur button{padding:0 8px}
  .packs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding:6px 20px 10px;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .packs::-webkit-scrollbar{display:none}
  .pack{flex:0 0 min(84%,340px);scroll-snap-align:center}
  .pack:hover{transform:none}
  .pack-for{min-height:0}
  .pack-dots{display:flex}
}
@media (max-width:420px){.guarantees{grid-template-columns:1fr}}
.dev{margin-top:56px;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;padding:28px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface)}
.dev h3{font-size:22px;margin-bottom:12px}
.dev p{color:var(--muted);font-size:15px}
.dev ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--muted)}
.dev li::before{content:"→ ";color:var(--accent);font-family:var(--f-mono)}
.code{overflow-x:auto;border-radius:10px;background:var(--bg);border:1px solid var(--line);padding:18px 20px;font:400 13px/1.7 var(--f-mono);color:var(--muted);white-space:pre}
.code .k{color:var(--accent);font-weight:500}.code .s{color:var(--text)}.code .c{color:var(--dim);font-style:italic}.code .f{color:var(--accent)}
@media (max-width:980px){.dev{grid-template-columns:1fr}}

/* ===== Trust ===== */
.trust-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.tbadge{display:inline-flex;align-items:center;gap:10px;height:56px;padding-inline:20px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);font:600 16px/1 var(--f-body)}
.tbadge .mk{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;font:700 13px/1 var(--f-body)}
.tbadge small{display:block;font:400 12px/1.2 var(--f-body);color:var(--muted);margin-top:3px}
.mk.freedom,.mk.hub,.mk.kz{background:var(--accent-soft);color:var(--accent)}
.faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:start}
.faq h2{font-size:clamp(26px,3vw,36px)}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 17px/1.4 var(--f-body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);font:400 18px/1 var(--f-mono);color:var(--muted);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg);color:var(--accent);border-color:var(--accent)}
.qa details p{padding:0 50px 22px 0;color:var(--muted);font-size:15.5px;max-width:68ch}
@media (max-width:900px){.faq{grid-template-columns:1fr}}

/* ===== Footer ===== */
.stores{display:grid;gap:10px}
.store{display:flex;align-items:center;gap:14px;height:60px;padding-inline:18px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);text-decoration:none;transition:border-color .2s}
.store:hover{border-color:color-mix(in srgb,var(--text) 30%,transparent)}
/* Приложения ещё нет в магазине (ссылка в админке пустая): «Скоро в App Store» — не ссылка. */
.store[aria-disabled=true]{cursor:default;opacity:.72}
.store[aria-disabled=true]:hover{border-color:var(--line-2)}
.store span{display:grid}
.store small{font-size:11px;color:var(--muted)}
.store b{font-weight:600;font-size:16px}
.store svg{width:24px;height:24px;flex:none}
.ftr{border-top:1px solid var(--line);padding-block:40px 56px;font-size:13px;color:var(--dim)}
.ftr .wrap{display:grid;grid-template-columns:1fr auto;gap:20px}
.ftr nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--muted)}
.todo{border-bottom:1px dashed var(--gold);color:var(--text);background:color-mix(in srgb,var(--gold) 12%,transparent)}
@media (max-width:700px){.ftr .wrap{grid-template-columns:1fr}}

/* ===== UX annotations layer ===== */
.note{display:none;margin-top:40px;padding:22px 24px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 6%,transparent);gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));font-size:14px;line-height:1.55;color:var(--text)}
.show-notes .note{display:grid}
.note > div{display:grid;gap:6px;align-content:start}
.note b{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.note-toggle{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);background:var(--surface-solid);color:var(--text);font:500 13px/1 var(--f-mono);cursor:pointer;box-shadow:var(--shadow)}
.note-toggle i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.note-toggle[aria-pressed="true"] i{background:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* Логотипы способов оплаты — без подписей, в одну строку */
.pay-logos{align-items:center;gap:12px}
.plogo{display:grid;place-items:center;height:64px;min-width:120px;padding-inline:22px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface)}
.plogo svg{height:28px;width:auto;max-width:100%}
.plogo svg[aria-label="Mastercard"]{height:34px}
.visa-t{font:italic 900 24px/1 Arial,Helvetica,sans-serif;letter-spacing:.5px;fill:#1A1F71}
.fp-t{font:700 19px/1 Arial,Helvetica,sans-serif;fill:var(--text)}
.fp-pay{font-weight:400;fill:var(--muted)}
.visa-t{fill:#fff}
:root[data-theme="dark"] .visa-t{fill:#fff}
@media (max-width:640px){.pay-logos{display:grid;grid-template-columns:1fr 1fr}.plogo{min-width:0;height:56px;padding-inline:14px}.plogo svg{height:24px}}
/* Банки-эмитенты карт по странам */
.banks{margin:-16px 0 40px;padding:18px 20px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface)}
.bank-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.bank-title{font:600 15px/1.3 var(--f-body)}
.bank-tabs{position:relative;display:flex;flex-wrap:wrap;gap:6px}
.bank-tab{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:500 13px/1 var(--f-body);cursor:pointer}
.bank-tab[aria-selected="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.bank-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.bank-chip{padding:8px 12px;border-radius:10px;background:var(--surface-2);font:500 14px/1 var(--f-body);color:var(--text)}
.bank-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:640px){.banks{padding:16px}.bank-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;width:100%}.bank-tab{flex-shrink:0}}
/* Плитка «Единый QR» (KZ · KG): нейтральный QR-глиф цветом текста, без брендов */
.plogo-qr{display:flex;align-items:center;gap:10px;color:var(--text)}
.plogo-qr svg{height:26px;flex:none}
.plogo-qr > span{display:grid;gap:3px;font:600 15px/1 var(--f-body);white-space:nowrap}
.plogo-qr small{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--dim)}
.bank-qr{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--text)}