/* ISKRA digital — первый экран главной. Макет: Figma h0Iwvl2ABU8Z0brFf4Oe4L, фрейм 84:2 (1440).
   Токены — те же, что в СТИЛЬ.md. */

/* у шрифта стоит USE_TYPO_METRICS, Chrome берёт typo-метрики (800/200), Figma — hhea (1024/236).
   Переопределяем, чтобы базовая линия совпала с макетом. */
@font-face{font-family:"Random Grotesque";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/random-grotesque-standard-book.woff2) format("woff2");
  ascent-override:102.4%;descent-override:23.6%;line-gap-override:0%}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* цвета */
  --c-bg:#010103;            /* фон страницы (фрейм) */
  --c-white:#FFFFFF;
  --c-ink:#101010;           /* текст на градиентных кнопках */
  --c-line:#181818;          /* линия под шапкой, контурные логотипы */
  --c-gold:#FBD080;          /* «Смотреть кейсы», акцент */
  --c-mint:#81E1A7;          /* стрелка «›» у услуги */
  --c-olive:#869D6E;         /* стрелка в круге CTA */
  --c-coin-glow:#FFC461;
  --c-stroke-2:#252525;       /* обводка вторичной кнопки (макет, блок ниже) */
  --c-muted:#868686;          /* текст вторичной кнопки */
  --t-60:rgba(255,255,255,.6);
  --t-40:rgba(255,255,255,.4);   /* неактивное/подписи */
  --t-30:rgba(255,255,255,.3);   /* «делаем:», «чтобы:» */

  /* градиенты (точные стопы из Figma) */
  --g-btn:linear-gradient(102.26deg,#FBD080 5.6%,#E2C278 49.08%,#80E1A6 126.64%);
  --g-word:linear-gradient(90.09deg,#FFCF7F 0%,#16F0C8 177.96%);
  /* в Figma стопы этого градиента идут не по порядку (105.09% / 9.51% / 126.07%); визуально это E2C278 → 80E1A6 */
  --g-card-a:linear-gradient(98.05deg,#E2C278 -16%,#80E1A6 119%);
  --g-card-c:linear-gradient(95.84deg,#FBD080 5.64%,#E2C278 63.29%,#80E1A6 161.06%);
  --g-glass-stroke:linear-gradient(140deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.44) 100%);
  --g-hover-stroke:linear-gradient(120deg,rgba(251,208,128,.75) 0%,rgba(226,194,120,.25) 45%,rgba(128,225,166,.7) 100%);

  /* стекло */
  --glass-plate:rgba(255,255,255,.05);
  --glass-card:rgba(255,255,255,.07);
  --blur-plate:58.25px;
  --blur-card:35.95px;

  /* шрифты */
  --f-display:"Random Grotesque","Inter",system-ui,sans-serif;
  --f-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* радиусы */
  --r-card:20px;
  --r-pill:100px;

  /* свечения */
  --glow-btn:0 10px 34px -8px rgba(226,194,120,.55),0 0 0 1px rgba(251,208,128,.25);
  --glow-btn-sm:0 6px 22px -6px rgba(226,194,120,.6);

  /* движение */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --t-fast:.2s;
  --t-med:.35s;

  --k:1; /* масштаб первого экрана на 1280–1439, ставит скрипт в <head> */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--c-bg);-webkit-text-size-adjust:100%}
body{background:var(--c-bg);color:var(--c-white);font:400 16px/1.5 var(--f-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-width:1280px}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block}

:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px;border-radius:4px}

/* ===== Каркас первого экрана ===== */
.hero{position:relative;height:calc(1040px * var(--k));overflow-x:clip;isolation:isolate}
.hero__line{position:absolute;left:0;right:0;top:calc(50px * var(--k));height:1px;background:var(--c-line);z-index:6}
.hero__frame{position:absolute;top:0;left:50%;width:1440px;height:1040px;margin-left:-720px;
  transform:scale(var(--k));transform-origin:50% 0}
.hero__bg img{position:absolute;left:0;top:0;width:1440px;height:1084px;z-index:0;pointer-events:none;user-select:none}
.outline{position:absolute;z-index:1;pointer-events:none;overflow:visible}
.outline--a{left:-144px;top:-120px;width:630px;height:695px}
.outline--b{left:974.8px;top:169.1px;width:697.666px;height:649.567px;transform:rotate(-41.56deg)}

/* ===== Шапка ===== */
.hdr{position:absolute;inset:0 0 auto 0;height:50px;z-index:6}
.hdr__logo{position:absolute;left:80px;top:17px;width:60px;height:14px;border-radius:2px;transition:opacity var(--t-fast) ease,filter var(--t-med) ease}
.hdr__logo svg{width:60px;height:14px}
.hdr__logo:hover{filter:drop-shadow(0 0 8px rgba(251,208,128,.55))}
.hdr__nav{position:absolute;left:0;top:18px;height:12px}
.hdr__nav .nav-link{position:absolute;top:0}
/* 4 пункта (без «Почему с нами» — вернётся отдельной страницей), шаг между словами 36, группа по центру макета (как раньше 5 пунктов: 507…932).
   Было: 507 / 583 / 677 / 775 / 885. Вернуть пятый пункт — вернуть и эти значения. */
.hdr__nav .nav-link:nth-child(1){left:562px}
.hdr__nav .nav-link:nth-child(2){left:638px}
.hdr__nav .nav-link:nth-child(3){left:732px}
.hdr__nav .nav-link:nth-child(4){left:830px}
.nav-link{position:relative;font:500 10px/normal var(--f-text);color:var(--c-white);white-space:nowrap;transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.nav-link[aria-current="page"]{color:var(--t-40)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--g-btn);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-med) var(--ease)}
.nav-link:hover{text-shadow:0 0 12px rgba(251,208,128,.55)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link[aria-current="page"]:hover{color:var(--t-60)}
.hdr__cta{position:absolute;left:1256px;top:9px}

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;border-radius:var(--r-pill);color:var(--c-ink);font-family:var(--f-text);font-weight:700;white-space:nowrap;
  position:relative;transition:box-shadow var(--t-med) var(--ease),filter var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.btn--primary{background:var(--g-btn);background-size:100% 100%}
.btn--primary::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 70%);
  background-size:250% 100%;background-position:120% 0;opacity:0;transition:opacity var(--t-med) ease,background-position .8s var(--ease)}
.btn--primary:hover::before{opacity:1;background-position:-20% 0}
.btn:active{transform:translateY(1px)}
.btn--sm{width:104px;height:30px;padding:0 0 0 20px;font-size:10px;line-height:17px;gap:6px}
.btn--sm .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.btn--sm:hover{box-shadow:var(--glow-btn-sm)}
.btn--sm:hover .btn__arr{transform:translate(2px,-2px)}
.btn--lg{width:248px;height:70px;padding:0 10px 0 30px;justify-content:space-between;font-size:13px;line-height:17px}
.btn--lg .btn__text{width:166px;white-space:normal}
.btn__circle{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.3);flex:none;display:grid;place-items:center;overflow:hidden;
  transition:background-color var(--t-med) ease}
