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

/* --- Design System --- */
:root {
  /* Core dark + text */ 
  --bg-0:#070A0E; 
  --bg-1:#0B0F14; 
  --text:#EAF2FF; 
  --muted:#A6BAD1; 
  --card:rgba(255,255,255,.06); 
  --border:rgba(255,255,255,.14); 

  /* Brand Colors (VOICEMOD Style) */ 
  --hero-purple: #7E42FF;
  --hero-blue: #5CA8FF;
  --hero-cyan: #15F1FF;
  --hero-lavender: #A78BFA;
  --hero-lime: #A3E635;
  --hero-amber: #F59E0B;

  /* Mappings for existing system */
  --cyan: var(--hero-cyan);
  --purple: var(--hero-purple);
  --blue: var(--hero-blue);
  --lime: var(--hero-lime);
  --amber: var(--hero-amber);

  --cta-grad: linear-gradient(90deg, var(--hero-purple), var(--hero-cyan), var(--hero-lime), var(--hero-amber)); 
  
  /* Hero Tuning */
  --plate-opacity: 0.35;

  /* Existing Layout Variables */
  --font-head: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --container: 1200px;

  /* Compatibility Mappings */
  --accent-1: var(--cyan);
  --accent-2: var(--purple);
  --accent-3: var(--lime);
  --glass-border: var(--border);
  --glass-bg: var(--card);
  --brand-cyan: var(--cyan);
  --brand-purple: var(--purple);
  --brand-lime: var(--lime);
  --brand-amber: var(--amber);
  --grad-cta: var(--cta-grad);
}

/* Themes */
/* Default (Aurora) matches new specs */
html, html[data-theme="aurora"] {
  --bg-0: #070A0E;
  --bg-1: #0B0F14;
  --text: #E9F2FF;
  --muted: #9FB2C7;
  
  /* Accents */
  --brand-cyan: #15F1FF;
  --brand-purple: #8B5CF6;
  --brand-lime: #A3E635;
  --brand-amber: #F59E0B;
  
  /* Mapped for components */
  --accent-1: var(--brand-cyan);
  --accent-2: var(--brand-purple);
  --accent-3: var(--brand-lime);
  
  --card-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-bg: rgba(255, 255, 255, 0.03);
  
  --grad-cta: linear-gradient(90deg, #8B5CF6 0%, #15F1FF 35%, #A3E635 67%, #F59E0B 100%);
  --orb-color: rgba(21, 241, 255, 0.15);
}

html[data-theme="arcade"] {
  --bg-0: #050505;
  --bg-1: #0f0a14;
  --text: #fff0f5;
  --muted: #cba6b8;
  
  --brand-cyan: #00f0ff;
  --brand-purple: #d946ef;
  --brand-lime: #facc15;
  --brand-amber: #f97316;
  
  --accent-1: var(--brand-purple);
  --accent-2: var(--brand-cyan);
  --accent-3: var(--brand-lime);
  
  --card-bg: rgba(20, 10, 30, 0.6);
  --glass-border: rgba(217, 70, 239, 0.3);
  --glass-bg: rgba(217, 70, 239, 0.05);
  
  --grad-cta: linear-gradient(90deg, #d946ef 0%, #00f0ff 100%);
  --orb-color: rgba(217, 70, 239, 0.2);
}

html[data-theme="cosmic"] {
  --bg-0: #0b0a14;
  --bg-1: #161221;
  --text: #e0e7ff;
  --muted: #818cf8;
  
  --brand-cyan: #67e8f9;
  --brand-purple: #a78bfa;
  --brand-lime: #4ade80;
  --brand-amber: #fb923c;
  
  --accent-1: var(--brand-purple);
  --accent-2: var(--brand-amber);
  --accent-3: var(--brand-cyan);
  
  --card-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(167, 139, 250, 0.2);
  --glass-bg: rgba(167, 139, 250, 0.05);
  
  --grad-cta: linear-gradient(90deg, #a78bfa 0%, #fb923c 100%);
  --orb-color: rgba(167, 139, 250, 0.2);
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; height: 100%; }
body {
  background: var(--bg-0);
  /* Aurora effect via radial gradient on body */
  background-image: radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.15) 0%, var(--bg-0) 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100%;
  position: relative;
}

/* Soft Noise Texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
  pointer-events: none; z-index: 9999; opacity: 0.03; /* Soft noise */
}

/* Moving Orb */
.orb {
  position: fixed; top: 0; left: 0; width: 80vw; height: 80vw;
  background: radial-gradient(circle, var(--orb-color) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: -1;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  opacity: 0.5;
  filter: blur(80px);
}

/* Utility */
a { color: inherit; text-decoration: none; transition: 0.2s; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.section { padding: 120px 0; }
.center { text-align: center; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); background: linear-gradient(180deg, #fff, var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; }
h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 1rem; }
p.lead { font-size: 1.25rem; color: var(--muted); max-width: 600px; margin: 0 auto 2rem; }
.kicker { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.875rem; color: var(--accent-1); margin-bottom: 1rem; display: block; }

/* Accessibility */
:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 4px; border-radius: 4px; box-shadow: 0 0 15px var(--accent-1); }
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--accent-1); color: var(--bg-0); padding: 12px 20px; z-index: 10000; transition: top 0.2s; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 16px; }

