/* =========================================
   1. ROOT VARIABLES & GLOBAL STYLES
========================================= */

:root {
    --navy: #050d1a;
    --green: #19e68c;
    --cyan: #12c8e8;
    --blue: #1b8ee8;
    --grad: linear-gradient(90deg, #19e68c, #12c8e8);
    --ink: #0b1a2e;

    /* Increased card overlap */
    --overlap: clamp(260px, 32vh, 340px);

    --r: 18px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    color: var(--ink);
    overflow-x: clip;
}

.wrap {
    width: 92%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 0;
}

/* =========================================
   2. STICKY HEADER & NAVIGATION
========================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;

    background: linear-gradient(
        180deg,
        rgba(3, 10, 22, 0.96),
        rgba(5, 13, 26, 0.86)
    );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    transition: box-shadow 0.3s;
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.navbar {
    padding: 0.85rem 0;
}

.logo {
    position: relative;

    font-weight: 800;
    font-size: 1.65rem;
    letter-spacing: 0.14em;

    color: #fff;
    text-decoration: none;
}

.logo::after {
    content: "";
    position: absolute;

    left: 52%;
    bottom: -5px;

    width: 38px;
    height: 3px;

    background: linear-gradient(90deg, #19e68c, #1b8ee8);

    transform: skewX(-35deg);
    border-radius: 2px;
}

.navbar-nav .nav-link {
    position: relative;

    color: #cfd9e6;
    font-size: 0.8rem;
    font-weight: 500;

    padding: 0.5rem 1rem;

    transition: color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;

    left: 1rem;
    right: 1rem;
    bottom: 0;

    height: 2px;

    background: var(--grad);

    transform: scaleX(0);
    transition: transform 0.3s;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-toggler-icon {
    filter: invert(1);
}

.btn-cta {
    display: inline-block;

    color: #fff;
    text-decoration: none;

    border: 1.5px solid var(--cyan);
    border-radius: 50px;

    font-size: 0.8rem;
    font-weight: 500;

    padding: 0.55rem 1.5rem;

    background: rgba(18, 200, 232, 0.07);

    transition: 0.3s;
}

.btn-cta:hover {
    color: #fff;

    background: rgba(18, 200, 232, 0.22);

    box-shadow: 0 0 24px rgba(18, 200, 232, 0.55);
}

/* =========================================
   3. FULL-SCREEN HERO SECTION
========================================= */

.hero {
    position: relative;
    z-index: 1;

    /* Full viewport height */
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: center;

    color: #fff;
    background: var(--navy);

    /*
       Extra bottom space makes room for cards
       overlapping the hero/white-section boundary.
    */
    padding:
        clamp(50px, 7vh, 90px)
        0
        calc(var(--overlap) + 40px);

    overflow: hidden;
}

/* Hero background image */

.hero .bgimg {
    position: absolute;
    inset: 0 0 0 auto;

    width: 72%;
    height: 100%;

    background: url(../img/hero-bg.jpg)
        right center / cover no-repeat;

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 38%
    );

    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 38%
    );
}

/* Cinematic gradient overlay */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 13, 26, 0.94) 0%,
            rgba(5, 13, 26, 0.65) 43%,
            rgba(5, 13, 26, 0.12) 78%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 13, 26, 0.2) 0%,
            transparent 45%,
            rgba(4, 12, 24, 0.75) 100%
        );
}

/* Interactive particle/network canvas */

#fx {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1020;
    pointer-events: none;
}

/* Hero content */

.hero-in {
    position: relative;
    z-index: 3;

    width: 100%;
}

.hero-copy {
    max-width: 660px;
}

.eyebrow-co {
    margin-bottom: 0.7rem;

    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;

    color: #e6eef8;
}

.hero h1 {
    margin-bottom: 1.1rem;

    font-weight: 800;
    font-size: clamp(2.5rem, 4vw, 4.4rem);

    line-height: 1.05;
    letter-spacing: -0.01em;
}

.hero h1 .m {
    color: #17c3f2;
}

.hero h1 .g {
    background: linear-gradient(90deg, #12c8e8, #19e68c);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero h2 {
    font-weight: 600;
    font-size: clamp(1.2rem, 1.95vw, 2.1rem);

    line-height: 1.3;
}

.hero h2 em {
    font-style: normal;
    color: var(--cyan);
}

.lead-s {
    max-width: 480px;

    margin: 1.1rem 0 1.7rem;

    font-size: 0.9rem;
    color: #c9d6e6;
}

.tagline {
    position: absolute;

    right: 0;
    top: 52%;

    text-align: left;

    font-weight: 300;
    font-size: 0.95rem;

    letter-spacing: 0.2em;
    line-height: 1.7;

    color: #e8f1fb;
}

.foot-wrap {
    position: absolute;

    left: 50%;
    bottom: calc(var(--overlap) + 16px);

    z-index: 3;

    width: 92%;
    max-width: 1320px;

    transform: translateX(-50%);
}

.hero-foot {
    text-align: right;

    font-size: 0.56rem;
    letter-spacing: 0.14em;

    color: #b8c8dc;
}

/* =========================================
   4. BUTTONS & HOVER EFFECTS
========================================= */

.btn-c {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    padding: 0.8rem 1.45rem;

    border: 0;
    border-radius: 10px;

    font-size: 0.88rem;
    font-weight: 600;

    color: #04121f;
    text-decoration: none;

    overflow: hidden;

    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-c i {
    font-style: normal;
    transition: transform 0.3s;
}

.btn-c:hover i {
    transform: translateX(5px);
}

/* Animated shine */

.btn-c::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 70%
    );

    transform: translateX(-120%);
    transition: transform 0.6s;
}

