/* ============================================================
   AVELINA AI — v3 styles
   Brief: dark · premium · slightly mystical. NOT SaaS-blue.
   Single accent (muted teal). Warm copper as secondary.
   Generous whitespace. Custom SVG only — no emoji.
   "Restraint is premium." Subtle motion only.
   ============================================================ */

:root {
  /* Surface */
  --bg-0: #050709;          /* page void */
  --bg-1: #0a0d11;          /* card base */
  --bg-2: #11161b;          /* card lift */
  --bg-3: #1a2129;          /* card hover */

  /* Glass — muted, restrained */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-bright: rgba(255, 255, 255, 0.28);

  /* Accent — muted teal from avatar */
  --teal: #5fd9c2;
  --teal-deep: #1c8f7f;
  --teal-soft: rgba(95, 217, 194, 0.12);
  --teal-glow: rgba(95, 217, 194, 0.35);

  /* Warm secondary — copper from logo */
  --copper: #c79570;
  --copper-soft: rgba(199, 149, 112, 0.10);
  --ember: #d6845a;

  /* Text */
  --text: #ede5d4;          /* warm cream */
  --text-dim: rgba(237, 229, 212, 0.62);
  --text-faint: rgba(237, 229, 212, 0.38);
  --text-quiet: rgba(237, 229, 212, 0.22);

  /* Status colors for comparison table */
  --yes: #5fd9c2;
  --partial: #d6a060;
  --no: #8a4040;

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
  --brand: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --maxw: 1280px;
  --gut: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: var(--bg-0);
  overflow-x: clip;     /* clips horizontal overflow without creating a new containing block
                           (overflow:hidden would re-parent position:fixed elements to html,
                            squishing the canvas — clip avoids that) */
}
body {
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ===== Ambient — very subtle. "Restraint is premium." ===== */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(70vw 70vw at 20% 10%, rgba(95, 217, 194, 0.06), transparent 60%),
    radial-gradient(60vw 60vw at 90% 90%, rgba(199, 149, 112, 0.05), transparent 60%),
    var(--bg-0);
}
.ambient::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ============================================================
   TYPE SYSTEM
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 400;
}
h1, h2, h3, h4, h5 {
  font-family: var(--brand);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 300; }
h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1.05; }
h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.2; }
h4 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.3; }

em.italic, .it { font-style: italic; color: var(--teal); font-weight: 400; }
em.copper-it { font-style: italic; color: var(--copper); font-weight: 400; }

p { color: var(--text-dim); line-height: 1.65; text-wrap: pretty; }
p.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 760px;
}
b, strong { color: var(--text); font-weight: 500; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

section {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--gut);
  background: rgba(5, 7, 9, 0.68);
}
section + section { padding-top: clamp(40px, 6vh, 80px); }
section.tight { padding: clamp(60px, 8vh, 100px) var(--gut); }

.section-inner { max-width: var(--maxw); margin: 0 auto; }

.section-head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 880px;
}
.section-head .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
}
.section-head h2 + p { margin-top: 28px; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  max-width: 1180px;
  margin: 0 auto;
}

/* ============================================================
   GLASS PRIMITIVES — subtle, not flashy
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 60px -30px rgba(0, 0, 0, 0.7);
}
.glass-strong {
  background: var(--glass-strong);
  border-color: var(--line-strong);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.btn:hover svg.arr { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #04221c;
  font-weight: 600;
  box-shadow: 0 12px 32px -12px var(--teal-glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -10px var(--teal-glow);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-bright);
}

.btn-line {
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
}
.btn-line:hover {
  background: var(--teal-soft);
}

/* ============================================================
   LANGUAGE SWITCHER (in nav)
   ============================================================ */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  margin-right: 4px;
  flex-shrink: 0;
}
.lang button, .lang a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-faint);
  border: none;
  background: transparent;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s var(--ease);
}
.lang button:hover, .lang a:hover { color: var(--text); }
.lang button.active, .lang a.active {
  background: var(--teal-soft);
  color: var(--teal);
}

/* ============================================================
   NAVBAR — sticky, single line, dropdown
   Real liquid-glass treatment (darkened, strong blur, specular highlights)
   ============================================================ */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  /* Owner spec 2026-05-29: nav appears slowly a few seconds after page
     load — same cinematic timing as "The future is now". Initial state
     hidden + slid up; navIn keyframe reveals it. */
  transform: translateX(-50%) translateY(-24px);
  opacity: 0;
  animation: navIn 1.6s var(--ease-out) 2.6s forwards;
  z-index: 90;
  width: min(1180px, calc(100vw - 24px));
  padding: 10px 12px 10px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 999px;
  /* Futuristic liquid-glass: heavy blur + low opacity. The dropdown is
     position:fixed and lives outside .nav's stacking context, so the
     legacy "no backdrop-filter on .nav" constraint no longer applies —
     the dropdown's own backdrop-filter renders against the viewport. */
  background: rgba(10, 14, 18, 0.32);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
          backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 18px 60px -16px rgba(0, 0, 0, 0.55),
    0 2px 12px -2px rgba(0, 0, 0, 0.35);
}
/* Top-edge specular highlight (clipped by its own border-radius) */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 30% 0%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.nav > * { position: relative; z-index: 1; }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding-right: 14px;
  margin-right: 4px;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-brand img { width: 26px; height: 26px; opacity: 0.95; }
.nav-brand span {
  font-family: var(--brand);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav-links li { position: relative; }
.nav-links a, .nav-links button.drop {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  transition: color 0.3s var(--ease);
}
.nav-links a:hover, .nav-links button.drop:hover { color: var(--text); }
.nav-links button.drop svg {
  width: 10px; height: 10px;
  transition: transform 0.3s var(--ease);
}
.nav-links li.open button.drop svg { transform: rotate(180deg); }

/* Dropdown — PORTALED to body, real liquid glass with backdrop-filter */
.dropdown {
  position: fixed;
  top: 80px;
  left: 20px;
  min-width: 320px;
  padding: 12px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.96);
  transform-origin: top left;
  pointer-events: none;
  z-index: 95;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.5s;
  /* Real frosted glass — works because dropdown lives in body now */
  background: rgba(8, 11, 16, 0.55);
  backdrop-filter: blur(40px) saturate(180%) brightness(0.9);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 8px 20px -4px rgba(0, 0, 0, 0.5);
}
.dropdown::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 35%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(255,255,255,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}
.dropdown a {
  opacity: 0;
  transform: translateY(-6px);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text);
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.2s var(--ease);
}
.dropdown.open a { opacity: 1; transform: translateY(0); }
.dropdown.open a:nth-child(1) { transition-delay: 0.08s; }
.dropdown.open a:nth-child(2) { transition-delay: 0.12s; }
.dropdown.open a:nth-child(3) { transition-delay: 0.16s; }
.dropdown.open a:nth-child(4) { transition-delay: 0.20s; }
.dropdown.open a:nth-child(5) { transition-delay: 0.24s; }
.dropdown.open a:nth-child(6) { transition-delay: 0.28s; }
.dropdown.open a:nth-child(7) { transition-delay: 0.32s; }
.dropdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(0) scale(1.03);
}
.dropdown.open a {
  opacity: 1;
  transform: translateY(0);
}
.dropdown.open a:hover {
  transform: translateY(0) scale(1.03);
}
.dropdown a .d-icon {
  width: 24px; height: 24px;
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.dropdown a .d-icon svg { width: 18px; height: 18px; }
.dropdown a .d-text { display: flex; flex-direction: column; gap: 2px; }
.dropdown a .d-title { font-size: 13px; font-weight: 500; color: var(--text); }
.dropdown a .d-sub { font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; }
.dropdown a .d-badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-left: 6px;
}

.nav-cta {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #04221c;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -6px var(--teal-glow);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px var(--teal-glow);
}
.nav-cta svg { width: 12px; height: 12px; }

.nav-hamburger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
}
.nav-hamburger svg { width: 16px; height: 16px; color: var(--text); }

/* ============================================================
   HERO — split layout: photo on right, text on left, no overlap
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 16vh, 160px) clamp(24px, 6vw, 80px) clamp(60px, 10vh, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* ============== Hero — ANIMATED PORTRAIT (v9, 2026-05-28) ==============
   Hero IS the scroll-stage. Canvas plays through frames as user scrolls,
   sticky inner pins it to viewport. All overlays live inside hero-sticky.
   ============================================================ */
.hero.hero-minimal.hero-stage {
  position: relative;
  /* 220vh — canvas plays through all 145 frames during ~1.2 viewports of scroll */
  min-height: 220vh;
  padding: 0;
  display: block;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}
.hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  display: block;
  isolation: isolate;
}
.hero-canvas {
  /* Fixed = always stays in place, never scrolls away.
     z-index: -1 puts it above ambient(-2) but behind all content.
     Cover-fit via CSS: buffer is 1280×673 (1.903:1).
     100lvh = large viewport height (constant, unaffected by iOS address bar).
     max() ensures canvas always covers the viewport from both axes,
     while preserving aspect ratio — no JS resize needed, no squish. */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100lvh * (1280 / 673)));
  height: max(100lvh, calc(100vw * (673 / 1280)));
  z-index: -1;
  display: block;
  pointer-events: none; /* decorative background — never intercept clicks (was blocking footer links) */
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), filter 0s;
  filter: contrast(1.03) saturate(1.05);
  -webkit-mask-image:
    radial-gradient(ellipse 78% 70% at 50% 40%, #000 40%, rgba(0,0,0,0.75) 78%, transparent 100%);
          mask-image:
    radial-gradient(ellipse 78% 70% at 50% 40%, #000 40%, rgba(0,0,0,0.75) 78%, transparent 100%);
}
.hero-canvas.is-ready { opacity: 1; }
/* After hero completes — canvas becomes blurred fixed background for all sections */
.hero-canvas.bg-mode {
  filter: blur(54px) brightness(0.4) saturate(1.35) !important;
  transition: opacity 0.8s var(--ease-out), filter 1.4s ease !important;
}
/* Owner spec 2026-05-29: "когда начинает ехать фраза «будущее уже здесь»
   background начинает размываться и затемняться". Refined 2026-05-29 v2:
   "затемняться не на 100% а на 50%" — canvas stays visible as a blurred,
   half-dim backdrop at reveal=1 (not fully transparent). The portrait
   remains as ambience, while the rising block + pills sit clearly on
   top. */
.hero-stage.is-revealing .hero-canvas.is-ready {
  opacity: calc(1 - var(--hero-reveal, 0) * 0.5);
  filter:
    contrast(1.03)
    saturate(calc(1.05 - var(--hero-reveal, 0) * 0.5))
    brightness(calc(1 - var(--hero-reveal, 0) * 0.5))
    blur(calc(var(--hero-reveal, 0) * 18px));
  transition: none;
}
/* Owner spec 2026-05-29: "Будущее уже здесь" + its bottom gradient
   (.hero-fade-bottom) must blur/fade out together with the GAVE animation
   (canvas) as the prologue block rises. Previously they stayed pinned at
   the viewport bottom (position:fixed / absolute inside sticky) and bled
   THROUGH the manifesto coming up — on both desktop and mobile.
   Now they share the same reveal-driven dissolve as the canvas above:
   opacity 0.5→0 and blur 0→18px over reveal 0→1 for .hero-future,
   opacity 1→0 for the bottom gradient. */
.hero-stage.is-revealing .hero-future {
  opacity: calc(0.5 * (1 - var(--hero-reveal, 0)));
  filter: blur(calc(var(--hero-reveal, 0) * 18px));
  transition: none;
}
.hero-stage.is-revealing .hero-fade-bottom {
  opacity: calc(1 - var(--hero-reveal, 0));
  transition: none;
}
/* Fallback while first frame loads — DISABLED 2026-05-28 round 11:
   owner reported the static portrait was bleeding through the canvas below
   the animation. Canvas starts hidden (.hero-canvas without .is-ready =
   opacity 0) and main.js flips .is-ready as soon as the first frame draws,
   so the fallback was only useful for the very first 100–300 ms anyway.
   Keeping the DOM element + class so existing JS hooks don't break. */
.hero-bg-fallback {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: none;
  background-size: cover;
  background-position: 50% 28%;
  background-repeat: no-repeat;
  filter: contrast(1.03) saturate(1.05);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.6) 76%, transparent 100%),
    radial-gradient(ellipse 78% 70% at 50% 40%, #000 40%, rgba(0,0,0,0.75) 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.6) 76%, transparent 100%),
    radial-gradient(ellipse 78% 70% at 50% 40%, #000 40%, rgba(0,0,0,0.75) 78%, transparent 100%);
          mask-composite: intersect;
  animation: heroFadeIn 2.4s var(--ease-out) both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(1.08); filter: blur(20px) contrast(1.03) saturate(1.05); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0)  contrast(1.03) saturate(1.05); }
}
.hero.hero-minimal .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Owner spec 2026-05-29: bottom darkening (88% → bg-0) REMOVED. It read
     as a static black band glued to the bottom of the first slide that
     stayed in place while the portrait above moved with scroll — exactly
     the "градиент примыкающий к низу" the owner asked to take out.
     Kept only the soft top vignette for nav-bar legibility, fading to
     fully transparent by 50%. The seamless handoff to manifesto is now
     fully owned by the canvas fade-out + page bg-0. */
  background:
    linear-gradient(180deg,
      rgba(5,7,10,0.35) 0%,
      rgba(5,7,10,0.10) 35%,
      transparent 55%,
      transparent 100%);
}
.hero.hero-minimal .hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(95,217,194,0.05), transparent 70%);
}
/* Owner spec 2026-05-29: bottom hero gradient REMOVED on both desktop +
   mobile. It animated opacity 1→0 with --hero-reveal which read as a
   "moving" strip glued to the next section. Seamless handoff to manifesto
   is already delivered by the canvas itself fading + blurring out (see
   .hero-stage.is-revealing .hero-canvas.is-ready), so the gradient was
   redundant decoration. Element stays in DOM for JS hooks but renders
   as display:none everywhere. */
