/* ══════════════════════════════════════════════════════════════════
   RA CHRONOS v5.0 — DESIGN SYSTEM CSS
   Clean-room build from 3 spec documents:
   - Luxury_Web_Design_Implementation_Guide.txt
   - Engineering_Handoff__RA_Chronos_Refactoring.md
   - Typography_Dashboard_Sizing_Navigation.md
   
   Architecture: Tokens → Atmosphere → Typography → Components → Persistent
   NO legacy references. NO shortcuts.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKEN SYSTEM ─── */
:root {
  /* Core Void & Surfaces (Spec §2, §3) */
  --onyx: #0B1221;
  --midnight: #001a1a;
  --deepTeal: #003838;
  --deepTealLight: #004d4d;

  /* Brand Accents (Spec §Chromatic Infrastructure) */
  --gold: #D4AF37;
  --goldLight: #F5E6C8;
  --goldDark: #A68942;
  --tiffany: #40E0D0;

  /* Typography Baselines (Spec §Platinum/Silver) */
  --platinum: #E8E8E8;
  --silver: #9A9A9A;

  /* Astro UXDS Status System — Tier 1 Compliant (Spec §5) */
  --status-critical: #FF3838;
  --status-serious: #FFB302;
  --status-caution: #FCE83A;
  --status-normal: #56F000;
  --status-standby: #2DCCFF;
  --status-off: #A4ABB6;

  /* Epistemic Semantics — AI Confidence Encoding (Luxury Spec §Chromatic) */
  --absoluteGold: #D4AF37;   /* 100% verified data, hard-coded facts */
  --probSilver: #A6A6A6;     /* >90% AI confidence, high-probability outputs */
  --specBronze: #CD7F32;     /* <70% confidence, requires human review */
  --criticalTeal: #003838;   /* Background processing, unresolved logic gates */

  /* Vertical Theme Tokens (Luxury Spec §Vertical Architecture) */
  --clinicalPlatinum: #E5E4E2; /* Senior/healthcare environments */
  --vitalRed: #FF4D4D;         /* Critical alerts, destructive actions */
  --safetyOrange: #FF6B00;     /* Warnings, credential expirations */
  --signalGreen: #00FF00;      /* Active processing, successful mutations */
  --emerald: #2ECC71;          /* Positive financial indicators */
  --carbonFiber: #1A1A1A;      /* Industrial/CRE analytics */
  --deepNavy: #050A14;         /* Ultra-deep sub-variant backgrounds */

  /* Glassmorphism Surfaces (Spec §4) */
  --surface: rgba(0, 56, 56, 0.4);
  --surfaceB: rgba(0, 26, 26, 0.6);
  --surfaceCard: linear-gradient(135deg, var(--surface), var(--surfaceB));
  --surfaceNav: rgba(11, 18, 33, 0.97);
  --border: rgba(212, 175, 55, 0.15);
  --borderHover: rgba(212, 175, 55, 0.4);

  /* 6-Font Stack (Spec §6) */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-numerals: 'Cinzel', Georgia, serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Fluid Type — Perfect Fourth 1.333 from 18px base (Spec §6, Compass §1) */
  --text-hero: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  --text-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-h2: clamp(1.875rem, 1.4rem + 1.5vw, 2.625rem);
  --text-h3: clamp(1.5rem, 1.2rem + 0.75vw, 1.875rem);
  --text-metric: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-body: 18px;
  --text-small: 16px;
  --text-xs: 14px;
  --text-xxs: 12px;

  /* Spacing — 4px base grid (Compass §2) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Radii */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 20px;

  /* Motion */
  --ease-luxury: cubic-bezier(0.4, 0, 0.2, 1);

  /* Dashboard Sizing (Compass §2) */
  --card-min-w: 200px;
  --card-min-h: 120px;
  --card-ideal-w: 280px;
  --card-ideal-h: 160px;
  --nav-h: 80px;
  --demo-ctx-h: 52px;
  --touch-target: 44px;

  /* Layout */
  --max-content: 1200px;
  --max-text: 720px;
}


