/* ============ THEME ============ */
:root{
  --bg:#1A1A1A;
  --surface:#16181E;
  --text:#F2F4F8;
  --muted:#C9CBD0;
  --border:rgba(255,255,255,.08);
  --primary-1:#9B5CF6;
  --primary-2:#E14DFF;
  --shadow:0 16px 48px rgba(0,0,0,.45);
}

:root{
  --header-h: 72px;
  --anchor-gap: 12px;
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--anchor-gap));
}
[id]{
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}

@font-face{
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-optical-sizing: auto; /* для оси opsz */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}

/* ============ LAYOUT ============ */
.container{max-width:1440px; margin:0 auto;}

@media (max-width: 1440px) {
  .container {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
}

/* Header */
.cf-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background:linear-gradient(180deg, rgba(14,15,18,.85), rgba(14,15,18,.65));
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; gap:20px; height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.logo-svg{height:60px; width:auto; display:block}
.logo-mark{font-size:20px}
.logo-text{font-weight:800; letter-spacing:.2px}
.logo sup{font-size:.7em; opacity:.9}

.menu{display:flex; gap:22px; margin-left:auto}
.menu a{
  color:rgba(255,255,255,.85);
  text-decoration:none; font-weight:500; transition:opacity .2s ease
}
.menu a:hover{opacity:.9}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; padding:12px 20px; font-weight:500; text-decoration:none;
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  user-select:none;
  font-size: 16px;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{
  color:#fff; background:transparent; border-color:rgba(255,255,255,.32);
  border: 2px solid #FFFFFF;
}
.btn-ghost:hover{border-color:#fff}
.btn-outline{
  color:#fff; border-color:rgba(255,255,255,.32); padding:9px 16px; border-radius:12px
}
.btn-outline:hover{border-color:#fff}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:96px 0 56px;
  background:
    radial-gradient(900px 520px at 75% 15%, rgba(155,92,246,.22), transparent 60%),
    radial-gradient(800px 420px at 85% 50%, rgba(225,77,255,.18), transparent 65%),
    var(--bg);
}
.hero-grid{
  display:grid; align-items:center; gap:40px;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 540px);
}
.hero-copy h1{
  margin:0 0 16px;
  font-size: clamp(28px, 5vw, 54px);
  line-height:1.1; font-weight:500; letter-spacing:.2px
}
.hero-sub{color:var(--muted); max-width:720px; margin:0 0 28px; line-height:1.6}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap}
.hero-art{justify-self:end}
.hero-art img{width:100%; height:auto; filter:drop-shadow(0 16px 48px rgba(0,0,0,.55))}

/* ============ PROJECTS ============ */
.projects{padding:48px 0 28px}
.section-title{
  margin:0 0 24px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:clamp(30px,2.6vw,50px)
}
.project-tile{
  position:relative; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow); margin:28px 0;
  aspect-ratio:21/9; background:#000;
}
.tile-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92;
  transform:scale(1.02);
}
.tile-card{
  position:absolute; inset:auto 32px auto 32px;
  width:min(600px, 90%); padding:50px 40px 50px;
  background:#252525;
  border-radius:22px; color:#fff;
  backdrop-filter:saturate(130%) blur(6px);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}
.tile-card.left{left:32px; right:auto; top:50%; transform:translateY(-50%)}
.tile-card.right{right:32px; left:auto; top:50%; transform:translateY(-50%)}

.eyebrow{
  display:inline-block; margin:2px 0 10px;
  font-size: 16px; letter-spacing:.04em; text-transform:uppercase;
  font-weight: 700;
  color:#933C8C;
}
.tile-card h3{
  margin:0 0 12px; font-size:clamp(20px,2.4vw,36px); line-height:1.2; font-weight:600
}
.tile-list{
  margin:0 0 16px 0; padding:0; list-style:none; color:#D7D9DE
}
.tile-list li{position:relative; padding-left:18px; line-height:1.6}
.tile-list li + li{margin-top:20px}
.tile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                /* привязка к середине */
  transform: translateY(-50%); /* сдвигаем кружок ровно по центру */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(155, 92, 246, .6);
}
.actions{display:flex; gap:16px; flex-wrap:wrap}

