/* Custom scrollbar matching modern tech authority */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FAFAFA;
        }

        ::-webkit-scrollbar-thumb {
            background: #E7E6E6;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #0193DF;
        }

        ::selection {
            background-color: rgba(1, 147, 223, 0.15);
            color: #101C32;
        }

        body {
            background-color: #FAFAFA;
            color: #101C32;
            scrollbar-gutter: stable;
        }

        /* Modern Utilities */
        .premium-transition {
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes breathing-glow {

            0%,
            100% {
                opacity: 0.6;
                transform: scale(1);
            }

            50% {
                opacity: 0.85;
                transform: scale(1.06);
            }
        }

        .animate-breathing {
            animation: breathing-glow 15s ease-in-out infinite;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Subtle Neon Sign border glow for Section 5 Kacheln */
        .neon-card-amber {
            border-color: rgba(255, 192, 0, 0.15) !important;
            box-shadow: 0 0 15px rgba(255, 192, 0, 0.04);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-card-amber:hover {
            border-color: rgba(255, 192, 0, 0.5) !important;
            box-shadow: 0 0 20px rgba(255, 192, 0, 0.18), inset 0 0 10px rgba(255, 192, 0, 0.05) !important;
        }

        .neon-card-blue {
            border-color: rgba(1, 147, 223, 0.2) !important;
            box-shadow: 0 0 15px rgba(1, 147, 223, 0.05);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-card-blue:hover {
            border-color: rgba(1, 147, 223, 0.6) !important;
            box-shadow: 0 0 20px rgba(1, 147, 223, 0.22), inset 0 0 10px rgba(1, 147, 223, 0.05) !important;
        }

        .neon-card-white {
            border-color: rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.02);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-card-white:hover {
            border-color: rgba(255, 255, 255, 0.3) !important;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.08) !important;
        }

        /* Subtle Neon Sign button glow on hover */
        .neon-btn-glow {
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-btn-glow:hover {
            box-shadow: 0 0 15px rgba(1, 147, 223, 0.35), 0 0 25px rgba(1, 147, 223, 0.15) !important;
        }

        .glow-blue {
            position: relative;
        }

        .glow-blue::after {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(1, 147, 223, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
            z-index: -1;
            pointer-events: none;
        }

        /* Static Hero & Stats Variables */
        :root {
            --hero-bg: #0B1322;
            --hero-text: #D1D5D9;
            --hero-heading: #FFFFFF;
            --hero-border: rgba(255, 255, 255, 0.1);
            --hero-card-bg: rgba(255, 255, 255, 0.12);
            --hero-card-border: rgba(255, 255, 255, 0.20);
            --hero-card-text: #FFFFFF;
            --hero-secondary-text: #FFFFFF;
            --hero-secondary-border: rgba(255, 255, 255, 0.3);
            --stat-badge-opacity: 0.06;
            --stat-number-color: #0193DF;
            --stat-label-color: #101C32;
        }

        /* Navbar Dark/Light state cascades */
        .nav-dark {
            background-color: rgba(11, 19, 34, 0.85);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: none;
        }

        .nav-dark a:not(#nav-cta-button) {
            color: rgba(250, 250, 250, 0.75) !important;
        }

        .nav-dark a:not(#nav-cta-button):hover {
            color: #0193DF !important;
        }

        .nav-dark #nav-brand-logo span:first-child {
            color: #FAFAFA !important;
        }

        .nav-dark #mobile-menu-toggle {
            color: #FAFAFA !important;
        }

        .nav-light {
            background-color: rgba(255, 255, 255, 0.95);
            border-color: rgba(231, 230, 230, 0.9);
            box-shadow: 0 4px 30px rgba(16, 28, 50, 0.06);
        }

        .nav-light a:not(#nav-cta-button) {
            color: rgba(16, 28, 50, 0.75) !important;
        }

        .nav-light a:not(#nav-cta-button):hover {
            color: #0193DF !important;
        }

        .nav-light #nav-brand-logo span:first-child {
            color: #101C32 !important;
        }

        .nav-light #mobile-menu-toggle {
            color: #101C32 !important;
        }

        #main-nav.nav-dark #mobile-menu {
            background-color: rgba(11, 19, 34, 0.95) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        #main-nav.nav-dark #mobile-menu a:not(#nav-cta-button) {
            color: rgba(250, 250, 250, 0.85) !important;
        }

        #main-nav.nav-light #mobile-menu {
            background-color: rgba(255, 255, 255, 0.98) !important;
            border-color: rgba(231, 230, 230, 0.9) !important;
        }

        #main-nav.nav-light #mobile-menu a:not(#nav-cta-button) {
            color: rgba(16, 28, 50, 0.85) !important;
        }

        /* Expand animation for native accordion details */
        details[name="trainings-accordion"] {
            transition: all 0.3s ease-out;
        }

        details[name="trainings-accordion"] summary::-webkit-details-marker {
            display: none;
        }

        /* Rotate chevron on details open */
        details[open] .rotate-icon {
            transform: rotate(180deg);
        }

        .brand-aileen {
            color: inherit;
            font-weight: inherit;
        }

        .brand-aileen .ai-part {
            font-weight: inherit;
            color: inherit;
        }

        .brand-aileen .brand-i {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-weight: inherit;
            color: inherit;
        }

        .brand-aileen .leen-part {
            font-weight: inherit;
            color: inherit;
        }

        /* Dropdown style overrides (Technical Japandi Look) */
        #main-nav.nav-dark .dropdown-menu {
            background-color: #0B1322 !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
        }

        #main-nav.nav-dark .dropdown-menu a {
            color: rgba(231, 230, 230, 0.8) !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        #main-nav.nav-dark .dropdown-menu a:hover {
            color: #FAFAFA !important;
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        #main-nav.nav-light .dropdown-menu {
            background-color: #FFFFFF !important;
            border: 1px solid rgba(16, 28, 50, 0.08) !important;
            box-shadow: 0 10px 30px -10px rgba(16, 28, 50, 0.1) !important;
        }

        #main-nav.nav-light .dropdown-menu a {
            color: rgba(16, 28, 50, 0.75) !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        #main-nav.nav-light .dropdown-menu a:hover {
            color: #0193DF !important;
            background-color: rgba(1, 147, 223, 0.05) !important;
        }

        /* Scroll-triggered slide-in & stagger for the solution card */
        .solution-card-trigger {
            opacity: 0;
            transform: translateY(65px) scale(0.97);
            transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        .solution-card-trigger .solution-benefit-item {
            opacity: 0;
            transform: translateY(35px);
            transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .solution-card-trigger.is-visible .solution-benefit-item {
            opacity: 1;
            transform: translateY(0);
        }

        .solution-card-trigger.is-visible .solution-benefit-item:nth-child(1) {
            transition-delay: 0.2s;
        }

        .solution-card-trigger.is-visible .solution-benefit-item:nth-child(2) {
            transition-delay: 0.4s;
        }

        .solution-card-trigger.is-visible .solution-benefit-item:nth-child(3) {
            transition-delay: 0.6s;
        }

        .solution-glow-1,
        .solution-glow-2 {
            transform: scale(0.4);
            opacity: 0.1;
            transition: transform 3.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 3.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .solution-card-trigger.is-visible .solution-glow-1 {
            transform: scale(1.2);
            opacity: 1;
        }

        .solution-card-trigger.is-visible .solution-glow-2 {
            transform: scale(1.2);
            opacity: 1;
        }

        /* Whitepaper Modal styles */
        #whitepaper-modal::backdrop {
            background: rgba(11, 19, 34, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        #whitepaper-modal {
            max-width: 90%;
            width: 500px;
            margin: auto;
        }

        /* Layer 1: Subtle Blur & Tint (starting mid-height) */
        .privacy-blur-layer-1 {
            border-radius: 2.5rem;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 1) 70%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 1) 70%);
            background: linear-gradient(to bottom, rgba(16, 28, 50, 0) 48%, rgba(16, 28, 50, 0.2) 100%);
        }

        /* Layer 2: Medium Blur & Tint (starting lower) */
        .privacy-blur-layer-2 {
            border-radius: 2.5rem;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 1) 80%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 1) 80%);
            background: linear-gradient(to bottom, rgba(16, 28, 50, 0) 62%, rgba(16, 28, 50, 0.5) 100%);
        }

        /* Layer 3: Cinematic Strong Blur & Solid Tint (at the bottom) */
        .privacy-blur-layer-3 {
            border-radius: 2.5rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 95%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 95%);
            background: linear-gradient(to bottom, rgba(16, 28, 50, 0) 75%, rgba(16, 28, 50, 0.95) 100%);
        }

        /* Scroll-driven Reveal effects for Bento cards (Section 3) */
        @keyframes reveal-up {
            from {
                opacity: 0;
                transform: translateY(60px) scale(0.97);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            @supports ((animation-timeline: view()) and (animation-range: entry)) {
                .reveal-card {
                    animation: reveal-up auto linear both;
                    animation-timeline: view(block);
                    animation-range: entry 10% cover 35%;
                }

                .reveal-card-stagger-1 {
                    animation: reveal-up auto linear both;
                    animation-timeline: view(block);
                    animation-range: entry 5% cover 25%;
                }
            }
        }

        /* Fallback for browsers that do not support scroll-driven animations */
        @supports not ((animation-timeline: view()) and (animation-range: entry)) {

            .reveal-card,
            .reveal-card-stagger-1,
            .reveal-card-stagger-2,
            .reveal-card-stagger-3 {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
                transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .reveal-card-stagger-2 {
                transition-delay: 350ms;
            }

            .reveal-card-stagger-3 {
                transition-delay: 700ms;
            }

            .reveal-card.is-revealed,
            .reveal-card-stagger-1.is-revealed,
            .reveal-card-stagger-2.is-revealed,
            .reveal-card-stagger-3.is-revealed {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .solution-card-trigger,
            .solution-card-trigger .solution-benefit-item,
            .solution-glow-1,
            .solution-glow-2,
            .reveal-card,
            .reveal-card-stagger-1,
            .reveal-card-stagger-2,
            .reveal-card-stagger-3 {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }
        }

        /* --- Scroll Pinning / Stacked Card Reveal for Section 4 --- */
        @media (min-width: 768px) {
            #solution-scroll-track {
                position: relative;
                height: 200vh;
            }

            #solution-sticky-container {
                position: sticky;
                top: 15vh;
                height: 70vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            /* TEMPORARILY DISABLED for testing – reveal-done used to collapse the track */
            /* #solution-scroll-track.reveal-done {
                height: auto !important;
            }
            #solution-sticky-container.reveal-done {
                position: relative !important;
                top: 0 !important;
                height: auto !important;
            } */

            /* Initial state for JS-driven sequential entrance */
            #solution-sticky-container .reveal-card-stagger-2,
            #solution-sticky-container .reveal-card-stagger-3 {
                opacity: 0;
                transform: translateY(100vh);
                will-change: transform, opacity;
            }
        }

        /* Dynamic Scroll Background & Calculator styling for Section 4 */
        :root {
            --methode-bg: #101C32;
            /* default brandnavy */
            --roi-bg-from: #16243f;
            --roi-bg-to: #1e345e;
            --roi-text: #ffffff;
            --roi-text-muted: #d4d4d4;
            --roi-border: rgba(255, 255, 255, 0.1);
            --roi-slider-bg: rgba(255, 255, 255, 0.1);
            --roi-result-bg: rgba(255, 255, 255, 0.05);
        }

        #methode {
            background-color: var(--methode-bg) !important;
            transition: background-color 0.1s ease-out;
        }

        #roi-calculator-card {
            background: linear-gradient(to right, var(--roi-bg-from), var(--roi-bg-to)) !important;
            border-color: var(--roi-border) !important;
            color: var(--roi-text) !important;
            transition: background 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, box-shadow 0.1s ease-out;
        }

        .roi-text-main {
            color: var(--roi-text) !important;
            transition: color 0.1s ease-out;
        }

        .roi-text-muted {
            color: var(--roi-text-muted) !important;
            transition: color 0.1s ease-out;
        }

        #transfer-insert-card {
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            pointer-events: none;
            will-change: opacity, transform;
            transition: opacity 0.1s ease-out, transform 0.1s ease-out;
        }

        @media (max-width: 767px) {
            #transfer-insert-card {
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
            }
        }

        .testimonial-brand-logo {
            height: 1.5rem !important;
            width: auto !important;
            max-width: 6.5rem !important;
            object-fit: contain !important;
            filter: grayscale(100%) brightness(1.6) contrast(0.4) opacity(0.65);
            transition: all 0.3s ease;
        }

        .group:hover .testimonial-brand-logo {
            filter: grayscale(100%) brightness(1.2) contrast(0.7) opacity(0.9);
        }

        /* --- Problem Section (Section 3) SVG Animations --- */

        /* Card 1: Verification Debt (Funnel & Floating Pages) */
        @keyframes float-page-1 {
            0%, 100% {
                transform: translate(67px, 9px) rotate(-15deg);
            }
            50% {
                transform: translate(67px, 6px) rotate(-12deg);
            }
        }

        @keyframes float-page-2 {
            0%, 100% {
                transform: translate(92px, 1px) rotate(5deg);
            }
            50% {
                transform: translate(92px, -3px) rotate(8deg);
            }
        }

        @keyframes float-page-3 {
            0%, 100% {
                transform: translate(117px, 11px) rotate(15deg);
            }
            50% {
                transform: translate(117px, 8px) rotate(12deg);
            }
        }

        @keyframes jam-shake-1 {
            0%, 100% {
                transform: translate(76.5px, 33px) rotate(-10deg);
            }
            50% {
                transform: translate(77px, 32.5px) rotate(-9deg);
            }
        }

        @keyframes jam-shake-2 {
            0%, 100% {
                transform: translate(108.5px, 31px) rotate(12deg);
            }
            50% {
                transform: translate(108px, 31.5px) rotate(13deg);
            }
        }

        @keyframes neck-jam {
            0%, 100% {
                transform: translate(93px, 55px) rotate(2deg);
            }
            50% {
                transform: translate(93.5px, 55.2px) rotate(3deg);
            }
        }

        .page-f1 {
            animation: float-page-1 4s ease-in-out infinite;
            transform-origin: 75px 20px;
        }

        .page-f2 {
            animation: float-page-2 5s ease-in-out infinite;
            transform-origin: 100px 12px;
        }

        .page-f3 {
            animation: float-page-3 4.5s ease-in-out infinite;
            transform-origin: 125px 22px;
        }

        .page-j1 {
            animation: jam-shake-1 3s ease-in-out infinite;
            transform-origin: 84px 44px;
        }

        .page-j2 {
            animation: jam-shake-2 3.5s ease-in-out infinite;
            transform-origin: 116px 42px;
        }

        .page-jn {
            animation: neck-jam 2.5s ease-in-out infinite;
            transform-origin: 100px 64px;
        }

        /* Card 2: Infinite Capability Trap (Rabbit Holes Line & Point Paths) */
        @keyframes draw-yellow-line {
            0% {
                stroke-dashoffset: 100;
            }
            37.5%, 100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes move-yellow-point {
            0% {
                offset-distance: 0%;
                opacity: 1;
            }
            37.5%, 100% {
                offset-distance: 100%;
                opacity: 1;
            }
        }

        @keyframes draw-blue-line {
            0%, 43.75% {
                stroke-dashoffset: 100;
                opacity: 0;
            }
            44% {
                opacity: 1;
            }
            81.25%, 100% {
                stroke-dashoffset: 0;
                opacity: 1;
            }
        }

        @keyframes move-blue-point {
            0%, 43.75% {
                offset-distance: 0%;
                opacity: 0;
            }
            44% {
                opacity: 1;
            }
            81.25%, 100% {
                offset-distance: 100%;
                opacity: 1;
            }
        }

        .path-yellow {
            stroke-dasharray: 100;
            animation: draw-yellow-line 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        .point-yellow {
            offset-path: path('M 35,60 L 80,60 C 95,60 105,50 105,38 C 105,22 85,15 70,25 C 55,35 55,55 75,60 C 90,65 95,50 85,42 C 75,35 72,45 80,48 C 83,50 85,46 80,44');
            animation: move-yellow-point 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        .path-blue {
            stroke-dasharray: 100;
            animation: draw-blue-line 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        .point-blue {
            offset-path: path('M 35,60 L 95,60 C 110,60 120,70 120,82 C 120,98 100,105 85,95 C 70,85 70,65 90,60 C 105,55 110,70 100,78 C 90,85 87,75 95,72 C 98,70 100,74 95,76');
            animation: move-blue-point 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        /* Card 3: Attention Fragmentation (Popup notifications) */
        @keyframes pop-in {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }
            5% {
                transform: scale(1.02);
                opacity: 1;
            }
            7% {
                transform: scale(1);
                opacity: 1;
            }
            45% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(0.95);
                opacity: 0;
            }
            100% {
                transform: scale(0.95);
                opacity: 0;
            }
        }

        .pop-1 {
            animation: pop-in 10s ease-in-out infinite;
            animation-delay: 0.5s;
            transform-origin: 25px 8px;
            opacity: 0;
        }

        .pop-2 {
            animation: pop-in 10s ease-in-out infinite;
            animation-delay: 2.5s;
            transform-origin: 25px 8px;
            opacity: 0;
        }

        .pop-3 {
            animation: pop-in 10s ease-in-out infinite;
            animation-delay: 4.5s;
            transform-origin: 25px 8px;
            opacity: 0;
        }