/* ════════════════════════════════════════════════════════════════
   SkyAgent AI — Landing Design System
   File: skyagent_landing.css
   Version: v30 (2026-04-28)
   
   DESIGN TOKENS: used by landing AND shared with portal nav
   REUSABLE PRIMITIVES: .card .icon .item .badge-* .btn
   SINGLE BACKGROUND: #030712 everywhere (no section-alt)
   SEPARATORS: hr.sec-sep only (no border-top, no alternate bg)
════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   DESIGN TOKENS — single source of truth
   Переиспользуются везде: лендинг, портал, LK
════════════════════════════════════════ */
:root {
  /* Colors */
  --bg:        #030712;
  --card:      #0a1628;
  --border:    #1a2850;
  --accent:    #3b82f6;
  --accent-h:  #2563eb;
  --text:      #f1f5fa;
  --muted:     #94a2b8;
  --dim:       #475769;
  --green:     #22c55e;
  --amber:     #f59e0b;
  --red:       #f87171;

  /* Layout */
  --inner:     1280px;
  --pad-x:     52px;
  --r-card:    12px;
  --r-btn:     8px;

  /* Shadows */
  --shadow-accent: 0 6px 20px rgba(59,130,246,.35);
  --shadow-card:   0 8px 28px rgba(59,130,246,.10);

  /* Animation */
  --t: background .2s, transform .18s, box-shadow .2s, color .2s, border-color .2s, opacity .2s;
  --lift: translateY(-2px);
}

/* ════════════════════════════════════════
   RESET
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; background: var(--bg); font-family: 'Inter', sans-serif; overflow-x: hidden; color: var(--text); }

/* ════════════════════════════════════════
   LAYOUT PRIMITIVES (reusable everywhere)
════════════════════════════════════════ */
.inner   { max-width: var(--inner); margin: 0 auto; width: 100%; padding: 0 var(--pad-x); }
.section { padding: 100px 0; }
.sec-sep {
  border: none; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.12) 50%, transparent 100%);
}

