/* Шрифты свои, из ./fonts. Внешних CDN нет — их заблокирует CSP. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/oswald-cyrillic-700-normal.ae7f9fac7ae7.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/oswald-latin-700-normal.665f37b2d0e8.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-cyrillic-wght-normal.de93fdc85e3d.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}


:root{
  --page:#E3E8EB;--surface:#FFFFFF;--divider:#D7DDE1;--line:#C3C9CE;--muted-2:#98A2A9;--muted:#7C858C;
  --body:#646C72;--ink-3:#4A5258;--ink-2:#2F3438;--ink:#0C1216;--accent:#2D5BFF;--accent-on-dark:#6A8CFF;
  --font-display:"Oswald",sans-serif;--font-text:"Inter","Inter Placeholder",sans-serif;
  --h1:88px;--h2:64px;--h3:26px;--lead:22px;--text:19px;--body-size:17px;--small:12px;
  --container:1440px;--pad-y:120px;--pad-x:64px;--rail:40px;--header-h:76px;
  --ease:cubic-bezier(.44,0,.56,1);--spring-1-b2:var(--ease);--spring-1-b0:var(--ease);--spring-04-b2:var(--ease);
  --shadow-card:.5928px .5928px .8383px -.75px rgba(0,0,0,.11),1.6143px 1.6143px 2.283px -1.5px rgba(0,0,0,.11),3.5444px 3.5444px 5.0125px -2.25px rgba(0,0,0,.1),7.8678px 7.8678px 11.1267px -3px rgba(0,0,0,.08),20px 20px 28.2843px -3.75px rgba(0,0,0,.04);
  --shadow-dark:.5928px .5928px 2.1796px -.1px rgba(0,0,0,.02),1.6143px 1.6143px 5.9357px -.2px rgba(0,0,0,.02),3.5444px 3.5444px 13.0326px -.3px rgba(0,0,0,.04),7.8678px 7.8678px 28.9294px -.4px rgba(0,0,0,.06),20px 20px 73.5391px -.5px rgba(0,0,0,.14);
  --photo-pos:50% 20%;--photo-zoom:1;--strip:132px;
}
@media (max-width:1439.98px){:root{--pad-y:88px;--pad-x:48px;--rail:32px;--h1:64px;--h2:52px;--lead:19px;--text:17px}}
@media (max-width:809.98px){:root{--pad-y:72px;--pad-x:24px;--rail:12px;--strip:92px;--h1:40px;--h2:34px;--h3:22px;--lead:16px;--text:16px;--body-size:16px;--header-h:64px}}
@font-face{font-family:"Inter Placeholder";src:local("Arial");ascent-override:89.79%;descent-override:22.36%;line-gap-override:0%;size-adjust:107.89%}

*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--page);color:var(--body);font-family:var(--font-text);font-size:var(--body-size);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul{padding:0;list-style:none}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-h1,.t-h2,.t-h3,.t-num{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.t-h1{font-size:var(--h1);line-height:1.02;letter-spacing:0}
.t-h2{font-size:var(--h2);line-height:1.14;letter-spacing:0}
.t-h3{font-size:var(--h3);line-height:1.15;letter-spacing:0}
.t-lead{font-size:var(--lead);line-height:1.35;font-weight:500;font-variation-settings:"opsz" 32;color:var(--body)}
.t-text{font-size:var(--text);line-height:1.45;font-variation-settings:"opsz" 32;color:var(--body)}
.accent{color:var(--accent);font-style:normal}
.on-dark{--body:#98A2A9;--ink:#F2F4F5;--ink-2:#F2F4F5;--accent:var(--accent-on-dark);--page:#0C1216;--surface:#1A2126;--line:#2F3438;--divider:#2F3438;background:#0C1216;color:var(--body)}
.on-dark .t-h1,.on-dark .t-h2,.on-dark .t-h3,.on-dark .t-num{color:#F2F4F5}

.section{position:relative;width:100%;display:flex;justify-content:center;background:var(--page)}
.wrap{position:relative;width:100%;max-width:var(--container);padding:var(--pad-y) var(--pad-x)}
body{position:relative}
.rails-global{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--container);padding:0 var(--rail);display:flex;justify-content:space-between;pointer-events:none;z-index:1}
.rails-global i{display:block;width:1px;height:100%;background:rgba(100,108,114,.42)}
.section-line{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line);z-index:2;box-shadow:100vw 0 0 var(--line),-100vw 0 0 var(--line)}
.section-line::before,.section-line::after,.header .bar::before,.header .bar::after,.hline::before,.hline::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 1px rgba(122,132,140,.55)}
.section-line::before,.header .bar::before{left:calc(var(--rail) - 3px)}.section-line::after,.header .bar::after{right:calc(var(--rail) - 3px)}
.on-dark .section-line::before,.on-dark .section-line::after{background:#F2F4F5}
.grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 16px}
.head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.badge{display:inline-flex;align-items:center;padding:10px 16px;background:var(--surface);border-radius:999px;font-size:var(--small);font-weight:700;line-height:1;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.on-dark .badge{background:#1A2126;color:#F2F4F5}
.badge.arrow{position:absolute;top:calc(var(--strip) / 2 + 16px);left:50%;transform:translate(-50%,-50%);z-index:5;padding:20px 22px;border-radius:26px}
.badge.arrow svg{width:18px;height:22px;color:var(--accent);animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.badge.arrow svg{animation:none}}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;line-height:1;white-space:nowrap;background:var(--ink);color:#F2F4F5;overflow:hidden;transition:background .4s var(--ease),color .4s var(--ease)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.light{background:#F2F4F5;color:#0C1216}
.btn .rt{display:block;height:1.3em;line-height:1.3em;overflow:hidden}
.btn .rt span{display:block;text-shadow:0 1.3em 0 currentColor;transition:transform .5s var(--ease)}
.btn:hover .rt span{transform:translateY(-1.3em)}
.btn .arr{width:14px;height:14px;flex:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.header{position:sticky;top:0;z-index:60;display:flex;justify-content:center;background:transparent;border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.header.scrolled{background:rgba(227,232,235,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.header .bar{position:relative;width:100%;max-width:var(--container);height:var(--header-h);padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px}
.header .bar::before,.header .bar::after{top:auto;bottom:-4px}
.mark{display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.mark b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.mark small{font-size:11px;font-weight:500;color:var(--body);line-height:1}
.header .right{display:flex;align-items:center;gap:12px}
.header .tel{font-size:13px;font-weight:600;color:var(--ink);line-height:1}
.menu-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--ink);line-height:1;transition:background .4s var(--ease),color .4s var(--ease)}
.menu-btn i{display:flex;flex-direction:column;gap:5px;width:14px}.menu-btn i b{display:block;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu-open .menu-btn{background:#1A2126;color:#F2F4F5}
.menu-open .menu-btn i b:first-child{transform:translateY(3px) rotate(45deg)}.menu-open .menu-btn i b:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-open .header{background:transparent;border-color:#2F3438;backdrop-filter:none}
.menu-open .header .mark,.menu-open .header .mark small,.menu-open .header .tel{color:#F2F4F5}
.menu{position:fixed;inset:0;z-index:40;background:#0C1216;color:#F2F4F5;display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.menu-open .menu{opacity:1;pointer-events:auto}body.menu-open{overflow:hidden}
.menu .in{width:100%;max-width:var(--container);padding:calc(var(--header-h) + 40px) var(--pad-x) 48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 16px}
.menu nav{grid-column:span 7}.menu aside{grid-column:9 / span 4;align-self:start;padding-top:14px;color:#98A2A9;font-size:14px;display:flex;flex-direction:column;gap:22px}
.menu aside .lbl{font-size:11px;font-weight:600;text-transform:uppercase;color:#7C858C;margin-bottom:8px;display:block}
.menu nav a{--d:0s;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,60px);line-height:1.1;text-transform:uppercase;letter-spacing:0;color:#F2F4F5;padding:8px 0;border-bottom:1px solid #2F3438;transform:translateY(24px);opacity:0;transition:transform .6s var(--ease) var(--d),opacity .6s var(--ease) var(--d),color .2s var(--ease),padding-left .25s var(--ease)}
.menu nav a::after{content:"";width:.5em;height:.5em;flex:none;border-right:2px solid var(--accent-on-dark);border-top:2px solid var(--accent-on-dark);transform:rotate(45deg) translate(-8px,8px);opacity:0;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.menu-open .menu nav a{transform:none;opacity:1}
.menu-open .menu nav a:hover{color:var(--accent-on-dark);padding-left:.35em}
.menu-open .menu nav a:hover::after{opacity:1;transform:rotate(45deg) translate(0,0)}
.menu nav a:nth-child(1){--d:.05s}.menu nav a:nth-child(2){--d:.1s}.menu nav a:nth-child(3){--d:.15s}.menu nav a:nth-child(4){--d:.2s}.menu nav a:nth-child(5){--d:.25s}.menu nav a:nth-child(6){--d:.3s}.menu nav a:nth-child(7){--d:.35s}.menu nav a:nth-child(8){--d:.4s}.menu nav a:nth-child(9){--d:.45s}
.menu aside a{color:#F2F4F5;font-weight:500}.menu aside .big{font-family:var(--font-display);font-weight:700;font-size:28px;text-transform:uppercase;color:var(--accent-on-dark)}

.hero{overflow:hidden}
.silk{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.silk .glow{position:absolute;inset:-10% -10% auto -10%;height:120%;background:radial-gradient(90% 90% at 8% 0%,rgba(150,164,174,.55) 0%,rgba(215,221,225,.35) 45%,rgba(227,232,235,0) 75%)}
.silk .s{position:absolute;top:-30%;height:170%;width:var(--w);left:var(--l);background:var(--page);transform:rotate(-16deg);transform-origin:50% 0;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 18%,rgba(0,0,0,.6) 34%,rgba(0,0,0,0) 46%,rgba(0,0,0,.15) 62%,#000 76%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 18%,rgba(0,0,0,.6) 34%,rgba(0,0,0,0) 46%,rgba(0,0,0,.15) 62%,#000 76%,rgba(0,0,0,0) 97%)}
.silk .s2{opacity:.7;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 10%,#000 26%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.1) 67%,#000 78%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 10%,#000 26%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.1) 67%,#000 78%,rgba(0,0,0,0) 97%)}
.hero .wrap{padding-top:88px;padding-bottom:80px}
.hero .grid{row-gap:96px}
.hero .t-h1{font-size:clamp(64px,6.2vw,124px);line-height:1.02}
.hero .head{grid-column:1 / -1}
.hero .bottom{grid-column:7 / span 6;display:flex;align-items:flex-end;justify-content:flex-end;align-self:end}
.hero .bottom .inner{display:flex;flex-direction:column;align-items:flex-start;gap:28px;width:max-content;max-width:100%}
.hero .bottom p{max-width:none}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}

/* ============ ЦИФРЫ (по донору: nwxL3 + JVm47) ============ */
.metrics{position:relative}
.metrics .wrap{padding-top:calc(var(--strip) + 40px)}
.metrics .head{grid-column:3 / span 8;align-items:center;text-align:center;gap:28px}
.metrics .head .t-h2{max-width:18ch}
.metrics .row{grid-column:1 / -1;margin-top:64px;display:flex;gap:16px;align-items:stretch}
.mcard{flex:1 0 0;width:1px;height:420px;padding:24px;border-radius:24px;background:#1A2126;color:#F2F4F5;display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden;box-shadow:var(--shadow-card);cursor:default;
  transition:flex-grow .5s var(--spring-04-b2),background-color .4s var(--ease),color .4s var(--ease)}
