/* ============================================================
   La | Maison Montage — visual system replicated from reference
   Palette: bg #0a0a0a, surface #0d0d0d, text #ebebeb, muted #b3b3b3,
   dim #888, accent #ff0000
   Fonts: Onest (Satoshi substitute w/ Cyrillic), Inter
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --surface:#0d0d0d;
  --surface-2:rgba(38,38,38,.5);
  --text:#ebebeb;
  --white:#fff;
  --muted:#b3b3b3;
  --dim:#888888;
  --red:#ff0000;
  --red-soft:#ff4545;
  --line:rgba(255,255,255,.07);
  --line-top:rgba(255,255,255,.14);
  --radius:22px;
  --font:'Onest','Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-2:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1132px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.4}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol{list-style:none}
em{font-style:normal}

.container{width:100%;max-width:calc(var(--container) + 68px);margin:0 auto;padding:0 34px}

/* ---------- type ---------- */
.h2{font-size:48px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.h3{font-size:30px;line-height:1.4;font-weight:500;letter-spacing:-.04em;color:var(--text)}
.h3--lg{font-size:32px;line-height:1.1;letter-spacing:-.01em}
.h4{font-size:22.4px;line-height:1.4;font-weight:500;color:var(--text)}
.lead,.body{font-size:19.2px;line-height:1.4;font-weight:400;letter-spacing:-.02em;color:var(--muted)}
.small{font-size:16px;line-height:1.4;font-weight:500;color:var(--muted)}
.hl{color:var(--red-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:135px;font-size:16px;font-weight:500;color:#fff;white-space:nowrap;transition:transform .35s var(--ease),background-color .3s,box-shadow .3s,filter .3s;will-change:transform}
.btn--red{background:var(--red);box-shadow:0 0 0 0 rgba(255,0,0,0)}
.btn--red:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 30px -8px rgba(255,0,0,.65)}
.btn--dark{background:var(--surface-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--dark:hover{background:rgba(60,60,60,.6);transform:translateY(-2px) scale(1.03)}
.btn--sm{height:42px;padding:0 20px;font-size:15px}
.btn:active{transform:scale(.97)}

.tag{display:inline-flex;align-items:center;padding:8px 12px;border-radius:50px;background:var(--surface);font-size:16px;font-weight:500;color:var(--text);box-shadow:inset 0 1px 0 var(--line-top),inset 0 0 0 1px var(--line)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:transform .5s var(--ease)}
.nav__pill{pointer-events:auto;display:flex;align-items:center;gap:32px;padding:8px 8px 8px 12px;border-radius:32px;background:rgba(13,13,13,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .3s}
.nav.is-scrolled .nav__pill{background:rgba(13,13,13,.78)}
.nav__links{display:flex;gap:20px}
.nav__links a{font-size:16px;font-weight:500;color:#fff;opacity:.9;position:relative;transition:opacity .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);position:relative}
.nav__burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)}
.nav__burger span:first-child{top:17px}.nav__burger span:last-child{top:25px}
.nav.is-open .nav__burger span:first-child{top:21px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:last-child{top:21px;transform:rotate(-45deg)}
.nav__mobile{pointer-events:auto;display:none}

.logo{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:17px;letter-spacing:-.01em;color:#fff}
.logo__mark{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 9px;border-radius:9px;background:var(--red);color:#fff;font-weight:700;font-size:16px}
.logo--big{font-size:30px;gap:10px}
.logo--big .logo__mark{height:56px;min-width:56px;border-radius:14px;font-size:26px;padding:0 14px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:740px;padding:150px 0 110px;overflow:hidden;display:flex;align-items:center}

/* animated light-beam background (hero + footer) */
.beams{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint;transform:translateZ(0);
  background:radial-gradient(60% 80% at 75% 30%,#3a0000 0%,transparent 70%),radial-gradient(40% 60% at 10% 100%,#250000,transparent 70%),var(--bg)}
.beams i{position:absolute;top:-30%;width:120px;height:170%;
  background:linear-gradient(90deg,transparent,rgba(200,0,0,.55),rgba(255,40,40,.15),transparent);
  transform:rotate(22deg) translate3d(0,0,0);filter:blur(10px);will-change:transform;
  animation:beamSweep 9s ease-in-out infinite alternate}
.beams i:nth-child(1){left:48%}
.beams i:nth-child(2){left:63%;width:220px;opacity:.7;animation-delay:-3s}
.beams i:nth-child(3){left:82%;width:90px;animation-delay:-5s}
.beams i:nth-child(4){left:20%;width:60px;opacity:.35;animation-delay:-7s}
.beams--foot{opacity:.8}
@keyframes beamSweep{from{transform:rotate(22deg) translate3d(0,0,0)}to{transform:rotate(22deg) translate3d(80px,0,0)}}

.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:center}
.hero__title{font-size:64px;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--text);max-width:620px}
.hero__lead{margin-top:20px;max-width:470px}
.hero__btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero__proof{display:flex;align-items:center;gap:18px;margin-top:28px}
.avatars{display:flex;align-items:center}
.avatars img,.avatars__more{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-12px}
.avatars img:first-child{margin-left:0}
.avatars__more{display:inline-flex;align-items:center;justify-content:center;background:#f2f2f2;color:#111;font-size:15px;font-weight:600}
.proof__text{display:flex;flex-direction:column;gap:4px;font-size:16px;color:var(--text)}
.stars{display:flex;gap:2px}.stars img{width:16px;height:16px}

/* hero visual: floating 3D frame + mouse tilt */
.hero__media{position:relative;perspective:900px}
.hero__tilt{transform-style:preserve-3d;will-change:transform}
.hero__card{position:relative;aspect-ratio:1/1;background:none;border:0;box-shadow:none;overflow:visible;
  animation:heroFloat 6s ease-in-out infinite;will-change:transform}
@keyframes heroFloat{50%{transform:translateY(-10px) rotateX(3deg)}}
.hero__src{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.01;clip-path:inset(0 0 50% 0);pointer-events:none}
.hero__cam{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.hero__cam.is-ready{opacity:1}
/* fallback without WebGL: plain video, black keyed by blend */
.hero__card.no-gl .hero__src{opacity:1;clip-path:none;mix-blend-mode:screen}
@keyframes recBlink{50%{opacity:0}}

/* ---------- SECTIONS ---------- */
.section{padding:80px 0}
.section__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:48px}
.section__head .h2{max-width:820px}
.center{display:flex;justify-content:center;margin-top:40px}

/* ---------- SERVICES (sticky stack) ---------- */
.stack{display:flex;flex-direction:column;gap:120px;max-width:1016px;margin:0 auto}
.svc-card{position:sticky;top:110px;display:grid;grid-template-columns:1fr 464px;gap:40px;align-items:center;min-height:432px;padding:20px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-top),inset 0 0 0 1px var(--line);transform-origin:50% 0}
.svc-card:nth-child(2){top:130px}
.svc-card:nth-child(3){top:150px}
.svc-card:nth-child(4){top:170px}
.svc-link{color:var(--red-soft);border-bottom:1px solid rgba(255,69,69,.4);transition:border-color .3s}
.svc-link:hover{border-color:var(--red-soft)}
.svc-card__text{padding:0 0 0 46px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.svc-card__text .body{max-width:400px}
.svc-card .list li{line-height:1.5}
.svc-card .btn{margin-top:14px}
.svc-card__media{border-radius:14px;overflow:hidden;height:392px;background:#000}
.svc-card__media img,.svc-card__media video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc-card:hover .svc-card__media img,.svc-card:hover .svc-card__media video{transform:scale(1.04)}

/* ---------- PROJECTS ---------- */
.tabs{display:flex;justify-content:center;gap:8px;margin:-16px 0 40px}
.tab{padding:8px 14px;border-radius:50px;background:var(--surface);font-size:16px;font-weight:500;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);transition:color .25s,box-shadow .25s}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--red)}
.work-grid{display:none;grid-template-columns:repeat(3,1fr);gap:24px}
.work-grid.is-active{display:grid}
.work-grid.is-switching > *{animation:cardIn .7s var(--ease) backwards}
.work-grid.is-switching > *:nth-child(2){animation-delay:.05s}
.work-grid.is-switching > *:nth-child(3){animation-delay:.1s}
.work-grid.is-switching > *:nth-child(4){animation-delay:.15s}
.work-grid.is-switching > *:nth-child(5){animation-delay:.2s}
.work-grid.is-switching > *:nth-child(6){animation-delay:.25s}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}

.work-card{position:relative;display:block;border-radius:20px;overflow:hidden;background:#111;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);isolation:isolate;transition:transform .5s var(--ease)}
.work-grid--tall .work-card{aspect-ratio:9/16}
.work-grid--wide .work-card{aspect-ratio:16/9}
.work-card:hover{transform:translateY(-6px)}
.work-card__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1s var(--ease)}
.work-card:hover .work-card__poster{transform:scale(1.05)}
.work-card__player{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s var(--ease);pointer-events:none;overflow:hidden}
.work-card__player iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.02);border:0;pointer-events:none}
.work-card.is-playing .work-card__player{opacity:1}
.work-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%)}
.work-card__play{position:absolute;z-index:3;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:rgba(13,13,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--ease)}
.work-card__play::before{content:"";margin-left:3px;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.work-card:hover .work-card__play{opacity:1;transform:scale(1)}
.work-card--ig{background:#000}
.work-card__ig{position:absolute;inset:0;overflow:hidden}
.work-card__ig iframe{position:absolute;border:0;pointer-events:none;transform-origin:0 0}

/* ---------- WHY ---------- */
.why{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:stretch;max-width:1080px;margin:0 auto}
.why__media .work-card{aspect-ratio:16/9;border-radius:var(--radius)}
.why__cards{display:flex;flex-direction:column;gap:16px;justify-content:center}
.feature{padding:22px 22px 26px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-top),inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:14px;height:100%;justify-content:center;transition:transform .5s var(--ease)}
.feature:hover{transform:translateY(-4px)}
.feature__icon{width:54px;height:54px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(255,0,0,.6)}
.feature__icon img{width:32px;height:32px}
.feature .small{max-width:360px}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{padding:18px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-top),inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px;min-height:186px;transition:transform .5s var(--ease)}
.step:hover{transform:translateY(-4px)}
.step__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.step__num{font-size:16px;color:var(--muted)}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:50%;background:#8a8a8a}
.dots[data-n="1"] i:nth-child(-n+1),.dots[data-n="2"] i:nth-child(-n+2),.dots[data-n="3"] i:nth-child(-n+3),.dots[data-n="4"] i{background:var(--red)}

/* ---------- ABOUT (styled after strong-bloom reference) ---------- */
.about{--a-red:#ff2a2a;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;max-width:1160px;font-family:'Manrope',var(--font);font-size:16px;line-height:1.55;font-weight:400}
.about__photo{position:relative;border-radius:24px;aspect-ratio:4/5;overflow:hidden;border:1px solid #232323;background:radial-gradient(circle at 50% 35%,#3a0a0a,#121212 70%)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s var(--ease)}
.about__photo:hover img{transform:scale(1.04)}
.about__text{display:flex;flex-direction:column;align-items:flex-start}
.about__title{font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:600;color:#ececec;margin:0 0 12px}
.about__name{color:var(--a-red);font-weight:600;margin:6px 0 18px}
.arrows{list-style:none;margin:0 0 24px}
.arrows li{position:relative;padding-left:26px;margin-bottom:10px;color:#cfcfcf}
.arrows li::before{content:"➤";position:absolute;left:0;color:var(--a-red)}
.u{color:var(--a-red);border-bottom:1px solid rgba(255,42,42,.4);transition:border-color .3s}
.u:hover{border-color:var(--a-red)}
.about__socials{display:flex;gap:10px;margin:0 0 24px}
.about__socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#1a1a1a;border:1px solid #2a2a2a;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.about__socials a:hover{background:var(--a-red);border-color:var(--a-red);transform:translateY(-3px)}
.about__socials svg{width:18px;height:18px;fill:#fff}
.about__btn{display:inline-flex;align-items:center;padding:13px 22px;border-radius:999px;background:var(--a-red);color:#fff;font-weight:600;font-size:15px;line-height:1.55;white-space:nowrap;box-shadow:0 8px 30px -8px rgba(255,42,42,.6);transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.about__btn:hover{background:#ff4747;transform:translateY(-2px);box-shadow:0 12px 34px -8px rgba(255,42,42,.75)}
.about__note{margin-top:14px;font-size:14px;color:#9a9a9a}

/* creators marquee */
.creators{display:flex;align-items:center;gap:28px;margin-top:80px;max-width:1068px}
.creators__label{flex:0 0 auto;width:110px;font-size:19.2px;line-height:1.4;font-weight:400;letter-spacing:-.02em;color:var(--text)}
.marquee{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:16px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track img{width:62px;height:62px;border-radius:12px;object-fit:cover;filter:grayscale(1);transition:filter .35s,transform .35s var(--ease)}
.marquee__track img:hover{filter:none;transform:scale(1.08)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:110px;max-width:1132px;text-align:center}
.stat{display:flex;flex-direction:column;align-items:center;gap:6px}
.stat__num{font-size:72px;line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.stat__label{font-family:var(--font-2);font-size:19.2px;line-height:1.5;font-weight:500;color:var(--muted)}

/* ---------- CONTACT ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px var(--line);min-height:560px}
.contact__left{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:8px 0}
.contact__title{font-size:48px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.contact__title span{color:var(--muted)}
.contact__left .lead{max-width:470px}
.contact__tg{margin-top:auto}
.contact__link{display:inline-flex;align-items:center;gap:10px;font-size:16px;color:var(--muted);transition:color .2s}
.contact__link img{width:20px;height:20px}
.contact__link:hover{color:#fff}
.round-socials{display:flex;gap:12px}
.round-socials a{width:44px;height:44px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),box-shadow .3s}
.round-socials a:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 24px -6px rgba(255,0,0,.7)}
.round-socials svg{width:20px;height:20px;fill:#fff}
.contact__right{position:relative;border-radius:16px;overflow:hidden;background:#000;min-height:420px}
.contact__right video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.contact__right-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0),rgba(0,0,0,.45))}

/* ---------- FOOTER ---------- */
.footer{position:relative;margin-top:60px;border-top:1px solid rgba(255,255,255,.06);overflow:hidden}
.footer__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;padding:64px 24px 72px}
.footer__links{display:flex;gap:24px;font-size:16px}
.footer__links a{opacity:.9;transition:opacity .2s,color .2s}
.footer__links a:hover{color:var(--red-soft)}
.footer__bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:22px 34px;font-size:15px;color:var(--muted);background:rgba(10,10,10,.85)}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;padding:24px}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__frame{width:min(1100px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;transform:scale(.94);transition:transform .45s var(--ease)}
.lightbox__frame.is-vertical{width:auto;height:min(86vh,900px);aspect-ratio:9/16}
.lightbox.is-open .lightbox__frame{transform:none}
.lightbox__frame iframe{width:100%;height:100%;border:0}
.lightbox__close{position:absolute;top:20px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--surface-2);font-size:28px;line-height:1;color:#fff}

/* ---------- ANIMATIONS ---------- */
/* intro (hero) — opacity 0 + y 40 → spring-like ease */
.intro{transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.intro--blur{transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
.js .intro{opacity:0;transform:translateY(40px)}
.js .intro--blur{transform:translateY(28px);filter:blur(8px)}
.js .is-loaded .intro{opacity:1;transform:none;filter:none}
/* scroll reveal: see the SCROLL REVEAL block at the end of the file */
.svc-card.reveal.is-in{transform:scale(var(--stack-scale,1))}
@media (prefers-reduced-motion:reduce){
  .intro,.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .beams i,.hero__card{animation:none!important}
  .hero__tilt{transform:none!important}
  .marquee__track{animation-duration:120s}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1199px){
  .hero__inner{grid-template-columns:1fr 400px;gap:40px}
  .hero__title{font-size:56px}
  .svc-card{grid-template-columns:1fr 1fr}
  .svc-card__text{padding-left:24px}
}
@media (max-width:991px){
  .nav__links{display:none}
  /* tablet + phone: burger menu (links were hidden with no way to reach them on 641–991px) */
  .nav__pill{gap:10px;width:calc(100% - 32px);max-width:720px;justify-content:space-between}
  .nav__cta{margin-left:auto}
  .nav__burger{display:block;flex:0 0 auto}
  .nav__mobile{display:flex;flex-direction:column;gap:4px;width:calc(100% - 32px);max-width:720px;margin-top:8px;padding:14px;border-radius:24px;background:rgba(13,13,13,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
  .nav.is-open .nav__mobile{opacity:1;transform:none;pointer-events:auto}
  .nav__mobile a{padding:12px 10px;font-size:18px}
  .nav__mobile .btn{margin-top:6px;font-size:16px}
  .hero{padding-top:130px}
  .hero__inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .hero__content{display:flex;flex-direction:column;align-items:center}
  .hero__btns,.hero__proof{justify-content:center}
  .hero__media{width:100%;max-width:440px}
  .h2,.contact__title{font-size:40px}
  .stack{gap:60px}
  .svc-card{grid-template-columns:1fr;gap:24px;min-height:0;padding:20px}
  .svc-card__text{padding:12px 4px 0}
  .svc-card__media{height:auto;aspect-ratio:16/10}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .why{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:32px}
  .about__photo{max-width:460px;width:100%}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .container{padding:0 16px}
  .nav{top:12px}
  .nav__pill,.nav__mobile{width:calc(100% - 24px)}
  .nav__pill{padding:6px 6px 6px 10px}
  .nav__cta{display:none}
  .logo{font-size:15px}
  .logo__mark{height:30px;min-width:30px;font-size:14px}
  .hero{min-height:0;padding:112px 0 64px}
  .hero__title{font-size:38px}
  .lead,.body{font-size:16.5px}
  .hero__btns{flex-direction:column;width:100%;max-width:300px}
  .hero__btns .btn{width:100%}
  .hero__proof{flex-direction:column;gap:10px}
  .proof__text{align-items:center}
  .section{padding:56px 0}
  .section__head{margin-bottom:32px}
  .h2,.contact__title{font-size:32px}
  .h3{font-size:24px;letter-spacing:-.03em}
  .h3--lg{font-size:28px}
  .svc-card{top:84px;padding:14px}
  .svc-card:nth-child(2){top:96px}
  .svc-card:nth-child(3){top:108px}
  .svc-card:nth-child(4){top:120px}
  .work-grid{grid-template-columns:1fr;gap:16px}
  .work-grid--tall{max-width:340px;margin:0 auto}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .creators{flex-direction:column;gap:16px;margin-top:56px}
  .creators__label{width:auto;text-align:center}
  .marquee{width:100%}
  .stats{grid-template-columns:1fr;row-gap:40px;margin-top:72px}
  .stat__num{font-size:56px}
  .contact{padding:16px;min-height:0}
  .contact__right{min-height:260px}
  .logo--big{font-size:22px}
  .logo--big .logo__mark{height:44px;min-width:44px;font-size:20px}
  .footer__links{gap:16px;flex-wrap:wrap;justify-content:center}
  .footer__bottom{flex-direction:column;align-items:center;padding:18px 16px}
}

/* ============================================================
   FULL CLIENTS LIST (toggle under «С кем работал»)
   ============================================================ */
.creators__head{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:132px}
.creators__head .creators__label{width:auto}
.clients-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;font-family:var(--font-2);font-size:13px;line-height:1.3;font-weight:500;color:var(--dim);text-align:left;transition:color .25s}
.clients-toggle:hover,.clients-toggle[aria-expanded="true"]{color:var(--red-soft)}
.clients-toggle:focus-visible{outline:2px solid var(--red-soft);outline-offset:4px;border-radius:4px}
.clients-toggle__icon{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.clients-toggle[aria-expanded="true"] .clients-toggle__icon{transform:rotate(180deg)}

.clients{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;max-width:1068px;transition:grid-template-rows .6s var(--ease),opacity .45s ease,visibility 0s linear .6s}
.clients.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .6s var(--ease),opacity .5s ease .08s,visibility 0s}
.clients__inner{min-height:0;overflow:hidden}
.clients__inner>:first-child{margin-top:44px}
.clients__sub{margin:30px 0 14px;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.clients__grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.clients__grid--featured{margin-bottom:12px}
.client{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:14px;transition:border-color .25s,background .25s}
.client:hover{border-color:rgba(255,255,255,.16);background:#171717}
.client__av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;object-fit:cover;background:#1e1e1e;border:1px solid rgba(255,255,255,.08)}
.client__ph{display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,#2c2c2c,#161616 70%);font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--text);text-transform:uppercase;user-select:none}
.client--brand .client__ph{background:radial-gradient(circle at 30% 25%,#3a1414,#1a0d0d 70%);border-color:rgba(255,69,69,.28)}
.client__txt{display:flex;flex-direction:column;min-width:0}
.client__name{font-size:15px;line-height:1.3;font-weight:600;color:var(--white);overflow-wrap:anywhere}
.client__star{margin-left:6px;white-space:nowrap;font-size:11px;color:var(--muted);vertical-align:1px}
.client__meta{margin-top:2px;font-family:var(--font-2);font-size:12.5px;line-height:1.35;font-weight:400;color:var(--dim)}
.client__meta b{font-weight:600;color:#d6d6d6}
.client--featured{gap:16px;padding:20px}
.client--featured .client__av{width:60px;height:60px}
.client--featured .client__ph{font-size:20px}
.client--featured .client__name{font-size:16.5px}
.client__num{margin-top:3px;font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--white)}
.client__cap{margin-top:2px;font-family:var(--font-2);font-size:12.5px;font-weight:400;color:var(--dim)}

@media (max-width:1024px){
  .clients__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clients__grid--featured{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .creators__head{width:auto;align-items:center}
  .clients-toggle{text-align:center}
  .clients__inner>:first-child{margin-top:32px}
  .clients__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .clients__grid--featured{grid-template-columns:minmax(0,1fr)}
  .client{padding:11px 10px;gap:9px;border-radius:12px}
  .client--featured{padding:16px}
  .client__av{width:34px;height:34px}
  .client__ph{font-size:13px}
  .client__name{font-size:14px}
  .client__meta{font-size:12px}
}
@media (max-width:480px){
  .clients__grid--brands{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  .clients__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .clients,.clients.is-open,.clients-toggle__icon{transition:none}
}

/* ============================================================
   RESPONSIVE QA PASS — spacing / layout only (no visual redesign)
   ============================================================ */
/* large monitors: scale the whole (px-based) layout so it isn't tiny in the middle of a 2K/4K screen */
@media (min-width:2000px){html{zoom:1.15}}
@media (min-width:2400px){html{zoom:1.3}}

/* small laptops: 4 big stat numbers in a row were crowding each other */
@media (max-width:1199px){
  .stat__num{font-size:60px}
  .stat__label{font-size:17px}
  .steps{gap:16px}
}

/* tablets */
@media (max-width:991px){
  .hero__inner{gap:20px}
  .hero__media{max-width:400px}
  .contact{gap:28px}
  .contact__left{gap:20px}
  .contact__tg{margin-top:8px}
  .why{gap:20px}
  .work-grid{gap:18px}
  .center{margin-top:48px}
}
/* tablet portrait (iPad etc.): services cards side-by-side, square media fits the ~square videos */
@media (min-width:768px) and (max-width:991px){
  .svc-card{grid-template-columns:1fr 1fr;gap:28px;padding:20px;align-items:center}
  .svc-card__text{padding:8px 0 8px 14px;gap:16px}
  .svc-card .h3{font-size:26px;line-height:1.25}
  .svc-card .body{font-size:17px}
  .svc-card__media{height:auto;aspect-ratio:1/1}
  .about{grid-template-columns:.85fr 1.15fr;gap:40px}
  .about__photo{max-width:none}
}
/* phones (+ small tablets): stacked cards, roomier spacing */
@media (max-width:767px){
  .stack{gap:32px}
  .svc-card{gap:22px;padding:18px}
  .svc-card__text{padding:8px 6px 0;gap:16px}
  .svc-card .btn{margin-top:8px}
  .svc-card__media{height:auto;aspect-ratio:4/3}
  .about{gap:36px}
  .about__photo{max-width:420px;justify-self:center}
}
/* a stacked card is ~540–650px tall on phones: keep the sticky stack only where the whole card fits on screen,
   otherwise its bottom would be hidden under the next card */
@media (max-width:767px) and (max-height:799px),(min-width:641px) and (max-width:767px){
  .svc-card{position:relative;top:auto!important}
}
@media (max-width:991px){.hero{padding-bottom:72px}}
@media (max-width:640px){
  .container{padding:0 20px}
  .hero__media{max-width:340px}
  .hero__btns{margin-top:28px}
  .section{padding:64px 0}
  .section__head{margin-bottom:36px}
  .tabs{margin:-12px 0 32px}
  .work-grid{gap:20px}
  .why{gap:16px}
  .steps{gap:14px}
  .step{padding:20px}
  .step__top{margin-bottom:20px}
  .center{margin-top:40px}
  .stats{row-gap:44px}
  .stat__num{font-size:56px}
  .contact{gap:24px;padding:20px}
  .contact__left{gap:18px}
  .footer__inner{padding:56px 20px 60px}
}
@media (max-width:400px){
  .logo--big{font-size:19px;gap:8px}
  .logo--big .logo__mark{height:40px;min-width:40px;font-size:18px;padding:0 10px}
}
@media (max-width:374px){
  .container{padding:0 16px}
  .hero__title{font-size:34px}
  .h2,.contact__title{font-size:29px}
  .svc-card{padding:16px}
  .svc-card__text{padding:6px 2px 0}
  .contact{padding:16px}
}

/* portfolio item: dark rounded card = thumbnail + title/views row (ref: YouTube-like card) */
.work-item{display:flex;flex-direction:column;gap:12px;padding:8px 8px 12px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0;transition:opacity .7s var(--ease),transform .6s var(--ease),box-shadow .3s}
.work-item:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,0,0,.35)}
.work-item .work-card{border-radius:16px}
.work-item__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 6px;cursor:pointer;min-width:0}
.work-item__title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--white);font-size:15px;font-weight:500;line-height:1.35}
.work-item__views{flex:0 0 auto;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.work-card__dur{position:absolute;z-index:3;right:10px;bottom:10px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.78);color:#fff;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.01em;font-variant-numeric:tabular-nums;pointer-events:none;transition:opacity .25s}
.work-card:hover .work-card__dur{opacity:0}
/* Shorts: compact 9:16 cards — 4 per row (≤240px) on desktop, 3 on tablets, 2 on phones */
.work-grid--tall.is-active{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.work-grid--tall .work-item{flex:0 0 calc((100% - 60px)/4);max-width:240px;padding:6px 6px 10px;gap:10px;border-radius:20px}
.work-grid--tall .work-item .work-card{border-radius:14px}
.work-grid--tall .work-item__title{font-size:14px}
.work-grid--tall .work-item__views{font-size:13px}
.work-grid--tall .work-item__meta{padding:0 4px;gap:8px}
@media (max-width:991px){
  .work-grid--tall.is-active{gap:16px}
  .work-grid--tall .work-item{flex-basis:calc((100% - 32px)/3);max-width:220px}
}
@media (max-width:640px){
  .work-grid--tall{max-width:none!important}
  .work-grid--tall.is-active{gap:12px}
  .work-grid--tall .work-item{flex-basis:calc((100% - 12px)/2);max-width:200px}
  .work-grid--tall .work-item__title{font-size:13px}
  .work-grid--tall .work-item__views{font-size:12px}
  .work-item__title{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.work-item,.work-item:hover{transition:none;transform:none}}

/* ============================================================
   ABOUT → CLIENTS → STATS → CONTACT: same rhythm as between sections
   (section gap = 2 × .section padding: 160px desktop; scaled down on tablet/phone)
   ============================================================ */
.section--about{--block-gap:160px;--about-gap:64px}
.section--about .creators{margin-top:var(--about-gap)}
.section--about .stats{margin-top:var(--block-gap)}
@media (max-width:991px){.section--about{--block-gap:128px;--about-gap:56px}}
@media (max-width:640px){.section--about{--block-gap:96px;--about-gap:48px}}

/* ============================================================
   FINAL BLOCK: contact + footer merged into one section (#contact)
   ============================================================ */
.final{position:relative;margin-top:80px;overflow:hidden;isolation:isolate}
.beams--final{background:radial-gradient(55% 90% at 80% 20%,#3a0000 0%,transparent 70%),radial-gradient(45% 70% at 5% 100%,#220000,transparent 70%),var(--bg)}
.beams--final i:nth-child(1){left:52%}
.beams--final i:nth-child(4){left:30%;opacity:.25}
.final::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.45) 55%,rgba(10,10,10,.15) 100%),linear-gradient(0deg,rgba(10,10,10,.7),transparent 35%)}
.final__inner{position:relative;z-index:1;padding-top:104px}
.final__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:start}
.final__main{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.final__main .lead{max-width:520px;color:#c4c4c4}
.final__cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:12px}
.btn--lg{height:56px;padding:0 30px;font-size:17px}
.final__btn{gap:10px;box-shadow:0 12px 36px -10px rgba(255,0,0,.7)}
.final__btn svg{width:20px;height:20px;fill:#fff;flex:0 0 auto}
.final__main .round-socials{margin-top:8px}
.final__nav{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:200px;padding-top:8px}
.final__nav-title{margin-bottom:4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.final__nav a{font-size:18px;color:var(--text);opacity:.9;transition:color .2s,opacity .2s,transform .3s var(--ease)}
.final__nav a:hover{color:var(--red-soft);opacity:1;transform:translateX(4px)}
.final__bottom{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:88px;padding:24px 0 28px;border-top:1px solid rgba(255,255,255,.1);font-size:15px;color:var(--muted)}
.final__logo{font-size:15px}
.final__logo .logo__mark{height:28px;min-width:28px;font-size:13px;padding:0 7px;border-radius:7px}
.final__bottom span:last-child{margin-left:auto}
@media (max-width:991px){
  .final__inner{padding-top:88px}
  .final__grid{gap:48px}
  .final__nav{min-width:160px}
}
@media (max-width:767px){
  .final__grid{grid-template-columns:1fr;gap:40px}
  .final__nav{flex-direction:row;flex-wrap:wrap;gap:10px 20px;min-width:0;padding-top:0}
  .final__nav-title{flex:0 0 100%}
  .final__nav a{font-size:16px}
  .final::after{background:linear-gradient(180deg,rgba(10,10,10,.75),rgba(10,10,10,.55) 60%,rgba(10,10,10,.8))}
}
@media (max-width:640px){
  .final{margin-top:64px}
  .final__inner{padding-top:72px}
  .final__main{gap:18px}
  .final__cta{flex-direction:column;align-items:stretch;width:100%;gap:14px}
  .final__btn{width:100%}
  .final__cta .contact__link{align-self:center}
  .final__bottom{flex-direction:column;align-items:center;text-align:center;margin-top:56px;padding:22px 0 26px;gap:10px}
  .final__bottom span:last-child{margin-left:0}
}

/* ============================================================
   SCROLL REVEAL — one system for the whole page (js/main.js "scroll reveal")
   hidden state only when JS is running (html.js); opacity + transform only
   ============================================================ */
.js .reveal:not(.is-in){opacity:0;transform:translate3d(0,28px,0)}
.js .reveal:not(.is-done){transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--rd,0ms),transform .85s cubic-bezier(.22,1,.36,1) var(--rd,0ms)}
/* media inside cards: gentle 1.04 → 1 together with the fade (parents clip with overflow:hidden) */
.js .reveal:not(.is-in) :is(.svc-card__media video,.work-card__poster),.js .about__photo.reveal:not(.is-in) img{transform:scale(1.04)}
.js .reveal:not(.is-done) :is(.svc-card__media video,.work-card__poster),.js .about__photo.reveal:not(.is-done) img{transition:transform 1.1s cubic-bezier(.22,1,.36,1) var(--rd,0ms)}
/* «С кем работал» avatars: soft opacity stagger inside the moving marquee */
.js .marquee.reveal .marquee__track img{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1) .48s,filter .35s,transform .35s var(--ease)}
.js .marquee.reveal.is-in .marquee__track img{opacity:1}
.js .marquee.reveal .marquee__track img:nth-child(1){transition-delay:0s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(2){transition-delay:.06s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(3){transition-delay:.12s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(4){transition-delay:.18s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(5){transition-delay:.24s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(6){transition-delay:.30s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(7){transition-delay:.36s,0s,0s}
.js .marquee.reveal .marquee__track img:nth-child(8){transition-delay:.42s,0s,0s}
.js .marquee.reveal.is-done .marquee__track img{transition-delay:0s}
/* expanded clients list: cards rise in with a capped stagger every time it opens */
@keyframes revealUp{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.js .clients.is-open :is(.clients__sub,.client){animation:revealUp .7s cubic-bezier(.22,1,.36,1) var(--kd,0ms) both}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .marquee__track img{opacity:1!important;transition:none!important}
  .js .reveal:not(.is-in) :is(.svc-card__media video,.work-card__poster),.js .about__photo.reveal img{transform:none!important}
  .js .clients.is-open :is(.clients__sub,.client){animation:none}
}

/* centred layout: even dark veil so the centred text stays readable */
.final::after{background:radial-gradient(60% 70% at 50% 45%,rgba(10,10,10,.6),rgba(10,10,10,.12)),linear-gradient(0deg,rgba(10,10,10,.7),transparent 35%)}
/* final block v2: single centred column (no nav column — the fixed top menu stays visible) */
.final__grid{grid-template-columns:1fr;justify-items:center}
.final__main{align-items:center;text-align:center;max-width:680px}
.final__main .lead{max-width:560px}
.final__cta{justify-content:center;margin-top:8px}
.final__main .round-socials{margin-top:4px}
@media (max-width:640px){
  .final__cta{flex-direction:row;width:auto}
}

/* soft edges: animated red-black backgrounds fade into the page black (no hard line) */
.hero > .beams{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 260px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 260px),transparent)}
.final > .beams{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 260px);mask-image:linear-gradient(to bottom,transparent,#000 260px)}
@media (max-width:640px){
  .hero > .beams{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent)}
  .final > .beams{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 200px);mask-image:linear-gradient(to bottom,transparent,#000 200px)}
}