/* =============================================================
   PULP — cold-pressed juice, Kyiv
   Demo template for airweb.pro
   Layout system mirrors the reference: 8-col grid, 1680 container,
   26em display type, sticky tracks, 320vh hero.
   ============================================================= */

:root{
  --bg:#f3f3f3;
  --panel:#e2e2e2;
  --gray:#cecece;
  --ink:#000;
  --muted:#868686;
  --line:rgba(0,0,0,.16);
  --acid:#ff4d00;
  --lime:#c8ff00;
  --ease:cubic-bezier(.16,1,.3,1);
  --soft:cubic-bezier(.22,.61,.28,1);
  --pad:30px;
}
html[data-theme="dark"]{
  --bg:#0d0d0d;
  --panel:#151515;
  --gray:#1e1e1e;
  --ink:#f3f3f3;
  --muted:#6d6d6d;
  --line:rgba(243,243,243,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:Switzer,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.4;letter-spacing:-.03em;
  -webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease),color .6s var(--ease);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acid);color:#fff}

/* ---------- container / grid ---------- */
.container{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--pad);position:relative}
.grid8{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:3em;align-items:start}
.section{position:relative;z-index:2;width:100%}
.divider{height:2px;background:var(--ink);width:100%;max-width:1680px;margin:8em auto}

/* ---------- type scale (reference: 26em / 18em / 12em / 5em / 3.2em) ---------- */
.t-xxxl{font-size:clamp(90px,26vw,416px);font-weight:500;line-height:.85;letter-spacing:-.035em}
.t-xxl {font-size:clamp(60px,13.2vw,288px);font-weight:500;line-height:.85;letter-spacing:-.035em}
.t-xl  {font-size:clamp(42px,8.8vw,192px);font-weight:400;line-height:.9;letter-spacing:-.035em}
.t-l   {font-size:clamp(30px,3.7vw,80px);font-weight:400;line-height:1.2;letter-spacing:-.03em}
.t-m   {font-size:clamp(24px,2.4vw,51px);font-weight:400;line-height:1.16;letter-spacing:-.02em}
.t-p   {font-size:clamp(16px,1.15vw,20px);line-height:1.4}
.t-xs  {font-size:15px;opacity:.65}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;font-weight:400}
.dim{color:var(--muted)}
.acid{color:var(--acid)}
.upper{text-transform:uppercase}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:9999;background:var(--ink);color:var(--bg);
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)}
#pre .mark{font-size:clamp(64px,17vw,260px);font-weight:500;line-height:.8;letter-spacing:-.05em}
#pre .cnt{font-size:clamp(40px,7vw,110px);font-weight:500;letter-spacing:-.04em;color:var(--acid);font-variant-numeric:tabular-nums}
#pre .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lime)}
body.ready #pre{transform:translateY(-101%);transition:transform 1s var(--ease) .1s;pointer-events:none}

/* ---------- cursor ---------- */
#cur{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:#fff;
  pointer-events:none;z-index:9000;mix-blend-mode:difference;transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease)}
#cur.on{width:78px;height:78px}
@media (hover:none){#cur{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:18px var(--pad);
  display:flex;align-items:center;justify-content:space-between;color:var(--ink);
  transition:color .45s var(--ease)}
/* пока герой-фото закрывает верх экрана — навигация становится белой */
body.nav-light .nav{color:#fff}
body.nav-light .nav .dd-list{color:var(--ink)}
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0));height:130px;bottom:auto;
  opacity:0;transition:opacity .45s var(--ease)}
body.nav-light .nav::before{opacity:1}
.nav > *{position:relative;z-index:1}
.nav .brand{font-weight:600;font-size:19px;letter-spacing:-.05em}
.nav .menu{display:flex;align-items:center;gap:26px}
.nav .menu{font-size:14px;font-weight:500}
.nav .menu > a,.nav .dd > button{position:relative;display:block;height:17px;overflow:hidden;
  font:inherit;letter-spacing:.06em;text-transform:uppercase}
