:root {
  color-scheme: light;
  --font-display: "Space Grotesk", "General Sans", system-ui, sans-serif;
  --font-body: "General Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-xs: 0.4rem;
  --radius-sm: 0.6rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.4rem;
  --radius-2xl: 3.2rem;

  --shadow-xs: 0 6px 12px -6px rgba(10, 10, 10, 0.35);
  --shadow-sm: 0 12px 24px -12px rgba(11, 12, 17, 0.45);
  --shadow-md: 0 24px 46px -18px rgba(10, 13, 28, 0.55);
  --shadow-lg: 0 32px 80px -20px rgba(5, 10, 45, 0.6);

  --noise-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");

  --transition-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fluid: cubic-bezier(0.22, 1, 0.36, 1);

  --surface-50: #f0fdf4;
  --surface-100: #dcfce7;
  --surface-200: #bbf7d0;
  --surface-300: #86efac;
  --surface-400: #4ade80;
  --surface-500: #22c55e;
  --surface-600: #16a34a;
  --surface-700: #15803d;
  --surface-800: #166534;
  --surface-900: #14532d;
  --surface-950: #052e16;

  --accent-amber: #bef264;
  --accent-lime: #4ade80;
  --accent-rose: #22d3ee;
  --accent-cyan: #10b981;
  --accent-blue: #047857;

  --text-primary: rgba(14, 53, 31, 0.94);
  --text-secondary: rgba(21, 80, 45, 0.72);
  --text-muted: rgba(21, 80, 45, 0.58);

  --app-background: radial-gradient(1100px 720px at 10% -15%, rgba(74, 222, 128, 0.26), transparent 65%), radial-gradient(1000px 680px at 80% 0%, rgba(16, 185, 129, 0.28), transparent 60%), linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);

  --nav-surface: rgba(236, 253, 245, 0.94);
  --nav-border: rgba(34, 197, 94, 0.28);
  --nav-text: rgba(14, 53, 31, 0.78);
  --nav-text-hover: rgba(14, 53, 31, 0.95);
  --nav-text-active: rgba(14, 53, 31, 0.9);
  --nav-indicator: rgba(74, 222, 128, 0.22);
  --nav-toggle-surface: rgba(220, 252, 231, 0.96);
  --nav-toggle-border: rgba(34, 197, 94, 0.32);
  --nav-toggle-icon: rgba(21, 80, 45, 0.9);
  --nav-cta-surface: rgba(74, 222, 128, 0.18);
  --nav-cta-border: rgba(34, 197, 94, 0.36);
  --nav-cta-text: rgba(21, 80, 45, 0.9);
  --nav-cta-hover-surface: rgba(74, 222, 128, 0.24);
  --nav-trigger-surface: rgba(220, 252, 231, 0.96);
  --nav-trigger-border: rgba(34, 197, 94, 0.34);
  --nav-trigger-icon: rgba(21, 80, 45, 0.88);
  --nav-drawer-surface: rgba(220, 252, 231, 0.96);
  --nav-drawer-border: rgba(74, 222, 128, 0.3);
  --nav-drawer-link: rgba(14, 53, 31, 0.78);
  --nav-drawer-link-hover: rgba(14, 53, 31, 0.92);
  --nav-drawer-link-active: rgba(14, 53, 31, 0.96);
  --nav-drawer-icon: rgba(34, 197, 94, 0.72);

  --day-overlay-weak: color-mix(in srgb, var(--surface-50) 65%, transparent);
  --day-overlay-strong: color-mix(in srgb, var(--surface-100) 78%, transparent);
  --day-overlay-accent: color-mix(in srgb, var(--accent-cyan) 22%, transparent);
  --day-border-soft: color-mix(in srgb, var(--surface-300) 52%, transparent);
  --day-border-strong: color-mix(in srgb, var(--surface-400) 62%, transparent);
  --day-text-soft: color-mix(in srgb, var(--text-secondary) 92%, transparent);
  --day-text-muted: color-mix(in srgb, var(--text-muted) 90%, transparent);
  --day-badge-surface: color-mix(in srgb, var(--accent-lime) 14%, var(--surface-50) 86%);
  --day-badge-border: color-mix(in srgb, var(--accent-lime) 32%, transparent);
  --day-hero-toggle-bg: color-mix(in srgb, var(--surface-50) 72%, transparent);
  --day-hero-toggle-border: color-mix(in srgb, var(--surface-200) 58%, transparent);
  --day-hero-toggle-active-bg: linear-gradient(120deg, color-mix(in srgb, var(--accent-blue) 68%, white 32%), color-mix(in srgb, var(--accent-cyan) 64%, white 36%));
  --day-hero-toggle-active-text: color-mix(in srgb, var(--surface-950) 88%, transparent);
  --day-cta-surface: linear-gradient(135deg, color-mix(in srgb, var(--accent-lime) 82%, var(--accent-cyan) 18%), color-mix(in srgb, var(--accent-cyan) 76%, var(--accent-blue) 24%));
  --day-cta-border: color-mix(in srgb, var(--accent-cyan) 68%, var(--accent-blue) 32%);
  --day-cta-text: #f4fff9;
  --day-footer-bg: color-mix(in srgb, var(--surface-50) 80%, var(--surface-200) 20%);
  --day-footer-border: color-mix(in srgb, var(--surface-300) 48%, transparent);
  --day-footer-text: color-mix(in srgb, var(--text-secondary) 92%, transparent);

  --neon-blue: #22d3ee;
  --neon-pink: #a3e635;
}

