/* ═══════════════════════════════════════════════════════════
   Grande Capiteza — grande-capi.icu
   Дизайн-токены в :root. Секции ниже повторяют макет Figma.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Зелёная палитра */
  --g-950: #032a22;
  --g-900: #04382d;
  --g-800: #065a45;
  --g-700: #0a6b52;
  --lime:  #7ea63a;

  /* Акценты */
  --green:    #0a8f6b;   /* кнопки «Registracija» */
  --green-h:  #077a5b;
  --yellow:   #ffc418;   /* CTA в hero */
  --yellow-h: #eab000;

  /* Нейтральные */
  --text:     #111214;
  --muted:    #4b4f52;
  --bg:       #ffffff;
  --bg-soft:  #f2f2f2;
  --card:     #f4f4f4;
  --border:   #e2e4e6;
  --error:    #e53935;

  /* Типографика */
  --f-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* Раскладка */
  --w:      1200px;
  --pad:    24px;
  --r-card: 14px;
  --r-btn:  8px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);

  /* Градиенты */
  /* Замерено пипеткой по рендеру Figma (Section.png): база #005042 + оливковое пятно слева */
  --grad-hero: radial-gradient(56% 66% at 14% 50%, #3a7033 0%, rgba(46,104,56,.6) 32%, rgba(0,80,66,0) 70%), #005042;
  --grad-band: linear-gradient(100deg, #015a4a 0%, #076a50 42%, #3f7c33 78%, #66933a 100%);
  --grad-head: linear-gradient(90deg, #0a4e3f 0%, #0e7053 50%, #0a4a3d 100%);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-head); margin: 0 0 .55em; line-height: 1.18; font-weight: 800; }
p { margin: 0 0 1em; }
button { font-family: inherit; }

.wrap    { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 78px 0; }
.section--soft { background: var(--bg-soft); }
.section--band { background: var(--grad-band); color: #fff; }
.h2      { font-size: 38px; text-align: center; margin-bottom: 42px; }
.h2--left{ text-align: left; }
.lead    { color: var(--muted); }
.center  { text-align: center; }

/* Двухколоночная сетка */
.cols       { display: flex; gap: 46px; align-items: center; }
.cols > *   { flex: 1 1 0; min-width: 0; }
.cols--top  { align-items: flex-start; }

/* ═══════════ HEADER ═══════════ */
.hd {
  position: sticky; top: 0; z-index: 600;
  padding: 8px 12px 0;
}
.hd-bar {
  max-width: 1660px; margin: 0 auto;
  background: var(--grad-head);
  border-radius: 10px;
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.hd-logo {
  font-family: var(--f-head); font-weight: 800; font-size: 17px;
  letter-spacing: .06em; color: #fff; text-transform: uppercase;
}
.hd-btn {
  border: 1px solid rgba(255,255,255,.85); background: transparent; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 22px; border-radius: var(--r-btn); cursor: pointer;
  transition: background .15s, color .15s;
}
.hd-btn:hover { background: #fff; color: var(--g-800); }

/* ═══════════ КНОПКИ ═══════════ */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-align: center;
  font-family: var(--f-head); font-weight: 700;
  border-radius: var(--r-btn); transition: background .15s;
}
.btn--yellow { background: var(--yellow); color: #1a1a1a; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; padding: 15px 34px; }
.btn--yellow:hover { background: var(--yellow-h); }
.btn--green  { background: var(--green); color: #fff; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; padding: 14px 34px; }
.btn--green:hover { background: var(--green-h); }
.btn-row { text-align: center; margin-top: 34px; }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative; margin-top: -56px; padding: 130px 0 0;
  background: var(--grad-hero);
  color: #fff; overflow: hidden;
  min-height: max(620px, 45vw);
  display: flex; justify-content: center;
}
.hero-inner { position: relative; z-index: 3; max-width: 620px; text-align: center; padding: 0 var(--pad) 40px; }
.hero h1 { font-size: clamp(30px, 3.3vw, 64px); line-height: 1.08; margin-bottom: 26px; }
.hero p  { font-size: 15px; color: rgba(255,255,255,.92); max-width: 430px; margin: 0 auto 34px; }
.hero-robot {
  position: absolute; left: -2vw; bottom: 0; width: 27vw; max-width: 520px;
  z-index: 2; pointer-events: none;
  /* у PNG свечение обрезано рамкой — растушёвываем края, иначе виден прямоугольник */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%),
                      linear-gradient(to right,  transparent 0, #000 5%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%),
              linear-gradient(to right,  transparent 0, #000 5%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.hero-phone {
  position: absolute; right: 0; bottom: 0; width: 32.3vw; max-width: 660px;
  z-index: 2; pointer-events: none;
}

/* ═══════════ ЛОГОТИПЫ КЛИЕНТОВ ═══════════ */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.logo-card {
  background: #fff; border-radius: 10px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 14px 18px;
}
.logo-card img { max-height: 46px; max-width: 82%; width: auto; }
.logo-card--dark { background: #2f2f2f; }

/* ═══════════ КАЛЬКУЛЯТОР ═══════════ */
.calc {
  background: var(--grad-band); border-radius: var(--r-card);
  padding: 26px 30px 30px; color: #fff;
}
.calc-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.calc-lbl { font-size: 11.5px; color: rgba(255,255,255,.9); margin-bottom: 7px; display: block; }
.calc-input-wrap { position: relative; width: 190px; }
.calc-input {
  width: 100%; height: 40px; border: 0; border-radius: 7px; background: #fff;
  padding: 0 34px 0 14px; font-family: var(--f-head); font-weight: 600; font-size: 15px; color: var(--text);
  outline: none;
}
.calc-cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #555; }
.calc-out {
  min-width: 205px; height: 44px; border-radius: 7px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--f-head); font-weight: 700; font-size: 21px;
}
.calc-days { font-family: var(--f-head); font-weight: 700; font-size: 15px; margin: 22px 0 12px; }
.calc-range { -webkit-appearance: none; appearance: none; width: 60%; max-width: 420px; height: 6px; border-radius: 4px; background: #fff; outline: none; }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); cursor: pointer; border: 0; }
.calc-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); cursor: pointer; border: 0; }

/* ═══════════ ФОРМА ═══════════ */
.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1 1 0; min-width: 0; }
.form-field { margin-bottom: 12px; }
.form-input {
  width: 100%; height: 46px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 0 16px; font-family: var(--f-body); font-size: 14px; outline: none;
  transition: border-color .15s;
}
.form-input::placeholder { color: #9aa0a4; }
.form-input:focus { border-color: var(--green); }
.form-input.is-error { border-color: var(--error); }
.form-phone {
  display: flex; align-items: center; height: 46px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden;
}
.form-phone:focus-within { border-color: var(--green); }
.form-phone.is-error { border-color: var(--error); }
.form-phone-cc { display: flex; align-items: center; gap: 7px; padding: 0 12px; flex-shrink: 0; }
.form-phone-cc b { font-size: 14px; font-weight: 700; }
.form-phone input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; padding: 0 10px 0 0; font-family: var(--f-body); font-size: 14px; }
.form-err { font-size: 11px; color: var(--error); margin-top: 4px; padding-left: 4px; }
.form-submit {
  width: 100%; height: 46px; border: 0; border-radius: var(--r-btn);
  background: var(--green); color: #fff; cursor: pointer;
  font-family: var(--f-head); font-weight: 700; font-size: 14px; transition: background .15s;
}
.form-submit:hover:not(:disabled) { background: var(--green-h); }
.form-submit:disabled { background: #8d9a95; cursor: not-allowed; }
.form-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }

/* ═══════════ КАРТОЧКИ ═══════════ */
.card {
  background: var(--card); border-radius: var(--r-card); padding: 22px 24px;
}
.card--white { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.card-stack { display: flex; flex-direction: column; gap: 16px; }

/* Карточка с 3D-иконкой (иконка выступает сверху справа) */
.card-ico { position: relative; padding-top: 46px; }
.card-ico img { position: absolute; top: -34px; right: 18px; width: 96px; }
.card-ico h3 { font-size: 17px; margin-bottom: 8px; }
.card-ico p  { font-size: 13px; color: var(--muted); margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-ico { margin-top: 52px; }

/* Пункты со списком заголовок+текст */
.feat { margin-bottom: 26px; }
.feat h3 { font-size: 17px; margin-bottom: 8px; }
.feat p  { font-size: 13.5px; color: var(--muted); margin: 0; }
.section--band .feat p { color: rgba(255,255,255,.85); }

/* ═══════════ ТАБЛИЦА ═══════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; word-wrap: break-word; }
.tbl td { padding: 13px 18px; vertical-align: middle; }
.tbl td:first-child { font-weight: 700; width: 260px; }
.tbl tr:nth-child(odd) { background: var(--bg-soft); }

/* ═══════════ ОТЗЫВЫ ═══════════ */
.rev {
  border: 2px solid var(--green); border-radius: var(--r-card);
  padding: 34px 30px; text-align: center;
}
.rev h2 { font-size: 30px; margin-bottom: 18px; }
.rev-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.rev-score { font-family: var(--f-head); font-weight: 800; font-size: 24px; color: var(--green); }
.rev-stars { color: var(--yellow); font-size: 17px; letter-spacing: 1px; }

/* ═══════════ ПОПАП (выключен по умолчанию, см. index.html) ═══════════ */
.pop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pop-box     { background: #fff; border-radius: var(--r-card); max-width: 430px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); position: relative; }
.pop-x       { position: absolute; top: 6px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #fff; z-index: 2; }
.pop-head    { background: var(--grad-band); color: #fff; padding: 18px 22px; font-family: var(--f-head); font-weight: 800; font-size: 19px; border-radius: var(--r-card) var(--r-card) 0 0; }
.pop-body    { padding: 20px 22px; }
@media (max-width: 560px) {
  .pop-overlay { align-items: flex-end; padding: 0; }
  .pop-box { max-width: 100%; border-radius: var(--r-card) var(--r-card) 0 0; }
}

/* ═══════════ ФУТЕР ═══════════ */
.ft { position: relative; background: var(--grad-band); color: #fff; overflow: hidden; padding: 56px 0 34px; }
.ft-top { display: flex; gap: 60px; align-items: flex-start; position: relative; z-index: 2; }
.ft-brand { flex: 0 0 260px; }
.ft-brand-name { font-family: var(--f-head); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: .02em; }
.ft-brand-sub  { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 6px; }
.ft-soc { display: flex; gap: 12px; margin-top: 22px; }
.ft-soc a { width: 34px; height: 34px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ft-soc img { width: 17px; height: 17px; }
.ft-links { flex: 1 1 auto; max-width: 520px; }
.ft-links-row { display: flex; justify-content: center; gap: 60px; padding: 12px 0; }
.ft-links-row + .ft-links-row { border-top: 1px solid rgba(255,255,255,.28); }
.ft-links a { font-size: 13.5px; }
.ft-links a:hover { text-decoration: underline; }
.ft-robot {
  position: absolute; right: -60px; top: 10px; width: 320px; z-index: 1; opacity: .95; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%),
                      linear-gradient(to right,  transparent 0, #000 5%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%),
              linear-gradient(to right,  transparent 0, #000 5%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.ft-legal { position: relative; z-index: 2; margin-top: 48px; }
.ft-legal p { font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.8); margin-bottom: 14px; }

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width: 1100px) {
  .hero-inner { max-width: 480px; }
}
@media (max-width: 900px) {
  .section { padding: 56px 0; }
  .h2 { font-size: 28px; margin-bottom: 30px; }
  .cols { flex-direction: column; gap: 30px; align-items: stretch; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-ico { margin-top: 46px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 0; padding-top: 96px; }
  .hero-inner { padding-bottom: 265px; max-width: 100%; }
  .hero-robot { width: 40vw; left: -5vw; bottom: 6px; }
  .hero-phone { width: 62vw; right: -4vw; bottom: 0; }
  .ft-top { flex-direction: column; gap: 30px; }
  .ft-links { max-width: 100%; }
  .ft-links-row { justify-content: flex-start; gap: 30px; }
  .ft-robot { display: none; }
  .tbl td:first-child { width: 42%; }
}
@media (max-width: 560px) {
  :root { --pad: 16px; }
  .hero h1 { font-size: 30px; }
  .h2 { font-size: 23px; }
  .rev h2 { font-size: 21px; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 0; }
  .calc { padding: 20px 18px 24px; }
  .calc-input-wrap, .calc-out { width: 100%; }
  .calc-range { width: 100%; }
  .card-ico img { width: 76px; top: -28px; right: 12px; }
  .tbl td { padding: 10px 12px; font-size: 12.5px; }
  .hd-bar { padding: 0 12px; height: 44px; }
  .hd-logo { font-size: 13px; }
  .hd-btn { padding: 7px 13px; font-size: 10px; }
}