/**
 * style.css — Arrai Website Styles
 * ARR-001-BB | arrai.haus | graph.haus Platform
 *
 * Visual specification source: ARR-001-BB Section IV
 * Prototype reference: arrai_prototype.html (validated interaction model)
 *
 * Color system — exact hex values from brief:
 *   --navy   #0D1B2A  Background, deepest layer
 *   --navy2  #1A2E42  Secondary background, card fills
 *   --teal   #0E9E8E  Primary accent, spoke default, AI highlight
 *   --gold   #F0A500  Hover state, spoke highlight, CTA
 *   --blue   #1E6FA5  Hero orb color
 *   --white  #F5F9FC  Text primary
 *   --soft   #E8F4F8  Text secondary
 *
 * Font: Inter (all weights 300–800) — clean, legible, modern SaaS standard
 * Bold (700/800) for labels/headlines; Light (300) for sub-labels and body
 *
 * Orb sizes:
 *   orb-hero       148×148px
 *   orb-primary    108×108px
 *   orb-secondary   82×82px
 *   orb-accent       66×66px
 */

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

/* ── Custom Properties ──────────────────────────────────────────────────────── */
:root {
  --navy:         #0D1B2A;
  --navy2:        #1A2E42;
  --teal:         #0E9E8E;
  --gold:         #F0A500;
  --blue:         #1E6FA5;
  --white:        #F5F9FC;
  --soft:         #E8F4F8;

  /* Spoke colors */
  --spoke:        rgba(14, 158, 142, 0.35);
  --spoke-hover:  rgba(240, 165, 0, 0.70);

  /* Transitions */
  --t-spoke:      0.3s ease;
  --t-orb:        0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-nav:        0.1s ease-out;
  --t-level:      0.25s cubic-bezier(0.4, 0, 1, 1);    /* level exit */
  --t-level-in:   0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* level enter */
  --t-modal:      0.25s ease;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--navy);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;   /* dvh: handles mobile browser chrome correctly */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Background atmosphere — fixed, does not tilt with graph ────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(30, 111, 165, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(14, 158, 142, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(240, 165, 0, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Graph Scene ────────────────────────────────────────────────────────────── */
/* Parallax tilt is applied to #scene via JS: perspective(1200px) rotateX() rotateY() */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-nav);
  z-index: 1;
  touch-action: manipulation;   /* Step 11: prevent double-tap zoom on scene */
}

/* ── SVG Spokes ─────────────────────────────────────────────────────────────── */
/* SVG parent: pointer-events:none so the background canvas never intercepts
   orb hover events. Descendant .spoke-hit elements with pointer-events:stroke
   still fire independently — MDN: "pointer events may target its descendant
   elements if those descendants have pointer-events set to some other value." */
#spokes-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.spoke-line {
  stroke: var(--spoke);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.6;
  pointer-events: none;       /* visual only — hit area is .spoke-hit */
  transition:
    stroke var(--t-spoke),
    stroke-width var(--t-spoke),
    opacity var(--t-spoke);
}

.spoke-line.highlighted {
  stroke: var(--spoke-hover);
  stroke-width: 2.5;
  stroke-dasharray: none;
  opacity: 1;
}

/* Invisible wide hit area for spoke hover + click (Tweak 5 / Fix 4) */
/* Fix 4: stroke must be non-transparent (even near-zero alpha) for
   pointer-events:stroke to fire reliably across all browsers.
   rgba(0,0,0,0.001) is visually imperceptible on the dark background. */
.spoke-hit {
  stroke: rgba(0, 0, 0, 0.001);
  stroke-width: 32;
  fill: none;
  pointer-events: stroke;     /* SVG: events only on the stroke path width — for click */
  cursor: pointer;
}

/* ── Orb Base ───────────────────────────────────────────────────────────────── */
/* All orbs: absolute position, centered at (left, top) via translate(-50%,-50%) */
.orb {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;

  /* Centering: position is the orb center, not top-left corner */
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--t-orb), box-shadow var(--t-orb), opacity 0.3s ease;
  z-index: 2;
  will-change: transform;
}

/* Glass highlight — inner radial shimmer on all orbs */
.orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.18), transparent 65%);
  pointer-events: none;
}

/* Fix 1 — ALL descendants non-interactive (not just direct children).
   This eliminates hover flicker caused by mouse crossing internal text,
   sub-labels, or absolutely-positioned tooltip elements within the orb. */
.orb *,
.orb *::before,
.orb *::after {
  pointer-events: none !important;
}

