/* ============================================================
   core-bundle.css · wisepex
   ------------------------------------------------------------
   Site-wide render-blocking CSS bundle. Concatenates, in this
   exact cascade order, the 5 stylesheets that every single page
   loaded separately before this fix:
     1) styles.css       - global design tokens, resets, layout
     2) nav-dropdown.css - shared navbar mega-menu + mobile nav
     3) home.css         - shared section/component styles
     4) hero-3d.css      - "digital twin" hero layer (home only,
                           scoped selectors - harmless elsewhere)
     5) scene-3d.css     - premium interaction layer (load-order
                           dependent tie-break rules)
   Bundling these 5 blocking requests into 1 removes 4 extra
   round trips per page load without changing any selector or
   cascade order - purely a network/perf consolidation (E4).
   ============================================================ */

/* ===== 1/5: styles.css ===== */
/* ========== GLOBAL DESIGN TOKENS ========== */
:root {
    --neon-blue: #1304ea;
    --neon-purple: #8137ff;
    --dark-base: #c3d4f2;    
    --dark-surface: #c5d4ef;
    --dark-elevated: #a8bddd;
    --hero-base: #c3d4f2;
    --glass-bg: rgba(248, 251, 255, 0.94);
    --glass-border: rgba(19, 4, 234, 0.2);
    --card-overlay: rgba(248, 251, 255, 0.96);
    --card-surface: rgba(252, 254, 255, 0.96);
    --text-primary: #141428;
    --text-muted: rgba(20, 20, 40, 0.72);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nav-scroll-offset: max(8.5rem, calc(env(safe-area-inset-top) + 6.5rem));
}

/* ========== RESET ========== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-scroll-offset);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    font-family: var(--font-sans);
    background-color: var(--dark-base);
    background-image:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(19, 4, 234, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 50%, rgba(129, 55, 255, 0.09) 0%, transparent 50%);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Tailwind utility classes on main pages */
body.bg-dark-base.text-white {
    background-color: var(--dark-base);
    color: var(--text-primary);
}

/* ========== SKIP LINK ========== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--neon-blue);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
}

/* ========== SCROLLBAR ========== */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(129, 55, 255, 0.35) transparent;
}

html::-webkit-scrollbar {
    width: 6px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: rgba(129, 55, 255, 0.45);
    border-radius: 3px;
}

/* ========== NAVBAR ========== */
.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 0;
    pointer-events: none;
}

.navbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem);
    border-radius: 999px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(19, 4, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.navbar--scrolled {
    background: rgba(195, 212, 242, 0.94);
    border-color: rgba(19, 4, 234, 0.22);
    box-shadow: 0 12px 40px rgba(19, 4, 234, 0.14);
}

.logo-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-nav-img {
    width: clamp(5.5rem, 11vw, 8.5rem);
    height: auto;
    object-fit: contain;
    transition: opacity var(--transition-normal);
}

.logo-nav-img:hover {
    opacity: 0.85;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    letter-spacing: 0.1em;
    padding: 0.4rem 0.25rem;
    position: relative;
    transition: color var(--transition-normal);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
    transition: width var(--transition-normal);
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--neon-blue);
}

/* Active top-level label (silo-aware, set by nav-dropdown.js via aria-current).
   Scoped to .nav-link so it never matches mega-panel links inside .nav-links. */
.nav-links .nav-link[aria-current="page"] {
    color: var(--neon-blue);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
    width: 100%;
}

/* Persistent underline for the active label - desktop pill only.
   On the mobile panel the blue text alone marks the active silo. */
@media (min-width: 901px) {
    .nav-links .nav-link[aria-current="page"]::after {
        width: 100%;
    }
}

.nav-links a:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 3px;
    border-radius: 2px;
}

.nav-divider {
    width: 1px;
    height: 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(129, 55, 255, 0.6), transparent);
    flex-shrink: 0;
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-primary);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========== FOOTER ========== */
.site-footer {
    width: 100%;
    background: rgba(220, 232, 252, 0.94);
    border-top: 1px solid rgba(129, 55, 255, 0.18);
    padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 5vw, 4rem) max(2rem, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

.footer-nav-heading {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-nav-list a {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-normal);
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible {
    color: var(--neon-purple);
}

.footer-nav-list a:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer-col-unternehmen {
    display: none;
}

.footer-copyright {
    font-size: 0.75rem;
    color: rgba(20, 20, 40, 0.55);
    margin: 0;
    text-align: center;
}

.footer-copyright-desktop {
    display: none;
}

.footer-bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(129, 55, 255, 0.15);
    padding-top: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.footer-links a {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color var(--transition-normal);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--neon-blue);
}

.footer-links a:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ========== SHARED BUTTONS ========== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    /* Solid neon-blue base color (replaced gradient for a flat look) */
    background: var(--neon-blue);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
    box-shadow: 0 4px 24px rgba(19, 4, 234, 0.35);
    text-shadow: 0 1px 2px rgba(19, 4, 234, 0.55);
}


.btn-primary span,
.btn-primary .btn-label {
    position: relative;
    z-index: 1;
}

