/* ДУБЛЬ — видеопродакшн и SMM, Казань. Демо. */
:root{
  --ink:#0E0C0A; --ink2:#16130F; --ink3:#211C16;
  --paper:#EFE7D8; --paper2:#E3D8C4; --paper-ink:#1A1611;
  --text:#EFE7D8; --muted:#A89E8C; --muted2:#7C7363;
  --line:rgba(239,231,216,.14); --line2:rgba(239,231,216,.26);
  --rec:#FF4B2B; --rec2:#FF6A4D; --amber:#F2B035;
  --f-d:'Unbounded',system-ui,sans-serif;
  --f-t:'Manrope',system-ui,sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(16px,4vw,64px);
  --max:1360px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --back:cubic-bezier(.175,.885,.32,1.275);
  --hdr:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--text);-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:var(--ink);font:400 17px/1.55 var(--f-t);overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-d);font-weight:700;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--f-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:2px;font:700 15px/1 var(--f-t);letter-spacing:.02em;cursor:pointer;border:0;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn-rec{background:var(--rec);color:#fff}
.btn-rec:hover{background:var(--rec2);transform:translateY(-2px)}
.btn-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.btn-ghost{background:rgba(239,231,216,.08);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{background:rgba(239,231,216,.16)}
.btn-dark{background:var(--paper-ink);color:var(--paper)}
.btn-dark:hover{background:#000}

/* ---------- шапка ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 var(--pad);transition:height .3s var(--ease),background .3s var(--ease),box-shadow .3s}
.hdr.is-scrolled{--hdr:56px;height:56px;background:rgba(14,12,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:baseline;gap:10px;font:800 22px/1 var(--f-d);letter-spacing:.04em}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--rec);align-self:center;animation:blink 1.2s steps(1) infinite}
.logo small{font:500 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{position:relative;font-weight:600;font-size:15px;color:rgba(239,231,216,.86);padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rec);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr-tel{font-weight:700;font-size:15px;white-space:nowrap}
.hdr .btn{height:42px;padding:0 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;margin-left:auto}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:26px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:45;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px var(--pad) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu a{font:700 clamp(22px,6.4vw,28px)/1.25 var(--f-d);padding:8px 0;border-bottom:1px solid var(--line)}
.mmenu .mono{color:var(--muted);margin-top:24px;font-size:11px;line-height:1.6}
.mmenu .mm-tel{font:700 20px/1.3 var(--f-t);border:0}

/* ---------- шторка-склейка ---------- */
.cut{position:fixed;inset:0;z-index:100;pointer-events:none}
.cut i{position:absolute;left:0;right:0;height:50.5%;background:#0A0907;transition:transform .32s cubic-bezier(.7,0,.3,1)}
.cut i:first-child{top:0;transform:translateY(-101%);border-bottom:1px solid rgba(255,75,43,.7)}
.cut i:nth-child(2){bottom:0;transform:translateY(101%)}
.cut b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 12px/1.6 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .15s;white-space:nowrap;text-align:center}
.cut b em{display:block;font-style:normal;color:var(--rec);font-size:13px}
.cut s{position:absolute;inset:0;background:#fff;opacity:0;text-decoration:none}
.cut.shut i{transform:none}
.cut.shut b{opacity:1;transition-delay:.18s}
.cut.flash s{animation:flash .16s linear}
@keyframes flash{0%{opacity:.0}30%{opacity:.22}100%{opacity:0}}
html.arriving .cut i{transform:none;transition:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}

/* ---------- первый экран: живой кадр ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#0b0a08}
.hero-par{position:absolute;inset:-7% -3%;z-index:-3;will-change:transform}
.hero-bg{position:absolute;inset:0;transform-origin:60% 100%;background:var(--img) center/cover no-repeat;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.07) translate3d(-1.2%,0,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 70% at 50% 110%,rgba(10,9,7,.78),transparent 60%),
  linear-gradient(180deg,rgba(10,9,7,.55),transparent 22%);pointer-events:none}
.grain{position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.flicker{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 78% 40%,rgba(242,176,53,.12),transparent 70%);animation:flicker 4.2s infinite}
@keyframes flicker{0%,100%{opacity:.7}8%{opacity:.95}11%{opacity:.6}40%{opacity:.85}62%{opacity:1}64%{opacity:.7}}
.letterbox{position:absolute;left:0;right:0;height:0;background:#0b0a08;z-index:2;pointer-events:none}
.letterbox.t{top:0}.letterbox.b{bottom:0}

/* видоискатель */
.vf{position:absolute;inset:calc(var(--hdr) + 14px) var(--pad) 22px;z-index:1;pointer-events:none}
.vf::before,.vf::after,.vf i::before,.vf i::after{content:"";position:absolute;width:26px;height:26px;border:2px solid rgba(239,231,216,.75)}
.vf::before{left:0;top:0;border-right:0;border-bottom:0}
.vf::after{right:0;top:0;border-left:0;border-bottom:0}
.vf i::before{left:0;bottom:0;border-right:0;border-top:0}
.vf i::after{right:0;bottom:0;border-left:0;border-top:0}
.hud{position:absolute;display:flex;gap:18px;align-items:center;font:500 12px/1 var(--f-m);letter-spacing:.12em;color:rgba(239,231,216,.86);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hud.h-tl{left:40px;top:12px}.hud.h-tr{right:40px;top:12px}.hud.h-br{right:40px;bottom:12px}
.rec{display:inline-flex;align-items:center;gap:8px;color:#fff}
.rec::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.batt{display:inline-block;width:24px;height:11px;border:1.5px solid currentColor;border-radius:2px;position:relative}
.batt::before{content:"";position:absolute;inset:1.5px;right:30%;background:currentColor}
.batt::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:currentColor}

/* стекло под текстом: размытие без границ */
.hero-body{position:relative;z-index:3;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(56px,9vh,96px)}
.glass{position:relative;max-width:min(920px,64vw);padding:clamp(20px,3.4vh,36px) 0 0}
.glass::before{content:"";position:absolute;z-index:-1;left:-90px;right:-120px;top:-70px;bottom:-60px;
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  background:rgba(14,12,10,.18);
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.hero .kicker{display:flex;gap:14px;align-items:center;color:var(--amber);margin-bottom:clamp(12px,2.2vh,22px)}
.hero h1{font-size:clamp(30px,min(5.3vw,9.4vh),78px);line-height:1.04}
.hero h1 .accent{color:var(--rec)}
.hero .lead{margin-top:clamp(12px,2.2vh,22px);max-width:60ch;font-size:clamp(15px,1.15vw,18px);color:rgba(239,231,216,.9)}
.price-line{margin-top:clamp(12px,2vh,18px);display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700;font-size:15px}
.price-line span{white-space:nowrap}
.price-line b{color:var(--amber)}
.hero-cta{margin-top:clamp(16px,3vh,28px);display:flex;gap:12px;flex-wrap:wrap}

/* светлый кадр (страница SMM) */
.hero.light{background:#f2efe9;color:var(--paper-ink)}
.hero.light::before{background:radial-gradient(120% 70% at 30% 110%,rgba(246,242,234,.65),transparent 60%),linear-gradient(180deg,rgba(246,242,234,.5),transparent 20%)}
.hero.light .glass::before{background:rgba(250,247,240,.38)}
.hero.light .lead{color:#2c261e}
.hero.light .kicker{color:#b5401f}
.hero.light .price-line b{color:#b5401f}
.hero.light .btn-ghost{color:var(--paper-ink);background:rgba(26,22,17,.06);box-shadow:inset 0 0 0 1px rgba(26,22,17,.28)}
.hero.light .vf::before,.hero.light .vf::after,.hero.light .vf i::before,.hero.light .vf i::after{border-color:rgba(26,22,17,.55)}
.hero.light .hud{color:#2c261e;text-shadow:none}
.hero.light .rec{color:#2c261e}
.hero.light .grain{opacity:.1;mix-blend-mode:multiply}
.hero.light .flicker{display:none}
.hdr.on-light:not(.is-scrolled){color:var(--paper-ink)}
.hdr.on-light:not(.is-scrolled) .nav a{color:#2c261e}
.hdr.on-light:not(.is-scrolled) .logo small{color:#5b5245}
.hdr.on-light:not(.is-scrolled) .burger span{background:var(--paper-ink)}

/* ---------- секции ---------- */
.sec{padding:clamp(64px,8vw,104px) 0;position:relative}
.slate{display:flex;align-items:center;gap:16px;color:var(--muted);margin-bottom:24px}
.slate .tc{color:var(--rec)}
.slate::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,64px)}
.sec-head h2{font-size:clamp(28px,3.6vw,50px)}
.sec-head p{color:var(--muted);max-width:52ch}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .slate{color:#6d6354}
.paper .slate::after{background:rgba(26,22,17,.16)}
.paper .sec-head p{color:#5a5145}

/* появление */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* ---------- соты-диафрагмы ---------- */
.hexes{display:flex;justify-content:center;gap:0 6px;padding:clamp(56px,7vw,88px) 0 clamp(72px,8vw,104px)}
.hex{position:relative;width:clamp(150px,15vw,214px);aspect-ratio:1/1.1547;display:grid;place-items:center;text-align:center;flex:none}
.hex:nth-child(even){transform:translateY(46%)}
.hex svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hex .shape{fill:rgba(239,231,216,.03);stroke:url(#hexg);stroke-width:2}
.hex .iris{stroke:rgba(239,231,216,.12);stroke-width:1.2;fill:none;transform-origin:50% 50%;transform:rotate(55deg) scale(.35);transition:transform 2s var(--ease)}
.hex.in .iris{transform:rotate(0) scale(1)}
.hex .num{position:relative;font:700 clamp(26px,2.6vw,38px)/1 var(--f-d);font-variant-numeric:tabular-nums;color:var(--text)}
.hex .num small{font-size:.5em;margin-left:3px;color:var(--amber)}
.hex .cap{position:relative;margin-top:8px;font-size:13px;line-height:1.3;color:var(--muted);max-width:13ch;margin-inline:auto}
.hex-in{position:relative;padding:0 14px}

/* ---------- услуги ---------- */
.svc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.svc{position:relative;display:flex;flex-direction:column;background:var(--ink2);border:1px solid var(--line);overflow:hidden;transition:border-color .3s}
.svc:hover{border-color:rgba(255,75,43,.6)}
.svc .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc:hover .ph img{transform:scale(1.05)}
.svc .ph .mono{position:absolute;left:16px;top:14px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.perf{position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(14,12,10,.85) 10px 22px,transparent 22px 30px);opacity:.9}
.perf.t{top:0}.perf.b{bottom:0}
.svc .body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;flex:1}
.svc h3{font-size:clamp(22px,2vw,28px)}
.svc ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:#d6cdbd}
.svc li{padding-left:22px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--rec)}
.svc .foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
.svc .from{font-weight:800;font-size:20px}
.svc .from small{font-weight:500;font-size:14px;color:var(--muted)}
.svc .go{font-weight:700;color:var(--rec)}
.svc-mini{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;border-top:1px solid var(--line)}
.svc-mini div{padding:22px 22px 6px 0}
.svc-mini div+div{padding-left:22px;border-left:1px solid var(--line)}
.svc-mini b{display:block;font-size:16px;margin-bottom:6px}
.svc-mini p{font-size:14px;color:var(--muted)}
.svc-mini em{display:block;margin-top:10px;font-style:normal;font-weight:800;color:var(--amber)}

/* ---------- кейсы: волна переворотов ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;perspective:1800px}
.case{position:relative;transform-origin:50% 50%;transform:perspective(1800px) rotateX(-96deg);opacity:0;backface-visibility:hidden;
  transition:transform 1.25s var(--back),opacity .5s linear;transition-delay:calc(var(--i,0) * 160ms)}
.case.in{transform:perspective(1800px) rotateX(0);opacity:1}
.case .frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.case img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.case:hover img{transform:scale(1.06);filter:brightness(.55)}
.case .tc{position:absolute;left:12px;top:10px;font:500 11px/1 var(--f-m);letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.case .res{position:absolute;inset:auto 0 0 0;padding:16px;display:flex;gap:18px;transform:translateY(100%);transition:transform .45s var(--ease);background:linear-gradient(0deg,rgba(10,9,7,.85),transparent)}
.case:hover .res,.case:focus-within .res{transform:none}
.case .res b{display:block;font:700 22px/1 var(--f-d);color:var(--amber)}
.case .res span{font-size:12px;color:#ddd}
.case .meta{padding-top:14px}
.case .tag{color:var(--rec)}
.case h3{font:700 17px/1.3 var(--f-t);margin-top:6px}
.case p{font-size:15px;color:var(--muted);margin-top:4px}

/* ---------- монтажный стол (этапы) ---------- */
.tl{position:relative;border:1px solid var(--line);background:var(--ink2);padding:18px 18px 22px}
.tl-ruler{display:flex;justify-content:space-between;font:500 11px/1 var(--f-m);color:var(--muted2);padding:0 0 10px 64px;border-bottom:1px solid var(--line)}
.tl-track{display:grid;grid-template-columns:64px 1fr;align-items:center;height:46px;border-bottom:1px dashed var(--line)}
.tl-track>span{font:500 11px/1 var(--f-m);color:var(--muted)}
.tl-lane{position:relative;height:30px}
.clip{position:absolute;top:0;bottom:0;border-radius:2px;display:flex;align-items:center;padding:0 10px;font:600 12px/1 var(--f-t);color:#1a1611;white-space:nowrap;overflow:hidden;opacity:.35;transition:opacity .35s}
.clip.on{opacity:1}
.clip.v{background:var(--amber)}.clip.a{background:#7FB3A6}.clip.t{background:var(--paper2)}.clip.r{background:var(--rec);color:#fff}
.playhead{position:absolute;top:8px;bottom:8px;left:calc(18px + 64px);width:2px;background:var(--rec);z-index:2;pointer-events:none;transform:translateX(var(--ph,0px))}
.playhead::before{content:"";position:absolute;top:-2px;left:-6px;border:7px solid transparent;border-top:9px solid var(--rec)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.step{border-top:2px solid var(--line);padding-top:16px;transition:border-color .4s}
.step.on{border-color:var(--rec)}
.step .mono{color:var(--muted)}
.step h3{font:700 18px/1.3 var(--f-t);margin:8px 0 6px}
.step p{font-size:15px;color:var(--muted)}

/* ---------- калькулятор ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.tabs{display:inline-flex;border:1.5px solid var(--paper-ink);margin-bottom:28px}
.tabs button{border:0;background:none;padding:12px 22px;font-weight:700;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--paper-ink);color:var(--paper)}
.fld{border:0;margin:0 0 24px;padding:0}
.fld legend{font:500 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#6d6354;margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.chip span{display:flex;flex-direction:column;gap:2px;padding:11px 16px;border:1.5px solid rgba(26,22,17,.25);background:rgba(255,255,255,.35);font-weight:700;font-size:15px;line-height:1.25;transition:border-color .2s,background .2s,color .2s;min-height:44px;justify-content:center}
.chip small{font-weight:500;font-size:12.5px;color:#6d6354}
.chip input:checked+span{border-color:var(--paper-ink);background:var(--paper-ink);color:var(--paper)}
.chip input:checked+span small{color:#c9bfae}
.chip input:focus-visible+span{outline:2px solid var(--rec);outline-offset:2px}
.chip input:disabled+span{opacity:.45}
.stepper{display:inline-flex;align-items:center;border:1.5px solid rgba(26,22,17,.25);background:rgba(255,255,255,.35)}
.stepper button{width:44px;height:44px;border:0;background:none;font-size:20px;font-weight:700;cursor:pointer}
.stepper output{min-width:56px;text-align:center;font:700 17px/1 var(--f-d)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.sum{position:sticky;top:84px;background:var(--paper-ink);color:var(--paper);padding:28px 28px 30px}
.sum .mono{color:var(--muted)}
.sum .total{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;font:700 clamp(34px,3.6vw,52px)/1 var(--f-m);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.sum .total small{font:600 16px/1 var(--f-t);color:var(--muted)}
.sum .total .rub{color:var(--rec)}
.sum .term{color:var(--amber);font-weight:700}
.sum ul{list-style:none;margin:18px 0 22px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:14.5px;color:#d3c9b8}
.sum li{display:flex;justify-content:space-between;gap:12px}
.sum li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--paper)}
.sum .btn{width:100%;justify-content:center}
.sum .note{font-size:13px;color:var(--muted2);margin-top:12px}
.calc-pane[hidden]{display:none}

/* ---------- отзывы ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q{border-left:2px solid var(--rec);padding:4px 0 4px 22px}
.q p{font-size:16.5px}
.q footer{margin-top:14px;font-size:14px;color:var(--muted)}
.q footer b{display:block;color:var(--text);font-size:15px}

/* ---------- титры (команда) ---------- */
.credits{max-width:760px;margin:0 auto;text-align:center}
.credits .rows{display:grid;gap:12px;margin-top:36px}
.credits .r{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:baseline}
.credits .r span:first-child{text-align:right;font:500 12px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.credits .r span:last-child{text-align:left;font-weight:700;font-size:19px}
.credits h2{font-size:clamp(26px,3vw,40px)}

/* ---------- заявка ---------- */
.order{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px)}
.order h2{font-size:clamp(28px,3.6vw,50px)}
.order .lead{color:var(--muted);margin-top:18px;max-width:46ch}
.contacts{margin-top:32px;display:grid;gap:14px}
.contacts a,.contacts div{display:flex;align-items:center;gap:14px;font-weight:700}
.contacts svg{width:22px;height:22px;flex:none;stroke:var(--amber);fill:none;stroke-width:1.7}
.contacts small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.form{display:grid;gap:14px;background:var(--ink2);border:1px solid var(--line);padding:clamp(20px,3vw,36px)}
.form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.form input[type=text],.form input[type=tel],.form textarea{width:100%;background:var(--ink);border:1px solid var(--line2);padding:14px 16px;font-size:16px;border-radius:2px;outline:none;transition:border-color .2s}
.form textarea{min-height:120px;resize:vertical;line-height:1.45}
.form input:focus,.form textarea:focus{border-color:var(--amber)}
.form .agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}
.form .agree input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--rec)}
.form .btn{justify-content:center}
.form .err{color:var(--rec2);font-size:13px;min-height:18px}
.form .done{display:none;text-align:center;padding:40px 10px}
.form .done h3{font-size:24px;margin:14px 0 8px}
.form .done p{color:var(--muted)}
.form.sent>*:not(.done){display:none}
.form.sent .done{display:block}
.form.flashy{animation:glow 1.4s var(--ease)}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,75,43,.0)}25%{box-shadow:0 0 0 3px rgba(255,75,43,.8)}100%{box-shadow:0 0 0 0 rgba(255,75,43,0)}}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--line);padding:36px 0 40px;color:var(--muted);font-size:14px}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.ftr .logo{color:var(--text)}
.ftr nav{display:flex;gap:22px;flex-wrap:wrap}
.ftr nav a:hover{color:var(--text)}

/* ---------- страницы услуг ---------- */
.deliv{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.deliv div{border-top:2px solid var(--rec);padding-top:16px}
.deliv b{display:block;font:700 18px/1.3 var(--f-t);margin-bottom:6px}
.deliv p{font-size:15px;color:var(--muted)}
.deliv .ratio{display:block;margin-bottom:14px;border:1.5px solid var(--line2);height:46px}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pk article{border:1px solid var(--line);background:var(--ink2);padding:28px;display:flex;flex-direction:column;gap:14px}
.pk article.hot{border-color:var(--rec);position:relative}
.pk article.hot::before{content:"берут чаще";position:absolute;top:-11px;left:24px;background:var(--rec);color:#fff;font:600 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px}
.pk h3{font-size:20px}
.pk .p{font:700 30px/1 var(--f-d)}
.pk .p small{font:600 14px/1 var(--f-t);color:var(--muted)}
.pk ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:#d6cdbd}
.pk li{padding-left:20px;position:relative}
.pk li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--amber)}
.pk .btn{margin-top:auto;justify-content:center}
.price-tbl{width:100%;border-collapse:collapse;max-width:880px}
.price-tbl td{padding:14px 0;border-bottom:1px solid rgba(26,22,17,.14);font-size:16px;vertical-align:baseline}
.price-tbl td:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:24px}
.price-tbl small{display:block;color:#6d6354;font-size:14px}
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 28px/1 var(--f-t);color:var(--rec);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:70ch}
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.reel{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:6px solid #1d1913;background:#000}
.reel img{width:100%;height:100%;object-fit:cover}
.reel .ov{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);font-size:13px;color:#fff}
.reel .ov b{display:block;font:700 18px/1.1 var(--f-d)}
.reel .views{position:absolute;top:12px;left:12px;font:600 12px/1 var(--f-m);color:#fff;display:flex;gap:6px;align-items:center;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.reel .views svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
.month{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.month div{padding:26px 24px 26px 0;border-bottom:1px solid var(--line)}
.month div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.month b{display:block;font:700 34px/1 var(--f-d);color:var(--amber);margin-bottom:10px}
.month span{font-weight:700}
.month p{font-size:15px;color:var(--muted);margin-top:4px}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .nav{gap:18px}.hdr-tel{display:none}
  .svc-mini{grid-template-columns:1fr 1fr}
  .svc-mini div:nth-child(3){padding-left:0;border-left:0}
  .deliv{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav,.hdr>.btn{display:none}
  .burger{display:block}
  .sec-head{grid-template-columns:1fr}
  .svc-grid,.calc,.order,.quotes,.pk{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .sum{position:static}
  .reels{grid-template-columns:1fr 1fr}
  .month{grid-template-columns:1fr 1fr}
  .month div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .month div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .hexes{flex-wrap:wrap;gap:0 4px;max-width:640px;margin:0 auto}
}
@media (max-width:600px){
  body{font-size:16px}
  .hud.h-tr .hide-m{display:none}
  .hud.h-tl{left:30px}.hud.h-tr{right:30px}.hud.h-br{right:30px}
  .vf{inset:calc(var(--hdr) + 8px) 12px 14px}
  .hero-body{padding-bottom:48px}
  .glass{max-width:none}
  .glass::before{left:-40px;right:-40px;top:0;bottom:-40px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent);background:rgba(14,12,10,.32)}
  .hero.light .glass::before{background:rgba(250,247,240,.55)}
  .hero h1{font-size:clamp(28px,8.4vw,36px)}
  .hero-bg{background-position:var(--mpos)!important}
  .price-line{font-size:14px;gap:4px 16px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hexes{display:grid;grid-template-columns:repeat(2,minmax(0,160px));justify-content:center;gap:0 6px;padding-bottom:110px}
  .hex{width:100%}
  .hex:nth-child(even){transform:translateY(52%)}
  .hex:nth-child(5){grid-column:1}
  .svc-mini{grid-template-columns:1fr}
  .svc-mini div,.svc-mini div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
  .svc .body{padding:22px 20px 24px}
  .cases{grid-template-columns:1fr}
  .case{transition-delay:0ms}
  .case .res{transform:none}
  .steps{grid-template-columns:1fr}
  .tl{padding:12px}
  .tl-ruler{padding-left:40px;font-size:10px}
  .tl-track{grid-template-columns:40px 1fr}
  .clip{font-size:0;padding:0}
  .playhead{left:calc(12px + 40px)}
  .row2{grid-template-columns:1fr}
  .sum{padding:22px 20px}
  .credits .r{gap:14px}
  .credits .r span:last-child{font-size:16px}
  .deliv{grid-template-columns:1fr}
  .reels{gap:14px}
  .month{grid-template-columns:1fr}
  .month div,.month div:nth-child(even){padding-left:0;border-left:0}
  .ftr .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .hero-bg{animation:none;transform:none}
  .grain{animation:none}
  .rv,.case{opacity:1;transform:none}
  .hex .iris{transform:none}
}

/* =====================================================================
   ГЛУБИНА (19.10): слои параллакса, свет прожектора, ближний план,
   многослойные тени, наклон карточек. Механику не трогает.
   ===================================================================== */
:root{
  --edge:inset 0 1px 0 rgba(255,238,214,.11);
  --sh:0 1px 1px rgba(0,0,0,.28),0 4px 10px -2px rgba(0,0,0,.30),0 18px 36px -12px rgba(0,0,0,.50),0 44px 80px -30px rgba(0,0,0,.60);
  --sh-up:0 2px 2px rgba(0,0,0,.28),0 10px 20px -4px rgba(0,0,0,.34),0 30px 56px -14px rgba(0,0,0,.58),0 70px 110px -36px rgba(0,0,0,.70);
  --sh-paper:0 1px 1px rgba(70,46,20,.10),0 6px 14px -4px rgba(70,46,20,.16),0 26px 50px -18px rgba(70,46,20,.30);
  --stack-c:12px -12px 0 -6px #2b251d,22px -22px 0 -11px #1d1a15;
  --stack-r:14px 12px 0 -6px #27221b,26px 22px 0 -12px #1b1813;
}

/* --- слои первого экрана --- */
.hero-body,.vf,.beams,.bokeh{will-change:transform}
.beams{position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.beams i{position:absolute;top:-30%;width:26%;height:150%;transform-origin:50% 0;
  background:linear-gradient(90deg,transparent,rgba(255,214,150,.13) 30%,rgba(255,232,190,.23) 50%,rgba(255,214,150,.13) 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 45%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 45%,transparent 88%);
  animation:sway 14s ease-in-out infinite alternate}
.beams i:nth-child(1){right:14%;transform:rotate(24deg)}
.beams i:nth-child(2){right:30%;width:12%;transform:rotate(31deg);animation-duration:18s;animation-delay:-6s;opacity:.7}
.beams i:nth-child(3){right:2%;width:18%;transform:rotate(17deg);animation-duration:22s;animation-delay:-11s;opacity:.55}
@keyframes sway{0%{rotate:-1.6deg}100%{rotate:2deg}}
/* мягкое световое пятно «прожектора» на сцене */
.beams::after{content:"";position:absolute;right:8%;top:22%;width:46%;height:56%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,140,.16),rgba(255,206,140,.05) 55%,transparent)}
.hero.light .beams{mix-blend-mode:soft-light;opacity:1}
.hero.light .beams i{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 40%,rgba(255,250,235,.55) 50%,rgba(255,255,255,.35) 60%,transparent)}
.hero.light .beams i:nth-child(1){right:auto;left:18%;transform:rotate(-24deg)}
.hero.light .beams i:nth-child(2){right:auto;left:34%;transform:rotate(-30deg)}
.hero.light .beams i:nth-child(3){right:auto;left:4%;transform:rotate(-16deg)}
.hero.light .beams::after{left:4%;right:auto;background:radial-gradient(closest-side,rgba(255,250,235,.45),transparent)}
/* глубина резкости: ближний план — размытые блики у края кадра */
.bokeh{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,160,.36),rgba(255,190,120,.14) 55%,transparent);opacity:.85}
.bokeh i:nth-child(1){width:min(34vw,420px);aspect-ratio:1;right:-9vw;top:6vh}
.bokeh i:nth-child(2){width:min(14vw,170px);aspect-ratio:1;right:16vw;top:-4vh;opacity:.55}
.bokeh i:nth-child(3){width:min(20vw,250px);aspect-ratio:1;right:4vw;bottom:-8vh;background:radial-gradient(closest-side,rgba(255,110,80,.26),rgba(255,90,60,.08) 60%,transparent);opacity:.7}
.bokeh i:nth-child(4){width:min(9vw,110px);aspect-ratio:1;left:-2vw;top:16vh;opacity:.4}
.hero.light .bokeh{mix-blend-mode:normal}
.hero.light .bokeh i{background:radial-gradient(closest-side,rgba(255,252,244,.55),rgba(255,248,236,.18) 60%,transparent)}
.hero.light .bokeh i:nth-child(3){background:radial-gradient(closest-side,rgba(255,176,150,.30),transparent)}
/* виньетка объектива — глубина к краям */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 0 18vw rgba(5,4,3,.55)}
.hero.light::after{box-shadow:inset 0 0 16vw rgba(90,70,40,.16)}

/* --- свет на тёмных секциях --- */
#services,#cases,#reels,#packs,#tariffs,#order,#deliv{isolation:isolate}
#services::before,#cases::before,#reels::before,#packs::before,#tariffs::before,#order::before,#deliv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 42% at 78% 12%,rgba(242,176,53,.07),transparent 70%),radial-gradient(40% 50% at 8% 70%,rgba(255,75,43,.045),transparent 70%)}
#cases::before,#reels::before{background:radial-gradient(60% 46% at 50% 0%,rgba(255,220,170,.08),transparent 72%),radial-gradient(40% 40% at 90% 90%,rgba(255,75,43,.05),transparent 70%)}
.hex .shape{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* --- тени и кромка --- */
.svc{box-shadow:var(--edge),var(--sh);transition:border-color .3s,box-shadow .5s var(--ease)}
.svc .ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,240,220,.16),inset 0 -40px 60px -30px rgba(0,0,0,.45)}
.case .frame{box-shadow:var(--stack-c),var(--sh);transition:box-shadow .5s var(--ease)}
.case .frame::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,240,220,.20),inset 0 0 0 1px rgba(255,240,220,.05)}
.reel{border-color:#2c261e #1d1913 #14110d;box-shadow:var(--stack-r),var(--sh)}
.reel::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,240,220,.22)}
.reel .views,.reel .ov{z-index:3}
.pk article{position:relative;box-shadow:var(--edge),var(--sh);transition:box-shadow .5s var(--ease),border-color .3s}
.pk article.hot{box-shadow:var(--edge),0 0 0 1px rgba(255,75,43,.25),0 30px 70px -30px rgba(255,75,43,.30),var(--sh)}
.form{box-shadow:var(--edge),var(--sh)}
.tl{box-shadow:var(--edge),var(--sh)}
.sum{box-shadow:inset 0 1px 0 rgba(255,238,214,.12),var(--sh-paper),0 50px 90px -40px rgba(40,24,8,.45)}
.chip span{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(70,46,20,.08)}
.chip input:checked+span{box-shadow:inset 0 1px 0 rgba(255,238,214,.14),0 6px 14px -6px rgba(26,22,17,.5)}
.stepper{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(70,46,20,.08)}
.btn-rec{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -6px rgba(255,75,43,.65),0 18px 34px -18px rgba(255,75,43,.55)}
.hdr .btn-rec{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px -4px rgba(255,75,43,.55)}

/* --- наклон за курсором (только ПК) --- */
.tilt::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,236,206,.20),rgba(255,236,206,.05) 30%,transparent 58%)}
.reel.tilt::after{border-radius:16px}
.tilt.is-tilting::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .tilt.rv{transform:perspective(1100px) translate3d(0,24px,0) rotateX(0deg) rotateY(0deg)}
  .tilt.rv.in{transform:perspective(1100px) translate3d(0,var(--lift,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .case .frame.tilt{transform:perspective(900px) translate3d(0,var(--lift,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .tilt.is-tilting{transition:transform .16s linear,box-shadow .45s var(--ease),border-color .3s,opacity .8s!important;transition-delay:0s!important;--lift:-6px}
  .tilt.tilt-back{transition:transform .8s var(--ease),box-shadow .6s var(--ease),border-color .3s,opacity .8s!important;transition-delay:0s!important}
  .svc.is-tilting,.pk article.is-tilting{box-shadow:var(--edge),var(--sh-up)}
  .pk article.hot.is-tilting{box-shadow:var(--edge),0 0 0 1px rgba(255,75,43,.3),0 40px 80px -30px rgba(255,75,43,.38),var(--sh-up)}
  .case .frame.is-tilting{box-shadow:var(--stack-c),var(--sh-up)}
  .reel.is-tilting{box-shadow:var(--stack-r),var(--sh-up)}
}

@media (max-width:600px){
  :root{--stack-c:8px -8px 0 -4px #2b251d,16px -16px 0 -8px #1d1a15;--stack-r:8px 8px 0 -4px #27221b,15px 15px 0 -8px #1b1813}
  .beams{opacity:.7}
  .hero-par{inset:-5% 0}
  .bokeh i:nth-child(1){width:56vw;right:-24vw;top:8vh}
  .bokeh i:nth-child(2){width:22vw;right:20vw;top:4vh}
  .bokeh i:nth-child(3),.bokeh i:nth-child(4){display:none}
  .hero::after{box-shadow:inset 0 0 28vw rgba(5,4,3,.5)}
}
@media (prefers-reduced-motion:reduce){
  .beams i{animation:none}
  .tilt.rv,.tilt.rv.in,.case .frame.tilt{transform:none!important}
  .hero-par,.hero-body,.vf,.beams,.bokeh{transform:none!important}
}