.mcard .top{display:flex;flex-direction:column;gap:20px}
.mcard h3{width:100%;font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.2;text-transform:uppercase;color:#F2F4F5;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;text-wrap:auto;transition:color .4s var(--ease)}
.mcard .top{width:100%}
.mcard p{width:100%;font-size:17px;line-height:1.4;color:#E3E8EB;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;text-wrap:auto;transition:color .4s var(--ease)}
.mcard .num{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1.5;letter-spacing:0;color:#98A2A9;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.mcard.on{flex-grow:1.75;background:#fff}
.mcard.on h3{color:#0C1216}.mcard.on p{color:#646C72}.mcard.on .num{color:#2D5BFF}
@media (max-width:1439.98px){.metrics .head{grid-column:1 / -1}.metrics .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mcard{width:auto;height:360px}.mcard.on{flex-grow:1}}
@media (max-width:809.98px){.metrics .row{grid-template-columns:1fr;gap:12px}.mcard{height:300px}.mcard .num{font-size:48px}.mcard p{font-size:16px}}

.about .grid{display:flex;justify-content:center;align-items:center;gap:80px}
.about .photo{flex:none;position:relative}
.about .photo .frame{position:relative;height:min(560px,52vw);aspect-ratio:3/4;width:auto;max-width:100%;border-radius:24px;overflow:hidden;background:#D3D9DE;display:flex;align-items:center;justify-content:center;color:#7C858C;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
/* подпись «Портрет · 3:4» убрана: это подсказка дизайнера, клиенту её видеть незачем */
.about .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos);transform:scale(var(--photo-zoom));transform-origin:var(--photo-pos)}
.about .photo img[hidden]{display:none}
.about .copy{flex:0 1 620px;display:flex;flex-direction:column;gap:22px}
.about .copy .t-h2{white-space:nowrap}
.about .copy p{max-width:48ch}
.about .note{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid var(--line)}
.about .note a{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);white-space:nowrap}
a[href^="tel:"]:not(.btn){transition:color .2s var(--ease)}a[href^="tel:"]:not(.btn):hover{color:var(--accent)}
.btn:hover{background:var(--accent);color:#fff}.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--accent)}.on-dark .btn:hover{background:var(--accent-on-dark)}
.editpanel{position:fixed;right:16px;bottom:16px;z-index:60;width:300px;background:#0C1216;color:#F2F4F5;border-radius:16px;padding:14px;font-size:12px;display:none;flex-direction:column;gap:10px;box-shadow:var(--shadow-dark)}
.edit .editpanel{display:flex}.edit .about .frame{outline:2px dashed var(--accent);cursor:grab}
.editpanel label{display:flex;flex-direction:column;gap:6px}.editpanel input[type=range]{width:100%}
.editpanel code{display:block;background:#1A2126;padding:8px;border-radius:8px;font-size:11px;white-space:pre;user-select:all}
.editpanel input[type=file]{font-size:11px}

.price .head{grid-column:span 5;gap:24px}
.price .head .t-h2{max-width:13ch;color:var(--muted-2)}
.price .head .t-h2 .accent{color:var(--accent-on-dark)}
.price .head p{color:var(--muted-2);max-width:42ch}
.price .card{grid-column:6 / span 7;background:#1A2126;border-radius:32px;padding:8px;box-shadow:var(--shadow-dark);display:flex;flex-direction:column;gap:8px}
.price .card .top{padding:24px;display:flex;flex-direction:column;gap:44px}
.price .lbl{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.5;text-transform:uppercase;color:var(--muted)}
.price .headline{display:flex;flex-direction:column;gap:14px}
.price .headline h3{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.1;text-transform:uppercase;color:#F2F4F5}
.price .headline p{font-size:17px;line-height:1.4;color:var(--muted-2)}
.price .hr{height:1px;background:#2F3438;margin:0 24px}
.price .payrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:4px 24px 20px}
.price .sum{display:flex;align-items:flex-end;gap:10px}
.price .sum b{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,3.8vw,54px);line-height:1;color:#F2F4F5;white-space:nowrap}
.price .sum i{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--accent-on-dark);padding-bottom:5px;white-space:nowrap}
.price .incl{background:#2F3438;border-radius:24px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.price .incl .col{display:flex;flex-direction:column}
.price .incl .it{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:15px;line-height:1.3;color:#DEDFE0}
.price .incl .it+.it{border-top:1px solid #4A5258}
.price .incl .it svg{width:18px;height:14px;flex:none;color:var(--accent-on-dark)}
.price .asks{display:flex;flex-direction:column;border-top:1px solid #2F3438;width:100%;max-width:42ch}
.price .asks .qa{background:transparent!important;border-radius:0;padding:0;border-bottom:1px solid #2F3438;transition:none}
.price .asks .qa .c{padding:15px 0;gap:12px}
.price .asks .qa .q h3{font-size:16px;color:#F2F4F5}
.price .asks .qa .ic{width:22px;height:22px;border-radius:7px;background:#F2F4F5}
.price .asks .qa .ic i{background:#0C1216}
.price .asks .qa .ic .h{width:10px;left:calc(50% - 5px)}.price .asks .qa .ic .v{height:10px;top:calc(50% - 5px)}
.price .asks .qa .a{padding:0 0 14px}.price .asks .qa .a::after{display:none}
.price .asks .qa .a p{font-size:15px;color:var(--muted-2)}

/* ТИКЕР: по донору — 220px, gap 48, светло-серый */
.ticker{position:relative;width:100%;background:var(--page);display:flex;justify-content:center}
.ticker .tw{position:relative;width:100%;max-width:var(--container);padding:20px 0}
.ticker .clip{overflow:hidden;margin:0 var(--rail)}
.ticker .row{display:flex;width:max-content;gap:48px;will-change:transform;animation:tickx 30s linear infinite}
.ticker span{font-family:var(--font-display);font-weight:700;font-size:clamp(52px,10.5vw,180px);line-height:1.5;letter-spacing:-.02em;text-transform:uppercase;color:var(--line);white-space:pre;flex:none}
.ticker span em{font-style:normal;color:inherit}
@keyframes tickx{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 24px))}}
@media (prefers-reduced-motion:reduce){.ticker .row{animation:none}}
.deck .grid{align-items:start}
.deck .wrap{padding-top:96px}
.deck .side{grid-column:span 5;position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.deck .steps-nav{display:flex;flex-direction:column;gap:2px}
.deck .steps-nav li{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.22;text-transform:uppercase;color:var(--muted-2);cursor:pointer;transition:color .35s var(--ease)}
.deck .steps-nav li:hover{color:var(--ink-2)}
.deck .steps-nav li.on{color:var(--accent)}
.deck .cards{grid-column:6 / span 7;display:flex;flex-direction:column;gap:56px;padding-bottom:8px}
.step{position:sticky;top:calc(var(--header-h) + 32px);background:#fff;border-radius:24px;padding:32px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;box-shadow:var(--shadow-card);transform-origin:50% 0;will-change:transform,opacity}
.step .t-num{font-size:56px;line-height:1;color:var(--ink)}
.step .b{display:flex;flex-direction:column;gap:12px}
.step .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.step .tags span{padding:9px 14px;border-radius:999px;background:var(--page);font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.step p{font-size:17px;line-height:1.5;max-width:60ch}
.step .b .t-h3{font-size:26px}
.deck .cards .step:last-child{position:relative;top:auto}

.reviews .head{grid-column:span 7;gap:24px}
.reviews .head .t-h2{max-width:none}
.reviews .head .link{font-size:15px;color:var(--body);max-width:44ch}
.reviews .more{grid-column:9 / span 4;justify-self:end;align-self:end}
.reviews .head .link a{color:var(--accent);font-weight:500;white-space:nowrap}
.gallery{grid-column:1 / -1;margin-top:40px;position:relative;height:clamp(420px,52vw,740px);border-radius:32px;background:#0C1216;overflow:hidden;
  box-shadow:inset 0 -100px 200px 0 #0C1216,inset 0 100px 200px 0 #0C1216,var(--shadow-dark)}
.gallery .vign{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 -100px 200px 0 #0C1216,inset 0 100px 200px 0 #0C1216}
.gallery .cols{position:absolute;top:50%;left:50%;display:flex;gap:16px;transform:translate(-50%,-50%) scale(1.2) rotate(-15deg);will-change:transform}
.gallery .cols{align-items:flex-start}
.gallery .col{display:flex;flex-direction:column;width:clamp(230px,21vw,330px);animation:gal var(--d,60s) linear infinite;animation-delay:var(--dl,0s)}
.gallery .col.rev2{animation-direction:reverse}
@keyframes gal{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
.gallery .cap{position:absolute;left:24px;bottom:20px;z-index:3;color:#98A2A9;font-size:12px}
.gallery .cap b{display:block;color:#F2F4F5;font-size:12px;font-weight:700;text-transform:uppercase}
.rev{background:#fff;border-radius:20px;padding:10px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px;flex:none}
.rev .ph{border-radius:14px;height:150px;flex:none;background:var(--c,#D7DDE1)}
.rev .txt{padding:2px 8px 0;font-size:14px;line-height:1.45;color:#2F3438}
.rev.nophoto{justify-content:center;padding:22px 18px}
.rev.nophoto .txt{padding:0;font-size:15px;margin-bottom:14px}
.rev .foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 8px 4px;font-size:11px;color:#646C72}
.rev .foot b{display:block;font-size:12px;color:#0C1216}
.tag{background:var(--page);border-radius:999px;padding:5px 9px;font-size:9px;font-weight:700;text-transform:uppercase;color:#2F3438;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.gallery .col{animation:none}}

.picks .grid{justify-items:center}
.picks .head{grid-column:3 / span 8;align-items:center;text-align:center}
.picks .head p br{display:inline}
.picks .head .t-h2{max-width:16ch}
.picks .head p{max-width:none}
.picks .cta{grid-column:1 / -1;margin-top:40px}

.faq .head{grid-column:span 5}
.faq .head .t-h2{max-width:12ch}
.faq .list{grid-column:7 / span 6;background:#fff;border-radius:32px;padding:8px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-card)}
.qa{position:relative;overflow:hidden;cursor:pointer;padding:1px;border-radius:24px;background:var(--page);transition:background-color 1s var(--spring-1-b2)}
.qa.is-open{background:#fff}.qa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qa .c{display:flex;flex-direction:column;gap:16px;padding:22px 24px}
.qa .q{display:flex;align-items:center;gap:24px;user-select:none}
.qa .q h3{flex:1;font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.35;text-transform:uppercase;color:#393939;text-wrap:pretty}
.qa .ic{position:relative;flex:none;width:25px;height:26px;overflow:hidden;background:#0C1216;border-radius:8px}
.qa .ic i{position:absolute;display:block;background:#fff;border-radius:10px}
.qa .ic .h{width:12px;height:1px;left:calc(50% - 6px);top:calc(50% - .5px)}
.qa .ic .v{width:1px;height:12px;left:calc(50% - .5px);top:calc(50% - 6px);transition:opacity 1s var(--spring-1-b2),transform 1s var(--spring-1-b2)}
.qa.is-open .ic .v{opacity:0;transform:rotate(90deg)}
.qa .aw{width:100%;height:0;overflow:hidden}.qa.is-open .aw{height:auto}
.qa .a{position:relative;padding:16px 0 0}.qa .a::after{content:"";position:absolute;inset:0;border-top:1px solid #D7DDE1;pointer-events:none}
.qa .a p{font-size:16px;line-height:1.5;color:#646C72}

.services .head{grid-column:span 12;margin-bottom:40px}
.services .cards{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.svc{background:#fff;border-radius:24px;padding:28px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.svc p{font-size:16px;line-height:1.5;max-width:30ch}
.svc .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.svc .row i{width:36px;height:36px;border-radius:12px;background:#0C1216;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;transition:background .3s var(--ease)}
.svc:hover .row i{background:var(--accent)}
.svc .row i svg{width:16px;height:16px}
.services .foot{grid-column:2 / span 10;margin-top:40px;font-size:16px;text-align:center}

.contact .lead-head{grid-column:1 / -1;margin-bottom:36px}
.contact .card{grid-column:1 / -1;position:relative;background:#fff;border-radius:32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 16px;align-items:stretch;box-shadow:var(--shadow-card)}
.contact .left{grid-column:1 / span 6;padding:46px 8px 46px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.contact .left .t-h2{color:var(--ink);max-width:12ch}
.contact .left p{font-size:17px;line-height:1.5;color:var(--body);max-width:42ch}
.contact .tel{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,2.8vw,40px);line-height:1.1;color:var(--ink);white-space:nowrap}
.contact .links{display:flex;flex-wrap:wrap;gap:8px}
.contact .links a{padding:11px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.contact .links a:hover{background:var(--ink);color:#F2F4F5}
.contact .form{grid-column:7 / span 6;margin:10px 10px 10px 0;background:#0C1216;border-radius:24px;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field .lb{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;color:#F2F4F5}
.field input{height:56px;width:100%;border-radius:14px;border:1px solid transparent;background:#1A2126;color:#F2F4F5;padding:0 16px;font:400 16px/1 var(--font-text);outline:0;transition:border-color .3s var(--ease)}
.field input::placeholder{color:#7C858C}.field input:focus{border-color:#4A5258}
.field .err{font-size:12px;color:#FF7A7A;display:none}.field.bad .err{display:block}.field.bad input{border-color:#FF7A7A}
.contact .form .btn{width:100%;height:60px;justify-content:center;background:var(--accent);color:#fff;font-size:13px;border-radius:16px;margin-top:4px}
.contact .form .btn:hover{background:var(--accent-on-dark)}
.contact .form .btn.done{background:#1A2126;color:#F2F4F5}
.contact .form small{font-size:12px;line-height:1.5;color:#7C858C;text-align:center}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;color:#98A2A9;cursor:pointer;user-select:none}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent .box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:#1A2126;box-shadow:inset 0 0 0 1px #2F3438;display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.consent .box svg{width:11px;height:9px;opacity:0;transform:scale(.7);transition:opacity .25s var(--ease),transform .25s var(--ease);color:#fff}
.consent input:checked + .box{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.consent input:checked + .box svg{opacity:1;transform:scale(1)}
.consent input:focus-visible + .box{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px rgba(45,91,255,.35)}
.consent a{color:#98A2A9;text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:#F2F4F5}
.consent.bad .box{box-shadow:inset 0 0 0 1px #FF7A7A}
.contact .form .btn[disabled]{opacity:.45;pointer-events:none}

.footer{position:relative;background:#0C1216;color:#98A2A9;display:flex;justify-content:center;overflow:hidden}
.footer .wrap{padding:96px var(--pad-x) 0}
.footer .top{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 16px;padding-bottom:64px}
.footer .state{grid-column:span 6;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.3vw,34px);line-height:1.2;letter-spacing:0;text-transform:uppercase;color:#7C858C;text-wrap:balance}
.footer .cols{grid-column:8 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:14px}
.footer .cols h4{font-size:12px;font-weight:600;color:#98A2A9;margin-bottom:14px}
.footer .cols li{padding:4px 0}.footer .cols a{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;color:#F2F4F5;letter-spacing:.01em;transition:color .25s var(--ease)}
.footer .cols a:hover{color:var(--accent-on-dark)}
.hline{position:relative;z-index:1;height:1px;background:#2F3438;margin:0 calc(var(--pad-x) * -1)}
.hline::before,.hline::after{background:#F2F4F5}
.hline::before{left:calc(var(--rail) - 3px)}.hline::after{right:calc(var(--rail) - 3px)}
.footer .legal{position:relative;z-index:1;padding:18px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}
.footer .legal a{color:inherit;transition:color .25s var(--ease)}
.footer .legal a:hover{color:var(--accent-on-dark)}
.footer .big{position:relative;z-index:1;height:min(14.6vw,206px);overflow:hidden;margin-top:4px}
.footer .big span{position:absolute;left:0;bottom:-.155em;font-family:var(--font-display);font-weight:700;font-size:min(19.6vw,278px);line-height:1;letter-spacing:0;text-transform:uppercase;color:#F2F4F5;white-space:nowrap}

.js .badge:not(.arrow),.js .rise{opacity:0}
.js .t-h2 .w{display:inline-block;opacity:0;transform:translateY(50px) rotateX(20deg) skew(10deg,5deg);backface-visibility:hidden;will-change:transform,opacity}
.js .t-h1 .w{display:inline-block;opacity:0;transform:translateY(10px);will-change:transform,opacity}
.js .hero .head,.js .hero .bottom{opacity:0}
.js .head{perspective:1200px}
@media (prefers-reduced-motion:reduce){.js .badge:not(.arrow),.js .rise,.js .t-h1 .w,.js .t-h2 .w,.js .hero .head,.js .hero .bottom{opacity:1;transform:none}}

@media (max-width:1439.98px){
  .hero .bottom{grid-column:1 / -1;justify-content:flex-start}.hero .grid{row-gap:40px}
  .about .grid{flex-direction:column;align-items:flex-start;gap:32px}.about .copy{flex:none}.about .copy .t-h2{white-space:normal}
  .price .head,.price .card,.reviews .head,.picks .head,.faq .head,.faq .list,.services .foot{grid-column:1 / -1}
  .gallery .cols{transform:translate(-50%,-50%) scale(.92) rotate(-15deg)}
  .contact .left,.contact .form{grid-column:1 / -1}
  .contact .left{padding:36px 32px 8px}
  .contact .form{margin:16px;border-radius:22px}
  .about .copy,.price .card,.faq .list,.contact .form{margin-top:32px}
  .about .photo .frame{height:480px}
  .deck .side,.deck .cards{grid-column:1 / -1}.deck .side{position:static;margin-bottom:32px}.deck .steps-nav{display:none}.deck .cards{gap:24px}.step{min-height:300px}
  .menu nav,.menu aside{grid-column:1 / -1}
  .footer .state,.footer .cols{grid-column:1 / -1}
}
@media (max-width:809.98px){
  .header .tel{display:none}.hero .wrap{padding-top:56px;padding-bottom:64px}
  .services .cards{grid-template-columns:1fr}
  .gallery{height:clamp(380px,120vw,520px)}.gallery .cols{transform:translate(-50%,-50%) scale(.72) rotate(-15deg)}.gallery .col{width:clamp(190px,52vw,240px)}.rev .ph{height:110px}
  .contact .left{padding:28px 22px 4px}.contact .form{margin:10px;padding:22px}
  .about .photo .frame{height:min(440px,110vw)}.footer .cols{grid-template-columns:1fr 1fr}
  .price .incl{grid-template-columns:1fr;padding:20px}.price .card .top{padding:20px;gap:32px}.price .payrow{padding:4px 20px 16px}.price .asks{max-width:none}
  .qa .c{padding:18px}
  .step{padding:24px;gap:36px;min-height:0}.step .t-num{font-size:36px}
  }

/* ============ СТРАНИЦЫ УСЛУГ ============ */
/* хиро по центру: заголовок не спорит с лидом, работает при любой длине */
.hero.phero .grid{justify-items:center;row-gap:40px}
.hero.phero .wrap{padding-top:88px;padding-bottom:88px}
.hero.phero .head{grid-column:2 / span 10;align-items:center;text-align:center;gap:26px}
.hero.phero .t-h1{font-size:clamp(40px,4.4vw,80px);max-width:20ch}
.hero.phero .bottom{grid-column:2 / span 10;display:flex;justify-content:center}
.hero.phero .bottom .inner{align-items:center;text-align:center;gap:26px}
.hero.phero .bottom .t-lead{max-width:58ch}
.hero.phero .cta{justify-content:center}

/* карточки «как проходит»: номер, заголовок и текст на одной линии во всех */
.svc-steps .head{grid-column:1 / -1;margin-bottom:40px}
.svc-steps .head .t-h2{max-width:20ch}
.svc-steps .cards{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 48px auto auto;gap:10px}
/* карточка занимает все 4 строки ряда и наследует их: номер, распорка, заголовок, текст
   лежат в общих строках — поэтому выровнены во всех карточках сразу */
.sstep{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;background:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow-card)}
.sstep .t-num{font-size:40px;line-height:1;color:var(--ink)}
.sstep .gap{min-height:0}
.sstep h3{align-self:end;font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.15;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.sstep p{font-size:15px;line-height:1.5;color:var(--body)}
/* запасной вариант там, где subgrid не поддержан */
@supports not (grid-template-rows: subgrid){
  .svc-steps .cards{grid-template-rows:none}
  .sstep{grid-row:auto;grid-template-rows:auto 48px auto 1fr;min-height:320px}
}

/* секция «честно» */
.honest .head{grid-column:3 / span 8;align-items:center;text-align:center;gap:24px}
.honest .head .t-h2{max-width:22ch}
.honest .head .t-text{max-width:58ch}
.honest .head .badge{background:#1A2126;color:var(--accent-on-dark)}
.honest .head .note{font-size:14px;color:var(--muted-2);margin-top:4px}

@media (max-width:1439.98px){
  .hero.phero .head,.hero.phero .bottom{grid-column:1 / -1}
  .svc-steps .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .honest .head{grid-column:1 / -1}
}
@media (max-width:809.98px){
  .svc-steps .cards{grid-template-columns:1fr}
  .svc-steps .cards{grid-template-rows:auto 24px auto auto}
  .hero.phero .t-h1{max-width:none}
}

/* ============ ПОДБОР ============ */
.why .head{grid-column:1 / -1;margin-bottom:40px}
.why .head .t-h2{max-width:20ch}
.why .cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why .col{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid #2F3438}
.why .col h3{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15;text-transform:uppercase;color:#F2F4F5}
.why .col p{font-size:16px;line-height:1.5;color:var(--muted-2)}

.models .head{grid-column:1 / -1;margin-bottom:48px;align-items:center;text-align:center}
.models .head .t-h2{max-width:20ch}
.models .grid{row-gap:16px;align-items:stretch}
/* карточка по донору: белая, padding 8, картинка 1.43 c радиусом 16, подпись */
.model{position:relative;height:100%;display:flex;flex-direction:column;gap:4px;padding:8px;background:#fff;border-radius:24px;box-shadow:var(--shadow-card);overflow:hidden;color:inherit;text-decoration:none}
.model{grid-column:span 4}
.model .img{position:relative;aspect-ratio:1.35;border-radius:16px;background:var(--page);display:flex;align-items:center;justify-content:center;overflow:hidden}
.model .unit{width:58%;aspect-ratio:3.3;background:#fff;border-radius:14px;position:relative;box-shadow:0 1px 0 #D7DDE1,0 14px 30px -18px rgba(12,18,22,.35)}
.model .unit::before{content:"";position:absolute;left:8%;right:8%;bottom:16%;height:2px;background:#D7DDE1;border-radius:2px}
.model .unit::after{content:"";position:absolute;right:8%;top:38%;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.model .flag{position:absolute;top:12px;left:12px;padding:8px 12px;border-radius:999px;background:var(--ink);color:#F2F4F5;font-size:11px;font-weight:700;text-transform:uppercase}
.model .cap{flex:1;padding:12px 16px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.model h3{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15;text-transform:uppercase;color:var(--ink)}
.model .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.model .tags{display:flex;flex-wrap:wrap;gap:0 14px;font-size:15px;color:var(--body)}
.model .price{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);white-space:nowrap}
/* слой «почему советую» — как «Project card content» у донора: снизу за границей, на ховере bottom:0 */
.model .why-panel{position:absolute;left:8px;right:8px;bottom:-100%;z-index:2;padding:18px 18px 16px;background:var(--ink);color:#F2F4F5;border-radius:16px;display:flex;flex-direction:column;gap:10px;transition:bottom .5s var(--spring-04-b2)}
.model .why-panel b{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;color:var(--accent-on-dark);letter-spacing:.02em}
.model .why-panel p{font-size:15px;line-height:1.45;color:#E3E8EB}
.model .why-panel .with{font-size:14px;color:#98A2A9}
.model .why-panel .with i{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:16px;color:#F2F4F5}
@media (hover:hover){.model:hover .why-panel{bottom:8px}}
@media (hover:none){.model .why-panel{position:static;margin:4px 0 0;border-radius:16px}}
.model.other{background:var(--ink);color:#F2F4F5;justify-content:center;padding:34px;gap:16px}
.model.other h3{color:#F2F4F5;font-size:26px}
.model.other p{font-size:16px;line-height:1.5;color:#98A2A9;max-width:34ch}
.model.other .btn{align-self:flex-start;margin-top:8px}
@media (max-width:1439.98px){.model{grid-column:span 6}.why .cols{grid-template-columns:1fr;gap:24px}.models .head{flex-direction:column;align-items:flex-start}}
@media (max-width:809.98px){.model{grid-column:1 / -1}.model h3{font-size:20px}}

/* ============ ЮРИДИЧЕСКАЯ СТРАНИЦА ============ */
.legal-page .head{grid-column:1 / -1;align-items:center;text-align:center;margin-bottom:0}
.legal-page .t-h1{font-size:clamp(38px,4.2vw,76px);max-width:18ch}
.legal-page .title-wrap{padding-top:calc(var(--pad-y) * .7);padding-bottom:calc(var(--pad-y) * .7)}
.legal-page .body-wrap{padding-top:var(--pad-y)}
.legal-page .doc{grid-column:3 / span 8;display:flex;flex-direction:column;gap:8px}
.legal-page .doc h2{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;text-transform:uppercase;color:var(--ink);margin-top:28px}
.legal-page .doc h2:first-child{margin-top:0}
.legal-page .doc p{font-size:17px;line-height:1.6;color:var(--body);max-width:64ch}
.legal-page .doc .upd{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:1439.98px){.legal-page .doc{grid-column:1 / -1}}

/* ============ СТРАНИЦА МОДЕЛИ ============ */
.navrow{width:100%;max-width:1120px;margin:0 auto 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--body);transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line)}
.crumbs .cur{color:var(--ink-2);font-weight:500}
.btn.sm{padding:12px 18px;font-size:11px;gap:8px}
.btn.sm .arr{width:15px;height:12px}
.btn.back .arr{transform:rotate(180deg)}

.unit-hero .wrap{padding-top:52px;padding-bottom:var(--pad-y)}
.unit-hero .grid{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;gap:0}
.unit-hero .cluster{width:100%;max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:44px;row-gap:36px}
.unit-hero .gal{flex:1 1 600px;min-width:0;display:flex;gap:12px;align-items:stretch}
.unit-hero .shot{flex:1;min-width:0;position:relative;aspect-ratio:1.42;border-radius:32px;background:#fff;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.unit-hero .shot .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.unit-hero .shot .slide.on{opacity:1}
.unit-hero .shot .unit{width:62%;aspect-ratio:3.3;background:#fff;border-radius:16px;box-shadow:0 1px 0 #D7DDE1,0 22px 44px -24px rgba(12,18,22,.4);position:relative}
.unit-hero .shot .unit::before{content:"";position:absolute;left:8%;right:8%;bottom:16%;height:2px;background:#D7DDE1;border-radius:2px}
.unit-hero .shot .unit::after{content:"";position:absolute;right:7%;top:36%;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.unit-hero .shot .slide span{font-size:13px;color:var(--muted)}
.unit-hero .shot .flag{position:absolute;top:20px;left:20px;z-index:2;padding:9px 14px;border-radius:999px;background:var(--ink);color:#F2F4F5;font-size:11px;font-weight:700;text-transform:uppercase}
/* полоса миниатюр: ровно 5 в кадре, дальше уходят в затухание */
.unit-hero .rail{order:-1;position:relative;flex:0 0 84px;--th:72px;--gap:10px}
.unit-hero .rail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;background:linear-gradient(rgba(227,232,235,0),var(--page))}
.unit-hero .rail.end::after{opacity:0;transition:opacity .3s var(--ease)}
.unit-hero .thumbs{height:100%;display:flex;flex-direction:column;gap:var(--gap);overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.unit-hero .thumbs::-webkit-scrollbar{display:none}
.unit-hero .thumb{flex:0 0 var(--th);scroll-snap-align:start;position:relative;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow .3s var(--ease)}
.unit-hero .thumb i{width:66%;aspect-ratio:3.3;background:#fff;border-radius:6px;box-shadow:0 1px 0 #D7DDE1,0 6px 12px -8px rgba(12,18,22,.4)}
.unit-hero .thumb[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.unit-hero .thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.unit-hero .side{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.unit-hero .side .t-h1{font-size:clamp(32px,3.3vw,54px);line-height:1.06;text-align:left;max-width:none}
.unit-hero .lead{font-size:17px;line-height:1.5;color:var(--body);max-width:40ch;font-variation-settings:"opsz" 32}
.unit-hero .prices{display:flex;flex-direction:column;gap:6px;padding:20px 0 4px;border-top:1px solid var(--line);width:100%}
.unit-hero .prices .p1{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.unit-hero .prices b{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3vw,46px);line-height:1;color:var(--accent);white-space:nowrap}
.unit-hero .prices .lbl{font-size:15px;color:var(--body)}
.unit-hero .prices .p2{font-size:16px;color:var(--body)}
.unit-hero .prices .p2 i{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink)}
.unit-hero .cta{display:flex;flex-wrap:wrap;gap:10px}

.specs .head{grid-column:1 / -1;margin-bottom:40px}
.specs .table{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.specs .r{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid #2F3438;font-size:16px}
.specs .r dt{color:var(--muted-2)}
.specs .r dd{margin:0;color:#F2F4F5;font-weight:500;text-align:right}
.specs .note{grid-column:1 / -1;margin-top:28px;font-size:14px;color:var(--muted)}

.forwhom .head{grid-column:1 / -1;margin-bottom:40px}
.forwhom .cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.forwhom .c{background:#fff;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card)}
.forwhom .c h3{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.15;text-transform:uppercase;color:var(--ink)}
.forwhom .c ul{display:flex;flex-direction:column;gap:10px}
.forwhom .c li{display:flex;gap:10px;font-size:16px;line-height:1.45;color:var(--body)}
.forwhom .c li svg{width:18px;height:14px;flex:none;margin-top:5px;color:var(--accent)}
.forwhom .c.no li svg{color:var(--muted-2)}

@media (max-width:1439.98px){
  .unit-hero .cluster{gap:32px}.unit-hero .gal,.unit-hero .side{flex:1 1 100%}
  .unit-hero .gal{flex-direction:column}
  .unit-hero .rail{order:1;flex:0 0 auto;width:100%;height:auto}
  .unit-hero .rail::after{left:auto;top:0;bottom:0;right:0;width:56px;height:auto;background:linear-gradient(90deg,rgba(227,232,235,0),var(--page))}
  .unit-hero .thumbs{flex-direction:row;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
  .unit-hero .thumb{flex:0 0 96px;height:74px}
  .specs .table{grid-template-columns:1fr;gap:0}
  .forwhom .cols{grid-template-columns:1fr}
}

/* ============ СТРАНИЦА ОТЗЫВОВ ============ */
.rv-hero .wrap{padding-top:56px;padding-bottom:var(--pad-y)}
.rv-hero .head{grid-column:1 / -1;align-items:center;text-align:center;gap:22px}
.rv-hero .t-h1{font-size:clamp(38px,4.4vw,80px);max-width:16ch}
.rv-hero .lead{font-size:17px;line-height:1.55;color:var(--body);max-width:56ch}
.rv-hero .lead a{color:var(--accent);font-weight:500;white-space:nowrap}
.rv-hero .count{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rv-hero .count span{padding:10px 16px;border-radius:999px;background:#fff;font-size:13px;font-weight:700;text-transform:uppercase;color:var(--ink)}

.rv-wall .grid{row-gap:12px}
.rv-wall .card{grid-column:span 4;background:#fff;border-radius:24px;padding:10px;display:flex;flex-direction:column;gap:12px}
.rv-wall .card .ph{border-radius:16px;aspect-ratio:1.5;background:var(--c,#D7DDE1);flex:none;display:flex;align-items:flex-end;padding:12px;font-size:11px;font-weight:500;color:#646C72}
.rv-wall .card .txt{flex:1;padding:4px 12px 0;font-size:15px;line-height:1.5;color:#2F3438}
.rv-wall .card .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 12px 8px;font-size:12px;color:#646C72}
.rv-wall .card .foot b{display:block;font-size:13px;color:#0C1216}
.rv-wall .more{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.rv-wall .more .left{font-size:14px;color:var(--muted)}
.rv-wall .card.hide{display:none}
@media (max-width:1439.98px){.rv-wall .card{grid-column:span 6}}
@media (max-width:809.98px){.rv-wall .card{grid-column:1 / -1}.rv-hero .t-h1{max-width:none}}


/* ============================================================
   Навигация: путь на главную и кнопка наверх.
   Добавлено после макета, в его же системе: те же цвета,
   та же кривая, те же радиусы.
   ============================================================ */

/* Крошки на внутренних страницах: «Главная · Чистка».
   В макете они были только на странице модели. */
.page-crumbs{margin:0 0 28px;grid-column:1 / -1}
@media (max-width:810px){.page-crumbs{margin-bottom:20px}}

/* Текущий раздел в меню подсвечен — видно, где ты находишься,
   и что «Установка» это отдельная страница, а не «просто главная». */
.menu nav a[aria-current="page"]{color:var(--accent-on-dark);padding-left:.35em}
.menu nav a[aria-current="page"]::after{opacity:1;transform:rotate(45deg) translate(0,0)}

/* Плавающие кнопки: наверх и на главную. Появляются после первого экрана,
   у самого низа прячутся, чтобы не спорить с блоком контактов.
   Светлые, чтобы читаться и на светлых секциях, и на тёмных. */
.floatnav{
  position:fixed;right:24px;bottom:24px;z-index:40;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s var(--ease);
}
.floatnav.is-on{opacity:1;visibility:visible;transform:none}
.floatnav button,.floatnav a{
  width:52px;height:52px;display:grid;place-items:center;
  background:#fff;color:#0C1216;border:1px solid var(--line);border-radius:16px;cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.floatnav button:hover,.floatnav a:hover{background:#0C1216;color:#fff;transform:translateY(-2px)}
.floatnav button:focus-visible,.floatnav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.floatnav svg{width:16px;height:16px;display:block}
.floatnav .home svg{width:18px;height:18px}
@media (max-width:810px){
  .floatnav{right:16px;bottom:16px;gap:8px}
  .floatnav button,.floatnav a{width:46px;height:46px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){.floatnav{transition:opacity .2s linear}}

/* Портрет теперь приходит из админки и рендерится тегом {% img %}.
   Кадрируем по центру-верху: лицо остаётся в кадре на любом экране,
   низ обрезается. Пропорции 3:4 задаёт сама рамка. */
.about .photo img.portrait{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;transform:none}

/* Настоящее фото в карточке отзыва занимает то же место, что заглушка «.ph»:
   те же скругления и те же пропорции 3:2. */
.rv-wall .card img.rv-photo{border-radius:16px;aspect-ratio:1.5;width:100%;
  object-fit:cover;flex:none;display:block;background:#D7DDE1}

/* Фото модели вместо серой рамки: та же геометрия, что у заглушки «.unit» */
.model .img img.unit-photo{width:100%;height:100%;object-fit:contain;display:block}
.unit-hero .shot .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.unit-hero .thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Таблицы в юридических документах: перечень целей обработки */
.legal-page .doc table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:15px}
.legal-page .doc th,.legal-page .doc td{border:1px solid var(--line);padding:10px 12px;
  text-align:left;vertical-align:top;line-height:1.5;color:var(--body)}
.legal-page .doc th{font-weight:600;background:#DCE1E5;color:var(--ink)}
.legal-page .doc ul{margin:0;padding-left:20px;color:var(--body);font-size:17px;line-height:1.6;max-width:64ch}
.legal-page .doc li{margin:4px 0}
.legal-page .doc .rev{font-size:14px;color:var(--muted)}
@media (max-width:810px){
  .legal-page .doc table{font-size:14px}
  .legal-page .doc th,.legal-page .doc td{padding:8px}
}

/* Ссылки на документы в подвале — рядом друг с другом, а не по разным краям */
.footer .legal .docs{display:flex;gap:24px;flex-wrap:wrap}
@media (max-width:810px){.footer .legal .docs{gap:16px}}

/* ============================================================
   Блок «Цифры говорят сами за себя»
   ============================================================ */

/* Карточка расширяется при наведении. Если позволить тексту верстаться
   по живой ширине, браузер пересчитывает переносы на каждом кадре и слова
   прыгают. Поэтому у текста ровно два состояния — узкое и широкое, и он
   перестраивается один раз, скачком, пока карточка едет плавно.

   Ширины замерены на реальной странице: свёрнутая карточка внутри ~225 px,
   раскрытая ~390 px. При появлении класса «on» текст ждёт долю секунды,
   чтобы карточка успела раздвинуться; при уходе перестраивается сразу. */
.mcard .top{width:var(--mc-narrow, 225px);transition:width 0s}
.mcard.on .top{width:var(--mc-wide, 390px);transition:width 0s linear .18s}
.mcard h3,.mcard p{width:100%;text-wrap:pretty}

/* Ниже 1100 px карточки перестают расширяться — текст занимает всю ширину */
@media (max-width:1099.98px){
  .mcard .top,.mcard.on .top{width:100%;transition:none}
}

/* Число прижато к низу, текст к верху — пустота между ними перестаёт
   выглядеть случайной. */
.mcard{display:flex;flex-direction:column;justify-content:space-between}

/* Неактивные числа были почти не видны на тёмном фоне, а это и есть
   содержание блока. */
.mcard .num{color:#C3C9CE}

/* ============================================================
   Заголовки страниц услуг
   ============================================================ */

/* Заголовок задуман в две строки: чёрная часть и синяя. Ограничение в 20
   знаков ломало его на три-четыре строки, и последнее слово повисало
   отдельно. Даём строке место и не даём рвать её посреди фразы. */
.hero.phero .t-h1{max-width:100%;text-wrap:normal}
@media (min-width:1100px){
  /* Заголовок занимает всю ширину блока, но не вылезает за рельсы */
  .hero.phero .t-h1{max-width:100%}
}
@media (min-width:811px) and (max-width:1099.98px){
  .hero.phero .t-h1{max-width:100%;font-size:clamp(34px,3.8vw,52px)}
}
@media (max-width:810px){
  /* На телефоне переносы неизбежны — там важнее, чтобы текст помещался */
  .hero.phero .t-h1{max-width:none;white-space:normal;font-size:clamp(32px,7.6vw,44px)}
}
/* Заголовок в блоке контактов — по той же логике */



/* ============================================================
   Стена отзывов
   ============================================================ */

/* Карточки в ряду тянулись до общей высоты, и та, где нет фотографии,
   оставляла под текстом пустоту. Пусть каждая занимает столько, сколько
   нужно её содержимому — как в макете. */
.rv-wall .grid{align-items:start}
.rv-wall .card.nophoto{align-self:start}

/* Кнопка формы: пока не отмечено согласие, она отключена — но выглядела
   просто тускло-синей, и это читалось как «форма сломана». Делаем состояние
   явным, а активную кнопку — заметной. */
.form .btn[disabled]{background:#20262B;color:#7C858C;cursor:not-allowed;box-shadow:none}
.form .btn[disabled]:hover{background:#20262B}
.form .btn:not([disabled]){background:var(--accent);color:#fff}
.form .btn:not([disabled]):hover{background:#1F49E0}
.form .btn.done{background:#1D7A4C;color:#fff}

/* ============================================================
   Мобильные исправления вёрстки макета
   ============================================================ */

/* Карточки «Как это происходит» на телефоне уезжали за экран: сброс
   grid-row лежал в блоке @supports not (subgrid), а современные браузеры
   subgrid поддерживают — и карточки выстраивались в четыре колонки.
   Ставим их в одну колонку явно. */
@media (max-width:809.98px){
  .svc-steps .cards{grid-template-columns:1fr;grid-template-rows:none}
  .sstep{grid-row:auto;grid-template-rows:auto 16px auto auto;min-height:0}
  .sstep .gap{display:none}
}

/* Таблицы в юридических документах на узком экране прокручиваются вбок
   внутри себя, а не растягивают страницу. */
@media (max-width:809.98px){
  .legal-page .doc table{display:block;overflow-x:auto;white-space:normal;
    -webkit-overflow-scrolling:touch}
  .legal-page .doc td,.legal-page .doc th{min-width:150px}
}

/* Заголовок страницы отзывов уезжал в четыре строки: ограничение в 16 знаков
   рвало обе половины. Задумано две. */
.rv-hero .t-h1{max-width:100%;text-wrap:normal}
@media (min-width:1100px){.rv-hero .t-h1{max-width:100%}}
@media (max-width:810px){.rv-hero .t-h1{max-width:none;white-space:normal}}

/* Стена отзывов: сетка выравнивала карточки по рядам, и короткие отзывы
   оставляли под собой дыры. Раскладываем колонками — карточки встают
   вплотную друг под друга, как кирпичи. */
@media (min-width:811px){
  .rv-wall .grid{display:block;column-count:3;column-gap:12px}
  .rv-wall .card{break-inside:avoid;width:100%;margin:0 0 12px;display:flex}
  .rv-wall .more{column-span:all;margin-top:8px}
}
@media (min-width:811px) and (max-width:1099.98px){
  .rv-wall .grid{column-count:2}
}

/* Заголовок блока контактов разбит на две строки вручную — ограничение
   по знакам ломало его на три. */
.contact .t-h2{max-width:100%;text-wrap:normal}

/* Строка под шагами: сколько занимает и что требуется от клиента */
.svc-steps .steps-note{grid-column:1 / -1;margin-top:28px;font-size:16px;line-height:1.5;
  color:var(--muted);max-width:60ch}
@media (max-width:810px){.svc-steps .steps-note{margin-top:20px;font-size:15px}}