/* Typography scale */
.label { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.title-xl { font-size: 40px; font-weight: 700; color: var(--text); letter-spacing: -.5px; line-height: 1.1; margin-bottom: 12px; }
.title-lg { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -.3px; line-height: 1.15; margin-bottom: 10px; }
.subtitle  { font-size: 17px; color: var(--muted); line-height: 1.65; max-width: 640px; margin-bottom: 44px; }

/* ════════════════════════════════════════
   CARD PRIMITIVE (reusable)
   Один стиль карточки для всего проекта
════════════════════════════════════════ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); transition: var(--t);
}
.card:hover {
  border-color: rgba(59,130,246,.40);
  transform: var(--lift);
  box-shadow: var(--shadow-card);
}

/* ════════════════════════════════════════
   ICON PRIMITIVE (reusable)
   Единый стиль иконки для всего проекта
════════════════════════════════════════ */
.icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.icon svg { width: 17px; height: 17px; }
.icon--blue { background: linear-gradient(135deg, #47a5fa, #1a3fba); }
.icon--red  { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.20); }
.icon--red svg { stroke: var(--red); }
.icon--blue svg { stroke: #fff; }

/* ════════════════════════════════════════
   INLINE ITEM PRIMITIVE (reusable)
   icon-left + text-right — единый паттерн
════════════════════════════════════════ */
.item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
}
.item-text {}
.item-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.item-desc  { font-size: 12px; color: var(--dim); line-height: 1.55; }

/* ════════════════════════════════════════
   BADGE PRIMITIVE
════════════════════════════════════════ */
.badge-live { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; width:fit-content; background:rgba(34,197,94,.10); color:var(--green); border:1px solid rgba(34,197,94,.25); }
.badge-soon { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; width:fit-content; background:rgba(245,158,11,.10); color:var(--amber); border:1px solid rgba(245,158,11,.20); }
.badge-blue { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.30); color:#60a5fa; letter-spacing:.04em; }

/* ════════════════════════════════════════
   BUTTON PRIMITIVES
════════════════════════════════════════ */
.btn { border:none; cursor:pointer; font-family:inherit; transition:var(--t); border-radius:var(--r-btn); font-weight:600; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 20px rgba(59,130,246,.40); }
.btn-primary:hover { background:var(--accent-h); transform:var(--lift); box-shadow:var(--shadow-accent); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--text); background:rgba(59,130,246,.08); }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  position:relative; width:100%; height:100vh; min-height:600px; overflow:hidden;
  background:linear-gradient(180deg,
    #030712 0%, #040810 12%, #07101e 24%, #0a162e 36%,
    #0e1d40 48%, #121550 58%, #1a1045 67%,
    #240c32 74%, #330d20 81%, #3e0e18 87%,
    #28090f 93%, #0d0408 100%);
}
#stars  { position:absolute; inset:0; pointer-events:none; z-index:1; }
#runway { position:absolute; bottom:0; left:0; pointer-events:none; z-index:3; }
.horizon-glow {
  position:absolute; left:0; right:0; z-index:2; pointer-events:none; height:80px; bottom:50%;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,95,20,.18) 0%, rgba(200,50,10,.06) 55%, transparent 100%);
}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; height:48px; z-index:100;
  background:rgba(3,7,18,.60); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .3s, box-shadow .3s;
}
nav.scrolled { background:rgba(3,7,18,.95); box-shadow:0 4px 24px rgba(0,0,0,.40); }
.nav-inner {
  max-width:var(--inner); margin:0 auto; width:100%;
  padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:100%; gap:12px;
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-icon { width:24px; height:24px; border-radius:6px; overflow:hidden; flex-shrink:0; transition:var(--t); }
.logo:hover .logo-icon { transform:var(--lift); box-shadow:0 4px 16px rgba(59,130,246,.50); }
.logo-icon img { width:24px; height:24px; display:block; }
.logo-name { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; }



/* Nav links */
.nav-links { display:flex; gap:20px; list-style:none; }
.nav-links a { font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; transition:var(--t); white-space:nowrap; }
.nav-links a:hover { color:var(--text); border-bottom-color:var(--accent); }

/* Nav right */
.nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-sw { display:flex; background:rgba(255,255,255,.07); border-radius:20px; padding:2px; gap:2px; }
.lb { font-size:10px; font-weight:700; padding:3px 9px; border-radius:16px; border:none; cursor:pointer; transition:var(--t); }
.lb.on  { background:var(--accent); color:#fff; }
.lb.off { background:transparent; color:var(--dim); }
.lb.off:hover { color:var(--muted); }
.btn-login { font-size:13px; padding:7px 16px; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:8px; border:none; background:none; -webkit-tap-highlight-color:transparent; }
.hamburger span { display:block; width:22px; height:2px; background:var(--muted); border-radius:2px; transition:transform .3s, opacity .3s; }

/* Mobile drawer */
.nav-drawer { visibility:hidden; opacity:0; position:fixed; inset:0; z-index:200; background:rgba(3,7,18,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .3s, visibility .3s; }
.nav-drawer.open { visibility:visible; opacity:1; }
.nav-drawer a { font-size:22px; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; transition:var(--t); }
.nav-drawer a:hover { color:var(--text); border-bottom-color:var(--accent); }
.drawer-cta { font-size:16px; padding:13px 40px; }
.close-btn { position:absolute; top:20px; right:20px; font-size:28px; color:var(--muted); background:none; border:none; cursor:pointer; line-height:1; transition:color .2s, transform .2s; }
.close-btn:hover { color:var(--text); transform:rotate(90deg); }

/* ════════════════════════════════════════
   HERO CONTENT
════════════════════════════════════════ */
.hero-content {
  position:absolute; top:50%;
  left:calc(max(0px, (100vw - 1280px) / 2) + 52px);
  transform:translateY(-52%); z-index:10; max-width:680px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; padding:5px 16px; border-radius:100px;
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.30); color:#60a5fa;
  margin-bottom:16px; animation:fadeDown .8s ease both;
}
.hero-dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; animation:blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero-h1 { margin-bottom:14px; line-height:1.04; animation:fadeUp .9s ease .1s both; }
.h1-blue  { display:block; font-size:clamp(28px,3.5vw,48px); font-weight:700; color:var(--accent); letter-spacing:-.5px; white-space:nowrap; }
.h1-white { display:block; font-size:clamp(28px,3.5vw,48px); font-weight:700; color:var(--text); letter-spacing:-.5px; white-space:nowrap; }
.hero-sub { font-size:clamp(15px,1.4vw,20px); color:var(--muted); white-space:nowrap; line-height:1.5; margin-bottom:26px; animation:fadeUp .9s ease .2s both; }
.hero-cta { font-size:15px; padding:13px 32px; display:inline-block; margin-bottom:22px; animation:fadeUp .9s ease .3s both; }
.kpis {
  display:inline-flex; background:rgba(8,15,41,.92);
  border:1px solid rgba(26,40,80,.9); border-radius:12px; overflow:hidden;
  animation:fadeUp 1s ease .45s both;
}
.kpi { padding:12px 20px; border-right:1px solid rgba(37,42,56,.7); }
.kpi:last-child { border-right:none; }
.kpi-val { font-size:22px; font-weight:700; color:var(--text); line-height:1; margin-bottom:4px; letter-spacing:-.3px; }
.kpi-lbl { font-size:13px; color:var(--dim); white-space:nowrap; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)}  to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════════
   §2 — ПЛАТФОРМА
════════════════════════════════════════ */
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.platform-card { padding:28px; display:flex; flex-direction:column; gap:10px; }
.pc-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.pc-dot { width:6px; height:6px; border-radius:50%; }
.pc-dot-g { background:var(--green); }
.pc-dot-y { background:var(--amber); }
.pc-dot-d { background:var(--dim); }
.pc-name { font-size:22px; font-weight:700; color:var(--text); }
.pc-desc { font-size:13px; color:var(--dim); line-height:1.55; }

/* ════════════════════════════════════════
   §3 — ПРОБЛЕМА → ВОЗМОЖНОСТИ
   Единый inline-паттерн для обеих колонок
════════════════════════════════════════ */
.pv-header { margin-bottom:40px; }
.pv-wrap { display:grid; grid-template-columns:1fr 1px 1fr; gap:0 48px; align-items:start; }
.pv-line { background:linear-gradient(180deg, transparent, rgba(59,130,246,.30) 20%, rgba(59,130,246,.30) 80%, transparent); align-self:stretch; margin-top:8px; border-radius:2px; }
.pv-col-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.pv-col-label--r { color:var(--red); }
.pv-col-label--b { color:var(--accent); }
.pv-col-sub { font-size:13px; color:var(--muted); margin-bottom:16px; line-height:1.5; }

/* Item list — one pattern for both columns */
.item-list { display:flex; flex-direction:column; gap:10px; }
.item-list .card { }
.item-list .item { cursor:default; }

/* ════════════════════════════════════════
   §4 — КАК ЭТО РАБОТАЕТ
   Horizontal steps + expandable panels
════════════════════════════════════════ */

/* Steps row */
.h-steps {
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-bottom:0;
}
.h-steps::before {
  content:''; position:absolute; top:20px;
  left:calc(12.5%); right:calc(12.5%);
  height:1px;
  background:linear-gradient(90deg,
    rgba(59,130,246,.20),
    rgba(59,130,246,.45) 50%,
    rgba(59,130,246,.20));
  z-index:0;
}
.h-step {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 16px;
  position:relative; z-index:1; cursor:pointer;
}
.h-step-num {
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--dim);
  margin-bottom:16px; transition:var(--t); position:relative; z-index:1;
}
.h-step.active .h-step-num {
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 0 0 4px rgba(59,130,246,.20), 0 4px 16px rgba(59,130,246,.40);
}
.h-step-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.h-step-desc  { font-size:12px; color:var(--dim); line-height:1.55; max-width:180px; }

