/* ==========================================================================
   UX VISION — Design System v2.0
   Horizontal Scroll · Bauhaus Grid · High-Contrast Typography
   Inspired by douglus.site · midlife.engineering · qfnetwork.xyz
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Custom Properties ---------- */
:root {
  /* Background */
  --bg-primary: #F0EDE5;
  --bg-secondary: #E8E4DC;
  --bg-surface: #FFFFFF;
  --bg-dark: #0D0D0D;
  --bg-panel: #1A1A1A;

  /* Accents */
  --accent-primary: #00C9B7;
  --accent-glow: #00E5CC;
  --accent-blue: #4D6BFF;
  --accent-warm: #FF5C00;
  --accent-error: #C0392B;

  /* Text */
  --text-primary: #0D0D0D;
  --text-secondary: #5A5A5A;
  --text-muted: #999999;
  --text-inverse: #F0EDE5;
  --text-accent: #00C9B7;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Typography scale */
  --text-micro: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
  --text-hero: clamp(5rem, 14vw, 13rem);

  /* Border radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 50%;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* Layout */
  --frame-pad: 24px;
  --nav-height: 72px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: var(--text-base);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Horizontal mode: lock body scroll */
body.h-scroll-active {
  overflow: hidden;
  height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.display-hero {
  font-size: var(--text-hero);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
}

.display-xl {
  font-size: clamp(var(--text-5xl), 8vw, var(--text-9xl));
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.display-lg {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl));
  font-weight: 800;
  letter-spacing: -0.03em;
}

.display-md {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
}

.text-gradient {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-accent {
  color: var(--accent-primary);
}

.mono-label {
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.5;
}

.subtitle {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-xl));
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.7;
  max-width: 540px;
}

/* ---------- Fixed Frame Navigation ---------- */
.frame {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.frame>* {
  pointer-events: auto;
}

/* Top bar */
.frame-top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--frame-pad);
  background: transparent;
  transition: background var(--duration-normal) var(--ease-out),
    backdrop-filter var(--duration-normal) var(--ease-out);
}

.frame-top.scrolled {
  background: rgba(240, 237, 229, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.4s ease;
}

.frame-top.dark-mode {
  background: rgba(13, 13, 13, 0.88);
}

/* Nav color inversion when over dark panels — text only, no background change */
.frame-top.nav--inverted {
  transition: color 0.4s ease;
}

.frame-top.nav--inverted .nav-logo {
  color: #f0ede5;
}

.frame-top.nav--inverted .nav-center a {
  color: rgba(240, 237, 229, 0.65);
}

.frame-top.nav--inverted .nav-center a:hover {
  color: #f0ede5;
}

.frame-top.nav--inverted .nav-right a {
  color: rgba(240, 237, 229, 0.65);
}

.frame-top.nav--inverted .nav-right a:hover {
  color: #f0ede5;
}

.frame-top.nav--inverted .nav-toggle span {
  background: #f0ede5;
}

/* Split inverted: only logo/left inverts; center+right links stay dark */
.frame-top.nav--split-inverted .nav-logo {
  color: #f0ede5;
  transition: color 0.4s ease;
}

.frame-top.nav--split-inverted .nav-center a {
  color: rgba(13, 13, 13, 0.65);
}

.frame-top.nav--split-inverted .nav-center a:hover {
  color: #0d0d0d;
}

.frame-top.nav--split-inverted .nav-right a {
  color: rgba(13, 13, 13, 0.65);
}

.frame-top.nav--split-inverted .nav-right a:hover {
  color: #0d0d0d;
}

/* Logo */
.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}

.nav-eye-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
  pointer-events: none;
}

.nav-eye-logo canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  flex-shrink: 0;
}

.hero-title-wrapper {
  display: inline-block;
  position: relative;
}

.hero-eye-logo {
  position: absolute;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  top: 26%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.hero-eye-logo canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Center nav links */
.nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.nav-center a {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.nav-center a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent-primary);
  transition: width var(--duration-normal) var(--ease-out);
}

.nav-center a:hover,
.nav-center a.active {
  color: var(--text-primary);
}

.nav-center a:hover::after,
.nav-center a.active::after {
  width: 100%;
}

/* Right nav */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-right a {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
  letter-spacing: 0.05em;
}

.nav-right a:hover {
  color: var(--accent-primary);
}

/* Bottom frame bar */
.frame-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--frame-pad);
}

.frame-bottom span {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-fast);
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent-primary);
  z-index: 999;
  transition: width 60ms linear;
  will-change: width;
}

/* ---------- Horizontal Scroll System ---------- */
.h-scroll-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.h-scroll-track {
  display: flex;
  height: 100vh;
  will-change: transform;
}

.h-panel {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--nav-height) var(--frame-pad) 40px;
  overflow: hidden;
}

.h-panel-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

/* Panel variants */
.h-panel--dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.h-panel--dark h1,
.h-panel--dark h2,
.h-panel--dark h3,
.h-panel--dark h4 {
  color: var(--text-inverse);
}

.h-panel--dark .subtitle {
  color: rgba(240, 237, 229, 0.6);
}

.h-panel--dark .mono-label {
  color: rgba(240, 237, 229, 0.4);
}

.h-panel--dark .section-number {
  color: rgba(240, 237, 229, 0.3);
}

.h-panel--accent {
  background: var(--accent-primary);
  color: var(--bg-dark);
}

.h-panel--accent h1,
.h-panel--accent h2,
.h-panel--accent h3 {
  color: var(--bg-dark);
}

/* ---------- Scroll-driven Parallax ---------- */
[data-parallax] {
  will-change: transform;
}