.hero-minimal .hero-fade-bottom { display: none; }

/* "The future is now" — now lives INSIDE .hero-info-inner as flex
   row 1. The whole inner block translates upward via its parent
   transform (see .hero-stage.is-revealing rule above), so "future"
   rises in lockstep with the badge and pills. */
/* "The future is now" — fixed to viewport, z-index 0 (above canvas -1,
   below sections z-index 1). Blurs with canvas when bg-mode activates. */
.hero-future {
  position: fixed;
  /* Owner spec 2026-06-07: опустить «Будущее уже здесь» вместе с палочкой
     ниже на десктопе. Mobile bottom переопределён ниже (@media max-width:720px). */
  bottom: clamp(34px, 6vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  pointer-events: none;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  opacity: 0;
  animation: heroFutureIn 2.6s var(--ease-out) 3.0s forwards;
}
.hero-future.bg-mode {
  filter: blur(54px) brightness(0.4) saturate(1.35) !important;
  transition: filter 1.4s ease !important;
}
@keyframes navIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    filter: blur(0);
  }
}
/* Page-reset transition — triggered when user clicks the nav logo.
   Whole document fades + blurs to dark before the actual reload, so
   the return to top feels cinematic rather than abrupt. */
body.is-page-resetting {
  transition: opacity 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  opacity: 0;
  filter: blur(20px) brightness(0.4);
  pointer-events: none;
}
.hero-future-text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 2.3vw, 28px);
  letter-spacing: 0.008em;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 4px 40px rgba(0,0,0,0.65),
    0 1px 8px rgba(0,0,0,0.55),
    0 0 60px rgba(95,217,194,0.10);
  background: linear-gradient(180deg, #ffffff 0%, #e8efe9 60%, #b4c0c4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes heroFutureIn {
  /* translateX(-50%) must be included — position:fixed with left:50% requires
     it in the keyframe, otherwise the animation overrides the static transform. */
  from { opacity: 0; transform: translateX(-50%) translateY(14px); filter: blur(10px); letter-spacing: 0.08em; }
  to   { opacity: 0.5; transform: translateX(-50%) translateY(0);  filter: blur(0); letter-spacing: 0.008em; }
}
@media (max-width: 720px) {
  /* Owner spec 2026-05-29 (round 7): EMPIRICAL FIX.
     Round 6 поднял текст на лицо вместо «опустить вниз». Cause:
     модель «position:fixed относительно viewport» неверна — родитель
     .hero-info-inner получает transform через --hero-reveal в is-revealing,
     поэтому fixed ведёт себя как absolute относительно inner.
     Empirical (playwright iPhone 14 viewport): inner h=40px (содержит
     только палочку, future removed из flow). Чтобы низ текста сидел
     ровно на 14px выше верха палочки: bottom = inner.h + gap = 40 + 14 = 54.
     Эта формула не зависит от vh — работает на любой высоте. Шрифт 1.5× оставляем. */
  .hero-future { bottom: 54px; }
  .hero-future-text { font-size: clamp(20px, 7vw, 30px); }
}

/* ============== HERO INFO OVERLAY (inside hero-sticky) ==============
   Single container holding the WHOLE bottom block of the hero:
     1. "The future is now"
     2. scroll arrow (palочка)
     3. badge ("The first AI assistant…")
     4. pills row (6 pills, never wider than the badge)
   All four are children of .hero-info-inner (flex column, centered).
   The container as a WHOLE translates upward with --hero-reveal — so
   badge, pills, future and arrow all rise with the SAME speed and
   their relative offsets stay locked.
   Children individually appear in sequence via opacity stagger
   (badge → pill 1..6) on top of the unified rise. */
.hero-info-overlay {
  position: absolute;
  left: 50%;
  /* "The future is now" sits at the very bottom of the animation
     (90px from viewport bottom). Children below "future" — arrow,
     badge, pills — extend BELOW that, off-screen initially. They
     come into view as the whole inner block translates upward via
     --hero-reveal (see .hero-stage.is-revealing rule below). */
  /* Owner spec 2026-06-07: палочка (scroll-cue) опущена ниже синхронно с
     «Будущее уже здесь». Mobile top переопределён в @media max-width:720px. */
  top: calc(100% - clamp(50px, 6.8vh, 76px));
  bottom: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 820px;
  padding: 0 var(--gut);
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-info-overlay .hero-info-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertical order: future → arrow → badge → pills.
     Wider gap so there's clear breathing room between the arrow's
     dot/line and the badge (and between badge and pills row). */
  gap: clamp(24px, 3vw, 36px);
  width: 100%;
  max-width: 820px;
}
/* Unified scroll-tied rise — the whole inner block translates as one.
   Owner spec: "спустить нужно максимально вниз" — the block stays
   anchored toward the bottom. At reveal=1 the LAST pill sits ~70px
   from the viewport bottom (symmetric with the manifesto top-padding).
   Future + arrow + badge sit above the pills in the lower-mid of the
   viewport — they don't fly off the top. */
.hero-stage.is-revealing .hero-info-overlay .hero-info-inner {
  transform: translateY(calc(var(--hero-reveal, 0) * -360px));
}
/* Each staggered child fades + rises into place on its own threshold.
   thresholdStart = idx * stagger-step
   appearProgress = (--hero-reveal - thresholdStart) * (1/duration)
   where duration ≈ 1.5 * stagger-step so each item takes ~13% of reveal.
   Once appearProgress >= 1, the item is locked at full visibility. */
.hero-info-overlay .hero-info-inner > .hero-badge,
.hero-info-overlay .hero-info-inner .hero-pill {
  /* Hidden by default. The parent .hero-info-inner provides the unified
     scroll-tied translate (so badge + pills + future + arrow rise as
     one block). Each child fades in on its own threshold via --idx.
     animation: none kills the legacy fadeUp keyframe that would
     otherwise pin opacity to 1. */
  opacity: 0;
  animation: none !important;
  transition: none;
}
/* During reveal: pills/badge appear one-by-one via opacity stagger.
   No individual translate — that's handled at the parent (.hero-
   info-inner) so the whole block moves at the same speed.
   Same animation shape for every child (badge + 6 pills) — only the
   start threshold differs.
     - Each child has its own --idx (0..6, badge=0, pill1..6=1..6)
     - thresholdStart = idx * 0.10 → 7 thresholds: 0, .10, .20, … .60
     - opacity = clamp(0, (reveal - thresholdStart) * 7, 1) — fade-in
       takes ~0.14 reveal-units per item */
.hero-stage.is-revealing .hero-info-overlay .hero-info-inner > .hero-badge,
.hero-stage.is-revealing .hero-info-overlay .hero-info-inner .hero-pill {
  opacity: clamp(0, calc((var(--hero-reveal, 0) - var(--idx, 0) * 0.10) * 7), 1);
}
.hero-info-overlay .hero-info-inner > .hero-badge { --idx: 0; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(1) { --idx: 1; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(2) { --idx: 2; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(3) { --idx: 3; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(4) { --idx: 4; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(5) { --idx: 5; }
.hero-info-overlay .hero-pills .hero-pill:nth-child(6) { --idx: 6; }
.hero-info-overlay .hero-info-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.2vw, 24px);
  text-align: center;
  pointer-events: auto;
}

/* Legacy hero-name + cta-stack styles below (hidden, owner removed 2026-05-28 round 4) */
.hero-name-legacy {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(120px, 18vh, 200px);
  z-index: 2;
  margin: 0;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  animation: heroNameIn 2s var(--ease-out) 1.0s forwards;
}
.hero-name-text {
  display: inline-block;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 9vw, 132px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(255,255,255,0.97);
  text-shadow:
    0 4px 50px rgba(0,0,0,0.7),
    0 1px 8px rgba(0,0,0,0.5),
    0 0 80px rgba(95,217,194,0.10);
  background: linear-gradient(180deg, #ffffff 0%, #e4ece8 55%, #aebabe 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes heroNameIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(10px); letter-spacing: 0.10em; }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);    letter-spacing: 0.01em; }
}

/* Scroll cue fades out when hero reveal starts (prevents visual
   connection between the cue line and the manifesto ornament below). */
.hero-stage.is-revealing .hero-scroll-cue {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none;
}

/* Scroll cue — minimal animated line+dot, hints "there's more below".
   Now lives INSIDE .hero-info-inner as flex row 2 (under "future"),
   so it rises with the rest of the bottom block. */
.hero-scroll-cue {
  position: relative;
  width: 1px;
  height: 40px;
  display: block;
  opacity: 0;
  animation: heroNameIn 1.6s var(--ease-out) 2.0s forwards;
  pointer-events: auto;
}
.hero-scroll-cue-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 100%);
}
.hero-scroll-cue-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  transform: translateX(-50%);
  animation: heroScrollDot 2.4s var(--ease-out) infinite;
}
@keyframes heroScrollDot {
  0%   { top: 0;    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 56px; opacity: 0; }
}

@media (max-width: 720px) {
  .hero-name { bottom: clamp(140px, 22vh, 200px); }
  .hero-name-text { font-size: clamp(48px, 14vw, 84px); }
  .hero.hero-minimal .hero-bg { background-position: 50% 22%; }
}

/* ============== HERO INFO — legacy block (overlay now lives in hero-sticky) ============== */
.hero-info {
  /* legacy fallback — kept off-screen if used */
  display: none;
}
.hero-info-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3vw, 36px);
  text-align: center;
}
/* Tagline — sits FIRST in hero-info, biggest editorial moment */
.hero-tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  max-width: 820px;
  margin: 0;
  letter-spacing: 0.002em;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #e6ede9 60%, #b5c0c4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The big centered badge — long pill saying "The first AI assistant..." */
