/* =========================================================================
   SHIFT — The AI-Native Software Manifesto
   Motion system: ambient, fluid, always alive. Spider-Verse aesthetic.
   Techniques: @property gradients, scroll-driven animations,
   lerp parallax, floating particles, breathing typography.
   ========================================================================= */

/* ---------- @property — animatable custom properties ---------- */
@property --grad-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}
@property --bg-x {
  syntax: "<percentage>";
  initial-value: 30%;
  inherits: false;
}
@property --bg-y {
  syntax: "<percentage>";
  initial-value: 20%;
  inherits: false;
}
@property --hue-a {
  syntax: "<number>";
  initial-value: 260;
  inherits: false;
}
@property --hue-b {
  syntax: "<number>";
  initial-value: 320;
  inherits: false;
}
@property --glow-spread {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

/* ---------- Tokens ---------- */
:root {
  --bg:            #0B0320;
  --bg-2:          #10072d;
  --bg-3:          #150b36;
  --surface:       #1c1140;
  --line:          #2a1e5c;

  --ink:           #F4EEFF;
  --ink-2:         #cfc4ee;
  --ink-3:         #9c91c4;
  --ink-dim:       #6f6794;

  --red:           #e90036;
  --blue:          #1c19f5;
  --cyan:          #00e5ff;
  --pink:          #ffa1d5;
  --magenta:       #ff2cb4;
  --lilac:         #a5a5ff;
  --indigo:        #615efd;
  --cream:         #F8F3E5;

  --font-display:  "Epilogue", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max:           1240px;
  --max-read:      46rem;
  --gutter:        clamp(1.25rem, 4vw, 3.5rem);
  --nav-h:         68px;
  --ticker-h:      62px;

  /* Motion curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* JS-driven */
  --mx: 0; --my: 0;
  --scroll-v: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
p { margin: 0; }
::selection { background: var(--magenta); color: #000; }

/* =========================================================================
   AMBIENT KEYFRAMES — always running, organic, fluid
   ========================================================================= */
@keyframes wander-x   { 0% { --bg-x: 25%; } 100% { --bg-x: 75%; } }
@keyframes wander-y   { 0% { --bg-y: 15%; } 100% { --bg-y: 65%; } }
@keyframes hue-drift  { 0% { --hue-a: 260; --hue-b: 320; } 50% { --hue-a: 200; --hue-b: 350; } 100% { --hue-a: 260; --hue-b: 320; } }
@keyframes rotate-grad { to { --grad-angle: 495deg; } }

@keyframes float-y  { to { translate: 0 calc(var(--drift-y, -80px)); } }
@keyframes float-x  { to { translate: calc(var(--drift-x, 40px)) 0; } }
@keyframes float-pulse { from { opacity: var(--p-lo, 0.15); scale: 0.8; } to { opacity: var(--p-hi, 0.5); scale: 1.2; } }

@keyframes orbit { to { offset-distance: 100%; } }

@keyframes text-breathe {
  from { letter-spacing: -0.035em; opacity: 0.88; }
  to   { letter-spacing: -0.025em; opacity: 1; }
}
@keyframes glow-breathe {
  from { --glow-spread: 10px; }
  to   { --glow-spread: 30px; }
}

@keyframes logo-enter {
  0%   { opacity: 0; scale: 0.5; filter: blur(12px) brightness(2); }
  50%  { opacity: 1; scale: 1.06; filter: blur(0) brightness(1.2); }
  70%  { scale: 0.97; }
  100% { scale: 1; filter: blur(0) brightness(1); }
}
@keyframes chromatic-jitter {
  0%, 100% { text-shadow: -2px 0 0 var(--red), 2px 0 0 var(--cyan); }
  25%      { text-shadow: -3px 1px 0 var(--magenta), 3px -1px 0 var(--cyan); }
  50%      { text-shadow: -1px -1px 0 var(--red), 2px 1px 0 var(--blue); }
  75%      { text-shadow: -2px 2px 0 var(--magenta), 1px -2px 0 var(--cyan); }
}
@keyframes slide-up {
  from { opacity: 0; translate: 0 40px; filter: blur(4px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes ray-global-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes shimmer {
  0% { left: -40%; } 100% { left: 140%; }
}
@keyframes nav-border-phase {
  0%   { border-bottom-color: var(--red); }
  33%  { border-bottom-color: var(--magenta); }
  66%  { border-bottom-color: var(--cyan); }
  100% { border-bottom-color: var(--red); }
}
@keyframes halftone-drift {
  0% { background-position: 0 0; }
  100% { background-position: 14px 14px; }
}
/* ===== GLITCH INTERFERENCE SYSTEM =====
   All driven by JS — CSS just provides the visual layers.
   .glitch-idle  = subtle static noise (always)
   .glitch-burst = big disruption (periodic)
*/
@keyframes glitch-scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -100px; }
}

/* Scroll-driven reveal (modern browsers) */
@keyframes scroll-fade-up {
  from { opacity: 0; translate: 0 50px; filter: blur(3px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes scroll-fade-up-skew {
  from { opacity: 0; translate: 0 40px; rotate: 1.5deg; }
  to   { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes scroll-scale-in {
  from { opacity: 0; scale: 0.92; }
  to   { opacity: 1; scale: 1; }
}

/* =========================================================================
   AMBIENT LIVING BACKGROUND — @property gradient that breathes
   ========================================================================= */
.ambient-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--bg-x) var(--bg-y),
      hsl(var(--hue-a) 80% 12%), transparent 55%),
    radial-gradient(ellipse at calc(100% - var(--bg-x)) calc(100% - var(--bg-y)),
      hsl(var(--hue-b) 70% 8%), transparent 50%),
    var(--bg);
  animation:
    wander-x  22s ease-in-out infinite alternate,
    wander-y  16s ease-in-out infinite alternate,
    hue-drift 30s ease-in-out infinite;
}

/* =========================================================================
   FLOATING PARTICLES — always drifting, CSS-only
   ========================================================================= */
.particle-field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.particle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: radial-gradient(circle, var(--p-color, rgba(0,229,255,0.6)), transparent);
  border-radius: 50%;
  animation:
    float-y     var(--dur-y, 14s)     ease-in-out infinite alternate,
    float-x     var(--dur-x, 18s)     ease-in-out infinite alternate,
    float-pulse var(--dur-pulse, 4s)  ease-in-out infinite alternate;
}

/* =========================================================================
   GLOBAL RAYS — fixed, slowly rotating
   ========================================================================= */
.global-rays {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  transition: opacity 2s var(--ease-smooth);
}
.ray-layer {
  position: absolute;
  top: var(--ray-y, 20%); left: 50%;
  width: 300vmax; height: 300vmax;
  transform: translate(-50%, -50%);
  transition: top 3s var(--ease-smooth);
}
.ray-layer-1 {
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(0,229,255,0.06) 1.5deg, transparent 3deg,
    transparent 15deg, rgba(255,44,180,0.04) 16.5deg, transparent 18deg,
    transparent 30deg, rgba(0,229,255,0.05) 31.5deg, transparent 33deg,
    transparent 45deg, rgba(255,44,180,0.035) 46.5deg, transparent 48deg,
    transparent 60deg, rgba(0,229,255,0.04) 61.5deg, transparent 63deg,
    transparent 75deg, rgba(255,44,180,0.05) 76.5deg, transparent 78deg,
    transparent 90deg
  );
  animation: ray-global-rotate 200s linear infinite;
}
.ray-layer-2 {
  background: conic-gradient(
    from 7deg,
    transparent 0deg, rgba(97,94,253,0.05) 2deg, transparent 4deg,
    transparent 20deg, rgba(233,0,54,0.03) 22deg, transparent 24deg,
    transparent 40deg, rgba(97,94,253,0.04) 42deg, transparent 44deg,
    transparent 60deg, rgba(233,0,54,0.035) 62deg, transparent 64deg,
    transparent 80deg
  );
  animation: ray-global-rotate 260s linear infinite reverse;
}
.ray-layer-3 {
  background: conic-gradient(
    from 3deg,
    transparent 0deg, rgba(0,229,255,0.025) 0.5deg, transparent 1deg,
    transparent 5deg, rgba(255,44,180,0.018) 5.5deg, transparent 6deg,
    transparent 10deg, rgba(0,229,255,0.025) 10.5deg, transparent 11deg,
    transparent 15deg
  );
  animation: ray-global-rotate 340s linear infinite;
  opacity: 0.6;
}

/* =========================================================================
   NAVIGATION — phasing border
   ========================================================================= */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0 var(--gutter);
  background: rgba(11, 3, 32, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 2px solid var(--red);
  animation: nav-border-phase 8s ease-in-out infinite;
  /* No scroll distortion on nav */
}
.brand { display: flex; align-items: center; gap: .6rem; }

/* Compact layered logo for navbar — mirrors logo3.html */
.brand-logo {
  position: relative;
  display: inline-block;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1;
  text-transform: uppercase;
  color: transparent; /* base text invisible, layers paint it */
  transform: rotate(-6deg) skewX(-10deg);
  margin-right: 0.4em;
}
.brand-logo > span {
  position: absolute; inset: 0;
  display: block; white-space: nowrap;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  pointer-events: none;
}
.bl-shadow {
  z-index: 1; color: transparent;
  text-shadow:
    1px 1px 0 var(--bg), 2px 2px 0 var(--bg),
    3px 3px 0 #8a00b1, 4px 4px 0 #8a00b1,
    5px 5px 0 var(--bg);
}
.bl-cyan {
  z-index: 2;
  background-color: var(--cyan);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bl-bolt {
  z-index: 3;
  background: linear-gradient(180deg, #d400ff 10%, #6b0086 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  clip-path: polygon(
    0 48%, 10% 40%, 8% 58%, 25% 45%, 22% 65%, 45% 40%, 40% 60%,
    65% 45%, 60% 75%, 80% 48%, 75% 85%, 90% 35%, 85% 65%, 100% 25%,
    100% 100%, 0 100%
  );
}
.bl-dots {
  z-index: 4;
  background-image: radial-gradient(circle, rgba(0,0,0,0.8) 0.8px, transparent 1px);
  background-size: 3px 3px;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  clip-path: polygon(
    0% 0%, 26% 0%, 26% 48%, 42% 48%, 38% 68%, 58% 52%, 52% 78%,
    78% 55%, 72% 88%, 88% 42%, 85% 62%, 100% 32%, 100% 100%, 0% 100%
  );
  opacity: 0.85;
}
.brand-sub {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase;
}
.site-nav nav {
  display: none; gap: 1.8rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.site-nav nav a {
  position: relative; padding: .5rem 0;
  transition: color .4s var(--ease-out-expo);
}
.site-nav nav a:hover { color: var(--ink); }
.site-nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--cyan);
  scale: 0 1; transform-origin: left;
  transition: scale .4s var(--ease-out-expo);
}
.site-nav nav a:hover::after { scale: 1 1; }
.nav-cta {
  font-family: var(--font-display); font-weight: 900; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: .55rem 1rem; background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); position: relative; overflow: hidden;
  transition: all .4s var(--ease-out-expo);
}
.nav-cta::after {
  content: ""; position: absolute; top: 0; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
.nav-cta:hover {
  background: var(--cyan); border-color: var(--cyan); color: #000;
  translate: -1px -1px; box-shadow: 3px 3px 0 var(--magenta);
}
@media (min-width: 900px) { .site-nav nav { display: flex; } }

/* =========================================================================
   TICKER — dual-track, fluid
   ========================================================================= */
.ticker {
  position: sticky; top: var(--nav-h); z-index: 55;
  height: var(--ticker-h); overflow: hidden;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.ticker-track {
  display: flex; gap: 1.2rem; white-space: nowrap;
  width: max-content;
  padding: 0.4rem 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  will-change: transform;
}
.ticker-track span { flex-shrink: 0; }
.ticker-dot { opacity: 0.3; }
.ticker-track-1 {
  color: var(--cyan);
  border-bottom: 1px solid var(--line);
  animation: ticker-l 28s linear infinite;
}
.ticker-track-2 {
  color: var(--magenta);
  animation: ticker-r 34s linear infinite;
}
@keyframes ticker-l { from { transform: translateX(0%); } to { transform: translateX(-33.333%); } }
@keyframes ticker-r { from { transform: translateX(-33.333%); } to { transform: translateX(0%); } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; z-index: 1;
  min-height: calc(100vh - var(--nav-h) - var(--ticker-h));
  display: grid; place-items: center;
  padding: clamp(4rem, 10vh, 9rem) var(--gutter) clamp(5rem, 12vh, 10rem);
  overflow: hidden; isolation: isolate;
  background: transparent;
}
.halftone {
  position: absolute; inset: -10%;
  background-image: radial-gradient(circle, var(--cyan) 1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: 0.05; pointer-events: none; z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  animation: halftone-drift 16s linear infinite;
}
.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,229,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,229,255,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none; z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 85%);
  /* Smooth mouse-follow via JS custom props */
  translate: calc(var(--mx) * -12px) calc(var(--my) * -12px);
  transition: translate 1.2s var(--ease-smooth);
}

/* Floating comic shapes — parallax via JS [data-parallax] */
.floater { position: absolute; pointer-events: none; z-index: -1; will-change: translate; }
.floater-1 {
  top: 10%; right: 6%; width: 140px; height: 140px;
  border: 2px solid var(--cyan); opacity: 0.18;
  animation: float-y 18s ease-in-out infinite alternate, float-x 24s ease-in-out infinite alternate;
  --drift-y: -100px; --drift-x: 60px;
}
.floater-2 {
  bottom: 15%; left: 4%; width: 100px; height: 100px;
  border: 2px solid var(--magenta); border-radius: 50%; opacity: 0.15;
  animation: float-y 22s ease-in-out infinite alternate-reverse, float-x 16s ease-in-out infinite alternate;
  --drift-y: -70px; --drift-x: -50px;
}
.floater-3 {
  top: 28%; left: 10%; width: 0; height: 0;
  border-left: 30px solid transparent; border-right: 30px solid transparent;
  border-bottom: 52px solid var(--pink); opacity: 0.12;
  animation: float-y 26s ease-in-out infinite alternate, float-x 20s ease-in-out infinite alternate;
  --drift-y: -90px; --drift-x: 45px;
  animation-delay: -5s, -8s;
}
.floater-4 {
  bottom: 22%; right: 12%; width: 200px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent); opacity: 0.22;
  animation: float-y 14s ease-in-out infinite alternate, float-x 18s ease-in-out infinite alternate;
  --drift-y: -40px; --drift-x: -70px;
}
.floater-5 {
  top: 52%; right: 3%; width: 6px; height: 6px;
  background: var(--magenta); opacity: 0.25;
  box-shadow: 20px -14px 0 var(--cyan), -12px 22px 0 var(--pink), 34px 16px 0 var(--lilac), -8px -18px 0 var(--indigo);
  animation: float-y 20s ease-in-out infinite alternate, float-x 14s ease-in-out infinite alternate;
  --drift-y: -60px; --drift-x: -40px;
  animation-delay: -3s, -10s;
}

.hero-inner { max-width: 72rem; width: 100%; text-align: left; position: relative; z-index: 1; }

/* =========================================================================
   CSS LOGO — angled, with star-burst rays
   ========================================================================= */
.logo-scene {
  position: relative;
  width: clamp(18rem, 40vw, 32rem);
  height: clamp(10rem, 22vw, 18rem);
  margin: 0 auto 3rem;
  display: grid; place-items: center;
  transform: skewX(-10deg);
  rotate: -6deg;
  animation: logo-enter 1.4s var(--ease-out-back) both;
}

/* Background action lines — conic gradient rays radiating outward */
.logo-action-lines {
  position: absolute;
  width: 250%; height: 250%;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 14deg,
    var(--cyan) 14.1deg 14.2deg,
    transparent 14.3deg 29deg,
    var(--magenta) 29.1deg 29.2deg,
    transparent 29.3deg 44deg
  );
  mask-image: radial-gradient(circle, transparent 18%, black 55%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, black 55%, transparent 80%);
  z-index: 0; pointer-events: none;
  opacity: 0.35;
  animation: action-lines-rotate 60s linear infinite;
}
@keyframes action-lines-rotate {
  to { rotate: 360deg; }
}

/* Scattered speed-line dashes */
.logo-rays {
  position: absolute; inset: -180%;
  z-index: 1; pointer-events: none;
}
.logo-ray {
  position: absolute;
  top: calc(50% + var(--oy, 0px));
  left: calc(50% + var(--ox, 0px));
  width: var(--w, 2px);
  height: var(--h, 60px);
  transform-origin: top center;
  transform: rotate(var(--a));
  border-radius: 1px;
  opacity: 0;
  animation: dash-flicker var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}
.logo-ray::before {
  content: ""; display: block; width: 100%; height: 100%;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--c, var(--cyan)), transparent 80%);
}
@keyframes dash-flicker {
  0%, 100% { opacity: 0; }
  15%      { opacity: var(--peak, 0.4); }
  40%      { opacity: var(--peak, 0.4); }
  60%      { opacity: 0; }
}

