/* ============================================================
   SubSaharaCloud — Spatial Edition v2
   Glass / spatial / Vision-Pro-adjacent — leveled up
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand-blue:   #7C9BFF;
  --brand-gold:   #F5CA55;
  --brand-green:  #5FE8A4;
  --brand-violet: #B4A6FF;

  --brand-blue-deep:   #1E3FA0;
  --brand-gold-deep:   #B88A18;
  --brand-green-deep:  #178A52;
  --brand-violet-deep: #6B5CD8;

  /* Canvas — slightly warmer black for better color contrast */
  --bg-0:   #04060C;
  --bg-1:   #090C18;
  --bg-2:   #11162A;

  /* Ink */
  --ink:        #F6F7FB;
  --ink-dim:    rgba(246, 247, 251, 0.74);
  --ink-mute:   rgba(246, 247, 251, 0.48);
  --ink-faint:  rgba(246, 247, 251, 0.22);

  /* Glass surfaces (tuned) */
  --glass-1: rgba(255,255,255, 0.040);
  --glass-2: rgba(255,255,255, 0.070);
  --glass-3: rgba(255,255,255, 0.11);
  --glass-hi: rgba(255,255,255, 0.22);

  --hair:       rgba(255,255,255, 0.07);
  --hair-bold:  rgba(255,255,255, 0.14);
  --hair-hi:    rgba(255,255,255, 0.24);

  /* Blur depths */
  --blur-xs: 6px;
  --blur-sm: 12px;
  --blur-md: 24px;
  --blur-lg: 44px;
  --sat:     180%;

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Shadow — layered depth */
  --shadow-glass:
    0 1px 0 0 var(--glass-hi) inset,
    0 0 0 1px var(--hair) inset,
    0 20px 60px -20px rgba(0,0,0,.6),
    0 40px 120px -40px rgba(0,0,0,.55);
  --shadow-raised:
    0 1px 0 0 rgba(255,255,255,.24) inset,
    0 0 0 1px var(--hair-bold) inset,
    0 30px 80px -20px rgba(0,0,0,.7),
    0 60px 180px -40px rgba(12,16,36,.95),
    0 0 80px -20px rgba(124,155,255,.15);
  --shadow-halo:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 80px -20px rgba(255,255,255,.3);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.2,.9,.2,1.12);
  --ease-crisp: cubic-bezier(.4,0,.2,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;
  --dur-4: 900ms;
  --dur-5: 1400ms;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --max: 1280px;
  --pad: clamp(20px, 4vw, 40px);
  --nav-h: 72px;

  /* Brand gradients */
  --grad-brand: linear-gradient(120deg, var(--brand-gold) 0%, var(--brand-violet) 40%, var(--brand-blue) 75%, var(--brand-green) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(245,202,85,.4), rgba(180,166,255,.4), rgba(124,155,255,.4), rgba(95,232,164,.4));
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "cv11","ss01","ss03", "tnum";
  font-optical-sizing: auto;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 2px var(--bg-0),
    0 0 0 4px color-mix(in oklab, var(--brand-blue) 80%, white),
    0 0 30px -5px var(--brand-blue);
  border-radius: 10px;
  transition: box-shadow var(--dur-1);
}
::selection { background: color-mix(in oklab, var(--brand-gold) 60%, transparent); color: #111; }
kbd {
  font: 500 11px/1 var(--font-mono);
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--glass-2);
  border: 1px solid var(--hair);
  color: var(--ink-dim);
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--hair-bold) transparent; }

/* ---------- Background stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .95;
}
.stage__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.65), transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(0,0,0,.45), transparent 55%);
  mix-blend-mode: multiply;
}
.stage__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 40%, transparent 100%);
  opacity: .6;
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  to { transform: translate3d(72px, 72px, 0); }
}
.stage__grain {
  position: absolute;
  inset: 0;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Ambient drifting stars */
