/* ============================================================
   km-2026.css — эволюция дизайна (29.10.2026)
   Токены, герой с «было/стало» и видео, блок услуг, правило минимума.
   Не заменяет существующие стили: только дополняет.
   ============================================================ */
:root{
  --km2-bg:#1a1b3a;
  --km2-bg-2:#222448;
  --km2-surface:rgba(255,255,255,.035);
  --km2-line:rgba(244,228,161,.14);
  --km2-ink:#f4f1e8;
  --km2-muted:#b8b8d0;
  --km2-muted-2:#8a8aa4;
  --km2-gold:#d4af37;
  --km2-gold-light:#f4e4a1;
  --km2-gold-deep:#b8942e;
  --km2-r-sm:8px;
  --km2-r-md:16px;
  --km2-r-pill:999px;
  --km2-shadow-card:0 16px 48px rgba(8,8,28,.35);
  --km2-gold-grad:linear-gradient(180deg,#f4e4a1,#d4af37 60%,#b8942e);
}

/* ---------- герой ---------- */
.km2-hero{padding:72px 0 56px}
.km2-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.km2-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--km2-gold-light);opacity:.9;
  display:flex;align-items:center;gap:10px}
.km2-eyebrow::before{content:"";width:28px;height:1px;background:var(--km2-gold);opacity:.7}
.km2-hero h1{margin:16px 0 18px;font-size:clamp(26px,3.1vw,40px);line-height:1.06;letter-spacing:-.015em;
  font-family:'Unbounded',system-ui,sans-serif;color:var(--km2-ink);text-shadow:none}
.km2-hero h1 .km2-g{background:var(--km2-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
.km2-h1-sub{display:block;margin-top:10px;font-size:clamp(15px,1.6vw,20px);font-weight:500;color:var(--km2-muted);letter-spacing:.01em}
.km2-lead{color:var(--km2-muted);font-size:16px;line-height:1.65;max-width:520px;margin:0 0 24px}
.km2-lead b{color:var(--km2-ink)}
.km2-stats{display:flex;flex-wrap:wrap;gap:24px 36px;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid var(--km2-line)}
.km2-stat b{display:block;font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(24px,7vw,34px);line-height:1;
  background:var(--km2-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.km2-stat span{display:block;margin-top:8px;font-size:13px;color:var(--km2-muted-2)}
.km2-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.km2-btn{box-sizing:border-box;width:100%;max-width:100%;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:var(--km2-r-pill);
  font-size:15px;font-weight:600;text-decoration:none;transition:transform .18s ease, background .18s ease, border-color .18s ease}
.km2-btn-gold{background:var(--km2-gold-grad);color:#1a1b3a;box-shadow:0 1px 2px rgba(10,10,30,.35),0 2px 8px rgba(10,10,30,.25)}
.km2-btn-gold:hover{transform:translateY(-1px)}
.km2-btn-ghost{border:1px solid rgba(244,228,161,.35);color:var(--km2-gold-light);background:transparent}
.km2-btn-ghost:hover{border-color:var(--km2-gold);background:rgba(212,175,55,.08)}
.km2-note{margin-top:18px;font-size:13px;color:var(--km2-muted-2)}

/* рамка «было / стало» + видео */
.km2-frame{position:relative;aspect-ratio:3/4;width:100%;max-width:420px;margin-left:auto;border-radius:var(--km2-r-md);
  overflow:hidden;border:1px solid var(--km2-line);box-shadow:var(--km2-shadow-card);background:var(--km2-bg-2)}
.km2-half{position:absolute;inset:0;background-size:cover;background-position:center}
.km2-half.before{clip-path:inset(0 50% 0 0);filter:saturate(.7) brightness(.8)}
.km2-half.after{background-color:#efeae2;clip-path:inset(0 0 0 50%)}
.km2-half.after img{width:100%;height:100%;object-fit:cover;display:block}
.km2-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--km2-gold);opacity:.9}
.km2-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:var(--km2-gold-grad);display:grid;place-items:center;color:#1a1b3a;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.km2-tag{position:absolute;top:14px;padding:6px 10px;border-radius:var(--km2-r-sm);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(26,27,58,.72);color:var(--km2-ink);backdrop-filter:blur(8px)}
.km2-tag.before{left:14px}
.km2-tag.after{right:14px}
.km2-caption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:8px;
  padding:10px 14px;font-size:11px;color:var(--km2-muted);background:linear-gradient(180deg,rgba(26,27,58,0),rgba(26,27,58,.85))}
.km2-play{position:absolute;left:14px;top:56px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border-radius:var(--km2-r-pill);border:1px solid rgba(244,228,161,.35);background:rgba(26,27,58,.72);color:var(--km2-gold-light);
  font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px)}
.km2-play:hover{background:rgba(212,175,55,.14)}
.km2-switch{position:absolute;right:14px;top:56px;display:inline-flex;gap:2px;padding:3px;border-radius:var(--km2-r-pill);
  background:rgba(26,27,58,.72);border:1px solid rgba(255,255,255,.1);font-size:12px;backdrop-filter:blur(8px)}
.km2-switch span{padding:5px 10px;border-radius:var(--km2-r-pill);color:var(--km2-muted);cursor:pointer}
.km2-switch span.on{background:rgba(244,228,161,.14);color:var(--km2-gold-light);font-weight:600}

/* ---------- услуги ---------- */
.km2-services{padding:64px 0}
.km2-sec-head{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap}
.km2-sec-head h2{font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(26px,3vw,38px);line-height:1.12;margin:10px 0 0;color:var(--km2-ink)}
.km2-sec-head p{max-width:420px;color:var(--km2-muted-2);font-size:14px;line-height:1.6;margin:0}
.km2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.km2-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--km2-r-md);
  background:var(--km2-surface);border:1px solid var(--km2-line);box-shadow:none}
