:root {
    --primary: #3b82f6;
    --accent: #facc15;
    --dark: #0f172a;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

h1, h2, h3, .font-display {
    font-family: 'Playfair Display', serif;
}

.glass-card {
    position: relative;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.55), rgba(250, 204, 21, 0.25), rgba(255, 255, 255, 0.08));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.35),
        0 18px 55px -25px rgba(59, 130, 246, 0.45);
}

.gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #facc15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-bg {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(115deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.72) 45%, rgba(15, 23, 42, 0.92) 100%),
        radial-gradient(circle at 18% 25%, rgba(59, 130, 246, 0.22), transparent 58%),
        radial-gradient(circle at 78% 30%, rgba(250, 204, 21, 0.12), transparent 55%),
        url("/resources/images/NodeITStudioTeamPhoto.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cinematic depth + tint overlays */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: -2;
    background: url("/resources/images/NodeITStudioTeamPhoto.webp") center / cover no-repeat;
    filter: blur(18px) saturate(1.05) contrast(1.04);
    transform: scale(1.06);
    opacity: 0.22;
    pointer-events: none;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 20%, rgba(59, 130, 246, 0.24), transparent 60%),
        radial-gradient(circle at 80% 65%, rgba(250, 204, 21, 0.10), transparent 62%),
        radial-gradient(1200px 620px at 50% 60%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}

.step-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--primary), transparent);
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .step-line::after { display: none; }
    .hero-bg::before { opacity: 0.14; }
    .hero-bg { background-position: center top; }
}

/* Hero: better typography scaling + avoid overflow on very small screens */
#hero h1 {
    position: relative;
    font-size: clamp(2.1rem, 6.2vw, 5rem);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

#hero h1::after {
    content: "";
    display: block;
    height: 10px;
    width: min(240px, 55%);
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.0), rgba(59, 130, 246, 0.8), rgba(250, 204, 21, 0.7), rgba(250, 204, 21, 0.0));
    opacity: 0.95;
}

#hero p {
    font-size: clamp(1.02rem, 2.6vw, 1.25rem);
}

/* Ultra-small devices (<300px) */
@media (max-width: 300px) {
    body { overflow-x: hidden; }
    #hero .max-w-7xl { padding-left: 14px; padding-right: 14px; }
    #hero h1 { font-size: 1.95rem; }
    #hero a { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Consent banner (used by /scripts/consent.js) */
#consent-banner {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 2147483001;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
    max-width: calc(100svw - max(14px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right)));
    box-sizing: border-box;
    overflow: hidden;
}

@supports not (width: 100svw) {
    #consent-banner {
        max-width: calc(100vw - max(14px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right)));
    }
}

#consent-banner .consent-inner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 14px;
}

#consent-banner .consent-text strong {
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.95);
}

#consent-banner .consent-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12.5px;
    line-height: 1.45;
}

#consent-banner .consent-text a {
    color: rgba(147, 197, 253, 0.95);
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.35);
}

#consent-banner .consent-text a:hover {
    text-decoration-color: rgba(147, 197, 253, 0.85);
}

#consent-banner .consent-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

#consent-banner .consent-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

#consent-banner .consent-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

#consent-banner .consent-accept {
    background: rgba(59, 130, 246, 0.92);
    border-color: rgba(59, 130, 246, 0.5);
}

#consent-banner .consent-accept:hover {
    background: rgba(59, 130, 246, 1);
}

@media (max-width: 860px) {
    #consent-banner .consent-inner {
        flex-direction: column;
        align-items: stretch;
    }
    #consent-banner .consent-actions {
        justify-content: flex-end;
    }
}