/* ═══════════════════════════════════════════════════════════════════════════
   Страница /seo/geo-audit-sajta/ — стили на дизайн-системе webit.ru
   Font Bitum + акцент #ee5e3e приходят из app.css. Всё под неймспейсом .geo.

   ЕДИНИЦЫ (важно для совместимости и мобильного):
   • Крупная раскладка (контейнер, паддинг секций, гриды, размеры шрифтов) —
     токены во vw с мобильными переопределениями (fluid, как на сайте).
   • Внутренние отступы, паддинги карточек, маркеры списков — в rem/em/px,
     чтобы НЕ схлопывались на мобильном (vw@1440 на 390px ужимается в ~3.7×).
   • Хайрлайны — 1px. Без :has() и accent-color (нет в Safari ≤15.2).
   ═══════════════════════════════════════════════════════════════════════════ */
.geo{
  --accent:#ee5e3e; --accent-hover:#cb5035; --accent-active:#cd3412; --accent-50:rgba(238,94,62,.5);
  --ink:#000; --inverse:#fff; --white:#fff; --page-bg:#f5f5f5; --form-surface:#e5e5e5; --muted:#9c9c9c;
  --fs-h1:3.33333vw; --lh-h1:4.02778vw; --fs-h2:2.5vw; --fs-h3:1.66667vw;
  --fs-lead:1.25vw; --fs-text:1.11111vw; --lh-text:1.52778vw; --fs-small:0.90278vw;
  --container:86.11111vw; --pad:5.55556vw; --gap:1.66667vw; --gap-lg:3.47222vw;
  --r-card:10px; --r-pill:50px; --r-input:5px;
  color:var(--ink);
}
.geo *{ box-sizing:border-box; }

/* ── контейнер / секции ── */
.geo .container{ width:var(--container); max-width:100%; margin:0 auto; }
.geo .section{ padding:var(--pad) 0; }
.geo .section--gray{ background:var(--page-bg); }
.geo .section--blue{ background:var(--ink); }
.geo .section-title{ font-size:var(--fs-h2); line-height:1.15; font-weight:400; margin:.75rem 0 0; max-width:52vw; }
.geo .section-sub{ font-size:var(--fs-lead); line-height:1.4; color:var(--ink); opacity:.7; margin:1rem 0 0; max-width:52vw; }
.geo .tag{ display:inline-block; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); border:1px solid var(--accent); border-radius:var(--r-pill); padding:.35em 1em; }

/* ── кнопки ── */
.geo .btn{ display:inline-block; border-radius:var(--r-pill); padding:0.97222vw 3.33333vw;
  font-size:var(--fs-text); line-height:1.38889vw; background:var(--accent); color:var(--inverse);
  transition:all .3s ease; border:1px solid var(--accent); cursor:pointer; text-align:center; }
.geo .btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--inverse); }
.geo .btn-outline{ background:transparent; color:var(--accent); }
.geo .btn-outline:hover{ background:var(--accent); color:var(--inverse); }

/* ── HERO ── */
.geo .hero{ padding:var(--pad) 0; }
.geo .hero-inner{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--gap-lg); align-items:center; }
.geo .hero-badge{ display:inline-block; font-size:var(--fs-small); color:var(--accent);
  border:1px solid var(--accent); border-radius:var(--r-pill); padding:.4em 1em; margin-bottom:1.25rem; }
.geo .hero h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:400; margin:0 0 1.25rem; }
.geo .hero h1 em{ font-style:normal; color:var(--accent); }
.geo .hero-lead{ font-size:var(--fs-lead); line-height:1.45; margin:0 0 1rem; max-width:40vw; }
.geo .logos-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem;
  font-size:var(--fs-small); color:var(--muted); }