/* Wide panels */
.h-panel--wide {
  width: 140vw;
}

.h-panel--narrow {
  width: 70vw;
}

/* Split dark: dark panel embedded in column 1 (slides as a unit) */
.h-panel--split-dark {
  position: relative;
}

/* Ensure panel content sits above any overflow */
.h-panel--split-dark .h-panel-inner {
  position: relative;
  z-index: 1;
}

.h-panel--split-dark .grid-lines {
  z-index: 1;
}

/* Section number on the dark portion */
.h-panel--split-dark .section-number {
  color: rgba(240, 237, 229, 0.3);
}

/* Desktop: purge-card uses transparent bg since dark-bg-inner provides it */
@media (min-width: 769px) {
  .h-panel--split-dark .purge-card {
    background: transparent !important;
  }

  /* Grid lines aligned to actual column boundaries (set by JS) */
  #panel-purge .grid-lines--v::before {
    left: var(--grid-line-1, 33.33%);
  }

  #panel-purge .grid-lines--v::after {
    left: var(--grid-line-2, 66.66%);
  }

  /* All 3 columns need min-width:0 for proper flex shrinking */
  .purge-content-row>div {
    min-width: 0;
  }

  /* Feature dividers: extend from grid line (left edge) to column 2's right edge. */
  .purge-feature-divider {
    margin-left: calc(-1 * var(--space-lg));
    width: calc(100% + var(--space-lg));
  }
}

/* Feature dividers in Panel 03 */
.purge-feature-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* ===== Split dark RIGHT (Panel 04 / Aeon) ===== */
.h-panel--split-dark-right {
  position: relative;
}

/* Content above the dark bg */
.h-panel--split-dark-right .h-panel-inner {
  position: relative;
  z-index: 1;
}

.h-panel--split-dark-right .grid-lines {
  z-index: 1;
}

/* Coming Soon pill over the dark zone — invert for visibility */
.h-panel--split-dark-right .coming-soon-pill {
  color: rgba(240, 237, 229, 0.7);
  border-color: rgba(240, 237, 229, 0.15);
}

.h-panel--split-dark-right .coming-soon-pill .dot {
  background: var(--accent-blue);
}

/* Column 1 preview + desc: hidden on desktop (column 3 handles preview, features col has detail) */
.aeon-card-preview,
.aeon-col1-desc {
  display: none;
}

/* Feature dividers in Panel 04 */
.aeon-feature-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* Desktop: aeon card transparent since dark bg provides it,
   columns clipped to prevent text bleed, grid lines aligned to columns */
@media (min-width: 769px) {
  .h-panel--split-dark-right .aeon-card {
    background: transparent !important;
  }

  /* Grid lines aligned to actual column boundaries (set by JS) */
  #panel-aeon .grid-lines--v::before {
    left: var(--grid-line-1, 33.33%);
  }

  #panel-aeon .grid-lines--v::after {
    left: var(--grid-line-2, 66.66%);
    /* Light line on the dark bg — use inverted color */
    background: rgba(240, 237, 229, 0.08);
  }

  /* All 3 columns need min-width:0 for proper flex shrinking */
  .aeon-content-row>div {
    min-width: 0;
  }

  /* Clip columns to prevent text bleeding across boundaries */
  .aeon-features-col {
    overflow: hidden;
  }

  /* Feature dividers: extend from grid line (left edge) to column 2's right edge.
     Stops at the vertical divider between col2 and col3. */
  .aeon-feature-divider {
    margin-left: calc(-1 * var(--space-lg));
    width: calc(100% + var(--space-lg));
  }

  /* Column 1 button — constrain to column width */
  #panel-aeon .btn-secondary {
    max-width: 200px;
  }
}

/* ---------- Panel Grid Lines ---------- */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grid-lines::before,
.grid-lines::after {
  content: '';
  position: absolute;
}

/* Vertical divider lines */
.grid-lines--v::before {
  left: 33.33%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.06);
}

.grid-lines--v::after {
  left: 66.66%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* Horizontal divider */
.grid-lines--h::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* Dark panel grid lines */
.h-panel--dark .grid-lines--v::before,
.h-panel--dark .grid-lines--v::after {
  background: rgba(255, 255, 255, 0.06);
}

.h-panel--dark .grid-lines--h::before {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 14px 32px;
  border-radius: 0;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  position: relative;
}

.btn-primary {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border: 1.5px solid var(--bg-dark);
}

.btn-primary:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
}

.btn-secondary:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

/* Inverted buttons for dark panels */
.h-panel--dark .btn-primary {
  background: var(--accent-primary);
  color: var(--bg-dark);
  border-color: var(--accent-primary);
}

.h-panel--dark .btn-primary:hover {
  background: var(--text-inverse);
  border-color: var(--text-inverse);
  color: var(--bg-dark);
}

.h-panel--dark .btn-secondary {
  color: var(--text-inverse);
  border-color: rgba(240, 237, 229, 0.3);
}

.h-panel--dark .btn-secondary:hover {
  background: var(--text-inverse);
  color: var(--bg-dark);
  border-color: var(--text-inverse);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-primary);
  padding: var(--space-sm) 0;
  border: none;
}

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

.btn-ghost .arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn-ghost:hover .arrow {
  transform: translateX(6px);
}

.btn-lg {
  padding: 18px 40px;
  font-size: var(--text-base);
}

