/* ============================================================
   NAYFLORAX
   Экран 1 — чёрный editorial, статичный фон с проходящим свечением.
   Линия  — непрозрачная тёмная полоса с бегущими словами.
   Экран 2 — светлый, левый блок липнет, список 01–06 прокручивается.
   ============================================================ */

:root{
  --black:#000000;
  --white:#ffffff;
  --lead:rgba(255,255,255,.70);
  --nav:rgba(255,255,255,.82);

  --ink:#0a0a0a;                     /* текст на светлом */
  --paper:#f4f3f0;                   /* тон светлых разделов */
  --coal:#000000;                    /* раздел услуг — чистый чёрный, без картинки */
  --rule:rgba(0,0,0,.10);            /* тонкие линейки */

  --pad:clamp(20px, 3.85vw, 66px);   /* боковые поля */
  --navh:104px;                      /* высота шапки, уточняется из JS */
  --ease:cubic-bezier(.22,.61,.36,1);
  --motion:cubic-bezier(.16,1,.3,1);
  --motion-soft:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--black);scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
::selection{background:#fff;color:#000;}

/* ============================================================
   ШАПКА
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;
  gap:clamp(16px,2vw,40px);
  padding:clamp(18px,2.1vw,36px) var(--pad);
  transition:background .65s var(--motion-soft),border-color .65s var(--motion-soft),color .65s var(--motion-soft);
  border-bottom:1px solid transparent;
}

/* светлое состояние — над вторым экраном */
.nav--light{
  background:rgba(244,243,240,.97);   /* без backdrop-filter: он пересчитывался на каждом кадре прокрутки */
  border-bottom-color:var(--rule);
}
.nav--light .nav__logo{color:var(--ink);}
.nav--light .nav__link{color:rgba(10,10,10,.75);}
.nav--light .nav__link:hover{color:var(--ink);}
.nav--light .btn--sm{background:var(--ink);color:#fff;}
.nav--light .btn--sm:hover{box-shadow:0 10px 26px rgba(0,0,0,.18);}
.nav--light .nav__burger i{background:var(--ink);}

.nav__logo{
  font-weight:700;
  font-size:clamp(16px,1.55vw,26px);
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  transition:color .4s var(--ease);
}

.nav__menu{
  display:flex;align-items:center;
  gap:clamp(18px,2.35vw,40px);
  margin-left:auto;
}
.nav__link{
  font-size:clamp(13px,1.12vw,18px);
  font-weight:400;
  letter-spacing:.005em;
  color:var(--nav);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link:hover{color:#fff;}
.nav__link--drop{display:inline-flex;align-items:center;gap:.45em;}
.nav__link--drop svg{width:.6em;height:auto;opacity:.8;transition:transform .25s var(--ease);}
.nav__link--drop:hover svg{transform:translateY(2px);}

.nav__burger{display:none;}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;
  background:#fff;color:#000;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .55s var(--motion),box-shadow .55s var(--motion),
             background .55s var(--motion-soft),color .55s var(--motion-soft);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,255,255,.11);}

.btn--sm{
  gap:.8em;
  font-size:clamp(12px,.9vw,15px);
  font-weight:500;
  letter-spacing:-.002em;
  padding:clamp(10px,.95vw,15px) clamp(15px,1.35vw,23px);
}
.btn--sm .btn__arrow{width:1em;height:1em;flex:none;transition:transform .3s var(--ease);}
.btn--sm:hover .btn__arrow{transform:translateX(3px);}

.btn--lg{
  gap:clamp(12px,1.2vw,21px);
  font-size:clamp(14px,1vw,17px);
  font-weight:500;
  letter-spacing:-.002em;
  padding:clamp(6px,.45vw,8px) clamp(7px,.5vw,9px) clamp(6px,.45vw,8px) clamp(22px,2.2vw,38px);
}
.btn__circle{
  display:grid;place-items:center;flex:none;
  width:clamp(34px,2.5vw,42px);
  height:clamp(34px,2.5vw,42px);
  border-radius:50%;
  background:#000;color:#fff;
  transition:transform .6s var(--motion);
}
.btn__circle svg{width:44%;height:auto;}
.btn--lg:hover .btn__circle{transform:translateX(2px);}

/* ============================================================
   ЭКРАН 1
   ============================================================ */
.hero{
  position:relative;
  min-height:calc(100svh - var(--tickh,84px));   /* вместе с бегущей строкой — ровно окно, снизу ничего не торчит */
  padding-top:var(--navh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--black);
  isolation:isolate;
}

.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}

.hero__bg-img{
  position:absolute;
  inset:0;
  background:url("assets/hero-bg.webp") center/cover no-repeat;
  filter:brightness(.96);            /* экран на 4% темнее */
  opacity:1;
}
/* второй кроп — включается только на узких экранах */
.hero__bg-img--ghost{opacity:0;}

/* медленное свечение, проходящее по графике слева направо */
.hero__sweep{
  position:absolute;
  inset:-8% -45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0)   34%,
    rgba(255,255,255,.04) 44%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.04) 56%,
    rgba(255,255,255,0)   66%);
  will-change:transform,opacity;
  animation:sweep 11s cubic-bezier(.45,0,.55,1) infinite;
}

.hero__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.030) 0 1px,
    transparent 1px 3px
  );
  opacity:.4;
}

.hero__noise{
  position:absolute;inset:-12%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.55'/></svg>");
  opacity:.04;
  will-change:transform;
  animation:noise-drift 18s ease-in-out infinite;
}

.hero__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(50% 44% at 50% 54%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.50) 52%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55) 100%);
}

.hero__inner{
  position:relative;z-index:2;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:0 var(--pad);
}

.hero__title{
  margin:0;
  font-weight:400;
  font-size:clamp(28px, min(3.4vw, 6.6vh), 60px);
  line-height:1.2;
  letter-spacing:-.018em;
  color:#fff;
}
.hero__title .line{display:block;}
.hero__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  font-size:1.14em;
  padding-right:.06em;
}

.hero__lead{
  margin:clamp(16px,1.7vw,29px) 0 0;
  font-size:clamp(14px, min(1.02vw, 2vh), 17px);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.004em;
  color:var(--lead);
  max-width:50ch;
}

.hero__cta{margin-top:clamp(26px,3vw,50px);}

/* ============================================================
   БЕГУЩАЯ ЛИНИЯ — сплошная, непрозрачная
   ============================================================ */
.ticker{
  position:relative;z-index:2;
  background:#0d0d0e;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  padding:clamp(17px,1.6vw,28px) 0;
}
.ticker__track{display:flex;width:max-content;animation:ticker 52s linear infinite;}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__group{display:flex;align-items:center;flex:none;}
.ticker__group span{
  font-size:clamp(13px,1.25vw,21px);
  font-weight:500;
  letter-spacing:.005em;
  color:rgba(255,255,255,.88);
  padding:0 clamp(22px,2.3vw,42px);
  white-space:nowrap;
}
.ticker__group b{
  font-size:clamp(8px,.68vw,11px);
  color:rgba(255,255,255,.32);
  font-weight:400;
  line-height:1;
}

/* ============================================================
   ЭКРАН 2 — светлый
   ============================================================ */
.problems{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(70px,8vw,140px) 0 clamp(80px,9vw,160px);
}
.problems__bg{
  position:absolute;inset:0;
  background:url("assets/screen2-bg.webp") center/cover no-repeat;   /* WebP без потерь: пиксели те же, что в PNG */
  pointer-events:none;
}

.problems__grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5vw,90px);
  align-items:start;
  padding:0 var(--pad);
}

/* левая колонка держится на месте, пока справа идёт список */
.problems__intro{
  position:sticky;
  top:calc(var(--navh) + clamp(24px,3.5vw,60px));
}

.problems__title{
  margin:0;
  font-weight:600;
  font-size:clamp(32px, 4.6vw, 82px);
  line-height:1.08;
  letter-spacing:-.032em;
}
.problems__title .line{display:block;}
.problems__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  font-size:1.06em;
}

