/* ==========================================================================
   Aivinir landing — styles
   Design tokens are the OFFICIAL Aivinir brandbook palette (v1.0, 2026).
   Source of truth: docs/DESIGN_SYSTEM.md + docs/BRANDBOOK.md.
   Dark-ONLY system — no light theme (brandbook: ~70% dark base; the wordmark
   is never recoloured). Single type family: Inter (display = heavier weight).
   ========================================================================== */

:root {
  /* --- raw brandbook tokens (stр. 21/32 PDF) --- */
  --aivinir-bg: #030811;        /* MIDNIGHT  — фон ~70%      */
  --aivinir-surface: #071523;   /* SURFACE   — карточки      */
  --aivinir-deep: #0D2530;      /* DEEP SURF — выделения     */
  --aivinir-aqua: #14D9D4;      /* AQUA      — AI-акцент      */
  --aivinir-blue: #3152FF;      /* ELECTRIC  — digital        */
  --aivinir-text: #F4F7F8;      /* CLOUD     — текст/свет     */
  --aivinir-muted: #95A6AE;     /* SLATE     — вторичный      */
  --aivinir-human: #E08A2E;     /* HUMAN AMBER — тепло        */

  /* --- semantic map --- */
  --background: var(--aivinir-bg);
  --foreground: var(--aivinir-text);
  --card: var(--aivinir-surface);
  --card-foreground: var(--aivinir-text);
  --popover: var(--aivinir-deep);
  --popover-foreground: var(--aivinir-text);
  --primary: var(--aivinir-aqua);
  --primary-foreground: var(--aivinir-bg);
  --secondary: var(--aivinir-deep);
  --secondary-foreground: var(--aivinir-text);
  --muted: var(--aivinir-deep);
  --muted-foreground: var(--aivinir-muted);
  --accent: var(--aivinir-deep);
  --accent-foreground: var(--aivinir-text);
  --destructive: #ff5d5d;
  --success: var(--aivinir-aqua);
  --warning: var(--aivinir-human);
  --brand-amber: var(--aivinir-human);
  --blue: var(--aivinir-blue);
  --border: #173043;
  --input: #173043;
  --input-fill: #0a1a28;
  --ring: var(--aivinir-aqua);

  /* radii — brandbook: 24px large cards / 16px mobile */
  --radius: 1rem;
  --radius-sm: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;            /* 16px (mobile card) */
  --radius-2xl: 1.25rem;        /* 20px */
  --radius-3xl: 1.5rem;         /* 24px (large card) */

  /* single family — Inter (display = same family, heavier weight) */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 75rem;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 14px 36px rgba(0,0,0,0.34);
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Headings use Inter at display weight (800) — distinction by weight, not family */
h1, h2, h3, .font-display {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
}
h1 { font-size: clamp(2.1rem, 6.5vw, 4rem); }     /* up to ~64px */
h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }   /* ~40px */
h3 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); }   /* ~24px */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---- Layout helpers ---------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.section__head { max-width: 46rem; margin-bottom: 2.25rem; }
.section--center .section__head { margin-inline: auto; text-align: center; }
.lead { color: var(--muted-foreground); font-size: 1.05rem; }

/* ---- Brand pattern (verbatim from globals.css) ------------------------- */
.brand-pattern {
  background-image:
    radial-gradient(circle at 26px 26px, color-mix(in oklab, var(--primary) 70%, transparent) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 26px 26px, color-mix(in oklab, var(--brand-amber) 60%, transparent) 0 1px, transparent 7px);
  background-size: 52px 52px;
}

/* ---- Icons ------------------------------------------------------------- */
/* Base size for inline SVGs; specific contexts (.icon-list, .chip, .features)
   override via higher-specificity descendant rules below. Without this an SVG
   with no width/height attributes stretches to fill its flex parent. */
