:root{
  --bg:#f4f6f8; --surface:#ffffff; --ink:#16181d; --muted:#6e7687;
  --border:#e6e9ee; --teal:#0fb890; --teal-deep:#0a8f6f; --tile:#f1f3f6; --tile-ink:#16181d;
  --alt:#ffffff;   /* фон секций Функции/FAQ */
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 30px rgba(16,24,40,.06);
  --radius:18px;
}
.dark{
  --bg:#0d0f13; --surface:#15181e; --ink:#e7eaef; --muted:#8a93ad;
  --border:#262b34; --teal:#0fb890; --teal-deep:#19c79e; --tile:#1b1f27; --tile-ink:#e7eaef;
  --alt:#0a0c10;   /* темнее основного #0d0f13 */
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 36px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Outfit",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s;line-height:1.5}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.display{font-family:"Bricolage Grotesque","Outfit",sans-serif}
section{padding:88px 0}
h1,h2,h3{letter-spacing:-0.02em;line-height:1.08}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.muted{color:var(--muted)}
.center{text-align:center}
.sec-head{max-width:640px;margin:0 auto 48px}
.sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin-top:12px}
.sec-head p{color:var(--muted);font-size:18px;margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn svg{width:18px;height:18px}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-deep);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:8px 16px;font-size:14px}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;border-bottom:1px solid transparent}
header.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-color:var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:9px}
.brand .wm{font-family:"Outfit";font-weight:700;font-size:20px;letter-spacing:-.04em}
.nav-links{display:flex;gap:30px}
/* The header CTA keeps its slot from the start (visibility, not display) - when it fades in on
   scroll nothing in the nav shifts. Articles show it immediately via the .show class. */
#ctaTop{visibility:hidden;opacity:0;transition:opacity .25s}
#ctaTop.show{visibility:visible;opacity:1}
.nav-links a{font-size:14px;color:var(--muted);transition:.15s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.lang{position:relative}
.lang-menu{position:absolute;right:0;top:48px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:6px;min-width:140px;box-shadow:var(--shadow)}
.lang-menu a{display:block;padding:8px 12px;border-radius:8px;font-size:14px}
.lang-menu a:hover{background:var(--tile)}
.menu-toggle{display:none}

/* hero */
.hero{padding:140px 0 70px}
.hero-copy{max-width:760px;margin:0 auto;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--teal) 35%,transparent);
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal-deep);font-size:13px;font-weight:600}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.hero h1{font-size:clamp(40px,7vw,76px);font-weight:800;margin-top:22px}
.hero h1 .accent{color:var(--teal)}
.hero .sub{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin:22px auto 0;max-width:560px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.countdown{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.countdown .lab{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cd-row{display:flex;gap:10px}
.cd-cell{width:64px;padding:10px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:center}
.cd-cell b{display:block;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.cd-cell span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* slider */
.slider{margin:60px auto 0;max-width:960px}
.stage{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);
  aspect-ratio:16/9;background:linear-gradient(160deg,#dce6ef,#cdd9e6)}
.dark .stage{background:linear-gradient(160deg,#10151d,#0b0f16)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:center;padding:24px}
.slide.active{opacity:1}
.scene-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:14px;font-weight:600;
  color:var(--ink);opacity:.65}
.dark .scene-cap{color:#fff;opacity:.7}

/* scattered tiles (slide 1) */
.desk{position:absolute;inset:0}
.app{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.35s}
.app .ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.22)}
.app .ic svg{width:26px;height:26px}
.app small{font-size:10px;color:var(--ink);opacity:.6;max-width:74px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dark .app small{color:#fff;opacity:.55}

/* panel (slide 2) — looks like the app */
.panel{width:min(560px,92%);background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--border);border-radius:18px;backdrop-filter:blur(14px);box-shadow:var(--shadow);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border)}
.panel-bar .d{width:11px;height:11px;border-radius:50%}
.panel-bar .t{margin-left:8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.panel-bar .t .g{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.panel-body{padding:16px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:11px;padding:9px 12px;margin-bottom:14px;color:var(--muted);font-size:13px}
.search svg{width:15px;height:15px}
.chips{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.chip.on{background:var(--teal);color:#fff;border-color:transparent}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:520px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{aspect-ratio:1;border-radius:13px;border:1px solid var(--border);background:var(--tile);
  display:flex;align-items:center;justify-content:center;transition:.18s;cursor:pointer}
.tile .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.tile .ic svg{width:16px;height:16px}
.tile:hover{transform:translateY(-2px)}
/* NEON hover in dark */
.dark .tile:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 22px color-mix(in srgb,var(--teal) 60%,transparent)}

/* empty desktop (slide 3) */
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.empty .hot{width:66px;height:66px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--teal) 70%,transparent);
  display:flex;align-items:center;justify-content:center;opacity:.7;animation:breathe 3s ease-in-out infinite}
.empty .hot svg{width:26px;height:26px;color:var(--teal)}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.5}50%{transform:scale(1.04);opacity:.9}}

/* slider controls */
.dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--border);cursor:pointer;transition:.2s;padding:0}
.dots button.on{background:var(--teal);width:24px;border-radius:999px}
.arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;pointer-events:none}
.arrows button{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center}
.arrows svg{width:18px;height:18px}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:.2s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.card .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-deep)}
.card .ico svg{width:24px;height:24px}
.card h3{font-size:19px;font-weight:700;margin:18px 0 8px}
.card p{color:var(--muted);font-size:15px}