.btn-primary:hover {
    box-shadow: 0 8px 32px rgba(129, 55, 255, 0.45);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 3px;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-eyebrow,
    .hero-breadcrumb,
    .hero-subheadline,
    .hero-cta-wrap,
    .hero-scroll-indicator {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-headline .char {
        opacity: 1 !important;
        transform: none !important;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== RESPONSIVE: NAVBAR ========== */
@media (max-width: 900px) {
    /* A touch more gutter between the pill and the screen edges, so the
       mobile navbar is slightly narrower than full-bleed. */
    .nav-wrapper {
        padding-inline: clamp(1.25rem, 4.5vw, 1.75rem);
    }

    /* More inner edge padding: the logo and hamburger sit a little more
       centred, not glued to the navbar borders. Only horizontal padding
       changes - vertical padding is untouched, so the navbar height stays
       exactly the same. */
    .navbar {
        padding-inline: clamp(1.5rem, 6vw, 2.25rem);
    }

    /* Bigger logo on mobile. Sized by HEIGHT (not width) and capped below the
       hamburger's height, so the toggle remains the tallest element in the row
       and the navbar height does not change. */
    .logo-nav-img {
        width: auto;
        height: 1.8rem;
    }
}

@media (max-width: 640px) {
    .nav-divider {
        display: none;
    }

    .nav-links a {
        font-size: 0.55rem;
        letter-spacing: 0.06em;
    }
}

/* ========== RESPONSIVE: FOOTER DESKTOP ========== */
@media (min-width: 769px) {
    .footer-col-unternehmen {
        display: block;
    }

    .footer-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 960px;
    }

    .footer-bottom-bar {
        display: none;
    }

    .footer-copyright-desktop {
        display: block;
        max-width: 960px;
        margin: 0 auto;
        padding-top: 2rem;
        border-top: 1px solid rgba(129, 55, 255, 0.15);
    }
}

@media (max-width: 380px) {
    .footer-nav-grid {
        gap: 1.25rem;
    }

    .footer-nav-list a {
        font-size: 0.78rem;
    }
}

/* Safety net: guarantee descender room in the headline reveal mask
   regardless of which page-level stylesheets load. Mirrors home.css. */
.hero-headline .word {
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
}

/*
 * theme-color reference - update in <meta name="theme-color">
 * of ALL HTML pages in the root:
 *   index.html · uber-uns.html · kontakt.html
 * Correct value (matches glass navbar + light UI):
 *   <meta name="theme-color" content="#c3d4f2">
 */

/* ===== 2/5: nav-dropdown.css ===== */
/* ============================================================
   NAVBAR MEGA-MENU + MOBILE NAV  ·  wisepex
   Scoped, self-contained enhancement for the shared navbar.
   Reveal/stagger = pure CSS (SEO-safe, no JS dependency).
   JS (nav-dropdown.js) only manages open state, ARIA, intent.
   ============================================================ */

:root {
    --nav-mega-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-mega-radius: 1.25rem;
    --nav-stagger: 0.045s;
}

/* Anchor context for the absolutely-positioned desktop panels */
.navbar {
    position: relative;
}

/* nav-links is now a <ul> - strip list defaults, keep the flex row */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    display: flex;
    align-items: center;
}

/* Label + caret sit together as one nav entry */
.nav-link-group {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

/* Caret toggle button (disclosure trigger on every viewport) */
.nav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50%;
    transition: color var(--transition-normal), background var(--transition-normal);
}

.nav-caret:hover {
    color: var(--neon-blue);
}

.nav-caret:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
}

.nav-caret-icon {
    width: 0.7rem;
    height: 0.7rem;
    transition: transform var(--transition-normal);
}

.nav-caret[aria-expanded="true"] {
    color: var(--neon-blue);
}

.nav-caret[aria-expanded="true"] .nav-caret-icon {
    transform: rotate(180deg);
}

/* ============================================================
   DESKTOP MEGA PANEL  (≥ 901px)
   ============================================================ */
.nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    padding-top: 0.85rem;            /* transparent hover bridge */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-normal),
                transform 0.35s var(--nav-mega-ease),
                visibility 0s linear 0.3s;
    pointer-events: none;
}

.nav-item.is-open > .nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition-normal),
                transform 0.4s var(--nav-mega-ease),
                visibility 0s;
    pointer-events: auto;
}

.nav-mega-inner {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    border-radius: var(--nav-mega-radius);
    box-shadow: 0 18px 50px rgba(19, 4, 234, 0.16),
                0 4px 14px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 1.1rem;
    overflow: hidden;
}

/* gradient hairline along the top edge of the card */
.nav-mega-inner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-blue), var(--neon-purple), transparent);
    opacity: 0.85;
}

/* pointer-tracking glow (CSS vars updated by JS, cheap) */
.nav-mega-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        340px circle at var(--mx, 50%) var(--my, 0%),
        rgba(129, 55, 255, 0.12),
        transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.nav-item.is-open > .nav-mega .nav-mega-inner::after {
    opacity: 1;
}

.nav-mega--services .nav-mega-inner {
    width: min(90vw, 600px);
}

.nav-mega--phasen .nav-mega-inner {
    width: min(94vw, 660px);
}

/* Header strip: eyebrow + hub overview link */
.nav-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(19, 4, 234, 0.1);
}

.nav-mega-eyebrow {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neon-purple);
}

.nav-mega-hub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--neon-blue);
    text-decoration: none;
    transition: gap var(--transition-normal), color var(--transition-normal);
}

.nav-mega-hub span {
    transition: transform var(--transition-normal);
}

.nav-mega-hub:hover {
    color: var(--neon-purple);
}

.nav-mega-hub:hover span {
    transform: translateX(3px);
}

.nav-mega-hub:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Item grid */
.nav-mega-grid {
    display: grid;
    gap: 0.3rem;
}

.nav-mega-grid--services,
.nav-mega-grid--phasen {
    grid-template-columns: repeat(2, 1fr);
}

/* Single item */
.nav-mega-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0.85rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition-normal);
    /* per-item entrance, staggered while open */
    opacity: 0;
    transform: translateY(8px);
    transition: background var(--transition-normal),
                opacity 0.4s var(--nav-mega-ease),
                transform 0.4s var(--nav-mega-ease);
}

