/* ============================================================
   Anna Group — unified design system (light + dark)
   One stylesheet for ALL pages. Fonts: Unbounded (display) + Manrope (text).
   ============================================================ */
:root{
  --blue:#7C3AED; --blue-d:#6D28D9; --sky:#C4B5FD; --red:#E5484D;
  --accent-t:#5B21B6;
  --gold:#C98A0E; --gold-hi:#F2C94C;
  --bg:#ccd3e0; --panel:rgba(255,255,255,.62); --panel-2:rgba(255,255,255,.80);
  /* --faint притемнён вслед за фоном: на #dde2ec он давал 4.53:1, а после
     затемнения до #ccd3e0 просел до 3.93 — тусклый текст первым ломается
     при сдвиге фона, потому что у него наименьший запас по определению. */
  --ink:#121524; --mut:#474e61; --faint:#535a6c;
  --line:rgba(18,21,36,.19); --sh:0 22px 55px -18px rgba(18,21,36,.26);
  --btn-fg:#ffffff;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.95);
  --glass-sh:0 18px 44px -16px rgba(18,21,36,.30);
  --glass-blur:blur(20px) saturate(1.7);
  --nav-glass:rgba(46,52,70,.66); --nav-brd:rgba(255,255,255,.26);
  --nav-pop:rgba(30,34,48,.76);
  --r:22px; --rlg:28px; --wrap:1080px; --solid:#ffffff;
}
:root[data-mode="dark"]{
  /* заливка та же, что в светлой: на #8B5CF6 белая подпись кнопки давала 4.23:1 */
  --blue:#7C3AED; --blue-d:#6D28D9; --accent-t:#C4B5FD;
  --bg:#0b0e14; --panel:rgba(32,37,50,.72); --panel-2:rgba(46,52,68,.86);
  --ink:#eef1f7; --mut:#b3bacb; --faint:#949cb0;
  --line:rgba(255,255,255,.16); --sh:0 22px 60px -18px rgba(0,0,0,.65);
  --solid:#12151d;
  --glass:rgba(38,44,60,.55); --glass-2:rgba(48,55,73,.70);
  --glass-brd:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.18);
  --glass-sh:0 18px 46px -16px rgba(0,0,0,.65);
  --nav-glass:rgba(8,10,16,.62); --nav-brd:rgba(255,255,255,.16);
  --nav-pop:rgba(10,12,20,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:"Unbounded","Manrope",sans-serif;line-height:1.12;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* aurora bg */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5}