.stage__stars {
  position: absolute;
  inset: 0;
  opacity: .7;
  pointer-events: none;
}
.stage__stars span {
  position: absolute;
  left: var(--sx, 50vw);
  top:  var(--sy, 50vh);
  width:  var(--sz, 1.2px);
  height: var(--sz, 1.2px);
  background: radial-gradient(circle, rgba(255,255,255, var(--a, .6)), transparent 70%);
  border-radius: 50%;
  animation: starDrift var(--dur, 30s) linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
  opacity: 0;
}
@keyframes starDrift {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(calc(var(--dx, 0vw) * 0.5), calc(var(--dy, 0vh) * 0.5), 0) scale(1); }
  92%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0vw), var(--dy, 0vh), 0) scale(1.2); opacity: 0; }
}

/* ---------- Container & section rhythm ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0;
}
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 72px);
  text-align: center;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-sm)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--sat));
  border: 1px solid var(--hair);
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}
.eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: eyebrowSheen 6s var(--ease-out) infinite;
}
@keyframes eyebrowSheen {
  0%, 60% { transform: translateX(-130%); }
  80%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 4px rgba(95,232,164,.18), 0 0 14px rgba(95,232,164,.7);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(95,232,164,.18), 0 0 14px rgba(95,232,164,.7); }
  50%      { transform: scale(.8); box-shadow: 0 0 0 6px rgba(95,232,164,.08), 0 0 24px rgba(95,232,164,.9); }
}

/* ---------- Type scale ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(42px, 7.4vw, 104px);
  margin: 0;
}
.h-display em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 12s ease-in-out infinite;
  padding-inline: 0.02em;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.h-section {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(30px, 4.2vw, 56px);
  margin: 0 0 .4em;
}
.h-section em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 12s ease-in-out infinite;
}
.lede {
  color: var(--ink-dim);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 58ch;
  margin: 0 auto;
}
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

/* Word-by-word reveal for [data-reveal-words] */
[data-reveal-words] .word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px);
  transition:
    opacity 900ms var(--ease-expo) var(--d, 0ms),
    filter  900ms var(--ease-expo) var(--d, 0ms),
    transform 900ms var(--ease-expo) var(--d, 0ms);
  white-space: pre;
}
[data-reveal-words].is-in .word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-words] .word { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -40px; left: 16px;
  padding: 8px 14px;
  background: var(--glass-3);
  border-radius: 10px;
  z-index: 1000;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { top: 16px; }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 40;
  display: flex;
  align-items: center;
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.topbar[data-hidden="true"] { transform: translateY(-110%); }
.topbar__inner {
  width: 100%;
  max-width: calc(var(--max) + 32px);
  margin-inline: auto;
  padding: 10px var(--pad);
}
.topbar__shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.6), 0 1px 0 0 var(--glass-hi) inset;
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.topbar[data-scrolled="true"] .topbar__shell {
  background: rgba(10, 12, 22, 0.62);
  border-color: var(--hair-bold);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8), 0 1px 0 0 var(--glass-hi) inset;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--hair);
  min-width: max-content;
}
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--hair), 0 8px 24px -10px rgba(245,202,85,.45);
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3);
}
.topbar[data-scrolled="true"] .brand__mark {
  transform: rotate(-6deg);
  box-shadow: 0 0 0 1px var(--hair), 0 12px 30px -8px rgba(245,202,85,.6);
}
.brand__name {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 15px;
}
.brand__name b { font-weight: 700; }
.brand__name span { color: var(--ink-mute); }
.brand__name em {
  font-style: normal;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 600;
}

.topbar__nav {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto 0 8px;
  position: relative;
}
.topbar__nav a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-dim);
  transition: color var(--dur-1), background var(--dur-1);
  position: relative;
}
.topbar__nav a:hover { color: var(--ink); background: var(--glass-2); }
.topbar__nav a[aria-current="true"] {
  color: var(--ink);
  background: var(--glass-2);
}

.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cmd-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-dim);
  border-radius: var(--r-pill);
  background: var(--glass-1);
  border: 1px solid var(--hair);
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1);
}
.cmd-trigger:hover { color: var(--ink); background: var(--glass-2); border-color: var(--hair-bold); }
.cmd-trigger svg { opacity: .7; }

.btn--sm { padding: 8px 14px; font-size: 13.5px; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--glass-2);
  border: 1px solid var(--hair);
  align-items: center; justify-content: center;
  flex-direction: column;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink); margin: 2px 0;
  transition: transform var(--dur-2), opacity var(--dur-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  font: 500 14.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  transition: transform var(--dur-1) var(--ease-spring),
              box-shadow var(--dur-2),
              background var(--dur-1),
              color var(--dur-1),
              border-color var(--dur-1);
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.985); }