.problems__lead{
  margin:clamp(26px,3vw,54px) 0 0;
  font-size:clamp(16px,1.6vw,27px);
  line-height:1.45;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--ink);
}

/* --- список 01–06: лесенкой, цифры контуром --- */
.issues{
  --k:1;                               /* сила сдвига лесенки; на узких экранах меньше */
  margin:0;padding:0;
  list-style:none;
  padding-top:clamp(4px,1vw,18px);
}
.issue{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:clamp(20px,2.4vw,44px);
  padding:clamp(12px,1.3vw,22px) 0;
  margin-left:calc(var(--shift,0%) * var(--k));
}
/* пункты уходят вправо дугой и возвращаются — как в примере */
.issue:nth-child(1){--shift:0%;}
.issue:nth-child(2){--shift:11%;}
.issue:nth-child(3){--shift:19%;}
.issue:nth-child(4){--shift:27%;}
.issue:nth-child(5){--shift:24%;}
.issue:nth-child(6){--shift:18%;}

.issue__num{
  font-size:clamp(48px,5.4vw,98px);
  font-weight:300;
  line-height:.82;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(10,10,10,.82);
}

/* тело растянуто на высоту цифры, чтобы линейка легла под обоими */
.issue__body{
  align-self:stretch;
  display:flex;flex-direction:column;
  padding-top:clamp(4px,.55vw,10px);
}
.issue:not(:last-child) .issue__body::after{
  content:"";
  margin-top:auto;
  padding-top:clamp(14px,1.5vw,26px);
  border-bottom:1px solid rgba(10,10,10,.16);
}

.issue__title{
  margin:0;
  font-size:clamp(13px,1.08vw,19px);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--ink);
}
.issue__text{
  margin:clamp(7px,.75vw,13px) 0 0;
  font-size:clamp(13px,.95vw,16px);
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.003em;
  color:rgba(10,10,10,.6);
  max-width:36ch;
}

/* ============================================================
   ЭКРАН 3 — УСЛУГИ
   ============================================================ */
.services{
  position:relative;
  min-height:100svh;
  background:var(--coal);
  color:#fff;
}
.services__inner{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:calc(var(--navh) + clamp(28px,5.5vh,76px)) var(--pad) clamp(48px,7.5vh,105px);
}

.services__title{
  margin:0;
  font-weight:600;
  font-size:clamp(28px, 3.6vw, 64px);
  line-height:1.12;
  letter-spacing:-.03em;
}
.services__title{width:100%;max-width:1240px;margin-left:auto;margin-right:auto;}
.services__title .line{display:block;}
.services__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  font-size:1.06em;
}

.services__grid{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px);
  width:100%;max-width:1240px;
  margin-left:auto;margin-right:auto;
  min-height:clamp(420px,60vh,640px);
  margin-top:clamp(36px,5.5vh,82px);
  padding-bottom:clamp(6px,.7vw,8px);   /* место для нижнего листа */
}

/* --- карточка-папка: чёрная, с тонким светящимся контуром --- */
.svc{
  --tab:clamp(34px,2.9vw,46px);        /* высота язычка; точное значение ставит script.js */
  position:relative;
  display:flex;
  min-height:clamp(300px,37vh,430px);
  transform-origin:50% 80%;
  transition:transform .65s var(--motion),filter .65s var(--motion-soft);
}
/* специфичность выше, чем у .reveal.is-in — иначе появление гасит ховер */
.services__grid .svc:hover{z-index:3;transform:translateY(-3px);}

/* контур рисуется в пикселях по реальному размеру карточки — скругления не плывут */
.svc__frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.34)) drop-shadow(0 0 2px rgba(255,255,255,.22));
  transition:filter .65s var(--motion-soft);
}
.svc__frame path{
  fill:#030303;
  stroke:rgba(255,255,255,.76);
  stroke-width:1.15;
  stroke-linejoin:round;
}
.services__grid .svc:hover .svc__frame{filter:drop-shadow(0 18px 34px rgba(0,0,0,.46)) drop-shadow(0 0 6px rgba(255,255,255,.34));}
/* пока скрипт не отработал — простая рамка, чтобы карточка не осталась без контура */
.svc:not(.is-framed){border:1.4px solid rgba(255,255,255,.92);border-radius:8px;}

.svc__content{
  position:relative;z-index:1;
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(18px,1.5vw,26px) clamp(20px,1.8vw,32px) clamp(20px,1.8vw,32px);
  overflow:hidden;
}
.svc__content::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-12%;right:-12%;bottom:-8%;
  height:54%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 100%,rgba(255,255,255,.075),transparent 64%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.018));
  opacity:.8;
  transition:opacity .65s var(--motion-soft),transform .75s var(--motion);
}
.services__grid .svc:hover .svc__content::before{
  opacity:1;
  transform:translateY(-2px);
}

.svc__num{
  font-size:clamp(14px,1.1vw,19px);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  color:rgba(255,255,255,.62);
}

/* стрелка — она же ссылка; растянутая область делает кликабельной всю карточку */
.svc__link{color:#fff;}
.svc__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:8px;}
.svc__link:focus-visible{outline:none;}
.svc__link:focus-visible::after{outline:1.5px solid #fff;outline-offset:5px;}
.svc__arrow{
  position:absolute;
  top:calc(var(--tab) + clamp(20px,1.8vw,32px));
  right:clamp(20px,1.8vw,32px);
  width:clamp(16px,1.2vw,22px);
  height:auto;
  opacity:.68;
  transition:transform .55s var(--motion),opacity .45s var(--motion-soft);
}
.svc:hover .svc__arrow{transform:translateX(3px);opacity:1;}

.svc__title{
  margin:clamp(38px,3.8vw,64px) 0 0;
  padding-right:clamp(28px,2.4vw,40px);   /* не заезжать под стрелку */
  font-size:clamp(22px,2.2vw,38px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.025em;
  color:#fff;
}

.svc__text{
  margin:clamp(12px,1.2vw,20px) 0 0;
  font-size:clamp(12px,.82vw,15px);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.003em;
  max-width:36ch;
  color:rgba(255,255,255,.66);
}

/* Графику внутри услуг намеренно не показываем: карточка держится на типографике. */
.svc__art{
  display:none;
}


/* ============================================================
   ЭКРАН 4 — ПРЕИМУЩЕСТВА
   Светлый экран на высоту окна: заголовок по центру,
   сетка 3 × 2, у каждого пункта иконка в тонком чёрном круге.
   ============================================================ */
.advantages{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--navh) + clamp(36px,7vh,96px)) var(--pad) clamp(48px,7vh,110px);
  background:var(--paper);
  color:var(--ink);
}

.adv__title{
  margin:0;
  text-align:center;
  font-weight:600;
  font-size:clamp(28px,3.6vw,64px);
  line-height:1.06;
  letter-spacing:-.032em;
}
.adv__title .line{display:block;}
.adv__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  font-size:1.08em;
}

.adv__grid{
  width:100%;
  max-width:1220px;
  margin:clamp(40px,7vh,96px) auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-items:center;               /* каждый пункт по центру своей колонки */
  column-gap:clamp(24px,2.6vw,48px);
  row-gap:clamp(36px,6vh,80px);
}

.adv{
  width:100%;max-width:375px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2vw,34px);
  align-items:start;
}

/* иконка в круге; точка на правом краю — как на примере */
.adv__icon{
  --c:clamp(64px,5.2vw,96px);
  position:relative;
  width:var(--c);height:var(--c);
  display:grid;place-items:center;
  border:1.2px solid var(--ink);
  border-radius:50%;
  color:var(--ink);
}
.adv__icon svg{width:46%;height:auto;}
.adv__icon::after{
  content:"";
  position:absolute;
  right:-3.5px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;
  background:var(--ink);
}

.adv__body{padding-top:clamp(2px,.3vw,6px);}

.adv__num{
  display:flex;align-items:center;
  gap:clamp(12px,1.2vw,20px);
  font-size:clamp(12px,.9vw,16px);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
}
.adv__num::after{
  content:"";
  width:clamp(28px,2.6vw,46px);
  height:1px;
  background:currentColor;
}