/* ---------- Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--frame-pad);
}

.section {
  padding: var(--space-5xl) 0;
  position: relative;
}

.section-header {
  margin-bottom: var(--space-4xl);
}

.section-header .subtitle {
  margin-top: var(--space-lg);
}

.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  display: inline-block;
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--space-2xl);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-primary);
}

.card-dark {
  background: var(--bg-panel);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text-inverse);
}

.card-dark h3,
.card-dark h4 {
  color: var(--text-inverse);
}

.card-dark p {
  color: rgba(240, 237, 229, 0.6);
}

.card-dark:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 30px rgba(0, 201, 183, 0.1);
}

/* ---------- Product Showcase ---------- */
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: var(--space-md);
}

.badge-available {
  background: rgba(0, 201, 183, 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(0, 201, 183, 0.3);
}

.badge-coming-soon {
  background: rgba(77, 107, 255, 0.1);
  color: var(--accent-blue);
  border: 1px solid rgba(77, 107, 255, 0.3);
}

/* Rams-style systematic status label (replaces pill badges) */
.product-status-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* ---------- App Icon Placeholder ---------- */
.app-icon-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-2xl);
}

.app-icon-purge {
  background: var(--bg-dark);
  color: var(--accent-primary);
}

.app-icon-aeon {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-primary));
  color: white;
}

/* ---------- Feature Grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
  grid-auto-flow: dense;
}

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

.feature-item {
  padding: var(--space-2xl);
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  transition: background var(--duration-normal) var(--ease-out);
}

.feature-item--span-2 {
  grid-column: span 2;
}

/* Halftone hover overlay on feature cells */
.feature-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.feature-item:hover::after {
  opacity: 1;
}

.feature-item:hover {
  background: var(--bg-surface);
}

/* Mondrian accent cells in feature grid */
.feature-accent {
  position: relative;
  min-height: 120px;
}

.feature-accent--teal {
  background: var(--accent-primary);
}

.feature-accent--blue {
  background: var(--accent-blue);
}

.feature-accent--parchment {
  background: var(--bg-secondary);
}

.feature-accent--span-2 {
  grid-column: span 2;
}

/* Halftone dots on colored accent cells */
.feature-accent--teal::before,
.feature-accent--blue::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Monospace feature label — replaces emoji icons */
.feature-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  color: var(--accent-warm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: block;
}

.feature-item h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.feature-item p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------- Pricing Card — Catalog Spec Sheet ---------- */
.pricing-card {
  background: var(--bg-primary);
  border: 2px solid var(--bg-dark);
  border-radius: 0;
  padding: var(--space-3xl);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Subtle halftone texture on pricing card */
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0.5px, transparent 0.5px);
  background-size: 6px 6px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pricing-card>* {
  position: relative;
  z-index: 1;
}

.price {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin: var(--space-xl) 0;
}

.price-currency {
  font-size: var(--text-2xl);
  font-weight: 600;
  vertical-align: super;
  color: var(--accent-primary);
}

.pricing-features {
  text-align: left;
  margin: var(--space-2xl) 0;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features li .check {
  color: var(--accent-primary);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* ---------- Philosophy Grid ---------- */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
}

.philosophy-card {
  text-align: left;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-primary);
}

.philosophy-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--accent-warm);
  line-height: 1;
  margin-bottom: var(--space-lg);
}

.philosophy-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.philosophy-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------- Steps Grid ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
}

.step-card {
  text-align: left;
  padding: var(--space-2xl);
  background: var(--bg-primary);
}

.step-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--accent-warm);
  line-height: 1;
  margin-bottom: var(--space-lg);
}

.step-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.step-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------- Specs / System Requirements ---------- */
.specs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
}

.spec-item {
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-primary);
}

.spec-item .spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-xs);
}

.spec-item .spec-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- Team Grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.team-member {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-primary);
}

.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 0;
  margin: 0 auto var(--space-lg);
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--accent-primary);
}

.team-member h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.team-member p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---------- Sub-Page Hero ---------- */
.page-hero {
  padding: calc(var(--nav-height) + var(--space-5xl)) 0 var(--space-4xl);
  position: relative;
}

.page-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "text media"
    "desc media";
  gap: var(--space-xl) var(--space-4xl);
  align-items: center;
}

.page-hero-split .page-hero-text {
  grid-area: text;
  align-self: end;
}

.page-hero-split .page-hero-media {
  grid-area: media;
  grid-row: 1 / -1;
  align-self: center;
}

.page-hero-split .page-hero-desc {
  grid-area: desc;
  align-self: start;
}

.page-hero-text .section-label {
  margin-bottom: var(--space-lg);
}

.page-hero-text h1 {
  margin-bottom: var(--space-lg);
}

.page-hero-text .subtitle {
  margin-bottom: var(--space-2xl);
}

.page-hero-desc .subtitle {
  margin-bottom: var(--space-2xl);
}

.page-hero-media {
  display: flex;
  justify-content: center;
}

.page-hero-media-placeholder {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/3;
  background: var(--bg-dark);
  border: 2px solid var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.page-hero-media-placeholder::before {
  content: attr(data-label);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 1;
}

/* Halftone dot texture on placeholder */
.page-hero-media-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- CTA Section — with micro-dot texture ---------- */
.cta-section {
  padding: var(--space-5xl) 0;
  text-align: center;
  position: relative;
  background: var(--bg-dark);
  color: var(--text-inverse);
  overflow: hidden;
}

/* Micro-dot overlay on CTA dark sections */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  pointer-events: none;
  z-index: 0;
}

.cta-section>* {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  color: var(--text-inverse);
  margin-bottom: var(--space-lg);
}

.cta-section .subtitle {
  margin: 0 auto var(--space-2xl);
  color: rgba(240, 237, 229, 0.6);
}

.cta-section .section-label {
  color: var(--accent-primary);
}

.cta-section .btn-primary {
  background: var(--accent-primary);
  color: var(--bg-dark);
  border-color: var(--accent-primary);
}

