:root {
            --bg-deep: #020205;
            --electric-blue: #2979FF;
            --electric-purple: #7C4DFF;
            --cyan-glow: #00E5FF;
            --neon-pink: #FF4081;
            --accent-orange: #FF9100;
            --glass-surface: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-highlight: rgba(255, 255, 255, 0.15)
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Inter', sans-serif;
            color: #fff;
            background: var(--bg-deep);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased
        }

        /* === PCB BACKGROUND === */
        .pcb-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden
        }

        .pcb-bg svg {
            width: 100%;
            height: 100%;
            opacity: .12
        }

        .pcb-trace {
            fill: none;
            stroke: var(--cyan-glow);
            stroke-width: 1.5;
            stroke-linecap: round
        }

        .pcb-node {
            fill: var(--electric-blue);
            opacity: .4
        }

        .pcb-pulse {
            fill: none;
            stroke: var(--cyan-glow);
            stroke-width: 3;
            stroke-linecap: round;
            filter: drop-shadow(0 0 6px var(--cyan-glow));
            stroke-dasharray: 40 500;
            animation: pulsePath 6s linear infinite
        }

        .pcb-pulse-2 {
            animation-delay: -2s;
            stroke: var(--electric-blue);
            filter: drop-shadow(0 0 6px var(--electric-blue))
        }

        .pcb-pulse-3 {
            animation-delay: -4s;
            stroke: var(--electric-purple);
            filter: drop-shadow(0 0 6px var(--electric-purple))
        }

        @keyframes pulsePath {
            to {
                stroke-dashoffset: -540
            }
        }

        /* === BLOBS === */
        .ambient {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: .35;
            animation: moveBlob 25s infinite alternate
        }

        .blob-1 {
            width: 600px;
            height: 600px;
            background: var(--electric-blue);
            top: -150px;
            left: -200px
        }

        .blob-2 {
            width: 500px;
            height: 500px;
            background: var(--electric-purple);
            bottom: -100px;
            right: -150px;
            animation-duration: 30s
        }

        .blob-3 {
            width: 350px;
            height: 350px;
            background: var(--cyan-glow);
            top: 50%;
            left: 60%;
            opacity: .2;
            animation-duration: 20s
        }

        @keyframes moveBlob {
            to {
                transform: translate(80px, 40px) scale(1.1)
            }
        }

        /* === GRID === */
        .grid-overlay {
            position: fixed;
            inset: 0;
            background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
            background-size: 60px 60px;
            z-index: 0;
            pointer-events: none
        }

        /* === LAYOUT === */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 10
        }

        section {
            padding: 120px 0;
            position: relative;
            z-index: 1
        }

        /* === NAV === */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: rgba(2, 2, 5, .85);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--glass-border)
        }

        .nav-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px
        }

        .nav-brand {
            font-family: 'Outfit', sans-serif;
            font-weight: 900;
            font-size: 1.5rem;
            color: #fff;
            text-decoration: none;
            letter-spacing: -1px;
            position: relative
        }

        .nav-brand-tag {
            font-size: .55em;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--cyan-glow);
            vertical-align: super;
            margin-left: 6px
        }

        .nav-brand::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--cyan-glow), transparent)
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
            list-style: none
        }

        .nav-links a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
            font-size: .9rem;
            font-weight: 500;
            transition: color .2s
        }

        .nav-links a:hover {
            color: #fff
        }

        .nav-cta {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-purple));
            color: #fff !important;
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 700 !important;
            box-shadow: 0 2px 16px rgba(41, 121, 255, .3);
            transition: all .3s !important
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 24px rgba(41, 121, 255, .5)
        }

        .nav-mobile {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer
        }

        /* === HERO === */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 72px
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 229, 255, .08);
            border: 1px solid rgba(0, 229, 255, .2);
            color: var(--cyan-glow);
            font-size: .8rem;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 50px;
            margin-bottom: 24px
        }

        .hero-badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--cyan-glow);
            animation: pulse 2s infinite
        }

        @keyframes pulse {
            50% {
                opacity: .3
            }
        }

        .hero h1 {
            font-family: 'Outfit', sans-serif;
            font-weight: 900;
            font-size: clamp(2.8rem, 5vw, 4.5rem);
            line-height: 1;
            letter-spacing: -2px;
            margin-bottom: 24px
        }

        .hero h1 .grad {
            background: linear-gradient(135deg, var(--cyan-glow), var(--electric-blue));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 20px rgba(41, 121, 255, .4))
        }

        .hero-sub {
            font-size: 1.15rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 40px;
            max-width: 520px
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap
        }

        /* === BUTTONS === */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 16px 32px;
            border-radius: 50px;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all .3s;
            text-decoration: none
        }

        .btn-primary {
            background: #fff;
            color: #000
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(255, 255, 255, .2)
        }

        .btn-glass {
            background: rgba(255, 255, 255, .08);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .15);
            backdrop-filter: blur(10px)
        }

        .btn-glass:hover {
            background: var(--electric-blue);
            border-color: var(--electric-blue);
            box-shadow: 0 0 30px rgba(41, 121, 255, .3)
        }

        .btn-blue {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-purple));
            color: #fff;
            box-shadow: 0 4px 20px rgba(41, 121, 255, .3)
        }

        .btn-blue:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 32px rgba(41, 121, 255, .5)
        }

        /* === FLOATING CARDS === */
        .hero-visual {
            position: relative
        }

        .float-card {
            background: rgba(20, 20, 30, .6);
            border: 1px solid var(--glass-border);
            border-top: 1px solid var(--glass-highlight);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
            transition: all .5s
        }

        .float-card-1 {
            width: 300px;
            max-width: 100%;
            transform: rotate(-3deg);
            box-sizing: border-box;
        }

        .float-card-2 {
            width: 280px;
            margin-top: 20px;
            margin-left: 60px;
            transform: rotate(4deg);
            background: linear-gradient(135deg, rgba(41, 121, 255, .08), transparent)
        }

        .float-card h4 {
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .float-card p {
            font-size: .85rem;
            color: #aaa
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--cyan-glow);
            box-shadow: 0 0 10px var(--cyan-glow)
        }

        .code-block {
            font-family: 'JetBrains Mono', monospace;
            font-size: .75rem;
            color: #aaa;
            background: rgba(0, 0, 0, .3);
            padding: 10px;
            border-radius: 8px;
            margin-top: 8px
        }

        /* === SERVICES === */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 60px
        }

        .service-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
            border: 1px solid var(--glass-border);
            padding: 36px;
            border-radius: 24px;
            transition: all .4s;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        .service-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(41, 121, 255, .08), transparent);
            opacity: 0;
            transition: opacity .4s
        }

        .service-card:hover {
            transform: translateY(-8px);
            border-color: var(--electric-blue)
        }

        .service-card:hover::before {
            opacity: 1
        }

        .service-card .icon {
            font-size: 2rem;
            margin-bottom: 16px;
            position: relative;
            z-index: 1
        }

        .service-card h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 10px;
            position: relative;
            z-index: 1
        }

        .service-card p {
            font-size: .9rem;
            color: rgba(255, 255, 255, .5);
            line-height: 1.6;
            position: relative;
            z-index: 1;
            flex-grow: 1
        }

        .service-card .price-tag {
            display: inline-block;
            margin-top: 16px;
            font-family: 'JetBrains Mono', monospace;
            font-size: .8rem;
            color: var(--cyan-glow);
            background: rgba(0, 229, 255, .08);
            padding: 6px 14px;
            border-radius: 8px;
            border: 1px solid rgba(0, 229, 255, .15);
            position: relative;
            z-index: 1
        }

        /* === SERVICE VISUALS === */
        .service-visual {
            position: relative;
            z-index: 1;
            height: 180px;
            margin-bottom: 20px;
            border-radius: 16px;
            overflow: hidden;
            background: rgba(0, 0, 0, .25);
            border: 1px solid rgba(255, 255, 255, .05)
        }

        /* -- KI-Audit: Factory + Scanner -- */
        .visual-audit {
            position: relative
        }

        .visual-audit svg {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0
        }

        .audit-scanner {
            position: absolute;
            top: -50px; 
            left: 0; 
            right: 0; 
            bottom: 0;
            margin: auto;
            width: 280px; 
            height: 180px;
            border-top: 2px solid var(--cyan-glow);
            background: linear-gradient(180deg, rgba(0,229,255,0.2) 0%, rgba(0,229,255,0) 100%);
            animation: auditScan 4s ease-in-out infinite alternate;
            z-index: 10;
            pointer-events: none;
            mix-blend-mode: screen;
            transform-origin: center right;
        }

        .audit-scanner::after {
            display: none;
        }

        @keyframes auditScan {
            0% { transform: translateY(-30px); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(180px); opacity: 0; }
        }

        .factory-line {
            fill: none;
            stroke: var(--electric-blue);
            stroke-width: 1;
            opacity: .55
        }

        .factory-line-bright {
            fill: none;
            stroke: var(--electric-blue);
            stroke-width: 1.8;
            opacity: .9
        }

        .factory-fill {
            fill: rgba(41, 121, 255, .06)
        }

        /* 3D rotate wrapper */
        .audit-3d-wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            perspective: 600px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .audit-3d-inner {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: factory3d 8s ease-in-out infinite
        }

        .audit-3d-inner svg {
            width: 100%;
            height: 100%
        }

        @keyframes factory3d {
            0% {
                transform: rotateY(-12deg) rotateX(4deg)
            }

            25% {
                transform: rotateY(4deg) rotateX(2deg)
            }

            50% {
                transform: rotateY(14deg) rotateX(-3deg)
            }

            75% {
                transform: rotateY(2deg) rotateX(3deg)
            }

            100% {
                transform: rotateY(-12deg) rotateX(4deg)
            }
        }

        /* -- Website Transform Animation -- */
        .visual-website {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .web-state {
            position: absolute;
            inset: 12px;
            border-radius: 10px;
            padding: 16px;
            transition: all .8s cubic-bezier(.4, 0, .2, 1);
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .web-old {
            background: #f0f0f0;
            animation: webMorph 6s ease-in-out infinite
        }

        .web-old .web-nav {
            height: 8px;
            background: #ccc;
            border-radius: 2px;
            margin-bottom: 10px;
            width: 60%
        }

        .web-old .web-title {
            font-family: 'Times New Roman', serif;
            font-size: .72rem;
            color: #333;
            font-weight: 700;
            margin-bottom: 6px;
            line-height: 1.2
        }

        .web-old .web-text-line {
            height: 5px;
            background: #ddd;
            border-radius: 2px;
            margin-bottom: 4px
        }

        .web-old .web-text-line:nth-child(4) {
            width: 80%
        }

        .web-old .web-text-line:nth-child(5) {
            width: 60%
        }

        .web-new {
            background: linear-gradient(135deg, rgba(20, 20, 35, .95), rgba(10, 10, 25, .98));
            border: 1px solid rgba(41, 121, 255, .3);
            opacity: 0;
            animation: webMorphNew 6s ease-in-out infinite
        }

        .web-new .web-badge {
            font-family: 'JetBrains Mono', monospace;
            font-size: .5rem;
            color: var(--cyan-glow);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 8px;
            opacity: .8
        }

        .web-new .web-title-new {
            font-family: 'Outfit', sans-serif;
            font-size: .78rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 8px
        }

        .web-new .web-title-new span {
            background: linear-gradient(135deg, var(--cyan-glow), var(--electric-blue));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .web-new .web-cta {
            display: inline-block;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-purple));
            color: #fff;
            font-family: 'Outfit', sans-serif;
            font-size: .55rem;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 20px;
            width: fit-content
        }

        @keyframes webMorph {

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

            45%,
            85% {
                opacity: 0;
                transform: scale(.96)
            }

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

        @keyframes webMorphNew {

            0%,
            35% {
                opacity: 0;
                transform: scale(1.04)
            }

            45%,
            85% {
                opacity: 1;
                transform: scale(1)
            }

            95%,
            100% {
                opacity: 0;
                transform: scale(1.04)
            }
        }

        /* -- Dashboard Visual -- */
        .visual-dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 8px;
            padding: 14px;
            align-items: stretch
        }

        /* Each mini-card */
        .dash-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 10px
        }

        /* Bar chart card */
        .dash-card-bars {
            grid-column: 1 / 2;
            grid-row: 1 / 3
        }

        .dash-bars {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            width: 100%;
            height: 80px
        }

        .dash-bar {
            flex: 1;
            border-radius: 4px 4px 0 0;
            animation: barGrow 2s ease-out forwards;
            opacity: 0;
            min-height: 6px
        }

        @keyframes barGrow {
            from {
                height: 0;
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        /* Donut cards */
        .dash-card-donut {
            flex-direction: column;
            gap: 4px
        }

        .dash-donut {
            position: relative;
            width: 44px;
            height: 44px
        }

        .dash-donut svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg)
        }

        .dash-donut-track {
            fill: none;
            stroke: rgba(255, 255, 255, .06);
            stroke-width: 6
        }

        .dash-donut-fill {
            fill: none;
            stroke-width: 6;
            stroke-linecap: round;
            stroke-dasharray: 0 157;
            animation: donutFill 2s ease-out forwards
        }

        @keyframes donutFill {
            to {
                stroke-dasharray: var(--fill) 157
            }
        }

        .dash-donut-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: .48rem;
            color: rgba(255, 255, 255, .6)
        }

        /* Line chart mini-card */
        .dash-card-line {
            grid-column: 2 / 3;
            grid-row: 2 / 3
        }

        .dash-line-svg {
            width: 100%;
            height: 40px;
            overflow: visible
        }

        .dash-line-path {
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            animation: lineGrow 2.5s ease-out .5s forwards
        }

        .dash-line-area {
            opacity: .15;
            animation: areaGrow 2.5s ease-out .5s forwards;
            clip-path: inset(100% 0 0 0);
        }

        @keyframes lineGrow {
            to {
                stroke-dashoffset: 0
            }
        }

        @keyframes areaGrow {
            to {
                clip-path: inset(0% 0 0 0)
            }
        }

        /* Removed old dash-metric */
        .dash-metric-row,
        .dash-metric,
        .dash-metric-val,
        .dash-metric-lbl {
            display: none
        }

        /* -- Software & KI Flow -- */
        .visual-software {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 24px 16px;
            position: relative
        }

        .flow-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            z-index: 2
        }

        .flow-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--glass-border);
            background: rgba(0, 0, 0, .4)
        }

        .flow-icon svg {
            width: 22px;
            height: 22px
        }

        .flow-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: .48rem;
            color: rgba(255, 255, 255, .5);
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .flow-ki {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(41, 121, 255, .25) 0%, rgba(41, 121, 255, .08) 60%, transparent 100%);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Outfit', sans-serif;
            font-weight: 900;
            font-size: 1rem;
            color: var(--electric-blue);
            position: relative;
            z-index: 2;
            /* soft blurry edge via filter blur on a pseudo ring */
        }

        /* The blurred glow ring – animates glow only, circle itself stays still */
        .flow-ki::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(41, 121, 255, .5) 0%, rgba(41, 121, 255, .15) 50%, transparent 75%);
            filter: blur(10px);
            animation: kiGlowPulse 2s ease-in-out infinite;
            z-index: -1
        }

        /* Soft outer ring with blurred edge */
        .flow-ki::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1.5px solid rgba(41, 121, 255, .6);
            filter: blur(1.5px);
            box-shadow: 0 0 0 2px rgba(41, 121, 255, .12)
        }

        @keyframes kiGlowPulse {

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

            50% {
                opacity: 1;
                transform: scale(1.3)
            }
        }

        .flow-arrow {
            width: 36px;
            height: 2px;
            position: relative;
            z-index: 1
        }

        .flow-arrow-line {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .15)
        }

        .flow-arrow-particle {
            position: absolute;
            top: -2px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--cyan-glow);
            box-shadow: 0 0 8px var(--cyan-glow);
            animation: particleFlow 1.5s linear infinite
        }

        .flow-arrow:nth-child(4) .flow-arrow-particle {
            animation-delay: -.3s
        }

        @keyframes particleFlow {
            0% {
                left: -6px;
                opacity: 0
            }

            20% {
                opacity: 1
            }

            80% {
                opacity: 1
            }

            100% {
                left: 100%;
                opacity: 0
            }
        }

        .flow-result-icon {
            background: rgba(0, 200, 83, .15);
            border-color: rgba(0, 200, 83, .3)
        }

        .flow-result-icon svg {
            stroke: #00C853
        }

        /* === PROCESS === */
        .process-track {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            margin-top: 60px;
            position: relative
        }

        .process-track::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 12.5%;
            right: 12.5%;
            height: 2px;
            background: linear-gradient(90deg, var(--electric-blue), var(--cyan-glow), var(--electric-purple), var(--accent-orange))
        }

        .process-step {
            text-align: center;
            position: relative;
            padding: 0 16px
        }

        .process-node {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            border-radius: 20px;
            border: 2px solid var(--glass-border);
            background: rgba(20, 20, 30, .8);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            position: relative;
            z-index: 2;
            transition: all .4s
        }

        .process-step:hover .process-node {
            border-color: var(--cyan-glow);
            box-shadow: 0 0 30px rgba(0, 229, 255, .2);
            transform: scale(1.1)
        }

        .process-step h4 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.1rem;
            margin-bottom: 8px
        }

        .process-step p {
            font-size: .85rem;
            color: rgba(255, 255, 255, .45);
            line-height: 1.5
        }

        .process-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: .7rem;
            color: var(--cyan-glow);
            margin-bottom: 8px;
            letter-spacing: 2px
        }

        /* === ABOUT === */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center
        }

        .about-text h2 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(2rem, 3.5vw, 3rem);
            line-height: 1.1;
            margin-bottom: 24px
        }

        .about-text .grad {
            background: linear-gradient(135deg, var(--cyan-glow), var(--electric-blue));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .about-text p {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .6);
            line-height: 1.7;
            margin-bottom: 24px
        }

        .project-list {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .project-item {
            padding: 20px 24px;
            border-left: 3px solid var(--electric-blue);
            background: rgba(255, 255, 255, .03);
            border-radius: 0 16px 16px 0;
            transition: all .3s
        }

        .project-item:nth-child(2) {
            border-left-color: var(--cyan-glow)
        }

        .project-item:nth-child(3) {
            border-left-color: var(--electric-purple)
        }

        .project-item:hover {
            background: rgba(255, 255, 255, .06);
            transform: translateX(8px)
        }

        .project-item h4 {
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            margin-bottom: 6px
        }

        .project-item p {
            font-size: .85rem;
            color: rgba(255, 255, 255, .45);
            line-height: 1.5;
            margin: 0
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px
        }

        .stat-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 28px;
            text-align: center;
            transition: all .4s
        }

        .stat-card:hover {
            border-color: var(--electric-blue);
            transform: translateY(-4px)
        }

        .stat-num {
            font-family: 'Outfit', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--electric-blue), var(--cyan-glow));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .stat-label {
            font-size: .85rem;
            color: rgba(255, 255, 255, .45);
            margin-top: 4px
        }

        /* === LEAD FORM === */
        .form-section {
            background: linear-gradient(180deg, transparent, rgba(41, 121, 255, .03))
        }

        .form-wrapper {
            max-width: 680px;
            margin: 0 auto;
            background: rgba(20, 20, 30, .6);
            border: 1px solid var(--glass-border);
            border-top: 1px solid var(--glass-highlight);
            backdrop-filter: blur(20px);
            border-radius: 32px;
            padding: 48px;
            position: relative;
            overflow: hidden
        }

        .form-wrapper::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 200px;
            height: 200px;
            background: var(--electric-blue);
            filter: blur(100px);
            opacity: .15
        }

        .form-wrapper h2 {
            font-family: 'Outfit', sans-serif;
            font-size: 2rem;
            margin-bottom: 8px;
            text-align: center
        }

        .form-wrapper .form-sub {
            font-size: 1rem;
            color: rgba(255, 255, 255, .5);
            text-align: center;
            margin-bottom: 36px
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .form-group.full {
            grid-column: span 2
        }

        .form-group label {
            font-size: .8rem;
            font-weight: 600;
            color: rgba(255, 255, 255, .6);
            text-transform: uppercase;
            letter-spacing: .05em
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            background: rgba(255, 255, 255, .06);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 14px 16px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: .95rem;
            transition: border-color .3s;
            outline: none;
            -webkit-appearance: none;
            appearance: none
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--electric-blue);
            box-shadow: 0 0 0 3px rgba(41, 121, 255, .15)
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, .25)
        }

        .form-group select {
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center
        }

        .form-group select option {
            background: #1a1a2e;
            color: #fff
        }

        .form-submit {
            width: 100%;
            margin-top: 24px
        }

        /* === FOOTER === */
        footer {
            border-top: 1px solid var(--glass-border);
            padding: 40px 0;
            position: relative;
            z-index: 1
        }

        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px
        }

        .footer-brand {
            font-family: 'Outfit', sans-serif;
            font-weight: 900;
            font-size: 1.5rem;
            letter-spacing: -1px;
            position: relative;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            margin-bottom: 24px
        }

        .footer-brand::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--cyan-glow), transparent)
        }

        .footer-links {
            display: flex;
            gap: 24px;
            list-style: none
        }

        .footer-links a {
            color: rgba(255, 255, 255, .4);
            text-decoration: none;
            font-size: .85rem;
            transition: color .2s
        }

        .footer-links a:hover {
            color: #fff
        }

        .footer-copy {
            width: 100%;
            text-align: center;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--glass-border);
            font-size: .8rem;
            color: rgba(255, 255, 255, .3)
        }

        /* === SECTION HEADERS === */
        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: .78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--cyan-glow);
            margin-bottom: 16px
        }

        .section-label-line {
            width: 24px;
            height: 2px;
            background: var(--cyan-glow);
            border-radius: 1px
        }

        .section-title {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(2rem, 3.5vw, 3rem);
            line-height: 1.15;
            margin-bottom: 16px
        }

        .section-sub {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .5);
            max-width: 600px;
            line-height: 1.7
        }

        /* === SCROLL REVEAL === */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .7s ease, transform .7s ease
        }

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

        /* === RESPONSIVE === */
        @media(max-width:1024px) {

            .hero-grid,
            .about-grid {
                grid-template-columns: 1fr
            }

            .hero-visual {
                display: none
            }

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

            .process-track {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px
            }

            .process-track::before {
                display: none
            }
        }

        @media(max-width:768px) {
            .nav-links {
                display: none
            }

            .nav-mobile {
                display: block
            }

            .services-grid,
            .about-stats {
                grid-template-columns: 1fr
            }

            .process-track {
                grid-template-columns: 1fr
            }

            .form-row {
                grid-template-columns: 1fr
            }

            .form-group.full {
                grid-column: span 1
            }

            section {
                padding: 80px 0
            }

            .promo-grid {
                grid-template-columns: 1fr !important;
            }
            .promo-visual {
                min-height: 250px !important;
                border-left: none !important;
                border-top: 1px solid rgba(255,255,255,0.05) !important;
            }
        }

