/*
Theme Name: RuedaIA
Theme URI: https://example.com/
Description: Лендинг «RuedaIA» — ИИ-помощник по инвестициям в мобильность и автопарк через participaciones. España. Дизайн-система «авто / диагонали / движение».
Version: 2.0.0
Author: —
Text Domain: movilidad-participaciones
*/

/* ============================================================
   ТОКЕНЫ
   ============================================================ */
:root {
  --bg:      #0C0D10;
  --panel:   #15171C;
  --panel2:  #1A1D24;
  --text:    #EEF1F4;
  --acc:     #FF6B4A;   /* оранжевый — CTA */
  --acc2:    #4DA8FF;   /* синий — вторичный */
  --steel:   #C7D0DA;
  --muted:   #7E8896;
  --border:  rgba(199,208,218,.14);
  --border-acc: rgba(255,107,74,.25);
  --radius:  4px;       /* острые грани */
  --maxw:    1240px;
  --ease:    cubic-bezier(.2,.8,.2,1);
  /* Диагональный скос — угол */
  --skew-h:  clamp(32px, 5vw, 64px);
}

/* ============================================================
   СБРОС + БАЗОВАЯ ТИПОГРАФИКА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity .32s ease;
}
body.is-ready { opacity: 1 }

h1, h2, h3 {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .025em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); letter-spacing: .04em }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.7rem) }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); text-transform: none; letter-spacing: 0 }
h1 em { font-style: normal; color: var(--acc) }

p { color: #c4cbd6; line-height: 1.7 }
a { color: inherit }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 44px);
}

/* ============================================================
   ОБЩИЕ КОМПОНЕНТЫ
   ============================================================ */

/* Метка-eyebrow */
.eyebrow,
.sec-label {
  display: inline-block;
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--acc);
  margin-bottom: 14px;
}

/* Заголовок секции */
.sec-title {
  margin-bottom: .4em;
}

/* Подзаголовок секции */
.sec-sub {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 56ch;
  margin-bottom: 0;
}

/* Прогресс-полоса */
.topline {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  transform: scaleX(0); transform-origin: left;
  z-index: 60;
  transition: transform .7s var(--ease);
}
body.is-ready .topline { transform: scaleX(1) }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  min-height: 48px;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--acc);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,107,74,.4);
}
.btn-outline {
  background: transparent;
  color: var(--steel);
  border-color: var(--border);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn-outline:hover {
  border-color: var(--acc2);
  color: var(--acc2);
}
.btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn-submit { width: 100%; justify-content: center }

/* ============================================================
   ХЕДЕР
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,13,16,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.logo {
  display: inline-flex;
  filter: drop-shadow(0 0 8px rgba(255,107,74,.28));
  transition: transform .22s var(--ease);
}
.brand:hover .logo { transform: rotate(-8deg) scale(1.07) }
.brand-text {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-text span { color: var(--acc) }
.nav-cta { font-size: .9rem; padding: 10px 22px; min-height: 44px }

/* ============================================================
   СЕКЦИИ — базовые, цвета, диагональные скосы
   ============================================================ */
.sec {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  overflow: hidden; /* предотвращаем горизонтальный скролл от clip-path */
}
.sec--dark  { background: var(--bg) }
.sec--mid   { background: var(--panel) }

/* Фоновое изображение для contrast-секции */
.sec--contrast {
  background:
    linear-gradient(rgba(12,13,16,.88), rgba(12,13,16,.94)),
    url("img/contrast.webp") center / cover no-repeat;
}

/* Диагональный скос сверху (псевдо-элемент над секцией) */
.sec--angled-top::before {
  content: "";
  position: absolute;
  top: 0; left: -2px; right: -2px;
  height: var(--skew-h);
  background: var(--bg); /* берём цвет предыдущей секции */
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
  pointer-events: none;
  z-index: 2;
}
/* Для sec--mid — скос другого цвета */
.sec--mid.sec--angled-top::before { background: var(--bg) }
/* Для sec--dark следующей за sec--mid */
#acceso.sec--angled-top::before  { background: var(--panel) }

/* Двойной скос (сверху + снизу) */
.sec--angled-both::before {
  content: "";
  position: absolute;
  top: 0; left: -2px; right: -2px;
  height: var(--skew-h);
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
  pointer-events: none; z-index: 2;
}
.sec--angled-both::after {
  content: "";
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
  height: var(--skew-h);
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0 100%);
  pointer-events: none; z-index: 2;
}