/* Shimmer sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary {
  color: #0A0B12;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E8F1 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 10px 30px -10px rgba(255,255,255,.35),
    0 30px 80px -20px rgba(124,155,255,.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.8) inset,
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 16px 40px -10px rgba(255,255,255,.55),
    0 50px 120px -20px rgba(124,155,255,.6);
}
.btn--ghost {
  color: var(--ink);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair-bold);
  box-shadow: 0 1px 0 0 var(--glass-hi) inset;
}
.btn--ghost:hover { background: var(--glass-2); border-color: var(--hair-hi); transform: translateY(-1px); }

.btn--lg { padding: 16px 24px; font-size: 15.5px; }

/* ---------- Glass primitive ---------- */
.glass {
  position: relative;
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 80px;
}
.hero__bloom {
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 40%, color-mix(in oklab, var(--brand-blue) 40%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, color-mix(in oklab, var(--brand-gold) 35%, transparent), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, color-mix(in oklab, var(--brand-violet) 30%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: .5;
  animation: bloomShift 22s ease-in-out infinite alternate;
}
@keyframes bloomShift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero__copy > * {
  animation: riseIn 900ms var(--ease-expo) both;
}
.hero__copy > *:nth-child(1) { animation-delay: 0ms; }
.hero__copy > *:nth-child(2) { animation-delay: 80ms; }
.hero__copy > *:nth-child(3) { animation-delay: 380ms; }
.hero__copy > *:nth-child(4) { animation-delay: 480ms; }
.hero__copy > *:nth-child(5) { animation-delay: 560ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { animation: none; }
}

.hero__title .line { display: block; }

.hero__sub {
  color: var(--ink-dim);
  max-width: 44ch;
  font-size: clamp(15px, 1.3vw, 17px);
  margin: 0;
}

.hero__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 4px;
}
.clock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 10px;
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  position: relative;
  overflow: hidden;
}
.clock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.clock__ring { width: 28px; height: 28px; position: relative; flex: none; }
.clock__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock__bg, .clock__fg { fill: none; stroke-width: 3; stroke-linecap: round; }
.clock__bg { stroke: var(--hair); }
.clock__fg {
  stroke: var(--brand-gold);
  stroke-dasharray: 87.96;
  stroke-dashoffset: 80;
  filter: drop-shadow(0 0 5px rgba(245,202,85,.7));
  transition: stroke-dashoffset var(--dur-3) var(--ease-out);
}
.clock__body { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; }
.clock__time b {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.clock__zone { color: var(--ink-mute); font-size: 10.5px; letter-spacing: .14em; }

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Hero right — platform prism */
.prism {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  justify-self: end;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  perspective: 1400px;
  transform-style: preserve-3d;
  --parallax: 0;
  transform: translateY(calc(var(--parallax) * -1px));
}
.prism__halo {
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background:
    conic-gradient(from 120deg,
      color-mix(in oklab, var(--brand-blue) 36%, transparent),
      color-mix(in oklab, var(--brand-gold) 36%, transparent),
      color-mix(in oklab, var(--brand-green) 36%, transparent),
      color-mix(in oklab, var(--brand-violet) 36%, transparent),
      color-mix(in oklab, var(--brand-blue) 36%, transparent));
  filter: blur(70px);
  opacity: .55;
  animation: haloSpin 32s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

.prism__ring {
  position: absolute;
  inset: 8%;
  z-index: -1;
  border-radius: 50%;
  border: 1px dashed var(--hair-bold);
  animation: haloSpin 80s linear infinite reverse;
  pointer-events: none;
}
.prism__ring::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid var(--hair);
  animation: haloSpin 120s linear infinite;
}

/* Platform tiles — each a floating glass plate */
.tile {
  --tile-x: 0;
  --tile-y: 0;
  --tile-rot-x: 0deg;
  --tile-rot-y: 0deg;
  --tile-float-y: 0;
  --float-offset: 0s;
  --float-dur: 7s;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 22px 20px;
  border-radius: var(--r-lg);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-glass);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transform:
    translate3d(calc(var(--tile-x) * 6px), calc((var(--tile-y) * 6px) + (var(--tile-float-y) * 1px)), 0)
    rotateX(var(--tile-rot-x))
    rotateY(var(--tile-rot-y));
  transform-style: preserve-3d;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2), border-color var(--dur-2);
  will-change: transform;
  animation: tileBreath var(--float-dur) var(--ease-out) var(--float-offset) infinite alternate;
}
.tile:nth-child(1) { --float-offset: 0s;   --float-dur: 7s; }
.tile:nth-child(2) { --float-offset: -2s;  --float-dur: 9s; }
.tile:nth-child(3) { --float-offset: -4s;  --float-dur: 8s; }
.tile:nth-child(4) { --float-offset: -6s;  --float-dur: 10s; }
@keyframes tileBreath {
  0%   { --tile-float-y: -4; }
  100% { --tile-float-y: 4; }
}
@property --tile-float-y {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.tile:hover {
  border-color: var(--hair-hi);
  box-shadow: var(--shadow-raised);
  animation-play-state: paused;
}

/* Cursor lensing spotlight */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px 340px at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--tile-accent,#fff) 30%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2);
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}
.tile:hover::before { opacity: 1; }