.hero-info .hero-badge,
.hero-info-overlay .hero-badge,
.hero-badge-hero {
  align-self: center;
  margin: 0;
  background: rgba(8,12,18,0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(95,217,194,0.28);
  color: rgba(255,255,255,0.94);
  font-family: var(--sans);
  font-size: clamp(13px, 1.15vw, 15px);
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border-radius: 999px;
  text-wrap: balance;
  max-width: 820px;
  line-height: 1.5;
  font-weight: 400;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 40px -16px rgba(95,217,194,0.20);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-info .hero-badge .glyph,
.hero-info-overlay .hero-badge .glyph,
.hero-badge-hero .glyph {
  width: 14px; height: 14px;
  color: var(--teal);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Pills row — under the big badge.
   Legacy `.hero-info .hero-pills` still uses wrap layout. Inside our
   hero overlay (`.hero-info-overlay .hero-pills`) pills are stacked
   VERTICALLY as a column, centered, with consistent gap — owner spec:
   "столбиком от центра, не вылезая за края первого бабла". */
.hero-info .hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  max-width: 820px;
  width: 100%;
}
.hero-info-overlay .hero-pills {
  /* Wrap-row, centered, bounded by badge max-width. Larger row-gap
     (vertical spacing between wrapped rows) and bigger pill padding
     per owner spec. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;
  row-gap: 16px;
  margin: 0;
  width: 100%;
  max-width: 820px;
}
/* Pills inside hero overlay — owner correction: bigger, brighter,
   no backdrop-filter, NO inherited blur(8px) from the legacy
   `.hero-pills .hero-pill` reveal preset (lines ~2828) which has equal
   specificity but lives later in the cascade — we must kill it
   explicitly with higher-specificity selectors in this scope. */
.hero-info-overlay .hero-pills .hero-pill {
  background: #0e141a;
  border: 1px solid rgba(95,217,194,0.60);
  color: rgba(255,255,255,0.98);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.06em;
  padding: 12px 22px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Kill the legacy reveal preset that applies blur(8px) + scale(0.85)
     + translateY(14px) to .hero-pills .hero-pill. Pills are now driven
     purely by the staggered opacity formula. */
  filter: none !important;
  transform: none !important;
  transition: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(0,0,0,0.55),
    0 12px 28px -10px rgba(0,0,0,0.75),
    0 0 24px -8px rgba(95,217,194,0.25);
}
.hero-info-overlay .hero-pills .hero-pill svg {
  width: 14px;
  height: 14px;
  color: rgba(95,217,194,0.95);
}
@media (max-width: 720px) {
  .hero-tagline { font-size: clamp(22px, 7vw, 30px); }
  .hero-info .hero-badge,
  .hero-info-overlay .hero-badge,
  .hero-badge-hero {
    font-size: 12px;
    padding: 11px 18px;
    text-align: left;
    line-height: 1.45;
  }
}

/* ============== Telegram chat — "typing" status indicator ============== */
.tg-head-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tg-status-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.tg-status-dots span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: tgStatusDot 1.4s infinite;
}
.tg-status-dots span:nth-child(2) { animation-delay: 0.18s; }
.tg-status-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes tgStatusDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

/* ============== Hero — CENTERED variant (v5) [legacy, kept for fallback] ============== */
.hero.hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 16vh, 170px) clamp(20px, 5vw, 60px) clamp(80px, 12vh, 130px);
  overflow: hidden;
}
.hero.hero-centered .hero-bg {
  /* Full-bleed background — soft, evenly faded on every edge */
  left: 0;
  right: 0;
  -webkit-mask-image:
    radial-gradient(ellipse 75% 70% at 50% 38%, #000 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.35) 80%, transparent 100%);
          mask-image:
    radial-gradient(ellipse 75% 70% at 50% 38%, #000 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.35) 80%, transparent 100%);
  opacity: 0.75;
  background-position: 50% 30%;
}
.hero.hero-centered .hero-overlay {
  background:
    linear-gradient(180deg,
      rgba(5,7,10,0.55) 0%,
      rgba(5,7,10,0.18) 32%,
      rgba(5,7,10,0.18) 60%,
      rgba(5,7,10,0.85) 92%,
      var(--bg-0) 100%);
}
.hero.hero-centered .hero-overlay::after {
  background:
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(95,217,194,0.07), transparent 70%),
    radial-gradient(ellipse 38% 40% at 80% 85%, rgba(199,149,112,0.07), transparent 70%);
}
/* See note above (.hero-minimal .hero-fade-bottom) — element disabled
   site-wide 2026-05-29. */
.hero-fade-bottom { display: none; }
/* Prologue curtain — rises from the bottom during Phase B (--hero-rise
   0..1, over the last 22% of hero scroll). Height grows from 0 to
   ~110vh so it covers the whole viewport by the time the user crosses
   into the manifesto. Gradient transparent→bg-0 makes the canvas fade
   away beneath it, and the manifesto bg-0 picks up seamlessly. */
.hero-curtain {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Owner spec: "под пилюлями не должно быть градиента, градиент должен
     наслаиваться НИЖЕ". The curtain's top edge tracks just below the
     pills row (which translates upward with reveal). Math:
       pills_bottom_y ≈ viewport_height - 100px + inner_height - reveal*700
     Curtain top = pills_bottom_y + small_gap. Height = viewport_height
     - curtain_top. Approximation: height = reveal*700 - ~180px.
     This keeps curtain below the pills at all reveal stages, with the
     transparent top of the gradient handing off into the canvas
     animation right where pills end. */
  /* Owner: pills must abut the prologue with NO visible portrait between
     them. Curtain top edge tracks BELOW pills bottom (offset ~360px so
     at reveal=1 the top sits right at the last pill's lower edge).
     The gradient is now an almost-immediate solid bg-0 — only a tiny
     8px softener so the very top doesn't look razor-cut. */
  /* 2026-05-29: curtain disabled. The seamless handoff is now driven
     by the canvas itself fading + blurring out to transparent — at
     reveal=1 the canvas is gone and hero-sticky's solid bg-0
     continues into manifesto bg-0 with zero visual seam. The curtain
     element stays in the DOM for JS hooks but renders as a thin
     fallback strip only at the very bottom for any sub-pixel rounding. */
  height: 0;
  background: var(--bg-0);
  pointer-events: none;
  z-index: 2;
  transition: none;
}
.hero-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 880px;
  width: 100%;
  opacity: 0;
  animation: heroStackIn 1.6s var(--ease) 0.15s forwards;
}
@keyframes heroStackIn {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-stack .hero-badge {
  align-self: center;
  justify-self: center;
  text-align: center;
  margin: 0 0 6px;
  animation: heroChildIn 1.2s var(--ease) 0.25s both;
}
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  margin: 0;
  font-family: var(--display);
  color: #fff;
  text-shadow:
    0 4px 40px rgba(0,0,0,0.55),
    0 1px 6px rgba(0,0,0,0.4);
  line-height: 1;
  animation: heroChildIn 1.4s var(--ease) 0.4s both;
}
.hero-title-main {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(64px, 12vw, 168px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fff 0%, #eee 55%, #b6c5cf 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 28px rgba(95,217,194,0.18));
}
.hero-title-sub {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(14px, 1.35vw, 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  max-width: 580px;
  line-height: 1.5;
}
.hero-centered .hero-actions {
  margin-top: clamp(8px, 1.4vw, 16px);
  justify-content: center;
  animation: heroChildIn 1.2s var(--ease) 0.55s both;
}
.hero-centered .hero-pills {
  justify-content: center;
  margin-top: clamp(14px, 2vw, 22px);
  max-width: 760px;
  animation: heroChildIn 1.4s var(--ease) 0.75s both;
}
@keyframes heroChildIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 720px) {
  .hero-title-main { font-size: clamp(56px, 16vw, 92px); }
  .hero-title-sub { letter-spacing: 0.18em; font-size: 13px; }
  .hero-centered .hero-actions { width: 100%; flex-direction: column; }
  .hero-centered .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Photo — occupies the RIGHT half of the viewport only.
   The face is centered IN this box, so text on the left never touches her. */
.hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 50%;
  z-index: -2;
  background-image: url("assets/avelina.jpg");
  background-size: cover;
  background-position: 50% 32%;
  background-repeat: no-repeat;
  filter: contrast(1.02) saturate(1.05);
  animation: heroBreathe 22s var(--ease) infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
@keyframes heroBreathe {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.05) translateY(-1%); }
}

/* The empty left side of the page — a deep void with subtle teal glow */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,7,10,0.4) 0%, rgba(5,7,10,0) 25%, rgba(5,7,10,0) 75%, rgba(5,7,10,0.9) 100%);
  pointer-events: none;
}
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 50% at 15% 50%, rgba(95,217,194,0.06), transparent 70%),
    radial-gradient(ellipse 35% 35% at 88% 80%, rgba(199,149,112,0.08), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
}

/* Text column — left, aligned left */
.hero-content {
  grid-column: 1;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  opacity: 0;
  animation: fadeUp 1.6s var(--ease) 0.3s forwards;
  text-align: left;
}
.hero h1 {
  font-family: var(--brand);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.018em;
  text-wrap: pretty;
  color: #fff;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.4);
}
.hero h1 .fact {
  display: block;
  margin-bottom: 0.3em;
}
.hero h1 .fact:last-child { margin-bottom: 0; }
.hero h1 .fact em {
  /* keep natural inline flow so the italic descender extends the line-box */
  font-style: italic;
}
.hero h1 .fact em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.55),
    0 0 20px rgba(95,217,194,0.22);
}
.hero-lede {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 4px;
}

/* Badge — sits ABOVE the H1 in the text column, no overlap */
.hero-badge {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-self: end;
  justify-self: start;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 0.1s forwards;
  text-wrap: balance;
  max-width: 540px;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 8px;
}
.hero-badge .glyph {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

/* Pills — below CTAs, left-aligned */
.hero-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 8px;
  opacity: 0;
  animation: fadeUp 1.6s var(--ease) 0.6s forwards;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-pill svg { width: 12px; height: 12px; color: var(--teal); }

/* Wrap content + badge + pills in the left column via a positional helper */
.hero > .hero-badge { order: 0; }
.hero > .hero-content { order: 1; grid-column: 1; }
.hero > .hero-pills { order: 2; grid-column: 1; max-width: 620px; }

/* The right "column" is empty — it's just space for the photo */
.hero::after {
  content: "";
  grid-column: 2;
  display: block;
  min-height: 1px;
}

/* Play CTA — bottom of viewport, centered under text column */
.hero-play {
  position: absolute;
  bottom: clamp(28px, 4vh, 44px);
  left: clamp(24px, 6vw, 80px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s var(--ease);
  opacity: 0;
  animation: fadeUp 1.6s var(--ease) 0.9s forwards;
}
.hero-play:hover {
  background: rgba(0,0,0,0.55);
  transform: translateY(-2px);
}
.hero-play .play-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal);
  display: grid; place-items: center;
  color: #04221c;
  box-shadow: 0 0 12px rgba(95,217,194,0.4);
}
.hero-play .play-dot svg { width: 8px; height: 8px; margin-left: 1px; }

