:root {
    --background: 224 44% 5%;
    --foreground: 214 32% 96%;
    --card: 222 38% 9%;
    --card-foreground: 214 32% 96%;
    --popover: 222 38% 9%;
    --popover-foreground: 214 32% 96%;
    --primary: 190 96% 44%;
    --primary-foreground: 0 0% 100%;
    --secondary: 223 34% 14%;
    --secondary-foreground: 214 32% 96%;
    --muted: 223 28% 17%;
    --muted-foreground: 217 13% 68%;
    --accent: 42 95% 56%;
    --accent-foreground: 224 44% 5%;
    --border: 206 30% 22%;
    --input: 206 30% 22%;
    --ring: 190 96% 44%;
    --radius: .5rem;
    --hero-overlay: linear-gradient(90deg, hsla(224, 48%, 5%, .94) 0%, hsla(224, 48%, 5%, .68) 42%, hsla(190, 96%, 22%, .28) 70%, hsla(224, 48%, 5%, .88) 100%);
    --section-dark: 224 46% 4%;
    --section-light: 210 34% 94%;
    --section-light-foreground: 224 44% 8%;
    --gold: 42 95% 56%;
}

.site-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 0 0 1px hsl(var(--border)), 0 10px 28px hsl(var(--primary) / .28);
}

.site-brand span {
    letter-spacing: 0;
}

.site-brand > span {
    font-size: 1.35rem;
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-brand > span .text-foreground {
    color: hsl(var(--foreground));
    -webkit-text-fill-color: hsl(var(--foreground));
}

.text-gradient,
.gold-text {
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(216 96% 62%), hsl(var(--accent)));
}

.section-light {
    background:
        linear-gradient(135deg, hsl(210 34% 94%), hsl(190 38% 89%));
    color: hsl(var(--section-light-foreground));
}

.section-dark {
    background:
        radial-gradient(circle at 82% 12%, hsl(var(--primary) / .24), transparent 30%),
        linear-gradient(180deg, hsl(224 46% 4%), hsl(215 42% 8%));
}

.bg-primary {
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(216 96% 58%));
}

nav.bg-background\/80 {
    background-color: hsl(var(--background) / .92);
}

#hero {
    justify-content: flex-start;
}

#hero::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 58%;
    height: 12rem;
    background: linear-gradient(135deg, hsl(var(--accent) / .95), hsl(var(--primary) / .75));
    clip-path: polygon(0 55%, 100% 100%, 0 100%);
    opacity: .72;
    z-index: 1;
}

#hero::after {
    content: "DIWAN";
    position: absolute;
    inset-inline-end: 3vw;
    top: 20%;
    color: hsl(var(--foreground) / .04);
    font-family: Orbitron, Cairo, sans-serif;
    font-size: clamp(4rem, 11vw, 13rem);
    font-weight: 900;
    letter-spacing: 0;
    z-index: 1;
}

#hero > .relative.z-10 {
    width: min(1180px, 100%);
    margin-inline: auto;
    padding-inline: 2rem;
    text-align: right;
}

#hero h1 {
    max-width: 780px;
    margin-inline-start: 0;
    margin-inline-end: auto;
}

#hero p {
    max-width: 640px;
    color: hsl(var(--foreground) / .78);
}

#hero a {
    box-shadow: 0 18px 44px hsl(var(--primary) / .32);
}

.bg-card {
    background-color: hsl(var(--card) / .96);
}

@media (max-width: 767px) {
    #hero > .relative.z-10 {
        text-align: center;
        padding-inline: 1rem;
    }

    #hero h1,
    #hero p {
        margin-inline: auto;
    }

    #hero::before {
        width: 100%;
        height: 7rem;
    }
}