:root {
    --background: 210 24% 6%;
    --foreground: 210 20% 96%;
    --card: 208 20% 10%;
    --card-foreground: 210 20% 96%;
    --popover: 208 20% 10%;
    --popover-foreground: 210 20% 96%;
    --primary: 164 78% 52%;
    --primary-foreground: 210 30% 5%;
    --secondary: 205 26% 15%;
    --secondary-foreground: 210 20% 96%;
    --muted: 216 16% 15%;
    --muted-foreground: 214 14% 72%;
    --accent: 92 88% 62%;
    --accent-foreground: 210 30% 5%;
    --destructive: 0 78% 58%;
    --destructive-foreground: 210 20% 96%;
    --border: 216 14% 26%;
    --input: 216 14% 26%;
    --ring: 164 78% 52%;
    --radius: .5rem;
    --hero-overlay: linear-gradient(180deg, hsla(210, 45%, 4%, .82) 0%, hsla(208, 38%, 7%, .70) 46%, hsla(164, 82%, 9%, .56) 100%);
    --section-dark: 210 28% 5%;
    --section-light: 210 34% 92%;
    --section-light-foreground: 220 22% 9%;
    --gold: 38 96% 62%;
}

body {
    background:
        radial-gradient(circle at 12% 0%, hsla(164, 78%, 52%, .16), transparent 34%),
        radial-gradient(circle at 88% 12%, hsla(92, 88%, 62%, .12), transparent 30%),
        radial-gradient(circle at 50% 100%, hsla(281, 72%, 52%, .08), transparent 40%),
        linear-gradient(180deg, hsl(210 24% 6%) 0%, hsl(214 22% 8%) 100%);
    color: hsl(var(--foreground));
}

.text-gradient {
    background: linear-gradient(95deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 56%, hsl(var(--gold)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-light {
    background: linear-gradient(135deg, hsl(206 32% 92%) 0%, hsl(164 32% 88%) 50%, hsl(78 38% 86%) 100%);
    color: hsl(var(--section-light-foreground));
}

.section-dark {
    background: linear-gradient(180deg, hsl(210 28% 5%) 0%, hsl(205 24% 8%) 58%, hsl(164 44% 14%) 100%);
}

nav {
    box-shadow: 0 14px 36px hsl(210 24% 2% / .42);
}

.site-logo {
    border-radius: 8px;
    box-shadow: 0 0 24px hsl(var(--primary) / .30), 0 0 0 1px hsl(var(--accent) / .24);
}

.bg-card {
    box-shadow: inset 0 1px 0 hsl(var(--foreground) / .045);
}

#hero img {
    filter: saturate(1.08) contrast(1.08) brightness(.92);
}

#services .group:hover,
#stats .bg-card:hover,
.grid button.bg-card:hover {
    box-shadow: 0 18px 42px hsl(var(--primary) / .13), 0 0 0 1px hsl(var(--accent) / .24);
}

#contact.bg-primary {
    background: linear-gradient(135deg, hsl(164 78% 34%) 0%, hsl(210 42% 18%) 48%, hsl(92 54% 36%) 100%);
}