/* ============ FOOTER ============ */
/* .cf-footer{background:#0b1220; color:#cbd5e1; padding:28px 0; border-top:1px solid var(--border)}
.cf-footer a{color:#fff} */

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .hero{padding:80px 0 48px}
  .hero-grid{grid-template-columns:1.1fr .9fr}
  .tile-card{width:min(440px, 92%)}
}
@media (max-width: 900px){
  .menu{display:none}               /* как на макете — компактный хедер */
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1; justify-self:center; max-width:560px}
  .hero-copy{text-align:left}
}
@media (max-width: 768px){
  .project-tile{aspect-ratio:auto}
  .tile-card{
    position:static; transform:none; margin:18px auto; width:min(560px, 96%);
  }
  .tile-bg{position:relative; height:280px}
}
@media (max-width: 480px){
  .btn{width:100%; padding:12px 18px}
  .tile-card{padding:18px}
  .tile-card h3{font-size:22px}
}

/* === Градиент для primary === */
.btn-primary{
  color:#fff;
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  box-shadow:0 8px 24px rgba(147, 60, 140, .35);
}
.btn-primary:hover{
  box-shadow:0 10px 28px rgba(147, 60, 140, .45);
}

/* === Размер CTA в герое (Получить консультацию) === */
.hero-actions .btn-primary{
  width: 240px;
  height: 60px;
  padding: 0;              /* фиксированная высота + центрирование флексами из .btn */
}

/* === Кнопки в карточках: высота 60px и равномерно по ширине === */
.projects .actions{        /* уже есть, дублирую для контекста */
  display: flex;
  gap: 16px;
}
.projects .actions .btn{
  height: 60px;
  flex: 1 1 0;            /* обе кнопки одинаковой ширины */
  min-width: 0;           /* чтобы текст не ломал раскладку */
  padding: 0 18px;        /* вертикаль регулирует height */
  justify-content: center;
}

/* (опционально) на очень узких экранах оставляем прежнее поведение: в столбик */
@media (max-width: 480px){
  .projects .actions .btn{ width: 100%; flex: none; }
}

/* ===== BENEFITS ===== */
.benefits{ padding:56px 0 32px }
.benefits-panel{
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  border-radius: 36px;
  padding: 120px 60px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.benefits-title{
  color:#fff; margin:0 0 24px; text-transform:uppercase;
  font-weight: 700; letter-spacing:.04em; font-size: clamp(32px,2.6vw,50px);
}
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 28px;
}

/* карточка */
.benefit-card{
  background:#EAEAEA;
  color:#141416;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  position: relative;
  min-height: 210px;
  overflow: hidden;
}
.benefit-icon{
  width: 88px; height: 88px; object-fit: contain; display:block; margin-bottom: 8px;
}
.benefit-head{
  margin: 4px 0 8px;
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1;
  font-weight: 600;
  color: #252525;
}
.benefit-text{
  margin: 0;
  color: #252525;
  line-height: 1.4;
  font-weight: 400;
}

/* CTA карточка по центру */
.benefit-card.benefit-cta{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; overflow:hidden;
  padding-top: 28px;
}
.benefit-cta .benefit-head{ max-width: 420px; }
.benefit-cta-btn{ margin-top:14px; width: 280px; height:60px; }
.benefit-cta-art{
  position:absolute; right:0px; bottom:-96px; width:160px; height:auto; pointer-events:none;
}