.geo .logo-badge{ border:1px solid var(--muted); border-radius:8px; padding:.35em .9em; color:var(--ink); }
.geo .hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.geo .stat-card{ border:1px solid var(--ink); border-radius:var(--r-card); padding:1.5rem 1.25rem; transition:all .3s ease; }
.geo .stat-card:hover{ background:var(--accent); border-color:transparent; color:var(--inverse); }
.geo .stat-num{ font-size:2.22222vw; font-weight:700; line-height:1.1; }
.geo .stat-num span{ color:var(--accent); }
.geo .stat-card:hover .stat-num span{ color:var(--inverse); }
.geo .stat-label{ font-size:var(--fs-small); line-height:1.35; opacity:.75; margin-top:.5rem; }

/* ── GETS ── */
.geo .gets-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-lg); margin-top:2.5rem; }
.geo .get-card{ border:1px solid var(--muted); border-radius:var(--r-card); padding:1.75rem 1.5rem;
  transition:all .3s ease; background:var(--inverse); }
.geo .get-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.geo .get-icon{ width:5rem; height:5rem; margin-bottom:1rem; }
.geo .get-icon svg{ width:100%; height:100%; }
.geo .get-icon .svg-hover{ opacity:0; transition:opacity .3s ease; }
.geo .get-card:hover .svg-hover{ opacity:1; }
.geo .get-title{ font-size:var(--fs-h3); font-weight:700; line-height:1.2; margin-bottom:.625rem; }
.geo .get-desc{ font-size:var(--fs-text); line-height:var(--lh-text); opacity:.8; }

/* ── AUDIT (аккордеон) ── */
.geo .audit-block{ border-top:1px solid var(--muted); }
.geo .audit-block:last-child{ border-bottom:1px solid var(--muted); }
.geo .audit-header{ display:flex; align-items:center; gap:1rem; padding:1.5rem 0; cursor:pointer; }
.geo .audit-num{ flex:none; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--accent);
  color:var(--inverse); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.125rem; }
.geo .audit-title{ font-size:var(--fs-h3); font-weight:700; flex:1; }
.geo .audit-arrow{ flex:none; font-size:1.5rem; color:var(--accent); transition:transform .3s ease; }
.geo .audit-header[aria-expanded="true"] .audit-arrow{ transform:rotate(180deg); }
.geo .audit-body{ display:none; padding:0 0 1.5rem 3.5rem; }
.geo .audit-body.open{ display:block; }
.geo .audit-items{ margin:0; padding-left:1.25rem; }
.geo .audit-items li{ font-size:var(--fs-text); line-height:var(--lh-text); margin-bottom:.5rem; }
.geo .ai-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.geo .ai-chip{ font-size:var(--fs-small); border:1px solid var(--ink); border-radius:var(--r-pill); padding:.35em .9em; }

/* ── PLANS ── */
.geo .plans-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-lg); max-width:59vw; margin:2.5rem auto 0; }
.geo .plan-card{ position:relative; border:1px solid var(--ink); border-radius:var(--r-card);
  padding:2.5rem 1.875rem; display:flex; flex-direction:column; transition:all .3s ease; background:var(--inverse); }
.geo .plan-card.popular{ border-color:var(--accent); border-width:2px; }
.geo .plan-badge{ position:absolute; top:-.75rem; left:1.875rem; background:var(--accent); color:var(--inverse);
  font-size:var(--fs-small); border-radius:var(--r-pill); padding:.25em .9em; }
.geo .plan-name{ font-size:var(--fs-h3); font-weight:700; }
.geo .plan-price{ font-size:2.22222vw; font-weight:700; color:var(--accent); margin:.5rem 0 1rem; }
.geo .plan-items{ margin:0 0 1.5rem; padding:0; list-style:none; flex:1; }
.geo .plan-items li{ position:relative; font-size:var(--fs-text); line-height:1.4; padding-left:1.6rem; margin-bottom:.625rem; }
.geo .plan-items li::before{ content:''; position:absolute; left:.15rem; top:.4em; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.geo .plan-btn{ display:inline-block; text-align:center; border-radius:var(--r-pill); padding:.85em 2em;
  border:1px solid var(--accent); color:var(--accent); font-size:var(--fs-text); transition:all .3s ease; }
.geo .plan-btn:hover{ background:var(--accent); color:var(--inverse); }
.geo .plan-card.popular .plan-btn{ background:var(--accent); color:var(--inverse); }
.geo .plan-card.popular .plan-btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }

