:root{
  --brand:#FF6728;
  --brand-2:#FF7F4B;
  --ink:#fff;
  --muted:#c9c9cf;
  --bg:#0b0b0f;
  --radius:28px;
  --line:rgba(255,255,255,.12);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  color:var(--ink);
  background:var(--bg);
  font-family:"Gotham Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.accent{color:var(--brand);font-style:italic;font-weight:900}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 26px;border-radius:14px;border:1px solid transparent;
  color:#fff;font-weight:900;font-size:17px;cursor:pointer;text-decoration:none;
  transition:.25s ease;
}
.btn--primary{
  background:linear-gradient(90deg,var(--brand)0%,var(--brand-2)100%);
  box-shadow:0 0 28px rgba(255,103,40,.28);
}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn--ghost{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn--ghost:hover{
  background:rgba(255,103,40,.12);
  border-color:rgba(255,103,40,.35);
  transform:translateY(-2px);
}

/* ========= HERO ========= */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,40px)}
.hero__inner{
  width:100%;max-width:1320px;min-height:88vh;border-radius:var(--radius);
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,44px);
  padding:clamp(32px,4.5vw,64px);border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1100px 900px at -10% 110%,rgba(255,103,40,.36) 0,rgba(255,103,40,0) 60%),
    radial-gradient(1200px 1000px at 120% -20%,rgba(20,22,30,.6) 0,rgba(20,22,30,0) 60%),
    linear-gradient(140deg,#15161b 0%,#0e0f14 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.hero__content{display:flex;flex-direction:column;gap:18px}
.hero__title{margin:0;font-weight:800;font-size:clamp(32px,4.5vw,60px);line-height:1.06}
.hero__tagline{font-weight:900;text-transform:uppercase;letter-spacing:.035em;font-size:clamp(18px,2.2vw,24px)}
.price-card{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;background:rgba(15,17,22,.75);
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35);font-weight:800
}
.price-card strong{color:var(--brand)}
.hero__visual{display:flex;justify-content:center;align-items:center;position:relative}
.hero__visual::before{
  content:"";position:absolute;inset:0;margin:auto;width:110%;height:110%;border-radius:28px;filter:blur(42px);
  background:radial-gradient(closest-side,rgba(255,103,40,.22),transparent 72%);
}
.hero__visual img{
  position:relative;width:min(140%,1000px);height:auto;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,.65));
  transform:perspective(1100px) rotateY(-3.5deg) rotateX(1deg) translateX(-20px);
  transition:transform .35s ease;
}
.hero__visual:hover img{transform:perspective(1100px) rotateY(-2deg) rotateX(0) translateY(-2px)}
.features{
  grid-column:1/-1;align-self:center;list-style:none;margin:clamp(12px,2vw,20px) auto 0;padding:0;
  display:flex;justify-content:center;gap:20px;flex-wrap:nowrap;max-width:960px;transform:translateY(-40px)
}
.feature{
 display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;background:rgba(15,17,22,.75);
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35);font-weight:800
}

/* ===== BENEFITS (ровная сетка 1/3 + 2/3, как на макете) ===== */

.benefits{
  padding: clamp(60px, 8vw, 110px) 20px;
  background: linear-gradient(180deg,#0b0b0f 0%,#141519 100%);
}
.benefits__inner{max-width:1320px;margin:0 auto;}
.benefits__title{
  margin:0 0 clamp(22px,3.5vw,36px);
  font-weight:900;
  font-size: clamp(28px,4.5vw,48px);
  text-transform:uppercase;
}
.benefits__title span{color:var(--brand);font-style:italic}

/* сетка */
.benefits__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: stretch;         /* чтобы высота в ряду была одинаковой */
}

/* карточка */
.benefit{
  display:grid;
  grid-template-columns: auto 1fr; /* иконка + контент */
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* единый размер иконок */
.benefit__icon{
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(255,103,40,.35));
}