/* ============================================================
   HERO — диагональный split
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: clamp(480px, 72vh, 760px);
}

/* Левая панель — тёмный фон + текст */
.hero-panel-copy {
  position: relative;
  display: flex; align-items: center;
  padding: clamp(72px,10vw,100px) 0 clamp(72px,10vw,100px) clamp(20px,5vw,60px);
  background:
    linear-gradient(140deg, rgba(255,107,74,.07) 0%, transparent 50%),
    var(--bg);
  /* Скошенная правая грань через clip-path */
  clip-path: polygon(0 0, calc(100% - var(--skew-h)) 0, 100% 100%, 0 100%);
  z-index: 2;
}
.hero-copy-inner {
  max-width: 540px;
  padding-right: clamp(24px, 4vw, 48px);
}
.hero-copy-inner .eyebrow { margin-bottom: 20px }
.hero h1 { margin-bottom: .45em }
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-width: 44ch;
  color: var(--steel);
  margin-bottom: 0;
}
.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 32px;
}

/* Линии скорости — декоративные горизонтальные */
.speed-lines {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 40px;
}
.speed-lines span {
  display: block; height: 2px;
  background: linear-gradient(90deg, var(--acc), transparent);
  opacity: .35;
}
.speed-lines span:nth-child(1) { width: 60px }
.speed-lines span:nth-child(2) { width: 100px; opacity: .22 }
.speed-lines span:nth-child(3) { width: 44px; opacity: .15 }

/* Правая панель — фото */
.hero-panel-img {
  position: relative;
  overflow: hidden;
  background: var(--panel);
}
.hero-panel-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .55s var(--ease), transform .65s var(--ease);
}
body.is-ready .hero-panel-img img { opacity: 1; transform: scale(1) }
.hero-panel-img.no-img { min-height: 320px }

/* Наложение на фото */
.hero-img-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 20%),
    linear-gradient(135deg, rgba(255,107,74,.08), transparent 50%);
  pointer-events: none;
}

/* ============================================================
   РАЗДЕЛ 1 · Cómo te ayuda — staggered-карточки
   Stagger: нечётные выше, чётные ниже (offset по translate)
   ============================================================ */
#como { padding-top: calc(clamp(72px,10vw,120px) + var(--skew-h)) }

.stagger-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 48px;
  /* Stagger: чётные карточки смещены вниз */
  align-items: start;
}

.stagger-card {
  position: relative;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s;
}
/* Stagger — чётные вниз */
.stagger-card:nth-child(even) { margin-top: clamp(20px, 3vw, 44px) }

/* Диагональная акцент-полоса сбоку */
.sc-accent {
  position: absolute;
  top: 0; left: 0; width: 3px; bottom: 0;
  background: linear-gradient(180deg, var(--acc), var(--acc2));
  clip-path: polygon(0 0, 100% 6px, 100% 100%, 0 calc(100% - 6px));
}
.stagger-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.45) }

.sc-num {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: rgba(255,107,74,.14);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.stagger-card h3 { margin-bottom: .5em; font-size: clamp(1rem, 1.8vw, 1.2rem); text-transform: none }
.stagger-card p  { margin: 0; font-size: .97rem }

/* ============================================================
   РАЗДЕЛ 1 · Cómo — двухколоночный layout + нумерованный список
   ============================================================ */
.como-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  /* Смещение вправо для асимметрии */
  margin-right: clamp(-16px, -2vw, -40px);
}

.como-header { padding-top: clamp(8px, 2vw, 24px) }

/* Нумерованный список — полоски, не карточки */
.numbered-list {
  list-style: none;
  margin-top: 8px;
  /* Левый трек — вертикальная линия */
  border-left: 2px solid var(--border);
  padding-left: 0;
}

.nl-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px) 0 clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px);
  position: relative;
  transition: background .18s;
}
/* Точка на треке */
.nl-item::before {
  content: "";
  position: absolute;
  left: -5px; top: clamp(28px,3vw,34px);
  width: 8px; height: 8px;
  border-radius: 0; /* угловатый квадрат */
  background: var(--border);
  transition: background .2s;
}
.nl-item:hover::before { background: var(--acc) }

/* Разделитель между пунктами */
.nl-item + .nl-item {
  border-top: 1px solid var(--border);
}