/* Hover: scale up with bounce — brief spec: 1.18, cubic-bezier(0.34, 1.56, 0.64, 1) */
/* .hovered class set by geometric hit detection in graph.js (not CSS :hover) */
.orb.hovered {
  transform: translate(-50%, -50%) scale(1.18) !important;
  z-index: 10;
}

/* Step 11: touch-active mirrors hover visual state for touch devices */
.orb.touch-active {
  transform: translate(-50%, -50%) scale(1.18) !important;
  z-index: 10;
}

.orb.touch-active .orb-tooltip {
  opacity: 1;
}

/* Level transition states — added/removed by graph.js */
.orb.entering {
  animation: orbEnter var(--t-level-in) both;
}

.orb.exiting {
  animation: orbExit var(--t-level) both;
}

/* ── Orb Types ──────────────────────────────────────────────────────────────── */

/* Hero — 148×148px — Blue radial gradient — center node at every level */
.orb-hero {
  width: 148px;
  height: 148px;
  background: radial-gradient(circle at 40% 35%, #1E8FC5, #0D5A8A);
  box-shadow:
    0 0 40px rgba(30, 111, 165, 0.50),
    0 0 80px rgba(30, 111, 165, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Primary — 108×108px — Teal radial gradient — main content orbs */
.orb-primary {
  width: 108px;
  height: 108px;
  background: radial-gradient(circle at 40% 35%, #12B8A6, #0A7A6E);
  box-shadow:
    0 0 28px rgba(14, 158, 142, 0.45),
    0 0 56px rgba(14, 158, 142, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Secondary — 82×82px — Dark blue with teal border — supporting orbs */
.orb-secondary {
  width: 82px;
  height: 82px;
  background: radial-gradient(circle at 40% 35%, #2A4A6A, #1A2E42);
  border: 1.5px solid rgba(14, 158, 142, 0.40);
  box-shadow:
    0 0 18px rgba(14, 158, 142, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.orb-secondary.hovered {
  border-color: rgba(240, 165, 0, 0.60);
}

/* Accent — 66×66px — Gold gradient — utility orbs (home, pricing, platform) */
.orb-accent {
  width: 66px;
  height: 66px;
  background: radial-gradient(circle at 40% 35%, #C48A00, #8A5F00);
  box-shadow:
    0 0 16px rgba(240, 165, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Orb Labels ─────────────────────────────────────────────────────────────── */
/* Inter Bold 700 for labels, Inter Light 300 for sub-labels */
.orb-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
}

.orb-hero     .orb-label { font-size: 13.5px; }
.orb-primary  .orb-label { font-size: 11px; }
.orb-secondary .orb-label { font-size: 9.5px; }
.orb-accent   .orb-label { font-size: 8.5px; }

/* Sub-label: Inter Light */
.orb-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 3px;
  line-height: 1.3;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
}

/* ── Orb Tooltip ────────────────────────────────────────────────────────────── */
/* Default: appears above orb. JS adds .below/.edge-right/.edge-left (Tweak 1) */
.orb-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 27, 42, 0.97);
  border: 1px solid rgba(14, 158, 142, 0.40);
  border-radius: 8px;
  padding: 8px 12px;
  width: 160px;
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: rgba(232, 244, 248, 0.85);
  line-height: 1.55;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-align: center;
  z-index: 30;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.50);
  white-space: normal;
}

/* Tweak 1 — Tooltip flip: orb in top 25% → tooltip renders below */
.orb-tooltip.below {
  bottom: auto;
  top: calc(100% + 12px);
}

/* Tweak 1 — Tooltip edge nudge: orb near left edge → align from left */
.orb-tooltip.edge-right {
  left: -16px;
  right: auto;
  transform: none;
}

/* Tweak 1 — Tooltip edge nudge: orb near right edge → align from right */
.orb-tooltip.edge-left {
  left: auto;
  right: -16px;
  transform: none;
}

.orb.hovered .orb-tooltip {
  opacity: 1;
}

/* ── Spoke Relationship Card (Tweak 5) ─────────────────────────────────────── */
/* Appears at spoke midpoint on click. position:fixed, left set by graph.js.   */
.spoke-card {
  position: fixed;
  background: rgba(13, 27, 42, 0.97);
  border: 1px solid rgba(240, 165, 0, 0.45);
  border-radius: 10px;
  padding: 12px 16px;
  width: min(240px, 80vw);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform: translateX(-50%) scale(0.92);
  z-index: 40;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.spoke-card.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.spoke-card-names {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.spoke-card-from,
.spoke-card-to {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.3px;
}

.spoke-card-sep {
  font-size: 11px;
  color: rgba(240, 165, 0, 0.70);
  flex-shrink: 0;
}

.spoke-card-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: rgba(232, 244, 248, 0.80);
  line-height: 1.6;
  margin: 0;
}

/* ── Brand Lockup ───────────────────────────────────────────────────────────── */
#brand {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 50;
  pointer-events: none;
}

/* SVG wordmark: lowercase 'arrai' in Georgia + four coral diamonds (growing signal) */
.arrai-wordmark {
  display: block;
  overflow: visible;
}

#brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 300;
  color: #E8643A;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Back Navigation ────────────────────────────────────────────────────────── */
#nav-back {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 46, 66, 0.70);
  border: 1px solid rgba(14, 158, 142, 0.30);
  border-radius: 20px;
  padding: 7px 16px 7px 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(232, 244, 248, 0.70);
  backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

#nav-back.visible {
  opacity: 1;
  pointer-events: auto;
}

#nav-back:hover {
  color: var(--gold);
  border-color: rgba(240, 165, 0, 0.50);
}

#nav-back-arrow {
  font-size: 13px;
  line-height: 1;
}

/* ── Back one level pill — L3 only (below Home button) ─────────────────────── */
#nav-back-back {
  position: fixed;
  top: 58px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 46, 66, 0.70);
  border: 1px solid rgba(14, 158, 142, 0.30);
  border-radius: 20px;
  padding: 7px 16px 7px 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(232, 244, 248, 0.70);
  backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

#nav-back-back.visible {
  opacity: 1;
  pointer-events: auto;
}

#nav-back-back:hover {
  color: var(--gold);
  border-color: rgba(240, 165, 0, 0.50);
}

/* ── Hint Text ──────────────────────────────────────────────────────────────── */
#hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: rgba(232, 244, 248, 0.25);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

#hint.hidden {
  opacity: 0;
}