.nav-item.is-open > .nav-mega .nav-mega-item {
    opacity: 1;
    transform: translateY(0);
}

/* stagger using nth-child (covers up to 6 items) */
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(1) { transition-delay: calc(var(--nav-stagger) * 1); }
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(2) { transition-delay: calc(var(--nav-stagger) * 2); }
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(3) { transition-delay: calc(var(--nav-stagger) * 3); }
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(4) { transition-delay: calc(var(--nav-stagger) * 4); }
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(5) { transition-delay: calc(var(--nav-stagger) * 5); }
.nav-item.is-open > .nav-mega .nav-mega-item:nth-child(6) { transition-delay: calc(var(--nav-stagger) * 6); }

.nav-mega-item:hover {
    background: rgba(19, 4, 234, 0.06);
}

.nav-mega-item:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 2px;
    background: rgba(19, 4, 234, 0.06);
}

/* Icon badge (Leistungen) */
.nav-mega-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    color: var(--neon-blue);
    background: linear-gradient(135deg, rgba(19, 4, 234, 0.12), rgba(129, 55, 255, 0.12));
    border: 1px solid rgba(19, 4, 234, 0.12);
    transition: color var(--transition-normal), background var(--transition-normal),
                border-color var(--transition-normal), transform var(--transition-normal);
}

.nav-mega-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Number badge (Projektphasen - sequential roadmap) */
.nav-mega-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--neon-blue);
    background: linear-gradient(135deg, rgba(19, 4, 234, 0.1), rgba(129, 55, 255, 0.1));
    border: 1px solid rgba(19, 4, 234, 0.12);
    transition: color var(--transition-normal), background var(--transition-normal),
                border-color var(--transition-normal), transform var(--transition-normal);
}

.nav-mega-item:hover .nav-mega-icon,
.nav-mega-item:hover .nav-mega-num,
.nav-mega-item:focus-visible .nav-mega-icon,
.nav-mega-item:focus-visible .nav-mega-num {
    color: #fff;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    border-color: transparent;
    transform: translateY(-1px);
}

.nav-mega-text {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.nav-mega-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
    transition: color var(--transition-normal);
}

.nav-mega-item:hover .nav-mega-title,
.nav-mega-item:focus-visible .nav-mega-title {
    color: var(--neon-blue);
}