.cta-section .btn-primary:hover {
  background: var(--text-inverse);
  border-color: var(--text-inverse);
}

/* ---------- Waitlist Form ---------- */
.waitlist-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: var(--space-xl) auto 0;
}

.waitlist-form input {
  flex: 1;
  padding: 14px var(--space-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  color: var(--text-inverse);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.waitlist-form input:focus {
  border-color: var(--accent-primary);
}

.waitlist-form .btn {
  border-radius: 0;
  width: 180px;
  flex-shrink: 0;
  justify-content: center;
  position: relative;
}

.waitlist-form .btn .btn-text-default,
.waitlist-form .btn .btn-text-error {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.waitlist-form .btn .btn-text-error {
  opacity: 0;
  color: #fff;
  pointer-events: none;
}

/* ---------- Coming Soon Pill ---------- */
.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(77, 107, 255, 0.08);
  border: 1px solid rgba(77, 107, 255, 0.2);
  padding: 10px var(--space-xl);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coming-soon-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent-blue);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ---------- Hero Actions ---------- */
.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ---------- Section Divider ---------- */
/* ---------- Section Divider — Halftone Fade ---------- */
.section-divider {
  width: 100%;
  height: 6px;
  margin: 0;
  position: relative;
  background: transparent;
  overflow: hidden;
}

.section-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--bg-dark) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
}

/* ---------- Footer (for sub-pages) ---------- */
.footer {
  padding: var(--space-4xl) 0 var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand {
  padding-right: var(--space-2xl);
}

.footer-brand .nav-logo {
  margin-bottom: var(--space-lg);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--accent-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer-bottom p {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.footer-social a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all var(--duration-fast) var(--ease-out);
}

.footer-social a:hover {
  background: var(--bg-dark);
  color: var(--accent-primary);
  border-color: var(--bg-dark);
}

/* ---------- Page Transitions ---------- */
#app-content {
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-out);
}

#app-content.page-exit {
  opacity: 0;
}

#app-content.page-enter {
  opacity: 0;
}

/* ---------- Scroll Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Horizontal panel reveals */
.h-reveal {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.h-reveal.revealed {
  opacity: 1;
  transform: translateX(0);
}

.h-reveal-delay-1 {
  transition-delay: 0.12s;
}

.h-reveal-delay-2 {
  transition-delay: 0.24s;
}

.h-reveal-delay-3 {
  transition-delay: 0.36s;
}

/* ---------- Keyframes ---------- */
@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes border-draw {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ---------- Mondrian Feature Grid ---------- */

/* ── Grid Container ──
   The dark background shows through the gap, creating the signature
   bold black Mondrian strokes between each cell. */
.mondrian-grid {
  display: grid;
  gap: 4px;
  background: var(--bg-dark);
  /* padding instead of border — open cells can break through the padding
     with negative margins, creating the Mondrian edge-bleed effect */
  padding: 4px;
  border: none;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: visible;
}

/* Mobile feature fallback — hidden on desktop, shown on mobile */
.mondrian-mobile-features {
  display: none;
}

/* ── Panels with Mondrian grids: full-height, edge-to-edge ── */

/* Remove bottom padding from the h-panel itself */
#panel-purge,
#panel-aeon {
  padding-bottom: 0 !important;
}

/* Minimize inner padding — only a sliver at top for the page number */
#panel-purge .h-panel-inner,
#panel-aeon .h-panel-inner {
  padding: 0 !important;
  gap: 0;
  align-items: stretch !important;
}

/* Page number row: overlay — takes zero vertical flow space */
#panel-purge .h-panel-inner>div:first-child,
#panel-aeon .h-panel-inner>div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
}

/* Content row: fill ALL remaining height, no gap between columns */
.purge-content-row,
.aeon-content-row {
  flex: 1 !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* ═══ Purge Preview Carousel — Vertical Coverflow (Column 3) ═══ */
.purge-preview-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 0 var(--space-lg);
}

/* Black container enclosing everything */
.purge-preview-carousel__container {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border-radius: 0;
  padding: var(--space-lg);
  gap: var(--space-md);
  width: 100%;
  height: 94%;
  overflow: hidden;
  border: none;
  position: relative;
}

/* Halftone micro-dot overlay — printed-grain boundary */
.purge-preview-carousel__container::before,
.aeon-preview-carousel__container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.10) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

.purge-preview-carousel__track {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.purge-preview-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.65s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform: translate(-50%, 80%) scale(0.75);
}

/* Center (active — forefront) */
.purge-preview-carousel__slide[data-pos="center"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  box-shadow: none;
}