/* ===== MISSION ===== */
.mission{ padding:32px 0 64px }
.mission-card{
  background:#252525;
  border-radius:28px;
  padding: 80px 60px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.mission-badge{
  margin:0 0 8px; color:#933C8C; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size: .85rem;
}
.mission-title{
  margin:0 0 16px; font-weight:700; color:#fff;
  font-size: clamp(30px, 3.2vw, 36px); line-height:1.15; letter-spacing:.02em;
  text-transform:uppercase;
}
.mission-grid{
  display:grid; gap:199px; grid-template-columns: 1fr 1fr; color:#D7D9DE; line-height:1.7;
}

/* ===== BENEFITS & MISSION: адаптив ===== */
@media (max-width: 1100px){
  .benefits-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px){
  .benefits-panel{ border-radius:24px; padding:22px 18px; }
  .benefits-grid{ grid-template-columns: 1fr; }
  .benefit-cta-art{ display:none; }
  .mission-grid{ grid-template-columns: 1fr; }
}

/* Плавающие иконки: общие правила для карточек (кроме CTA) */
.benefits-grid .benefit-card:not(.benefit-cta){
  padding-top: 140px;           /* даём место под иконку */
}
.benefits-grid .benefit-card:not(.benefit-cta) .benefit-icon{
  position: absolute;
  width: 176px; height: 176px;
  object-fit: contain;
  margin: 0;
  pointer-events: none;
}

/* 1 — слева сверху, rotate 95.89 */
.benefits-grid .benefit-card:nth-child(1) .benefit-icon{
  top: -60px; left: -20px; transform: rotate(-95.89deg);
}
/* 2 — справа сверху, без ротации */
.benefits-grid .benefit-card:nth-child(2) .benefit-icon{
  top: -28px; right: -26px;
}
/* 3 — справа сверху, rotate 48.56 */
.benefits-grid .benefit-card:nth-child(3) .benefit-icon{
  top: -52px; right: 18px; transform: rotate(-48.56deg);
}
/* 4 — справа сверху, без ротации */
.benefits-grid .benefit-card:nth-child(4) .benefit-icon{
  top: -20px; right: -12px;
  width: 143px; height: 143px;
}
/* 5 — справа сверху, rotate -18.15 */
.benefits-grid .benefit-card:nth-child(5) .benefit-icon{
  top: -50px; right: 50px; transform: rotate(18.15deg);
  width: 146px; height: 146px;
}
/* 6 — справа сверху, rotate -156.74 */
.benefits-grid .benefit-card:nth-child(6) .benefit-icon{
  top: -2px; right: -14px; transform: rotate(156.74deg);
  width: 132px; height: 132px;
}
/* 7 — справа сверху, без ротации */
.benefits-grid .benefit-card:nth-child(7) .benefit-icon{
  top: -36px; right: -6px;
  width: 166px; height: 166px;
}
/* 8 — CTA: снизу справа, rotate 48.26 */
.benefit-cta .benefit-cta-art{
  transform: rotate(-48.26deg);
}
/* 9 — справа чуть выше середины, без ротации */
.benefits-grid .benefit-card:nth-child(9) .benefit-icon{
  right: -66px; top: 42%; transform: translateY(-50%);
}

/* Мобилка: возвращаем иконки в поток и убираем доп.паддинг */
@media (max-width: 768px){
  .benefits-grid .benefit-card:not(.benefit-cta){
    padding-top: 140px !important;
  }
  .benefits-grid .benefit-card{
    padding-top: 110px !important;
  }
  .benefit-card-8 {
    background-image: url(../img/benefits/mob8.png);
    background-position: top left;
    background-repeat: no-repeat; 
    background-size: 140px auto;
  }
  .benefit-card-9 {
    background-image: url(../img/benefits/mob9.png);
    background-position: top right;
    background-repeat: no-repeat; 
    background-size: 140px auto;
  }
  .benefit-card-9 img {
    display: none;
  }
  .benefits-grid .benefit-card .benefit-icon{
    position: static; width: 88px; height: 88px; margin-bottom: 8px;
    transform: none !important;
  }
}

/* ===== Ступенька для средней колонки ===== */
.benefits-grid{
  /* величина подъёма: четверть средней высоты карточки
     при min-height:210px это ~52px. Можно подстроить при желании. */
  --benefit-raise: 52px;

  /* чтобы верхняя средняя карточка не наехала на заголовок */
  padding-top: var(--benefit-raise);
}

/* поднимаем каждую карточку в средней колонке (2,5,8, …) */
.benefits-grid > .benefit-card:nth-child(3n + 2){
  transform: translateY(calc(-1 * var(--benefit-raise)));
  will-change: transform;
}

/* на мобиле (в 1 колонку) ступенька не нужна */
@media (max-width: 768px){
  .benefits-grid{
    padding-top: 0;
  }
  .benefits-grid > .benefit-card:nth-child(3n + 2){
    transform: none;
  }
}

/* ===== FAQ ===== */
.faq{
  padding:72px 0 96px;
  position: relative;
  overflow: hidden;
}
.faq-grid{
  display:grid;
  grid-template-columns: 1fr min(720px, 62%);
  align-items:start;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.faq-title{
  margin: 0;
  font-weight: 700;
  color: #EAEAEA;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(28px, 4vw, 50px);
}
.faq-list{ width:100%; }

.faq-item{
  background:#EAEAEA;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  overflow:hidden;
  margin-bottom: 16px;
}

.faq-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: 18px 20px;
  background:#EAEAEA; border:0; cursor:pointer;
  color:#252525; font-weight:600; font-size:20px; text-align:left;
}

.faq-icon{
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  border: 1.5px solid #E8E8EE;
  color:#fff;                /* цвет иконки */
  display:grid; place-items:center;
}
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  width:18px; height:2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.faq-icon::after{ transform: rotate(90deg); }

/* состояние "открыто": плюс превращается в крест */
.faq-item.open .faq-icon::before{ transform: rotate(-45deg); }
.faq-item.open .faq-icon::after{ transform: rotate(45deg); }

/* плавное раскрытие и полное скрытие */
.faq-body{
  display:grid;
  grid-template-rows: 0fr;
  overflow:hidden;                 /* важно: режем всё содержимое */
  transition: grid-template-rows .28s ease;
  will-change: grid-template-rows;
}
.faq-item.open .faq-body{ grid-template-rows: 1fr; }

.faq-content{
  min-height:0;                    /* чтобы 0fr реально был 0 */
  overflow:hidden;
  padding: 0 20px 0;               /* в закрытом состоянии без отступов */
  opacity:0;
  transform: translateY(-4px);
  transition: padding .28s ease, opacity .28s ease, transform .28s ease;
  color:#252525; line-height:1.6;
  font-size:16px;
}
/* открытое состояние */
.faq-item.open .faq-content{
  padding: 0px 20px 18px;         /* отступы только когда открыт блок */
  opacity:1;
  transform: translateY(0);
}

/* на всякий случай убираем внешние маргины у внутренних p/ul и т.п. */
.faq-content > *{ margin:0; }
.faq-content > * + *{ margin-top:.6em; }

/* адаптив */
@media (max-width: 900px){
  .faq-grid{ grid-template-columns: 1fr; gap: 24px; }
  .faq-title{ font-size: clamp(24px, 6vw, 44px); }
}

.faq-decor{
  position: absolute;
  left: -130px;                      /* слегка за край, как на макете */
  bottom: -280px;
  width: min(520px, 45vw);          /* масштабируем от ширины экрана */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* адаптив: уменьшаем/скрываем на узких экранах */
@media (max-width: 1100px){
  .faq-decor{ left: -40px; bottom: -60px; width: 420px; }
}
@media (max-width: 900px){
  .faq-decor{ left: -50px; bottom: 0px; width: 60vw; }
}

/* ===== REVIEWS ===== */
.reviews{
  margin: 0px 20px;
  padding: 130px 0 120px;
  border-radius: 48px;
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  overflow: hidden;
}

.reviews-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; margin-bottom: 22px;
  padding: 0 8px;
}
.reviews-title{
  margin:0; color:#EAEAEA; text-transform:uppercase;
  font-weight:700; letter-spacing:.02em;
  font-size: clamp(28px, 4vw, 50px);
}
.reviews-arrows{ display:flex; gap:14px; }
.reviews-nav{
  width:44px; height:44px; border-radius:999px;
  background:transparent; border:2px solid rgba(255,255,255,.9);
  display:grid; place-items:center; cursor:pointer;
  transition: background .2s ease, opacity .2s ease, transform .12s ease;
  color:#fff;
}
.reviews-nav:hover{ background:rgba(255,255,255,.15); }
.reviews-nav:active{ transform: translateY(1px); }
.reviews-nav[disabled]{ opacity:.45; pointer-events:none; }
.reviews-nav span{
  position:relative; width:12px; height:12px; display:block;
}
.reviews-nav span::before{
  content:""; position:absolute; inset:0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg);                 /* базово — стрелка вправо */
}
.reviews-nav.prev span::before{ transform: rotate(135deg); } /* влево */