/* how it works steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:relative}
.step .n{width:32px;height:32px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.step h3{font-size:18px;font-weight:700;margin:16px 0 7px}
.step p{color:var(--muted);font-size:15px}

/* pricing */
/* Фон секций "Функции" и "FAQ": ТЕМНЕЕ основного фона и в тон палитры (25.07). Раньше в тёмной
   теме тут стоял жёстко зашитый нейтральный #10131a, и при палитре Cherry бордовая страница
   разрывалась чёрной полосой. Значение задаёт --alt в каждой палитре. */
.alt{background:var(--alt)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:860px){.prices{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.price{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}
.dark .price{background:var(--surface)}
.price.feat{border:2px solid var(--teal);position:relative}
.price .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.price h3{font-size:20px;font-weight:700}
.price .desc{color:var(--muted);font-size:14px;margin-top:4px;min-height:38px}
.price .amt{font-size:38px;font-weight:800;margin-top:14px}
.price .amt s{font-size:18px;font-weight:500;color:var(--muted);margin-left:6px}
.price .per{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price ul{list-style:none;margin:20px 0;flex:1;display:flex;flex-direction:column;gap:11px}
.price li{display:flex;gap:10px;font-size:14px}
.price li svg{width:17px;height:17px;color:var(--teal);flex:none;margin-top:2px}
.price .btn{align-self:center;justify-content:center;padding:11px 30px}
.note{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}

/* faq */
.faq{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.q{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.2s}
.q h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.q.open{border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);text-align:left}
.q button svg{width:20px;height:20px;color:var(--muted);flex:none;transition:.2s}
.q.open button svg{transform:rotate(180deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q .a p{padding:0 20px 20px;color:var(--muted);font-size:15px}

/* footer */
footer{border-top:1px solid var(--border);padding:56px 0 40px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot p{color:var(--muted);font-size:14px;margin-top:14px;max-width:280px}
.foot h4{font-size:14px;font-weight:700;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{color:var(--muted);font-size:14px}
.foot ul a:hover{color:var(--ink)}
.foot ul .soon-link{color:var(--muted);font-size:14px;opacity:.6}
.btn[aria-disabled="true"]{cursor:default;opacity:.75}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.socials a:hover{color:var(--ink)}
.socials svg{width:16px;height:16px}
.foot-bottom{margin-top:40px;padding-top:28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px}

@media(max-width:860px){
  .nav-links{display:none}
  .menu-toggle{display:flex}
}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--border)}
.mobile-menu.show{display:flex}
.mobile-menu a{padding:10px 24px;color:var(--muted)}
/* CTA внутри бургер-меню: в шапке телефона она не влезала (25.07) */
.mobile-menu .mm-cta{margin:8px 24px 4px;justify-content:center;color:#fff;padding:12px 18px}


@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ===================== interactive hero demo ===================== */
.demo-wrap{margin-top:56px}
.demo{position:relative;--da:#0fb890;--dp-bg:#181b22;--dp-tile:#242a36;--dp-ink:#eef1f5;--dp-mut:#98a1b3;--wall1:#242a36;--wall2:#12161f;--lbl:#e8ecf3}
.demo[data-th=paper]{--dp-bg:#f7f9fb;--dp-tile:#ffffff;--dp-ink:#16181d;--dp-mut:#66707f;--wall1:#e3e8ee;--wall2:#c9d2dc;--lbl:#2a2f38}
.demo[data-th=aurora]{--da:#38e0c8;--dp-bg:#0e1d1a;--dp-tile:#17342c;--dp-ink:#e7fbf5;--dp-mut:#7fa89e;--wall1:#174034;--wall2:#0a1815}
.demo[data-th=sunset]{--da:#ffb36b;--dp-bg:#2e1129;--dp-tile:#47203e;--dp-ink:#ffeaf5;--dp-mut:#c794b6;--wall1:#4a1c42;--wall2:#230c1f}
.demo-glow{position:absolute;inset:-70px -50px;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(46% 50% at 50% 44%,color-mix(in srgb,var(--da) 42%,transparent),transparent 72%);transition:background .45s}
.demo-stage{position:relative;z-index:1;height:440px;border-radius:24px;overflow:hidden;cursor:pointer;
  border:1px solid var(--border);box-shadow:var(--shadow);
  transform:perspective(1200px) rotateX(calc(var(--my,0)*-1.6deg)) rotateY(calc(var(--mx,0)*2.4deg));
  transition:transform .25s ease-out;will-change:transform}
.d-wall{position:absolute;inset:0;transition:background .45s;
  background:radial-gradient(90% 120% at 78% 90%,color-mix(in srgb,var(--da) 22%,transparent),transparent 55%),
             radial-gradient(120% 90% at 18% 8%,var(--wall1),var(--wall2))}
.d-icon{position:absolute;left:var(--x);top:var(--y);z-index:2;
  transition:transform .55s cubic-bezier(.55,.05,.35,1),opacity .45s;will-change:transform,opacity}
.d-drift{display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translate(calc(var(--mx,0)*var(--dp,12)*1px),calc(var(--my,0)*var(--dp,12)*.7px - var(--sy,0px)*var(--pf,1))) rotate(var(--r,0deg));
  transition:transform .3s ease-out}
.d-icon .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.30)}
.d-icon .ic svg{width:26px;height:26px}
.d-icon small{font-size:11.5px;font-weight:500;color:var(--lbl);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.demo[data-th=paper] .d-icon small{text-shadow:0 1px 4px rgba(255,255,255,.6)}
.d-panel{position:absolute;z-index:3;left:50%;top:47%;width:min(520px,88%);
  transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;
  background:var(--dp-bg);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:14px 14px 16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity .3s,transform .38s cubic-bezier(.2,.7,.3,1.12),background .45s}
.demo[data-th=paper] .d-panel{border-color:rgba(0,0,0,.08);box-shadow:0 24px 70px rgba(30,40,60,.28)}
.d-panel.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dp-bar{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;color:var(--dp-ink)}
.dp-bar b{font-size:13.5px;font-weight:700}
.dp-key{margin-left:auto;font-size:10.5px;color:var(--dp-mut);border:1px solid rgba(128,138,158,.35);border-radius:6px;padding:2px 7px}
.dp-search{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dp-mut);
  background:var(--dp-tile);border-radius:10px;padding:9px 12px;margin-bottom:12px;transition:background .45s}
.dp-search svg{width:14px;height:14px}
.dp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dp-tile{aspect-ratio:1;background:var(--dp-tile);border-radius:12px;display:grid;place-items:center;opacity:0;transition:background .45s}
.dp-tile .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff}
.dp-tile .ic svg{width:18px;height:18px}
.d-panel.play .dp-tile{animation:tBloom .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--td,0ms)}
.demo[data-anim=Cascade] .d-panel.play .dp-tile{animation-name:tCas}
.demo[data-anim=Radial] .d-panel.play .dp-tile{animation-name:tRad}
.demo[data-anim=Pop] .d-panel.play .dp-tile{animation-name:tPop;animation-duration:.46s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
@keyframes tBloom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes tCas{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tRad{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes tPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.d-cta{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,20,.55);backdrop-filter:blur(10px);color:#fff;font-family:inherit;font-size:13px;font-weight:600;
  border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .2s,transform .2s}
.d-cta:hover{transform:translateX(-50%) translateY(-2px)}
.demo[data-th=paper] .d-cta{background:rgba(255,255,255,.78);color:#16181d;border-color:rgba(0,0,0,.12)}
.demo-ctl{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.ctl{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px}
.ctl button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 13px;cursor:pointer;transition:.18s}
.ctl button:hover{color:var(--ink)}
.ctl button.on{background:var(--teal);color:#fff}
.ctl .sw{width:26px;height:26px;padding:0;border-radius:50%}
.sw[data-t=mono]{background:linear-gradient(135deg,#16181d 50%,#0fb890 50%)}
.sw[data-t=paper]{background:linear-gradient(135deg,#f4f6f8 50%,#0fb890 50%);border:1px solid var(--border)}
.sw[data-t=aurora]{background:linear-gradient(135deg,#10211f 50%,#38e0c8 50%)}
.sw[data-t=sunset]{background:linear-gradient(135deg,#43183a 50%,#ffb36b 50%)}
.ctl .sw.on{outline:2px solid var(--teal);outline-offset:2px}

/* ===================== bento features ===================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.bc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--teal) 45%,var(--border))}
.b-wide{grid-column:span 2}
.bc h3{font-size:17px;margin-top:14px}
.bc p{color:var(--muted);font-size:14.5px;margin-top:6px;line-height:1.55}
.vis{height:92px;border-radius:14px;background:var(--tile);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;position:relative}
.v-hide span{width:30px;height:30px;border-radius:9px;animation:vhide 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.3s)}
@keyframes vhide{0%,30%{opacity:1;transform:none}55%,80%{opacity:0;transform:translateY(-12px) scale(.55)}100%{opacity:1;transform:none}}
.v-search{flex-direction:column;gap:8px}
.vs-box{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-size:12.5px;color:var(--muted)}
.vs-box svg{width:13px;height:13px;flex:none}
.vs-type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;animation:vtype 2.8s steps(5) infinite alternate;color:var(--ink);font-weight:600}
@keyframes vtype{0%,15%{max-width:0}60%,100%{max-width:5ch}}
.vs-caret{width:1.5px;height:13px;background:var(--teal);animation:vblink 1s steps(1) infinite}
@keyframes vblink{50%{opacity:0}}
.vs-hit{opacity:0;animation:vhit 5.6s ease infinite}
.vs-hit .ic{display:block;width:24px;height:24px;border-radius:7px}
@keyframes vhit{0%,40%{opacity:0;transform:scale(.5)}52%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
.v-themes span{width:30px;height:30px;border-radius:9px;animation:vth 3.8s ease-in-out infinite;animation-delay:calc(var(--i)*.95s)}
@keyframes vth{0%,20%,100%{transform:none;box-shadow:none}8%{transform:translateY(-7px) scale(1.12);box-shadow:0 10px 20px rgba(0,0,0,.22)}}
.v-pop span{width:26px;height:26px;border-radius:8px;background:var(--teal);animation:vpop 3s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes vpop{0%,8%{opacity:0;transform:scale(.3)}22%,74%{opacity:.92;transform:scale(1)}88%,100%{opacity:0;transform:scale(.3)}}
.v-sec .vsec-pill{width:46px;height:36px;border-radius:11px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--teal)}
.v-sec .vsec-pill svg{width:18px;height:18px}
.v-sec .dotr{width:13px;height:13px;border-radius:4px;background:var(--muted);animation:vsec 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
@keyframes vsec{0%,15%{transform:none;opacity:.65}60%,100%{transform:translateX(-52px) scale(.35);opacity:0}}
/* Windows recolored: a mini taskbar slowly cycling through theme colours */
.vp-bar{width:72%;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:9px;animation:vpaint 7s ease-in-out infinite}
.vp-bar span{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.88)}
@keyframes vpaint{0%,100%{background:#0fb890}30%{background:#8b5cf6}60%{background:#e0a10c}}
/* file assistant: a dashed rubber-band sweeping over tiles */
.v-files{position:relative}
.v-files .vfi{width:30px;height:30px;border-radius:9px}
.vf-band{position:absolute;left:13%;top:22%;height:56%;width:0;border:1.5px dashed var(--teal);border-radius:8px;background:color-mix(in srgb,var(--teal) 10%,transparent);animation:vband 3.2s ease-in-out infinite}
@keyframes vband{0%,12%{width:0;opacity:0}25%{opacity:1}55%{width:74%}78%{width:74%;opacity:1}92%,100%{width:74%;opacity:0}}
/* image viewer: photos slide inside the frame, the right chevron "presses" in sync */
.v-view .vv-ch{width:13px;height:13px;color:var(--muted);flex:none}
.v-view .vv-ch.r{animation:vvpress 6s ease-in-out infinite;transform-origin:center}
.vv-img{width:58px;height:40px;border-radius:9px;position:relative;overflow:hidden;border:1px solid var(--border)}
.vv-strip{position:absolute;inset:0;display:flex;width:300%;animation:vvslide 6s ease-in-out infinite}
.vv-strip b{width:33.334%;height:100%;position:relative}
.vv-strip b::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85)}
.vv-strip b:nth-child(1){background:linear-gradient(135deg,#0ea5e9,#8b5cf6 75%)}
.vv-strip b:nth-child(2){background:linear-gradient(135deg,#10b981,#0ea5e9 75%)}
.vv-strip b:nth-child(3){background:linear-gradient(135deg,#f59e0b,#f43f5e 75%)}
@keyframes vvslide{0%,26%{transform:translateX(0)}33%,59%{transform:translateX(-33.334%)}66%,92%{transform:translateX(-66.667%)}100%{transform:translateX(0)}}
@keyframes vvpress{27%,60%,93%{transform:scale(1)}30%,63%,96%{transform:scale(.72)}33%,66%,99%{transform:scale(1)}}
.v-priv span{width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);animation:vfloat 3.2s ease-in-out infinite}
.v-priv span:nth-child(2){animation-delay:.4s}
.v-priv span:nth-child(3){animation-delay:.8s}
.v-priv svg{width:19px;height:19px}
@keyframes vfloat{50%{transform:translateY(-5px)}}

@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .bento{grid-template-columns:1fr}.b-wide{grid-column:auto}
  .demo-stage{height:360px}.d-icon .ic{width:44px;height:44px}
  .dp-grid{grid-template-columns:repeat(4,1fr)}.dp-grid .dp-tile:nth-child(n+9){display:none}
}
@media(prefers-reduced-motion:reduce){
  .demo-stage,.d-drift,.d-icon{transition:none}
  .vis *,.d-cta .pulse{animation:none!important}
}


/* panel chrome like the real app */
.dp-btns{margin-left:auto;display:flex;gap:6px}
.dp-btn{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--dp-mut);background:color-mix(in srgb,var(--dp-mut) 12%,transparent)}
.dp-btn svg{width:13px;height:13px}
.dp-sec{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--dp-mut);padding:0 4px 8px}

/* mobile menu: solid sheet (was transparent over the hero at scrollY=0) */
.mobile-menu{background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.25)}
/* "Soon" chip on store buttons */
.btn .soon{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.22);border-radius:999px;padding:2px 8px;margin-left:2px}
.btn-ghost .soon{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-deep)}
@media(max-width:640px){
  .d-panel{top:44%;width:min(440px,84%)}
  .d-cta{bottom:8px;font-size:11.5px;padding:7px 12px;max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demo-ctl .ctl button{padding:6px 10px;font-size:12px}
}

/* demo hint: wrap instead of clipping (long RU/DE strings were cut off) */
.d-cta{max-width:92%;white-space:normal;text-align:center;line-height:1.35}
@media(max-width:640px){
  .d-cta{white-space:normal;overflow:visible;text-overflow:clip;max-width:92%;bottom:8px}
}

/* ===== bento v2 (25.07): новые визуалы карточек функций ===== */
.b-low .vis{height:56px}
.b-low{padding:16px 22px}

/* история: хаос -> два ряда -> вокруг проявляется панель -> тает -> хаос (цикл 9с) */
.v-mess i{position:absolute;width:13px;height:13px;border-radius:4px;background:var(--c,#888);
  animation:vmess 9s ease-in-out infinite}
.v-mess .mframe{position:absolute;left:50%;top:50%;width:150px;height:62px;margin:-30px 0 0 -75px;
  border-radius:12px;border:1px solid var(--teal);background:rgba(15,184,144,.07);
  box-shadow:0 8px 26px rgba(0,0,0,.25);opacity:0;animation:vframe 9s ease-in-out infinite}
@keyframes vmess{
  0%,10%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:1}
  22%,34%{transform:none;opacity:1}
  38%{transform:none;opacity:.25}
  44%,74%{transform:none;opacity:1}
  86%,100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:1}}
@keyframes vframe{
  0%,34%{opacity:0;transform:scale(.86)}
  44%,74%{opacity:1;transform:scale(1)}
  84%,100%{opacity:0;transform:scale(.86)}}

/* панель: перетаскивание последней плитки на вторую позицию */
.v-pnl{padding:10px 14px;justify-content:center}
.vpn{width:min(320px,92%);margin:0 auto}
.vpn-box{background:rgba(127,140,155,.08);border:1px solid rgba(127,140,155,.22);
  border-radius:13px;padding:11px 14px 13px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.vpn-lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.05em;opacity:.55;margin-bottom:7px}
.vpn-g{display:flex;gap:7px;--adv:37px} /* шаг = ширина плитки + зазор; анимации считают от него */
.vpn-g b{width:30px;height:30px;border-radius:8px;background:var(--c);opacity:.92;flex:none;
  animation:vshift 5s ease-in-out infinite}
.vpn-g b:nth-child(1){animation:none}
.vpn-g b.drag{animation:vdrag 5s ease-in-out infinite;position:relative;z-index:2}
@keyframes vdrag{
  0%,14%{transform:none;box-shadow:none}
  22%{transform:translateY(-9px) scale(1.08);box-shadow:0 10px 22px rgba(0,0,0,.35)}
  46%{transform:translate(calc(var(--adv)*-4),-9px) scale(1.08);box-shadow:0 10px 22px rgba(0,0,0,.35)}
  56%,88%{transform:translate(calc(var(--adv)*-4),0) scale(1);box-shadow:none}
  97%,100%{transform:none;box-shadow:none}}
@keyframes vshift{
  0%,30%{transform:none}
  44%,88%{transform:translateX(var(--adv))}
  97%,100%{transform:none}}

/* обои: реальные миниатюры + ховер-зум */
.v-wallsb{height:auto;min-height:92px;overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;padding:8px;align-items:stretch;justify-content:stretch}
.v-wallsb b{display:block;aspect-ratio:16/9;border-radius:6px;background-size:cover;background-position:center;
  transition:transform .22s ease,box-shadow .22s ease;cursor:zoom-in}
.v-wallsb b:hover{transform:scale(2.1);z-index:9;box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 0 2px var(--teal);border-radius:8px}
.bc:has(.v-wallsb){overflow:visible}

/* живой стол: часы + дождь */
.v-live2{justify-content:flex-start}
.vlc{margin-left:16px;font-weight:800;font-size:23px;letter-spacing:.04em;line-height:1}
.vlc small{display:block;font-size:8.5px;letter-spacing:.24em;opacity:.55;margin-top:4px;font-weight:600}
.v-live2 b{position:absolute;top:-16px;width:1.5px;height:13px;border-radius:2px;
  background:linear-gradient(to bottom,transparent,var(--teal));animation:vdrop 1.9s linear infinite}
.v-live2 b:nth-of-type(1){left:52%}.v-live2 b:nth-of-type(2){left:61%;animation-delay:.45s;height:10px}
.v-live2 b:nth-of-type(3){left:70%;animation-delay:.9s}.v-live2 b:nth-of-type(4){left:79%;animation-delay:.25s;height:9px}
.v-live2 b:nth-of-type(5){left:88%;animation-delay:1.3s}.v-live2 b:nth-of-type(6){left:56%;animation-delay:1.6s;height:12px}
@keyframes vdrop{to{transform:translateY(120px)}}

/* подсветка: три ряда клавиш + мышь с диодом сверху */
.v-rgb2{gap:12px}
.kb2{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:min(180px,62%);
  padding:7px;border-radius:7px;background:rgba(127,140,155,.08);border:1px solid rgba(127,140,155,.18)}
.kb2 s{height:8px;border-radius:2px;background:rgba(127,140,155,.28);text-decoration:none;
  animation:vwave 2.6s linear infinite;animation-delay:var(--d)}
@keyframes vwave{0%,70%{background:rgba(127,140,155,.28);box-shadow:none}
  12%{background:var(--teal);box-shadow:0 0 8px rgba(15,184,144,.8)}30%{background:rgba(127,140,155,.28)}}
.ms2{width:17px;height:26px;border-radius:9px 9px 7px 7px;border:1px solid rgba(127,140,155,.3);
  background:rgba(127,140,155,.1);position:relative;overflow:hidden;flex:none}
.ms2 i{position:absolute;left:4px;right:4px;top:4px;height:7px;border-radius:99px;background:var(--teal);
  filter:blur(1px);animation:vmglow 2.6s ease-in-out infinite}
@keyframes vmglow{0%,100%{opacity:.35}50%{opacity:1}}

/* курсоры: настоящие рендеры приложения, сменяются */
.v-cur2{position:relative}
.v-cur2 img{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  image-rendering:auto;opacity:0;animation:vcur 8s infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.v-cur2 img:nth-child(1){animation-delay:0s}.v-cur2 img:nth-child(2){animation-delay:2s}
.v-cur2 img:nth-child(3){animation-delay:4s}.v-cur2 img:nth-child(4){animation-delay:6s}
@keyframes vcur{0%,21%{opacity:1;transform:translateY(0)}27%,95%{opacity:0;transform:translateY(5px)}100%{opacity:0}}

/* профили: слоты подсвечиваются по очереди */
.v-prof2{gap:9px}
.slot{width:30px;height:40px;border-radius:8px;border:1px solid rgba(127,140,155,.3);
  background:rgba(127,140,155,.08);display:grid;grid-template-rows:6px 1fr;gap:4px;padding:5px;
  animation:vpact 6s infinite}
.slot u{display:block;border-radius:99px;background:var(--c)}
.slot em{display:block;border-radius:4px;background:rgba(127,140,155,.16)}
.slot:nth-child(1){animation-delay:0s}.slot:nth-child(2){animation-delay:2s}.slot:nth-child(3){animation-delay:4s}
@keyframes vpact{0%,26%{border-color:var(--teal);box-shadow:0 0 0 1px rgba(15,184,144,.45)}
  30%,100%{border-color:rgba(127,140,155,.3);box-shadow:none}}

/* анимации открытия: четыре плитки появляются по-разному */
.v-anim{gap:14px}
.v-anim i{width:22px;height:22px;border-radius:6px;background:var(--teal);opacity:.9}
.v-anim .a-bloom{animation:vabloom 3.2s infinite}
.v-anim .a-casc{animation:vacasc 3.2s .15s infinite}
.v-anim .a-rad{animation:varad 3.2s .3s infinite}
.v-anim .a-pop{animation:vapop 3.2s .45s infinite}
@keyframes vabloom{0%,12%{transform:scale(0);opacity:0}30%,72%{transform:scale(1);opacity:.9}88%,100%{transform:scale(0);opacity:0}}
@keyframes vacasc{0%,12%{transform:translateY(-16px);opacity:0}30%,72%{transform:none;opacity:.9}88%,100%{transform:translateY(-16px);opacity:0}}
@keyframes varad{0%,12%{transform:rotate(-100deg) scale(.4);opacity:0}30%,72%{transform:none;opacity:.9}88%,100%{transform:rotate(-100deg) scale(.4);opacity:0}}
@keyframes vapop{0%,12%{transform:scale(0);opacity:0}26%{transform:scale(1.22)}34%,72%{transform:scale(1);opacity:.9}88%,100%{transform:scale(0);opacity:0}}

/* приватность компакт: иконки по очереди подкрашиваются акцентом */
.v-priv2{gap:12px}
.v-priv2 span{width:30px;height:30px;border-radius:9px;border:1px solid rgba(127,140,155,.28);
  display:grid;place-items:center;color:inherit;opacity:.65;animation:vtint 6s infinite}
.v-priv2 svg{width:15px;height:15px}
.v-priv2 span:nth-child(1){animation-delay:0s}.v-priv2 span:nth-child(2){animation-delay:2s}
.v-priv2 span:nth-child(3){animation-delay:4s}
@keyframes vtint{0%,24%{color:var(--teal);opacity:1;transform:translateY(-2px);border-color:rgba(15,184,144,.5)}
  30%,100%{color:inherit;opacity:.65;transform:none}}

@media(max-width:640px){
  .vpn-g{--adv:31px}
  .vpn-g b{width:24px;height:24px}
  .v-cur2 img{width:38px;height:38px;margin:-19px 0 0 -19px}
}

/* ===== before/after curtain slider ===== */
/* Ряд управления виджетом: вкладки + кружки сетапов (25.07). На узком экране переносится. */
.cmp-bar{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:0 auto 18px}
.cmp-sets{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:7px 10px}
.cmp-sets button{width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:linear-gradient(135deg,var(--b) 50%,var(--a) 50%);transition:transform .18s}
.cmp-sets button:hover{transform:scale(1.1)}
.cmp-sets button.on{outline:2px solid var(--teal);outline-offset:2px}
.cmp-toggle{display:flex;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:5px;width:max-content}
.cmp-toggle button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;
  border:0;border-radius:999px;padding:6px 14px;cursor:pointer;transition:.18s}
.cmp-toggle button.on{background:var(--teal);color:#fff}
.cmp{--pos:50%;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;cursor:ew-resize;
  border:1px solid var(--border);box-shadow:var(--shadow);user-select:none;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgba(255,255,255,.85);
  box-shadow:0 0 14px rgba(0,0,0,.4);transform:translateX(-1px)}
.cmp-handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;
  border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cmp-lab{position:absolute;bottom:14px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:#fff;background:rgba(10,14,20,.55);backdrop-filter:blur(8px);border-radius:999px;padding:4px 12px;pointer-events:none}
.cmp-lab.l{left:14px}.cmp-lab.r{right:14px}
@media(max-width:640px){.cmp{border-radius:16px}.cmp-handle .grip{width:34px;height:34px}}

.cmp-handle .grip{transition:transform .15s}
.cmp:active .cmp-handle .grip{transform:translate(-50%,-50%) scale(1.12)}

/* ===== МОБИЛЬНЫЕ ФИКСЫ 25.07 (в КОНЦЕ файла: раньше блок стоял выше базовых правил и они его перебивали) =====
   1. Страница ездила по горизонтали: свечение демо (inset -50px по бокам) шире вьюпорта.
      overflow-x:clip не ломает sticky-шапку, в отличие от overflow:hidden.
   2. В шапке телефона четыре кнопки не влезали - CTA переехала в бургер-меню. */
html{overflow-x:clip}
@media(max-width:640px){
  .demo-glow{inset:-40px 0}
  .nav-right #ctaTop{display:none}
  .nav-right{gap:8px}
  .cmp-bar{gap:10px}
  .cmp-sets button{width:24px;height:24px}
  .cmp-toggle button{padding:6px 11px;font-size:12px}
}

/* ===== ПАЛИТРЫ VEALO НА САЙТЕ (25.07) =====
   Сайт красится РЕАЛЬНЫМИ темами приложения: цвета один в один из Theme.cs, чтобы страница
   демонстрировала продукт собой. Селектор :root[data-pal] специфичнее .dark, поэтому перебивает
   тёмную тему независимо от порядка в файле. Все палитры тёмные - setPalette сам включает .dark. */
.pal{position:relative}
.pal-menu{position:absolute;right:0;top:48px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:12px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(4,26px);gap:12px;justify-content:center}
.pal-menu button{width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:linear-gradient(135deg,var(--b) 50%,var(--a) 50%);transition:transform .16s}
.pal-menu button:hover{transform:scale(1.1)}
.pal-menu button.on{outline:2px solid var(--teal);outline-offset:2px}

:root[data-pal="gold"]{
  --bg:#1a1a18; --surface:#201f1c; --ink:#f4f2ec; --muted:#8c8a80; --border:#33322c;
  --teal:#ffd63a; --teal-deep:#f5a91a; --tile:#201f1c; --tile-ink:#f4f2ec; --alt:#10100f}
:root[data-pal="teal"]{
  --bg:#171a1a; --surface:#1c2120; --ink:#ecf3f2; --muted:#849090; --border:#2a302f;
  --teal:#2ee6ce; --teal-deep:#14bcd0; --tile:#1c2120; --tile-ink:#ecf3f2; --alt:#0e1010}
:root[data-pal="cherry"]{
  --bg:#2a0f14; --surface:#43181f; --ink:#ffe9ed; --muted:#c792a0; --border:#5a2530;
  --teal:#ff6b7a; --teal-deep:#ff4d6d; --tile:#43181f; --tile-ink:#ffe9ed; --alt:#1a090c}
:root[data-pal="midnight"]{
  --bg:#151c33; --surface:#1b2540; --ink:#edf1ff; --muted:#8089a8; --border:#2b3354;
  --teal:#7c8cff; --teal-deep:#a878ff; --tile:#1a2138; --tile-ink:#edf1ff; --alt:#0d1120}
:root[data-pal="sunset"]{
  --bg:#361230; --surface:#4d1f44; --ink:#ffeaf5; --muted:#c794b6; --border:#5f2c55;
  --teal:#ffb36b; --teal-deep:#ff6f9c; --tile:#4a1e41; --tile-ink:#ffeaf5; --alt:#210b1e}
:root[data-pal="emerald"]{
  --bg:#0d1a19; --surface:#13211f; --ink:#e7fbf5; --muted:#6f9b92; --border:#1f3531;
  --teal:#38e0c8; --teal-deep:#3bd17a; --tile:#13211f; --tile-ink:#e7fbf5; --alt:#081010}
:root[data-pal="ocean"]{
  --bg:#0d1c2e; --surface:#13283f; --ink:#e6f3ff; --muted:#7c97b4; --border:#21384f;
  --teal:#36c5e0; --teal-deep:#4a86ff; --tile:#13283f; --tile-ink:#e6f3ff; --alt:#08111d}

/* Блог в меню: отделён от якорей главной тонкой чертой (просьба 25.07) */
.nav-links .nav-blog{position:relative;padding-left:20px;margin-left:2px}
.nav-links .nav-blog::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--border)}

/* Ряд Главная+Блог показывается только на статьях (см. template_article.html) */
.nav-art{display:none}

/* Тег статьи это ссылка в блог (26.07): перелинковка со всех гайдов в хаб */
a.tag-link{text-decoration:none;transition:color .16s,opacity .16s}
a.tag-link:hover{color:var(--teal);opacity:.85}

/* Закрывающий CTA главной (26.07). Лежит в КОНЦЕ файла осознанно: правки в середине перебивались
   базовыми правилами ниже - на этом уже теряли время с мобильной вёрсткой 25.07. */
.cta-end{padding:0 0 96px}
.cta-end .container{position:relative;overflow:hidden;text-align:center;background:var(--alt);
  border:1px solid var(--border);border-radius:24px;padding:56px 32px 48px;box-shadow:var(--shadow)}
.cta-end .glow{position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);
  width:560px;height:280px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 26%,transparent),transparent)}
.cta-end h2{position:relative;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;text-wrap:balance}
.cta-end p{position:relative;color:var(--muted);margin:14px auto 0;max-width:52ch}
.cta-end .cta-btns{position:relative;display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:26px}
.cta-end small{position:relative;display:block;margin-top:14px;font-size:13px;color:var(--muted)}
@media(max-width:640px){
  .cta-end{padding:0 0 64px}
  /* .container на телефоне во всю ширину, поэтому скруглённая карточка упиралась в края экрана */
  .cta-end .container{width:auto;margin:0 14px;padding:40px 20px 36px;border-radius:20px}
  .cta-end .cta-btns .btn{width:100%;justify-content:center}
}