/* =============================================================================
   IQusion — ЄДИНА ДИЗАЙН-СИСТЕМА (foundation.css)
   Замінює: tokens.css + restyle-2026.css + design-system.css (3 файли → 1).
   • Зберігає ВСІ старі токени (--c-*) — нічого не ламається.
   • Додає канонічні аліаси + НОВІ компоненти (.hero/.grid/.card).
   • НЕ дублює .btn/.container/.eyebrow/.section — ними володіє base.css.
   • Жодного !important.
   ============================================================================= */

:root{
  /* ── Старі токени (лишаються, бо від них залежать base.css і сторінки) ── */
  --c-bg-primary:#0F1A4A;--c-bg-secondary:#1E2D5C;--c-bg-tertiary:#0A1238;--c-bg-elevated:#2A3A6E;--c-bg-overlay:rgba(10,18,56,.78);
  --c-fg-primary:#FFFFFF;--c-fg-secondary:#B8C5D6;--c-fg-muted:#6B7A99;
  --c-accent-red:#F20558;--c-accent-red-hover:#FF2E73;--c-accent-blue:#4F8EF7;--c-accent-blue-hover:#6BA0FF;--c-accent-teal:#14B8A6;
  --c-glow-red:rgba(242,5,88,.35);--c-glow-blue:rgba(79,142,247,.30);--c-border:rgba(255,255,255,.08);--c-border-strong:rgba(255,255,255,.16);--c-grid-line:rgba(255,255,255,.035);
  --sec-dark:#07112a;--sec-deep:#050b1f;--sec-mid:#0a1940;
  --font-sans:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:5rem;
  --container-max:1220px;--header-h:72px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-full:9999px;
  --shadow-md:0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 20px 50px rgba(0,0,0,.55);
  --t-fast:150ms cubic-bezier(.4,0,.2,1);--t-base:280ms cubic-bezier(.4,0,.2,1);

  /* ── Канонічні аліаси (для нових компонентів і майбутньої міграції) ── */
  --bg:#050b1f; --bg-section:#07112d; --bg-section-2:#0a1435;
  --fg:#f4f7ff; --fg-muted:#b8c5d6; --fg-soft:#7f8da8;
  --accent:var(--c-accent-red); --accent-hover:var(--c-accent-red-hover);
  --accent-blue:var(--c-accent-blue); --accent-blue-2:#79a8ff;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --panel:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.035));
  --page-bg:
    radial-gradient(900px 520px at 88% 8%,rgba(79,142,247,.12),transparent 62%),
    radial-gradient(780px 520px at 6% 14%,rgba(242,5,88,.08),transparent 58%),
    linear-gradient(180deg,#050914 0%,var(--bg) 34%,#06102b 100%);
}

/* Єдиний фон-канвас на весь сайт (раніше це робив design-system.css) */
html{background:var(--bg);}
body{background:var(--page-bg);color:var(--fg);}
.site-main{position:relative;z-index:1;background:transparent;}

/* Мітки секцій — синій mono-кік (раніше restyle-2026.css) */
.site-main .eyebrow{color:var(--accent-blue);}
.site-main .eyebrow::before{content:none;}

/* ───────────────── НОВІ КОМПОНЕНТИ ───────────────── */

/* Hero — одна мова для всіх внутрішніх сторінок (раніше 12 різних) */
.hero{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding:calc(var(--header-h) + var(--space-2xl)) 0 var(--space-3xl);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(620px 360px at 78% 22%,rgba(79,142,247,.16),transparent 66%),
    radial-gradient(560px 360px at 18% 8%,rgba(242,5,88,.12),transparent 64%),
    linear-gradient(180deg,#071026 0%,#0b1434 58%,#07112d 100%);
}
.hero__inner{max-width:900px;margin-inline:auto;}
.hero h1{
  margin:0 auto; color:var(--fg); font-weight:850;
  font-size:clamp(2.2rem,4.1vw,3.6rem); line-height:1.08; text-wrap:balance; max-width:18ch;
}
.hero p{font-size:clamp(1.05rem,1.35vw,1.2rem);color:#dce7fb;max-width:62ch;margin:var(--space-lg) auto 0;line-height:1.6;}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;font-family:var(--font-mono);font-size:.78rem;color:var(--fg-soft);margin-bottom:var(--space-md);}
.crumbs a:hover{color:var(--accent-blue-2);}

/* Сітка — один інструмент розкладки */
.grid{display:grid;gap:var(--space-lg);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

/* Картка — ОДНА поверхня (раніше ~40 варіантів *26-card) */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-lg);transition:border-color var(--t-fast),transform var(--t-fast);}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.card h3{margin-bottom:var(--space-sm);color:var(--fg);}
.card p{color:var(--fg-muted);font-size:1rem;}
.card__num{font-family:var(--font-mono);color:var(--accent-blue);font-size:.85rem;display:block;margin-bottom:.4rem;}

/* Модифікатори фону секцій (замість 928 унікальних класів) */
.section--alt{background:linear-gradient(180deg,var(--bg-section) 0%,var(--bg-section-2) 100%);}
.section--cta{padding-block:var(--space-3xl);}

/* CTA-смуга */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl);}
.cta-band strong{display:block;font-size:1.15rem;color:var(--fg);}
.cta-band span{color:var(--fg-soft);font-size:.92rem;}