/* Components */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 100px; font-weight: 700; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; gap: 10px; position: relative; overflow: hidden; z-index: 1; }

/* Magnetic Effect Support */
.btn-magnetic { transition: transform 0.1s; will-change: transform; }

.btn-primary { background: var(--grad-cta); color: #fff; box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4); border: 1px solid rgba(255,255,255,0.2); }
.btn-primary:hover { box-shadow: 0 10px 40px rgba(21, 241, 255, 0.4); transform: translateY(-2px); }

.btn-secondary { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: blur(10px); }
.btn-secondary:hover { border-color: var(--accent-1); background: rgba(255,255,255,0.1); transform: translateY(-2px); }

.chip { display: inline-flex; padding: 8px 20px; border-radius: 50px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 0.9rem; color: var(--muted); align-items: center; gap: 8px; transition: 0.2s; cursor: pointer; font-weight: 500; }
.chip:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.chip.active { border-color: var(--accent-1); color: var(--accent-1); background: rgba(21, 241, 255, 0.1); box-shadow: 0 0 15px rgba(21, 241, 255, 0.15); }

.card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.card:hover { transform: translateY(-5px); border-color: var(--accent-2); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 14, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo { 
  font-family: var(--font-head); 
  font-weight: 800; 
  font-size: 1.25rem; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  letter-spacing: -0.02em; 
  text-transform: uppercase;
  color: #F3F7FA;
}
.logo-img {
  height: 40px;
  width: auto;
}
.logo-icon { 
  width: 36px; 
  height: 36px; 
  background: var(--brand-cyan); 
  /* Zig-zag V shape via clip-path */
  clip-path: polygon(0 0, 40% 100%, 70% 30%, 100% 100%, 100% 0);
  display: grid; 
  place-items: center; 
  /* No shadow/outline per request */
}
/* Simple solid fill icon */
.logo-icon::after {
  content: '';
  width: 100%; height: 100%;
  background: var(--brand-cyan);
}

nav ul { display: flex; gap: 32px; list-style: none; }
nav a { font-weight: 600; font-size: 0.95rem; color: var(--muted); position: relative; }
nav a:hover { color: var(--text); }
nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--grad-cta); transition: 0.3s; }
nav a:hover::after { width: 100%; }

.theme-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 10px; border-radius: 50%; display: grid; place-items: center; transition: 0.2s; }
.theme-btn:hover { color: var(--text); background: var(--glass-bg); }

/* --- Hero Splash (VOICEMOD Style) --- */
.hero-splash {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hero-purple) 0%, var(--hero-blue) 100%);
  color: var(--text);
  padding: 0;
}

/* Background Elements */
.hero-splash::before { /* Vignette */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,0.2) 100%);
  z-index: 1; pointer-events: none;
  box-shadow: inset 0 -100px 100px -50px rgba(0,0,0,0.5);
}