.nav-mega-desc {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ----- Active mega-panel link (exact page match, set by nav-dropdown.js) -----
   A submenu entry turns blue only on its own page; the hub link only on the
   silo hub itself. Mirrors the hover badge so the current page reads clearly. */
.nav-mega-item[aria-current="page"] {
    background: rgba(19, 4, 234, 0.08);
}

.nav-mega-item[aria-current="page"] .nav-mega-title {
    color: var(--neon-blue);
}

.nav-mega-item[aria-current="page"] .nav-mega-icon,
.nav-mega-item[aria-current="page"] .nav-mega-num {
    color: #fff;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    border-color: transparent;
}

.nav-mega-hub[aria-current="page"] {
    color: var(--neon-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   MOBILE NAV  (≤ 900px)
   Pill collapses to logo + hamburger; links drop into a glass
   panel with accordion sub-menus.
   ============================================================ */
@media (max-width: 900px) {

    /* On mobile the pill spans full width: logo left, hamburger right.
       This gives the absolute .nav-links panel (left:0/right:0) a proper
       full-width anchor instead of inheriting the shrink-to-fit pill width. */
    .navbar {
        width: 95%;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
    }

    .nav-toggle-box {
        position: relative;
        display: block;
        width: 1.25rem;
        height: 0.85rem;
    }

    .nav-toggle-bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform var(--transition-normal), opacity var(--transition-normal), top var(--transition-normal);
    }

    .nav-toggle-bar:nth-child(1) { top: 0; }
    .nav-toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .nav-toggle-bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

    .navbar.is-open .nav-toggle-bar:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .navbar.is-open .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .navbar.is-open .nav-toggle-bar:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    /* The dropdown panel that holds the whole menu */
    .nav-links {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.6rem;
        background: var(--glass-bg);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 1px solid var(--glass-border);
        border-radius: 1.25rem;
        box-shadow: 0 18px 50px rgba(19, 4, 234, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        max-height: calc(100dvh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        transform: translateY(-10px) scale(0.99);
        transform-origin: top center;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-normal),
                    transform 0.35s var(--nav-mega-ease),
                    visibility 0s linear 0.3s;
    }

    .navbar.is-open .nav-links {
        opacity: 1;
        transform: translateY(0) scale(1);
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--transition-normal),
                    transform 0.4s var(--nav-mega-ease),
                    visibility 0s;
    }

    /* hide the desktop pill dividers inside the mobile panel */
    .nav-links .nav-divider {
        display: none;
    }

    .nav-item {
        display: block;
        border-radius: 0.85rem;
    }

    .nav-item:not(:last-child) {
        border-bottom: 1px solid rgba(19, 4, 234, 0.08);
    }

    .nav-link-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;
        /* Lock every top-level row to one height so the plain link row
           (Über Uns) matches the caret rows. The caret is 3rem tall, so the
           group matches it whether or not a caret is present. */
        min-height: 3rem;
    }

    /* Safety net: if a page still has Über Uns as a bare <a> (no .nav-link-group
       wrapper yet), promote it to the same flex row so its vertical padding
       counts and the row height matches the caret rows. Harmless once wrapped. */
    .nav-links .nav-item > a {
        display: flex;
        align-items: center;
        min-height: 3rem;
    }

    /* The three top-level rows share identical type + vertical padding, so the
       plain link (Über Uns - no caret) matches the height and rhythm of the
       caret rows. Structure-based, so it applies whether or not the anchor
       carries the .nav-link class. */
    .nav-links .nav-link-group > a,
    .nav-links .nav-item > a {
        flex: 1;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        padding: 0.95rem 0.85rem;
    }

    /* caret becomes a full-height tap target on the right */
    .nav-caret {
        width: 3rem;
        height: 3rem;
        margin-right: 0.1rem;
        color: var(--neon-blue);
    }

    .nav-caret-icon {
        width: 0.85rem;
        height: 0.85rem;
    }

    /* Accordion panel - static, in-flow, height animated */
    .nav-mega {
        position: static;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s var(--nav-mega-ease);
    }

    .nav-item.is-open > .nav-mega {
        max-height: 70vh;
    }

    .nav-mega-inner {
        width: auto !important;
        background: rgba(19, 4, 234, 0.035);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0.85rem;
        box-shadow: none;
        padding: 0.4rem 0.5rem 0.7rem;
        margin: 0 0.35rem 0.6rem;
    }

    .nav-mega-inner::before,
    .nav-mega-inner::after {
        display: none;
    }

    .nav-mega-head {
        padding: 0.5rem 0.6rem 0.6rem;
        margin-bottom: 0.35rem;
    }

    .nav-mega-grid--services,
    .nav-mega-grid--phasen {
        grid-template-columns: 1fr;
    }

    /* no per-item stagger / transform on mobile (in-flow accordion).
       Descriptions are hidden here, so each row is single-line - center the
       icon/number badge with the title instead of top-aligning it. */
    .nav-mega-item {
        align-items: center;
        opacity: 1;
        transform: none;
        transition: background var(--transition-normal);
        padding: 0.6rem 0.65rem;
        gap: 0.7rem;
    }

    .nav-mega-icon,
    .nav-mega-num {
        width: 2rem;
        height: 2rem;
        border-radius: 0.6rem;
    }

    .nav-mega-icon svg {
        width: 1.05rem;
        height: 1.05rem;
    }

    .nav-mega-num {
        font-size: 0.74rem;
    }

    /* keep mobile accordion compact: titles only */
    .nav-mega-desc {
        display: none;
    }

    .nav-mega-title {
        font-size: 0.92rem;
    }
}

/* On real desktop, never show the hamburger or mobile-only chrome */
@media (min-width: 901px) {
    .nav-toggle {
        display: none;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nav-mega,
    .nav-mega-item,
    .nav-links,
    .nav-caret-icon,
    .nav-toggle-bar {
        transition-duration: 0.01ms !important;
    }

    .nav-item.is-open > .nav-mega .nav-mega-item {
        transition-delay: 0s !important;
        transform: none !important;
    }
}

/* ===== 3/5: home.css ===== */
/* ========== HOME PAGE - IMMERSIVE CORPORATE TECH ========== */

/* ----- Hero - immersive light corporate tech ----- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(7rem, 14vh, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vh, 6rem);
    overflow: hidden;
    background-color: var(--dark-base);
    /*background-color: var(#83a3d8);*/
    isolation: isolate;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 35%, rgba(255, 255, 255, 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 55% 45% at 88% 18%, rgba(129, 55, 255, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 12% 82%, rgba(19, 4, 234, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, transparent 55%, rgba(184, 202, 232, 0.85) 100%);
    pointer-events: none;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 78% 68% at 50% 52%, transparent 30%, rgba(184, 202, 232, 0.42) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 54rem;
    width: 100%;
    color: var(--text-primary);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--neon-purple);
    margin: 0 0 1.25rem;
    padding: 0.45rem 1.1rem;
    background: rgba(19, 4, 234, 0.07);
    border: 1px solid rgba(19, 4, 234, 0.16);
    border-radius: 999px;
}

.hero-breadcrumb {
    margin-bottom: 1.25rem;
    text-align: center;
}

.hero-breadcrumb .breadcrumb-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hero-breadcrumb .breadcrumb-list a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.hero-breadcrumb .breadcrumb-list a:hover,
.hero-breadcrumb .breadcrumb-list a:focus-visible {
    color: var(--neon-blue);
}

.hero-breadcrumb .breadcrumb-list [aria-current="page"] {
    color: var(--neon-blue);
    font-weight: 600;
}

.hero-headline {
    font-size: clamp(2rem, 6.5vw, 4.25rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin: 0 0 1.35rem;
    color: var(--text-primary);
}

.hero-headline .word {
    display: inline-block;
    overflow: hidden;          /* reveal mask - keep it */
    margin-right: 0;
    white-space: nowrap;       /* keep each word's chars together - prevents
                                   mid-word line breaks between .char spans */
    vertical-align: bottom;
    /* Descender breathing room inside the clip mask. The negative margin
       cancels the offset so baseline/layout stay identical, while the
       padding extends the clip box low enough to contain g/y/j/p/q. */
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
}

.hero-headline .char {
    display: inline-block;
    will-change: transform, opacity;
    color: var(--text-primary);
}

.hero-headline .char--space {
    width: 0.28em;
}

.hero-subheadline {
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    line-height: 1.68;
    color: #0a0a1e;
    max-width: 42rem;
    margin: 0 auto 2.25rem;
    font-weight: 800;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.95),
        0 0 10px rgba(248, 251, 255, 0.85),
        0 0 22px rgba(248, 251, 255, 0.65),
        0 1px 2px rgba(255, 255, 255, 0.9);
}

.hero-cta-wrap {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.25rem;
}

.hero-cta-wrap--dual {
    gap: 1rem 1.5rem;
}

.magnetic-btn {
    position: relative;
    will-change: transform;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 999px;
    border: 1px solid rgba(19, 4, 234, 0.22);
    background: rgba(255, 255, 255, 0.55);
    transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal), transform var(--transition-normal);
}

.btn-secondary:hover {
    color: var(--neon-blue);
    border-color: rgba(19, 4, 234, 0.4);
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 3px;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: max(2rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(20, 20, 40, 0.72);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(248, 251, 255, 0.75),
        0 0 16px rgba(248, 251, 255, 0.5),
        0 1px 1px rgba(255, 255, 255, 0.85);
}

.hero-scroll-line {
    width: 1px;
    height: 3rem;
    background: linear-gradient(180deg, var(--neon-purple), transparent);
    animation: scrollLine 2s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ----- Hero page modifiers ----- */
.hero--leistungen .hero-headline {
    font-size: clamp(1.85rem, 5.5vw, 3.75rem);
}

/* "Datenschutzerklärung" es una sola palabra larga sin espacios donde romper:
   el floor fijo de 2rem de .hero-headline no se reduce lo suficiente en
   pantallas pequeñas y provoca desborde. Se mantiene la misma curva 6.5vw
   (idéntica a partir de ~492px de viewport) pero con un mínimo menor para
   que siempre quepa en una sola línea en móviles pequeños. */
.hero--datenschutz .hero-headline {
    font-size: clamp(1.3rem, 6.5vw, 4.25rem);
}

@media (max-width: 640px) {
    .hero-cta-wrap--dual {
        flex-direction: column;
    }

    .btn-secondary,
    .hero-cta-wrap .btn-primary {
        width: 100%;
        max-width: 20rem;
    }

    /* Fix: En heroes con dos botones, el scroll-indicator pasa a flujo normal
       para evitar solape con el btn-secondary apilado */
    .hero:has(.hero-cta-wrap--dual) .hero-scroll-indicator {
        position: static;
        left: auto;
        transform: none;
        margin-top: 1.75rem;
    }
}

/* ----- USP Manifesto ----- */
.us-section {
    position: relative;
    z-index: 3;
    padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4.5rem);
    margin-top: clamp(-6rem, -10vh, -3rem);
}

.us-inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.5rem, 4vw, 3rem);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    box-shadow: 0 10px 36px rgba(19, 4, 234, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06);
}

