/* ==========================================================================
   theVPN Store Sites — Design System v3 ("Apple · Liquid Glass")
   --------------------------------------------------------------------------
   • Язык Apple: системный шрифт SF Pro (Inter как запасной), нейтрали Apple,
     капсульные кнопки, крупная плотная типографика, много воздуха.
   • Liquid Glass: полупрозрачный материал с размытием и насыщенностью,
     бликом по верхней кромке и тонким светлым контуром (навигация-капсула,
     карточки, карточка приложения, вторичные кнопки, чипы).
   • Никаких градиентов-заливок: акцент стора — сплошной цвет. Легаси
     «primary→secondary» градиенты схлопываются в сплошной акцент, потому что
     --color-secondary/--color-accent = акцент.
   • 6 шаблонов (ключи прежние, без миграции БД):
     aurora=Liquid · daylight=Daylight · minimal=Minimal · midnight=Midnight ·
     graphite=Graphite · neon=Vivid
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root[data-ds] {
  --ds-accent: var(--color-primary, #0071e3);
  --ds-accent-ink: #ffffff;
  --ds-accent-soft: color-mix(in srgb, var(--ds-accent) 14%, transparent);
  --ds-accent-line: color-mix(in srgb, var(--ds-accent) 34%, transparent);
  --ds-accent-hover: color-mix(in srgb, var(--ds-accent) 88%, #ffffff);
  --ds-accent-2: var(--ds-accent);

  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ds-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --ds-r-sm: 12px; --ds-r: 16px; --ds-r-lg: 22px; --ds-r-xl: 30px; --ds-r-pill: 980px;

  --ds-container: 1120px;
  --ds-section-y: clamp(64px, 9vw, 120px);
  --ds-ease: cubic-bezier(.25, .1, .25, 1);
  --ds-spring: cubic-bezier(.32, .72, 0, 1);

  --ds-blur: blur(26px) saturate(180%);
  --ds-ambient: 1;             /* интенсивность фоновой подсветки под стеклом */
}

/* Тёмная (по умолчанию) */
:root[data-ds][data-theme="dark"], :root[data-ds]:not([data-theme]) {
  color-scheme: dark;
  --ds-bg: #000000;
  --ds-bg-2: #0b0b0d;
  --ds-surface: #1c1c1e;
  --ds-surface-2: #2c2c2e;
  --ds-fill: rgb(118 118 128 / .24);
  --ds-border: rgb(255 255 255 / .09);
  --ds-border-strong: rgb(255 255 255 / .16);
  --ds-text: #f5f5f7;
  --ds-text-2: #a1a1a6;
  --ds-text-3: #6e6e73;

  --ds-glass: rgb(30 30 32 / .52);
  --ds-glass-strong: rgb(30 30 32 / .72);
  --ds-glass-edge: rgb(255 255 255 / .14);
  --ds-glass-hi: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(255 255 255 / .03);
  --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 42%);
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --ds-shadow: 0 12px 40px -16px rgb(0 0 0 / .7);
  --ds-shadow-lg: 0 30px 80px -30px rgb(0 0 0 / .85);
}
/* Светлая */
:root[data-ds][data-theme="light"] {
  color-scheme: light;
  --ds-bg: #fbfbfd;
  --ds-bg-2: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-surface-2: #f5f5f7;
  --ds-fill: rgb(118 118 128 / .12);
  --ds-border: rgb(0 0 0 / .08);
  --ds-border-strong: rgb(0 0 0 / .14);
  --ds-text: #1d1d1f;
  --ds-text-2: #6e6e73;
  --ds-text-3: #86868b;

  --ds-glass: rgb(255 255 255 / .58);
  --ds-glass-strong: rgb(255 255 255 / .78);
  --ds-glass-edge: rgb(255 255 255 / .85);
  --ds-glass-hi: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 .5px rgb(0 0 0 / .05);
  --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 45%);
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --ds-shadow: 0 12px 40px -18px rgb(0 0 0 / .18);
  --ds-shadow-lg: 0 30px 80px -34px rgb(0 0 0 / .28);
}