.splash-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; z-index: 0;
  animation: floatOrb 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.orb-1 { top: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--hero-cyan), transparent 70%); animation-delay: 0s; }
.orb-2 { bottom: -20%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--hero-purple), transparent 70%); animation-delay: -5s; }

@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 40px) scale(1.05); } }

/* Layout */
.splash-container {
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px;
  position: relative; z-index: 10; height: 100%; align-items: center;
}

/* Left Visual */
.splash-visual {
  position: relative; height: 100%; min-height: 600px; display: flex; align-items: center; justify-content: flex-start;
}

.splash-plate {
  position: absolute; left: -20%; top: 50%; transform: translateY(-50%);
  width: 100%; height: 80%;
  background: var(--hero-cyan); opacity: var(--plate-opacity);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  filter: blur(60px); z-index: -1;
}

.hero-img {
  width: 100%; max-width: 110%; 
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  transform-origin: bottom center;
}

.split-line {
  position: absolute; left: 60%; top: 5%; bottom: 5%; width: 2px;
  background: var(--hero-cyan);
  box-shadow: 0 0 15px var(--hero-cyan), 0 0 30px var(--hero-cyan);
  opacity: 0.8;
  border-radius: 99px;
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity:0.8; box-shadow: 0 0 15px var(--hero-cyan); } 50% { opacity:1; box-shadow: 0 0 25px var(--hero-cyan), 0 0 50px var(--hero-cyan); } }

/* Right Copy */
.splash-copy {
  padding: 40px 0; opacity: 0; transform: translateY(20px);
  animation: fadeSlideUp 0.8s ease-out forwards 0.2s;
}

.splash-eyebrow {
  font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.25em;
  color: var(--hero-cyan); text-transform: uppercase; margin-bottom: 20px; display: block;
}

.splash-h1 {
  font-family: var(--font-head); font-weight: 900; font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1.05; color: #fff; text-shadow: 0 0 30px rgba(21, 241, 255, 0.25);
  margin-bottom: 24px; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(20px);
  animation: fadeSlideUp 1.4s ease-out forwards 0.2s;
}

.splash-sub {
  font-family: var(--font-body); font-size: 1.15rem; color: var(--text);
  line-height: 1.6; margin-bottom: 40px; max-width: 540px; opacity: 0.95; font-weight: 500;
}

/* Buttons */
.splash-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }

.btn-splash-primary {
  background: var(--cta-grad); border: none; padding: 18px 36px; border-radius: 12px;
  color: #0A0D11; font-weight: 800; font-size: 1.05rem; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 30px rgba(126, 66, 255, 0.4); transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-splash-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(21, 241, 255, 0.5); color: #000; }

.btn-splash-secondary {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
  padding: 18px 36px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1.05rem;
  backdrop-filter: blur(10px); cursor: pointer; transition: 0.2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-splash-secondary:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; transform: translateY(-3px); }

.splash-badges {
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; color: rgba(255,255,255,0.8); font-weight: 600;
}
.splash-badge-item { display: flex; align-items: center; gap: 8px; }
.splash-badge-item svg { width: 16px; height: 16px; color: var(--hero-cyan); }

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

@media (max-width: 1024px) {
  .splash-container { grid-template-columns: 1fr; text-align: center; padding-top: 120px; padding-bottom: 80px; gap: 40px; }
  .splash-visual { order: -1; min-height: 400px; justify-content: center; height: auto; }
  .hero-img { margin-left: 0; max-width: 80%; }
  .split-line { display: none; }
  .splash-copy { align-items: center; display: flex; flex-direction: column; padding: 0; }
  .splash-btns { justify-content: center; }
  .splash-plate { width: 80%; left: 10%; top: 50%; }
  .orb-1 { width: 80vw; height: 80vw; }
}
@media (max-width: 600px) {
  .hero-img { max-width: 100%; }
  .splash-h1 { font-size: 3rem; }
  .btn-splash-primary, .btn-splash-secondary { width: 100%; justify-content: center; }
}
.chip{ 
  padding:8px 12px; border-radius:999px; border:1px solid var(--border); 
  background: rgba(255,255,255,.06); color:#D8E7FA; font-weight:800; cursor:pointer; 
} 
.chip.active{ background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(21,241,255,.18)); border-color:transparent }