/* ============== Hero responsive ============== */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: clamp(110px, 14vh, 140px);
    padding-bottom: clamp(60px, 9vh, 90px);
    align-items: end;
    min-height: 100vh;
  }
  .hero-bg {
    /* on mobile the photo fills the top half horizontally; text below over dark */
    left: 0;
    top: 0;
    height: 55%;
    bottom: auto;
    background-position: 50% 25%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(5,7,10,0) 0%, rgba(5,7,10,0) 35%, rgba(5,7,10,0.7) 58%, rgba(5,7,10,0.95) 80%, rgba(5,7,10,1) 100%);
  }
  .hero-overlay::after { display: none; }
  .hero::after { display: none; }
  .hero-content, .hero-badge, .hero-pills {
    grid-column: 1;
    max-width: 100%;
  }
  .hero-badge { align-self: start; margin-bottom: 16px; }
  .hero-play { left: 50%; transform: translateX(-50%); }
  .hero-play:hover { transform: translateX(-50%) translateY(-2px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EXPERIENCE SECTION — Telegram-first
   ============================================================ */
.exp {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.exp-text h2 { margin-bottom: 24px; }
.exp-text p { font-size: 17px; max-width: 560px; }
.exp-text p + p { margin-top: 14px; }
.exp-text .powered {
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--mono);
}
.exp-vis {
  position: relative;
  aspect-ratio: 9 / 17;
  max-height: 504px;
  margin: 0 auto;
  width: 100%;
  max-width: 265px;
  overflow: visible;
}

/* ============== TELEGRAM-STYLE CHAT (v5) ============== */
.tg-chat {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(20,24,30,0.92) 0%, rgba(10,13,18,0.96) 100%);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 50px 100px -40px rgba(0,0,0,0.7),
    0 0 60px -10px rgba(95,217,194,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tg-chat:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 60px 120px -40px rgba(0,0,0,0.75),
    0 0 80px -10px rgba(95,217,194,0.18);
}
.tg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(28,32,40,0.95) 0%, rgba(20,24,30,0.95) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tg-head-back {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--teal);
  border-radius: 8px;
  transition: background 0.2s var(--ease);
}
.tg-head-back:hover { background: rgba(255,255,255,0.06); }
.tg-head-back svg { width: 14px; height: 14px; }
.tg-head-avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(95,217,194,0.6);
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(95,217,194,0.25);
}
.tg-head-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-head-online {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2px solid rgba(20,24,30,1);
  box-shadow: 0 0 8px rgba(46,204,113,0.7);
}
.tg-head-meta { flex: 1; min-width: 0; }
.tg-head-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.tg-head-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-top: 2px;
}
.tg-head-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.65);
  border-radius: 8px;
  transition: all 0.2s var(--ease);
}
.tg-head-icon:hover { background: rgba(255,255,255,0.06); color: #fff; }
.tg-head-icon svg { width: 14px; height: 14px; }
.tg-body {
  flex: 1;
  min-height: 0;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(95,217,194,0.05), transparent 60%),
    var(--bg-0);
  overflow: hidden;
}
.tg-date-chip {
  align-self: center;
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
  opacity: 0;
  animation: tgMsgIn 0.6s var(--ease) 0.1s forwards;
}
.tg-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20,24,30,0.95) 0%, rgba(14,17,22,1) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tg-input-icon, .tg-input-mic {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s var(--ease);
  flex-shrink: 0;
}
.tg-input-icon:hover { color: #fff; background: rgba(255,255,255,0.05); }
.tg-input-icon svg { width: 16px; height: 16px; }
.tg-input-mic {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #04221c;
  box-shadow: 0 4px 14px -2px var(--teal-glow);
}
.tg-input-mic:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px -2px var(--teal-glow);
}
.tg-input-mic svg { width: 14px; height: 14px; }
.tg-input-field {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.tg-input-field::placeholder { color: rgba(255,255,255,0.4); }
.tg-input-field:focus {
  border-color: rgba(95,217,194,0.5);
  background: rgba(255,255,255,0.06);
}
.tg-voice-time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.exp-phone {
  width: 100%; height: 100%;
  border-radius: 32px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 14px;
  position: relative;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.exp-phone::before {
  content: ""; position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 24px;
  border-radius: 999px;
  background: var(--bg-0);
  z-index: 2;
}
.exp-screen {
  width: 100%; height: 100%;
  border-radius: 22px;
  background: var(--bg-0);
  padding: 60px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.tg-msg {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: tgMsgIn 0.6s var(--ease) forwards;
  box-shadow: 0 2px 14px -8px rgba(0,0,0,0.6);
  text-align: left;
}
.tg-msg.them {
  align-self: flex-start;
  background: rgba(40,44,52,0.95);
  color: var(--text);
  border-bottom-left-radius: 4px;
  animation-delay: 0.6s;
}
.tg-msg.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--teal-deep) 0%, #25a08c 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  animation-delay: 0.35s;
}
.tg-body .tg-msg.them:nth-of-type(1) { animation-delay: 0.7s; }
.tg-body .tg-msg.me:nth-of-type(2)   { animation-delay: 1.2s; }
.tg-body .tg-voice                     { animation-delay: 1.5s; }
.tg-body .tg-typing                    { animation-delay: 2.0s; }
.tg-body .tg-msg.them:nth-of-type(3)   { animation-delay: 2.5s; }
.tg-body .tg-msg.me:last-of-type       { animation-delay: 3.0s; }
@keyframes tgMsgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.tg-voice {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--teal-deep), #25a08c);
  color: #fff;
  font-size: 11px;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  opacity: 0;
  transform: translateY(8px);
  animation: msgIn 0.6s var(--ease) 0.2s forwards;
}
.tg-voice .vwave { display: flex; gap: 2px; align-items: center; }
.tg-voice .vwave span {
  width: 2px; height: 14px; background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  animation: voice 1.4s ease-in-out infinite;
}
.tg-voice .vwave span:nth-child(2) { animation-delay: 0.1s; height: 10px; }
.tg-voice .vwave span:nth-child(3) { animation-delay: 0.2s; height: 16px; }
.tg-voice .vwave span:nth-child(4) { animation-delay: 0.3s; height: 8px; }
.tg-voice .vwave span:nth-child(5) { animation-delay: 0.4s; height: 12px; }
.tg-voice .vwave span:nth-child(6) { animation-delay: 0.5s; height: 18px; }
.tg-voice .vwave span:nth-child(7) { animation-delay: 0.6s; height: 10px; }
@keyframes voice {
  0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes msgIn {
  to { opacity: 1; transform: translateY(0); }
}
.tg-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  opacity: 0;
  animation: msgIn 0.4s var(--ease) 1.0s forwards;
}
.tg-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: typing 1.4s infinite;
}
.tg-typing span:nth-child(2) { animation-delay: 0.2s; }
.tg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   PRIVACY — architectural diagram
   ============================================================ */
.privacy-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.privacy-text {
  min-width: 0;
  max-width: 540px;
  overflow-wrap: anywhere;
  word-break: normal;
}
.privacy-text h2 { margin-bottom: 24px; }
.privacy-text p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.privacy-text b { color: var(--text); font-weight: 600; }
.privacy-text ul {
  list-style: none;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.privacy-text li {
  display: flex; gap: 12px;
  align-items: flex-start;
  font-size: clamp(13.5px, 1.05vw, 15px);
  color: var(--text-dim);
  line-height: 1.5;
  text-wrap: pretty;
}
.privacy-text li::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 9px; flex-shrink: 0;
  box-shadow: 0 0 6px var(--teal-glow);
}
.privacy-subline {
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--text);
  text-wrap: balance;
}
.privacy-diagram {
  padding: clamp(20px, 2.4vw, 32px);
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-diagram svg {
  width: 100%;
  height: 100%;
  max-width: 560px;
  display: block;
}

/* ============================================================
   MANIFESTO — oversize, full attention
   ============================================================ */
.manifesto {
  /* Owner spec: canvas stays fixed, prologue slides over it.
     -100vh overlap means manifesto starts entering the viewport
     exactly when the canvas animation finishes (~120vh of scroll).
     By the time hero-sticky unpins (220vh), manifesto has scrolled
     100vh and fully covers the viewport — hero slides away invisibly
     behind the solid prologue background. z-index: 2 keeps manifesto
     on top of the hero-stage stacking context. */
  /* Owner spec 2026-05-29 (round 3): полу-вплотную оказалось слишком
     близко. Восстанавливаем симметричный gap ~64-100px к AVELINA AI.
     `.post-manifest-tagline` padding-top тоже clamp(64,8vh,100) — итого
     визуально ~128-200px между концом пролога и AVELINA AI. */
  padding: clamp(32px, 4.5vh, 56px) var(--gut) clamp(64px, 8vh, 100px);
  margin-top: -100vh;
  position: relative;
  z-index: 2;
  /* Transparent top so Avelina's canvas shows through — text floats
     over her face. Short fade to solid bg-0 only at the very bottom
     for clean handoff to next section. No dark mid-gradient — text
     readability is handled by .manifesto-content::before radial halo
     and text-shadow on each element. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 88%,
    var(--bg-0) 100%
  );
}
/* Vertical connector line removed per owner spec — line scrolled with
   manifesto which looked incorrect. */
.manifesto-content {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
/* Dark radial halo behind the text block — keeps text readable
   while canvas shows through the transparent manifesto bg. */
.manifesto-content::before {
  content: "";
  position: absolute;
  inset: -80px -120px;
  background: radial-gradient(ellipse 80% 80% at 50% 46%, rgba(5,7,10,0.72) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.manifesto-ornament {
  width: 120px;
  height: 14px;
  margin: 0 auto 24px;
  opacity: 0.85;
}
.manifesto-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 32px;
  text-shadow: 0 0 32px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.95);
}
.manifesto-avatar {
  position: absolute;
  top: -40px; right: 0;
  width: 64px; height: 80px;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.7;
}
.manifesto-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.manifesto-text {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(237, 229, 212, 0.92);
  letter-spacing: 0.005em;
  font-style: italic;
  text-shadow: 0 0 40px rgba(0,0,0,0.95), 0 2px 16px rgba(0,0,0,0.9);
}
.manifesto-text p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: 22px;
}
.manifesto-text em {
  font-style: italic;
  color: var(--copper);
  font-weight: 500;
}
.manifesto-sig {
  /* Owner spec 2026-05-29: убрать строку «— АВЕЛИНА · ИЗ ПРОЛОГА»
     полностью. Класс оставлен в HTML на случай если i18n.js
     переиспользует ключ man.sig — visual layer скрыт. */
  display: none;
}

/* ============================================================
   DIFFERENTIATORS — 14 cards, top 5 identity-tier
   ============================================================ */
.diff-tier {
  margin-bottom: 60px;
}
.diff-tier-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.diff-tier-label::before, .diff-tier-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.diff-tier-label::before { background: linear-gradient(90deg, transparent, var(--line-strong)); }
.diff-tier-label::after { background: linear-gradient(90deg, var(--line-strong), transparent); }

.diff-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 60px;
}
.diff-grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}

/* ============================================================
   CAROUSEL — universal swipeable track with optional arrows
   Works on desktop AND mobile via flex + scroll-snap.
   Used by: diff-grid-identity, diff-grid-capabilities, uc-grid.
   ============================================================ */