.b1{width:520px;height:520px;background:#DDD3FC;top:-180px;left:-140px}
.b2{width:440px;height:440px;background:#EBD8FA;top:-120px;right:-150px;opacity:.45}
.b3{width:520px;height:520px;background:#E5DBFB;bottom:-220px;right:5%;opacity:.42}
:root[data-mode="dark"] .blob{opacity:.28}
/* glass */
.glass{background:var(--panel);border:1px solid var(--panel-2);border-radius:var(--r);box-shadow:0 14px 34px -18px rgba(23,26,60,.15)}
/* header */
header.nav{position:sticky;top:12px;z-index:60;margin:12px 0}
.nav-in{display:flex;align-items:center;gap:18px;height:62px;padding:0 12px 0 18px;background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--panel-2);border-radius:18px;box-shadow:var(--sh)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Unbounded";font-weight:800;font-size:17px;flex:0 0 auto}
.brand svg{width:32px;height:32px}
.nav-links{display:flex;gap:6px;margin-left:8px;flex:1}
.nav-links a{padding:9px 13px;border-radius:11px;font-weight:600;font-size:14.5px;color:var(--mut);transition:.16s}
.nav-links a:hover{color:var(--ink);background:var(--panel-2)}
.nd{position:relative;display:flex;align-items:center}
.ndx{opacity:.5;font-size:11px}
.nd-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:230px;max-height:70vh;overflow-y:auto;background:var(--solid);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:8px;display:none;flex-direction:column;gap:2px;z-index:70}
.nd:hover::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:26px}
.nd:hover .nd-menu,.nd:focus-within .nd-menu{display:flex}
.nd-menu a{padding:9px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--mut);white-space:nowrap;background:none}
.nd-menu a:hover{background:var(--panel);color:var(--accent-t)}
.nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.langsw{position:relative}
.langsw>button{display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--mut);font:600 14px "Manrope";cursor:pointer}
.langsw-menu{position:absolute;right:0;top:100%;margin-top:6px;background:var(--solid);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh);padding:6px;display:none;min-width:150px}
.langsw:hover::after,.langsw:focus-within::after{content:"";position:absolute;right:0;top:100%;width:160px;height:12px}
.langsw:hover .langsw-menu,.langsw:focus-within .langsw-menu{display:block}
.langsw-menu a{display:block;padding:9px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink)}
.langsw-menu a:hover{background:var(--panel)}
.langsw-menu a.on{color:var(--accent-t)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:none;transition:.18s;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 28px -8px rgba(139,92,246,.55)}
.btn-primary:hover{transform:translateY(-2px);background:var(--blue-d)}
.btn-ghost{background:var(--panel);border:1px solid var(--panel-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--accent-t)}
.btn-sm{padding:9px 15px;font-size:14px}
.btn-lg{padding:15px 26px;font-size:16px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:transparent;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:2px}
/* breadcrumbs */
.crumbs{font-size:13px;color:var(--mut);margin:24px 0 0;font-weight:600}
.crumbs a{color:var(--accent-t)}
/* hero */
.hero{padding:38px 0 8px}
.hero-2col{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.hero-art{max-width:440px;margin:0 auto;width:100%}
@media(max-width:900px){.hero-2col{grid-template-columns:1fr}.hero-art{display:none}}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-t)}
h1{font-size:clamp(30px,5vw,50px);margin:14px 0 0}
h1 .mk{color:var(--accent-t)}
.lead{color:var(--mut);font-size:clamp(16px,2vw,19px);margin-top:18px;max-width:62ch}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.chip{padding:10px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-2);font-weight:700;font-size:14px}
.chip b{color:var(--accent-t)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:"Unbounded";font-weight:800;font-size:clamp(22px,3vw,30px);color:var(--accent-t)}
.stat .l{font-size:13.5px;color:var(--mut);margin-top:2px}
/* sections */
section{padding:34px 0}
h2{font-size:clamp(22px,3.2vw,32px);margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:680px){.cards{grid-template-columns:1fr}}
.card{padding:22px}
.card h3{font-size:16.5px;margin-bottom:7px}
.card p{color:var(--mut);font-size:14.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
.gridauto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gcard{display:block;padding:20px;transition:.16s}
.gcard:hover{transform:translateY(-3px);border-color:var(--blue)}
.gtag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent-t);background:rgba(139,92,246,.1);padding:3px 10px;border-radius:999px;margin-bottom:10px}
.gcard h3{font-size:16px;margin-bottom:6px}
.gcard p{color:var(--mut);font-size:14px}
.gic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(139,92,246,.12);color:var(--accent-t);margin-bottom:12px}
.gic svg{width:24px;height:24px}
.hero-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(139,92,246,.12);color:var(--accent-t);margin-bottom:16px}
.hero-ic svg{width:30px;height:30px}
:root[data-mode="dark"] .gic,:root[data-mode="dark"] .hero-ic{background:rgba(139,92,246,.2);color:var(--sky)}
.case{padding:22px}
.ceyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cmetric{font-family:"Unbounded";font-weight:800;font-size:34px;color:var(--accent-t);margin-top:6px;line-height:1}
.cmetricL{font-size:13px;color:var(--mut);margin-bottom:10px}
.case p{font-size:14px;color:var(--mut)}
.cstack{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cstack span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.review{padding:22px}
.rtext{font-size:14.5px;line-height:1.6;margin-bottom:14px}
.rname{font-weight:700;font-size:14.5px}
.rrole{font-size:13px;color:var(--faint)}
.avph{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:block}
.rmeta{display:flex;align-items:center;gap:12px;margin-top:14px}
.people-band{display:flex;align-items:center;gap:22px;padding:22px 26px;flex-wrap:wrap}
.pb-avatars{display:flex;flex:0 0 auto}
.pb-avatars .pav{margin-left:-12px;line-height:0}
.pb-avatars .pav:first-child{margin-left:0}
.pb-avatars .avph{width:52px;height:52px;border:3px solid var(--solid);border-radius:16px}
.pb-h{font-size:18px;margin-bottom:4px}
.pb-p{color:var(--mut);font-size:14.5px}
ul.feats{list-style:none;display:grid;gap:13px}
ul.feats li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
ul.feats .ck{flex:0 0 24px;height:24px;border-radius:8px;background:rgba(139,92,246,.12);color:var(--accent-t);display:grid;place-items:center;font-weight:800;border:1px solid rgba(139,92,246,.22);font-size:13px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
@media(max-width:680px){.steps{grid-template-columns:1fr}}
.step{padding:20px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:"Unbounded";font-weight:800;font-size:30px;color:transparent;-webkit-text-stroke:1.3px rgba(139,92,246,.5);display:block;margin-bottom:8px}
.step h3{font-size:15.5px;margin-bottom:6px}
.step p{color:var(--mut);font-size:14px}
details{border-radius:16px;padding:16px 20px;margin-bottom:10px}
details summary{font-weight:700;cursor:pointer;font-size:15.5px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--accent-t);font-weight:800}
details[open] summary::after{content:"–"}
details p{color:var(--mut);margin-top:10px;font-size:14.5px}
.related{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.related a{padding:10px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-2);font-size:13.5px;font-weight:600}
.related a:hover{border-color:var(--blue);color:var(--accent-t)}
/* ---- dataviz components ---- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.ba-grid{grid-template-columns:1fr}}
.ba-item{padding:20px}
.ba-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ba-label{font-weight:700;font-size:15px}
.ba-delta{font-weight:800;font-size:13.5px;padding:3px 11px;border-radius:999px;color:#0d7a48;background:rgba(60,190,120,.15)}
.ba-row{display:flex;align-items:center;gap:10px;margin-top:9px}
.ba-tag{width:48px;font-size:11px;color:var(--faint);text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.ba-track{flex:1;height:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
/* 2.2s: замедлено вдвое от исходных 1.1s (просьба пользователя). Правится
   здесь, а не переопределением в theme.py — .ba-fill используется только
   в .cchart, и держать длительность в одном месте надёжнее, чем плодить
   вторую transition-декларацию, которая потом разъедется с этой. */
.ba-fill{display:block;height:100%;width:0;border-radius:999px;transition:width 2.2s cubic-bezier(.2,.8,.2,1)}
.viz.in .ba-fill{width:var(--w)}
.ba-before{background:var(--faint)}
.ba-after{background:var(--blue)}
.ba-val{width:70px;text-align:right;font-size:13.5px;font-weight:700}
.donut-card{display:flex;align-items:center;gap:30px;padding:26px;flex-wrap:wrap}
.donut-wrap{position:relative;width:180px;height:180px;flex:0 0 auto}
.donut{width:180px;height:180px;opacity:0;transform:scale(.9) rotate(-6deg);transition:.7s cubic-bezier(.2,.8,.2,1)}
.viz.in .donut{opacity:1;transform:none}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center span{font-family:"Unbounded";font-weight:800;font-size:24px;color:var(--ink)}
.donut-center small{font-size:12px;color:var(--mut)}
.donut-legend{list-style:none;flex:1;min-width:200px;display:grid;gap:11px}
.donut-legend li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.donut-legend b{margin-left:auto;font-family:"Unbounded";font-size:14px}
.dw{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.trend-card{padding:24px}
.trend{width:100%;height:auto;display:block}
.trend-line{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.6s ease}
.viz.in .trend-line{stroke-dashoffset:0}
.trend-area{opacity:0;transition:opacity 1s .4s}
.viz.in .trend-area{opacity:1}
.trend circle{opacity:0;transition:opacity .4s .6s}
.viz.in .trend circle{opacity:1}
.trend-end{fill:var(--blue);font:800 13px "Unbounded",sans-serif}
.trend-x{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--faint);font-weight:600}
.viz-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.viz-two>section{padding:18px 0}
@media(max-width:820px){.viz-two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ba-fill,.donut,.trend-line,.trend-area,.trend circle{transition:none}}
/* quiz */
.quiz{max-width:640px;padding:0;overflow:hidden}
.quiz-bar{height:5px;background:var(--panel-2)}
.quiz-bar i{display:block;height:100%;width:20%;background:var(--blue);border-radius:0 999px 999px 0;transition:width .3s}
.quiz-body{padding:24px 26px 26px}
.q-q{font-family:"Unbounded";font-weight:700;font-size:16.5px;margin-bottom:16px}
.q-opts{display:grid;gap:9px}
.q-opt{text-align:left;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel-2);color:var(--ink);font:600 14.5px "Manrope";cursor:pointer;transition:.15s}
.q-opt:hover{border-color:var(--blue);color:var(--accent-t)}
.q-opt.on{border-color:var(--blue);background:rgba(139,92,246,.1);color:var(--accent-t)}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.q-form{display:grid;gap:10px}
.q-form input{padding:13px 17px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:500 15px "Manrope"}
.q-form input:focus{outline:none;border-color:var(--blue)}
.q-ok{padding:14px;border-radius:13px;background:rgba(60,190,120,.14);color:#1d7a48;font-weight:700;text-align:center}
/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{display:flex;flex-direction:column;padding:26px 22px;position:relative}
.tier-mid{border-color:var(--blue);box-shadow:0 18px 44px -18px rgba(139,92,246,.35)}
.tier-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11.5px;font-weight:800;padding:3px 13px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tier h3{font-size:16px;margin-bottom:10px}
.tier-price{font-family:"Unbounded";font-weight:800;font-size:clamp(21px,2.4vw,26px);color:var(--accent-t)}
.tier-time{font-size:13px;color:var(--faint);margin:4px 0 14px}
.tier ul{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.tier ul li{font-size:14px;color:var(--mut);padding-left:22px;position:relative}
.tier ul li::before{content:"✓";position:absolute;left:0;color:var(--accent-t);font-weight:800}
.tier-g{font-size:12.5px;color:var(--faint);margin-bottom:14px;padding-top:10px;border-top:1px dashed var(--line)}
.tiers-note{font-size:13px;color:var(--faint);margin-top:14px;text-align:center}
/* cta block + form */
.cta{padding:38px 26px;text-align:center;border-radius:var(--rlg)}
.form{display:flex;gap:10px;max-width:540px;margin:22px auto 0;flex-wrap:wrap}
.form input{flex:1;min-width:100%;padding:14px 19px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:15px;font-family:inherit}
@media(min-width:641px){.form input{min-width:180px}.form .btn{width:auto}}
.form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(139,92,246,.14)}
.form .btn{width:100%}
.form .form-task{flex:1 0 100%;min-width:100%;padding:14px 19px;border-radius:18px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:15px;font-family:inherit;line-height:1.5;resize:vertical;min-height:88px}
.form .form-task:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(139,92,246,.14)}
.q-form .form-task{padding:13px 17px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:500 15px "Manrope";line-height:1.5;resize:vertical;min-height:80px}
.q-form .form-task:focus{outline:none;border-color:var(--blue)}
.note{font-size:12px;color:var(--faint);margin-top:12px}
.note a{color:var(--accent-t)}
.ok{display:none;margin-top:18px;padding:13px;border-radius:14px;background:rgba(60,190,120,.14);color:#1d7a48;font-weight:700}
/* footer */
footer.foot{padding:40px 0 44px;margin-top:20px;color:var(--mut);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;padding:30px 26px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .col-t{font-weight:800;color:var(--ink);margin-bottom:12px;font-family:"Unbounded";font-size:13px}
.foot-grid a:not(.soc){display:block;color:var(--mut);padding:4px 0;font-weight:600;font-size:14px}
.foot-grid a:not(.soc):hover{color:var(--accent-t)}
.foot-desc{font-size:14px;line-height:1.6;color:var(--mut);margin:12px 0}
.soc-row{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.soc{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--soc,#8B5CF6);color:#fff;transition:transform .16s,box-shadow .16s;box-shadow:0 4px 12px -6px var(--soc,#8B5CF6)}
.soc:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px var(--soc,#8B5CF6)}
.soc svg{width:20px;height:20px;fill:#fff;display:block}
.soc-mark{display:grid;place-items:center;width:100%;height:100%;font-family:"Unbounded",sans-serif;font-size:11px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 26px 0;margin-top:8px;border-top:1px solid var(--line);font-size:13px}
.foot-bottom a{color:var(--accent-t);font-weight:600}
/* theme bar */
.themebtn{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--mut);cursor:pointer;transition:.16s}
.themebtn:hover{color:var(--accent-t);border-color:var(--blue)}
.themebtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.themebtn .ic-moon{display:none}
:root[data-mode="dark"] .themebtn .ic-sun{display:none}
:root[data-mode="dark"] .themebtn .ic-moon{display:block}
@media(max-width:900px){.themebtn{display:none}}
.mm-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 6px 4px}
.mm-theme-lab{font-family:"Unbounded",sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.mm-theme-opts{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.mm-theme-opts button{border:none;background:transparent;color:var(--mut);font:600 13px "Manrope";padding:8px 14px;border-radius:999px;cursor:pointer}
.mm-theme-opts button[data-on="true"]{background:var(--blue);color:#fff}
/* mobile nav */
.mobile-menu{display:none}
.mm-group{border-bottom:1px solid var(--line)}
.mm-group:last-child{border-bottom:none}
.mm-head{display:block;font-family:"Unbounded",sans-serif;font-weight:800;font-size:16px;padding:14px 6px;color:var(--ink)}
.mm-sub{display:flex;flex-direction:column;gap:2px;padding:0 6px 12px}
.mm-sub a{padding:9px 12px;border-radius:10px;color:var(--mut);font-weight:600;font-size:14.5px}
.mm-sub a:hover,.mm-sub a:active{background:var(--panel);color:var(--accent-t)}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:fixed;left:20px;right:20px;top:84px;bottom:16px;overflow-y:auto;z-index:65;background:var(--solid);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:14px 16px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
}
@media(max-width:520px){
  .nav-in{gap:10px;padding:0 10px 0 14px}
  .nav-right .btn{display:none}
}

/* case screenshots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.shot{padding:10px;border-radius:18px;overflow:hidden;margin:0}
.shot img{width:100%;height:auto;border-radius:12px;display:block}
.shot figcaption{font-size:13px;opacity:.75;padding:10px 6px 2px;text-align:center}
.scheme-wrap svg text{fill:currentColor}

/* honeypot: невидимое поле-приманка для ботов, человек его не видит и не таб-нёт */
.lk-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1}
/* ==== liquid glass system ==== */

/* ============================================================
   Liquid glass — единая поверхность для всего UI
   Приём взят из верхней панели: полупрозрачный тон, размытие с подъёмом
   насыщенности, светлая рамка в 1px и внутренний блик по верхней кромке.
   Блик обязателен: без него стекло читается как плоская заливка.
   ============================================================ */
.glass,.gcard,.case,.review,.step,.quiz,.cta,.card,.shot,.tier,
.donut-card,.trend-card,.ba-item,.people-band,details.glass{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh),inset 0 1px 0 var(--glass-hi);
}
.gcard:hover,.tier:hover,.card:hover{
  background:var(--glass-2);
  box-shadow:var(--glass-sh),inset 0 1px 0 var(--glass-hi),
             0 0 0 1px rgba(124,58,237,.22);
}

/* попапы и мобильное меню — то же стекло, плотнее (под ними текст страницы) */
.nd-menu,.langsw-menu,.mobile-menu{
  background:var(--glass-2);
  backdrop-filter:blur(26px) saturate(1.8);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh),inset 0 1px 0 var(--glass-hi);
}

/* поля ввода — вогнутое стекло: блик снизу, тень сверху */
.form input,.form textarea,.q-form input,.q-form textarea{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 2px 6px -3px rgba(18,21,36,.28),inset 0 -1px 0 var(--glass-hi);
  color:var(--ink);
}
.form input::placeholder,.form textarea::placeholder,
.q-form input::placeholder,.q-form textarea::placeholder{color:var(--faint)}
.form input:focus,.form textarea:focus,
.q-form input:focus,.q-form textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:inset 0 2px 6px -3px rgba(18,21,36,.2),0 0 0 3px rgba(124,58,237,.22);
}

/* кнопки */
.btn-ghost,.q-opt{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  color:var(--ink);
}
.btn-ghost:hover,.q-opt:hover{border-color:var(--blue);color:var(--accent-t)}
.btn-primary{color:var(--btn-fg)}
.chip{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}

/* ---- верхняя панель: капсула liquid glass (приём bydautomotive.com.au) ----
   Раньше backdrop-filter стоял прямо на .nav-in, и это создавало баг: любой
   вложенный элемент со своим backdrop-filter (.nd-menu) наследовал .nav-in
   как ближайший «backdrop root» вместо окна целиком — попап физически
   простирается ниже 62-пиксельной панели, а фильтровать вне коробки
   родителя browser'у нечего, и он молча пропускал текст без размытия.
   Фикс жил через `.nav-in:has(.nd:hover){backdrop-filter:none}`.

   Приём BYD убирает саму причину: backdrop-filter и SVG-дисторсия
   (feTurbulence + feDisplacementMap, фильтр #glass-distortion — см.
   add_glass_filter в theme.py) висят на ::before/::after — генерируемом
   контенте, а не на самом .nav-in. Формально .nav-in backdrop-filter не
   имеет, и вложенным попапам наследовать нечего — чинить :has()-костылём
   больше нечего, бага нет по конструкции. Заодно дисторсия даёт настоящее
   «жидкое» преломление контента под баром вместо плоского блюра. */
.nav-in{
  border-radius:999px;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 44px -12px rgba(10,13,20,.34);
  position:relative;isolation:isolate;
}
.nav-in::before,.nav-in::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.nav-in::after{
  z-index:-2;backdrop-filter:blur(3px) saturate(1.7);-webkit-backdrop-filter:blur(3px) saturate(1.7);
  filter:url(#glass-distortion);
}
.nav-in::before{
  z-index:-1;background:var(--nav-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.06);
}
.nav-in .brand{color:#fff}
.nav-in .nav-links a,.nav-in .nav-links>.nd>.nd-t{color:rgba(255,255,255,.86)}
.nav-in .nav-links a:hover,.nav-in .nav-links>.nd>.nd-t:hover{color:#fff;background:rgba(255,255,255,.16)}
.nav-in .themebtn{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.24)}
.nav-in .themebtn:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.nav-in .burger{border-color:rgba(255,255,255,.24)}
.nav-in .burger span{background:#fff}
/* CTA-кнопка сплошная, не стеклянная — по решению /impeccable-ревью стекло
   в шапке ограничено баром и попапами, кнопка остаётся плотным акцентом. */
.nav-in .btn-primary{background:#fff;color:#171a2b;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.nav-in .btn-primary:hover{background:rgba(255,255,255,.88);transform:translateY(-2px)}
/* Попапы: фон и backdrop-filter — ПРЯМО на самом элементе, не на ::before/
   ::after. Пробовали приём бара (псевдослои) и здесь, но у .nd-menu своя
   прокрутка (overflow-y:auto, список из 19 пунктов выше 70vh) — абсолютно
   спозиционированные псевдоэлементы прокручиваются вместе с содержимым, как
   обычные дети скролл-контейнера. При scrollTop>0 их box уезжает вверх
   вместе со списком, а снизу открывается кусок без единого слоя стекла —
   реальный текст страницы просвечивал совсем без размытия (проверено
   принудительной подстановкой непрозрачного чёрного фона в псевдоэлемент —
   низ всё равно оставался «дырой», значит дело не в плотности/радиусе, а
   в том, что слоя там физически нет). Приём с псевдослоями здесь и не
   нужен: он был обязателен только для .nav-in (там дескендант .nd-menu мог
   унаследовать его backdrop-filter как ближайший root). У самого .nd-menu
   нет своих дальнейших вложенных попапов — фон на нём самом безопасен и
   заодно закреплён за контейнером, а не за прокручиваемым содержимым.
   Плотность (var(--nav-pop)) и радиус (72px) — калибровка от раньше:
   0.68/30px не растворял 60px заголовок под попапом, 0.76(тёмная)/то же
   размытие оставляло светлое пятно на чёрном. Против пятен работает
   плотность, не радиус. */
.nav-in .nd-menu,.nav-in .langsw-menu,.mobile-menu{
  background:var(--nav-pop);
  backdrop-filter:blur(72px) saturate(1.9);
  -webkit-backdrop-filter:blur(72px) saturate(1.9);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 20px 48px -14px rgba(10,13,20,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.mobile-menu a,.mobile-menu .mm-head{color:rgba(255,255,255,.88)}
.mobile-menu a:hover{color:#fff}

/* ---- зоны нажатия в мобильном меню ≥44px ----
   Замерено: .mm-sub a давал 41px (padding 9px + строка 23px) при gap:2px,
   кнопки выбора темы — 34px. Высота задаётся через min-height, а не через
   padding: padding пришлось бы пересчитывать при любой смене размера шрифта,
   а flex+align-items:center центрирует текст сам при любой высоте. */
.mobile-menu .mm-sub{gap:4px}
.mobile-menu .mm-sub a{min-height:44px;display:flex;align-items:center}
.mobile-menu .mm-theme-opts button{min-height:44px;display:inline-flex;align-items:center}

/* ---- попап бургера вдвое ниже ----
   Было left/right:20px + top:84px + bottom:16px (site.css): панель на весь
   экран за вычетом рамки — по площади уже не выпадающее меню, а модальное
   окно. При свёрнутых аккордеонах в ней четыре строки и переключатель темы,
   а нижние две трети — пустая заливка поверх страницы.
   bottom:auto снимает растяжку до низа, и панель становится по содержимому;
   max-height режет её ровно вдвое от прежней высоты: было 100vh−84−16 =
   100vh−100px, половина = 50vh−50px.
   Прокрутка внутри уже была (overflow-y:auto из site.css) — раскрытый список
   из 19 услуг упирается в потолок и скроллится, ничего не обрезается.
   Ширину не трогаем намеренно: длинные названия («Скорая помощь сайту»,
   «Автоматизация и ИИ») при узкой панели переносятся на две строки, и
   выигранная ширина возвращается высотой.
   Нижний порог 240px — для телефона в альбомной ориентации: там 50vh−50
   даёт 145px, то есть три строки по 44px, и меню превращается в щель.
   Порог включается только ниже 580px высоты окна, на вертикальном экране
   работает ровно половина. */
@media(max-width:860px){
  .mobile-menu{bottom:auto;max-height:max(240px,calc(50vh - 50px))}
}

/* ---- аккордеон для длинных подсписков ----
   В меню 19 услуг плоским списком — до блока «Тема» и «Контактов» 5-8
   свайпов. Сворачиваем группы, у которых есть .mm-sub («Услуги», «Решения»);
   «Кейсы»/«Контакты» — одиночные ссылки, там сворачивать нечего.
   ВАЖНО: .mm-sub[hidden] обязателен. Атрибут hidden гасится правилом
   [hidden]{display:none} из стилей БРАУЗЕРА, а любое авторское объявление
   display перебивает UA-стили независимо от специфичности — .mm-sub с его
   display:flex (site.css) оставил бы список раскрытым навсегда.
   Стрелка — отдельная кнопка рядом со ссылкой, а не сама ссылка-переключатель:
   .mm-head ведёт на раздел целиком (/services/), и отнимать этот переход
   ради раскрытия значило бы сделать раздел недостижимым из меню. */
.mm-head-row{display:flex;align-items:center;justify-content:space-between}
.mobile-menu .mm-sub[hidden]{display:none}
.mm-toggle{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  background:transparent;border:none;font-size:14px;color:inherit;cursor:pointer;
  transition:transform .2s}
.mm-toggle[aria-expanded="true"]{transform:rotate(180deg)}
.mobile-menu .mm-toggle{color:rgba(255,255,255,.88)}
.mobile-menu .mm-theme-lab{color:rgba(255,255,255,.7)}
.mobile-menu [data-theme-opt]{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.22)}
.nav-in .nd-menu a,.nav-in .langsw-menu a{color:rgba(255,255,255,.86)}
.nav-in .nd-menu a:hover,.nav-in .langsw-menu a:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---- логотип выступает за границы бара ----
   Высота знака больше высоты панели (62px), отрицательные вертикальные поля
   гасят прирост, чтобы бар не растянулся. Тени под знаком дают отрыв от
   плоскости: без них выступ читается как ошибка вёрстки, а не как объём. */
/* ---- шапка во всю ширину контентной колонки ----
   Раньше бар был сжат по содержимому (width:max-content) — компактная
   пилюля с плотной кучкой пунктов. По просьбе пользователя («сделай его
   длиннее») капсула теперь растянута на всю ширину .wrap, пункты меню
   разведены по центру, лого и кнопки — по краям, с равномерным space-between
   вместо тесного gap. */
/* Верхний отступ увеличен: знак выступает над панелью на 23px, а прилипающая
   шапка стояла в 12px от края окна — при прокрутке верх знака срезался. */
header.nav{top:26px;margin:20px 0 12px}
.nav-in{
  overflow:visible;
  width:100%;max-width:100%;
  justify-content:space-between;
  padding:0 14px 0 6px;gap:10px;
}
.nav-links{flex:1;justify-content:center;margin-left:0;padding-left:0}
.nav-right{margin-left:0}

/* ---- бар ≤860px: капсула по ширине содержимого, не растянута ----
   Решение «сделай длиннее» (width:100% выше) было про ДЕСКТОП: там в центре
   стоит список ссылок, и растягивать капсулу есть подо что. На ≤860px
   .nav-links{display:none} (site.css) убирает средний flex-элемент, и
   justify-content:space-between разводит два оставшихся по краям — между
   логотипом и бургером повисает мёртвая зона. Замерено в реальном Chrome:
   182px пустоты из 330px на вьюпорте 390, 374px из 708 на 768. Сжатие по
   контенту этому решению не противоречит — растягивать здесь просто нечего.
   Побочная польза: капсула центрируется через margin auto, и логотип
   (у него margin-left:-16px плюс drop-shadow радиусом ~16px) перестаёт
   упираться в край вьюпорта — было 11px до края, край подрезал тень.
   max-width:calc(100% - 16px) — страховка от переполнения: если контент
   капсулы вдруг окажется шире экрана, max-content сам по себе горизонтальный
   скролл не остановит. */
@media(max-width:860px){
  .nav-in{
    width:max-content;max-width:calc(100% - 16px);
    margin:0 auto;
    justify-content:flex-start;
    gap:14px;
  }
  /* 42px из базового site.css не дотягивает до минимума в 44px */
  .burger{width:44px;height:44px}
  /* Кнопка в шапке даёт 40px по высоте (padding btn-sm). Минимум задан на
     весь диапазон с бургером, а не только ≤520: на 768 замерено ровно 40px —
     палец там такой же, как на телефоне. */
  .nav-in .btn-sm{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- CTA на телефоне: короткая подпись вместо исчезновения ----
   Было @media(max-width:520px){.nav-right .btn{display:none}} — единственное
   целевое действие сайта пропадало ровно там, где шапка и есть вся навигация.
   Прячем не кнопку, а лишние слова: иконка без подписи потеряла бы ясность
   намерения («расчёт» — не общеизвестный пиктографический жест), а полное
   «Получить расчёт» на 390px забирает половину капсулы.
   Селектор .nav-in .nav-right .btn (0,3,0) специально длиннее исходного
   .nav-right .btn (0,2,0): полагаться только на порядок в файле нельзя —
   GLASS дописывается в конец, но правило внутри @media легко переехало бы. */
.cta-short{display:none}
@media(max-width:520px){
  .nav-in .nav-right .btn{display:inline-flex}
  .cta-full{display:none}
  .cta-short{display:inline}
}

/* Знак сдвинут к левому краю пилюли и выходит за него — тот же приём объёма,
   что и по вертикали. В шапке стоит полный локвап (AG + ANNA GROUP), поэтому
   высота больше: подпись под монограммой занимает нижнюю шестую часть и при
   меньшем размере становится нечитаемой. */
.brand{position:relative;z-index:3}
/* 108px: в локвапе подпись занимает 12% высоты, значит при 96px ей достаётся
   ~12px и она на грани читаемости. 108px дают подписи ~13.5px. */
/* Отрицательный отступ слева сдвигает картинку, но её место в потоке
   остаётся — за знаком образуется пустой провал до разделителя. Такой же
   отступ справа подтягивает следующий элемент обратно. */
/* max-width:none обязателен: базовое img{max-width:100%} ограничивало знак
   шириной контейнера, а тот сам сжимается по содержимому — браузер разрывал
   цикл, сплющивая картинку по горизонтали на треть. */
.brand{flex:0 0 auto}
.brand-logo{width:auto;max-width:none;display:block;border-radius:0}
/* Выступ и отрицательные отступы — только в шапке. Без этого ограничения
   правило доставало и до футера: там знак стоит рядом с текстом, и
   отрицательный правый отступ наезжал текстом на логотип. */
.nav-in .brand-logo{
  height:108px;
  margin:-23px -22px -23px -26px;
  filter:drop-shadow(0 8px 16px rgba(10,13,20,.42))
         drop-shadow(0 2px 4px rgba(10,13,20,.34));
}
@media(max-width:520px){
  .nav-in .brand-logo{height:82px;margin:-10px -14px -10px -16px}
}
.brand-name{
  font-family:"Unbounded","Manrope",sans-serif;font-weight:800;
  font-size:16px;letter-spacing:-.01em;line-height:1;
}
.foot .brand{gap:9px}
.foot .brand-logo{height:30px;margin:0;filter:none}

/* ---- форма заявки в первом экране ----
   Три поля в строку на десктопе, в столбец на телефоне. Кнопка не сжимается
   (flex:0 0 auto): при сжатии подпись «Получить расчёт» переносилась бы
   в две строки и ломала высоту ряда. */
.hero-cta{margin-top:26px;max-width:640px}
.hero-form{display:flex;gap:10px;flex-wrap:wrap}
.hero-form input{flex:1 1 180px;min-width:0;padding:13px 18px;border-radius:999px;
  border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink);
  font:500 15px "Manrope",sans-serif;
  box-shadow:inset 0 2px 6px -3px rgba(18,21,36,.28),inset 0 -1px 0 var(--glass-hi)}
.hero-form input::placeholder{color:var(--faint)}
.hero-form input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(124,58,237,.22)}
.hero-form .btn{flex:0 0 auto;padding:13px 26px}
.hero-note{margin-top:10px;font-size:13.5px;color:var(--mut)}
.hero-note a{color:var(--accent-t);font-weight:600}
@media(max-width:560px){
  .hero-form input,.hero-form .btn{flex:1 1 100%}
}

/* ---- карусель примеров работ ----
   Прокрутка на scroll-snap, а не на transform: свайп пальцем, клавиши и
   инерция достаются от браузера бесплатно, и без JS карусель остаётся
   работоспособной лентой, а не грудой скрытых слайдов.
   Скриншоты сайтов длинные (до 1:2.2), поэтому окно слайда с фиксированной
   пропорцией и object-position:top — показываем первый экран каждого сайта,
   он и есть самое узнаваемое. Внутренняя тень по низу намекает, что
   страница продолжается. */
.wcar{position:relative;margin-top:6px}
.wtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:4px 0 2px}
.wtrack::-webkit-scrollbar{display:none}
/* выравнивание по НАЧАЛУ, не по центру: при двух видимых слайдах центрирование
   даёт первую точку прилипания на полшага (265px вместо 529), и индекс
   считается ровно на границе округления — хрупко. С align:start позиции
   кратны шагу, и scrollLeft=0 остаётся валидной точкой. */
.wslide{position:relative;flex:0 0 100%;scroll-snap-align:start;margin:0;min-width:0}
@media(min-width:900px){.wslide{flex:0 0 calc(50% - 9px)}}
.wslide-link{position:absolute;inset:0;z-index:1;color:inherit;text-decoration:none;border-radius:var(--r)}
.wslide-link:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.wshot{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--glass-brd);box-shadow:var(--glass-sh);
  aspect-ratio:16/10;background:var(--glass);transition:border-color .18s ease}
.wslide-link:hover~.wshot,.wslide-link:focus-visible~.wshot{border-color:var(--blue)}
.wshot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;border-radius:0}
.wshot::after{content:'';position:absolute;inset:auto 0 0 0;height:56px;
  background:linear-gradient(to top,rgba(10,13,20,.22),transparent);pointer-events:none}
.wslide figcaption{display:flex;flex-direction:column;gap:2px;padding:11px 4px 0}
.wslide figcaption b{font-family:"Unbounded",sans-serif;font-size:14.5px;color:var(--ink)}
.wslide figcaption b::after{content:' ↗';color:var(--accent-t)}
.wslide-link:hover~figcaption b,.wslide-link:focus-visible~figcaption b{color:var(--accent-t)}
.wslide figcaption span{font-size:13px;color:var(--mut)}

/* стрелки: за пределами ленты на широких экранах, поверх — на узких */
.wnav{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-brd);background:var(--glass-2);color:var(--ink);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-sh);font-size:22px;line-height:1;
  display:grid;place-items:center;transition:.15s}
.wnav:hover{border-color:var(--blue);color:var(--accent-t)}
.wnav[disabled]{opacity:.32;cursor:default}
.wprev{left:-8px}
.wnext{right:-8px}
@media(min-width:1200px){.wprev{left:-26px}.wnext{right:-26px}}
.wdots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.wdot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:none;background:var(--line);transition:.2s}
.wdot[aria-current="true"]{background:var(--blue);width:22px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.wtrack{scroll-behavior:auto}}

/* ---- этапы работы: цепочка, а не набор карточек ----
   grid-auto-flow:column на широком экране держит все шаги в ОДНОЙ строке, и
   это не косметика: соединитель рисуется через ::after у всех, кроме
   последнего, а «кроме последнего» верно только пока строка одна. При
   переносе последняя карточка в строке тянула бы линию в пустоту.
   На узком экране цепочка становится вертикальной — та же логика, другая ось. */
.flow{display:grid;gap:14px;margin-top:6px}
@media(min-width:860px){.flow{grid-auto-flow:column;grid-auto-columns:1fr}}
.fstep{position:relative;padding:18px 18px 20px;border-radius:var(--r)}
.fstep h3{font-size:15.5px;margin:10px 0 6px}
.fstep p{font-size:13.5px;color:var(--mut);line-height:1.5}
.fstep-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:"Unbounded",sans-serif;
  font-weight:800;font-size:13px}
/* соединитель лежит в зазоре между карточками: 14px — ровно gap сетки */
.fstep::after{content:'';position:absolute;background:var(--line);pointer-events:none}
.fstep:last-child::after{display:none}
.fstep::after{left:32px;top:100%;width:2px;height:14px}
@media(min-width:860px){
  /* 33px = 18 (padding) + 15 (половина кружка): линия попадает в его центр */
  .fstep::after{left:auto;right:-14px;top:33px;width:14px;height:2px}
}

/* ---- региональная экспертиза ----
   Две колонки только там, где карта не сжимается в марку: ниже 860px она
   уезжает под текст. .region-solo — режим без картинки (файла ещё нет),
   тогда текст занимает всю ширину, а не половину с дырой рядом. */
.region{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.region{grid-template-columns:1.05fr .95fr}}
.region-solo{grid-template-columns:1fr!important;max-width:760px}
.region-text .lead{margin-bottom:16px}
.region-text ul{list-style:none;display:grid;gap:11px}
.region-text li{position:relative;padding-left:26px;font-size:14.5px;color:var(--mut)}
.region-text li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(124,58,237,.16)}
/* Ни фона, ни рамки, ни тени: карта — прозрачный PNG, и любая подложка
   ровно ту прозрачность и съедает. Стеклянная плашка тут стояла сначала
   (карта задумывалась как фигура-маска, ей рамка шла), и после перехода
   на обычный <img> именно она читалась как «фон у картинки».
   border-radius:0 перебивает базовое img{border-radius:var(--r)} из
   site.css: скруглять нечего, у картинки нет краёв — только контур. */