/* Top (peeking above, behind center) — symmetric with bottom */
.purge-preview-carousel__slide[data-pos="top"] {
  transform: translate(-50%, -120%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

/* Bottom (peeking below, behind center) — symmetric with top */
.purge-preview-carousel__slide[data-pos="bottom"] {
  transform: translate(-50%, 20%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

/* Hidden (off-screen below) */
.purge-preview-carousel__slide[data-pos="hidden"] {
  transform: translate(-50%, 80%) scale(0.75);
  opacity: 0;
  z-index: 0;
}

/* Vertical bars — right side indicator strip */
.purge-preview-carousel__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  z-index: 1;
}

.purge-preview-carousel__bar {
  width: 3px;
  height: 20px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 0.3s ease;
  border-radius: 1.5px;
}

.purge-preview-carousel__bar:hover {
  background: rgba(0, 0, 0, 0.25);
}

.purge-preview-carousel__bar.active {
  background: var(--accent-primary);
  opacity: 0.8;
}

/* ═══ Aeon Preview Carousel — mirrors Purge carousel, blue accent ═══ */
.aeon-preview-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 0 var(--space-lg);
}

.aeon-preview-carousel__container {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border-radius: 0;
  padding: var(--space-lg);
  gap: var(--space-md);
  width: 100%;
  height: 93%;
  overflow: hidden;
  border: none;
  position: relative;
}

.aeon-preview-carousel__track {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.aeon-preview-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.65s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform: translate(-50%, 80%) scale(0.75);
}

/* Placeholder slides — centered 'Coming Soon' text */
.purge-preview-carousel__placeholder,
.aeon-preview-carousel__placeholder {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1068 / 924;
}

.aeon-preview-carousel__slide[data-pos="center"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

.aeon-preview-carousel__slide[data-pos="top"] {
  transform: translate(-50%, -120%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

.aeon-preview-carousel__slide[data-pos="bottom"] {
  transform: translate(-50%, 20%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

.aeon-preview-carousel__slide[data-pos="hidden"] {
  transform: translate(-50%, 80%) scale(0.75);
  opacity: 0;
  z-index: 0;
}

.aeon-preview-carousel__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  z-index: 1;
}

.aeon-preview-carousel__bar {
  width: 3px;
  height: 20px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 0.3s ease;
  border-radius: 1.5px;
}

.aeon-preview-carousel__bar:hover {
  background: rgba(0, 0, 0, 0.25);
}

.aeon-preview-carousel__bar.active {
  background: var(--accent-blue);
  opacity: 0.8;
}

/* ═══ Hero Carousel — Horizontal variant for product pages ═══ */
/* Same visual DNA as page 3/4 carousels (dotted bg, parchment, no border) */
.hero-carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  border-radius: 0;
  padding: var(--space-xl) var(--space-lg);
}

/* Dotted background — matches page 3/4 halftone overlay */
.hero-carousel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.10) 1px, transparent 1px);
  background-size: 5px 5px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

.hero-carousel__track {
  position: relative;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  overflow: visible;
}

.hero-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: auto;
  aspect-ratio: 16 / 10;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.65s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform: translate(-50%, -50%) translateX(120%) scale(0.75);
}

/* Center — active, full size */
.hero-carousel__slide[data-pos="center"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

/* Left — peeking from left, scaled down */
.hero-carousel__slide[data-pos="left"] {
  transform: translate(-50%, -50%) translateX(-72%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

/* Right — peeking from right, scaled down */
.hero-carousel__slide[data-pos="right"] {
  transform: translate(-50%, -50%) translateX(72%) scale(0.82);
  opacity: 0.4;
  z-index: 1;
}

/* Hidden — off-screen right */
.hero-carousel__slide[data-pos="hidden"] {
  transform: translate(-50%, -50%) translateX(120%) scale(0.75);
  opacity: 0;
  z-index: 0;
}

/* Placeholder slides — same style as page 3/4 */
.hero-carousel__placeholder {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bottom indicator bars */
.hero-carousel__bars {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  position: relative;
  z-index: 1;
}

.hero-carousel__bar {
  width: 24px;
  height: 3px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 0.3s ease;
  border-radius: 1.5px;
}

.hero-carousel__bar:hover {
  background: rgba(0, 0, 0, 0.25);
}

.purge-hero-carousel .hero-carousel__bar.active {
  background: var(--accent-primary);
}

.aeon-hero-carousel .hero-carousel__bar.active {
  background: var(--accent-blue);
}

/* Active slide click hint */
.hero-carousel__slide[data-pos="center"] {
  cursor: zoom-in;
}

/* ═══ Carousel Lightbox — expand slide to full viewport ═══ */
.carousel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
  cursor: zoom-out;
}

.carousel-lightbox.active {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
}

.carousel-lightbox__content {
  width: 90vw;
  max-width: 1200px;
  max-height: 85vh;
  border-radius: 9px;
  overflow: hidden;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
  position: relative;
}

.carousel-lightbox.active .carousel-lightbox__content {
  transform: scale(1);
  opacity: 1;
}

.carousel-lightbox__content video,
.carousel-lightbox__content img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Placeholder in lightbox */
.carousel-lightbox__content .hero-carousel__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Close button */
.carousel-lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease;
  line-height: 1;
}

.carousel-lightbox__close:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Feature columns: no padding, let the grid fill edge-to-edge */
.purge-features-col:has(.mondrian-grid),
.aeon-features-col:has(.mondrian-grid) {
  padding: 0 !important;
  margin: 0;
}

/* Purge grid: 6 rows — top-right `b` area split into b1+b2+b3
   b1 = vertical open cell (left, touches top edge)
   b2 = dark square (top-right corner, holds feature text)
   b3 = accent rectangle (bottom-right of the split area) */
.mondrian-grid--purge {
  grid-template-columns: 1.8fr 0.6fr 1fr 1.6fr;
  grid-template-rows: 0.8fr 0.6fr 0.4fr 0.6fr 1fr auto;
  grid-template-areas:
    "a  a  b1 b2"
    "a  a  b3 b3"
    "c  c  d  d"
    "o1 o1 d  d"
    "e  f  g  g"
    "s  s  s  s";
}

/* Aeon grid: 5 rows — capabilities spans full bottom */
.mondrian-grid--aeon {
  grid-template-columns: 1.2fr 1fr 1fr 1.8fr;
  grid-template-rows: 0.4fr 1.4fr 0.5fr 1fr auto;
  grid-template-areas:
    "c   a   a   o2"
    "b   a   a   d"
    "o3  o3  o3  d"
    "o4  e   f   f"
    "s   s   s   s";
}

/* ── Cell Base ── */
.mondrian-cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

/* Hoverable content cells lift subtly */
.mondrian-cell--white:hover,
.mondrian-cell--surface:hover {
  box-shadow: inset 0 0 0 2px var(--accent-primary);
}

/* ── Cell Color Variants ── */
.mondrian-cell--white {
  background: var(--bg-surface);
}

.mondrian-cell--parch {
  background: var(--bg-primary);
}

.mondrian-cell--grey {
  background: var(--bg-secondary);
}

.mondrian-cell--dark {
  background: var(--bg-dark);
}

.mondrian-cell--teal {
  background: var(--accent-primary);
  position: relative;
}

.mondrian-cell--blue {
  background: var(--accent-blue);
  position: relative;
}

/* ── Halftone dot overlay — print-like texture on colored cells ── */
.mondrian-cell--teal::before,
.mondrian-cell--blue::before,
.mondrian-flip-front.mondrian-cell--teal::before,
.mondrian-flip-front.mondrian-cell--blue::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* ── Open Cells: Mondrian edge-bleed ──
   Open cells use the page background and negative margins to
   break through the grid padding on whichever edge they touch,
   creating the effect of space extending beyond the grid's boundary
   with no enclosing line on the outside. */
.mondrian-cell--open {
  background: var(--bg-primary);
  padding: 0;
  min-height: 0;
}

/* Purge: o1 touches LEFT edge, b1 touches TOP edge, b3 touches RIGHT edge */
.mondrian-grid--purge [data-open-edge~="left"] {
  margin-left: -4px;
}

.mondrian-grid--purge [data-open-edge~="top"] {
  margin-top: -4px;
}

.mondrian-grid--purge [data-open-edge~="right"] {
  margin-right: -4px;
}

/* Aeon: o2 touches TOP+RIGHT, o4 touches LEFT */
.mondrian-grid--aeon [data-open-edge~="top"] {
  margin-top: -4px;
}

.mondrian-grid--aeon [data-open-edge~="right"] {
  margin-right: -4px;
}

.mondrian-grid--aeon [data-open-edge~="left"] {
  margin-left: -4px;
}

/* ── Cell Content Typography ── */
.mondrian-label {
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* Accent label colors — warm orange across both products (Rams catalog) */
.mondrian-grid--purge .mondrian-label,
.mondrian-grid--aeon .mondrian-label {
  color: var(--accent-warm);
}

.mondrian-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(var(--text-base), 1.2vw, var(--text-xl));
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.mondrian-desc {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── Flip Card Mechanics ── */
.mondrian-flip {
  perspective: 1200px;
  padding: 0;
  cursor: pointer;
}

.mondrian-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration, 0.8s) var(--ease-out);
}

.mondrian-flip.flipped .mondrian-flip-inner {
  transform: rotateY(180deg);
}

.mondrian-flip-front,
.mondrian-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  overflow: hidden;
}

.mondrian-flip-back {
  transform: rotateY(180deg);
}

/* Image fills on flip card fronts */
.mondrian-flip-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Color-only fronts (no content) */
.mondrian-flip-front.mondrian-cell--teal,
.mondrian-flip-front.mondrian-cell--blue,
.mondrian-flip-front.mondrian-cell--dark,
.mondrian-flip-front.mondrian-cell--grey {
  padding: 0;
}

/* ── Steps Row (bottom full-width cell) ── */
.mondrian-steps {
  display: flex;
  flex-direction: row;
  gap: var(--space-2xl);
  justify-content: center;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-surface);
  white-space: nowrap;
}

/* Purge steps: parchment background, no surrounding grid lines */
.mondrian-grid--purge .mondrian-steps {
  background: var(--bg-primary);
  margin: 0 -4px -4px -4px;
  padding: var(--space-sm) calc(var(--space-lg) + 4px);
}

/* Aeon steps: dark background with light text */
.mondrian-grid--aeon .mondrian-steps {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.mondrian-grid--aeon .mondrian-steps .mono-label {
  color: rgba(240, 237, 229, 0.5);
}

.mondrian-grid--aeon .mondrian-steps p {
  color: var(--text-inverse);
}

.mondrian-steps>div {
  text-align: center;
}

.mondrian-steps .mono-label {
  color: var(--text-muted);
}

.mondrian-steps p {
  font-weight: 600;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

/* ── Reveal animation for grid cells ── */
.mondrian-grid .mondrian-cell,
.mondrian-grid .mondrian-flip {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.h-panel--visible .mondrian-grid .mondrian-cell,
.h-panel--visible .mondrian-grid .mondrian-flip,
.revealed .mondrian-grid .mondrian-cell,
.revealed .mondrian-grid .mondrian-flip {
  opacity: 1;
  transform: scale(1);
}

/* Staggered reveal delays for each grid area */
.mondrian-grid [style*="grid-area:a"] {
  transition-delay: 0.05s;
}

.mondrian-grid [style*="grid-area:b"] {
  transition-delay: 0.15s;
}

.mondrian-grid [style*="grid-area:c"] {
  transition-delay: 0.10s;
}

.mondrian-grid [style*="grid-area:d"] {
  transition-delay: 0.20s;
}

.mondrian-grid [style*="grid-area:e"] {
  transition-delay: 0.25s;
}

.mondrian-grid [style*="grid-area:f"] {
  transition-delay: 0.18s;
}

.mondrian-grid [style*="grid-area:g"] {
  transition-delay: 0.30s;
}

.mondrian-grid [style*="grid-area:o"] {
  transition-delay: 0.12s;
}

.mondrian-grid [style*="grid-area:s"] {
  transition-delay: 0.35s;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .feature-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .page-hero-split {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: var(--space-xl);
    text-align: left;
  }

  .page-hero-split .page-hero-text {
    order: 1;
    grid-area: auto;
  }

  .page-hero-split .page-hero-media {
    order: 2;
    grid-area: auto;
    grid-row: auto;
  }

  .page-hero-split .page-hero-desc {
    order: 3;
    grid-area: auto;
  }

  .page-hero-text .subtitle,
  .page-hero-desc .subtitle {
    margin-left: 0;
    margin-right: 0;
  }

  .page-hero-text .hero-actions,
  .page-hero-desc .hero-actions {
    justify-content: flex-start;
  }

  /* About: Mission section mobile reorder */
  .about-mission-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2xl) !important;
  }

  .about-mission-eye {
    order: -1;
  }

  .about-mission-eye #about-eye-logo {
    max-width: 280px !important;
  }

  .h-panel--wide {
    width: 100vw;
  }

  .h-panel--narrow {
    width: 100vw;
  }
}

@media (max-width: 768px) {
  :root {
    --frame-pad: 16px;
    --space-5xl: 5rem;
    --space-4xl: 3.5rem;
  }

  .nav-center {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(240, 237, 229, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    z-index: 1001;
  }

  .nav-center.open {
    display: flex;
  }

  .nav-center a {
    font-size: var(--text-xl);
  }

  .nav-right {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .feature-grid,
  .feature-grid--4col,
  .philosophy-grid,
  .steps-grid {
    grid-template-columns: 1fr;
    border: none;
    gap: 0;
    background: none;
  }

  .feature-item--span-2,
  .feature-accent--span-2 {
    grid-column: span 1;
  }

  /* Hide Mondrian accent blocks on mobile — they break single-column flow */
  .feature-accent {
    display: none !important;
  }

  .feature-item {
    border-bottom: 1px solid var(--bg-dark);
  }

  .feature-item:last-of-type {
    border-bottom: none;
  }

  .step-card {
    border-bottom: 1px solid var(--bg-dark);
  }

  .step-card:last-child {
    border-bottom: none;
  }

  .philosophy-card {
    border-bottom: 1px solid var(--bg-dark);
  }

  .philosophy-card:last-child {
    border-bottom: none;
  }

  /* Hero carousel: tighter on mobile */
  .hero-carousel {
    padding: var(--space-md) var(--space-sm);
  }

  .hero-carousel__track {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }

  .specs-list {
    grid-template-columns: 1fr;
    border: none;
    gap: 0;
    background: none;
  }

  .spec-item {
    border-bottom: 1px solid var(--bg-dark);
  }

  .spec-item:last-child {
    border-bottom: none;
  }

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

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

  /* On mobile: scale eye down, shift wrapper to center the combined unit */
  .hero-title-wrapper {
    transform: translateX(25px);
  }

  .hero-eye-logo {
    width: 130px;
    height: 130px;
    left: 30%;
  }

  .waitlist-form {
    flex-direction: column;
  }

  .waitlist-form input {
    border-right: 1.5px solid rgba(255, 255, 255, 0.15);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-lg);
    text-align: center;
  }

  .frame-bottom {
    display: none;
  }

  /* Horizontal scroll fallback to vertical on mobile */
  html {
    scroll-snap-type: y mandatory;
  }

  body.h-scroll-active {
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
  }

  .h-scroll-wrapper {
    height: auto;
    overflow: visible;
  }

  .h-scroll-track {
    flex-direction: column;
    height: auto;
    transform: none !important;
  }

  .h-panel {
    width: 100% !important;
    height: auto;
    min-height: 100vh;
    padding: calc(var(--nav-height) + var(--space-md)) var(--frame-pad) var(--space-3xl) !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    transform: none !important;
  }

  .h-panel--wide,
  .h-panel--narrow {
    width: 100% !important;
  }

  .h-panel-inner {
    width: 100%;
    height: auto;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2xl) !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Force inline flex layouts to stack vertically on mobile */
  .h-panel-inner>div,
  .h-panel-inner>div>div {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Target specific inline flex rows in panels — exclude Purge card and Aeon icon row internals */
  .h-panel-inner div[style*="display:flex"]:not(.purge-badge-row):not(.purge-icon-row):not(.purge-card):not(.hero-actions):not(.purge-content-row):not(.aeon-icon-row):not(.aeon-capabilities-row):not(.aeon-card-preview):not(.purge-steps-row) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-xl) !important;
  }

  /* Panel 04 Aeon: icon row stays horizontal, coming soon pill right-aligned */
  .aeon-icon-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-md) !important;
  }

  #panel-aeon .h-panel-inner>div:first-child {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* ── Purge card mobile overrides ── */
  /* Entire panel is dark on mobile */
  #panel-purge.h-panel {
    background: var(--bg-dark) !important;
    overflow: visible !important;
    padding-left: var(--frame-pad) !important;
    padding-right: var(--frame-pad) !important;
  }

  /* Revert Mondrian desktop overrides on mobile */
  #panel-purge .h-panel-inner,
  #panel-aeon .h-panel-inner {
    padding: var(--space-3xl) 0 !important;
    gap: var(--space-xl) !important;
  }

  #panel-purge .h-panel-inner>div:first-child,
  #panel-aeon .h-panel-inner>div:first-child {
    position: static !important;
  }

  /* Section number white on dark */
  #panel-purge .section-number {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  #panel-purge#panel-purge .purge-content-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Story column (Col 1): full width on mobile */
  #panel-purge#panel-purge .purge-dark-unit {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  #panel-purge#panel-purge .purge-story {
    padding: var(--space-xl) 0 var(--space-2xl) !important;
  }

  /* Force story text colors on mobile */
  #panel-purge#panel-purge .purge-story h2 {
    color: var(--text-inverse) !important;
  }

  /* Icon + Name: same row */
  #panel-purge#panel-purge#panel-purge .purge-icon-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
    width: auto !important;
  }

  /* CTA: Learn More */
  #panel-purge#panel-purge#panel-purge .purge-story .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: var(--space-sm) !important;
  }

  /* Hide Column 2 preview carousel on mobile */
  #panel-purge#panel-purge .purge-preview-col {
    display: none !important;
  }

  /* ── Feature cards: parchment island, edge-to-edge on mobile ── */
  #panel-purge#panel-purge .purge-features-col {
    background: var(--bg-primary) !important;
    margin-left: calc(-1 * var(--frame-pad)) !important;
    margin-right: calc(-1 * var(--frame-pad)) !important;
    padding: var(--space-xl) var(--frame-pad) var(--space-3xl) !important;
    width: calc(100% + 2 * var(--frame-pad)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Purge feature label accent color */
  #panel-purge#panel-purge .purge-features-col .mono-label {
    color: var(--accent-warm) !important;
  }

  /* Steps row: hide the Mondrian grid's steps, show mobile fallback's steps */
  #panel-purge#panel-purge .mondrian-grid .purge-steps-row {
    display: none !important;
  }

  #panel-purge#panel-purge .purge-features-col {
    justify-content: flex-start !important;
  }

  #panel-purge#panel-purge .purge-features-col .purge-steps-row-mobile {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-self: center !important;
    gap: var(--space-lg) !important;
  }

  /* ── Split-dark mobile: hide the desktop absolute dark bg ── */
  .purge-dark-bg-inner,
  .aeon-dark-bg-inner,
  .purge-dark-bg-standalone,
  .aeon-dark-bg-standalone {
    display: none !important;
  }

  /* ── Aeon card mobile overrides ── */
  /* Entire panel is dark on mobile (mirroring Purge) */
  #panel-aeon.h-panel {
    background: var(--bg-dark) !important;
    overflow: visible !important;
    padding-left: var(--frame-pad) !important;
    padding-right: var(--frame-pad) !important;
  }

  /* Hide standalone parallax dark bg on mobile (panel bg handles it) */
  .aeon-dark-bg-standalone {
    display: none !important;
  }

  /* Section number white on dark */
  #panel-aeon .section-number {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  /* Content row stacks vertically */
  #panel-aeon#panel-aeon .aeon-content-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Column 1 (Story): full width on mobile */
  #panel-aeon#panel-aeon .aeon-content-row>div:first-child {
    flex: 0 0 auto !important;
    padding: 0 0 var(--space-2xl) !important;
  }

  #panel-aeon#panel-aeon .aeon-story {
    padding: 0 !important;
  }

  /* Force text colors on dark bg */
  #panel-aeon#panel-aeon h2 {
    color: var(--text-inverse) !important;
  }

  #panel-aeon#panel-aeon .aeon-story .mono-label {
    color: var(--accent-blue) !important;
  }

  /* Hide Column 2 preview carousel on mobile */
  #panel-aeon#panel-aeon .aeon-preview-col {
    display: none !important;
  }

  /* Features col (now Col 3): parchment island like Purge */
  #panel-aeon#panel-aeon .aeon-features-col {
    background: var(--bg-primary) !important;
    margin-left: calc(-1 * var(--frame-pad)) !important;
    margin-right: calc(-1 * var(--frame-pad)) !important;
    padding: var(--space-xl) var(--frame-pad) var(--space-3xl) !important;
    width: calc(100% + 2 * var(--frame-pad)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Dark unit (Column 3 shell): full width on mobile, keep dark bg */
  #panel-aeon#panel-aeon .aeon-dark-unit {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Capabilities row: stay horizontal, wrap if needed */
  #panel-aeon#panel-aeon .aeon-capabilities-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: var(--space-lg) !important;
    width: 100% !important;
  }

  /* Aeon feature label accent color */
  #panel-aeon#panel-aeon .aeon-features-col .mono-label {
    color: var(--accent-warm) !important;
  }

  /* ── Mondrian Grid: Hide on mobile, show feature list fallback ── */
  .mondrian-grid {
    display: none !important;
  }

  .mondrian-mobile-features {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Accent blocks shrink on mobile */
  .mondrian-cell--teal:not(.mondrian-flip-front),
  .mondrian-cell--blue:not(.mondrian-flip-front),
  .mondrian-cell--grey:not(.mondrian-flip-front),
  .mondrian-cell--dark:not(.mondrian-flip-front) {
    min-height: 48px !important;
    padding: var(--space-sm) !important;
  }

  /* Flip cards need explicit height on mobile */
  .mondrian-flip {
    min-height: 160px !important;
  }

  /* Steps row adjusts gap on mobile */
  .mondrian-steps {
    gap: var(--space-xl) !important;
    padding: var(--space-md) !important;
    min-height: auto !important;
  }

  /* Feature columns with Mondrian grids: inherit parchment via parent */
  .purge-features-col .mondrian-grid,
  .aeon-features-col .mondrian-grid {
    border-color: var(--bg-dark) !important;
  }

}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Utility ---------- */
.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-1 {
  margin-top: var(--space-md);
}

.mt-2 {
  margin-top: var(--space-xl);
}

.mt-3 {
  margin-top: var(--space-2xl);
}

.mt-4 {
  margin-top: var(--space-3xl);
}

.mb-1 {
  margin-bottom: var(--space-md);
}

.mb-2 {
  margin-bottom: var(--space-xl);
}

.mb-3 {
  margin-bottom: var(--space-2xl);
}

.mb-4 {
  margin-bottom: var(--space-3xl);
}