.km2-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.km2-ico{width:40px;height:40px;border-radius:var(--km2-r-sm);display:grid;place-items:center;color:var(--km2-gold-light);
  background:rgba(244,228,161,.08);border:1px solid rgba(244,228,161,.14)}
.km2-price{font-size:12px;color:var(--km2-gold-light);background:rgba(244,228,161,.08);padding:4px 8px;border-radius:var(--km2-r-sm);white-space:nowrap}
.km2-card h3{margin:0;font-size:17px;line-height:1.25;color:var(--km2-ink);font-weight:600}
.km2-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--km2-muted-2)}
.km2-card a{margin-top:auto;font-size:12px;color:var(--km2-gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.35);
  align-self:flex-start;padding-bottom:1px}
.km2-card a:hover{color:var(--km2-gold-light)}

/* ---------- правило минимума ---------- */
.km2-rule{margin:18px 0 0;font-size:13px;color:var(--km2-muted-2);display:flex;align-items:center;gap:8px}
.km2-rule b{color:var(--km2-gold-light);font-weight:600}

@media (max-width:900px){
  .km2-stats{gap:12px 20px}
  .km2-stat b{font-size:clamp(20px,5.6vw,28px)}
  .km2-stat span{font-size:12px}
  .km2-hero{padding:44px 0 36px}
  .km2-hero-grid{grid-template-columns:1fr;gap:28px}
  .km2-frame{margin:0 auto;max-width:360px}
  .km2-stats{gap:24px}
  .km2-stat b{font-size:28px}
  .km2-grid{grid-template-columns:1fr}
  .km2-sec-head{margin-bottom:20px}
  .km2-btn{width:100%}
  .km2-cta{flex-direction:column;align-items:stretch}
}

/* приёмка 29.10: иконки преимуществ и читаемость */
.km2-ico{width:56px;height:56px;border-radius:var(--km2-r-md)}
.trio .feat .ic.km2-ico{background:rgba(244,228,161,.08);border:1px solid rgba(244,228,161,.16);display:grid;place-items:center}
.km2-stat span,.km2-note,.km2-card p,.km2-rule{font-size:14px;line-height:1.5}
.km2-card a{font-size:13px}

/* мобильный первый экран: H1 → цена → CTA → слайдер (ТЗ §7) */
@media (max-width:900px){
  .km2-hero-copy{display:contents}
  .km2-hero-copy > .km2-eyebrow{order:1}
  .km2-hero-copy > h1{order:2}
  .km2-hero-copy > .km2-stats{order:3}
  .km2-hero-copy > .km2-cta{order:4;margin:18px 0 6px}
  .km2-hero-grid > .km2-hero-art{order:5}
  .km2-hero-copy > .km2-lead{order:6;margin-top:18px}
  .km2-hero-copy > .mp-tiles{order:7}
  .km2-hero-copy > .km2-note{order:8}
  .km2-cta .km2-btn{width:100%;justify-content:center}
  .km2-note{font-size:14px}
}

/* векторные иконки площадок (ТЗ §7 п.4) */
.mp-tiles{gap:10px}
.mp-tiles .mp-tile{width:40px;height:40px;perspective:none}
.mp-tiles .mp-tile svg{width:40px;height:40px;display:block;border-radius:11px;box-shadow:0 4px 10px rgba(0,0,0,.28)}

/* видео в герое (ТЗ §7.6) */
.km2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:2}
.km2-frame.is-playing .km2-video{opacity:1}
.km2-frame.is-playing .km2-divider,.km2-frame.is-playing .km2-handle{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.km2-video{display:none}}

.km2-tag,.km2-play,.km2-switch,.km2-caption{z-index:3}
.km2-frame.is-playing .km2-tag.before{opacity:0}

/* конструктор карточки на главной */
.km-ctor{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:22px}
.km-ctor-left{display:flex;flex-direction:column}
.km-crow{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid rgba(244,228,161,.12);font-size:15px;color:var(--km2-muted);cursor:pointer}
.km-crow input{width:18px;height:18px;accent-color:#d4af37;flex:0 0 auto}
.km-crow span{display:flex;flex-direction:column}
.km-crow small{font-size:12px;color:var(--km2-muted-2)}
.km-crow b{margin-left:auto;color:var(--km2-ink);white-space:nowrap}
.km-ctor-right{position:sticky;top:20px;align-self:start;padding:20px;border:1px solid rgba(244,228,161,.2);border-radius:16px;background:rgba(244,228,161,.05)}
.km-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--km2-muted-2);margin-bottom:14px}
.km-field input{padding:12px;border-radius:10px;border:1px solid rgba(244,228,161,.25);background:rgba(255,255,255,.06);color:var(--km2-ink);font-size:16px}
.km-total{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.km-total>div{display:flex;justify-content:space-between;font-size:15px;color:var(--km2-muted)}
.km-total b{color:var(--km2-ink)}
.km-sum{padding-top:10px;border-top:1px solid rgba(244,228,161,.2);font-size:17px}
.km-sum b{color:var(--km2-gold-light);font-size:22px}
.km-ctor .km2-btn{color:#050608;text-decoration:none;display:block;text-align:center}
.km-ctor-note{font-size:13px;color:var(--km2-muted-2);margin:12px 0 0;line-height:1.5}
.km-ctor-note a{color:var(--km2-gold)}
@media(max-width:900px){.km-ctor{grid-template-columns:1fr}.km-ctor-right{position:static}}

/* шапка: подпись под логотипом */
.km-logo-text{display:flex;flex-direction:column;line-height:1}
.km-logo-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,228,161,.55);margin-top:4px;white-space:nowrap}
@media(max-width:1180px){.km-logo-sub{display:none}}