/* ---------- 2. Шаблоны ---------- */
/* Liquid (aurora) — базовый: стекло поверх мягкой подсветки акцентом */
:root[data-ds-template="aurora"] { --ds-ambient: 1; }
/* Daylight — светлее и воздушнее, большие радиусы */
:root[data-ds-template="daylight"] { --ds-r: 18px; --ds-r-lg: 26px; --ds-r-xl: 34px; --ds-ambient: 1.15; }
:root[data-ds-template="daylight"][data-theme="light"] { --ds-bg: #f5f5f7; --ds-bg-2: #ffffff; }
/* Minimal — плоско, без подсветки, стекло только у навигации */
:root[data-ds-template="minimal"] { --ds-ambient: 0; --ds-r-lg: 18px; --ds-r-xl: 24px; }
/* Midnight — глубокий чёрный, подсветка только сверху (как страницы событий Apple) */
:root[data-ds-template="midnight"] { --ds-ambient: .8; }
:root[data-ds-template="midnight"][data-theme="dark"], :root[data-ds-template="midnight"]:not([data-theme]) {
  --ds-bg: #000000; --ds-bg-2: #000000; --ds-surface: #161617; --ds-surface-2: #232325;
}
/* Graphite — монохром: никакого цвета в фоне, главная кнопка нейтральная */
:root[data-ds-template="graphite"] { --ds-ambient: 0; --ds-r: 14px; --ds-r-lg: 18px; --ds-r-xl: 24px; }
/* Vivid (neon) — крупнее типографика, заголовок в цвет бренда, сплошные цвета */
:root[data-ds-template="neon"] { --ds-ambient: 1.3; }

/* ---------- 3. Мост легаси-переменных → токены ----------
   Специфичность (0,3,0) выше сгенерированного theme.css стора (0,2,0). */
:root[data-ds][data-theme], :root[data-ds]:not([data-theme]) {
  --bg-primary: var(--ds-bg);
  --bg-secondary: var(--ds-bg-2);
  --bg-tertiary: var(--ds-surface-2);
  --bg-card: var(--ds-surface);
  --bg-glass: var(--ds-glass);
  --bg-hover: var(--ds-surface-2);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-2);
  --text-tertiary: var(--ds-text-3);
  --text-muted: var(--ds-text-3);
  --border-color: var(--ds-border);
  --border-hover: var(--ds-border-strong);
  /* сплошной акцент: любые «primary→secondary» градиенты становятся заливкой одним цветом */
  --color-secondary: var(--ds-accent);
  --color-accent: var(--ds-accent);
  --gradient-primary: linear-gradient(var(--ds-accent), var(--ds-accent));
  --gradient-hero: linear-gradient(var(--ds-accent), var(--ds-accent));
  --background: var(--ds-bg);
  --border-radius: var(--ds-r-lg);
  --radius-md: var(--ds-r-sm); --radius-lg: var(--ds-r); --radius-xl: var(--ds-r-lg); --radius-2xl: var(--ds-r-xl);
  --shadow-sm: var(--ds-shadow-sm); --shadow-md: var(--ds-shadow); --shadow-lg: var(--ds-shadow-lg); --shadow-xl: var(--ds-shadow-lg);
  --glow-primary: none; --glow-accent: none;
}

/* ---------- 4. База + фоновая подсветка под стеклом ---------- */
html[data-ds] { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ds-bg) !important; }
html[data-ds] body {
  background: transparent !important;
  color: var(--ds-text);
  font-family: var(--ds-font) !important;
  font-size: 17px; line-height: 1.52; letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Мягкий «свет» за стеклом: сплошной цвет бренда, размытый — без многоцветных градиентов */
html[data-ds] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: calc(var(--ds-ambient) * .9);
  background:
    radial-gradient(42vmax 32vmax at 78% -6%, color-mix(in srgb, var(--ds-accent) 22%, transparent), transparent 70%),
    radial-gradient(36vmax 28vmax at 8% 38%, color-mix(in srgb, var(--ds-accent) 10%, transparent), transparent 70%);
}
:root[data-ds-template="midnight"] body::before {
  background: radial-gradient(60vmax 30vmax at 50% -8%, color-mix(in srgb, var(--ds-accent) 26%, transparent), transparent 70%);
}
:root[data-ds][data-theme="light"] body::before { opacity: calc(var(--ds-ambient) * .75); }

