/* ============================================================
   BLB — корпоративные новогодние подарки
   ============================================================ */

/* ============================================================
   Шрифты: TT Firs Neue — заголовки, Segoe UI — основной текст
   ============================================================ */
@font-face{ font-family:"TT Firs Neue"; src:url("fonts/firs-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"TT Firs Neue"; src:url("fonts/firs-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"TT Firs Neue"; src:url("fonts/firs-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"TT Firs Neue"; src:url("fonts/firs-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"TT Firs Neue"; src:url("fonts/firs-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

@font-face{ font-family:"Segoe UI Web"; src:url("fonts/segoe-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Segoe UI Web"; src:url("fonts/segoe-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Segoe UI Web"; src:url("fonts/segoe-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --bg:          #F0F1F6;
  --card:        #E8E9EF;
  --white:       #FFFFFF;
  --navy:        #0F0C26;
  --purple:      #6A409F;
  --purple-dark: #2E1C45;
  --purple-mid:  #5D388B;
  --purple-lite: #8B5FD6;
  --lime:        #BAFF37;
  --ink:         #1B1B24;
  --muted:       #5C5C68;

  --gap:         28px;
  --radius:      22px;
  --radius-lg:   30px;
  --section-gap: 100px;   /* интервал между блоками */
  --wrap:        1510px;
  --header-h:    76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI Web","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- типографика ---------- */
.h2{
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:clamp(30px,3.4vw,52px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:14px 0 44px;
  background:linear-gradient(96deg,var(--purple-dark) 0%,var(--purple-dark) 58%,var(--purple-lite) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.h2--light{
  background:none;
  color:var(--white);
  -webkit-text-fill-color:var(--white);
}
.h3{
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:clamp(21px,1.6vw,26px);
  line-height:1.2;
  margin:0 0 14px;
  color:var(--ink);
}
.muted{ color:var(--muted); margin:0; font-size:16px; line-height:1.5; }

.tag{
  display:inline-block;
  text-transform:uppercase;
  background:#DEDFE4;
  color:#3A3A45;
  font-size:12.5px;
  letter-spacing:.08em;
  font-weight:500;
  padding:8px 18px;
  border-radius:999px;
}
.tag--light{ background:rgba(255,255,255,.14); color:#EDE9F7; }

section[id]{ scroll-margin-top:96px; }
section.catalog{  scroll-margin-top:6px; }
section.feedback{ scroll-margin-top:-32px; }

.section{ padding-block:0; }
.section + .section,
.banner + .section,
.section + .cases,
.cases + .block3,
.block3 + .section,
.section + .tail,
.block3 + .tail{ margin-top:var(--section-gap); }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:17px 32px;
  font-size:16px;
  font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--purple{ background:var(--purple); color:#fff; box-shadow:0 8px 20px rgba(106,64,159,.22); }
.btn--purple:hover{ background:#7749B0; }
.btn--white{ background:#EFEFF2; color:var(--ink); }
.btn--white:hover{ background:#fff; }
.btn--callback{ background:#fff; color:var(--ink); padding-right:8px; }
.btn__icn{
  width:42px;height:42px;border-radius:50%;
  background:var(--purple);color:#fff;
  display:grid;place-items:center;
}

/* ---------- карточки ---------- */
.card{
  min-width:0;
  background:var(--card);
  border-radius:var(--radius-lg);
  position:relative;
}
.card--white{ background:var(--white); }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(240,241,246,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header__inner{
  max-width:1920px;
  min-width:0;
  margin-inline:auto;
  height:var(--header-h);
  padding-inline:26px;
  display:flex;
  align-items:center;
  gap:22px;
}
.logo img{ height:22px; width:auto; }

.nav{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--white);
  border-radius:999px;
  padding:5px;
}
.nav__link{
  padding:9px 16px;
  border-radius:999px;
  font-size:14.5px;
  white-space:nowrap;
  transition:background .18s ease;
}
.nav__link:hover{ background:#F2F2F6; }
.nav__link--active{ background:var(--lime); font-weight:600; }
.nav__link--active:hover{ background:#C8FF55; }

.search{
  flex:1 1 260px;
  max-width:300px;
  min-width:0;
  display:flex;
  align-items:center;
  background:var(--white);
  border-radius:999px;
  padding:5px 5px 5px 20px;
}
.search__input{
  flex:1; min-width:0;
  border:0; outline:0; background:none;
  font:inherit; font-size:14.5px;
}
.search__input::placeholder{ color:#9B9BA6; }
.search__btn{
  flex:none;
  width:38px;height:38px;border-radius:50%;
  border:0;cursor:pointer;
  background:#131320;color:#fff;
  display:grid;place-items:center;
}

/* ---------- бургер и мобильное меню ---------- */
.burger{
  display:none;
  flex:none;
  width:44px; height:44px;
  border:0; border-radius:50%;
  cursor:pointer;
  background:var(--white);
  padding:0;
  position:relative;
}
.burger span{
  position:absolute;
  left:13px; right:13px;
  height:2px;
  background:#131320;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:10px 16px 18px;
  background:rgba(240,241,246,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(0,0,0,.06);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ padding:13px 10px; border-radius:14px; font-size:16px; }
.mobile-menu a:active{ background:#E6E7EE; }
.mobile-menu__search{ margin-top:8px; }
.mobile-menu__search input{
  width:100%;
  border:0; outline:0;
  background:var(--white);
  border-radius:999px;
  padding:13px 20px;
  font:inherit; font-size:15px;
}
.mobile-menu__contacts{
  display:flex; flex-direction:column; gap:4px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:15px; color:var(--muted);
}

.contacts-mini{ display:flex; gap:10px; margin-left:auto; }
.icn{
  width:40px;height:40px;border-radius:50%;
  background:var(--white);
  display:grid;place-items:center;
  color:#131320;
  transition:background .18s ease,color .18s ease;
}
.icn:hover{ background:#131320; color:#fff; }

.cart{
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border-radius:999px;
  padding:5px 5px 5px 22px;
  font-size:14.5px;
  white-space:nowrap;
}
.cart__icn{
  width:38px;height:38px;border-radius:50%;
  background:#131320;color:#fff;
  display:grid;place-items:center;
}

/* ============================================================
   BANNER
   ============================================================ */
/* Кадр видео расширен до пропорций баннера прямо в файле,
   поэтому фоном служит само видео — подбирать цвет не нужно. */
.banner{
  position:relative;
  isolation:isolate;
  aspect-ratio:2592/1080;
  min-height:520px;
  background:#C8B6FB;            /* виден только пока видео грузится */
  overflow:hidden;
}
.banner__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;  /* при обрезке уходит плоский левый край */
  z-index:-1;
}
.banner__inner{
  --shift:102px;                 /* половина ширины кнопки «Посмотреть кейсы» */
  position:relative;
  z-index:2;
  transform:translateZ(0);      /* держим текст над слоем видео */
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:40px 104px;
  padding-left:calc(24px + var(--shift));
}
.banner__text{ max-width:min(56%, 720px); }

.banner__chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 34px;
  padding:0;
}
.banner__chips li{
  padding:9px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.55);
  color:#4B2E86;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.banner__title{
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(34px,4.2vw,66px);
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0 0 36px;
  background:linear-gradient(96deg,#241338 0%,#2E1C45 42%,#7A5BB5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.banner__lead{
  margin:0 0 36px;
  max-width:520px;
  color:#2E2440;
  font-size:17px;
  line-height:1.5;
}

.banner__actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  width:fit-content;             /* правый край совпадает с кнопкой «Посмотреть кейсы» */
}
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:#F4F0FF; }
.btn--ghost{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.62);
  color:var(--ink);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(70,40,130,.10);
}
.btn--ghost:hover{ background:rgba(255,255,255,.38); }

/* лаймовая стрелка-указатель из макета */
.banner__arrow{
  position:absolute;
  left:calc(100% - 46px);        /* лежит поверх кнопки «Посмотреть кейсы» */
  top:calc(100% - 24px);
  width:96px;
  z-index:3;
  filter:drop-shadow(0 10px 18px rgba(60,30,120,.28));
  pointer-events:none;
}

/* ============================================================
   БЛОК 1 — Свобода выбора
   ============================================================ */
.b1-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.b1-countdown{ padding:36px 34px; overflow:hidden; min-height:390px; display:flex; flex-direction:column; }
.b1-countdown__title{
  max-width:62%;
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:clamp(22px,1.75vw,29px);
  line-height:1.18;
  margin:0;
  position:relative; z-index:2;
}
.b1-countdown__num{
  margin:auto 0 0;
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:clamp(58px,5.2vw,84px);
  line-height:1;
  color:var(--purple-mid);
  position:relative; z-index:2;
  display:flex; align-items:baseline; gap:10px;
}
.b1-countdown__unit{
  font-family:"Segoe UI Web","Segoe UI",sans-serif;
  font-weight:500;
  font-size:19px;
  color:var(--purple-mid);
}
.b1-countdown__deco{
  position:absolute;
  right:0; top:0; bottom:0;
  height:100%; width:auto;
  object-fit:cover;
  object-position:right center;
  z-index:1;
  pointer-events:none;
}

.b1-start{
  grid-column:span 2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:36px 34px;
  align-items:center;
}
.b1-start__text{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.b1-start__text .h3{ margin:0; }
.b1-start__text .btn{ margin-top:16px; }
.b1-start__img{
  width:100%;
  border-radius:var(--radius);
  object-fit:cover;
  aspect-ratio:505/392;
}

.b1-item{ padding:34px; min-height:290px; display:flex; flex-direction:column; }
.b1-item .muted{ max-width:420px; }
.b1-item__term{ margin:auto 0 0; display:flex; flex-direction:column; }
.b1-item__label{ font-size:17px; color:var(--ink); }
.b1-item__num{
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:clamp(48px,4.2vw,68px);
  line-height:1;
  color:var(--purple-mid);
  display:inline-block;
}
.b1-item__unit{
  position:absolute;
  font-size:17px;
  color:var(--ink);
  transform:translate(0,0);
}
/* число и подпись в строку */
.b1-item__term{ position:relative; }
.b1-item__num{ margin-right:8px; }
.b1-item__unit{ position:static; }
.b1-item__term{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0 8px; }
.b1-item__label{ flex-basis:100%; }

.check{
  position:absolute;
  right:34px; bottom:34px;
  width:44px;height:44px;border-radius:50%;
  background:var(--lime);
}
.check::after{
  content:"";
  position:absolute;
  left:14px; top:15px;
  width:16px;height:8px;
  border-left:3px solid #12121C;
  border-bottom:3px solid #12121C;
  transform:rotate(-45deg);
}

/* ============================================================
   БЛОК 2 — КЕЙСЫ, классическая карусель со стрелками
   ============================================================ */
.cases{ position:relative; }

.cases__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  max-width:none;
  padding-inline:40px;
  padding-bottom:24px;
}
.cases__head .h2{ margin:10px 0 0; font-size:clamp(26px,2.6vw,42px); }

.cases__nav{ display:flex; gap:12px; flex:none; }
.cases__arrow{
  width:54px; height:54px;
  border:0; border-radius:50%;
  cursor:pointer;
  background:var(--white);
  color:var(--ink);
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(40,20,80,.10);
  transition:background .18s ease, color .18s ease, opacity .18s ease;
}
.cases__arrow:hover{ background:var(--purple); color:#fff; }
.cases__arrow[disabled]{ opacity:.35; cursor:default; }
.cases__arrow[disabled]:hover{ background:var(--white); color:var(--ink); }

.cases__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cases__viewport::-webkit-scrollbar{ display:none; }

.cases__track{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding-inline:40px;
  padding-block:14px 46px;       /* запас, чтобы тень карточки не срезалась */
  width:max-content;
}

.ccard{
  position:relative;
  flex:0 0 auto;
  scroll-snap-align:start;
  width:var(--w,600px);
  border-radius:26px;
  overflow:hidden;
  background:var(--white);
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 30px rgba(20,10,50,.08);
  transition:box-shadow .3s ease;
}
.ccard:hover{ box-shadow:0 14px 44px rgba(60,30,120,.22); }
.ccard.is-open{ box-shadow:0 18px 56px rgba(60,30,120,.28); }

.ccard__toggle:focus{ outline:none; }
.ccard__toggle:focus-visible{ outline:3px solid var(--purple); outline-offset:-3px; border-radius:26px; }

.ccard__toggle{
  position:relative;
  flex:0 0 auto;
  height:var(--ph,448px);
  border:0; padding:0; margin:0;
  background:none;
  cursor:pointer;
  display:block;
  width:100%;
}
.ccard__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.ccard__chip{
  position:absolute;
  left:20px; top:20px;
  z-index:2;
  padding:8px 18px;
  border-radius:999px;
  background:#fff;
  color:#1B1B24;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;
  box-shadow:0 2px 10px rgba(20,10,50,.12);
}
.ccard--break{ cursor:default; }
.ccard--break .ccard__img{ height:var(--ph,448px); }

.ccard__arrow{
  position:absolute;
  right:20px; bottom:20px;
  width:40px;height:40px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  color:#fff;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
  transition:transform .35s ease, background .2s ease;
}
.ccard__toggle:hover .ccard__arrow{ background:rgba(255,255,255,.28); }
.ccard.is-open .ccard__arrow{ transform:rotate(180deg); }

.ccard__body{
  flex:0 0 auto;
  height:0;
  overflow:hidden;
  background:var(--white);
  transition:height .45s cubic-bezier(.4,0,.2,1);
}
.ccard.is-open .ccard__body{ height:var(--bh,180px); }
.ccard__bodyIn{
  padding:20px 26px 22px;
  display:flex;
  flex-direction:column;
}
.ccard__title{
  font-family:"Segoe UI Web","Segoe UI",sans-serif;
  font-weight:600;
  font-size:clamp(16px,1.25vw,22px);
  line-height:1.2;
  margin:0 0 10px;
  color:#3A3A44;
}
.ccard__text{
  margin:0;
  color:#3F3F4A;
  font-size:14.5px;
  line-height:1.4;
}
.ccard__meta{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  justify-content:flex-start;
  font-weight:700;
  font-size:14.5px;
  color:#2A2A34;
}

/* ============================================================
   БЛОК 3
   ============================================================ */
.block3{
  background:transparent;
  overflow:hidden;
}
.block3__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
}
.block3__text{
  position:relative;
  z-index:1;
  padding-block:110px;
  align-self:center;
  max-width:640px;
}
.block3__text .h2{ margin-bottom:24px; }
.block3__lead{
  color:#CFCADF;
  font-size:17px;
  line-height:1.5;
  margin:0 0 32px;
  max-width:520px;
}
.block3__media{
  position:relative;
  z-index:0;
  align-self:end;
  justify-self:end;
  width:100%;
  max-width:780px;
}
/* тёмная подложка начинается там же, где она начинается на самой картинке,
   поэтому голова остаётся на светлом фоне, как в макете */
.block3__media::before{
  content:"";
  position:absolute;
  top:14%;
  bottom:-100vh;
  left:-100vw;
  right:-100vw;
  background:var(--navy);
  z-index:0;
}
.block3__img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
}

/* ============================================================
   БЛОК 4
   ============================================================ */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.step{
  padding:26px 30px 30px;
  min-height:370px;
  display:flex;
  flex-direction:column;
}
.step__num{
  font-family:"TT Firs Neue","Segoe UI Web",sans-serif;
  font-weight:800;
  font-size:64px;
  line-height:1;
  color:var(--purple-dark);
}
.step__icn{
  position:absolute;
  right:26px; top:26px;
  width:var(--iw,52%);
  max-width:290px;
  height:auto;
  mix-blend-mode:multiply;
}
.step__body{ margin-top:auto; }
.step__title{
  font-size:17px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--ink);
}

/* ============================================================
   ХВОСТ: каталог + обратная связь + футер (без интервалов)
   ============================================================ */
.tail{ background:var(--bg); }

.catalog{ padding-top:110px; }
.catalog__head{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.catalog__head .h2{ margin-bottom:26px; }
.catalog__lead{
  max-width:900px;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
  margin:0 0 34px;
}
.catalog__grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.product{
  padding:16px 16px 22px;
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(40,20,80,.10); }
.product img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
}
.product__image{ display:block; }
.product__tag{
  display:inline-block;
  margin-top:14px;
  color:#5D388B;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.product__title{
  font-size:18px;
  font-weight:700;
  margin:7px 0 6px;
}
.product__title a:hover{ text-decoration:underline; }
.product__price{ margin:0 0 10px; color:var(--ink); font-size:16px; font-weight:700; }
.product__link{ color:var(--purple); font-size:16px; }
.product__link:hover{ text-decoration:underline; }

.catalog__more{
  display:block;
  margin:56px auto 0;
  background:none;border:0;cursor:pointer;
  color:var(--purple);
  font-size:15px;
}
.catalog__more:hover{ text-decoration:underline; }

/* ---------- обратная связь ---------- */
.feedback{ padding-top:120px; }
.feedback .h2{ margin-bottom:16px; font-size:clamp(24px,2.4vw,34px); }
.feedback__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto auto;
  column-gap:var(--gap);
  align-items:start;
}
.feedback__lead{
  grid-column:1; grid-row:1;
  color:var(--muted);
  margin:0 0 12px;
  max-width:520px;
  font-size:17px;
}
/* форма «растворяется» в сетке, чтобы картинка справа
   встала ровно по высоте блока полей */
.fb-form{ display:contents; }
.fb-form__fields{
  grid-column:1; grid-row:2;
  display:flex; flex-direction:column; gap:10px;
  max-width:730px;
}
.field{
  width:100%;
  background:var(--white);
  border:1px solid transparent;
  border-radius:26px;
  padding:13px 26px;
  font:inherit;
  font-size:16px;
  outline:0;
  transition:border-color .18s ease;
}
.field::placeholder{ color:#8E8E99; }
.field:focus{ border-color:var(--purple); }
.field--area{ min-height:90px; resize:vertical; border-radius:26px; }
.field.is-invalid{ border-color:#D9534F; }

.fb-consent{
  grid-column:1; grid-row:3;
  display:flex; align-items:flex-start; gap:10px;
  margin-top:12px;
  font-size:13.5px; line-height:1.35; color:#5C5C68;
  max-width:730px;
  cursor:pointer;
}
.fb-consent input{ margin:2px 0 0; accent-color:var(--purple); flex:none; }
.fb-consent a{ text-decoration:underline; }
.fb-consent.is-invalid{ color:#D9534F; }

.fb-form__actions{ grid-column:1; grid-row:4; display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; }
.fb-form__actions .btn{ padding-block:13px; }
.fb-form__status{ grid-column:1; grid-row:5; margin:6px 0 0; font-size:15px; color:var(--purple); min-height:22px; }

.feedback__media{
  grid-column:2; grid-row:2;      /* та же строка, что и блок полей */
  align-self:stretch;
  position:relative;
  min-height:0;
}
.feedback__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:var(--radius);
  object-fit:cover;
  margin:0;
}

/* ---------- футер ---------- */
.footer{ padding-top:120px; padding-bottom:34px; }
.footer__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr 1.15fr;
  gap:22px;
}
.footer__card{
  background:linear-gradient(160deg,#FBFBFD 0%,#F2F2F7 100%);
  border-radius:var(--radius);
  padding:30px 32px;
  min-height:330px;
}
.footer__card--brand{ background:linear-gradient(160deg,#F7F7FA 0%,#EEEEF4 100%); }
.footer__eyebrow{
  margin:0 0 10px;
  font-size:11.5px;
  letter-spacing:.1em;
  color:#8D8D98;
}
.footer__logo{ height:48px; width:auto; margin-bottom:26px; }
.footer__title{ font-size:18px; font-weight:700; margin:0 0 22px; }
.footer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.footer__list a:hover{ color:var(--purple); }
.footer__list--plain{ color:#33333D; font-size:15.5px; }
.footer__copy{ margin:26px 0 0; font-size:13.5px; color:#8D8D98; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1200px){
  .b1-grid{ grid-template-columns:repeat(2,1fr); }
  .b1-start{ grid-column:span 2; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .catalog__grid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__card{ min-height:0; }
}

@media (max-width:1100px){
  .nav,.search,.contacts-mini span{ display:none; }
  .contacts-mini{ margin-left:auto; }
  .burger{ display:block; }
  .mobile-menu{ display:flex; }
  .mobile-menu:not([hidden]){
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

@media (max-width:900px){
  :root{ --section-gap:72px; --gap:18px; }

  /* на мобильных видео убираем — остаются текст и кнопки */
  .banner{ aspect-ratio:auto; min-height:0; background:#C8B6FB; }
  .banner__media{ display:none; }
  .banner__inner{ --shift:0px; padding-block:30px 34px; padding-left:24px; }
  .banner__text{ max-width:none; }

  /* чипсы — в одну строку */
  .banner__chips{
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    max-width:460px;
    margin-bottom:24px;
  }
  .banner__chips li{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    padding:7px 3px;
    letter-spacing:0;
    white-space:nowrap;
  }

  /* кнопки — в одну строку */
  .banner__actions{ flex-wrap:nowrap; gap:10px; width:min(100%,500px); }
  .banner__actions .btn{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    padding-inline:14px;
    min-height:54px;
    font-size:14px;
    white-space:nowrap;
  }
  /* «КОРПОРАТИВНЫЕ» шире контейнера при кегле 34px — тянем от ширины экрана */
  .banner__title{ font-size:min(8.2vw, 44px); margin-bottom:24px; }
  .banner__lead{ margin-bottom:26px; }
  .banner__arrow{ width:74px; left:auto; right:-14px; top:calc(100% - 26px); }

  .b1-grid{ grid-template-columns:minmax(0,1fr); }
  .b1-start,.b1-start[class]{ grid-column:span 1; grid-template-columns:1fr; }
  .b1-countdown__deco{ opacity:.9; }

  /* блок 2 — карусель на мобильных */
  .cases__head{ padding-inline:18px; padding-bottom:18px; flex-direction:column; align-items:flex-start; }
  .cases__nav{ align-self:flex-end; }
  .cases__arrow{ width:46px; height:46px; }
  .cases__track{
    padding-inline:18px;
    padding-block:6px 18px;
  }
  .ccard{ scroll-snap-align:center; }

  .block3{ background:var(--navy); }
  /* мужчина и кнопка — по центру баннера */
  .block3__text .btn{ display:flex; width:fit-content; margin-inline:auto; }
  .block3__media::before{ display:none; }
  .block3__media{ width:min(100%,520px); max-width:100%; justify-self:center; }
  .block3__inner{ grid-template-columns:1fr; min-height:0; }
  .block3__text{ padding-block:70px 30px; }

  .steps{ grid-template-columns:1fr; }
  .step{
    display:grid;
    grid-template-rows:clamp(150px,42vw,220px) auto;
    min-height:0;
    padding:24px 26px 26px;
  }
  .step__num{ font-size:56px; }
  .step__icn{ right:22px; top:22px; max-width:260px; }
  .step__body{ margin-top:0; }

  .catalog{ padding-top:70px; }
  .catalog__grid{ grid-template-columns:repeat(2,1fr); margin-top:40px; }
  .feedback{ padding-top:80px; }
  .feedback__grid{ grid-template-columns:1fr; }
  .feedback__media{ grid-column:1; grid-row:1; position:static; aspect-ratio:4/3; margin-bottom:18px; }
  .feedback__img{ position:static; height:100%; }
  .feedback__lead{ grid-column:1; grid-row:2; }
  .fb-form__fields{ grid-column:1; grid-row:3; }
  .fb-consent{ grid-column:1; grid-row:4; }
  .fb-form__actions{ grid-column:1; grid-row:5; }
  .fb-form__status{ grid-column:1; grid-row:6; }
  .field--area{ min-height:200px; }
  .fb-form__actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .fb-form__actions .btn{
    width:100%;
    min-height:66px;
    justify-content:center;
    padding:10px 22px;
    font-size:16px;
  }
  .btn--callback{ padding-right:10px; }
  .btn--callback .btn__icn{ margin-left:6px; }
  .footer{ padding-top:80px; }
  .footer__grid{ grid-template-columns:1fr; }
}

@media (min-width:681px) and (max-width:900px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feedback__media{ aspect-ratio:16/9; }
  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px){
  .catalog__grid{ grid-template-columns:1fr; }
  .header__inner{ gap:12px; padding-inline:16px; overflow:hidden; }
  .mobile-menu a{ padding-block:10px; }
  .contacts-mini .icn:nth-child(n+3){ display:none; }
  .cart span:first-child{ display:none; }
  .cart{ padding:5px; }
  .field--area{ min-height:140px; }
  .catalog__more{ min-height:44px; padding-inline:18px; }
  .fb-consent input{ width:18px; height:18px; margin-top:1px; }
}

@media (max-width:360px){
  .banner__chips li{ font-size:10px; }
  .banner__actions .btn{ padding-inline:10px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}