@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;600;700;800&family=DM+Serif+Display:opsz@9..40&family=Huninn&display=swap");

:root {
  /* ============================================================
     LuxuryBlock — Cyber Voxel unified system (preview 2026-06-27)
     Magenta · cyan · lime terminal · voxel infinity · dark nebula
     Branch: cursor/cyber-voxel-unified-preview
     ============================================================ */

  /* Cyber voxel core palette */
  --lb-obsidian: #050508;
  --lb-midnight: #0a0614;
  --lb-deep-blue: #120820;
  --lb-panel: rgba(12, 8, 22, 0.88);
  --lb-panel-strong: rgba(8, 5, 16, 0.94);
  --lb-gold: #e8c56a;
  --lb-gold-soft: #f0d88a;
  --lb-gold-deep: #a87830;
  --lb-cyan: #2de9ff;
  --lb-blue: #5cf4ff;
  --lb-green: #b8ff3c;
  --lb-pink: #ff2bd6;
  --lb-text-primary: #F5F2EA;
  --lb-text-secondary: #A6A6AA;
  --lb-text-muted: #6F737C;

  /* Legacy aliases remapped onto the new palette so the entire
     existing stylesheet re-skins to the starry system at once. */
  --space-black: var(--lb-obsidian);
  --luxury-gold: var(--lb-gold);
  --gold-dark: var(--lb-gold-deep);
  --gold-light: var(--lb-gold-soft);
  --ivory-white: var(--lb-text-primary);
  --tech-gray: #0e0818;                 /* violet-tinted surface */
  --deep-ocean-green: var(--lb-deep-blue);
  --star-blue: var(--lb-deep-blue);
  --neon-green: var(--lb-green);
  --accent-cyan: var(--lb-cyan);

  --bg: var(--lb-obsidian);
  --bg2: var(--lb-midnight);
  --surface: var(--tech-gray);
  --surface-2: #0c0616;
  --ink-panel: #040208;
  --gold-glow: rgba(255, 43, 214, 0.22);
  --green-glass: rgba(18, 8, 32, 0.55);
  --border: rgba(244, 240, 255, 0.08);
  --border-strong: rgba(255, 43, 214, 0.38);
  --text: var(--lb-text-primary);
  --muted: rgba(245, 242, 234, 0.66);
  --subtle: rgba(245, 242, 234, 0.45);
  --font-head: "Orbitron", "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "DM Serif Display", Georgia, serif;
  --font-terminal: "Share Tech Mono", ui-monospace, monospace;
  --font-latin-display: "Orbitron", "Space Grotesk", "Inter", sans-serif;
  --font-zh-hant: "Huninn", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-zh-hans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-ko: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ── Safe token consolidation (2026-06-26) — no brand-colour change ──
     RGB helpers preserve the exact scattered ambient-glow values so they
     resolve via rgba(var(--token), alpha) without re-colouring anything.
     Names avoid the existing --lb-deep-blue (#0B1B33) to prevent collision. */
  --lb-ambient-blue-rgb: 80, 20, 120;   /* violet nebula glow */
  --lb-ambient-indigo-rgb: 40, 12, 80;  /* deep indigo glow */
  --lb-status-green: #b8ff3c;
  --lb-status-green-rgb: 184, 255, 60;

  /* Single tech-grid cell + radius scale */
  --grid: 48px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* ── Motion system tokens (Step 3A) — definitions only, no animation applied ── */
  --motion-twinkle: 8s;
  --motion-drift: 120s;
  --motion-orbit: 240s;
  --motion-glow: 10s;
  --motion-hover: 220ms;
  --motion-fast: 160ms;
  --motion-medium: 320ms;
  --ease-space: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-hover: cubic-bezier(0.2, 0, 0, 1);
}

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

html {
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(255, 43, 214, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.012) 1px, transparent 1px),
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 43, 214, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 45% at 85% 15%, rgba(45, 233, 255, 0.1), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(80, 20, 120, 0.22), transparent 60%),
    var(--bg);
  background-size: var(--grid) var(--grid), var(--grid) var(--grid), auto, auto, auto, auto;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 42% at 88% 4%, rgba(255, 43, 214, 0.12), transparent 60%),
    radial-gradient(circle 620px at 85% 14%, transparent 0 444px, rgba(255, 43, 214, 0.1) 446px 450px, transparent 454px),
    radial-gradient(circle 820px at 85% 14%, transparent 0 624px, rgba(45, 233, 255, 0.06) 626px 630px, transparent 634px),
    radial-gradient(circle 900px at 9% 92%, transparent 0 632px, rgba(45, 233, 255, 0.1) 634px 639px, transparent 644px),
    radial-gradient(circle 1180px at 9% 92%, transparent 0 860px, rgba(184, 255, 60, 0.04) 862px 866px, transparent 870px),
    radial-gradient(ellipse 38% 30% at 70% 42%, rgba(var(--lb-ambient-blue-rgb), 0.2), transparent 70%),
    radial-gradient(ellipse 30% 26% at 22% 28%, rgba(255, 43, 214, 0.08), transparent 70%),
    radial-gradient(ellipse 44% 56% at 96% 8%, rgba(18, 8, 32, 0.35), transparent 68%),
    radial-gradient(ellipse 36% 44% at 4% 96%, rgba(var(--lb-ambient-blue-rgb), 0.22), transparent 68%),
    linear-gradient(90deg, rgba(255, 43, 214, 0.06), transparent 16%, transparent 84%, rgba(45, 233, 255, 0.06)),
    linear-gradient(180deg, rgba(244, 240, 255, 0.02), transparent 14%, rgba(0, 0, 0, 0.55));
  /* Step 3C — gentle nebula/halo drift for depth (amplitude <=3vw). Neutralised
     by the reduced-motion baseline and disabled on phones (see Step 3C block). */
  will-change: transform;
  animation: lb-nebula-drift var(--motion-drift) var(--ease-space) infinite alternate;
}

/* Soft star field — tiled, web-safe CSS speckling (no raster poster). Fixed for
   gentle parallax depth; sits below all content and below the top nav band. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.82;
  background-repeat: repeat;
  background-size: 460px 460px;
  background-image:
    radial-gradient(1.6px 1.6px at 42px 58px, rgba(255, 255, 255, 0.95), transparent 55%),
    radial-gradient(1.2px 1.2px at 168px 122px, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 286px 44px, rgba(245, 241, 232, 0.85), transparent 55%),
    radial-gradient(1.1px 1.1px at 360px 250px, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(2px 2px at 96px 312px, rgba(255, 43, 214, 0.75), transparent 55%),
    radial-gradient(1.3px 1.3px at 440px 96px, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1.8px 1.8px at 236px 360px, rgba(184, 255, 60, 0.65), transparent 55%),
    radial-gradient(1.7px 1.7px at 318px 298px, rgba(255, 43, 214, 0.62), transparent 55%),
    radial-gradient(1.6px 1.6px at 124px 168px, rgba(45, 233, 255, 0.62), transparent 55%),
    radial-gradient(1.8px 1.8px at 404px 332px, rgba(45, 233, 255, 0.62), transparent 55%),
    radial-gradient(1.1px 1.1px at 410px 410px, rgba(255, 255, 255, 0.65), transparent 55%),
    radial-gradient(1.7px 1.7px at 130px 430px, rgba(255, 255, 255, 0.8), transparent 55%),
    radial-gradient(1.2px 1.2px at 380px 180px, rgba(245, 242, 234, 0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 60px 200px, rgba(214, 180, 90, 0.55), transparent 55%),
    radial-gradient(1.1px 1.1px at 300px 150px, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(1px 1px at 200px 260px, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1px 1px at 20px 380px, rgba(255, 255, 255, 0.5), transparent 55%);
}

/* ================= Step 3C — hero ambient prototype =================
   Three low-amplitude, asynchronous ambient motions on existing layers.
   No new DOM (the second star layer rides html::before). Every layer here
   matches *, *::before or *::after, so the Step 3B reduced-motion baseline
   freezes all of them automatically — "先能關、再會動".
   - star twinkle : html::before (sparse 2nd sprite, breathes) — base stars
                    on body::after stay steady, so the field never pulses in
                    unison (禁止同步閃).
   - nebula drift : body::before (transform, applied above).
   - gold glow    : .hero-mock::after (applied near the hero-mock rule).
   =================================================================== */

/* Second, sparser star layer — sits deep behind the field and breathes on its
   own phase. Tile size 520px (vs body::after 460px) so the two never align. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background-repeat: repeat;
  background-size: 520px 520px;
  background-image:
    radial-gradient(1.5px 1.5px at 80px 140px, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 300px 60px, rgba(214, 180, 90, 0.8), transparent 55%),
    radial-gradient(1.3px 1.3px at 470px 220px, rgba(45, 220, 255, 0.7), transparent 55%),
    radial-gradient(1.1px 1.1px at 180px 360px, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 420px 440px, rgba(255, 255, 255, 0.8), transparent 55%),
    radial-gradient(1.2px 1.2px at 60px 470px, rgba(69, 240, 160, 0.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 360px 300px, rgba(255, 90, 205, 0.6), transparent 55%),
    radial-gradient(1.1px 1.1px at 250px 200px, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 500px 90px, rgba(78, 163, 255, 0.65), transparent 55%);
  will-change: opacity;
  animation: lb-twinkle var(--motion-twinkle) var(--ease-space) infinite alternate;
}

@keyframes lb-twinkle {
  from { opacity: 0.4; }
  to   { opacity: 0.8; }
}

@keyframes lb-nebula-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(2.2vw, -1.3vw, 0); }
}

@keyframes lb-gold-glow {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

/* Phones — drop the drift entirely (battery + anti-dizzy) and slow the gentle
   opacity breaths. reduced-motion still overrides everything via Step 3B.
   NOTE: the .hero-mock::after (gold glow) slow-down lives next to its base rule
   below — its base uses the `animation:` shorthand, which would reset any
   animation-duration declared before it, so the mobile override must come after. */
@media (max-width: 640px) {
  body::before { animation: none; will-change: auto; }
  html::before { animation-duration: 14s; }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 43, 214, 0.18);
  background:
    linear-gradient(90deg, rgba(255, 43, 214, 0.07), transparent 42%, rgba(45, 233, 255, 0.07)),
    linear-gradient(rgba(5, 5, 8, 0.82), rgba(8, 5, 16, 0.9));
  backdrop-filter: blur(22px);
  box-shadow:
    0 12px 30px -16px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(45, 233, 255, 0.08);
}

.site-nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 43, 214, 0.55) 38%, rgba(45, 233, 255, 0.5) 62%, transparent 100%);
}

.nav-inner {
  width: min(1180px, calc(100% - 40px));
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-link,
.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footer-brand-link {
  display: flex;
  max-width: 100%;
}

/* Cyber Voxel three-layer nav lockup: icon | meridian | wordmark+tagline */
.brand-lockup-cyber {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-logo-icon {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center center;
}

.brand-meridian {
  display: block;
  width: 2px;
  margin: 0 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 43, 214, 0.35) 0%,
    rgba(255, 43, 214, 0.85) 35%,
    rgba(45, 233, 255, 0.85) 65%,
    rgba(45, 233, 255, 0.35) 100%
  );
  border-radius: 1px;
  flex-shrink: 0;
}

.brand-lockup-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.brand-wordmark {
  font-family: var(--font-terminal);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--lb-green);
  text-shadow: 0 0 18px rgba(184, 255, 60, 0.35);
  white-space: nowrap;
}

.brand-tagline {
  font-family: var(--font-terminal);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lb-gold);
  white-space: nowrap;
}

.brand-tagline--equality {
  font-size: 7px;
  letter-spacing: 0.16em;
  color: var(--lb-text-muted);
  margin-top: 1px;
}

/* Nav — official splash lockup (LB letters + color spray); Ray scale: fill header box */
.site-nav .brand-lockup-cyber {
  align-items: center;
  gap: 12px;
}

.site-nav .brand-logo-icon {
  height: 56px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
}

.site-nav .brand-meridian {
  align-self: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

/* Footer — full asset, horizontal lockup, top-aligned with link columns */
.brand-lockup-cyber--footer {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

.brand-lockup-cyber--footer .brand-logo-icon {
  height: 56px;
  width: auto;
  max-width: 120px;
  flex-shrink: 0;
  margin-top: 0;
  object-fit: contain;
  object-position: left center;
}

.brand-lockup-cyber--footer .brand-meridian {
  display: block;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  margin-top: 2px;
  align-self: flex-start;
}

.brand-lockup-cyber--footer .brand-lockup-text {
  flex: 1;
  width: auto;
  min-width: 0;
  gap: 3px;
  padding-top: 0;
}

.brand-lockup-cyber--footer .brand-wordmark {
  font-size: 18px;
  line-height: 1.1;
}

.brand-lockup-cyber--footer .brand-tagline {
  font-size: 8px;
  letter-spacing: 0.18em;
  white-space: normal;
  max-width: 100%;
}

.brand-lockup-cyber--footer .brand-tagline--equality {
  font-size: 6.5px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  white-space: normal;
}

@media (min-width: 1280px) {
  .site-nav .brand-logo-icon {
    height: 72px;
    width: auto;
    max-width: 145px;
  }

  .site-nav .brand-meridian {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
  }

  .brand-wordmark { font-size: 22px; }
  .brand-tagline { font-size: 10px; }

  .brand-lockup-cyber--footer .brand-logo-icon {
    height: 68px;
    width: auto;
    max-width: 140px;
  }

  .brand-lockup-cyber--footer .brand-meridian {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }

  .brand-lockup-cyber--footer .brand-wordmark { font-size: 19px; }
}

@media (min-width: 1440px) {
  .site-nav .brand-logo-icon {
    height: 76px;
    max-width: 155px;
  }

  .site-nav .brand-meridian {
    height: 62px;
    min-height: 62px;
    max-height: 62px;
  }

  .brand-lockup-cyber--footer .brand-logo-icon {
    height: 72px;
    max-width: 150px;
  }

  .brand-lockup-cyber--footer .brand-meridian {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav .brand-lockup-cyber {
    gap: 10px;
  }

  .site-nav .brand-logo-icon {
    height: 64px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left center;
  }

  .site-nav .brand-meridian {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
  }

  .site-nav .brand-wordmark {
    font-size: 19px;
  }

  .site-nav .brand-tagline {
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .brand-lockup-cyber--footer .brand-logo-icon {
    height: 60px;
    max-width: 125px;
  }

  .brand-lockup-cyber--footer .brand-meridian {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }
}

@media (max-width: 1023px) {
  .site-nav .brand-logo-icon {
    height: 40px;
    width: auto;
    max-width: 74px;
  }

  .site-nav .brand-meridian {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .brand-wordmark { font-size: 17px; }
  .brand-tagline { font-size: 8px; letter-spacing: 0.2em; }

  .brand-lockup-cyber--footer .brand-logo-icon {
    height: 42px;
    width: auto;
  }

  .brand-lockup-cyber--footer .brand-meridian {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
}

@media (max-width: 767px) {
  .site-nav .brand-logo-icon {
    height: 36px;
    width: auto;
    max-width: 66px;
  }

  .site-nav .brand-meridian {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
  }

  .brand-wordmark { font-size: 15px; }
  .brand-tagline { font-size: 7px; letter-spacing: 0.16em; }
}

@media (max-width: 480px) {
  .brand-tagline { display: none; }
  .brand-lockup-cyber { gap: 8px; }
  .brand-lockup-cyber--footer .brand-tagline--equality { display: none; }
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(214, 175, 85, 0.38);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(214, 175, 85, 0.12), rgba(11, 27, 51, 0.18));
  padding: 5px;
  box-shadow: 0 0 0 1px rgba(245, 241, 232, 0.04), 0 18px 46px rgba(0, 0, 0, 0.42);
}

.brand-official-logo {
  width: 132px;
  height: 44px;
  object-fit: cover;
  object-position: 50% 25%;
  background: #050607;
}

.brand-logo-h {
  height: 64px;
  width: auto;
  max-width: 120px;        /* Icon-only 3D voxel ∞ (~1.85:1 at 64px height) */
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: none;
}

/* Nav header only — footer uses .site-footer .brand-logo-h */
.site-nav .brand-logo-h {
  max-width: 120px;
}

/* Desktop large: noticeably bigger, with a taller header to breathe */
@media (min-width: 1280px) {
  .brand-logo-h { height: 74px; }
  .nav-inner { min-height: 102px; }
}
/* Tablet */
@media (max-width: 1023px) {
  .brand-logo-h { height: 56px; }
  .nav-inner { min-height: 82px; }
}
/* Mobile */
@media (max-width: 767px) {
  .brand-logo-h { height: 46px; }
  .nav-inner { min-height: 72px; }
}

/* Footer logo — scoped higher than the header responsive rules so it is
   independent. (Decision: refined full transparent logo, sized to feel
   intentional and aligned with the footer columns; transparent so the footer
   glow shows through — no pasted box.) */
.site-footer .brand-logo-h {
  height: 96px;
  max-width: 140px;
  width: auto;
  filter: none;
  opacity: 1;
}

/* Legacy .footer-logo class: remove old 30px gold box frame */
.site-footer .brand-logo-h.footer-logo,
.site-footer img.footer-logo {
  border: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: 96px;
  max-width: 140px;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .site-footer .brand-logo-h { height: 84px; }
}
@media (max-width: 767px) {
  .site-footer .brand-logo-h { height: 72px; }
}

.brand-logo-h--sm {
  height: 36px;          /* legacy fallback; footer now governed by .site-footer .brand-logo-h */
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-name {
  color: var(--ivory-white);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
}

.brand-lab {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--lb-cyan);
  text-shadow: 0 0 10px rgba(45, 233, 255, 0.35);
}

.nav-links a.product-link {
  color: var(--text);
}

.nav-links a.nav-contact {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--luxury-gold);
  padding: 9px 14px;
}

.nav-links a.nav-contact:hover {
  background: rgba(214, 175, 85, 0.08);
}

.nav-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  color: var(--luxury-gold);
  cursor: pointer;
}

.nav-toggle:focus-visible,
.nav-links a:focus-visible,
.home-hero-actions .btn:focus-visible {
  outline: 2px solid rgba(214, 175, 85, 0.75);
  outline-offset: 3px;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  content: "";
}

.nav-toggle span::before {
  transform: translateY(-6px);
}

.nav-toggle span::after {
  transform: translateY(4px);
}

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: center;
  padding: 96px 0 72px;
  position: relative;
  overflow: visible;
}

.hero-inner {
  max-width: 860px;
  position: relative;
  z-index: 1;
}

.hero-centered {
  margin: 0 auto;
  text-align: center;
}

.eyebrow,
.kicker {
  color: var(--lb-green);
  font-family: var(--font-terminal);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(184, 255, 60, 0.28);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
.hero-title {
  color: var(--text);
  font-family: var(--font-head);
  font-size: clamp(46px, 9vw, 82px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: 22px;
}

.home-hero {
  min-height: calc(100vh - 72px);
  background:
    linear-gradient(108deg, rgba(5, 5, 8, 0.97) 0%, rgba(10, 6, 20, 0.88) 38%, rgba(8, 5, 16, 0.52) 64%, rgba(18, 8, 32, 0.64) 100%),
    url("images/hero-bg.webp"),
    linear-gradient(rgba(255, 43, 214, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.03) 1px, transparent 1px);
  background-position: center, center top, center, center;
  background-size: auto, cover, var(--grid) var(--grid), var(--grid) var(--grid);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 72% at 78% 44%, rgba(var(--lb-ambient-indigo-rgb), 0.24), transparent 65%),
    radial-gradient(ellipse 36% 44% at 82% 82%, rgba(255, 43, 214, 0.1), transparent 60%),
    linear-gradient(120deg, transparent 0%, rgba(45, 233, 255, 0.06) 38%, transparent 39%);
  opacity: 0.9;
}

.home-hero .hero-title {
  font-size: clamp(58px, 9vw, 106px);
  max-width: min(780px, 100%);
  box-sizing: border-box;
  background: linear-gradient(90deg, var(--lb-pink) 0%, #fff 45%, var(--lb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "copy visual"
    "actions visual";
  gap: 20px 48px;
  align-items: start;
  min-width: 0;
}

.home-hero-grid > * {
  min-width: 0;
}

.home-hero .hero-copy {
  grid-area: copy;
}

.home-hero-actions {
  grid-area: actions;
  align-self: start;
  margin-top: 4px;
}

.brand-cinema {
  position: relative;
  z-index: 1;
  min-height: 460px;
  border: 1px solid rgba(255, 43, 214, 0.35);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 64% 44% at 50% 36%, rgba(255, 43, 214, 0.12), transparent 60%),
    radial-gradient(ellipse 48% 36% at 64% 72%, rgba(45, 233, 255, 0.1), transparent 55%),
    #040208;
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 255, 0.05),
    0 44px 110px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 43, 214, 0.12),
    0 0 30px rgba(45, 233, 255, 0.1);
  overflow: hidden;
  padding: 24px;
}

.brand-cinema-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 1;
}