/* Top rim highlight + bottom dim shadow */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .65;
}

.tile[data-accent="blue"]   { --tile-accent: var(--brand-blue);   }
.tile[data-accent="gold"]   { --tile-accent: var(--brand-gold);   }
.tile[data-accent="green"]  { --tile-accent: var(--brand-green);  }
.tile[data-accent="violet"] { --tile-accent: var(--brand-violet); }

.tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.tile__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--tile-accent) 18%, transparent);
  color: var(--tile-accent);
  border: 1px solid color-mix(in oklab, var(--tile-accent) 40%, transparent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 30px -10px color-mix(in oklab, var(--tile-accent) 60%, transparent);
  transition: transform var(--dur-2) var(--ease-spring);
}
.tile:hover .tile__icon { transform: scale(1.08) rotate(-4deg); }
.tile__chip {
  font: 500 10.5px/1 var(--font-mono);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  border: 1px solid var(--hair);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.tile__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  position: relative; z-index: 1;
}
.tile__desc {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative; z-index: 1;
}
.tile__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  position: relative; z-index: 1;
}
.tile__url {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--ink-mute);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  max-width: 70%;
}
.tile__arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-2);
  border: 1px solid var(--hair);
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1);
}
.tile:hover .tile__arrow {
  background: color-mix(in oklab, var(--tile-accent) 40%, transparent);
  transform: translate(4px, -4px);
  border-color: color-mix(in oklab, var(--tile-accent) 55%, transparent);
}

/* Scroll hint */
.hero__hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  animation: riseIn 900ms var(--ease-expo) 700ms both;
}
.hero__hint::before {
  content: "";
  width: 1px; height: 24px;
  background: linear-gradient(to bottom, transparent, var(--ink-mute), transparent);
  animation: scrollRun 2.4s ease-in-out infinite;
}
@keyframes scrollRun {
  0%   { transform: translateY(-6px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}

/* ---------- SIGNAL ---------- */
.signal { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(72px, 10vw, 120px); }
.signal__panel {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-xl);
  display: grid;
  gap: 24px;
}
.signal__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.signal__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
.signal__head h3 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  background: var(--grad-brand); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 12s ease-in-out infinite;
}
.signal__zone {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.signal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none; padding: 0; margin: 0;
}