.adv__name{
  margin:clamp(10px,1vw,16px) 0 0;
  font-size:clamp(14px,1.05vw,19px);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.2;
}

.adv__text{
  margin:clamp(8px,.8vw,13px) 0 0;
  font-size:clamp(13px,.88vw,16px);
  line-height:1.55;
  color:rgba(10,10,10,.62);
  max-width:32ch;
}

@media (max-width:900px){
  .adv__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .advantages{justify-content:flex-start;}
  .adv__title{font-size:clamp(30px,9vw,48px);}
  .adv__grid{grid-template-columns:minmax(0,1fr);row-gap:36px;}
  .adv__icon{--c:72px;}
  .adv__text{max-width:none;}
}

/* ============================================================
   ЭКРАН 5 — КАК МЫ РАБОТАЕМ
   Невысокий чёрный блок: заголовок по центру,
   под ним шесть этапов в ряд, соединённых линией.
   ============================================================ */
.process{
  position:relative;
  background:#000;
  color:#fff;
  padding:clamp(80px,13vh,170px) var(--pad) clamp(84px,14vh,180px);
}

.process__title{
  margin:0;
  text-align:center;
  font-weight:600;
  font-size:clamp(32px,4.4vw,80px);
  line-height:1.06;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.process__title .line{display:block;}

.process__steps{
  list-style:none;
  margin:clamp(56px,9vh,120px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  row-gap:clamp(40px,6vh,70px);
}

.step{padding-right:clamp(16px,1.8vw,32px);}
/* на страницах услуг этапов четыре, а не шесть */
.process__steps--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* номер в овальной рамке + линия до следующего этапа */
.step__head{
  display:flex;align-items:center;
  gap:clamp(14px,1.6vw,28px);
}
.step__head::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.55);
}
.step:last-child .step__head::after{display:none;}

.step__num{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(58px,5.2vw,92px);
  height:clamp(40px,3.2vw,58px);
  padding:0 clamp(14px,1.3vw,22px);
  border:1.2px solid #fff;
  border-radius:999px;
  font-size:clamp(18px,1.9vw,33px);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1;
}

.step__name{
  margin:clamp(20px,2.1vw,36px) 0 0;
  font-size:clamp(14px,1.22vw,21px);
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.2;
}

.step__text{
  margin:clamp(12px,1.3vw,22px) 0 0;
  font-size:clamp(13px,.98vw,17px);
  line-height:1.55;
  color:rgba(255,255,255,.72);
  max-width:24ch;
}

@media (max-width:1000px){
  .process__steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .process__steps--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .process__steps--4 .step:nth-child(2n) .step__head::after{display:none;}
  .step:nth-child(3n) .step__head::after{display:none;}
}
@media (max-width:560px){
  .process__title{font-size:clamp(28px,8.5vw,44px);}
  .process__steps{grid-template-columns:minmax(0,1fr);row-gap:34px;}
  .step:nth-child(3n) .step__head::after{display:block;}
  .step:last-child .step__head::after{display:none;}
  .step__text{max-width:none;}
}

/* ============================================================
   ЭКРАН 6 — ЧАСТЫЕ ВОПРОСЫ
   Невысокий светлый блок: заголовок по центру, вопросы в две
   колонки, ответ раскрывается по клику.
   ============================================================ */
.faq{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(56px,9vh,110px) var(--pad) clamp(60px,10vh,120px);
}

.faq__title{
  margin:0;
  text-align:center;
  font-weight:600;
  font-size:clamp(30px,3.4vw,62px);
  line-height:1.06;
  letter-spacing:-.032em;
}
.faq__title .line{display:block;}
.faq__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  font-size:1.08em;
}

.faq__grid{
  width:min(100%,66vw);
  max-width:1240px;
  margin:clamp(28px,4.5vh,56px) auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1vw,16px);
  align-items:start;                 /* открытый вопрос не растягивает соседа в ряду */
}

.faq__item{
  border:1px solid rgba(10,10,10,.16);
  border-radius:16px;
  transition:border-color .55s var(--motion-soft),background .55s var(--motion-soft),transform .55s var(--motion);
}
.faq__item:hover{border-color:rgba(10,10,10,.34);transform:translateY(-1px);}
.faq__item.is-open{border-color:rgba(10,10,10,.42);background:rgba(10,10,10,.025);}

.faq__q{margin:0;font:inherit;}
.faq__btn{
  width:100%;
  display:flex;align-items:center;
  gap:clamp(10px,1vw,16px);
  padding:clamp(15px,1.25vw,22px) clamp(18px,1.6vw,28px);
  background:none;border:0;
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.faq__btn:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:14px;}

.faq__text{
  flex:1;
  font-size:clamp(15px,1.12vw,19px);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
}

/* плюс в круге; при открытии поворачивается в крестик */
.faq__icon{
  position:relative;
  flex:none;
  width:clamp(30px,2.3vw,38px);height:clamp(30px,2.3vw,38px);
  border:1px solid rgba(10,10,10,.5);
  border-radius:50%;
  transition:transform .4s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.faq__icon::before,
.faq__icon::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:38%;height:1.4px;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:background .35s var(--ease);
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq__item:hover .faq__icon{border-color:var(--ink);}
.faq__item.is-open .faq__icon{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);}
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after{background:#fff;}

/* ответ: высота анимируется через сетку 0fr → 1fr */
.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--motion);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a-in{
  overflow:hidden;
  visibility:hidden;
  transition:visibility 0s .65s;
}
.faq__item.is-open .faq__a-in{visibility:visible;transition-delay:0s;}
.faq__a p{
  margin:0;
  padding:0 clamp(18px,1.6vw,28px) clamp(16px,1.5vw,24px);
  font-size:clamp(14px,1vw,17px);
  line-height:1.6;
  color:rgba(10,10,10,.64);
}

@media (max-width:760px){
  .faq__grid{grid-template-columns:minmax(0,1fr);width:100%;}
}

/* ============================================================
   ЭКРАН 7 — ФИНАЛ / CTA
   Экран на высоту окна: огромная типографика сверху,
   внизу описание, кнопка в Telegram и контакты.
   ============================================================ */
.cta{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(48px,8vh,110px);
  background:#000;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  padding:calc(var(--navh) + clamp(20px,4.5vh,70px)) var(--pad) clamp(24px,4vh,56px);
  overflow:hidden;
}

.cta__title{
  margin:0;
  font-weight:700;
  font-size:clamp(64px,15.5vw,300px);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.cta__title .line{display:block;}
/* вторая строка уходит вправо — диагональ через весь экран */
.cta__title .line:nth-child(2){text-align:right;padding-right:.05em;}

.cta__bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(32px,5vw,90px);
  padding-top:clamp(24px,3.4vh,44px);
  border-top:1px solid rgba(255,255,255,.18);
}

.cta__lead{
  margin:0;
  max-width:22ch;
  font-size:clamp(18px,2vw,34px);
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.02em;
}

.cta__actions{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,2.2vw,34px);
}

