/* Self-hosted fonts (SIL OFL 1.1 - see assets/ASSET-LICENSES.md).
           Replaces the former Google Fonts @import (blocked by production CSP).
           Variable fonts cover all weights; latin + latin-ext cover EN/DE/RO/NL. */
        @font-face {
            font-family: 'JetBrains Mono';
            font-style: normal;
            font-weight: 400 600;
            font-display: swap;
            src: url('../assets/fonts/jbm-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        @font-face {
            font-family: 'JetBrains Mono';
            font-style: normal;
            font-weight: 400 600;
            font-display: swap;
            src: url('../assets/fonts/jbm-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        @font-face {
            font-family: 'Plus Jakarta Sans';
            font-style: normal;
            font-weight: 300 800;
            font-display: swap;
            src: url('../assets/fonts/pjs-latin-ext.woff2') format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        @font-face {
            font-family: 'Plus Jakarta Sans';
            font-style: normal;
            font-weight: 300 800;
            font-display: swap;
            src: url('../assets/fonts/pjs-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        :root {
            --primary-cyan: #00d4ff;
            --primary-purple: #7b2ff7;
            --primary-blue: #0099ff;
            --dark-bg: #0a0e27;
            --dark-bg-2: #0f1729;
            --dark-bg-3: #1a1f3a;
            --text-primary: #ffffff;
            --text-secondary: #a0a8c0;
            --text-muted: #6b7280;
            --gradient-main: linear-gradient(135deg, var(--primary-cyan) 0%, var(--primary-blue) 50%, var(--primary-purple) 100%);
            --gradient-subtle: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(123, 47, 247, 0.1) 100%);
        }

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

        /* HTML hidden attribute (moved from inline style attributes) */
        [hidden] {
            display: none !important;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--dark-bg);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 212, 255, 0.1);
            transition: all 0.3s ease;
        }

        nav.scrolled {
            background: rgba(10, 14, 39, 0.98);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.1);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 16px;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .logo-container:hover {
            transform: translateY(-2px);
        }

        /* Flying-logo placeholders (moved from inline style attributes) */
        #nav-logo-anchor {
            visibility: hidden;
            width: 60px;
            height: 60px;
        }

        #hero-logo-anchor {
            visibility: hidden;
        }

        /* Logo Hexagon */
        .nav-logo {
            position: relative;
            width: 50px;
            height: 50px;
            /* Mini saucer spin? Maybe too distracting. Let's just give it the look */
        }

        .nav-hex-layer {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .nav-hex-base {
            background: conic-gradient(from 0deg, #0a1128, #1c2541, #0a1128, #1c2541, #0a1128);
            transform: translateZ(-5px);
        }

        .nav-hex-main {
            background:
                radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.8) 70%),
                conic-gradient(from 45deg, #001f3f, #003366, #004080, #003366, #001f3f);
            border: 1px solid rgba(0, 212, 255, 0.3);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
            animation: nav-logo-pulse 3s ease-in-out infinite;
        }

        .nav-hex-letter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-text .brand {
            font-size: 20px;
            font-weight: 800;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }

        .logo-text .tagline {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .nav-links {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-main);
            transition: width 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--primary-cyan);
        }

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

        .cta-button {
            padding: 12px 28px;
            background: var(--gradient-main);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 30px rgba(0, 212, 255, 0.5);
        }

        /* Language Selector */
        .lang-selector {
            position: relative;
            display: inline-block;
        }

        .lang-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.2);
            color: var(--text-secondary);
            padding: 12px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            display: flex;
            align-items: center;
            gap: 6px;
            z-index: 1001;
            transition: all 0.3s ease;
        }

        .lang-btn:hover {
            background: rgba(0, 212, 255, 0.1);
            color: var(--primary-cyan);
            border-color: rgba(0, 212, 255, 0.4);
        }

        .lang-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: rgba(10, 14, 39, 0.95);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 8px;
            padding: 4px 0;
            min-width: 120px;
            display: none;
            z-index: 1002;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        .lang-dropdown.active {
            display: block;
        }

        .lang-dropdown button {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 16px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            text-align: left;
            transition: all 0.2s ease;
        }

        .lang-dropdown button:hover,
        .lang-dropdown button.active {
            background: rgba(0, 212, 255, 0.1);
            color: var(--primary-cyan);
        }

        /* Language selector sits last: keep it ~16px from Start Project
           (compensates the 40px flex gap; mobile panel resets this below) */
        .nav-links .lang-selector {
            margin-left: -24px;
        }

        .lang-btn::after {
            content: '▼';
            font-size: 9px;
            line-height: 1;
        }

        .lang-btn:focus-visible,
        .lang-dropdown button:focus-visible,
        .cta-button:focus-visible {
            outline: 2px solid var(--primary-cyan);
            outline-offset: 3px;
        }

        /* Mobile Menu Toggle */
        .mobile-toggle {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 8px;
        }

        .mobile-toggle span {
            width: 28px;
            height: 3px;
            background: var(--primary-cyan);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 120px 40px 80px;
            overflow: hidden;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 90% 10%, rgba(123, 47, 247, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 153, 255, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 20% 90%, rgba(123, 47, 247, 0.08) 0%, transparent 50%);
            z-index: 0;
        }

        .grid-pattern {
            display: none;
        }

        .hero-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-text h1 {
            font-size: 64px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 30px;
            letter-spacing: -2px;
        }

        .hero-text h1 .gradient-text {
            background: var(--gradient-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-text p {
            font-size: 20px;
            color: var(--text-secondary);
            margin-bottom: 40px;
            line-height: 1.7;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }

        .primary-btn {
            padding: 18px 40px;
            background: var(--gradient-main);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
            display: inline-block;
        }

        .primary-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(0, 212, 255, 0.6);
        }

        .secondary-btn {
            padding: 18px 40px;
            background: rgba(255, 255, 255, 0.05);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            border: 2px solid rgba(0, 212, 255, 0.3);
            transition: all 0.3s ease;
            display: inline-block;
        }

        .secondary-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--primary-cyan);
            transform: translateY(-3px);
        }

        /* Hero Logo Display - Space Saucer Style */
        .hero-logo-display {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }

        .hero-hex-container {
            position: relative;
            /* 350px = the size previously set inline on #hero-logo-anchor;
               sized here so the mobile media query below can override it */
            width: 350px;
            height: 350px;
            /* Calmer Float Animation - Subtle breathing motion */
            animation: calm-hover 8s ease-in-out infinite;
            transform-style: preserve-3d;
        }

        /* New Calm Hover Animation with slight 3D tilt */
        @keyframes calm-hover {

            0%,
            100% {
                transform: translateY(0) rotateX(0deg) rotateY(0deg);
            }

            50% {
                transform: translateY(-15px) rotateX(4deg) rotateY(-4deg);
            }
        }

        /* The spinning hull of the saucer - Premium Slow Rotation */
        .hero-saucer-hull {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Removed rotation for a stable, majestic look */
            transform: rotate(0deg);
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* FLYING LOGO CSS */
        .flying-logo {
            position: fixed;
            z-index: 10000;
            /* Transition scoped to the properties this element actually
               animates on scroll (identical runtime behavior to "all" here)
               so the .positioned visibility reveal can never animate or
               discretely flip mid-transition. */
            transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            pointer-events: auto; /* Allow hover */
            /* Deterministic initial state: stay invisible until the first
               JavaScript sizing (the scroll/load handler adds .positioned).
               Prevents the natural-size (1184x896) flash during the window
               between first paint and the load event on hard refreshes. */
            visibility: hidden;
        }

        .flying-logo:not(.positioned) {
            transition: none; /* first placement must not animate from 0/0 */
        }

        .flying-logo.positioned {
            visibility: visible;
        }

        /* Hover swap (moved here from the removed inline <style> block) */
        .flying-logo:hover .flying-logo-img {
            opacity: 0 !important;
        }

        .flying-logo:hover .flying-logo-img-hover {
            opacity: 1 !important;
        }

        .flying-logo-inner {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .flying-logo:not(.in-nav) .flying-logo-inner {
            animation: calm-hover 8s ease-in-out infinite;
        }

        .flying-logo-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: opacity 0.5s ease;
        }

        .flying-logo-img-hover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .hero-hex-layer {
            position: absolute;
            width: 320px;
            height: 320px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        /* Bottom/Base of the saucer - Dark metallic */
        /* Bottom/Base of the saucer - Thick Hull Foundation */
        /* Bottom/Base of the saucer - Thick Hull Foundation */
        .hero-hex-base {
            width: 380px;
            /* Widest layer */
            height: 380px;
            background: conic-gradient(from 0deg, #050a1f, #0f172a, #050a1f, #0f172a, #050a1f);
            transform: translate(-50%, -50%) translateZ(-50px);
            /* Massive shadow to ground it */
            filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.9));
            /* Physical "thickness" border styling via border instead of box-shadow for shape */
            border: 2px solid #1c2541;
        }

        /* Middle Ring - Clean Metallic Rim (No Green Lines) */
        .hero-hex-mid {
            width: 360px;
            height: 360px;
            /* Clean brushed metal look */
            background: conic-gradient(from 0deg, #1c2541, #3a506b, #1c2541, #3a506b, #1c2541);
            /* Sharp edges */
            filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.3));
            opacity: 1;
            transform: translate(-50%, -50%) translateZ(-25px);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        /* Main Body - Metallic & Textured */
        /* Main Body - Brushed Metal Deck */
        /* Main Body - Brushed Metal Deck */
        .hero-hex-main {
            width: 340px;
            height: 340px;
            /* complex metal gradient */
            background:
                conic-gradient(from 0deg, #162447, #1f4068, #162447, #1f4068, #162447);
            transform: translate(-50%, -50%) translateZ(0px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            /* Sharp bevel via drop-shadow */
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

            /* Brushed metal texture overlay */
            background-image:
                repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.05) 3px),
                conic-gradient(from 0deg, rgba(0, 0, 0, 0.5), transparent, rgba(0, 0, 0, 0.5));
            background-blend-mode: overlay;
        }

        /* Cockpit/Dome - Deep 3D Interior */
        .hero-hex-inner {
            position: absolute;
            width: 140px;
            height: 140px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: linear-gradient(135deg, rgba(0, 10, 30, 0.9) 0%, rgba(0, 40, 60, 0.9) 100%);
            /* Deep inset shadows for "ribs" effect */
            box-shadow:
                inset 0 0 20px rgba(0, 0, 0, 0.9),
                inset 10px 10px 20px rgba(0, 212, 255, 0.1),
                inset -10px -10px 20px rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        /* Pseudo-element for "floor" grid */
        .hero-hex-inner::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            background:
                linear-gradient(rgba(0, 212, 255, 0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 212, 255, 0.2) 1px, transparent 1px);
            background-size: 10px 10px;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            opacity: 0.5;
        }

        .hero-hex-shine {
            display: none;
        }

        /* "Melted" FTH Text */
        /* "Melted" FTH Text */
        /* "Melted" FTH Text - Integrated */
        /* "Melted" FTH Text - Integrated */
        .hero-fth-text {
            position: absolute;
            top: 50%;
            left: 50%;
            /* Moved slightly z-back to sit "inside" the hex, but above the floor */
            transform: translate(-50%, -50%) translateZ(40px);
            font-size: 70px;
            /* Fits inside the 140px hex */
            font-weight: 900;
            letter-spacing: -3px;

            /* Ultra-Bright Liquid Gradient with Central Light Source */
            background: radial-gradient(circle at center, #ffffff 30%, #00eaff 70%, #0088cc 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;

            /* Powerful Glow - Central Lighting */
            filter: drop-shadow(0 0 20px rgba(0, 212, 255, 1));
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

            z-index: 50;
            mix-blend-mode: normal;
        }

        /* Add a "gloss" overlay to make it look wet/glassy */
        /* Add a "gloss" overlay to make it look wet/glassy */
        .hero-fth-text::after {
            content: 'FTH';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: transparent;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 50%);
            -webkit-background-clip: text;
            background-clip: text;
            filter: blur(2px);
            opacity: 0.6;
            z-index: 101;
            /* Above the base text */
            pointer-events: none;
        }

        /* Reusing .f-part for the new structure, but simplified */
        .hero-modern-f::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
            clip-path: polygon(0 0, 100% 0, 100% 20%, 30% 20%,
                    30% 40%, 80% 40%, 80% 60%, 30% 60%,
                    30% 100%, 0 100%);
            /* Add depth to the F */
            filter: drop-shadow(0 4px 10px rgba(0, 212, 255, 0.4));
        }

        /* Hide old parts since we are using ::after for the whole shape now */
        .f-part {
            display: none;
        }



        /* Stats Section */
        .stats {
            padding: 60px 40px;
            background: rgba(255, 255, 255, 0.02);
            border-top: 1px solid rgba(0, 212, 255, 0.1);
            border-bottom: 1px solid rgba(0, 212, 255, 0.1);
        }

        .stats-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 60px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 56px;
            font-weight: 800;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Services Section */
        .services {
            padding: 120px 40px;
            position: relative;
        }

        .section-header {
            max-width: 1400px;
            margin: 0 auto 80px;
            text-align: center;
        }

        .section-tag {
            display: inline-block;
            padding: 8px 20px;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-cyan);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 20px;
            letter-spacing: -1px;
        }

        .section-description {
            font-size: 18px;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .services-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .service-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 50px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-subtle);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .service-card:hover {
            transform: translateY(-10px);
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.2);
        }

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

        .service-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-main);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-bottom: 30px;
            box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
            position: relative;
            z-index: 1;
        }

        .service-card h3 {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .service-card p {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 25px;
            position: relative;
            z-index: 1;
        }

        .service-features {
            list-style: none;
            position: relative;
            z-index: 1;
        }

        .service-features li {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }

        .service-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--primary-cyan);
            font-weight: 700;
        }

        /* Tech Stack Section */
        .tech-stack {
            padding: 120px 40px;
            background: rgba(255, 255, 255, 0.01);
        }

        .tech-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 30px;
        }

        .tech-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .tech-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(0, 212, 255, 0.4);
            transform: translateY(-5px);
        }

        .tech-item-icon {
            font-size: 40px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            margin-left: auto;
            margin-right: auto;
        }

        .tech-item-icon img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .tech-item:hover .tech-item-icon img {
            transform: scale(1.15);
            filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
        }

        .tech-item-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary);
        }

        /* Process Section */
        .process {
            padding: 120px 40px;
        }

        .process-steps {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }

        .process-step {
            position: relative;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: var(--gradient-main);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 900;
            margin-bottom: 25px;
            box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
        }

        .process-step h3 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .process-step p {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
        }

        /* CTA Section */
        .cta-section {
            padding: 120px 40px;
            background: var(--gradient-subtle);
            border-top: 1px solid rgba(0, 212, 255, 0.2);
            border-bottom: 1px solid rgba(0, 212, 255, 0.2);
        }

        .cta-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .cta-content h2 {
            font-size: 52px;
            font-weight: 800;
            margin-bottom: 25px;
            letter-spacing: -1px;
        }

        .cta-content p {
            font-size: 20px;
            color: var(--text-secondary);
            margin-bottom: 40px;
            line-height: 1.7;
        }

        /* Footer */
        footer {
            padding: 80px 40px 40px;
            background: var(--dark-bg-3);
            border-top: 1px solid rgba(0, 212, 255, 0.1);
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 60px;
        }

        .footer-brand h3 {
            font-size: 24px;
            font-weight: 800;
            background: var(--gradient-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
        }

        .footer-brand p {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .footer-section h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--primary-cyan);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--primary-cyan);
        }

        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-bottom p {
            font-size: 14px;
            color: var(--text-muted);
        }

        .social-links {
            display: flex;
            gap: 20px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            background: var(--gradient-main);
            border-color: transparent;
            color: white;
            transform: translateY(-3px);
        }

        /* Animations */
        @keyframes saucer-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes float-saucer {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes scanner-sweep {

            0%,
            100% {
                top: 0%;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

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

        @keyframes letter-float {

            0%,
            100% {
                transform: translate(-50%, -50%) translateZ(50px) translateY(0);
            }

            50% {
                transform: translate(-50%, -50%) translateZ(50px) translateY(-10px);
            }
        }

        @keyframes nav-logo-pulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 212, 255, 0.7);
            }
        }

        @keyframes float-rotate {

            0%,
            100% {
                transform: translateY(0) rotateY(0deg);
            }

            25% {
                transform: translateY(-15px) rotateY(-5deg);
            }

            50% {
                transform: translateY(0) rotateY(0deg);
            }

            75% {
                transform: translateY(-15px) rotateY(5deg);
            }
        }

        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow: 0 0 60px rgba(0, 212, 255, 0.8),
                    inset 0 0 60px rgba(255, 255, 255, 0.1);
            }

            50% {
                box-shadow: 0 0 80px rgba(0, 212, 255, 1),
                    inset 0 0 80px rgba(255, 255, 255, 0.2);
            }
        }

        @keyframes inner-rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes particle-float {

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

            50% {
                transform: translateY(-30px) scale(1.3);
                opacity: 0.6;
            }
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 60px;
                text-align: center;
            }

            .hero-text h1 {
                font-size: 52px;
            }

            .hero-buttons {
                justify-content: center;
            }

            .hero-hex-container {
                width: 350px;
                height: 350px;
            }

            .hero-hex-layer {
                width: 280px;
                height: 280px;
            }

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

            .tech-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .process-steps {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-content {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 768px) {
            /* Mobile navigation panel (toggled by the hamburger button) */
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
                padding: 20px 24px 24px;
                background: rgba(10, 14, 39, 0.98);
                border-bottom: 1px solid rgba(0, 212, 255, 0.1);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                z-index: 999;
            }

            .nav-links.open {
                display: flex;
            }

            .nav-links > a {
                padding: 8px 0;
            }

            /* Reset the desktop grouping rules inside the mobile panel */
            .nav-links > .lang-selector {
                margin-left: 0;
                margin-right: 0;
                display: flex;
                justify-content: center;
            }

            .nav-links > .cta-button {
                text-align: center;
                margin-top: 6px;
            }

            .mobile-toggle {
                display: flex;
            }

            .mobile-toggle:focus-visible {
                outline: 2px solid var(--primary-cyan);
                outline-offset: 3px;
                border-radius: 4px;
            }

            .mobile-toggle[aria-expanded="true"] span:nth-child(1) {
                transform: translateY(9px) rotate(45deg);
            }

            .mobile-toggle[aria-expanded="true"] span:nth-child(2) {
                opacity: 0;
            }

            .mobile-toggle[aria-expanded="true"] span:nth-child(3) {
                transform: translateY(-9px) rotate(-45deg);
            }

            .hero-text h1 {
                font-size: 40px;
            }

            .hero-text p {
                font-size: 18px;
            }

            .hero-hex-container {
                /* Responsive on narrow phones: caps at the previous 280px
                   and shrinks on viewports below ~400px so the flying-logo
                   anchor never overflows (stays square, animation unaffected) */
                width: min(280px, 70vw);
                height: min(280px, 70vw);
            }

            .hero-hex-layer {
                width: 220px;
                height: 220px;
            }

            .hero-letter {
                font-size: 100px;
            }

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

            .services-grid {
                grid-template-columns: 1fr;
            }

            .tech-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .process-steps {
                grid-template-columns: 1fr;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .section-title {
                font-size: 36px;
            }

            .cta-content h2 {
                font-size: 38px;
            }
        }

        /* ============================================================
           WhatsApp Floating Contact Button
           Kept inactive until a real number is configured —
           activation instructions are documented in index.html
           next to the #whatsapp-button anchor.
           ============================================================ */
        .whatsapp-float {
            position: fixed;
            right: 24px;
            bottom: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #25D366;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            z-index: 950;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .whatsapp-float svg {
            width: 30px;
            height: 30px;
            fill: #fff;
        }

        .whatsapp-float:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        }

        .whatsapp-float:focus-visible {
            outline: 2px solid var(--primary-cyan);
            outline-offset: 3px;
        }

        /* Inactive until a real WhatsApp number is configured (see index.html) */
        .whatsapp-inactive {
            opacity: 0.75;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                width: 52px;
                height: 52px;
                right: 16px;
                bottom: 16px;
            }

            .whatsapp-float svg {
                width: 28px;
                height: 28px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .whatsapp-float {
                transition: none;
            }

            .whatsapp-float:hover {
                transform: none;
            }
        }

        /* Narrow phones: 3 tech columns cannot fit (names are single words,
           min-content ~136px per item). Two fluid columns with tighter
           spacing fit down to 320px without clipping names or page overflow.
           Tablet (768px) and desktop keep the approved 3/6-column layouts. */
        @media (max-width: 480px) {
            .tech-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            .tech-item {
                padding: 20px 12px;
            }
        }

        /* Very narrow phones: two stat columns (2 x ~140px numerals + 40px gap
           + 80px section padding = ~362px) overflow below 375px. A single
           column with tighter spacing resolves it; 375px and above keep the
           approved two-column layout (4 columns on desktop). */
        @media (max-width: 374.98px) {
            .stats-container {
                grid-template-columns: 1fr;
                gap: 24px;
            }
        }

        /* Narrow phones: translated service titles/descriptions contain long
           compound words (e.g. DE "Softwareentwicklung", ~212px at 24px/800).
           Combined with the 2 x 50px card padding this pushed the 1fr grid
           track to ~352px (page overflow) and the words were clipped by the
           card's overflow:hidden. "anywhere" (unlike "break-word") also lowers
           the intrinsic min-content width, letting the track shrink so every
           word stays visible; cards grow taller only when needed. */
        @media (max-width: 480px) {
            .service-card h3,
            .service-card p,
            .service-features li,
            .section-title,
            .section-description {
                overflow-wrap: anywhere;
            }
        }