/* === Bubblan v1 — Brand Stylesheet === */
/* Mobile-first. Single breakpoint at 768px. */
/* Dark mode via prefers-color-scheme. */

/* --- Palette (CSS custom properties) --- */
:root {
  --b-primary:    #22D3EE;
  --b-accent:     #F472B6;
  --b-tertiary:   #A78BFA;
  --b-bg:         #F8FAFC;
  --b-bg-dark:    #0F172A;
  --b-surface:    #FFFFFF;
  --b-surface-dark: #1E293B;
  --b-text:       #0F172A;
  --b-text-muted: #64748B;
  --b-tint:       #E0F2FE;
  --b-glow:       rgba(34, 211, 238, 0.35);
  --b-radius:     16px;
  --b-font-head:  'Space Grotesk', system-ui, sans-serif;
  --b-font-body:  'DM Sans', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --b-bg:         #0F172A;
    --b-surface:    #1E293B;
    --b-text:       #F1F5F9;
    --b-text-muted: #94A3B8;
    --b-tint:       #1E293B;
    --b-glow:       rgba(34, 211, 238, 0.25);
  }
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--b-font-body);
  background: var(--b-bg);
  color: var(--b-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Ambient background --- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 12s ease-in-out infinite alternate;
}

.orb-1 {
  width: 300px; height: 300px;
  background: var(--b-primary);
  top: -80px; left: -60px;
  animation-delay: 0s;
}

.orb-2 {
  width: 250px; height: 250px;
  background: var(--b-accent);
  bottom: -60px; right: -40px;
  animation-delay: -4s;
  animation-duration: 15s;
}

.orb-3 {
  width: 200px; height: 200px;
  background: var(--b-tertiary);
  top: 40%; left: 60%;
  animation-delay: -8s;
  animation-duration: 18s;
  opacity: 0.25;
}

@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -30px) scale(1.05); }
  100% { transform: translate(-10px, 15px) scale(0.97); }
}

/* --- Main container --- */
.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  min-height: 100dvh;
}

/* --- Logo --- */
.logo {
  width: 96px;
  height: 96px;
  margin-bottom: 1.5rem;
  animation: bubblePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 4px 24px var(--b-glow));
}

@keyframes bubblePop {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Wordmark --- */
.wordmark {
  font-family: var(--b-font-head);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--b-text);
  margin-bottom: 0.75rem;
  animation: fadeUp 0.5s 0.15s ease both;
}

.wordmark .dot-ai {
  color: var(--b-primary);
}

/* --- Tagline --- */
.tagline {
  font-family: var(--b-font-head);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--b-text);
  margin-bottom: 0.25rem;
  animation: fadeUp 0.5s 0.25s ease both;
}

/* --- Subline --- */
.subline {
  font-family: var(--b-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--b-text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.5s 0.35s ease both;
}

@keyframes fadeUp {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* --- CTA button --- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--b-font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--b-bg-dark);
  background: var(--b-primary);
  border: none;
  border-radius: 999px;
  padding: 1rem 2.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 4px 24px var(--b-glow);
  animation: fadeUp 0.5s 0.45s ease both;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--b-glow);
  background: #06B6D4;
}

.cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px var(--b-glow);
}

.cta-arrow {
  font-size: 1.2em;
  transition: transform 0.2s;
}

.cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* --- Feature pills (below CTA) --- */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  animation: fadeUp 0.5s 0.6s ease both;
}

.pill {
  font-family: var(--b-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--b-text-muted);
  background: var(--b-tint);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}

/* --- Footer --- */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.8rem;
  color: var(--b-text-muted);
}

.footer a {
  color: var(--b-primary);
  text-decoration: none;
}

/* --- Desktop --- */
@media (min-width: 768px) {
  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
  }

  .wordmark {
    font-size: 3rem;
  }

  .tagline {
    font-size: 2rem;
  }

  .subline {
    font-size: 1rem;
    margin-bottom: 3rem;
  }

  .cta {
    font-size: 1.25rem;
    padding: 1.15rem 2.75rem;
  }

  .ambient-orb {
    filter: blur(120px);
  }

  .orb-1 { width: 500px; height: 500px; }
  .orb-2 { width: 400px; height: 400px; }
  .orb-3 { width: 350px; height: 350px; }
}