svg.ic { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem; border-radius: var(--radius-xl); border: 1px solid transparent;
  font-size: 0.98rem; font-weight: 600; line-height: 1; transition: filter .15s, background .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn--icon svg { width: 1.15rem; height: 1.15rem; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.btn--secondary:hover { background: var(--accent); }
.btn--ghost { background: transparent; color: var(--foreground); }
.btn--ghost:hover { background: var(--accent); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; min-height: 52px; }
.btn--block { width: 100%; }
.btn--icon { padding: 0.5rem; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-lg); background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.btn--icon:hover { background: var(--accent); }

/* ---- Header ------------------------------------------------------------ */
.header {
  position: relative; z-index: 40;        /* not sticky — header lives only on the first screen */
  background: color-mix(in oklab, var(--background) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.header__inner { display: flex; align-items: center; gap: 1rem; height: 3.2rem; }   /* 20% shorter */
.brandmark { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; }
.brandmark__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent); }
/* Wordmark logo — transparent PNG (light-on-dark). The system is dark-only, so it
   always sits on the brand-dark surface (brandbook: logo never recoloured). */
.logo-img { height: 1.7rem; width: auto; display: block; }
.footer .logo-img { height: 2rem; }
.header__nav { display: none; gap: 1.5rem; margin-inline-start: 1.5rem; }
.header__nav a { color: var(--muted-foreground); font-size: 0.95rem; font-weight: 500; }
.header__nav a:hover { color: var(--foreground); }
.header__spacer { flex: 1; }
.header__tools { display: flex; align-items: center; gap: 0.5rem; }
.lang-select {
  background: var(--input-fill); color: var(--foreground); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.45rem 0.6rem; font-size: 0.9rem; font-family: inherit;
}
.header__cta { display: none; }

/* ---- Hero -------------------------------------------------------------- */
/* less top space (nav → eyebrow halved) so more of the video showcase shows */
.hero { position: relative; overflow: hidden; padding-top: clamp(1.5rem, 4.5vw, 3rem); padding-bottom: clamp(3rem, 8vw, 5.5rem); }
.hero__pattern { position: absolute; inset: 0; opacity: 0.16; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); }
/* AI Glow — Midnight → Aqua → Blue (brandbook gradient for launches/tech) */
.hero__glow { position: absolute; top: -25%; left: 50%; transform: translateX(-50%); width: 64rem; height: 42rem; background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--aivinir-aqua) 30%, transparent), color-mix(in oklab, var(--aivinir-blue) 18%, transparent) 45%, transparent 68%); filter: blur(44px); pointer-events: none; }
.hero__inner { position: relative; text-align: center; }
.hero__copy { max-width: 50rem; margin-inline: auto; }
.hero h1 { margin-bottom: 1rem; }
.hero__subtitle { font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--primary); margin-bottom: 1.25rem; }
/* hero video showcase (dusle.ai-style) */
.hero__showcase { margin-top: 2rem; }
.video-card { width: 60%; max-width: 13rem; margin: 0; text-align: center; }
.video-card__media { aspect-ratio: 9 / 16; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--deep-surface); box-shadow: var(--shadow-card); }
.video-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hero placeholder tile shown until self-hosted clips are wired (config.mediaBase). */
.video-card__media--placeholder { background-image: radial-gradient(circle at 30% 22%, color-mix(in oklab, var(--primary) 28%, transparent), transparent 62%), linear-gradient(160deg, var(--deep-surface), var(--background)); }
.video-card__caption { margin-top: 0.65rem; color: var(--muted-foreground); font-size: 0.9rem; }
.hero__text { color: var(--muted-foreground); margin-bottom: 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-block: 1.75rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--card); border: 1px solid var(--border); color: var(--card-foreground);
  border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 500;
}
.chip svg { width: 1rem; height: 1rem; color: var(--primary); }
.chip--anchor { font-weight: 600; }
.chip--anchor::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); }
.hero__note {
  margin-top: 1.75rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary) 10%, var(--card));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  color: var(--muted-foreground); font-size: 0.92rem; max-width: 40rem; margin-inline: auto;
}

/* ---- Cards / grids ----------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-card); }
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }

.icon-list { display: grid; gap: 0.85rem; }
.icon-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.icon-list .ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--primary); margin-top: 0.1rem; }

.audience-card .ic { width: 1.6rem; height: 1.6rem; color: var(--primary); margin-bottom: 0.75rem; }
.audience-card h3 { margin-bottom: 0.4rem; }
.audience-card p { color: var(--muted-foreground); font-size: 0.95rem; }

/* transform before/after */
.transform-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; }
.ba { border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; border: 1px solid var(--border); }
.ba--before { background: var(--card); color: var(--muted-foreground); }
.ba--after { background: color-mix(in oklab, var(--primary) 12%, var(--card)); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.ba__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.ba--before .ba__label { color: var(--muted-foreground); }
.ba--after .ba__label { color: var(--primary); }

/* numbered list (difference / format) */
.numbered { counter-reset: n; display: grid; gap: 0.85rem; }
.numbered li { counter-increment: n; display: flex; gap: 0.9rem; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem 1.1rem; }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--primary); flex: none; min-width: 1.8rem; }

/* program modules */
.module { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; }
.module__num { font-family: var(--font-serif); color: var(--primary); font-weight: 700; font-size: 0.95rem; }
.module h3 { margin: 0.25rem 0 0.9rem; }

.curriculum-head { margin-top: 2.75rem; max-width: none; }
.curriculum-head h3 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.numbered--lessons li { font-weight: 500; }
.curriculum-acc { margin-top: 1.25rem; }

