:root {
    --background: 222 30% 5%;
    --foreground: 174 42% 96%;
    --card: 221 24% 10%;
    --card-foreground: 174 42% 96%;
    --popover: 221 24% 10%;
    --popover-foreground: 174 42% 96%;
    --primary: 166 88% 45%;
    --primary-foreground: 220 36% 6%;
    --secondary: 218 22% 16%;
    --secondary-foreground: 174 42% 96%;
    --muted: 218 20% 15%;
    --muted-foreground: 172 14% 72%;
    --accent: 82 92% 56%;
    --accent-foreground: 220 36% 6%;
    --destructive: 0 78% 58%;
    --destructive-foreground: 174 42% 96%;
    --border: 216 20% 24%;
    --input: 216 20% 24%;
    --ring: 166 88% 45%;
    --radius: .5rem;
    --hero-overlay: linear-gradient(180deg, hsla(222, 38%, 4%, .82) 0%, hsla(210, 34%, 7%, .68) 48%, hsla(166, 84%, 12%, .58) 100%);
    --section-dark: 222 36% 5%;
    --section-light: 168 42% 93%;
    --section-light-foreground: 220 25% 9%;
    --gold: 38 96% 58%;
}

body {
    background:
        radial-gradient(circle at 18% 0%, hsla(166, 88%, 45%, .12), transparent 32%),
        radial-gradient(circle at 86% 20%, hsla(82, 92%, 56%, .10), transparent 28%),
        linear-gradient(180deg, hsl(222 30% 5%) 0%, hsl(215 28% 7%) 100%);
    color: hsl(var(--foreground));
}

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

.section-light {
    background: linear-gradient(135deg, hsl(168 42% 93%) 0%, hsl(196 36% 91%) 52%, hsl(78 52% 91%) 100%);
    color: hsl(var(--section-light-foreground));
}

.section-dark {
    background: linear-gradient(180deg, hsl(222 36% 5%) 0%, hsl(210 32% 7%) 58%, hsl(166 52% 8%) 100%);
}

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

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

.bg-card {
    box-shadow: inset 0 1px 0 hsl(174 42% 96% / .045);
}

#hero img {
    filter: saturate(1.06) 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) / .23);
}

#contact.bg-primary {
    background: linear-gradient(135deg, hsl(166 86% 33%) 0%, hsl(203 64% 24%) 48%, hsl(82 76% 38%) 100%);
}