html[data-ds] ::selection { background: var(--ds-accent-soft); color: var(--ds-text); }
html[data-ds] :focus-visible { outline: 3px solid var(--ds-accent-line); outline-offset: 2px; border-radius: 10px; }
html[data-ds] h1, html[data-ds] h2, html[data-ds] h3, html[data-ds] h4, html[data-ds] .heading-theme {
  font-family: var(--ds-font-display); color: var(--ds-text);
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
html[data-ds] h1 { font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; }
html[data-ds] h2 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
html[data-ds] h3 { font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; }
html[data-ds] a { text-underline-offset: 3px; }
html[data-ds] .container { max-width: var(--ds-container); }
html[data-ds] main > section, html[data-ds] main section.py-20, html[data-ds] main section.py-16 {
  padding-top: var(--ds-section-y); padding-bottom: var(--ds-section-y);
}
@media (prefers-reduced-motion: reduce) {
  html[data-ds] *, html[data-ds] *::before, html[data-ds] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 5. Liquid Glass: материал ---------- */
html[data-ds] .glass, html[data-ds] .theme-card, html[data-ds] .card-theme, html[data-ds] .feature-card, html[data-ds] .ds-glass {
  background: var(--ds-glass-sheen), var(--ds-glass) !important;
  border: 1px solid var(--ds-glass-edge) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-glass-hi), var(--ds-shadow) !important;
  backdrop-filter: var(--ds-blur) !important; -webkit-backdrop-filter: var(--ds-blur) !important;
}
/* Без поддержки backdrop-filter — плотная подложка */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ds] .glass, html[data-ds] .theme-card, html[data-ds] .card-theme, html[data-ds] .feature-card, html[data-ds] .ds-glass,
  html[data-ds] .navbar-theme { background: var(--ds-surface) !important; }
}
/* Minimal / Graphite — плоские поверхности (стекло только у навигации) */
:root[data-ds-template="minimal"] :is(.glass, .theme-card, .card-theme, .feature-card),
:root[data-ds-template="graphite"] :is(.glass, .theme-card, .card-theme, .feature-card) {
  background: var(--ds-surface) !important; border-color: var(--ds-border) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root[data-ds-template="minimal"][data-theme="light"] :is(.glass, .theme-card, .card-theme, .feature-card) { background: var(--ds-bg-2) !important; border-color: transparent !important; }

html[data-ds] .hover-lift, html[data-ds] .hover-scale { transition: transform .45s var(--ds-spring), box-shadow .3s var(--ds-ease), border-color .3s; }
html[data-ds] .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--ds-glass-hi), var(--ds-shadow-lg) !important; }
html[data-ds] .hover-scale:hover { transform: scale(1.012); }

/* ---------- 6. Семантические классы легаси-разметки ---------- */
html[data-ds] .bg-theme-primary { background: transparent !important; }
html[data-ds] .bg-theme-secondary { background: color-mix(in srgb, var(--ds-bg-2) 70%, transparent) !important; }
html[data-ds] .text-theme-primary, html[data-ds] .text-optimized-primary { color: var(--ds-text) !important; }
html[data-ds] .text-theme-secondary, html[data-ds] .text-optimized-secondary { color: var(--ds-text-2) !important; }
html[data-ds] .text-theme-tertiary { color: var(--ds-text-3) !important; }
html[data-ds] .text-theme-accent { color: var(--ds-accent) !important; }
html[data-ds] .border-theme { border-color: var(--ds-border) !important; }
html[data-ds] .link-theme { color: var(--ds-accent) !important; text-decoration: none; }
html[data-ds] .link-theme:hover { text-decoration: underline; }

/* Страховка: tailwind-градиенты фиолетовой гаммы из старой разметки → сплошной акцент */
html[data-ds] [class*="bg-gradient-to-"]:is([class*="from-purple"], [class*="from-violet"], [class*="from-indigo"], [class*="from-fuchsia"], [class*="from-pink"], [class*="to-purple"], [class*="to-violet"], [class*="to-indigo"]) {
  background-image: none !important; background-color: var(--ds-accent) !important;
}