.nav .menu span{display:block;transition:transform .45s var(--ease)}
.nav .menu span::after{content:attr(data-t);display:block;color:var(--acid)}
.nav .menu a:hover span,.nav .dd:hover button span,.nav .dd.open button span{transform:translateY(-17px)}
.nav .dd{position:relative}
/* невидимый «мост» под кнопкой: курсор доходит до панели, не теряя ховер */
.dd{padding-bottom:22px;margin-bottom:-22px}
.dd-list{position:absolute;top:calc(100% - 2px);left:-26px;min-width:520px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:4px 40px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  box-shadow:0 26px 70px rgba(0,0,0,.13)}
.dd:hover .dd-list,.dd.open .dd-list{opacity:1;visibility:visible;transform:none}
.dd-list a{padding:10px 0;font-size:14px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;color:var(--ink);opacity:.68;
  transition:opacity .3s,transform .35s var(--ease),color .3s}
.dd-list a:hover{opacity:1;transform:translateX(6px);color:var(--acid)}
.dd-list a[aria-current="page"]{opacity:1;color:var(--acid)}
@media(max-width:1200px){.dd-list{min-width:440px;left:-20px}}
.burger{display:none;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger i{display:block;width:14px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
body.menu .burger i:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-2.75px) rotate(-45deg)}
@media(max-width:991px){.nav .menu,.nav-hours{display:none}.burger{display:flex}}

#mob{position:fixed;inset:0;z-index:480;background:var(--acid);color:#fff;padding:110px var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:center;clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease)}
body.menu #mob{clip-path:inset(0 0 0 0)}
#mob a{font-size:clamp(34px,10vw,74px);font-weight:500;line-height:1.08;letter-spacing:-.04em;text-transform:uppercase}
#mob .mob-foot{margin-top:36px;opacity:.85;display:grid;gap:4px}

/* ---------- theme toggle (70x40 pill, bottom right — as in reference) ---------- */
.toggle{position:fixed;right:20px;bottom:20px;z-index:600;width:70px;height:40px;border-radius:200px;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);display:flex;align-items:center;padding:0 2px}
.toggle i{width:32px;height:32px;border-radius:100px;background:#111;transition:transform .5s var(--ease),background .5s}
html[data-theme="dark"] .toggle{background:#1e1e1e}
html[data-theme="dark"] .toggle i{transform:translateX(32px);background:var(--lime)}

/* =============================================================
   HERO — track 320vh, sticky 100vh, dash expands into the photo
   ============================================================= */
.track{min-height:200vh;position:relative;top:0;z-index:8}
.sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ink);overflow:hidden;width:320px;height:48px;z-index:1;
  will-change:width,height,left,top}
.dash img{width:100%;height:100%;object-fit:cover;transform:scale(2);will-change:transform;
  filter:saturate(1.65) contrast(1.08)}
.hero-heading{position:relative;z-index:2;display:flex;justify-content:center;
  gap:26em;white-space:nowrap;pointer-events:none}
.hero-heading .w{font-size:clamp(90px,29vw,416px);font-weight:500;line-height:.85;letter-spacing:-.035em}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--pad);padding-right:110px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  color:var(--ink);transition:color .45s var(--ease)}
body.nav-light .hero-foot{color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.35)}
.scrolldot{width:20px;height:20px;border-radius:50%;background:currentColor;animation:bob 1.7s infinite ease-in-out}
@keyframes bob{50%{transform:translateY(7px)}}
@media(max-width:991px){
  .hero-heading{gap:5em}
  .dash{width:180px;height:30px}
}

/* the sheet that scrolls over the hero */
.sheet{position:relative;z-index:12;background:var(--panel);min-height:100vh}

/* ---------- intro grid ---------- */
.intro{padding-top:6em}
.intro .c1{grid-area:1/1/2/2}
.intro .c2{grid-area:1/3/2/5}
.intro .c3{grid-area:1/5/2/7}
.intro .c4{grid-area:1/7/2/9}
.intro-lead{padding-top:5em;max-width:1500px}
@media(max-width:991px){
  .grid8{grid-template-columns:1fr 1fr;grid-gap:2em}
  .intro .c1,.intro .c2,.intro .c3,.intro .c4{grid-area:auto}
}

/* ---------- sticky giant word ---------- */
.bigword h2{font-size:clamp(44px,12.4vw,236px);line-height:.9}
.bigword{position:sticky;top:0;z-index:4;min-height:100svh;overflow:hidden;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:5em;
  width:100%;max-width:1680px;margin:0 auto;padding:4em var(--pad);text-align:center}

/* ---------- works / flavours grid ---------- */
.flip{position:relative;z-index:5;padding-top:25em;overflow:hidden;min-height:70vh}
.works{display:grid;grid-template-columns:repeat(8,1fr);grid-column-gap:3em;grid-row-gap:12em;
  padding-top:12em;padding-bottom:12em}
