:root{
  --black:#0b0b0b;--white:#f5f5f2;--y:#ffd400;--grey:#8b8b86;--line:rgba(255,255,255,.12);--line-d:rgba(0,0,0,.1);
  --cond:'Oswald',Impact,sans-serif;--sans:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0;overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2{margin:0}
.h-cond{font:700 clamp(40px,5vw,72px)/.95 var(--cond);text-transform:uppercase;letter-spacing:-.01em}
.h-cond.light{color:var(--white)}
.y-btn{display:inline-flex;align-items:center;gap:10px;background:var(--y);color:var(--black);font:600 13px var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:14px 20px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.y-btn b{font-weight:700}
.y-btn:hover{transform:translateX(3px);background:#ffe14d}
.note{font-size:12px;color:var(--grey)}

/* шапка */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;mix-blend-mode:difference;color:#fff}
.logo{font:700 24px var(--cond);letter-spacing:.04em}
.logo span{color:var(--y)}
.top-nav{display:flex;gap:28px;font:500 12px var(--sans);text-transform:uppercase;letter-spacing:.1em}
.top-nav a:hover{color:var(--y)}
.top-btn{position:fixed;top:16px;right:28px;z-index:51;width:38px;height:38px;background:var(--y);display:grid;place-content:center;gap:4px}
.top{padding-right:90px}
.top-btn span{display:block;width:14px;height:2px;background:#000}

/* 1. hero */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 2.2fr 1fr;align-items:center;gap:3vw;padding:100px 28px 40px;position:relative;background:var(--white);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--line-d) calc(12.5% - 1px) 12.5%)}
.manifest{font:700 clamp(30px,3.6vw,58px)/1.02 var(--cond);text-transform:uppercase;text-align:center;letter-spacing:-.005em}
.manifest .w{display:inline-block;opacity:.12;transition:opacity .25s}
.manifest .w.on{opacity:1}
.manifest mark{background:none;color:var(--y);-webkit-text-stroke:0}
.manifest mark .w{color:#e6bf00}
.hero-a{aspect-ratio:4/3;transform:translateY(calc(var(--p,0) * -60px))}
.hero-b{aspect-ratio:3/4;width:70%;justify-self:end;transform:translateY(calc(var(--p,0) * 60px))}
.hero-foot{position:absolute;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.08em}

/* 2. бегущая строка */
.strip{background:var(--y);overflow:hidden;padding:16px 0;border-block:2px solid var(--black)}
.strip-track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:run 30s linear infinite;font:700 34px var(--cond);text-transform:uppercase}
.strip-track i{font-style:normal}
@keyframes run{to{transform:translateX(-50%)}}

/* 3. главы */
.chapters{height:520vh;position:relative;background:var(--black);color:var(--white)}
.ch-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ch-bigword,.bigword{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(120px,24vw,420px)/.8 var(--cond);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none;user-select:none}
.bigword{color:rgba(0,0,0,.05);-webkit-text-stroke:0}
.bigword.dark{color:rgba(255,255,255,.06)}
.ch{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:4vw;padding:0 6vw;opacity:0;pointer-events:none;transition:opacity .5s}
.ch.on{opacity:1;pointer-events:auto}
.ch h2{font:700 clamp(44px,5.4vw,88px)/.9 var(--cond);text-transform:uppercase;transform:translateY(30px);transition:transform .7s var(--ease)}
.ch figure{aspect-ratio:4/5;max-height:70vh;transform:translateY(60px) scale(.96);transition:transform .9s var(--ease)}
.ch.on h2,.ch.on figure{transform:none}
.ch p{color:#c8c8c2;line-height:1.65;max-width:34ch;margin:0 0 18px}
.ch b{display:inline-block;background:var(--y);color:#000;font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px}
.ch-count{position:absolute;right:6vw;bottom:32px;font:700 22px var(--cond);display:flex;align-items:center;gap:8px}
.ch-count i{width:14px;height:14px;background:var(--y)}
.ch-count b{color:var(--y)}

/* 4. цены */
.prices{position:relative;background:var(--black);color:var(--white);padding:16vh 6vw 10vh;overflow:hidden}
.prices-wrap{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:5vw;align-items:start}
.prices-wrap .h-cond{grid-column:1/-1;margin-bottom:24px}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .3s,color .3s}
.plist b{font:700 22px var(--cond);text-transform:uppercase}
.plist span{grid-row:2;font-size:12px;color:var(--grey)}
.plist em{grid-row:1/3;grid-column:2;align-self:center;font:500 18px var(--cond);font-style:normal}
.plist li:hover,.plist li.hl{color:var(--y);padding-left:10px}
.prices-car{position:sticky;top:15vh;aspect-ratio:3/4;filter:grayscale(.2)}
.prices .note{position:relative;margin-top:24px}

/* 5. до/после */
.ba{background:#111;padding:14vh 6vw;color:var(--white)}
.ba-sub{color:var(--grey);margin:10px 0 32px}
.ba-box{position:relative;aspect-ratio:16/9;max-height:80vh;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--y);transform:translateX(-1px)}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--y);color:#000;display:grid;place-items:center;font:700 18px var(--cond)}
.ba-l,.ba-r{position:absolute;top:18px;font:600 12px var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:6px 10px}
.ba-l{left:18px}.ba-r{right:18px;background:var(--y);color:#000}

/* 6. галерея по дуге */
.gallery{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--white)}
.dial{position:absolute;left:50%;top:150%;width:0;height:0}
.dial figure{position:absolute;width:clamp(180px,22vw,320px);aspect-ratio:4/3;left:0;top:0;transform-origin:50% 50%;transition:filter .6s,opacity .4s;filter:grayscale(1);will-change:transform}
.dial figure.front{filter:none}
.dial-cap{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);margin:0;font:700 clamp(20px,2vw,30px) var(--cond);text-transform:uppercase;white-space:nowrap;background:var(--y);padding:6px 14px}
.dial-ctrl{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;gap:8px}
.dial-ctrl button{width:52px;height:40px;border:0;background:#e5e5e0;font:700 18px var(--cond);cursor:pointer;transition:background .2s}
.dial-ctrl button:hover{background:var(--y)}

/* 7. запись */
.book{position:relative;background:var(--black);padding:18vh 6vw;overflow:hidden}
.card{position:relative;background:var(--white);display:grid;grid-template-columns:.8fr 1.2fr;gap:4vw;padding:clamp(28px,4vw,56px);max-width:1100px;margin:0 auto}
.card p{color:var(--grey);margin:12px 0 0}
.card form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card label{display:flex;flex-direction:column;gap:6px;font:500 12px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#555}
.card input{font:400 15px var(--sans);padding:13px 12px;border:0;background:#ecece7;outline:none;text-transform:none;letter-spacing:0;color:#000}
.card input:focus{background:#fff3b0}
.wide{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid #d5d5cf;background:none;padding:10px 14px;font:500 13px var(--sans);cursor:pointer}
.chips button.on{background:#000;color:var(--y);border-color:#000}

.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;padding:60px 28px 70px;font-size:13px}
.foot div{display:flex;flex-direction:column;gap:6px;color:#555}
.foot b{color:#000;font-weight:600;margin-bottom:6px}
.badge{position:fixed;left:16px;bottom:16px;z-index:60;font-size:11px;padding:7px 12px;background:#000;color:var(--y)}

@media (max-width:900px){
  .top{padding:14px 70px 14px 16px}.top-btn{right:16px;top:12px}.top-nav{display:none}
  .hero{grid-template-columns:1fr;padding:90px 16px 90px;gap:20px}
  .hero-a{order:2;aspect-ratio:16/10}.hero-b{display:none}
  .manifest{font-size:30px}
  .hero-foot{left:16px;right:16px;bottom:64px;flex-direction:column;gap:12px;align-items:flex-start}
  .strip-track{font-size:24px}
  .chapters{height:auto}
  .ch-pin{position:relative;height:auto}
  .ch{position:relative;opacity:1;pointer-events:auto;grid-template-columns:1fr;padding:56px 16px;gap:18px;border-bottom:1px solid var(--line)}
  .ch h2,.ch figure{transform:none}
  .ch figure{aspect-ratio:16/11}
  .ch-count,.ch-bigword{display:none}
  .prices{padding:12vh 16px}
  .prices-wrap{grid-template-columns:1fr}.prices-car{display:none}
  .ba{padding:12vh 16px}.ba-box{aspect-ratio:4/3}
  .gallery{height:80vh;min-height:520px}
  .dial figure{width:56vw}
  .book{padding:12vh 16px}
  .card{grid-template-columns:1fr}
  .card form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;padding:48px 16px 80px}
}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}.manifest .w{opacity:1}}