.pill {
  --a: var(--tile-accent, var(--brand-gold));
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  border: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-1);
  min-height: 130px;
}
.pill::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--a), transparent);
  opacity: .7;
}
/* Sparkline faint backdrop */
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 90% at 100% 100%, color-mix(in oklab, var(--a) 18%, transparent), transparent 50%);
  opacity: .9;
  pointer-events: none;
}
.pill[data-accent="blue"]   { --a: var(--brand-blue);   --tile-accent: var(--brand-blue);   }
.pill[data-accent="gold"]   { --a: var(--brand-gold);   --tile-accent: var(--brand-gold);   }
.pill[data-accent="green"]  { --a: var(--brand-green);  --tile-accent: var(--brand-green);  }
.pill[data-accent="violet"] { --a: var(--brand-violet); --tile-accent: var(--brand-violet); }
.pill:hover {
  transform: translateY(-3px);
  border-color: var(--hair-hi);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
.pill__head { display: flex; align-items: center; gap: 10px; font-size: 13px; position: relative; z-index: 1; }
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--a) 22%, transparent), 0 0 10px var(--a);
  flex: none;
  animation: pulseDot 2.6s ease-in-out infinite;
}
.pill__head strong { font-weight: 600; letter-spacing: -0.01em; }
.pill__head time { color: var(--ink-mute); font-family: var(--font-mono); font-size: 11.5px; margin-left: auto; font-variant-numeric: tabular-nums; }
.pill__body { color: var(--ink-dim); font-size: 13.5px; line-height: 1.4; position: relative; z-index: 1; }
.pill__body strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill__meter {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,.05);
  overflow: hidden;
  margin-top: auto;
  position: relative; z-index: 1;
}
.pill__meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--a), color-mix(in oklab, var(--a) 50%, white));
  border-radius: inherit;
  width: 0;
  box-shadow: 0 0 10px var(--a);
  transition: width 1400ms var(--ease-expo);
}
.pill.is-in .pill__meter i { width: var(--v, 50%); }

/* ---------- LOOP (orbit) ---------- */
.loop { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 140px); text-align: center; }
.loop__stage {
  position: relative;
  width: min(700px, 100%);
  aspect-ratio: 1 / 1;
  margin: clamp(32px, 5vw, 60px) auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.loop__stage::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      color-mix(in oklab, var(--brand-blue) 26%, transparent),
      color-mix(in oklab, var(--brand-gold) 26%, transparent),
      color-mix(in oklab, var(--brand-green) 26%, transparent),
      color-mix(in oklab, var(--brand-violet) 26%, transparent),
      color-mix(in oklab, var(--brand-blue) 26%, transparent));
  filter: blur(48px);
  opacity: .6;
  z-index: -1;
  animation: haloSpin 40s linear infinite;
}
.loop__stage::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid var(--hair);
  z-index: -1;
  animation: ringPulse 6s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.04); opacity: .3; }
}

.loop__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.loop__svg .orbit {
  fill: none;
  stroke: var(--hair-bold);
  stroke-dasharray: 2 6;
}
.loop__svg .arc {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px currentColor);
  opacity: .85;
}
.loop__svg .arc--blue   { color: var(--brand-blue);   stroke: currentColor; }
.loop__svg .arc--gold   { color: var(--brand-gold);   stroke: currentColor; }
.loop__svg .arc--green  { color: var(--brand-green);  stroke: currentColor; }
.loop__svg .arc--violet { color: var(--brand-violet); stroke: currentColor; }

.loop__pulse { filter: drop-shadow(0 0 10px currentColor); }
.loop__pulse--1 { color: var(--brand-blue);   fill: currentColor; }
.loop__pulse--2 { color: var(--brand-gold);   fill: currentColor; }
.loop__pulse--3 { color: var(--brand-green);  fill: currentColor; }
.loop__pulse--4 { color: var(--brand-violet); fill: currentColor; }

.loop__trail { opacity: .4; }
.loop__trail--1 { color: var(--brand-blue);   stroke: currentColor; }
.loop__trail--2 { color: var(--brand-gold);   stroke: currentColor; }
.loop__trail--3 { color: var(--brand-green);  stroke: currentColor; }
.loop__trail--4 { color: var(--brand-violet); stroke: currentColor; }

