/* =========================

           GLOBAL

        ========================= */



        :root {

            --black: #08090c;

            --dark: #0d0f14;

            --text: #111318;

            --muted: #6c7078;

            --border: rgba(0, 0, 0, 0.08);

            --white: #ffffff;

            --blue: #4f7cff;

            --purple: #8b5cf6;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        html {

            scroll-behavior: smooth;

        }



        body {

            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",

                Roboto, Helvetica, Arial, sans-serif;

            color: var(--text);

            background: #ffffff;

            overflow-x: hidden;

        }



        a {

            text-decoration: none;

        }



        .section {

            padding: 110px 0;

        }



        .section-label {

            font-size: 12px;

            font-weight: 700;

            letter-spacing: 2px;

            text-transform: uppercase;

            margin-bottom: 18px;

        }



        .section-title {

            font-size: clamp(36px, 5vw, 62px);

            line-height: 1.05;

            font-weight: 700;

            letter-spacing: -2px;

        }



        .section-description {

            color: var(--muted);

            font-size: 18px;

            line-height: 1.7;

            max-width: 650px;

        }





        /* =========================

           NAVBAR

        ========================= */

        /* =========================
   NAVBAR
========================= */

        .navbar {
            padding: 18px 0;
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            z-index: 1000;
        }

        .navbar-brand {
            font-size: 23px;
            font-weight: 800;
            letter-spacing: -1.2px;
            color: #111318;
        }

        .navbar-brand span {
            color: var(--blue);
        }

        .navbar-nav {
            gap: 4px;
        }

        .nav-link {
            position: relative;
            color: #555b66 !important;
            font-size: 14px;
            font-weight: 600;
            padding: 10px 12px !important;
            margin: 0 !important;
            transition: color 0.2s ease;
        }

        .nav-link:hover {
            color: #111318 !important;
        }

        .nav-link:not(.nav-button)::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 3px;
            height: 2px;
            background: var(--blue);
            border-radius: 10px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.2s ease;
        }

        .nav-link:not(.nav-button):hover::after {
            transform: scaleX(1);
        }

        .nav-button {
            margin-left: 10px !important;
            padding: 11px 18px !important;
            border-radius: 50px;
            background: #111318;
            color: #ffffff !important;
            font-size: 13px;
            font-weight: 700;
            transition:
                background 0.2s ease,
                transform 0.2s ease;
        }

        .nav-button:hover {
            background: var(--blue);
            color: #ffffff !important;
            transform: translateY(-1px);
        }

        .navbar-toggler {
            border: 0;
            padding: 6px;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        @media (max-width: 991.98px) {

            .navbar {
                padding: 15px 0;
            }

            .navbar-collapse {
                padding: 18px 0 8px;
            }

            .navbar-nav {
                gap: 2px;
            }

            .nav-link {
                padding: 11px 0 !important;
            }

            .nav-link:not(.nav-button)::after {
                display: none;
            }

            .nav-button {
                display: inline-block;
                margin: 10px 0 0 !important;
                padding: 11px 18px !important;
            }
        }




   /* =========================================================
   PROGENIQ — HERO SECTION
========================================================= */

.hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 78vh;
    min-height: 620px;

    overflow: hidden;

    background: #050a12;
    color: #ffffff;
}


/* =========================================================
   HERO VIDEO
========================================================= */

.hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: -3;
}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.hero-video-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 10, 0.96) 0%,
            rgba(2, 5, 10, 0.90) 45%,
            rgba(2, 5, 10, 0.82) 100%
        );

    z-index: -2;

    pointer-events: none;
}


/* =========================================================
   TECHNOLOGY GRID
========================================================= */

.hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    z-index: -1;

    pointer-events: none;
}


/* =========================================================
   HERO INNER
========================================================= */

.hero-inner {
    position: relative;
    z-index: 10;

    height: 100%;

    display: flex;
    align-items: center;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 11;

    padding-top: 30px;
    padding-bottom: 60px;
}


/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 25px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #1677ff;

    box-shadow:
        0 0 12px rgba(22, 119, 255, 0.85);
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
    position: relative;
    z-index: 12;

    max-width: 950px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(3.2rem, 6vw, 6.5rem);
    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -0.055em;

    text-wrap: balance;
}

.typing-line {
    display: inline;
}

.typing-cursor {
    display: inline-block;

    width: 4px;
    height: 0.85em;

    margin-left: 8px;

    vertical-align: -0.05em;

    background: #1677ff;

    animation: typingCursor 0.8s infinite;
}

@keyframes typingCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   START A CONVERSATION
========================================================= */

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 190px;

    padding: 15px 24px;

    border: 2px solid #ffffff !important;
    border-radius: 7px;

    background: #ffffff !important;
    color: #080b12 !important;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(255, 255, 255, 0.15);

    transition: all 0.25s ease;
}

.hero-btn-primary:hover {
    background: #e8f1ff !important;
    border-color: #e8f1ff !important;

    color: #080b12 !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 32px rgba(255, 255, 255, 0.22);
}


/* =========================================================
   SEE WHAT WE BUILD
========================================================= */

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 175px;

    padding: 15px 24px;

    border: 2px solid #ffffff !important;
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    backdrop-filter: blur(8px);

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.25);

    transition: all 0.25s ease;
}

.hero-btn-secondary:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;

    color: #080b12 !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(255, 255, 255, 0.18);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .hero-actions {
        gap: 10px;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        min-width: auto;
        padding: 13px 18px;
        font-size: 12px;
    }

}






/* =========================================================
   HERO META
========================================================= */