/* ---------- 7. Кнопки (капсулы Apple) ---------- */
html[data-ds] .btn-theme-primary, html[data-ds] .btn-theme-secondary, html[data-ds] .btn-telegram,
html[data-ds] .btn-hero-primary, html[data-ds] .btn-hero-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .72rem 1.35rem !important;
  border-radius: var(--ds-r-pill) !important;
  font-weight: 500 !important; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em;
  transition: background-color .25s var(--ds-ease), transform .35s var(--ds-spring), box-shadow .25s, opacity .2s;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  background-image: none !important;
}
html[data-ds] .btn-theme-primary, html[data-ds] .btn-hero-primary {
  background: var(--ds-accent) !important; color: var(--ds-accent-ink) !important;
  border: 0 !important; box-shadow: none !important;
}
html[data-ds] .btn-theme-primary:hover, html[data-ds] .btn-hero-primary:hover { background: var(--ds-accent-hover) !important; }
/* вторичная — стеклянная капсула */
html[data-ds] .btn-theme-secondary, html[data-ds] .btn-hero-secondary {
  background: var(--ds-glass-sheen), var(--ds-glass) !important; color: var(--ds-text) !important;
  border: 1px solid var(--ds-glass-edge) !important; box-shadow: var(--ds-glass-hi), var(--ds-shadow-sm) !important;
  backdrop-filter: var(--ds-blur); -webkit-backdrop-filter: var(--ds-blur);
}
html[data-ds] .btn-theme-secondary:hover, html[data-ds] .btn-hero-secondary:hover { background: var(--ds-glass-sheen), var(--ds-glass-strong) !important; }
html[data-ds] .btn-telegram { background: #2aabee !important; color: #fff !important; border: 0 !important; }
html[data-ds] .btn-telegram:hover { background: #229ed9 !important; }
html[data-ds] :is(.btn-theme-primary, .btn-theme-secondary, .btn-telegram, .btn-hero-primary, .btn-hero-secondary):active { transform: scale(.97); }
html[data-ds] :is(.btn-theme-primary, .btn-theme-secondary):disabled { opacity: .45; cursor: default; transform: none; }
/* Graphite: главная кнопка — чёрная/белая капсула */
:root[data-ds-template="graphite"] :is(.btn-theme-primary, .btn-hero-primary) { background: var(--ds-text) !important; color: var(--ds-bg) !important; }
:root[data-ds-template="graphite"] :is(.btn-theme-primary, .btn-hero-primary):hover { background: color-mix(in srgb, var(--ds-text) 82%, var(--ds-bg)) !important; }

/* Иконки-плитки в карточках фич — как иконки настроек iOS */
html[data-ds] .feature-icon-wrapper, html[data-ds] .feature-icon-inner {
  background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important;
  border-radius: 14px !important; box-shadow: none !important; background-image: none !important;
}
html[data-ds] .feature-icon-wrapper i, html[data-ds] .feature-icon-inner i { color: var(--ds-accent) !important; }
:root[data-ds-template="graphite"] :is(.feature-icon-wrapper, .feature-icon-inner) { background: var(--ds-fill) !important; }
:root[data-ds-template="graphite"] :is(.feature-icon-wrapper, .feature-icon-inner) i { color: var(--ds-text) !important; }

/* ---------- 8. Формы (поля iOS) ---------- */
html[data-ds] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-ds] select, html[data-ds] textarea {
  background: var(--ds-fill); color: var(--ds-text);
  border: 1px solid transparent; border-radius: var(--ds-r-sm);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
html[data-ds][data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-ds][data-theme="light"] select, html[data-ds][data-theme="light"] textarea { background: #fff; border-color: var(--ds-border-strong); }
html[data-ds] input::placeholder, html[data-ds] textarea::placeholder { color: var(--ds-text-3); }
html[data-ds] input:focus, html[data-ds] select:focus, html[data-ds] textarea:focus {
  outline: none; border-color: var(--ds-accent) !important; box-shadow: 0 0 0 4px var(--ds-accent-soft);
}
html[data-ds] input[type=checkbox], html[data-ds] input[type=radio] { accent-color: var(--ds-accent); }

/* ---------- 9. Навигация — плавающая стеклянная капсула ---------- */
html[data-ds] .navbar-theme {
  top: 10px !important; left: 12px !important; right: 12px !important;
  max-width: calc(var(--ds-container) + 24px); margin: 0 auto;
  border-radius: 22px !important;
  background: var(--ds-glass-sheen), var(--ds-glass-strong) !important;
  border: 1px solid var(--ds-glass-edge) !important;
  box-shadow: var(--ds-glass-hi), var(--ds-shadow) !important;
  backdrop-filter: var(--ds-blur) !important; -webkit-backdrop-filter: var(--ds-blur) !important;
}
html[data-ds] .navbar-theme > .container { padding-left: 14px; padding-right: 10px; }
html[data-ds] .navbar-theme-link { color: var(--ds-text-2) !important; font-weight: 500; border-radius: var(--ds-r-pill); transition: color .2s, background .2s; }
html[data-ds] .navbar-theme-link:hover, html[data-ds] .navbar-theme-link.active { color: var(--ds-text) !important; background: var(--ds-fill) !important; }
html[data-ds] .navbar-theme-link i { opacity: .7; }
html[data-ds] .navbar-theme .mobile-menu { border-top: 1px solid var(--ds-border); }
@media (max-width: 767px) {
  html[data-ds] .navbar-theme { top: 8px !important; left: 8px !important; right: 8px !important; border-radius: 20px !important; }
}

/* Футер */
html[data-ds] footer { background: var(--ds-bg-2) !important; border-top: 1px solid var(--ds-border) !important; font-size: .9rem; }
html[data-ds] .footer-theme-link { color: var(--ds-text-2) !important; transition: color .15s; }
html[data-ds] .footer-theme-link:hover { color: var(--ds-text) !important; }

html[data-ds] .animate-fade-in-up { animation-duration: .6s !important; animation-timing-function: var(--ds-spring) !important; }

/* Прайсинг: сегменты, FAQ */
html[data-ds] .period-btn {
  background: var(--ds-glass-sheen), var(--ds-glass) !important; border: 1px solid var(--ds-glass-edge) !important;
  box-shadow: var(--ds-glass-hi) !important; border-radius: var(--ds-r) !important;
  backdrop-filter: var(--ds-blur); -webkit-backdrop-filter: var(--ds-blur);
}
html[data-ds] .period-btn.active, html[data-ds] .period-btn[aria-pressed="true"] {
  border-color: var(--ds-accent) !important; box-shadow: var(--ds-glass-hi), 0 0 0 3px var(--ds-accent-soft) !important;
}
html[data-ds] details, html[data-ds] .faq-item { border-radius: var(--ds-r) !important; }

/* Вкладки кабинета — сегменты-капсулы */
html[data-ds] .tab-btn { border-radius: var(--ds-r-pill) !important; margin: 8px 2px; padding: .55rem 1.1rem !important; border-bottom: 0 !important; color: var(--ds-text-2) !important; }
html[data-ds] .tab-btn:hover { background: var(--ds-fill) !important; color: var(--ds-text) !important; }
html[data-ds] .tab-btn.active { background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; }
:root[data-ds-template="graphite"] .tab-btn.active { background: var(--ds-fill) !important; color: var(--ds-text) !important; }

/* ---------- 10. Hero ---------- */
html[data-ds] .ds-hero { position: relative; overflow: hidden; padding: clamp(112px, 15vw, 176px) 0 clamp(56px, 8vw, 104px); background: transparent; }
html[data-ds] .ds-hero::before { display: none; }
html[data-ds] .ds-hero__inner { position: relative; max-width: var(--ds-container); margin: 0 auto; padding: 0 20px; display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { html[data-ds] .ds-hero__inner { grid-template-columns: 1.1fr .9fr; } }
html[data-ds] .ds-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .85rem; border-radius: var(--ds-r-pill);
  background: var(--ds-glass-sheen), var(--ds-glass); color: var(--ds-text-2);
  border: 1px solid var(--ds-glass-edge); box-shadow: var(--ds-glass-hi);
  backdrop-filter: var(--ds-blur); -webkit-backdrop-filter: var(--ds-blur);
  font-size: .82rem; font-weight: 500; letter-spacing: -0.005em;
}
html[data-ds] .ds-eyebrow i { color: var(--ds-accent); }
html[data-ds] .ds-hero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 1.1rem 0 1.1rem; text-wrap: balance; }
html[data-ds] .ds-hero h1 .ds-accent { color: var(--ds-accent); }
html[data-ds] .ds-hero__lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; color: var(--ds-text-2); max-width: 34rem; text-wrap: pretty; }
html[data-ds] .ds-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
html[data-ds] .ds-hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.9rem; color: var(--ds-text-3); font-size: .9rem; }
html[data-ds] .ds-hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
html[data-ds] .ds-hero__meta i { color: var(--ds-text-2); }
html[data-ds] .ds-logo-mark { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ds-border); background: var(--ds-surface); }
html[data-ds] .ds-logo-mark img { width: 100%; height: 100%; object-fit: cover; }