.btn__circle svg{width:14px;height:14px;transition:transform var(--t-med) var(--ease)}
.btn--lg:hover{box-shadow:var(--glow-btn)}
.btn--lg:hover .btn__circle{background:rgba(255,255,255,.5)}
.btn--lg:hover .btn__circle svg{animation:arrow-out-in .6s var(--ease)}
@keyframes arrow-out-in{0%{transform:none}45%{transform:translate(18px,-18px)}46%{transform:translate(-18px,18px)}100%{transform:none}}
.btn:focus-visible{outline-offset:3px;border-radius:var(--r-pill)}

/* ===== Левая колонка ===== */
.intro{position:absolute;inset:0;z-index:4;pointer-events:none}
.intro > *{pointer-events:auto}
.intro__title{position:absolute;left:80px;top:105px;width:491px;font:400 68.863px/65px var(--f-display);letter-spacing:0;color:var(--c-white)}
.grad-text{background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.intro__coin{position:absolute;left:80px;top:336px;width:46px;height:56px}
.intro__coin img{position:relative;width:46px;height:56px}
.intro__coin-glow{position:absolute;left:2px;top:10px;width:42px;height:42px;border-radius:50%;background:var(--c-coin-glow);opacity:.45;filter:blur(17.75px)}
.intro__lead{position:absolute;left:80px;top:399px;width:227px;font:400 16px/27px var(--f-text)}
.intro__cta{position:absolute;left:80px;top:520px}
.intro__note{position:absolute;left:80px;top:607px;width:172px;font:400 11px/18px var(--f-text);color:var(--t-40)}

/* ===== Стекло ===== */
.glass{position:absolute;background:var(--glass-plate);border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(var(--blur-plate));backdrop-filter:blur(var(--blur-plate))}
/* обводка-градиент 1px: светлая сверху-слева и снизу-справа (как в макете) */
.glass::before,.glass-hover::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass::before{background:var(--g-glass-stroke)}

/* ===== Плашка-карусель ===== */
.plate{left:960px;top:117px;width:400px;height:473px;padding:30px 30px 0;z-index:2}
.plate__label{font:400 16px/23px var(--f-text);color:var(--t-30)}
.plate__service{height:38px;margin-top:9px;display:flex;align-items:flex-start}
.plate__name{display:inline-flex;align-items:flex-start;font:400 50px/38px var(--f-display);white-space:nowrap;border-radius:6px}
.plate__name .grad-text{transition:filter var(--t-med) ease}
.plate__chev{width:8px;height:14px;margin:20px 0 0 11.5px;flex:none;color:var(--c-mint);transition:transform var(--t-med) var(--ease)}
a.plate__name:hover .grad-text{filter:drop-shadow(0 0 14px rgba(128,225,166,.45))}
a.plate__name:hover .plate__chev{transform:translateX(4px)}
.plate__label--why{margin-top:25px}
.plate__tasks{margin-top:9px;height:176px}
.plate__tasks li{font:400 28px/29px var(--f-display);height:29px;white-space:nowrap}
.plate__tasks li + li{margin-top:20px}
.plate__tasks li.is-empty{visibility:hidden}
.plate__cases{position:absolute;right:30px;top:424px;display:inline-flex;align-items:center;gap:6px;font:400 16px/normal var(--f-text);
  color:rgba(251,208,128,.6);border-radius:4px;transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.plate__cases svg{width:8px;height:8px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.plate__cases:hover{color:var(--c-gold);text-shadow:0 0 14px rgba(251,208,128,.45)}
.plate__cases:hover svg{transform:translate(2px,-2px)}
.plate::before{transition:opacity var(--t-med) ease}
.plate:hover{--g-glass-stroke:linear-gradient(140deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 50%,rgba(251,208,128,.6) 100%)}

/* ===== 3D ===== */
.hero__phone{left:142px;top:166px;width:1152px;height:720px;z-index:3}

/* ===== Карточки выгод ===== */
.benefits{position:absolute;left:80px;top:828px;width:1280px;height:160px;display:flex;z-index:4}
.benefits li{flex:370 1 0;min-width:0}
.benefits li:nth-child(2){flex-grow:426;margin-left:25px}
.benefits li:nth-child(3){flex-grow:435;margin-left:24px}
.benefit{position:relative;display:block;height:160px;border-radius:var(--r-card);background:var(--glass-card);
  -webkit-backdrop-filter:blur(var(--blur-card));backdrop-filter:blur(var(--blur-card));
  transition:background-color var(--t-med) ease,box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.benefit::before{background:var(--g-hover-stroke);opacity:0;transition:opacity var(--t-med) ease}
.benefit:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(226,194,120,.45)}
.benefit:hover::before,.benefit:focus-visible::before{opacity:1}
.benefit:focus-visible{outline-offset:3px;border-radius:var(--r-card)}
.benefit__title{position:absolute;left:30px;top:26px;font:400 30px/32px var(--f-display);color:var(--c-white);white-space:nowrap}
.benefits li:nth-child(2) .benefit__title,.benefits li:nth-child(3) .benefit__title{width:121px;white-space:normal}
.benefit__title--a{background:var(--g-card-a)}
.benefit__title--c{background:var(--g-card-c)}
.benefit__title--a,.benefit__title--c{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.benefit__text{position:absolute;top:33px;font:400 14px/24px var(--f-text)}
.benefits li:nth-child(1) .benefit__text{left:167px;width:197px}
.benefits li:nth-child(2) .benefit__text{left:181px;width:217px}
.benefits li:nth-child(3) .benefit__text{left:181px;width:228px}

@media (prefers-reduced-motion:reduce){
  .hdr *,.hdr *::before,.hdr *::after,.intro *,.intro *::before,.intro *::after,
  .plate,.plate *,.plate *::before,.benefit,.benefit *,.benefit::before{transition-duration:.01ms!important;animation:none!important}
  .benefit:hover{transform:none}
}

/* ==========================================================================
   БЛОК 2 «Что мы меняем в бизнесе» (#directions). Макет: 87:154 … 90:192.
   Ниже первого экрана, в потоке. 1440+ — контент 1280 по центру,
   1280–1439 — блок целиком масштабируется тем же --k, что и первый экран (zoom).
   Данные карточек — assets/js/directions.js (массив DIRECTIONS).
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.dirs{position:relative;padding:33px 0 120px;overflow-x:clip}
.dirs__in{position:relative;width:1440px;margin:0 auto;padding:0 80px;zoom:var(--k)}
/* мягкий свет за сеткой — чтобы стекло карточек читалось без backdrop-filter (фон под ними ровный) */
.dirs__in::before{content:"";position:absolute;inset:180px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px 380px at 22% 30%,rgba(251,208,128,.075),transparent 70%),
             radial-gradient(620px 420px at 82% 62%,rgba(128,225,166,.06),transparent 70%),
             radial-gradient(520px 300px at 50% 96%,rgba(226,194,120,.05),transparent 70%)}

/* --- шапка блока: 1-в-1 по макету --- */
.dirs__head{position:relative;height:134px}
.dirs__title{width:491px;font:400 68px/67px var(--f-display);color:var(--c-white)}
.dirs__lead{position:absolute;left:501px;top:22px;width:313px;font:400 16px/29px var(--f-text);color:var(--c-white)}
.dirs__pick{position:absolute;right:0;top:27px}

/* кнопка 203×60 (90:161): Inter 600 13/17, отступы 30, стрелка 5px через 5px */
.btn--md{height:60px;padding:0 30px;gap:5px;font-size:13px;line-height:17px;font-weight:600}
.btn--md .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.btn--md:hover{box-shadow:var(--glow-btn)}
.btn--md:hover .btn__arr{transform:translate(2px,-2px)}

/* вторичная кнопка-контур (90:181): обводка #252525, Inter 600 13 #868686; на ховере — градиентная обводка, текст белеет */
.btn--ghost{height:56px;color:var(--c-muted);font-weight:600;font-size:13px;line-height:17px;
  box-shadow:inset 0 0 0 1px var(--c-stroke-2);transition:color var(--t-fast) ease,box-shadow var(--t-med) var(--ease),background-color var(--t-med) ease}
.btn--ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-hover-stroke);opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity var(--t-med) ease}
.btn--ghost:hover{color:var(--c-white);background-color:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px transparent,0 12px 30px -18px rgba(226,194,120,.55)}
.btn--ghost:hover::before,.btn--ghost:focus-visible::before{opacity:1}
.btn__count{display:inline-grid;place-items:center;min-width:16px;height:14px;padding:0 4px;border-radius:6px;background:var(--c-muted);
  color:#0e0e10;font:700 11px/1 var(--f-text);transition:background var(--t-med) ease}
.btn--ghost:hover .btn__count{background:var(--g-btn)}

/* --- сетка услуг: 3 колонки, карточки делят строки через subgrid (заголовки/описания/списки на одной линии) --- */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:102px}
.svc{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding:0 30px 30px;
  border-radius:var(--r-card);background:var(--glass-plate) linear-gradient(165deg,rgba(255,255,255,.03),transparent 45%);
  transition:background-color var(--t-med) ease,transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.svc:nth-child(n+4){margin-top:104px}   /* иконка вылетает на 75px — второй ряд ниже */
/* обводки: ::before — стеклянная (как у плашки, тише), ::after — градиентная на ховере */
.svc::before,.svc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.svc::before{background:linear-gradient(140deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2) 100%)}
.svc::after{background:var(--g-hover-stroke);opacity:0;transition:opacity var(--t-med) ease}
.svc:hover,.svc:focus-within{background-color:rgba(255,255,255,.08)}
.svc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(226,194,120,.5)}
.svc:hover::after,.svc:focus-within::after{opacity:1}
/* световое пятно за курсором (координаты ставит directions.js, в %) */
.svc__spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-med) ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(251,208,128,.10),rgba(128,225,166,.04) 45%,transparent 70%)}
.svc:hover .svc__spot{opacity:1}
.svc > :not(.svc__spot){position:relative}

