/* Generated by scripts/build-landing-css.sh — edit the sources, not this file. */
/* Сфера — self-hosted webfonts (single source; copied to landing/admin by scripts/sync-tokens.sh).
   Built from google/fonts (OFL, see /fonts/LICENSE-*.txt) with fontTools:
   - Golos Text: variable wght 400–900, subset Latin + Cyrillic.
   - Noto Serif Display: static instances at wdth=70 (condensed), subset Latin + Cyrillic. */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/golos-text-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif Display Cond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-serif-display-cond-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif Display Cond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-serif-display-cond-400-italic.woff2') format('woff2');
}

/* Wordmark «Сфера» */
@font-face {
  font-family: 'Noto Serif Display Cond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/noto-serif-display-cond-500.woff2') format('woff2');
}
/* Сфера — Color tokens (single source)
   Brand palette (Pantone TCX):
     Scorpio Venus   — 19-3632 Petunia        #4F3466  (main)
     Aquarius Rising — 17-3834 Dahlia Purple  #7E6EAC
     Pisces Moon     — 16-4030 Hydrangea      #849BCC
     Libra Sun       — 14-3911 Purple Heather #BAB8D3

   Contrast (WCAG): white text is fine on Petunia (10.4:1) and the darker violets;
   Dahlia only for large text / buttons on its own (4.46:1); Hydrangea and Heather are
   decorative / light surfaces only — never put white text on them.

   This file is copied verbatim to landing/tokens/colors.css and
   admin/src/styles/colors.css by scripts/sync-tokens.sh. Edit it here only. */