/* Homepage hero — full Cyber Voxel master board (oblique OK for marketing) */
.hero-cinema {
  min-height: 360px;
  aspect-ratio: 900 / 529;
  padding: 12px;
}

.hero-cinema .brand-cinema-image {
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 1023px) {
  .hero-cinema {
    min-height: 280px;
    max-width: 520px;
    margin-inline: auto;
  }

  .home-product-console {
    max-width: 520px;
    margin-inline: auto;
  }
}

.home-product-console {
  min-height: 360px;
}

/* Homepage hero — transparent cutout Creator Vault AI vault (vault-only raster) */
.home-hero-product-visual {
  grid-area: visual;
  display: block;
  width: 100%;
  max-width: min(100%, 520px);
  justify-self: center;
  align-self: center;
  margin: 0;
  background: transparent;
  overflow: visible;
}

.home-hero-product-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(480px, 62vh);
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

.hero-product-name {
  margin: 0 0 10px;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-privacy {
  margin: 0 0 22px;
  max-width: 36em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1279px) and (min-width: 961px) {
  .home-hero-product-image {
    max-height: min(460px, 68vh);
  }
}

/* ≤960px vault sizing is owned by Mobile Shared Experience Visual Reset block below. */

.brand-cinema > :not(.brand-cinema-image) {
  position: relative;
  z-index: 1;
}

.brand-cinema::before {
  z-index: 1;
}

.brand-cinema::after {
  z-index: 1;
}

.brand-cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.52) 100%);
  pointer-events: none;
}

.brand-cinema::after {
  content: none;
}

.cinema-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px;
  z-index: 2;
}

.cinema-wordmark {
  color: var(--luxury-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 18px;
  opacity: 0.88;
}

.cinema-tagline {
  color: var(--text);
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 32px;
}

.cinema-pillars {
  display: flex;
  align-items: center;
}

.cinema-pillars span {
  color: rgba(245, 241, 232, 0.38);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 18px;
  border-right: 1px solid rgba(214, 175, 85, 0.22);
}

.cinema-pillars span:last-child {
  border-right: none;
}

h2,
.section-title {
  color: var(--text);
  font-family: var(--font-head);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 18px;
}

h3 {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.lead {
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.75;
  margin-bottom: 32px;
}

.section {
  padding: 104px 0;
}

.section.alt {
  background:
    linear-gradient(180deg, rgba(8, 5, 16, 0.74), rgba(5, 5, 8, 0.9)),
    radial-gradient(ellipse 80% 48% at 50% 0%, rgba(255, 43, 214, 0.07), transparent 58%);
  border-bottom: 1px solid rgba(255, 43, 214, 0.1);
  border-top: 1px solid rgba(45, 233, 255, 0.08);
}

.section-compact {
  padding: 72px 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 44px;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.actions.center {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 18px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--lb-pink), #c94fd4 40%, var(--lb-cyan));
  color: #050508;
  box-shadow:
    0 14px 38px rgba(255, 43, 214, 0.28),
    0 0 0 1px rgba(45, 233, 255, 0.2),
    0 0 24px rgba(45, 233, 255, 0.12);
}

.btn-secondary {
  border: 1px solid rgba(45, 233, 255, 0.45);
  color: var(--lb-cyan);
  background: rgba(45, 233, 255, 0.04);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
}

.btn-tertiary {
  color: var(--luxury-gold);
  padding-left: 0;
  padding-right: 0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.stat-card,
.roadmap-card,
.price-card,
.note-card {
  border: 1px solid rgba(255, 43, 214, 0.14);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 60% at 8% 0%, rgba(255, 43, 214, 0.06), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 100%, rgba(45, 233, 255, 0.05), transparent 52%),
    linear-gradient(180deg, rgba(12, 8, 22, 0.92), rgba(5, 5, 8, 0.88));
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(244, 240, 255, 0.04);
  transition:
    transform var(--motion-hover) var(--ease-hover),
    border-color var(--motion-hover) var(--ease-hover),
    box-shadow var(--motion-hover) var(--ease-hover);
}

.card.gold-line,
.roadmap-card.active {
  border-color: rgba(255, 43, 214, 0.32);
  background:
    radial-gradient(ellipse 85% 65% at 12% 0%, rgba(255, 43, 214, 0.1), transparent 58%),
    radial-gradient(ellipse 60% 45% at 88% 100%, rgba(45, 233, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(14, 8, 24, 0.94), rgba(5, 5, 8, 0.9));
  box-shadow: inset 0 1px 0 rgba(232, 197, 106, 0.08), 0 0 24px rgba(255, 43, 214, 0.06);
}

/* Step 3D — product / content card hover: gentle lift + gold halo fades in.
   Cards are fully static at rest (only responds on hover). The lift is dropped
   under prefers-reduced-motion (see Step 3B block), leaving instant colour/shadow. */
.card:hover,
.stat-card:hover,
.roadmap-card:hover,
.price-card:hover,
.note-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 233, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(245, 241, 232, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(255, 43, 214, 0.12);
}

.card p,
.roadmap-card p,
.price-card p,
.note-card p,
.stat-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.card-label,
.status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 14px;
  padding: 7px 10px;
  text-transform: uppercase;
}

.status-dev {
  background: rgba(11, 27, 51, 0.56);
  color: var(--neon-green);
}

.status-live {
  background: rgba(212, 175, 55, 0.14);
  color: var(--luxury-gold);
}

.status-muted {
  background: rgba(245, 241, 232, 0.06);
  color: var(--muted);
}

.status-future {
  border: 1px solid var(--border);
  color: var(--subtle);
}

.pull-quote {
  border-left: 2px solid rgba(255, 43, 214, 0.55);
  color: var(--text);
  font-family: var(--font-accent);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.18;
  margin: 32px 0 0;
  padding-left: 22px;
}

.visual-panel {
  border: 1px solid rgba(255, 43, 214, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 72% 54% at 28% 48%, rgba(var(--lb-ambient-indigo-rgb), 0.55), transparent 62%),
    radial-gradient(ellipse 52% 42% at 82% 52%, rgba(45, 233, 255, 0.12), transparent 60%),
    linear-gradient(rgba(255, 43, 214, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.04) 1px, transparent 1px),
    #040208;
  background-size: auto, auto, var(--grid) var(--grid), var(--grid) var(--grid), auto;
  min-height: 340px;
  padding: 28px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(45, 233, 255, 0.06);
}

.signal-stack {
  display: grid;
  gap: 12px;
}

.signal-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  color: var(--muted);
  font-size: 14px;
  padding: 14px 0;
}

.signal-row strong {
  color: var(--text);
}

.mock-window {
  border: 1px solid rgba(45, 220, 255, 0.26);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(7, 13, 22, 0.99), rgba(4, 8, 14, 0.97));
  box-shadow:
    0 38px 96px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(245, 242, 234, 0.04),
    0 0 0 1px rgba(45, 220, 255, 0.1),
    0 0 36px rgba(45, 220, 255, 0.09);
}

.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  padding: 12px;
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--subtle);
}

.console-title {
  color: rgba(245, 241, 232, 0.54);
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.mock-body {
  display: grid;
  grid-template-columns: 170px 1fr;
  min-height: 330px;
}

.mock-sidebar {
  border-right: 1px solid var(--border);
  padding: 18px 12px;
}

.mock-menu-item {
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
  padding: 8px 10px;
}

.mock-menu-item.active {
  background: rgba(45, 220, 255, 0.12);
  color: var(--lb-cyan);
  box-shadow: inset 2px 0 0 rgba(45, 220, 255, 0.65);
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.asset-tile {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.58)),
    linear-gradient(145deg, rgba(30, 58, 95, 0.9), rgba(11, 27, 51, 0.88));
  display: flex;
  align-items: end;
  color: rgba(245, 241, 232, 0.74);
  font-size: 11px;
  padding: 8px;
}

.product-hero {
  background:
    linear-gradient(118deg, rgba(5, 5, 8, 0.98) 0%, rgba(10, 6, 20, 0.94) 44%, rgba(8, 5, 16, 0.72) 100%),
    linear-gradient(rgba(255, 43, 214, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse 52% 44% at 72% 18%, rgba(var(--lb-ambient-indigo-rgb), 0.42), transparent 62%),
    radial-gradient(ellipse 30% 28% at 80% 12%, rgba(255, 43, 214, 0.08), transparent 60%),
    radial-gradient(ellipse 28% 52% at 0% 50%, rgba(45, 233, 255, 0.07), transparent 55%);
  background-position: center, center, center, center, center, center;
  background-size: auto, var(--grid) var(--grid), var(--grid) var(--grid), auto, auto, auto;
}

.product-hero-grid {
  gap: 58px;
}

.product-console {
  position: relative;
}

.product-tech-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center center;
  padding: 18px 24px 8px;
  opacity: 0.95;
  border-bottom: 1px solid rgba(45, 220, 255, 0.24);
  filter: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgba(214, 175, 85, 0.08), transparent 68%),
    rgba(5, 7, 10, 0.55);
}

.product-console::before {
  content: "";
  position: absolute;
  inset: 42px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 220, 255, 0.6), rgba(214, 180, 90, 0.3), rgba(45, 220, 255, 0.6), transparent);
  z-index: 1;
}

.console-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid rgba(245, 241, 232, 0.08);
  background: rgba(7, 8, 10, 0.72);
}

.console-metrics span {
  color: rgba(245, 241, 232, 0.58);
  font-size: 11px;
  font-weight: 700;
  padding: 12px;
  text-align: center;
}

.price {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 44px;
  line-height: 1;
}

.price small {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
}

.clean-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.clean-list li {
  border-top: 1px solid rgba(245, 241, 232, 0.08);
  color: var(--muted);
  padding: 10px 0;
}

.page-header {
  position: relative;
  overflow: hidden;
  padding: 88px 0 56px;
  background:
    linear-gradient(108deg, rgba(5, 5, 8, 0.97) 0%, rgba(10, 6, 20, 0.92) 48%, rgba(18, 8, 32, 0.82) 100%),
    url("images/hero-bg.webp"),
    linear-gradient(rgba(255, 43, 214, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.025) 1px, transparent 1px);
  background-position: center, center top, center, center;
  background-size: auto, cover, var(--grid) var(--grid), var(--grid) var(--grid);
  border-bottom: 1px solid rgba(255, 43, 214, 0.14);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 58% at 84% 24%, rgba(var(--lb-ambient-indigo-rgb), 0.24), transparent 65%),
    radial-gradient(ellipse 30% 38% at 10% 78%, rgba(255, 43, 214, 0.09), transparent 60%);
  pointer-events: none;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: clamp(36px, 5.8vw, 62px);
  max-width: 920px;
  background: linear-gradient(92deg, var(--lb-pink) 0%, #fff 44%, var(--lb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-header .lead {
  max-width: 720px;
}

.text-column {
  max-width: 760px;
}

.legal-content {
  max-width: 820px;
}

.legal-content h2 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  margin-top: 38px;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

.contact-email {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--luxury-gold);
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  padding: 16px 18px;
  text-decoration: none;
}

.site-footer {
  border-top: 1px solid rgba(255, 43, 214, 0.16);
  background:
    radial-gradient(ellipse 60% 90% at 12% 50%, rgba(255, 43, 214, 0.08), transparent 65%),
    radial-gradient(ellipse 40% 70% at 88% 50%, rgba(45, 233, 255, 0.06), transparent 65%),
    linear-gradient(90deg, rgba(255, 43, 214, 0.05), transparent 38%, rgba(45, 233, 255, 0.05)),
    rgba(5, 5, 8, 0.96);
  padding: 54px 0 34px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

/* Grid items default min-width:auto lets nowrap taglines paint over the next column */
.footer-grid > div:first-child {
  min-width: 0;
  overflow-x: clip;
}

.footer-logo {
  border: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
}

.footer-official-logo {
  width: 116px;
  height: 40px;
  object-fit: cover;
  object-position: 50% 25%;
  background: #050607;
}

.footer-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px;
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-links a,
.footer-subcopy {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--luxury-gold);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  color: var(--subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 22px;
  font-size: 12px;
}

/* ── Website Sprint additions (2026-06-14): trust section, steps, CTA band, alpha note ── */
.section-lead {
  max-width: 720px;
}

.bps-card h3 {
  color: var(--luxury-gold);
  font-family: var(--font-head);
  letter-spacing: 0.02em;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--luxury-gold);
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 14px;
  background: rgba(214, 175, 85, 0.06);
}

.alpha-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  margin-bottom: 18px;
}

.alpha-note .status {
  margin-bottom: 0;
}

.cta-band {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 60% 80% at 20% 30%, rgba(214, 175, 85, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 70%, rgba(11, 27, 51, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(28, 28, 34, 0.9), rgba(17, 18, 21, 0.86));
  padding: 56px 40px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(214, 175, 85, 0.1), 0 0 36px rgba(214, 175, 85, 0.05);
}

.cta-band h2 {
  margin-bottom: 14px;
}

.cta-band .lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.feature-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 768px) {
  .cta-band {
    padding: 40px 22px;
  }
}