.w1{grid-area:1/1/2/5}
.w2{grid-area:1/6/2/9}
.w3{grid-area:2/2/3/8}
.w4{grid-area:3/1/4/5}
.w5{grid-area:3/6/4/9}
.w6{grid-area:4/2/5/8}
@media(max-width:991px){
  .flip{padding-top:6em}
  .works{grid-template-columns:1fr;grid-row-gap:4em;padding-top:5em;padding-bottom:5em}
  .w1,.w2,.w3,.w4,.w5,.w6{grid-area:auto}
}

.card{display:block;position:relative}
.stage{position:relative;width:100%;height:70vh;max-height:780px}
.stage.tall{height:80vh;max-height:900px}
.stage.short{height:52vh;max-height:620px}
/* Разлёт снимков — значения сняты с оригинала покадрово:
   верхний слой  scale(0.7)  rotate(5deg)
   нижний-левый  translate(-64px, 48px) scale(0.8) rotate(4deg)
   верхний-правый translate(96px, -96px) scale(0.8) rotate(-5deg)
   Все три стартуют одновременно, 500 мс, easeInOutCubic. Раскрытие происходит
   в основном за счёт того, что верхний снимок сильно уменьшается, а не за счёт
   больших перелётов — поэтому движение читается мягко. */
.l1,.l2,.l3{transform-origin:50% 50%;will-change:transform;
  transition:transform .5s cubic-bezier(.65,0,.35,1)}
.l1{position:relative;z-index:5;width:100%;height:100%;overflow:hidden}
.l2{position:absolute;z-index:4;inset:auto auto 0 0;width:70%;height:70%;
  background:var(--ink);overflow:hidden}
.l3{position:absolute;z-index:3;inset:0 0 auto auto;width:80%;height:80%;
  background:var(--ink);overflow:hidden}
.stage img{width:100%;height:100%;object-fit:cover;filter:saturate(1.7) contrast(1.08)}
.l2 img,.l3 img{opacity:.6}

.card:hover .l1{transform:scale(.7) rotate(5deg)}
.card:hover .l2{transform:translate(-64px,48px) scale(.8) rotate(4deg)}
.card:hover .l3{transform:translate(96px,-96px) scale(.8) rotate(-5deg)}

@media(max-width:991px){
  .card:hover .l1{transform:none}
}

.cardmeta{display:flex;justify-content:space-between;align-items:center;padding:20px 0;position:relative}
.cardmeta .n{transition:transform .5s var(--ease)}
.card:hover .cardmeta .n{transform:translateX(8px)}
@media(max-width:991px){
  .stage,.stage.tall,.stage.short{height:58vw;min-height:260px}
  .l2,.l3{display:none}
}

/* ---------- panel blocks ---------- */
.panel-gray{background:var(--gray)}
.pad-l{padding-top:8em;padding-bottom:8em}
.pad-m{padding-top:5em;padding-bottom:5em}

/* ---------- stats ---------- */
/* цифра садится в колонки 1–3, текст в 3–9 — те же дорожки, что и у шапки блока */
.stat{align-items:start}
.stat .num{font-size:clamp(60px,13.2vw,288px);font-weight:500;line-height:.85;letter-spacing:-.035em;
  color:var(--acid);margin-left:-.055em}