.svc__top{height:96px}
.svc__num{position:absolute;right:0;top:28px;font:500 13px/17px var(--f-text);letter-spacing:.06em;color:var(--t-30);
  font-variant-numeric:tabular-nums;transition:color var(--t-med) ease}
.svc:hover .svc__num{color:rgba(251,208,128,.8)}

/* иконка 180×149, вылетает за верх карточки на 75px (как 90:159 в макете) */
.svc__icon{position:absolute;left:-12px;top:-75px;width:180px;height:149px;transition:transform .5s var(--ease)}
.svc__icon img{position:relative;width:180px;height:149px}
.svc__halo{position:absolute;left:50%;top:60%;width:170px;height:100px;margin:-50px 0 0 -85px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,196,97,.32),rgba(128,225,166,.10) 62%,transparent);opacity:.5;transition:opacity var(--t-med) ease,transform .5s var(--ease)}
.svc:hover .svc__icon{transform:translateY(-8px) scale(1.03)}
.svc:hover .svc__halo{opacity:1;transform:scale(1.12)}

/* временный слот иконки (пока нет картинки): стеклянная плитка + «пыль» в духе Распылителя, без текста */
.svc__slot{position:absolute;inset:0}
.svc__slot::before{content:"";position:absolute;inset:8px 10px 0;opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.6) 0 .8px,transparent 1.3px) 0 0/8px 8px;
  -webkit-mask:radial-gradient(closest-side,#000 15%,transparent 100%);mask:radial-gradient(closest-side,#000 15%,transparent 100%)}
.svc__tile{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-42px 0 0 -44px;border-radius:26px;transform:rotate(-8deg);
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 55%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 22px 34px -18px rgba(0,0,0,.95)}
.svc__tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.svc__tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 30% 18%,rgba(251,208,128,.22),transparent 72%),radial-gradient(55% 50% at 80% 86%,rgba(128,225,166,.18),transparent 72%)}

.svc__title{align-self:start;width:fit-content;max-width:100%;font:400 32px/32px var(--f-display);
  background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.svc__value{margin-top:14px;font:400 14px/24px var(--f-text);color:var(--c-white)}
.svc__list{margin-top:22px;border-top:1px solid rgba(255,255,255,.07)}
.svc__list li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid rgba(255,255,255,.07);
  font:400 13px/21px var(--f-text);color:rgba(255,255,255,.6);transition:color var(--t-med) ease}
.svc__list li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:1.5px;background:var(--g-btn);transform:rotate(45deg)}
.svc:hover .svc__list li{color:rgba(255,255,255,.78)}

.svc__foot{align-self:end;margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:16px}
.svc__cases{width:100%;justify-content:space-between;padding:0 26px 0 28px}
.svc__cases-l{display:inline-flex;align-items:center;gap:7px}
.svc__offer{display:inline-flex;align-items:center;gap:6px;font:600 13px/17px var(--f-text);color:rgba(251,208,128,.6);border-radius:4px;
  transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.svc__offer svg,.svc__cases .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.svc__offer:hover{color:var(--c-gold);text-shadow:0 0 14px rgba(251,208,128,.45)}
.svc__offer:hover svg,.svc__cases:hover .btn__arr{transform:translate(2px,-2px)}

/* --- финальная плашка блока (из прототипа: «Не знаете, что нужно…») --- */
.dirs__cta{position:relative;margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:30px 30px 30px 40px;border-radius:var(--r-card);background:var(--glass-plate)}
.dirs__cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dirs__cta-q{font:400 30px/32px var(--f-display)}
.dirs__cta-t{margin-top:10px;max-width:720px;font:400 16px/27px var(--f-text);color:var(--t-60)}

/* --- появление при скролле (включается скриптом; без JS всё видно сразу) --- */
.reveal-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.reveal-on .reveal.is-in{opacity:1;transform:none}
/* после появления скрипт снимает .reveal, и дальше работают обычные ховеры */

@media (prefers-reduced-motion:reduce){
  .dirs *,.dirs *::before,.dirs *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .reveal-on .reveal{opacity:1;transform:none}
  .svc:hover,.svc:hover .svc__icon,.svc:hover .svc__halo{transform:none}
}

/* ==========================================================================
   БЛОК 3 «Кейсы» (#cases) + фильтр по услугам + общий компонент модалок + попап кейса (#m-case).
   Макета в Figma нет — композиция на токенах СТИЛЬ.md. Данные — assets/js/cases.js, модалки — assets/js/modal.js.
   1440+ — контент 1280 по центру, 1280–1439 — блок масштабируется тем же --k (zoom), как блок 2.
   ========================================================================== */
.cases{position:relative;padding:40px 0 150px;overflow-x:clip}
.cases__in{position:relative;width:1440px;margin:0 auto;padding:0 80px;zoom:var(--k)}
/* мягкий свет за сеткой (без сеток и линий) — стекло карточек читается на ровном фоне */
.cases__in::before{content:"";position:absolute;inset:220px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 380px at 78% 18%,rgba(251,208,128,.07),transparent 70%),
             radial-gradient(640px 420px at 18% 64%,rgba(128,225,166,.06),transparent 70%),
             radial-gradient(520px 300px at 50% 100%,rgba(226,194,120,.05),transparent 70%)}