/* Карточка «приложение» в hero — главное стекло страницы */
html[data-ds] .ds-app-card {
  background: var(--ds-glass-sheen), var(--ds-glass); border: 1px solid var(--ds-glass-edge); border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-glass-hi), var(--ds-shadow-lg); padding: 24px; max-width: 420px; margin-left: auto; width: 100%;
  backdrop-filter: var(--ds-blur); -webkit-backdrop-filter: var(--ds-blur);
}
html[data-ds] .ds-app-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-ds] .ds-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: #30d158; }
html[data-ds][data-theme="light"] .ds-status { color: #248a3d; }
html[data-ds] .ds-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); }
/* Кнопка подключения — стеклянная «капля»: сплошной акцент + нейтральный блик сверху */
html[data-ds] .ds-connect {
  margin: 24px auto; width: 136px; height: 136px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ds-accent-ink); font-size: 2.3rem;
  background: linear-gradient(180deg, rgb(255 255 255 / .28), rgb(255 255 255 / 0) 50%), var(--ds-accent);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .45), inset 0 -8px 16px rgb(0 0 0 / .12),
              0 0 0 10px var(--ds-accent-soft), 0 24px 48px -20px color-mix(in srgb, var(--ds-accent) 70%, #000);
}
html[data-ds] .ds-app-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
html[data-ds] .ds-app-card__stat { background: var(--ds-fill); border: 0; border-radius: var(--ds-r); padding: 12px 8px; text-align: center; }
html[data-ds] .ds-app-card__stat i { display: block; font-size: 1.15rem; margin: 2px auto 6px; color: var(--ds-text-2); }
html[data-ds] .ds-app-card__stat b { display: block; color: var(--ds-text); font-size: .95rem; font-weight: 600; }
html[data-ds] .ds-app-card__stat small { display: block; color: var(--ds-text-3); font-size: .72rem; }