/* Panel container */
.h-panel-wrap { position:relative; margin-top:40px; }
.h-panel-arrow {
  position:absolute; top:-9px; height:9px; width:2px;
  background:rgba(59,130,246,.50); transition:left .3s ease;
}
.h-panel {
  background:var(--card); border:1px solid rgba(59,130,246,.25);
  border-radius:14px; padding:28px;
  box-shadow:0 8px 32px rgba(59,130,246,.08); display:none;
}
.h-panel.active { display:block; }

/* Panel header — flex row: [title+sub] [badge] */
.h-panel-header {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:20px;
}
.h-panel-header--lg { margin-bottom:24px; }
.h-panel-header__title { font-size:16px; font-weight:600; color:var(--text); }
.h-panel-header__sub   { font-size:13px; color:var(--muted); margin-top:4px; }

/* ── Info notes (platform section) ── */
.info-notes { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.info-note  {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  background:rgba(59,130,246,.05); border:1px solid rgba(59,130,246,.12);
}
.info-note__bullet { font-size:11px; color:#60a5fa; flex-shrink:0; }
.info-note__text   { font-size:12px; color:var(--dim); }

/* ── Icon size variant ── */
.icon--sm        { width:32px; height:32px; }
.icon--sm svg    { width:15px; height:15px; }

/* Profile form (step 01) */
.profile-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.profile-field { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.profile-field__label { font-size:10px; font-weight:600; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.profile-field__val { font-size:14px; font-weight:500; color:var(--text); }
.profile-note { font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px; }
.profile-note::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* Modules grid (step 02) */
.modules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mod-card { background:rgba(3,7,18,.70); border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:6px; transition:var(--t); cursor:default; }
.mod-card:hover { border-color:rgba(59,130,246,.40); transform:var(--lift); }
.mod-card .icon { width:30px; height:30px; border-radius:7px; }
.mod-card .icon svg { width:14px; height:14px; }
.mod-title { font-size:13px; font-weight:600; color:var(--text); }
.mod-desc  { font-size:11px; color:var(--dim); line-height:1.45; }

/* Channels (step 03) */
.channels-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ch-card { background:rgba(3,7,18,.70); border:1px solid var(--border); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.ch-name { font-size:14px; font-weight:600; color:var(--text); }
.ch-desc { font-size:12px; color:var(--dim); line-height:1.5; }

/* Answer preview (step 04) */
.answer-preview { background:rgba(3,7,18,.70); border:1px solid var(--border); border-radius:10px; padding:20px; }
.answer-query { font-size:13px; color:var(--muted); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.answer-query strong { color:var(--text); }
.answer-body { font-size:14px; color:var(--text); line-height:1.7; margin-bottom:16px; }
.answer-body b { color:var(--accent); }
.answer-sources { display:flex; gap:8px; flex-wrap:wrap; }
.answer-src { font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.25); color:#60a5fa; }

/* ── AI Response Demo (step 04) ────────────────────────────────
   Намеренно светлая тема — имитирует реальную карточку ответа
   (как она выглядит в портале)
──────────────────────────────────────────────────────────────── */
.demo-chat      { display:flex; flex-direction:column; gap:12px; }
.demo-msg--user { display:flex; justify-content:flex-end; }
.demo-bubble    {
  background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:16px 16px 4px 16px;
  font-size:13px; font-weight:500; max-width:70%; line-height:1.5;
}

/* Answer card — light bg */
.demo-answer       { background:#fff; border-radius:12px; padding:20px; color:#111; font-size:13px; line-height:1.6; }
.demo-answer__title{ font-size:15px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.demo-answer__text { color:#334155; margin-bottom:14px; }

/* Data table */
.demo-table-wrap   { overflow-x:auto; margin-bottom:16px; }
.demo-table        { width:100%; border-collapse:collapse; font-size:12px; }
.demo-table thead tr { background:#f1f5f9; }
.demo-table th     { text-align:left; padding:8px 10px; color:#475569; font-weight:600; border-bottom:1px solid #e2e8f0; }
.demo-table td     { padding:8px 10px; border-bottom:1px solid #f1f5f9; color:#1e293b; }
.demo-table .demo-td--val { font-weight:700; color:#0f172a; }
.demo-table .demo-td--src { color:#2563eb; font-weight:500; }

/* Section blocks inside answer card */
.demo-section       { margin-bottom:10px; }
.demo-section--lg   { margin-bottom:14px; }
.demo-section__label{ font-size:12px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.demo-section__text { font-size:12px; color:#475569; }

/* Verification status */
.demo-verify-status {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:#16a34a; font-weight:500;
}

/* Open full button */
.demo-open-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:#2563eb;
  border:1px solid #bfdbfe; padding:6px 14px; border-radius:7px;
  text-decoration:none; background:#eff6ff; margin-bottom:16px;
}
.demo-open-btn:hover { background:#dbeafe; }

/* Sources list */
.demo-sources         { border-top:1px solid #f1f5f9; padding-top:12px; }
.demo-sources__label  {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:#94a3b8; text-transform:uppercase; margin-bottom:8px;
}
.demo-sources__list   { display:flex; flex-direction:column; gap:6px; }
.demo-source-item     {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border:1px solid #e2e8f0; border-radius:7px;
}
.demo-source-badge    {
  background:#2563eb; color:#fff;
  font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:4px; flex-shrink:0;
}
.demo-source-doc      { font-size:12px; font-weight:500; color:#2563eb; text-decoration:underline; }
.demo-source-page     { font-size:11px; color:#94a3b8; }

/* Footer row: thumbs + score + model */
.demo-footer { display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid #f1f5f9; }
.demo-thumb  { background:none; border:1px solid #e2e8f0; border-radius:6px; padding:4px 8px; cursor:pointer; font-size:14px; }
.demo-score  { background:#f1f5f9; border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; color:#334155; }
.demo-model  { font-size:11px; color:#94a3b8; }

/* ════════════════════════════════════════
   §5 — ТАРИФЫ
   Чистый паттерн — переиспользуем везде
════════════════════════════════════════ */
.pricing-controls { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.promo-bar {
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);
  background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.20); padding:8px 16px; border-radius:8px;
}
.promo-dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; animation:blink 2.4s ease-in-out infinite; }
.toggle-wrap { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.toggle-btn { width:40px; height:22px; border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); cursor:pointer; position:relative; transition:background .2s; }
.toggle-btn.on { background:var(--accent); border-color:var(--accent); }
.toggle-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.toggle-btn.on .toggle-thumb { transform:translateX(18px); }
.annual-label { color:var(--dim); transition:color .2s; }
.annual-label.on { color:var(--green); font-weight:600; }

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }

/* Price card */
.p-card { padding:28px; display:flex; flex-direction:column; gap:8px; position:relative; }
.p-card--pop {
  border-color:rgba(59,130,246,.50) !important;
  background:linear-gradient(160deg, #0a1628 0%, #0e1c3c 100%) !important;
  box-shadow:0 0 0 1px rgba(59,130,246,.20), 0 8px 32px rgba(59,130,246,.12) !important;
}
.pop-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; padding:3px 14px; border-radius:20px;
  background:var(--accent); color:#fff; letter-spacing:.06em; white-space:nowrap;
  box-shadow:0 2px 12px rgba(59,130,246,.50);
}
.p-name     { font-size:16px; font-weight:700; color:var(--text); }
.p-audience { font-size:12px; color:var(--dim); }
.p-divider  { height:1px; background:var(--border); border:none; margin:4px 0; }
.p-amount   { display:flex; align-items:baseline; gap:4px; }
.p-value    { font-size:28px; font-weight:700; color:var(--text); letter-spacing:-.5px; }
.p-period   { font-size:13px; color:var(--dim); }

/* ── Feature rows: чистый паттерн ── */
.p-features { display:flex; flex-direction:column; gap:7px; flex:1; }
.p-feat {
  display:flex; align-items:center; gap:8px;
  font-size:13px; line-height:1.4;
}
.p-feat--on  { color:var(--muted); }
.p-feat--off { color:var(--dim); }
.p-feat-mark {
  width:16px; flex-shrink:0;
  font-size:12px; font-weight:700; text-align:center; line-height:1;
}
.p-feat--on  .p-feat-mark { color:var(--green); }
.p-feat--off .p-feat-mark { color:var(--dim); opacity:.5; }

.p-cta { margin-top:auto; padding:11px; font-size:14px; text-align:center; }



.price-note { font-size:12px; color:var(--dim); line-height:1.7; margin-top:16px; padding:16px 20px; background:rgba(255,255,255,.02); border-radius:8px; border-left:2px solid rgba(59,130,246,.20); }

/* ════════════════════════════════════════
   §6 — О НАС
════════════════════════════════════════ */
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-p { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:16px; }
.about-p:last-child { margin-bottom:0; }
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kpi-card { padding:22px; }
.kpi-val-lg { font-size:28px; font-weight:700; color:var(--text); letter-spacing:-.5px; margin-bottom:6px; }
.kpi-lbl-sm { font-size:12px; color:var(--dim); line-height:1.4; }

/* ════════════════════════════════════════
   §7 — КОНТАКТЫ
════════════════════════════════════════ */
.contacts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tg-card { padding:32px; display:flex; flex-direction:column; gap:14px; }
.tg-icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#2aabee,#1a82d0); display:flex; align-items:center; justify-content:center; }
.tg-icon svg { width:26px; height:26px; }
.tg-title { font-size:20px; font-weight:700; color:var(--text); }
.tg-desc  { font-size:14px; color:var(--muted); line-height:1.6; }
.tg-btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:11px 22px; border-radius:8px; background:#2aabee; color:#fff; text-decoration:none; box-shadow:0 4px 16px rgba(42,171,238,.35); transition:var(--t); width:fit-content; }
.tg-btn svg { width:18px; height:18px; }
.tg-btn:hover { background:#1a82d0; transform:var(--lift); }
.form-card { padding:32px; display:flex; flex-direction:column; gap:12px; }
.form-title { font-size:20px; font-weight:700; color:var(--text); margin-bottom:4px; }
.form-input, .form-textarea { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; padding:11px 14px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color .2s; }
.form-input:focus, .form-textarea:focus { outline:none; border-color:rgba(59,130,246,.50); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--dim); }
.form-textarea { resize:vertical; min-height:100px; max-height:200px; }
.form-counter { font-size:11px; color:var(--dim); text-align:right; margin-top:-4px; }
.form-submit { padding:12px; font-size:14px; }
.form-success { display:none; font-size:14px; color:var(--green); text-align:center; padding:12px; }

/* Label modifier */
.label--center { text-align:center; }

/* About — spacing overrides */
.about-layout .title-xl { margin-bottom:12px; }
.about-layout .subtitle  { margin-bottom:24px; }

/* ════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════ */
.cta-section { padding:100px 0; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(59,130,246,.10) 0%, transparent 70%); border-top:1px solid rgba(59,130,246,.10); border-bottom:1px solid rgba(59,130,246,.10); text-align:center; }
.cta-title { font-size:40px; font-weight:700; color:var(--text); margin-bottom:14px; letter-spacing:-.5px; }
.cta-sub   { font-size:17px; color:var(--muted); margin-bottom:32px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.6; }
.cta-btn   { font-size:16px; padding:14px 40px; box-shadow:0 6px 24px rgba(59,130,246,.50); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer { background:var(--bg); border-top:1px solid rgba(255,255,255,.04); padding:20px 0; }
.footer-inner { max-width:var(--inner); margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.footer-logo-icon { width:20px; height:20px; border-radius:5px; overflow:hidden; }
.footer-logo-icon img { width:20px; height:20px; display:block; }
.footer-name { font-size:12px; font-weight:700; color:var(--text); }
.footer-copy { font-size:10px; color:var(--dim); }
.footer-links { display:flex; gap:16px; }
.footer-links a { font-size:11px; color:var(--dim); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--muted); }

/* ════════════════════════════════════════
   RESPONSIVE — TABLET 1024px
════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --pad-x: 36px; }
  .section { padding:72px 0; }
  .title-xl { font-size:32px; }
  .platform-grid { grid-template-columns:repeat(2,1fr); }
  .pv-wrap { grid-template-columns:1fr; gap:36px; }
  .pv-line { display:none; }
  .profile-fields { grid-template-columns:repeat(3,1fr); }
  .modules-grid { grid-template-columns:repeat(2,1fr); }
  .channels-grid { grid-template-columns:repeat(3,1fr); }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .about-layout { grid-template-columns:1fr; gap:40px; }
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  
  .ps { display:none; }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE 768px
════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --pad-x: 20px; }
  nav { height:56px; }
  .nav-links, .nav-right, .ps { display:none; }
  .hamburger { display:flex; }

  .section { padding:56px 0; }
  .title-xl { font-size:26px; }
  .subtitle { font-size:15px; }

  .hero-content { position:absolute; top:72px; left:20px; right:20px; transform:none; max-width:100%; }
  .h1-blue, .h1-white { font-size:34px; white-space:normal; }
  .hero-sub { font-size:15px; white-space:normal; }
  .hero-cta { width:100%; text-align:center; display:block; }
  .kpis { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .kpi { border-right:none !important; border-bottom:1px solid rgba(37,42,56,.7); }
  .kpi:nth-child(odd) { border-right:1px solid rgba(37,42,56,.7) !important; }
  .kpi:nth-child(3), .kpi:nth-child(4) { border-bottom:none; }
  .kpi-val { font-size:20px; }

  .platform-grid { grid-template-columns:1fr; }
  .profile-fields { grid-template-columns:1fr 1fr; }
  .modules-grid { grid-template-columns:1fr 1fr; }
  .channels-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .contacts-grid { grid-template-columns:1fr; }
  
  .cta-title { font-size:26px; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
  .card:hover { transform:none; }

  /* §4 — h-steps mobile */
  .h-steps { grid-template-columns:1fr 1fr; gap:16px; }
  .h-steps::before { display:none; }
  .h-panel-arrow { display:none; }
}
@media (max-width:390px) {
  .h1-blue, .h1-white { font-size:28px; }
  .profile-fields { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════
   SCROLL SNAP — каждый раздел на свой экран
════════════════════════════════════════ */
html {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}
.snap {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Hero already 100vh — just add snap */
.hero { scroll-snap-align: start; }
/* CTA banner — don't force full height */
.cta-section { scroll-snap-align: start; }

@media (max-width: 768px) {
  html { scroll-snap-type: none; }
  .snap { min-height: unset; display: block; }
}