/* ── Level 3 Detail Card ────────────────────────────────────────────────────── */
/* Website D-001: shown in graph space when at Level 3 — same visual as graph */
/* Positioned by graph.js relative to center hero orb */
.detail-card {
  position: fixed;
  left: 50%;
  top: 62%;               /* Below center — adjustable by graph.js */
  transform: translateX(-50%) translateY(0) scale(0.92);
  width: min(400px, 85vw);
  background: linear-gradient(135deg, #1A2E42, #0D1B2A);
  border: 1px solid rgba(14, 158, 142, 0.45);
  border-radius: 18px;
  padding: 28px 32px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.60),
    0 0 60px rgba(14, 158, 142, 0.08);
}

.detail-card.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.detail-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.detail-headline {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 12px;
}

.detail-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 244, 248, 0.75);
  line-height: 1.75;
  margin-bottom: 0;
}

.detail-cta-wrap {
  margin-top: 20px;
}

/* CTA button — appears in detail cards, triggers waitlist modal */
.cta-button {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold);
  border: none;
  border-radius: 20px;
  padding: 9px 22px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}

.cta-button:hover {
  background: #FFB800;
  transform: scale(1.04);
}

.cta-button:active {
  transform: scale(0.98);
}

/* ── Waitlist Modal ─────────────────────────────────────────────────────────── */
/* Website D-003: all "Try It Free" CTAs trigger this overlay */
.waitlist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-modal);
}

.waitlist-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.waitlist-modal {
  position: relative;
  background: linear-gradient(135deg, #1A2E42, #0D1B2A);
  border: 1px solid rgba(14, 158, 142, 0.50);
  border-radius: 20px;
  padding: 40px 44px;
  width: min(440px, 90vw);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.70),
    0 0 80px rgba(14, 158, 142, 0.08);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.waitlist-overlay.visible .waitlist-modal {
  transform: scale(1);
}

.waitlist-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.30);
  font-size: 18px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s ease;
}

.waitlist-close:hover {
  color: var(--gold);
}

.waitlist-headline {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 8px;
}

.waitlist-subhead {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 244, 248, 0.60);
  line-height: 1.6;
  margin-bottom: 24px;
}

.waitlist-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waitlist-input {
  background: rgba(13, 27, 42, 0.80);
  border: 1px solid rgba(14, 158, 142, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.waitlist-input::placeholder {
  color: rgba(232, 244, 248, 0.30);
}

.waitlist-input:focus {
  border-color: var(--teal);
}

.waitlist-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold);
  border: none;
  border-radius: 10px;
  padding: 13px 24px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, transform 0.15s ease;
  width: 100%;
}

.waitlist-btn:hover {
  background: #FFB800;
  transform: translateY(-1px);
}

.waitlist-btn:active {
  transform: translateY(0);
}

.waitlist-confirm {
  text-align: center;
  padding: 8px 0 4px;
}

.waitlist-confirm-headline {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 8px;
}

