/* Объект крупно. Рюкзак на половину экрана, на нём печатается ваше название. Сажа и лайм. */
@font-face{font-family:"TikTok Sans";font-style:normal;font-weight:300 900;font-stretch:75% 150%;font-display:swap;src:url(fonts/tiktoksans-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"TikTok Sans";font-style:normal;font-weight:300 900;font-stretch:75% 150%;font-display:swap;src:url(fonts/tiktoksans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0f0f0f; --surface:#1a1a1a; --ink:#ffffff; --muted:#a3a3a3;
  --accent:#dafa9c; --accent-ink:#0f0f0f; --paper:#ffffff; --soft:#5c5c5c; --fog:#efefef;
  --gut:clamp(16px,4vw,72px);
  --step-small:.9375rem; --step-body:1.125rem; --step-lead:clamp(1.25rem,1.1rem + .7vw,1.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.45 "TikTok Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.disp,h1,.cap h3,.verb{font-weight:800;font-stretch:150%;text-transform:uppercase;letter-spacing:-.01em;line-height:1}

/* Одна кнопка: прямоугольник, лайм */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);font:600 var(--step-body)/1.2 "TikTok Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s;will-change:transform}
.btn:hover{transform:translateY(-3px);background:#e8ffb8}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:3px solid currentColor;outline-offset:-8px}

/* ---------- Главный экран: экран пополам ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--bg)}
.hero-left{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:40px;min-height:100svh}
.word{align-self:flex-start;font-weight:800;font-stretch:150%;text-transform:uppercase;font-size:var(--step-body);text-decoration:none;letter-spacing:-.005em}
.hero-text{display:grid;gap:20px;justify-items:start}
h1{font-size:clamp(2.25rem,4.8vw,4.75rem);font-stretch:100%;line-height:1;text-wrap:balance}
.sub{max-width:38ch;font-size:var(--step-body);color:var(--muted)}
.hero-right{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 24px 24px;background:var(--accent);color:var(--accent-ink)}
.toplink{position:absolute;top:36px;right:40px;font-weight:600;font-size:var(--step-body);text-underline-offset:5px}
.toplink:hover{text-decoration-thickness:3px}
.tile{width:min(31vw,450px,44svh);aspect-ratio:1;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.tile svg{width:78%;height:auto}
.conf{width:min(31vw,450px);min-width:300px;display:grid;gap:10px}
.chips,.swatches{display:flex;gap:8px;margin:0;padding:0;border:0}
.chip{flex:1}
.chip input,.sw input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;background:rgba(15,15,15,.1);font-weight:600;font-size:var(--step-small);cursor:pointer;text-align:center;transition:background-color .2s,color .2s,transform .2s}
.chip:hover span{transform:translateY(-2px)}
.chip input:checked+span{background:var(--bg);color:var(--accent)}
.chip input:focus-visible+span{outline:3px solid var(--bg);outline-offset:2px}
.swatches{gap:10px}
.sw{position:relative;width:36px;height:36px;background:var(--c);cursor:pointer;transition:transform .2s;box-shadow:none}
.sw:hover{transform:translateY(-2px)}
.sw:has(input:checked){outline:3px solid var(--bg);outline-offset:3px}
.sw:has(input:focus-visible){outline:3px solid var(--bg);outline-offset:3px}
.fl{display:grid;gap:4px;font-size:var(--step-small);font-weight:500}
.field{width:100%;height:48px;padding:0 14px;border:0;border-radius:0;background:rgba(255,255,255,.7);color:var(--accent-ink);font-size:var(--step-body);font-weight:500;transition:background-color .2s}
.field::placeholder{color:#6c6c6c;opacity:1}
.field:hover,.field:focus{background:#fff}
.field:focus{outline:3px solid var(--bg);outline-offset:-3px}
.row2{display:grid;grid-template-columns:116px 1fr;gap:12px;align-items:end}
.sum{font-size:var(--step-small);line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Почему мы: возможности плакатом ---------- */
.sec{position:relative}
.s-feat{background:var(--paper);color:var(--bg)}
.caps{padding:clamp(96px,18vh,200px) var(--gut);display:grid;gap:.35em}
.cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:first baseline;font-size:clamp(2.5rem,5.2vw,5.25rem);transition:color .25s}
.cap h2,.cap h3{grid-column:1/9;font-size:inherit;color:inherit}
.cap h2{font-weight:800;font-stretch:150%;text-transform:uppercase;letter-spacing:-.01em;line-height:1;color:var(--soft)}
.cap p{grid-column:9/13;font-size:var(--step-body);line-height:1.45;font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:0;color:var(--bg)}
.cap:not(.cap-h){color:var(--soft)}
.cap:not(.cap-h):hover,.cap:not(.cap-h):focus-within,.cap.is-on{color:var(--bg)}
.cap:not(.cap-h) p{color:var(--bg)}

/* ---------- Как мы работаем: по одному глаголу ---------- */
.s-kak{background:var(--bg)}
.panel{position:relative;isolation:isolate;height:100svh;min-height:560px;overflow:clip;color:var(--ink);background:var(--bg)}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.panel::after{content:"";position:absolute;inset:0;background:rgba(15,15,15,.5);z-index:1}
.verbwrap{position:sticky;top:50%;z-index:3;height:0;display:flex;justify-content:center;pointer-events:none}
.verb{align-self:flex-start;transform:translateY(-50%);font-size:clamp(3rem,11vw,10rem);line-height:.9;color:var(--accent);text-align:center;white-space:nowrap}
.psay{position:absolute;z-index:3;left:0;bottom:0;max-width:min(46ch,100%);padding:24px 32px 24px var(--gut);background:var(--bg);color:var(--ink);font-size:var(--step-body);line-height:1.45}

/* ---------- Модели: фото-образец и активный список ---------- */
.s-models{background:var(--paper);color:var(--bg);padding:clamp(72px,10vw,140px) var(--gut)}
.models-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.m-pic{grid-column:1/6;position:sticky;top:12vh;width:min(34vw,100%);aspect-ratio:4/5;background:var(--fog);overflow:hidden}
.m-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .3s}
.m-pic .mb{opacity:0}
.m-pic.flip .ma{opacity:0}
.m-pic.flip .mb{opacity:1}
.m-list{grid-column:7/12}
.m-list h2{font-size:clamp(2rem,3.4vw,3rem);font-weight:800;font-stretch:150%;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;margin-bottom:48px;text-wrap:balance}
.models{display:grid}
.m-row{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:58px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--soft);font-weight:500;font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.2;transition:color .25s}
.m-price{flex:none;font-size:var(--step-small);font-variant-numeric:tabular-nums;white-space:nowrap}
.m.is-on .m-row,.m-row:hover,.m-row:focus-visible{color:var(--bg)}
.m-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.m-more>*{overflow:hidden;min-height:0}
.m.is-on .m-more{grid-template-rows:1fr}
.m-more p{max-width:34ch;font-size:var(--step-small);line-height:1.5;color:var(--bg);padding-top:2px}
.m-order{display:inline-block;margin:14px 0 20px;font-weight:600;font-size:var(--step-small);text-underline-offset:5px}
.m-more{padding-bottom:0}
.m-note{margin-top:32px;font-size:var(--step-small);color:var(--soft)}

/* ---------- Заявка: визитка на фотографии ---------- */
.s-contact{height:100svh;min-height:680px;overflow:hidden;background:var(--bg)}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.visit{position:absolute;top:60px;right:60px;width:380px;max-width:calc(100% - 32px);padding:32px;background:var(--paper);color:var(--bg);display:flex;flex-direction:column;gap:18px}
.visit h2{font-size:var(--step-lead);font-weight:800;font-stretch:150%;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.addr{font-size:var(--step-body);line-height:1.4}
.contacts{font-size:var(--step-body);line-height:1.7;font-weight:500}
.contacts a{text-underline-offset:4px}
.btn-wide{width:100%;height:52px}

.foot{background:var(--bg);padding:clamp(40px,5vw,72px) var(--gut)}
.foot-in{display:grid;gap:12px;max-width:1280px;margin:0 auto}
.foot-brand{font-weight:800;font-stretch:150%;text-transform:uppercase}
.foot-note{max-width:60ch;font-size:var(--step-small);color:var(--muted)}

.wa-float{position:fixed;z-index:40;right:var(--gut);bottom:18px;opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s,visibility 0s .25s}
.wa-float.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.wa-float.show:hover{transform:translateY(-3px)}

/* ---------- Телефон ---------- */
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;position:relative}
  .hero-right{order:-1;position:relative;height:auto;min-height:60svh;padding:56px 16px 24px;gap:10px}
  .toplink{top:16px;right:16px}
  .tile{width:min(62vw,300px)}
  .conf{width:100%;max-width:420px;min-width:0}
  .hero-left{position:static;min-height:0;padding:28px 16px 40px;background:var(--bg);gap:28px}
  .word{position:absolute;top:20px;left:16px;color:var(--accent-ink);z-index:3}
  h1{font-size:clamp(1.75rem,8.6vw,3.25rem)}
  .hero-text .btn{width:100%}
  .cap{grid-template-columns:1fr;font-size:clamp(2.25rem,11vw,3.5rem);margin-bottom:20px}
  .cap h2,.cap h3,.cap p{grid-column:1}
  .cap p{margin-top:8px;font-size:1rem}
  .cap:not(.cap-h){color:var(--bg)}
  .verb{font-size:clamp(2.25rem,11.5vw,4rem)}
  .psay{width:100%;max-width:none;padding:20px 16px;font-size:1rem}
  .models-in{grid-template-columns:1fr}
  .m-pic{grid-column:1;position:relative;top:0;width:100%;aspect-ratio:4/3;margin-bottom:24px}
  .m-list{grid-column:1}
  .s-contact{height:auto;min-height:0;overflow-x:clip;overflow-y:visible;background:var(--paper)}
  .contact-bg{position:relative;inset:auto;height:70svh}
  .visit{position:relative;top:auto;right:auto;width:calc(100% - 32px);margin:-80px auto 40px}
  .wa-float{left:var(--gut);right:var(--gut);bottom:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}