/* Preset Finder Quiz */
.quiz-container { max-width: 800px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 40px; text-align: center; position: relative; overflow: hidden; }
.quiz-step { display: none; animation: fadeIn 0.4s ease-out; }
.quiz-step.active { display: block; }
.quiz-options { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.quiz-result { display: none; text-align: center; animation: slideUp 0.5s ease-out; }
.quiz-result.active { display: block; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Feature Grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; margin-top: 80px; }
.feature-card { padding: 48px 32px; position: relative; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); opacity: 0; transition: 0.3s; }
.feature-card:hover::before { opacity: 1; }
.feature-icon { width: 56px; height: 56px; background: rgba(255,255,255,0.05); border-radius: 16px; display: grid; place-items: center; margin-bottom: 24px; font-size: 1.75rem; color: var(--accent-1); border: 1px solid var(--glass-border); transition: 0.3s; }
.feature-card:hover .feature-icon { background: var(--accent-1); color: #000; box-shadow: 0 0 20px rgba(21, 241, 255, 0.4); border-color: transparent; }

/* Playground */
.playground-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.panel { background: #000; border: 1px solid var(--glass-border); border-radius: 24px; padding: 32px; position: relative; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
.panel-header { display: flex; justify-content: space-between; margin-bottom: 24px; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.1rem; }
.control-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 8px; flex-wrap: wrap; }

.slider-group { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-top: 16px; }
.slider-group label { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
input[type=range] { width: 100%; accent-color: var(--accent-1); height: 4px; border-radius: 2px; cursor: pointer; }

/* Voice Compare Slider */
.compare-container { position: relative; width: 100%; max-width: 800px; height: 400px; margin: 40px auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--glass-border); background: #000; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.compare-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-overlay { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; border-right: 2px solid var(--accent-1); background: #111; z-index: 10; }
.compare-overlay img { width: 800px; max-width: none; height: 100%; }
.handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: var(--accent-1); border-radius: 50%; display: grid; place-items: center; z-index: 20; cursor: col-resize; box-shadow: 0 0 30px rgba(21, 241, 255, 0.6); border: 4px solid #fff; }

/* Latency Test */
.latency-box { background: var(--glass-bg); padding: 40px; border-radius: 24px; text-align: center; border: 1px solid var(--glass-border); max-width: 500px; margin: 0 auto; backdrop-filter: blur(10px); }
.latency-display { font-size: 4rem; font-family: var(--font-head); font-weight: 800; color: var(--accent-3); margin: 24px 0; text-shadow: 0 0 30px rgba(163, 230, 53, 0.3); }

/* Soundboard */
.sfx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 800px; margin: 40px auto; }
.sfx-btn { aspect-ratio: 1; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: 0.1s; color: var(--text); font-weight: 700; font-size: 0.95rem; }
.sfx-btn:active, .sfx-btn.playing { transform: scale(0.95); border-color: var(--accent-1); background: rgba(21, 241, 255, 0.1); box-shadow: 0 0 20px rgba(21, 241, 255, 0.2); }
.sfx-icon { font-size: 2rem; }

/* Integrations */
.integrations-scroll { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Creators */
.creators-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* FAQ */
details { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 16px; margin-bottom: 16px; overflow: hidden; transition: 0.3s; }
details[open] { border-color: var(--accent-2); background: rgba(255,255,255,0.05); }
summary { padding: 24px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
summary::after { content: '+'; font-size: 1.5rem; color: var(--accent-2); transition: 0.3s; font-weight: 300; }
details[open] summary::after { transform: rotate(45deg); }
.faq-content { padding: 0 24px 24px; color: var(--muted); line-height: 1.7; }

/* Footer */
footer { border-top: 1px solid var(--glass-border); padding: 100px 0 60px; margin-top: 100px; font-size: 0.95rem; color: var(--muted); background: var(--bg-1); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer-links h4 { color: var(--text); margin-bottom: 20px; font-size: 1.1rem; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 12px; }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .playground-grid, .creators-grid, .footer-grid { grid-template-columns: 1fr; }
  .nav-container nav { display: none; }
  h1 { font-size: 2.5rem; }
  .sfx-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .orb { display: none; }
}

/* --- New Sections CSS --- */
/* Partners Carousel */
.carousel-container { position: relative; max-width: 1000px; margin: 40px auto; overflow: hidden; padding: 20px 0; }
.carousel-track { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: grab; }
.carousel-track:active { cursor: grabbing; }
.partner-card { min-width: 280px; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; transition: 0.3s; }
.partner-card:hover { border-color: var(--accent-1); transform: translateY(-5px); }
.partner-logo { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.partner-device { height: 120px; background: rgba(255,255,255,0.05); border-radius: 12px; margin: 8px 0; }
.btn-text { background: none; border: none; color: var(--accent-1); font-weight: 700; cursor: pointer; text-align: left; padding: 0; margin-top: auto; }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.carousel-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: 0.2s; }
.carousel-arrow:hover { background: var(--accent-1); color: #000; border-color: var(--accent-1); }
.carousel-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--glass-border); cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--accent-1); width: 24px; border-radius: 4px; }

/* Console Banner */
.console-banner { background: linear-gradient(135deg, #4f46e5, #06b6d4); border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; position: relative; box-shadow: 0 20px 60px rgba(6, 182, 212, 0.3); }
.console-content { padding: 60px; z-index: 2; color: white; }
.console-visual { position: relative; background: rgba(0,0,0,0.1); display: grid; place-items: center; }
@media (max-width: 768px) { .console-banner { grid-template-columns: 1fr; } .console-visual { height: 200px; } }

/* Social Bar */
.social-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.social-btn { width: 64px; height: 64px; border-radius: 20px; background: var(--card-bg); border: 1px solid var(--glass-border); display: grid; place-items: center; color: var(--muted); transition: 0.3s; font-size: 1.5rem; }
.social-btn:hover { color: var(--accent-1); border-color: var(--accent-1); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(21, 241, 255, 0.2); }

/* Works Wherever You Hang Out Section */
.works-section {
  background-color: #0B0F14;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.works-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  background: radial-gradient(circle at center, rgba(126, 66, 255, 0.15) 0%, rgba(21, 241, 255, 0.05) 40%, transparent 70%);
  pointer-events: none;
}
.works-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--hero-cyan);
  margin-bottom: 16px;
  text-align: center;
}
.works-subtext {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin-bottom: 48px;
  font-size: 1.125rem;
}

/* Brand Node & Path */
.brand-node-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.brand-node {
  width: 80px;
  height: 80px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(21, 241, 255, 0.4));
  animation: nodeBreath 4s ease-in-out infinite;
}
@keyframes nodeBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(21, 241, 255, 0.4)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(21, 241, 255, 0.6)); }
}
.dotted-path {
  width: 100%;
  height: 40px;
  max-width: 1200px;
  margin-top: -20px;
  z-index: 1;
  overflow: visible;
}
.path-pulse {
  animation: pathPulse 3s linear forwards;
  opacity: 0;
}
@keyframes pathPulse {
  0% { stroke-dashoffset: 1000; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Search & Filter */
.search-filter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.app-search {
  width: 100%;
  max-width: 400px;
  padding: 12px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: all 0.3s ease;
}
.app-search:focus {
  outline: none;
  border-color: var(--hero-cyan);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(21, 241, 255, 0.2);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.filter-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.filter-chip.active {
  background: rgba(21, 241, 255, 0.1);
  border-color: var(--hero-cyan);
  color: var(--hero-cyan);
}

/* Grid */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  content-visibility: auto;
}
.app-item {
  aspect-ratio: 1;
  background: transparent;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.app-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.app-item:hover {
  transform: translateY(-4px);
}
.app-item:hover img {
  filter: grayscale(0%);
}
.app-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hero-cyan), 0 0 0 4px #000;
  z-index: 10;
}
.legal-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 48px;
}