/* --- шапка: как у блока 2 (заголовок слева, подпись на x=501) --- */
.cases__head{position:relative;height:134px}
.cases__title{display:inline-flex;align-items:flex-start;font:400 68px/67px var(--f-display);color:var(--c-white)}
.cases__sum{margin:4px 0 0 10px;font:500 14px/17px var(--f-text);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cases__lead{position:absolute;left:501px;top:9px;width:340px;font:400 16px/29px var(--f-text);color:var(--c-white)}

/* --- фильтр: стеклянный таб-бар, активный чипс — градиентная «пилюля», которая переезжает --- */
/* blur не ставим: под баром ровный фон — как у карточек блока 2 */
.cfilter{position:relative;display:inline-flex;gap:4px;padding:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.04)}
.cfilter::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cfilter__ind{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:var(--r-pill);background:var(--g-btn);opacity:0;pointer-events:none;
  box-shadow:0 8px 26px -10px rgba(226,194,120,.6);transition:transform .45s var(--ease),width .45s var(--ease),opacity var(--t-fast) ease}
.cfilter__ind.is-on{opacity:1}
.cfilter__chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--c-muted);font:600 13px/17px var(--f-text);white-space:nowrap;cursor:pointer;
  transition:color var(--t-fast) ease,background-color var(--t-med) ease}
.cfilter__n{display:inline-grid;place-items:center;min-width:18px;height:16px;padding:0 5px;border-radius:6px;background:rgba(255,255,255,.08);
  color:var(--t-60);font:700 11px/1 var(--f-text);font-variant-numeric:tabular-nums;transition:background-color var(--t-med) ease,color var(--t-med) ease}
.cfilter__chip:hover{color:var(--c-white);background-color:rgba(255,255,255,.05)}
.cfilter__chip:hover .cfilter__n{background:rgba(255,255,255,.14);color:var(--c-white)}
.cfilter__chip[aria-pressed="true"]{color:var(--c-ink);background-color:transparent}
.cfilter__chip[aria-pressed="true"] .cfilter__n{background:rgba(16,16,16,.14);color:var(--c-ink)}
.cfilter__chip:focus-visible{outline-offset:2px;border-radius:var(--r-pill)}

/* --- сетка: 6 колонок; 3+ кейса — по 3 в ряд, 2 — по 2, 1 — широкая горизонтальная карточка --- */
.cases__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin-top:40px}
.case{grid-column:span 2}
.cases__grid[data-n="2"] .case{grid-column:span 3}
.cases__grid[data-n="1"] .case{grid-column:1 / -1;flex-direction:row}

/* карточка кейса: стекло как у .svc, сверху «сцена» с мокапом, внизу текст */
.case{position:relative;display:flex;flex-direction:column;padding:8px;border-radius:var(--r-card);cursor:pointer;
  background:var(--glass-plate) linear-gradient(165deg,rgba(255,255,255,.03),transparent 45%);
  transition:background-color var(--t-med) ease,transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.case::before,.case::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.case::before{background:linear-gradient(140deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2) 100%)}
.case::after{background:var(--g-hover-stroke);opacity:0;transition:opacity var(--t-med) ease}
.case:hover,.case:focus-within{background-color:rgba(255,255,255,.08)}
.case:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(226,194,120,.5)}
.case:hover::after,.case:focus-within::after{opacity:1}
.case__spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-med) ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(251,208,128,.10),rgba(128,225,166,.04) 45%,transparent 70%)}
.case:hover .case__spot{opacity:1}