.region-map{display:flex;justify-content:center}
.region-map img{display:block;width:100%;max-width:380px;height:auto;
  border-radius:0}

/* ---- сетка тарифов под четыре карточки ----
   Базовое repeat(3,1fr) из site.css оставляло четвёртый тариф одиноко висеть
   во второй строке. auto-fit с порогом 220px даёт 4 в ряд на десктопе,
   2×2 на планшете и по одному на телефоне — без отдельных брейкпоинтов.
   Выравнивание строк между карточками — на subgrid: заголовок «Лендинг
   с рекламой» занимает две строки, остальные одну, и без общих строк цена,
   срок и сноска в соседних карточках стояли на разной высоте. Подпорка через
   min-height решала бы это числом, которое врёт при первой же смене текста;
   subgrid связывает карточки по факту содержимого.
   Порядок строк: заголовок / цена / срок / сноска (последняя тянется на 1fr,
   поэтому пунктирная линия над ней у всех карточек на одной высоте). */
   Колонки заданы брейкпоинтами, а не auto-fit: при minmax(220px,1fr) на 900px
   влезает ровно три штуки, и четвёртая повисает одна во второй строке. Порог,
   при котором там встаёт 2×2, ломает четыре колонки на широком экране —
   одним выражением обе ситуации не описать. */