@media (max-width: 960px) {
  .split,
  .home-hero-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Collapse the nav to a hamburger from tablet down, so the logo + links +
   Contact + Region/Language never crowd. (Was 768px, which left 769–1023 cramped.)
   Placed AFTER the base .nav-links/.nav-toggle rules so it wins the cascade. */
@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    position: absolute;
    top: 84px;
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(11, 11, 13, 0.98);
    padding: 12px;
  }
  .nav-links a {
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    padding: 12px;
  }
  .nav-links a:last-child {
    border-bottom: 0;
  }
  .nav-check:checked ~ .nav-links {
    display: flex;
  }
  /* Region/Language trigger sits full-width inside the open mobile menu */
  .lang-trigger {
    margin: 8px 0 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 36px, 1100px);
  }

  .nav-links { top: 76px; }

  .hero {
    min-height: auto;
    padding: 72px 0 64px;
  }

  .section {
    padding: 72px 0;
  }

  .brand-cinema {
    min-height: 360px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .mock-body {
    grid-template-columns: 1fr;
  }

  .mock-sidebar {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .mock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .console-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .brand-lab {
    display: none;
  }

  .container {
    width: calc(100vw - 40px);
    max-width: 100%;
  }

  .split > *,
  .home-hero-grid > *,
  .product-hero-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  h1,
  .hero-title {
    font-size: clamp(34px, 9vw, 54px);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .home-hero .hero-title {
    font-size: clamp(36px, 10vw, 56px);
  }

  .lead {
    font-size: 16px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

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

  .btn {
    width: 100%;
  }

  .card,
  .stat-card,
  .roadmap-card,
  .price-card,
  .note-card,
  .visual-panel {
    padding: 20px;
  }
}

/* ---- LuxuryBlock Soul Suite toggle (injected by soul-player.js) ---- */
.soul-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(214, 175, 85, 0.34);
  background: rgba(8, 9, 12, 0.86);
  color: var(--luxury-gold, #d6af55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.soul-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 175, 85, 0.55);
}

.soul-toggle:focus-visible {
  outline: 2px solid rgba(214, 175, 85, 0.6);
  outline-offset: 2px;
}

.soul-toggle .soul-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.32);
  box-shadow: 0 0 0 1px rgba(245, 241, 232, 0.08);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.soul-toggle.is-on {
  border-color: rgba(214, 175, 85, 0.7);
}

.soul-toggle.is-on .soul-dot {
  background: var(--luxury-gold, #d6af55);
  box-shadow: 0 0 8px rgba(214, 175, 85, 0.6);
}

@media (max-width: 640px) {
  .soul-toggle {
    right: 12px;
    bottom: 12px;
    padding: 8px 12px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Step 3B — reduced-motion baseline. Neutralise all ambient / entrance motion
     and make interactive transitions resolve instantly. Uses near-zero durations
     rather than fully disabling motion, so transitionend / animationend events
     still fire and JS that waits on them does not hang. Hover colour / shadow
     feedback is kept, just without easing. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .soul-toggle,
  .soul-toggle:hover {
    transition: none;
    transform: none;
  }

  /* Step 3D — keep card hover colour/shadow feedback, but no positional lift. */
  .card:hover,
  .stat-card:hover,
  .roadmap-card:hover,
  .price-card:hover,
  .note-card:hover {
    transform: none;
  }
}

/* =====================================================================
   LuxuryBlock StarBase preview — 3D orbit / DOS transmission / Book-Slide
   Scoped to .cvai-starbase-page. No shared homepage or product-detail rules.
   ===================================================================== */

.cvai-starbase-page {
  background:
    radial-gradient(ellipse 66% 52% at 82% 18%, rgba(41, 228, 255, 0.13), transparent 64%),
    radial-gradient(ellipse 56% 46% at 18% 16%, rgba(255, 43, 214, 0.11), transparent 68%),
    linear-gradient(112deg, #02040c 0%, #09051b 46%, #020a16 100%);
}

.cvai-starbase-page .site-nav {
  border-bottom-color: rgba(45, 233, 255, 0.2);
  background: rgba(2, 4, 12, 0.82);
}

.cvai-starbase-page .sb3-hero {
  min-height: calc(100svh - 88px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-bottom: 1px solid rgba(45, 233, 255, 0.18);
  background:
    linear-gradient(rgba(45, 233, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 46%, rgba(45, 233, 255, 0.13), transparent 28%),
    radial-gradient(circle at 69% 45%, rgba(255, 43, 214, 0.11), transparent 43%),
    linear-gradient(116deg, #02040c 0%, #0a061c 48%, #02101c 100%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

.cvai-starbase-page .sb3-hero::before,
.cvai-starbase-page .sb3-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.cvai-starbase-page .sb3-hero::before {
  width: min(68vw, 1080px);
  aspect-ratio: 1;
  right: -18vw;
  top: 2%;
  border: 1px solid rgba(45, 233, 255, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 120px rgba(45, 233, 255, 0.08), inset 0 0 90px rgba(255, 43, 214, 0.04);
}

.cvai-starbase-page .sb3-hero::after {
  width: 58%;
  height: 1px;
  right: -5%;
  top: 31%;
  background: linear-gradient(90deg, transparent, rgba(45, 233, 255, 0.55), transparent);
  transform: rotate(-12deg);
  box-shadow: 0 0 18px rgba(45, 233, 255, 0.34);
}

.cvai-starbase-page .sb3-dos {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding-inline: clamp(20px, 3vw, 56px);
  border-block: 1px solid rgba(45, 233, 255, 0.16);
  color: rgba(171, 255, 83, 0.78);
  background: rgba(0, 6, 12, 0.82);
  font-family: var(--font-terminal);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.cvai-starbase-page .sb3-dos--top {
  border-top: 0;
}

.cvai-starbase-page .sb3-dos--bottom {
  justify-content: flex-end;
  border-bottom: 0;
  color: rgba(45, 233, 255, 0.68);
}

.cvai-starbase-page .sb3-hero-grid {
  min-height: calc(100svh - 164px);
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(54px, 7vh, 96px);
}

.cvai-starbase-page .sb3-hero-copy {
  min-width: 0;
  position: relative;
  z-index: 3;
}

.cvai-starbase-page .sb3-hero-copy .cvai-page-title {
  max-width: 770px;
  margin-block: 20px 24px;
  font-size: clamp(42px, 4.2vw, 68px);
  line-height: 1.02;
}

.cvai-starbase-page .sb3-hero-copy .cvai-page-lead {
  max-width: 690px;
}

.cvai-starbase-page .sb3-system {
  max-width: 660px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  border: 1px solid rgba(45, 233, 255, 0.14);
  background: rgba(45, 233, 255, 0.14);
}

.cvai-starbase-page .sb3-system span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  color: rgba(244, 240, 255, 0.52);
  background: rgba(2, 6, 14, 0.9);
  font-family: var(--font-terminal);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.cvai-starbase-page .sb3-system b {
  color: #abff53;
  font-size: 10px;
  font-weight: 600;
}

.cvai-starbase-page .sb3-system span:nth-child(2) b {
  color: var(--lb-cyan);
}

.cvai-starbase-page .sb3-system span:nth-child(3) b {
  color: var(--cvai-gold-light);
}

.cvai-starbase-page .sb3-hero-visual {
  min-width: 0;
  position: relative;
  z-index: 2;
  margin: 0;
  border: 1px solid rgba(45, 233, 255, 0.32);
  border-radius: 28px 6px 28px 6px;
  overflow: hidden;
  background: rgba(1, 5, 12, 0.78);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.48), 0 0 62px rgba(45, 233, 255, 0.12), inset 0 0 40px rgba(255, 43, 214, 0.06);
}

.cvai-starbase-page .sb3-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 43, 214, 0.25);
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09), transparent 16%, transparent 78%, rgba(45, 233, 255, 0.08));
}

.cvai-starbase-page .sb3-hero-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

.cvai-starbase-page .sb3-hero-visual figcaption {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  padding: 13px clamp(16px, 2vw, 28px);
  border-top: 1px solid rgba(45, 233, 255, 0.2);
  color: rgba(244, 240, 255, 0.5);
  background: rgba(1, 5, 12, 0.92);
  font-family: var(--font-terminal);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cvai-starbase-page .sb3-hero-visual figcaption span {
  color: var(--lb-pink);
}

.cvai-starbase-page .sb3-orbit {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 49%;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.cvai-starbase-page .sb3-orbit--outer {
  width: 88%;
  aspect-ratio: 1.8;
  border: 1px solid rgba(45, 233, 255, 0.38);
  box-shadow: 0 0 22px rgba(45, 233, 255, 0.16);
}

.cvai-starbase-page .sb3-orbit--inner {
  width: 66%;
  aspect-ratio: 1.7;
  border: 1px solid rgba(255, 43, 214, 0.42);
  transform: translate(-50%, -50%) rotate(8deg);
  box-shadow: 0 0 20px rgba(255, 43, 214, 0.14);
}

.cvai-starbase-page .sb3-gallery-section {
  overflow: clip;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(45, 233, 255, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.98), rgba(9, 4, 20, 0.96));
}

.cvai-starbase-page .sb3-book-slide {
  min-height: 620px;
  margin-top: 40px;
  perspective: 1800px;
}

.cvai-starbase-page .sb3-book-stage {
  min-height: 590px;
}

.cvai-starbase-page .sb3-book-card {
  width: min(820px, calc(100% - 220px));
  min-height: 540px;
  top: 12px;
  padding: 0;
  border-color: rgba(45, 233, 255, 0.28);
  border-radius: 24px 6px 24px 6px;
  overflow: hidden;
  background: rgba(2, 5, 13, 0.96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52), 0 0 40px rgba(45, 233, 255, 0.08);
}

.cvai-starbase-page .sb3-book-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  display: block;
  border-bottom: 1px solid rgba(45, 233, 255, 0.18);
  object-fit: contain;
  object-position: center;
  background: #01040a;
  pointer-events: none;
}

.cvai-starbase-page .sb3-book-card > div {
  padding: 24px clamp(22px, 3vw, 38px) 30px;
}

.cvai-starbase-page .sb3-book-card > div > span {
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cvai-starbase-page .sb3-book-card h3 {
  margin: 10px 0 8px;
  font-family: var(--font-head);
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
}

.cvai-starbase-page .sb3-book-card p {
  max-width: 690px;
  margin: 0;
}

.cvai-starbase-page .sb3-book-card small {
  display: block;
  margin-top: 14px;
  color: rgba(171, 255, 83, 0.7);
  font-family: var(--font-terminal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cvai-starbase-page .sb3-book-slide .cvai-book-control {
  top: 262px;
  background: rgba(2, 5, 13, 0.92);
  box-shadow: 0 0 24px rgba(45, 233, 255, 0.12);
}

.cvai-starbase-page .sb3-book-slide .cvai-book-position {
  bottom: 4px;
}

@media (max-width: 1120px) {
  .cvai-starbase-page .sb3-hero-grid {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-block: 72px;
  }

  .cvai-starbase-page .sb3-hero-copy,
  .cvai-starbase-page .sb3-hero-visual {
    width: min(100%, 920px);
  }

  .cvai-starbase-page .sb3-hero-copy .cvai-page-title {
    max-width: 820px;
  }

  .cvai-starbase-page .sb3-hero-visual {
    justify-self: end;
  }

  .cvai-starbase-page .sb3-book-card {
    width: min(760px, calc(100% - 150px));
  }
}

@media (max-width: 720px) {
  .cvai-starbase-page .sb3-dos {
    min-height: 34px;
    padding-inline: 20px;
    font-size: 8px;
  }

  .cvai-starbase-page .sb3-dos--bottom {
    justify-content: flex-start;
  }

  .cvai-starbase-page .sb3-hero-grid {
    width: calc(100% - 40px);
    gap: 38px;
    padding-block: 52px;
  }

  .cvai-starbase-page .sb3-hero-copy .cvai-page-title {
    margin-block: 16px 20px;
    font-size: clamp(35px, 10.2vw, 51px);
    line-height: 1.03;
  }

  .cvai-starbase-page .sb3-hero-copy .cvai-page-lead {
    font-size: 16px;
    line-height: 1.7;
  }

  .cvai-starbase-page .sb3-system {
    grid-template-columns: 1fr;
  }

  .cvai-starbase-page .sb3-system span {
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
  }

  .cvai-starbase-page .sb3-hero-visual {
    border-radius: 18px 4px 18px 4px;
  }

  .cvai-starbase-page .sb3-hero-visual figcaption {
    padding: 11px 14px;
    font-size: 8px;
  }

  .cvai-starbase-page .sb3-book-slide {
    min-height: 520px;
    margin-top: 28px;
    padding-bottom: 58px;
  }

  .cvai-starbase-page .sb3-book-stage {
    min-height: 452px;
  }

  .cvai-starbase-page .sb3-book-card {
    width: calc(100% - 36px);
    min-height: 420px;
    top: 8px;
    border-radius: 16px 4px 16px 4px;
  }

  .cvai-starbase-page .sb3-book-card > div {
    padding: 18px 18px 22px;
  }

  .cvai-starbase-page .sb3-book-card h3 {
    font-size: 25px;
  }

  .cvai-starbase-page .sb3-book-card p {
    font-size: 14px;
    line-height: 1.55;
  }

  .cvai-starbase-page .sb3-book-card[data-position="previous"] {
    transform: translateX(calc(-50% - 82% + var(--cvai-book-drag-x, 0px))) scale(0.82) rotate(2deg);
  }

  .cvai-starbase-page .sb3-book-card[data-position="next"] {
    transform: translateX(calc(-50% + 82% + var(--cvai-book-drag-x, 0px))) scale(0.82) rotate(-2deg);
  }

  .cvai-starbase-page .sb3-book-slide .cvai-book-control {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: 4px;
    transform: none;
  }

  .cvai-starbase-page .sb3-book-slide .cvai-book-control--previous {
    left: 0;
  }

  .cvai-starbase-page .sb3-book-slide .cvai-book-control--next {
    right: 0;
  }

  .cvai-starbase-page .sb3-book-slide .cvai-book-position {
    right: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 2026-08-08 owner review: one official LuxuryBlock lockup scale everywhere.
   Product pages may change their content, but the company masthead does not. */
.site-nav .brand-lockup-cyber {
  height: 60px;
  align-items: center;
  gap: 12px;
}

.site-nav .brand-logo-icon {
  width: 96px;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.site-nav .brand-meridian {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  align-self: center;
}

.site-nav .brand-wordmark {
  font-size: 18px;
}

.site-nav .brand-tagline {
  font-size: 8px;
  letter-spacing: 0.18em;
}

/* Footer is navigation, not a second billboard. */
.site-footer .footer-grid:not(.footer-grid--links-only) > div:first-child:has(.footer-brand-link),
.site-footer .container.footer-grid > div:first-child:has(.footer-brand) {
  display: none;
}

.site-footer .footer-grid:not(.footer-grid--links-only) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lb-company-card {
  min-height: 420px;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
}

.lb-company-emblem {
  width: min(360px, 72%);
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 28px rgba(255, 43, 214, 0.24)) drop-shadow(0 0 30px rgba(45, 233, 255, 0.18));
}

.lb-company-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.lb-company-pillars span {
  padding: 10px 8px;
  border: 1px solid rgba(45, 233, 255, 0.24);
  border-radius: 999px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cvai-product-real-shot,
.cvai-download-preview {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(45, 233, 255, 0.34);
  border-radius: 24px;
  background: rgba(2, 8, 14, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38), 0 0 44px rgba(45, 233, 255, 0.08);
}

.cvai-product-real-shot img,
.cvai-download-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.cvai-download-preview figcaption {
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 12px;
}

@media (min-width: 721px) and (max-width: 1023px) {
  .site-nav .brand-lockup-cyber { height: 52px; gap: 10px; }
  .site-nav .brand-logo-icon { width: 84px; }
  .site-nav .brand-meridian { height: 40px; min-height: 40px; max-height: 40px; }
}

@media (max-width: 720px) {
  .site-nav .brand-lockup-cyber { height: 44px; gap: 9px; }
  .site-nav .brand-logo-icon { width: 72px; }
  .site-nav .brand-meridian { height: 36px; min-height: 36px; max-height: 36px; }
  .site-nav .brand-wordmark { font-size: 16px; }
  .site-footer .footer-grid:not(.footer-grid--links-only) { grid-template-columns: 1fr; }
  .lb-company-card { min-height: 320px; }
  .lb-company-emblem { width: min(300px, 84%); }
  .lb-company-pillars { grid-template-columns: 1fr; }
}

/* StarBase scroll narrative — lightweight CSS + IntersectionObserver only.
   Desktop uses a sticky editorial rail; tablet/mobile falls back to normal flow. */
.cvai-starbase-page .sb3-kinetic {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 96px;
  border-bottom: 1px solid rgba(45, 233, 255, 0.16);
  background:
    radial-gradient(ellipse 44% 30% at 22% 18%, rgba(255, 43, 214, 0.1), transparent 72%),
    radial-gradient(ellipse 46% 34% at 78% 68%, rgba(45, 233, 255, 0.09), transparent 72%),
    linear-gradient(180deg, #02040c 0%, #080418 52%, #020914 100%);
}

.cvai-starbase-page .sb3-kinetic::before {
  content: "";
  width: 34%;
  height: 1px;
  position: absolute;
  z-index: -1;
  left: -34%;
  top: 31%;
  background: linear-gradient(90deg, transparent, rgba(45, 233, 255, 0.74), transparent);
  box-shadow: 0 0 22px rgba(45, 233, 255, 0.35);
  animation: sb3-kinetic-scan 6s linear infinite;
}

.cvai-starbase-page .sb3-kinetic-ribbons {
  display: grid;
  gap: clamp(4px, 0.6vw, 10px);
  position: relative;
  z-index: 1;
  padding: clamp(54px, 6vw, 92px) 0 clamp(22px, 2.4vw, 38px);
  overflow: hidden;
  border-bottom: 1px solid rgba(45, 233, 255, 0.12);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cvai-starbase-page .sb3-kinetic-ribbon {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.cvai-starbase-page .sb3-kinetic-ribbon-track,
.cvai-starbase-page .sb3-kinetic-ribbon-set {
  display: flex;
  width: max-content;
  align-items: center;
}

.cvai-starbase-page .sb3-kinetic-ribbon-track {
  will-change: transform;
  animation: sb3-kinetic-marquee 18s linear infinite;
}

.cvai-starbase-page .sb3-kinetic-ribbon--reverse .sb3-kinetic-ribbon-track {
  animation-duration: 23s;
  animation-direction: reverse;
}

.cvai-starbase-page .sb3-kinetic-ribbon-set {
  gap: clamp(28px, 3.2vw, 64px);
  padding-right: clamp(28px, 3.2vw, 64px);
}

.cvai-starbase-page .sb3-kinetic-ribbon span {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(34px, 6.2vw, 98px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: transparent;
  background: linear-gradient(90deg, var(--lb-cyan) 0%, #ac72ff 38%, var(--lb-pink) 67%, #f4d56b 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 36px rgba(45, 233, 255, 0.12);
  animation: sb3-kinetic-spectrum 6s ease-in-out infinite alternate;
}

.cvai-starbase-page .sb3-kinetic-ribbon--reverse {
  opacity: 0.48;
}

.cvai-starbase-page .sb3-kinetic-ribbon--reverse span {
  font-size: clamp(22px, 3.4vw, 52px);
  letter-spacing: 0.08em;
  background-image: linear-gradient(90deg, rgba(244, 240, 255, 0.9), var(--lb-cyan), rgba(244, 240, 255, 0.92), var(--lb-pink));
}

.cvai-starbase-page .sb3-kinetic-grid {
  width: min(1760px, calc(100% - clamp(40px, 5vw, 104px)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  gap: clamp(54px, 6vw, 112px);
  align-items: start;
  padding-block: clamp(92px, 9vw, 150px);
}

.cvai-starbase-page .sb3-kinetic-sticky {
  min-width: 0;
  position: sticky;
  top: 118px;
  align-self: start;
}

.cvai-starbase-page .sb3-kinetic-sticky > h2 {
  max-width: 720px;
  margin: 22px 0 46px;
  font-family: var(--font-head);
  font-size: clamp(32px, 3.1vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.cvai-starbase-page .sb3-kinetic-index {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cvai-starbase-page .sb3-kinetic-index li {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: 13px;
  color: rgba(244, 240, 255, 0.32);
  opacity: 0.56;
  transform: translateX(0);
  transition: color 560ms ease, opacity 560ms ease, transform 560ms ease;
}

.cvai-starbase-page .sb3-kinetic-index li > span {
  padding-top: 0.42em;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.cvai-starbase-page .sb3-kinetic-index strong {
  max-width: 690px;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1.12;
}

.cvai-starbase-page .sb3-kinetic-index li.is-active {
  color: var(--text);
  opacity: 1;
  transform: translateX(10px);
}

.cvai-starbase-page .sb3-kinetic-index li.is-active strong {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 220% 100%;
  animation: sb3-kinetic-spectrum 5s ease-in-out infinite alternate;
}

.cvai-starbase-page .sb3-kinetic-index li:nth-child(1).is-active strong {
  background-image: linear-gradient(154deg, #fffdf8 8%, #e2d8ee 52%, #ffffff 90%);
}

.cvai-starbase-page .sb3-kinetic-index li:nth-child(2).is-active strong,
.cvai-starbase-page .sb3-kinetic-index li:nth-child(3).is-active strong {
  background-image: linear-gradient(92deg, var(--lb-cyan), #9e6bff 52%, var(--lb-pink));
}

.cvai-starbase-page .sb3-kinetic-index li:nth-child(4).is-active strong {
  background-image: linear-gradient(90deg, #6e4300 0%, #daa520 45%, #f5da78 64%, #8b5900 100%);
}

.cvai-starbase-page .sb3-kinetic-progress {
  width: min(520px, 100%);
  height: 2px;
  margin-top: 38px;
  overflow: hidden;
  background: rgba(244, 240, 255, 0.09);
}

.cvai-starbase-page .sb3-kinetic-progress > span {
  width: 25%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--lb-cyan), var(--lb-pink), var(--cvai-gold-light));
  box-shadow: 0 0 16px rgba(45, 233, 255, 0.4);
  transform-origin: left center;
  transition: width 560ms ease;
}

.cvai-starbase-page .sb3-kinetic-sticky .cvai-micro {
  margin-top: 18px;
}

.cvai-starbase-page .sb3-kinetic-steps {
  min-width: 0;
  display: grid;
  gap: clamp(46px, 7vh, 86px);
}

.cvai-starbase-page .sb3-kinetic-step {
  min-height: min(74vh, 740px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 233, 255, 0.16);
  border-radius: 30px 7px 30px 7px;
  padding: clamp(36px, 5vw, 74px);
  color: rgba(244, 240, 255, 0.72);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.025), transparent 28%),
    rgba(2, 6, 16, 0.78);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.28);
  opacity: 0.42;
  transform: translateY(26px) scale(0.985);
  transition: border-color 620ms ease, box-shadow 620ms ease, opacity 620ms ease, transform 620ms ease;
}

.cvai-starbase-page .sb3-kinetic-step::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 43, 214, 0.08), transparent 30%, transparent 68%, rgba(45, 233, 255, 0.07));
  opacity: 0;
  transition: opacity 620ms ease;
}

.cvai-starbase-page .sb3-kinetic-step.is-active {
  border-color: rgba(45, 233, 255, 0.42);
  color: var(--text);
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.42), 0 0 56px rgba(45, 233, 255, 0.08);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cvai-starbase-page .sb3-kinetic-step.is-active::before {
  opacity: 1;
}

.cvai-starbase-page .sb3-kinetic-step.is-active::after {
  content: "";
  width: 42%;
  height: 180%;
  position: absolute;
  top: -42%;
  left: -60%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(45, 233, 255, 0.1), transparent);
  filter: blur(2px);
  transform: rotate(14deg);
  animation: sb3-kinetic-card-scan 3.8s ease-in-out infinite;
}

.cvai-starbase-page .sb3-kinetic-step-label {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cvai-starbase-page .sb3-kinetic-step:nth-child(2) .sb3-kinetic-step-label,
.cvai-starbase-page .sb3-kinetic-step:nth-child(3) .sb3-kinetic-step-label {
  color: var(--lb-pink);
}

.cvai-starbase-page .sb3-kinetic-step:nth-child(4) .sb3-kinetic-step-label {
  color: var(--cvai-gold-light);
}

.cvai-starbase-page .sb3-kinetic-step > h3 {
  max-width: 760px;
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.cvai-starbase-page .sb3-kinetic-step > p:not(.sb3-kinetic-step-label) {
  max-width: 720px;
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  color: var(--lb-text-secondary);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
}

.cvai-starbase-page .sb3-kinetic-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  position: relative;
  z-index: 1;
  margin: 42px 0 0;
  border: 1px solid rgba(45, 233, 255, 0.15);
  background: rgba(45, 233, 255, 0.12);
}

.cvai-starbase-page .sb3-kinetic-facts > div {
  min-width: 0;
  padding: 18px;
  background: rgba(1, 5, 13, 0.94);
}

.cvai-starbase-page .sb3-kinetic-facts dt {
  color: var(--lb-text-muted);
  font-family: var(--font-terminal);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cvai-starbase-page .sb3-kinetic-facts dd {
  margin: 9px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

@keyframes sb3-kinetic-scan {
  from { transform: translateX(0); }
  to { transform: translateX(400%); }
}

@keyframes sb3-kinetic-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes sb3-kinetic-spectrum {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes sb3-kinetic-card-scan {
  0%, 16% { left: -60%; opacity: 0; }
  34% { opacity: 1; }
  70%, 100% { left: 122%; opacity: 0; }
}

@media (min-width: 901px) {
  html[lang="zh-Hant"] .cvai-starbase-page .sb3-kinetic-ribbon-set {
    gap: clamp(36px, 4vw, 72px);
    padding-right: clamp(36px, 4vw, 72px);
  }

  html[lang="zh-Hant"] .cvai-starbase-page .sb3-kinetic-ribbon span {
    font-size: clamp(30px, 3.7vw, 58px);
    letter-spacing: 0.02em;
  }

  html[lang="zh-Hant"] .cvai-starbase-page .sb3-kinetic-ribbon--reverse span {
    font-size: clamp(16px, 1.9vw, 28px);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 1120px) {
  .cvai-starbase-page .sb3-kinetic-grid {
    grid-template-columns: minmax(310px, 0.82fr) minmax(440px, 1.18fr);
    gap: 46px;
  }

  .cvai-starbase-page .sb3-kinetic-index strong {
    font-size: clamp(20px, 2.4vw, 29px);
  }
}

@media (max-width: 900px) {
  .cvai-starbase-page .sb3-kinetic-ribbons {
    gap: 0;
    padding: 0;
    border-top: 1px solid rgba(45, 233, 255, 0.16);
    border-bottom-color: rgba(45, 233, 255, 0.2);
    background: linear-gradient(90deg, rgba(2, 10, 19, 0.98), rgba(6, 17, 29, 0.96), rgba(2, 10, 19, 0.98));
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .cvai-starbase-page .sb3-kinetic-ribbon {
    height: 44px;
    display: flex;
    align-items: center;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon-track {
    animation-duration: 24s;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon--reverse {
    display: none;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon-set {
    gap: 34px;
    padding-right: 34px;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon span {
    font-family: var(--font-terminal);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    background-image: linear-gradient(90deg, #78e8f8 0%, #d9e7ee 48%, #89b7d8 76%, #d8bd67 100%);
    background-size: 100% 100%;
    text-shadow: 0 0 12px rgba(45, 233, 255, 0.14);
    animation: none;
  }

  .cvai-starbase-page .sb3-kinetic-grid {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    padding-block: 52px 72px;
  }

  .cvai-starbase-page .sb3-kinetic-sticky {
    position: static;
  }

  .cvai-starbase-page .sb3-kinetic-sticky > h2 {
    max-width: 760px;
    margin-bottom: 0;
  }

  .cvai-starbase-page .sb3-kinetic-index,
  .cvai-starbase-page .sb3-kinetic-progress,
  .cvai-starbase-page .sb3-kinetic-sticky .cvai-micro {
    display: none;
  }

  .cvai-starbase-page .sb3-kinetic-steps {
    gap: 24px;
  }

  .cvai-starbase-page .sb3-kinetic-step,
  .cvai-starbase-page .sb3-kinetic-step.is-active {
    min-height: auto;
    border-radius: 22px 5px 22px 5px;
    padding: clamp(28px, 7vw, 50px);
    opacity: 1;
    transform: none;
  }

  .cvai-starbase-page .sb3-kinetic-step.is-active::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .cvai-starbase-page .sb3-kinetic-sticky > h2 {
    font-size: 34px;
    line-height: 1.12;
  }

  .cvai-starbase-page .sb3-kinetic-step > h3 {
    font-size: clamp(29px, 8.8vw, 42px);
    line-height: 1.08;
  }

  .cvai-starbase-page .sb3-kinetic-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .cvai-starbase-page .sb3-kinetic-facts > div:not(:last-child) {
    border-bottom: 1px solid rgba(45, 233, 255, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvai-starbase-page .sb3-kinetic::before {
    display: none;
    animation: none;
  }

  .cvai-starbase-page .sb3-kinetic-index li,
  .cvai-starbase-page .sb3-kinetic-progress > span,
  .cvai-starbase-page .sb3-kinetic-step,
  .cvai-starbase-page .sb3-kinetic-step::before {
    transition: none;
  }

  .cvai-starbase-page .sb3-kinetic-index li,
  .cvai-starbase-page .sb3-kinetic-step {
    opacity: 1;
    transform: none;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon-track,
  .cvai-starbase-page .sb3-kinetic-ribbon span,
  .cvai-starbase-page .sb3-kinetic-index li.is-active strong,
  .cvai-starbase-page .sb3-kinetic-step.is-active::after {
    animation: none;
  }

  .cvai-starbase-page .sb3-kinetic-ribbon-set:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvai-starbase-page .sb3-book-card,
  .cvai-starbase-page .sb3-orbit {
    transition-duration: 0.01ms;
    animation: none;
  }
}

/* Creator Vault AI product footer: navigation only, without a repeated logo or product disclaimer. */
.cvai-product-detail-page .footer-grid--links-only {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cvai-product-detail-page .footer-grid--links-only > div:first-child {
  grid-column: auto;
  overflow: visible;
}

/* ---- Region / Language selector (injected by language-selector.js) ---- */
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(214, 175, 85, 0.34);
  background: rgba(214, 175, 85, 0.04);
  color: var(--luxury-gold, #d6af55);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.lang-trigger:hover { border-color: rgba(214, 175, 85, 0.6); background: rgba(214, 175, 85, 0.08); }
.lang-trigger:focus-visible { outline: 2px solid rgba(214, 175, 85, 0.6); outline-offset: 2px; }
.lang-trigger-icon { width: 18px; height: 14px; border-radius: 2px; object-fit: cover; display: block; }

.lang-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 6, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lang-backdrop[hidden] { display: none; }

.lang-modal {
  width: min(680px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  border: 1px solid rgba(214, 175, 85, 0.30);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(11, 27, 51, 0.16), transparent 60%),
    #07090d;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(245, 241, 232, 0.04);
  padding: 22px 22px 26px;
}
.lang-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lang-title { font-size: 18px; margin: 0; color: #f5f1e8; }
.lang-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(214, 175, 85, 0.28);
  background: rgba(214, 175, 85, 0.04);
  color: var(--luxury-gold, #d6af55);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.lang-close:hover { border-color: rgba(214, 175, 85, 0.6); }
.lang-close:focus-visible { outline: 2px solid rgba(214, 175, 85, 0.6); outline-offset: 2px; }
.lang-note { color: rgba(245, 241, 232, 0.6); font-size: 12.5px; margin: 8px 0 18px; }

.lang-region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lang-region-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(245, 241, 232, 0.10);
  background: rgba(245, 241, 232, 0.02);
  color: #f5f1e8;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.lang-region-btn:hover { border-color: rgba(214, 175, 85, 0.5); background: rgba(214, 175, 85, 0.05); }
.lang-region-btn:focus-visible { outline: 2px solid rgba(214, 175, 85, 0.6); outline-offset: 2px; }
.lang-region-name { font-size: 15px; font-weight: 700; }
.lang-region-count { font-size: 12px; color: rgba(245, 241, 232, 0.5); }

.lang-back {
  border: 0;
  background: none;
  color: var(--luxury-gold, #d6af55);
  font-size: 13px; font-weight: 700;
  padding: 4px 0 12px;
  cursor: pointer;
}
.lang-back:focus-visible { outline: 2px solid rgba(214, 175, 85, 0.6); outline-offset: 2px; }
.lang-detail-title { font-size: 15px; margin: 0 0 12px; color: #f5f1e8; }

.lang-list { display: grid; gap: 8px; }
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 241, 232, 0.08);
  background: rgba(245, 241, 232, 0.02);
  text-decoration: none;
  color: #f5f1e8;
}
a.lang-option:hover { border-color: rgba(214, 175, 85, 0.5); background: rgba(214, 175, 85, 0.06); }
a.lang-option:focus-visible { outline: 2px solid rgba(214, 175, 85, 0.6); outline-offset: 2px; }
.lang-option--planned { cursor: default; opacity: 0.82; }
.lang-flag-img {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
  /* subtle edge so white-heavy flags stay defined on the dark panel */
  box-shadow: 0 0 0 1px rgba(245, 241, 232, 0.14);
}
.lang-copy { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lang-name { font-size: 14.5px; font-weight: 700; }
.lang-lang { font-size: 12.5px; color: rgba(245, 241, 232, 0.62); }
.lang-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.lang-badge--available { color: var(--lb-status-green); border-color: rgba(var(--lb-status-green-rgb), 0.4); background: rgba(var(--lb-status-green-rgb), 0.08); }
.lang-badge--planned { color: rgba(245, 241, 232, 0.7); border-color: rgba(245, 241, 232, 0.18); background: rgba(245, 241, 232, 0.04); }
.lang-badge--soon { color: var(--luxury-gold, #d6af55); border-color: rgba(214, 175, 85, 0.35); background: rgba(214, 175, 85, 0.06); }

@media (max-width: 640px) {
  .lang-region-grid { grid-template-columns: 1fr; }
  .lang-modal { padding: 18px 16px 22px; max-height: 86vh; }
  .lang-trigger { margin: 6px 0 0; }
}

/* === Creator Vault AI sales-launch additions (2026-06-17) ===
   Pending CTAs are NON-functional placeholders for local preview only.
   They MUST be replaced with Ray's verified checkout URL before any deploy. */
.pending-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(214, 175, 85, 0.07);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 15px;
  margin-top: 6px;
}
.btn-pending {
  border: 1px dashed var(--border-strong);
  background: rgba(214, 175, 85, 0.06);
  color: var(--gold-light);
  cursor: not-allowed;
}
.btn-pending:hover { transform: none; box-shadow: none; }
.trial-line { color: var(--neon-green); font-size: 14px; margin: -2px 0 12px; }
.actions.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.actions.stack .btn { width: 100%; }

.compare-wrap { overflow-x: auto; margin-top: 26px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.compare-table th,
.compare-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.compare-table thead th { color: var(--text); font-family: var(--font-head); font-size: 16px; }
.compare-table tbody td.feat { color: var(--muted); }
.compare-table .yes { color: var(--neon-green); font-weight: 700; }
.compare-table .no { color: var(--subtle); }

.safety-callout {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--luxury-gold);
  border-radius: var(--radius);
  background: rgba(214, 175, 85, 0.05);
  padding: 22px 24px;
  margin-top: 18px;
}
.safety-callout h3 { margin-top: 0; }

/* =====================================================================
   Starry Luxury redesign — hero product preview + feature icon row
   (2026-06-18). New selectors only; cascade-safe.
   ===================================================================== */

/* Gold hero titles (home + product) — soft gold gradient on dark, per ad direction.
   Section h2 headings stay ivory for editorial contrast. */
.home-hero .hero-title,
.product-hero h1 {
  color: var(--lb-gold-soft); /* fallback if background-clip unsupported */
  background: linear-gradient(178deg, var(--lb-gold-soft) 4%, var(--lb-gold) 58%, var(--lb-gold-deep) 128%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 30px rgba(214, 180, 90, 0.14);
}

/* Hero product-preview mock (homepage right column) */
.hero-mock {
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-mock .mock-body { min-height: 300px; }
/* soft gold halo crown behind the preview card */
.hero-mock::after {
  content: "";
  position: absolute;
  inset: -14% -10% auto -10%;
  height: 56%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(214, 180, 90, 0.16), transparent 70%);
  /* Step 3C — hero gold halo breathing (opacity only). Neutralised by reduced-motion. */
  animation: lb-gold-glow var(--motion-glow) var(--ease-space) infinite alternate;
}

/* Phones — slow the gold glow breath (battery + calmer). Must sit AFTER the base
   rule above, whose `animation:` shorthand would otherwise reset this duration.
   Intentionally NOT !important: a higher-specificity !important here would beat the
   reduced-motion `*::after` neutraliser and unfreeze the glow on mobile. */
@media (max-width: 640px) {
  .hero-mock::after { animation-duration: 16s; }
}

/* Feature icon row — premium, dependency-free CSS-glyph badges */
.feature-icon-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.feature-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--lb-panel);
  box-shadow: inset 0 1px 0 rgba(245, 242, 234, 0.04);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.feature-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 220, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(245, 242, 234, 0.05), 0 0 26px rgba(45, 220, 255, 0.08);
}
.fi-badge {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--lb-gold-soft);
  border: 1px solid rgba(214, 180, 90, 0.34);
  background:
    radial-gradient(ellipse 80% 80% at 50% 18%, rgba(214, 180, 90, 0.18), transparent 70%),
    rgba(8, 12, 20, 0.7);
  box-shadow: inset 0 0 0 1px rgba(245, 242, 234, 0.04), 0 0 18px rgba(214, 180, 90, 0.1);
}

.fi-badge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.feature-icon:hover .fi-badge {
  color: var(--lb-cyan);
  border-color: rgba(45, 220, 255, 0.4);
  box-shadow: inset 0 0 0 1px rgba(245, 242, 234, 0.05), 0 0 20px rgba(45, 220, 255, 0.14);
}
.fi-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media (max-width: 960px) {
  .feature-icon-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .feature-icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-icon { padding: 18px 12px; }
}

/* ── V2 Autopilot: Product Universe, Pillars, Gateways, Previews ── */

.product-universe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 22px;
  border: 1px solid rgba(255, 43, 214, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(255, 43, 214, 0.08), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(45, 233, 255, 0.06), transparent 52%),
    var(--lb-panel);
  box-shadow: inset 0 1px 0 rgba(244, 240, 255, 0.04);
  transition: border-color var(--motion-hover) var(--ease-hover),
    transform var(--motion-hover) var(--ease-hover),
    box-shadow var(--motion-hover) var(--ease-hover);
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 233, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(244, 240, 255, 0.06), 0 12px 36px -18px rgba(255, 43, 214, 0.18);
}

.product-card.featured {
  border-color: rgba(255, 43, 214, 0.34);
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(255, 43, 214, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(45, 233, 255, 0.1), transparent 55%),
    var(--lb-panel);
}

.product-card h3 { margin-bottom: 4px; }

.product-card .product-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-card .card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.luxury-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pillar-card {
  padding: 24px 22px;
  border: 1px solid rgba(255, 43, 214, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(45, 233, 255, 0.06), transparent 58%),
    rgba(8, 5, 16, 0.82);
  text-align: center;
}

.pillar-card .pillar-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(214, 175, 85, 0.28);
  color: var(--luxury-gold);
  font-size: 18px;
  font-weight: 800;
  background: rgba(214, 175, 85, 0.06);
}

.pillar-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.pillar-card .pillar-zh {
  color: var(--luxury-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.pillar-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.domain-gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.domain-card {
  padding: 24px;
  border: 1px solid rgba(255, 43, 214, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 75% 55% at 0% 0%, rgba(255, 43, 214, 0.07), transparent 58%),
    var(--lb-panel);
}

.domain-card .domain-name {
  color: var(--lb-green);
  font-family: var(--font-terminal);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(184, 255, 60, 0.22);
}

.preview-console {
  border: 1px solid rgba(45, 233, 255, 0.28);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(5, 5, 8, 0.94);
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 43, 214, 0.1);
}

.preview-console .mock-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(17, 18, 21, 0.95);
}

.preview-console .console-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
}

.preview-console .preview-body {
  padding: 20px;
  min-height: 220px;
}

.preview-honesty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.preview-honesty .status { margin-bottom: 0; }

.starbase-upload-zone {
  border: 1px dashed rgba(45, 220, 255, 0.35);
  border-radius: 10px;
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: rgba(11, 27, 51, 0.35);
}

.starbase-upload-zone strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 6px;
}

.concierge-band {
  border: 1px solid rgba(45, 233, 255, 0.24);
  border-radius: 14px;
  padding: 32px 28px;
  background:
    radial-gradient(ellipse 70% 80% at 0% 50%, rgba(255, 43, 214, 0.1), transparent 60%),
    radial-gradient(ellipse 55% 60% at 100% 40%, rgba(45, 233, 255, 0.08), transparent 58%),
    rgba(8, 5, 16, 0.88);
}

.labs-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lab-panel {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--lb-panel);
  min-height: 100%;
}

.lab-panel .lab-tag {
  color: var(--lb-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.terminal-line {
  color: rgba(45, 220, 255, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

.terminal-line .prompt { color: var(--luxury-gold); }

.honesty-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  border-left: 2px solid rgba(214, 175, 85, 0.35);
  padding-left: 14px;
  margin-top: 18px;
}

@media (max-width: 1024px) {
  .product-universe-grid,
  .luxury-pillars-grid,
  .labs-trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-universe-grid,
  .luxury-pillars-grid,
  .labs-trio,
  .domain-gateway-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Multilingual typography system (2026-06-26)
   Language-specific stacks and scales — English display rules above stay
   untouched. Selectors match actual html lang values in localized pages:
   zh-Hant, zh-Hans, ja, ko.
   ===================================================================== */

html[lang="zh-Hant"],
html[lang="zh-Hans"],
html[lang="ja"],
html[lang="ko"] {
  --font-body-locale: var(--font-body);
}

html[lang="zh-Hant"] {
  --font-body-locale: var(--font-zh-hant);
  --font-body: var(--font-zh-hant);
  --font-head: var(--font-zh-hant);
}
html[lang="zh-Hans"] { --font-body-locale: var(--font-zh-hans); }
html[lang="ja"] { --font-body-locale: var(--font-ja); }
html[lang="ko"] { --font-body-locale: var(--font-ko); }

/* Keep the official LuxuryBlock wordmark in its Latin display face while the
   rest of the Traditional Chinese interface uses the owner-selected Huninn. */
html[lang="zh-Hant"] .brand-wordmark {
  font-family: var(--font-latin-display);
}

html[lang="zh-Hant"],
html[lang="zh-Hans"],
html[lang="ja"],
html[lang="ko"] {
  font-family: var(--font-body-locale);
}

/* —— Headings: shared CJK / JP / KR scale (below English display) —— */
html[lang="zh-Hant"] h1,
html[lang="zh-Hant"] .hero-title,
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] .hero-title,
html[lang="ja"] h1,
html[lang="ja"] .hero-title,
html[lang="ko"] h1,
html[lang="ko"] .hero-title {
  font-family: var(--font-body-locale);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.16;
  text-wrap: balance;
  max-width: 16em;
}

html[lang="zh-Hant"] .home-hero .hero-title,
html[lang="zh-Hans"] .home-hero .hero-title {
  font-size: clamp(36px, 4.2vw, 52px);
  line-height: 1.14;
  letter-spacing: 0.02em;
  max-width: 11em;
  word-break: keep-all;
  background: linear-gradient(90deg, var(--lb-pink) 0%, #fff 45%, var(--lb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[lang="ja"] .home-hero .hero-title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.32;
  letter-spacing: 0.03em;
  max-width: 12em;
  line-break: strict;
  word-break: normal;
  font-weight: 600;
  background: linear-gradient(90deg, var(--lb-pink) 0%, #fff 45%, var(--lb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[lang="ko"] .home-hero .hero-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  max-width: 13em;
  word-break: keep-all;
  font-weight: 600;
  background: linear-gradient(90deg, var(--lb-pink) 0%, #fff 45%, var(--lb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[lang="zh-Hant"] .product-hero h1,
html[lang="zh-Hans"] .product-hero h1,
html[lang="ja"] .product-hero h1,
html[lang="ko"] .product-hero h1 {
  font-family: var(--font-body-locale);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  max-width: 18em;
  text-wrap: balance;
}

html[lang="zh-Hant"] .page-header h1,
html[lang="zh-Hans"] .page-header h1,
html[lang="ja"] .page-header h1,
html[lang="ko"] .page-header h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.22;
  max-width: 20em;
}

html[lang="zh-Hant"] h2,
html[lang="zh-Hant"] .section-title,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] .section-title,
html[lang="ja"] h2,
html[lang="ja"] .section-title,
html[lang="ko"] h2,
html[lang="ko"] .section-title {
  font-family: var(--font-body-locale);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.24;
  text-wrap: balance;
}

html[lang="zh-Hant"] h3,
html[lang="zh-Hans"] h3,
html[lang="ja"] h3,
html[lang="ko"] h3 {
  font-family: var(--font-body-locale);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

html[lang="zh-Hant"] .lead,
html[lang="zh-Hans"] .lead,
html[lang="ja"] .lead,
html[lang="ko"] .lead {
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  max-width: 38em;
}

html[lang="zh-Hant"] .eyebrow,
html[lang="zh-Hans"] .eyebrow,
html[lang="ja"] .eyebrow,
html[lang="ko"] .eyebrow {
  font-family: var(--font-terminal);
  letter-spacing: 0.1em;
  text-transform: none;
  font-weight: 400;
}

/* —— Nav, buttons, footer —— */
html[lang="zh-Hant"] .nav-links,
html[lang="zh-Hans"] .nav-links,
html[lang="ja"] .nav-links,
html[lang="ko"] .nav-links {
  gap: 16px;
}

html[lang="zh-Hant"] .nav-links a,
html[lang="zh-Hans"] .nav-links a,
html[lang="ja"] .nav-links a,
html[lang="ko"] .nav-links a {
  font-family: var(--font-body-locale);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html[lang="zh-Hant"] .nav-links a.nav-contact,
html[lang="zh-Hans"] .nav-links a.nav-contact,
html[lang="ja"] .nav-links a.nav-contact,
html[lang="ko"] .nav-links a.nav-contact {
  padding: 8px 12px;
}

html[lang="zh-Hant"] .btn,
html[lang="zh-Hans"] .btn,
html[lang="ja"] .btn,
html[lang="ko"] .btn {
  font-family: var(--font-body-locale);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding: 11px 16px;
}

html[lang="zh-Hant"] .lang-trigger,
html[lang="zh-Hans"] .lang-trigger,
html[lang="ja"] .lang-trigger,
html[lang="ko"] .lang-trigger {
  font-family: var(--font-body-locale);
  font-size: 12px;
  padding: 7px 12px;
}

html[lang="zh-Hant"] .footer-title,
html[lang="zh-Hans"] .footer-title,
html[lang="ja"] .footer-title,
html[lang="ko"] .footer-title {
  letter-spacing: 0.08em;
}

html[lang="zh-Hant"] .footer-links a,
html[lang="zh-Hans"] .footer-links a,
html[lang="ja"] .footer-links a,
html[lang="ko"] .footer-links a {
  line-height: 1.5;
}

html[lang="zh-Hant"] .product-card h3,
html[lang="zh-Hans"] .product-card h3,
html[lang="ja"] .product-card h3,
html[lang="ko"] .product-card h3,
html[lang="zh-Hant"] .pillar-card h3,
html[lang="zh-Hans"] .pillar-card h3,
html[lang="ja"] .pillar-card h3,
html[lang="ko"] .pillar-card h3 {
  font-size: 17px;
  line-height: 1.4;
}

/* —— Responsive: localized hero + headings —— */
@media (max-width: 1024px) {
  html[lang="zh-Hant"] .home-hero .hero-title,
  html[lang="zh-Hans"] .home-hero .hero-title,
  html[lang="ja"] .home-hero .hero-title,
  html[lang="ko"] .home-hero .hero-title {
    font-size: clamp(34px, 5.2vw, 48px);
    max-width: 14em;
  }
}

@media (max-width: 768px) {
  html[lang="zh-Hant"] .nav-links a,
  html[lang="zh-Hans"] .nav-links a,
  html[lang="ja"] .nav-links a,
  html[lang="ko"] .nav-links a {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  html[lang="zh-Hant"] h1,
  html[lang="zh-Hant"] .hero-title,
  html[lang="zh-Hans"] h1,
  html[lang="zh-Hans"] .hero-title,
  html[lang="ja"] h1,
  html[lang="ja"] .hero-title,
  html[lang="ko"] h1,
  html[lang="ko"] .hero-title {
    font-size: clamp(28px, 7.2vw, 38px);
    line-height: 1.18;
    max-width: 100%;
  }

  html[lang="zh-Hant"] .home-hero .hero-title,
  html[lang="zh-Hans"] .home-hero .hero-title {
    font-size: clamp(30px, 7.8vw, 40px);
  }

  html[lang="ja"] .home-hero .hero-title,
  html[lang="ko"] .home-hero .hero-title {
    font-size: clamp(24px, 6.4vw, 32px);
    line-height: 1.36;
    max-width: 100%;
  }

  html[lang="zh-Hant"] .home-hero .hero-title,
  html[lang="zh-Hans"] .home-hero .hero-title {
    font-size: clamp(28px, 7.2vw, 38px);
  }

  html[lang="zh-Hant"] .product-hero h1,
  html[lang="zh-Hans"] .product-hero h1,
  html[lang="ja"] .product-hero h1,
  html[lang="ko"] .product-hero h1 {
    font-size: clamp(26px, 6.8vw, 34px);
  }

  html[lang="zh-Hant"] h2,
  html[lang="zh-Hans"] h2,
  html[lang="ja"] h2,
  html[lang="ko"] h2 {
    font-size: clamp(22px, 5.6vw, 30px);
  }

  html[lang="zh-Hant"] .btn,
  html[lang="zh-Hans"] .btn,
  html[lang="ja"] .btn,
  html[lang="ko"] .btn {
    font-size: 14px;
    padding: 12px 14px;
  }
}

/* =====================================================================
   Mobile Shared Experience Visual Reset — 2026-08-05
   Mobile-first home hero: brand → value → privacy → full vault → CTAs.
   Full vault via object-fit:contain; no stretch; quiet dark base.
   ===================================================================== */

.home-hero .eyebrow {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (max-width: 960px) {
  html,
  body {
    max-width: 100%;
  }

  .container {
    width: min(100% - 32px, 1100px);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .home-hero {
    min-height: auto;
    padding: 24px 0 40px;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Same node is `.container.home-hero-grid` — keep container gutters; do not force 100% width. */
  .home-hero-grid,
  .container.home-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: center;
    width: min(1100px, calc(100% - 32px));
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
    grid-template-columns: none;
    grid-template-areas: none;
    padding-inline: 0;
  }

  .home-hero .hero-copy,
  .home-hero-product-visual,
  .home-hero-actions {
    grid-area: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .home-hero .hero-product-name {
    margin: 0 0 8px;
    max-width: 100%;
  }

  .home-hero .eyebrow {
    margin: 0 auto 12px;
    max-width: 100%;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding-inline: 2px;
  }

  .home-hero .hero-title {
    margin: 0 auto 10px;
    max-width: 100%;
    width: 100%;
    font-size: clamp(28px, 7.2vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.12;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--lb-gold-soft);
    text-shadow: none;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
    padding-inline: 0;
  }

  .home-hero .lead,
  .home-hero .hero-privacy {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
    padding-inline: 0;
  }

  .home-hero .lead {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .home-hero .hero-privacy {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 13px;
  }

  .home-hero-product-visual {
    width: min(100%, 260px);
    max-width: min(100%, 260px);
    margin: 8px auto 4px;
    display: block;
    align-self: center;
  }

  .home-hero-product-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(36vh, 260px);
    margin: 0 auto;
    object-fit: contain;
    object-position: center center;
  }

  .home-hero .hero-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-hero-actions {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-inline: 0;
    box-sizing: border-box;
    align-self: stretch;
  }

  .home-hero-actions .btn {
    width: 100%;
    min-height: 48px;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .home-hero::before {
    opacity: 0.45;
  }

  .site-nav .nav-inner {
    gap: 12px;
    width: min(100% - 32px, 1100px);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .site-nav .brand-lockup-cyber {
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  .site-nav .brand-logo-icon {
    height: 44px;
    max-width: 72px;
  }

  .brand-tagline {
    display: none;
  }

  .brand-wordmark {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .home-hero {
    padding: 18px 0 36px;
  }

  .home-hero-product-visual {
    width: min(100%, 240px);
    max-width: min(100%, 240px);
  }

  .home-hero-product-image {
    max-height: min(34vh, 240px);
  }

  .home-hero .hero-title {
    font-size: clamp(26px, 7vw, 34px);
  }
}

/* Desktop nav: keep labels complete — shrink brand before truncating links */
@media (min-width: 1024px) and (max-width: 1440px) {
  .nav-inner {
    gap: 10px;
    width: min(1180px, calc(100% - 28px));
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .site-nav .brand-lockup-cyber {
    min-width: 0;
    flex: 0 1 auto;
    max-width: min(360px, 42%);
    gap: 8px;
  }

  .site-nav .brand-logo-icon {
    height: 44px;
    width: auto;
    max-width: 84px;
  }

  .site-nav .brand-meridian {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  .site-nav .brand-wordmark {
    font-size: 16px;
  }

  .site-nav .brand-tagline {
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  .nav-links {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(6px, 0.9vw, 14px);
    flex-wrap: nowrap;
    white-space: normal;
    overflow: visible;
  }

  .nav-links a {
    flex: 0 0 auto;
    font-size: clamp(11px, 0.9vw, 13px);
    white-space: nowrap;
    letter-spacing: 0;
    overflow: visible;
    text-overflow: clip;
  }

  .nav-links a.nav-contact {
    padding: 8px 10px;
  }

  .lang-trigger {
    flex: 0 0 auto;
  }
}

/* Desktop/tablet landscape: keep copy + both CTAs inside the first CSS viewport */
@media (min-width: 961px) {
  .hero.home-hero {
    min-height: calc(100svh - 86px);
    padding: 24px 0 28px;
    align-items: center;
  }

  .home-hero-grid {
    gap: 10px 36px;
    align-items: center;
  }

  .home-hero .hero-product-name {
    margin: 0 0 6px;
  }

  .home-hero .eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .home-hero .hero-title {
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1.05;
    margin: 0 0 10px;
    max-width: min(560px, 100%);
  }

  .home-hero .lead {
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 8px;
    max-width: 36em;
  }

  .home-hero .hero-privacy {
    margin: 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    max-width: 34em;
  }

  .home-hero-actions {
    margin-top: 4px;
    align-self: start;
  }

  .home-hero-product-visual {
    justify-self: center;
    align-self: center;
    max-width: min(100%, 440px);
  }

  .home-hero-product-image {
    max-height: min(340px, 42svh);
  }
}

/* Short landscape desktops/tablets: further compress so CTAs clear the fold */
@media (min-width: 961px) and (max-height: 900px) {
  .hero.home-hero {
    min-height: calc(100svh - 86px);
    padding: 16px 0 20px;
  }

  .home-hero .hero-title {
    font-size: clamp(34px, 3.8vw, 52px);
    margin-bottom: 8px;
  }

  .home-hero .lead {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .home-hero-product-image {
    max-height: min(300px, 38svh);
  }
}

@media (min-width: 961px) and (max-height: 780px) {
  .hero.home-hero {
    padding: 12px 0 16px;
  }

  .home-hero .hero-title {
    font-size: clamp(30px, 3.4vw, 44px);
  }

  .home-hero .eyebrow {
    margin-bottom: 6px;
  }

  .home-hero-product-image {
    max-height: min(260px, 34svh);
  }
}

/* =====================================================================
   Creator Vault AI homepage design upgrade — Figma Desktop 1440 / Mobile 390
   Scoped under .cvai-home so legacy pages and the existing responsive reset
   remain intact. Concept UI is explicitly illustrative.
   ===================================================================== */

.cvai-home {
  --cvai-gold: #daa520;
  --cvai-gold-deep: #6e4300;
  --cvai-gold-light: #f5da78;
  --cvai-panel: rgba(12, 8, 22, 0.88);
  --cvai-border: rgba(244, 240, 255, 0.08);
  --cvai-border-strong: rgba(255, 43, 214, 0.38);
  --cvai-muted: #8a8e99;
  --cvai-section-space: 96px;
  background:
    radial-gradient(ellipse 72% 42% at 78% 8%, rgba(45, 233, 255, 0.08), transparent 62%),
    radial-gradient(ellipse 60% 36% at 22% 18%, rgba(255, 43, 214, 0.08), transparent 64%),
    linear-gradient(94deg, #03050e 3%, #09071c 45%, #0e051a 72%, #020912 98%);
}

.cvai-home main {
  display: block;
  overflow: clip;
}

.cvai-home .site-nav {
  min-height: 96px;
  border-bottom-color: var(--cvai-border);
  background: rgba(5, 5, 8, 0.84);
}

.cvai-home .nav-inner {
  width: calc(100% - clamp(32px, 3vw, 64px));
  max-width: none;
  min-height: 96px;
}

.cvai-home .site-nav .brand-logo-icon {
  width: clamp(108px, 8vw, 124px);
  height: auto;
  max-width: none;
  object-fit: contain;
}

.cvai-home .brand-wordmark {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cvai-home .brand-tagline {
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.cvai-home .nav-links {
  gap: 24px;
}

.cvai-home .nav-links a {
  color: var(--lb-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.cvai-home .nav-links a.nav-contact {
  min-height: 48px;
  min-width: 166px;
  border-color: var(--cvai-border-strong);
  color: var(--lb-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cvai-shell {
  width: calc(100% - clamp(32px, 3vw, 64px));
  max-width: none;
  margin-inline: auto;
}

.cvai-hero {
  min-height: 720px;
  display: grid;
  align-items: center;
  padding: 72px 0;
  position: relative;
  isolation: isolate;
}

.cvai-hero::before,
.cvai-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.cvai-hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 83% 44%, rgba(45, 233, 255, 0.1), transparent 28%),
    radial-gradient(circle at 79% 47%, rgba(255, 43, 214, 0.1), transparent 36%);
}

.cvai-hero::after {
  width: 58vw;
  height: 1px;
  right: -10vw;
  top: 25%;
  opacity: 0.35;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, transparent, var(--lb-cyan), transparent);
}

.cvai-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}

.cvai-hero-copy {
  min-width: 0;
  max-width: 660px;
}

.cvai-status {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--cvai-panel);
  padding: 7px 12px;
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cvai-status > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.cvai-status--available {
  color: var(--lb-green);
}

.cvai-status--planned {
  color: var(--cvai-gold);
}

.cvai-status--concept {
  color: var(--lb-pink);
}

.cvai-spectrum-label {
  width: fit-content;
  margin: 16px 0 0;
  color: transparent;
  background: linear-gradient(90deg, var(--lb-cyan), #9e6bff 50%, var(--lb-pink), var(--lb-cyan));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: var(--font-terminal);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: cvai-spectrum-shift 8s linear infinite;
}

@keyframes cvai-spectrum-shift {
  to { background-position: 220% 0; }
}

.cvai-display {
  margin: 16px 0 12px;
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.cvai-display--hero {
  font-size: 48px;
  line-height: 58px;
}

.cvai-display--hero > span {
  display: block;
}

.cvai-marble-text,
.cvai-gold-text {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cvai-marble-text {
  background-image:
    linear-gradient(20deg, transparent 0 43%, rgba(143, 120, 175, 0.42) 44%, transparent 46% 100%),
    linear-gradient(177deg, transparent 0 35%, rgba(168, 149, 196, 0.32) 36%, rgba(246, 240, 255, 0.06) 40%, transparent 43% 100%),
    linear-gradient(153deg, #fffdf8 7%, #f5f1fa 36%, #ddd4ec 56%, #faf8fc 72%, #ffffff 92%);
}

.cvai-gold-text {
  background-image: linear-gradient(90deg, var(--cvai-gold-deep) 0%, #b87706 22%, var(--cvai-gold) 46%, var(--cvai-gold-light) 62%, var(--cvai-gold) 78%, #8b5900 100%);
}

/* Owner-selected homepage hero: full-bleed canvas, first-concept typography,
   original white/lilac marble texture, and Fortuna Gold (#DAA520) finish. */
.cvai-home .site-nav {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.cvai-home .site-nav::after {
  display: none;
}

.cvai-hero-grid {
  grid-template-columns: minmax(420px, 0.92fr) minmax(460px, 1.08fr);
  gap: clamp(36px, 5vw, 78px);
}

.cvai-hero-copy {
  max-width: 620px;
}

.cvai-display--hero {
  font-size: clamp(42px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.cvai-display--hero .cvai-marble-text {
  color: #f7f3fb;
  background-image: url("images/cvai-white-purple-marble-texture-v1.jpg");
  background-repeat: no-repeat;
  background-size: 520px auto;
  background-position: left 22%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 0 16px rgba(174, 142, 214, 0.12));
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.36);
}

.cvai-display--hero .cvai-marble-text:nth-child(2) {
  background-position: left 72%;
}

.cvai-display--hero .cvai-gold-text {
  color: var(--cvai-gold);
  background-image: linear-gradient(105deg, #9a6800 0%, #b77b08 20%, #daa520 43%, #ffe09a 58%, #daa520 74%, #946100 100%);
  filter: drop-shadow(0 0 16px rgba(218, 165, 32, 0.12));
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .cvai-display--hero .cvai-marble-text {
    color: #f7f3fb;
    -webkit-text-fill-color: currentColor;
  }

  .cvai-display--hero .cvai-gold-text {
    color: #daa520;
    -webkit-text-fill-color: currentColor;
  }
}

.cvai-lead {
  max-width: 600px;
  margin: 0 0 20px;
  color: var(--lb-text-secondary);
  font-size: 17px;
  line-height: 28px;
}

.cvai-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cvai-actions--center {
  justify-content: center;
}

.cvai-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius);
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms var(--ease-hover), border-color 180ms ease, box-shadow 180ms ease;
}

.cvai-button:hover {
  transform: translateY(-2px);
}

.cvai-button:focus-visible,
.cvai-book-control:focus-visible,
.cvai-book-slide:focus-visible {
  outline: 2px solid var(--lb-cyan);
  outline-offset: 4px;
}

.cvai-button--primary {
  min-width: 250px;
  color: #050508;
  background: linear-gradient(90deg, var(--lb-cyan), #9e6bff 52%, var(--lb-pink));
  box-shadow: 0 18px 38px rgba(130, 72, 255, 0.2);
}

.cvai-button--secondary {
  min-width: 224px;
  border: 1px solid var(--cvai-border-strong);
  color: var(--lb-cyan);
  background: var(--surface);
}

.cvai-micro {
  margin: 14px 0 0;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cvai-hero-stage {
  width: 548px;
  height: 576px;
  max-width: 100%;
  position: relative;
  justify-self: end;
}

.cvai-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cvai-orbit--cyan {
  width: 500px;
}

.cvai-orbit--pink {
  width: 410px;
}

.cvai-orbit--gold {
  width: 330px;
}

.cvai-concept-card,
.cvai-book-card {
  border: 1px solid var(--cvai-border-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 43, 214, 0.04), transparent 42%),
    var(--cvai-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.cvai-concept-card {
  width: 520px;
  max-width: calc(100% - 28px);
  min-height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.cvai-concept-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--lb-pink);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}

.cvai-concept-labels span:last-child {
  color: var(--lb-cyan);
  text-align: right;
}

.cvai-concept-ui {
  height: 160px;
  display: flex;
  gap: 12px;
  margin-top: 16px;
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(90deg, #091129, #1c0d38 48%, #052b38);
}

.cvai-concept-sidebar {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--cvai-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--cvai-panel);
}

.cvai-concept-sidebar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cvai-concept-sidebar i {
  width: 56px;
  height: 6px;
  border-radius: 99px;
  background: var(--lb-cyan);
}

.cvai-concept-sidebar i:nth-of-type(2) {
  width: 44px;
}

.cvai-concept-sidebar i:nth-of-type(3) {
  width: 60px;
}

.cvai-concept-library {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cvai-concept-search {
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--lb-cyan);
  border-radius: 8px;
  background: var(--cvai-panel);
}

.cvai-concept-tiles {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cvai-concept-tiles i {
  border: 1px solid var(--lb-cyan);
  border-radius: 8px;
  background: linear-gradient(135deg, #291a61, #1a6b85);
}

.cvai-concept-tiles i:nth-child(2) {
  border-color: var(--lb-pink);
  background: linear-gradient(135deg, #661459, #1a2e7a);
}

.cvai-concept-tiles i:nth-child(3) {
  background: linear-gradient(135deg, #14455c, #61246b);
}

.cvai-concept-ui--import .cvai-concept-tiles i:first-child {
  box-shadow: inset 0 0 0 3px rgba(184, 255, 60, 0.65);
}

.cvai-concept-ui--roadmap .cvai-concept-tiles i {
  border-color: var(--cvai-gold);
}

.cvai-concept-card h2,
.cvai-book-card h3 {
  margin: 16px 0 8px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.cvai-concept-card p,
.cvai-book-card p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 21px;
}

.cvai-concept-card small,
.cvai-book-card small {
  display: block;
  margin-top: 10px;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
}

.cvai-section {
  padding: var(--cvai-section-space) 0;
  border-top: 1px solid var(--cvai-border);
}

.cvai-section--panel {
  background: rgba(10, 6, 20, 0.78);
}

.cvai-section-heading {
  max-width: 900px;
  margin-bottom: 48px;
}

.cvai-eyebrow {
  margin: 0 0 12px;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cvai-eyebrow--available {
  color: var(--lb-green);
}

.cvai-eyebrow--planned {
  color: var(--cvai-gold);
}

.cvai-section-heading h2,
.cvai-proof-copy h2,
.cvai-closing h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -0.02em;
}

.cvai-section-heading > p:last-child,
.cvai-proof-copy > p,
.cvai-closing > p {
  margin: 12px 0 0;
  color: var(--lb-text-secondary);
  font-size: 17px;
  line-height: 28px;
}

.cvai-card-grid {
  display: grid;
  gap: 24px;
}

.cvai-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cvai-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cvai-editorial-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid var(--cvai-border);
  border-radius: var(--radius);
  background: var(--cvai-panel);
  padding: 32px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.cvai-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cvai-editorial-card .cvai-status {
  font-size: 11px;
}

.cvai-index {
  flex: 0 0 auto;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 13px;
}

.cvai-index--gold {
  color: var(--cvai-gold);
}

.cvai-editorial-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
}

.cvai-editorial-card > p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 15px;
  line-height: 24px;
}

.cvai-editorial-card > small {
  margin-top: auto;
  border-top: 1px solid var(--cvai-border);
  padding-top: 20px;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}

.cvai-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 560px);
  justify-content: space-between;
  gap: 64px;
  align-items: center;
}

.cvai-proof-copy h2 {
  display: flex;
  flex-direction: column;
}

.cvai-proof-copy > small {
  display: block;
  margin-top: 18px;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 19px;
  text-transform: uppercase;
}

.cvai-proof-panel {
  border: 1px solid var(--cvai-border);
  border-radius: 16px;
  background: var(--cvai-panel);
  padding: 8px 32px;
}

.cvai-proof-panel article {
  min-height: 114px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--cvai-border);
  padding: 20px 0;
}

.cvai-proof-panel article:last-child {
  border-bottom: 0;
}

.cvai-proof-panel article > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lb-cyan);
  border-radius: 50%;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 12px;
}

.cvai-proof-panel article > div {
  min-width: 0;
}

.cvai-proof-panel article:nth-child(2) > span {
  border-color: var(--cvai-gold);
  color: var(--cvai-gold);
}

.cvai-proof-panel article:nth-child(3) > span {
  border-color: var(--lb-pink);
  color: var(--lb-pink);
}

.cvai-proof-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cvai-proof-panel p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 21px;
}

.cvai-book-slide {
  min-height: 420px;
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.cvai-book-slide.is-dragging {
  cursor: grabbing;
}

.cvai-book-slide.is-dragging .cvai-book-card {
  transition-duration: 0ms;
}

.cvai-book-stage {
  min-height: 390px;
  position: relative;
}

.cvai-book-card {
  width: min(520px, calc(100% - 160px));
  min-height: 350px;
  position: absolute;
  left: 50%;
  top: 20px;
  padding: 24px;
  transform-origin: center;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cvai-book-card[data-position="active"] {
  z-index: 3;
  opacity: 1;
  transform: translateX(calc(-50% + var(--cvai-book-drag-x, 0px))) scale(1) rotate(0);
}

.cvai-book-card[data-position="previous"] {
  z-index: 1;
  opacity: 0.1;
  transform: translateX(calc(-50% - min(34vw, 470px) + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(4deg);
}

.cvai-book-card[data-position="next"] {
  z-index: 1;
  opacity: 0.1;
  transform: translateX(calc(-50% + min(34vw, 470px) + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(-4deg);
}

.cvai-book-control {
  width: 48px;
  height: 48px;
  position: absolute;
  z-index: 5;
  top: 172px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lb-cyan);
  border-radius: 50%;
  color: var(--lb-cyan);
  background: var(--cvai-panel);
  font-size: 18px;
  cursor: pointer;
}

.cvai-book-control--previous {
  left: 0;
}

.cvai-book-control--next {
  right: 0;
  border-color: var(--lb-pink);
  color: var(--lb-pink);
}

.cvai-book-position {
  position: absolute;
  right: 0;
  bottom: -4px;
  margin: 0;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
}

.cvai-roadmap-card {
  min-height: 420px;
}

.cvai-roadmap-card dl {
  margin: 0;
  border-top: 1px solid var(--cvai-border);
}

.cvai-roadmap-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--cvai-border);
  padding: 11px 0;
}

.cvai-roadmap-card dt,
.cvai-roadmap-card dd {
  margin: 0;
  font-family: var(--font-terminal);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
}

.cvai-roadmap-card dt {
  color: var(--cvai-muted);
}

.cvai-roadmap-card dd {
  color: var(--lb-text-secondary);
  text-align: right;
}

.cvai-roadmap-card > a {
  margin-top: auto;
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.cvai-roadmap-scope {
  color: var(--lb-pink) !important;
  font-family: var(--font-terminal);
  font-size: 11px !important;
  text-transform: uppercase;
}

.cvai-closing {
  border-top: 1px solid var(--cvai-border);
  border-bottom: 1px solid rgba(45, 233, 255, 0.26);
  padding: 88px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 100% at 8% 100%, rgba(255, 43, 214, 0.09), transparent 65%),
    radial-gradient(ellipse 55% 100% at 92% 100%, rgba(45, 233, 255, 0.09), transparent 65%),
    rgba(10, 6, 20, 0.78);
}

.cvai-closing .cvai-spectrum-label {
  margin-inline: auto;
}

.cvai-closing > .cvai-shell > p:not(.cvai-spectrum-label):not(.cvai-micro) {
  max-width: 660px;
  margin-inline: auto;
}

.cvai-closing .cvai-actions {
  margin-top: 24px;
}

.cvai-home .site-footer {
  border-top: 0;
  background: rgba(3, 5, 14, 0.96);
}

.cvai-home .site-footer .container {
  width: calc(100% - clamp(32px, 3vw, 64px));
  max-width: none;
}

.cvai-home .footer-grid {
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(140px, 0.75fr));
  gap: 48px;
}

/* Ray's Figma alignment: the crystal logo begins on the same row as the final
   Company link (Contact). Keep the whole lockup and private-alpha note
   together below that anchor. */
@media (min-width: 901px) {
  html[lang="en"] .cvai-home .footer-grid > div:first-child {
    align-self: start;
    margin-top: 252px;
  }

  html[lang="en"] .cvai-home .brand-lockup-cyber--footer .brand-lockup-text {
    padding-top: 3px;
  }
}

/* The app browser's desktop canvas can be narrower than 1024px. In the
   two-column footer, place the brand beside Company before applying the same
   Contact-row offset; otherwise its margin only makes the first grid row
   taller and the visible alignment never changes. */
@media (min-width: 901px) and (max-width: 1023px) {
  html[lang="en"] .cvai-home .footer-grid {
    grid-template-areas:
      "products explore"
      "brand company";
  }

  html[lang="en"] .cvai-home .footer-grid > div:nth-child(1) { grid-area: brand; }
  html[lang="en"] .cvai-home .footer-grid > div:nth-child(2) { grid-area: products; }
  html[lang="en"] .cvai-home .footer-grid > div:nth-child(3) { grid-area: explore; }
  html[lang="en"] .cvai-home .footer-grid > div:nth-child(4) { grid-area: company; }
}

.cvai-footer-note {
  max-width: 360px;
  margin: 20px 0 0;
  color: var(--cvai-muted);
  font-size: 12px;
  line-height: 18px;
}

html[lang="zh-Hant"] .cvai-display,
html[lang="zh-Hant"] .cvai-section-heading h2,
html[lang="zh-Hant"] .cvai-proof-copy h2,
html[lang="zh-Hant"] .cvai-closing h2,
html[lang="zh-Hant"] .cvai-editorial-card h3 {
  font-family: var(--font-zh-hant);
  font-weight: 700;
}

html[lang="zh-Hans"] .cvai-display,
html[lang="zh-Hans"] .cvai-section-heading h2,
html[lang="zh-Hans"] .cvai-proof-copy h2,
html[lang="zh-Hans"] .cvai-closing h2,
html[lang="zh-Hans"] .cvai-editorial-card h3 {
  font-family: var(--font-zh-hans);
  font-weight: 700;
}

html[lang="ja"] .cvai-display,
html[lang="ja"] .cvai-section-heading h2,
html[lang="ja"] .cvai-proof-copy h2,
html[lang="ja"] .cvai-closing h2,
html[lang="ja"] .cvai-editorial-card h3 {
  font-family: var(--font-ja);
  font-weight: 700;
}

html[lang="ko"] .cvai-display,
html[lang="ko"] .cvai-section-heading h2,
html[lang="ko"] .cvai-proof-copy h2,
html[lang="ko"] .cvai-closing h2,
html[lang="ko"] .cvai-editorial-card h3 {
  font-family: var(--font-ko);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .cvai-hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 48px;
  }

  .cvai-display--hero {
    font-size: 42px;
    line-height: 52px;
  }

  .cvai-hero-stage {
    width: 100%;
  }

  .cvai-card-top {
    align-items: flex-start;
  }

  .cvai-editorial-card .cvai-status {
    white-space: normal;
  }
}

@media (max-width: 1023px) {
  .cvai-home .site-nav,
  .cvai-home .nav-inner {
    min-height: 72px;
  }

  .cvai-home .nav-links {
    top: 72px;
    background: rgba(5, 5, 8, 0.98);
  }

  .cvai-home .nav-links a.nav-contact {
    width: 100%;
  }

  .cvai-hero {
    padding: 56px 0 72px;
  }

  .cvai-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .cvai-hero-copy {
    max-width: 720px;
  }

  .cvai-hero-stage {
    width: min(100%, 620px);
    justify-self: center;
  }

  .cvai-card-grid--three {
    grid-template-columns: 1fr;
  }

  .cvai-proof-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cvai-proof-copy {
    max-width: 720px;
  }

  .cvai-home .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cvai-home {
    --cvai-section-space: 64px;
  }

  .cvai-shell,
  .cvai-home .nav-inner,
  .cvai-home .site-footer .container {
    width: calc(100% - 48px);
  }

  .cvai-home .site-nav .brand-logo-icon {
    width: clamp(68px, 18vw, 82px);
    height: auto;
    max-width: none;
  }

  .cvai-home .brand-meridian {
    height: 34px;
  }

  .cvai-home .brand-wordmark {
    font-size: 12px;
  }

  .cvai-home .brand-tagline {
    display: block;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .cvai-home .nav-toggle {
    width: 58px;
    height: 36px;
    min-width: 58px;
    min-height: 36px;
    border-color: var(--lb-cyan);
    border-radius: var(--radius-pill);
    color: var(--lb-cyan);
  }

  .cvai-hero {
    min-height: auto;
    padding: 40px 0 64px;
  }

  .cvai-hero-grid {
    gap: 40px;
  }

  .cvai-status {
    font-size: 11px;
  }

  .cvai-spectrum-label {
    font-size: 13px;
  }

  .cvai-display--hero {
    margin-top: 14px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.25px;
  }

  .cvai-lead {
    font-size: 16px;
    line-height: 25px;
  }

  .cvai-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cvai-button,
  .cvai-button--primary,
  .cvai-button--secondary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
  }

  .cvai-hero-stage {
    width: 100%;
    height: 252px;
  }

  .cvai-orbit--cyan {
    width: 248px;
  }

  .cvai-orbit--pink {
    width: 210px;
  }

  .cvai-orbit--gold {
    width: 176px;
  }

  .cvai-concept-card {
    width: calc(100% - 14px);
    max-width: 328px;
    min-height: 220px;
    padding: 15px;
  }

  .cvai-concept-labels {
    font-size: 7px;
    line-height: 11px;
  }

  .cvai-concept-ui {
    height: 101px;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
  }

  .cvai-concept-sidebar {
    width: 58px;
    gap: 6px;
    padding: 7px;
  }

  .cvai-concept-sidebar img {
    width: 18px;
    height: 18px;
  }

  .cvai-concept-sidebar i {
    width: 35px;
    height: 4px;
  }

  .cvai-concept-sidebar i:nth-of-type(2) {
    width: 28px;
  }

  .cvai-concept-sidebar i:nth-of-type(3) {
    width: 38px;
  }

  .cvai-concept-library {
    gap: 8px;
  }

  .cvai-concept-search {
    height: 15px;
    flex-basis: 15px;
  }

  .cvai-concept-tiles {
    gap: 5px;
  }

  .cvai-concept-card h2 {
    margin: 9px 0 4px;
    font-size: 13px;
  }

  .cvai-concept-card p {
    font-size: 9px;
    line-height: 13px;
  }

  .cvai-concept-card small {
    margin-top: 4px;
    font-size: 7px;
  }

  .cvai-section-heading {
    margin-bottom: 32px;
  }

  .cvai-section-heading h2,
  .cvai-proof-copy h2,
  .cvai-closing h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .cvai-section-heading > p:last-child,
  .cvai-proof-copy > p,
  .cvai-closing > p {
    font-size: 15px;
    line-height: 24px;
  }

  .cvai-eyebrow {
    font-size: 12px;
    white-space: normal;
  }

  .cvai-editorial-card {
    gap: 24px;
    padding: 28px 24px;
  }

  .cvai-card-top {
    gap: 8px;
  }

  .cvai-editorial-card .cvai-status {
    max-width: calc(100% - 34px);
    font-size: 10px;
  }

  .cvai-proof-panel {
    padding: 8px 20px;
  }

  .cvai-proof-panel article {
    align-items: flex-start;
  }

  .cvai-card-grid--two {
    grid-template-columns: 1fr;
  }

  .cvai-book-slide {
    min-height: 292px;
  }

  .cvai-book-stage {
    min-height: 260px;
  }

  .cvai-book-card {
    width: calc(100% - 30px);
    min-height: 210px;
    top: 18px;
    padding: 14px;
  }

  .cvai-book-card .cvai-concept-ui {
    height: 96px;
  }

  .cvai-book-card h3 {
    margin: 10px 0 4px;
    font-size: 12px;
    line-height: 1.25;
  }

  .cvai-book-card p {
    font-size: 8px;
    line-height: 13px;
  }

  .cvai-book-card small {
    margin-top: 5px;
    font-size: 7px;
  }

  .cvai-book-card[data-position="previous"] {
    transform: translateX(calc(-50% - 260px + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(4deg);
  }

  .cvai-book-card[data-position="next"] {
    transform: translateX(calc(-50% + 260px + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(-4deg);
  }

  .cvai-book-control {
    width: 40px;
    height: 40px;
    top: 102px;
    font-size: 16px;
  }

  .cvai-roadmap-card {
    min-height: 0;
  }

  .cvai-closing {
    padding: 64px 0;
  }

  .cvai-home .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .cvai-home .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 721px) and (max-width: 1199px) {
  .cvai-home .site-nav,
  .cvai-home .nav-inner {
    min-height: 88px;
  }

  .cvai-home .site-nav .brand-logo-icon {
    width: clamp(88px, 9vw, 104px);
  }

  .cvai-home .nav-links {
    top: 88px;
  }

  .cvai-home .cvai-hero {
    padding: calc(88px + 56px) 0 72px;
  }
}

@media (max-width: 390px) {
  .cvai-display--hero {
    font-size: clamp(32px, 9.2vw, 36px);
    line-height: 1.22;
  }

  .cvai-home .site-nav .brand-lockup-cyber {
    gap: 7px;
  }

  .cvai-home .brand-meridian {
    display: none;
  }
}

/* Membership adds one essential destination to the redesigned header.
   Collapse slightly earlier at the narrow-desktop edge so no navigation
   item is compressed, clipped, or allowed to collide with the brand. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .cvai-home .nav-toggle,
  .cvai-site .nav-toggle {
    display: inline-flex;
    border-color: var(--lb-cyan);
    border-radius: var(--radius-pill);
    color: var(--lb-cyan);
  }

  .cvai-home .nav-links,
  .cvai-site .nav-links {
    position: absolute;
    z-index: 40;
    top: 88px;
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--cvai-border-strong);
    border-radius: var(--radius);
    background: rgba(5, 5, 8, 0.98);
    padding: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  }

  .cvai-home .nav-links a,
  .cvai-site .nav-links a {
    width: 100%;
    border-bottom: 1px solid var(--cvai-border);
    padding: 12px;
  }

  .cvai-home .nav-links a:last-child,
  .cvai-site .nav-links a:last-child {
    border-bottom: 0;
  }

  .cvai-home .nav-check:checked ~ .nav-links,
  .cvai-site .nav-check:checked ~ .nav-links {
    display: flex;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .cvai-home .nav-links {
    top: 88px;
  }
}

@media (min-width: 1200px) and (max-width: 1365px) {
  .cvai-home .nav-links {
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvai-spectrum-label {
    animation: none;
  }

  .cvai-book-card,
  .cvai-button {
    transition-duration: 0.01ms;
  }

  .cvai-book-card[data-position="previous"] {
    transform: translateX(calc(-50% - min(34vw, 470px) + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(0);
  }

  .cvai-book-card[data-position="next"] {
    transform: translateX(calc(-50% + min(34vw, 470px) + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(0);
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .cvai-book-card[data-position="previous"] {
    transform: translateX(calc(-50% - 260px + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(0);
  }

  .cvai-book-card[data-position="next"] {
    transform: translateX(calc(-50% + 260px + var(--cvai-book-drag-x, 0px))) scale(0.72) rotate(0);
  }
}

/* =====================================================================
   Creator Vault AI site system — Phase 2 product and editorial pages
   Extends the approved Figma homepage language without touching account,
   payment, recovery, or download flows. Apply with <body class="cvai-site">.
   ===================================================================== */

.cvai-site {
  --cvai-gold: #daa520;
  --cvai-gold-deep: #6e4300;
  --cvai-gold-light: #f5da78;
  --cvai-panel: rgba(12, 8, 22, 0.88);
  --cvai-panel-solid: #0c0816;
  --cvai-border: rgba(244, 240, 255, 0.08);
  --cvai-border-strong: rgba(255, 43, 214, 0.38);
  --cvai-muted: #8a8e99;
  --cvai-section-space: 96px;
  min-width: 0;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(ellipse 72% 42% at 78% 8%, rgba(45, 233, 255, 0.08), transparent 62%),
    radial-gradient(ellipse 60% 36% at 22% 18%, rgba(255, 43, 214, 0.08), transparent 64%),
    linear-gradient(94deg, #03050e 3%, #09071c 45%, #0e051a 72%, #020912 98%);
}

.cvai-site main {
  display: block;
  overflow: clip;
}

.cvai-site .site-nav {
  min-height: 88px;
  border-bottom-color: var(--cvai-border);
  background: rgba(5, 5, 8, 0.9);
  backdrop-filter: blur(18px);
}

.cvai-site .nav-inner {
  width: calc(100% - clamp(32px, 3vw, 64px));
  max-width: none;
  min-height: 88px;
}

.cvai-site .brand-logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.cvai-site .brand-wordmark {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cvai-site .brand-tagline {
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.cvai-site .nav-links {
  gap: 24px;
}

.cvai-site .nav-links a {
  color: var(--lb-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.cvai-site .nav-links a[aria-current="page"] {
  color: var(--text);
}

.cvai-site .nav-links a.nav-contact {
  min-height: 48px;
  min-width: 166px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--cvai-border-strong);
  color: var(--lb-cyan);
}

.cvai-page-hero {
  min-height: 640px;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--cvai-border);
  padding: 88px 0;
}

.cvai-page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 6%, rgba(255, 43, 214, 0.05) 46%, transparent 64%),
    radial-gradient(circle at 78% 48%, rgba(45, 233, 255, 0.12), transparent 29%),
    radial-gradient(circle at 76% 48%, rgba(255, 43, 214, 0.1), transparent 40%);
}

.cvai-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(360px, 1fr);
  gap: 80px;
  align-items: center;
}

.cvai-page-title {
  max-width: 720px;
  margin: 18px 0 20px;
  font-family: var(--font-head);
  font-size: clamp(44px, 4.3vw, 62px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.cvai-page-title > span {
  display: block;
}

.cvai-page-lead {
  max-width: 650px;
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 18px;
  line-height: 30px;
}

.cvai-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.cvai-page-note {
  margin: 16px 0 0;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cvai-page-visual {
  min-width: 0;
  min-height: 440px;
  display: grid;
  place-items: center;
  position: relative;
}

.cvai-page-orbit {
  width: min(430px, 92%);
  aspect-ratio: 1;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(45, 233, 255, 0.28);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(255, 43, 214, 0.045),
    0 0 0 74px rgba(218, 165, 32, 0.035),
    0 0 90px rgba(45, 233, 255, 0.12);
}

.cvai-page-orbit::before,
.cvai-page-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 43, 214, 0.28);
  border-radius: 50%;
}

.cvai-page-orbit::after {
  inset: 28%;
  border-color: rgba(218, 165, 32, 0.45);
}

.cvai-visual-console {
  width: min(520px, 100%);
  position: relative;
  z-index: 1;
  border: 1px solid var(--cvai-border-strong);
  border-radius: 16px;
  padding: 28px;
  background:
    linear-gradient(145deg, rgba(255, 43, 214, 0.07), transparent 42%),
    rgba(7, 8, 19, 0.93);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.cvai-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--cvai-border);
  padding-bottom: 16px;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 11px;
  text-transform: uppercase;
}

.cvai-console-signal {
  color: var(--lb-green);
}

.cvai-console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.cvai-console-grid > span {
  min-height: 100px;
  border: 1px solid rgba(45, 233, 255, 0.34);
  border-radius: 10px;
  background: linear-gradient(145deg, #251456, #0d5369);
}

.cvai-console-grid > span:nth-child(2) {
  border-color: rgba(255, 43, 214, 0.5);
  background: linear-gradient(145deg, #5d164e, #121e68);
}

.cvai-console-grid > span:nth-child(3) {
  border-color: rgba(218, 165, 32, 0.52);
  background: linear-gradient(145deg, #143e52, #5c255f);
}

.cvai-visual-console h2,
.cvai-visual-console h3 {
  margin: 22px 0 8px;
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.3;
}

.cvai-visual-console p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.cvai-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.cvai-category-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cvai-border);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  color: var(--lb-text-secondary);
  background: rgba(12, 8, 22, 0.72);
  font-family: var(--font-terminal);
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.cvai-category-nav a:hover,
.cvai-category-nav a:focus-visible {
  border-color: var(--lb-cyan);
  color: var(--lb-cyan);
}

.cvai-section--flush-top {
  padding-top: 48px;
}

.cvai-section-label-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}

.cvai-section-label-row .cvai-section-heading {
  margin-bottom: 0;
}

.cvai-section-aside {
  max-width: 360px;
  margin: 0;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 19px;
  text-align: right;
  text-transform: uppercase;
}

.cvai-product-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--cvai-border-strong);
  border-radius: 18px;
  background: var(--cvai-panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.cvai-product-feature-copy {
  min-width: 0;
  padding: 48px;
}

.cvai-product-feature-copy h2,
.cvai-product-feature-copy h3 {
  margin: 20px 0 14px;
  font-family: var(--font-head);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.16;
}

.cvai-product-feature-copy > p {
  max-width: 690px;
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 16px;
  line-height: 27px;
}

.cvai-product-feature-art {
  min-height: 440px;
  display: grid;
  place-items: center;
  position: relative;
  border-left: 1px solid var(--cvai-border);
  padding: 38px;
  background:
    radial-gradient(circle at 50% 40%, rgba(45, 233, 255, 0.15), transparent 45%),
    radial-gradient(circle at 46% 58%, rgba(255, 43, 214, 0.14), transparent 52%),
    #070815;
}

.cvai-product-glyph {
  width: 180px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(45, 233, 255, 0.58);
  border-radius: 40px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(255, 43, 214, 0.18), rgba(45, 233, 255, 0.1));
  box-shadow:
    0 0 0 22px rgba(255, 43, 214, 0.04),
    0 0 0 48px rgba(45, 233, 255, 0.025),
    0 0 60px rgba(45, 233, 255, 0.22);
  font-family: var(--font-head);
  font-size: 34px;
  letter-spacing: 0.05em;
}

.cvai-product-glyph img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.cvai-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cvai-product-card {
  min-width: 0;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cvai-border);
  border-radius: 16px;
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(45, 233, 255, 0.04), transparent 48%),
    var(--cvai-panel);
}

.cvai-product-card--planned {
  background:
    linear-gradient(145deg, rgba(218, 165, 32, 0.07), transparent 48%),
    var(--cvai-panel);
}

.cvai-product-card--concept {
  background:
    linear-gradient(145deg, rgba(255, 43, 214, 0.07), transparent 48%),
    var(--cvai-panel);
}

.cvai-product-card h3 {
  margin: 24px 0 10px;
  font-family: var(--font-head);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
}

.cvai-product-card > p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 15px;
  line-height: 24px;
}

.cvai-product-meta {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--cvai-border);
}

.cvai-product-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--cvai-border);
  padding: 10px 0;
}

.cvai-product-meta dt,
.cvai-product-meta dd {
  margin: 0;
  font-family: var(--font-terminal);
  font-size: 11px;
  line-height: 1.45;
  text-transform: uppercase;
}

.cvai-product-meta dt {
  color: var(--cvai-muted);
}

.cvai-product-meta dd {
  color: var(--lb-text-secondary);
  text-align: right;
}

.cvai-card-link {
  width: fit-content;
  margin-top: auto;
  padding-top: 24px;
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.cvai-card-link:hover,
.cvai-card-link:focus-visible {
  color: var(--lb-cyan);
}

.cvai-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cvai-feature-card {
  min-width: 0;
  border: 1px solid var(--cvai-border);
  border-radius: 16px;
  padding: 30px;
  background: var(--cvai-panel);
}

.cvai-feature-card > span {
  display: block;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 12px;
}

.cvai-feature-card:nth-child(2n) > span {
  color: var(--lb-pink);
}

.cvai-feature-card h3 {
  margin: 16px 0 10px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

.cvai-feature-card p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 15px;
  line-height: 25px;
}

.cvai-feature-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cvai-feature-list li {
  position: relative;
  padding-left: 22px;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.cvai-feature-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 0;
  top: 0.62em;
  border-radius: 50%;
  background: var(--lb-green);
  box-shadow: 0 0 10px rgba(184, 255, 60, 0.5);
}

.cvai-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.cvai-story-copy {
  position: sticky;
  top: 128px;
}

.cvai-story-copy h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.18;
}

.cvai-story-copy > p {
  margin: 16px 0 0;
  color: var(--lb-text-secondary);
  font-size: 16px;
  line-height: 27px;
}

.cvai-story-steps {
  display: grid;
  gap: 18px;
}

.cvai-story-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--cvai-border);
  border-radius: 16px;
  padding: 26px;
  background: var(--cvai-panel);
}

.cvai-story-step > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lb-cyan);
  border-radius: 50%;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 12px;
}

.cvai-story-step:nth-child(2n) > span {
  border-color: var(--lb-pink);
  color: var(--lb-pink);
}

.cvai-story-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.cvai-story-step p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 23px;
}

.cvai-truth-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  border: 1px solid rgba(218, 165, 32, 0.38);
  border-radius: 16px;
  padding: 28px;
  background: rgba(218, 165, 32, 0.045);
}

.cvai-truth-banner > span {
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.cvai-truth-banner h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
}

.cvai-truth-banner p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 14px;
  line-height: 23px;
}

.cvai-availability {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--cvai-border);
  border-radius: 16px;
  background: var(--cvai-panel);
}

.cvai-availability-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 0.7fr) minmax(180px, 1fr) minmax(220px, 1.3fr);
  gap: 20px;
  border-bottom: 1px solid var(--cvai-border);
  padding: 20px 24px;
}

.cvai-availability-row:last-child {
  border-bottom: 0;
}

.cvai-availability-row--head {
  color: var(--cvai-muted);
  background: rgba(255, 255, 255, 0.018);
  font-family: var(--font-terminal);
  font-size: 11px;
  text-transform: uppercase;
}

.cvai-availability-row > div {
  min-width: 0;
}

.cvai-availability-row strong {
  font-size: 15px;
}

.cvai-availability-row p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.cvai-availability-row a {
  color: var(--lb-cyan);
}

.cvai-concept-window {
  border: 1px solid var(--cvai-border-strong);
  border-radius: 18px;
  overflow: hidden;
  background: #070815;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
}

.cvai-window-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--cvai-border);
  padding: 12px 18px;
  color: var(--cvai-muted);
  background: rgba(12, 8, 22, 0.96);
  font-family: var(--font-terminal);
  font-size: 11px;
  text-transform: uppercase;
}

.cvai-window-dots {
  display: flex;
  gap: 7px;
}

.cvai-window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lb-pink);
}

.cvai-window-dots i:nth-child(2) {
  background: var(--cvai-gold);
}

.cvai-window-dots i:nth-child(3) {
  background: var(--lb-cyan);
}

.cvai-window-body {
  min-height: 420px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.cvai-window-sidebar {
  border-right: 1px solid var(--cvai-border);
  padding: 24px 18px;
  background: rgba(12, 8, 22, 0.72);
}

.cvai-window-sidebar strong {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-head);
  font-size: 14px;
}

.cvai-window-sidebar span {
  display: block;
  margin: 0 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 11px;
}

.cvai-window-sidebar span:first-of-type {
  border-color: rgba(45, 233, 255, 0.26);
  color: var(--lb-cyan);
  background: rgba(45, 233, 255, 0.04);
}

.cvai-window-content {
  min-width: 0;
  padding: 28px;
}

.cvai-window-search {
  height: 40px;
  border: 1px solid rgba(45, 233, 255, 0.34);
  border-radius: 10px;
  background: rgba(12, 8, 22, 0.9);
}

.cvai-window-assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.cvai-window-assets > article {
  min-height: 134px;
  border: 1px solid var(--cvai-border);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(45, 233, 255, 0.12), rgba(255, 43, 214, 0.09));
}

.cvai-window-assets i {
  height: 70px;
  display: block;
  border-radius: 8px;
  background: linear-gradient(135deg, #251455, #125e6f);
}

.cvai-window-assets span {
  display: block;
  margin-top: 10px;
  color: var(--lb-text-secondary);
  font-family: var(--font-terminal);
  font-size: 10px;
}

.cvai-camera-frame {
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--cvai-border-strong);
  border-radius: 22px;
  background:
    linear-gradient(rgba(45, 233, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 233, 255, 0.11) 1px, transparent 1px),
    radial-gradient(circle at 55% 42%, rgba(218, 165, 32, 0.3), transparent 18%),
    linear-gradient(145deg, #111733, #20103d 48%, #062b39);
  background-size: 33.333% 33.333%, 33.333% 33.333%, auto, auto;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48);
}

.cvai-camera-frame::before {
  content: "CONCEPT PREVIEW · NO CAMERA ACCESS";
  position: absolute;
  left: 18px;
  top: 16px;
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.cvai-camera-reticle {
  width: 132px;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 218, 120, 0.72);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 24px rgba(0, 0, 0, 0.1),
    0 0 36px rgba(218, 165, 32, 0.2);
}

.cvai-camera-reticle::before,
.cvai-camera-reticle::after {
  content: "";
  position: absolute;
  background: var(--cvai-gold-light);
}

.cvai-camera-reticle::before {
  width: 1px;
  height: 166px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cvai-camera-reticle::after {
  width: 166px;
  height: 1px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cvai-camera-controls {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: absolute;
  inset: auto 0 0;
  border-top: 1px solid var(--cvai-border);
  background: rgba(5, 5, 8, 0.75);
  backdrop-filter: blur(12px);
}

.cvai-camera-controls i {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(244, 240, 255, 0.24);
  border-radius: 50%;
}

.cvai-camera-controls i:nth-child(2) {
  width: 46px;
  height: 46px;
  border: 2px solid var(--text);
  box-shadow: inset 0 0 0 6px rgba(255, 43, 214, 0.22);
}

.cvai-system-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cvai-system-node {
  min-width: 0;
  position: relative;
  border: 1px solid var(--cvai-border);
  border-radius: 14px;
  padding: 24px;
  background: var(--cvai-panel);
}

.cvai-system-node:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -24px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--lb-cyan);
  font-family: var(--font-terminal);
  font-size: 15px;
}

.cvai-system-node > span {
  color: var(--cvai-gold);
  font-family: var(--font-terminal);
  font-size: 11px;
}

.cvai-system-node h3 {
  margin: 14px 0 8px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
}

.cvai-system-node p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 13px;
  line-height: 21px;
}

.cvai-site .site-footer {
  border-top: 1px solid var(--cvai-border);
  background: rgba(3, 5, 14, 0.96);
}

.cvai-site .site-footer .container {
  width: calc(100% - clamp(32px, 3vw, 64px));
  max-width: none;
}

.cvai-site .footer-grid {
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(140px, 0.75fr));
  gap: 48px;
}

.cvai-site .footer-links a {
  color: var(--lb-text-secondary);
}

.cvai-site .footer-links a:hover {
  color: var(--lb-cyan);
}

@media (max-width: 1100px) {
  .cvai-page-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: 44px;
  }

  .cvai-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cvai-site .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cvai-site .site-nav,
  .cvai-site .nav-inner {
    min-height: 72px;
  }

  .cvai-site .nav-links {
    top: 72px;
    background: rgba(5, 5, 8, 0.98);
  }

  .cvai-site .nav-links a.nav-contact {
    width: 100%;
  }

  .cvai-page-hero {
    min-height: 0;
    padding: 72px 0;
  }

  .cvai-page-hero-grid,
  .cvai-product-feature,
  .cvai-story-grid {
    grid-template-columns: 1fr;
  }

  .cvai-page-visual {
    width: min(100%, 620px);
    justify-self: center;
  }

  .cvai-product-feature-art {
    min-height: 340px;
    border-top: 1px solid var(--cvai-border);
    border-left: 0;
  }

  .cvai-story-copy {
    position: static;
  }

  .cvai-availability-row {
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.7fr) minmax(170px, 1fr);
  }

  .cvai-availability-row > div:last-child {
    grid-column: 1 / -1;
  }

  .cvai-system-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cvai-system-node::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .cvai-site {
    --cvai-section-space: 64px;
  }

  .cvai-site .nav-inner,
  .cvai-site .site-footer .container {
    width: calc(100% - 48px);
  }

  .cvai-site .brand-logo-icon {
    width: 34px;
    height: 34px;
  }

  .cvai-site .brand-meridian {
    display: none;
  }

  .cvai-site .brand-wordmark {
    font-size: 12px;
  }

  .cvai-site .brand-tagline {
    display: block;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .cvai-site .nav-toggle {
    width: 58px;
    height: 36px;
    min-width: 58px;
    min-height: 36px;
    border-color: var(--lb-cyan);
    border-radius: var(--radius-pill);
    color: var(--lb-cyan);
  }

  .cvai-page-hero {
    padding: 52px 0 64px;
  }

  .cvai-page-title {
    font-size: clamp(34px, 10vw, 43px);
    line-height: 1.12;
  }

  .cvai-page-lead {
    font-size: 16px;
    line-height: 26px;
  }

  .cvai-page-actions {
    flex-direction: column;
  }

  .cvai-page-visual {
    min-height: 330px;
  }

  .cvai-page-orbit {
    width: min(280px, 82%);
    box-shadow:
      0 0 0 20px rgba(255, 43, 214, 0.04),
      0 0 0 42px rgba(218, 165, 32, 0.03),
      0 0 60px rgba(45, 233, 255, 0.1);
  }

  .cvai-visual-console {
    padding: 18px;
  }

  .cvai-console-grid > span {
    min-height: 72px;
  }

  .cvai-section-label-row {
    display: block;
  }

  .cvai-section-aside {
    margin-top: 16px;
    text-align: left;
  }

  .cvai-product-feature-copy {
    padding: 30px 24px;
  }

  .cvai-product-feature-art {
    min-height: 290px;
  }

  .cvai-product-glyph {
    width: 136px;
    border-radius: 30px;
    font-size: 26px;
  }

  .cvai-product-grid,
  .cvai-feature-grid {
    grid-template-columns: 1fr;
  }

  .cvai-product-card {
    min-height: 0;
    padding: 26px 22px;
  }

  .cvai-story-grid {
    gap: 36px;
  }

  .cvai-story-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }

  .cvai-story-step > span {
    width: 40px;
    height: 40px;
  }

  .cvai-truth-banner {
    grid-template-columns: 1fr;
  }

  .cvai-availability {
    border: 0;
    background: transparent;
  }

  .cvai-availability-row,
  .cvai-availability-row > div:last-child {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .cvai-availability-row {
    gap: 8px;
    margin-bottom: 14px;
    border: 1px solid var(--cvai-border);
    border-radius: 14px;
    padding: 20px;
    background: var(--cvai-panel);
  }

  .cvai-availability-row--head {
    display: none;
  }

  .cvai-window-body {
    grid-template-columns: 1fr;
  }

  .cvai-window-sidebar {
    display: none;
  }

  .cvai-window-content {
    padding: 18px;
  }

  .cvai-window-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cvai-window-assets > article {
    min-height: 110px;
  }

  .cvai-system-flow {
    grid-template-columns: 1fr;
  }

  .cvai-site .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .cvai-site .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) {
  .cvai-site .site-nav .brand-lockup-cyber {
    gap: 7px;
  }

  .cvai-window-assets {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvai-site .cvai-spectrum-label {
    animation: none;
  }

  .cvai-site .cvai-button,
  .cvai-site .cvai-category-nav a,
  .cvai-site .cvai-card-link {
    transition-duration: 0.01ms;
  }
}

/* Final homepage canvas geometry. The background and editorial composition
   both expand on wide displays instead of freezing at a tablet-like frame. */
.cvai-home .nav-inner,
.cvai-home .cvai-shell {
  width: min(1760px, calc(100% - clamp(32px, 5vw, 96px)));
  max-width: 1760px;
}

.cvai-home .cvai-hero {
  min-height: 100svh;
  padding: calc(96px + clamp(54px, 5vw, 72px)) 0 clamp(64px, 5vw, 72px);
}

@media (max-width: 1023px) {
  .cvai-home .cvai-hero {
    min-height: auto;
    padding: calc(88px + 56px) 0 72px;
  }
}

@media (max-width: 720px) {
  .cvai-home .cvai-hero {
    padding: calc(72px + 40px) 0 64px;
  }

  /* The company card is taller than the legacy 252px concept stage. Let the
     stage participate in document flow on phones so it can never rise behind
     the CTA stack or overlap the following section. */
  .cvai-home .cvai-hero-stage {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }

  .cvai-home .cvai-hero-stage .cvai-concept-card {
    position: relative;
    inset: auto;
    transform: none;
  }

  .cvai-home .cvai-display--hero .cvai-marble-text {
    background-size: 360px auto;
  }
}

@media (min-width: 1440px) {
  .cvai-home .cvai-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(72px, 6vw, 124px);
  }

  .cvai-home .cvai-hero-copy {
    max-width: 660px;
  }

  .cvai-home .cvai-hero-stage {
    width: clamp(600px, 34vw, 680px);
    height: 620px;
  }

  .cvai-home .cvai-orbit--cyan {
    width: min(620px, 100%);
  }

  .cvai-home .cvai-orbit--pink {
    width: min(510px, 84%);
  }

  .cvai-home .cvai-orbit--gold {
    width: min(410px, 68%);
  }

  .cvai-home .cvai-concept-card {
    width: min(600px, calc(100% - 28px));
  }
}

/* Keep both desktop hero actions inside the copy column while the two-column
   composition compresses between tablet and full 1440px geometry. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .cvai-home .cvai-actions {
    gap: 12px;
  }

  .cvai-home .cvai-actions .cvai-button {
    min-width: 0;
    padding-inline: 16px;
  }

  .cvai-home .cvai-button--primary {
    flex: 1.08 1 220px;
  }

  .cvai-home .cvai-button--secondary {
    flex: 1 1 195px;
  }
}

/* Keyboard focus belongs to the visually hidden checkbox, so mirror that
   focus state onto the visible menu control. Keep phone controls at the
   recommended 44px minimum touch target. */
.nav-check:focus-visible + .nav-toggle {
  outline: 2px solid rgba(45, 233, 255, 0.86);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .cvai-home .nav-toggle,
  .cvai-site .nav-toggle {
    height: 44px;
    min-height: 44px;
  }

  .cvai-home .cvai-book-control {
    width: 44px;
    height: 44px;
  }
}

/* =====================================================================
   Creator Vault AI product showcase — Owner-selected 2026-08-07 layout
   Scoped to the English product detail page so existing localized pages
   and the homepage Book-Slide remain unchanged until Owner acceptance.
   ===================================================================== */

.cvai-product-detail-page .site-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  width: 100%;
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(2, 4, 12, 0.78), rgba(2, 4, 12, 0));
  backdrop-filter: none;
  box-shadow: none;
}

.cvai-product-detail-page .site-nav::after {
  display: none;
}

.cvai-product-detail-page .site-nav .brand-lockup-cyber {
  height: 46px;
  align-items: stretch;
}

.cvai-product-detail-page .site-nav .brand-logo-icon {
  width: auto;
  height: 46px;
  max-width: none;
  object-fit: contain;
}

.cvai-product-detail-page .site-nav .brand-meridian,
.cvai-product-detail-page .site-nav .brand-lockup-text {
  height: 46px;
}

.cvai-product-detail-page .site-nav .brand-lockup-text {
  justify-content: space-between;
  gap: 0;
}

.cvai-product-detail-page .cvai-product-showcase {
  min-height: 100svh;
  align-items: start;
  border-bottom-color: rgba(45, 233, 255, 0.12);
  padding: clamp(132px, 9vw, 140px) 0 clamp(72px, 7vw, 112px);
}

.cvai-product-detail-page .cvai-product-showcase::before {
  background:
    linear-gradient(90deg, rgba(1, 3, 10, 0.98) 0%, rgba(3, 5, 15, 0.9) 40%, rgba(4, 8, 24, 0.62) 72%, rgba(2, 5, 14, 0.86) 100%),
    linear-gradient(155deg, transparent 30%, rgba(255, 43, 214, 0.08) 72%, transparent 90%),
    url("images/hero-bg.webp") center / cover no-repeat;
  opacity: 0.96;
}

.cvai-product-detail-page .cvai-product-showcase-grid {
  width: min(1840px, calc(100% - clamp(32px, 4vw, 84px)));
  max-width: 1840px;
  display: grid;
  grid-template-columns: minmax(370px, 0.82fr) minmax(600px, 1.18fr);
  gap: clamp(44px, 5vw, 92px);
  align-items: start;
}

.cvai-product-showcase-copy,
.cvai-product-showcase-media {
  min-width: 0;
}

.cvai-product-showcase-copy {
  position: static;
}

.cvai-product-showcase-title {
  max-width: 680px;
  margin: 20px 0 24px;
  font-size: clamp(44px, 4.5vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.cvai-product-showcase-title .cvai-marble-text {
  color: #f7f3fb;
  background-image: url("images/cvai-white-purple-marble-texture-v1.jpg");
  background-repeat: no-repeat;
  background-size: 760px auto;
  background-position: left 20%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 0 18px rgba(174, 142, 214, 0.14));
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.34);
}

.cvai-product-showcase-title .cvai-marble-text:nth-child(2) {
  background-position: left 72%;
}

.cvai-product-showcase-title .cvai-gold-text {
  color: #daa520;
  background-image: linear-gradient(105deg, #895a00 0%, #b77b08 18%, #daa520 42%, #ffe2a0 58%, #daa520 76%, #8f5d00 100%);
  filter: drop-shadow(0 0 16px rgba(218, 165, 32, 0.14));
}

.cvai-product-showcase-copy .cvai-page-lead {
  max-width: 620px;
}

.cvai-founder-console {
  width: min(420px, 100%);
  margin-top: clamp(28px, 3vw, 40px);
  border-left: 1px solid rgba(45, 233, 255, 0.24);
  padding: 4px 0 4px 22px;
  color: rgba(184, 255, 60, 0.64);
  font-family: var(--font-terminal);
  text-transform: uppercase;
}

.cvai-founder-console p,
.cvai-founder-console dl {
  margin: 0;
}

.cvai-founder-console__label,
.cvai-founder-console__progress label {
  display: block;
  color: rgba(245, 242, 234, 0.54);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cvai-founder-console dl {
  width: min(270px, 100%);
  margin-top: 12px;
}

.cvai-founder-console dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 25px;
}

.cvai-founder-console dt,
.cvai-founder-console dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.cvai-founder-console dt::before {
  content: "> ";
}

.cvai-founder-console__progress {
  margin-top: 26px;
}

.cvai-founder-console__progress > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 9px;
}

.cvai-founder-console progress {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(245, 242, 234, 0.12);
}

.cvai-founder-console progress::-webkit-progress-bar {
  background: rgba(245, 242, 234, 0.12);
}

.cvai-founder-console progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--lb-cyan), var(--lb-pink), var(--cvai-gold));
}

.cvai-founder-console progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--lb-cyan), var(--lb-pink), var(--cvai-gold));
}

.cvai-founder-console__progress strong {
  color: var(--cvai-gold);
  font-size: 12px;
  font-weight: 400;
}

.cvai-neon-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(45, 233, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(2, 5, 14, 0.72);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.cvai-neon-benefit {
  min-width: 0;
  min-height: 170px;
  padding: 20px 18px;
}

.cvai-neon-benefit + .cvai-neon-benefit {
  border-left: 1px solid rgba(245, 242, 234, 0.08);
}

.cvai-neon-benefit img {
  width: 36px;
  height: 36px;
  display: block;
  margin-bottom: 14px;
  object-fit: contain;
}

.cvai-neon-benefit h2 {
  margin: 0 0 8px;
  font-family: var(--font-terminal);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cvai-neon-benefit p {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.cvai-neon-benefit--local h2 {
  color: var(--lb-green);
}

.cvai-neon-benefit--private h2 {
  color: var(--lb-pink);
}

.cvai-neon-benefit--workflow h2 {
  color: var(--lb-cyan);
}

.cvai-neon-benefit--creators h2 {
  color: var(--cvai-gold);
}

.cvai-app-reel {
  min-width: 0;
  margin-top: 22px;
  border: 1px solid rgba(255, 43, 214, 0.2);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 34px);
  overflow: clip;
  background:
    linear-gradient(145deg, rgba(45, 233, 255, 0.06), transparent 42%),
    rgba(2, 5, 14, 0.82);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.46);
}

.cvai-app-reel__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.48fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 6px;
}

.cvai-app-reel__heading h2 {
  max-width: 620px;
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.2;
}

.cvai-app-reel__heading > p {
  margin: 0;
  color: var(--cvai-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.cvai-app-reel__slider {
  min-height: 0;
  margin-top: 14px;
  overflow: clip;
  outline: none;
}

.cvai-app-reel__slider:focus-visible {
  outline: 2px solid rgba(45, 233, 255, 0.92);
  outline-offset: 4px;
}

.cvai-app-reel__stage {
  min-height: 0;
  display: grid;
  position: relative;
  align-items: start;
  padding: 18px 52px 62px;
  perspective: 1600px;
}

.cvai-app-reel__page {
  width: calc(100% - 96px);
  min-height: 0;
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  margin: 0 auto;
  border: 1px solid rgba(45, 233, 255, 0.22);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: #02040a;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cvai-app-reel__page[data-position="active"] {
  z-index: 3;
  opacity: 1;
  transform: translateX(var(--cvai-book-drag-x, 0px)) scale(1) rotateY(0);
  pointer-events: auto;
}

.cvai-app-reel__page[data-position="previous"] {
  z-index: 1;
  opacity: 0.1;
  transform-origin: right center;
  transform: translateX(calc(-48% + var(--cvai-book-drag-x, 0px))) scale(0.84) rotateY(52deg);
}

.cvai-app-reel__page[data-position="next"] {
  z-index: 1;
  opacity: 0.1;
  transform-origin: left center;
  transform: translateX(calc(48% + var(--cvai-book-drag-x, 0px))) scale(0.84) rotateY(-52deg);
}

.cvai-app-reel__frame {
  width: 100%;
  aspect-ratio: 1440 / 940;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #02040a;
}

.cvai-app-reel__image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
}

.cvai-app-reel__caption {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border-top: 1px solid rgba(245, 242, 234, 0.08);
  padding: 16px 20px;
  background: rgba(5, 7, 14, 0.96);
}

.cvai-app-reel__caption strong {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
}

.cvai-app-reel__caption span {
  color: var(--lb-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.cvai-app-reel .cvai-book-control {
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(3, 5, 14, 0.96);
}

.cvai-app-reel .cvai-book-control--previous {
  left: 8px;
}

.cvai-app-reel .cvai-book-control--next {
  right: 8px;
}

.cvai-app-reel .cvai-book-position {
  right: 12px;
  bottom: 14px;
}

.cvai-app-reel__note {
  max-width: 760px;
  margin: 2px 0 0;
  color: var(--cvai-muted);
  font-family: var(--font-terminal);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Keep the CJK/JP/KR global heading scale from turning compact product UI
   labels into display headlines. These are interface labels, not sections. */
html[lang="zh-Hant"] .cvai-product-detail-page .cvai-neon-benefit h2,
html[lang="zh-Hans"] .cvai-product-detail-page .cvai-neon-benefit h2,
html[lang="ja"] .cvai-product-detail-page .cvai-neon-benefit h2,
html[lang="ko"] .cvai-product-detail-page .cvai-neon-benefit h2 {
  font-family: var(--font-body-locale);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.35;
  letter-spacing: 0.04em;
}

html[lang="zh-Hant"] .cvai-product-detail-page .cvai-app-reel__heading h2,
html[lang="zh-Hans"] .cvai-product-detail-page .cvai-app-reel__heading h2,
html[lang="ja"] .cvai-product-detail-page .cvai-app-reel__heading h2,
html[lang="ko"] .cvai-product-detail-page .cvai-app-reel__heading h2 {
  font-family: var(--font-body-locale);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .cvai-product-showcase-title .cvai-marble-text {
    color: #f7f3fb;
    -webkit-text-fill-color: currentColor;
  }

  .cvai-product-showcase-title .cvai-gold-text {
    color: #daa520;
    -webkit-text-fill-color: currentColor;
  }
}

@media (min-width: 1181px) {
  .cvai-product-detail-page .site-nav .brand-lockup-cyber {
    height: 52px;
    align-items: stretch;
  }

  .cvai-product-detail-page .site-nav .brand-logo-icon {
    width: auto;
    height: 52px;
    max-width: none;
    object-fit: contain;
  }

  .cvai-product-detail-page .site-nav .brand-meridian,
  .cvai-product-detail-page .site-nav .brand-lockup-text {
    height: 52px;
  }

  .cvai-product-detail-page .site-nav .brand-lockup-text {
    justify-content: space-between;
    gap: 0;
  }
}

@media (max-width: 1360px) {
  .cvai-product-detail-page .cvai-product-showcase-grid {
    grid-template-columns: minmax(350px, 0.78fr) minmax(540px, 1.22fr);
    gap: 42px;
  }

  .cvai-product-showcase-title {
    font-size: clamp(42px, 4.35vw, 62px);
  }

  .cvai-neon-benefit {
    min-height: 158px;
    padding: 16px 15px;
  }

  .cvai-neon-benefit img {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }

  .cvai-app-reel {
    padding: 24px;
  }

  .cvai-app-reel__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .cvai-app-reel__heading > p {
    display: none;
  }

  .cvai-app-reel__slider {
    margin-top: 8px;
  }

  .cvai-app-reel__stage {
    padding-top: 10px;
  }

}

@media (max-width: 1120px) {
  .cvai-neon-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cvai-neon-benefit:nth-child(3),
  .cvai-neon-benefit:nth-child(4) {
    border-top: 1px solid rgba(245, 242, 234, 0.08);
  }

  .cvai-neon-benefit:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 980px) {
  .cvai-product-detail-page .cvai-product-showcase {
    min-height: 0;
    padding: 132px 0 76px;
  }

  .cvai-product-detail-page .cvai-product-showcase-grid {
    width: calc(100% - 48px);
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }

  .cvai-product-showcase-copy {
    position: static;
  }

  .cvai-product-showcase-title {
    max-width: 720px;
    font-size: clamp(44px, 8.2vw, 72px);
  }

  .cvai-product-showcase-copy .cvai-page-lead {
    max-width: 700px;
  }

  .cvai-founder-console {
    margin-top: 36px;
  }
}

@media (max-width: 640px) {
  .cvai-product-detail-page .cvai-product-showcase {
    padding: 116px 0 62px;
  }

  .cvai-product-detail-page .cvai-product-showcase-grid {
    width: calc(100% - 40px);
    gap: 44px;
  }

  .cvai-product-showcase-title {
    margin-top: 16px;
    font-size: clamp(37px, 11.1vw, 52px);
    line-height: 1.04;
  }

  .cvai-product-showcase-title .cvai-marble-text {
    background-size: 560px auto;
  }

  .cvai-product-showcase-copy .cvai-page-lead {
    font-size: 16px;
    line-height: 1.7;
  }

  .cvai-founder-console {
    width: 100%;
    padding-left: 16px;
  }

  .cvai-neon-benefits {
    grid-template-columns: 1fr;
  }

  .cvai-neon-benefit {
    min-height: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px 16px;
    align-items: start;
    padding: 20px;
  }

  .cvai-neon-benefit + .cvai-neon-benefit {
    border-top: 1px solid rgba(245, 242, 234, 0.08);
    border-left: 0;
  }

  .cvai-neon-benefit img {
    width: 36px;
    height: 36px;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .cvai-neon-benefit h2 {
    margin: 0;
  }

  .cvai-app-reel {
    margin-top: 20px;
    border-radius: 16px;
    padding: 18px 12px;
  }

  .cvai-app-reel__heading {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-inline: 6px;
  }

  .cvai-app-reel__heading > p {
    display: block;
    text-align: left;
  }

  .cvai-app-reel__stage {
    padding: 14px 2px 70px;
  }

  .cvai-app-reel__page {
    width: 100%;
    border-radius: 11px;
  }

  .cvai-app-reel__caption {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px 14px;
  }

  .cvai-app-reel .cvai-book-control {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .cvai-app-reel .cvai-book-control--previous {
    left: 0;
  }

  .cvai-app-reel .cvai-book-control--next {
    right: 0;
  }

  .cvai-app-reel .cvai-book-position {
    right: auto;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvai-product-detail-page .cvai-app-reel__page {
    transition-duration: 0.01ms;
  }

  .cvai-product-detail-page .cvai-app-reel__page[data-position="active"] {
    transform: translateX(var(--cvai-book-drag-x, 0px)) scale(1) rotateY(0);
  }

  .cvai-product-detail-page .cvai-app-reel__page[data-position="previous"] {
    transform: translateX(calc(-48% + var(--cvai-book-drag-x, 0px))) scale(0.84) rotateY(0);
  }

  .cvai-product-detail-page .cvai-app-reel__page[data-position="next"] {
    transform: translateX(calc(48% + var(--cvai-book-drag-x, 0px))) scale(0.84) rotateY(0);
  }
}

/* StarBase cascade anchors — keep this final so later shared site layers cannot
   flatten the dedicated preview background or navigation treatment. */
.cvai-site.cvai-starbase-page {
  background:
    radial-gradient(ellipse 66% 52% at 82% 18%, rgba(41, 228, 255, 0.13), transparent 64%),
    radial-gradient(ellipse 56% 46% at 18% 16%, rgba(255, 43, 214, 0.11), transparent 68%),
    linear-gradient(112deg, #02040c 0%, #09051b 46%, #020a16 100%);
}

.cvai-site.cvai-starbase-page .site-nav {
  border-bottom-color: rgba(45, 233, 255, 0.2);
  background: rgba(2, 4, 12, 0.82);
}

/* Canonical header brand scale for the current homepage and product surfaces. */
body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-lockup-cyber {
  height: 60px;
  align-items: center;
  gap: 12px;
}

body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-logo-icon {
  width: 96px;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-meridian {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  align-self: center;
}

body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-wordmark {
  font-size: 18px;
}

body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-tagline {
  font-size: 8px;
  letter-spacing: 0.18em;
}

@media (min-width: 721px) and (max-width: 1023px) {
  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-lockup-cyber {
    height: 52px;
    gap: 10px;
  }

  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-logo-icon {
    width: 84px;
    height: auto;
  }

  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-meridian {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }
}

@media (max-width: 720px) {
  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-lockup-cyber {
    height: 44px;
    gap: 9px;
  }

  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-logo-icon {
    width: 72px;
    height: auto;
    max-width: none;
  }

  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-meridian {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  body:is(.cvai-home, .cvai-product-detail-page, .cvai-download-page, .cvai-starbase-page, .cvai-starbase-companion-page) .site-nav .brand-wordmark {
    font-size: 16px;
  }
}

/* Final owner-approved masthead contract: every page uses the homepage scale. */
body .site-nav .brand-lockup-cyber { height: 60px; align-items: center; gap: 12px; }
body .site-nav .brand-logo-icon { width: 96px; height: auto; max-width: none; object-fit: contain; object-position: left center; }
body .site-nav .brand-meridian { height: 46px; min-height: 46px; max-height: 46px; align-self: center; }
body .site-nav .brand-wordmark { color: #f5f5f0; font-size: 18px; text-transform: uppercase; }
body .site-nav .brand-tagline { color: #daa520; font-size: 8px; letter-spacing: 0.18em; }

@media (min-width: 721px) and (max-width: 1023px) {
  body .site-nav .brand-lockup-cyber { height: 52px; gap: 10px; }
  body .site-nav .brand-logo-icon { width: 84px; }
  body .site-nav .brand-meridian { height: 40px; min-height: 40px; max-height: 40px; }
}

@media (max-width: 720px) {
  body .site-nav .brand-lockup-cyber { height: 44px; gap: 9px; }
  body .site-nav .brand-logo-icon { width: 72px; }
  body .site-nav .brand-meridian { height: 36px; min-height: 36px; max-height: 36px; }
  body .site-nav .brand-wordmark { font-size: 16px; }
}

/* Owner-approved global footer contract: every English and Traditional Chinese
   public page uses four balanced navigation groups. Products stays at the far
   right, followed visually by Company, Help, and Legal toward the left. */
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "legal help company products";
  max-width: 1280px;
  margin-inline: auto;
  gap: 36px clamp(24px, 4vw, 64px);
}

/* Override the legacy English homepage logo offset on the Legal column. */
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div,
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:first-child,
.cvai-product-detail-page .site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:first-child {
  grid-column: auto;
  min-width: 0;
  margin-top: 0;
  overflow: visible;
  text-align: right;
}

.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:nth-child(1) { grid-area: legal; }
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:nth-child(2) { grid-area: help; }
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:nth-child(3) { grid-area: company; }
.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:nth-child(4) { grid-area: products; }

.site-footer .footer-grid.footer-grid--links-only.footer-grid--unified .footer-links {
  justify-items: end;
  gap: 4px;
}

.site-footer .footer-grid--unified .footer-title {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.5;
}

.site-footer .footer-grid--unified .footer-links a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.site-footer .footer-grid--unified .footer-links a:focus-visible {
  outline: 2px solid var(--luxury-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer .footer-grid--unified + .footer-bottom {
  max-width: 1280px;
  margin-inline: auto;
}

.site-footer .footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.site-footer .footer-bottom a:hover {
  color: var(--luxury-gold);
}

/* Keep the fixed Soul control from covering the footer email. */
.site-footer .footer-bottom {
  padding-right: 132px;
}

@media (max-width: 900px) {
  .site-footer .footer-grid.footer-grid--links-only.footer-grid--unified {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "company products"
      "legal help";
    gap: 32px clamp(28px, 8vw, 64px);
  }

  .site-footer .footer-grid.footer-grid--links-only.footer-grid--unified > div:first-child {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-grid.footer-grid--links-only.footer-grid--unified {
    gap: 28px 22px;
  }

  .site-footer .footer-bottom {
    padding-right: 96px;
  }
}


/* BUG-WEB-031: product screenshots are readable, flat, and below both hero columns.
   Shared book sliders on the homepage / StarBase retain their existing treatment. */
.cvai-product-detail-gallery {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
  padding: clamp(12px, 1.6vw, 24px);
}

.cvai-product-detail-gallery .cvai-app-reel__heading > p {
  display: block;
}

.cvai-product-detail-gallery .cvai-app-reel__stage {
  padding: 0 0 64px;
  perspective: none;
}

.cvai-product-detail-gallery .cvai-app-reel__page {
  width: 100%;
  max-width: none;
  transform-style: flat;
}

.cvai-product-detail-gallery .cvai-app-reel__page[data-position="active"] {
  transform: translateX(var(--cvai-book-drag-x, 0px));
}

.cvai-product-detail-gallery .cvai-app-reel__page:not([data-position="active"]) {
  visibility: hidden;
  opacity: 0;
  transform: none;
  pointer-events: none;
}

.cvai-product-detail-gallery .cvai-app-reel__frame {
  display: block;
  aspect-ratio: auto;
}

.cvai-product-detail-gallery .cvai-app-reel__image {
  height: auto;
  max-height: none;
}

.cvai-product-detail-gallery .cvai-app-reel__caption {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 24px;
}

.cvai-product-detail-gallery .cvai-app-reel__caption > strong,
.cvai-product-detail-gallery .cvai-app-reel__caption > span {
  grid-column: 1;
}

.cvai-product-detail-gallery .cvai-product-detail-gallery__fullsize {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  color: var(--lb-cyan);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cvai-product-detail-gallery .cvai-product-detail-gallery__fullsize:focus-visible {
  outline: 2px solid var(--lb-cyan);
  outline-offset: 4px;
}

.cvai-product-detail-gallery .cvai-book-control {
  top: auto;
  bottom: 4px;
  transform: none;
}

.cvai-product-detail-gallery .cvai-book-control--previous { left: 0; }
.cvai-product-detail-gallery .cvai-book-control--next { left: 64px; right: auto; }

.cvai-product-detail-gallery .cvai-book-position {
  right: auto;
  bottom: 18px;
  left: 132px;
  transform: none;
}

@media (max-width: 640px) {
  .cvai-product-detail-gallery .cvai-app-reel__caption {
    padding: 12px;
  }

}