.us-manifesto {
    --rail: clamp(2.1rem, 5vw, 3.4rem);       /* espacio izq. para la columna vertebral */
    --spine-x: clamp(0.5rem, 1.4vw, 0.85rem); /* centro de la línea desde el borde izq. */
    position: relative;
    margin: 0;
    padding: 0 0 0 var(--rail);
    border: none;
}

/* ----- Columna vertebral (blueprint spine) ----- */
.us-spine {
    position: absolute;
    left: calc(var(--spine-x) - 1px);
    width: 2px;
    top: 0.35em;
    bottom: 0.55em;
    pointer-events: none;
}
.us-spine-track {
    position: absolute;
    inset: 0;
    background: rgba(19, 4, 234, 0.14);
    border-radius: 2px;
}
.us-spine-draw {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    transform-origin: top center;
    background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple));
    box-shadow: 0 0 12px rgba(19, 4, 234, 0.35);
}
.us-spine-cap {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.us-spine-cap--start {
    top: 0;
    width: 9px;
    height: 9px;
    background: var(--glass-bg);
    border: 2px solid var(--neon-blue);
}
.us-spine-cap--end {
    top: auto;
    bottom: -4px;
    transform: translate(-50%, 50%);
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 50% 40%, #fff, var(--neon-purple));
    box-shadow: 0 0 0 4px rgba(129, 55, 255, 0.16), 0 0 18px rgba(129, 55, 255, 0.5);
}

/* ----- 1. Statement: se enciende palabra a palabra con el scroll ----- */
.us-statement {
    font-size: clamp(1.4rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}
.us-word {
    display: inline-block;
    will-change: opacity;
}
.us-word--accent {
    background: linear-gradient(120deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ----- 2. Contraste: lo que NO somos (icono + frase) ----- */
.us-contrast {
    margin: clamp(1.6rem, 3.4vw, 2.4rem) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.us-negation {
    position: relative;
    display: flex;
    align-items: flex-start;
    font-size: clamp(0.98rem, 2vw, 1.18rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    padding: 0.15rem 0;
}
.us-negation-mark {
    position: absolute;
    top: 0.05em;
    left: calc(var(--spine-x) - var(--rail) - 12px); /* centrado exacto sobre la línea */
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--neon-blue);
    display: grid;
    place-items: center;
    background: var(--glass-bg);
    border-radius: 50%;
}
.us-negation-mark svg {
    width: 22px;
    height: 22px;
    display: block;
}
.us-negation-text {
    display: block;
}
.us-rule {
    border: none;
    height: 1px;
    margin: clamp(0.9rem, 2vw, 1.2rem) 0;
    background: linear-gradient(90deg, rgba(19, 4, 234, 0.45), rgba(129, 55, 255, 0.28), transparent);
}

/* ----- 3. Cierre: el payoff, terminal de la línea ----- */
.us-closing {
    font-size: clamp(1.1rem, 2.3vw, 1.42rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}
.us-closing-accent {
    background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.us-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .us-section {
        margin-top: 5vh;
        padding-bottom: clamp(2rem, 5vh, 3rem);
    }
    .us-manifesto {
        --rail: clamp(1.7rem, 7vw, 2.3rem);
        --spine-x: 0.55rem;
    }
    .us-negation-mark { width: 20px; height: 20px; }
    .us-negation-mark svg { width: 18px; height: 18px; }
}

@media (min-width: 768px) {
    .us-section {
        margin-top: clamp(-4.5rem, -7vh, -2.75rem);
        padding: 0 0 clamp(2rem, 4vh, 3rem);
    }

    .us-inner {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
    }

    .us-manifesto {
        --rail: 0;
        --spine-x: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: clamp(1.25rem, 2.8vw, 2.75rem);
        row-gap: clamp(1.15rem, 2vw, 1.65rem);
        padding: 0;
        align-items: center;
    }

    /* Spine horizontal: conecta las tres columnas de izquierda a derecha */
    .us-spine {
        grid-column: 1 / -1;
        grid-row: 1;
        position: relative;
        left: auto;
        width: 100%;
        height: 2px;
        top: auto;
        bottom: auto;
        pointer-events: none;
    }
    .us-spine-draw {
        transform-origin: left center;
        background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
    }
    .us-spine-cap--start {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
    }
    .us-spine-cap--end {
        top: 50%;
        right: 0;
        left: auto;
        bottom: auto;
        transform: translate(50%, -50%);
    }

    .us-statement {
        grid-column: 1;
        grid-row: 2;
        font-size: clamp(1.2rem, 2.1vw, 1.75rem);
        line-height: 1.22;
        align-self: center;
    }

    .us-contrast {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        border-left: 1px solid rgba(19, 4, 234, 0.14);
        border-right: 1px solid rgba(19, 4, 234, 0.14);
        align-self: center;
    }

    .us-negation {
        flex-direction: row;
        align-items: flex-start;
        padding: 0.2rem 0;
        gap: 0.55rem;
    }
    .us-negation-mark {
        position: static;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 0.08em;
    }
    .us-negation-mark svg {
        width: 20px;
        height: 20px;
    }

    .us-rule {
        margin: clamp(0.65rem, 1.4vw, 0.9rem) 0;
        background: linear-gradient(90deg, rgba(19, 4, 234, 0.35), rgba(129, 55, 255, 0.2));
    }

    .us-closing {
        grid-column: 3;
        grid-row: 2;
        font-size: clamp(1rem, 1.85vw, 1.28rem);
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .us-word { opacity: 1 !important; }
    .us-spine-draw { transform: scaleY(1) !important; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
    .us-spine-draw { transform: scaleX(1) !important; }
}

/* ----- Section shared ----- */
.section-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neon-purple);
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 3rem;
    color: var(--text-primary);
}

/* ----- Services horizontal scroll ----- */
.services-section {
    position: relative;
    padding: clamp(4rem, 10vh, 8rem) 0;
    overflow: hidden;
}

.services-header {
    padding: 0 clamp(1.25rem, 5vw, 4rem);
    max-width: 52rem;
    margin-bottom: 3rem;
}

.services-header .section-title {
    margin-bottom: 1rem;
}

.services-header .faq-intro {
    margin-bottom: 0;
}

.services-carousel {
    position: relative;
    overflow: hidden;
}

.services-track {
    display: flex;
    gap: 2rem;
    padding: 0 clamp(1.25rem, 5vw, 4rem) 2rem;
    will-change: transform;
}

.services-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.services-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.services-arrow--prev {
    left: clamp(0.5rem, 2vw, 1.5rem);
}

.services-arrow--next {
    right: clamp(0.5rem, 2vw, 1.5rem);
}

.services-arrow:hover {
    border-color: var(--neon-purple);
    color: var(--neon-purple);
    box-shadow: 0 0 20px rgba(129, 55, 255, 0.25);
}

.services-arrow:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 3px;
}

.services-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.service-card {
    flex: 0 0 clamp(300px, 78vw, 420px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
    box-shadow: 0 10px 36px rgba(19, 4, 234, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06);
}

.service-card:hover {
    border-color: rgba(19, 4, 234, 0.45);
    box-shadow: 0 16px 56px rgba(19, 4, 234, 0.18);
    transform: translateY(-4px);
}

.service-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-card-image img {
    transform: scale(1.06);
}

.service-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--card-overlay) 100%);
}

.service-card-body {
    padding: 1.5rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
}

.service-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal);
}

.service-card-title a:hover {
    color: var(--neon-purple);
}

.service-card-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    flex: 1;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.service-tag {
    padding: 0.3rem 0.7rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    border-radius: 999px;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--neon-blue);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color var(--transition-normal), gap var(--transition-normal);
}

