/* =========================================================
   SCALE — digital-агентство
   Палитра взята напрямую из логотипа: коралл #E8564F + чёрный
   ========================================================= */

:root{
  /* ── цвета логотипа (сняты пипеткой с assets/logo.png) ──
     фон логотипа #E8564F, буквы #000000 — остальное производные */
  --red:        #E8564F;
  --red-hot:    #FF6C63;
  --red-deep:   #C23B34;
  --red-dark:   #7D211C;
  --ink:        #000000;
  --ink-soft:   #141312;

  /* ── нейтральные ──────────────────────────────── */
  --paper:      #F4F1EB;
  --paper-2:    #EAE6DE;
  --grey:       #D9D5CD;
  --line:       rgba(0,0,0,.12);
  --line-light: rgba(244,241,235,.16);

  --r-lg: 34px;
  --r-md: 22px;
  --r-sm: 999px;

  --shell: min(1420px, 92vw);
  --ease: cubic-bezier(.22,.9,.25,1);
}

/* ── база ───────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x:clip, а НЕ hidden: hidden делает элемент контейнером прокрутки
   и ломает position:sticky у шапки. clip обрезает так же, но контейнер
   прокрутки не создаёт. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Onest', -apple-system, sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:'Unbounded', sans-serif; font-weight:400; margin:0; letter-spacing:-.03em; line-height:1.02; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
em{ font-style:normal; color:var(--red); }
.defs{ position:absolute; width:0; height:0; }

::selection{ background:var(--red); color:var(--paper); }

/* ── зерно поверх всего ─────────────────────────── */
/* Без mix-blend-mode: смешение поверх всей страницы на каждом кадре —
   самая дорогая часть эффекта. Движение оставлено, оно на transform. */
.grain{
  position:fixed; inset:-15%;
  z-index:9998; pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1.5%)} 40%{transform:translate(1.5%,-2%)}
  60%{transform:translate(-1.5%,-1.5%)} 80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* =========================================================
   «ЖИДКИЙ МЕТАЛЛ» — вместо стоковых картинок
   ========================================================= */
/* Текстура «металла» запечена в SVG-картинку: браузер растеризует её
   один раз и переиспользует во всех блоках. Живой filter:url() на
   каждом элементе роняет отрисовку, когда их несколько в одном экране. */
.liquid__blob{
  position:absolute; inset:-22%;
  background:url("assets/metal.jpg") center / cover no-repeat;
  animation:drift 26s var(--ease) infinite alternate;
}
/* анимация «металла» стоит, пока блок за пределами экрана */
.liquid-off .liquid__blob{ animation-play-state:paused; }
@keyframes drift{
  0%  { transform:scale(1.05) rotate(0deg)   translate3d(0,0,0); }
  50% { transform:scale(1.22) rotate(9deg)   translate3d(2%,-3%,0); }
  100%{ transform:scale(1.1)  rotate(-7deg)  translate3d(-3%,2%,0); }
}