/* Список «інші …» — однакові плитки-посилання */
.tile-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md);}
.tile-link{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color var(--t-fast);}
.tile-link:hover{border-color:var(--accent-blue-2);}
.tile-link svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-blue);}
.tile-link .arr{margin-left:auto;color:var(--fg-soft);}

/* Bullet-перелік у секції */
.feature-bullets{list-style:none;display:grid;gap:.6rem;margin-top:var(--space-md);}
.feature-bullets li{position:relative;padding-left:1.4rem;color:var(--fg-muted);}
.feature-bullets li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent);}

/* Статистика */
.stat__num{font-size:clamp(2rem,3.5vw,3rem);font-weight:850;color:var(--fg);font-family:var(--font-mono);}
.stat__label{color:var(--fg-soft);font-size:.9rem;}

/* утиліти */
.text-center{text-align:center;}
.text-center .btn{margin:.4rem;}

/* Брендова фонова лінія (раніше restyle-2026.css; div.iq-ambient у header.php) */
.iq-ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('../../img/hero-lines.svg') no-repeat right center / cover;
  opacity:.10;
  -webkit-mask-image:linear-gradient(90deg,transparent 48%,#000 96%);
          mask-image:linear-gradient(90deg,transparent 48%,#000 96%);
}

/* іконка в картці + смуга статистики (для індекс-сторінок) */
.card__ico{display:inline-flex;margin-bottom:.6rem;}
.card__ico svg{width:28px;height:28px;color:var(--accent-blue);}
.card .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;}
.card .tags span{font-family:var(--font-mono);font-size:.7rem;color:var(--fg-soft);border:1px solid var(--line);border-radius:var(--radius-full);padding:.15rem .55rem;}
.card .more{display:inline-block;margin-top:.8rem;color:var(--accent-blue-2);font-size:.85rem;}
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-xl);}
@media (max-width:600px){.stats-strip{grid-template-columns:1fr;}}
.btn-secondary{border:1px solid var(--line-strong);color:var(--fg);background:transparent;}
.btn-secondary:hover{border-color:var(--accent-blue-2);}

/* Статичні сторінки (hotline/privacy/contacts) кладуть .container.page всередині
   .site-main — даємо їм верхній відступ під фіксовану шапку (як у .hero). */
.site-main > .page{padding-top:calc(var(--header-h, 72px) + var(--space-2xl, 3rem));padding-bottom:var(--space-3xl, 5rem);}