/* Logo text container */
.logo-text {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(5rem, 12vw, 9rem);
  letter-spacing: -0.03em; line-height: 1; text-transform: uppercase;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 5px var(--bg);
  /* Smooth mouse-follow */
  translate: calc(var(--mx) * 8px) calc(var(--my) * 8px);
  transition: translate 1s var(--ease-smooth);
}

/* Shared layer positioning */
.logo-shadow,
.logo-bolt,
.logo-main,
.logo-dots,
.logo-snow,
.logo-layer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  -webkit-text-stroke: inherit;
}

/* 1. 3D EXTRUSION — deep shadow stack with purple accent */
.logo-shadow {
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 5px var(--bg);
  text-shadow:
    1px 1px 0 var(--bg), 2px 2px 0 var(--bg), 3px 3px 0 var(--bg),
    4px 4px 0 var(--bg), 5px 5px 0 var(--bg), 6px 6px 0 var(--bg),
    7px 7px 0 #d400ff, 8px 8px 0 #b800e0, 9px 9px 0 #9a00cc,
    10px 10px 0 #8a00b1, 11px 11px 0 var(--bg), 12px 12px 0 var(--bg);
}

/* 2. PURPLE BOLT — jagged lightning split */
.logo-bolt {
  z-index: 3;
  background: linear-gradient(180deg, var(--magenta) 0%, #d400ff 40%, #8a00cc 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
  clip-path: polygon(
    0 48%, 10% 40%, 8% 58%, 25% 45%, 22% 65%, 45% 40%, 40% 60%,
    65% 45%, 60% 75%, 80% 48%, 75% 85%, 90% 35%, 85% 65%, 100% 25%,
    100% 100%, 0 100%
  );
}

/* 3. MAIN CYAN — vibrant flat fill */
.logo-main {
  position: relative; z-index: 2;
  background-color: var(--cyan);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 12px rgba(0,229,255,0.35));
}