/* ---- Carousel (brandbook §4b) ----------------------------------------- */
.carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem; padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: -1.25rem; padding-inline: 1.25rem;   /* bleed to screen edges */
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__card { scroll-snap-align: start; flex: 0 0 auto; width: 82%; max-width: 22rem; }

/* Carousel arrows — desktop only (mobile uses native swipe). */
.carousel-wrap { position: relative; }
.carousel-arrow { display: none; }
@media (min-width: 768px) {
  .carousel-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
    background: color-mix(in oklab, var(--card) 88%, transparent);
    border: 1px solid var(--border); color: var(--foreground);
    box-shadow: var(--shadow-card); transition: background .15s, transform .15s;
  }
  .carousel-arrow:hover { background: var(--card); transform: translateY(-50%) scale(1.06); }
  .carousel-arrow .ic { width: 1.25rem; height: 1.25rem; }
  .carousel-arrow--prev { left: -0.5rem; }
  .carousel-arrow--next { right: -0.5rem; }
}

/* Required-field marker + validation errors */
.req { color: var(--brand-amber, #e08a2e); }
.field input.input-error {
  border-color: #f0626f !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, #f0626f 30%, transparent);
}
#checkoutError, #paymentError { color: #f0a0a8; }
.shake { animation: shake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Button loading spinner */
.btn-spinner {
  display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Legal pages (Terms / Privacy) */
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.25rem; }
.legal h2 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; }
.legal p { color: var(--muted-foreground); line-height: 1.7; }
.legal .lead { color: var(--foreground); }
.legal-back { display: inline-block; margin-bottom: 1.25rem; color: var(--primary); text-decoration: none; }
.legal-updated { font-size: 0.85rem; margin-top: 0; }
.legal-entity { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; }

/* placeholder note (social-proof mock content) */
.placeholder-note { color: var(--muted-foreground); font-size: 0.8rem; font-style: italic; margin: -0.75rem 0 1rem; opacity: 0.8; }

/* case cards (results / before-after) */
.case-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-card); }
a.case-card:hover { border-color: var(--primary); }
.case-card__media { position: relative; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background-color: var(--deep-surface); }
.case-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, transparent), color-mix(in oklab, var(--blue) 16%, transparent)); }
.case-card .case-ic { position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; color: var(--primary); opacity: 0.9; }
.case-card__tag { position: absolute; z-index: 2; top: 0.75rem; left: 0.75rem; background: var(--bg, var(--background)); color: var(--foreground); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; }
.case-card__body { padding: 1.1rem 1.15rem 1.25rem; }
.case-card__body h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.case-card__body p { color: var(--muted-foreground); font-size: 0.92rem; }
.case-card__handle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; color: var(--primary); font-size: 0.85rem; font-weight: 600; }
.case-card__handle svg { width: 0.95rem; height: 0.95rem; }

/* testimonial cards */
.testi-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.4rem 1.35rem; box-shadow: var(--shadow-card); }
.testi-card__quote { font-size: 1rem; line-height: 1.55; }
.testi-card__quote::before { content: "“"; color: var(--primary); font-family: var(--font-serif); font-weight: 800; margin-right: 0.1rem; }
.testi-author { display: flex; align-items: center; gap: 0.65rem; }
.avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-foreground); background: var(--primary); }
.testi-author__meta { display: flex; flex-direction: column; line-height: 1.2; }
.testi-author__meta b { font-size: 0.95rem; }
.testi-author__meta span { color: var(--muted-foreground); font-size: 0.82rem; }