/* сцена: тёмная плитка с мягким светом (без сеток), мокап «растёт» снизу и обрезается краем */
.case__media,.cpop__stage{position:relative;overflow:hidden;border-radius:14px;container-type:inline-size;isolation:isolate;
  background:radial-gradient(70% 90% at 18% 0%,rgba(251,208,128,.20),transparent 62%),
             radial-gradient(70% 90% at 100% 100%,rgba(128,225,166,.18),transparent 62%),
             linear-gradient(180deg,#0d0e12,#08090c)}
.case__media{aspect-ratio:394 / 262;flex:none}
.case__media::after,.cpop__stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(180deg,transparent 70%,rgba(8,9,12,.55))}
.case:nth-child(3n+2) .case__media{background:radial-gradient(70% 90% at 82% 0%,rgba(128,225,166,.18),transparent 62%),
  radial-gradient(70% 90% at 0% 100%,rgba(251,208,128,.18),transparent 62%),linear-gradient(180deg,#0d0e12,#08090c)}
.case:nth-child(3n) .case__media{background:radial-gradient(80% 90% at 50% 0%,rgba(226,194,120,.20),transparent 62%),
  radial-gradient(60% 80% at 100% 100%,rgba(128,225,166,.14),transparent 62%),linear-gradient(180deg,#0d0e12,#08090c)}

/* --- мокапы: размеры в cqw — одинаково смотрятся в карточке любой ширины --- */
.mk{position:absolute;inset:0;display:block}
.mk picture,.mk img{display:block;width:100%;height:auto}
.mk-win{position:absolute;left:7cqw;top:8cqw;width:86cqw;display:block;border-radius:max(8px,1.4cqw);overflow:hidden;background:#0f1013;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px rgba(0,0,0,.9);transition:transform .6s var(--ease)}
.mk-win__bar{position:relative;display:flex;align-items:center;gap:max(3px,.8cqw);height:max(14px,3.6cqw);padding:0 max(8px,2cqw);
  background:linear-gradient(180deg,#1b1c21,#141519)}
.mk-win__bar i{width:max(4px,1cqw);height:max(4px,1cqw);border-radius:50%;background:rgba(255,255,255,.18)}
.mk-win__bar b{position:absolute;left:30%;right:30%;top:50%;height:max(6px,1.6cqw);transform:translateY(-50%);border-radius:var(--r-pill);background:rgba(255,255,255,.06)}
.mk-win__scr{display:block;overflow:hidden}
.mk-win__img img{transition:transform .9s var(--ease)}
.mk--desk.has-phone .mk-win{left:5cqw;width:78cqw}

.mk-phone{position:absolute;display:block;padding:max(3px,.9cqw);border-radius:max(16px,5cqw);background:linear-gradient(160deg,#2a2b30,#0b0b0d 40%,#17181b);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,0,0,.6),0 30px 50px -20px rgba(0,0,0,.95);transition:transform .6s var(--ease)}
.mk-phone__scr{position:relative;display:block;overflow:hidden;aspect-ratio:540 / 1168;border-radius:max(13px,4.2cqw);background:#111}
.mk-phone__isl{position:absolute;left:50%;top:max(6px,1.8cqw);width:30%;height:max(5px,1.6cqw);transform:translateX(-50%);border-radius:var(--r-pill);background:#000}
.mk-phone--flat .mk-phone__isl{display:none}
.mk-phone--side{right:5cqw;top:20cqw;width:23cqw}
.mk--phones .mk-phone--front{left:50%;top:8cqw;width:33cqw;margin-left:-24cqw}
.mk--phones .mk-phone--back{left:50%;top:15cqw;width:29cqw;margin-left:5cqw;transform:rotate(5deg);opacity:.92}
.mk-phone__img img{transition:transform .9s var(--ease)}
/* длинный экран сайта: показывается верх, на ховере плавно прокручивается вниз */
.mk--phones.is-scroll .mk-phone--front .mk-phone__img{position:absolute;left:0;top:0;width:100%}
.mk--phones.is-scroll .mk-phone--front .mk-phone__img img{transition:transform 5s cubic-bezier(.45,0,.35,1)}

/* ховер карточки: мокапы чуть поднимаются (телефон — сильнее, параллакс), длинный экран прокручивается */
.case:hover .mk-win{transform:translateY(-1.6cqw)}
.case:hover .mk-win__img img{transform:scale(1.025)}
.case:hover .mk-phone--side{transform:translateY(-3.4cqw)}
.case:hover .mk--phones .mk-phone--front{transform:translateY(-2.6cqw)}
.case:hover .mk--phones .mk-phone--back{transform:rotate(7deg) translate(1.4cqw,-1.2cqw)}
.case:hover .mk--phones.is-scroll .mk-phone--front .mk-phone__img img{transform:translateY(-53%)}

/* широкая карточка (выбран фильтр с одним кейсом): сцена слева, текст справа */
.cases__grid[data-n="1"] .case__media{width:820px;aspect-ratio:820 / 420}
.cases__grid[data-n="1"] .case__body{padding:40px 40px 32px 44px;justify-content:center}
.cases__grid[data-n="1"] .case__title{font-size:40px;line-height:42px}

/* текст карточки */
.case__body{position:relative;display:flex;flex-direction:column;flex:1;padding:24px 22px 22px}
.cmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmeta__niche{font:500 12px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--t-40)}
.cmeta__tag{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font:600 11px/1 var(--f-text);color:rgba(251,208,128,.85);box-shadow:inset 0 0 0 1px rgba(251,208,128,.28);background:rgba(251,208,128,.05)}
.case__title{margin-top:14px;font:400 30px/32px var(--f-display);color:var(--c-white)}
.case__res{position:relative;margin-top:18px;padding-left:16px}
.case__res::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--g-btn)}
.case__res-l{display:block;font:500 12px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(251,208,128,.7)}
.case__res p{margin-top:6px;font:400 14px/24px var(--f-text);color:rgba(255,255,255,.72);transition:color var(--t-med) ease}
.case:hover .case__res p{color:rgba(255,255,255,.9)}
.case__open{margin-top:auto;width:100%;height:52px;justify-content:space-between;padding:0 26px 0 28px}
.case__res{margin-bottom:26px}
.case__open .btn__arr,.cases__more-btn .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.case:hover .case__open{color:var(--c-white);background-color:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px transparent,0 12px 30px -18px rgba(226,194,120,.55)}
.case:hover .case__open::before{opacity:1}
.case:hover .case__open .btn__arr{transform:translate(2px,-2px)}

/* у <button> снимаем системный фон и рамку (в блоке 2 кнопки-контуры — ссылки) */
button.btn{border:0;cursor:pointer}
button.btn--ghost{background-color:transparent}

/* «Показать ещё» и финальная строка */
.cases__more{display:flex;justify-content:center;margin-top:40px}
.cases__more[hidden]{display:none}
.cases__more-btn{padding:0 34px}
.cases__cta{margin-top:64px;display:flex;align-items:center;justify-content:center;gap:32px}
.cases__cta-q{font:400 30px/32px var(--f-display)}

/* ==========================================================================
   Модалки (общий компонент, assets/js/modal.js). Оверлей — тёмная вуаль, панель — стекло с backdrop-blur.
   Появление: оверлей .3s, панель снизу + scale .98 → 1 за .45s --ease. Уход — .26s.
   ========================================================================== */
html.is-modal{overflow:hidden}
html.is-modal body{padding-right:var(--sbw,0px)}
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px 0}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(1,1,3,.72);opacity:0;transition:opacity .3s var(--ease-io);cursor:pointer}
.modal__overlay::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 45% at 30% 20%,rgba(251,208,128,.07),transparent 70%),radial-gradient(50% 45% at 75% 85%,rgba(128,225,166,.06),transparent 70%)}
.modal__frame{position:relative;zoom:var(--k);opacity:0;transform:translateY(28px) scale(.98);
  transition:opacity .26s var(--ease-io),transform .26s var(--ease-io)}
.modal.is-open .modal__overlay{opacity:1}
.modal.is-open .modal__frame{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.modal__panel{position:relative;display:flex;flex-direction:column;width:640px;max-height:calc((100vh - 64px) / var(--k));border-radius:24px;outline:none;
  background:linear-gradient(160deg,rgba(30,32,38,.78),rgba(12,13,17,.82));
  -webkit-backdrop-filter:blur(40px) saturate(1.2);backdrop-filter:blur(40px) saturate(1.2);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.95),0 0 80px -40px rgba(226,194,120,.25)}
.modal__panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.modal__body{overflow:auto;overscroll-behavior:contain;border-radius:inherit;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.modal__body::-webkit-scrollbar{width:8px}
.modal__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
/* крестик и стрелки: стеклянные круги, ховер — градиентная обводка и свечение */
.modal__close,.modal__nav{position:absolute;z-index:4;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--t-60);
  background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:color var(--t-fast) ease,background-color var(--t-med) ease,box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.modal__close::before,.modal__nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-hover-stroke);opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity var(--t-med) ease}
.modal__close:hover,.modal__nav:hover{color:var(--c-white);background-color:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px transparent,0 10px 30px -12px rgba(226,194,120,.5)}
.modal__close:hover::before,.modal__nav:hover::before,.modal__close:focus-visible::before,.modal__nav:focus-visible::before{opacity:1}
.modal__close{top:20px;right:20px;width:44px;height:44px}
.modal__close svg{transition:transform var(--t-med) var(--ease)}
.modal__close:hover svg{transform:rotate(90deg)}
.modal__close:focus-visible,.modal__nav:focus-visible{outline-offset:3px;border-radius:50%}
.modal__nav{top:50%;width:56px;height:56px;margin-top:-28px}
.modal__nav[hidden]{display:none}
.modal__nav--prev{left:-84px}
.modal__nav--next{right:-84px}
.modal__nav--prev:hover{transform:translateX(-3px)}
.modal__nav--next:hover{transform:translateX(3px)}

/* --- попап «Кейс» --- */
.modal__frame--case .modal__panel{width:1040px}
.cpop__content{padding:40px 40px 44px}
.cpop__head{position:relative;padding-right:120px}
.cpop__title{margin-top:14px;font:400 46px/48px var(--f-display);color:var(--c-white)}
.cpop__count{position:absolute;right:64px;top:4px;font:500 13px/17px var(--f-text);letter-spacing:.06em;color:var(--t-30);font-variant-numeric:tabular-nums}
.cpop__stage{margin-top:28px;aspect-ratio:960 / 440}
/* крупный мокап: попап и широкая карточка (фильтр с одним кейсом) */
.cpop__stage .mk-win,.cases__grid[data-n="1"] .mk-win{left:8cqw;top:5cqw;width:64cqw}
.cpop__stage .mk--desk.has-phone .mk-win,.cases__grid[data-n="1"] .mk--desk.has-phone .mk-win{left:6cqw;width:64cqw}
.cpop__stage .mk-phone--side,.cases__grid[data-n="1"] .mk-phone--side{right:9cqw;top:8cqw;width:19cqw}
.cpop__stage .mk--phones .mk-phone--front,.cases__grid[data-n="1"] .mk--phones .mk-phone--front{top:5cqw;width:24cqw;margin-left:-20cqw}
.cpop__stage .mk--phones .mk-phone--back,.cases__grid[data-n="1"] .mk--phones .mk-phone--back{top:10cqw;width:21cqw;margin-left:3cqw}
.cpop__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;margin-top:36px}
.cpop__h{font:500 12px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--t-40)}
.cpop__main .cpop__h + *{margin-top:12px}
.cpop__main .cpop__h:not(:first-child){margin-top:30px}
.cpop__task{font:400 16px/27px var(--f-text);color:rgba(255,255,255,.86)}
.cpop__done{border-top:1px solid rgba(255,255,255,.07)}
.cpop__done li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid rgba(255,255,255,.07);font:400 14px/22px var(--f-text);color:rgba(255,255,255,.72)}
.cpop__done li::before{content:"";position:absolute;left:2px;top:20px;width:6px;height:6px;border-radius:1.5px;background:var(--g-btn);transform:rotate(45deg)}
.cpop__side{display:flex;flex-direction:column;gap:24px}
.cpop__res{position:relative;padding:24px 26px 26px;border-radius:var(--r-card);
  background:radial-gradient(90% 80% at 0% 0%,rgba(251,208,128,.10),transparent 70%),radial-gradient(90% 80% at 100% 100%,rgba(128,225,166,.08),transparent 70%),rgba(255,255,255,.04)}
.cpop__res::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-hover-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cpop__res .cpop__h{color:rgba(251,208,128,.75)}
.cpop__res-t{margin-top:12px;font:400 24px/28px var(--f-display);color:var(--c-white)}
.cpop__actions{display:flex;flex-direction:column;gap:12px}
.cpop__actions .btn{width:100%;justify-content:space-between;padding:0 28px}
.cpop__demo{height:60px}
.cpop__demo[hidden]{display:none}
.cpop__demo .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.cpop__demo:hover .btn__arr{transform:translate(2px,-2px)}
.cpop__h--gal{margin-top:40px}
.cpop__gallery{display:flex;gap:16px;margin:14px -40px 0;padding:0 40px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 40px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.cshot{flex:0 0 228px;scroll-snap-align:start}
.cshot__ui{display:block;aspect-ratio:212 / 136;border-radius:14px;overflow:hidden;
  background:radial-gradient(80% 100% at 0% 0%,rgba(251,208,128,.10),transparent 70%),radial-gradient(80% 100% at 100% 100%,rgba(128,225,166,.09),transparent 70%),#0d0e12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow var(--t-med) ease,transform var(--t-med) var(--ease)}
.cshot__ui svg{width:100%;height:100%}
.cshot__cap{display:block;margin-top:10px;font:400 13px/19px var(--f-text);color:var(--t-60)}
.cshot:hover .cshot__ui{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(251,208,128,.3),0 14px 30px -18px rgba(226,194,120,.5)}

@media (prefers-reduced-motion:reduce){
  .cases *,.cases *::before,.cases *::after,.modal,.modal *,.modal *::before,.modal *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .case:hover,.case:hover .mk-win,.case:hover .mk-phone,.case:hover .mk-phone__img img,.case:hover .mk-win__img img{transform:none!important}
  .modal__frame{transform:none}
}

/* ==========================================================================
   БЛОК 4 «Как работаем» (#process). Макета в Figma нет — композиция на токенах СТИЛЬ.md.
   Слева липкая колонка (заголовок, подпись, плашка с CTA), справа вертикальный таймлайн из 6 шагов:
   ось заполняется градиентом по прокрутке, узлы-номера загораются (assets/js/process.js).
   1440+ — контент 1280 по центру, 1280–1439 — масштаб тем же --k (zoom), как блоки 2–3.
   ========================================================================== */
.proc{position:relative;padding:10px 0 140px;overflow-x:clip}
.proc__in{position:relative;width:1440px;margin:0 auto;padding:0 80px;zoom:var(--k);
  display:grid;grid-template-columns:440px minmax(0,1fr);column-gap:80px;align-items:start}
.proc__in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 360px at 72% 20%,rgba(251,208,128,.06),transparent 70%),
             radial-gradient(560px 380px at 62% 86%,rgba(128,225,166,.055),transparent 70%)}
.proc__side{position:sticky;top:96px}
.proc__title{font:400 68px/67px var(--f-display);color:var(--c-white)}
.proc__lead{margin-top:22px;width:330px;font:400 16px/29px var(--f-text);color:var(--c-white)}
.proc__foot{position:relative;margin-top:56px;padding:30px;border-radius:var(--r-card);
  background:var(--glass-plate) linear-gradient(165deg,rgba(255,255,255,.03),transparent 45%)}
.proc__foot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.proc__foot-t{font:400 15px/26px var(--f-text);color:rgba(255,255,255,.7)}
.proc__foot .btn{margin-top:26px}

/* --- таймлайн --- */
.steps{position:relative;display:flex;flex-direction:column;gap:16px;list-style:none}
.steps__axis{position:absolute;left:27px;top:56px;bottom:56px;width:2px;border-radius:2px;background:rgba(255,255,255,.07);pointer-events:none}
.steps__fill{position:absolute;inset:0;border-radius:inherit;transform-origin:50% 0;transform:scaleY(var(--p,0));
  background:linear-gradient(180deg,#FBD080 0%,#E2C278 50%,#80E1A6 100%);box-shadow:0 0 14px rgba(251,208,128,.35)}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:28px;align-items:center}
.step__node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font:600 14px/1 var(--f-text);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.45);
  background:#0a0a0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:color var(--t-med) ease,box-shadow .5s var(--ease),background-color var(--t-med) ease,transform .5s var(--ease)}
.step__node::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--g-btn);opacity:0;transition:opacity .5s var(--ease)}
.step__node{isolation:isolate}
.step__node::before{z-index:-1}
.step.is-lit .step__node{color:var(--c-ink);box-shadow:0 0 0 6px var(--c-bg),0 10px 30px -6px rgba(226,194,120,.65)}
.step.is-lit .step__node::before{opacity:1}