/* 4. HALFTONE DOTS — on the text, clipped to bolt area */
.logo-dots {
  z-index: 4;
  background-image: radial-gradient(circle, rgba(0,0,0,0.85) 1.5px, transparent 1.8px);
  background-size: 5.5px 5.5px;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
  clip-path: polygon(
    0% 0%, 26% 0%, 26% 48%, 42% 48%, 38% 68%, 58% 52%, 52% 78%,
    78% 55%, 72% 88%, 88% 42%, 85% 62%, 100% 32%, 100% 100%, 0% 100%
  );
  opacity: 0.9;
}

/* 5. SNOW / PARTICLE GRIT — SVG noise filter for scattered black specks */
.logo-snow {
  z-index: 5;
  filter: url(#particle-filter);
  background: white;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* 6. GLITCH LAYERS — chromatic aberration ghosts (on top of everything) */
.logo-layer-r {
  z-index: 6;
  color: var(--red); -webkit-text-stroke: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: none;
}
.logo-layer-b {
  z-index: 6;
  color: var(--cyan); -webkit-text-stroke: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: none;
}
/* JS-toggled glitch states */
.logo-text.g-idle .logo-layer-r { opacity: 0.4; translate: var(--gr-x, -3px) var(--gr-y, 0); }
.logo-text.g-idle .logo-layer-b { opacity: 0.3; translate: var(--gb-x, 3px) var(--gb-y, 0); }
.logo-text.g-burst .logo-layer-r { opacity: 0.75; translate: var(--gr-x, -6px) var(--gr-y, -2px); }
.logo-text.g-burst .logo-layer-b { opacity: 0.6; translate: var(--gb-x, 5px) var(--gb-y, 1px); }

/* Glow behind everything — subtle, not washing out letters */
.logo-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.18), rgba(255,44,180,0.1) 45%, transparent 70%);
  z-index: 0; pointer-events: none;
  animation: float-pulse 5s ease-in-out infinite alternate;
  --p-lo: 0.4; --p-hi: 0.7;
}

