/* ==========================================================================
   LEDNIQUE – портфолио v2
   Montserrat 500/600 · Roboto Condensed 500 (заголовки) · масштаб сайта 85 %
   Сайт 1400px (контент 1280 + поля 60). Блок: отступ сверху/снизу 80px,
   между внутренними контейнерами 20px. Скругления – суперэллипс (squircle).
   ========================================================================== */
:root{
  --wrap:1400px; --pad:60px; --sec:80px; --gap:20px;
  --ink:#0a0a0a; --muted:#808080; --lime:#caf865;
  --blue-sec:#d1e2e8; --blue-gfx:#c9e1e9; --gray-sec:#f2f2f0;
  --font-b:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-d:"Roboto Condensed","Arial Narrow",sans-serif;
  --ease-back:cubic-bezier(.01,1.43,.46,1.85);
  --ease-link:cubic-bezier(.38,0,0,1);
  --cs:superellipse(2.3);   /* «как у Apple»: squircle со сглаживанием 60 % */
  --shadow-frame:0 4px 4px rgba(0,0,0,.25),1px 0 1px rgba(0,0,0,.3),-1px 0 0 rgba(0,0,0,.3);
  --shadow-btn:0 6px 10px rgba(0,0,0,.2),2px 0 2px rgba(0,0,0,.3),-2px 0 2px rgba(0,0,0,.3);
  --act-bg:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.72));
  /* стеклянный стиль контейнеров и кнопок – семь эффектов из Figma:
     inner shadow 0/1/0.5  #fff 45 % · inner shadow 0/0.5/0.5 #fff 60 % · inner shadow 0/-1/1 #fff 30 %
     drop shadow -1/0/0  #000 30 % · drop shadow 1/0/1  #000 30 %
     inner shadow 0/2/3  #000 30 % · drop shadow 0/4/4  #000 25 % */
  /* белые блики вынесены в отдельный слой ::after с наложением plus-lighter
     (см. блок «БЕЛЫЕ ТЕНИ» в конце файла) – здесь остаются только тёмные */
  --fx-light:inset 0 1px .5px rgba(255,255,255,.45),
       inset 0 .5px .5px rgba(255,255,255,.6),
       inset 0 -1px 1px rgba(255,255,255,.3);
  --fx:-1px 0 0 rgba(0,0,0,.3),
       1px 0 1px rgba(0,0,0,.3),
       inset 0 2px 3px rgba(0,0,0,.3),
       0 4px 4px rgba(0,0,0,.25);
  /* белый блик: на SDR-экране это обычный #fff (браузер обрежет),
     на HDR-экране – реальный белый выше 100 % (display-p3 с компонентами >1) */
  --hdr-white:#fff;
  --hdr-white-soft:rgba(255,255,255,.5);
  --glass-fill:rgba(255,255,255,.42);  /* беловатая заливка неактивных пунктов меню/заявок */
  --off-fill:rgba(0,0,0,.5);           /* неактивные кнопки вне меню */
  /* «кнопочный» стеклянный стиль (не путать с --fx у контейнеров) */
  --btn-light:inset 0 8px .5px -5px rgba(255,255,255,.75),
           inset 0 8px 6px -5px #fff,
           inset 0 -8px 1px -5px rgba(255,255,255,.3);
  --btn-fx:-2px 0 2px rgba(0,0,0,.3),
           2px 0 2px rgba(0,0,0,.3),
           0 6px 10px rgba(0,0,0,.2),
           inset 0 4px 20px rgba(0,0,0,.3),
           inset 0 6px 20px -4px rgba(0,0,0,.3);
}
/* HDR-дисплеи: блики выводятся за пределы обычного белого (extended display-p3) */
@supports (color:color(display-p3 1 1 1)){
  @media (dynamic-range:high){
    :root{
      --hdr-white:color(display-p3 1.8 1.8 1.8);
      --hdr-white-soft:color(display-p3 1.5 1.5 1.5 / .6);
    }
  }
}
*,*::before,*::after{box-sizing:border-box;corner-shape:var(--cs)}
html{zoom:.85;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--ink);font:500 16px/1.55 var(--font-b);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
b,strong{font-weight:600}
::selection{background:var(--lime);color:#000}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{width:100%;max-width:800px;margin-inline:auto;padding-inline:20px}
.section{position:relative;padding-block:var(--sec);min-height:var(--vh,100vh);display:flex;flex-direction:column;justify-content:center}
.sec--blue{background:var(--blue-sec)}
.sec--blue2{background:var(--blue-gfx)}
.sec--gray{background:var(--gray-sec)}
.center{text-align:center}
.section > .narrow + .car{margin-top:var(--gap)}
.section > .wrap,.section > .narrow{flex:none}

/* ---------- типографика ---------- */
.h1,.h2,.h3{font-family:var(--font-d);font-weight:500;text-transform:uppercase}
.h1{font-size:120px;line-height:.98;letter-spacing:-.0625em;text-align:center;text-shadow:0 0 10px rgba(255,255,255,.5)}
.h1--fit{width:100%;max-width:1400px;margin:0 auto;padding-inline:0;white-space:nowrap}
.h1--fit span{display:inline-block}
.h2{font-size:80px;line-height:1.01;letter-spacing:-.0625em;text-shadow:0 0 10px rgba(255,255,255,.5)}
.h2--m{font-size:64px;text-align:center}
.h3{font-size:26px;line-height:1.1;letter-spacing:-.01em}
.eyebrow{display:flex;align-items:center;gap:12px;font:600 10px/1 var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:#8a8a8a;text-decoration:none;width:max-content}
.eyebrow--center{margin-inline:auto}   /* надпись по центру над центрированным заголовком */
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.tb{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:var(--gap)}
.tb .eyebrow{align-self:center}
.lead{color:var(--muted);text-align:justify;hyphens:auto}
.lead--l{text-align:left;max-width:640px}
.lead b{color:var(--ink)}
.label{display:block;font:600 10px/1.4 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;margin-bottom:12px}
.sechead{display:flex;flex-direction:column;gap:20px;margin-bottom:var(--gap)}
.sechead .h2{margin-top:0}
.sechead .narrow{padding-inline:0}

/* ---------- кнопки (стили «стили css.txt» + анимация lednique.ru) ---------- */
.btn{--hs:1.07;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:6px 14px;border:0;border-radius:36px;font:600 11px/1 var(--font-b);letter-spacing:.066em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;cursor:pointer;color:#000;transition:transform .15s var(--ease-back),box-shadow .15s var(--ease-back);-webkit-tap-highlight-color:transparent;user-select:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#ffffff4d,#fff9);opacity:0;transition:opacity .15s var(--ease-back)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 -3px 1px #ffffff26 inset,0 2px 2px #fff inset;mix-blend-mode:plus-lighter}
@media (hover:hover){.btn:hover{transform:scale(var(--hs))}.btn:hover::before{opacity:1}}
.btn:focus-visible{transform:scale(var(--hs));outline:2px solid #000;outline-offset:3px}
.btn:active{transform:scale(1.03)}
.btn:active::before{opacity:1}
.btn--lg{height:36px;padding:6px 14px;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.66px;--hs:1.04}
.btn--sm{height:36px;padding:6px 14px;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.66px}
.btn--round{width:36px;padding:0;font-size:14px}

/* меню и пункты заявок: прежний кнопочный стиль, меняется только цвет –
   активная зелёная, неактивная беловатая */
.btn--nav{background:var(--glass-fill);color:#0a0a0a;box-shadow:var(--btn-fx);height:36px;padding:6px 14px;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.66px;text-transform:none}
.btn--nav::before,.btn--nav::after,.opt::before,.opt::after{display:none}
.btn--nav:hover,.opt:hover{transform:none}
.btn--nav span,.opt span,.car__tag span{display:block;text-align:center}
.btn--nav span{text-shadow:0 0 10px rgba(255,255,255,.55)}
/* активный пункт меню – #CAF865 */
.btn--nav.is-active{background:#caf865;color:#0a0a0a;box-shadow:var(--btn-fx)}
.btn--nav.is-active span{text-shadow:0 0 10px rgba(255,255,255,.6)}
.opt{background:var(--glass-fill);color:#0a0a0a;box-shadow:var(--btn-fx);height:36px;padding:6px 12px;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.66px;text-transform:none}
.opt span{text-shadow:0 0 10px rgba(255,255,255,.55)}
.opt.is-on{background:#caf865;color:#0a0a0a;box-shadow:var(--btn-fx)}
.opt.is-on span{text-shadow:0 0 10px rgba(255,255,255,.6)}
.car__tag{background:rgba(255,255,255,.22);color:#fff;box-shadow:var(--fx)}
.car__tag span{text-shadow:0 0 10px rgba(0,0,0,.5)}

.btn--lime,.btn--lime.btn--lg{background:#caf865;color:#0a0a0a;box-shadow:var(--btn-fx);text-transform:none;
  height:36px;padding:6px 16px;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.4px}
.btn--lime::before,.btn--lime::after{display:none}
.btn--lime:hover{transform:none}
.btn--ink{background:var(--off-fill);color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3);text-shadow:0 0 10px rgba(0,0,0,.35)}
.btn--ink::before{background:linear-gradient(90deg,#ffffff26,#ffffff59)}
.btn--blue{background:#caf865;color:#0a0a0a;box-shadow:var(--shadow-frame);text-transform:none}

/* ---------- шапка: логотип 1,5× без анимации, меню – горизонтальный ряд кнопок ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:transform .4s var(--ease-link);background:transparent}
/* градиент за меню: линейный, без промежуточных стопов – белый у верхнего края окна, прозрачный снизу */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* два одинаковых слоя = удвоенная плотность подложки (без дополнительных стопов) */
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%),
             linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%);
  opacity:0;transition:opacity .45s var(--ease-link)}
.nav.is-scrolled::before{opacity:1}
.nav.is-away{transform:translateY(-130%)}
.nav__back{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:#0a0a0a;display:grid;place-items:center;text-decoration:none;font:600 16px/1 var(--font-b);border:1px solid var(--glass-b);box-shadow:inset 0 1px .5px rgba(255,255,255,.75),0 2px 6px rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.06);transition:transform .15s var(--ease-back)}
.nav__back span{text-shadow:0 0 10px rgba(255,255,255,.55)}
.nav__back:hover{transform:scale(1.06)}
.nav__in{max-width:var(--wrap);margin:auto;padding:12px var(--pad);display:flex;align-items:center;gap:20px;position:relative}
.logo{display:block;flex:none;width:105px;position:relative;top:4px;transform:none;transition:none;animation:none}
.logo:hover,.logo img:hover{transform:none;animation:none}
.logo img{width:105px;height:auto;display:block;transform:none;transition:none;animation:none}
.nav__links{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex:0 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:16px;margin:-16px}   /* 16px «воздуха», чтобы контейнер не обрезал тени кнопок */
.nav__links::-webkit-scrollbar{display:none;width:0;height:0}
.nav__links.is-cut-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);mask-image:linear-gradient(90deg,transparent 0,#000 30px)}
.nav__links.is-cut-r{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30px);mask-image:linear-gradient(270deg,transparent 0,#000 30px)}
.nav__links.is-cut-l.is-cut-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
.nav__links .btn--nav{height:32px;padding:0 12px;font-size:12.5px;letter-spacing:.02em;text-transform:none}
.nav__cta{margin-left:auto;flex:none}
.nav__cta-mob{display:none}
.nav__sep{width:1px;height:20px;flex:none;align-self:center;background:rgba(0,0,0,.16);border-radius:1px}
/* на главной «Графика / AR / AI» появляются, когда пролистан герой
   (аватарка + заголовок + иконки софта) */
.page-home .nav__dir,.page-home .nav__sep{display:none}
.page-home .nav.is-hero-passed .nav__dir{display:inline-flex;animation:navIn .26s var(--ease-link) both}
.page-home .nav.is-hero-passed .nav__sep{display:block;animation:navIn .26s var(--ease-link) both}
@keyframes navIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- герои: на всю высоту окна (--vh задаёт JS с учётом масштаба 85 %) ---------- */
.hero{position:relative;overflow:hidden;min-height:var(--vh,100vh);padding-top:122px;padding-bottom:28px;display:flex;flex-direction:column;gap:var(--gap);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center top;transform-origin:50% 32%;will-change:transform}
.hero__fishes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__fishes img{position:absolute;max-width:none}
.hero > .wrap,.hero > .h1{position:relative;z-index:2}
.hero--ai{background:linear-gradient(180deg,#ffffff 0%,#8da1a9 27%,#ffffff 100%)}
.hero--design{background:linear-gradient(180deg,#ffffff 0%,#bcd9e4 27%,#ffffff 100%)}
.hero--ar{background:linear-gradient(180deg,#ffffff 0%,#92c7ff 27%,#ffffff 100%)}
.hero .eyebrow{margin-bottom:0}
.hero .eyebrow[href]:hover{color:#000}
.hero__lines{text-align:center;color:#2a2a2a;font-size:16px;line-height:1.7}
.hero__lines--b{text-align:justify;color:#202020}
.hero__meta{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-top:10px}
.hero__meta--one{display:block;margin-top:20px}
.kv{display:flex;gap:40px}
.kv div span{display:block;font:600 10px/1.4 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:#666;margin-bottom:6px}
.kv div b{display:block;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:32px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);font:600 12px/1 var(--font-b);letter-spacing:.02em;color:#222;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.chips--white .chip{background:#fff}
.sec--dark .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.heroimg{position:relative;z-index:1;width:100%;display:flex;justify-content:center;min-height:120px}
.heroimg__in{position:relative;width:1400px;max-width:100%;height:auto}
.heroimg__pic{width:100%;height:auto;object-fit:contain}
.pfish{position:absolute;pointer-events:none;will-change:transform}
.pfish img{width:100%;height:auto;max-width:none}

/* ---------- главная ---------- */
.home-hero{padding:122px 0 40px;background:#fff;min-height:var(--vh,100vh);display:flex;flex-direction:column;justify-content:center}
.home-hero__grid{display:grid;grid-template-columns:1fr 541px;gap:40px;align-items:center}
.home-hero__txt{display:flex;flex-direction:column;gap:24px}
.home-hero .sub{font:500 56px/.98 var(--font-d);letter-spacing:-.0625em;text-transform:uppercase;max-width:640px}
.home-hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.home-hero__cta .btn--nav{height:32px;padding:0 12px;font-size:12.5px;letter-spacing:.02em}
.home-hero__resume{order:4;align-self:flex-start}
.home-hero__txt .metrics{order:5}
.home-hero__pic img{width:100%;height:auto;border-radius:0;box-shadow:none}
.metrics{display:flex;gap:40px;margin-top:10px}
.metrics b{display:block;font:500 54px/1 var(--font-d);letter-spacing:-.04em;text-transform:uppercase}
.metrics span{display:block;font:600 10px/1.4 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-top:6px}
.stack-line{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:60px;padding:20px 28px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1)}
.stack-line__g{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;padding-inline:8px}
.stack-line__g + .stack-line__g::before{content:"";position:absolute;left:-10px;top:-10px;bottom:-10px;width:1px;background:rgba(0,0,0,.14)}
.stack-line__icons{display:flex;gap:12px}
.stack-line__t{font:600 10px/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a}
.ico{position:relative;width:56px;height:56px;border-radius:56px;overflow:hidden;box-shadow:var(--fx);flex:none;corner-shape:round;transition:none}
.ico img{width:100%;height:100%;object-fit:cover}
.ico::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 76px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.92),rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 72%);
  opacity:0;transition:opacity .25s var(--ease-link);mix-blend-mode:screen}
.ico.is-lit::before{opacity:.45}
.ico::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:var(--fx-light);mix-blend-mode:plus-lighter}
.statement{font:500 clamp(36px,4.6vw,66px)/1.02 var(--font-d);letter-spacing:-.0625em;text-transform:uppercase;margin-top:24px;max-width:1100px}
.cardlist{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.svc{position:relative;display:flex;flex-direction:column;min-height:300px;padding:32px;border-radius:44px;background:var(--gray-sec);box-shadow:var(--fx)}
.svc__n{font:600 11px/1 var(--font-b);letter-spacing:.2em;color:#8a8a8a}
.svc__body{display:flex;flex-direction:column;gap:14px;margin-top:56px;padding:0 70px 60px 0}
.svc__body p{color:var(--muted);font-size:16px}
.svc__body .btn{align-self:flex-start;margin-top:6px}
.svc .h3 a{text-decoration:none}
.svc__arrow{position:absolute;left:20px;right:auto;bottom:20px;width:48px;height:48px;border-radius:48px;display:grid;place-items:center;background:rgba(255,255,255,.8);box-shadow:var(--fx);text-decoration:none;font-size:20px;transition:transform .15s var(--ease-back)}
.svc__arrow:hover{transform:scale(1.1)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.feat__card{display:flex;flex-direction:column;gap:14px;padding:36px;border-radius:44px;background:var(--gray-sec);box-shadow:var(--fx);min-height:290px}
.feat__card p{color:var(--muted);font-size:16px}
.feat__cta{margin-top:auto;align-self:center}
.content-cta{align-self:center;margin-top:12px}
.feat__card--lime{background:var(--lime)}
.feat__card--lime p{color:#3a4a10}
.feat__card--ink{background:#0a0a0a;color:#fff}
.feat__card--ink p{color:#a5a5a5}
.tools{margin-top:40px}

/* ---------- Графика ---------- */
.fishblock{background:#fff;padding-top:80px}
.fishblock__fish{width:360px;margin:0 auto 20px}
.case{padding-inline:0;text-align:center}
.case .wrap{margin-bottom:var(--gap)}
.case .eyebrow{margin:0 auto 16px}
.bigcase{position:relative;display:block;width:min(1400px,100%);margin-inline:auto;line-height:0}
.bigcase img{width:100%;height:auto;object-fit:cover;object-position:center center}
/* десктоп: контейнер 1400 px, высота – такая, чтобы перечень услуг ниже оставался на экране */
@media (min-width:861px){.bigcase img{height:min(583px,calc(var(--vh,100vh) - 300px))}}
.bigcase{cursor:zoom-in}
.beh{display:flex;justify-content:center;gap:var(--gap);margin-top:var(--gap)}
.beh__card{position:relative;flex:none;width:404px;max-width:100%;aspect-ratio:404/316}
.beh__card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.section > .h2.center{margin-top:16px}

/* ---------- карусели ---------- */
.car{position:relative}
.car__scroller{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:12px calc((100% - 1280px)/2) 24px;scroll-padding-inline:calc((100% - 1280px)/2);cursor:grab}
.car__scroller::-webkit-scrollbar{display:none}
.car__scroller.is-drag{cursor:grabbing;scroll-snap-type:none}
.car__scroller.no-snap{scroll-snap-type:none}
.car__item{position:relative;flex:none;scroll-snap-align:start;border-radius:44px;overflow:hidden;box-shadow:var(--fx);background:#ddd}
.car--center .car__item{scroll-snap-align:center}
.car__item img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.car--card .car__item{width:586px;aspect-ratio:586/434}
.car--wide{display:flex;flex-direction:column;min-height:260px}
.car--wide .car__scroller{flex:1;min-height:0;padding-block:12px}
.car--wide .car__item{height:100%;width:auto;aspect-ratio:1080/700;max-width:1080px}
.car--wide .car__nav{flex:none}
.car--photo .car__item{height:520px;width:auto;aspect-ratio:auto}
.car--photo .car__item img{width:auto;height:100%}
.car__nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.car__ctl{display:flex;align-items:center;gap:10px}
.car__btn{width:44px;height:44px;border-radius:44px;border:0;display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1;background:rgba(255,255,255,.8);box-shadow:var(--fx);transition:transform .15s var(--ease-back),opacity .2s}
.car__btn:hover{transform:scale(1.1)}
.car__btn:disabled{opacity:.35;cursor:default;transform:none}
.car__count{font:600 11px/1 var(--font-b);letter-spacing:.14em;color:#8a8a8a;margin-left:10px}
.car__dots{display:flex;gap:6px}
.car__dot{width:6px;height:6px;border-radius:6px;background:rgba(0,0,0,.22);border:0;padding:0;cursor:pointer;transition:width .3s var(--ease-link),background .3s}
.car__dot.is-on{width:22px;background:#000}
.car--wide .car__scroller{scroll-snap-type:x mandatory}
.car--flow .car__scroller,.car--flow .car__scroller.no-snap{scroll-snap-type:none !important}

/* видео-карусель */
.car--video .car__item{height:100%;width:auto;aspect-ratio:9/16;border-radius:24px;background:#111;transform:scale(.88);opacity:1;transition:transform .5s var(--ease-link),opacity .5s;cursor:pointer;scroll-snap-align:center}
.car--video .car__item.is-active{transform:none;opacity:1}
.car--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* кадр – это сам <video>: проявляется, когда пошли первые кадры, чтобы не было чёрных/белых полос */
.car--video .car__frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  background:#000;opacity:0;transition:opacity .35s var(--ease-link)}
.car--video .car__frame.is-live{opacity:1}
.car__tag{position:absolute;left:12px;top:12px;z-index:2;height:36px;padding:6px 14px;border-radius:36px;display:inline-flex;align-items:center;
  background:var(--glass-fill);color:#0a0a0a;box-shadow:var(--btn-fx);
  font:600 14px/17.6px var(--font-b);letter-spacing:.66px;text-transform:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.car__tag span{text-shadow:0 0 10px rgba(255,255,255,.55)}
.car__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px 18px 20px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));display:flex;flex-direction:column;gap:4px;border-radius:0 0 24px 24px}
.car__cap b{font:500 26px/1 var(--font-d);letter-spacing:-.02em;text-transform:uppercase}
.car__cap span{font:600 10px/1.3 var(--font-b);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.car__progress{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:3px;
  background:var(--lime);z-index:3;transform:scaleX(0);transform-origin:left center;will-change:transform}
.hero--arvid{padding-bottom:20px}
.hero--arvid .car--video{margin-top:-60px;position:relative;z-index:2;flex:none;min-height:300px}
.hero--arvid .car__scroller{position:relative;height:100%;padding-block:0;scroll-padding-inline:0}
.hero--arvid .car__nav{position:absolute;right:calc((100% - 1280px)/2);bottom:8px;z-index:6;flex-direction:column;align-items:flex-end;gap:12px;width:auto}
/* ---------- блок «Создаю цифровую эстетику…» – как было до экспериментов ---------- */
.aboutglass{position:absolute;z-index:5;left:calc((100% - 1280px)/2 - 80px);top:50%;transform:translateY(-50%);
  width:470px;max-height:calc(100% - 20px);overflow:auto;padding:24px;border-radius:36px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--shadow-frame);display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.aboutglass::-webkit-scrollbar{display:none}
.aboutglass p{font-size:16px;line-height:1.5;color:#1c1c1c}
.aboutglass .label{margin:6px 0 0;color:#444}

/* клиенты */
.clients-sec{min-height:calc(var(--vh,100vh)*.6);display:flex;flex-direction:column;justify-content:center;padding:var(--sec) 0}
.clients-sec .eyebrow{margin-bottom:20px}
.clients{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.clients__track{display:flex;align-items:center;gap:100px;width:max-content;padding:20px 50px;animation:marquee 40s linear infinite}
.clients__track img{height:150px;width:auto;max-width:400px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.clients__track img.inv{filter:brightness(0);mix-blend-mode:normal}
.clients:hover .clients__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-25%)}}

/* ---------- pinned-панели ---------- */
/* pinned-блок: весь экран «замораживается», движутся только карточки-пункты */
.section--pin{padding:0;min-height:0;display:block}
.pinwrap{height:calc(var(--vh,100vh)*(1 + var(--n,4)*.5))}
.pinstage{position:sticky;top:0;height:var(--vh,100vh);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pinstage__in{position:relative;z-index:1;height:100%;padding-block:128px 36px;display:flex;flex-direction:column;gap:var(--gap)}
.pinstage .sechead{margin-bottom:0;flex:none}
.pin__grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:var(--gap)}
.pin__panel{position:relative;height:100%;min-height:0;border-radius:44px;overflow:hidden;background:#111;box-shadow:var(--fx);color:#fff}
.pin__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .6s var(--ease-link),transform 1.2s var(--ease-link)}
.pin__img.is-on{opacity:1;transform:none}
.pin__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.65))}
.pin__cap{position:absolute;left:28px;bottom:26px;font:500 44px/1 var(--font-d);letter-spacing:-.0625em;text-transform:uppercase}
.pin__panel--type{background:#0a0a0a;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.pin__panel--type .pin__cap{position:static}
.pin__num{font:500 clamp(140px,18vw,260px)/.8 var(--font-d);letter-spacing:-.0625em;color:var(--lime)}
.pin__steps{position:relative;height:100%;min-height:0;overflow:hidden}
.pin__list{display:flex;flex-direction:column;gap:var(--gap);padding-block:var(--gap);will-change:transform}
.step{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px;min-height:280px;border-radius:44px;background:rgba(255,255,255,.7);box-shadow:var(--shadow-frame);opacity:.4;transition:opacity .5s var(--ease-link)}
.step.is-on{opacity:1}
.step p{color:var(--muted);font-size:16px}
.step__n{font:600 11px/1 var(--font-b);letter-spacing:.2em;color:#8a8a8a}
.sec--dark{background:#000;color:#fff;overflow:clip}
.sec--dark .h2,.sec--dark .h3{text-shadow:none}
/* «Преимущества моих работ»: тёмная стеклянная подложка как была + тени */
.sec--dark .step{position:relative;overflow:hidden;
  background:linear-gradient(152deg,rgba(128,128,128,.40),rgba(128,128,128,.30) 42%,rgba(128,128,128,.24) 64%,rgba(128,128,128,.36));
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:var(--fx)}
.sec--dark .step p,.sec--dark .lead{color:#b8b8b8}
.sec--dark .eyebrow{color:#aaa}
.dark__bg{position:absolute;inset:0;z-index:0}
.dark__bg i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:none;transition:opacity 1s}
.dark__bg i.is-on{opacity:.15}   /* 15 % поверх чёрной подложки, без размытия */
.sec--dark > .wrap{position:relative;z-index:1}
.pinstage .dark__bg{z-index:0}
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.pipe__card{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:36px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);min-height:260px}
.pipe__card .n{font:500 64px/1 var(--font-d);letter-spacing:-.06em;color:var(--lime)}
.pipe__card p{color:#a8a8a8;font-size:16px;margin-top:auto}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.cmp__card{display:flex;flex-direction:column;gap:14px;padding:36px;border-radius:44px;background:#fff;box-shadow:var(--fx);min-height:300px}
.cmp__card p{color:var(--muted);font-size:16px;margin-top:auto}
.cmp__card--lime{background:var(--lime)}
.cmp__card--lime p{color:#3a4a10}

/* ---------- формы ---------- */
.formsec{padding:var(--sec) 0;min-height:var(--vh,100vh);display:flex;flex-direction:column;justify-content:center}
.formcard{--fg:#0a0a0a;--glass:rgba(255,255,255,.45);--glass-b:rgba(255,255,255,.7);--fl:rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:var(--gap);padding:60px;border-radius:60px;background:#e9ebe6;color:var(--fg);box-shadow:var(--fx)}
.formcard[data-theme=design]{background:var(--blue-gfx)}
.formcard[data-theme=ar]{--fg:#fff;--glass:rgba(255,255,255,.14);--glass-b:rgba(255,255,255,.3);--fl:rgba(255,255,255,.75);background:linear-gradient(160deg,#4a86ff,#1e55e6)}
.formcard[data-theme=ai]{--fg:#0a0a0a;--glass:rgba(255,255,255,.5);--glass-b:rgba(255,255,255,.75);--fl:rgba(0,0,0,.55);background:#f0f2ee}
.formcard .eyebrow{color:var(--fl)}
.formcard__title{font-size:72px;text-shadow:none}
.formcard__title--2{margin-top:30px;font-size:56px}
.formcard[data-theme=ar] .formcard__title{color:#fff}
.lform{display:flex;flex-direction:column;gap:var(--gap)}
.lform__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.glass{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:36px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--fx)}
.row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;position:relative}
.row--chips,.row--date,.row--area{align-items:start}
.row__l{font:600 10px/1.4 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--fl);padding-top:12px}
.row input[type=text],.row textarea,.row input[type=date]{width:100%;height:42px;padding:0 16px;border:0;border-radius:42px;background:rgba(255,255,255,.85);color:#111;font:500 14px/1 var(--font-b);outline:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .2s}
.row input:focus,.row textarea:focus{box-shadow:inset 0 0 0 2px #000}
.row input::placeholder,.row textarea::placeholder{color:#999}
.row textarea{height:110px;padding:14px 18px;border-radius:26px;resize:vertical;line-height:1.5}
.row--area{grid-template-columns:150px 1fr}
.row.is-err input{box-shadow:inset 0 0 0 2px #e5392b}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{height:36px;padding:6px 14px;border:0;border-radius:36px;font:600 14px/17.6px var(--font-b);letter-spacing:.66px;text-transform:none;cursor:pointer;transition:transform .15s var(--ease-back)}
.opt:active{transform:scale(.97)}
.row input[type=date]{width:auto;height:36px;min-width:196px;padding:6px 14px;border-radius:36px;background:var(--glass-fill);color:#0a0a0a;font:600 14px/17.6px var(--font-b);letter-spacing:.66px;box-shadow:var(--btn-fx);cursor:pointer;text-shadow:0 0 10px rgba(255,255,255,.55);-webkit-appearance:none;appearance:none}
.row input[type=date]::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer}
/* цифры в поле даты – как текст кнопок: чёрные с мягкой тенью */
.row input[type=date]::-webkit-datetime-edit,
.row input[type=date]::-webkit-datetime-edit-fields-wrapper,
.row input[type=date]::-webkit-datetime-edit-text,
.row input[type=date]::-webkit-datetime-edit-day-field,
.row input[type=date]::-webkit-datetime-edit-month-field,
.row input[type=date]::-webkit-datetime-edit-year-field{color:#0a0a0a;text-shadow:0 0 10px rgba(255,255,255,.55)}
.row input[type=date]:invalid::-webkit-datetime-edit{color:#0a0a0a}
.row input[type=date]:hover{box-shadow:var(--btn-fx)}
.row input[type=date].is-on{background:#caf865;color:#0a0a0a;text-shadow:0 0 10px rgba(255,255,255,.6)}

.lform__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.consent{font-size:11px;opacity:.7;max-width:420px}
.contacts{display:flex;flex-direction:column;gap:12px}
.crow{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:14px;padding:18px 26px;border-radius:30px;background:var(--glass);border:1px solid var(--glass-b);text-decoration:none;box-shadow:var(--fx);transition:transform .2s var(--ease-back)}
.crow:hover{transform:translateX(6px)}
.crow span{font:600 10px/1 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--fl)}
.crow b{font-size:16px}
.crow i{font-style:normal;font-size:18px}
.contacts .btn{align-self:flex-start;margin-top:10px}

/* ---------- футер ---------- */
.foot{position:relative;isolation:isolate;background:#ececec;padding-top:var(--sec);overflow:hidden;min-height:var(--vh,100vh);display:flex;flex-direction:column}
.foot__top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot__brand{display:flex;align-items:center;gap:20px;min-width:0}
.foot__brand p{font-size:13px;color:#777;max-width:360px;order:1}
.foot__brand img{width:150px;height:auto;order:2;flex:none}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:start}
/* ---------- переключатель языка в футере, справа на строке с брендом ---------- */
.lang{position:relative;flex:none;margin-left:auto;display:flex;align-items:center}
.lang__btn{height:36px;min-width:64px;padding:6px 14px;border-radius:36px;justify-content:center;font:600 14px/17.6px var(--font-b);letter-spacing:.66px}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:8;
  display:flex;flex-direction:column;gap:2px;min-width:176px;
  padding:8px;border-radius:22px;background:#fff;box-shadow:var(--fx)}
.lang__menu[hidden]{display:none}
.lang__menu button{display:block;width:100%;padding:9px 12px;border:0;border-radius:14px;background:transparent;
  font:600 12px/1.2 var(--font-b);text-align:left;cursor:pointer;text-transform:none}
.lang__menu button:hover{background:#f2f2f0}
.lang__menu button[aria-selected=true]{background:#caf865}
.foot h4{font:600 10px/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a;margin-bottom:16px}
.foot li{margin-bottom:8px}
.foot li a,.foot__soc a{text-decoration:none;font-size:14px}
.foot li a:hover,.foot__soc a:hover{text-decoration:underline}
.foot__soc{display:flex;flex-direction:column;gap:8px}
.foot__word{position:relative;width:100%;margin-top:auto;--fw:200px;height:calc(var(--fw)*1.02);overflow:hidden;cursor:default}
.foot__word b{position:absolute;left:0;right:0;top:0;width:100%;text-align:center;z-index:auto;
  font:600 var(--fw)/1 var(--font-b);letter-spacing:-.04em;white-space:nowrap;color:var(--hdr-white);user-select:none}
/* слово держим в inline-block (без своего stacking context), чтобы буквы могли
   быть и позади, и перед рыбой */
.foot__word .fw-word{display:inline-block;position:static;z-index:auto}
.foot__word .fw-word span{position:relative;z-index:1}   /* le n q ue – позади рыбы */
.foot__word .fw-word span.fw-front{z-index:3}            /* d и i – перед рыбой */
.foot__fish{position:absolute;left:0;top:0;width:calc(var(--fw)*.8);z-index:2;opacity:0;will-change:transform;pointer-events:none}
.foot__fish img{width:100%;height:auto}
.foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 28px;font-size:12px;color:#777;border-top:1px solid rgba(0,0,0,.08);margin-top:0;position:relative;z-index:3}
.foot__bar a{text-decoration:underline}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-link),transform .8s var(--ease-link)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.clients__track{animation:none}}

/* ---------- мобильная версия ---------- */
@media (max-width:1100px){
  /* мобильная шапка: возврат + логотип + «Обсудить проект» в строке,
     под ними – все категории сеткой в три столбца.
     вместо размытия – градиент от прозрачного к белому, появляется при прокрутке */
  .nav__in{flex-wrap:nowrap;gap:8px;padding:8px var(--pad)}
  .logo,.logo img{width:84px}
  .nav__back{width:32px;height:32px;font-size:14px}
  .nav__cta{display:none}
  .nav__cta-mob{display:none}
  .nav__links{flex:1 1 auto;justify-content:flex-start;padding:14px 12px;margin:-14px -12px}
  .nav__links .btn--nav{height:30px;padding:0 10px;font-size:11px}
  /* мобильная шапка: аддитивный блик на тонких пилюлях давал
     белую светящуюся полосу поверх подложки – на мобиле слой выключен */
  .nav .opt::after,.nav__back::after{display:none}
  .home-hero__cta .btn--nav{height:30px;padding:0 10px;font-size:11px}   /* в герое – как пункты меню */
  .nav__sep{width:1px;height:16px}
  .hero,.home-hero{padding-top:112px}
  .home-hero__grid{grid-template-columns:1fr}
  .home-hero__pic{order:-1;width:80%;max-width:80%;margin-inline:auto}
  .pipe{grid-template-columns:1fr 1fr}
  .foot__cols{gap:16px}
  .car--wide .car__item{width:86vw}
  .lang__btn{height:36px;padding:6px 14px;font:600 14px/17.6px var(--font-b)}
  .lang__menu{min-width:156px;right:0}
}
@media (max-width:720px){
  .hero,.home-hero,.section,.formsec,.clients-sec{min-height:0}
  .section{display:block}
  .heroimg{height:auto !important}
  .heroimg__in{height:auto;width:100%}
  .heroimg__pic{height:auto}
  /* «Графический дизайн»: расположение отдельных рыб сохраняет исходный масштаб;
     слой ниже поднимает всю розовую композицию целиком к подписи направления. */
  .hero--design .hero__fishes{display:none}
  .hero--design .heroimg__in{position:static}
  .hero--design .pfish{opacity:1;z-index:3;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important}
  .hero--design .pfish--1{width:300px !important;left:calc(-16% - 90px) !important;top:calc(var(--vh,100vh) * .17 - 80px) !important}
  .hero--design .pfish--2{width:328px !important;right:calc(-18% - 20px) !important;top:calc(var(--vh,100vh) * .25) !important}
  .hero--design .pfish--3{width:268px !important;left:calc(-14% + 40px) !important;top:calc(var(--vh,100vh) * .65 - 120px) !important}
  .car--wide,.hero--arvid .car--video{height:auto !important;margin-top:0;display:block}
  .car--wide .car__item{height:auto;width:86vw}
  .hero--arvid .car--video .car__item{height:auto;width:62vw}
  .hero--arvid .car__nav{position:static;flex-direction:row;padding-inline:20px;width:auto}
  .aboutglass{position:static;transform:none;width:auto;max-height:none;margin:20px 20px 0}
  .section--pin{padding:60px 0}
  .pinwrap{height:auto}
  .pinstage{position:static;height:auto;overflow:visible}
  .pinstage__in{height:auto;padding-block:0}
  .pin__grid{display:flex;flex-direction:column}
  .pin__panel{display:none}
  .pin__steps{overflow:visible;height:auto}
  .pin__list{padding-block:0}
  .step{min-height:0;opacity:1}

  html{zoom:1;scroll-padding-top:172px}
  :root{--pad:20px;--sec:60px}
  .logo,.logo img{width:84px;height:auto}
  .hero{padding-top:170px}
  .h1{font-size:64px}
  .h1--fit{white-space:normal;padding-inline:20px;line-height:.95}
  .h1--fit span{display:block}
  .h2{font-size:48px}.h2--m{font-size:42px}
  .home-hero{padding-top:170px}
  .home-hero .sub{font-size:38px}
  .home-hero__resume{order:9;align-self:center;margin-top:4px}
  .foot__fish{width:calc(var(--fw)*1.2)}
  .metrics{gap:20px;flex-wrap:wrap}.metrics b{font-size:40px}
  .stack-line{flex-wrap:wrap;justify-content:center;padding:20px 8px}
  .stack-line__g + .stack-line__g::before{display:none}
  .ico{width:46px;height:46px}
  .cardlist,.feat,.cmp,.pipe,.beh,.lform__cols{grid-template-columns:1fr}
  .hero__meta{grid-template-columns:1fr}
  .kv{flex-wrap:wrap;gap:20px}
  .car__scroller{padding-inline:20px;scroll-padding-inline:20px}
  .car--card .car__item{width:82vw}
  .car--photo .car__item{height:420px}
  .pin__panel{border-radius:30px}
  .pin__num{font-size:110px}
  .pin__cap{font-size:30px !important}
  .step{padding:24px;border-radius:30px}
  .formsec > .wrap{padding-inline:0}
  .formcard{padding:32px 20px;border-radius:0;box-shadow:none}
  .formcard__title{font-size:36px;overflow-wrap:anywhere}.formcard__title--2{font-size:34px}
  .lead,.hero__lines--b{text-align:left;hyphens:manual}
  .glass{padding:18px;border-radius:28px}
  .row,.row--area{grid-template-columns:1fr;gap:8px}
  .row__l{padding-top:0}
  .crow{grid-template-columns:1fr auto;padding:16px 18px}
  .crow span{grid-column:1/-1}
  .foot__top{flex-direction:row;align-items:flex-start;gap:14px}
  .foot__brand{flex-direction:column;align-items:flex-start;gap:10px}
  .foot__brand img{display:none}   /* на мобиле логотип в футере не нужен */
  .foot__brand p{font-size:12px;max-width:230px}
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
  .foot__cols li a,.foot__cols .foot__soc a{font-size:12px}
  .foot h4{font-size:9px;letter-spacing:.14em}
  .svc,.feat__card,.cmp__card{border-radius:30px;padding:24px}
  .svc__body{padding-right:0;margin-top:32px;padding-bottom:54px}
  .bigcase .btn{bottom:4%}
  .beh{flex-direction:column;align-items:center}
  .crow b{min-width:0;overflow-wrap:anywhere}
  .lform__actions .btn,.contacts .btn{width:100%;white-space:normal;text-align:center}
  .row input[type=date]{max-width:100%;min-width:0}
  .h1{font-size:clamp(40px,10vw,64px);overflow-wrap:anywhere}
  .h2{font-size:clamp(36px,10vw,48px);overflow-wrap:anywhere}
}

.mail{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mail.is-open{opacity:1;visibility:visible}
.mail__box{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:44px;padding:30px 32px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:translateY(14px) scale(.98);transition:transform .35s var(--ease-link)}
.mail.is-open .mail__box{transform:none}
.mail__top{display:flex;justify-content:space-between;align-items:center}
.mail__meta{display:grid;grid-template-columns:70px 1fr;gap:6px 14px;font-size:12px}
.mail__meta span{font:500 9px/1.8 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}
.mail__meta b{word-break:break-word}
.mail textarea{width:100%;min-height:260px;padding:16px 18px;border:0;border-radius:24px;background:#f4f5f2;font:500 12.5px/1.6 var(--font-b);resize:vertical;outline:0;box-shadow:inset 0 0 0 1px #e8e8e8}
.mail__btns{display:flex;flex-wrap:wrap;gap:10px}
.mail__note{font-size:11px;color:#8a8a8a}


/* ---------- v5 ---------- */
@media (min-width:721px){.h2--m{white-space:nowrap}}
.nav .btn--nav{flex:none}
/* галереи: непрерывное движение (transform), картинки закрывают свободное место секции */
.car--flow .car__scroller{overflow:hidden;touch-action:pan-y;scroll-snap-type:none}
.car__track{display:flex;gap:var(--gap);position:relative;height:100%;will-change:transform}
.car--flow .car__item{scroll-snap-align:none}
@media (min-width:721px){
  .section > .car--card,.section > .car--photo{flex:1 1 0;min-height:340px;display:flex;flex-direction:column}
  .section > .car--card .car__scroller,.section > .car--photo .car__scroller{flex:1 1 0;min-height:0;position:relative}
  .section > .car--card .car__track,.section > .car--photo .car__track{position:absolute;top:12px;bottom:24px;left:calc((100% - 1280px)/2);height:auto}
  .section > .car--card .car__item{height:100%;width:auto;aspect-ratio:586/434}
  .section > .car--photo .car__item{height:100%;width:auto}
  .section > .car--photo .car__item img{height:100%;width:auto}
  .section > .car__nav,.section > .car--card .car__nav,.section > .car--photo .car__nav{flex:none}
}
@media (max-width:720px){
  .nav__back{position:static;margin:0 8px 0 0;flex:none}
  .foot{min-height:0;display:block}
  .mail__box{padding:24px 20px;border-radius:30px}
  .mail__btns > *{width:100%}
}

/* ---------- «понимаю английский» в контактах (версии кроме RU и EN) ---------- */
.foot__en{color:var(--muted);font-size:12px;line-height:1.35;max-width:230px;padding-top:8px}

/* ---------- арабская версия: направление справа налево ---------- */
html[lang="ar"] body{font-family:"Montserrat","Noto Sans Arabic",system-ui,"Segoe UI",sans-serif}
[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .kick,
[dir="rtl"] .eyebrow,[dir="rtl"] .btn,[dir="rtl"] .opt{letter-spacing:0}
[dir="rtl"] .h1{line-height:1.12}
[dir="rtl"] .hero__fishes{transform:scaleX(-1)}
[dir="rtl"] .foot__bar{gap:10px}
[dir="rtl"] .lang{margin-left:0;margin-right:auto}
[dir="rtl"] .lang__menu{right:auto;left:0}

/* ==========================================================================
   РЕЗЮМЕ (resume.html)
   ========================================================================== */
/* ---------- резюме: типографика, акцент и кнопки сайта; контент — в ATS-понятной иерархии ---------- */
.cv{position:relative;padding:calc(var(--navh,80px) + 56px) 0 90px;background:#fff}
.cv__head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:40px;align-items:end;
  margin-bottom:42px;padding:42px 46px;border-radius:44px;background:linear-gradient(160deg,#fff 0%,#f7faef 55%,#eaf7d8 100%);
  border:1px solid rgba(0,0,0,.07);box-shadow:var(--fx);overflow:hidden}
.cv__identity,.cv__head-actions{position:relative;z-index:1}
.cv__identity{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cv__identity .eyebrow{margin:0}
.cv__head .h1{margin:0;text-align:left;font-size:clamp(64px,8vw,112px);line-height:.88;letter-spacing:-.055em}
.cv__role{font:600 clamp(16px,1.5vw,20px)/1.3 var(--font-b);color:#111}
.cv__role span{color:#7a9c34}
.cv__location{font-size:14px;color:var(--muted)}
.cv__head-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
.cv__contact-links{display:flex;flex-wrap:wrap;gap:8px 16px;width:100%;margin-top:6px}
.cv__contact-links a{font-size:13px;color:#222;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.22);transition:border-color .2s}
.cv__contact-links a:hover{border-color:#111}
.cv__content{max-width:1080px;margin-inline:auto;padding-inline:12px}
.cv__section{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:34px;padding:27px 0;border-bottom:1px solid rgba(0,0,0,.11)}
.cv__section > .h3{position:relative;align-self:start;margin:0;padding-top:2px;font-size:24px;line-height:1.05;letter-spacing:-.02em}
.cv__section > .h3::before{content:"";display:block;width:26px;height:4px;margin-bottom:12px;border-radius:4px;background:var(--lime)}
.cv__section-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.cv__section-body p{font-size:15px;line-height:1.58;color:#303030}
.cv__note{font-size:13px!important;color:var(--muted)!important}
.cv__job{display:flex;flex-direction:column;gap:12px}
.cv__job-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.cv__job-head h3{font:600 16px/1.35 var(--font-b);color:#111}
.cv__job-head p{flex:none;font:600 11px/1.3 var(--font-b);letter-spacing:.08em;color:#747474;text-transform:uppercase}
.cv__bullets{display:flex;flex-direction:column;gap:8px}
.cv__bullets li{position:relative;padding-left:18px;font-size:14px;line-height:1.55;color:#333}
.cv__bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cv__skill-groups{display:flex;flex-direction:column;gap:12px}
.cv__skill-groups > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.06)}
.cv__skill-groups > div:last-child{padding-bottom:0;border-bottom:0}
.cv__skill-groups dt{font:600 12px/1.5 var(--font-b);letter-spacing:.04em;color:#111}
.cv__skill-groups dd{font-size:14px;line-height:1.55;color:#444}
.cv__section-body b{font-weight:600;color:#111}
.cv__section--last{border-bottom:0}
.cv__details{gap:8px}
.cv__cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;
  padding:34px 40px;border-radius:44px;background:var(--lime);box-shadow:var(--btn-fx)}
.cv__cta .eyebrow{margin:0 0 10px;color:#4e641e}
.cv__cta .h2{margin:0;font-size:clamp(34px,4vw,52px)}
.cv__cta .lead{max-width:580px;margin-top:8px;color:#2a3312;text-align:left}
.cv__cta .cv__btns{display:flex;flex-wrap:wrap;gap:8px;margin:0;flex:none}

@media (max-width:900px){
  .cv__head{grid-template-columns:1fr;gap:24px}
  .cv__head-actions{max-width:640px}
  .cv__cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:720px){
  .cv{padding:calc(var(--navh,80px) + 30px) 0 56px}
  .cv__head{gap:22px;margin-bottom:20px;padding:28px 22px;border-radius:30px}
  .cv__head .h1{font-size:clamp(56px,16vw,82px)}
  .cv__contact-links{gap:8px 14px}
  .cv__content{padding-inline:10px}
  .cv__section{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .cv__section > .h3{font-size:22px}
  .cv__section > .h3::before{display:inline-block;vertical-align:middle;margin:0 9px 3px 0}
  .cv__section-body p{font-size:14px}
  .cv__job-head{align-items:flex-start;flex-direction:column;gap:4px}
  .cv__skill-groups > div{grid-template-columns:1fr;gap:3px}
  .cv__cta{gap:18px;margin-top:20px;padding:28px 22px;border-radius:30px}
  .cv__cta .cv__btns,.cv__cta .btn{width:100%}
  .cv__cta .btn{text-align:center}
}

/* ==========================================================================
   ВЕРХНИЙ РЕГИСТР: пункты меню, кнопки в герое, «Скачать резюме», «Обсудить проект»
   ========================================================================== */
.btn--nav,.btn--nav *,
.nav__links a,.nav__links a *,
.home-hero__cta .btn,.home-hero__cta .btn *,
.btn--lime,.btn--lime *{text-transform:uppercase!important}

/* ---------- аватарка на главной: на 60 px выше (только мобильная версия) ---------- */
/* поднимаем всю колонку, а не только картинку – иначе под аватаркой остаётся пустые 60px */
@media (max-width:720px){.home-hero__pic{position:static;top:auto;margin-top:-60px}}

/* ---------- лайтбокс превью кейса ---------- */
.lb{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb[hidden]{display:none}
.lb__bar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:center;padding:14px;pointer-events:none}
.lb__bar .btn{pointer-events:auto}
.lb__scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:66px 16px 28px;text-align:center;scrollbar-width:thin}
.lb__img{width:min(1200px,100%);height:auto;border-radius:44px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:inline-block}
body.lb-open{overflow:hidden}

/* ---------- картинки и видео: как кнопки-пилюли (референс: строки контактов) ---------- */
.car__item,.bigcase{border-radius:24px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--fx)}
.car__item::after,.bigcase::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:var(--fx-light);mix-blend-mode:plus-lighter}

.bigcase{overflow:hidden}
.car__tag{z-index:3}

/* видео: кадр ровно по контейнеру */
.car--video .car__item{background:#000;overflow:hidden;isolation:isolate}
.car--video .car__item > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* ==========================================================================
   ДЕСКТОП: пункты меню по центру шапки, «Обсудить проект» – у правого края
   ========================================================================== */
@media (min-width:1101px){
  .nav__in{position:relative}
  .nav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    margin:0;max-width:min(820px,calc(100% - 400px));flex:none}
  .nav__cta{margin-left:auto;margin-right:0}
}

/* ==========================================================================
   БЕЛЫЕ ТЕНИ = СЛОЙ С НАЛОЖЕНИЕМ plus-lighter (по всему сайту)
   Белые inset-блики больше не лежат в box-shadow элемента: они вынесены
   в отдельный слой ::after с mix-blend-mode:plus-lighter (фолбэк lighten).
   На тёмном фоне блик складывается и светится, а не даёт серую вуаль.
   ========================================================================== */
/* кнопки-пилюли (кнопочный стек) */
.btn--nav,.opt,.btn--lime,.nav__links a,.car__tag,.cv__meta,.cv .chip,.cv__cta{position:relative}
.btn--nav::after,.opt::after,.btn--lime::after,.nav__links a::after,
.car__tag::after,.cv__meta::after,.cv .chip::after,.cv__cta::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;
  box-shadow:var(--btn-light);mix-blend-mode:plus-lighter}

/* пункты меню: наложение обычное (normal), но белый блик – «HDR»,
   то есть максимально плотный, без серой полупрозрачности */
.nav .btn--nav::after,.nav__links a::after,.nav .opt::after{
  mix-blend-mode:plus-lighter;
  box-shadow:
    inset 0 1px .5px var(--hdr-white),
    inset 0 .5px .5px var(--hdr-white),
    inset 0 8px 6px -5px var(--hdr-white),
    inset 0 -8px 1px -5px var(--hdr-white-soft)}

/* контейнеры и круглые кнопки (стек из Figma) */
.svc,.svc__arrow,.feat__card,.pin__panel,.step,.cmp__card,.glass,.crow,
.cv__head,.car__btn,.ico,.lang__menu{position:relative}
.svc::after,.svc__arrow::after,.feat__card::after,.pin__panel::after,
.step::after,.cmp__card::after,.glass::after,.crow::after,
.cv__head::after,.car__btn::after,.ico::after,.lang__menu::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;
  box-shadow:var(--fx-light);mix-blend-mode:plus-lighter}

/* белая кнопка «назад»: белый блик – отдельным слоем */
.nav__back::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px .5px rgba(255,255,255,.75);mix-blend-mode:plus-lighter}
.nav__back{box-shadow:0 2px 6px rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.06)!important}

/* поля ввода – псевдоэлементы не рендерятся, поэтому белый блик остаётся в тени */
.row input[type=date],.row input[type=date]:hover{box-shadow:var(--btn-fx),var(--btn-light)}

/* браузеры без mix-blend-mode:plus-lighter */
@supports not (mix-blend-mode:plus-lighter){
  .btn--nav::after,.opt::after,.btn--lime::after,.nav__links a::after,.car__tag::after,
  .cv__meta::after,.cv .chip::after,.cv__cta::after,.svc::after,.svc__arrow::after,
  .feat__card::after,.pin__panel::after,.step::after,.cmp__card::after,.glass::after,
  .crow::after,.cv__head::after,.car__btn::after,.ico::after,.lang__menu::after,
  .cv__block::after,.nav__back::after{
    mix-blend-mode:plus-lighter}
}

/* «Клиенты»: снизу ровно 60 px до блока «Что именно делается» */
.clients-sec{padding-bottom:0;margin-bottom:60px}
.clients-sec + .section--pin{padding-top:0}

/* ---------- мобильные отступы от шапки ---------- */
@media (max-width:1100px){
  /* логотип на 10 px левее, контейнер меню – на 10 px шире влево */
  .logo{margin-left:-10px}
  .nav__links{padding-left:22px;margin-left:-22px}

  /* страницы направлений: от меню до героя ровно 40 px */
  .page-graphic .hero,.page-ar .hero,.page-ai .hero{padding-top:calc(var(--navh,75px) + 40px)}

  /* главная: аватарка в 20 px от меню и 20 px до заголовка */
  .home-hero{padding-top:calc(var(--navh,75px) + 20px)}
  .home-hero__pic{margin-top:0;margin-bottom:20px}
}

/* ==========================================================================
   ЕДИНЫЙ РАЗМЕР ПИЛЮЛЬ = РАЗМЕР ПУНКТОВ МЕНЮ
   (десктоп 32 px · 12.5 px · padding 0 12px, мобила 30 px · 11 px)
   ========================================================================== */
.opt,.car__tag,.lang__btn,.cv__meta,.cv .chip,.btn--lg,.btn--sm{
  height:32px;padding:0 12px;border-radius:32px;
  font:600 12.5px/1 var(--font-b);letter-spacing:.02em}
.opt,.car__tag{display:inline-flex;align-items:center;justify-content:center}
.row input[type=date]{height:32px;min-width:180px;padding:0 12px;border-radius:32px;
  font:600 12.5px/1 var(--font-b);letter-spacing:.02em}

@media (max-width:1100px){
  .opt,.car__tag,.lang__btn,.cv__meta,.cv .chip,.btn--lg,.btn--sm{
    height:30px;padding:0 10px;border-radius:30px;font:600 11px/1 var(--font-b)}
  .row input[type=date]{height:30px;min-width:160px;padding:0 10px;border-radius:30px;
    font:600 11px/1 var(--font-b)}
}

/* ==========================================================================
   ТЕНИ ПИЛЮЛЬ = ТЕНИ ПУНКТОВ МЕНЮ (чёрные + белые, HDR через plus-lighter)
   ========================================================================== */
.btn--nav,.opt,.btn--lime,.nav__links a,.car__tag,.cv__meta,.cv .chip,.cv__cta,
.lang__btn,.btn--lg,.btn--sm{position:relative;box-shadow:var(--btn-fx)}
.btn--nav::after,.opt::after,.btn--lime::after,.nav__links a::after,.car__tag::after,
.cv__meta::after,.cv .chip::after,.cv__cta::after,.lang__btn::after,
.btn--lg::after,.btn--sm::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;mix-blend-mode:plus-lighter;
  box-shadow:
    inset 0 1px .5px var(--hdr-white),
    inset 0 .5px .5px var(--hdr-white),
    inset 0 8px 6px -5px var(--hdr-white),
    inset 0 -8px 1px -5px var(--hdr-white-soft)}

/* мобильная шапка: у тонких пилюль аддитивный блик убираем */
@media (max-width:1100px){
  .nav .opt::after,.nav__back::after{display:none}
}

/* ---------- заголовок на главной: на 20 px выше ---------- */
.home-hero .sub{margin-top:-20px}

/* ---------- «островки»: белые тени как в блоке заявок ---------- */
.aboutglass,.formcard,.pipe__card,.svc,.feat__card,.cmp__card,.step,.glass,.crow{box-shadow:var(--fx)}
.formcard,.pipe__card,.svc,.feat__card,.cmp__card,.step,.glass,.crow{position:relative}
.aboutglass::after,.formcard::after,.pipe__card::after,.svc::after,.feat__card::after,
.cmp__card::after,.step::after,.glass::after,.crow::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;mix-blend-mode:plus-lighter;box-shadow:var(--fx-light)}

/* ---------- мобила: направления сразу в меню, без появления по скроллу ---------- */
@media (max-width:1100px){
  .page-home .nav__dir{display:inline-flex}
  .page-home .nav__sep{display:block}
}

/* ---------- hero «Графика»: изображение до 1400 px, высота под остаток экрана ---------- */
@media (min-width:721px){
  .hero--design .heroimg{flex:0 0 auto;min-height:0;max-height:420px;width:100%;padding-inline:0}
  .hero--design > .wrap:last-child{margin-top:auto}
  .hero--design .heroimg__in{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);width:min(1400px,100%);max-width:100%;min-width:0;height:100%;min-height:0;overflow:hidden}
  .hero--design .heroimg__pic{width:100%;min-width:100%;height:100%;object-fit:cover;object-position:center center}
  /* Рыбы масштабируются и раскладываются относительно экрана, как в референсе. */
  .hero--design .pfish--1{left:18vw;right:auto;top:44%;bottom:auto;width:19vw;scale:2;transform-origin:center center}
  .hero--design .pfish--2{left:43vw;right:auto;top:calc(2% - 13vw);bottom:auto;width:27vw;scale:2;transform-origin:center center}
  .hero--design .pfish--3{left:calc(64vw + 40px);right:auto;top:calc(74% - 3.2vw);bottom:auto;width:13vw;scale:2;transform-origin:center center}
}
.hero--design .heroimg__fish-layer{position:absolute;z-index:3;inset:0;width:100%;height:100%;transform:translateX(50px);pointer-events:none;overflow:visible}
.hero--design .heroimg__fish-layer .pfish{z-index:1}
@media (max-width:720px){
  .hero--design .heroimg__fish-layer{inset:0 auto 0 50%;width:100%;height:auto;transform:translate(calc(-50% + 20px),var(--fish-mobile-shift,0px))}
}

/* ---------- футер: сначала логотип, потом подпись ---------- */
.foot__brand img{order:1}
.foot__brand p{order:2}

/* ==========================================================================
   ГЕРОЙ ГЛАВНОЙ: «домино» – по очереди слева направо кнопки Графика → AR → AI
   вспыхивают зелёным. Проигрывается один раз при открытии страницы.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .home-hero__cta .btn--nav{animation:ctaDomino 1.1s var(--ease-link) both}
  .home-hero__cta .btn--nav:nth-child(1){animation-delay:.35s}
  .home-hero__cta .btn--nav:nth-child(2){animation-delay:.52s}
  .home-hero__cta .btn--nav:nth-child(3){animation-delay:.69s}
}
@keyframes ctaDomino{
  0%,100%{background-color:var(--glass-fill);color:#0a0a0a}
  30%,70%{background-color:#caf865;color:#0a0a0a}
}