.step__card{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:32px;align-items:baseline;
  padding:30px 34px;border-radius:var(--r-card);
  background:var(--glass-plate) linear-gradient(165deg,rgba(255,255,255,.03),transparent 45%);
  transition:background-color var(--t-med) ease,transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.step__card::before,.step__card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.step__card::before{background:linear-gradient(140deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2) 100%)}
.step__card::after{background:var(--g-hover-stroke);opacity:0;transition:opacity var(--t-med) ease}
.step__spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-med) ease;
  background:radial-gradient(320px circle at var(--mx,30%) var(--my,50%),rgba(251,208,128,.10),rgba(128,225,166,.04) 45%,transparent 70%)}
.step__title{position:relative;font:400 30px/32px var(--f-display);color:var(--c-white);transition:filter var(--t-med) ease}
.step__text{position:relative;font:400 15px/26px var(--f-text);color:rgba(255,255,255,.65);transition:color var(--t-med) ease}
.step:hover .step__card{background-color:rgba(255,255,255,.08);transform:translateX(4px);box-shadow:0 26px 50px -30px rgba(226,194,120,.5)}
.step:hover .step__card::after,.step:hover .step__spot{opacity:1}
.step:hover .step__text{color:rgba(255,255,255,.82)}
.step:hover .step__node{transform:scale(1.06)}
.step:not(.is-lit):hover .step__node{color:var(--c-white);box-shadow:inset 0 0 0 1px rgba(251,208,128,.5)}