:root {
  /* ---- Brand ---- */
  --brand-petunia:   #4F3466;
  --brand-dahlia:    #7E6EAC;
  --brand-hydrangea: #849BCC;
  --brand-heather:   #BAB8D3;

  /* ---- Violet scale (Petunia family; 700 = brand) ---- */
  --violet-950: #1C1126;
  --violet-900: #2B1B3B;
  --violet-800: #3C274F;
  --violet-700: #4F3466;
  --violet-600: #654A80;
  --violet-500: #7E6EAC;

  /* ---- Lilac scale (accents: Heather → Hydrangea → Dahlia) ---- */
  --lilac-50:  #F4F3F9;
  --lilac-100: #EAE8F3;
  --lilac-200: #DCDAEA;
  --lilac-300: #BAB8D3;
  --lilac-400: #849BCC;
  --lilac-500: #7E6EAC;
  --lilac-600: #6A5A98;
  --lilac-700: #574882;

  /* ---- Neutrals (slightly violet-tinted greys) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F5FA;
  --neutral-100: #EDEBF3;
  --neutral-200: #DDDAE7;
  --neutral-300: #C7C3D6;
  --neutral-400: #9A95AD;
  --neutral-500: #5F5A73;   /* ≥4.7:1 on the tinted surfaces */
  --neutral-600: #57536A;
  --neutral-700: #3F3B50;
  --neutral-800: #2A2738;
  --neutral-900: #1B1826;
  --neutral-950: #110F18;

  /* ---- System states (errors, destructive actions, confirmations) ---- */
  --success-50:  #E8F5EE;
  --success-500: #2E8558;
  --success-600: #226A44;
  --warning-500: #C08A2E;
  --danger-50:   #F8EBE8;
  --danger-500:  #B0503F;
  --danger-600:  #94402F;

  /* ---- Scores (brand scale instead of a traffic light) ----
     Ring arcs / dots on the dark olive glass (graphics, ≥3:1 worst case); brighter = higher.
     Hydrangea is NOT used here — it is reserved for actions. Numbers use --color-text-primary. */
  --score-faint: #77728F;  /* dim Heather — key quality «требует осознанных усилий» */
  --score-low:  #9A95B4;   /* muted Heather */
  --score-mid:  #C9BEEA;   /* light Dahlia */
  --score-high: #F1EEE4;   /* cream */
  --pair-strength-bg: rgba(201, 190, 234, 0.12);
  --pair-friction-bg: rgba(255, 194, 181, 0.10);

  /* ---- Gradients ---- */
  /* Fixed background glows behind the glass (body::before). */
  /* Single-hue glows (Dahlia / light Petunia only). The blue Hydrangea is kept out of the
     background so it stays exclusive to primary actions (isolation effect). */
  --gradient-glow:
    radial-gradient(760px 560px at 92% 0, rgba(126, 110, 172, 0.34), rgba(126, 110, 172, 0) 70%),
    radial-gradient(680px 560px at 0 75%, rgba(101, 74, 128, 0.40), rgba(101, 74, 128, 0) 70%),
    var(--brand-petunia);
  /* Night sky: crisp distant stars on top of the nebula image (two tiled layers, faint and bright),
     so they stay sharp on any screen size. */
  --gradient-stars:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.50), transparent 60%) 0 0 / 173px 167px,
    radial-gradient(1px 1px at 120px 90px, rgba(255, 255, 255, 0.35), transparent 60%) 0 0 / 173px 167px,
    radial-gradient(1px 1px at 70px 140px, rgba(230, 222, 255, 0.40), transparent 60%) 0 0 / 173px 167px,
    radial-gradient(1.5px 1.5px at 60px 50px, rgba(255, 255, 255, 0.80), transparent 60%) 0 0 / 389px 353px,
    radial-gradient(1.3px 1.3px at 290px 230px, rgba(255, 236, 250, 0.70), transparent 60%) 0 0 / 389px 353px,
    radial-gradient(1.2px 1.2px at 200px 320px, rgba(214, 226, 255, 0.65), transparent 60%) 0 0 / 389px 353px;
  /* The ONE action colour (60-30-10 accent): light Hydrangea with dark text. Used only for
     primary actions, so they are the most distinct element on any screen:
     5.3:1 vs the Petunia background, 4.7:1 vs the olive blocks; text on it ≥7.5:1. */
  --gradient-primary: linear-gradient(135deg, #BFCBEA 0%, #A9B9E0 55%, #93A6D6 100%);
  --gradient-accent: linear-gradient(135deg, #7E6EAC 0%, #849BCC 100%);

  /* ---- Content blocks: solid dark olive (no transparency, no blur) ----
     #3A3A24 — same hue as the former khaki. Glass is reserved for app chrome and overlays.
     Cream text #F1EEE4: 10:1; secondary 7.8; muted 6.1. */
  --brand-olive: #3A3A24;
  --block-bg:        #3A3A24;
  --block-border:    rgba(241, 238, 228, 0.14);
  --block-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --block-shadow:    0 10px 28px rgba(16, 8, 26, 0.30);
  /* Long-reading surface (portrait, conclusions, FAQ, legal): light warm sepia, dark text.
     Dark text on light reads faster than light on dark; sepia is easier than white. */
  --reading-bg:      #EAE5D6;
  --glass-blur:      blur(22px) saturate(140%);

  /* ---- Liquid glass: app chrome (sidebar, tab bar, sticky bars) — dark Petunia glass ---- */
  --chrome-fill:        rgba(28, 17, 38, 0.40);
  --chrome-fill-strong: rgba(32, 20, 46, 0.78);
  --chrome-sheen:       linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 62%);
  --chrome-border:      rgba(255, 255, 255, 0.16);

  /* ---- Semantic aliases (light text on dark olive / Petunia) ---- */
  color-scheme: dark;
  --color-bg:              var(--brand-petunia);
  --color-bg-inset:        rgba(241, 238, 228, 0.10);   /* secondary buttons, segmented controls */
  --color-surface:         var(--block-bg);
  --color-surface-raised:  #2F2E1E;                     /* inputs, dropdowns, dialogs (opaque, deeper olive) */
  --color-surface-sunken:  rgba(0, 0, 0, 0.16);
  --color-border:          rgba(241, 238, 228, 0.16);
  --color-border-strong:   rgba(241, 238, 228, 0.30);

  --color-text-primary:    #F1EEE4;
  --color-text-secondary:  #D9D4C3;
  --color-text-muted:      #C2BCA8;   /* meta only, not paragraphs */
  --color-text-inverse:    var(--violet-950);

  /* Primary = the action colour */
  --color-primary:         #A9B9E0;
  --color-primary-hover:   #BFCBEA;
  --color-primary-active:  #93A6D6;
  --color-on-primary:      var(--violet-950);

  /* Links and non-action accents: light lilac (distinct from the action blue) */
  --color-accent:          #E2DCF2;
  --color-accent-hover:    #F1EDFB;
  --color-accent-active:   #C9BEEA;
  --color-on-accent:       var(--violet-950);

  /* App chrome (text directly on the Petunia background) */
  --color-app-bg:          #3A2550;   /* under the night sky (overscroll, loading) */
  --sky-top:               #22162E;   /* top edge of the sky = iPhone status bar / theme-color */
  --color-app-bg-inset:    rgba(255, 255, 255, 0.10);
  --color-on-app-bg:            #F6F5FA;
  --color-light-btn:            #A9B9E0;   /* landing CTAs use the action colour */
  --color-light-btn-hover:      #BFCBEA;
  --color-on-app-bg-secondary:  rgba(246, 245, 250, 0.88);
  --color-on-app-bg-muted:      rgba(246, 245, 250, 0.80);
  --color-score-track-on-dark:  rgba(255, 255, 255, 0.18);

  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-danger:  var(--danger-500);
  /* Status text on dark olive / Petunia (≥5.9:1) */
  --color-danger-text:  #FFC2B5;
  --color-success-text: #A8E6C3;
  --color-danger-on-app-bg: #FFC9C0;
  /* Line tone marks: strong side / point to watch (on olive ≥7:1) */
  --tone-plus:  #A8E6C3;
  --tone-minus: #F2C77E;

  --color-focus-ring: #A9B9E0;
  --color-selected-bg:     rgba(241, 238, 228, 0.10);
  --color-selected-border: rgba(241, 238, 228, 0.60);
}