.carousel {
  position: relative;
  margin-bottom: 60px;
}
.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 28px;
  scroll-padding-inline: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 280px;
  /* Forbid grid behaviour inheritance */
  grid-column: auto;
}
@media (max-width: 1100px) {
  .carousel-track > * { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 720px) {
  .carousel-track > * { flex: 0 0 82vw; max-width: 340px; min-width: 240px; }
}

/* Arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(14,20,26,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover {
  background:
    linear-gradient(180deg, rgba(95,217,194,0.12), rgba(95,217,194,0.04)),
    rgba(14,20,26,0.85);
  border-color: rgba(95,217,194,0.45);
  color: rgba(95,217,194,0.95);
  transform: translateY(-50%) scale(1.05);
}
.carousel-arrow:disabled,
.carousel-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.carousel-prev { left: -64px; }
.carousel-next { right: -64px; }
@media (max-width: 1280px) {
  .carousel-prev { left: 6px; }
  .carousel-next { right: 6px; }
}
@media (max-width: 720px) {
  .carousel-arrow { display: none; }
}

/* Legacy aliases — keep working but no-op grid layout. */
.diff-swipe,
.uc-swipe {
  margin-bottom: 60px;
}
.diff-grid-identity:not(.carousel-track),
.diff-grid-capabilities:not(.carousel-track),
.uc-grid:not(.carousel-track) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.diff-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px 26px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 240px;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.45s var(--ease),
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
  will-change: transform;
}
.diff-tile:hover {
  transform: translateY(-6px) scale(1.018);
  background: var(--bg-2);
  border-color: rgba(95,217,194,0.35);
  box-shadow:
    0 22px 60px -20px rgba(0,0,0,0.6),
    0 0 30px -8px rgba(95,217,194,0.18);
}
.diff-tile .d-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--copper);
}
.diff-tile .d-icon svg { width: 28px; height: 28px; }
.diff-tile h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.008em;
  margin: 0;
}
.diff-tile p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  font-weight: 300;
  margin: 0;
}
.diff-tile-cta {
  margin-top: auto;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(95,217,194,0.95);
  transition: transform 0.3s var(--ease);
}
.diff-tile:hover .diff-tile-cta {
  transform: translateX(4px);
}
.diff-card {
  background: var(--bg-1);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  position: relative;
  transition: background 0.5s var(--ease);
}
.diff-card:hover { background: var(--bg-2); }
.diff-card.identity { background: linear-gradient(180deg, var(--bg-1), rgba(95, 217, 194, 0.03)); }
.diff-card.identity:hover { background: linear-gradient(180deg, var(--bg-2), rgba(95, 217, 194, 0.05)); }

.diff-card .d-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  margin-bottom: -2px;
}
.diff-card .d-icon svg { width: 28px; height: 28px; }
.diff-card.identity .d-icon { color: var(--teal); }
.diff-card:not(.identity) .d-icon { color: var(--copper); }

.diff-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.008em;
}
.diff-card p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: auto;
  font-weight: 300;
}
.diff-card a.card-link {
  position: absolute;
  inset: 0;
  text-indent: -9999px;
  z-index: 0;
}
.diff-card > *:not(a.card-link) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-intro {
  margin-bottom: 60px;
}
.compare-intro h2 { margin-bottom: 28px; }
.compare-intro p { font-size: 17px; max-width: 720px; }

.compare-table {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.compare-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  font-size: 13.5px;
}
.compare-table thead {
  background: var(--bg-2);
}
.compare-table th {
  padding: 22px 18px;
  text-align: left;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.compare-table th.feature-col { color: var(--text-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.compare-table th.av-col {
  background: linear-gradient(180deg, rgba(95, 217, 194, 0.10), rgba(95, 217, 194, 0.04));
  color: var(--teal);
  position: relative;
}
.compare-table th.av-col .sub {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
  font-weight: 400;
}
.compare-table th .sub-comp {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-top: 4px;
  font-weight: 400;
}
.compare-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--text-dim);
  line-height: 1.45;
}
.compare-table td.feature {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
}
.compare-table td.av-col {
  background: rgba(95, 217, 194, 0.04);
  color: var(--text);
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tr:hover td:not(.av-col) { background: rgba(255, 255, 255, 0.02); }

.tick-yes, .tick-no, .tick-partial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tick-yes { color: var(--yes); }
.tick-no { color: var(--no); }
.tick-partial { color: var(--partial); }
.tick-yes svg, .tick-no svg, .tick-partial svg { width: 14px; height: 14px; flex-shrink: 0; }

.compare-table .desc { font-size: 12px; color: var(--text-dim); }
.compare-table .desc b { color: var(--text); font-weight: 500; }

.compare-outro {
  margin-top: 40px;
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.compare-outro p {
  font-size: 17px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--text);
  font-weight: 300;
  margin-bottom: 12px;
  line-height: 1.4;
}
.compare-outro p:last-child { margin-bottom: 0; }
.compare-outro em { color: var(--teal); font-style: normal; font-weight: 400; }

/* Mobile card-stack */
.compare-cards { display: none; }

/* ============================================================
   USE CASES MOSAIC
   ============================================================ */
.uc-hero {
  margin-bottom: 18px;
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.uc-hero h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.25;
  max-width: 760px;
}
.uc-hero p {
  font-size: 16px;
  max-width: 720px;
  color: var(--text-dim);
}
.uc-hero .uc-tag {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal);
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.uc-card {
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  transition: background 0.4s var(--ease);
}
.uc-card:hover { background: var(--glass-strong); }
.uc-card .uc-icon {
  width: 32px; height: 32px;
  color: var(--copper);
}
.uc-card .uc-icon svg { width: 24px; height: 24px; }
.uc-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  font-weight: 300;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.step {
  padding: 36px 32px 32px;
  position: relative;
}
.step .step-n {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: var(--teal);
  margin-bottom: 22px;
  opacity: 0.95;
}
.step h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
}
.step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.steps-outro {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-dim);
}
.steps-outro a { color: var(--teal); border-bottom: 1px solid var(--teal-soft); padding-bottom: 1px; }

/* ============================================================
   AVELINA.APP TEASER
   ============================================================ */
.desktop {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.desktop-text .badge {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid rgba(199, 149, 112, 0.4);
  border-radius: 999px;
  margin-bottom: 24px;
}
.desktop-text h2 { margin-bottom: 24px; }
.desktop-text p { font-size: 17px; margin-bottom: 16px; max-width: 540px; }
.desktop-text .btn { margin-top: 16px; }

.desktop-mockup {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1f25, #0d1116);
  border: 1px solid var(--line-strong);
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.8);
}
.mac-bar {
  height: 28px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.mac-bar .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #3a3f47;
}
.mac-bar .dot:nth-child(1) { background: #ff5f57; }
.mac-bar .dot:nth-child(2) { background: #ffbd2e; }
.mac-bar .dot:nth-child(3) { background: #28ca41; }
.mac-bar .title {
  margin-left: auto; margin-right: auto;
  font-size: 11px;
  font-family: var(--brand);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Brand name utility — for any other place "Avelina AI" needs to appear as wordmark */
.brand-name {
  font-family: var(--brand);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mac-body {
  position: relative;
  height: calc(100% - 28px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}
.mac-avatar {
  position: relative;
  background: url("assets/avelina.jpg") center 30% / cover no-repeat;
}
.mac-avatar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 50%, rgba(13, 17, 22, 0.6) 100%);
}
.mac-avatar .voice-ring {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(95, 217, 194, 0.4);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.14em;
}
.mac-avatar .voice-ring .vwave { display: flex; gap: 2px; align-items: center; }
.mac-avatar .voice-ring .vwave span {
  width: 2px; height: 12px;
  background: var(--teal);
  border-radius: 999px;
  animation: voice 1.4s ease-in-out infinite;
}
.mac-avatar .voice-ring .vwave span:nth-child(2) { animation-delay: 0.1s; height: 8px; }
.mac-avatar .voice-ring .vwave span:nth-child(3) { animation-delay: 0.2s; height: 14px; }
.mac-avatar .voice-ring .vwave span:nth-child(4) { animation-delay: 0.3s; height: 6px; }
.mac-avatar .voice-ring .vwave span:nth-child(5) { animation-delay: 0.4s; height: 10px; }
.mac-chat {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-1);
  overflow: hidden;
}
.mac-chat .m-msg {
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 90%;
}
.mac-chat .m-them { background: var(--bg-2); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.mac-chat .m-me   { background: linear-gradient(135deg, var(--teal-deep), #25a08c); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

/* ============================================================
   ACADEMY
   ============================================================ */
.academy-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* New centered Academy layout (replaces 2-column academy-wrap) */
.academy-centered {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 72px);
  text-align: center;
}
.academy-text-centered {
  text-align: center;
}
.academy-text-centered .badge { margin: 0 auto 24px; }
.academy-text-centered .academy-h { margin: 0 auto 22px; max-width: 760px; }
.academy-text-centered p {
  max-width: 720px;
  margin: 0 auto 18px;
  text-align: left;
}
.academy-text-centered .academy-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  font-family: var(--serif);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.academy-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.academy-quotes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
@media (max-width: 900px) {
  .academy-quotes-row { grid-template-columns: 1fr; }
}
.academy-text .badge {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid rgba(199, 149, 112, 0.4);
  border-radius: 999px;
  margin-bottom: 24px;
}
.academy-text h2 { margin-bottom: 24px; }
.academy-text p { font-size: 17px; margin-bottom: 16px; }
.academy-text .btn { margin-top: 24px; }

/* ============================================================
   ACADEMY SPLIT LAYOUT (two-column: text + forum mockup)
   ============================================================ */
.academy-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: clamp(48px, 7vh, 80px);
}
.academy-vis {
  position: relative;
  aspect-ratio: 9 / 17;
  max-height: 504px;
  margin: 0 auto;
  width: 100%;
  max-width: 265px;
  overflow: visible;
}
.academy-trial {
  font-size: 15px;
  font-style: italic;
  color: var(--teal);
  opacity: 0.88;
  margin-top: 4px;
  margin-bottom: 20px;
}
@media (max-width: 1000px) {
  .academy-split {
    grid-template-columns: 1fr;
  }
  .academy-vis {
    max-width: 224px;
    max-height: 390px;
  }
}

/* ============================================================
   TELEGRAM FORUM MOCKUP
   ============================================================ */
.tg-forum {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(20,24,30,0.92) 0%, rgba(10,13,18,0.96) 100%);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 50px 100px -40px rgba(0,0,0,0.7),
    0 0 60px -10px rgba(95,217,194,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tg-forum:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 60px 120px -40px rgba(0,0,0,0.75),
    0 0 80px -10px rgba(95,217,194,0.18);
}
.tg-forum-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Topics sidebar */
.tg-topics {
  width: 72px;
  flex-shrink: 0;
  background: rgba(14,17,24,0.85);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.tg-topics::-webkit-scrollbar { display: none; }
.tg-topic-all {
  width: 44px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.tg-topic-all:hover { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); }
.tg-topic-all svg { width: 15px; height: 15px; }
.tg-topic-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  flex-shrink: 0;
}
.tg-topic-item:hover { background: rgba(255,255,255,0.04); }
.tg-topic-item.active { background: rgba(95,217,194,0.08); }
.tg-topic-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 26px;
  background: var(--teal);
  border-radius: 0 3px 3px 0;
}
.tg-topic-icon {
  font-size: 17px;
  line-height: 1;
  display: block;
}
.tg-topic-icon.tg-topic-hash {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  font-family: var(--mono);
}
.tg-topic-name {
  font-size: 8.5px;
  font-family: var(--sans);
  color: rgba(255,255,255,0.4);
  line-height: 1.2;
  text-align: center;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-topic-item.active .tg-topic-name { color: var(--teal); }

/* Forum content area */
.tg-forum-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}
.tg-forum-content::-webkit-scrollbar { display: none; }
.tg-post {
  background: rgba(255,255,255,0.04);
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
}
.tg-post-thumb {
  width: 100%;
  height: 88px;
  background: linear-gradient(135deg,
    rgba(95,217,194,0.22) 0%,
    rgba(60,80,160,0.38) 50%,
    rgba(30,20,60,0.55) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tg-post-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,13,18,0.45) 100%);
}
.tg-post-thumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.tg-post-thumb-label {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.tg-post-thumb-vs {
  font-family: var(--sans);
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.tg-post-body { padding: 9px 11px; }
.tg-post-title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  line-height: 1.35;
  margin-bottom: 3px;
}
.tg-post-meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--teal);
  opacity: 0.78;
  margin-bottom: 5px;
}
.tg-post-text {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(255,255,255,0.50);
  line-height: 1.5;
}
.tg-post-sm .tg-post-body { padding: 8px 11px; }
.tg-post-sm .tg-post-meta { margin-bottom: 0; }

/* Forum panel switching */
.tg-topic-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
  animation: forumFade 0.22s ease;
}
.tg-topic-panel.active { display: flex; }
@keyframes forumFade {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Evolution thumb variant */
.tg-post-thumb-evo {
  background: linear-gradient(135deg,
    rgba(199,149,112,0.18) 0%,
    rgba(120,60,160,0.38) 50%,
    rgba(20,10,50,0.55) 100%);
}
.tg-post-thumb-ver {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
  position: relative;
  z-index: 1;
}

/* Group chat messages (Chat panel) */
.tg-group-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}
.tg-group-av {
  background: rgba(95,217,194,0.07);
  border-color: rgba(95,217,194,0.15);
}
.tg-group-sender {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
.tg-group-sender-av { color: var(--teal); }
.tg-group-sender-copper { color: var(--copper); }
.tg-group-text {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

/* About AV panel */
.tg-about-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  text-align: center;
}
.tg-about-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(95,217,194,0.5);
  box-shadow: 0 0 20px rgba(95,217,194,0.2);
  flex-shrink: 0;
}
.tg-about-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-about-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.tg-about-bio {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  max-width: 200px;
}
.tg-about-mission {
  font-style: italic;
  color: rgba(95,217,194,0.7);
  margin-top: 2px;
}

