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

:root {
  /* Raw scale */
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --amber-200: #fde68a;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --blue-500: #3b82f6;
  --slate-50: #f8fafc;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --yellow-400: #facc15;

  /* Role tints (RGB tuples for use in rgba()) */
  --tint-mentor:  139, 92, 246;
  --tint-trainer:  59, 130, 246;
  --tint-team:    245, 158, 11;

  /* Semantic tokens */
  --surface: var(--slate-50);
  --surface-raised: rgba(255, 255, 255, 0.7);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-quaternary: var(--gray-400);
  --border-subtle: var(--gray-200);

  /* Modular type scale (1.25 ratio, 16px anchor) */
  --text-micro: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-h1: 49px;
  --text-display: 96px;

  /* Shadows */
  --pill-shadow: 0 10px 30px rgba(120, 113, 159, 0.12);
  --card-shadow: 0 14px 40px rgba(120, 113, 159, 0.18);
}

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.55;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    linear-gradient(135deg, #f8fafc 0%, rgba(245, 243, 255, 0.85) 50%, rgba(255, 251, 235, 0.75) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Soft glow behind hero */
.hero-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  background: radial-gradient(circle, rgba(196,181,253,0.32) 0%, rgba(253,230,138,0.22) 60%, transparent 100%);
  filter: blur(140px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ============ Brand logo (fixed top-left) ============ */
.brand {
  position: fixed;
  top: 0px;
  left: 32px;
  z-index: 50;
  display: block;
  animation: fadeIn 0.6s ease-out 0.2s both;
  text-decoration: none;
}
.brand img {
  display: block;
  /* Fluid sizing — square mark, kept compact so it doesn't crowd the corner */
  height: clamp(56px, 6vw, 96px);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============ Fixed launch pill ============ */
.launch-pill {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 9999px;
  padding: 10px 22px;
  box-shadow: var(--pill-shadow);
  animation: pillIn 0.6s ease-out 0s both;
  display: inline-block;
}
.launch-pill-inner { display: flex; align-items: center; gap: 12px; }
.launch-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(90deg, var(--violet-500), var(--amber-500));
  flex-shrink: 0;
}
.launch-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--violet-500), var(--amber-500));
  animation: ripple 2.2s ease-out infinite;
  pointer-events: none;
}
.launch-text {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-small); font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  white-space: nowrap;
}
.launch-text svg { width: 16px; height: 16px; color: var(--text-secondary); }
.launch-highlight {
  background: linear-gradient(90deg, var(--violet-600), var(--amber-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

@media (max-width: 540px) {
  .brand { top: 8px; left: 12px; }
  .launch-pill { top: 96px; padding: 8px 16px; }
  .launch-text { font-size: var(--text-micro); }
  .launch-text svg { width: 14px; height: 14px; }
}

/* ============ Floating bubbles (fixed) ============ */
.bubble {
  position: fixed;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
/* Entrance — uses scale/translate INDIVIDUAL props (not transform shorthand)
   so the transform channel stays free for the descendant drift loop. */
.bubble.text-bubble-wrap {
  animation-name: bubbleFadeUp;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.bubble.profile-card-wrap {
  animation-name: bubbleScaleIn;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: forwards;
}

/* Cursor parallax wrapper (profile cards only) — JS sets transform directly. */
.bubble-parallax {
  will-change: transform;
}

/* Drift loop — single transform property animated, GPU-accelerated. */
.bubble-drift {
  animation-name: drift-a;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
.bubble-drift.drift-b { animation-name: drift-b; }
.bubble-drift.drift-c { animation-name: drift-c; }

.text-bubble {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 24px;
  padding: 22px 24px;
  max-width: 280px;
  box-shadow: var(--pill-shadow);
}
.text-bubble p {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Profile card */
.profile-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  padding: 16px;
  width: 220px;
  box-shadow: var(--card-shadow);
}
.profile-card.role-mentor  { --role-tint: var(--tint-mentor); }
.profile-card.role-trainer { --role-tint: var(--tint-trainer); }
.profile-card.role-team    { --role-tint: var(--tint-team); }

.avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-200);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
  display: block;
}
.role-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: rgba(var(--role-tint), 0.95);
}

.profile-name {
  text-align: center;
  margin-top: 12px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.skill-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; margin-top: 8px;
}
.skill-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(var(--role-tint, 156, 163, 175), 0.10);
  color: var(--gray-700);
  border-radius: 9999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.rating-row {
  display: flex; align-items: center; gap: 4px;
  justify-content: center; margin-top: 8px;
  font-size: var(--text-small); font-weight: 500; color: var(--text-secondary);
}
.rating-row svg { width: 14px; height: 14px; fill: var(--yellow-400); color: var(--yellow-400); }
.distance-row {
  display: flex; align-items: center; gap: 4px;
  justify-content: center; margin-top: 6px;
  color: var(--text-tertiary); font-size: var(--text-micro);
  letter-spacing: 0.02em;
}
.distance-row svg { width: 12px; height: 12px; }

/* Position presets — laid out so columns don't collide on shorter viewports.
   LEFT column: Priya (top) → Arjun (middle) → Bubble 2 (bottom)
   RIGHT column: Bubble 1 (top) → Ananya (upper-mid) → Rahul (bottom)
   MIDDLE-RIGHT (deep inset, doesn't compete with right column): Bubble 3 */
.pos-priya    { top: 96px;     left: 3%;  }
.pos-arjun    { top: 48%;      left: 3%;  }
.pos-ananya   { top: 30%;      right: 3%; }
.pos-rahul    { bottom: 60px;  right: 5%; }

.pos-bubble-1 { top: 100px;    right: 4%; }
.pos-bubble-2 { bottom: 32px;  left: 5%; }
.pos-bubble-3 { top: 56%;      right: 22%; }

/* Entrance choreography */
.delay-text-1 { animation-delay: 0.80s; }
.delay-text-2 { animation-delay: 0.90s; }
.delay-text-3 { animation-delay: 1.00s; }
.delay-card-1 { animation-delay: 1.00s; }
.delay-card-2 { animation-delay: 1.08s; }
.delay-card-3 { animation-delay: 1.16s; }
.delay-card-4 { animation-delay: 1.24s; }

/* Drift loop variations — 3 waveforms × varied durations + delays for organic feel */
.drift-d1 { animation-duration: 6.2s; animation-delay: 0.0s; }
.drift-d2 { animation-duration: 7.5s; animation-delay: 0.4s; }
.drift-d3 { animation-duration: 5.8s; animation-delay: 0.8s; }
.drift-d4 { animation-duration: 8.0s; animation-delay: 0.2s; }
.drift-d5 { animation-duration: 6.8s; animation-delay: 0.6s; }
.drift-d6 { animation-duration: 7.2s; animation-delay: 1.1s; }
.drift-d7 { animation-duration: 6.5s; animation-delay: 0.3s; }

/* Visibility tiers */
.text-bubble-wrap, .profile-card-wrap { display: none; }
@media (min-width: 1024px) { .text-bubble-wrap { display: block; } }
@media (min-width: 1180px) { .profile-card-wrap { display: block; } }
@media (min-width: 1024px) and (max-width: 1179px) {
  .text-bubble { padding: 24px 28px; }
}

/* ============ Scrollable content ============ */
main {
  position: relative;
  z-index: 10;
  width: 100%;
}

.hero {
  padding: clamp(170px, 20vh, 220px) 24px 64px;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.hero-headline {
  font-size: clamp(var(--text-h1), 9vw, var(--text-display));
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: 28px;
  animation: fadeUp 0.8s ease-out 0.4s both;
}
.phrase-a {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}
.phrase-b {
  font-family: 'Fraunces', 'Inter', serif;
  font-weight: 300;
  font-style: italic;
  font-variation-settings: 'opsz' 144;
  margin-left: 0.18em;
  letter-spacing: -0.02em;
}
.hero p {
  font-size: clamp(17px, 1.6vw, var(--text-lead));
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 38rem;
  margin: 0 auto;
  line-height: 1.45;
  letter-spacing: -0.005em;
  animation: fadeUp 0.8s ease-out 0.6s both;
}

/* Mobile/tablet only: small avatar strip */
.mini-avatars {
  display: none;
  margin: 32px auto 0;
  width: max-content;
  align-items: center;
}
.mini-avatars img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-200);
  box-shadow: 0 0 0 2px white;
  margin-left: -10px;
}
.mini-avatars img:first-child { margin-left: 0; }
.mini-avatars .mini-label {
  margin-left: 14px;
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}
@media (max-width: 1023px) {
  .mini-avatars { display: flex; animation: fadeIn 0.8s ease-out 0.7s both; }
}

.values {
  padding: 56px 24px;
  max-width: 42rem;
  margin: 0 auto;
}
.values ul { list-style: none; }
.values li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  line-height: 1.5;
  opacity: 0;
  animation: fadeRight 0.6s ease-out forwards;
}
.values li:nth-child(1) { animation-delay: 1.20s; }
.values li:nth-child(2) { animation-delay: 1.30s; }
.values li:nth-child(3) { animation-delay: 1.40s; }
.values .dot {
  color: rgba(192, 132, 252, 0.7);
  font-size: 22px; line-height: 1;
  margin-top: 4px;
  flex-shrink: 0;
}

.cta {
  padding: 64px 24px 32px;
  /* Container kept tight so the input doesn't feel oversized next to the button */
  max-width: 32rem;
  margin: 0 auto;
  animation: fadeUp 0.8s ease-out 1.5s both;
}
.cta-form {
  display: flex; gap: 12px; flex-direction: row;
}
.cta-form input {
  /* Compact input — shorter and narrower so the field doesn't dominate the CTA row */
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cta-form input::placeholder { color: var(--text-quaternary); font-weight: 400; }
.cta-form input:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(216, 180, 254, 0.6);
  background: white;
}
.cta-form.is-success input {
  animation: inputPing 0.9s ease-out;
}
.cta-form button {
  position: relative;
  overflow: hidden;
  padding: 12px 22px;
  min-width: 160px;
  background: var(--gray-900);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: background 0.4s ease, transform 0.15s, box-shadow 0.2s;
}
.cta-form button:hover { background: var(--gray-800); }
.cta-form button:active { transform: scale(0.98); }
.cta-form button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 180, 254, 0.7);
}
.cta-form button:disabled { cursor: default; }

