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

:root {
  --from: #c7d2fe; /* indigo-200 */
  --via: #e9d5ff;  /* purple-200 */
  --to: #fbcfe8;   /* pink-200 */
  --text: #475569;
  --muted: #78716c;
  --accent: #a855f7;
  --white40: rgba(255,255,255,0.4);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, var(--from) 0%, var(--via) 50%, var(--to) 100%);
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* ── Blobs ───────────────────────────────────────── */
.blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.blob-1 { width: 500px; height: 500px; top: -8rem; right: -8rem; background: radial-gradient(#fbcfe8, #fda4af); opacity: 0.7; animation: float-slow 8s ease-in-out infinite; }
.blob-2 { width: 400px; height: 400px; top: -5rem; left: -10rem; background: radial-gradient(#bfdbfe, #a5f3fc); opacity: 0.6; animation: float-slower 12s ease-in-out infinite; }
.blob-3 { width: 600px; height: 600px; bottom: -10rem; left: -5rem; background: radial-gradient(#e9d5ff, #f9a8d4); opacity: 0.8; animation: float-medium 10s ease-in-out infinite; }
.blob-4 { width: 450px; height: 450px; bottom: -5rem; right: -10rem; background: radial-gradient(#cffafe, #bfdbfe); opacity: 0.5; animation: float-fast 7s ease-in-out infinite; }
.blob-5 { width: 800px; height: 600px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(rgba(233,213,255,0.4), rgba(251,207,232,0.4)); opacity: 0.3; animation: pulse-gentle 6s ease-in-out infinite; }

/* ── Hero ────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.glass-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2rem;
  padding: 4rem 4rem 3.5rem;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(168,85,247,0.3);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; }
.p { position: absolute; border-radius: 50%; }
.p1 { width: 4px; height: 4px; background: #22d3ee; top: 1rem; left: 2rem; animation: float-particle-1 4s ease-in-out infinite; }
.p2 { width: 6px; height: 6px; background: #c084fc; top: 3rem; right: 3rem; animation: float-particle-2 5s ease-in-out infinite; }
.p3 { width: 4px; height: 4px; background: #f472b6; bottom: 2rem; left: 3rem; animation: float-particle-3 6s ease-in-out infinite; }
.p4 { width: 6px; height: 6px; background: #60a5fa; bottom: 1rem; right: 2rem; animation: float-particle-4 4.5s ease-in-out infinite; }
.p5 { width: 4px; height: 4px; background: #fb7185; top: 50%; left: 50%; animation: float-particle-5 5.5s ease-in-out infinite; }

/* ── Wordmark ─────────────────────────────────────── */
.wordmark {
  font-family: 'Foldit', cursive;
  font-size: clamp(3rem, 10vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.05em;
  background: linear-gradient(90deg, #64748b 0%, #06b6d4 25%, #a855f7 50%, #ec4899 75%, #64748b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
}

.l { display: inline-block; }
.l1 { animation: letter-float 2.8s ease-in-out infinite 0.0s; }
.l2 { animation: letter-float 2.8s ease-in-out infinite 0.15s; }
.l3 { animation: letter-float 2.8s ease-in-out infinite 0.30s; }
.l4 { animation: letter-float 2.8s ease-in-out infinite 0.45s; }
.l5 { animation: letter-float 2.8s ease-in-out infinite 0.60s; }
.l6 { animation: letter-float 2.8s ease-in-out infinite 0.75s; }
.l7 { animation: letter-float 2.8s ease-in-out infinite 0.90s; }
.l8 { animation: letter-float 2.8s ease-in-out infinite 1.05s; }
.l9 { animation: letter-float 2.8s ease-in-out infinite 1.20s; }

.tagline {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}

.cta-row {
  position: relative;
  z-index: 1;
}

.wut-btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 9999px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.wut-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(168,85,247,0.2);
}

.explainer {
  display: none;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.4);
  position: relative;
  z-index: 1;
  animation: fade-in 0.4s ease;
}

.explainer.visible { display: block; }

.explainer p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.explainer em { font-style: italic; color: var(--accent); }

.explainer-sub {
  font-size: 0.85rem !important;
  color: var(--muted) !important;
  font-weight: 300;
}

.contact-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-link:hover { color: #9333ea; }

/* ── What section ────────────────────────────────── */
.what-section, .who-section, .bottom-cta {
  position: relative;
  z-index: 1;
  padding: 5rem 2rem;
}

.what-inner, .who-inner, .bottom-inner {
  max-width: 900px;
  margin: 0 auto;
}

.section-heading {
  font-family: 'Foldit', cursive;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  color: #6d28d9;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 3rem;
  opacity: 0.85;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.pillar {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.pillar-icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }

.pillar h3 {
  font-family: 'Foldit', cursive;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7c3aed;
  margin-bottom: 0.5rem;
}

.pillar p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ── Who section ─────────────────────────────────── */
.who-section { background: rgba(255,255,255,0.15); }

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.example {
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.2s;
}
.example:hover { transform: translateY(-3px); }

.ex-emoji { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }

.example p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ── Bottom CTA ──────────────────────────────────── */
.bottom-cta { text-align: center; }

.bottom-tagline {
  font-family: 'Foldit', cursive;
  font-size: clamp(1.25rem, 4vw, 2rem);
  color: #7c3aed;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

.big-cta {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  background: rgba(168,85,247,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 9999px;
  color: #7c3aed;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.big-cta:hover {
  background: rgba(168,85,247,0.25);
  transform: scale(1.04);
  box-shadow: 0 10px 30px rgba(168,85,247,0.2);
}

/* ── Footer ──────────────────────────────────────── */
footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}

footer a { color: var(--accent); text-decoration: none; font-size: 0.875rem; }
footer a:hover { color: #9333ea; }
.copy { font-size: 0.75rem; color: rgba(100,116,139,0.5); margin-top: 0.5rem; }

/* ── Animations ──────────────────────────────────── */
@keyframes float-slow {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.05); }
}
@keyframes float-slower {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px, -20px) scale(0.95); }
}
@keyframes float-medium {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(15px, -25px) scale(1.08); }
}
@keyframes float-fast {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-25px, 20px); }
}
@keyframes pulse-gentle {
  0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.45; transform: translate(-50%,-50%) scale(1.05); }
}
@keyframes letter-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes float-particle-1 {
  0%, 100% { transform: translate(0,0); opacity: 0.8; }
  50% { transform: translate(8px, -12px); opacity: 1; }
}
@keyframes float-particle-2 {
  0%, 100% { transform: translate(0,0); opacity: 0.6; }
  50% { transform: translate(-10px, 8px); opacity: 1; }
}
@keyframes float-particle-3 {
  0%, 100% { transform: translate(0,0); opacity: 0.7; }
  50% { transform: translate(12px, -8px); opacity: 1; }
}
@keyframes float-particle-4 {
  0%, 100% { transform: translate(0,0); opacity: 0.5; }
  50% { transform: translate(-8px, -10px); opacity: 0.9; }
}
@keyframes float-particle-5 {
  0%, 100% { transform: translate(0,0); opacity: 0.6; }
  50% { transform: translate(10px, 10px); opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .glass-card { padding: 2.5rem 1.5rem; }
  .wordmark { font-size: 2.5rem; }
}