/* =========================================================
   ШАПКА
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:var(--shell); margin:0 auto; padding:22px 0 18px;
  transition:padding .35s var(--ease);
}
.nav.is-stuck{ padding:12px 0; }
.nav.is-stuck::before{
  content:''; position:absolute; inset:-40px 50% auto 50%;
  width:100vw; height:calc(100% + 40px); transform:translateX(-50%);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line); z-index:-1;
}
.nav__group{ display:flex; gap:8px; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pill:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.pill--dot::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); }
.pill--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pill--solid:hover{ background:var(--red); border-color:var(--red); color:var(--ink); }
.pill--outline{ border-color:var(--line-light); color:var(--paper); }
.pill--outline:hover{ background:var(--red); border-color:var(--red); color:var(--ink); }

/* логотип — используется КАК ЕСТЬ, без наложений и фильтров */
.brand{ display:flex; align-items:center; gap:11px; }
.brand__img{
  width:40px; height:40px; border-radius:10px; object-fit:contain;
  transition:transform .5s var(--ease);
}
.brand:hover .brand__img{ transform:rotate(-6deg) scale(1.06); }
.brand__word{ font-family:'Unbounded'; font-weight:500; font-size:19px; letter-spacing:-.04em; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:16px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

.mobile-menu[hidden]{ display:none; }
.mobile-menu{
  position:fixed; inset:84px 4vw auto; z-index:899;
  display:flex; flex-direction:column; gap:2px;
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-md); padding:14px; animation:drop .35s var(--ease);
}
@keyframes drop{ from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:none} }
.mobile-menu a{ padding:14px 16px; border-radius:14px; font-size:17px; }
.mobile-menu a:hover{ background:var(--red); color:var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
/* с запасом на высоту липкой шапки: блок первый на странице,
   поэтому переход по якорю просто выводит к её верху */
.hero{ width:var(--shell); margin:14px auto 0; scroll-margin-top:120px; }

.hero__card{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-lg); padding:44px 56px 46px;
  display:flex; flex-direction:column; min-height:min(74vh, 620px);
}
/* два свечения по краям — вместо снятой правой карточки */
.hero__card::after{
  content:''; position:absolute; width:760px; height:760px; right:-280px; bottom:-380px;
  background:radial-gradient(circle, var(--red) 0%, transparent 68%);
  opacity:.4; filter:blur(34px); pointer-events:none;
}
.hero__card::before{
  content:''; position:absolute; width:520px; height:520px; right:6%; top:-300px;
  background:radial-gradient(circle, var(--red-deep) 0%, transparent 70%);
  opacity:.32; filter:blur(30px); pointer-events:none;
}
.hero__logo{ display:flex; align-items:center; gap:9px; font-size:13px; opacity:.8; margin-bottom:auto; }
.hero__logo img{ width:22px; height:22px; border-radius:6px; }

.hero__title{
  position:relative; z-index:1;
  font-size:clamp(30px, 4.6vw, 68px); font-weight:400;
  margin:48px 0 42px; line-height:1.1;
}
.hero__title em{ color:var(--red); }
.star{ display:inline-block; width:.62em; height:.62em; vertical-align:baseline; animation:spin 9s linear infinite; }
.star svg{ width:100%; height:100%; fill:var(--red); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__form{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px;
  max-width:820px;
}
.hero__form input{
  min-width:0;
  padding:15px 22px; border-radius:var(--r-sm);
  border:1px solid var(--line-light); background:rgba(244,241,235,.07);
  color:var(--paper); font-family:inherit; font-size:15px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hero__form input::placeholder{ color:rgba(244,241,235,.45); }
.hero__form input:focus{ outline:none; border-color:var(--red); background:rgba(244,241,235,.11); }

/* =========================================================
   ЗАЯВЛЕНИЕ
   ========================================================= */
.statement{
  position:relative; width:var(--shell); margin:0 auto;
  padding:120px 0 96px; text-align:center; isolation:isolate;
  overflow-x:hidden; overflow-x:clip;   /* декор уходит за край, но не растягивает страницу */
}
.statement__title{ position:relative; z-index:2; font-size:clamp(30px,4.1vw,62px); line-height:1.06; }
.statement__text{
  position:relative; z-index:2;
  max-width:520px; margin:24px auto 30px;
  font-size:14.5px; line-height:1.6; color:rgba(0,0,0,.66);
}
.statement .btn{ position:relative; z-index:2; }
.statement__deco{
  position:absolute; z-index:1; top:50%; width:clamp(150px,17vw,280px); height:clamp(140px,15vw,240px);
  transform:translateY(-50%); overflow:hidden; pointer-events:none; opacity:.9;
  mask-image:radial-gradient(closest-side, #000 42%, transparent 100%);
  -webkit-mask-image:radial-gradient(closest-side, #000 42%, transparent 100%);
}
.statement__deco--l{ left:clamp(-90px,-6vw,-40px); }
.statement__deco--r{ right:clamp(-90px,-6vw,-40px); }
.statement__deco--r .liquid__blob{
  animation-direction:alternate-reverse;
  background-image:url("assets/metal-2.jpg");
}

/* кнопки */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-sm);
  font-family:inherit; font-size:14.5px; font-weight:500; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--accent{ background:var(--red); color:var(--ink); }
.btn--accent:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px var(--red); background:var(--red-hot); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); background:none; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn--mini{ padding:12px 20px; font-size:12.5px; background:var(--paper); color:var(--ink); }
.btn--mini:hover{ background:var(--red); }
.btn--mini-ink{ background:var(--ink); color:var(--paper); }
.btn--mini-ink:hover{ background:var(--ink-soft); color:var(--red); }

/* =========================================================
   ЦЕННОСТИ
   ========================================================= */
.values{ width:var(--shell); margin:0 auto 110px; }
.values__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.val{
  position:relative; overflow:hidden;
  aspect-ratio:1.62/1; border-radius:var(--r-sm);
  display:grid; place-items:center;
  font-family:'Unbounded'; font-weight:400; letter-spacing:-.02em;
  font-size:clamp(13px,1.35vw,22px); text-align:center;
  transition:transform .45s var(--ease);
}
.val:hover{ transform:translateY(-8px) rotate(-1deg); }
.val--accent{ background:var(--red); color:var(--ink); font-size:clamp(20px,2.6vw,40px); }
.val--ink{ background:var(--ink); color:var(--paper); }
.val--grey{ background:var(--grey); color:var(--ink); }
.val--chrome{ background:var(--ink); color:var(--paper); }
.val--chrome span{
  position:relative; z-index:2;
  text-shadow:0 1px 16px rgba(0,0,0,.85), 0 0 40px rgba(0,0,0,.7);
}
.val--chrome .liquid__blob{ inset:-40%; opacity:.85; }
.val--chrome::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,.55) 0%, transparent 78%);
}