/* Scoped tokens for the light reading surface: everything inside reads dark-on-sepia.
   Checked: text 14.4:1, secondary 9.4, muted 5.8, links 8.3, danger 6.7, success 6.5. */
.block-reading {
  color-scheme: light;
  --color-text-primary:    #17141F;
  --color-text-secondary:  #3A3542;
  --color-text-muted:      #5A5466;
  --color-border:          rgba(23, 20, 31, 0.14);
  --color-border-strong:   rgba(23, 20, 31, 0.28);
  --color-surface:         #FFFDF8;
  --color-surface-raised:  #FFFDF8;
  --color-bg-inset:        rgba(23, 20, 31, 0.07);
  --color-primary:         #4F3466;
  --color-primary-hover:   #3C274F;
  --color-primary-active:  #2B1B3B;
  --color-on-primary:      #F6F5FA;
  --gradient-primary:      linear-gradient(135deg, #3C274F 0%, #4F3466 100%);
  --color-accent:          #4F3466;
  --color-on-accent:       #F6F5FA;
  --color-danger-text:     #8A2E1E;
  --color-success-text:    #1D5A39;
  --tone-plus:             #1D5A39;   /* 6.5:1 */
  --tone-minus:            #7A4A06;   /* 5.9:1 */
  --color-focus-ring:      #4F3466;
  --color-selected-bg:     rgba(79, 52, 102, 0.10);
  --color-selected-border: #4F3466;
}
/* Сфера — Type tokens
   Display: Noto Serif Display, condensed (wdth 70) — high-contrast editorial serif for
   headings and the «Сфера» wordmark; weight 400 (500 for the wordmark), italics for
   accent words. Use at ≥ 22px only — hairlines get fragile below that.
   Body / UI / numbers: Golos Text — a Cyrillic-native grotesk. */

:root {
  --font-display: 'Noto Serif Display Cond', 'Times New Roman', Georgia, serif;
  --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:    56px;
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-tight:  1.1; /* @kind other */
  --lh-snug:   1.25; /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-relaxed:1.6; /* @kind other */

  --ls-display: 0; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */

  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
}
/* Сфера — Spacing, radii, shadow, motion tokens (4px base unit) */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(19, 18, 16, 0.06);
  --shadow-md: 0 4px 16px rgba(19, 18, 16, 0.08);
  --shadow-lg: 0 12px 32px rgba(19, 18, 16, 0.12);
  --shadow-focus: 0 0 0 3px rgba(37, 58, 99, 0.25);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}
/* Landing page — uses design tokens from /mkt/tokens */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Headlines wrap evenly (no dangling preposition or lone word on the last line) */
h1, h2, h3 { text-wrap: balance; }

body {
  margin: 0;
  background: var(--sky-top);
  color: var(--color-on-app-bg);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.page {
  min-height: 100dvh;
  padding-bottom: 0;
  overflow-x: hidden;
  max-width: 100%;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--color-on-app-bg);
}

.brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-app-bg-secondary);
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.nav a {
  color: var(--color-on-app-bg-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  color: var(--color-on-app-bg);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}

.btn-ghost {
  padding: 10px 20px;
  font-size: 14px;
  color: var(--color-on-app-bg-secondary);
  background: transparent;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-app-bg);
}

.btn-light {
  padding: 10px 22px;
  font-size: 14px;
  background: var(--color-light-btn);
  color: var(--violet-950);
}

.btn-light:hover {
  background: var(--color-light-btn-hover);
}

.btn-light-lg {
  padding: 14px 28px;
  font-size: 16px;
  background: var(--color-light-btn);
  color: var(--violet-950);
}

.btn-light-lg:hover {
  background: var(--color-light-btn-hover);
}