/* ==========================================================================
   БЛОК 5 «Финальный призыв» (#final): свет из первого экрана (зеркальный кроп hero-bg → final-bg.*) и контурный логотип —
   только справа, за слотом фото; заголовок, текст и форма — на чистом тёмном фоне. Форма — assets/js/final.js.
   ========================================================================== */
.final{position:relative;padding:120px 0 100px;overflow-x:clip}
.final__in{position:relative;width:1440px;margin:0 auto;padding:0 80px;zoom:var(--k);
  display:grid;grid-template-columns:620px minmax(0,1fr);column-gap:100px;align-items:center;isolation:isolate}
.final__art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.final__glow img{position:absolute;left:560px;top:50%;width:1100px;height:1000px;margin-top:-500px;opacity:.95;user-select:none;
  -webkit-mask:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.55) 66%,transparent 100%);mask:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.55) 66%,transparent 100%)}
.final__ol{position:absolute;left:900px;top:-60px;width:697.666px;height:649.567px;transform:rotate(-41.56deg);overflow:visible}

.final__main{position:relative}
.final__title{font:400 68px/67px var(--f-display);color:var(--c-white)}
.final__lead{margin-top:26px;width:570px;font:400 16px/27px var(--f-text);color:rgba(255,255,255,.7)}

/* --- панель формы: стекло без blur (под ней ровный тёмный фон) --- */
.fpanel{position:relative;margin-top:40px;padding:32px;border-radius:24px;
  background:rgba(255,255,255,.04) linear-gradient(165deg,rgba(255,255,255,.035),transparent 50%)}
.fpanel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{position:relative;min-width:0;border:0}
.field__lbl{display:block;margin-bottom:10px;padding:0;font:500 13px/17px var(--f-text);color:rgba(255,255,255,.5)}
.input{display:block;width:100%;height:56px;padding:0 24px;border:0;border-radius:var(--r-pill);outline:none;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--c-stroke-2);color:var(--c-white);font:500 15px/20px var(--f-text);
  caret-color:var(--c-gold);transition:box-shadow var(--t-med) var(--ease),background-color var(--t-med) ease}
.input::placeholder{color:rgba(255,255,255,.3)}
.input:hover{box-shadow:inset 0 0 0 1px #3a3a3e}
.input:focus{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(251,208,128,.7),0 0 0 4px rgba(251,208,128,.1)}
.input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:inset 0 0 0 1px var(--c-stroke-2),inset 0 0 0 60px #111114}
.field.is-err .input{box-shadow:inset 0 0 0 1px rgba(255,146,120,.75)}
.field.is-err .input:focus{box-shadow:inset 0 0 0 1px rgba(255,146,120,.9),0 0 0 4px rgba(255,146,120,.12)}
.field__err{display:block;margin-top:8px;padding-left:24px;font:500 12px/16px var(--f-text);color:var(--c-err)}
.field__err:empty{display:none}
:root{--c-err:#FF9A80}   /* ошибки форм — тёплый коралл, в палитре его не было */

/* сегмент «Где удобнее связаться»: как фильтр кейсов — под выбранным переезжает пилюля --g-btn (чистый CSS через :has) */
.fform__via{margin-top:22px;padding:0}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.04)}
.seg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.seg__ind{position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px) / 3);border-radius:var(--r-pill);background:var(--g-btn);
  box-shadow:0 8px 26px -10px rgba(226,194,120,.6);transform:translateX(calc(var(--i,0) * 100%));transition:transform .45s var(--ease)}
.seg:has(.seg__opt:nth-of-type(2) input:checked) .seg__ind{--i:1}
.seg:has(.seg__opt:nth-of-type(3) input:checked) .seg__ind{--i:2}
.seg__opt{position:relative;z-index:1;display:grid;place-items:center;height:44px;border-radius:var(--r-pill);cursor:pointer;
  font:600 13px/17px var(--f-text);color:var(--c-muted);transition:color var(--t-fast) ease,background-color var(--t-med) ease}
.seg__opt input{position:absolute;inset:0;opacity:0;margin:0;pointer-events:none}
.seg__opt:hover{color:var(--c-white);background-color:rgba(255,255,255,.05)}
.seg__opt:has(input:checked){color:var(--c-ink);background-color:transparent}
.seg__opt:has(input:focus-visible){outline:2px solid var(--c-gold);outline-offset:2px}

.fform__bottom{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.consent{position:relative;display:flex;align-items:flex-start;gap:12px;max-width:290px;cursor:pointer;font:400 12px/18px var(--f-text);color:rgba(255,255,255,.5)}
.consent input{position:absolute;left:0;top:0;width:20px;height:20px;opacity:0;margin:0}
.consent__box{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:transparent;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #3a3a3e;transition:box-shadow var(--t-med) ease,background-color var(--t-med) ease,color var(--t-fast) ease}
.consent:hover .consent__box{box-shadow:inset 0 0 0 1px rgba(251,208,128,.65)}
.consent input:checked + .consent__box{background:var(--g-btn);color:var(--c-ink);box-shadow:0 6px 16px -6px rgba(226,194,120,.6)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--c-gold);outline-offset:3px}
.consent.is-err .consent__box{box-shadow:inset 0 0 0 1px rgba(255,146,120,.85)}
.consent__t a{color:rgba(251,208,128,.75);text-decoration:underline;text-decoration-color:rgba(251,208,128,.3);text-underline-offset:3px;border-radius:3px;
  transition:color var(--t-fast) ease,text-decoration-color var(--t-fast) ease}
.consent__t a:hover{color:var(--c-gold);text-decoration-color:var(--c-gold)}
.fform__submit{flex:none}
.fform__consent-err{padding-left:32px}
.fform.is-sending .fform__submit{pointer-events:none;filter:saturate(.7) brightness(.9)}
.fform.is-sending .btn__circle svg{animation:arrow-out-in .9s var(--ease) infinite}

/* «Записали» */
.fthanks{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 20px;outline:none}
.fthanks[hidden]{display:none}
.fthanks.is-in{animation:fthanks-in .6s var(--ease) both}
@keyframes fthanks-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fthanks__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--g-btn);color:var(--c-ink);
  box-shadow:0 14px 40px -10px rgba(226,194,120,.7)}