/* =========================================================
   УСЛУГИ
   ========================================================= */
.services{ width:var(--shell); margin:0 auto 110px; }
.services__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; flex-wrap:wrap; }
.services__head h2{ font-size:clamp(28px,3.4vw,50px); }
.services__head p{ max-width:390px; font-size:14px; color:rgba(0,0,0,.6); line-height:1.55; }

.services__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.svc{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease);
}
.svc:hover{ transform:translateY(-10px); }
.svc--ink{ background:var(--ink); color:var(--paper); }
.svc--accent{ background:var(--red); color:var(--ink); }
.svc--light{ background:var(--paper-2); color:var(--ink); }

/* обложка с «металлом» */
.svc__cover{ position:relative; flex:none; height:176px; overflow:hidden; }
.svc__cover .liquid__blob{ animation-duration:34s; }
.svc:nth-child(2) .liquid__blob{ animation-delay:-8s; background-image:url("assets/metal-2.jpg"); }
.svc:nth-child(3) .liquid__blob{ animation-delay:-16s; }
.svc:nth-child(4) .liquid__blob{ animation-delay:-24s; background-image:url("assets/metal-2.jpg"); }

.svc__num{
  position:absolute; left:22px; bottom:16px; z-index:3;
  font-family:'Unbounded'; font-weight:400; font-size:40px; line-height:1;
  letter-spacing:-.05em; color:var(--paper);
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}

.svc__arrow{
  position:absolute; top:20px; right:20px; z-index:3;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:var(--ink); font-size:15px;
  transition:.4s var(--ease);
}
.svc__arrow:hover{ transform:rotate(45deg) scale(1.08); background:var(--paper); }

.svc__body{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; padding:26px 28px 28px;
}
.svc__body h3{
  font-size:clamp(19px,1.75vw,27px); line-height:1.08;
  text-transform:uppercase; margin-bottom:16px;
}

.svc__label{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  opacity:.55; margin-bottom:11px;
}

.svc__list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px; }
.svc__list li{
  position:relative; padding-left:20px;
  font-size:13.5px; line-height:1.4; opacity:.85;
}
.svc__list li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px rgba(232,86,79,.18);
}
.svc--accent .svc__list li::before{ background:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.14); }