.tiers{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto}
@media(min-width:620px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0;
  align-content:start}
.tier h3{font-size:15.5px;align-self:start}
.tier-price{font-size:clamp(19px,2.1vw,23px);align-self:start}
.tier-time{align-self:start}
.tier-g{align-self:start;margin-bottom:0}
.tier-order{align-self:end;width:100%;margin-top:16px}

/* ---- «Сайт-визитка с рекламой» — лучший вариант ----
   Плашка называет причину, а не хвалит: тот же лендинг стоит 15 000 вместо
   30 000, если брать вместе с ведением рекламы. Это факт из брифа, проверяемый
   по соседней карточке, а не «популярный выбор», которого никто не измерял. */
   Отступ сверху под плашку не нужен и был бы вреден: она висит на -11px
   и выходит за карточку, а margin у элемента subgrid-сетки сдвинул бы его
   внутри общих строк и развалил то самое выравнивание. */
.tier-pop{white-space:nowrap}
.tier-mid{border-color:var(--blue);
  box-shadow:0 18px 44px -14px rgba(124,58,237,.42),
             inset 0 1px 0 var(--glass-hi)}

/* ---- отступ под якорные переходы ----
   Панель зафиксирована сверху (header.nav{position:sticky;top:12px}) и вместе
   с капсулой в 62px занимает полосу 12..74px. Браузер при переходе по #works
   ставит верх секции ровно в верх окна — то есть под панель, и заголовок
   секции оказывается ею накрыт. scroll-margin-top отодвигает точку остановки;
   90px = 74 нижняя кромка панели + 16 воздуха.
   Перечислены конкретные якоря, а не [id] скопом: id есть у служебных
   контейнеров, и глобальное правило добавило бы им отступ прокрутки без
   всякой на то причины. */