/* --- COOKIE CONSENT CUSTOMIZATION --- */
:root {
    --cc-font-family: 'Inter', sans-serif;
    --cc-bg: rgba(5, 5, 5, 0.95);
    --cc-text: #e0e0e0;
    --cc-btn-primary-bg: var(--electric-blue);
    --cc-btn-primary-text: #fff;
    --cc-btn-primary-hover-bg: var(--electric-purple);
    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --cc-btn-secondary-text: #e0e0e0;
    --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    --cc-btn-border-radius: 4px;
    --cc-modal-border-radius: 8px;
    --cc-separator-border-color: rgba(255, 255, 255, 0.1);
    --cc-toggle-bg-on: var(--cyan-glow);
    --cc-toggle-bg-off: rgba(255, 255, 255, 0.2);
    --cc-toggle-bg-readonly: rgba(255, 255, 255, 0.1);
}

#cc-main .cm {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}


/* ==================== AUTOCUT SPECIFIC SETTINGS ==================== */

/* ══════════════════════════════════════════════════════════════
   HERO SECTION (AUTOCUT)
   ══════════════════════════════════════════════════════════════ */
.hero { position: relative; padding-top: 140px; padding-bottom: 60px; z-index: 10; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-badge { display: inline-block; padding: 8px 16px; background: rgba(41, 121, 255, 0.1); border: 1px solid rgba(41, 121, 255, 0.2); border-radius: 30px; color: var(--cyan-glow); font-size: 0.85rem; font-weight: 600; margin-bottom: 24px; letter-spacing: 1px; }
.hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 24px; }
.hero p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 40px; max-width: 500px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   WORKFLOW MOCKUP (AUTOCUT)
   ══════════════════════════════════════════════════════════════ */
