/* Главная v4: огромная типографика, ленты, «под лупой», оранжевая витрина, меню, галерея.
   Правила: фото и текст живут в разных колонках сетки (не перекрываются), фото не растягиваются больше исходного размера,
   анимации — только transform/opacity. */
body.home .hdr{background:transparent;border-color:transparent}
body.home .hdr.solid{background:rgba(9,9,10,.82)}
.btn-dk{background:#0B0B0C;color:var(--ivory)}.btn-dk:hover{background:#000;transform:translateY(-2px)}
.tag.dk{color:#2a1206}.tag.dk::before{background:#0B0B0C;box-shadow:none}
.home .tag{font-size:13px}

/* HERO */
.h3{position:relative;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;background:#09090A}
.h3-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(40% 50% at 50% 46%,rgba(255,91,31,.30),rgba(255,91,31,0) 70%),radial-gradient(80% 60% at 50% 120%,#1a0d07,transparent 70%)}
.h3-word{position:absolute;left:0;right:0;top:calc(var(--hdr) + 2vh);display:grid;justify-items:center;pointer-events:none}
.h3-word span{display:block;font:800 clamp(110px,19.5vw,340px)/.82 var(--D);letter-spacing:-.01em;color:var(--ivory);text-transform:uppercase;will-change:transform}
.h3-word span+span{color:transparent;-webkit-text-stroke:2px rgba(244,241,235,.85)}
.h3-devw{position:absolute;left:50%;top:calc(var(--hdr) + 5vh);bottom:170px;z-index:1;transform:translateX(-50%);display:flex;justify-content:center;will-change:transform}
.h3-dev{height:100%;max-height:760px;width:auto;max-width:none;transform:rotate(-8deg);filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
.h3-copy{position:absolute;left:0;right:0;bottom:178px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:20px}
.h3-l{max-width:380px;display:grid;gap:14px}
.h3-l p{color:#DEDBD4;font:500 17px/1.5 var(--F)}
.h3-r{display:flex;gap:10px}
/* две ленты идут параллельно и не пересекаются — текст на них читается целиком */
.ribs{position:absolute;left:-6%;right:-6%;bottom:30px;z-index:4;transform:rotate(-2.4deg);box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
.rib{overflow:hidden;padding:13px 0}
.rib .tr{display:flex;width:max-content;gap:26px;align-items:center;animation:mq 34s linear infinite;will-change:transform}
.rib span{font:700 clamp(22px,2.3vw,34px)/1 var(--D);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.rib i{font-style:normal;font-size:.7em}
.rib.r1{background:var(--acc);color:#140802}
.rib.r2{background:#F4F1EB;color:#0B0B0C}
.rib.r2 .tr{animation-direction:reverse;animation-duration:42s}
.rib.r2 i{color:var(--acc)}

/* МАНИФЕСТ */
.mf{position:relative;background:#F2EFE9;color:#0B0B0C;padding:clamp(90px,12vw,180px) 0 clamp(70px,9vw,130px);overflow:hidden}
.mf-t{font:800 clamp(42px,6.4vw,108px)/.95 var(--D);text-transform:uppercase;letter-spacing:-.005em;max-width:1300px}
.mf-t span,.mf-t em{display:inline-block;opacity:.16;transition:opacity .4s}
.mf-t em{font-style:normal;color:#E04A10}
.mf-t .on{opacity:1}
.mf-k{display:flex;align-items:center;gap:clamp(28px,6vw,90px);margin-top:clamp(44px,6vw,80px);flex-wrap:wrap}
.mf-k b{display:block;font:800 clamp(60px,7.4vw,118px)/.9 var(--D);color:#0B0B0C}
.mf-k span{font:600 14px var(--F);letter-spacing:.08em;text-transform:uppercase;color:#55555B}
.mf-badge{position:relative;margin-left:auto;width:clamp(110px,11vw,160px);aspect-ratio:1;display:grid;place-items:center;flex:none}
.mf-badge svg{position:absolute;inset:0;animation:spin 18s linear infinite}
.mf-badge text{font:700 14px var(--F);letter-spacing:.16em;fill:#0B0B0C}
.mf-badge>span{width:46%;aspect-ratio:1;border-radius:14px;background:var(--acc);display:grid;place-items:center;font:800 clamp(24px,2.4vw,34px) var(--D);color:#0B0B0C;letter-spacing:0}

/* ПОД ЛУПОЙ: заголовок / сцена (подписи слева и справа, устройство в своей колонке) / кнопка */
.fall{position:relative;background:#09090A;height:320vh}
.fall-st{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:calc(var(--hdr) + 3vh) 0 4vh}
.fall-st::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(34% 46% at 50% 58%,rgba(255,91,31,.2),transparent 70%)}
.fall-h{width:100%;position:relative;z-index:3}
.fall-h h2{margin-top:14px;font:800 clamp(42px,5.6vw,92px)/.92 var(--D);text-transform:uppercase;letter-spacing:-.005em}
.fall-stage{flex:1;min-height:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(24px,4vw,70px);margin-top:2vh}
.fall-dw{height:100%;min-height:0;display:flex;justify-content:center}
.fall-dev{height:100%;max-height:720px;width:auto;max-width:none;filter:drop-shadow(0 50px 60px rgba(0,0,0,.7));will-change:transform,opacity}
.co-col{display:grid;gap:clamp(22px,5vh,54px);align-content:center}
.co-col.l{justify-items:end;text-align:right}
.co{display:grid;gap:6px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);position:relative}
.co.on{opacity:1;transform:none}
.co b{font:800 clamp(30px,3.2vw,50px)/1 var(--D);color:var(--ivory);text-transform:uppercase}
.co span{font:500 15px/1.35 var(--F);color:#A9AAB2}
.co::after{content:"";position:absolute;top:.95em;width:clamp(20px,3vw,56px);height:2px;background:var(--acc)}
.co-col.l .co::after{left:calc(100% + 14px)}
.co-col.r .co::after{right:calc(100% + 14px)}
.fall-cta{display:flex;justify-content:center;margin-top:2vh;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease)}
.fall-cta.on{opacity:1;transform:none}

/* ОРАНЖЕВАЯ ВИТРИНА: карточка слева, товар справа — каждый в своей колонке */
.hx{position:relative;background:var(--acc);color:#0B0B0C}
.hx-st{position:relative;height:100svh;overflow:hidden}
.hx-h{position:absolute;left:var(--gL);right:var(--gR);top:calc(var(--hdr) + 2vh);z-index:3;display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none}
.hx-h h2{margin-top:10px;font:800 clamp(54px,7vw,116px)/.86 var(--D);color:#0B0B0C;letter-spacing:-.005em}
.hx-n{display:flex;align-items:baseline;gap:8px}.hx-n b{font:800 clamp(44px,4.4vw,72px)/1 var(--D);color:#0B0B0C}.hx-n span{font:700 17px var(--F);color:#3a1606}
.hx-tr{position:absolute;inset:0;display:flex;will-change:transform}
.sl{position:relative;flex:none;width:100vw;height:100%;overflow:hidden}
.sl-word{position:absolute;left:66%;top:57%;transform:translate(-50%,-50%);font:800 clamp(170px,30vw,520px)/.8 var(--D);color:transparent;-webkit-text-stroke:3px rgba(11,11,12,.85);white-space:nowrap;pointer-events:none;letter-spacing:-.01em;will-change:transform}
.sl-in{position:absolute;top:calc(var(--hdr) + 2vh + clamp(110px,10vw,150px));bottom:7vh;left:var(--gL);right:var(--gR);display:grid;grid-template-columns:minmax(320px,430px) 1fr;grid-template-rows:100%;gap:clamp(24px,5vw,80px);align-items:center;max-width:1400px;margin:0 auto}
.sl-media{position:relative;z-index:2;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.sl-dev{height:100%;max-height:640px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 36px 46px rgba(60,20,0,.5));will-change:transform}
.sl-ph{margin:0;width:100%;max-width:880px;display:grid;gap:10px}
.sl-ph img{width:100%;height:auto;aspect-ratio:1920/990;object-fit:cover;border-radius:24px;box-shadow:0 40px 80px -36px rgba(60,20,0,.75)}
.sl-ph figcaption{font:600 13px var(--F);color:#3a1606}
.sl-info{position:relative;z-index:3;display:grid;gap:14px;background:#F4F1EB;color:#0B0B0C;border-radius:24px;padding:28px;box-shadow:0 30px 60px -30px rgba(60,20,0,.55)}
.sl-br{font:700 13px var(--F);letter-spacing:.14em;color:#D9480F}
.sl-info h3{font:800 clamp(40px,3.6vw,56px)/.92 var(--D);color:#0B0B0C;letter-spacing:0;text-transform:uppercase}
.sl-info p{font:500 16px/1.5 var(--F);color:#36363B}
.sl-sp{display:flex;gap:6px;flex-wrap:wrap}.sl-sp span{font:700 13px var(--F);padding:7px 11px;border-radius:999px;background:#E7E1D6;color:#0B0B0C}
.sl-row{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:6px}
.sl-pr{display:grid;font:800 34px/1 var(--D);color:#0B0B0C}.sl-pr small{font:600 13px var(--F);color:#6a6a70;margin-bottom:4px}
.hx-bar{position:absolute;left:var(--gL);right:var(--gR);bottom:2.6vh;height:3px;background:rgba(0,0,0,.15);z-index:3}
.hx-bar i{display:block;height:100%;background:#0B0B0C;transform:scaleX(0);transform-origin:left}

/* МЕНЮ-СПИСОК */
.mn{position:relative;background:#09090A;padding:clamp(80px,10vw,150px) 0;overflow:hidden}
.mlist{margin-top:30px;border-top:1px solid var(--line2)}
.mi{position:relative;z-index:2;display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:16px;padding:clamp(10px,1.5vw,20px) 0;border-bottom:1px solid var(--line2)}
.mi .n{font:600 15px var(--F);color:var(--muted)}
.mi .t{font:800 clamp(40px,6.6vw,112px)/.92 var(--D);text-transform:uppercase;color:var(--ivory);letter-spacing:-.005em;transition:color .3s,transform .5s var(--ease)}
.mi .ar{font:400 clamp(26px,3vw,46px) var(--F);color:var(--muted);transition:transform .4s var(--ease),color .3s}
.mi:hover .t{color:var(--acc);transform:translateX(14px)}
.mi:hover .ar{color:var(--acc);transform:translateX(6px)}
.mn-pv{position:fixed;left:0;top:0;z-index:1;height:300px;width:auto;max-width:240px;object-fit:contain;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .3s,transform .4s var(--ease);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.mn-pv.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ГАЛЕРЕЯ: подписи под фото, без наклеек поверх */
.gl{position:relative;background:#09090A;padding:20px 0 50px;overflow:hidden}
.gl-hd{display:grid;justify-items:start;gap:14px;margin-bottom:28px}
.gl-hd h2{font:800 clamp(44px,5vw,84px)/.9 var(--D);text-transform:uppercase}
.gl-tr{display:flex;gap:clamp(14px,2vw,26px);padding:0 var(--gL);will-change:transform}
.gl figure{flex:none;width:min(56vw,820px);margin:0;display:grid;gap:14px}
.gl-im{border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:#141416}
.gl img{width:100%;height:100%;object-fit:cover}
.gl figcaption{font:600 16px var(--F);color:var(--ivory)}
.gl figcaption b{color:var(--acc2);margin-right:6px;letter-spacing:.06em}

/* шапка: вкладки по центру */
.hdr .wrap{position:relative}
.nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
@media (max-width:1100px){.nav{display:none}}

@media (max-width:1100px) and (min-width:761px){
  .sl-in{grid-template-columns:minmax(300px,380px) 1fr}
  .sl-info{padding:22px}.sl-info p{font-size:15px}
}
@media (max-width:760px){
  .home .tag{font-size:12px}
  .h3{min-height:620px}
  .h3-word{top:calc(var(--hdr) + 3vh)}
  .h3-word span{font-size:26vw}
  .h3-devw{top:26%;bottom:auto;height:34svh}
  .h3-dev{transform:rotate(-8deg)}
  .h3-copy{flex-direction:column;align-items:flex-start;gap:16px;bottom:136px}
  .h3-l p{font-size:16px}
  .ribs{bottom:24px}
  .rib{padding:10px 0}
  .mf-badge{width:92px}
  .mf-k{gap:22px}
  .fall{height:280vh}
  .fall-stage{grid-template-columns:auto 1fr;grid-template-areas:"dev l" "dev r";gap:18px 22px;align-content:center}
  .fall-dw{grid-area:dev;height:min(60svh,480px);align-self:center}
  .co-col{gap:16px}
  .co-col.l{grid-area:l;justify-items:start;text-align:left;align-self:end}
  .co-col.r{grid-area:r;align-self:start}
  .co::after{display:none}
  .co b{font-size:30px}.co span{font-size:14px}
  .hx-h .tag{display:none}.hx-h h2{font-size:58px}.hx-n b{font-size:40px}
  .sl-word{left:50%;top:34%;-webkit-text-stroke:2px rgba(11,11,12,.85);font-size:52vw}
  .sl-in{top:calc(var(--hdr) + 84px);bottom:5vh;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:16px}
  .sl-media{order:-1}
  .sl-dev{max-height:100%}
  .sl-info{padding:18px;gap:10px;border-radius:20px}
  .sl-info h3{font-size:38px}
  .sl-info p{font-size:14px}
  .sl-sp span{font-size:12px;padding:6px 9px}
  .sl-pr{font-size:28px}
  .sl-ph figcaption{display:none}
  .mi{grid-template-columns:36px 1fr auto}
  .mn-pv{display:none}
  .gl figure{width:84vw}
  .gl figcaption{font-size:14px}
}
@media (max-width:760px) and (max-height:700px){.sl-info p{display:none}}
@media (prefers-reduced-motion:reduce){
  .fall{height:auto}.fall-st{position:relative;height:auto;min-height:100svh}.fall-dw{height:60svh}.co,.fall-cta{opacity:1;transform:none}
  .mf-t span,.mf-t em{opacity:1}
  .hx-st{height:auto}.hx-tr{position:relative;flex-direction:column}.sl{width:100%;height:100svh}
}