.hero-meta {
    position: relative;
    z-index: 12;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 28px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-meta i {
    color: #1677ff;
    font-size: 13px;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll-hint {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    z-index: 15;

    white-space: nowrap;
}

.hero-scroll-hint i {
    font-size: 13px;

    animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {

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

    50% {
        transform: translateY(5px);
    }

}


/* =========================================================
   HERO REVEAL ANIMATION
========================================================= */

.hero-reveal {
    animation: heroReveal 0.9s ease forwards;
}

@keyframes heroReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .hero {
        height: 75vh;
        min-height: 600px;
    }

    .hero-title {
        max-width: 800px;

        font-size: clamp(3rem, 8vw, 5rem);
    }

    .hero-text {
        max-width: 600px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .hero {
        height: 78vh;
        min-height: 600px;
    }

    .hero-video {
        object-position: center;
    }

    .hero-video-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 10, 20, 0.78) 0%,
                rgba(5, 10, 20, 0.58) 100%
            );
    }

    .hero-grid {
        background-size: 45px 45px;
    }

    .hero-inner {
        align-items: center;
    }

    .hero-content {
        padding-top: 25px;
        padding-bottom: 55px;
    }

    .hero-badge {
        margin-bottom: 20px;

        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 12vw, 4.5rem);
        line-height: 0.98;
    }

    .hero-text {
        margin-top: 22px;

        font-size: 15px;
        line-height: 1.6;
    }

    .hero-buttons {
        margin-top: 26px;

        gap: 10px;
    }

    .hero .btn-main,
    .hero .btn-outline {
        padding: 13px 17px;

        font-size: 12px;
    }

    .hero-meta {
        gap: 12px 18px;

        margin-top: 23px;

        font-size: 9px;
    }

    .hero-scroll-hint {
        bottom: 18px;

        font-size: 8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .hero {
        min-height: 580px;
    }

    .hero-title {
        font-size: 2.9rem;
    }

    .hero-text {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero .btn-main,
    .hero .btn-outline {
        width: auto;
    }

}



        /* =========================

           DARK STRIP

        ========================= */


        /* =========================================================
   PROGENIQ — TRUST STRIP
========================================================= */

.trust-strip {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #e8ebef;
    padding: 0;
}

.trust-item {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 25px 20px;

    border-right: 1px solid #e8ebef;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.trust-item:hover {
    background: #f7faff;
}

/* NUMBER */

.trust-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border: 1px solid #dce3ec;
    border-radius: 50%;

    color: #1677ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* TITLE */

.trust-title {
    color: #171a1f;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* BLUE ACCENT */

.trust-item::after {
    content: "";

    position: absolute;

    left: 20px;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #1677ff;

    transition: width 0.3s ease;
}

.trust-item:hover::after {
    width: 45px;
}

/* REMOVE RIGHT BORDER FROM LAST ITEM */

.trust-strip .col-lg-3:last-child .trust-item {
    border-right: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .trust-item {
        min-height: 90px;
        border-right: none;
        border-bottom: 1px solid #e8ebef;
    }

    .trust-strip .col-6:nth-child(odd) .trust-item {
        border-right: 1px solid #e8ebef;
    }

}

@media (max-width: 575.98px) {

    .trust-item {
        min-height: 82px;

        padding: 18px 12px;

        gap: 10px;
    }

    .trust-number {
        width: 27px;
        height: 27px;

        font-size: 9px;
    }

    .trust-title {
        font-size: 12px;
    }

}

      





        /* =========================

           ECOSYSTEM

        ========================= */



        .ecosystem {

            background: #0b0c0f;

            color: white;

        }



        .ecosystem .section-label {

            color: #7190ff;

        }



        .ecosystem .section-description {

            color: #92969e;

        }



        .ecosystem-card {

            height: 100%;

            padding: 35px;

            border: 1px solid rgba(255,255,255,.08);

            border-radius: 20px;

            background: rgba(255,255,255,.025);

            transition: .3s;

        }



        .ecosystem-card:hover {

            transform: translateY(-6px);

            border-color: rgba(79,124,255,.35);

            background: rgba(255,255,255,.04);

        }



        .ecosystem-icon {

            width: 48px;

            height: 48px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 14px;

            background: rgba(79,124,255,.12);

            color: #7893ff;

            font-size: 20px;

            margin-bottom: 25px;

        }



        .ecosystem-card h3 {

            font-size: 22px;

            margin-bottom: 12px;

        }



        .ecosystem-card p {

            color: #8d9198;

            line-height: 1.7;

            margin-bottom: 0;

        }





        /* =========================

           SERVICES

        ========================= */



        .service-card {

            border: 1px solid var(--border);

            border-radius: 20px;

            padding: 35px;

            height: 100%;

            transition: .3s;

            background: white;

        }



        .service-card:hover {

            transform: translateY(-7px);

            box-shadow: 0 20px 50px rgba(0,0,0,.07);

        }



        .service-number {

            font-size: 12px;

            color: #999;

            font-weight: 700;

            margin-bottom: 35px;

        }



        .service-card h3 {

            font-size: 25px;

            margin-bottom: 14px;

        }



        .service-card p {

            color: var(--muted);

            line-height: 1.7;

        }



        .service-list {

            list-style: none;

            padding: 0;

            margin-top: 25px;

        }



        .service-list li {

            padding: 8px 0;

            font-size: 14px;

            color: #555;

        }



        .service-list i {

            margin-right: 8px;

            color: var(--blue);

        }





        /* =========================

           WHAT WE BUILD

        ========================= */



        .build-section {

            background: #f7f8fa;

        }



        .build-card {

            background: white;

            border-radius: 20px;

            border: 1px solid rgba(0,0,0,.06);

            padding: 30px;

            height: 100%;

            transition: .3s;

        }



        .build-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 18px 45px rgba(0,0,0,.07);

        }



        .build-icon {

            font-size: 25px;

            margin-bottom: 22px;

        }



        .build-card h4 {

            font-size: 19px;

            margin-bottom: 10px;

        }



        .build-card p {

            color: #747880;

            line-height: 1.6;

            font-size: 14px;

            margin: 0;

        }





        /* =========================

           WORK

        ========================= */



        .work-card {

            border-radius: 24px;

            overflow: hidden;

            background: #111;

            color: white;

            min-height: 380px;

            position: relative;

        }



        .work-content {

            position: absolute;

            inset: auto 0 0 0;

            padding: 35px;

            background: linear-gradient(transparent, rgba(0,0,0,.9));

            padding-top: 120px;

        }



        .work-tag {

            font-size: 10px;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            color: #91a5ff;

            font-weight: 700;

        }



        .work-content h3 {

            margin-top: 8px;

            margin-bottom: 8px;

        }



        .work-content p {

            color: #aaa;

            font-size: 14px;

            margin: 0;

        }



        .mockup {

            position: absolute;

            width: 80%;

            height: 210px;

            left: 10%;

            top: 50px;

            border-radius: 12px;

            background: linear-gradient(135deg, #20242c, #101216);

            border: 1px solid rgba(255,255,255,.08);

            padding: 20px;

            box-shadow: 0 20px 50px rgba(0,0,0,.3);

        }



        .mockup-line {

            height: 8px;

            border-radius: 10px;

            background: rgba(255,255,255,.1);

            margin-bottom: 12px;

        }



        .mockup-line.large {

            width: 65%;

            height: 20px;

        }



        .mockup-line.medium {

            width: 45%;

        }



        .mockup-box {

            width: 30%;

            height: 60px;

            display: inline-block;

            margin-right: 2%;

            margin-top: 15px;

            border-radius: 8px;

            background: rgba(79,124,255,.15);

        }





        /* =========================

           APPROACH

        ========================= */



        .approach-number {

            font-size: 13px;

            color: var(--blue);

            font-weight: 700;

            margin-bottom: 20px;

        }



        .approach-card {

            padding-right: 30px;

        }



        .approach-card h3 {

            font-size: 22px;

            margin-bottom: 12px;

        }



        .approach-card p {

            color: var(--muted);

            line-height: 1.7;

        }





        /* =========================

           CTA

        ========================= */



        .cta {

            padding: 120px 0;

            background:

                radial-gradient(circle at 50% 0%, rgba(79,124,255,.18), transparent 40%),

                #0b0c0f;

            color: white;

            text-align: center;

        }



        .cta h2 {

            font-size: clamp(42px, 6vw, 72px);

            letter-spacing: -3px;

            margin-bottom: 20px;

        }



        .cta p {

            color: #9498a0;

            max-width: 580px;

            margin: 0 auto 30px;

            font-size: 17px;

            line-height: 1.7;

        }





        /* =========================

           FOOTER

        ========================= */



        footer {

            background: #08090b;

            color: white;

            padding: 55px 0 30px;

            border-top: 1px solid rgba(255,255,255,.06);

        }



        .footer-brand {

            font-size: 22px;

            font-weight: 800;

        }



        .footer-brand span {

            color: #6685ff;

        }



        .footer-text {

            color: #777b83;

            font-size: 13px;

            margin-top: 12px;

            max-width: 320px;

            line-height: 1.6;

        }



        .footer-heading {

            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: #aaa;

            margin-bottom: 15px;

        }



        .footer-link {

            display: block;

            color: #777b83;

            font-size: 13px;

            margin-bottom: 9px;

        }



        .footer-link:hover {

            color: white;

        }



        .copyright {

            border-top: 1px solid rgba(255,255,255,.06);

            margin-top: 45px;

            padding-top: 22px;

            color: #555960;

            font-size: 12px;

        }





        /* =========================

           MOBILE

        ========================= */



        @media (max-width: 991px) {



            .hero {

                min-height: auto;

                padding: 90px 0;

            }



            .hero-visual {

                margin-top: 50px;

                height: 430px;

            }



            .nav-link {

                margin-left: 0;

                margin-top: 10px;

            }



            .nav-button {

                display: inline-block;

                margin-left: 0;

                margin-top: 10px;

            }

        }



        @media (max-width: 576px) {



            .section {

                padding: 75px 0;

            }



            .hero h1 {

                font-size: 49px;

                letter-spacing: -3px;

            }



            .hero-text {

                font-size: 17px;

            }



            .hero-visual {

                transform: scale(.82);

                transform-origin: center;

                margin-top: 20px;

                height: 390px;

            }



            .visual-card {

                min-width: 150px;

            }



            .orbit-two {

                width: 340px;

                height: 340px;

            }



            .orbit-one {

                width: 230px;

                height: 230px;

            }

        }
/* =========================================================
   PROGENIQ VISUAL REFINEMENT
   ========================================================= */

:root {
    --pro-blue: #2563eb;
    --pro-indigo: #4f46e5;
    --pro-ink: #0b1020;
    --pro-slate: #5f6878;
    --pro-line: #e7eaf0;
    --pro-soft: #f6f8fc;
    --pro-radius: 22px;
}

body {
    color: var(--pro-ink);
    background: #fff;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1180px;
}

.navbar {
    padding: 16px 0;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(15,23,42,.07);
    box-shadow: 0 5px 24px rgba(15,23,42,.035);
}

.navbar-brand {
    font-size: 24px;
    letter-spacing: -1.2px;
    color: var(--pro-ink);
}

.navbar-brand span { color: var(--pro-blue); }

.nav-link {
    color: #5f6673 !important;
    font-weight: 600;
    margin-left: 22px;
    transition: color .2s ease;
}

.nav-link:hover { color: var(--pro-blue) !important; }

.nav-button {
    margin-left: 22px;
    padding: 11px 18px;
    background: var(--pro-ink);
    border: 1px solid var(--pro-ink);
    box-shadow: 0 7px 18px rgba(11,16,32,.12);
}

.nav-button:hover {
    background: var(--pro-blue) !important;
    border-color: var(--pro-blue);
}

.hero {
    min-height: 760px;
    padding: 85px 0 90px;
    background:
        radial-gradient(circle at 78% 20%, rgba(37,99,235,.13), transparent 27%),
        radial-gradient(circle at 92% 70%, rgba(79,70,229,.09), transparent 25%),
        linear-gradient(180deg, #fff 0%, #f9fbff 100%);
}

.hero-grid {
    opacity: .23;
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
}

.hero-content { padding-right: 25px; }

.hero-badge {
    margin-bottom: 22px;
    padding: 9px 14px;
    color: #315bc5;
    background: #eef4ff;
    border-color: #dbe7ff;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 25px;
    font-size: clamp(48px, 6.2vw, 78px);
    line-height: 1.01;
    letter-spacing: -4.2px;
    font-weight: 800;
}

.hero h1 .gradient {
    background: linear-gradient(100deg, #111827 5%, #2563eb 55%, #6366f1 100%);
}

.hero-text {
    max-width: 610px;
    margin-bottom: 32px;
    color: #626b7b;
    font-size: 18px;
    line-height: 1.75;
}

.hero-buttons { gap: 13px; }

.btn-main,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 21px;
    border-radius: 12px;
    font-size: 14px;
}

.btn-main {
    background: var(--pro-ink);
    box-shadow: 0 10px 25px rgba(11,16,32,.15);
}

.btn-main:hover {
    background: var(--pro-blue);
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid #dce1e9;
    background: rgba(255,255,255,.8);
}

.btn-outline:hover {
    border-color: #b8c2d2;
    background: #fff;
}

.hero-visual {
    height: 520px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(239,244,255,.72));
    border: 1px solid rgba(37,99,235,.11);
    box-shadow: 0 30px 80px rgba(31,41,55,.10);
    overflow: hidden;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.14), transparent 64%);
    filter: blur(2px);
}