.btn-label-default,
.btn-label-success {
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.btn-label-success {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.cta-form.is-success button {
  background: linear-gradient(135deg, var(--violet-500), var(--amber-500));
}
.cta-form.is-success .btn-label-default {
  opacity: 0;
  transform: translateY(-8px);
}
.cta-form.is-success .btn-label-success {
  opacity: 1;
  transform: translateY(0);
}
/* Success ripple emanating from button */
.cta-form button .ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--violet-500), var(--amber-500));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.cta-form.is-success button .ripple {
  animation: btnRipple 0.7s ease-out;
}

.cta .helper {
  text-align: center;
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--text-small);
  letter-spacing: -0.005em;
  margin-top: 24px;
}
.cta-error {
  text-align: center;
  color: #b91c1c;
  font-weight: 500;
  font-size: var(--text-small);
  letter-spacing: -0.005em;
  margin-top: 16px;
}
.cta-error[hidden] { display: none; }
.cta .ideas {
  text-align: center;
  color: var(--text-quaternary);
  font-weight: 400;
  font-size: var(--text-small);
  letter-spacing: -0.005em;
  margin-top: 48px;
  animation: fadeIn 0.8s ease-out 1.7s both;
}
.cta .audience {
  text-align: center;
  color: var(--text-quaternary);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 24px;
  animation: fadeIn 0.8s ease-out 1.85s both;
}