.loop__core {
  position: relative;
  width: clamp(120px, 18vw, 180px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), transparent 55%),
    radial-gradient(circle, rgba(245,202,85,.25), rgba(10,14,28,.5) 70%);
  border: 1px solid rgba(245,202,85,.4);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 60px -10px rgba(245,202,85,.55),
    0 40px 120px -20px rgba(0,0,0,.6);
  display: grid;
  place-items: center;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 60px -10px rgba(245,202,85,.55), 0 40px 120px -20px rgba(0,0,0,.6); }
  50%      { transform: scale(1.035); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 80px -10px rgba(245,202,85,.75), 0 50px 140px -20px rgba(0,0,0,.7); }
}
.loop__core b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .18em;
  display: block;
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 10s ease-in-out infinite;
}
.loop__core span {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* Loop nodes */
.loop__node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
  min-width: 148px;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-1), box-shadow var(--dur-2);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.loop__node:hover {
  border-color: var(--hair-hi);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.6);
}
.loop__node__body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.loop__node strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.loop__node em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.loop__node--top    { top: 0;    left: 50%; transform: translate(-50%, -50%); }
.loop__node--right  { top: 50%;  right: 0;  transform: translate(50%, -50%); }
.loop__node--bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.loop__node--left   { top: 50%;  left: 0;   transform: translate(-50%, -50%); }
.loop__node--top:hover    { transform: translate(-50%, calc(-50% - 4px)) scale(1.05); }
.loop__node--right:hover  { transform: translate(calc(50% + 4px), -50%) scale(1.05); }
.loop__node--bottom:hover { transform: translate(-50%, calc(50% + 4px)) scale(1.05); }
.loop__node--left:hover   { transform: translate(calc(-50% - 4px), -50%) scale(1.05); }

/* ---------- WELCOME closing ---------- */
.welcome { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(100px, 12vw, 160px); }
.welcome__panel {
  padding: clamp(36px, 6vw, 72px);
  border-radius: var(--r-xl);
  text-align: center;
  display: grid;
  gap: 24px;
  max-width: 860px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}
.welcome__panel::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(40% 40% at 20% 20%, color-mix(in oklab, var(--brand-gold) 25%, transparent), transparent 65%),
    radial-gradient(40% 40% at 80% 80%, color-mix(in oklab, var(--brand-violet) 25%, transparent), transparent 65%);
  filter: blur(50px);
  opacity: .8;
  z-index: -1;
  animation: bloomShift 24s ease-in-out infinite alternate;
}
.welcome__panel h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 56px);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
.welcome__panel h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 12s ease-in-out infinite;
}
.welcome__panel p { color: var(--ink-dim); max-width: 52ch; margin-inline: auto; }
.welcome__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer {
  padding: 0 0 40px;
  color: var(--ink-mute);
  font-size: 13px;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 22px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--sat));
  border: 1px solid var(--hair);
}
.footer a { color: var(--ink-dim); transition: color var(--dur-1); }
.footer a:hover { color: var(--ink); }
.footer__status { display: inline-flex; align-items: center; gap: 8px; }
.footer__status .pill__dot { background: var(--brand-green); }
.footer__nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Command palette ---------- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding-top: clamp(80px, 12vh, 160px);
}
.cmdk[hidden] { display: none; }
.cmdk__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 16, 0.58);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  animation: cmdkIn var(--dur-2) var(--ease-out);
}
.cmdk__panel {
  position: relative;
  width: min(680px, 92vw);
  border-radius: var(--r-lg);
  background: rgba(14, 18, 30, 0.74);
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--sat));
  border: 1px solid var(--hair-bold);
  box-shadow:
    0 40px 120px -20px rgba(0,0,0,.75),
    0 0 80px -20px rgba(124,155,255,.25),
    0 1px 0 0 var(--glass-hi) inset;
  overflow: hidden;
  transform-origin: top center;
  animation: cmdkScale 340ms var(--ease-expo);
}
.cmdk__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes cmdkIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdkScale {
  from { transform: translateY(-20px) scale(.96); opacity: 0; filter: blur(8px); }
  to   { transform: none; opacity: 1; filter: none; }
}
.cmdk__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.cmdk__bar svg { color: var(--ink-mute); flex: none; }
.cmdk__bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: 400 16px/1.2 var(--font-sans);
  padding: 4px 0;
  letter-spacing: -0.005em;
}
.cmdk__bar input::placeholder { color: var(--ink-mute); }
.cmdk__body { padding: 10px; max-height: 52vh; overflow: auto; }
.cmdk__group + .cmdk__group { margin-top: 6px; }
.cmdk__group-label {
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-mute);
  padding: 10px 12px 8px;
  display: block;
}
.cmdk__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  transition: background var(--dur-1), transform var(--dur-1);
}
.cmdk__row:hover, .cmdk__row[data-active="true"] {
  background: var(--glass-2);
  transform: translateX(2px);
}
.cmdk__row .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--brand-gold));
  box-shadow: 0 0 10px var(--c, var(--brand-gold));
  flex: none;
}
.cmdk__row strong { font-weight: 600; letter-spacing: -0.01em; font-size: 14px; }
.cmdk__row em {
  margin-left: auto;
  font-style: normal;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.cmdk__row kbd { margin-left: 6px; }
.cmdk__foot {
  display: flex; gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--hair);
  color: var(--ink-mute);
  font-size: 11.5px;
}
.cmdk__empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}

