:root {
  --background: 0 0% 0%;
  --foreground: 158 35% 94%;
  --primary: 151 88% 46%;
  --primary-foreground: 165 55% 7%;
  --secondary: 43 96% 58%;
  --secondary-foreground: 39 55% 9%;
  --muted: 0 0% 8%;
  --muted-foreground: 156 16% 72%;
  --destructive: 0 82% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 18%;
  --card: 0 0% 4%;
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.75rem;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.35);
  --shadow-md: 0 18px 48px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 90px rgba(0,0,0,.72);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
}
.dark {
  --background: 0 0% 0%;
  --foreground: 158 35% 94%;
  --primary: 151 88% 46%;
  --secondary: 43 96% 58%;
  --muted: 0 0% 8%;
  --destructive: 0 82% 61%;
  --border: 0 0% 18%;
  --card: 0 0% 4%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), .10), transparent 32rem),
    radial-gradient(circle at 85% 10%, hsla(var(--secondary), .08), transparent 26rem),
    #000;
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
input, select { font-size: max(16px, 1rem); }
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--muted)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.text-tertiary { color: hsla(var(--foreground), .62); }
.accent { color: hsl(var(--primary)); }
.glass {
  background: linear-gradient(145deg, hsla(var(--card), .97), hsla(var(--muted), .82));
  border: 1px solid hsla(var(--border), .95);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
.hero-grid {
  background-color: #000;
  background-image:
    linear-gradient(hsla(var(--foreground), .035) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--foreground), .035) 1px, transparent 1px);
  background-size: 34px 34px;
}
.safe-bottom { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.bottom-safe { padding-bottom: env(safe-area-inset-bottom); }
.focus-ring:focus-visible { outline: 3px solid hsla(var(--primary), .55); outline-offset: 3px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: floaty 4s ease-in-out infinite; }