/* chips list (usecases) */
.taglist { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* stats */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.25rem 0.75rem; }
.stat__value { font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; color: var(--primary); }
.stat__label { color: var(--muted-foreground); font-size: 0.85rem; margin-top: 0.25rem; }
.bio p { color: var(--muted-foreground); margin-bottom: 0.85rem; }
.bio p:last-child { margin-bottom: 0; }
.trust-lead { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.instructor-photo { width: 100%; border-radius: var(--radius-3xl); border: 1px solid var(--border); display: block; box-shadow: var(--shadow-card); }
.instructor-caption { margin-top: 0.75rem; text-align: center; font-weight: 600; font-size: 0.92rem; color: var(--brand-amber); }
.proof-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.proof-link { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 500; background: var(--card); }
.proof-link:hover { background: var(--accent); }
.proof-link svg { width: 1rem; height: 1rem; color: var(--primary); }

/* accordion (concerns / faq) */
.accordion { display: grid; gap: 0.6rem; }
.acc-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.acc-q { width: 100%; text-align: start; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: transparent; color: var(--foreground); font-weight: 600; font-size: 1rem; border: none; }
.acc-q .chev { transition: transform .2s; flex: none; width: 1.2rem; height: 1.2rem; color: var(--muted-foreground); }
.acc-item[open] .chev, .acc-item.open .chev { transform: rotate(180deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--muted-foreground); }
.acc-a__inner { padding: 0 1.15rem 1.1rem; }
.acc-item.open .acc-a { max-height: 48rem; }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.price-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; }
.price-card--popular { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 40px color-mix(in oklab, var(--primary) 18%, transparent); }
.price-badge { position: absolute; top: -0.85rem; inset-inline: 0; margin-inline: auto; width: fit-content; background: var(--primary); color: var(--primary-foreground); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: 999px; }
.price-card h3 { font-size: 1.5rem; }
.price-card__tagline { color: var(--muted-foreground); font-size: 0.95rem; margin: 0.4rem 0 1.1rem; min-height: 2.6em; }
.price-amount { display: flex; align-items: baseline; gap: 0.4rem; }
.price-amount__num { font-family: var(--font-serif); font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; }
.price-amount__cur { font-size: 1.3rem; font-weight: 600; color: var(--muted-foreground); }
.price-amount__period { color: var(--muted-foreground); font-size: 0.9rem; margin-top: 0.2rem; margin-bottom: 1.25rem; }
.price-card .features { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.price-card .features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.price-card .features .ic { flex: none; width: 1.15rem; height: 1.15rem; color: var(--primary); margin-top: 0.2rem; }
.price-forwho { border-top: 1px solid var(--border); margin-top: auto; padding-top: 1rem; }
.price-forwho__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.price-forwho li { color: var(--muted-foreground); font-size: 0.9rem; padding-block: 0.15rem; }

/* final cta */
.final { text-align: center; position: relative; overflow: hidden; }
.final .card { padding: clamp(2rem, 6vw, 3.5rem); position: relative; }
.final__pattern { position: absolute; inset: 0; opacity: 0.12; }
.final h2 { margin-bottom: 0.75rem; }
.final p { color: var(--muted-foreground); max-width: 38rem; margin-inline: auto; }
.final__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }
.final__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }

/* footer */
.footer { border-top: 1px solid var(--border); padding-block: 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.footer h4 { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.footer__brand .brandmark { margin-bottom: 0.6rem; }
.footer__brand p { color: var(--muted-foreground); font-size: 0.92rem; }
.footer__brand a { color: var(--primary); }
.footer__links li { padding-block: 0.25rem; }
.footer__links a { color: var(--muted-foreground); font-size: 0.92rem; }
.footer__links a:hover { color: var(--foreground); }
.footer__company { color: var(--muted-foreground); font-size: 0.85rem; }
.footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; color: var(--muted-foreground); font-size: 0.85rem; }
.stripe-note { display: inline-flex; align-items: center; gap: 0.45rem; }
.stripe-note svg { width: 1.1rem; height: 1.1rem; color: var(--primary); }

/* ---- Modals ------------------------------------------------------------ */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-end; justify-content: center; background: oklch(0 0 0 / 0.6); backdrop-filter: blur(4px); padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal {
  background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; width: 100%; max-width: 32rem; max-height: 92vh; overflow-y: auto;
  padding: 1.5rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px oklch(0 0 0 / 0.4); animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.modal__head h3 { font-size: 1.3rem; }
.modal__summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 0.9rem 1.1rem; margin-bottom: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal__summary .name { font-weight: 600; }
.modal__summary .price { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; }
.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--muted-foreground); }
.field input {
  width: 100%; background: var(--input-fill); color: var(--foreground); border: 1px solid var(--input);
  border-radius: var(--radius-lg); padding: 0.7rem 0.9rem; font-size: 1rem; font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); }
.muted-note { color: var(--muted-foreground); font-size: 0.82rem; margin-top: 0.75rem; text-align: center; }
.modal__success { text-align: center; padding: 1rem 0; }
.modal__success .ok-ic { width: 3.5rem; height: 3.5rem; color: var(--success); margin: 0 auto 1rem; }
.modal__success p { color: var(--muted-foreground); margin-block: 0.75rem 1.5rem; }

/* exit-intent */

/* ---- Responsive -------------------------------------------------------- */
@media (min-width: 768px) {
  .header__nav { display: flex; }
  .header__cta { display: inline-flex; }
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .transform-row { grid-template-columns: 1fr 1fr; align-items: center; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: 1fr 1fr; align-items: start; max-width: 56rem; margin-inline: auto; }
  .trust-lead { grid-template-columns: 16rem 1fr; align-items: start; }
  .footer__grid { grid-template-columns: 2fr 1fr; }
  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--radius-3xl); }
  /* carousel: show ~3 cards on desktop, narrower fixed width */
  .carousel__card { width: 20rem; }
  .testi-card { width: 22rem; }
  .video-card { width: 13rem; }   /* portrait video cards — show ~5 on desktop */
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}