/* карточка с двумя продуктами (лендинги + квизы) */
.svc__pair{ display:grid; gap:18px; margin-bottom:22px; }
.svc__pair h4{
  font-family:'Unbounded'; font-weight:400; font-size:15px; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 7px;
}
.svc__pair p{ font-size:13.5px; line-height:1.45; opacity:.78; margin:0; }
.svc__pair > div{ position:relative; padding-left:20px; }
.svc__pair > div::before{
  content:''; position:absolute; left:0; top:6px; bottom:2px; width:2px;
  border-radius:2px; background:var(--red);
}
.svc--light .svc__pair > div::before{ background:var(--ink); opacity:.25; }

.svc__body .btn{ margin-top:auto; align-self:flex-start; }

/* =========================================================
   ЦИФРЫ
   ========================================================= */
.figures{
  width:var(--shell); margin:0 auto 96px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  border-top:1px solid var(--line); padding-top:44px;
}
.fig{ display:flex; flex-direction:column; gap:8px; }
.fig b{ font-family:'Unbounded'; font-weight:400; font-size:clamp(38px,4.6vw,72px); line-height:.9; letter-spacing:-.05em; }
.fig:nth-child(odd) b{ color:var(--red); }
.fig span{ font-size:13px; line-height:1.4; color:rgba(0,0,0,.6); }

/* =========================================================
   БЕГУЩАЯ СТРОКА
   ========================================================= */
.marquee{ overflow:hidden; background:var(--ink); color:var(--paper); padding:20px 0; margin-bottom:110px; }
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; animation:run 26s linear infinite; }
.marquee__track span{ font-family:'Unbounded'; font-size:clamp(24px,3vw,44px); letter-spacing:-.03em; }
.marquee__track i{ color:var(--red); font-style:normal; font-size:22px; }
@keyframes run{ to{ transform:translateX(-50%); } }

/* =========================================================
   КЕЙСЫ
   ========================================================= */
.cases{ width:var(--shell); margin:0 auto 110px; }
.cases__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; flex-wrap:wrap; }
.cases__head h2{ font-size:clamp(26px,3.2vw,46px); }
.cases__head p{ max-width:330px; font-size:13px; color:rgba(0,0,0,.6); line-height:1.55; }

.cases__table{ position:relative; }
.cases__thead,
.row{ display:grid; grid-template-columns:1.1fr 1.5fr .6fr 60px; gap:24px; align-items:center; }
.cases__thead{ padding:0 20px 14px; font-size:12px; color:rgba(0,0,0,.45); border-bottom:1px solid var(--line); }

.row{
  position:relative; padding:26px 20px; border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.row::before{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--red); transition:width .55s var(--ease);
}
.row:hover{ background:rgba(0,0,0,.03); padding-left:30px; }
.row:hover::before{ width:100%; }
.row b{ font-family:'Unbounded'; font-weight:400; font-size:clamp(16px,1.55vw,23px); letter-spacing:-.02em; }
.row p{ font-size:12.5px; line-height:1.45; color:rgba(0,0,0,.55); max-width:330px; }
.row time{ font-size:14px; font-variant-numeric:tabular-nums; }
.row__arr{
  justify-self:end; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:.4s var(--ease);
}
.row:hover .row__arr{ background:var(--red); border-color:var(--red); transform:rotate(-45deg); }

/* =========================================================
   ВОПРОСЫ
   ========================================================= */