.btn-c:hover::after {
    transform: translateX(120%);
}

/* Green/cyan button */

.btn-g {
    background: linear-gradient(90deg, #19e68c, #12c8e8);
}

.btn-g:hover {
    color: #04121f;

    transform: translateY(-2px);

    box-shadow: 0 10px 28px rgba(25, 230, 140, 0.45);
}

/* Cyan/blue button */

.btn-b {
    background: linear-gradient(90deg, #12c8e8, #1b8ee8);
    color: #fff;
}

.btn-b:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 10px 28px rgba(18, 200, 232, 0.5);
}

/* Ghost button */

.btn-ghost {
    color: #fff;

    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;

    background: rgba(5, 13, 26, 0.35);
}

.btn-ghost:hover {
    color: #fff;

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

    transform: translateY(-2px);
}

/* =========================================
   5. WHITE SERVICES SECTION
========================================= */

.services {
    position: relative;
    z-index: 2;

    background: #fff;

    padding-top: 0;
    padding-bottom: 90px;
}

/*
   Cards are pulled upward by the overlap amount.
   Their upper portions sit in the hero and their
   lower portions continue into the white section.
*/

.cards-row {
    position: relative;
    z-index: 10;

    margin-top: calc(var(--overlap) * -1);

    padding-top: 0;

    perspective: 1400px;
}

/* Prevent Bootstrap columns from covering cards */

.cards-row > [class*="col-"] {
    position: relative;
    z-index: 10;
}

/* =========================================
   6. 3D INTERACTIVE CARD BASE
========================================= */

.card3d {
    --a: #19e68c;
    --b: #12c8e8;
    --iw: 58%;

    position: relative;

    height: 100%;
    min-height: 410px;

    border-radius: var(--r);
    color: #fff;

    transform-style: preserve-3d;

    transform:
        perspective(1200px)
        translateY(var(--lift, 0px))
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg));

    box-shadow:
        calc(var(--sx, 0) * 1px)
        calc(26px + var(--sy, 0) * 1px)
        55px -20px rgba(4, 24, 48, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);

    transition: box-shadow 0.4s;

    animation: rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* Card 02: blue/cyan variation */

.card-mob {
    --a: #12c8e8;
    --b: #1b8ee8;
    --iw: 50%;

    animation-delay: 0.12s;
}

/* Hover glow */

.card3d:hover {
    box-shadow:
        calc(var(--sx, 0) * 1px)
        calc(40px + var(--sy, 0) * 1px)
        70px -22px rgba(4, 24, 48, 0.75),
        0 0 46px -12px var(--a);
}

/* Entry animation */

@keyframes rise {
    from {
        opacity: 0;

        transform:
            perspective(1200px)
            translateY(46px)
            rotateX(10deg);
    }
}

/* =========================================
   7. CARD BACKGROUND LAYERS
========================================= */

.c-clip {
    position: absolute;
    inset: 0;

    border-radius: var(--r);
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 0 0,
            rgba(25, 230, 140, 0.14),
            transparent 55%
        ),
        linear-gradient(
            125deg,
            #04142a,
            #082a47 60%,
            #0a3a5c
        );
}

/* Alternate card background */

.card-mob .c-clip {
    background:
        radial-gradient(
            ellipse at 0 0,
            rgba(18, 200, 232, 0.14),
            transparent 55%
        ),
        linear-gradient(
            125deg,
            #04142a,
            #082847 60%,
            #0b3a60
        );
}

/* Card image with mouse parallax */

.c-img {
    position: absolute;

    top: 0;
    right: 0;

    width: var(--iw);
    height: 100%;

    object-fit: cover;
    object-position: right;

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 40%
    );

    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 40%
    );

    transform:
        translate3d(
            calc(var(--px, 0) * -18px),
            calc(var(--py, 0) * -12px),
            0
        )
        scale(calc(1.08 + var(--h, 0) * 0.05));
}

/* Contrast overlay */

.c-clip::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 19, 38, 0.88) 0,
            rgba(4, 19, 38, 0.5) 42%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(4, 14, 28, 0.45)
        );
}

/* Mouse-following light */

.c-spot {
    position: absolute;
    inset: 0;

    z-index: 2;
    pointer-events: none;

    opacity: calc(var(--h, 0));

    background: radial-gradient(
        circle 300px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.2),
        transparent 62%
    );
}

/* =========================================
   8. GRADIENT BORDER RING
========================================= */