.academy-quotes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aq-card {
  padding: 22px 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.aq-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--copper));
  flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 18px;
  color: #04221c;
  font-weight: 500;
}
.aq-body { flex: 1; }
.aq-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  margin-bottom: 6px;
}
.aq-meta .h { color: var(--text); font-weight: 500; letter-spacing: 0.02em; }
.aq-meta .d { color: var(--text-faint); font-family: var(--mono); letter-spacing: 0.08em; }
.aq-quote {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  font-style: italic;
  font-family: var(--serif);
  font-size: 15px;
}

/* ============================================================
   PRICING — 3 tiers
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
  /* Extra top space so featured tier's "Most popular" badge is never clipped */
  padding-top: 24px;
}

/* Use-cases swipeable wrapper (matches diff-swipe pattern) */
.uc-swipe {
  /* desktop = transparent passthrough; mobile rule below makes it horizontal */
}
.tier {
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier-name {
  font-family: var(--brand);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.tier-tag {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 28px;
  font-weight: 300;
  font-style: italic;
}
.tier-price {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.tier-price .cur { font-size: 22px; color: var(--text-dim); vertical-align: top; line-height: 1.6; margin-right: 4px; }
.tier-price.custom { font-size: 36px; color: var(--copper); font-style: italic; }
.tier-when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 28px;
}
.tier ul {
  list-style: none;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier li {
  display: flex; gap: 12px;
  font-size: 13.5px;
  color: var(--text-dim);
  align-items: flex-start;
  line-height: 1.5;
}
.tier li::before {
  content: "";
  width: 14px; height: 14px;
  border: 1px solid var(--teal);
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  position: relative;
  background: var(--teal-soft);
}
.tier li b { color: var(--text); font-weight: 500; }
.tier .btn { width: 100%; justify-content: center; }

.tier.featured {
  background: linear-gradient(180deg, rgba(95, 217, 194, 0.06), rgba(95, 217, 194, 0.02));
  border-color: rgba(95, 217, 194, 0.32);
  transform: translateY(-12px);
}
.tier.featured::before {
  content: "Most popular";
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: var(--teal);
  color: #04221c;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--sans);
  z-index: 3;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(95, 217, 194, 0.5);
}
.tier.custom-tier {
  background: linear-gradient(180deg, rgba(199, 149, 112, 0.05), rgba(199, 149, 112, 0.02));
  border-color: rgba(199, 149, 112, 0.28);
}
.tier-custom-line {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 24px;
  margin-top: -10px;
  line-height: 1.5;
}

.pricing-note {
  margin-top: 36px;
  padding: 20px 28px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list {
  border-top: 1px solid var(--line);
  max-width: 920px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 8px;
  text-align: left;
  cursor: pointer;
}
.faq-q-text {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}
.faq-q-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.4s var(--ease);
}
.faq-q-icon::before, .faq-q-icon::after {
  content: ""; position: absolute;
  background: var(--text-dim);
  top: 50%; left: 50%;
  transition: background 0.3s var(--ease);
}
.faq-q-icon::before {
  width: 14px; height: 1px;
  transform: translate(-50%, -50%);
}
.faq-q-icon::after {
  width: 1px; height: 14px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease);
}
.faq-item.open .faq-q-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-q-icon::before { background: var(--teal); }
.faq-item.open .faq-q-text { color: var(--text); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-a-inner {
  overflow: hidden;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-content {
  padding: 0 8px 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 740px;
}
.faq-a-content a { color: var(--teal); border-bottom: 1px solid var(--teal-soft); padding-bottom: 1px; }
.faq-a-content p + p { margin-top: 12px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  text-align: center;
  padding: clamp(80px, 14vh, 160px) var(--gut);
}
.final-cta h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 36px;
}
.final-cta h2 em { font-style: italic; color: var(--teal); font-weight: 400; }
.final-cta .btn { font-size: 15px; padding: 18px 32px; }
.final-cta .below {
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--serif);
}
.final-cta .below a { color: var(--copper); border-bottom: 1px solid rgba(199, 149, 112, 0.3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 80px var(--gut) 40px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer-brand img { width: 36px; height: 36px; margin-bottom: 18px; opacity: 0.9; }
.footer-brand h4 {
  font-family: var(--brand);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  max-width: 280px;
  color: var(--text-dim);
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
  font-weight: 400;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--text); }
.footer-base {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

/* ============================================================
   STRIPE MODAL
   ============================================================ */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(5, 7, 9, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.modal-back.open { display: flex; opacity: 1; }
.modal {
  width: 100%; max-width: 480px;
  padding: 40px 36px;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.5s var(--ease);
  position: relative;
}
.modal-back.open .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  color: var(--text);
  display: grid; place-items: center;
  font-size: 18px;
  transition: all 0.3s var(--ease);
}
.modal-close:hover { transform: rotate(90deg); }
.modal-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.modal h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 6px;
}
.modal .modal-price {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 26px;
}
.modal .modal-price b { color: var(--teal); font-weight: 500; }
.modal .field { margin-bottom: 14px; }
.modal .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stripe-badge {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-top: 18px;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  transition: all 0.3s var(--ease);
  width: 100%;
  font-family: var(--sans);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: rgba(95, 217, 194, 0.4);
  background: rgba(95, 217, 194, 0.03);
  box-shadow: 0 0 0 3px rgba(95, 217, 194, 0.08);
}

/* ============================================================
   RESPONSIVE — mobile-first considered, breakpoint-down adjustments
   ============================================================ */
@media (max-width: 1100px) {
  .diff-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .diff-grid-9 { grid-template-columns: repeat(2, 1fr); }
  .diff-grid-identity { grid-template-columns: repeat(2, 1fr); }
  .diff-grid-capabilities { grid-template-columns: repeat(2, 1fr); }
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .tier.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav { padding: 8px 8px 8px 14px; }

  .exp, .privacy-wrap, .desktop, .academy-wrap { grid-template-columns: 1fr; }
  .desktop { grid-template-areas: "text" "mockup"; }
  .desktop .desktop-text { grid-area: text; }
  .desktop .desktop-mockup { grid-area: mockup; }

  .compare-table { display: none; }
  .compare-cards { display: flex; flex-direction: column; gap: 14px; }
  .compare-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--line);
  }
  .compare-card.av { border-color: rgba(95, 217, 194, 0.35); }
  .compare-card h4 {
    font-family: var(--serif);
    font-size: 22px;
    margin-bottom: 6px;
  }
  .compare-card h4 .sub {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 4px;
    font-weight: 400;
  }
  .compare-card.av h4 { color: var(--teal); }
  .compare-card .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  .compare-card .row .lbl {
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .compare-card .row .val { color: var(--text-dim); }

  .diff-grid-5 { grid-template-columns: 1fr; }
  .diff-grid-9 { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-avatar { position: relative; top: 0; right: 0; margin-bottom: 24px; }

  /* Carousel track on mobile — bleed to edges for swipe drama */
  .carousel-track {
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
}
@media (max-width: 520px) {
  .hero { padding-top: 110px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .uc-hero { padding: 28px 24px; }
}

/* Reveal animations (subtle, restraint) */
/* ============== PILL stagger — each bubble pops in from nowhere ============== */
.hero-pills .hero-pill {
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  filter: blur(8px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.hero-pills.in .hero-pill,
.reveal.in .hero-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.hero-pills .hero-pill:nth-child(1) { transition-delay: 0.10s; }
.hero-pills .hero-pill:nth-child(2) { transition-delay: 0.22s; }
.hero-pills .hero-pill:nth-child(3) { transition-delay: 0.34s; }
.hero-pills .hero-pill:nth-child(4) { transition-delay: 0.46s; }
.hero-pills .hero-pill:nth-child(5) { transition-delay: 0.58s; }
.hero-pills .hero-pill:nth-child(6) { transition-delay: 0.70s; }

/* ============== HOVER LIFT — cards & blocks (v5) ============== */
.diff-card, .uc-card, .aq-card, .tier {
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease),
    background 0.45s var(--ease);
  will-change: transform;
}
.diff-card:hover, .uc-card:hover, .aq-card:hover, .tier:hover {
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(95,217,194,0.32);
  box-shadow:
    0 22px 60px -20px rgba(0,0,0,0.6),
    0 0 32px -8px rgba(95,217,194,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.tier.featured:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow:
    0 28px 80px -20px rgba(0,0,0,0.7),
    0 0 48px -8px rgba(95,217,194,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
/* FIX: .reveal.in (spec 0-2-0) overrides .tier:hover (same spec, declared earlier).
   Boost all tier hover rules to 0-3-0 so they win over .reveal.in. */
.tier.glass:hover {
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(95,217,194,0.32);
  box-shadow:
    0 22px 60px -20px rgba(0,0,0,0.6),
    0 0 32px -8px rgba(95,217,194,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.tier.glass.featured:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow:
    0 28px 80px -20px rgba(0,0,0,0.7),
    0 0 48px -8px rgba(95,217,194,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
/* FIX: clip-path: inset(0 0 0 0) on .reveal.in clips the ::before badge
   (position:absolute; top:-14px) that protrudes above .tier.featured.
   Allow 30px of negative top inset so the badge stays visible. */
.tier.featured.reveal { clip-path: inset(-30px 0 8% 0); }
.tier.featured.reveal.in { clip-path: inset(-30px 0 0 0); }
.hero-pill {
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero-pill:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(95,217,194,0.08);
  border-color: rgba(95,217,194,0.4);
}

/* ============== SECTION SEAMS — bleed top section into body ============== */
#experience {
  position: relative;
  padding-top: clamp(20px, 4vh, 60px);
}
#experience::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: clamp(80px, 12vh, 160px);
  background: linear-gradient(180deg, var(--bg-0) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============== REVEAL — futuristic block-in (v5) ============== */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(8px);
  clip-path: inset(0 0 8% 0);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.2s var(--ease-out),
    filter 1.1s var(--ease-out),
    clip-path 1.2s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0% 0);
}
/* Stagger nested children when a parent .reveal becomes .in */
.reveal.in > * {
  animation: revealChild 1s var(--ease-out) both;
}
.reveal.in > *:nth-child(1) { animation-delay: 0.05s; }
.reveal.in > *:nth-child(2) { animation-delay: 0.18s; }
.reveal.in > *:nth-child(3) { animation-delay: 0.31s; }
.reveal.in > *:nth-child(4) { animation-delay: 0.44s; }
.reveal.in > *:nth-child(5) { animation-delay: 0.57s; }
.reveal.in > *:nth-child(6) { animation-delay: 0.70s; }
@keyframes revealChild {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in, .reveal.in > * { animation: none !important; transition: opacity 0.3s; filter: none !important; clip-path: none !important; transform: none !important; }
}

/* Language transition — whole page fade */
.lang-switching { transition: opacity 0.4s ease, filter 0.4s ease; }
.lang-switching.fading {
  opacity: 0;
  filter: blur(4px);
}

/* ============================================================
   GDPR COOKIE BANNER — minimal, two-button, no dark patterns
   ============================================================ */
.ck-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 150;
  width: min(620px, calc(100vw - 32px));
  padding: 20px 24px;
  display: none;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  border-radius: 18px;
}
.ck-banner.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ck-banner p {
  flex: 1;
  min-width: 220px;
  margin: 0;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.ck-banner p a {
  color: var(--teal);
  border-bottom: 1px solid var(--teal-soft);
}
.ck-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ck-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
  letter-spacing: 0.03em;
}
.ck-btn.ck-accept {
  background: var(--teal);
  color: #04221c;
  font-weight: 600;
}
.ck-btn.ck-accept:hover {
  background: var(--teal-bright, #6aebd1);
  transform: translateY(-1px);
}
.ck-btn.ck-essential {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.ck-btn.ck-essential:hover {
  background: rgba(255,255,255,0.08);
}

@media (max-width: 520px) {
  .ck-banner { padding: 16px 18px; gap: 12px; }
  .ck-actions { width: 100%; }
  .ck-btn { flex: 1; }
}

/* ============== SCROLL-TIED ANIMATION (Apple-style frame sequence, v9) ============== */
/* ============== Scroll-stage legacy (kept for compatibility — now lives inside hero) ============== */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-stage { min-height: 100vh; }
  .hero-canvas { opacity: 1 !important; }
}

/* ============== NAV — Samadhi-style refresh (v8, 2026-05-28) ============== */
.nav-links { gap: 6px; }
.nav-links a,
.nav-links li button.drop {
  font-family: var(--sans) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237,229,212,0.82);
  padding: 8px 14px;
  border-radius: 100px;
}
.nav-links a:hover,
.nav-links li button.drop:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-cta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============== POST-MANIFEST TAGLINE SECTION (v8) ============== */
.post-manifest-tagline {
  /* Owner spec 2026-05-29 (round 3): симметричный gap к manifesto. Обе
     стороны clamp(64,8vh,100) — суммарный air ~128-200px. */
  padding: clamp(64px, 8vh, 100px) var(--gut) clamp(60px, 8vh, 100px);
  position: relative;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(199,149,112,0.06), transparent 70%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-0) 100%);
}
.post-manifest-tagline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(5,7,10,0.6) 100%);
}
.pm-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.pm-title {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.pm-brand,
.pm-brand-bold {
  font-family: 'Orbitron', var(--mono), monospace;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(36px, 5.5vw, 70px);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 0 28px rgba(95,217,194,0.55),
    0 0 60px rgba(95,217,194,0.22);
  display: block;
  white-space: nowrap;
}
.pm-sep {
  display: none;
}
.pm-closing-ornament {
  margin-top: 32px;
}
.pm-line {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(9px, 1vw, 13px);
  line-height: 1.4;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(95,217,194,0.58);
  margin-top: 8px;
}
/* Cinematic blur-in for tagline reveal */
.pm-title.reveal {
  opacity: 0;
  filter: blur(24px);
  transition:
    opacity 1.8s var(--ease-out),
    filter 1.8s var(--ease-out);
}
.pm-title.reveal.in {
  opacity: 1;
  filter: blur(0);
}
.pm-title.reveal.in .pm-brand { animation: pmBrandIn 1.8s var(--ease-out) 0s both; }
.pm-title.reveal.in .pm-line  { animation: pmLineIn  1.4s var(--ease-out) 0.4s both; }
@keyframes pmBrandIn {
  from { opacity: 0; filter: blur(44px); transform: scale(1.04); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
@keyframes pmLineIn {
  from { opacity: 0; filter: blur(18px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

/* ============== PRIVACY DIAGRAM — v9 (2026-05-29, structured top-down layout) ============== */
/* New SVG layout: Telegram → Avelina → AI providers + MCP integrations.
   All labels are intentional and live inside <g> elements — no overrides needed. */

/* ============== FAQ — homepage section (v9, 2026-05-28; Samadhi-style accordion) ============== */
.faq {
  padding: clamp(80px, 12vh, 140px) var(--gut);
  position: relative;
}
.faq .section-head { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 60px); }
.faq-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(237,229,212,0.65);
  margin-top: 18px;
  text-wrap: balance;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}
.faq-item {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.faq-item:hover { border-color: rgba(95,217,194,0.22); background: rgba(95,217,194,0.04); }
.faq-summary {
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  color: rgba(237,229,212,0.96);
  user-select: none;
  text-align: left;
  letter-spacing: 0.005em;
  line-height: 1.4;
}
.faq-summary:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.faq-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  color: rgba(237,229,212,0.8);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .35s cubic-bezier(.4,0,.2,1), color .3s var(--ease-out);
}
.faq-icon svg { width: 12px; height: 12px; }
.faq-item.is-open {
  border-color: rgba(95,217,194,0.32);
  background: rgba(95,217,194,0.05);
}
.faq-item.is-open .faq-icon {
  background: var(--teal);
  border-color: var(--teal);
  color: #051219;
  transform: rotate(45deg);
}
/* Grid-rows animation — smooth open (0fr→1fr) AND close (1fr→0fr) */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body > .answer {
  overflow: hidden;
  min-height: 0;
}
.answer-inner {
  padding: 0 26px 24px;
  color: rgba(237,229,212,0.72);
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.65;
  max-width: 78ch;
}
.answer-inner a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(95,217,194,0.35);
  transition: border-color .2s var(--ease-out);
}
.answer-inner a:hover { border-color: var(--teal); }
.answer-inner code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(199,149,112,0.10);
  color: var(--copper);
  border: 1px solid rgba(199,149,112,0.22);
}
.faq-foot {
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 720px;
  text-align: center;
  color: rgba(237,229,212,0.55);
  font-size: clamp(13px, 1vw, 15px);
  font-family: var(--sans);
}
.faq-foot a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(95,217,194,0.35);
}
.faq-foot a:hover { border-bottom-color: var(--teal); }
@media (max-width: 720px) {
  .faq-summary { padding: 18px 20px; font-size: 15px; }
  .answer-inner { padding: 0 20px 22px; font-size: 14px; }
}

/* ============== MOBILE DRAWER MENU (v9, 2026-05-28; Samadhi-ported with teal palette) ============== */
.nav-hamburger.burger {
  display: none;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto; /* push to right edge of nav */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.nav-hamburger.burger:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(95,217,194,0.32);
}
.nav-hamburger.burger:active { transform: scale(.92); }
.nav-hamburger.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: rgba(237,229,212,0.95);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s var(--ease-out);
}
.nav-hamburger.burger svg { display: none; }
body.menu-open .nav-hamburger.burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-hamburger.burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-hamburger.burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  /* Liquid glass — heavy blur + subtle teal halo + thin dark wash */
  background:
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(95,217,194,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 70%, rgba(199,149,112,0.06), transparent 65%),
    linear-gradient(160deg, rgba(8,12,18,0.55), rgba(5,7,10,0.65));
  -webkit-backdrop-filter: blur(38px) saturate(1.6);
          backdrop-filter: blur(38px) saturate(1.6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  /* Owner spec 2026-05-29 v2: top padding restored to leave visible
     gap between the nav pill and the first menu item (~80px above the
     content, matching the inter-item spacing). Bottom padding respects
     iOS safe-area so the Install button never hides under the home bar
     on any phone. */
  padding: 96px 20px max(28px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(237,229,212,0.95);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease-out), transform .25s var(--ease-out), border-color .2s var(--ease-out);
}
.mobile-menu-close svg { width: 20px; height: 20px; }
.mobile-menu-close:hover { background: rgba(95,217,194,0.08); border-color: rgba(95,217,194,0.32); }
.mobile-menu-close:active { transform: scale(.92); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  max-width: 460px;
}
/* Owner spec 2026-05-29: items become real buttons — sans-serif uppercase,
   right-aligned, tighter spacing, subtle pill background. */
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  font-family: var(--sans, "Manrope", system-ui);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 3.6vw, 17px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237,229,212,0.94);
  text-decoration: none;
  text-align: right;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.6,.2,1),
    transform .55s cubic-bezier(.2,.6,.2,1),
    color .3s var(--ease-out),
    background .3s var(--ease-out),
    border-color .3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.mobile-menu.is-open .mobile-nav-link,
.mobile-menu.is-open .mobile-nav-group {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-link:hover,
.mobile-nav-link:active,
.mobile-nav-toggle[aria-expanded="true"] {
  color: var(--teal);
  background: rgba(95,217,194,0.08);
  border-color: rgba(95,217,194,0.40);
}

/* Group container — handles its own slide-in animation */
.mobile-nav-group {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.6,.2,1),
    transform .55s cubic-bezier(.2,.6,.2,1);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.mobile-nav-group .mobile-nav-link {
  /* Children inside group reset the slide animation — the group itself slides in */
  opacity: 1;
  transform: none;
  transition: color .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
  transition-delay: 0s;
}

/* Submenu toggle row — has a chevron */
.mobile-nav-toggle {
  width: 100%;
}
.mobile-nav-chevron {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(95,217,194,0.08);
  border: 1px solid rgba(95,217,194,0.18);
  color: var(--teal);
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .3s var(--ease-out);
}
.mobile-nav-chevron svg { width: 12px; height: 12px; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron {
  transform: rotate(-180deg);
  background: rgba(95,217,194,0.18);
}

/* Submenu — collapsed by default via grid-rows trick, expands smoothly */
.mobile-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-group.is-expanded .mobile-nav-submenu {
  grid-template-rows: 1fr;
}
/* The inner wrapper IS the single grid row child — collapses to 0 height when row track is 0fr */
.mns-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mobile-nav-submenu a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  text-decoration: none;
  font-family: var(--sans, "Manrope", system-ui);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237,229,212,0.78);
  padding: 10px 18px;
  margin: 4px 0;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  transition: color .3s var(--ease-out), background .3s var(--ease-out);
}
.mobile-nav-submenu a:hover { color: var(--teal); background: rgba(95,217,194,0.06); border-color: rgba(95,217,194,0.28); }
/* Owner spec 2026-05-29 v2: bottom row (lang + Install) pinned to the
   bottom of the menu (margin-top: auto pushes it down inside the flex
   column). Visible on any viewport without scrolling — list items
   scroll above if too tall, but the CTA stays anchored. */
.mobile-menu-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-cta-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.6,.2,1) 600ms,
    transform .55s cubic-bezier(.2,.6,.2,1) 600ms;
}
.mobile-menu.is-open .mobile-cta-row { opacity: 1; transform: translateY(0); }
.mobile-cta-row .mobile-cta {
  min-width: 220px;
  text-align: center;
  justify-content: center;
}
.mobile-cta {
  padding: 14px 28px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mobile-menu-lang {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.6,.2,1) 680ms,
    transform .55s cubic-bezier(.2,.6,.2,1) 680ms;
}
.mobile-menu.is-open .mobile-menu-lang { opacity: 1; transform: translateY(0); }
.mobile-menu-lang .lang {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
}
.mobile-menu-lang .lang button, .mobile-menu-lang .lang a {
  background: transparent;
  border: 0;
  color: rgba(237,229,212,0.75);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.mobile-menu-lang .lang button.active, .mobile-menu-lang .lang a.active {
  background: rgba(95,217,194,0.18);
  color: var(--teal);
}
body.menu-open { overflow: hidden; }

/* ============== Mobile-only feature block (badge + pills relocated from hero) ============== */
.mobile-feature-block {
  display: none;  /* hidden on desktop, revealed below */
  padding: clamp(28px, 5vh, 48px) var(--gut) clamp(28px, 5vh, 48px);
  position: relative;
  z-index: 1;
  background: var(--bg-0);
}
.mfb-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.mfb-inner .hero-badge-hero {
  /* on mobile, badge stays elegant without backdrop-filter (no portrait behind it) */
  background: rgba(95,217,194,0.05);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 22px;
}
.mfb-inner .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}
.mfb-inner .hero-pill {
  /* hero-pill styles from main pills, kept consistent */
  background: rgba(95,217,194,0.05);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ============== Mobile responsive rules ============== */
@media (max-width: 860px) {
  /* Hide desktop nav, show hamburger */
  .nav-links { display: none; }
  .nav .lang { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger.burger { display: inline-flex; }
}
@media (min-width: 861px) {
  .mobile-menu { display: none; }
}
@media (max-width: 720px) {
  /* Owner spec 2026-05-29: hero animation now matches desktop on mobile —
     overlay visible, mobile-feature-block hidden. Block (future + arrow
     + badge + pills) rises with canvas-dissolve to bg-0. */
  .hero-info-overlay { display: flex !important; }
  .mobile-feature-block { display: none; }
  /* Owner spec 2026-05-29: на мобиле убрать нижний градиент hero (от
     transparent сверху до bg-0 внизу). Артём: «именно этого градиента
     не было, все остальное не трогать». Покрывает оба правила —
     `.hero-minimal .hero-fade-bottom` и `.hero-fade-bottom`. */
  .hero-fade-bottom { display: none !important; }
  /* Owner spec 2026-05-29 (round 2): остался ещё один тёмный градиент
     на нижней четверти hero, который «катается вверх со скроллом» —
     это `.hero.hero-minimal .hero-overlay` (rgba(5,7,10,0.85) 88% →
     var(--bg-0) 100%). Снимаем background полностью на мобиле, оставляя
     ::after (зелёный radial-glow ambient). Скрин Артёма с обводкой
     красным контуром нижней половины hero — empirical подтверждение. */
  .hero.hero-minimal .hero-overlay { background: none !important; }
  /* Owner spec 2026-05-29 (round 4): палочка scroll-cue должна сидеть
     близко к (поднятой) надписи «Будущее уже здесь». .hero-future
     теперь bottom ~140-200px, поднимаю overlay top на ту же высоту +
     уменьшаю gap внутри .hero-info-inner чтобы cue прилипал к надписи.
     Раньше top = calc(100% - clamp(88,11vh,120)), gap = clamp(24,3vw,36). */
  .hero-info-overlay { top: calc(100% - clamp(170px, 24vh, 240px)) !important; }
  .hero-info-overlay .hero-info-inner { gap: clamp(10px, 1.8vw, 18px); }
  /* Slightly shorter stage on mobile — 180vh gives enough scroll length
     for the rise + fade animation without making the user scroll forever. */
  .hero.hero-minimal.hero-stage { min-height: 180vh; }
  /* On mobile, the rise amount is smaller (less viewport height to use) */
  .hero-stage.is-revealing .hero-info-overlay .hero-info-inner {
    transform: translateY(calc(var(--hero-reveal, 0) * -260px));
  }
  /* Hide lang switcher + install CTA in the top bar on mobile —
     they live inside the mobile menu instead. Only AVE logo + burger
     remain in the pill, burger pushes to the right. */
  .nav .lang { display: none; }
  .nav .nav-cta { display: none; }
}




/* ============================================================
   USE-CASES — 3D stage carousel (v10, 2026-05-29)
   Samadhi-inspired stage with futuristic conic-sweep + scan line.
   Active card center, prev/next on sides rotated, others hidden.
   ============================================================ */
.uc-stage {
  position: relative;
  perspective: 1800px;
  height: clamp(560px, 70vh, 700px);
  margin-top: 56px;
}
.uc-stage-track {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.uc-stage-card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(320px, 40vw, 500px);
  height: clamp(500px, 64vh, 620px);
  border-radius: 22px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition:
    transform 1s cubic-bezier(.5,0,.2,1),
    opacity 1s,
    filter 1s,
    box-shadow .5s;
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 44px 38px 36px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(95,217,194,0.10), transparent 55%),
    linear-gradient(180deg, rgba(28,28,30,0.86), rgba(18,18,20,0.86));
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  gap: 0;
  isolation: isolate;
}
.uc-stage-card.is-active {
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 5;
  border-color: rgba(95,217,194,0.28);
  box-shadow:
    0 50px 100px -25px rgba(0,0,0,0.7),
    0 0 0 1px rgba(95,217,194,0.18),
    inset 0 0 80px rgba(95,217,194,0.06);
}
.uc-stage-card.is-prev {
  transform: translate(-50%, -50%) translateX(-38%) translateZ(-300px) rotateY(38deg);
  opacity: 0.55;
  z-index: 2;
  filter: blur(0.5px) saturate(0.7);
}
.uc-stage-card.is-next {
  transform: translate(-50%, -50%) translateX(38%) translateZ(-300px) rotateY(-38deg);
  opacity: 0.55;
  z-index: 2;
  filter: blur(0.5px) saturate(0.7);
}
.uc-stage-card.is-hidden {
  transform: translate(-50%, -50%) translateZ(-700px) scale(0.5);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Rotating conic-gradient border sweep on active card */
.uc-card-bg {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 240deg,
    rgba(95,217,194,0.55) 305deg,
    rgba(199,149,112,0.35) 340deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
  z-index: 0;
}
.uc-stage-card.is-active .uc-card-bg {
  opacity: 1;
  animation: ucSweep 10s linear infinite;
}
@keyframes ucSweep {
  to { transform: rotate(360deg); }
}

/* Scan line on active card */
.uc-card-scan {
  position: absolute;
  left: 6%; right: 6%;
  height: 1px;
  top: 14%;
  background: linear-gradient(90deg, transparent, rgba(95,217,194,0.55), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 12px rgba(95,217,194,0.4);
}
.uc-stage-card.is-active .uc-card-scan {
  opacity: 0.7;
  animation: ucScan 6s ease-in-out infinite;
}
@keyframes ucScan {
  0%, 100% { top: 12%; opacity: 0.7; }
  48% { top: 88%; opacity: 0.7; }
  50% { top: 88%; opacity: 0; }
  98% { top: 12%; opacity: 0; }
}

/* Card num at the top */
.uc-stage-card .uc-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(95,217,194,0.75);
  margin-bottom: 22px;
  position: relative; z-index: 2;
}

/* Big icon */
.uc-stage-card .uc-icon {
  width: 76px; height: 76px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(95,217,194,0.10), rgba(95,217,194,0.04));
  border: 1px solid rgba(95,217,194,0.22);
  display: grid; place-items: center;
  margin-bottom: 28px;
  color: var(--teal);
  position: relative; z-index: 2;
  transition: transform .8s, box-shadow .8s;
}
.uc-stage-card .uc-icon svg { width: 38px; height: 38px; }
.uc-stage-card.is-active .uc-icon {
  box-shadow:
    0 0 36px rgba(95,217,194,0.30),
    inset 0 0 18px rgba(95,217,194,0.10);
  animation: ucIconPulse 3.6s ease-in-out infinite;
}
@keyframes ucIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Title */
.uc-stage-card h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  position: relative; z-index: 2;
}

/* Quote */
.uc-stage-card .uc-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(237,229,212,0.78);
  margin: 0;
  flex: 1;
  font-weight: 300;
  position: relative; z-index: 2;
}