#works,#quiz,#contact{scroll-margin-top:90px}

/* заглушки соцсетей */
.soc-ph{display:inline-block;width:40px;height:40px;border-radius:50%;
  border:1.5px dashed var(--faint);opacity:.55}
.soc-ph-text{align-self:center;font-size:13px;color:var(--faint);font-weight:600}
.foot-ph{display:block;padding:4px 0;font-weight:600;font-size:14px;color:var(--faint)}
/* Часы работы в подвале рядом с телефоном: не ссылка, поэтому подтягиваем
   к тем же метрикам колонки, иначе строка выпадает из ритма списка. */
.foot-hours{display:block;padding:4px 0;font-size:14px;color:var(--mut)}

/* ---- Аврора: приглушена, разноцветна, едва заметно дышит ----
   Непрозрачности НЕ трогать: светлые пятна ложатся поверх фона и высветляют
   его обратно, а затемнение светлой темы без этого не читается — эти значения
   уже подобраны под ту задачу.
   Цвета разведены (сиреневый / золотистый / бирюзовый) вместо трёх почти
   неотличимых оттенков лаванды (#DDD3FC/#EBD8FA/#E5DBFB в site.css) — по
   просьбе владельца «разноцветные, но не яркие». Светлота и насыщенность
   взяты на уровне исходных, чтобы после blur(64px)+opacity выглядеть так же
   приглушённо, как раньше, и не съесть контраст под .hero и .foot — это
   единственные крупные блоки текста прямо на --bg, без стеклянной панели.
   Движение — ТОЛЬКО transform (translate3d+scale), никогда не opacity и не
   цвет: тогда в любой момент анимации фон остаётся ровно тем, на котором
   contrast.py уже показал норму, и контраст не может провиснуть на «пиковом»
   кадре. Плюс transform и opacity — composite-свойства, но opacity здесь
   меняла бы результат смешивания с фоном, а transform — нет.
   Амплитуда и период ПЕРЕСМОТРЕНЫ (2026-08-07). Первая версия — 14-32px за
   52-68с — формально работала (матрицы менялись, тест это подтверждал), но
   владелец движения не увидел, и он был прав: замер показал сдвиг 0.5px за
   5 секунд и 1.7px за 10. Для пятна 520px, размытого на 64px, это ниже
   порога различимости — «едва заметное» выродилось в «незаметное вообще».
   Отдельно вредил ease-in-out на alternate: самая медленная фаза приходится
   на края цикла, то есть ровно на тот момент, когда на страницу смотрят
   первый раз.
   Теперь 90-150px за 26-34с: за первые 5 секунд ~12px, за 10 — ~35px. Это
   читается как живой фон, но остаётся фоном. Тест «матрицы различаются» для
   такой задачи бесполезен — проверять надо СКОЛЬКО пикселей за сколько
   секунд, а не «отличается ли вообще».
   Разные длительности и отрицательные задержки не дают трём пятнам
   синхронизироваться в общий пульс.
   b1/b2 сидят у верхних углов, прямо под backdrop-filter шапки и попапов, и
   двигаются меньше остальных: backdrop-filter пересчитывается КАЖДЫЙ кадр
   независимо от того, насколько медленная анимация — экономят амплитуда и
   число слоёв, а не длительность. b3 (нижний, дальше всех от стеклянных
   поверхностей) получил самую большую амплитуду.
   Вся анимация живёт внутри prefers-reduced-motion:no-preference — при
   reduce правил анимации в каскаде нет вообще, а не «есть, но остановлены»;
   там же и will-change, чтобы не держать лишний слой композитора у тех, кто
   движение отключил. */
