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

:root {
  --ff: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fg:     oklch(18% 0.01 250);
  --fg-mid: oklch(42% 0.01 250);
  --fg-dim: oklch(62% 0.01 250);
  --accent:  oklch(52% 0.18 360);
  --accent2: oklch(62% 0.18 60);
  --card-shadow: 0 2px 24px oklch(0% 0 0 / 0.07), 0 1px 0 oklch(100% 0 0 / 0.9) inset;

  /* surface tokens — overridden in dark mode */
  --body-bg:            #f5f3f0;
  --nav-scrolled-bg:    oklch(98% 0.003 80 / 0.75);
  --nav-border:         oklch(100% 0 0 / 0.6);
  --chip-bg:            oklch(100% 0 0 / 0.65);
  --chip-border:        oklch(100% 0 0 / 0.9);
  --surface-bg:         oklch(100% 0 0 / 0.5);
  --surface-border:     oklch(100% 0 0 / 0.8);
  --glass-btn-bg:       oklch(100% 0 0 / 0.6);
  --glass-btn-hover:    oklch(100% 0 0 / 0.8);
  --badge-bg:           oklch(0% 0 0 / 0.05);
  --info-row-bg:        oklch(0% 0 0 / 0.03);
  --info-row-border:    oklch(0% 0 0 / 0.05);
  --pkg-plain-bg:       oklch(100% 0 0 / 0.55);
  --pkg-plain-border:   oklch(100% 0 0 / 0.8);
  --pkg-featured-bg:    linear-gradient(160deg, oklch(100% 0 0 / 0.8) 0%, oklch(95% 0.04 260 / 0.7) 100%);
  --cta-card-bg:        linear-gradient(135deg, oklch(100% 0 0 / 0.7) 0%, oklch(94% 0.04 260 / 0.6) 100%);
  --divider:            oklch(0% 0 0 / 0.08);
  --pkg-divider:        oklch(0% 0 0 / 0.07);
  --pkg-btn-plain-bg:   oklch(0% 0 0 / 0.06);
  --pkg-btn-plain-border: oklch(0% 0 0 / 0.08);
}

/* ── Dark mode ────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --fg:     oklch(92% 0.008 250);
  --fg-mid: oklch(65% 0.008 250);
  --fg-dim: oklch(48% 0.008 250);
  --card-shadow: 0 2px 24px oklch(0% 0 0 / 0.35), 0 1px 0 oklch(100% 0 0 / 0.06) inset;

  --body-bg:            oklch(11% 0.01 250);
  --nav-scrolled-bg:    oklch(13% 0.01 250 / 0.92);
  --nav-border:         oklch(100% 0 0 / 0.1);
  --chip-bg:            oklch(100% 0 0 / 0.07);
  --chip-border:        oklch(100% 0 0 / 0.13);
  --surface-bg:         oklch(100% 0 0 / 0.06);
  --surface-border:     oklch(100% 0 0 / 0.12);
  --glass-btn-bg:       oklch(100% 0 0 / 0.07);
  --glass-btn-hover:    oklch(100% 0 0 / 0.13);
  --badge-bg:           oklch(100% 0 0 / 0.08);
  --info-row-bg:        oklch(100% 0 0 / 0.04);
  --info-row-border:    oklch(100% 0 0 / 0.09);
  --pkg-plain-bg:       oklch(100% 0 0 / 0.06);
  --pkg-plain-border:   oklch(100% 0 0 / 0.12);
  --pkg-featured-bg:    linear-gradient(160deg, oklch(100% 0 0 / 0.09) 0%, oklch(42% 0.1 260 / 0.25) 100%);
  --cta-card-bg:        linear-gradient(135deg, oklch(100% 0 0 / 0.06) 0%, oklch(32% 0.08 260 / 0.25) 100%);
  --divider:            oklch(100% 0 0 / 0.08);
  --pkg-divider:        oklch(100% 0 0 / 0.08);
  --pkg-btn-plain-bg:   oklch(100% 0 0 / 0.07);
  --pkg-btn-plain-border: oklch(100% 0 0 / 0.12);
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, oklch(30% 0.1 260 / 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  oklch(30% 0.1 320 / 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 100%, oklch(22% 0.06 200 / 0.4) 0%, transparent 60%),
    oklch(11% 0.01 250);
}

[data-theme="dark"] .glass-card {
  background:   oklch(100% 0 0 / 0.05);
  border-color: oklch(100% 0 0 / 0.1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* mesh gradient backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, oklch(88% 0.07 260 / 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  oklch(88% 0.07 320 / 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 100%, oklch(90% 0.05 200 / 0.35) 0%, transparent 60%),
    oklch(96% 0.005 80);
}

/* noise grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
}

.glass-card {
  background: oklch(100% 0 0 / 0.6);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid oklch(100% 0 0 / 0.8);
  box-shadow: var(--card-shadow);
  border-radius: 20px;
}

#root {
  min-height: 100vh;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .nav-section-links          { display: none !important; }
  .nav-cta                    { padding: 7px 16px !important; font-size: 13px !important; }
  nav                         { padding: 0 20px !important; }
  .hero-section               { padding: 120px 24px 80px !important; }
  .credits-section,
  .about-section,
  .services-section,
  .cta-section                { padding: 60px 24px !important; }
  .about-grid                 { grid-template-columns: 1fr !important; gap: 32px !important; padding: 36px 28px !important; }
  .services-grid              { grid-template-columns: 1fr !important; }
  .how-it-works-grid          { grid-template-columns: 1fr !important; }
  .cta-inner                  { padding: 48px 28px !important; }
  .cta-email-btn              { font-size: 13px !important; padding: 16px 20px !important; word-break: break-all !important; width: 100% !important; }
  footer                      { flex-direction: column !important; align-items: flex-start !important; }
}