/* Tags row */
.uc-stage-card .uc-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(199,149,112,0.7);
  line-height: 1.6;
  position: relative; z-index: 2;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Arrows */
.stage-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(20,20,22,0.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 30;
  transition: all .25s var(--ease);
}
.stage-arrow:hover {
  background: var(--teal); color: #0a0e0d; border-color: var(--teal);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 12px 28px -8px rgba(95,217,194,0.45);
}
.stage-arrow svg { width: 22px; height: 22px; }
.stage-prev { left: 2%; }
.stage-next { right: 2%; }

/* Dots */
.stage-dots {
  position: absolute;
  bottom: -36px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0;
  z-index: 20;
}
.stage-dots button {
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.stage-dots .dot-pip {
  display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all .35s var(--ease);
}
.stage-dots button.is-active .dot-pip {
  background: var(--teal);
  width: 32px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(95,217,194,0.5);
}

/* Tablet: shrink side cards */
@media (max-width: 1100px) {
  .uc-stage { height: clamp(540px, 76vh, 660px); }
  .uc-stage-card {
    width: min(80vw, 460px);
  }
  .uc-stage-card.is-prev {
    transform: translate(-50%, -50%) translateX(-46%) translateZ(-240px) rotateY(32deg);
  }
  .uc-stage-card.is-next {
    transform: translate(-50%, -50%) translateX(46%) translateZ(-240px) rotateY(-32deg);
  }
}

/* Mobile: single card, smaller side rotation, smaller arrows */
@media (max-width: 720px) {
  .uc-stage {
    height: clamp(540px, 80vh, 620px);
    perspective: 1200px;
    margin-top: 36px;
  }
  .uc-stage-card {
    width: min(82vw, 360px);
    height: clamp(470px, 70vh, 540px);
    padding: 32px 26px 26px;
    border-radius: 18px;
  }
  .uc-stage-card.is-prev {
    transform: translate(-50%, -50%) translateX(-62%) translateZ(-180px) rotateY(26deg);
    opacity: 0.32;
  }
  .uc-stage-card.is-next {
    transform: translate(-50%, -50%) translateX(62%) translateZ(-180px) rotateY(-26deg);
    opacity: 0.32;
  }
  .uc-stage-card .uc-icon { width: 64px; height: 64px; margin-bottom: 22px; }
  .uc-stage-card .uc-icon svg { width: 32px; height: 32px; }
  .uc-stage-card h3 { font-size: 26px; }
  .uc-stage-card .uc-quote { font-size: 15px; }
  .stage-arrow { width: 44px; height: 44px; }
  .stage-prev { left: 4px; }
  .stage-next { right: 4px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .uc-stage-card.is-active .uc-card-bg,
  .uc-stage-card.is-active .uc-card-scan,
  .uc-stage-card.is-active .uc-icon {
    animation: none;
  }
}