.orbit { border-color: rgba(37,99,235,.16); }

.visual-core {
    width: 150px;
    height: 150px;
    background: linear-gradient(145deg, #111827, #26314b);
    box-shadow: 0 0 0 12px rgba(37,99,235,.055), 0 20px 55px rgba(11,16,32,.24);
}

.visual-card {
    padding: 14px 16px;
    min-width: 170px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.91);
    box-shadow: 0 15px 35px rgba(15,23,42,.10);
    backdrop-filter: blur(12px);
}

.visual-card small { color: #7a8494; }
.visual-card strong { color: #182033; }

.trust-strip {
    padding: 24px 0;
    background: #0b1020;
    border: 0;
}

.trust-item {
    padding: 7px 10px;
    color: #c8d0df;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
}

.trust-item::before {
    content: "✓";
    margin-right: 8px;
    color: #7aa2ff;
}

.section { padding: 105px 0; }

.section-label {
    color: var(--pro-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.section-title {
    color: var(--pro-ink);
    font-size: clamp(36px, 4.5vw, 58px);
    letter-spacing: -2.8px;
    font-weight: 800;
}

.section-description {
    color: #697384;
    font-size: 17px;
    line-height: 1.75;
}

.ecosystem { background: #fff; }

.ecosystem-card,
.service-card,
.build-card,
.work-card,
.approach-card {
    border: 1px solid var(--pro-line);
    border-radius: var(--pro-radius);
    background: #fff;
    box-shadow: 0 10px 35px rgba(15,23,42,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ecosystem-card:hover,
.service-card:hover,
.build-card:hover,
.work-card:hover,
.approach-card:hover {
    transform: translateY(-5px);
    border-color: #d5ddeb;
    box-shadow: 0 18px 45px rgba(15,23,42,.09);
}

.ecosystem-icon,
.build-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--pro-blue);
    background: #eef4ff;
}

.service-card { min-height: 100%; }

.service-number,
.approach-number {
    color: #9aa4b4;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
}

.service-list li {
    color: #606a79;
    line-height: 1.65;
}

.build-section {
    background: var(--pro-soft);
    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
}

.build-card { background: rgba(255,255,255,.82); }

.mockup {
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #f9fbff;
    box-shadow: 0 20px 50px rgba(15,23,42,.10);
}

.cta {
    position: relative;
    overflow: hidden;
    background: #0b1020;
    padding: 105px 0;
}

.cta::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: -230px;
    border-radius: 50%;
    background: rgba(37,99,235,.18);
    filter: blur(20px);
}

.cta h2 { position: relative; color: #fff; }
.cta p { position: relative; color: #9ba5b8; }

footer { padding-top: 65px; }

@media (max-width: 991px) {
    .hero {
        min-height: auto;
        padding: 72px 0 75px;
    }

    .hero-content { padding-right: 0; }

    .hero h1 { letter-spacing: -3.2px; }

    .hero-visual {
        margin-top: 55px;
        height: 470px;
    }

    .navbar-collapse {
        padding: 15px 0 5px;
    }

    .nav-link { margin-left: 0; padding: 10px 0; }
    .nav-button { margin-left: 0; margin-top: 7px; }
}

@media (max-width: 575px) {
    .section { padding: 78px 0; }

    .hero { padding: 58px 0 60px; }

    .hero h1 {
        font-size: 46px;
        letter-spacing: -2.8px;
    }

    .hero-text { font-size: 16px; }

    .hero-buttons > a {
        width: 100%;
    }

    .hero-visual {
        height: 380px;
        margin-top: 35px;
        border-radius: 24px;
    }

    .visual-core {
        width: 120px;
        height: 120px;
        font-size: 11px;
    }

    .visual-card {
        min-width: 135px;
        padding: 11px 12px;
    }

    .visual-card strong { font-size: 12px; }
    .visual-card small { font-size: 9px; }

    .orbit-one { width: 210px; height: 210px; }
    .orbit-two { width: 300px; height: 300px; }
}


/* =========================================================
   PROGENIQ — ABOUT
========================================================= */

.about-section {
    position: relative;

    padding: 70px 0;

    background: #ffffff;
    color: #111318;

    overflow: hidden;
}


/* =========================================================
   LAYOUT
========================================================= */

.about-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: center;
}


/* =========================================================
   IMAGE SIDE
========================================================= */

.about-visual {
    position: relative;

    padding-left: 32px;
}

.about-number {
    position: absolute;

    left: 0;
    top: 5px;

    writing-mode: vertical-rl;

    color: #1677ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* IMAGE */

.about-image-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 22px;

    background: #f3f6fa;

    box-shadow:
        0 20px 55px rgba(15, 23, 42, 0.10);
}

.about-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 22px;

    transition: transform 0.6s ease;
}

.about-image-wrapper:hover .about-image {
    transform: scale(1.02);
}


/* IMAGE CAPTION */

.about-image-caption {
    display: flex;
    justify-content: space-between;

    margin-top: 9px;
    padding: 0 3px;

    color: #9aa0a8;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


/* =========================================================
   CONTENT
========================================================= */

.about-content {
    max-width: 600px;
}


/* KICKER */

.about-kicker {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    color: #1677ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2.3px;
}

.about-kicker::before {
    content: "";

    width: 24px;
    height: 1px;

    background: #1677ff;
}


/* HEADING */

.about-content h2 {
    margin: 0;

    max-width: 570px;

    color: #111318;

    font-size: clamp(2.3rem, 3.5vw, 3.8rem);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -0.05em;
}

.about-content h2 span {
    color: #8a919b;
}


/* LEAD */

.about-lead {
    max-width: 530px;

    margin: 20px 0 12px;

    color: #252a32;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 600;
}


/* BODY */

.about-text {
    max-width: 530px;

    margin: 0;

    color: #707781;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.about-capabilities {
    margin-top: 25px;

    border-top: 1px solid #e3e6ea;
}

.about-capability {
    display: grid;

    grid-template-columns: 38px 1fr 22px;

    align-items: center;

    gap: 12px;

    padding: 13px 0;

    border-bottom: 1px solid #e3e6ea;

    transition:
        padding-left 0.25s ease,
        background 0.25s ease;
}

.about-capability:hover {
    padding-left: 6px;
}

.capability-number {
    color: #1677ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.about-capability strong {
    display: block;

    margin-bottom: 2px;

    color: #16191e;

    font-size: 13px;

    font-weight: 800;
}

.about-capability p {
    margin: 0;

    color: #858c95;

    font-size: 11px;

    line-height: 1.4;
}

.about-capability i {
    color: #9ba1a9;

    font-size: 13px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.about-capability:hover i {
    color: #1677ff;

    transform: translate(2px, -2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .about-section {
        padding: 75px 0;
    }

    .about-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-content {
        max-width: 750px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .about-section {
        padding: 65px 0;
    }

    .about-layout {
        gap: 35px;
    }

    .about-visual {
        padding-left: 24px;
    }

    .about-content h2 {
        font-size: 2.45rem;
    }

    .about-lead {
        font-size: 16px;
    }

    .about-text {
        font-size: 13px;
    }

}


/* =========================================================
   PROGENIQ — WHAT WE DO / SERVICES
========================================================= */

.services-section {
    position: relative;

    padding: 95px 0 110px;

    background: #f5f7fa;
    color: #111318;

    overflow: hidden;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.services-header {
    margin-bottom: 48px;
}

.services-kicker {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #1677ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.services-kicker span {
    display: block;

    width: 28px;
    height: 1px;

    background: #1677ff;
}


/* =========================================================
   HEADING AREA
========================================================= */

.services-heading-row {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);

    gap: 70px;

    align-items: end;
}

.services-heading-row h2 {
    max-width: 760px;

    margin: 0;

    color: #111318;

    font-size: clamp(2.8rem, 5vw, 5rem);

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -0.055em;
}

.services-heading-row h2 span {
    color: #7d8793;
}

.services-heading-row p {
    max-width: 400px;

    margin: 0;

    color: #68717d;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    overflow: hidden;

    border: 1px solid #e0e4e9;
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: #d2d8e0;

    box-shadow:
        0 22px 55px rgba(15, 23, 42, 0.10);
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.service-image {
    position: relative;

    height: 250px;

    overflow: hidden;

    background: #0b111a;
}

.service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}

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


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.service-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 18, 0.08) 0%,
            rgba(5, 10, 18, 0.35) 100%
        );

    pointer-events: none;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-number {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    background: rgba(5, 10, 18, 0.35);

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    backdrop-filter: blur(8px);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-card-content {
    position: relative;

    padding: 25px 27px 27px;
}

.service-card-content h3 {
    max-width: 500px;

    margin: 0 0 9px;

    color: #15181d;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.025em;
}

.service-card-content p {
    max-width: 540px;

    margin: 0;

    color: #707984;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   SERVICE TAGS
========================================================= */

.service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 17px;
}

.service-tags span {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border: 1px solid #dce1e7;
    border-radius: 4px;

    background: #ffffff;

    color: #737b85;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* =========================================================
   SERVICE LINK
========================================================= */

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 20px;

    color: #15181d;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.service-link i {
    font-size: 12px;
}

.service-link:hover {
    gap: 10px;

    color: #1677ff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .services-section {
        padding: 80px 0 90px;
    }

    .services-heading-row {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .services-heading-row p {
        max-width: 600px;
    }

    .services-grid {
        gap: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .services-section {
        padding: 70px 0 80px;
    }

    .services-header {
        margin-bottom: 38px;
    }

    .services-heading-row h2 {
        font-size: 2.8rem;
    }

    .services-heading-row p {
        font-size: 14px;
    }

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

        gap: 18px;
    }

    .service-image {
        height: 230px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .services-heading-row h2 {
        font-size: 2.45rem;
    }

    .service-image {
        height: 205px;
    }

    .service-card-content {
        padding: 22px;
    }

    .service-card-content h3 {
        font-size: 21px;
    }

    .service-card-content p {
        font-size: 13px;
    }

}

/* =========================================================
   PROGENIQ — OUR APPROACH
========================================================= */

.approach-section {
    padding: 90px 0;

    background: #ffffff;
    color: #111318;

    overflow: hidden;
}


/* SECTION HEADER */

.approach-header {
    margin-bottom: 55px;
}

.approach-kicker {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #1677ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.approach-kicker span {
    width: 26px;
    height: 1px;

    background: #1677ff;
}


/* HEADING */

.approach-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);

    align-items: end;
    gap: 60px;
}

.approach-heading-row h2 {
    max-width: 720px;

    margin: 0;

    color: #111318;

    font-size: clamp(2.7rem, 4.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
}

.approach-heading-row h2 span {
    color: #8a919b;
}

.approach-heading-row > p {
    max-width: 390px;

    margin: 0;

    color: #6f7782;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.approach-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid #e1e5eb;
    border-bottom: 1px solid #e1e5eb;
}


/* STEP */

.approach-step {
    min-width: 0;

    padding: 26px 22px 28px 0;
}

.approach-step + .approach-step {
    padding-left: 22px;

    border-left: 1px solid #e1e5eb;
}


/* STEP TOP */

.approach-step-top {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 42px;
    margin-bottom: 25px;
}

.approach-number {
    flex-shrink: 0;

    color: #1677ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.approach-step-line {
    flex: 1;

    height: 1px;

    background: #e1e5eb;
}

.approach-step-top i {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border: 1px solid #dfe5ed;
    border-radius: 12px;

    background: #f7f9fc;
    color: #1677ff;

    font-size: 17px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.approach-step:hover .approach-step-top i {
    background: #1677ff;
    border-color: #1677ff;
    color: #ffffff;

    transform: translateY(-3px);
}


/* STEP CONTENT */

.approach-step-content h3 {
    margin: 0 0 11px;

    color: #15181d;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.approach-step-content p {
    max-width: 250px;

    margin: 0;

    color: #737b86;

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER
========================================================= */

.approach-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 24px;
}

.approach-footer > p {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    color: #737b86;

    font-size: 12px;
}

.approach-footer-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #1677ff;
    box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.10);
}


/* CTA */

.approach-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #15181d;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: color 0.25s ease;
}

.approach-cta i {
    transition: transform 0.25s ease;
}

.approach-cta:hover {
    color: #1677ff;
}

.approach-cta:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .approach-section {
        padding: 75px 0;
    }

    .approach-heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .approach-heading-row > p {
        max-width: 600px;
    }

    .approach-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approach-step {
        padding: 24px 20px 28px 0;
    }

    .approach-step + .approach-step {
        padding-left: 20px;
    }

    .approach-step:nth-child(3) {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #e1e5eb;
    }

    .approach-step:nth-child(4) {
        border-top: 1px solid #e1e5eb;
    }

    .approach-step-content p {
        max-width: 340px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .approach-section {
        padding: 65px 0;
    }

    .approach-header {
        margin-bottom: 35px;
    }

    .approach-heading-row h2 {
        font-size: 2.5rem;
    }

    .approach-heading-row > p {
        font-size: 13px;
    }

    .approach-timeline {
        grid-template-columns: 1fr;
    }

    .approach-step,
    .approach-step + .approach-step,
    .approach-step:nth-child(3),
    .approach-step:nth-child(4) {
        padding: 22px 0;

        border-left: none;
        border-top: 1px solid #e1e5eb;
    }

    .approach-step:first-child {
        border-top: none;
    }

    .approach-step-top {
        margin-bottom: 16px;
    }

    .approach-step-content h3 {
        font-size: 18px;
    }

    .approach-step-content p {
        max-width: 100%;
    }

    .approach-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;
    }

}


/* =========================================================
   PROGENIQ — CONTACT SECTION
========================================================= */

.contact-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(22, 119, 255, 0.16),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(22, 119, 255, 0.09),
            transparent 32%
        ),
        #080d17;

    color: #ffffff;
}


/* SUBTLE GRID */

.contact-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-layout {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 85px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contact-content {
    max-width: 500px;
}

.contact-kicker {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 25px;

    color: #80b4ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.2px;
}

.contact-kicker > span {
    width: 27px;
    height: 1px;

    background: #4c94ff;
}


.contact-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -0.06em;
}

.contact-content h2 span {
    display: block;

    margin-top: 8px;

    color: #80b4ff;
}


.contact-description {
    max-width: 440px;

    margin: 27px 0 0;

    color: #a9b4c5;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   CONTACT NOTE
========================================================= */

.contact-note {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-top: 38px;
}

.contact-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(128, 180, 255, 0.25);

    border-radius: 12px;

    background: rgba(22, 119, 255, 0.12);

    color: #80b4ff;

    font-size: 18px;
}

.contact-note strong {
    display: block;

    margin: 2px 0 5px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}

.contact-note p {
    margin: 0;

    color: #8e9bad;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   FORM PANEL
========================================================= */

.contact-form-wrapper {
    padding: 35px;

    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(14px);
}


.contact-form-heading {
    margin-bottom: 27px;
}

.contact-form-heading > span {
    display: block;

    margin-bottom: 12px;

    color: #80b4ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.contact-form-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -0.035em;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.contact-form-row {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.contact-field {
    margin-bottom: 19px;
}

.contact-field label {
    display: block;

    margin-bottom: 9px;

    color: #e6ebf3;

    font-size: 11px;
    font-weight: 700;
}

.contact-field label span {
    color: #8995a7;

    font-weight: 400;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    display: block;

    width: 100%;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 7px;

    outline: none;

    background: rgba(4, 9, 18, 0.55);

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #748094;
}


.contact-field select {
    color-scheme: dark;
    cursor: pointer;
}

.contact-field select:invalid {
    color: #748094;
}

.contact-field select option {
    background: #111827;
    color: #ffffff;
}


.contact-field textarea {
    min-height: 105px;

    resize: vertical;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #4c94ff;

    background: rgba(4, 9, 18, 0.8);

    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 15px 18px;

    border: 1px solid #ffffff;

    border-radius: 7px;

    background: #ffffff;

    color: #080d17;

    font-family: inherit;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.contact-submit i {
    font-size: 16px;

    transition: transform 0.25s ease;
}

.contact-submit:hover {
    background: #dceaff;

    border-color: #dceaff;

    transform: translateY(-2px);
}

.contact-submit:hover i {
    transform: translate(2px, -2px);
}


.contact-form-footnote {
    margin: 15px 0 0;

    color: #8490a2;

    font-size: 10px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .contact-section {
        padding: 80px 0;
    }

    .contact-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-content {
        max-width: 650px;
    }

    .contact-content h2 {
        font-size: clamp(3rem, 7vw, 4.5rem);
    }

    .contact-form-wrapper {
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .contact-section {
        padding: 65px 0;
    }

    .contact-content h2 {
        font-size: 2.8rem;
    }

    .contact-description {
        font-size: 14px;
    }

    .contact-form-wrapper {
        padding: 23px 18px;

        border-radius: 13px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-form-heading h3 {
        font-size: 21px;
    }

}


.contact-section {
    padding: 100px 0;
    background: #f5f7fa;
    color: #111827;
}

.contact-header {
    max-width: 720px;
    margin-bottom: 52px;
}

.contact-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #356fce;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-kicker > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4b8df8;
}

.contact-header h2 {
    margin: 0 0 18px;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
    font-weight: 750;
}

.contact-header h2 span {
    color: #738197;
}

.contact-header > p {
    max-width: 610px;
    margin: 0;
    color: #657084;
    font-size: 16px;
    line-height: 1.8;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 28px;
    align-items: stretch;
}

.contact-intro {
    padding: 40px 34px;
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(59, 130, 246, 0.16),
            transparent 48%
        ),
        #080d17;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.contact-intro-label {
    margin-bottom: 26px;
    color: #8ab4f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-intro h3 {
    margin: 0 0 18px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.contact-intro > p {
    margin: 0;
    color: #a8b2c3;
    font-size: 14px;
    line-height: 1.85;
}

.contact-promise {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 36px;
    padding: 20px 0;
    border-top: 1px solid #273142;
    border-bottom: 1px solid #273142;
}

.contact-promise-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #34435a;
    border-radius: 9px;
    color: #8ab4f8;
    font-size: 18px;
}

.contact-promise strong,
.contact-promise span {
    display: block;
}

.contact-promise strong {
    margin: 2px 0 6px;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

.contact-promise span {
    color: #8794a8;
    font-size: 12px;
}

.contact-email {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 32px;
    color: #8ab4f8;
}

.contact-email > i {
    font-size: 21px;
}

.contact-email span,
.contact-email a {
    display: block;
}

.contact-email span {
    margin-bottom: 5px;
    color: #8794a8;
    font-size: 11px;
}

.contact-email a {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-email a:hover {
    color: #8ab4f8;
}

.contact-form {
    padding: 38px;
    border: 1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.04);
}

.contact-form-heading {
    margin-bottom: 28px;
}

.contact-form-heading > span {
    color: #477fd4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-form-heading h3 {
    margin: 12px 0 8px;
    color: #111827;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.7px;
}

.contact-form-heading p {
    margin: 0;
    color: #788396;
    font-size: 13px;
    line-height: 1.7;
}

.contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px 17px;
}

.contact-field {
    min-width: 0;
}

.contact-field-full {
    grid-column: 1 / -1;
}

.contact-field label {
    display: block;
    margin-bottom: 9px;
    color: #30394a;
    font-size: 12px;
    font-weight: 650;
}

.contact-field label span {
    color: #929bab;
    font-weight: 400;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    outline: none;
    background: #fbfcfe;
    color: #172033;
    font: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
}

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

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #a0a9b7;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #6799ef;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(71, 127, 212, 0.12);
}

.contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 26px;
    padding: 16px 19px;
    border: 1px solid #080d17;
    border-radius: 7px;
    background: #080d17;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    transition: background 0.2s ease,
                border-color 0.2s ease;
}

.contact-submit i {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.contact-submit:hover {
    border-color: #244f91;
    background: #173765;
    color: #fff;
}

.contact-submit:hover i {
    transform: translate(3px, -3px);
}

.contact-form-footnote {
    margin: 14px 0 0;
    color: #929bab;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 991px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-intro {
        min-height: auto;
    }

    .contact-email {
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .contact-section {
        padding: 65px 0;
    }

    .contact-header {
        margin-bottom: 32px;
    }

    .contact-intro,
    .contact-form {
        padding: 27px 22px;
    }

    .contact-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-field-full {
        grid-column: auto;
    }

    .contact-form-heading h3 {
        font-size: 22px;
    }
}



/* ==========================================
   PROGENIQ — BLUE TECH IDENTITY
========================================== */

:root {
    --black: #0B1220;
    --dark: #0B1220;
    --text: #182235;
    --muted: #68758A;
    --border: #E2E8F0;
    --white: #FFFFFF;
    --blue: #3978F6;
    --purple: #7898FF;

    --pro-blue: #3978F6;
    --pro-indigo: #5B6FF5;
    --pro-ink: #0B1220;
    --pro-slate: #68758A;
    --pro-line: #E2E8F0;
    --pro-soft: #F4F7FC;

    --brand-navy: #0B1220;
    --brand-blue: #3978F6;
    --brand-ice: #DCE8FF;
    --brand-light: #F4F7FC;
}

/* Typography */

body {
    font-family: "DM Sans", sans-serif;
    color: #182235;
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .footer-brand {
    font-family: "Manrope", sans-serif;
}

/* Navbar */

.navbar {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #E2E8F0;
}

.navbar-brand {
    color: #0B1220;
}

.navbar-brand span {
    color: #3978F6;
}

.nav-link:hover {
    color: #3978F6 !important;
}

.nav-link:not(.nav-button)::after {
    background: #3978F6;
}

.nav-button {
    background: #0B1220;
    border-color: #0B1220;
    border-radius: 8px;
}

.nav-button:hover {
    background: #3978F6;
    border-color: #3978F6;
}

/* Hero: preserve video */

.hero {
    background-color: #0B1220;
    color: #FFFFFF;
}

.hero-overlay,
.hero-video-overlay {
    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(57,120,246,.24),
            transparent 36%
        ),
        linear-gradient(
            90deg,
            rgba(7,13,25,.94) 0%,
            rgba(7,13,25,.82) 52%,
            rgba(7,13,25,.64) 100%
        );
}

.hero-grid {
    opacity: .20;
}

.hero-badge {
    color: #DCE8FF;
}

.hero-badge-dot,
.typing-cursor {
    background: #6EA0FF;
}

.hero-title {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: -.055em;
}

.hero h1 .gradient {
    background: linear-gradient(100deg, #FFFFFF, #8DB4FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero primary button */

.hero-btn-primary,
.hero .btn-main {
    background: #3978F6 !important;
    border-color: #3978F6 !important;
    color: #FFFFFF !important;
}

.hero-btn-primary:hover,
.hero .btn-main:hover {
    background: #245FD4 !important;
    border-color: #245FD4 !important;
    color: #FFFFFF !important;
}

.hero-btn-secondary {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.55) !important;
    color: #FFFFFF !important;
}

.hero-btn-secondary:hover {
    background: #FFFFFF !important;
    color: #0B1220 !important;
}

/* Trust strip */

.trust-strip {
    background: #0B1220;
    border-color: rgba(255,255,255,.10);
}

.trust-item {
    color: #D5DEED;
    border-color: rgba(255,255,255,.10);
}

.trust-title {
    color: #D5DEED;
}

.trust-number {
    color: #8DB4FF;
    border-color: rgba(141,180,255,.35);
}

.trust-item::after {
    background: #3978F6;
}

/* About */

.about-section {
    background: #FFFFFF;
    color: #182235;
}

.about-kicker,
.about-number,
.capability-number {
    color: #3978F6;
}

.about-kicker::before {
    background: #3978F6;
}

.about-content h2 {
    color: #0B1220;
}

.about-content h2 span {
    color: #78869A;
}

.about-lead {
    color: #27364C;
}

.about-text,
.about-capability p {
    color: #68758A;
}

.about-capabilities,
.about-capability {
    border-color: #E2E8F0;
}

.about-capability strong {
    color: #182235;
}

.about-capability:hover i {
    color: #3978F6;
}

/* Services */

.services-section {
    background: #F4F7FC;
    color: #182235;
}

.services-kicker,
.approach-kicker {
    color: #3978F6;
}

.services-kicker span,
.approach-kicker span {
    background: #3978F6;
}

.services-heading-row h2 {
    color: #0B1220;
}

.services-heading-row h2 span,
.approach-heading-row h2 span {
    color: #78869A;
}

.services-heading-row p {
    color: #68758A;
}

.service-card {
    border-color: #E2E8F0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 8px 28px rgba(11,18,32,.04);
}

.service-card:hover {
    border-color: #C4D6F8;
    box-shadow: 0 20px 45px rgba(11,18,32,.09);
}

.service-card-content h3 {
    color: #0B1220;
}

.service-card-content p {
    color: #68758A;
}

.service-tags span {
    border-color: #E2E8F0;
    background: #F8FAFD;
    color: #59677C;
}

/* Our Approach */

.approach-section {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(57,120,246,.16),
            transparent 32%
        ),
        #0B1220;
    color: #FFFFFF;
}

.approach-heading-row h2,
.approach-step-content h3 {
    color: #FFFFFF;
}

.approach-heading-row > p,
.approach-step-content p,
.approach-footer > p {
    color: #AAB7CB;
}

.approach-timeline {
    border-color: rgba(255,255,255,.15);
}

.approach-step + .approach-step {
    border-left-color: rgba(255,255,255,.15);
}

.approach-step-line {
    background: rgba(255,255,255,.18);
}

.approach-number {
    color: #8DB4FF;
}

.approach-step-top i {
    background: rgba(57,120,246,.12);
    border-color: rgba(141,180,255,.24);
    color: #8DB4FF;
}

.approach-step:hover .approach-step-top i {
    background: #3978F6;
    border-color: #3978F6;
    color: #FFFFFF;
}

.approach-footer-dot {
    background: #6EA0FF;
    box-shadow: 0 0 0 4px rgba(57,120,246,.16);
}

.approach-cta {
    color: #FFFFFF;
}

.approach-cta:hover {
    color: #8DB4FF;
}

/* Contact */

.contact-section {
    background: #F4F7FC;
    color: #182235;
}

.contact-header h2 {
    color: #0B1220;
}

.contact-header h2 span {
    color: #78869A;
}

.contact-header > p {
    color: #68758A;
}

.contact-kicker,
.contact-form-heading > span {
    color: #3978F6;
}

.contact-kicker > span {
    background: #3978F6;
}

.contact-intro {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(57,120,246,.22),
            transparent 48%
        ),
        #0B1220;
}

.contact-intro-label,
.contact-email {
    color: #8DB4FF;
}

.contact-promise-icon {
    color: #8DB4FF;
    border-color: rgba(141,180,255,.28);
}

.contact-form {
    border-color: #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 12px 36px rgba(11,18,32,.05);
}

.contact-form-heading h3 {
    color: #0B1220;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #3978F6;
    box-shadow: 0 0 0 3px rgba(57,120,246,.12);
}

.contact-submit {
    background: #3978F6;
    border-color: #3978F6;
    color: #FFFFFF;
}

.contact-submit:hover {
    background: #245FD4;
    border-color: #245FD4;
    color: #FFFFFF;
}

/* Footer */

footer {
    background: #0B1220;
    color: #FFFFFF;
}

.footer-brand span {
    color: #6EA0FF;
}

.footer-text,
.footer-link {
    color: #AAB7CB;
}

.footer-link:hover {
    color: #8DB4FF;
}

.footer-heading {
    color: #FFFFFF;
}

.copyright {
    border-color: rgba(255,255,255,.12);
    color: #8290A6;
}



/* ==========================================
   PROGENIQ - INDUSTRY WEBSITE SHOWCASE
========================================== */

.industry-showcase {
    --showcase-navy: #0B1220;
    --showcase-blue: #3978F6;
    --showcase-ice: #DCE8FF;
    padding: 100px 0;
    overflow: hidden;
    background: #F4F7FC;
    color: var(--showcase-navy);
}

.showcase-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--showcase-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.showcase-kicker-dot,
.concept-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--showcase-blue);
    box-shadow: 0 0 0 4px rgba(57, 120, 246, .12);
}

.showcase-heading h2 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4.5vw, 54px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.8px;
}

.showcase-heading h2 span {
    color: var(--showcase-blue);
}

.showcase-heading > p {
    max-width: 610px;
    margin: auto;
    color: #64748B;
    font-size: 16px;
    line-height: 1.8;
}

/* Industry buttons */

.industry-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 35px;
}

.industry-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid #DCE4F0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #475569;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease, color .25s ease,
                border-color .25s ease, transform .25s ease;
}

.industry-tab:hover {
    transform: translateY(-2px);
    border-color: var(--showcase-blue);
    color: var(--showcase-blue);
}

.industry-tab.active {
    background: var(--showcase-navy);
    border-color: var(--showcase-navy);
    color: #FFFFFF;
}

.industry-tab:focus-visible,
.showcase-card:focus-visible,
.showcase-cta:focus-visible {
    outline: 3px solid #8EB4FF;
    outline-offset: 4px;
}

/* Smooth, continuous moving carousel */

.showcase-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 46px;
    padding: 6px 0 12px;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 5%,
        #000 95%,
        transparent
    );
}

.showcase-track {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: progeniqShowcaseMove 42s linear infinite;
}

.showcase-carousel:hover .showcase-track,
.showcase-carousel:focus-within .showcase-track {
    animation-play-state: paused;
}