/* Hero entrance stagger */
.anim-slide-up {
  opacity: 0;
  animation: slide-up .9s var(--ease-out-expo) forwards;
  animation-delay: var(--d, 0s);
}
.anim-word {
  display: inline-block; opacity: 0;
  animation: slide-up .8s var(--ease-out-back) forwards;
  animation-delay: var(--d, 0s);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  padding: .4rem .75rem; border: 1px solid var(--line);
  background: rgba(255,255,255,0.02); margin-bottom: 2.5rem;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: float-pulse 2s ease-in-out infinite alternate;
  --p-lo: 0.6; --p-hi: 1;
}

.hero-title {
  font-size: clamp(3rem, 10vw, 8.5rem);
  letter-spacing: -0.05em; line-height: 0.94; margin-bottom: 2rem;
  color: var(--ink);
  /* Always subtly breathing */
  animation: text-breathe 8s ease-in-out infinite alternate;
}
.hero-title em {
  font-style: italic; font-weight: 900;
  background: linear-gradient(var(--grad-angle), var(--cyan), var(--magenta), var(--lilac));
  animation: slide-up .8s var(--ease-out-back) forwards, rotate-grad 8s linear infinite;
  animation-delay: var(--d, 0s), 0s;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lede {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.55;
  color: var(--ink-2); max-width: 44rem; margin: 0 auto 2rem;
  border-left: 3px solid var(--cyan); padding-left: 1.25rem;
  text-align: left;
}
.hero-lede strong {
  color: var(--ink); font-weight: 700;
  animation: glow-breathe 4s ease-in-out infinite alternate;
  text-shadow: 0 0 var(--glow-spread) rgba(0,229,255,0.2);
}
.hero-lede strong:nth-of-type(2) { animation-delay: 1s; }
.hero-lede strong:nth-of-type(3) { animation-delay: 2s; }
.hero-lede strong:nth-of-type(4) { animation-delay: 3s; }
.hero-closing {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -0.03em;
  margin-bottom: 2.75rem; color: var(--ink);
}
/* Glitch word — JS drives the states, CSS renders them */
.glitch {
  font-style: italic;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
  display: inline-block;
}
/* Ghost layers — hidden by default, JS toggles opacity + position */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: none;
}
.glitch::before { background: var(--red); }
.glitch::after  { background: var(--cyan); }

/* Idle state — subtle static: faint ghost peek */
.glitch.g-idle::before { opacity: 0.18; translate: var(--gr-x, -1px) var(--gr-y, 0); }
.glitch.g-idle::after  { opacity: 0.12; translate: var(--gb-x, 1px) var(--gb-y, 0); }

/* Burst state — full disruption: ghosts go wild */
.glitch.g-burst::before { opacity: 0.8; translate: var(--gr-x, -4px) var(--gr-y, -2px); mix-blend-mode: screen; }
.glitch.g-burst::after  { opacity: 0.65; translate: var(--gb-x, 3px) var(--gb-y, 1px); mix-blend-mode: screen; }

/* Scanline overlay on the wrap */
.glitch-wrap {
  position: relative;
  display: inline-block;
}
.glitch-wrap::after {
  content: "";
  position: absolute; inset: -10%;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px
  );
  animation: glitch-scanlines 0.5s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
  opacity: 0.5;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 4rem; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.hero-meta .meta-num {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-style: italic; font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.04em; color: var(--ink); margin-bottom: .25rem;
  animation: chromatic-jitter 5s ease-in-out infinite;
}