/* Большой номер */
.nl-num {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--acc);
  background: rgba(255,107,74,.07);
  border: 1px solid rgba(255,107,74,.18);
  /* Угловатый срез */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.nl-body h3 {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  margin-bottom: .4em;
  text-transform: none;
}
.nl-body p { font-size: .97rem; margin: 0 }

/* ============================================================
   РАЗДЕЛ 2 · Bento — угловатые срезы углов
   Асимметрия: 3 клетки в ряд + одна высокая
   ============================================================ */
#formas {
  padding-top: calc(clamp(72px,10vw,120px) + var(--skew-h));
  padding-bottom: calc(clamp(72px,10vw,120px) + var(--skew-h));
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(12px, 2vw, 20px);
  margin-top: 44px;
}

/* Широкая плитка — растягивается на 2 колонки */
.bento-cell--wide {
  grid-column: 1 / 3;
}
/* Высокая плитка — растягивается на 2 строки */
.bento-cell--tall {
  grid-column: 3;
  grid-row: 1 / 3;
}

.bento-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
  position: relative;
  overflow: hidden;
  /* Угловой срез clip-path */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.bento-cell:hover {
  border-color: var(--border-acc);
  box-shadow: 0 0 0 1px var(--border-acc), 0 14px 40px rgba(0,0,0,.4);
  transform: translateY(-2px);
}

/* Верхняя линия-акцент */
.bento-cell::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--acc), transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.bento-cell:hover::before { opacity: 1 }

.bc-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: rgba(255,107,74,.08);
  border: 1px solid rgba(255,107,74,.18);
  color: var(--acc);
  margin-bottom: 20px;
}
.bento-cell h3 { font-size: clamp(1rem, 1.8vw, 1.18rem); margin-bottom: .45em; text-transform: none }
.bento-cell p  { font-size: .97rem; margin: 0 }

/* Ссылка внутри bento (высокая плитка) */
.bento-link {
  display: inline-block;
  margin-top: 20px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc);
  text-decoration: none;
  transition: opacity .18s;
}
.bento-link:hover { opacity: .75 }

/* ============================================================
   РАЗДЕЛ 3 · No necesitas la flota — gente в диагональной рамке
   Асимметрия: картинка слева, текст немного смещён вниз
   ============================================================ */
#acceso {
  padding-top: calc(clamp(72px,10vw,120px) + var(--skew-h));
  /* Асимметричный нижний паддинг */
  padding-bottom: clamp(80px, 12vw, 140px);
}

.diagonal-split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  /* Сдвиг вправо от центра */
  margin-left: clamp(0px, 2vw, 32px);
}

/* Фото-блок с диагональной рамкой */
.ds-photo {
  position: relative;
}
.ds-photo img {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
  aspect-ratio: 5 / 4;
  /* Диагональная рамка через clip-path */
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.ds-photo.no-img { min-height: 280px; background: var(--panel) }

/* Декоративная диагональная рамка */
.ds-frame {
  position: absolute;
  inset: -8px; z-index: -1;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  opacity: .22;
}

/* Бейдж на фото */
.ds-badge {
  position: absolute;
  bottom: 18px; right: -12px;
  background: var(--acc);
  color: #fff;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px 7px 10px;
  display: flex; align-items: center; gap: 6px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

.ds-copy { padding-top: clamp(16px, 3vw, 40px) } /* смещение вниз для асимметрии */
.ds-copy .sec-label { display: block; margin-bottom: 12px }
.ds-copy h2 { margin-bottom: .55em }
.ds-copy p  { margin-bottom: 1.1em }
.ds-copy p:last-of-type { margin-bottom: 28px }

/* ============================================================
   РАЗДЕЛ 4 · Contraste — две скошенные панели
   Разный вертикальный паддинг для асимметрии
   ============================================================ */
#contraste {
  padding-top: clamp(88px, 12vw, 140px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.angled-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 44px;
  align-items: start;
}

.ap-panel {
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  /* Скошенный угол */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.ap-panel--yes {
  background: rgba(255,107,74,.08);
  border: 1px solid rgba(255,107,74,.3);
  box-shadow: 0 0 0 1px rgba(255,107,74,.06), 0 24px 60px -20px rgba(255,107,74,.22);
  /* Правая панель немного ниже для stagger */
}
.ap-panel--no {
  background: rgba(21,23,28,.9);
  border: 1px solid var(--border);
  margin-top: clamp(20px, 3vw, 44px); /* stagger */
}

/* Диагональная полоса в углу панели */
.ap-panel::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 20px;
  background: var(--border);
}
.ap-panel--yes::after { background: rgba(255,107,74,.4) }

.ap-tag {
  display: inline-block;
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px 5px 10px;
  margin-bottom: 18px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
}
.ap-panel--yes .ap-tag { background: var(--acc); color: #fff }
.ap-panel--no  .ap-tag { border: 1px solid var(--border); color: var(--muted) }

.ap-panel h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); margin-bottom: .55em; text-transform: none }
.ap-panel--yes h3 { color: var(--acc) }
.ap-panel p  { font-size: .97rem; margin-bottom: 0 }

.ap-list {
  list-style: none;
  margin-top: 18px;
}
.ap-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: .97rem;
  border-top: 1px solid var(--border);
  color: var(--steel);
}
.ap-list li:first-child { border-top: 0 }
.ap-panel--yes .ap-list li::before {
  content: "→";
  position: absolute; left: 0; top: 9px;
  color: var(--acc); font-weight: 700;
}
.ap-panel--no .ap-list li { color: var(--muted) }
.ap-panel--no .ap-list li::before {
  content: "–";
  position: absolute; left: 0; top: 9px;
}