/* ============ АВРОРА ============
   Заметность (2026-08-07, «их почти не видно»). Ключ не в прозрачности, а в
   ИЗОЛЮМИНАНТНОСТИ: яркость фона #ccd3e0 = 0.648, и если держать пятна на той
   же яркости, но насыщенными, контраст под текстом не сдвигается вообще
   (яркость фона не меняется), а цвет становится виден. Замерено: цветность
   43→133 (макс), 19.6→37.4 (ср.). Оба прямых пути замер отверг: поднять
   прозрачность бледным пастельным — высветляет фон, отменяя затемнение,
   которого владелец просил; сделать ТЕМНЕЕ фона — в светлой теме роняет
   контраст тёмного текста (−0.09, провал). Темы разведены: у светлой текст
   тёмный на светлом, у тёмной наоборот, поэтому приём упирается в разные
   пределы. Сиреневый насыщается хуже золотого и бирюзового: синий почти не
   даёт яркости — физика, не ошибка подбора.

   ПРОКРУТКА ВМЕСТЕ СО СТРАНИЦЕЙ (просьба). Было position:fixed — пятна
   висели в окне и при скролле стояли на месте. Стало absolute на всю высоту
   документа: aurora растягивается по body (отсюда body{position:relative} —
   без позиционированного предка inset:0 считался бы от initial containing
   block, то есть от одного экрана, и фон обрывался бы после первого экрана).
   Пятен теперь восемь, посажены в процентах от высоты документа, а не в
   пикселях: страницы разной длины (главная длинная, /privacy короткая), и
   проценты сами растягивают набор на любую высоту — это и есть «подставить
   ещё такой же фон для прокрутки», только без дублирования разметки.
   Цвета идут циклом сиреневый → золотой → бирюзовый → синий, стороны
   чередуются, чтобы при прокрутке не читался повтор.

   Синий #4263FF задан владельцем точным значением, поэтому НЕ изолюминантен:
   яркость 0.173 против 0.648 у фона, он фон темнит. Компенсируется не цветом,
   а прозрачностью — .22 против .50-.55 у соседей.

   Движение: только transform (translate3d+scale), никогда не opacity и не
   цвет — тогда в любом кадре фон тот же, на котором замер дал норму, и
   контраст не провиснет на пике. Периоды 19-30с (исходно 44-68с, скорость
   поднята по просьбе дважды по 50%),
   амплитуды 100-165px: перцептивно решает именно амплитуда, а не период —
   на первой версии 14-32px за 52-68с движение было ниже порога различимости
   (0.5px за 5с), и владелец его не увидел. Направления у всех разные.
   Всё внутри prefers-reduced-motion:no-preference — при reduce правил в
   каскаде нет вообще, а не «есть, но остановлены». */