.reviews-viewport{ overflow:hidden; }
.reviews-track{
  display:flex; gap:28px;
  will-change: transform;
  transition: transform .4s ease;            /* плавное перелистывание */
  padding: 6px 8px 0;                         /* маленькие поля как на макете */
}

/* карточка отзыва */
.review-card{
  flex: 0 0 calc((100% - 56px) / 3);         /* 3 карточки на десктопе (2 gaps = 28*2 = 56) */
  background:#EAEAEA; color:#0F0F12; border-radius:32px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding:50px 40px;
}
.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:40px; }
.review-avatar{ width:70px; height:70px; border-radius:999px; object-fit:cover; }
.review-name{ font-weight:600; font-size:26px; line-height:1.1; color:#252525; }
.review-meta{ color:#252525; font-size:18px; margin-top:8px; }
.review-text{ margin:0; line-height:1.6; color:#252525; }

/* адаптив — 2 карточки / 1 карточка */
@media (max-width: 1100px){
  .review-card{ flex: 0 0 calc((100% - 28px) / 2); }
}
@media (max-width: 700px){
  .reviews{ border-radius:32px; padding: 84px 0 85px; }
}

@media (max-width: 700px){
  /* размер карточки и паддинги */
  .review-card{
    flex: 0 0 335px;   /* ширина элемента в треке */
    width: 335px;
    height: 377px;     /* учитывая box-sizing:border-box, сюда входят паддинги */
    padding: 50px 20px;
  }

  /* обрезка текста с "..." на 6 строк */
  .review-text{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;  /* количество видимых строк */
    text-overflow: ellipsis;
    margin: 0;              /* на всякий случай, чтобы не ломал высоту */
  }

  /* Фолбэк, если line-clamp не поддерживается */
  @supports not (-webkit-line-clamp: 1){
    .review-text{
      line-height: 1.6;
      max-height: calc(1.6em * 6);
      overflow: hidden;
    }
  }
}

/* ===== CONTACT ===== */
.contact{ padding:80px 0 96px; }
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start;
}
.contact-title{
  margin:0 0 20px; color:#fff; font-weight:400; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.05;
  font-size: clamp(30px, 4vw, 37px);
}
.contact-sub{ margin:0; color:#FFFFFF; max-width:560px; line-height:1.6; font-weight: 400; font-size: 16px; }

.contact-card{
  background:#F9F9FB; border:1px solid #ECECF1;
  border-radius:32px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  padding:50px 40px;
}

/* сетка полей: 2 колонки (1 на мобиле) */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.field label{
  display:block; font-weight:700; color:#0F0F12; font-size:14px; margin:0 0 8px;
}
.field .req{ color:#7B3FE4; margin-left:4px; }

.field input,
.phone-field input,
.phone-field select{
  width:100%; height:42px; border-radius:8px;
  border:1px solid #DDD; background:#fff; color:#0F0F12;
  padding:0 12px; font-size:16px; outline:none;
}
.field input:focus,
.phone-field input:focus,
.phone-field select:focus{
  border-color:#B9A8FF; box-shadow:0 0 0 3px rgba(123,63,228,.15);
}

/* телефон: селектор страны + поле */
.phone-field{ display:grid; grid-template-columns:80px 1fr; gap:10px; }
.phone-field select{ background:#F3F4F7; }

/* чекбоксы в 2 колонки */
.checks{ margin-top:14px; border:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;
}
.checks legend{ margin:12px 0 6px; font-weight:700; color:#0F0F12; }
.check{ display:flex; align-items:flex-start; gap:10px; color:#111827; }
.check input{ width:20px; height:20px; margin-top:2px; accent-color:#7B3FE4; }

/* кнопка */
.contact-submit{
  width:100%; height:48px; border-radius:16px; margin-top:32px;
  color:#fff; border:none;
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  box-shadow:0 10px 22px rgba(123,63,228,.25);
}
.contact-submit:hover{ filter:brightness(1.03); box-shadow:0 12px 26px rgba(123,63,228,.35); }
.contact-submit:active{ transform:translateY(1px); }

/* адаптив */
@media (max-width: 1000px){
  .contact-grid{ grid-template-columns:1fr; gap:24px; }
  .form-grid{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }
  .contact-card{ padding:20px; }
}

/* === Комбинированное поле Телефон (селектор страны + номер) === */
.phone-field{
  display: flex;
  align-items: center;
  gap: 0;                          /* без зазора — как один инпут */
  height: 42px;
  border: 1px solid #DDD;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;                /* скругление для детей */
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* общий hover/focus на всю «капсулу» */
.phone-field:hover{
  border-color: #C9C9D3;
  box-shadow: 0 0 0 3px rgba(123,63,228,.06);
}
.phone-field:focus-within{
  border-color: #B9A8FF;
  box-shadow: 0 0 0 3px rgba(123,63,228,.15);
}

/* внутренние контролы — без собственных рамок/тени */
.phone-field select,
.phone-field input{
  border: none;
  outline: none;
  height: 100%;
  background: transparent;
  font-size: 16px;
}

/* левая часть (страна) — фикс ширина и тонкая вертикальная разделительная линия */
.phone-field select{
  flex: 0 0 55px;                  /* можно 88–90px по вкусу */
  padding: 0 10px;
  appearance: none;                /* убираем системную рамку (современные браузеры) */
}

/* правая часть — номер */
.phone-field input{
  flex: 1 1 auto;
  padding: 0 12px;
}

/* чтобы у детей не было своей подсветки при фокусе */
.phone-field select:focus,
.phone-field input:focus{
  box-shadow: none;
}

.phone-field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

/* ===== FOOTER (новый) ===== */
.cf-footer{
  /* background:#121212; */
  /* border-top:1px solid var(--border); */
  padding:28px 0;
  color:#fff;
  font-size: 16px;
  font-weight: 400;
  background-image: url("../img/footer-shape.png");
  background-position: top left;
  background-repeat: no-repeat;
}
.footer-row{
  display:flex; align-items:flex-start;
}
.footer-brand .footer-logo{
  height:60px; width:auto; display:block;
}

/* — отступ между левой и центральной: 90px —
   — между центральной и правой: 200px — */
.footer-links{ margin-left:85px; }
.footer-right{ margin-left:200px; display:flex; align-items:flex-start; gap:100px; }

/* центральная колонка: 2 списка с интервалом 60px */
.footer-links{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:auto;
  column-gap:60px;
}
.footer-links .foot-col{ list-style:none; margin:0; padding:0; }
.footer-links a{
  display:inline-block;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}
.footer-links a:hover{ color:#7B3FE4; }

/* правая колонка: контакты */
.footer-contact{ font-style:normal; }
.footer-contact .foot-line{ margin:6px 0; color:rgba(255,255,255,.9); }
.footer-contact a{
  color:rgba(255,255,255,.9); text-decoration:none; transition:color .2s ease;
}
.footer-contact a:hover{ color:#7B3FE4; }

/* телефоны — в одну строку */
.footer-contact .phones{ display:flex; gap:16px; flex-wrap:wrap; }

/* соцсети — два круглых градиентных значка справа,
   расстояние между контактами и иконками: 100px (через gap в .footer-right) */
.footer-social{ display:flex; gap:16px; }
.soc-btn{
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  background: linear-gradient(142.08deg, #7B3FE4 12.34%, #C84AE1 89.98%);
  box-shadow: 0 10px 20px rgba(123,63,228,.25);
  transition: filter .2s ease, transform .12s ease;
}
.soc-btn:hover{ filter:brightness(.92); }
.soc-btn:active{ transform: translateY(1px); }

/* адаптив */
@media (max-width: 1200px){
  .footer-links{ margin-left:48px; }
  .footer-right{ margin-left:120px; gap:48px; }
}
@media (max-width: 900px){
  .footer-row{ flex-direction:column; gap:22px; }
  .footer-links{ margin-left:0; }
  .footer-right{ margin-left:0; gap:16px; justify-content:space-between; }
}

/* ===== PROJECT PAGE ===== */

/* hero */
.proj-hero{ padding:42px 0 28px; }
.proj-hero-grid{
  display:grid; align-items:start; gap:28px;
  grid-template-columns: 1.2fr 1fr;
}
.proj-hero-title{
  margin:0; text-transform:uppercase; color:#fff;
  font-weight:500; letter-spacing:.02em;
  line-height:1.08;
  font-size: clamp(37px, 5vw, 50px);
}
.proj-hero-sub{
  margin:6px 0 28px; color:#FFFFFF; line-height:1.55;
}
.proj-hero-actions .btn{ height:60px; }

.proj-hero-photo{
  margin:60px 0 0;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.proj-hero-photo img{
  width: 100%;
  height: 580px; /* фиксированная высота */
  object-fit: cover; /* обрезает лишнее, сохраняя пропорции */
  object-position: center; /* центрирует фото */
  display: block;
}

@media (max-width: 768px) {
  .proj-hero-photo img {
    height: 300px;
  }
}

/* features */
.proj-features{ padding:34px 0 80px; }
.proj-features-title{
  margin:0 0 70px; text-align:left;   /* на макете левее, но можно center */
  font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:#fff;
  font-size: clamp(30px, 4vw, 50px);
}

.feat-grid{
  display:grid; gap:40px 30px;
  grid-template-columns: repeat(12, 1fr);
}
.feat-card{
  background:#252525; color:#EAEAEA;
  border-radius:36px;
  padding:50px 40px 30px 40px;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.feat-card .feat-head{
  margin:0 0 57px; font-weight:600; color:#EAEAEA;
  font-size: clamp(24px, 2.6vw, 36px);
}
.feat-note{ margin:0 0 6px; color:#FFFFFF; }
.feat-list{ list-style:none; padding:0; margin: 0; }
.feat-list li{ font-size: 15px; line-height: 140%; position:relative; padding-left:18px; margin:0 0 20px 0; }
.feat-list li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#fff;
}

/* spans: 1-й ряд по 4, 2-й ряд по 6 */
.span-4{ grid-column: span 4; }
.span-6{ grid-column: span 6; }

/* CTA секция (использует .contact стили) */
.project-cta{ padding-top:52px; }

/* адаптив */
@media (max-width: 1100px){
  .proj-hero-grid{ grid-template-columns:1fr; }
  .proj-features-title{ margin:0 0 40px; }
  .feat-grid{ grid-template-columns: repeat(6, 1fr); }
  .span-4{ grid-column: span 6; }
  .span-6{ grid-column: span 6; }
  .project-cta{ padding-top: 0px; }
}
@media (max-width: 700px){
  .feat-grid{ grid-template-columns: 1fr; }
  .span-4, .span-6{ grid-column: auto; }
}

/* дополнительные span'ы */
.span-12{ grid-column: span 12; }

/* двухколоночные списки (автоматически схлопываются на мобилке) */
.feat-head.two-col{
  margin:0 0 30px;
}
.feat-list.two-col{
  columns: 2 280px;
  column-gap: 160px;
}
.feat-list.two-col li{
  break-inside: avoid;
}

/* иконка в карточке */
.feat-ico{
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  border: 1.5px solid #E8E8EE;
  color:#fff;
  display:grid; place-items:center;
  margin-bottom: 10px;
}
.feat-ico svg{ width: 26px; height: 26px; }

/* таблица программ по классам (для платформы) */
.class-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 160px;
}
.class-col h4{
  margin: 0 20px 5px;
  font-weight: 700; color:#fff;
  font-size: 18px;
}

/* адаптивные правила для новых элементов */
@media (max-width: 1100px){
  .span-12{ grid-column: span 6; }  /* тянем на всю ширину 6-колоночной сетки */
}
@media (max-width: 700px){
  .feat-list.two-col{ columns: 1; }
  .class-grid{ grid-template-columns: 1fr; }
  .span-12{ grid-column: auto; }
}

/* Разрыв колонки после элемента (для multi-column layout) */
.feat-list.two-col .col-break{
  break-after: column;                /* современно */
  -webkit-column-break-after: always; /* webkit-совместимость */
  column-break-after: always;         /* старый синтаксис */
}

/* ============ PROJECTS mobile ============ */
/* По умолчанию мобильное фото скрыто */
.tile-photo{ display:none; }

/* Мобилка: убираем фоновое изображение и показываем фото внутри карточки */
@media (max-width: 768px){
  .project-tile{
    aspect-ratio: auto;
    background: transparent;
    box-shadow: none;            /* чтобы не было "пустой" плитки */
    margin: 16px 0;
  }
  .project-tile .tile-bg{
    display: none !important;    /* фон полностью пропадает */
  }
  .tile-card{
    position: static;
    transform: none;
    margin: 0 0;
    width: min(560px, 96%);
    padding: 18px;
    transform: none !important;
  }
  .tile-photo{
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 14px;
    margin: 10px 0 12px;         /* как раз между h3 и списком */
  }
  .feat-card{
    padding:50px 20px 30px 20px;
    background-image: none !important;   /* оставляем цвет #252525 из .feat-card */
    /* опционально «обнулим» прочие параметры, если где-то заданы */
    background-position: initial !important;
    background-size: auto !important;
    background-repeat: repeat !important;
  }
  .feat-card .feat-head {
    margin:0 0 30px !important;
  }
  .feat-list{ padding:0 !important; margin: 0 !important; }
}

/* === Language Switcher === */
.lang-switch{
  position: relative;
  margin-left: 16px;
}
.lang-btn{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 12px;
  padding: 9px 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.lang-btn:hover{ border-color:#fff; }
.lang-btn:active{ transform: translateY(1px); }

.lang-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 120px;
  background: #0F0F12;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  padding: 6px;
  display: none;
  z-index: 60;
}
.lang-switch[data-open="true"] .lang-menu{ display:block; }

.lang-item{
  list-style: none;
  padding: 10px 12px;
  margin: 5px 0px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.lang-item:hover{ background: rgba(255,255,255,.06); }
.lang-item.is-active{
  background: linear-gradient(142.08deg, #933C8C 12.34%, #594090 89.98%);
  color: #fff;
}
@media (max-width: 900px){
  .lang-switch{ margin-left: auto; }
}

/* MISSION: мобильные отступы и расстояние между абзацами */
@media (max-width: 768px){
  .mission-card{
    padding: 80px 20px;     /* top/bottom 80, left/right 20 */
  }

  .mission-grid{
    grid-template-columns: 1fr;
    gap: 30px;              /* расстояние между двумя <p> */
  }

  /* чтобы gap был точным, уберём стандартные margin у p внутри */
  .mission-grid p{
    margin: 0;
  }
}

/* ===== Mobile burger ===== */
.burger{
  display:none;               /* по умолчанию спрятан (десктоп) */
  margin-left:auto;
  width:44px; height:44px;
  border-radius:12px;
  background: transparent;
  border: 2px solid rgba(255,255,255,.32);
  position:relative;
  cursor:pointer;
  transition: border-color .2s ease, transform .12s ease;
}
.burger:hover{ border-color:#fff; }
.burger:active{ transform: translateY(1px); }

/* 3 полоски */
.burger span,
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:10px; right:10px; height:2px;
  background:#fff;
  transition: transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.burger::before{ top:12px; }
.burger span{ top:50%; transform:translateY(-50%); }
.burger::after{ bottom:12px; }

/* состояние "открыто": делаем крест */
.burger[aria-expanded="true"]::before{
  top:50%; transform: translateY(-50%) rotate(45deg);
}
.burger[aria-expanded="true"]::after{
  bottom:auto; top:50%; transform: translateY(-50%) rotate(-45deg);
}
.burger[aria-expanded="true"] span{ opacity:0; }

@media (max-width: 900px){
  .burger{ display:inline-block; }
  .menu, .btn-outline{ display:none !important; } /* справа только бургер */
}

/* Панель мобильного меню */
.mobile-menu{
  position: fixed;
  top: 72px;                 /* высота .nav-wrap */
  left: 0; right: 0;
  background: rgba(14,15,18,.95);
  backdrop-filter: saturate(130%) blur(10px);
  border-top:1px solid var(--border);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s ease, opacity .24s ease;
  z-index: 49;               /* хедер = 50 */
}
.mobile-menu[data-open="true"]{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav{
  display:grid; gap: 6px;
  padding: 12px 20px 18px;
}
.mobile-nav a{
  display:block;
  padding: 14px 0;
  font-weight:600; font-size:18px;
  color: rgba(255,255,255,.95);
  text-decoration:none;
  border-bottom:1px solid var(--border);
}
.mobile-nav a:last-child{ border-bottom:0; }

/* запрет скролла фона при открытом меню (по желанию) */
body.nav-open{ overflow:hidden; }