.showcase-card {
    position: relative;
    display: flex;
    flex: 0 0 245px;
    min-height: 142px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    text-align: left;
    border: 1px solid #E0E7F2;
    border-radius: 18px;
    background: #FFFFFF;
    color: var(--showcase-navy);
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease,
                transform .25s ease;
}

.showcase-card:hover {
    transform: translateY(-4px);
    border-color: #A9C5FF;
    box-shadow: 0 14px 35px rgba(15, 35, 70, .08);
}

.showcase-card.active {
    border-color: var(--showcase-blue);
    box-shadow: 0 0 0 2px rgba(57, 120, 246, .12);
}

.showcase-card-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 13px;
    border-radius: 12px;
    background: #EAF1FF;
    color: var(--showcase-blue);
    font-size: 18px;
}

.showcase-card-title {
    font-size: 15px;
    font-weight: 800;
}

.showcase-card-type {
    margin-top: 4px;
    color: #64748B;
    font-size: 11px;
}

.showcase-card-arrow {
    position: absolute;
    top: 19px;
    right: 20px;
    color: #94A3B8;
    font-size: 18px;
}

@keyframes progeniqShowcaseMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Preview heading */

.showcase-preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.showcase-preview-label {
    display: block;
    margin-bottom: 12px;
    color: var(--showcase-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.showcase-preview-header h3 {
    margin: 0 0 10px;
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.showcase-preview-header p {
    max-width: 650px;
    margin: 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.7;
}

.concept-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid #DCE4F0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Browser frame and embedded website */

.showcase-browser {
    overflow: hidden;
    border: 1px solid #DCE4F0;
    border-radius: 17px;
    background: #FFFFFF;
    box-shadow: 0 24px 65px rgba(11, 18, 32, .12);
}

.browser-bar {
    display: flex;
    height: 48px;
    align-items: center;
    gap: 15px;
    padding: 0 17px;
    border-bottom: 1px solid #E7ECF4;
    background: #FFFFFF;
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D6DFEA;
}

.browser-dots span:first-child { background: #F28B82; }
.browser-dots span:nth-child(2) { background: #F6C66A; }
.browser-dots span:nth-child(3) { background: #72C99A; }

.browser-address {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 12px;
    border-radius: 7px;
    background: #F4F7FC;
    color: #64748B;
    font-size: 11px;
}

.browser-address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-device-icon {
    color: #64748B;
    font-size: 17px;
}

#industryDemoFrame {
    display: block;
    width: 100%;
    height: 570px;
    border: 0;
    background: #FFFFFF;
}

/* Call to action */

.showcase-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 23px;
}

.showcase-bottom > p {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.7;
}

.showcase-bottom > p i {
    margin-top: 2px;
    color: var(--showcase-blue);
}

.showcase-cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding: 14px 19px;
    border-radius: 9px;
    background: var(--showcase-blue);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.showcase-cta:hover {
    transform: translateY(-2px);
    background: #245FD5;
    color: #FFFFFF;
}

/* Responsive */

@media (max-width: 767px) {
    .industry-showcase {
        padding: 70px 0;
    }

    .showcase-heading h2 {
        letter-spacing: -1px;
    }

    .industry-tabs {
        gap: 8px;
    }

    .industry-tab {
        padding: 9px 12px;
        font-size: 12px;
    }

    .showcase-card {
        flex-basis: 215px;
        min-height: 130px;
    }

    .showcase-preview-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    #industryDemoFrame {
        height: 510px;
    }

    .showcase-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .showcase-cta {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-track {
        animation: none;
    }

    .industry-tab,
    .showcase-card,
    .showcase-cta {
        transition: none;
    }
}

/* Fix Progeniq hero on desktop */
@media (min-width: 992px) {
    .hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* PROGENIQ — Lighter Hero Overlay */
    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            90deg,
            rgba(5, 10, 20, 0.40) 0%,
            rgba(5, 10, 20, 0.18) 100%
        );
        pointer-events: none;
    }

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

    .hero-content {
        position: relative;
        z-index: 3;
        width: 100%;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .hero-eyebrow,
    .hero h1,
    .hero-description,
    .hero-actions,
    .hero-scroll {
        position: relative;
        z-index: 3;
    }

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

    .hero-btn-primary,
    .hero-btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hero-scroll {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 50px;
    }
}

/* HERO — Better Headline Width */
.hero h1 {
    width: 100%;
    max-width: 1100px;
    font-size: clamp(42px, 4.2vw, 64px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

#heroTyping {
    display: inline;
}

@media (min-width: 992px) {
    .hero-content {
        max-width: 1200px;
    }
}

@media (max-width: 767.98px) {
    .hero h1 {
        font-size: clamp(36px, 8vw, 48px);
        letter-spacing: -1px;
    }
}

/* HERO — Fix text wrapping on desktop */
@media (min-width: 992px) {
    .hero-content {
        width: 100%;
        max-width: 1200px;
    }

    .hero h1 {
        width: 100%;
        max-width: 1100px;
        font-size: clamp(42px, 4vw, 60px);
        line-height: 1.12;
        letter-spacing: -1px;
    }

    #heroTyping {
        white-space: pre-wrap;
    }
}