/* ─── 2. RESET & ATMOSPHERE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: var(--text-body) }

/* Dual-Gradient Atmospheric Void (Spec §The Dual-Gradient Atmospheric Implementation) */
body {
  font-family: var(--font-body);
  color: var(--platinum);
  background: var(--onyx);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(64,224,208,0.08) 0%, transparent 50%),
    radial-gradient(circle closest-corner at 50% 40%, #054f4f 0%, #003838 50%, #001a1a 100%);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: 0.015em;
}

a { color: var(--tiffany); text-decoration: none; transition: color 0.3s }
a:hover { color: var(--gold) }
img { max-width: 100%; display: block }


/* ─── 3. NAVIGATION — 80px Global Matrix (Spec §Step 3) ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--surfaceNav);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-md);
}
.nav-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
/* Logo Node: 64px circle (Spec §Step 3.1) */
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0 }
.nav-logo img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; clip-path: circle(50%); background: transparent; box-shadow: 0 0 16px rgba(64,224,208,0.12) }
.nav-logo-text { display: flex; flex-direction: column; gap: 1px }
/* Brand Node: Cormorant 1.8rem gold italic (Spec §Step 3.2) */
.nav-brand {
  font-family: var(--font-editorial); font-size: 1.8rem; font-weight: 600;
  color: var(--gold); font-style: normal; letter-spacing: 0.04em;
}

/* Tagline Rotator: 16 spans, 48s cycle, Cormorant 1.35rem (Spec §Step 3.3) */
.nav-taglines { position: relative; height: 20px; overflow: visible; min-width: 400px; max-width: 640px; margin-top: -2px }
.nav-taglines span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--font-editorial); font-size: 1rem; font-weight: 600;
  color: var(--gold); font-style: italic; letter-spacing: 0.02em;
  opacity: 0; animation: navSpin 48s linear infinite; line-height: 1.2;
}
.nav-taglines span:nth-child(1){animation-delay:0s}
.nav-taglines span:nth-child(2){animation-delay:3s}
.nav-taglines span:nth-child(3){animation-delay:6s}
.nav-taglines span:nth-child(4){animation-delay:9s}
.nav-taglines span:nth-child(5){animation-delay:12s}
.nav-taglines span:nth-child(6){animation-delay:15s}
.nav-taglines span:nth-child(7){animation-delay:18s}
.nav-taglines span:nth-child(8){animation-delay:21s}
.nav-taglines span:nth-child(9){animation-delay:24s}
.nav-taglines span:nth-child(10){animation-delay:27s}
.nav-taglines span:nth-child(11){animation-delay:30s}
.nav-taglines span:nth-child(12){animation-delay:33s}
.nav-taglines span:nth-child(13){animation-delay:36s}
.nav-taglines span:nth-child(14){animation-delay:39s}
.nav-taglines span:nth-child(15){animation-delay:42s}
.nav-taglines span:nth-child(16){animation-delay:45s}
@keyframes navSpin {
  0%{opacity:0;transform:translateY(8px)} 0.8%{opacity:1;transform:translateY(0)}
  5.2%{opacity:1;transform:translateY(0)} 6%{opacity:0;transform:translateY(-8px)} 100%{opacity:0}
}

/* Link Array: Montserrat 14px uppercase 0.1em tracking (Spec §Step 3.4) */
.nav-links { display: flex; gap: 24px; align-items: center; flex-shrink: 0 }
.nav-links a {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500;
  color: var(--platinum); letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--tiffany) }
/* FARE Act Crown — crown sits ON TOP, worn like a crown */
.fare-crown {
  position: relative; display: inline-block;
}
.fare-crown::before {
  content: '👑'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 12px; line-height: 1; pointer-events: none;
}
/* CTA: gold pill (Spec §Step 3.5) */
.nav-cta {
  padding: 9px 24px !important; border: 1px solid var(--gold) !important;
  color: var(--gold) !important; border-radius: var(--radius-pill);
  transition: all 0.3s !important;
}
.nav-cta:hover { background: var(--gold) !important; color: var(--onyx) !important }
/* Mobile toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px }
.nav-toggle span { width: 24px; height: 2px; background: var(--platinum); transition: all 0.3s }
@media (max-width: 1024px) {
  .nav-taglines { display: none }
}
@media (max-width: 900px) {
  .nav-toggle { display: flex }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; background: var(--surfaceNav); padding: var(--space-lg); gap: var(--space-sm);
    border-bottom: 1px solid var(--border);
  }
  .nav-links.mobile-open { display: flex }
}


/* ─── 4. GLASSMORPHISM CARD .cd (Spec §4) ─── */
.cd {
  background: var(--surfaceCard);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px 28px;
  transition: all 0.3s var(--ease-luxury);
}
.cd:hover { border-color: var(--borderHover); transform: translateY(-2px) }
/* Card Variants (Luxury Spec §Glassmorphism Variants) */
.cd-accent { border-left: 3px solid var(--tiffany) }
.cd-gold { border: 1px solid var(--gold) }