.cta__contacts{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:clamp(24px,3vw,56px);
}
.cta__contacts li{display:flex;flex-direction:column;gap:6px;}
.cta__contacts span{
  font-size:clamp(11px,.8vw,13px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.cta__contacts a{
  font-size:clamp(15px,1.15vw,20px);
  padding-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.3);
  transition:border-color .3s var(--ease);
}
.cta__contacts a:hover{border-color:#fff;}

/* копирайт — последняя строка сайта; отрицательный отступ гасит большой gap секции */
.cta__copy{
  margin:calc(clamp(48px,8vh,110px) * -1 + clamp(18px,2.4vh,30px)) 0 0;
  font-size:clamp(11px,.8vw,13px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

@media (max-width:760px){
  .cta{justify-content:flex-start;}
  .cta__title{font-size:clamp(56px,19vw,140px);}
  .cta__bottom{grid-template-columns:minmax(0,1fr);}
}

/* ============================================================
   ВСТУПЛЕНИЕ
   1) чёрный экран: буквы логотипа поднимаются, линия заполняется;
   2) занавес уходит вверх, фон осаживается из крупного плана,
      строки заголовка выезжают из-под маски, следом подпись,
      кнопка, меню и бегущая строка.
   Всё двигается только transform/opacity — без нагрузки на отрисовку.
   Класс .js ставит скрипт в <head>; без JS сайт виден сразу.
   Повторный заход в той же вкладке — без чёрного экрана (.no-intro).
   ============================================================ */
:root{--expo:cubic-bezier(.16,1,.3,1);--curtain:cubic-bezier(.76,0,.24,1);}

.intro{display:none;}
.js .intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:#000;color:#fff;
  transition:transform 1.05s var(--curtain);
}
.no-intro .intro{display:none;}
.is-ready .intro{transform:translateY(-100%);pointer-events:none;}

.intro__inner{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2vw,28px);
  transition:transform .9s var(--curtain),opacity .5s var(--ease);
}
.is-ready .intro__inner{transform:translateY(-60px);opacity:0;}

.intro__logo{
  display:flex;
  overflow:hidden;
  padding-bottom:.08em;
  font-weight:700;
  font-size:clamp(30px,4.2vw,64px);
  letter-spacing:-.01em;
  line-height:1;
}
.intro__logo span{
  display:block;
  transform:translateY(110%);
  animation:intro-letter .9s var(--expo) forwards;
}
.intro__logo span:nth-child(1){animation-delay:.10s;}
.intro__logo span:nth-child(2){animation-delay:.14s;}
.intro__logo span:nth-child(3){animation-delay:.18s;}
.intro__logo span:nth-child(4){animation-delay:.22s;}
.intro__logo span:nth-child(5){animation-delay:.26s;}
.intro__logo span:nth-child(6){animation-delay:.30s;}
.intro__logo span:nth-child(7){animation-delay:.34s;}
.intro__logo span:nth-child(8){animation-delay:.38s;}
.intro__logo span:nth-child(9){animation-delay:.42s;}
@keyframes intro-letter{to{transform:none;}}

.intro__bar{
  width:clamp(150px,15vw,240px);height:1px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.intro__bar i{
  display:block;height:100%;
  background:#fff;
  transform:scaleX(0);transform-origin:left;
  animation:intro-bar 1s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes intro-bar{to{transform:scaleX(1);}}

.intro__caption{
  font-size:clamp(10px,.72vw,12px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  opacity:0;
  animation:intro-fade .8s var(--ease) .5s forwards;
}
@keyframes intro-fade{to{opacity:1;}}

/* --- первый экран: до старта всё спрятано, после — собирается --- */
.js:not(.is-ready) .hero__bg,
.js:not(.is-ready) .hero__lead,
.js:not(.is-ready) .hero__cta,
.js:not(.is-ready) .nav__logo,
.js:not(.is-ready) .nav__link,
.js:not(.is-ready) .nav__cta,
.js:not(.is-ready) .nav__burger,
.js:not(.is-ready) .ticker{opacity:0;}
.js:not(.is-ready) .hero__title .line__in{transform:translateY(110%);}

.is-ready .hero__bg{animation:intro-bg 2.4s var(--expo) .1s both;}
@keyframes intro-bg{from{opacity:0;transform:scale(1.12);}to{opacity:1;transform:none;}}

.is-ready .hero__title .line__in{animation:intro-line 1.3s var(--expo) both;}
.is-ready .hero__title .line:nth-child(1) .line__in{animation-delay:.42s;}
.is-ready .hero__title .line:nth-child(2) .line__in{animation-delay:.54s;}
@keyframes intro-line{from{transform:translateY(110%);}to{transform:none;}}

.is-ready .hero__lead{animation:intro-up 1.1s var(--expo) .78s both;}
.is-ready .hero__cta{animation:intro-up 1.1s var(--expo) .9s both;}
@keyframes intro-up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.is-ready .nav__logo{animation:intro-down .9s var(--expo) .55s both;}
.is-ready .nav__link{animation:intro-down .9s var(--expo) both;}
.is-ready .nav__link:nth-of-type(1){animation-delay:.60s;}
.is-ready .nav__link:nth-of-type(2){animation-delay:.64s;}
.is-ready .nav__link:nth-of-type(3){animation-delay:.68s;}
.is-ready .nav__link:nth-of-type(4){animation-delay:.72s;}
.is-ready .nav__link:nth-of-type(5){animation-delay:.76s;}
.is-ready .nav__link:nth-of-type(6){animation-delay:.80s;}
.is-ready .nav__link:nth-of-type(7){animation-delay:.84s;}
.is-ready .nav__cta,
.is-ready .nav__burger{animation:intro-down .9s var(--expo) .9s both;}
@keyframes intro-down{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}

.is-ready .ticker{animation:intro-ticker 1.1s var(--expo) 1s both;}
@keyframes intro-ticker{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:none;}}

/* ============================================================
   СТРАНИЦЫ УСЛУГ — строгий редакционный формат без изображений
   ============================================================ */
.service-page{background:var(--paper);color:var(--ink);}
.service-shell{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.service-hero{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  padding-top:var(--navh);
}
.service-hero .service-shell{position:relative;z-index:1;}
.service-hero__topline{
  display:flex;
  justify-content:flex-start;
  gap:24px;
  padding:clamp(20px,2vw,28px) 0;
  border-bottom:1px solid rgba(10,10,10,.16);
  color:rgba(10,10,10,.48);
  font-size:clamp(11px,.78vw,13px);
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.service-back{color:inherit;transition:color .3s var(--ease);}
.service-back:hover{color:var(--ink);}
.service-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.62fr);
  align-items:stretch;
  gap:clamp(28px,4vw,64px);
  padding:clamp(58px,6vw,88px) 0 clamp(42px,4.5vw,68px);
}
.service-hero__title{
  align-self:center;
  margin:0;
  max-width:10ch;
  font-size:clamp(62px,7.4vw,116px);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.055em;
}
.service-hero__title em{
  display:block;
  margin-top:.28em;
  font-family:inherit;
  font-size:.46em;
  font-style:normal;
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
  color:rgba(10,10,10,.42);
}
.service-hero__aside{
  position:relative;
  display:flex;
  min-height:clamp(320px,27vw,390px);
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(32px,3.4vw,52px);
  background:#0a0a0a;
  color:#fff;
}
.service-hero__aside::before{content:"↗";position:absolute;top:clamp(28px,3vw,44px);right:clamp(28px,3vw,44px);font-size:20px;color:rgba(255,255,255,.7);}
.service-hero__aside p{
  margin:0;
  max-width:38ch;
  color:rgba(255,255,255,.7);
  font-size:clamp(16px,1.1vw,18px);
  line-height:1.68;
}
.service-text-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:56px;
  width:100%;
  min-width:0;
  margin-top:clamp(28px,3vw,40px);
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.45);
  border-bottom:1px solid rgba(255,255,255,.45);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.service-text-link:hover{color:rgba(255,255,255,.68);border-color:#fff;}
.service-text-link span{font-size:18px;}
.service-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  border-top:1px solid rgba(10,10,10,.18);
  border-bottom:1px solid rgba(10,10,10,.18);
  background:rgba(255,255,255,.28);
}
.service-facts>div{min-height:118px;padding:24px clamp(24px,3vw,48px) 24px 0;}
.service-facts>div+div{padding-left:clamp(24px,3vw,48px);border-left:1px solid rgba(10,10,10,.18);}
.service-facts dt,
.service-kicker{
  margin:0;
  color:rgba(10,10,10,.44);
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-facts dt{color:rgba(10,10,10,.42);}
.service-facts dd{margin:18px 0 0;max-width:26ch;color:rgba(10,10,10,.86);font-size:clamp(14px,1vw,16px);line-height:1.5;}

.service-intro{padding:clamp(92px,10vw,154px) 0;background:var(--paper);}
.service-intro__grid{display:block;}
.service-intro__body{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);
  column-gap:clamp(72px,10vw,170px);
  row-gap:1.25em;
}
.service-intro__body h2{
  grid-row:1 / span 2;
  margin:0;
  max-width:13ch;
  font-size:clamp(40px,4.7vw,72px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.05em;
}
.service-intro__body p{
  margin:0;
  max-width:58ch;
  color:rgba(10,10,10,.68);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.62;
}
.service-intro__body p+p{margin-top:0;}

.service-scope{padding:clamp(88px,10vw,146px) 0;background:#eeece8;}
.service-section-head{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(0,1.65fr);gap:clamp(54px,9vw,160px);align-items:start;margin-bottom:clamp(52px,6vw,86px);}
.service-scope .service-section-head{grid-template-columns:1fr;}
.service-section-title{
  margin:0;
  max-width:15ch;
  font-size:clamp(42px,5.8vw,88px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.055em;
}
.service-scope__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);
}
.service-scope__row{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:clamp(240px,20vw,290px);
  padding:clamp(28px,3vw,44px);
  border:1px solid rgba(10,10,10,.16);
  background:rgba(255,255,255,.28);
  transition:transform .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease);
}
.service-scope__row::before{content:"";width:34px;height:1px;margin-bottom:clamp(34px,4vw,58px);background:rgba(10,10,10,.62);}
.service-scope__row:hover{transform:translateY(-3px);background:rgba(255,255,255,.55);border-color:rgba(10,10,10,.28);}
.service-scope__row h3{margin:0;max-width:18ch;font-size:clamp(23px,2vw,31px);font-weight:500;line-height:1.12;letter-spacing:-.035em;}
.service-scope__row p{margin:auto 0 0;padding-top:clamp(24px,3vw,38px);max-width:48ch;color:rgba(10,10,10,.62);font-size:clamp(14px,1vw,16px);line-height:1.62;}

.service-process{padding:clamp(90px,11vw,170px) 0;background:var(--paper);}
.service-process__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px);}
.service-process__step{min-height:230px;padding-top:28px;border-top:1px solid rgba(10,10,10,.24);}
.service-process__step::before{content:"";display:block;width:8px;height:8px;border:1px solid rgba(10,10,10,.5);border-radius:50%;}
.service-process__step h3{margin:clamp(42px,4vw,62px) 0 0;font-size:clamp(22px,1.8vw,29px);font-weight:500;letter-spacing:-.03em;}
.service-process__step p{margin:18px 0 0;max-width:31ch;color:rgba(10,10,10,.6);font-size:14px;line-height:1.62;}

@media (max-width:960px){
  .service-hero__grid{grid-template-columns:1fr;gap:56px;padding:clamp(66px,9vw,92px) 0 70px;}
  .service-hero__aside{max-width:620px;}
  .service-intro__body,
  .service-section-head{grid-template-columns:1fr;gap:32px;}
  .service-intro__body h2{grid-row:auto;margin-bottom:28px;}
  .service-scope__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .service-scope__row{min-height:290px;}
  .service-process__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px;}
}
@media (max-width:680px){
  .service-hero__grid{gap:44px;padding:54px 0 54px;}
  .service-hero__title{font-size:clamp(46px,14vw,68px);line-height:.96;}
  .service-hero__title em{margin-top:.34em;font-size:.5em;line-height:1.1;}
  .service-hero__aside{max-width:none;min-height:300px;padding:28px;}
  .service-hero__aside::before{top:26px;right:26px;}
  .service-hero__aside p{font-size:16px;}
  .service-facts{grid-template-columns:1fr;}
  .service-facts>div{min-height:0;padding:22px 0 24px;}
  .service-facts>div+div{padding-left:0;border-top:1px solid rgba(10,10,10,.18);border-left:0;}
  .service-facts dd{margin-top:12px;}
  .service-intro__body h2{font-size:clamp(34px,10.5vw,52px);}
  .service-intro__body p{font-size:16px;}
  .service-section-title{font-size:clamp(38px,11vw,56px);}
  .service-scope__list{grid-template-columns:1fr;gap:12px;}
  .service-scope__row{min-height:250px;padding:26px;}
  .service-scope__row::before{margin-bottom:36px;}
  .service-process__list{grid-template-columns:1fr;gap:38px;}
  .service-process__step{min-height:0;padding-bottom:8px;}
  .service-process__step h3{margin-top:38px;}
}