.hero-visual { position: relative; }
.workflow-mockup { background: rgba(10, 10, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 32px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 16px; }
.flow-node { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 16px; border-radius: 8px; display: flex; align-items: center; gap: 16px; position: relative; transition: transform 0.2s, background 0.2s; }
.flow-node:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(4px); }
.flow-node.active { background: rgba(41, 121, 255, 0.05); border-color: rgba(41, 121, 255, 0.3); box-shadow: 0 0 20px rgba(41, 121, 255, 0.1); }
.flow-node-icon { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }
.flow-arrow { width: 2px; height: 16px; background: rgba(255, 255, 255, 0.1); margin: 0 32px; }

/* ══════════════════════════════════════════════════════════════
   FEATURES & SMART BLOCKS
   ══════════════════════════════════════════════════════════════ */
.section-header { text-align: center; margin-bottom: 64px; }
.section-header h2 { font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; }
.section-header p { color: rgba(255, 255, 255, 0.6); font-size: 1.1rem; margin-top: 16px; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 80px; }
.feature-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 32px; border-radius: 12px; transition: transform 0.2s, background 0.2s; }
.feature-card:hover { background: rgba(255, 255, 255, 0.04); transform: translateY(-4px); }
.feature-icon { font-size: 2.5rem; margin-bottom: 16px; }
.feature-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.feature-card p { color: rgba(255, 255, 255, 0.6); line-height: 1.6; }

/* HOW IT WORKS STEPS */
.steps-wrapper { display: flex; flex-direction: column; gap: 32px; max-width: 800px; margin: 0 auto 80px; }
.step-item { display: flex; gap: 24px; align-items: flex-start; }
.step-number { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: bold; color: var(--cyan-glow); background: rgba(0, 229, 255, 0.1); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.step-content h3 { font-size: 1.4rem; margin-bottom: 8px; margin-top: 8px; }
.step-content p { color: rgba(255, 255, 255, 0.6); line-height: 1.6; }

/* SMART BLOCKS GRID */
.blocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
.smart-block { background: rgba(20, 20, 25, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; }
.sb-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sb-icon { background: rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sb-title { font-weight: 600; font-size: 1.1rem; }
.sb-desc { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; line-height: 1.5; margin-bottom: 24px; flex-grow: 1; }
.sb-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--cyan-glow); font-family: 'JetBrains Mono', monospace; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 16px; }

/* FAQ */
.faq-grid { max-width: 800px; margin: 0 auto 80px; }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.faq-question { padding: 24px 0; font-weight: 600; font-size: 1.1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-icon { color: var(--cyan-glow); font-size: 1.2rem; transition: transform 0.3s; }
.faq-answer { padding-bottom: 24px; color: rgba(255, 255, 255, 0.6); line-height: 1.6; display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

@media (max-width: 900px) {
    .hero-grid, .features-grid, .blocks-grid { grid-template-columns: 1fr; }
}


/* ==================== VOICEAGENT SPECIFIC SETTINGS ==================== */
                        </div>
                        <input type="range" class="roi-slider" id="sliderAngebote" min="0" max="50" value="10" step="1">
                        <div class="calc-slider-ticks">
                            <span>0</span><span>10</span><span>20</span><span>30</span><span>40</span><span>50</span>
                        </div>
                    </div>
                    <div class="calc-slider-group">
                        <div class="calc-slider-header">
                            <div class="calc-slider-label">&#128222; Anrufe pro Tag
                                <span>Eingehende Kundenanrufe (Baustelle + Büro)</span>
                            </div>
                            <div class="calc-slider-val"><span id="valAnrufe">15</span></div>
                        </div>
                        <input type="range" class="roi-slider" id="sliderAnrufe" min="0" max="100" value="15" step="1">
                        <div class="calc-slider-ticks">
                            <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
                        </div>
                    </div>
                    <div class="calc-slider-group">
                        <div class="calc-slider-header">
                            <div class="calc-slider-label">&#128295; Monteure im Außendienst
                                <span>Mitarbeiter, die täglich dokumentieren</span>
                            </div>
                            <div class="calc-slider-val"><span id="valMonteure">3</span></div>
                        </div>
                        <input type="range" class="roi-slider" id="sliderMonteure" min="1" max="20" value="3" step="1">
                        <div class="calc-slider-ticks">
                            <span>1</span><span>5</span><span>10</span><span>15</span><span>20</span>
                        </div>
                    </div>
                    <div style="margin-top:28px;padding-top:24px;border-top:1px solid var(--glass-border)">
                        <div
                            style="font-size:.7rem;color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em">
                            Kalkulationsbasis</div>
                        <div
                            style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.72rem;color:var(--text-muted)">
                            <div>&#9201; 90 min / Angebot (aktuell)</div>
                            <div>&#10003; 15 min / Angebot (mit IA)</div>
                            <div>&#128222; 20% Anrufe verpasst</div>
                            <div>&#128203; 0,5 entgangene Aufträge / Anruf</div>
                            <div>&#128182; 80 &euro;/Std. Stundensatz</div>
                        </div>
                    </div>
                </div>

                <!-- Results -->
                <div class="calc-results">
                    <div class="calc-result-card primary">
                        <div class="calc-result-label">&#9201; Gesparte Zeit</div>
                        <div class="calc-result-value"><span id="resZeitH">9</span>h <span style="font-size:1.2rem"
                                id="resZeitM">22</span>min</div>
                        <div class="calc-result-sub">pro Woche – Zeit, die Sie für echte Aufträge nutzen</div>
                        <div class="calc-breakdown">
                            <div class="calc-breakdown-row">
                                <span class="calc-breakdown-label">Angebote</span>
                                <div class="calc-breakdown-bar-wrap">
                                    <div class="calc-breakdown-bar" id="barAngeboteZ"
                                        style="background:var(--electric-blue);width:100%"></div>
                                </div>
                                <span class="calc-breakdown-amt" id="amtAngeboteZ">750 min</span>
                            </div>
                        </div>
                    </div>
                    <div class="calc-result-card">
                        <div class="calc-result-label">&#128222; Mehr Aufträge pro Woche</div>
                        <div class="calc-result-value"><span id="resOrders">1,5</span></div>
                        <div class="calc-result-sub">Aufträge, die Sie dank Iuvantis Agent nicht verlieren</div>
                    </div>
                    <div class="calc-result-card">
                        <div class="calc-result-label">&#128182; Ersparnis pro Monat</div>
                        <div class="calc-result-value"><span id="resMoney">1.820</span> &euro;</div>
                        <div class="calc-result-sub">Netto nach Iuvantis Agent-Abo (199 &euro;/Mo)</div>
                    </div>

                    <!-- Punchline -->
                    <div class="calc-punchline">
                        <div class="calc-punchline-price" id="resPunchline">2,5 freie Tage pro Woche?</div>
                        <div class="calc-punchline-text">Klingt fair?</div>
                        <a href="#" class="calc-punchline-tag" data-popup>Mehr Infos &rarr;</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta-section">
        <div class="container">
            <h2>Bereit, Angebote <span class="grad">in Minuten</span><br>statt Stunden zu erstellen?</h2>
            <p>Testen Sie Iuvantis Agent 14 Tage kostenlos. Keine Kreditkarte. Keine Einrichtung. Einfach lossprechen.
            </p>
            <div class="cta-actions">
                <a href="#" class="btn btn-primary" data-popup>Mehr Infos &rarr;</a>
                <a href="#" class="btn btn-glass" data-popup>Demo-Termin vereinbaren</a>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <div class="footer-inner">

                <a href="#" class="nav-brand">Iuvantis<span class="nav-brand-tag">AGENT</span></a>
                <ul class="footer-links">
                    <li><a href="datenschutz.html">Datenschutz</a></li>
                    <li><a href="impressum.html">Impressum</a></li>
                    <li><a href="agb.html">AGB</a></li>
                    <li><a href="mailto:info@iuvantis.de">Support</a></li>
                </ul>
            </div>
            <div class="footer-copy">&copy; 2026 Iuvantis Agent &middot; Alle Daten in der EU</div>
            <div class="footer-powered">Ein Produkt von <a href="index.html">Iuvantis</a> – KI, Software &amp;
                Automatisierung</div>
        </div>
    </footer>

    <!-- LEAD POPUP -->
    <div class="popup-overlay" id="leadPopup">
        <div class="popup-card">
            <button class="popup-close" id="popupClose">&times;</button>
            <h2>Mehr <span class="grad">erfahren</span></h2>
            <p class="popup-sub">Kostenlos und unverbindlich – wir melden uns innerhalb von 24 Stunden.</p>
            <form id="leadForm">
                <!-- Honeypot -->
                <div style="position:absolute;left:-9999px;top:-9999px" aria-hidden="true">
                    <input type="text" name="website" tabindex="-1" autocomplete="off">
                </div>
                <input type="hidden" name="formLoadedAt" id="formLoadedAt" value="">
                <div class="popup-form-row">
                    <div class="popup-form-group"><label>Vorname & Nachname</label><input type="text" name="name"
                            placeholder="Max Mustermann" required></div>
                    <div class="popup-form-group"><label>E-Mail</label><input type="email" name="email"
                            placeholder="max@firma.de" required></div>
                </div>
                <div class="popup-form-row">
                    <div class="popup-form-group"><label>Telefon</label><input type="tel" name="phone"
                            placeholder="+49 123 456789"></div>
                    <div class="popup-form-group"><label>Mitarbeiterzahl</label>
                        <select name="employees" required>
                            <option value="" disabled selected>Bitte wählen</option>
                            <option>1-10</option>
                            <option>11-50</option>
                            <option>51-200</option>
                            <option>201-500</option>
                            <option>500+</option>
                        </select>
                    </div>
                </div>
                <div class="popup-form-row">
                    <div class="popup-form-group full"><label>Aktuelle Handwerkersoftware</label><input type="text"
                            name="system_software" placeholder="z.B. HERO, openHandwerk, Streit V.1, keine …"></div>
                </div>
                <div class="popup-form-row">
                    <div class="popup-form-group full"><label>Jahresumsatz</label>
                        <select name="revenue" required>
                            <option value="" disabled selected>Bitte wählen</option>
                            <option>&lt; 500.000 &euro;</option>
                            <option>500.000 – 2 Mio. &euro;</option>
                            <option>2 – 10 Mio. &euro;</option>
                            <option>10 – 50 Mio. &euro;</option>
                            <option>&gt; 50 Mio. &euro;</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="popup-submit">Anfrage absenden &rarr;</button>
            </form>
            <div id="formSuccess" style="display:none;text-align:center;padding:40px 0">
                <div style="font-size:3rem;margin-bottom:16px">&#10003;</div>
                <h3 style="font-family:'Outfit',sans-serif;font-size:1.5rem;margin-bottom:8px">Vielen Dank!</h3>
                <p style="color:var(--text-secondary)">Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
            </div>
        </div>
    </div>

    <script>
        // Scroll reveal
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(e => {
                if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }
            });
        }, { threshold: 0.15 });
        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

        // Smooth scroll (only for non-popup links)
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                // Skip links that should open the popup
                if (this.dataset.popup) return;
                const target = document.querySelector(this.getAttribute('href'));
                if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
            });
        });

        // === LEAD POPUP ===
        (function () {
            const overlay = document.getElementById('leadPopup');
            const closeBtn = document.getElementById('popupClose');
            const form = document.getElementById('leadForm');
            const success = document.getElementById('formSuccess');

            function openPopup(e) {
                if (e) e.preventDefault();
                overlay.classList.add('active');
                document.getElementById('formLoadedAt').value = Date.now();
            }

            function closePopup() {
                overlay.classList.remove('active');
            }

            // Connect ALL CTA buttons to the popup
            document.querySelectorAll('[data-popup]').forEach(btn => {
                btn.addEventListener('click', openPopup);
            });

            // Close on X button
            closeBtn.addEventListener('click', closePopup);

            // Close on overlay click (outside card)
            overlay.addEventListener('click', function (e) {
                if (e.target === overlay) closePopup();
            });

            // Close on Escape key
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') closePopup();
            });

            // Form submit
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                const formData = new FormData(form);

                // Honeypot check
                if (formData.get('website')) return;

                // Time check
                const loadedAt = parseInt(formData.get('formLoadedAt') || '0');
                if (Date.now() - loadedAt < 3000) return;

                const payload = {
                    name: formData.get('name'),
                    email: formData.get('email'),
                    phone: formData.get('phone') || '',
                    employees: formData.get('employees'),
                    system_software: formData.get('system_software') || '',
                    revenue: formData.get('revenue'),
                    website: formData.get('website') || '',
                    source: 'voiceagent-landingpage'
                };

                fetch('send_lead.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                }).then(r => {
                    if (!r.ok) throw new Error('Server error');
                    form.style.display = 'none';
                    success.style.display = 'block';
                }).catch(() => {
                    const subject = encodeURIComponent('Neue Lead-Anfrage: Iuvantis Agent');
                    const body = encodeURIComponent(
                        'Neue Anfrage von der Iuvantis Agent Landingpage:\n\n' +
                        'Name: ' + payload.name + '\nE-Mail: ' + payload.email + '\nTelefon: ' + (payload.phone || 'nicht angegeben') + '\n' +
                        'Mitarbeiter: ' + payload.employees + '\nSoftware: ' + (payload.system_software || 'nicht angegeben') + '\nUmsatz: ' + payload.revenue
                    );
                    window.location.href = 'mailto:info@iuvantis.de?subject=' + subject + '&body=' + body;
                    form.style.display = 'none';
                    success.style.display = 'block';
                });
            });
        })();

        // ROI Calculator
        (function () {
            const MIN_PER_QUOTE_OLD = 90;
            const MIN_PER_QUOTE_NEW = 15;
            const MISSED_CALL_RATE = 0.20;
            const ORDERS_PER_MISSED = 0.5;
            const HOURLY_RATE = 80;
            const WORKING_DAYS = 5;
            const SUBSCRIPTION = 199;
            const WEEKS_PER_MONTH = 4.33;
            const WORK_HOURS_DAY = 8;

            function fmt1(n) { return n.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 1 }); }
            function fmt(n) { return Math.round(n).toLocaleString('de-DE'); }

            function calcROI() {
                const angebote = +document.getElementById('sliderAngebote').value;
                const anrufe = +document.getElementById('sliderAnrufe').value;
                const monteure = +document.getElementById('sliderMonteure').value;

                document.getElementById('valAngebote').textContent = angebote;
                document.getElementById('valAnrufe').textContent = anrufe;
                document.getElementById('valMonteure').textContent = monteure;

                const minAngebote = angebote * (MIN_PER_QUOTE_OLD - MIN_PER_QUOTE_NEW);
                const totalMin = minAngebote;
                const totalH = Math.floor(totalMin / 60);
                const totalM = Math.round(totalMin % 60);
                const freeDaysW = totalMin / (WORK_HOURS_DAY * 60);

                const missedPerWeek = anrufe * MISSED_CALL_RATE * WORKING_DAYS;
                const recoveredOrders = missedPerWeek * ORDERS_PER_MISSED;

                const timeSavingsMonthly = (totalMin / 60) * HOURLY_RATE * WEEKS_PER_MONTH;
                const orderSavingsMonthly = recoveredOrders * WEEKS_PER_MONTH * 2 * HOURLY_RATE;
                const grossMonthly = timeSavingsMonthly + orderSavingsMonthly;
                const netMonthly = grossMonthly - SUBSCRIPTION;

                document.getElementById('resZeitH').textContent = totalH;
                document.getElementById('resZeitM').textContent = totalM;
                document.getElementById('barAngeboteZ').style.width = '100%';
                document.getElementById('amtAngeboteZ').textContent = fmt(minAngebote) + ' min';
                document.getElementById('resOrders').textContent = fmt1(recoveredOrders);
                document.getElementById('resMoney').textContent = fmt(Math.max(0, netMonthly));

                let pl;
                if (freeDaysW >= 1.5) {
                    pl = fmt1(freeDaysW) + ' freie Tage pro Woche?';
                } else if (totalH >= 1) {
                    pl = totalH + 'h ' + totalM + 'min mehr Zeit pro Woche?';
                } else if (recoveredOrders >= 0.5) {
                    pl = fmt1(recoveredOrders) + ' Aufträge mehr – jede Woche?';
                } else {
                    pl = 'Ab dem ersten Anruf. Kein Vertrag. Kein Risiko.';
                }
                document.getElementById('resPunchline').textContent = pl;

                ['sliderAngebote', 'sliderAnrufe', 'sliderMonteure'].forEach(id => {
                    const s = document.getElementById(id);
                    const p = (s.value - s.min) / (s.max - s.min) * 100;
                    s.style.background = 'linear-gradient(90deg,var(--electric-blue) ' + p + '%,rgba(255,255,255,.08) ' + p + '%)';
                });
            }

            ['sliderAngebote', 'sliderAnrufe', 'sliderMonteure'].forEach(id =>
                document.getElementById(id).addEventListener('input', calcROI)
            );
            calcROI();
        })();

        // Mobile nav
        const mobileBtn = document.querySelector('.nav-mobile');
        const navLinks = document.querySelector('.nav-links');
        if (mobileBtn) {
            mobileBtn.addEventListener('click', () => {
                navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
                navLinks.style.position = 'absolute';
                navLinks.style.top = '72px';
                navLinks.style.left = '0';
                navLinks.style.right = '0';
                navLinks.style.background = 'rgba(2,2,5,0.98)';
                navLinks.style.flexDirection = 'column';
                navLinks.style.padding = '20px 24px';
                navLinks.style.gap = '16px';
                navLinks.style.borderBottom = '1px solid rgba(255,255,255,0.06)';
            });
        }
    </script>

</body>

</html>