.faq{ width:var(--shell); margin:0 auto 110px; }
.faq h2{ font-size:clamp(28px,3.4vw,50px); margin-bottom:30px; }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:'Unbounded'; font-size:clamp(15px,1.5vw,21px); letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red); }
.faq summary span{
  flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  position:relative; transition:.4s var(--ease);
}
.faq summary span::before,
.faq summary span::after{
  content:''; position:absolute; inset:50% auto auto 50%; translate:-50% -50%;
  background:currentColor; transition:.4s var(--ease);
}
.faq summary span::before{ width:12px; height:1.5px; }
.faq summary span::after{ width:1.5px; height:12px; }
.faq details[open] summary{ color:var(--red); }
.faq details[open] summary span{ background:var(--red); border-color:var(--red); color:var(--ink); rotate:135deg; }
.faq details[open] summary span::after{ opacity:0; }
.faq details p{
  padding:0 90px 28px 4px; max-width:820px;
  font-size:14px; line-height:1.62; color:rgba(0,0,0,.62);
  animation:fade .45s var(--ease);
}
@keyframes fade{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.footer{
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:var(--shell); margin:0 auto; padding:44px 42px 30px;
  overflow:hidden;
}
.footer__top{ display:flex; gap:44px; align-items:flex-start; flex-wrap:wrap; }
.footer__cta{ flex:1 1 460px; }
.footer__cta h2{ font-size:clamp(19px,2.1vw,32px); line-height:1.24; margin-bottom:26px; font-weight:300; }
.footer__form{ display:flex; gap:10px; flex-wrap:wrap; max-width:620px; }
.footer__form input{
  flex:1 1 220px; min-width:0; padding:15px 22px; border-radius:var(--r-sm);
  border:1px solid var(--line-light); background:rgba(244,241,235,.07);
  color:var(--paper); font-family:inherit; font-size:15px;
}
.footer__form input::placeholder{ color:rgba(244,241,235,.42); }
.footer__form input:focus{ outline:none; border-color:var(--red); }

.footer__word{
  font-family:'Unbounded'; font-weight:500;
  font-size:clamp(80px,20vw,300px); line-height:.78; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(244,241,235,.16);
  margin:56px 0 24px; text-align:center; user-select:none;
}

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--line-light); padding-top:24px;
}
.footer__bottom small{ font-size:12px; opacity:.5; }
.footer__brand{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; }
.footer__brand img{ width:24px; height:24px; border-radius:7px; }
.footer__links{ display:flex; gap:8px; flex-wrap:wrap; }
.footer__links .pill{ padding:9px 17px; font-size:12.5px; }

/* =========================================================
   УВЕДОМЛЕНИЕ
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:34px;
  translate:-50% calc(100% + 60px); opacity:0; visibility:hidden;
  z-index:9999; padding:15px 26px; border-radius:var(--r-sm);
  background:var(--red); color:var(--ink); font-size:14px; font-weight:500;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6);
  transition:translate .5s var(--ease), opacity .4s var(--ease), visibility .5s;
}
.toast.is-on{ translate:-50% 0; opacity:1; visibility:visible; }

/* =========================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:980px){
  .nav__group{ display:none; }
  .burger{ display:flex; }
  .nav{ justify-content:space-between; }
  .hero__card{ padding:30px 26px 32px; min-height:auto; }
  .hero__title{ margin:60px 0 30px; }
  .hero__form{ grid-template-columns:1fr 1fr; }
  .hero__form .btn{ grid-column:1 / -1; justify-self:start; }
  .values__row{ grid-template-columns:repeat(2,1fr); }
  .figures{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .statement{ padding:90px 0 76px; }
  .statement__deco{ width:170px; height:150px; opacity:.6; }
  .statement__deco--l{ left:-60px; } .statement__deco--r{ right:-60px; }
  .cases__thead{ display:none; }
  .row{ grid-template-columns:1fr 46px; gap:8px 14px; }
  .row time{ grid-column:1; opacity:.55; font-size:12.5px; }
  .row__arr{ grid-row:1/3; grid-column:2; }
  .faq details p{ padding-right:20px; }
  .footer{ padding:34px 24px 26px; }
}

@media (max-width:620px){
  :root{ --shell:92vw; --r-lg:26px; }
  .services__grid{ grid-template-columns:1fr; }
  .hero__form{ grid-template-columns:1fr; }
  .star{ display:none; }
  .values__row{ gap:10px; }
  .val{ aspect-ratio:1.9/1; }
  .footer__bottom{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}