.c-ring {
    position: absolute;
    inset: 0;

    padding: 1.3px;

    border-radius: var(--r);

    pointer-events: none;

    transform: translateZ(2px);

    background: linear-gradient(
        135deg,
        var(--a),
        rgba(255, 255, 255, 0.14) 38%,
        rgba(255, 255, 255, 0.06) 65%,
        var(--b)
    );

    -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,
        linear-gradient(#000 0 0);

    mask-composite: exclude;
}

/* Moving border highlight */

.c-ring::after {
    content: "";
    position: absolute;

    inset: -2px;

    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #fff,
        transparent 70%
    );

    opacity: calc(var(--h, 0) * 0.95);
}

/* =========================================
   9. CARD CONTENT & 3D DEPTH
========================================= */

.c-body {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 410px;

    padding: 2.1rem 2.3rem;

    transform-style: preserve-3d;

    transform: translateZ(calc(var(--h, 0) * 46px));
}

/* Small card label */

.kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    font-size: 0.66rem;
    font-weight: 500;

    letter-spacing: 0.16em;

    color: #d9e6f5;
}

.kicker::before {
    content: "";

    width: 18px;
    height: 2px;

    border-radius: 2px;

    background: linear-gradient(90deg, var(--a), var(--b));
}

/* Card heading */

.card3d h3 {
    margin: 1.15rem 0 0.85rem;

    font-weight: 800;
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);

    line-height: 1.1;
}

.card3d h3 span {
    background: linear-gradient(90deg, var(--a), var(--b));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

/* Card description */

.c-text {
    max-width: 315px;

    margin-bottom: 1.5rem;

    font-size: 0.88rem;
    line-height: 1.65;

    color: #e3edf8;

    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Card CTA depth */

.c-body .btn-c {
    align-self: flex-start;

    transform: translateZ(calc(var(--h, 0) * 22px));
}

.c-body .btn-c:hover {
    transform:
        translateY(-2px)
        translateZ(calc(var(--h, 0) * 22px));
}

/* =========================================
   10. CARD FOOTER
========================================= */

.c-foot {
    display: flex;
    align-items: center;
    gap: 0.85rem;

    margin-top: auto;
    padding-top: 1.8rem;

    font-size: 0.64rem;
    letter-spacing: 0.14em;
    line-height: 1.55;

    color: #c6d8ec;

    transform: translateZ(calc(var(--h, 0) * 12px));
}

.c-foot svg {
    flex: none;

    filter: drop-shadow(0 0 6px currentColor);
}

.c-foot b {
    display: block;

    font-weight: 600;
    color: #fff;
}

/* =========================================
   11. INFORMATION ROW
========================================= */

.info-row {
    margin-top: 64px;
}

.info-item {
    height: 100%;

    padding: 1.5rem;

    border-radius: 14px;
    border-top: 3px solid transparent;

    background: #f4f8fc;

    border-image: linear-gradient(90deg, #19e68c, #12c8e8) 1;

    transition: transform 0.3s, box-shadow 0.3s;
}

.info-item:hover {
    transform: translateY(-4px);

    box-shadow: 0 14px 30px rgba(10, 40, 80, 0.12);
}

.info-item h4 {
    font-size: 1rem;
    font-weight: 700;
}

.info-item p {
    margin: 0;

    font-size: 0.85rem;
    color: #52627a;
}

/* =========================================
   12. FOOTER
========================================= */

.site-footer {
    padding: 1.6rem 0;

    background: var(--navy);
    color: #9db0c7;

    font-size: 0.8rem;
    text-align: center;
}

/* =========================================
   13. RESPONSIVE — TABLETS
========================================= */

@media (max-width: 991.98px) {
    :root {
        --overlap: 230px;
    }

    .navbar-collapse {
        padding: 1rem 0;
    }

    .tagline,
    .foot-wrap {
        display: none;
    }

    .hero {
        min-height: 85svh;

        padding-top: 65px;

        padding-bottom: calc(var(--overlap) + 30px);
    }

    .hero .bgimg {
        width: 100%;
        opacity: 0.55;
    }

    .cards-row {
        margin-top: calc(var(--overlap) * -1);
    }

    .card3d {
        --iw: 70%;
    }

    .card-mob {
        --iw: 62%;
    }

    .c-body {
        padding: 1.8rem 1.6rem;
    }
}

/* =========================================
   14. RESPONSIVE — MOBILE
========================================= */

@media (max-width: 767.98px) {
    :root {
        --overlap: 140px;
    }

    .hero {
        min-height: 80svh;

        padding-top: 55px;

        padding-bottom: calc(var(--overlap) + 25px);
    }

    .cards-row {
        margin-top: calc(var(--overlap) * -1);
    }

    .card3d,
    .c-body {
        min-height: 380px;
    }

    .c-text {
        max-width: none;
    }

    .c-clip::after {
        background: linear-gradient(
            90deg,
            rgba(4, 19, 38, 0.9) 0,
            rgba(4, 19, 38, 0.65) 60%,
            rgba(4, 19, 38, 0.4)
        );
    }

    .info-row {
        margin-top: 45px;
    }
}

/* =========================================
   15. ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}