/* ---------- Buttons ---------- */
.btn {
  --_fg: var(--bg); --_bg: var(--ink); --_bd: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 900; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: .95rem 1.6rem; color: var(--_fg); background: var(--_bg);
  border: 1.5px solid var(--_bd); cursor: pointer;
  position: relative; overflow: hidden;
  translate: 0 0; rotate: 0deg; scale: 1;
  transition:
    translate .5s var(--ease-out-expo),
    rotate    .5s var(--ease-out-expo),
    scale     .35s var(--ease-out-back),
    background .3s, color .3s, box-shadow .4s var(--ease-out-expo);
}
.btn::after {
  content: ""; position: absolute; top: 0; width: 25%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  left: -30%; transition: left .6s var(--ease-out-expo);
}
.btn:hover::after { left: 130%; }
.btn:hover {
  translate: -3px -3px; rotate: -1deg; scale: 1.02;
  box-shadow: 6px 6px 0 var(--magenta);
}
.btn:active { translate: 0 0; rotate: 0deg; scale: 0.98; box-shadow: 2px 2px 0 var(--magenta); }
.btn-primary:hover { --_bg: var(--cyan); --_bd: var(--cyan); --_fg: #000; }
.btn-ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--ink-3); }
.btn-ghost:hover { --_bg: rgba(0,229,255,0.08); --_bd: var(--cyan); --_fg: var(--cyan); }
.btn-lg { padding: 1.15rem 2rem; font-size: 1rem; }

/* ---------- Section scaffold ---------- */
.section {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(5rem, 11vh, 9rem) var(--gutter);
}
/* Scroll-driven reveal for modern browsers */
@supports (animation-timeline: view()) {
  .section {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
.section-head { display: grid; gap: .6rem; max-width: 60rem; margin-bottom: 4rem; }
.section-num {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase;
  animation: chromatic-jitter 6s ease-in-out infinite;
}
.section-head h2 {
  font-size: clamp(2.2rem, 5vw, 4.5rem); color: var(--ink);
  animation: text-breathe 10s ease-in-out infinite alternate;
}
.section-sub { font-size: 1.1rem; color: var(--ink-3); max-width: 42rem; }
.section-sub strong { color: var(--ink); font-weight: 600; }

/* ---------- Manifesto ---------- */
.section-manifesto { padding-top: clamp(6rem, 12vh, 10rem); }
.declaration {
  max-width: var(--max-read); margin: 0;
  padding: 2.5rem 0 2.5rem 2.5rem;
  border-left: 3px solid var(--cyan);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; color: var(--ink-2);
  position: relative;
  /* Subtle ambient breathing */
  animation: text-breathe 12s ease-in-out infinite alternate;
}
.declaration::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--grad-angle), var(--cyan), var(--magenta), var(--cyan));
  animation: rotate-grad 6s linear infinite;
}
.declaration p { margin-bottom: 1.25em; }
.declaration em { color: var(--cyan); font-style: italic; }
.declaration-punch {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.02em;
  line-height: 1.2; color: var(--ink); margin-top: 1.5em;
}
.declaration-punch strong {
  color: var(--ink);
  background: linear-gradient(transparent 68%, rgba(0,229,255,0.25) 68%);
  padding: 0 0.05em;
}
.declaration-sig {
  margin-top: 2em; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
}