.fthanks__h{margin-top:24px;font:400 44px/46px var(--f-display);background:var(--g-word);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fthanks__t{margin-top:14px;max-width:380px;font:400 16px/27px var(--f-text);color:rgba(255,255,255,.7)}
.fthanks__ok{margin-top:30px;padding:0 40px}

/* «Или напишите сразу» + малая кнопка-контур (44px) */
.fmsg{margin-top:28px;display:flex;align-items:center;gap:12px}
.fmsg__l{margin-right:4px;font:400 14px/20px var(--f-text);color:rgba(255,255,255,.5)}
.btn--s{height:44px;padding:0 22px;gap:8px;font-size:13px}
.btn--ghost .btn__arr{width:6px;height:6px;margin-top:1px;transition:transform var(--t-med) var(--ease)}
.btn--ghost:hover .btn__arr{transform:translate(2px,-2px)}

/* --- слот под фото основателя: матовое стекло на свету, контур «искры» из логотипа, подпись снизу --- */
.founder{position:relative;justify-self:end;width:540px;margin:0}
.founder__ph{position:relative;height:620px;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 50%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(34px) saturate(1.25);backdrop-filter:blur(34px) saturate(1.25);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.founder__ph::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:var(--g-glass-stroke);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.founder__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(1,1,3,.55) 100%)}
.founder__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder__mark{position:absolute;left:50%;top:44%;width:190px;height:206px;margin:-103px 0 0 -95px;opacity:.85;
  filter:drop-shadow(0 0 24px rgba(251,208,128,.25))}
.founder__mark svg{width:100%;height:100%}
.founder__img ~ .founder__mark{display:none}
.founder__cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;padding:20px 24px;border-radius:16px;
  background:rgba(10,11,14,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.founder__name{display:block;font:400 22px/26px var(--f-display);font-weight:400;color:var(--c-white)}
.founder__note{display:block;margin-top:6px;font:400 14px/20px var(--f-text);color:rgba(255,255,255,.6)}

/* ==========================================================================
   ПОДВАЛ (#contacts): логотип из шапки, контакты, меню-якоря, мелкий текст; снизу большой контурный логотип.
   ========================================================================== */
.foot{position:relative;padding:40px 0 0;overflow:hidden}
.foot__in{position:relative;width:1440px;margin:0 auto;padding:0 80px;zoom:var(--k)}
.foot__grid{display:grid;grid-template-columns:520px minmax(0,1fr) 240px;column-gap:40px;align-items:start}
.foot__logo{display:inline-flex;align-items:flex-end;gap:12px;border-radius:4px;transition:filter var(--t-med) ease}
.foot__logo svg{width:120px;height:28px}
.foot__logo span{margin-bottom:1px;font:500 16px/1 var(--f-text);color:rgba(255,255,255,.6);transition:color var(--t-fast) ease}
.foot__logo:hover{filter:drop-shadow(0 0 10px rgba(251,208,128,.5))}
.foot__logo:hover span{color:var(--c-white)}
.foot__tag{margin-top:24px;max-width:320px;font:400 16px/27px var(--f-text);color:rgba(255,255,255,.6)}
.foot__contacts{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot__phone{font:400 30px/32px var(--f-display);color:var(--c-white);border-radius:4px;transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.foot__phone:hover{color:var(--c-gold);text-shadow:0 0 16px rgba(251,208,128,.45)}
.foot__mail{font:400 16px/24px var(--f-text);color:rgba(255,255,255,.7);border-radius:4px;transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.foot__mail:hover{color:var(--c-white);text-shadow:0 0 12px rgba(251,208,128,.45)}
.foot__ms{margin-top:12px;display:flex;gap:10px}
.foot__nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:4px}
.foot__link{position:relative;font:500 15px/20px var(--f-text);color:rgba(255,255,255,.8);border-radius:2px;transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
.foot__link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--g-btn);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-med) var(--ease)}
.foot__link:hover{color:var(--c-white);text-shadow:0 0 12px rgba(251,208,128,.5)}
.foot__link:hover::after,.foot__link:focus-visible::after{transform:scaleX(1)}
.foot__bottom{margin-top:72px;padding:26px 0 0;border-top:1px solid var(--c-line);display:flex;align-items:center;gap:12px;
  font:400 12px/18px var(--f-text);color:var(--t-40)}
.foot__policy{border-radius:3px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:3px;transition:color var(--t-fast) ease,text-decoration-color var(--t-fast) ease}
.foot__policy:hover{color:rgba(255,255,255,.8);text-decoration-color:var(--c-gold)}
.foot__word{display:block;width:1280px;height:297.6px;margin:56px auto -96px;zoom:var(--k);pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 30%,transparent 92%);mask:linear-gradient(180deg,#000 30%,transparent 92%)}

@media (prefers-reduced-motion:reduce){
  .proc *,.proc *::before,.proc *::after,.final *,.final *::before,.final *::after,.foot *,.foot *::before,.foot *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .step:hover .step__card,.step:hover .step__node{transform:none}
}

/* ==========================================================================
   ПОПАПЫ «Заявка» (#m-zayavka) и «Бесплатный разбор» (#m-razbor). Каркас — .modal из блока «Кейс»,
   поля/сегмент/согласие/«спасибо» — те же классы, что у формы финального блока (.fform, .field, .input, .seg, .consent, .fthanks).
   ========================================================================== */
.mpop{width:640px}
.mpop__in{position:relative;display:flex;flex-direction:column;padding:48px 48px 44px}
.mpop__in>.fform{width:100%}
.mpop__title{max-width:480px;font:400 44px/46px var(--f-display);color:var(--c-white)}
.mpop__lead{margin:16px 0 30px;max-width:520px;font:400 16px/27px var(--f-text);color:rgba(255,255,255,.7)}
.mpop .fform__via,.mpop__need{margin-top:22px}
.mpop .fform__bottom{margin-top:30px}
.mpop .fform__consent-err{padding-left:32px}
.mpop .fthanks{flex:1;min-height:360px}
.mpop .fthanks__ok{margin-top:30px;padding:0 40px}
.mpop .fthanks .btn--md{height:56px}
.input--select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:56px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23FBD080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 24px center}
.input--select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23FBD080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.input--select option{background:#16171b;color:#fff}
.input--area{height:auto;min-height:96px;padding:16px 24px;border-radius:24px;resize:vertical;line-height:22px}
.picks{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;inset:0;opacity:0;margin:0;pointer-events:none}
.pick span{display:block;padding:0 20px;height:44px;line-height:44px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--c-stroke-2);font:500 13px/44px var(--f-text);color:rgba(255,255,255,.7);
  transition:color var(--t-fast) ease,box-shadow var(--t-med) var(--ease),background-color var(--t-med) ease}
.pick:hover span{color:var(--c-white);background-color:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(251,208,128,.55)}
.pick input:checked + span{color:var(--c-ink);font-weight:600;background:var(--g-btn);box-shadow:0 8px 20px -8px rgba(226,194,120,.6)}
.pick input:focus-visible + span{outline:2px solid var(--c-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.mpop .fthanks.is-in{animation:none}}

/* Формы: ошибка отправки (final.js → send) и скрытое поле-ловушка для ботов */
.fform__send-err{margin:14px 0 0;padding-left:32px;font:500 13px/18px var(--f-text);color:var(--c-err)}
.fform__send-err[hidden]{display:none}
.fform__send-err a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fform__hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}