.btn-outline-lg {
  padding: 14px 28px;
  font-size: 16px;
  color: var(--color-on-app-bg);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}

.btn-outline-lg:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-primary {
  padding: 14px 28px;
  font-size: 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
  padding-top: clamp(24px, 5vw, 56px);
  padding-bottom: 12px;
}

.hero-emblem {
  display: block;
  width: clamp(132px, 36vw, 200px);
  height: auto;
  /* Round shadow (Safari draws filter: drop-shadow() as a square box around the image) */
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 400px);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .hero-emblem { grid-column: 2; grid-row: 1; width: 100%; }
  .hero-copy-main { grid-column: 1; }
}

.hero-copy-main {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin: 0;
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--color-on-app-bg-secondary);
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-sub p {
  margin: 0;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* Sections */
.section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.hero + .section {
  padding-top: 28px;
}

.section-inset {
  background: rgba(28, 17, 38, 0.22);
  padding: 48px clamp(20px, 5vw, 64px);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-app-bg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.section h2,
.section-inset h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: var(--lh-tight, 1.2);
  letter-spacing: var(--ls-display);
  margin: 0 0 32px;
}

.card {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-text-primary);
}

.card.feature {
  flex: 1 1 300px;
  gap: 12px;
}

.card h3 {
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

.card p {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

.card.feature p {
  line-height: 1.5;
}

/* How it works: a numbered sequence on a hairline, not a row of identical cards */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  counter-reset: none;
}
.step {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--color-accent);
}
.step h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
}
.step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-on-app-bg-secondary);
}

/* Features: two lead blocks for the core of the product, four quiet notes below */
.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 32px;
}
.feature-lead {
  grid-column: span 2;
  padding: 32px;
  gap: 14px;
}
.feature-lead h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}
.feature-lead p {
  font-size: 15.5px;
}
.feature-minor {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.feature-minor h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-on-app-bg);
}
.feature-minor p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-app-bg-secondary);
}

/* Pricing: four plans in a row, the recommended one outlined; packs and companies in a note */
.pricing-lead {
  margin: -16px 0 28px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--color-on-app-bg-secondary);
}
.pricing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.card.plan {
  position: relative;
  gap: 8px;
}
.plan-price {
  font-family: var(--font-display);
  font-size: 40px !important;
  line-height: 1.05 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: var(--ls-display);
}
.plan-price span {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}
.plan-limit {
  font-weight: 600;
  color: var(--color-text-primary) !important;
}
.plan-featured {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.plan-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.pricing-note {
  margin: 24px 0 0;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-on-app-bg-secondary);
}
.pricing-note a { color: var(--color-on-app-bg); }
.pricing-cta { margin-top: 24px; }
@media (max-width: 1099px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .pricing { grid-template-columns: minmax(0, 1fr); }
}

/* FAQ: heading in its own column on desktop, aligned to the page grid */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 48px;
  align-items: start;
}
/* Left column: heading, a short lead, contact and the main action — sticky next to the answers */
.faq-aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.faq-layout .faq-aside h2 {
  margin: 0;
}
.faq-aside-lead {
  margin: 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-on-app-bg-secondary);
}
.faq-aside-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--color-app-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.faq-aside-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-app-bg-secondary);
}
.faq-aside-card a {
  color: var(--color-on-app-bg);
  font-weight: 600;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px 24px;
}

.faq-item h3 {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--color-text-primary);
  margin: 0 0 6px;
  font-family: var(--font-body);
}

.faq-item p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* CTA band */
.cta-band {
  background: var(--color-surface);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 42px);
  color: var(--color-text-primary);
  margin: 0;
}

/* Footer — .footer-inner is a .wrap, so it lines up with the page content */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 12.5px;
  color: var(--color-on-app-bg-muted);
  text-decoration: underline;
}

.footer-links a:hover {
  color: var(--color-on-app-bg);
}

.footer-copy {
  font-size: 12.5px;
  color: var(--color-on-app-bg-muted);
}

/* Sticky mobile CTA */
.sticky-cta {
  display: none;
}