@media(max-width:991px){.stat{grid-row-gap:.6em}.stat .num{margin-left:0}}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2em}
.member{position:relative;min-height:400px;color:var(--ink)}
.member .ph{aspect-ratio:3/4;overflow:hidden}
.member .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.45);transition:transform 1s var(--ease)}
.member:hover .ph img{transform:scale(1.05)}
.member .nm{padding-top:14px}
.member .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:0 36px 6em;opacity:0;transition:opacity .5s var(--ease)}
.member:hover .ov{opacity:1}
.member .ov .bx{background:#dfdfdf;color:#000;padding:22px;font-size:14px;line-height:1.36}
.member .ov .view{margin-top:14px;background:var(--acid);color:#fff;border-radius:200px;padding:9px 18px}
@media(max-width:991px){.team{grid-template-columns:1fr 1fr}.member .ov{display:none}}

/* ---------- accordion ---------- */
.acc{border-top:2px solid var(--ink)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-h{display:grid;grid-template-columns:90px 1fr 44px;gap:1em;align-items:center;width:100%;
  text-align:left;padding:1.1em 0}
.acc-h .ttl{font-size:clamp(24px,3.6vw,64px);font-weight:400;line-height:1;letter-spacing:-.035em;
  text-transform:uppercase;transition:transform .55s var(--ease),color .4s}
.acc-i:hover .ttl{transform:translateX(14px);color:var(--acid)}
.acc-h .pl{justify-self:end;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .5s var(--ease),background .4s,color .4s}
.acc-i.open .pl{transform:rotate(45deg);background:var(--acid);color:#fff;border-color:transparent}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.acc-i.open .acc-b{grid-template-rows:1fr}
.acc-b > div{overflow:hidden}
.acc-in{display:grid;grid-template-columns:90px 1fr 1fr;gap:2em;padding-bottom:2.6em}
.acc-in .ph{aspect-ratio:16/10;overflow:hidden}
.acc-in .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.7)}
@media(max-width:991px){
  .acc-h{grid-template-columns:44px 1fr 34px}
  .acc-in{grid-template-columns:1fr;gap:1.2em}
}

/* ---------- tickers ---------- */
.ticker{display:flex;overflow:hidden;white-space:nowrap;width:100%}
.ticker .run{display:flex;flex:0 0 auto;align-items:center;gap:2em;padding-right:2em;
  animation:run 30s linear infinite}
.ticker.rev .run{animation-direction:reverse}
@keyframes run{to{transform:translateX(-100%)}}
.ticker.big .run > *{font-size:clamp(48px,12vw,220px);font-weight:500;line-height:1;letter-spacing:-.04em;
  text-transform:uppercase;display:flex;align-items:center;gap:2em}
.ticker.big .run > *::after{content:"✳";color:var(--acid);font-size:.42em}
.ticker.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.2em 0}
.ticker.logos .run > *{font-size:clamp(15px,1.7vw,24px);font-weight:500;text-transform:uppercase;
  letter-spacing:-.01em;opacity:.75;white-space:nowrap;padding-right:3em}
.ticker.solid{background:var(--acid);color:#fff;padding:.35em 0}
.ticker.solid .run > *::after{color:var(--lime)}

/* ---------- splash ---------- */
.splash{position:relative;height:80vh;max-height:900px;overflow:hidden}
.splash img{width:100%;height:118%;object-fit:cover;filter:saturate(1.85) contrast(1.12);will-change:transform}
.splash .cap{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:2;color:#fff;
  max-width:760px;text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:200px;padding:15px 26px;
  background:var(--acid);color:#fff;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  transition:transform .45s var(--ease),background .45s,color .45s}
.btn:hover{transform:translateY(-3px);background:var(--lime);color:#000}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* ---------- page header (inner pages) ---------- */
.phead{padding-top:calc(var(--pad) + 130px);padding-bottom:4em;position:relative;z-index:12;background:var(--bg)}
.phead .crumb{display:flex;gap:10px;align-items:center;margin-bottom:2.4em}

/* ---------- price table ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2em}
.plan{border:1px solid var(--line);padding:2em;display:flex;flex-direction:column;gap:1.1em;
  min-height:460px;position:relative;overflow:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
.plan .bg{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .6s var(--ease),transform 1s var(--ease)}
.plan .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.8)}
.plan:hover .bg{opacity:.18;transform:none}
.plan:hover{background:var(--ink);color:var(--bg)}
.plan > *{position:relative;z-index:2}
.plan ul{list-style:none;display:grid;gap:9px}
.plan li{display:flex;gap:10px;font-size:15px;line-height:1.35}
.plan li::before{content:"—";color:var(--acid)}
.plan .price{margin-top:auto;font-size:clamp(38px,4.4vw,72px);font-weight:500;letter-spacing:-.04em;line-height:.95}
@media(max-width:991px){.plans{grid-template-columns:1fr}.plan{min-height:auto}}

/* ---------- article ---------- */
.article{max-width:900px}
.article p{font-size:clamp(17px,1.35vw,22px);line-height:1.5;margin-bottom:1.2em}
.article h3{font-size:clamp(22px,2.2vw,38px);font-weight:500;letter-spacing:-.03em;margin:1.6em 0 .5em}
.article figure{margin:2.4em 0}
.article figcaption{padding-top:12px;color:var(--muted);font-size:14px}

/* ---------- journal list ---------- */
.posts{border-top:2px solid var(--ink)}
.post-row{display:grid;grid-template-columns:120px 1fr 220px 60px;gap:2em;align-items:center;
  padding:1.6em 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.post-row:hover{padding-left:18px}
.post-row .t{font-size:clamp(20px,2.4vw,42px);font-weight:400;letter-spacing:-.03em;transition:color .4s}
.post-row:hover .t{color:var(--acid)}
@media(max-width:991px){.post-row{grid-template-columns:1fr;gap:.5em}}

/* ---------- contact ---------- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.6em}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 0;
  color:var(--ink);font:inherit;letter-spacing:-.02em;outline:none;transition:border-color .4s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acid)}
.field textarea{min-height:130px;resize:vertical}
@media(max-width:991px){.fields{grid-template-columns:1fr}}

/* ---------- responsive column spans ---------- */
.gcol{grid-column:1/-1}
@media(min-width:992px){
  .c-1-2{grid-column:1/2}.c-1-3{grid-column:1/3}.c-1-4{grid-column:1/4}.c-1-5{grid-column:1/5}
  .c-3-8{grid-column:3/8}.c-3-9{grid-column:3/9}.c-4-9{grid-column:4/9}
  .c-5-9{grid-column:5/9}.c-6-9{grid-column:6/9}.c-7-9{grid-column:7/9}
}
@media(max-width:991px){.foot-bot{padding-right:0}}

/* ---------- custom select (в стиле сайта, вместо системного) ---------- */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:14px 0;border-bottom:1px solid var(--line);font:inherit;letter-spacing:-.02em;
  text-align:left;transition:border-color .4s}
.sel.open .sel-btn,.sel-btn:focus-visible{border-color:var(--acid);outline:none}
.sel-btn i{font-style:normal;font-size:11px;opacity:.55;transition:transform .4s var(--ease)}
.sel.open .sel-btn i{transform:rotate(180deg)}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;list-style:none;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.12);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.sel.open .sel-list{opacity:1;visibility:visible;transform:none}
.sel-list li{padding:11px 12px;cursor:pointer;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;opacity:.62;
  transition:opacity .25s,color .25s,transform .3s var(--ease)}
.sel-list li:hover{opacity:1;color:var(--acid);transform:translateX(5px)}
.sel-list li[aria-selected="true"]{opacity:1;color:var(--acid)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* clip-reveal for big display lines */
.clip{overflow:hidden;display:block}
.clip > *{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.clip.in > *{transform:none}

/* ---------- sticky footer ---------- */
.footspace{height:100vh}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:1;background:#0b0b0b;color:#f3f3f3;
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);gap:2.4em}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2em 3em}
.foot h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6d6d6d;margin-bottom:14px;font-weight:400}
.foot a.fl{display:block;padding:4px 0;opacity:.85;transition:opacity .3s,transform .4s var(--ease),color .3s}
.foot a.fl:hover{opacity:1;transform:translateX(6px);color:var(--lime)}
.foot .mega{font-size:clamp(80px,26vw,430px);font-weight:500;line-height:.72;letter-spacing:-.05em}
.foot-bot{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;padding-right:100px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:18px;color:#8a8a8a}
.foot-bot a{color:var(--lime)}
.socials{display:flex;gap:8px}
.socials a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:12px;transition:background .4s,color .4s,transform .4s var(--ease)}
.socials a:hover{background:var(--lime);color:#000;transform:translateY(-4px)}
@media(max-width:991px){
  .foot{position:relative;min-height:auto}
  .footspace{display:none}
  .foot-cols{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2em 1.5em}
  :root{--pad:20px}
  .divider{margin:3em auto}
  .pad-l{padding-top:4em;padding-bottom:4em}
}

/* ---------- page transition ---------- */
#wipe{position:fixed;inset:0;z-index:8000;background:var(--acid);transform:scaleY(0);
  transform-origin:bottom;pointer-events:none}
body.leaving #wipe{transform:scaleY(1);transform-origin:bottom;transition:transform .55s var(--ease)}

/* Режим «уменьшить движение»: убираем то, что движется само по себе —
   бегущие строки, параллакс, появление блоков по скроллу. Наведение и
   раскрытия оставляем работающими, иначе интерфейс кажется сломанным. */
@media (prefers-reduced-motion:reduce){
  .ticker .run{animation:none}
  .scrolldot{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .clip > *{transform:none;transition:none}
  .hero-media img{animation:none}
  .l1,.l2,.l3{transition-duration:.3s}
  #pre{display:none}
}