/* Stack the form vertically wherever the input would be cramped — long button
   text ("Be First to Team Up") needs more room than "Get early access" did. */
@media (max-width: 720px) {
  .cta-form { flex-direction: column; gap: 10px; }
  /* In column layout flex-basis is interpreted as height, so reset to auto
     and let padding + font-size determine the input's natural height. */
  .cta-form input,
  .cta-form button { flex: 0 0 auto; }
  .cta-form button { padding: 12px 22px; min-width: 0; }
}
@media (max-width: 600px) {
  .cta { padding-top: 48px; }
  .values { padding: 40px 24px; }
  .hero { padding-top: 160px; padding-bottom: 32px; }
}

footer {
  padding: 64px 24px 48px;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  animation: fadeIn 0.8s ease-out 2.0s both;
}
footer p {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--text-small);
  letter-spacing: -0.005em;
}

/* Hidden visually but still accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Animations ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
/* Bubble-specific entrance keyframes — use scale/translate INDIVIDUAL props so the
   transform property stays free for descendant drift animation */
@keyframes bubbleFadeUp {
  from { opacity: 0; translate: 0px 20px; }
  to   { opacity: 1; translate: 0px 0px; }
}
@keyframes bubbleScaleIn {
  from { opacity: 0; scale: 0.92; }
  to   { opacity: 1; scale: 1; }
}
@keyframes pillIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0;    }
}
@keyframes btnRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0;    }
}
@keyframes inputPing {
  0%, 100% {
    border-color: var(--border-subtle);
    box-shadow: 0 0 0 0 rgba(216, 180, 254, 0);
  }
  40% {
    border-color: var(--violet-300);
    box-shadow: 0 0 0 4px rgba(216, 180, 254, 0.35);
  }
}

/* Drift waveforms — single transform shorthand with translate3d + rotate.
   Generous amplitudes so motion is unmistakably visible. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0,    0,    0) rotate(0deg); }
  25%      { transform: translate3d(8px,  -10px, 0) rotate(1deg); }
  50%      { transform: translate3d(0,    -22px, 0) rotate(0deg); }
  75%      { transform: translate3d(-8px, -12px, 0) rotate(-1deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0,    0,    0) rotate(0deg); }
  33%      { transform: translate3d(-10px, -16px, 0) rotate(-1.4deg); }
  66%      { transform: translate3d(6px,  -24px, 0) rotate(0.8deg); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0,    0,    0) rotate(0deg); }
  20%      { transform: translate3d(5px,  -8px,  0) rotate(0.8deg); }
  40%      { transform: translate3d(12px, -18px, 0) rotate(1.5deg); }
  60%      { transform: translate3d(-5px, -24px, 0) rotate(-1deg); }
  80%      { transform: translate3d(-9px, -10px, 0) rotate(-1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Targeted reduced-motion handling instead of a universal kill switch:
     - Snap entrance animations to their final state
     - Disable the pill dot ripple
     - Disable cursor parallax
     - KEEP the drift loop (gentle ambient motion) */
  .bubble, .hero-headline, .hero > p, .values li, .cta, .ideas, .audience,
  .brand, footer, .launch-pill, .mini-avatars {
    animation-duration: 0.01ms !important;
  }
  .launch-dot::after { animation: none !important; }
  .bubble-parallax { transform: none !important; }
}