/* Mobile */
@media (max-width: 899px) {
  .page {
    padding-bottom: 88px;
  }

  .nav {
    display: none;
  }

  .header-actions .btn-light {
    display: none;
  }

  .site-header {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    font-size: 17px;
  }

  .btn-ghost {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: 20px;
  }

  .hero + .section {
    padding-top: 28px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero-copy-main {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .hero-cta {
    display: none;
  }

  .cta-band {
    flex-direction: column;
    align-items: stretch;
  }

  .steps,
  .features,
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps { gap: 24px; }
  .step-num { font-size: 44px; }
  .feature-lead { grid-column: auto; padding: 24px; }
  .feature-lead h3 { font-size: 28px; }
  .feature-minor { margin-top: 0; }
  .faq-layout { gap: 0; }
  .faq-layout h2 { position: static; }
  /* Phone: heading and lead above the answers; contact is in the footer, the action in the band below */
  .faq-aside { position: static; gap: 12px; margin-bottom: 20px; }
  .faq-aside-card, .faq-aside .btn { display: none; }

  .cta-band .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-app-bg) 70%, transparent);
    z-index: 20;
  }

  .sticky-cta .btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }

  html.has-cookie-notice .cookie-notice {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  html.has-cookie-notice .page {
    padding-bottom: calc(88px + 140px);
  }
}

/* Cookie notice: necessary cookies + opt-in Yandex.Metrika */
.cookie-notice {
  position: fixed;
  z-index: 60;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #1a1a1a);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.cookie-notice.is-visible {
  display: flex;
}
.cookie-notice p {
  margin: 0;
}
.cookie-notice a {
  color: var(--color-primary, #2B1B3B);
}
.cookie-notice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.cookie-notice button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--color-primary, #2B1B3B);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font: inherit;
}
.cookie-notice button.cookie-notice-secondary {
  background: transparent;
  color: var(--color-primary, #2B1B3B);
  box-shadow: inset 0 0 0 1px currentColor;
}


/* Night sky in two depth layers (scripts/generate-nebula.py).
   Far: nebula clouds, dark dust and tiny stars — fixed and still.
   Near: transparent wisps and bright stars — drifts up at 18 percent of the scroll (lib/sky.ts in the app, landing.js),
   so the sky reads as space with depth rather than a flat picture.
   Both layers are sized to the largest viewport (100lvh), so Safari's collapsing toolbar does not
   resize them (no jump while scrolling). Brightness is capped so white text keeps at least 4.5:1. */
body::before,
.sky-near {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background: var(--gradient-stars), url('/mkt/assets/nebula-wide.webp?v=2') center top / cover no-repeat, var(--sky-top);
}
/* The near layer is a real element (sky.js), moved only by transform — no style recalc on scroll. */
.sky-near {
  z-index: -1;
  height: calc(100lvh + var(--sky-tile, 100lvh));
  background: url('/mkt/assets/nebula-near-wide.webp?v=2') center top / 100% auto repeat-y;
  will-change: transform;
  /* Added after the page has loaded, so it never competes with the content; fades in once decoded. */
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sky-near.is-ready { opacity: 1; }
@media (max-aspect-ratio: 4/5) {
  body::before {
    background: var(--gradient-stars), url('/mkt/assets/nebula-tall.webp?v=2') center top / cover no-repeat, var(--sky-top);
  }
  .sky-near {
    background-image: url('/mkt/assets/nebula-near-tall.webp?v=2');
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-near { transform: none !important; will-change: auto; transition: none; }
}
/* Landing blocks: solid olive (no glass); the cookie notice is an overlay → glass */
.card,
.cta-band {
  background: var(--block-bg);
  border: 1px solid var(--block-border);
  box-shadow: var(--block-highlight), var(--block-shadow);
}
.cookie-notice {
  background: var(--chrome-sheen), var(--chrome-fill-strong);
  border: 1px solid var(--chrome-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* FAQ is long text: light sepia reading surface (tokens scoped by .block-reading) */
.faq-item {
  background: var(--reading-bg);
  border: 1px solid rgba(23, 20, 31, 0.08);
  box-shadow: var(--block-shadow);
}
.faq-item p { line-height: 1.6; }

/* Cookie «Принять все» uses the neutral lilac accent, not the action colour */
.cookie-notice button:not(.cookie-notice-secondary) {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.cookie-notice a,
.cookie-notice button.cookie-notice-secondary {
  color: var(--color-text-primary);
}

.cookie-notice a { text-decoration: underline; }

/* Reduced motion: no smooth scrolling or hover transitions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Reveal on scroll (landing.js). Everything stays visible unless html.anim is set. */
.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.anim .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* 404 page (landing/404.html, served by Caddy handle_errors) */
.notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding-block: 48px;
}
.notfound h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 48px); line-height: 1.1; overflow-wrap: anywhere; }
.notfound p { margin: 0; color: var(--color-on-app-bg-secondary, inherit); }
.notfound-code { font-family: var(--font-display, serif); font-size: 64px; line-height: 1; opacity: 0.7; }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }