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

        :root {
            --bg:             #07090f;
            --surface:        #0b0f1a;
            --surface-2:      #0f1526;
            --border:         #1a2438;
            --border-bright:  #263554;
            --accent:         #00c9a7;
            --accent-glow:    rgba(0, 201, 167, 0.14);
            --accent-2:       #4d8fff;
            --text:           #dce4f0;
            --text-muted:     #5c738f;
            --text-dim:       #364d69;
            --mono:           'JetBrains Mono', monospace;
            --sans:           'DM Sans', sans-serif;
            --display:        'DM Sans', sans-serif;
        }

        html.light {
            --bg:             #f3f5fa;
            --surface:        #eaecf4;
            --surface-2:      #e0e4ef;
            --border:         #cbd2e4;
            --border-bright:  #b0bacd;
            --accent:         #009e82;
            --accent-glow:    rgba(0, 158, 130, 0.12);
            --accent-2:       #2d6fd4;
            --text:           #0d1421;
            --text-muted:     #485f7a;
            --text-dim:       #8a9baf;
        }

        html { scroll-behavior: smooth; }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

        /* ── CURSOR DOT ───────────────────────────────────────────────── */
        .cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease;
            will-change: transform;
        }

        .cursor-dot.active { opacity: 0.9; }

        /* Grows over anything clickable */
        .cursor-dot.hovering {
            width: 26px;
            height: 26px;
            opacity: 0.25;
        }

        /* No dot for touch/pen users — it would sit stranded where they last tapped */
        @media (hover: none), (pointer: coarse) {
            .cursor-dot { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .cursor-dot { display: none; }
        }

        /* ── NAV ──────────────────────────────────────────────────────── */
        /* Floating liquid-glass bar: a detached pill that refracts the page
           beneath it. Depth comes from the layered inset highlights, not opacity. */
        nav {
            position: fixed;
            top: 1.1rem;
            left: 50%;
            transform: translateX(-50%);
            width: min(1180px, calc(100% - 2.6rem));
            z-index: 100;
            padding: 0 0.9rem 0 1.6rem;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 999px;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.10) 0%,
                rgba(255, 255, 255, 0.04) 42%,
                rgba(255, 255, 255, 0.08) 100%
            );
            backdrop-filter: blur(22px) saturate(180%);
            -webkit-backdrop-filter: blur(22px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05),
                inset 0 0 24px rgba(255, 255, 255, 0.03),
                0 10px 34px rgba(0, 0, 0, 0.34);
            transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                        background 0.4s, box-shadow 0.4s, border-color 0.4s,
                        backdrop-filter 0.4s;
        }

        /* Specular sheen across the top curve — the "liquid" read */
        nav::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(
                120deg,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(255, 255, 255, 0) 28%,
                rgba(255, 255, 255, 0) 72%,
                rgba(255, 255, 255, 0.22) 100%
            );
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
            pointer-events: none;
            opacity: 0.7;
        }

        /* Tightens and settles closer to the edge once you scroll */
        nav.scrolled {
            top: 0.6rem;
            height: 54px;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.13) 0%,
                rgba(255, 255, 255, 0.05) 42%,
                rgba(255, 255, 255, 0.10) 100%
            );
            backdrop-filter: blur(30px) saturate(190%);
            -webkit-backdrop-filter: blur(30px) saturate(190%);
            border-color: rgba(255, 255, 255, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -1px 0 rgba(255, 255, 255, 0.06),
                0 14px 44px rgba(0, 0, 0, 0.42);
        }

        html.light nav {
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.72) 0%,
                rgba(255, 255, 255, 0.42) 45%,
                rgba(255, 255, 255, 0.62) 100%
            );
            border-color: rgba(255, 255, 255, 0.85);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -1px 0 rgba(13, 20, 33, 0.04),
                0 10px 34px rgba(13, 20, 33, 0.10);
        }

        html.light nav.scrolled {
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.6) 45%,
                rgba(255, 255, 255, 0.78) 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 0 rgba(13, 20, 33, 0.05),
                0 14px 44px rgba(13, 20, 33, 0.14);
        }

        /* No backdrop-filter (older Firefox, some Safari): fall back to opaque */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            nav { background: rgba(11, 15, 26, 0.95); }
            html.light nav { background: rgba(255, 255, 255, 0.97); }
        }

        .nav-logo img {
            height: 18px;
            width: auto;
            display: block;
            filter: brightness(0) invert(1);
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none;
        }

        .nav-links a {
            font-family: var(--mono);
            font-size: 0.7rem;
            font-weight: 400;
            color: var(--text-muted);
            text-decoration: none;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: color 0.2s;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0; right: 0;
            height: 1px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s ease;
        }

        .nav-links a:hover { color: var(--text); }
        .nav-links a:hover::after { transform: scaleX(1); }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .theme-toggle {
            background: none;
            border: 1px solid var(--border-bright);
            color: var(--text-muted);
            width: 36px;
            height: 36px;
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
            flex-shrink: 0;
            padding: 0;
        }

        .theme-toggle:hover {
            color: var(--text);
            border-color: var(--text-muted);
            background: var(--surface);
        }

        /* show/hide sun vs moon icon */
        .icon-moon { display: block; }
        .icon-sun  { display: none; }
        html.light .icon-moon { display: none; }
        html.light .icon-sun  { display: block; }

        .nav-cta {
            font-family: var(--mono);
            font-size: 0.68rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent);
            text-decoration: none;
            border: 1px solid rgba(0, 201, 167, 0.3);
            padding: 0.5rem 1.3rem;
            border-radius: 3px;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        }

        .nav-cta:hover {
            background: var(--accent);
            color: var(--bg);
            box-shadow: 0 0 24px rgba(0, 201, 167, 0.28);
        }

        /* ── HERO ─────────────────────────────────────────────────────── */
        #hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('LX-Space-BG-Comp.jpg');
            background-size: cover;
            background-position: center;
            filter: brightness(0.45) saturate(0.75);
        }

        .hero-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(7, 9, 15, 0.05) 0%,
                rgba(7, 9, 15, 0.0) 30%,
                rgba(7, 9, 15, 0.55) 78%,
                var(--bg) 100%
            );
        }

        /* Light mode: a faint wash of the space art, not a dark slab.
           opacity() lives in the filter so the ::after scrim stays full strength. */
        html.light .hero-bg {
            filter: brightness(1.9) saturate(0.45) contrast(0.8) opacity(0.1);
        }

        html.light .hero-bg::after {
            background: linear-gradient(
                to bottom,
                rgba(243, 245, 250, 0.15) 0%,
                rgba(243, 245, 250, 0.05) 30%,
                rgba(243, 245, 250, 0.6) 78%,
                var(--bg) 100%
            );
        }

        html.light .nav-logo img,
        html.light .hero-logo,
        html.light .footer-logo img {
            filter: brightness(0);
        }

        #hero-canvas {
            position: absolute;
            inset: 0;
            opacity: 0.55;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem;
            max-width: 860px;
        }

        .hero-logo {
            display: block;
            margin: 0 auto 2.8rem;
            height: 48px;
            width: auto;
            filter: brightness(0) invert(1);
            opacity: 0;
            animation: fadeInDown 0.9s ease 0.1s forwards;
        }

        .hero-label {
            font-family: var(--mono);
            font-size: 0.7rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 2rem;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            opacity: 0;
            animation: fadeInDown 0.9s ease 0.25s forwards;
        }

        .hero-label::before,
        .hero-label::after {
            content: '';
            display: block;
            height: 1px;
            width: 36px;
            background: var(--accent);
            opacity: 0.45;
        }

        .hero-headline {
            font-family: var(--display);
            font-size: clamp(2.8rem, 6.5vw, 5.4rem);
            font-weight: 800;
            line-height: 1.06;
            letter-spacing: -0.035em;
            color: var(--text);
            margin-bottom: 1.6rem;
            opacity: 0;
            animation: fadeInUp 0.9s ease 0.45s forwards;
        }

        .hero-headline .typewriter-line {
            display: block;
            color: var(--accent);
            min-height: 1.1em;
        }

        .typewriter-text {
            border-right: 3px solid var(--accent);
            animation: cursorBlink 0.75s step-end infinite;
            padding-right: 3px;
        }

        @keyframes cursorBlink {
            0%, 100% { border-color: var(--accent); }
            50% { border-color: transparent; }
        }

        .hero-sub {
            font-size: 1.05rem;
            color: var(--text-muted);
            font-weight: 300;
            max-width: 500px;
            margin: 0 auto 3rem;
            line-height: 1.75;
            opacity: 0;
            animation: fadeInUp 0.9s ease 0.65s forwards;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeInUp 0.9s ease 0.85s forwards;
        }

        .btn-primary {
            font-family: var(--mono);
            font-size: 0.78rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: var(--accent);
            color: var(--bg);
            border: none;
            padding: 0.9rem 2.4rem;
            border-radius: 3px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-weight: 500;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(0, 201, 167, 0.32);
        }

        .btn-secondary {
            font-family: var(--mono);
            font-size: 0.78rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-bright);
            padding: 0.9rem 2.4rem;
            border-radius: 3px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: color 0.2s, border-color 0.2s;
        }

        .btn-secondary:hover {
            color: var(--text);
            border-color: var(--text-muted);
        }

        .scroll-hint {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.6rem;
            opacity: 0;
            animation: fadeIn 1s ease 1.4s forwards;
        }

        .scroll-hint span {
            font-family: var(--mono);
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--text-dim);
        }

        .scroll-line {
            width: 1px;
            height: 48px;
            background: linear-gradient(to bottom, var(--text-dim), transparent);
            animation: scrollPulse 2.2s ease-in-out infinite;
        }

        @keyframes scrollPulse {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 0.85; }
        }

        /* ── SHARED SECTION ───────────────────────────────────────────── */
        section { padding: 7rem 3rem; }

        .section-inner { max-width: 1100px; margin: 0 auto; }

        .section-label {
            font-family: var(--mono);
            font-size: 0.66rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .section-label::before {
            content: '';
            display: block;
            width: 22px;
            height: 1px;
            background: var(--accent);
        }

        .section-title {
            font-family: var(--display);
            font-size: clamp(1.9rem, 3.5vw, 3rem);
            font-weight: 800;
            letter-spacing: -0.035em;
            line-height: 1.1;
            color: var(--text);
            margin-bottom: 1rem;
        }

        .section-desc {
            font-size: 0.98rem;
            color: var(--text-muted);
            font-weight: 300;
            max-width: 520px;
            line-height: 1.8;
        }

        /* ── SCROLL REVEAL ────────────────────────────────────────────── */
        .reveal {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
        .reveal-delay-5 { transition-delay: 0.5s; }
        .reveal-delay-6 { transition-delay: 0.6s; }

        /* ── STATS BAR ────────────────────────────────────────────────── */
        #stats {
            padding: 0;
            background: var(--surface);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }

        .stats-grid {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .stat-item {
            padding: 2.5rem 3rem;
            border-right: 1px solid var(--border);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .stat-item::before {
            content: '';
            position: absolute;
            top: 0; left: 50%; right: 0;
            width: 60%;
            margin-left: -30%;
            height: 2px;
            background: linear-gradient(to right, transparent, var(--accent), transparent);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .stat-item:hover::before { opacity: 1; }
        .stat-item:last-child { border-right: none; }

        .stat-number {
            font-family: var(--display);
            font-size: clamp(2.6rem, 5vw, 4.2rem);
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.04em;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .stat-accent { color: var(--accent); }

        .stat-label {
            font-family: var(--mono);
            font-size: 0.66rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        /* ── SERVICES ─────────────────────────────────────────────────── */
        #services {
            background: var(--bg);
            position: relative;
        }

        #services::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--border), transparent);
        }

        .dot-bg {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.35;
            pointer-events: none;
        }

        .services-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: end;
            margin-bottom: 4rem;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .service-card {
            background: var(--surface);
            padding: 2.4rem 2.2rem;
            transition: background 0.25s;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(to right, var(--accent), var(--accent-2));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.38s ease;
        }

        .service-card:hover { background: var(--surface-2); }
        .service-card:hover::before { transform: scaleX(1); }

        .service-icon {
            width: 38px;
            height: 38px;
            margin-bottom: 1.4rem;
            color: var(--accent);
        }

        .service-tag {
            font-family: var(--mono);
            font-size: 0.6rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 0.45rem;
            opacity: 0.65;
        }

        .service-title {
            font-family: var(--display);
            font-size: 1.12rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.7rem;
            letter-spacing: -0.02em;
        }

        .service-desc {
            font-size: 0.875rem;
            color: var(--text-muted);
            line-height: 1.72;
            font-weight: 300;
        }

        /* ── WHY US ───────────────────────────────────────────────────── */
        #why {
            background: var(--surface);
            border-top: 1px solid var(--border);
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem 6rem;
            margin-top: 4rem;
        }

        .why-item { display: flex; gap: 1.5rem; }

        .why-number {
            font-family: var(--mono);
            font-size: 0.66rem;
            color: var(--accent);
            opacity: 0.55;
            padding-top: 0.2rem;
            flex-shrink: 0;
            letter-spacing: 0.08em;
        }

        .why-title {
            font-family: var(--display);
            font-size: 1.08rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.55rem;
            letter-spacing: -0.02em;
        }

        .why-desc {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.8;
            font-weight: 300;
        }

        /* ── PROJECTS ─────────────────────────────────────────────────────── */
        #projects {
            background: var(--bg);
            border-top: 1px solid var(--border);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .project-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 2rem 1.8rem;
            transition: background 0.25s, border-color 0.25s, transform 0.25s;
            position: relative;
            overflow: hidden;
        }

        .project-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent-glow), transparent 60%);
            opacity: 0;
            transition: opacity 0.35s;
            pointer-events: none;
        }

        .project-card:hover {
            background: var(--surface-2);
            border-color: var(--border-bright);
            transform: translateY(-3px);
        }

        .project-card:hover::after { opacity: 1; }

        .project-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: var(--surface-2);
            border: 1px solid var(--border-bright);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.3rem;
            color: var(--accent);
            flex-shrink: 0;
            transition: border-color 0.25s, background 0.25s;
        }

        .project-card:hover .project-icon {
            background: var(--accent-glow);
            border-color: var(--accent);
        }

        .project-icon svg {
            width: 24px;
            height: 24px;
        }

        .project-name {
            font-family: var(--display);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
        }

        .project-tag {
            font-family: var(--mono);
            font-size: 0.58rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--accent);
            opacity: 0.65;
            margin-bottom: 0.7rem;
        }

        .project-desc {
            font-size: 0.865rem;
            color: var(--text-muted);
            line-height: 1.74;
            font-weight: 300;
        }

        @media (max-width: 960px) {
            .projects-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 640px) {
            .projects-grid { grid-template-columns: 1fr; }
        }

        /* ── CONTACT ──────────────────────────────────────────────────── */
        #contact {
            background: var(--bg);
            border-top: 1px solid var(--border);
        }

        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            margin-top: 4rem;
        }

        .contact-block { margin-bottom: 2.4rem; }

        .contact-block-label {
            font-family: var(--mono);
            font-size: 0.6rem;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 0.5rem;
        }

        .contact-block-value {
            font-size: 1rem;
            color: var(--text);
        }

        .contact-block-value a {
            color: var(--accent);
            text-decoration: none;
            transition: opacity 0.2s;
        }

        .contact-block-value a:hover { opacity: 0.7; }

        .contact-block-value.small {
            font-size: 0.88rem;
            color: var(--text-muted);
            font-weight: 300;
            line-height: 1.7;
        }

        .contact-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .contact-cta-box {
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 2.8rem;
            background: var(--surface);
            position: relative;
            overflow: hidden;
        }

        .contact-cta-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(to right, var(--accent), var(--accent-2));
        }

        .contact-cta-box h3 {
            font-family: var(--display);
            font-size: 1.45rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            margin-bottom: 0.8rem;
        }

        .contact-cta-box p {
            font-size: 0.9rem;
            color: var(--text-muted);
            font-weight: 300;
            line-height: 1.75;
            margin-bottom: 2rem;
        }

        .social-links {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 2rem;
        }

        .social-link {
            font-family: var(--mono);
            font-size: 0.66rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted);
            text-decoration: none;
            border: 1px solid var(--border);
            padding: 0.5rem 1.1rem;
            border-radius: 3px;
            transition: color 0.2s, border-color 0.2s;
        }

        .social-link:hover {
            color: var(--text);
            border-color: var(--text-muted);
        }

        /* ── FOOTER ───────────────────────────────────────────────────── */
        footer {
            border-top: 1px solid var(--border);
            padding: 2rem 3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-logo img {
            height: 22px;
            width: auto;
            display: block;
            filter: brightness(0) invert(1);
            opacity: 0.35;
        }

        .footer-text {
            font-family: var(--mono);
            font-size: 0.6rem;
            letter-spacing: 0.1em;
            color: var(--text-dim);
            text-transform: uppercase;
        }

        /* ── KEYFRAMES ────────────────────────────────────────────────── */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* ── RESPONSIVE ───────────────────────────────────────────────── */
        @media (max-width: 960px) {
            .services-header { grid-template-columns: 1fr; gap: 1.5rem; }
            .services-grid   { grid-template-columns: 1fr 1fr; }
            .why-grid        { grid-template-columns: 1fr; gap: 2.5rem; }
            .contact-layout  { grid-template-columns: 1fr; gap: 3rem; }
        }

        @media (max-width: 640px) {
            nav {
                top: 0.7rem;
                width: calc(100% - 1.6rem);
                padding: 0 0.7rem 0 1.2rem;
                height: 54px;
            }
            nav.scrolled { top: 0.5rem; height: 50px; }
            .nav-links { display: none; }
            section { padding: 5rem 1.5rem; }
            .services-grid { grid-template-columns: 1fr; }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .stat-item {
                border-right: none;
                border-bottom: 1px solid var(--border);
            }
            .stat-item:last-child { border-bottom: none; }
        }

        /* ── CONSULTATION MODAL ───────────────────────────────────────── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 3rem 1.5rem;
            overflow-y: auto;
            background: rgba(4, 6, 11, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        html.light .modal-overlay { background: rgba(30, 40, 58, 0.42); }

        .modal-overlay.open { opacity: 1; visibility: visible; }

        .modal {
            position: relative;
            width: 100%;
            max-width: 720px;
            margin: auto;
            background: var(--surface);
            border: 1px solid var(--border-bright);
            border-radius: 3px;
            transform: translateY(18px) scale(0.985);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .modal-overlay.open .modal { transform: translateY(0) scale(1); }

        /* Accent hairline along the top edge */
        .modal::before {
            content: '';
            position: absolute;
            top: -1px; left: -1px; right: -1px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
        }

        .modal-close {
            position: absolute;
            top: 1.1rem;
            right: 1.1rem;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: 1px solid var(--border-bright);
            border-radius: 3px;
            color: var(--text-muted);
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
        }

        .modal-close:hover {
            color: var(--text);
            border-color: var(--text-muted);
            background: var(--surface-2);
        }

        .modal-header {
            padding: 2.6rem 2.6rem 1.8rem;
            border-bottom: 1px solid var(--border);
        }

        .modal-eyebrow {
            font-family: var(--mono);
            font-size: 0.62rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--accent);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid rgba(0, 201, 167, 0.3);
            padding: 0.35rem 0.8rem;
            border-radius: 3px;
            margin-bottom: 1.4rem;
        }

        .modal-title {
            font-family: var(--display);
            font-size: clamp(1.7rem, 3.4vw, 2.3rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.1;
            color: var(--text);
            margin-bottom: 0.9rem;
        }

        .modal-sub {
            font-size: 0.92rem;
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.7;
            max-width: 46ch;
        }

        .modal-body { padding: 2.2rem 2.6rem 2.6rem; }

        .field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.2rem;
        }

        .field { margin-bottom: 1.6rem; }

        .field-label {
            display: block;
            font-family: var(--mono);
            font-size: 0.62rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 0.6rem;
        }

        .field-label .req { color: var(--accent); }

        .field input,
        .field textarea {
            width: 100%;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 0.85rem 1rem;
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.95rem;
            font-weight: 300;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .field textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.65;
        }

        .field input::placeholder,
        .field textarea::placeholder { color: var(--text-dim); }

        .field input:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .field input:user-invalid { border-color: #e05561; }

        /* Service picker — radio cards instead of the reference's dropdown */
        .service-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
        }

        .service-option {
            position: relative;
            display: block;
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 0.95rem 1rem 0.95rem 2.5rem;
            cursor: pointer;
            background: var(--bg);
            transition: border-color 0.2s, background 0.2s;
        }

        .service-option:hover { border-color: var(--border-bright); }

        .service-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        /* Custom radio mark */
        .service-option::before {
            content: '';
            position: absolute;
            left: 1rem;
            top: 1.15rem;
            width: 12px;
            height: 12px;
            border: 1px solid var(--border-bright);
            border-radius: 50%;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }

        .service-option:has(input:checked) {
            border-color: var(--accent);
            background: var(--accent-glow);
        }

        .service-option:has(input:checked)::before {
            border-color: var(--accent);
            background: var(--accent);
            box-shadow: inset 0 0 0 2px var(--surface);
        }

        .service-option:has(input:focus-visible) {
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .service-option-title {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 0.2rem;
        }

        .service-option-desc {
            display: block;
            font-size: 0.78rem;
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.55;
        }

        .modal-privacy {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 0.85rem 1rem;
            margin-bottom: 1.6rem;
            font-size: 0.78rem;
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .modal-privacy svg { flex-shrink: 0; color: var(--accent); }

        .modal-submit {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            background: var(--accent);
            color: var(--bg);
            border: none;
            border-radius: 3px;
            padding: 1.1rem 1.4rem;
            cursor: pointer;
            text-align: left;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .modal-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(0, 201, 167, 0.32);
        }

        .modal-submit-title {
            display: block;
            font-family: var(--display);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        .modal-submit-sub {
            display: block;
            font-family: var(--mono);
            font-size: 0.63rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0.7;
            margin-top: 0.2rem;
        }

        .modal-submit-arrow {
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--bg);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .modal-submit:hover .modal-submit-arrow { transform: translateX(3px); }

        /* Success state, swapped in after submit */
        .modal-success {
            display: none;
            padding: 3.4rem 2.6rem;
            text-align: center;
        }

        .modal.sent .modal-body,
        .modal.sent .modal-header { display: none; }

        .modal.sent .modal-success { display: block; }

        .modal-success-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 1.5rem;
            border: 1px solid var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
        }

        .modal-success h3 {
            font-family: var(--display);
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--text);
            margin-bottom: 0.8rem;
        }

        .modal-success p {
            font-size: 0.92rem;
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.7;
            max-width: 42ch;
            margin: 0 auto;
        }

        .modal-success a { color: var(--accent); text-decoration: none; }
        .modal-success a:hover { text-decoration: underline; }

        @media (max-width: 700px) {
            .modal-overlay { padding: 1.5rem 1rem; }
            .modal-header { padding: 2.2rem 1.5rem 1.5rem; }
            .modal-body { padding: 1.8rem 1.5rem 2rem; }
            .modal-success { padding: 2.6rem 1.5rem; }
            .field-row { grid-template-columns: 1fr; gap: 0; }
            .service-options { grid-template-columns: 1fr; }
        }