/* ─── 5. PAGE SECTIONS & LAYOUT ─── */
.section { padding: var(--space-4xl) var(--space-xl); max-width: var(--max-content); margin: 0 auto }
.section-eyebrow {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tiffany);
  margin-bottom: var(--space-sm);
}
.section-title {
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600;
  color: var(--platinum); line-height: 1.15; margin-bottom: var(--space-md);
}
.section-title em { font-style: italic; color: var(--gold) }
.section-subtitle {
  font-family: var(--font-body); font-size: var(--text-body); color: var(--platinum);
  max-width: var(--max-text); line-height: 1.75;
}
.content-wrap { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--space-xl) }


/* ─── 6. PAGE HERO — 100vh skyline-ready (standardized across all pages) ─── */
.page-hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + var(--space-xs)) var(--space-xl) var(--space-lg);
  text-align: center;
}
.page-hero > *:not(.sky-pan):not(.hero-ov) { position: relative; z-index: 2 }
.hero-ov {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,33,0.25) 0%, rgba(11,18,33,0.5) 50%, rgba(11,18,33,0.8) 100%);
}
@media (max-width: 768px) {
  .page-hero { min-height: 80vh; padding: calc(var(--nav-h) + var(--space-xl)) var(--space-sm) var(--space-xl); }
}

/* ─── 7. STAT GRID — Cinzel numerals (Spec §Step 4) ─── */
.stat-grid { display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; padding: var(--space-xl) 0 }
.stat-item { text-align: center; min-width: 140px }
.stat-value {
  font-family: var(--font-numerals); font-size: var(--text-metric); font-weight: 700;
  color: var(--gold); font-variant-numeric: tabular-nums lining-nums;
}
.stat-value.tiffany { color: var(--tiffany) }
.stat-label {
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); margin-top: 6px;
}


/* ─── 8. FEATURE GRID ─── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg) }
.feature-card { composes: cd }
.feature-card .tag {
  display: inline-block; padding: 4px 12px; margin-bottom: var(--space-sm);
  background: rgba(212,175,55,0.1); color: var(--gold);
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px;
}
.feature-card h3 { font-family: var(--font-editorial); font-size: var(--text-h3); color: var(--platinum); margin-bottom: 8px }
.feature-card p { font-size: var(--text-small); color: var(--silver); line-height: 1.7 }

/* ─── 9. COMPARISON TABLE ─── */
.comp-table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0 }
.comp-table th {
  background: rgba(0,56,56,0.6); color: var(--platinum); padding: 16px 20px;
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  border-bottom: 1px solid var(--border);
}
.comp-table td { padding: 14px 20px; border-bottom: 1px solid rgba(212,175,55,0.08); font-size: var(--text-xs); color: var(--silver) }
.comp-table tr:hover { background: rgba(212,175,55,0.04) }
.comp-table .ra { color: var(--gold); font-weight: 600 }


/* ─── 10. BUTTONS ─── */
.btn-primary {
  display: inline-block; padding: 14px 32px;
  background: var(--gold); color: var(--onyx);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: all 0.3s var(--ease-luxury); text-decoration: none;
}
.btn-primary:hover { background: var(--goldLight); color: var(--onyx); transform: translateY(-1px) }
.btn-secondary {
  display: inline-block; padding: 14px 32px;
  background: transparent; color: var(--platinum);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  cursor: pointer; transition: all 0.3s var(--ease-luxury); text-decoration: none;
}
.btn-secondary:hover { border-color: var(--borderHover); color: var(--gold) }

/* ─── 11. HIGHLIGHT BOX ─── */
.highlight-box {
  padding: 32px; background: rgba(212,175,55,0.04);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-lg) 0;
}
.highlight-box h3 { font-family: var(--font-editorial); font-size: 22px; color: var(--gold); margin-bottom: 10px }
.highlight-box p { font-size: var(--text-xs); color: var(--silver); line-height: 1.7 }