.service-card-link:hover {
    color: var(--neon-purple);
    gap: 0.55rem;
}

.service-card-link:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Mobile: vertical stack - no arrows, reset transform */
@media (max-width: 767px) {
    .services-arrow {
        display: none;
    }

    .services-carousel {
        overflow: visible;
    }

    .services-track {
        flex-direction: column;
        align-items: center;
        gap: clamp(1.25rem, 3vw, 2rem);
        padding-bottom: 0;
        transform: none !important;
    }

    .service-card {
        flex: none;
        width: 100%;
        max-width: 420px;
    }
}

/* ----- Why wisepex ----- */
.why-section {
    padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
    position: relative;
}

.why-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129, 55, 255, 0.4), transparent);
}

.why-header {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 3.5rem;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 960px;
    margin: 0 auto;
}

.why-card {
    position: relative;
    padding: 2rem 1.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 1.25rem;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    box-shadow: 0 10px 36px rgba(19, 4, 234, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06);
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
    opacity: 0.7;
}

.why-card-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(19, 4, 234, 0.2), rgba(129, 55, 255, 0.2));
    color: var(--neon-purple);
    font-size: 1.25rem;
    font-weight: 800;
}

.why-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.why-card-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ----- FAQ ----- */
.faq-section {
    padding: clamp(3rem, 8vh, 6rem) clamp(1.25rem, 5vw, 4rem);
}

.faq-header {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 3rem;
}

