html {
    scroll-behavior: smooth;
    background-color: #09090b;
}
body {
    background-color: #09090b;
    background:
            radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 30%),
            radial-gradient(circle at 85% 15%, rgba(6, 182, 212, 0.12), transparent 25%),
            linear-gradient(180deg, #09090b 0%, #0f172a 100%);
}

header nav a.is-active {
    color: rgb(103 232 249);
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.26);
}

/* Parallax (Warum ip-systems / Ansatz) */
.parallax-wrap {
    overflow: hidden;
}

.parallax-bg {
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1.06);
}

.parallax-content {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-bg {
        transform: none !important;
    }
    .parallax-content {
        transform: none !important;
    }
}

/* Secondary accent (bronze) – used sparingly */
:root {
    --bronze-300: #f0c27b;
    --bronze-400: #d6a55c;
    --bronze-500: #b8823f;
    --bronze-ink: rgba(214, 165, 92, 0.95);
    --bronze-border: rgba(214, 165, 92, 0.28);
    --bronze-bg: rgba(214, 165, 92, 0.08);
    --bronze-glow: rgba(214, 165, 92, 0.18);
}

.text-bronze {
    color: var(--bronze-ink);
}

.text-bronze-400 {
    color: var(--bronze-400);
}

.border-bronze {
    border-color: var(--bronze-border) !important;
}

.bg-bronze {
    background-color: var(--bronze-bg) !important;
}

.bronze-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: radial-gradient(circle at 35% 35%, var(--bronze-300), var(--bronze-500));
    box-shadow: 0 0 18px var(--bronze-glow);
}

.bronze-card:hover {
    border-color: rgba(214, 165, 92, 0.40) !important;
    box-shadow: 0 18px 48px rgba(5, 8, 20, 0.48), 0 0 0 1px rgba(214, 165, 92, 0.06) inset;
}

.bronze-icon {
    border-color: rgba(214, 165, 92, 0.30) !important;
    background-color: rgba(214, 165, 92, 0.10) !important;
    color: rgba(240, 194, 123, 0.95) !important;
}
.langsvg {
    width: 2em;
    height: 2em;
    fill: #a7874f;
}
.footer-link:hover {
    color: rgb(240 194 123);
}

/* Decorative background images in service cards */
.service-card-bg {
    opacity: 0.36;
    filter: grayscale(28%) saturate(85%) contrast(92%);
    transform: scale(1.04);
    background-size: cover;
}

.service-card-overlay {
    background: linear-gradient(
        180deg,
        rgba(6, 10, 18, 0.55) 0%,
        rgba(10, 14, 24, 0.72) 62%,
        rgba(9, 9, 11, 0.84) 100%
    );
}

/* Subtle card motion for launch polish */
#leistungen .grid > article,
#infrastruktur .grid > article,
#themen .grid > div,
#beispiele .grid > article {
    transition:
        box-shadow 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease;
}

#leistungen .grid > article:hover,
#infrastruktur .grid > article:hover,
#themen .grid > div:hover,
#beispiele .grid > article:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 48px rgba(5, 8, 20, 0.5);
}

#beispiele .grid > article .mb-4 {
    transition: transform 280ms ease, border-color 280ms ease;
}

#beispiele .grid > article:hover .mb-4 {
    transform: translateY(-2px) scale(1.03);
}
.iplogo {
    animation: scrollIn 1.5s ease-in;
}

/* Scroll reveal */
.reveal-card {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease;
    will-change: transform, opacity;
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    #leistungen .grid > article,
    #infrastruktur .grid > article,
    #themen .grid > div,
    #beispiele .grid > article,
    #beispiele .grid > article .mb-4,
    .reveal-card,
    .reveal-card.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}