/* ─── 12. DEMO CONTEXT BAR — 52px sticky (Compass §3) ─── */
.demo-ctx {
  position: sticky; top: var(--nav-h); z-index: 999;
  height: var(--demo-ctx-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-xl);
  background: rgba(11,18,33,0.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 13px;
}
.demo-ctx a { color: var(--tiffany); font-weight: 500 }
.demo-ctx a:hover { color: var(--gold) }
.demo-ctx .counter { color: var(--silver) }
.demo-ctx .nav-arrows { display: flex; gap: var(--space-sm) }
.demo-ctx .nav-arrows a.disabled { color: rgba(154,154,154,0.3); pointer-events: none }

/* ─── 13. PERSISTENT ELEMENTS (Spec §Step 5) ─── */
/* Watermark: 300px, fixed left 20px, 22.5% opacity, z-101, CIRCULAR */
.ra-hero-watermark {
  position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 101; opacity: 0.225; pointer-events: auto; transition: opacity 0.4s;
  width: 210px; height: 210px; border-radius: 50%; overflow: hidden;
  border: none; outline: none; background: none; display: block;
}
.ra-hero-watermark:hover { opacity: 0.5 }
.ra-hero-watermark img { width: 210px; height: 210px; border-radius: 50%; clip-path: circle(50%); background: transparent; mix-blend-mode: luminosity; display: block }
/* Home Float: bottom-left, z-9999, 45px logo, glassmorphic .cd card */
.ra-home-float {
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; text-decoration: none;
  background: var(--surfaceCard); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all 0.3s var(--ease-luxury);
}

.ra-home-float:hover { border-color: var(--borderHover); transform: scale(1.05) }
.ra-home-float img { width: 45px; height: 45px; border-radius: 50% }
.ra-home-float span {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}

/* ─── 14. FOOTER ─── */
.footer {
  border-top: 1px solid var(--border); padding: var(--space-3xl) var(--space-xl) var(--space-lg);
  background: rgba(11,18,33,0.6);
}
.footer-inner {
  max-width: var(--max-content); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl);
}
.footer-logo {
  font-family: var(--font-editorial); font-size: 1.8rem; font-weight: 600;
  color: var(--gold); font-style: italic;
}
.footer-tagline {
  font-family: var(--font-editorial); font-size: var(--text-xs); font-style: italic;
  color: var(--silver); margin-top: 8px;
}
.footer h4 {
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--platinum); margin-bottom: var(--space-sm);
}

.footer-links { list-style: none; padding: 0 }
.footer-links li { margin-bottom: 8px }
.footer-links a { color: var(--silver); font-size: var(--text-xs); transition: color 0.3s }
.footer-links a:hover { color: var(--tiffany) }
.footer-bottom {
  max-width: var(--max-content); margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg); border-top: 1px solid rgba(212,175,55,0.08);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
}
.footer-copyright { font-size: var(--text-xxs); color: var(--silver) }
.footer-legal { display: flex; gap: var(--space-lg) }
.footer-legal a { font-size: var(--text-xxs); color: var(--silver) }
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg) }
  .footer-bottom { flex-direction: column; text-align: center }
}

/* ─── 15. REVEAL & STAGGER ANIMATIONS ─── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(.25,.1,0,1), transform 0.7s cubic-bezier(.25,.1,0,1) }
.reveal.visible { opacity: 1; transform: translateY(0) }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease-out, transform 0.5s ease-out }

.stagger.visible > *:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0s}
.stagger.visible > *:nth-child(2){opacity:1;transform:translateY(0);transition-delay:80ms}
.stagger.visible > *:nth-child(3){opacity:1;transform:translateY(0);transition-delay:160ms}
.stagger.visible > *:nth-child(4){opacity:1;transform:translateY(0);transition-delay:240ms}
.stagger.visible > *:nth-child(5){opacity:1;transform:translateY(0);transition-delay:320ms}
.stagger.visible > *:nth-child(6){opacity:1;transform:translateY(0);transition-delay:400ms}
.stagger.visible > *:nth-child(7){opacity:1;transform:translateY(0);transition-delay:480ms}
.stagger.visible > *:nth-child(8){opacity:1;transform:translateY(0);transition-delay:560ms}
.stagger.visible > *:nth-child(n+9){opacity:1;transform:translateY(0);transition-delay:640ms}

/* ─── 16. PRICING TIER GRID ─── */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg) }
.tier-card {
  background: var(--surfaceCard); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 32px;
  position: relative; transition: all 0.3s var(--ease-luxury);
}
.tier-card:hover { border-color: var(--borderHover); transform: translateY(-2px) }
.tier-card.featured { border: 2px solid rgba(212,175,55,0.4) }
.tier-card .tier-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; background: var(--gold); color: var(--onyx);
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; border-radius: var(--radius-pill); text-transform: uppercase;
}