.faq-intro {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

.faq-list {
    max-width: 52rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border-radius: 1rem;
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 24px rgba(19, 4, 234, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: border-color var(--transition-normal);
}

.faq-item.active {
    border-color: rgba(129, 55, 255, 0.4);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: clamp(0.92rem, 2vw, 1.05rem);
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition-normal);
}

.faq-question:hover {
    color: var(--neon-blue);
}

.faq-question:focus-visible {
    outline: 2px solid var(--neon-purple);
    outline-offset: -2px;
}

.faq-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    transition: transform 0.35s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: var(--neon-purple);
    border-radius: 1px;
    transition: transform 0.35s ease;
}

.faq-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

.faq-icon::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}

.faq-item.active .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.faq-answer-inner p {
    margin: 0 0 0.5rem;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

/* ----- Pre-footer CTA ----- */
.cta-section {
    padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
    text-align: center;
}

.cta-box {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    border-radius: 2rem;
    background: var(--glass-bg);
    border: 1px solid rgba(129, 55, 255, 0.28);
    box-shadow: 0 12px 40px rgba(19, 4, 234, 0.14), 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 180deg, transparent, rgba(19, 4, 234, 0.08), transparent, rgba(129, 55, 255, 0.08), transparent);
    animation: ctaRotate 12s linear infinite;
    pointer-events: none;
}

@keyframes ctaRotate {
    to { transform: rotate(360deg); }
}

.cta-box-inner {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 2rem;
    color: var(--text-primary);
}

/* ----- GSAP reveal helpers ----- */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
}

/* ----- Anchor target ----- */
.anchor-target {
    display: block;
    position: relative;
    top: -6rem;
    visibility: hidden;
}

/* ── Anti-FOUC: oculta elementos animados hasta que GSAP toma el control ── */
.js-loading .hero-headline,
.js-loading .hero-eyebrow,
.js-loading .hero-breadcrumb,
.js-loading .hero-subheadline,
.js-loading .hero-cta-wrap,
.js-loading .hero-scroll-indicator {
    visibility: hidden;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .js-loading .hero-headline,
    .js-loading .hero-eyebrow,
    .js-loading .hero-breadcrumb,
    .js-loading .hero-subheadline,
    .js-loading .hero-cta-wrap,
    .js-loading .hero-scroll-indicator {
        visibility: visible;
    }
}

/* ===== 4/5: hero-3d.css ===== */
/* ============================================================
   hero-3d.css  ·  HOME - "Digitaler Zwilling" hero
   Carga DESPUÉS de styles.css y home.css (gana en orden).
   Solo afecta a la HOME. No toca el resto del silo.
   ============================================================ */

:root {
    --wpx-blue: #320AFF;          /* azul de marca exacto (sparky) */
    --wpx-blue-soft: #6b5cff;
    --wpx-ink: #0a0f1f;
    --wpx-paper: #e9f0fd;
}

/* ---------- Capa de escenario 3D (absoluta dentro de .hero, scroll unificado) ---------- */
.hero-stage {
    position: absolute;
    inset: 0;
    z-index: 0;                    /* sobre .tunnel-bg (-1), bajo el contenido (2) */
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout paint style;
}

.hero-stage > * {
    position: absolute;
    inset: 0;
    margin: auto;
}

#hero-canvas {
    width: 100%;
    height: 100%;
    opacity: 1;
    display: block;
}

/* Poster blueprint: ES el elemento LCP y el fallback de reduced-motion */
.hero-poster-img {
    width: min(1120px, 94vw);
    height: auto;
    max-height: 88vh;
    object-fit: contain;
    transform: translateY(5vh);
    opacity: 1;
    filter: drop-shadow(0 24px 60px rgba(50, 10, 255, 0.10));
}

@media (min-width: 769px) {
    .hero-stage > picture {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Construcción desde el suelo: primer frame = solo base visible */
.hero-poster-img,
#hero-canvas,
#hero-video {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display: none;
}

/* Fallback CSS si GSAP no está disponible */
@keyframes heroBuildReveal {
    from {
        clip-path: inset(100% 0 0 0);
        -webkit-clip-path: inset(100% 0 0 0);
    }
    to {
        clip-path: inset(0% 0 0 0);
        -webkit-clip-path: inset(0% 0 0 0);
    }
}

.hero-build-reveal {
    animation: heroBuildReveal 2.1s cubic-bezier(.19, .8, .22, 1) forwards;
}

.hero-eyebrow {
    /* Animation handled by GSAP in main.js; CSS is fallback only */
}

/* Fallback: show eyebrow statically if GSAP never ran */
@supports not (animation-timeline: scroll()) {
    /* intentionally empty - GSAP governs this */
}

/* If js-loading is still present after 3 s, something failed - reveal all */
.hero-eyebrow { transition: opacity 0.4s ease; }

/* ---------- ENTRANCE ANIMATIONS ---------- */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    /* Mobile poster (hero-poster-mobile.svg / hero-poster-mobile.svg).
       Both share the viewBox "398 0 780 860"; the building towers run from
       y≈106 (apex) to y≈678 (base), so the building's centre sits at ≈46%
       of the SVG height. We size by HEIGHT (stable across phone aspect
       ratios) and anchor that 46% point to the centre of the viewport,
       instead of centring the whole SVG box - otherwise the empty sky band
       above the towers and the ground plane below push the building high.
       The building now sits behind the hero title/subtitle, centred. */
    .hero-poster-img {
        width: auto;
        height: 64vh;
        max-height: none;
        max-width: none;
        inset: auto;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-11%, 20%);
    }
}