/* ---------- Values ---------- */
.section-values {
  background: linear-gradient(180deg, transparent, rgba(16,7,45,0.7) 30%, rgba(16,7,45,0.7) 70%, transparent);
  max-width: none; z-index: 1;
}
.section-values .section-head,
.section-values .values { max-width: var(--max); margin-left: auto; margin-right: auto; }
.values { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.value {
  display: grid; grid-template-columns: 6rem 1fr; gap: 2rem;
  padding: 2.25rem 0; border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .5s var(--ease-smooth);
  /* Ambient float — always alive */
  animation: float-y var(--val-dur, 8s) ease-in-out infinite alternate;
  --drift-y: -3px;
}
.value:nth-child(1) { --val-dur: 7s; animation-delay: 0s; }
.value:nth-child(2) { --val-dur: 9s; animation-delay: -2.5s; }
.value:nth-child(3) { --val-dur: 8s; animation-delay: -4s; }
.value:nth-child(4) { --val-dur: 10s; animation-delay: -6s; }
/* Scroll-driven per-value — COMBINED with ambient float so desktop doesn't kill it */
@supports (animation-timeline: view()) {
  .value {
    animation:
      scroll-fade-up-skew linear both,
      float-y var(--val-dur, 8s) ease-in-out infinite alternate;
    animation-timeline: view(), auto;
    animation-range: entry 0% entry 50%, normal;
  }
}
.value::before {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  transition: width .8s var(--ease-out-expo);
}
.value:hover { background: rgba(0,229,255,0.03); }
.value:hover::before { width: 100%; }
.value-num {
  font-family: var(--font-mono); font-size: 0.95rem;
  letter-spacing: 0.16em; color: var(--cyan); padding-top: .35rem;
  transition: translate .5s var(--ease-out-expo), scale .5s var(--ease-out-back);
  animation: glow-breathe 4s ease-in-out infinite alternate;
  text-shadow: 0 0 var(--glow-spread) rgba(0,229,255,0.3);
}
.value:nth-child(2) .value-num { animation-delay: -1s; }
.value:nth-child(3) .value-num { animation-delay: -2s; }
.value:nth-child(4) .value-num { animation-delay: -3s; }
.value:hover .value-num { translate: 0 -2px; scale: 1.15; }
.value h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); letter-spacing: -0.03em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55em; margin-bottom: .6rem;
}
.val-left { color: var(--ink); }
.val-vs {
  font-family: var(--font-mono); font-weight: 400; font-style: italic;
  font-size: 0.7em; letter-spacing: 0.05em; color: var(--ink-dim); text-transform: lowercase;
}
.val-right {
  color: var(--ink-dim);
  text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px;
  transition: opacity .5s var(--ease-smooth);
}
.value:hover .val-right { opacity: 0.35; }
.value p { font-size: 1.1rem; color: var(--ink-2); max-width: 48rem; }
@media (max-width: 640px) { .value { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- Shift before/after ---------- */
.section-shift { max-width: none; background: transparent; z-index: 1; }
.section-shift .section-head { max-width: var(--max); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
.shift-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
}
.shift-col {
  padding: 2.5rem; border: 1px solid var(--line); position: relative; min-height: 26rem;
  animation: float-y 10s ease-in-out infinite alternate;
  --drift-y: -4px;
}
.shift-before { animation-delay: 0s; }
.shift-after  { animation-delay: -5s; }
.shift-tag {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: .3rem .6rem; display: inline-block; margin-bottom: 1.5rem;
}
.shift-before {
  background: rgba(16,7,45,0.85); color: var(--ink-3);
  overflow: hidden;
}
.shift-before::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
  );
  animation: glitch-scanlines 1.5s linear infinite;
  pointer-events: none; mix-blend-mode: overlay; opacity: 0.4;
}
.shift-before .shift-tag { background: var(--line); color: var(--ink-3); }
.shift-before h3 { font-size: 1.75rem; color: var(--ink-3); margin-bottom: 1.5rem; text-decoration: line-through; text-decoration-color: var(--ink-dim); }
.shift-before ul { display: grid; gap: 1rem; font-size: 1rem; }
.shift-before li { display: flex; gap: .8rem; align-items: center; opacity: 0.75; }
.shift-before li span { color: var(--ink-dim); font-size: 1.25rem; width: 1.5rem; }
.shift-after {
  background: linear-gradient(var(--grad-angle), var(--indigo), rgba(0,229,255,0.8) 50%, var(--magenta));
  animation: rotate-grad 12s linear infinite, float-y 10s ease-in-out infinite alternate;
  --drift-y: -4px;
  color: #fff; border-color: transparent;
  box-shadow: 0 20px 60px -30px rgba(0,229,255,0.5), 0 0 80px -20px rgba(255,44,180,0.3);
}
.shift-after .shift-tag { background: rgba(0,0,0,0.35); color: #fff; }
.shift-after h3 { font-size: 1.9rem; color: #fff; margin-bottom: 1.5rem; font-style: italic; }
.shift-after ul { display: grid; gap: 1rem; font-size: 1.05rem; }
.shift-after li {
  display: flex; gap: .8rem; align-items: center; font-weight: 500;
  /* Each item floats independently */
  animation: float-y 5s ease-in-out infinite alternate;
  --drift-y: -6px;
}
.shift-after li:nth-child(2) { animation-delay: -0.8s; }
.shift-after li:nth-child(3) { animation-delay: -1.6s; }
.shift-after li:nth-child(4) { animation-delay: -2.4s; }
.shift-after li:nth-child(5) { animation-delay: -3.2s; }
.shift-after li:nth-child(6) { animation-delay: -4s; }
.shift-after li span { color: var(--cream); font-size: 1.25rem; width: 1.5rem; }

.shift-arrow {
  display: grid; place-items: center; padding: 0 1rem;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1rem; letter-spacing: 0.1em; color: var(--cyan);
}
.shift-arrow span {
  writing-mode: vertical-rl; text-orientation: mixed;
  rotate: 180deg; padding: 1rem .4rem; border: 1px solid var(--cyan);
  animation: chromatic-jitter 4s ease-in-out infinite, float-y 3.5s ease-in-out infinite alternate;
  --drift-y: -8px;
  position: relative;
}
.shift-arrow span::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--magenta); translate: 3px -3px; opacity: 0.5;
}
@media (max-width: 900px) {
  .shift-grid { grid-template-columns: 1fr; }
  .shift-arrow { padding: .5rem 0; }
  .shift-arrow span { writing-mode: horizontal-tb; rotate: 0deg; }
}

/* ---------- Principles ---------- */
.section-principles { background: transparent; max-width: none; z-index: 1; }
.section-principles .section-head,
.section-principles .principles { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section-principles .section-head { padding-bottom: 0; margin-bottom: 3rem; }
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 0; border: 1px solid var(--line);
}
.principles li {
  padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(16,7,45,0.85); position: relative; overflow: hidden;
  translate: 0 0; rotate: 0deg; scale: 1;
  transition:
    translate .5s var(--ease-out-expo),
    rotate    .5s var(--ease-out-expo),
    scale     .4s var(--ease-out-back),
    background .4s var(--ease-smooth);
  /* Ambient float — staggered per card */
  animation:
    float-y var(--p-dur-y, 9s) ease-in-out infinite alternate,
    float-x var(--p-dur-x, 12s) ease-in-out infinite alternate;
  --drift-y: -4px; --drift-x: 2px;
}
.principles li:nth-child(1)  { --p-dur-y: 8s;  --p-dur-x: 11s; animation-delay: 0s, -3s; }
.principles li:nth-child(2)  { --p-dur-y: 10s; --p-dur-x: 13s; animation-delay: -2s, -6s; }
.principles li:nth-child(3)  { --p-dur-y: 9s;  --p-dur-x: 14s; animation-delay: -4s, -1s; }
.principles li:nth-child(4)  { --p-dur-y: 11s; --p-dur-x: 10s; animation-delay: -1s, -5s; }
.principles li:nth-child(5)  { --p-dur-y: 8s;  --p-dur-x: 12s; animation-delay: -3s, -8s; }
.principles li:nth-child(6)  { --p-dur-y: 10s; --p-dur-x: 11s; animation-delay: -5s, -2s; }
.principles li:nth-child(7)  { --p-dur-y: 9s;  --p-dur-x: 13s; animation-delay: -7s, -4s; }
.principles li:nth-child(8)  { --p-dur-y: 11s; --p-dur-x: 10s; animation-delay: -2s, -7s; }
.principles li:nth-child(9)  { --p-dur-y: 8s;  --p-dur-x: 14s; animation-delay: -6s, -3s; }
.principles li:nth-child(10) { --p-dur-y: 10s; --p-dur-x: 12s; animation-delay: -4s, -9s; }
@supports (animation-timeline: view()) {
  .principles li {
    animation:
      scroll-scale-in linear both,
      float-y var(--p-dur-y, 9s) ease-in-out infinite alternate,
      float-x var(--p-dur-x, 12s) ease-in-out infinite alternate;
    animation-timeline: view(), auto, auto;
    animation-range: entry 0% entry 40%, normal, normal;
  }
}
.principles li:hover { translate: 0 -4px; rotate: -0.5deg; scale: 1.02; background: var(--surface); z-index: 1; }
.principles li:nth-child(3n) { border-right: none; }
@media (max-width: 1040px) {
  .principles li { border-right: none; }
  .principles li:nth-child(even) { background: rgba(21,11,54,0.85); }
}
.p-num {
  display: block; font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.16em; color: var(--cyan); margin-bottom: .75rem;
  transition: color .4s var(--ease-out-expo), scale .4s var(--ease-out-back);
}
.principles li:hover .p-num { color: var(--magenta); scale: 1.2; }
.principles h3 { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); margin-bottom: .6rem; }
.principles p { color: var(--ink-3); font-size: 0.98rem; line-height: 1.55; }