/* Секционные заголовки */
html[data-ds] section h2.heading-theme { font-size: clamp(1.9rem, 3.8vw, 3rem) !important; font-weight: 700; }
html[data-ds] section h2.heading-theme + p { font-size: 1.12rem; max-width: 40rem; margin-left: auto; margin-right: auto; color: var(--ds-text-2); }

/* ---------- 11. Характер шаблонов ---------- */
/* Minimal — центрированный типографский hero без макета */
:root[data-ds-template="minimal"] .ds-hero__inner { grid-template-columns: 1fr !important; max-width: 880px; text-align: center; }
:root[data-ds-template="minimal"] .ds-hero__inner > div:last-child { display: none; }
:root[data-ds-template="minimal"] .ds-hero__inner .flex.items-center.gap-3,
:root[data-ds-template="minimal"] .ds-hero__cta, :root[data-ds-template="minimal"] .ds-hero__meta { justify-content: center; }
:root[data-ds-template="minimal"] .ds-hero__lead { margin: 0 auto; }
:root[data-ds-template="minimal"] .ds-hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
:root[data-ds-template="minimal"] .bg-theme-secondary { background: transparent !important; border-top: 1px solid var(--ds-border); }

/* Graphite — акцент только в деталях */
:root[data-ds-template="graphite"] .ds-hero h1 .ds-accent { color: var(--ds-text-2); }
:root[data-ds-template="graphite"] .ds-connect {
  background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 50%), var(--ds-surface-2);
  color: var(--ds-text); box-shadow: inset 0 1px 1px rgb(255 255 255 / .2), 0 0 0 1px var(--ds-border-strong), 0 0 0 10px var(--ds-fill);
}