.tier-card .tier-label {
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tiffany); margin-bottom: 8px;
}
.tier-card .tier-price {
  font-family: var(--font-numerals); font-size: 36px; font-weight: 700; color: var(--platinum);
}
.tier-card .tier-price span { font-size: 16px; color: var(--silver); font-weight: 400 }
.tier-card .tier-features { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; font-size: var(--text-xs); color: var(--silver) }
.tier-card .tier-features .highlight { color: var(--gold); font-weight: 600 }

/* ─── 17. PILL / TAG CLASSES ─── */
.pill { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 600; letter-spacing: 0.08em }
.p-gold { background: rgba(212,175,55,0.12); color: var(--gold) }
.p-tiffany { background: rgba(64,224,208,0.12); color: var(--tiffany) }
.p-critical { background: rgba(255,56,56,0.12); color: var(--status-critical) }
.p-normal { background: rgba(86,240,0,0.12); color: var(--status-normal) }

/* ─── 18. BENTO GRID ─── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) }
.bento-2 { grid-column: span 2 }
.bento-full { grid-column: 1 / -1 }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr } .bento-2 { grid-column: span 1 } }


/* ─── 19. CTA SECTION ─── */
.cta-section {
  text-align: center; padding: var(--space-3xl) var(--space-xl);
  background: rgba(0,56,56,0.15); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

/* ─── 20. VERTICAL MARKET LINKS ─── */
.market-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg) }
.market-link {
  padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--platinum);
  transition: all 0.3s var(--ease-luxury); text-decoration: none;
}
.market-link:hover { border-color: var(--borderHover); color: var(--gold); background: rgba(212,175,55,0.05) }
.market-link.active { background: var(--gold); color: var(--onyx); border-color: var(--gold) }