/* ---------- Roles ---------- */
.section-roles {
  max-width: none; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(21,11,54,0.7) 10%, rgba(21,11,54,0.7) 90%, transparent);
}
.section-roles .section-head,
.section-roles .roles-grid { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem; perspective: 800px;
}
.role {
  padding: 2.25rem; background: rgba(11,3,32,0.9); border: 1px solid var(--line);
  position: relative; overflow: hidden;
  /* Ambient float — always moving */
  animation:
    float-y var(--card-dur-y, 7s) ease-in-out infinite alternate,
    float-x var(--card-dur-x, 10s) ease-in-out infinite alternate;
  --drift-y: -5px; --drift-x: 3px;
  /* Hover is separate using individual transforms */
  translate: 0 0; rotate: 0deg; scale: 1;
  transition:
    translate .6s var(--ease-out-expo),
    rotate    .6s var(--ease-out-expo),
    scale     .4s var(--ease-out-back),
    border-color .4s, box-shadow .5s var(--ease-out-expo);
  transform-style: preserve-3d;
}
.role-dev  { --card-dur-y: 7s; --card-dur-x: 11s; animation-delay: 0s, -3s; }
.role-lead { --card-dur-y: 8s; --card-dur-x: 9s;  animation-delay: -2s, -5s; }
.role-exec { --card-dur-y: 6s; --card-dur-x: 12s; animation-delay: -4s, -1s; }
.role::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cyan), transparent 40%);
  opacity: 0; transition: opacity .5s var(--ease-smooth);
  pointer-events: none;
}
.role:hover {
  translate: 0 -8px; rotate: -1deg; scale: 1.02;
  border-color: var(--cyan);
  box-shadow: 0 24px 48px -16px rgba(0,229,255,0.2), 8px 8px 0 var(--magenta);
}
.role:hover::before { opacity: 0.1; }
@supports (animation-timeline: view()) {
  .role {
    /* Layer scroll-reveal on top of ambient float */
    opacity: 0; /* JS fallback handles this too */
  }
}
.role-tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 1.25rem;
}
.role-dev .role-tag  { color: var(--cyan); }
.role-lead .role-tag { color: var(--magenta); }
.role-exec .role-tag { color: var(--cream); }
.role h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.025em; margin-bottom: 1rem; color: var(--ink); }
.role p { color: var(--ink-2); font-size: 1.02rem; margin-bottom: 1.5rem; }
.role-list {
  display: grid; gap: .55rem;
  font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  border-top: 1px dashed var(--line); padding-top: 1rem;
}
.role-list li::before { content: "->  "; color: var(--cyan); }

/* ---------- Co-creators (founding orgs) ---------- */
.section-cocreators { background: transparent; z-index: 1; }
.orgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.org-card {
  padding: 2rem;
  background: rgba(16,7,45,0.9); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
  animation:
    float-y var(--org-dur, 8s) ease-in-out infinite alternate,
    float-x var(--org-dur-x, 11s) ease-in-out infinite alternate;
  --drift-y: -4px; --drift-x: 3px;
  translate: 0 0; rotate: 0deg; scale: 1;
  transition:
    translate .5s var(--ease-out-expo),
    rotate    .5s var(--ease-out-expo),
    scale     .4s var(--ease-out-back),
    box-shadow .5s var(--ease-out-expo),
    border-color .4s;
}
.org-card:nth-child(1) { --org-dur: 8s; --org-dur-x: 11s; animation-delay: 0s, -2s; }
.org-card:nth-child(2) { --org-dur: 9s; --org-dur-x: 10s; animation-delay: -3s, -5s; }
.org-card:nth-child(3) { --org-dur: 7s; --org-dur-x: 12s; animation-delay: -1s, -7s; }
.org-card:hover {
  translate: -4px -4px; rotate: -0.8deg; scale: 1.02;
  box-shadow: 8px 8px 0 var(--indigo), 12px 12px 0 rgba(255,44,180,0.25);
  border-color: var(--cyan);
}
.org-name {
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.org-kind {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
}

/* ---------- Signature Wall (individual people) ---------- */
.section-sigs { background: transparent; z-index: 1; }
.sig-wall {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center;
}
.sig-person {
  flex: 0 1 calc(33.333% - 0.75rem);
  min-width: 180px; max-width: 320px;
  padding: 1.25rem 1.5rem;
  background: rgba(16,7,45,0.9); border: 1px solid var(--line);
  display: grid; gap: .2rem;
  translate: 0 0; rotate: 0deg; scale: 1;
  transition:
    translate .5s var(--ease-out-expo),
    rotate    .5s var(--ease-out-expo),
    scale     .4s var(--ease-out-back),
    box-shadow .5s var(--ease-out-expo),
    border-color .4s;
  /* Ambient float */
  animation:
    float-y var(--sig-dur-y, 8s) ease-in-out infinite alternate,
    float-x var(--sig-dur-x, 11s) ease-in-out infinite alternate;
  --drift-y: -3px; --drift-x: 2px;
}
.sig-person:nth-child(1) { --sig-dur-y: 7s;  --sig-dur-x: 10s; animation-delay: 0s, -2s; }
.sig-person:nth-child(2) { --sig-dur-y: 9s;  --sig-dur-x: 12s; animation-delay: -3s, -5s; }
.sig-person:nth-child(3) { --sig-dur-y: 8s;  --sig-dur-x: 11s; animation-delay: -1s, -7s; }
.sig-person:nth-child(4) { --sig-dur-y: 10s; --sig-dur-x: 9s;  animation-delay: -4s, -1s; }
.sig-person:nth-child(5) { --sig-dur-y: 8s;  --sig-dur-x: 13s; animation-delay: -6s, -3s; }
.sig-person:nth-child(6) { --sig-dur-y: 9s;  --sig-dur-x: 10s; animation-delay: -2s, -8s; }
.sig-person:hover {
  translate: -3px -3px; rotate: -0.5deg; scale: 1.02;
  box-shadow: 6px 6px 0 var(--indigo);
  border-color: var(--cyan);
}
.sig-person:hover .sig-name { text-shadow: 0 0 12px rgba(0,229,255,0.3); }
.sig-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink);
  transition: text-shadow .5s var(--ease-smooth);
}
.sig-at {
  font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-3);
}
.sig-badge {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  margin-top: .25rem;
}
/* Founders get a subtle accent */
.sig-founder { border-left: 3px solid var(--indigo); }