/* Responsive */
@media (max-width: 768px) {
  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
  .app-item img {
    width: 48px;
    height: 48px;
  }
  .works-title { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-node, .path-pulse, .app-item {
    animation: none;
    transition: none;
  }
}

/* --- About Page Styles --- */
.about-hero { padding: 160px 0 100px; text-align: center; }

/* Values Grid */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 60px; }
.value-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.05); display: grid; place-items: center; margin-bottom: 20px; color: var(--accent-1); border: 1px solid var(--glass-border); font-size: 1.5rem; }

/* Timeline */
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 40px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--glass-border); transform: translateX(-50%); }
.timeline-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; position: relative; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-content { width: 45%; background: var(--card-bg); padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--glass-border); position: relative; backdrop-filter: blur(12px); }
.timeline-date { position: absolute; left: 50%; transform: translateX(-50%); background: var(--bg-1); border: 2px solid var(--accent-1); padding: 6px 16px; border-radius: 100px; color: var(--accent-1); font-weight: 800; font-size: 0.9rem; z-index: 2; box-shadow: 0 0 15px rgba(21, 241, 255, 0.2); }

/* Pillars List */
.pillars-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1000px; margin: 40px auto 0; }
.pillars-list li { padding: 24px; background: var(--glass-bg); border-radius: var(--radius-md); border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 16px; font-weight: 600; font-size: 1.1rem; transition: 0.2s; }
.pillars-list li:hover { border-color: var(--accent-1); transform: translateX(5px); background: rgba(255,255,255,0.05); }