.waitlist-confirm-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 244, 248, 0.60);
  line-height: 1.6;
}

/* ── Level Transition Animations ────────────────────────────────────────────── */
/* Orbs bloom out from center when entering a new level */
/* Each orb gets staggered delay via JS inline style */

@keyframes orbEnter {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes orbExit {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Spoke fade-in after orbs placed */
@keyframes spokeFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.6; }
}

.spoke-line.fading-in {
  animation: spokeFadeIn 0.2s ease forwards;
}

/* ── Mobile Specification ───────────────────────────────────────────────────── */
/* Website D-002: test mobile, adjust as needed */
/* Minimum touch target: 44×44px — all orbs exceed this */

@media (max-width: 768px) {
  /* Orb size reductions — brief spec */
  .orb-hero      { width: 100px; height: 100px; }
  .orb-primary   { width:  78px; height:  78px; }
  .orb-secondary { width:  60px; height:  60px; }
  .orb-accent    { width:  48px; height:  48px; }

  /* Label size reductions proportional */
  .orb-hero      .orb-label { font-size: 11px; }
  .orb-primary   .orb-label { font-size: 9.5px; }
  .orb-secondary .orb-label { font-size: 8.5px; }
  .orb-accent    .orb-label { font-size: 8px; }

  .orb-sub { font-size: 7px; margin-top: 2px; }

  /* Thinner spokes on mobile — brief spec */
  .spoke-line          { stroke-width: 1; }
  .spoke-line.highlighted { stroke-width: 2; }

  /* Brand slightly smaller on mobile */
  .arrai-wordmark { width: 160px; height: 38px; }
  #brand-sub  { font-size: 8px; }

  /* Detail card full-width on mobile */
  .detail-card {
    width: calc(100vw - 32px);
    padding: 22px 24px;
    top: auto;
    bottom: 70px;
    transform: translateX(-50%) scale(0.95);
  }

  .detail-card.visible {
    transform: translateX(-50%) scale(1);
  }

  .detail-headline { font-size: 17px; }
  .detail-body     { font-size: 12px; }

  /* Waitlist modal full-width on mobile */
  .waitlist-modal {
    padding: 28px 24px;
    border-radius: 16px;
  }

  .waitlist-headline { font-size: 18px; }

  /* Hide hint on small screens */
  #hint { display: none; }

  /* Nav back adjust */
  #nav-back {
    top: 16px;
    right: 16px;
    padding: 6px 12px 6px 10px;
    font-size: 10px;
  }

  #nav-back-back {
    top: 52px;
    right: 16px;
    padding: 6px 12px 6px 10px;
    font-size: 10px;
  }
}

@media (max-width: 375px) {
  /* Very small phones — Website D-002: test and adjust if crowded */
  .orb-hero      { width:  90px; height:  90px; }
  .orb-primary   { width:  68px; height:  68px; }
  .orb-secondary { width:  54px; height:  54px; }
  .orb-accent    { width:  44px; height:  44px; }

  .orb-hero .orb-label { font-size: 10px; }
  .orb-sub { display: none; }   /* Hide sub-labels on very small screens */
}

/* ── High DPI / Retina ──────────────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Glows may render slightly stronger on retina — compensate if needed */
  .orb-hero {
    box-shadow:
      0 0 32px rgba(30, 111, 165, 0.45),
      0 0 64px rgba(30, 111, 165, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* ── Step 11: iOS Tilt Permission Button ────────────────────────────────────── */
/* Appears only on iOS 13+ first visit. Tap → requestPermission() → gyro starts.  */
/* Positioned bottom-right — clear of nav orbs (center) and brand (top-left).     */
.tilt-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  background: rgba(13, 27, 42, 0.90);
  border: 1px solid rgba(14, 158, 142, 0.40);
  border-radius: 20px;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease;
  pointer-events: none;
}

.tilt-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tilt-btn:hover,
.tilt-btn:active {
  border-color: rgba(14, 158, 142, 0.80);
  background: rgba(13, 27, 42, 0.97);
}

@media (max-width: 768px) {
  .tilt-btn {
    bottom: 100px;   /* clear of bottom edge */
    right: 16px;
    font-size: 11px;
    padding: 8px 14px;
  }
}

/* ── Focus Accessibility ────────────────────────────────────────────────────── */
/* Keyboard navigation support */
.orb:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

#nav-back:focus-visible,
#nav-back-back:focus-visible,
.waitlist-close:focus-visible,
.cta-button:focus-visible,
.waitlist-btn:focus-visible,
.tilt-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Scrollbar Hide (scene is overflow:hidden, but just in case) ────────────── */
::-webkit-scrollbar { display: none; }