html {
  font-family: var(--font-body);
  background-color: var(--surface-100, #f0fdf4);
  color: var(--text-primary, rgba(14, 53, 31, 0.94));
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background: var(--app-background, radial-gradient(1100px 720px at 10% -15%, rgba(74, 222, 128, 0.26), transparent 65%), radial-gradient(1000px 680px at 80% 0%, rgba(16, 185, 129, 0.28), transparent 60%), linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%));
  color: var(--text-primary, rgba(14, 53, 31, 0.94));
  background-attachment: fixed;
  transition: background 360ms var(--transition-fluid), color 200ms var(--transition-snappy);
  overflow-x: hidden;
  overflow-x: clip;
}

html #page-content,
html footer {
  color: var(--text-primary);
}

html #page-content [class*="text-slate-1"],
html #page-content [class*="text-slate-2"],
html #page-content [class*="text-white"] {
  color: var(--text-primary) !important;
}

html #page-content [class*="text-slate-3"],
html footer [class*="text-slate-2"] {
  color: var(--day-text-soft) !important;
}

html #page-content [class*="text-slate-4"],
html #page-content [class*="text-slate-5"],
html #page-content [class*="text-white/"] {
  color: var(--day-text-muted) !important;
}

html #page-content [class*="text-cyan"],
html footer [class*="text-cyan"] {
  color: color-mix(in srgb, var(--accent-cyan) 72%, var(--text-primary) 28%) !important;
}

html #page-content .bg-white\/5,
html #page-content .bg-white\/10,
html #page-content .bg-white\/20,
html #page-content .bg-white\/30 {
  background-color: var(--day-overlay-weak) !important;
}

html footer .bg-white\/5,
html footer .bg-white\/10 {
  background-color: var(--day-overlay-weak) !important;
}

html #page-content .hover\:bg-white\/10:hover,
html #page-content .hover\:bg-white\/20:hover {
  background-color: var(--day-overlay-strong) !important;
}

html footer .hover\:bg-white\/10:hover {
  background-color: var(--day-overlay-strong) !important;
}

html #page-content .border-white\/10,
html #page-content .border-white\/15,
html footer .border-white\/10 {
  border-color: var(--day-border-soft) !important;
}

html #page-content .border-white\/30,
html #page-content .border-white\/40,
html #page-content .hover\:border-white\/30:hover,
html #page-content .border-white\/35,
html footer .border-white\/30 {
  border-color: var(--day-border-strong) !important;
}

html #page-content .hover\:border-white\/35:hover,
html footer .hover\:border-white\/40:hover {
  border-color: var(--day-border-strong) !important;
}

html #page-content .bg-black\/30,
html #page-content .bg-black\/40,
html footer.bg-black\/40 {
  background-color: color-mix(in srgb, var(--surface-900) 12%, var(--surface-50) 88%) !important;
}

html #page-content .step-indicator {
  background: var(--day-overlay-weak);
  border-color: var(--day-border-soft);
  color: var(--day-text-soft);
}

html #page-content .badge-grid span {
  background: var(--day-badge-surface);
  border-color: var(--day-badge-border);
  color: var(--text-primary);
}

html #page-content .badge-dot::before {
  background: color-mix(in srgb, var(--accent-amber) 55%, var(--accent-lime) 45%);
}

html #page-content .hero-toggle {
  background: var(--day-hero-toggle-bg);
  border-color: var(--day-hero-toggle-border);
}

html #page-content .hero-toggle button[data-active="true"] {
  background: var(--day-hero-toggle-active-bg);
  color: var(--day-hero-toggle-active-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 40%, var(--accent-cyan) 30%, white 30%);
}

html #page-content .cta-button {
  border-color: var(--day-cta-border) !important;
  background: var(--day-cta-surface) !important;
  color: var(--day-cta-text) !important;
  box-shadow: 0 22px 46px -22px color-mix(in srgb, var(--accent-cyan) 70%, transparent), 0 12px 26px -20px color-mix(in srgb, var(--accent-blue) 42%, transparent);
  text-shadow: 0 1px 8px rgba(7, 51, 34, 0.35);
}

html #page-content .cta-button:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-lime) 76%, var(--accent-cyan) 24%), color-mix(in srgb, var(--accent-cyan) 74%, var(--accent-blue) 26%)) !important;
  border-color: color-mix(in srgb, var(--accent-cyan) 62%, var(--accent-blue) 38%) !important;
}

html #page-content .text-slate-400\/70 {
  color: var(--day-text-muted) !important;
}

html #page-content .hover\:text-white:hover {
  color: var(--text-primary) !important;
}

html footer {
  background: var(--day-footer-bg) !important;
  color: var(--day-footer-text) !important;
  border-color: var(--day-footer-border) !important;
}

html footer .text-white,
html footer .hover\:text-white:hover,
html footer a {
  color: var(--text-primary) !important;
}

html footer .hover\:text-white:hover {
  color: color-mix(in srgb, var(--text-primary) 85%, var(--accent-blue) 15%) !important;
}

html .scroll-progress {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 70%, white 30%), color-mix(in srgb, var(--accent-cyan) 70%, white 30%), color-mix(in srgb, var(--accent-rose) 65%, white 35%));
}

body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  background-image: var(--noise-texture);
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
}

::selection {
  background-color: rgba(74, 222, 128, 0.45);
  color: #022c22;
}

@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;
  }
}