/* Stats */
.stats-section { border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); padding: 60px 0; margin: 80px 0; background: rgba(255,255,255,0.02); }
.stats-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 40px; }
.stat-item { text-align: center; }
.stat-num { font-family: var(--font-head); font-size: 3.5rem; font-weight: 800; color: var(--accent-1); display: block; margin-bottom: 8px; text-shadow: 0 0 30px rgba(21, 241, 255, 0.3); }
.stat-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; font-weight: 700; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 60px; }
.team-card { text-align: center; padding: 40px 24px; }
.avatar { width: 140px; height: 140px; border-radius: 50%; background: var(--glass-bg); margin: 0 auto 24px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--glass-border); object-fit: cover; box-shadow: 0 8px 30px rgba(0,0,0,0.3); transition: 0.3s; }
.team-card:hover .avatar { border-color: var(--accent-1); transform: scale(1.05); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.contact-box { padding: 32px; display: flex; align-items: center; gap: 20px; background: var(--glass-bg); border-radius: var(--radius-md); border: 1px solid var(--glass-border); transition: 0.2s; }
.contact-box:hover { border-color: var(--accent-1); background: rgba(255,255,255,0.05); }
.contact-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.05); display: grid; place-items: center; color: var(--accent-1); font-size: 1.5rem; }

/* About Media Queries */
@media (max-width: 768px) {
  .timeline::before { left: 24px; }
  .timeline-item { flex-direction: column !important; align-items: flex-start; margin-left: 50px; }
  .timeline-content { width: 100%; }
  .timeline-date { left: -50px; transform: none; top: 0; }
}

/* --- Press Page Styles --- */
.press-hero { padding: 160px 0 100px; text-align: center; }
.press-hero h1 { opacity: 0; transform: translateY(20px); animation: fadeSlideUp 1.4s ease-out forwards 0.2s; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 48px; }
.asset-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; position: relative; overflow: hidden; }
.asset-card h3 { margin-bottom: 16px; font-size: 1.25rem; }

/* Color Swatches */
.color-row { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.color-swatch { width: 64px; height: 64px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; position: relative; transition: transform 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.color-swatch:hover { transform: scale(1.1); z-index: 10; }
.color-swatch:hover::after { content: attr(data-hex); position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }

/* Logo Preview */
.logo-preview { background: rgba(0,0,0,0.3); padding: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: 24px; border: 1px solid var(--glass-border); min-height: 200px; }