body{position:relative}
.aurora{position:absolute;inset:0;height:100%;overflow:hidden;z-index:-1;pointer-events:none}
.blob{position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(64px);opacity:.55}

/* сиреневый */
.b1,.b5{background:#D2AEFF}
/* золотой */
.b2,.b6{background:#FFC94D;opacity:.50}
/* бирюзовый (вернул по просьбе вместо фисташкового) */
.b3,.b7{background:#3FDCC9;opacity:.50}
/* синий — темнит фон, поэтому заметно прозрачнее остальных */
.b4,.b8{background:#4263FF;opacity:.22;width:440px;height:440px}

.b1{top:1%;left:-140px}
.b2{top:13%;right:-150px}
.b3{top:26%;left:-110px}
.b4{top:38%;right:-120px}
.b5{top:51%;right:-140px}
.b6{top:64%;left:-150px}
.b7{top:77%;right:-100px}
.b8{top:90%;left:-130px}

:root[data-mode="dark"] .blob{opacity:.40}
:root[data-mode="dark"] .b1,:root[data-mode="dark"] .b5{background:#7C5FD6}
:root[data-mode="dark"] .b2,:root[data-mode="dark"] .b6{background:#B98A3A}
:root[data-mode="dark"] .b3,:root[data-mode="dark"] .b7{background:#3E9A92}
:root[data-mode="dark"] .b4,:root[data-mode="dark"] .b8{background:#4263FF;opacity:.30}

@media(prefers-reduced-motion:no-preference){
  .blob{will-change:transform}
  /* Полный проход туда-обратно ~30с (просьба). С alternate один прогон — это
     половина пути, поэтому длительность 15с, а не 30.
     Периоды разведены на +-1с (14-16с вместо ровных 15с): при одинаковом
     периоде фазы застывают друг относительно друга навсегда, и восемь пятен
     плывут жёсткой формацией. Разброс в секунду даёт круг 28-32с — та же
     «тридцатка» на глаз, но строй распадается. */
  .b1{animation:drift-a 15s ease-in-out infinite alternate}
  .b2{animation:drift-b 16s ease-in-out infinite alternate;animation-delay:-5s}
  .b3{animation:drift-c 14s ease-in-out infinite alternate;animation-delay:-9s}
  .b4{animation:drift-d 16s ease-in-out infinite alternate;animation-delay:-12s}
  .b5{animation:drift-e 15s ease-in-out infinite alternate;animation-delay:-3s}
  .b6{animation:drift-f 14s ease-in-out infinite alternate;animation-delay:-8s}
  .b7{animation:drift-g 16s ease-in-out infinite alternate;animation-delay:-6s}
  .b8{animation:drift-h 15s ease-in-out infinite alternate;animation-delay:-11s}
}
/* Пятна пересекают экран целиком и уходят на противоположную сторону.
   Дистанция у каждого своя, потому что якорь и размер разные: смещение
   считается как 100vw минус (ширина - 2*отступ), чтобы пятно встало
   зеркально своему старту, а не улетело за край на случайную величину.
   Единицы vw, а не проценты: процент в translate считается от размера
   САМОГО элемента (520px), а не от экрана, и дал бы сдвиг в полпятна.
   Вертикальная составляющая небольшая (60-90px) — просьба была про
   «противоположную сторону экрана», то есть про горизонталь; крупный
   вертикальный ход дополнительно гонял бы пятна по тексту без пользы.
   Клип по краям берёт на себя .aurora{overflow:hidden} — за пределы
   документа ничего не вылезает, горизонтальной прокрутки не появляется. */
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(100vw - 240px),70px,0) scale(1.1)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(-100vw + 220px),86px,0) scale(1.08)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(100vw - 300px),-78px,0) scale(1.12)}}
@keyframes drift-d{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(-100vw + 200px),-64px,0) scale(1.09)}}
@keyframes drift-e{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(-100vw + 240px),74px,0) scale(1.11)}}
@keyframes drift-f{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(100vw - 220px),-82px,0) scale(1.07)}}
@keyframes drift-g{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(-100vw + 320px),-90px,0) scale(1.13)}}
@keyframes drift-h{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(100vw - 180px),68px,0) scale(1.1)}}
}

/* мелочи читаемости */
.shot figcaption{opacity:1;color:var(--mut)}
.note,.tiers-note{color:var(--mut)}

/* ---- мини-график «до → после» внутри карточки кейса ----
   Переиспользует .ba-track/.ba-fill/.viz из раздела dataviz выше — та же
   анимация заполнения и то же отключение при prefers-reduced-motion.
   Здесь только уменьшены теговые колонки: базовые 48px/70px рассчитаны на
   широкий блок .ba-item, а карточка кейса в 3-колоночной сетке узкая. */
.cchart{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.cchart .ba-row{margin-top:0}
.cchart .ba-tag{width:34px;font-size:10px}
.cchart .ba-track{height:7px}
.cchart .ba-val{width:44px;font-size:12px}