/* "Your name" card */
.sig-you {
  background: repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(0,229,255,0.05) 12px, rgba(0,229,255,0.05) 24px), rgba(16,7,45,0.9);
  border-style: dashed; border-color: var(--cyan); border-left-width: 3px;
  cursor: pointer;
}
.sig-you .sig-name { color: var(--cyan); }
.sig-you .sig-at { color: var(--ink-dim); }

/* ---------- CTA ---------- */
.section-cta {
  max-width: none; z-index: 1;
  background:
    radial-gradient(ellipse at var(--bg-x) var(--bg-y), rgba(0,229,255,0.18), transparent 55%),
    radial-gradient(ellipse at calc(100% - var(--bg-x)) calc(100% - var(--bg-y)), rgba(255,44,180,0.2), transparent 55%),
    rgba(0,0,0,0.88);
  /* Inherits the wandering gradient from @property */
  animation:
    wander-x 18s ease-in-out infinite alternate,
    wander-y 12s ease-in-out infinite alternate;
  border-top: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan);
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
}
.section-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--cyan) 1px, transparent 1.2px);
  background-size: 10px 10px; opacity: 0.04; pointer-events: none;
  animation: halftone-drift 14s linear infinite;
}
.cta-inner { max-width: 64rem; margin: 0 auto; position: relative; z-index: 1; }
.cta-label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; color: var(--cyan); text-transform: uppercase; margin-bottom: 1.5rem; }
.cta-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -0.04em;
  line-height: 1; color: var(--ink); margin-bottom: 2rem;
  animation: text-breathe 10s ease-in-out infinite alternate;
}
.cta-emph {
  font-style: italic;
  background: linear-gradient(var(--grad-angle), var(--cyan), var(--magenta));
  animation: rotate-grad 6s linear infinite;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 44rem; margin: 0 auto 3rem; }

/* ---------- Feedback Form ---------- */
.feedback-form {
  max-width: 36rem; margin: 0 auto;
  display: grid; gap: 1.5rem;
  text-align: left;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: .4rem; }
.form-field label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.form-field label .optional { color: var(--ink-dim); }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 0;
  outline: none;
  transition: border-color .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-dim); opacity: 0.6;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(0,229,255,0.1);
}
.form-field textarea { resize: vertical; min-height: 6rem; }

/* Radio group */
.radio-group {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.radio-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--ink-2); cursor: pointer;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease-smooth), background .3s var(--ease-smooth);
}
.radio-label:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(0,229,255,0.06);
  color: var(--ink);
}
.radio-label input[type="radio"] {
  width: auto; padding: 0;
  accent-color: var(--cyan);
}

/* Submit button */
.form-submit {
  justify-self: center;
  margin-top: .5rem;
}
.form-submit:disabled {
  opacity: 0.6; cursor: wait;
  transform: none; box-shadow: none;
}

.form-note {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; color: var(--ink-dim);
  text-transform: uppercase; text-align: center;
}

/* Success state */
.feedback-success {
  max-width: 36rem; margin: 0 auto;
  text-align: center;
  animation: slide-up .6s var(--ease-out-expo) both;
}
.feedback-success h3 {
  font-size: 2rem; color: var(--cyan);
  margin-bottom: 1rem;
  animation: text-breathe 6s ease-in-out infinite alternate;
}
.feedback-success p {
  color: var(--ink-2); font-size: 1.05rem;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding: 3rem var(--gutter); background: rgba(0,0,0,0.92); border-top: 1px solid var(--line);
}
.foot-col { display: grid; gap: .4rem; }
.foot-brand-mark {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.4rem; letter-spacing: -0.05em;
  background: linear-gradient(var(--grad-angle), var(--cyan), var(--magenta), var(--lilac));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: chromatic-jitter 5s ease-in-out infinite, rotate-grad 8s linear infinite, text-breathe 8s ease-in-out infinite alternate;
}
.foot-tagline { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.foot-meta { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.foot-contact { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-contact a { color: var(--ink-3); transition: color .4s var(--ease-out-expo); }
.foot-contact a:hover { color: var(--cyan); }
@media (min-width: 760px) {
  .site-footer { grid-template-columns: 1.4fr 1fr 1fr; align-items: center; }
  .foot-contact { justify-content: flex-end; }
}

/* ---------- JS fallback reveal (for browsers without scroll-timeline) ---------- */
.reveal {
  opacity: 0; translate: 0 30px;
  transition: opacity .9s var(--ease-out-expo), translate .9s var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }
.reveal-stagger {
  opacity: 0; translate: 0 30px; rotate: 1deg;
  transition:
    opacity .8s var(--ease-out-expo),
    translate .8s var(--ease-out-expo),
    rotate   .8s var(--ease-out-expo);
  transition-delay: calc(var(--stagger, 0) * 0.1s);
}
.reveal-stagger.is-visible { opacity: 1; translate: 0 0; rotate: 0deg; }