/* ============================================================
   РАЗДЕЛ 5 · Recorrido — timeline «дорога»
   Горизонтально на десктопе, вертикально на мобиле
   ============================================================ */
#recorrido {
  padding-top: calc(clamp(72px,10vw,120px) + var(--skew-h));
  padding-bottom: clamp(80px, 10vw, 120px);
}

.road-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
}

/* Трек-«дорога» */
.rt-track {
  position: absolute;
  top: 27px; /* центр узла */
  left: calc(1fr / 8); right: calc(1fr / 8);
  left: 12.5%; right: 12.5%;
  height: 4px;
  background: var(--panel2);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
/* Пунктирная центральная линия */
.rt-dashes {
  position: absolute;
  inset: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--acc) 0, var(--acc) 12px,
    transparent 12px, transparent 22px
  );
  opacity: .55;
}

.rt-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(8px, 1.5vw, 16px);
}

.rt-node {
  width: 54px; height: 54px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 2px solid var(--acc);
  display: grid; place-items: center;
  margin-bottom: 20px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--acc);
  box-shadow: 0 0 0 5px rgba(255,107,74,.09);
  /* Угловатый нод */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: box-shadow .22s, border-color .22s;
  flex-shrink: 0;
}
.rt-node--last { border-color: var(--acc2); color: var(--acc2) }
.rt-step:hover .rt-node {
  box-shadow: 0 0 0 10px rgba(255,107,74,.14);
}

.rt-content { padding: 0 4px }
.rt-content h3 {
  font-size: clamp(.92rem, 1.6vw, 1.08rem);
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3em;
}
.rt-content p { font-size: .9rem; color: var(--muted); margin: 0 }

/* ============================================================
   РАЗДЕЛ 6 · FAQ
   Простой список без карточек — максимально отличный от других
   Асимметрия: контейнер смещён влево
   ============================================================ */
#faq {
  padding-top: clamp(80px, 10vw, 120px);
  /* Меньший нижний паддинг */
  padding-bottom: clamp(60px, 8vw, 96px);
}

.faq-list {
  /* Асимметричный контейнер — не на весь maxw */
  max-width: 760px;
  margin-top: 44px;
  /* Смещение от центра влево */
  margin-right: auto;
  margin-left: clamp(0px, 4vw, 48px);
}

.qa { border-bottom: 1px solid var(--border) }
.qa:first-child { border-top: 1px solid var(--border) }

.qa-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: none; border: 0;
  color: var(--text);
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: clamp(.95rem, 1.8vw, 1.08rem);
  padding: 22px 0;
  text-align: left;
  min-height: 44px;
  transition: color .18s;
}
.qa-btn:hover { color: var(--acc) }

/* Иконка +/× */
.qa-icon {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: background .18s, border-color .18s;
  position: relative;
}
.qa-icon::before,
.qa-icon::after {
  content: "";
  position: absolute;
  background: var(--steel);
  transition: transform .22s var(--ease), opacity .22s;
}
.qa-icon::before { width: 10px; height: 1.5px }
.qa-icon::after  { width: 1.5px; height: 10px }

.qa.open .qa-btn { color: var(--acc) }
.qa.open .qa-icon {
  background: rgba(255,107,74,.1);
  border-color: rgba(255,107,74,.3);
}
.qa.open .qa-icon::after { transform: rotate(90deg); opacity: 0 }
.qa.open .qa-icon::before { background: var(--acc) }

