:root {
  --background: 243 12% 97%;
  --foreground: 243 30% 12%;
  --card: 0 0% 100%;
  --card-foreground: 243 30% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 243 30% 12%;
  --primary: 243 75% 50%;
  --primary-foreground: 0 0% 100%;
  --primary-dark: 243 75% 40%;
  --primary-light: 243 30% 94%;
  --secondary: 199 89% 48%;
  --secondary-foreground: 243 30% 12%;
  --muted: 243 10% 92%;
  --muted-foreground: 243 10% 42%;
  --accent: 243 30% 12%;
  --accent-foreground: 0 0% 100%;
  --accent-dark: 243 40% 6%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 243 12% 88%;
  --input: 243 12% 88%;
  --ring: 243 75% 50%;
  --radius: 0.75rem;
}

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }

.container-max { margin-left: auto; margin-right: auto; max-width: 80rem; }
.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px) { .section-padding { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .section-padding { padding: 6rem 4rem; } }

.text-gradient-primary {
  background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-hover-lift { transition: all 0.3s; }
.card-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 30px -8px hsl(var(--primary) / 0.2); }
.overlay-gradient { background: linear-gradient(to top, hsl(var(--accent-dark) / 0.9), hsl(var(--accent-dark) / 0.1)); }
.hero-overlay { background: linear-gradient(135deg, hsl(var(--accent-dark) / 0.9), hsl(var(--accent-dark) / 0.82)); position: absolute; inset: 0; }
.bento-card { background: hsl(var(--card)); border-radius: 1rem; border: 1px solid hsl(var(--border)); padding: 1.5rem; }
@media (min-width: 768px) { .bento-card { padding: 2rem; } }
.glass-card { backdrop-filter: blur(12px); border: 1px solid hsl(0 0% 100% / 0.1); background: linear-gradient(135deg, hsl(0 0% 100% / 0.08), hsl(0 0% 100% / 0.02)); }
.gradient-mesh {
  background:
    radial-gradient(at 20% 20%, hsl(var(--primary) / 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 40%, hsl(var(--secondary) / 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 80%, hsl(var(--primary) / 0.08) 0px, transparent 50%);
}
.gradient-border { position: relative; }
.gradient-border::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--primary)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.nav-link-underline { position: relative; }
.nav-link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: hsl(var(--primary)); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s;
}
.nav-link-underline:hover::after { transform: scaleX(1); transform-origin: bottom left; }
.footer-link-underline { position: relative; }
.footer-link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: hsl(var(--primary)); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s;
}
.footer-link-underline:hover::after { transform: scaleX(1); transform-origin: bottom left; }