/* ── STAGES ── */
.geo .stages{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg) 3.47222vw; margin-top:2.5rem; }
.geo .stage{ display:grid; grid-template-columns:auto 1fr; gap:1rem; }
.geo .stage-num{ font-size:2.22222vw; font-weight:700; color:var(--accent); line-height:1; }
.geo .stage-title{ font-size:var(--fs-h3); font-weight:700; margin-bottom:.375rem; }
.geo .stage-desc{ font-size:var(--fs-text); line-height:var(--lh-text); opacity:.8; }

/* ── DATA-DRIVEN ── */
.geo .dd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-lg); margin-top:2.5rem; }
.geo .dd-card{ border-left:3px solid var(--accent); padding:.5rem 0 .5rem 1.5rem; }
.geo .dd-title{ font-size:var(--fs-h3); font-weight:700; margin-bottom:.5rem; }
.geo .dd-desc{ font-size:var(--fs-text); line-height:var(--lh-text); opacity:.8; }

/* ── ACHIEVEMENTS (тёмный баннер) ── */
/* На тёмной подложке красим белым все вложенные элементы (глобальное *{color:#000}). */
.geo .section--blue,
.geo .section--blue *{ color:var(--inverse); }
.geo .section--blue .tag{ border-color:rgba(255,255,255,.25); }
.geo .ach-head{ text-align:center; margin-bottom:2.5rem; }
.geo .ach-head .tag{ margin-bottom:1rem; }
.geo .section--blue .section-title{ max-width:none; margin:0 auto; }
.geo .ach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-lg); margin-top:2.5rem; }
.geo .ach-card{ text-align:center; color:var(--inverse); }
.geo .ach-num{ font-size:2.5vw; font-weight:700; }
.geo .ach-num em{ font-style:normal; color:var(--accent); }
.geo .ach-label{ font-size:var(--fs-small); line-height:1.4; opacity:.7; margin-top:.5rem; }

/* ── RELATED ── */
.geo .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-lg); margin-top:2.5rem; }
.geo .related-card{ border:1px solid var(--muted); border-radius:var(--r-card); padding:1.5rem; transition:all .3s ease; }
.geo .related-card:hover{ border-color:var(--accent); }
.geo .related-title{ font-size:var(--fs-h3); font-weight:700; margin-bottom:.625rem; }
.geo .related-desc{ font-size:var(--fs-text); line-height:var(--lh-text); opacity:.8; margin-bottom:1rem; }
.geo .related-link{ color:var(--accent); text-decoration:underline; text-underline-position:under; }
.geo .related-link:hover{ color:var(--accent-active); }

/* ── FORM ── */
.geo .form-inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:0; border-radius:var(--r-card); overflow:hidden; }
.geo .form-left,
.geo .form-left *{ color:var(--inverse); }
.geo .form-left{ background:var(--accent); padding:2.5rem 2rem; }
.geo .form-left h2{ font-size:var(--fs-h2); font-weight:700; margin:.75rem 0 1rem; }
.geo .form-left .tag{ color:var(--inverse); border-color:rgba(255,255,255,.4); }
.geo .form-lead{ font-size:var(--fs-text); line-height:var(--lh-text); opacity:.9; margin-bottom:1.5rem; }
.geo .form-contact-name{ font-weight:700; font-size:var(--fs-lead); }
.geo .form-contact-role{ font-size:var(--fs-small); opacity:.85; margin-bottom:.75rem; }
.geo .form-contact a{ color:var(--inverse); display:block; text-decoration:none; }
.geo .form-contact a:hover{ text-decoration:underline; }
.geo .form-right{ background:var(--form-surface); padding:2.5rem 2rem; }

/* ── FAQ ── */
.geo .faq-list{ margin-top:2rem; }
.geo .faq-item{ border-bottom:1px solid var(--muted); }
.geo .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; cursor:pointer; font-size:var(--fs-h3); font-weight:700; }
.geo .faq-icon{ flex:none; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1; transition:transform .3s ease; }
.geo .faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }
.geo .faq-a{ display:none; padding:0 0 1.25rem; font-size:var(--fs-text); line-height:var(--lh-text); opacity:.85; max-width:64vw; }
.geo .faq-a.open{ display:block; }