/* Midnight — крупный заголовок, стекло темнее */
:root[data-ds-template="midnight"] .ds-hero h1 { font-size: clamp(2.8rem, 6.6vw, 4.9rem); }

/* Vivid (neon) — заголовок целиком в цвет бренда, увеличенная типографика, яркие иконки */
:root[data-ds-template="neon"] .ds-hero h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); letter-spacing: -0.035em; }
:root[data-ds-template="neon"] .ds-hero h1 .ds-accent { color: var(--ds-accent); }
:root[data-ds-template="neon"] :is(.feature-icon-wrapper, .feature-icon-inner) { background: var(--ds-accent) !important; }
:root[data-ds-template="neon"] :is(.feature-icon-wrapper, .feature-icon-inner) i { color: #fff !important; }

@media (max-width: 640px) {
  html[data-ds] .ds-hero__cta a { flex: 1 1 100%; }
  html[data-ds] .ds-app-card { margin: 0 auto; }
  html[data-ds] .glass.p-8, html[data-ds] .theme-card.p-8 { padding: 1.5rem !important; }
  html[data-ds] .ds-hero__inner > div[aria-hidden="true"] { display: none; }
  html[data-ds] .ds-hero { padding-top: 104px; }
  html[data-ds] body { font-size: 16px; }
}

/* ---------- 12. Типографика документов ---------- */
html[data-ds] .legal-document { max-width: 820px; margin-left: auto; margin-right: auto; }
html[data-ds] .prose, html[data-ds] .legal-document { font-size: 1.02rem; line-height: 1.7; color: var(--ds-text-2); }
html[data-ds] .prose :where(h1, h2, h3, h4), html[data-ds] .legal-document :where(h1, h2, h3, h4) {
  color: var(--ds-text); font-weight: 700; line-height: 1.25; margin: 2em 0 .6em;
}
html[data-ds] .prose h1, html[data-ds] .legal-document h1 { font-size: 2rem; margin-top: 0; }
html[data-ds] .prose h2, html[data-ds] .legal-document h2 { font-size: 1.45rem; padding-top: 1rem; border-top: 1px solid var(--ds-border); }
html[data-ds] .prose h3, html[data-ds] .legal-document h3 { font-size: 1.15rem; }
html[data-ds] .prose p, html[data-ds] .legal-document p { margin: 0 0 1em; }
html[data-ds] .prose > p:first-child > strong:only-child { display: block; font-size: 1.5rem; color: var(--ds-text); margin-bottom: .25em; letter-spacing: -0.015em; }
html[data-ds] .prose strong, html[data-ds] .legal-document strong { color: var(--ds-text); font-weight: 600; }
html[data-ds] .prose :where(ul, ol), html[data-ds] .legal-document :where(ul, ol) { padding-left: 1.4em; margin: 0 0 1.1em; }
html[data-ds] .prose ul, html[data-ds] .legal-document ul { list-style: disc; }
html[data-ds] .prose ol, html[data-ds] .legal-document ol { list-style: decimal; }
html[data-ds] .prose li, html[data-ds] .legal-document li { margin: .3em 0; }
html[data-ds] .prose li::marker, html[data-ds] .legal-document li::marker { color: var(--ds-text-3); }
html[data-ds] .prose a, html[data-ds] .legal-document a { color: var(--ds-accent); text-decoration: underline; text-decoration-color: var(--ds-accent-line); }
html[data-ds] .prose em, html[data-ds] .legal-document em { color: var(--ds-text-3); }
html[data-ds] .prose table, html[data-ds] .legal-document table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
html[data-ds] .prose :where(th, td), html[data-ds] .legal-document :where(th, td) { border: 1px solid var(--ds-border); padding: .5em .75em; text-align: left; }
html[data-ds] .prose br + br { display: none; }

/* утилиты для бывших tailwind-градиентов */
html[data-ds] .ds-accent-bg { background: var(--ds-accent) !important; color: #fff !important; }
html[data-ds] .ds-accent-soft-bg { background: var(--ds-accent-soft) !important; border-color: var(--ds-accent-line) !important; }