/* ============================================================
   СТРАНИЦЫ УСЛУГ — premium minimal, версия 4
   Изображение работает как контекст услуги, а не как фон.
   ============================================================ */
.service-hero{background:#efede8;color:var(--ink);}
.service-hero__topline{padding:20px 0;border-bottom-color:rgba(10,10,10,.14);color:rgba(10,10,10,.48);}
.service-hero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);
  align-items:stretch;
  gap:clamp(34px,5vw,78px);
  padding:clamp(48px,5vw,76px) 0 clamp(42px,4vw,62px);
}
.service-hero__copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(12px,2vw,30px) 0;}
.service-hero__title{
  align-self:auto;
  max-width:9.5ch;
  font-size:clamp(50px,5.8vw,88px);
  font-weight:560;
  line-height:.98;
  letter-spacing:-.055em;
}
.service-hero__title span{display:block;margin-top:.12em;color:rgba(10,10,10,.38);font-weight:420;}
.service-hero__lead{margin:clamp(30px,3.5vw,48px) 0 0;max-width:43ch;color:rgba(10,10,10,.66);font-size:clamp(16px,1.16vw,19px);line-height:1.65;}
.service-primary-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  min-width:248px;
  margin-top:clamp(28px,3vw,42px);
  padding:17px 20px;
  background:#0a0a0a;
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .35s var(--ease),background-color .35s var(--ease);
}
.service-primary-link:hover{transform:translateY(-2px);background:#242424;}
.service-primary-link i{font-size:17px;font-style:normal;font-weight:400;}
.service-hero__visual{
  position:relative;
  min-height:clamp(430px,41vw,590px);
  margin:0;
  padding:10px 10px 0;
  overflow:hidden;
  background:#0b0b0b;
}
.service-hero__visual img{display:block;width:100%;height:calc(100% - 48px);object-fit:cover;filter:grayscale(1) contrast(1.03);}
.service-hero__visual figcaption{display:flex;height:48px;align-items:center;justify-content:space-between;gap:20px;padding:0 8px;color:rgba(255,255,255,.62);font-size:10px;letter-spacing:.09em;text-transform:uppercase;}
.service-facts{border-color:rgba(10,10,10,.15);background:transparent;}
.service-facts>div{min-height:104px;padding-top:22px;padding-bottom:22px;}
.service-facts>div+div{border-left-color:rgba(10,10,10,.15);}
.service-facts dd{margin-top:14px;font-size:14px;}

.service-intro{padding:clamp(86px,9vw,132px) 0;background:#f7f6f3;}
.service-intro__body{grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);column-gap:clamp(64px,9vw,140px);}
.service-intro__body h2{max-width:14ch;font-size:clamp(38px,4.25vw,64px);line-height:1.04;}
.service-intro__body p{font-size:clamp(16px,1.15vw,19px);line-height:1.68;}

.service-scope{padding:clamp(86px,9vw,136px) 0;background:#ebe9e4;}
.service-scope .service-section-head{margin-bottom:clamp(44px,5vw,70px);}
.service-scope .service-section-title{max-width:none;font-size:clamp(40px,4.7vw,70px);}
.service-scope__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(24px,3vw,46px);
  row-gap:clamp(38px,5vw,70px);
  border-bottom:0;
}
.service-scope__row{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:clamp(270px,22vw,315px);
  padding:clamp(18px,1.6vw,24px) 0 0;
  border:0;
  border-top:1px solid rgba(10,10,10,.18);
  background:transparent;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.service-scope__row::before{display:none;}
.service-scope__row:hover{transform:translateY(-2px);background:transparent;border-color:rgba(10,10,10,.72);}
.service-scope__row h3{margin:clamp(52px,5vw,76px) 0 0;max-width:15ch;font-size:clamp(22px,1.8vw,29px);line-height:1.08;}
.service-scope__row p{margin:clamp(16px,1.5vw,22px) 0 0;padding:0;max-width:36ch;font-size:clamp(13px,.95vw,16px);line-height:1.6;}

.service-process{padding:clamp(90px,10vw,148px) 0;background:#0b0b0b;color:#fff;}
.service-process .service-kicker{color:rgba(255,255,255,.42);}
.service-process .service-section-title{color:#fff;max-width:11ch;font-size:clamp(40px,4.8vw,72px);}
.service-process__list{gap:0;border-bottom:1px solid rgba(255,255,255,.16);}
.service-process__step{min-height:240px;padding:30px clamp(24px,3vw,42px) 34px;border-top-color:rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);}
.service-process__step:first-child{padding-left:0;}
.service-process__step:last-child{border-right:0;padding-right:0;}
.service-process__step::before{width:28px;height:1px;border:0;border-radius:0;background:rgba(255,255,255,.5);}
.service-process__step h3{margin:clamp(42px,4vw,58px) 0 0;color:#fff;}
.service-process__step p{color:rgba(255,255,255,.66);}

.service-page + .cta{
  min-height:0;
  gap:clamp(62px,8vw,112px);
  padding:clamp(96px,10vw,150px) var(--pad) 34px;
}
.service-page + .cta .cta__title{max-width:11ch;font-size:clamp(54px,6.4vw,98px);line-height:.94;text-transform:none;}
.service-page + .cta .cta__title .line{display:inline;}
.service-page + .cta .cta__title .line:nth-child(2){text-align:left;padding:0;}
.service-page + .cta .cta__bottom{grid-template-columns:minmax(0,1fr) minmax(320px,.6fr);}
.service-page + .cta .cta__lead{font-size:clamp(18px,1.7vw,27px);}
.service-page + .cta .cta__copy{margin:0;}

@media (max-width:960px){
  .service-hero__grid{grid-template-columns:1fr;gap:42px;}
  .service-hero__copy{padding-bottom:0;}
  .service-hero__visual{min-height:clamp(390px,66vw,600px);}
  .service-intro__body{grid-template-columns:1fr;}
  .service-scope__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .service-scope__row{min-height:270px;}
  .service-process__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .service-process__step:nth-child(2){border-right:0;}
  .service-page + .cta .cta__bottom{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .service-hero__grid{gap:34px;padding:42px 0 38px;}
  .service-hero__title{font-size:clamp(44px,13vw,62px);}
  .service-hero__lead{margin-top:26px;font-size:16px;}
  .service-primary-link{width:100%;}
  .service-hero__visual{min-height:330px;padding:7px 7px 0;}
  .service-hero__visual img{height:calc(100% - 42px);}
  .service-hero__visual figcaption{height:42px;font-size:8px;}
  .service-scope__list{grid-template-columns:1fr;row-gap:34px;}
  .service-scope__row{min-height:0;padding:18px 0 4px;}
  .service-scope__row h3{margin-top:38px;}
  .service-process__list{grid-template-columns:1fr;}
  .service-process__step,.service-process__step:first-child,.service-process__step:last-child{min-height:0;padding:28px 0 34px;border-right:0;}
  .service-process__step h3{margin-top:32px;}
  .service-page + .cta{padding-top:90px;}
  .service-page + .cta .cta__title{font-size:clamp(52px,16vw,78px);}
}

/* ============================================================
   СТРАНИЦЫ УСЛУГ — текстовый первый экран, версия 5
   Без изображений, служебной полоски и отдельного блока процесса.
   ============================================================ */
.service-hero{
  position:relative;
  min-height:min(820px,100svh);
  overflow:hidden;
  background:#f1f0ec;
}
.service-hero::after{
  content:"";
  position:absolute;
  right:var(--pad);
  bottom:0;
  left:var(--pad);
  height:1px;
  background:rgba(10,10,10,.14);
}
.service-hero__topline{
  padding:22px 0;
  border-bottom:1px solid rgba(10,10,10,.14);
}
.service-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  align-items:end;
  gap:clamp(64px,9vw,150px);
  min-height:clamp(560px,68vh,680px);
  padding:clamp(72px,9vh,112px) 0 clamp(74px,9vh,108px);
}
.service-hero__copy{
  display:flex;
  min-width:0;
  padding:0;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
}
.service-hero__eyebrow{
  margin:0 0 clamp(34px,5vh,58px);
  color:rgba(10,10,10,.48);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.service-hero__title{
  max-width:10.5ch;
  font-size:clamp(62px,7.2vw,112px);
  font-weight:540;
  line-height:.88;
  letter-spacing:-.065em;
}
.service-hero__title span{
  margin-top:.14em;
  color:rgba(10,10,10,.34);
  font-weight:440;
}
.service-hero__aside{
  position:relative;
  display:flex;
  min-height:0;
  max-width:470px;
  padding:0 0 2px clamp(28px,3vw,46px);
  flex-direction:column;
  justify-content:flex-end;
  overflow:visible;
  border:0;
  border-left:1px solid rgba(10,10,10,.18);
  background:transparent;
  color:var(--ink);
}
.service-hero__aside::before{content:none;}
.service-hero__aside .service-hero__lead{
  margin:0;
  max-width:35ch;
  color:rgba(10,10,10,.67);
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.66;
}
.service-hero__aside .service-primary-link{
  width:100%;
  min-width:0;
  margin-top:clamp(34px,4vh,48px);
  padding:18px 0;
  border-top:1px solid rgba(10,10,10,.7);
  border-bottom:1px solid rgba(10,10,10,.18);
  background:transparent;
  color:var(--ink);
}
.service-hero__aside .service-primary-link:hover{
  padding-right:8px;
  transform:none;
  background:transparent;
}

@media (max-width:960px){
  .service-hero{min-height:0;}
  .service-hero__grid{
    grid-template-columns:1fr;
    gap:58px;
    min-height:0;
    padding:72px 0 82px;
  }
  .service-hero__aside{max-width:620px;padding-left:28px;}
}
@media (max-width:680px){
  .service-hero__topline{padding:18px 0;}
  .service-hero__grid{gap:48px;padding:54px 0 66px;}
  .service-hero__eyebrow{margin-bottom:34px;font-size:10px;}
  .service-hero__title{font-size:clamp(48px,14.5vw,66px);line-height:.91;}
  .service-hero__aside{padding-left:20px;}
  .service-hero__aside .service-hero__lead{font-size:16px;}
  .service-hero__aside .service-primary-link{margin-top:32px;}
}

/* ============================================================
   СТРАНИЦЫ УСЛУГ — контрастная композиция, версия 6
   Графический модуль собран средствами CSS, без фотографий.
   ============================================================ */
.service-hero{
  min-height:0;
  background:#f3f1ec;
}
.service-hero__grid{
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
  align-items:stretch;
  gap:clamp(38px,5vw,78px);
  min-height:clamp(590px,72vh,720px);
  padding:clamp(46px,5.5vh,74px) 0 clamp(52px,6vh,82px);
}
.service-hero__copy{
  position:relative;
  justify-content:flex-end;
  padding:clamp(42px,5vw,76px) 0 0;
}
.service-hero__copy::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:clamp(74px,8vw,126px);
  height:1px;
  background:#0a0a0a;
}
.service-hero__title{
  position:relative;
  z-index:1;
  max-width:9.4ch;
  font-size:clamp(66px,7.35vw,114px);
  line-height:.89;
}
.service-hero__title span{color:rgba(10,10,10,.34);}
.service-hero__aside{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:100%;
  padding:clamp(34px,3.4vw,52px);
  overflow:hidden;
  border:0;
  background:
    radial-gradient(circle at 72% 25%,transparent 0 52px,rgba(255,255,255,.75) 53px 54px,transparent 55px 98px,rgba(255,255,255,.22) 99px 100px,transparent 101px),
    linear-gradient(90deg,transparent calc(72% - .5px),rgba(255,255,255,.18) 72%,transparent calc(72% + .5px)),
    linear-gradient(0deg,transparent calc(75% - .5px),rgba(255,255,255,.18) 75%,transparent calc(75% + .5px)),
    #0b0b0b;
  color:#fff;
}
.service-hero__aside::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:calc(25% - 5px);
  left:calc(72% - 5px);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:-112px 94px 0 -3px rgba(255,255,255,.55),-176px 146px 0 -4px rgba(255,255,255,.34);
}
.service-hero__aside::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:calc(25% + 72px);
  right:28%;
  width:45%;
  height:1px;
  opacity:.6;
  background:#fff;
  transform:rotate(-31deg);
  transform-origin:right center;
}
.service-hero__aside .service-hero__lead{
  margin-top:auto;
  max-width:36ch;
  color:rgba(255,255,255,.78);
}
.service-hero__aside .service-primary-link{
  border-top-color:rgba(255,255,255,.72);
  border-bottom-color:rgba(255,255,255,.2);
  color:#fff;
}

@media (max-width:960px){
  .service-hero__grid{
    grid-template-columns:1fr;
    gap:38px;
    padding:54px 0 72px;
  }
  .service-hero__copy{min-height:340px;padding-top:48px;}
  .service-hero__aside{min-height:480px;padding:38px;}
}
@media (max-width:680px){
  .service-hero__grid{padding:40px 0 58px;}
  .service-hero__copy{min-height:270px;padding-top:38px;}
  .service-hero__title{font-size:clamp(50px,14.5vw,68px);}
  .service-hero__aside{min-height:410px;padding:26px;}
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН УСЛУГ — вариант опубликованного сайта
   Возвращён без правой фотографии.
   ============================================================ */
.srv-hero{
  position:relative;
  display:flex;
  height:100svh;
  min-height:100svh;
  align-items:center;
  padding:calc(var(--navh) + clamp(18px,3vh,40px)) var(--pad) clamp(24px,4vh,54px);
  overflow:hidden;
  background:#000;
  color:#fff;
}
.srv-hero__bg{
  position:absolute;
  inset:0;
  background:url("assets/hero-bg.webp") center/cover no-repeat;
  opacity:.22;
  pointer-events:none;
}
.srv-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.8) 70%,#000 100%);
}
.srv-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  grid-template-columns:minmax(0,860px);
  justify-content:start;
  align-items:center;
  gap:0;
}
.srv-hero__text{max-width:860px;}
.srv-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(20px,3vh,38px);
  color:rgba(255,255,255,.6);
  font-size:clamp(12px,.85vw,14px);
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .3s var(--ease);
}
.srv-back:hover{color:#fff;}
.srv-back svg{width:1.1em;height:auto;}
.srv-hero__title{
  margin:0;
  font-size:clamp(34px,4.6vw,78px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
}
.srv-hero__title em{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:1.06em;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.01em;
}
.srv-hero__lead{
  max-width:60ch;
  margin:clamp(20px,2.2vw,34px) 0 0;
  color:rgba(255,255,255,.72);
  font-size:clamp(15px,1.15vw,20px);
  line-height:1.6;
}
.srv-hero__actions{margin-top:clamp(26px,3vw,44px);}
.srv-hero__actions .btn{background:#fff;color:#0a0a0a;}
.srv-hero__graphic{
  display:none;
}
.srv-hero__graphic::before,
.srv-hero__graphic::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.srv-hero__graphic::before{
  inset:4% 2%;
  border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.srv-hero__graphic::after{
  top:4%;
  bottom:4%;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.08);
}
.srv-hero__graphic svg{display:block;width:100%;height:auto;overflow:visible;}
.srv-graphic__grid path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;}
.srv-graphic__trace{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.srv-graphic__trace--ghost{stroke:rgba(255,255,255,.22);stroke-width:1;}
.srv-graphic__nodes circle{fill:#000;stroke:#fff;stroke-width:2;}
.srv-graphic__nodes circle:last-child{fill:#fff;}
.srv-graphic__bars path{fill:none;stroke:rgba(255,255,255,.44);stroke-width:7;}
.srv-graphic__frame,.srv-graphic__device,.srv-graphic__poster rect{
  fill:rgba(255,255,255,.018);
  stroke:rgba(255,255,255,.55);
  stroke-width:1.2;
}
.srv-graphic__soft,.srv-graphic__poster path{
  fill:none;
  stroke:rgba(255,255,255,.25);
  stroke-width:1.2;
  stroke-linecap:round;
}
.srv-graphic__block{fill:rgba(255,255,255,.78);}
.srv-graphic__button{fill:#fff;}
.srv-graphic__node{fill:#fff;}
.srv-graphic__poster circle{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.2;}
.srv-graphic__poster--back{opacity:.46;transform:translate(-8px,8px);}
.srv-graphic__poster--front{opacity:.92;}
.srv-graphic__accent{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1;}
.js.is-ready .srv-hero__graphic{animation:srvGraphicIn 1.2s cubic-bezier(.22,.61,.36,1) both;}
@keyframes srvGraphicIn{from{opacity:0;transform:translateY(18px);}to{opacity:.94;transform:none;}}

@media (max-width:960px){
  .srv-hero{height:auto;min-height:100svh;}
  .srv-hero__inner{grid-template-columns:minmax(0,1fr);gap:52px;}
  .srv-hero__text{max-width:720px;}
  .srv-hero__graphic{max-width:640px;justify-self:start;}
}
@media (max-width:680px){
  .srv-hero{padding-top:calc(var(--navh) + 40px);padding-bottom:64px;}
  .srv-hero__title{font-size:clamp(36px,11.5vw,54px);}
  .srv-hero__graphic{margin-top:8px;}
}

/* Невысокие ноутбуки: весь первый экран, включая кнопку, помещается в один кадр. */
@media (min-width:961px) and (max-height:760px){
  .srv-hero{
    height:auto;
    min-height:100svh;
    align-items:flex-start;
    padding-top:calc(var(--navh) + 18px);
    padding-bottom:24px;
    overflow:visible;
  }
  .srv-hero__inner{align-items:start;}
  .srv-back{margin-bottom:12px;}
  .srv-hero__title{font-size:clamp(32px,min(4.2vw,11vh),70px);}
  .srv-hero__lead{
    max-width:72ch;
    margin-top:12px;
    font-size:clamp(13px,min(1vw,3.5vh),16px);
    line-height:1.4;
  }
  .srv-hero__actions{margin-top:16px;}
  .srv-hero__actions .btn--lg{font-size:14px;padding:6px 7px 6px 20px;}
}

/* ============================================================
   БЛОЧНАЯ СИСТЕМА — каждый экран отдельной «плитой»
   Разделы налезают друг на друга скруглённым верхним краем,
   поэтому граница между экранами читается физически.
   ============================================================ */

/* якоря не должны прятаться под фиксированной шапкой */
.hero,.problems,.services,.advantages,.process,.faq,.cta,.service-hero,.service-intro,.service-scope,.service-process{scroll-margin-top:calc(var(--navh) + 8px);}

.hero{z-index:0;}
.ticker{z-index:1;}

.problems,
.services{position:relative;}

/* тень сверху отделяет плиту от предыдущего экрана */
.problems{z-index:2;box-shadow:0 -18px 40px rgba(0,0,0,.42);}
/* светлое на светлом одной тенью не разделить — нужен прочерченный край */
.services{z-index:3;box-shadow:0 -16px 38px rgba(0,0,0,.16);}

/* верхний отступ у плиты больше, чтобы край дышал */
.problems{padding-top:clamp(84px,9vw,170px);}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;
  justify-content:center;
  gap:clamp(14px,2.4vh,26px);
  padding:calc(var(--navh) + 24px) var(--pad) clamp(30px,6vh,60px);
  background:rgba(8,8,9,.97);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s var(--ease);
}
.menu.is-open{opacity:1;visibility:visible;}
.menu__link{
  font-size:clamp(24px,7vw,40px);
  font-weight:500;
  letter-spacing:-.02em;
  color:#fff;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.menu.is-open .menu__link{opacity:1;transform:none;}
.menu.is-open .menu__link:nth-child(1){transition-delay:.08s;}
.menu.is-open .menu__link:nth-child(2){transition-delay:.13s;}
.menu.is-open .menu__link:nth-child(3){transition-delay:.18s;}
.menu.is-open .menu__link:nth-child(4){transition-delay:.23s;}
.menu.is-open .menu__link:nth-child(5){transition-delay:.28s;}
.menu__cta{margin-top:clamp(16px,3vh,32px);align-self:flex-start;}

/* бургер превращается в крестик */
.nav__burger i{transition:transform .35s var(--ease),opacity .25s var(--ease),background .4s var(--ease);}
.nav.is-menu-open .nav__burger i:first-child{transform:translateY(3.75px) rotate(45deg);}
.nav.is-menu-open .nav__burger i:last-child{transform:translateY(-3.75px) rotate(-45deg);}
/* при открытом меню шапка всегда тёмная */
.nav.is-menu-open,
.nav.is-menu-open.nav--light{background:transparent;border-bottom-color:transparent;}
.nav.is-menu-open .nav__logo{color:#fff;}
.nav.is-menu-open .nav__burger i{background:#fff;}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Вступительной анимации нет: первый экран стоит готовым
   с первого кадра. Маска строки осталась — ею появляются
   заголовки разделов по мере прокрутки.
   ============================================================ */
:root{
  --expo:cubic-bezier(.16,1,.3,1);
  --reveal:cubic-bezier(.22,.78,.2,1);
}

.line{
  display:block;
  overflow:hidden;
  padding-bottom:.16em;      /* чтобы маска не срезала выносные элементы */
  margin-bottom:-.16em;
}
.line__in{display:block;}

.reveal{
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:opacity .72s var(--motion-soft),transform .88s var(--reveal);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:translate3d(0,0,0);}
.reveal--soft{filter:none;}
.reveal--card{transform:translate3d(0,12px,0) scale(.997);}
.reveal--card.is-in{transform:translate3d(0,0,0) scale(1);}
.reveal--row{transform:translate3d(0,9px,0);}

/* заголовки разделов выезжают той же маской, что и на первом экране */
.line.reveal{opacity:1;transform:none;}
.line.reveal .line__in{
  transform:translate3d(0,102%,0);
  transition:transform .95s var(--reveal);
  transition-delay:var(--d,0s);
  will-change:transform;
}
.line.reveal.is-in .line__in{transform:translate3d(0,0,0);}

/* Первый экран внутренних услуг появляется одним спокойным сценарием. */
.js:not(.is-ready) .srv-back,
.js:not(.is-ready) .srv-hero__title,
.js:not(.is-ready) .srv-hero__lead,
.js:not(.is-ready) .srv-hero__actions{opacity:0;}
.is-ready .srv-back{animation:srv-enter .72s var(--reveal) .08s both;}
.is-ready .srv-hero__title{animation:srv-enter .9s var(--reveal) .14s both;}
.is-ready .srv-hero__lead{animation:srv-enter .82s var(--reveal) .22s both;}
.is-ready .srv-hero__actions{animation:srv-enter .82s var(--reveal) .3s both;}
@keyframes srv-enter{
  from{opacity:0;transform:translate3d(0,9px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

/* ============================================================
   АНИМАЦИИ ФОНА
   ============================================================ */
@keyframes sweep{
  0%       {transform:translate3d(-32%,0,0);opacity:0;}
  10%      {opacity:1;}
  62%      {opacity:1;}
  78%,100% {transform:translate3d(32%,0,0);opacity:0;}
}

@keyframes ticker{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

@keyframes noise-drift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-.7%,.45%);}
  50%{transform:translate(.55%,-.65%);}
  75%{transform:translate(-.4%,-.35%);}
  100%{transform:translate(0,0);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .intro{display:none !important;}
  .is-ready .hero__bg,.is-ready .hero__title .line__in,.is-ready .hero__lead,.is-ready .hero__cta,
  .is-ready .nav__logo,.is-ready .nav__link,.is-ready .nav__cta,.is-ready .nav__burger,.is-ready .ticker{animation:none !important;}
  .hero__sweep,.hero__noise,.ticker__track{animation:none !important;}
  .hero__sweep{opacity:0;}
  .line.reveal .line__in{transform:none !important;transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .is-ready .srv-back,.is-ready .srv-hero__title,.is-ready .srv-hero__lead,.is-ready .srv-hero__actions{animation:none !important;opacity:1;transform:none;filter:none;}
}

@media (max-width:760px){
  .reveal,.reveal--row{transform:translate3d(0,5px,0);}
  .reveal--card{transform:translate3d(0,7px,0) scale(.998);}
  .reveal--soft{filter:none;}
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1100px){
  .nav__menu{display:none;}
  .nav__burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
    width:44px;height:44px;padding:0 10px;margin-left:auto;
    background:transparent;border:0;cursor:pointer;
  }
  .nav__burger i{display:block;height:1.5px;background:#fff;border-radius:2px;}
  .nav__cta{display:none;}
  .rail{display:none;}          /* на узких экранах указатель мешает контенту */
}

@media (max-width:900px){
  .problems__grid{grid-template-columns:minmax(0,1fr);gap:clamp(34px,6vw,60px);}
  .problems__intro{position:static;}
  .problems__title{font-size:clamp(34px,9.5vw,64px);}
  .problems__lead{font-size:clamp(16px,3.4vw,24px);margin-top:clamp(20px,3vw,32px);}
  .issues{--k:.45;}                    /* лесенка мягче, иначе текст зажмёт */
  .issue__num{font-size:clamp(46px,11vw,80px);}
  .issue__title{font-size:clamp(13px,2.2vw,17px);}
  .issue__text{font-size:clamp(13px,1.9vw,16px);max-width:none;}

  /* услуги: карточки уходят в горизонтальную ленту со снапом */
  .services__inner{min-height:0;padding-bottom:clamp(16px,3vw,30px);}
  .services__title{font-size:clamp(30px,8.2vw,58px);}
  .services__grid{
    display:flex;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    padding:8px var(--pad) clamp(14px,3vw,22px);
    gap:clamp(14px,3.5vw,26px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .services__grid::-webkit-scrollbar{display:none;}
  .svc{
    flex:0 0 min(78vw,340px);
    scroll-snap-align:start;
    min-height:clamp(300px,48vh,390px);
  }
  .svc__title{font-size:clamp(24px,6vw,34px);margin-top:clamp(40px,10vw,60px);}
  .svc__num{font-size:clamp(14px,3.4vw,20px);}
  .svc__text{font-size:clamp(13px,2.1vw,15px);}
  .svc__arrow{width:clamp(18px,3.8vw,24px);}
}

/* На узких экранах кадрируем фон первого экрана по-другому:
   халфтон — сверху слева, глитч-блок — снизу справа. */
@media (max-width:760px), (max-aspect-ratio: 5/4){
  /* два кадра одной картинки делят экран по высоте: сверху халфтон,
     снизу глитч-блок. Без режима наложения — на телефонах он тормозил.
     На стыке у обоих кадров чёрное поле, шва не видно. */
  .hero__bg-img{
    inset:0 0 50% 0;
    background-size:min(240%, 860px) auto;
    background-position:0% 0%;
  }
  .hero__bg-img--ghost{
    inset:50% 0 0 0;
    opacity:.8;
    background-size:min(240%, 860px) auto;
    background-position:100% 100%;
  }
  .hero__vignette{
    background:
      radial-gradient(70% 34% at 50% 50%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 55%, rgba(0,0,0,0) 88%),
      linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 78%, rgba(0,0,0,.72) 100%);
  }
}
@media (max-width:640px){
  .intro__logo{font-size:clamp(34px,10vw,48px);}
  .intro__bar{width:min(46vw,220px);}
  .hero__title{font-size:clamp(26px,7.2vw,42px);letter-spacing:-.018em;line-height:1.18;}
  .hero__lead{font-size:15px;line-height:1.55;}
  .hero__lead br{display:none;}
  .btn--lg{font-size:14px;padding:6px 7px 6px 20px;}
  .problems__lead br{display:none;}
}