/* ── поля формы (поверх боевого .base-input) ── */
.geo .geo-form__row{ margin-bottom:1rem; }
.geo .geo-form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.geo .geo-form__textarea{ min-height:6.5rem; resize:vertical; }
.geo .geo-form__checks-label{ font-size:var(--fs-small); opacity:.7; margin:.5rem 0; }
.geo .geo-form__checks{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }

/* Кастомный чекбокс-чип без :has() и accent-color (совместим с Safari ≤15.2):
   реальный input скрыт, визуал — на соседнем span, состояние через input:checked + span. */
.geo .geo-check{ display:inline-block; cursor:pointer; }
.geo .geo-check input{ position:absolute; opacity:0; width:0; height:0; }
.geo .geo-check span{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--fs-small);
  background:var(--inverse); border:1px solid var(--muted); border-radius:var(--r-pill);
  padding:.5em .9em; transition:all .2s ease; white-space:nowrap; }
.geo .geo-check span::before{ content:''; flex:none; width:1.05em; height:1.05em; border:1px solid var(--muted);
  border-radius:.25em; background:var(--inverse) no-repeat center; background-size:.75em; }
.geo .geo-check input:checked + span{ border-color:var(--accent); color:var(--accent); }
.geo .geo-check input:checked + span::before{ background-color:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.3 8 10.5 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.geo .geo-check input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.geo .geo-form__bottom{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:.75rem; }
.geo .geo-form__consent{ font-size:var(--fs-small); opacity:.85; flex:1; min-width:14rem; }
.geo .geo-form__ok{ text-align:center; padding:2.5rem 1rem; }
.geo .geo-form__ok-title{ font-size:var(--fs-h3); font-weight:700; color:var(--accent); margin-bottom:.5rem; }
.geo .form-right .errortext,.geo .form-right .notetext{ display:block; margin-bottom:1rem; color:var(--accent); font-size:var(--fs-text); }

/* ═══════════════════════ МОБАЙЛ (база 375) ═══════════════════════ */
@media (max-width:620px){
  .geo{ --fs-h1:8.53333vw; --lh-h1:10.13333vw; --fs-h2:6.93333vw; --fs-h3:5.06667vw;
    --fs-lead:4.26667vw; --fs-text:4.26667vw; --lh-text:5.86667vw; --fs-small:3.46667vw;
    --container:100%;  /* как у сайта: 100% + поля 20px из app.css .container */
    --pad:10.66667vw; --gap:4.26667vw; --gap-lg:6.4vw; }
  .geo .section-title,.geo .section-sub,.geo .hero-lead,.geo .faq-a{ max-width:100%; }
  .geo .hero{ padding-top:25vw; }  /* очищаем фикс-шапку (75px при body padding-top ~15px) */
  .geo .hero-inner{ grid-template-columns:1fr; gap:2rem; }
  /* кнопки: паддинг и line-height как у боевой .btn сайта на мобильном */
  .geo .btn{ line-height:5.33333vw; padding:3.73333vw 12.8vw; }
  .geo .hero .btn{ display:block; width:100%; }
  .geo .hero-stats{ grid-template-columns:1fr 1fr; }
  .geo .stat-num,.geo .plan-price,.geo .stage-num,.geo .ach-num{ font-size:8vw; }
  .geo .gets-grid,.geo .related-grid,.geo .dd-grid,.geo .plans-grid,.geo .stages,.geo .ach-grid,.geo .form-inner{ grid-template-columns:1fr; }
  .geo .plans-grid{ max-width:100%; }
  .geo .get-icon{ width:4.5rem; height:4.5rem; }
  .geo .audit-body{ padding-left:0; }
  .geo .form-left,.geo .form-right{ padding:2rem 1.5rem; }
  .geo .geo-form__row--2{ grid-template-columns:1fr; }
  .geo .geo-form__textarea{ min-height:8rem; }
}