.qa-ans {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .26s var(--ease), opacity .24s;
}
.qa.open .qa-ans { max-height: 300px; opacity: 1; padding-bottom: 22px }
.qa-ans p { color: var(--muted); margin: 0; font-size: .97rem }

/* ============================================================
   ФОРМА — угловатая, толстый нижний бордер
   Две колонки: aside (описание) + форма
   ============================================================ */
.sec--form {
  background:
    linear-gradient(rgba(12,13,16,.93), rgba(12,13,16,.97)),
    url("img/texture.webp") center / cover no-repeat;
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 10vw, 120px);
}

.form-wrap {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  /* Сдвиг вправо */
  margin-left: auto;
  margin-right: auto;
  max-width: 1040px;
}

/* Aside с описанием */
.form-aside {
  padding-top: clamp(12px, 2vw, 28px);
}
.fa-inner {
  /* Левый бордер-акцент */
  border-left: 3px solid var(--acc);
  padding-left: clamp(18px, 3vw, 28px);
}
.fa-inner .sec-label { display: block; margin-bottom: 12px }
.fa-inner .sec-title { margin-bottom: .55em }

.fa-desc {
  color: var(--muted);
  font-size: .97rem;
  margin-bottom: 28px;
}

.fa-perks {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.fa-perks li {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; color: var(--steel);
}
.fa-perks li svg { color: var(--acc); flex-shrink: 0 }

/* Форма */
.form-body {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.field { margin-bottom: 26px }
.field label {
  display: block;
  font-size: .88rem;
  color: var(--steel);
  margin-bottom: 8px;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Тип «borde inferior grueso» */
.field input {
  width: 100%;
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 3px solid rgba(199,208,218,.22);
  border-radius: 0;
  padding: 12px 4px;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  min-height: 48px;
}
.field input:focus {
  border-bottom-color: var(--acc);
  box-shadow: 0 3px 0 rgba(255,107,74,.18);
}
.field input::placeholder { color: var(--muted) }

.field .err {
  display: block;
  color: #ff7a6a;
  font-size: .83rem;
  margin-top: 6px;
  min-height: 1em;
}
.field.invalid input { border-bottom-color: #ff7a6a }

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .9rem; color: var(--muted);
  margin-bottom: 24px;
  cursor: pointer;
}
.consent input {
  margin-top: 3px;
  min-width: 18px; min-height: 18px;
  width: 18px; height: 18px;
  accent-color: var(--acc);
  cursor: pointer;
  flex-shrink: 0;
}
.consent a { color: var(--acc); text-decoration: underline }

.shake { animation: shake .26s ease }
@keyframes shake {
  0%,100% { transform: translateX(0) }
  25% { transform: translateX(-6px) }
  75% { transform: translateX(6px) }
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: clamp(44px, 7vw, 68px) 0 clamp(28px, 4vw, 44px);
  color: var(--muted);
  position: relative; z-index: 1;
}
.site-footer .top {
  display: flex;
  justify-content: space-between;
  gap: 24px; flex-wrap: wrap; align-items: flex-start;
  margin-bottom: 28px;
}
.site-footer .brand-text { font-size: 1.3rem }
.site-footer .brand-text span { color: var(--acc) }
.site-footer .tagline {
  margin-top: 8px;
  font-size: .88rem;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer .fnav {
  display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: center;
}
.site-footer .fnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  min-height: 44px;
  display: flex; align-items: center;
  transition: color .18s;
}
.site-footer .fnav a:hover { color: var(--text) }
.site-footer .disc {
  font-size: .83rem;
  max-width: 68ch;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.site-footer .cr { font-size: .83rem }

/* ============================================================
   ЛЕГАЛ / GRACIAS
   ============================================================ */
.legal { padding: 96px 0 }
.legal .container { max-width: 760px }
.legal h1 { margin-bottom: .7em }
.legal h2 { font-size: 1.3rem; margin-top: 2em; margin-bottom: .4em }
.legal p, .legal li { color: #c4cbd6; line-height: 1.7 }

.gracias { min-height: 80dvh; display: grid; place-items: center; text-align: center }
.gracias .box { max-width: 540px; padding: 0 24px }
.gracias h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); color: var(--acc) }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.reveal.in { opacity: 1; transform: none }

/* ============================================================
   АДАПТИВ — ≤ 900px
   ============================================================ */
@media (max-width: 900px) {

  /* Hero: одна колонка */
  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-panel-copy {
    clip-path: none;
    padding: clamp(48px, 8vw, 72px) clamp(16px, 4vw, 28px) 36px;
    background:
      linear-gradient(160deg, rgba(255,107,74,.07) 0%, transparent 55%),
      var(--bg);
  }
  .hero-copy-inner { max-width: 100%; padding-right: 0 }
  .hero-sub { max-width: 100% }
  .speed-lines { margin-top: 28px }

  .hero-panel-img {
    order: -1;
    min-height: 220px;
    max-height: 320px;
  }
  .hero-panel-img img {
    height: 100%; min-height: 220px; max-height: 320px;
  }

  /* Como layout: одна колонка */
  .como-layout {
    grid-template-columns: 1fr;
    margin-right: 0;
    gap: 28px;
  }
  /* Нумерованный список — без отступа и трека на мобиле */
  .numbered-list {
    border-left: none;
  }
  .nl-item {
    padding-left: 0;
    border-left: 3px solid var(--border);
    padding-left: 18px;
  }
  .nl-item::before { display: none }

  /* Stagger-grid: одна колонка, без stagger-offset */
  .stagger-grid {
    grid-template-columns: 1fr;
  }
  .stagger-card:nth-child(even) { margin-top: 0 }

  /* Bento: одна колонка */
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-cell--wide,
  .bento-cell--tall {
    grid-column: 1;
    grid-row: auto;
  }

  /* Diagonal split: одна колонка */
  .diagonal-split {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 0;
  }
  .ds-photo { order: -1 }
  .ds-badge { right: 0 }
  .ds-copy { padding-top: 0 }

  /* Angled panels: одна колонка */
  .angled-panels {
    grid-template-columns: 1fr;
  }
  .ap-panel--no { margin-top: 0 }

  /* Timeline: вертикально */
  .road-timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rt-track { display: none } /* убираем горизонтальный трек */
  .rt-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    padding: 0 0 28px;
    /* Вертикальная пунктирная линия */
    position: relative;
  }
  .rt-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 26px; /* центр ноды 54/2 = 27 */
    top: 54px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(
      180deg,
      var(--acc) 0, var(--acc) 8px,
      transparent 8px, transparent 16px
    );
    opacity: .4;
  }
  .rt-node { margin-bottom: 0; flex-shrink: 0 }
  .rt-content { padding: 12px 0 0 }

  /* Form: одна колонка */
  .form-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fa-inner { border-left: none; padding-left: 0; border-top: 3px solid var(--acc); padding-top: 18px }

  /* FAQ: без смещения */
  .faq-list { margin-left: 0 }

  /* Секции */
  #faq       { padding-top: clamp(60px,8vw,96px) }
  #recorrido { padding-top: calc(clamp(56px,8vw,96px) + var(--skew-h)) }
  #como      { padding-top: calc(clamp(56px,8vw,96px) + var(--skew-h)) }
  #formas    { padding-top:  calc(clamp(56px,8vw,96px) + var(--skew-h));
               padding-bottom: calc(clamp(56px,8vw,96px) + var(--skew-h)); }
  #acceso    { padding-top: calc(clamp(56px,8vw,96px) + var(--skew-h)) }
}

/* ============================================================
   АДАПТИВ — ≤ 520px (маленькие телефоны 360–414px)
   ============================================================ */
@media (max-width: 520px) {

  :root { --skew-h: 28px }

  h1 { font-size: clamp(2rem, 10vw, 2.8rem) }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem) }

  .hero-actions { flex-direction: column; gap: 10px }
  .btn { width: 100%; justify-content: center }

  .stagger-card { padding: 20px 18px }
  .bento-cell   { padding: 20px 18px }

  .ap-panel { padding: 24px 20px }

  .form-body { padding: 24px 20px; clip-path: none }

  .ds-badge { display: none } /* убираем на мелких экранах */

  .site-footer .top { flex-direction: column; gap: 16px }
  .site-footer .fnav { gap: 4px 12px }
}

/* ============================================================
   ДОСТУПНОСТЬ — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: opacity .01ms !important;
  }
  .reveal           { transform: none !important; opacity: 1 !important }
  body              { opacity: 1 !important }
  .hero-panel-img img { opacity: 1 !important; transform: none !important }
  .topline          { transform: scaleX(1) !important }
}