/* ---------- View Transitions ---------- */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 480ms;
    animation-timing-function: var(--ease-expo);
  }
  ::view-transition-old(root) { animation-name: vtFadeOut; }
  ::view-transition-new(root) { animation-name: vtFadeIn; }
}
@keyframes vtFadeOut { to { opacity: 0; filter: blur(6px); transform: scale(.995); } }
@keyframes vtFadeIn  { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-expo),
    transform 900ms var(--ease-expo),
    filter 900ms var(--ease-expo);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__copy > * { animation: none; }
  .stage__grid, .prism__halo, .prism__ring, .prism__ring::before,
  .loop__stage::before, .loop__stage::after, .loop__core,
  .eyebrow::before, .btn::after, .tile, .hero__bloom, .stage__stars span,
  .h-display em, .h-section em, .welcome__panel h2 em, .loop__core b {
    animation: none !important;
  }
}

/* Scroll-driven (Chromium 115+) */
@supports (animation-timeline: view()) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(8px);
    animation: revealScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
    transition: none;
  }
  @keyframes revealScroll {
    to { opacity: 1; transform: none; filter: none; }
  }
  /* Hero prism gets a gentle scroll-driven scale */
  .prism {
    animation: prismScroll linear both;
    animation-timeline: scroll(root);
    animation-range: 0 50vh;
  }
  @keyframes prismScroll {
    to { transform: translateY(-30px) scale(.98); }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--nav-h) + 32px);
  }
  .prism { justify-self: center; max-width: 520px; }
  .topbar__nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .signal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__hint { display: none; }
}
@media (max-width: 620px) {
  :root { --pad: 18px; }
  .topbar__shell { padding-right: 8px; }
  .cmd-trigger span { display: none; }
  .brand__name { font-size: 14px; }
  .brand__name .brand__dot { display: none; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .signal__grid { grid-template-columns: 1fr; }
  .loop__node { min-width: 120px; padding: 8px 12px; }
  .loop__node strong { font-size: 13px; }
  .loop__node em { font-size: 9.5px; }
  .loop__core { width: clamp(92px, 28vw, 132px); }
  .footer__inner { justify-content: center; text-align: center; }
}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav {
  position: fixed;
  inset: var(--nav-h) 12px auto 12px;
  z-index: 35;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--sat));
  border: 1px solid var(--hair-bold);
  box-shadow: var(--shadow-raised);
  transform-origin: top center;
  transform: translateY(-8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2);
}
.mobile-nav[data-open="true"] {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a, .mobile-nav button {
  display: flex; align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  text-align: left;
}
.mobile-nav a:hover, .mobile-nav button:hover { background: var(--glass-2); }

/* ---------- Utility ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (max-width: 720px) {
  .hide-on-mobile { display: none !important; }
}

/* ============================================================
   v3 — Creative variant (perf-tuned)
   Goals: keep the look, cut GPU/CPU cost:
   - Static caustic (rasterized once, no animation)
   - Rotate by transform, not @property gradient angle (GPU composited)
   - Pause holo animations until hover
   - Shallower blurs; fewer layers; no will-change on idle elements
   ============================================================ */

/* ---------- Caustic: painted once, no animation ---------- */
.stage__caustic {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: screen;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'><defs><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.8 0 0 0 0 1 0 0 0 0.9 0'/><feGaussianBlur stdDeviation='12'/></filter></defs><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  background-size: cover;
  contain: strict;
}

/* ---------- Holographic tile sheen — transform-rotated, paused until hover ---------- */
.tile { position: relative; }
.tile__holo {
  position: absolute;
  inset: -24%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff7ab6,
    #ffce6b 72deg,
    #7effc9 144deg,
    #7cc4ff 216deg,
    #c7aaff 288deg,
    #ff7ab6 360deg
  );
  filter: blur(24px);
  mix-blend-mode: screen;
  transform: rotate(0deg) translateZ(0);
  transition: opacity 480ms var(--ease-expo);
  animation: holoSpin 18s linear infinite;
  animation-play-state: paused;
  contain: paint;
}
.tile:hover .tile__holo {
  opacity: .7;
  animation-play-state: running;
  animation-duration: 8s;
}
@keyframes holoSpin { to { transform: rotate(360deg) translateZ(0); } }