/* ---------- Accesibilidad: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    #hero-canvas, #hero-video { display: none !important; }
    .hero-poster-img,
    #hero-canvas,
    #hero-video {
        opacity: 1 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        animation: none !important;
    }
    .hero-eyebrow { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===== 5/5: scene-3d.css ===== */
/* ============================================================
   components/scene-3d/scene-3d.css · wisepex
   ------------------------------------------------------------
   Styles for the premium interaction layer. Load this LAST (after
   styles.css, the page CSS and hero-3d.css) so its tie-break rules
   win over the legacy :hover transforms on cards.

   Brand tokens are inherited from styles.css / hero-3d.css; only the
   few it needs locally are restated.
   ============================================================ */

:root {
  --wpx-blue-rgb: 50, 10, 255;     /* #320AFF */
  --wpx-accent-rgb: 107, 92, 255;  /* #6b5cff */
}

/* ------------------------------------------------------------
   1. Scroll-reveal initial state
   Only applied while JS is confirmed (html.js-motion). If the
   motion module fails, the class is removed and content shows.
   ------------------------------------------------------------ */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform, filter;
}

/* Once a reveal has finished, settle() clears the inline styles Motion
   left behind and adds .is-revealed. This rule keeps the element visible
   so it doesn't fall back to the hidden initial state above, while
   leaving transform free for the class-based 3D tilt to take over. */
.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* ------------------------------------------------------------
   2. Spotlight glow
   A cursor-following radial highlight painted as an overlay. The
   position comes from --spot-x / --spot-y (set in spotlight.js);
   visibility from --spot-opacity. pointer-events:none so it never
   eats clicks. Composited (opacity/transform only) -> cheap.
   ------------------------------------------------------------ */
.has-spotlight {
  position: relative;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-opacity: 0;
  --spot-size: 26rem;
}
.has-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: var(--spot-opacity);
  transition: opacity 0.35s ease;
  background: radial-gradient(
    var(--spot-size) var(--spot-size) at var(--spot-x) var(--spot-y),
    rgba(var(--wpx-accent-rgb), 0.16),
    rgba(var(--wpx-blue-rgb), 0.06) 40%,
    transparent 68%
  );
}

/* Keep card content above the glow overlay. */
.feature-card.has-spotlight > *,
.lebenszyklus-card.has-spotlight > *,
.content-block-kontakt.has-spotlight > * { position: relative; z-index: 4; }

/* ------------------------------------------------------------
   3. 3D tilt
   Cards carrying data-tilt rotate slightly toward the cursor. The
   combined .show.is-tilting selector matches the legacy
   .show:hover specificity (0,3,0); loaded last, it wins the tie.
   transform-style preserves depth for nested imagery.
   ------------------------------------------------------------ */
.feature-card[data-tilt],
.lebenszyklus-card[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.19, 0.8, 0.22, 1),
              box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.feature-card.show.is-tilting,
.lebenszyklus-card.show.is-tilting,
.feature-card.is-tilting,
.lebenszyklus-card.is-tilting {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
  box-shadow: 0 30px 60px rgba(var(--wpx-blue-rgb), 0.16),
              0 12px 24px rgba(0, 0, 0, 0.12);
  z-index: 5;
}
/* Lift the imagery a touch on the Z axis for parallax-in-card depth. */
.feature-card.is-tilting .feature-image-container,
.lebenszyklus-card.is-tilting .lebenszyklus-image-container {
  transform: translateZ(34px);
  transition: transform 0.4s cubic-bezier(0.19, 0.8, 0.22, 1);
}
.feature-card[data-tilt] .feature-image-container,
.lebenszyklus-card[data-tilt] .lebenszyklus-image-container {
  transition: transform 0.4s cubic-bezier(0.19, 0.8, 0.22, 1);
  transform: translateZ(0);
}

/* ------------------------------------------------------------
   4. Magnetic CTA
   The button eases toward the cursor (--mag-x / --mag-y from
   spotlight.js). Layered with the existing :hover lift via a CSS
   variable so the two don't clobber each other.
   ------------------------------------------------------------ */
[data-magnetic] {
  --mag-x: 0px;
  --mag-y: 0px;
  transform: translate(var(--mag-x), var(--mag-y));
  transition: transform 0.25s cubic-bezier(0.19, 0.8, 0.22, 1),
              box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
[data-magnetic]:hover {
  transform: translate(var(--mag-x), calc(var(--mag-y) - 3px));
}

/* ------------------------------------------------------------
   5. Reusable 3D accent card (scene-3d.js host)
   ------------------------------------------------------------ */
.scene-3d-card {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.scene-3d-card__content {
  flex: 1;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.scene-3d-card__eyebrow {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wpx-blue, #320aff);
  margin: 0;
}
.scene-3d-card__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--wpx-ink, #0a0f1f);
  margin: 0;
}
.scene-3d-card__text {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: #2a3142;
  margin: 0;
  max-width: 42ch;
}
.scene-3d-card__canvas {
  flex: 1;
  position: relative;
  min-height: 340px;
  /* CSS poster so the block is never empty before/without WebGL */
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(var(--wpx-accent-rgb), 0.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(var(--wpx-blue-rgb), 0.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(var(--wpx-blue-rgb), 0.06) 0 1px, transparent 1px 26px);
}
.scene-3d-card__canvas canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 860px) {
  .scene-3d-card { flex-direction: column; gap: 0; }
  .scene-3d-card__canvas { min-height: 300px; order: -1; }
}

/* ------------------------------------------------------------
   6. Accessibility - reduced motion neutralises the lot
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .has-spotlight::after { display: none; }
  .feature-card.is-tilting,
  .lebenszyklus-card.is-tilting { transform: none; }
  [data-magnetic] { transform: none; }
}