/* ─── 21. CHRONOS KEYFRAMES (Luxury Spec §Kinetic Choreography) ─── */
/* Glow: dual tiffany+gold alternating luminescence (matching live site) */
@keyframes chronosGlow {
  0% { box-shadow: 0 0 40px rgba(64,224,208,0.08), 0 0 80px rgba(212,175,55,0.03) }
  100% { box-shadow: 0 0 60px rgba(64,224,208,0.18), 0 0 120px rgba(212,175,55,0.08) }
}
/* ZoomPulse: breathing scale animation for hero logo (matching live site) */
@keyframes logoZoomPulse {
  0% { transform: scale(0.88); opacity: 0.75 }
  25% { transform: scale(1.0); opacity: 1 }
  50% { transform: scale(1.06); opacity: 1 }
  75% { transform: scale(1.0); opacity: 1 }
  100% { transform: scale(0.88); opacity: 0.75 }
}
/* Hero eyebrow — shimmering gradient text (matching live site) */
.hero-eye { position: relative; display: inline-block; margin-bottom: var(--space-lg) }
.hero-eye-line {
  display: block; width: 60px; height: 1px; margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-eye-text {
  font-family: var(--font-body); font-size: clamp(0.75rem, 0.6rem + 0.8vw, 1.1rem);
  font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase;
  background: linear-gradient(90deg, #D4AF37, #40E0D0, #F5E6C8, #40E0D0, #D4AF37);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
  filter: drop-shadow(0 0 12px rgba(64,224,208,0.15));
}
.hero-eye-line2 {
  display: block; width: 60px; height: 1px; margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Hero logo container — 270px, static logo + animated gears */
.hero-logo-wrap {
  position: relative; width: 324px; height: 324px; margin: 0 auto var(--space-md);
}
.hero-logo {
  width: 324px; height: 324px; border-radius: 50%; background: transparent;
  box-shadow: 0 0 60px rgba(64,224,208,0.15), 0 0 120px rgba(212,175,55,0.08);
  animation: chronosGlow 4s ease-in-out infinite alternate;
  clip-path: circle(50%);
}
/* SVG gear overlay — sits on top of logo, pointer-events:none so logo stays clickable */
.hero-gears {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%; overflow: hidden;
}
/* Hero logo video — animated gear movement from mp4 */
.hero-logo-video {
  width: 340px; height: 340px; border-radius: 50%; object-fit: cover;
  clip-path: circle(50%);
  box-shadow: 0 0 60px rgba(64,224,208,0.15), 0 0 120px rgba(212,175,55,0.08);
  animation: chronosGlowSmooth 8s ease-in-out infinite;
}
/* Smooth bidirectional glow — no hard rewind */
@keyframes chronosGlowSmooth {
  0%, 100% { box-shadow: 0 0 40px rgba(64,224,208,0.08), 0 0 80px rgba(212,175,55,0.03); }
  50% { box-shadow: 0 0 60px rgba(64,224,208,0.18), 0 0 120px rgba(212,175,55,0.08); }
}
/* Pulse: breathing opacity for loading skeletons — implies processing, not stalling */
@keyframes chronos-pulse {
  0%, 100% { opacity: 0.12 }
  50% { opacity: 0.3 }
}
/* Spin: continuous rotation for progress rings and atmospheric elements */
@keyframes chronos-spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

/* ─── 22. NYC SKYLINE PANORAMA ─── */
.sky-pan { position: absolute; inset: 0; overflow: hidden; z-index: 0 }
.sky-track { display: flex; width: 300%; height: 100%; animation: panNYC 90s linear infinite }
.sky-track div { flex: 0 0 33.333%; height: 100%; background: url('https://images.unsplash.com/photo-1534430480872-3498386e7856?w=2400&q=80') center/cover no-repeat }
@keyframes panNYC { 0% { transform: translateX(0) } 100% { transform: translateX(-33.333%) } }

/* ─── 22. DASHBOARD BAR CHART ─── */
.dashboard-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: var(--space-sm) 0 }
.dashboard-bar { flex: 1; background: linear-gradient(to top, var(--deepTeal), var(--tiffany)); border-radius: 4px 4px 0 0; transition: height 1s var(--ease-luxury) }


/* ─── 23. UTILITY CLASSES ─── */
.text-gold { color: var(--gold) }
.text-tiffany { color: var(--tiffany) }
.text-platinum { color: var(--platinum) }
.text-silver { color: var(--silver) }
.text-center { text-align: center }
.font-display { font-family: var(--font-display) }
.font-editorial { font-family: var(--font-editorial) }
.font-numerals { font-family: var(--font-numerals) }
.font-ui { font-family: var(--font-ui) }
.font-mono { font-family: var(--font-mono) }
.mt-xl { margin-top: var(--space-xl) }
.mb-xl { margin-bottom: var(--space-xl) }
.mx-auto { margin-left: auto; margin-right: auto }
.max-text { max-width: var(--max-text) }
.max-content { max-width: var(--max-content) }

/* ─── 24. SCROLLBAR — always visible, overrides macOS overlay behavior ─── */
html { overflow-y: scroll }
::-webkit-scrollbar { width: 10px; -webkit-appearance: none }
::-webkit-scrollbar-track { background: rgba(11,18,33,0.8) }
::-webkit-scrollbar-thumb { background: var(--deepTealLight); border-radius: 5px; border: 2px solid rgba(11,18,33,0.8); min-height: 40px }
::-webkit-scrollbar-thumb:hover { background: var(--gold) }
html { scrollbar-width: thin; scrollbar-color: var(--deepTealLight) rgba(11,18,33,0.8) }

/* ─── 25. PRINT ─── */
@media print { .nav, .ra-hero-watermark, .ra-home-float, .demo-ctx { display: none } body { background: #fff; color: #000 } }

/* ─── 26. MOBILE RESPONSIVENESS — S-TIER ─── */

/* === 900px: Tablet === */
@media (max-width: 900px) {
  .section { padding: var(--space-3xl) var(--space-md) }
  .feature-grid { grid-template-columns: 1fr 1fr }
  .tier-grid { grid-template-columns: 1fr 1fr }
  .stat-grid { gap: var(--space-lg) }
  .stat-item { min-width: 120px }
  .comp-table { font-size: var(--text-xxs) }
  .comp-table th, .comp-table td { padding: 10px 12px }
  .ra-hero-watermark { display: none }
  .demo-ctx { padding: 0 var(--space-md); font-size: 11px }
  .demo-ctx .nav-arrows { gap: var(--space-xs) }
  .nav { padding: 0 var(--space-md) }
}

/* === 640px: Mobile === */
@media (max-width: 640px) {
  :root { --text-body: 16px }
  .feature-grid { grid-template-columns: 1fr }
  .tier-grid { grid-template-columns: 1fr }
  .stat-grid { flex-direction: column; gap: var(--space-md) }
  .stat-value { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem) }
  .comp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .comp-table th:first-child, .comp-table td:first-child { position: sticky; left: 0; background: rgba(0,56,56,0.95); z-index: 1 }
  .highlight-box { padding: 20px; margin: var(--space-md) 0 }
  .btn-primary, .btn-secondary { padding: 12px 24px; font-size: var(--text-xxs); width: 100% }
  .cta-section { padding: var(--space-xl) var(--space-md) }
  .cd { padding: 18px 20px }
  .market-links { gap: var(--space-xs) }
  .market-link { padding: 8px 14px; font-size: 10px }
  .ra-home-float { bottom: 12px; left: 12px; padding: 6px }
  .ra-home-float img { width: 36px; height: 36px }
  .ra-home-float span { font-size: 8px }
  .footer-inner { grid-template-columns: 1fr }
  .nav-logo img { width: 48px; height: 48px }
  .nav-brand { font-size: 1.4rem }
  .page-hero { min-height: 70vh; padding: calc(var(--nav-h) + var(--space-lg)) var(--space-sm) var(--space-lg) }
  .demo-ctx { height: auto; min-height: var(--demo-ctx-h); flex-wrap: wrap; padding: var(--space-xs) var(--space-sm); gap: var(--space-xs) }
  .demo-ctx .counter { display: none }
}

/* === 400px: Small phones === */
@media (max-width: 400px) {
  .page-hero { min-height: 60vh }
  .tier-card { padding: 24px 16px }
  .tier-card .tier-price { font-size: 28px }
  .nav { height: 64px }
  :root { --nav-h: 64px }
  .nav-logo img { width: 40px; height: 40px }
  .nav-brand { font-size: 1.2rem }
}

/* === Touch targets (WCAG 2.2 Level AA) === */
@media (pointer: coarse) {
  .nav-links a { min-height: var(--touch-target); display: flex; align-items: center }
  .nav-cta { min-height: var(--touch-target) }
  .btn-primary, .btn-secondary { min-height: var(--touch-target) }
  .market-link { min-height: var(--touch-target); display: flex; align-items: center; justify-content: center }
  .footer-links a { min-height: var(--touch-target); display: flex; align-items: center }
  .demo-ctx a { min-height: var(--touch-target); display: flex; align-items: center }
}

/* === Safe area insets (iPhone notch/Dynamic Island) === */
@supports (padding: env(safe-area-inset-bottom)) {
  .ra-home-float { bottom: calc(12px + env(safe-area-inset-bottom)) }
  .footer { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)) }
  .nav { padding-left: max(var(--space-md), env(safe-area-inset-left)); padding-right: max(var(--space-md), env(safe-area-inset-right)) }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .sky-track { animation: none }
  .reveal { opacity: 1; transform: none; transition: none }
  .stagger > * { opacity: 1; transform: none; transition: none }
  .nav-taglines-track span { animation: none; opacity: 0 }
  .nav-taglines-track span:first-child { opacity: 1 }
  @keyframes chronosGlow { 0%, 100% { box-shadow: 0 0 20px rgba(64,224,208,0.15) } }
}

/* === Landscape mobile === */
@media (max-height: 500px) and (orientation: landscape) {
  .page-hero { min-height: auto; padding: calc(var(--nav-h) + var(--space-md)) var(--space-md) var(--space-md) }
}

/* END RA CHRONOS v5.0 CSS — All tokens from spec, zero legacy */