/* типографика */
.benefit h3{margin:0 0 8px;font-weight:800;font-size:20px}
.benefit p{margin:0;color:#d7d8dd;line-height:1.55;font-size:15px}

/* ---------- ДЕСКТОП ≥1100px: точное позиционирование --------- */
/* Ряд 1 */
@media (min-width:1100px){
  .benefit:nth-child(1){ grid-column: 1 / 5;  grid-row: 1; }   /* 1/3 */
  .benefit:nth-child(2){ grid-column: 5 / 13; grid-row: 1; }   /* 2/3 */

  /* Ряд 2 */
  .benefit:nth-child(3){ grid-column: 1 / 9;  grid-row: 2; }   /* 2/3 */
  .benefit:nth-child(4){ grid-column: 9 / 13; grid-row: 2; }   /* 1/3 */

  /* Ряд 3 */
  .benefit:nth-child(5){ grid-column: 1 / 5;  grid-row: 3; }   /* 1/3 */
  .benefit:nth-child(6){ grid-column: 5 / 13; grid-row: 3; }   /* 2/3 */
}

/* ---------- ПЛАНШЕТ 701–1099px: 2 колонки с тем же ритмом ---------- */
@media (max-width:1099px) and (min-width:701px){
  .benefits__grid{ grid-template-columns: repeat(6, 1fr); gap:16px; }

  /* Ряд 1: 1/3 + 2/3  → 2 + 4 колонок */
  .benefit:nth-child(1){ grid-column: 1 / 3; grid-row: 1; }
  .benefit:nth-child(2){ grid-column: 3 / 7; grid-row: 1; }

  /* Ряд 2: 2/3 + 1/3  → 4 + 2 колонок */
  .benefit:nth-child(3){ grid-column: 1 / 5; grid-row: 2; }
  .benefit:nth-child(4){ grid-column: 5 / 7; grid-row: 2; }

  /* Ряд 3: 1/3 + 2/3  → 2 + 4 колонок */
  .benefit:nth-child(5){ grid-column: 1 / 3; grid-row: 3; }
  .benefit:nth-child(6){ grid-column: 3 / 7; grid-row: 3; }
}

/* ---------- МОБИЛА ≤700px: одна колонка ---------- */
@media (max-width:700px){
  .benefits__grid{ grid-template-columns: 1fr; gap:14px; }
  .benefit{ grid-column: 1 / -1; }
  .benefit__icon{ width:56px; height:56px; }
}
/* Базовая разметка областей внутри карточки */
.benefit{
  display:grid;
  grid-template-columns:auto 1fr;           /* иконка + контент */
  grid-template-areas:
    "icon head"
    "icon text";
  align-items:start;
}
.benefit .benefit__icon{ grid-area: icon; }
.benefit h3{ grid-area: head; margin:0 0 6px; }
.benefit p{  grid-area: text; margin:0; color:#d7d8dd; }

/* ===== Desktop: для №2, №3 и №6 кладём текст в одну линию справа ===== */
@media (min-width:1100px){
  .benefits__grid .benefit:nth-child(2),
  .benefits__grid .benefit:nth-child(3),
  .benefits__grid .benefit:nth-child(6){
    grid-template-columns: auto auto 1fr;   /* иконка | заголовок | текст */
    grid-template-areas: "icon head text";
    align-items: center;                    /* выравниваем по одной оси */
    column-gap: 16px;
  }

  /* чуть плотнее типографика в «инлайновых» карточках */
  .benefits__grid .benefit:nth-child(2) h3,
  .benefits__grid .benefit:nth-child(3) h3,
  .benefits__grid .benefit:nth-child(6) h3{
    margin:0;                               /* заголовок без отступа снизу */
  }
  .benefits__grid .benefit:nth-child(2) p,
  .benefits__grid .benefit:nth-child(3) p,
  .benefits__grid .benefit:nth-child(6) p{
    margin:0;                               /* текст сразу после заголовка справа */
  }
}


/* Планшет/мобила — всё снова столбиком (иконка+заголовок, ниже текст) */
@media (max-width:1099px){
  .benefit{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon head"
      "icon text";
    row-gap:8px;
    align-items:start;
  }
}


/* ========= KIT ========= */
.kit{padding:clamp(60px,8vw,0) 20px;background:linear-gradient(180deg,#141519 0%,#0b0b0f 100%)}
.kit__inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center}
.kit__title{font-weight:800;font-size:clamp(28px,4.2vw,48px);text-transform:uppercase;margin-bottom:clamp(18px,2.2vw,26px)}
.kit__title span{color:var(--brand);font-style:italic}
.kit__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kit__item{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;border-radius:16px;padding:14px 16px;transition:.25s ease;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)
}   
.kit__item:hover{transform:translateY(-2px);background:rgba(255,103,40,.09);border-color:rgba(255,103,40,.35)}
.kit__item.is-visible{transform:scale(1.06);background:rgba(255,103,40,.1);border-color:rgba(255,103,40,.35);box-shadow:0 0 22px rgba(255,103,40,.2)}
.kit__num{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:900;font-size:20px;color:#111;
  background:linear-gradient(180deg,#FFC6AD 0%,#FF9A6D 100%);
}
.kit__text h3{margin:0 0 4px;font-size:18px;font-weight:800}
.kit__text p{margin:0;color:#d7d8dd;font-size:15px}
.kit__visual img{width:min(100%,880px);transform:scale(1.15) translateX(10px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));transition:.4s ease}
.kit__visual img:hover{transform:scale(1.18) translateX(10px)}

/* ========= PRICING ========= */
.pricing{padding:clamp(0,6vw,0) 20px;background:linear-gradient(180deg,#0b0b0f 0%,#141519 100%)}
.pricing__inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,80px);align-items:center}
.pricing__title{font-weight:900;font-size:clamp(32px,4vw,58px);text-transform:uppercase;margin:0 0 16px}
.pricing__switch{
  display:flex;gap:10px;margin:10px 0 24px;padding:6px;border-radius:14px;width:max-content;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.switch-btn{border:0;background:transparent;color:#fff;font-weight:800;font-size:16px;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.25s ease}
.switch-btn.is-active{background:linear-gradient(90deg,var(--brand)0%,var(--brand-2)100%)}
.pricing__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.tariff{
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:.25s ease;
}
.tariff:hover{transform:translateY(-2px);background:rgba(255,103,40,.1);border-color:rgba(255,103,40,.35)}
.tariff__head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:18px}
.tariff__head h3{margin:0;font-size:20px;font-weight:800;white-space:nowrap}
.tariff__badge{
  display:inline-block;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.08);color:#d6d6d6;border:1px solid rgba(255,255,255,.15)
}
.tariff__price{display:flex;align-items:flex-end;gap:6px}
.price-number{font-size:40px;font-weight:900}
.price-currency{font-size:22px;opacity:.9;margin-bottom:2px}
.tariff__list{margin:2px 0 6px;padding-left:18px;color:#cfd0d6;line-height:1.5}
.pricing__visual{display:flex;justify-content:center;align-items:center;position:relative}
.pricing__visual::before{
  content:"";position:absolute;bottom:0;width:90%;height:70%;border-radius:50%;filter:blur(60px);
  background:radial-gradient(closest-side,rgba(255,103,40,.18),transparent 70%);
}
.pricing__visual img{position:relative;z-index:1;width:min(120%,980px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));transition:.35s ease}
.pricing__visual img:hover{transform:scale(1.03)}

/* ========= STEPS ========= */
/* ВАЖНО: верх steps совпадает с низом pricing */
.steps{padding:clamp(80px,8vw,120px) 20px;background:linear-gradient(180deg,#141519 0%,#0b0b0f 100%)}
.steps__inner{
  max-width:1320px;margin:0 auto;text-align:center;border-radius:28px;
  padding:clamp(40px,6vw,70px);border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(1200px 800px at -10% 120%,rgba(255,103,40,.28) 0,rgba(255,103,40,0) 70%),
    linear-gradient(160deg,#15161b 0%,#0c0d11 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.steps__title{margin:0 0 clamp(28px,3vw,40px);font-size:clamp(32px,4vw,54px);font-weight:900;text-transform:uppercase}
.steps__title span{
  display:inline-block;margin-left:10px;padding:8px 18px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand)0%,var(--brand-2)100%);color:#fff;font-weight:900;
}
.steps__grid{
  list-style:none;margin:0 auto clamp(36px,4vw,56px);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,28px);
}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;text-align:left;padding:18px 24px;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);
  transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.step:hover{transform:translateY(-3px);background:rgba(255,103,40,.08);border-color:rgba(255,103,40,.35);box-shadow:0 8px 26px rgba(255,103,40,.25)}
.step__num{
  width:60px;height:60px;display:grid;place-items:center;border-radius:14px;font-weight:900;font-size:26px;color:#111;
  background:linear-gradient(180deg,#ffc6ad 0%,#ff9a6d 100%);box-shadow:0 8px 22px rgba(255,103,40,.35);
}
.step__head{margin:0 0 6px;font-size:clamp(18px,2vw,22px);font-weight:900}
.step__text{margin:0;color:#d6d7dd;font-size:clamp(14px,1.6vw,16px);line-height:1.5}
.steps__cta{margin-top:clamp(18px,3vw,26px);display:inline-flex;min-width:260px;justify-content:center}
.steps__cta.btn--primary{box-shadow:0 16px 44px rgba(255,103,40,.35)}

/* ========= Adaptive ========= */
@media (max-width:1080px){
  .kit__inner{grid-template-columns:1fr}
  .kit__visual{order:-1}
}
@media (max-width:980px){
  .pricing__inner{grid-template-columns:1fr;text-align:center}
  .pricing__visual{order:-1}
  .pricing__grid{grid-template-columns:1fr}
  .steps__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .features{flex-wrap:wrap;gap:12px}
  .btn{height:52px;padding:0 22px;font-size:16px}
}
.hero .price-card{
  display: inline-flex;      /* оставляем компактной */
  flex: 0 0 auto;            /* запрещаем растягивание */
  width: auto;               /* не занимать 100% */
  max-width: 340px;          /* чтобы текст не убегал, можно менять */
  align-self: flex-start;    /* прижатие к левому краю в flex-контейнере */
  padding: 12px 16px;        /* комфортные внутренние отступы */
  border-radius: 12px;
}
/* ===== FAQ ===== */
.faq { padding: clamp(36px,5vw,84px) 0; }
.faq__inner { width:min(1080px,92%); margin:0 auto; }
.faq__title {
  margin:0 0 clamp(18px,3vw,26px);
  font-weight:900;
  font-size: clamp(28px,4.5vw,48px);
  letter-spacing:.01em;
}
.faq__title .accent { color: var(--brand, #FF6728); }

.faq__grid { display:grid; gap:14px; }

.faq-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden; /* <— важно для height-анимации */
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.faq-item.is-open{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,103,40,.35);
  box-shadow: 0 10px 28px rgba(255,103,40,.18);
}

.faq-item__btn{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding: clamp(16px,2.6vw,22px) clamp(16px,2.6vw,24px);
  background:transparent;
  border:0;
  color:#fff;
  text-align:left;
  font-weight:800;
  font-size: clamp(16px,2.2vw,22px);
  cursor:pointer;
  outline:none;
}
.faq-item__btn:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 0 0 3px rgba(255,103,40,.55);
  border-radius:22px;
}

.faq-item__icon{
  width:42px;height:42px;border-radius:999px;position:relative;
  background: var(--brand, #FF6728);
  box-shadow:0 8px 20px rgba(255,103,40,.35);
}
.faq-item__icon::before,
.faq-item__icon::after{
  content:"";position:absolute;inset:0;margin:auto;background:#fff;border-radius:2px;
}
.faq-item__icon::before{ width:18px;height:2.5px; }  /* — */
.faq-item__icon::after { width:2.5px;height:18px; }  /* | */
.faq-item.is-open .faq-item__icon::after { opacity:0; } /* плюс → минус */

.faq-item__panel{
  height:0;                 /* анимируем только высоту */
  overflow:hidden;
  padding:0 clamp(16px,2.6vw,24px) 0; /* нижний паддинг добавит .is-open */
  transition:height .32s ease;
  will-change: height;
}
.faq-item.is-open .faq-item__panel{
  padding-bottom: clamp(16px,2.6vw,22px);
}
.faq-item__panel p{ margin:.6em 0; }
.faq-item__panel ol{ margin:.4em 0 .6em 1.2em; }

/* ===== CONTACTS (единый блок с фоном и картой) ===== */
.contacts {
  padding: clamp(64px, 8vw, 96px) 20px;
}

.contacts__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);

  background:
    radial-gradient(900px 700px at -10% 120%, rgba(255,103,40,.22) 0, rgba(255,103,40,0) 70%),
    linear-gradient(160deg,#15161b 0%,#0e0f14 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

.contacts__info {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.contacts__title {
  margin: 0 0 14px;
  font-weight: 900;
  font-size: clamp(28px,4.2vw,48px);
  text-transform: uppercase;
}
.contacts__title .accent {
  color: var(--brand);
  font-style: italic;
}

.contacts__address {
  margin: 10px 0 18px;
  color: #e9e9ee;
  line-height: 1.55;
  font-size: clamp(16px,2vw,18px);
}
.contacts__address strong {
  color: #fff;
}

.contacts__worktime h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}
.contacts__worktime p {
  margin: 0 0 18px;
  color: #d6d7dd;
  line-height: 1.55;
}

.contacts__phone {
  display: inline-block;
  margin: 10px 0 20px;
  font-weight: 900;
  font-size: clamp(22px,3.4vw,36px);
  color: var(--brand);
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.contacts__phone:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ===== ICONS ===== */
.contacts__buttons {
  display: flex;
  gap: 0px;
  align-items: center;
  flex-wrap: wrap;
}

.contact-icon {
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%; /* круглые иконки */
  border: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-icon:hover {
  transform: translateY(-2px);
  background: rgba(255, 103, 40, 0.15);
  box-shadow: 0 0 25px 6px rgba(255, 103, 40, 0.35); /* мягкое круглое свечение */
}

.contact-icon img {
  width: 42px;
  height: 42px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
:root{
  /* высота шапки для расчёта отступа первого блока */
  --hdr-h: 88px;            /* подправь при желании */
  --accent:#FF6728;
  --hdr-glass-bg: rgba(20,22,28,.55);
  --hdr-glass-bd: rgba(255,255,255,.08);
  --hdr-radius: 22px;
}

:root {
  --brand: #FF6728;
  --brand-2: #FF7F4B;
  --ink: #fff;
  --muted: #c9c9cf;
  --bg: #0b0b0f;
  --radius: 28px;
  --line: rgba(255,255,255,.12);

  /* header vars */
  --hdr-h: 88px;
  --hdr-glass-bg: rgba(20,22,28,.55);
  --hdr-glass-bd: rgba(255,255,255,.08);
  --hdr-radius: 22px;
}

/* ===== HEADER ===== */
.hdr {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 94%);
  z-index: 1000;
  transition: all .28s ease;
}

.hdr__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-radius: var(--hdr-radius);
}

.hdr.is-sticky .hdr__inner {
  background: var(--hdr-glass-bg);
  border: 1px solid var(--hdr-glass-bd);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35),
              0 0 0 1px rgba(255,255,255,.03) inset;
}

/* ===== CONTACT ICONS ===== */
.hdr__contacts {
  display: flex;
  gap: 14px;
  align-items: center;
}

.hdr__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  transition: transform .25s ease, filter .25s ease;
}

.hdr__icon img {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.hdr__icon:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 16px rgba(255,103,40,.45));
}

/* ===== LOGO ===== */
.hdr__logo {
  justify-self: center;
  line-height: 0;
}

.hdr__logo img {
  height: 36px;
  width: auto;
  transition: transform .2s ease;
}

.hdr.is-sticky .hdr__logo img {
  transform: scale(.95);
}

/* ===== CTA BUTTON ===== */
.hdr__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hdr__cta {
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255,103,40,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hdr__cta:hover {
  background: #ff804a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,103,40,.45);
}

/* ===== BURGER (прозрачный) ===== */
.hdr__burger {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: none; /* убран фон */
  border: none;     /* убрана рамка */
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
}

.hdr__burger:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(255,103,40,.35));
}

.hdr__burger img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ===== SAFE OFFSET FOR FIRST BLOCK ===== */
.hero,
.section--top,
.first-screen {
  padding-top: calc(var(--hdr-h) + 16px);
}

/* ===== ADAPTIVE ===== */
@media (max-width:980px) {
  .hdr__icon { width: 56px; height: 56px; }
  .hdr__icon img { width: 34px; height: 34px; }
  .hdr__logo img { height: 32px; }
  .hdr__burger { width: 54px; height: 54px; }
  .hdr__burger img { width: 28px; height: 28px; }
  .hdr__cta { padding: 10px 16px; }
}

@media (max-width:640px) {
  .hdr__contacts { display: none; }
  .hdr__cta { display: none; }
  .hdr__logo img { height: 30px; }
}
/* ===== PANEL MENU ===== */
.hdr-panel{
  position:fixed;
  top:0; right:-420px;
  width:min(420px,86vw);
  height:100dvh;
  background:rgba(20,22,28,.94);
  backdrop-filter:blur(12px) saturate(160%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
  z-index:1100;
  padding:22px 22px 32px;
  display:flex;
  flex-direction:column;
  transition:right .32s ease;
}
.hdr-panel.is-open{ right:0; }

.hdr-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.hdr-panel__logo{height:32px;}
.hdr-panel__close{
  width:42px;height:42px;border-radius:12px;
  border:none;background:none;color:#fff;
  font-size:32px;line-height:1;cursor:pointer;
  transition:transform .25s ease;
}
.hdr-panel__close:hover{transform:rotate(90deg);}

.hdr-panel__nav{
  display:grid;
  gap:14px;
  margin:0 0 28px;
}
.hdr-panel__nav a{
  color:#fff;text-decoration:none;font-weight:600;
  padding:12px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:background .2s ease,border .2s ease;
}
.hdr-panel__nav a:hover{
  background:rgba(255,103,40,.14);
  border-color:rgba(255,103,40,.25);
}

.hdr-panel__cta{
  display:grid;
  gap:12px;
  margin-top:auto;
}

/* затемнение */
.hdr-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  z-index:1000;
}
.hdr-overlay.is-open{
  opacity:1;
  visibility:visible;
}
/* ===== OVERLAY (затемнение фона при открытом меню) ===== */
.hdr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 900;
}

.hdr-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* чтобы панель была выше */
.hdr-panel {
  z-index: 1000;
}   
/* === УНИФИКАЦИЯ ВНУТРЕННЕЙ ВЁРСТКИ ДЛЯ ВСЕХ БЛОКОВ === */
/* Иконка слева, рядом заголовок, под ним текст — для ВСЕХ карточек */

.benefits__grid .benefit{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon head"
    "icon text";
  column-gap: 16px;
  align-items: start;
}

.benefits__grid .benefit .benefit__icon{ grid-area: icon; }
.benefits__grid .benefit h3{ grid-area: head; margin: 0 0 8px; }
.benefits__grid .benefit p { grid-area: text; margin: 0; }

/* На десктопе СБРАСЫВАЕМ прежнюю «в линию» логику для 2/3/6 */
@media (min-width:1100px){
  .benefits__grid .benefit:nth-child(2),
  .benefits__grid .benefit:nth-child(3),
  .benefits__grid .benefit:nth-child(6){
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "icon head"
      "icon text" !important;
    align-items: start !important;
  }
}
/* === BENEFITS: уплотняем, центрируем, меняем местами 5 и 6 === */

/* компактнее карточка + вертикальное центрирование контента */
.benefits__grid .benefit{
  /* иконка + колонка контента */
  display: grid;
  grid-template-columns: 72px 1fr;      /* фиксированная колонка под иконку */
  grid-template-areas:
    "icon head"
    "icon text";
  column-gap: 16px;
  row-gap: 6px;

  padding: 18px 20px;                   /* было больше — убрали лишний воздух */
  align-items: center;                  /* центрируем элементы по высоте дорожек */
  align-content: center;                /* центрируем весь набор дорожек в карточке */
}

.benefits__grid .benefit .benefit__icon{
  grid-area: icon;
  width: 56px;                          /* чуть компактнее */
  height: 56px;
  justify-self: center;                 /* иконка по центру своей колонки */
  align-self: center;
}

.benefits__grid .benefit h3{
  grid-area: head;
  margin: 0 0 4px;                      /* меньше отступ под заголовком */
  line-height: 1.15;
}

.benefits__grid .benefit p{
  grid-area: text;
  margin: 0;
  line-height: 1.45;                    /* плотнее текст */
  color: #d7d8dd;
}

/* — Плотнее на планшетах/мобилках — */
@media (max-width:1099px){
  .benefits__grid .benefit{
    grid-template-columns: 64px 1fr;
    padding: 16px 18px;
  }
  .benefits__grid .benefit .benefit__icon{ width: 52px; height: 52px; }
}

/* === Перекидываем местами 5-ю и 6-ю карточки (сетка остаётся 1/3 + 2/3) === */
/* Десктоп */
@media (min-width:1100px){
  /* 5-я едет вправо (широкая 2/3), 6-я — влево (узкая 1/3) */
  .benefits__grid .benefit:nth-child(5){ grid-column: 5 / 13; grid-row: 3; }
  .benefits__grid .benefit:nth-child(6){ grid-column: 1 / 5;  grid-row: 3; }
}
/* Планшет (тот же ритм: 2 + 4 колонки) */
@media (max-width:1099px) and (min-width:701px){
  .benefits__grid .benefit:nth-child(5){ grid-column: 3 / 7; grid-row: 3; }
  .benefits__grid .benefit:nth-child(6){ grid-column: 1 / 3; grid-row: 3; }
}
/* ===== FOOTER ===== */
.footer {   
  background: #000;
  color: #bbb;
  padding: clamp(40px, 6vw, 80px) 20px;
  font-family: "Gotham Pro", sans-serif;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 4vw, 40px);
}

.footer__logo {
  width: 160px;
  margin-bottom: 20px;
}

.footer__social {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}
.footer__social img {
  width: 42px;
  height: 42px;
  transition: transform .25s ease, filter .25s ease;
}
.footer__social a:hover img {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

.footer__col h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.footer__col p {
  margin: 0;
  color: #ccc;
  font-size: 15px;
  line-height: 1.6;
}   

.footer__col--policy a {
  color: #bbb;
  text-decoration: none;
  transition: color .25s ease;
}
.footer__col--policy a:hover {
  color: var(--brand, #FF6728);
}

.footer__bottom {
  max-width: 1320px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  text-align: center;
  color: #4f4f4f;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width:700px) {
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__social {
    justify-content: center;
  }
}
/* ===== MODAL (popup) ===== */
.modal {
  position: fixed; inset: 0; z-index: 1200;
  display: block;                 /* чтобы работала анимация hide */
  opacity: 0; visibility: hidden; /* скрыто по умолчанию */
  pointer-events: none;
  transition: opacity .32s ease, visibility .32s ease;
}
.modal.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
}

.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .32s ease;
}
.modal.is-open .modal__overlay { opacity: 1; }

.modal__dialog {
  position: relative;
  max-width: 560px; width: calc(100% - 32px);
  margin: 10vh auto 0;
  border-radius: 22px;
  padding: clamp(22px,3vw,30px);
  color: #111;
  background:
    radial-gradient(900px 700px at -20% 120%, rgba(255,103,40,.18) 0, rgba(255,103,40,0) 70%),
    #fff;
  box-shadow: 0 26px 70px rgba(0,0,0,.55);

  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .36s cubic-bezier(.22,.61,.36,1), opacity .36s ease;
}
.modal.is-open .modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:12px;
  border:0; background:transparent; color:#333; font-size:26px; cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.modal__close:hover{ transform: scale(1.05); background: rgba(0,0,0,.06); }

.modal__title{
  margin:0 0 6px; font-weight:900;
  font-size: clamp(24px,4.2vw,44px);
  color:#111;
}
.modal__subtitle{ margin:0 0 18px; color:#666; font-size:16px; }

.modal__form{ display:grid; gap:14px; }
.field{ display:block; }
.field__input{
  width:100%; height:56px; border-radius:14px; border:1px solid #e6e7eb;
  padding:0 16px; font-size:16px; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field__input:focus{
  border-color: var(--brand,#FF6728);
  box-shadow: 0 0 0 3px rgba(255,103,40,.18);
}
.field__input.is-error{
  border-color:#ff3b30;
  background: #fff6f6;
  box-shadow: 0 0 0 3px rgba(255,59,48,.15);
}

/* phone group */
.phone{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  height:56px; border:1px solid #e6e7eb; border-radius:14px; padding:0 12px;
}
.phone__country{
  border:0; background:transparent; height:38px; line-height:38px; font-weight:600;
}
.phone__input{
  border:0; outline:none; height:100%; font-size:16px;
}
.modal__submit{ width:100%; height:56px; font-size:17px; }

.modal__consent{
  margin:6px 2px 0; text-align:center; font-size:14px; color:#666;
}
.modal__consent a{
  color: var(--brand,#FF6728); text-decoration: underline;
}
/* ===== RENT MODAL (NEW, изолированные классы rm*) ===== */
.rm{
  position:fixed; inset:0; z-index:1200;
  display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s ease, visibility .32s ease;
}
.rm.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.rm__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .32s ease;
}
.rm.is-open .rm__overlay{ opacity:1; }

.rm__dialog{
  position:relative; max-width:560px; width:calc(100% - 32px);
  margin:10vh auto 0; border-radius:22px;
  padding:clamp(22px,3vw,30px); color:#111;
  background:
    radial-gradient(900px 700px at -20% 120%, rgba(255,103,40,.18) 0, rgba(255,103,40,0) 70%),
    #fff;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  transform:translateY(16px) scale(.98); opacity:0;
  transition:transform .36s cubic-bezier(.22,.61,.36,1), opacity .36s ease;
}
.rm.is-open .rm__dialog{ transform:translateY(0) scale(1); opacity:1; }

.rm__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:12px; border:0; background:transparent;
  color:#333; font-size:26px; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.rm__close:hover{ transform:scale(1.05); background:rgba(0,0,0,.06); }

.rm__title{ margin:0 0 6px; font-weight:900; font-size:clamp(24px,4.2vw,44px); color:#111; }
.rm__subtitle{ margin:0 0 18px; color:#666; font-size:16px; }
.rm__form{ display:grid; gap:14px; }

.rm-field{ display:block; }
.rm-input{
  width:100%; height:56px; border-radius:14px; border:1px solid #e6e7eb;
  padding:0 16px; font-size:16px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rm-input:focus{
  border-color:var(--brand,#FF6728);
  box-shadow:0 0 0 3px rgba(255,103,40,.18);
}
.rm-input.is-error{
  border-color:#ff3b30; background:#fff6f6; box-shadow:0 0 0 3px rgba(255,59,48,.15);
}

/* phone group */
.rm-phone{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  height:56px; border:1px solid #e6e7eb; border-radius:14px; padding:0 12px;
}
.rm-phone__country{ border:0; background:transparent; height:38px; line-height:38px; font-weight:600; }
.rm-phone__input{ border:0; outline:none; height:100%; font-size:16px; }
.rm__submit{ width:100%; height:56px; font-size:17px; }

.rm__consent{ margin:6px 2px 0; text-align:center; font-size:14px; color:#666; }
.rm__consent a{ color:var(--brand,#FF6728); text-decoration:underline; }

/* ===================== MOBFIX v1 (2025-10-29) ===================== */
/* Header overlap safe-area */
body{
  padding-top: calc(var(--hdr-h, 88px) + env(safe-area-inset-top, 0px)) !important;
}

/* Hero: одна колонка на узких экранах */
@media (max-width: 980px){
  .hero{ min-height:auto !important; padding:24px 20px !important; }
  .hero__inner{
    grid-template-columns: 1fr !important;
    min-height:auto !important;
    gap:18px !important;
  }
  .hero__visual{ order:-1 !important; margin-bottom:8px !important; }
  .hero__visual::before{ content:none !important; }
  .hero__visual img{
    width:100% !important;
    max-width:560px !important;
    transform:none !important;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)) !important;
  }
  .features{
    flex-wrap:wrap !important;
    gap:10px !important;
    transform:none !important;
    justify-content:flex-start !important;
  }
}

/* Компактнее на очень узких экранах */
@media (max-width: 600px){
  .hero__title{ font-size: clamp(26px, 8vw, 32px) !important; line-height:1.08 !important; }
  .hero__tagline{ font-size:14px !important; }
  .btn{ height:50px !important; padding:0 18px !important; font-size:15px !important; }
}

/* Контакты: одна колонка */
@media (max-width: 900px){
  .contacts__inner{ display:grid !important; grid-template-columns: 1fr !important; gap:16px !important; }
  #ymap, .contacts__map{ min-height:320px !important; }
}

/* ===================== MOBFIX v2 (2025-10-29) ===================== */
/* 1) Страница не шире экрана + защита от «распирания» */
html, body { max-width: 100%; overflow-x: hidden; }
.section, .container, .hero, .page, .site, .wrapper { overflow-x: hidden; }

/* Медиа, чтобы они не тянули ширину */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* 2) Заголовки в герое не уезжают */
.hero__title, .hero__subtitle, .hero__tagline { word-break: break-word; hyphens: auto; }

/* 3) Кнопки в герое: на мобиле в колонку, «Смотреть тарифы» ниже */
@media (max-width: 600px){
  .hero__cta, .hero__actions, .cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero__cta .btn, .hero__actions .btn, .cta-buttons .btn { width: 100% !important; }
}

/* 4) Оранжевая «таблетка» ЧТО ДЕЛАТЬ? — всегда в одну строку */
@media (max-width: 600px){
  .how__cta .pill, .how__title .pill, .steps__title .pill, .cta-what, .btn--pill, .pill--big, .pill {
    white-space: nowrap !important;
    font-size: clamp(16px, 5.2vw, 22px) !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* 5) Преимущества в тарифах — выравнивание влево у точек */
.pricing .tariff__features, .tariff .features, .tariff ul, .pricing-card ul, .tariff-card ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 20px;
  margin: 0;
  text-align: left;
}
.tariff__features li, .tariff li, .pricing-card li, .tariff-card li { display: list-item; }
.tariff, .pricing, .tariff-card { text-align: left; }

/* 6) Кнопка бронирования в тарифе — на всю ширину на мобиле */
@media (max-width: 600px){
  .tariff .btn, .pricing-card .btn, .tariff-card .btn { width: 100% !important; }
}

/* 7) Чипсы/бейджи — переносятся и не «толкают» макет */
.chips, .badges { flex-wrap: wrap !important; gap: 10px !important; }

/* === NO_WRAP_V1: электровелосипеда не переносить === */
.hero__title{
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.hero__title span,
.hero__title strong,
.hero__title b,
.hero__title em{
  white-space: nowrap !important;
}

/* Опционально: «ЧТО ДЕЛАТЬ?» в одну строку на мобиле */
@media (max-width: 600px){
  .how__cta .pill, .how__title .pill, .cta-what, .pill--big, .pill{
    white-space: nowrap !important;
  }
}