/* Keep the head + body above the holo */
.tile__head, .tile > div, .tile__foot { position: relative; z-index: 2; }

/* ---------- Chromatic rim on hover (box-shadow only — zero layout cost) ---------- */
.tile:hover {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.30) inset,
    0 0 0 1px rgba(255,255,255,.13) inset,
    -2px 0 10px -2px rgba(255, 90, 140, .26),
     2px 0 10px -2px rgba(120, 180, 255, .26),
    0 22px 60px -18px rgba(0,0,0,.65),
    0 0 70px -18px color-mix(in oklab, var(--tile-accent) 40%, transparent);
}

/* ---------- Liquid CTA halo — same transform trick, idle-paused ---------- */
.btn--primary { position: relative; isolation: isolate; }
.btn--primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    color-mix(in oklab, var(--brand-gold) 55%, transparent),
    color-mix(in oklab, var(--brand-blue) 55%, transparent),
    color-mix(in oklab, var(--brand-violet) 55%, transparent),
    color-mix(in oklab, var(--brand-green) 55%, transparent),
    color-mix(in oklab, var(--brand-gold) 55%, transparent)
  );
  filter: blur(10px);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  animation: holoSpin 12s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.btn--primary:hover::before {
  opacity: .75;
  animation-play-state: running;
}

/* ---------- Magnetic per-letter title (transform composited, no will-change idle) ---------- */
.hero__title .char {
  display: inline-block;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
  transition: transform 520ms cubic-bezier(.22,.9,.18,1);
}
/* Only hint will-change while the user is actively pointing at the title */
.hero__title:hover .char { will-change: transform; }

/* ---------- Prism halo — reduced blur, transform rotation ---------- */
.prism__halo {
  background:
    conic-gradient(from 0deg,
      color-mix(in oklab, var(--brand-blue) 70%, transparent),
      color-mix(in oklab, var(--brand-gold) 70%, transparent),
      color-mix(in oklab, var(--brand-green) 70%, transparent),
      color-mix(in oklab, var(--brand-violet) 70%, transparent),
      color-mix(in oklab, var(--brand-blue) 70%, transparent));
  filter: blur(54px);
  opacity: .48;
  animation: holoSpin 40s linear infinite;
  contain: paint;
}

/* ---------- Brand wordmark — gradient still animates, but tint is cheap ---------- */
.brand__name em {
  background: linear-gradient(120deg,
    #F5CA55 0%, #B4A6FF 35%, #7C9BFF 65%, #5FE8A4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 14s ease-in-out infinite;
}

/* ---------- Iridescent topbar glow on scroll ---------- */
.topbar[data-scrolled="true"] .topbar__shell {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 20px 60px -20px rgba(0,0,0,.45),
    0 0 80px -20px color-mix(in oklab, var(--brand-violet) 40%, transparent);
}

/* ---------- Perf: trim always-on work ---------- */
/* Lighter backdrop blur on tiles (expensive per-pixel GPU cost) */
.tile {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
/* Contain repaints from the prism group */
.prism, .tile, .stage, .stage__stars, .stage__caustic { contain: paint; }
/* Drop the always-on breathing animation on coarse pointer / tight data */
@media (prefers-reduced-data: reduce), (hover: none) {
  .tile { animation: none; }
  .prism__halo { animation: none; opacity: .35; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tile__holo,
  .btn--primary::before,
  .prism__halo,
  .brand__name em {
    animation: none !important;
  }
  .hero__title .char {
    transition: none;
    transform: none;
  }
  .stage__caustic { opacity: .16; }
}