/* =========================================================
   MAIN WEBSITE CSS
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --lime: #b7e600;
    --lime-dark: #96c703;

    --navy: #071b3a;
    --navy-dark: #041126;

    --white: #ffffff;
    --black: #000000;

    --transition: 0.4s ease;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;

    background: var(--white);
    color: var(--navy);

    overflow-x: hidden;

}


a {

    color: inherit;
    text-decoration: none;

}


button {

    font-family: inherit;

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 82px;

    z-index: 1000;

    background: transparent;

    transition:
        background 0.4s ease,
        height 0.4s ease,
        box-shadow 0.4s ease;

}


/* =========================================================
   HEADER — SCROLLED
========================================================= */

.site-header.scrolled {

    height: 72px;

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

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(10px);

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

}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.header-container {

    position: relative;

    width: min(1240px, 92%);

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--white);

    text-decoration: none;

    flex-shrink: 0;

    z-index: 10;

}


.brand-logo {

    width: 48px;

    height: 48px;

    object-fit: contain;

    display: block;

    transition:
        transform 0.3s ease;

}


.brand:hover .brand-logo {

    transform: scale(1.05);

}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.brand-name span:first-child {

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

}


.brand-name span:last-child {

    margin-top: 4px;

    font-size: 7px;

    font-weight: 400;

    letter-spacing: 3px;

}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-nav {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    white-space: nowrap;

    z-index: 5;

}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 8px 0;

    color: var(--white);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        color 0.3s ease;

}


/* =========================================================
   NAVIGATION UNDERLINE
========================================================= */

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: var(--lime);

    transition:
        width 0.3s ease;

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.nav-link:hover {

    color: var(--lime);

}


/* =========================================================
   SCROLLED NAVIGATION
========================================================= */

.site-header.scrolled .brand {

    color: var(--navy);

}
.site-header.scrolled .nav-link {

    color: var(--navy);

}


.site-header.scrolled .nav-link:hover {

    color: var(--lime-dark);

}



/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 10;

}


/* =========================================================
   FIXED SEARCH BAR
========================================================= */

.header-search {

    width: 180px;

    height: 38px;

    display: flex;

    align-items: center;

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

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

    transition:
        border-color 0.3s ease,
        background 0.3s ease;

}


/* =========================================================
   SEARCH INPUT
========================================================= */

.header-search input {

    width: 100%;

    height: 100%;

    padding: 0 10px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--white);

    font-family: inherit;

    font-size: 11px;

}


.header-search input::placeholder {

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

}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.header-search button {

    width: 38px;

    height: 100%;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    color: var(--white);

    cursor: pointer;

}


.header-search button svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    transition:
        transform 0.3s ease;

}


.header-search button:hover svg {

    transform: scale(1.1);

}


/* =========================================================
   SEARCH — SCROLLED
========================================================= */

.site-header.scrolled .header-search {

    border-color: rgb(7, 27, 58);

    background: rgba(7, 27, 58, 0.03);

}


.site-header.scrolled .header-search input {

    color: var(--navy);

}


.site-header.scrolled .header-search input::placeholder {

    color: rgba(7, 27, 58, 0.5);

}


.site-header.scrolled .header-search button {

    color: var(--navy);

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.contact-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 105px;

    height: 38px;

    padding: 0 18px;

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

    background: var(--lime);

    color: var(--navy);

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

}


.contact-button:hover {

    transform: translateY(-2px);

    background: transparent;

    color: var(--lime);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 20;

}


.menu-toggle span {

    display: block;

    width: 26px;

    height: 2px;

    margin: 5px auto;

    background: var(--white);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;

}


.site-header.scrolled .menu-toggle span {

    background: var(--navy);

}


/* =========================================================
   MOBILE MENU ACTIVE
========================================================= */

.menu-toggle.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}


.menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

@media (max-width: 1100px) {

    .main-nav {

        gap: 20px;

    }


    .nav-link {

        font-size: 10px;

        letter-spacing: 1.1px;

    }


    .header-search {

        width: 125px;

    }


    .contact-button {

        min-width: 90px;

        padding: 0 14px;

    }

}


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

@media (max-width: 900px) {

    .site-header {

        height: 76px;

    }


    .site-header.scrolled {

        height: 70px;

    }


    .header-container {

        width: 92%;

        justify-content: space-between;

    }


    /* ---------------------------------------------
       BRAND
    --------------------------------------------- */

    .brand {

        z-index: 20;

    }


    .brand-logo {

        width: 44px;

        height: 44px;

    }


    .brand-name span:first-child {

        font-size: 13px;

    }


    .brand-name span:last-child {

        font-size: 6px;

        letter-spacing: 2.5px;

    }


    /* ---------------------------------------------
       HIDE DESKTOP ACTIONS
    --------------------------------------------- */

    .header-actions {

        display: none;

    }


    /* ---------------------------------------------
       MOBILE NAVIGATION
    --------------------------------------------- */

    .main-nav {

        position: fixed;

        top: 76px;

        left: 0;

        width: 100%;

        height: calc(100vh - 76px);

        padding: 40px 8% 50px;

        transform: translateY(-110%);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        gap: 24px;

        background: var(--navy-dark);

        overflow-y: auto;

        opacity: 0;

        visibility: hidden;

        transition:
            transform 0.4s ease,
            opacity 0.4s ease,
            visibility 0.4s ease;

        z-index: 15;

    }


    /* ---------------------------------------------
       MOBILE NAV ACTIVE
    --------------------------------------------- */

    .main-nav.active {

        transform: translateY(0);

        opacity: 1;

        visibility: visible;

    }


    /* ---------------------------------------------
       MOBILE NAV LINKS
    --------------------------------------------- */

    .main-nav .nav-link {

        display: inline-flex;

        padding: 10px 0;

        color: var(--white);

        font-size: 12px;

        letter-spacing: 1.8px;

    }


    .main-nav .nav-link:hover {

        color: var(--lime);

    }


    /* ---------------------------------------------
       MOBILE MENU BUTTON
    --------------------------------------------- */

    .menu-toggle {

        display: block;

    }

}


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

@media (max-width: 480px) {

    .brand-name span:first-child {

        font-size: 11px;

        letter-spacing: 0.8px;

    }


    .brand-name span:last-child {

        font-size: 5px;

        letter-spacing: 2px;

    }


    .main-nav {

        padding-top: 35px;

    }


    .main-nav .nav-link {

        font-size: 11px;

    }

}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 800px;

    overflow: hidden;

    isolation: isolate;

    background: var(--navy-dark);

}


/* =========================================================
   HERO BACKGROUND SLIDESHOW
   LEFT → RIGHT TRANSITION
========================================================= */

.hero-background {

    position: absolute;
    inset: -3%;
    z-index: -3;
    overflow: hidden;

}

.hero-slide {

    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: translate3d(0, 0, 0) scale(1.02);

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}

.hero-slide-current {

    z-index: 1;

    transform: translate3d(0, 0, 0) scale(1.02);

    animation: heroImageMotion 5s ease-out forwards;

}

.hero-slide-next {

    z-index: 2;

    transform: translate3d(-100%, 0, 0) scale(1.02);

}

/* =========================================================
   LEFT → RIGHT SLIDE
========================================================= */

.hero-background.slide-active .hero-slide-current {

    animation: heroCurrentExit 1.15s cubic-bezier(.77, 0, .175, 1) forwards;

}

.hero-background.slide-active .hero-slide-next {

    animation: heroSlideFromLeft 1.15s cubic-bezier(.77, 0, .175, 1) forwards;

}

@keyframes heroCurrentExit {

    0% {
        transform: translate3d(0, 0, 0) scale(1.02);
    }

    100% {
        transform: translate3d(100%, 0, 0) scale(1.02);
    }

}

@keyframes heroSlideFromLeft {

    0% {
        transform: translate3d(-100%, 0, 0) scale(1.02);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1.02);
    }

}

/* =========================================================
   SUBTLE IMAGE MOVEMENT
========================================================= */

@keyframes heroImageMotion {

    0% {
        background-position: center center;
        transform: scale(1.02);
    }

    100% {
        background-position: 53% center;
        transform: scale(1.07);
    }

}

/* Prevent old fade behavior from interfering. */
.hero-background.changing {
    opacity: 1;
    transform: none;
}


/* =========================================================
   HERO GRADIENT
========================================================= */

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

    background:
        /* BLACK GRADIENT — LEFT TO CENTER */
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.78) 20%,
            rgba(0, 0, 0, 0.58) 40%,
            rgba(0, 0, 0, 0.30) 58%,
            rgba(0, 0, 0, 0.05) 78%,
            transparent 100%
        ),


        /* LIME GLOW AT BOTTOM */
        linear-gradient(
            to top,
            rgba(183, 230, 0, 0.92) 0%,
            rgba(183, 230, 0, 0.92) 0%,
            rgba(183, 230, 0, 0.92) 0%,
            transparent 40%
        );
}


/* =========================================================
   LIME GLOW
========================================================= */

.hero-glow {

    position: absolute;

    right: -180px;
    bottom: -250px;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        rgba(183, 230, 0, 0.22);

    filter:
        blur(90px);

    z-index: -1;

    pointer-events: none;

}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container {

    position: relative;

    z-index: 2;

    width: min(1240px, 92%);

    height: 80%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


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

.hero-content {

    width: 60%;

    max-width: 700px;

    padding-top: 100px;

    text-align: left;

    animation:
        heroEnter 1s ease forwards;

}


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

.hero-content h1 {

    margin:
        0 0 18px;

    color:
        var(--white);

    font-size:
        clamp(30px, 5.2vw, 80px);

    font-weight:
        400;

    line-height:
        0.95;

    letter-spacing:
        -3px;

}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero-content h2 {

    margin:
        0 0 50px;

    color:
        var(--lime);

    font-size:
        clamp(30px, 5.2vw, 80px);

    font-weight:
        600;

    line-height:
        0.4;

    letter-spacing:
        0.5px;

}


/* =========================================================
   TYPING AREA
========================================================= */

.typing-area {

    min-height: 40px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 18px;

    color: var(--white);

    font-size: 32px;

    font-weight: 600;

}


.typing-static {

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

}


.typing-text {

    color:
        var(--lime);

    font-weight:
        800;

}


.typing-cursor {

    color:
        var(--lime);

    font-weight:
        900;

    animation:
        cursorBlink 0.8s infinite;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    max-width:
        620px;

    margin:
        0 0 30px;

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

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.8;

}


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

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.hero-button {

    min-width:
        145px;

    min-height:
        48px;

    padding:
        13px 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary-button {

    background:
        var(--lime);

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

    color:
        var(--navy);

}


.primary-button:hover {

    transform:
        translateY(-4px);

    background:
        var(--white);

    border-color:
        var(--white);

}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.secondary-button {

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

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

    color:
        var(--white);

    backdrop-filter:
        blur(5px);

}


.secondary-button:hover {

    transform:
        translateY(-4px);

    background:
        var(--lime);

    border-color:
        var(--lime);

    color:
        var(--navy);

}


/* =========================================================
   HERO COUNTER
========================================================= */

.hero-counter {

    position: absolute;

    right: 4%;
    bottom: 30px;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

}





.counter-divider {

    opacity:
        0.5;

}


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

@keyframes heroEnter {

    from {

        opacity:
            0;

        transform:
            translateX(-60px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   CURSOR BLINK
========================================================= */

@keyframes cursorBlink {

    0%,
    45% {

        opacity:
            1;

    }

    46%,
    100% {

        opacity:
            0;

    }

}


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

@media (max-width: 1050px) {

    .main-nav {

        gap:
            20px;

    }


    .hero-content {

        width:
            65%;

    }

}


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

@media (max-width: 900px) {

    .site-header {

        height:
            74px;

    }


    .site-header.scrolled {

        height:
            68px;

    }


    .main-nav {

        position:
            fixed;

        top:
            74px;

        right:
            -100%;

        width:
            300px;

        height:
            calc(100vh - 74px);

        padding:
            45px 30px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            24px;

        background:
            rgba(4, 17, 38, 0.98);

        box-shadow:
            -10px 0 35px rgba(0, 0, 0, 0.18);

        backdrop-filter:
            blur(15px);

        transition:
            right 0.4s ease;

    }


    .main-nav.active {

        right:
            0;

    }


    .nav-link {

        font-size:
            12px;

    }


    .site-header.scrolled .nav-link {

        color:
            var(--white);

    }


    .site-header.scrolled .nav-link:hover {

        color:
            var(--lime);

    }


    .contact-button {

        width:
            100%;

        margin-top:
            10px;

    }


    .menu-toggle {

        display:
            block;

    }


    .hero-section {

        min-height:
            680px;

    }


    .hero-container {

        justify-content:
            center;

    }


    .hero-content {

        width:
            90%;

        max-width:
            700px;

        padding-top:
            60px;

    }


    .hero-background {

        inset:
            -5%;

    }

}


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

@media (max-width: 600px) {

    .header-container {

        width:
            90%;

    }


    .brand-logo {

        width:
            42px;

        height:
            42px;

    }


    .brand-name span:first-child {

        font-size:
            12px;

    }


    .brand-name span:last-child {

        font-size:
            7px;

        letter-spacing:
            2px;

    }


    .main-nav {

        top:
            74px;

        width:
            100%;

    }


    .hero-section {

        height:
            80vh;

        min-height:
            680px;

    }


    .hero-container {

        width:
            90%;

    }


    .hero-content {

        width:
            100%;

        padding-top:
            45px;

    }


    .hero-content h1 {

        font-size:
            clamp(39px, 12vw, 55px);

        letter-spacing:
            -2px;

    }


    .hero-content h2 {

        font-size:
            17px;

        line-height:
            1.3;

        margin-bottom:
            25px;

    }


    .typing-area {

        font-size:
            15px;

    }


    .hero-description {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .hero-buttons {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-button {

        width:
            100%;

    }


    .hero-counter {

        right:
            5%;

        bottom:
            20px;

    }


    .hero-background {

        animation:
            heroImageMotionMobile 2s ease-in-out forwards;

    }

}


/* =========================================================
   MOBILE HERO IMAGE MOVEMENT
========================================================= */

@keyframes heroImageMotionMobile {

    0% {
        background-position: center center;
        transform: scale(1.02);
    }

    100% {
        background-position: 54% center;
        transform: scale(1.06);
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}



/* =========================================================
   SECTION 2 — ABOUT PREVIEW
========================================================= */

.about-preview {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* SUBTLE BACKGROUND DETAIL */

.about-preview::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(183, 230, 0, 0.08);
    filter: blur(5px);
}

.about-preview::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(7, 27, 58, 0.045);
}

/* CONTENT */

.about-preview-container {
    position: relative;
    z-index: 2;
    width: min(900px, 88%);
    text-align: center;
}

/* SMALL LABEL */

.about-preview-label {
    margin-bottom: 22px;
    color: var(--lime-dark);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* TITLE */

.about-preview h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -3px;
}

.about-preview h2 span {
    display: block;
    color: var(--lime-dark);
}

/* DIVIDER */

.about-preview-line {
    width: 55px;
    height: 3px;
    margin: 28px auto 30px;
    background: var(--lime);
}

/* DESCRIPTION */

.about-preview p {
    max-width: 760px;
    margin: 0 auto 14px;
    color: #596273;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

/* BUTTON */

.about-preview-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 160px;
    margin-top: 22px;
    padding: 14px 24px;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: var(--white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.about-preview-button i {
    font-size: 11px;
    transition: transform 0.35s ease;
}

.about-preview-button:hover {
    transform: translateY(-4px);
    background: var(--lime);
    border-color: var(--lime);
    color: var(--navy);
}

.about-preview-button:hover i {
    transform: translateX(5px);
}

/* =========================================================
   SECTION 2 — RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .about-preview {
        height: 80vh;
        min-height: 600px;
    }

    .about-preview-container {
        width: 88%;
    }

    .about-preview-label {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }

    .about-preview h2 {
        font-size: clamp(34px, 11vw, 50px);
        letter-spacing: -2px;
    }

    .about-preview-line {
        margin: 22px auto 24px;
    }

    .about-preview p {
        font-size: 13px;
        line-height: 1.7;
    }

    .about-preview-button {
        width: 170px;
        margin-top: 18px;
    }

}


/* =========================================================
   SECTION 3 — OUR SERVICES
========================================================= */

.services-preview {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 320px;
    overflow: hidden;

    background: var(--lime);
    

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

    isolation: isolate;
}

/* =========================================================
   TOP TRANSITION
========================================================= */

.clients7-transition-top {

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: 45px;

    z-index: 10;

    background: #ffffff;

    clip-path:
        ellipse(
            58% 100% at 50% 0%
        );

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.services-preview::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        url("../images/services2/1.jpg")
        center / cover
        no-repeat;

    opacity: .70;

    z-index: -3;

    transform: scale(1.04);
}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.services-preview-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(183, 230, 0, 0.97) 0%,
            rgba(183, 230, 0, 0.78) 35%,
            rgba(183, 230, 0, 0.72) 50%,
            rgba(183, 230, 0, 0.82) 70%,
            rgba(183, 230, 0, 0.96) 100%
        );
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.services-decoration {
    position: absolute;

    border: 1px solid
        rgba(7, 27, 58, 0.18);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}

.services-decoration-left {
    width: 330px;
    height: 330px;

    left: -210px;
    top: -110px;
}

.services-decoration-right {
    width: 420px;
    height: 420px;

    right: -270px;
    bottom: -280px;
}

.services-decoration-left::after,
.services-decoration-right::after {
    content: "";

    position: absolute;
    inset: 25px;

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

    border-radius: 50%;
}



/* =========================================================
   HEADING — UPPER CENTER
========================================================= */

.services-preview-heading {
    position: absolute;

    top: 20px;
    left: 50%;

    transform:
        translateX(-50%);

    text-align: center;

    z-index: 10;

    white-space: nowrap;
}

.services-preview-heading span {
    display: block;

    margin-bottom: 5px;

    color: var(--navy);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.services-preview-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(27px, 3vw, 40px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -1.5px;
}


/* =========================================================
   IMAGE SLIDER
========================================================= */

.services-slider {
    position: absolute;

    top: 47%;
    left: 0;

    width: 100%;

    transform:
        translateY(-50%);

    overflow: hidden;

    z-index: 4;

    /*
       Fade the beginning and end of the slider.
       This makes the cards appear to enter
       and disappear naturally.
    */

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 7%,
            black 93%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 7%,
            black 93%,
            transparent 100%
        );
}


/* =========================================================
   CONTINUOUS TRACK
========================================================= */

.services-track {
    display: flex;

    align-items: center;

    width: max-content;

    gap: 14px;

    /*
       IMPORTANT:
       The track contains two identical sets.

       Moving exactly 50% means that when the
       first set leaves, the second identical
       set is already in exactly the same position.

       This creates a seamless infinite loop.
    */

    animation:
        servicesContinuousSlide
        65s
        linear
        infinite;
}


/* Pause while hovering */

.services-track:hover {
    animation-play-state: paused;
}


/* =========================================================
   CONTINUOUS ANIMATION
========================================================= */

@keyframes servicesContinuousSlide {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(-50% - 7px)
            );
    }

}


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

.service-card {
    position: relative;

    flex:
        0 0 190px;

    width: 190px;
    height: 125px;

    overflow: hidden;

    background:
        var(--navy);

    border:
        2px solid
        rgba(255, 255, 255, 0.75);

    box-shadow:
        0 12px 28px
        rgba(4, 17, 38, 0.20);

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


/* =========================================================
   CARD HOVER
========================================================= */

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

    border-color:
        var(--white);

    box-shadow:
        0 18px 35px
        rgba(4, 17, 38, 0.30);
}


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

.service-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

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


/* =========================================================
   CARD OVERLAY
========================================================= */

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

    background:
        linear-gradient(
            to top,
            rgba(4, 17, 38, 0.94) 0%,
            rgba(4, 17, 38, 0.40) 48%,
            rgba(4, 17, 38, 0.04) 100%
        );
}


/* =========================================================
   CARD TITLE
========================================================= */

.service-card-title {
    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 12px;

    color:
        var(--white);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.2px;

    line-height: 1.25;
}


/* =========================================================
   LIME CARD ACCENT
========================================================= */

.service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 35px;
    height: 3px;

    background:
        var(--lime);

    z-index: 3;

    transition:
        width 0.4s ease;
}

.service-card:hover::before {
    width: 100%;
}


/* =========================================================
   BUTTON — LOWER CENTER
========================================================= */

.services-preview-button {
    position: absolute;

    left: 50%;
    bottom: 60px;

    transform:
        translateX(-50%);

    z-index: 20;

    display: inline-flex;

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

    gap: 10px;

    min-width: 175px;

    padding:
        11px 20px;

    background:
        var(--navy);

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

    color:
        var(--white);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    box-shadow:
        0 8px 22px
        rgba(4, 17, 38, 0.20);

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

.services-preview-button i {
    font-size: 10px;

    transition:
        transform 0.35s ease;
}

.services-preview-button:hover {
    transform:
        translateX(-50%)
        translateY(-4px);

    background:
        var(--lime);

    border-color:
        var(--lime);

    color:
        var(--navy);

    box-shadow:
        0 14px 28px
        rgba(4, 17, 38, 0.22);
}

.services-preview-button:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.services-preview-content::before {
    content: "";

    position: absolute;

    top: 30px;
    left: 5%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--navy);

    box-shadow:
        14px 0 0
        rgba(7, 27, 58, 0.45),

        28px 0 0
        rgba(7, 27, 58, 0.20);

    opacity: 0.7;
}

.services-preview-content::after {
    content: "";

    position: absolute;

    top: 30px;
    right: 5%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--navy);

    box-shadow:
        -14px 0 0
        rgba(7, 27, 58, 0.45),

        -28px 0 0
        rgba(7, 27, 58, 0.20);

    opacity: 0.7;
}


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

@media (max-width: 900px) {

    .services-preview {
        height: 40vh;
        min-height: 340px;
    }

    .service-card {
        flex-basis: 170px;

        width: 170px;
        height: 115px;
    }

    .services-track {
        animation-duration: 70s;
    }

}


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

@media (max-width: 600px) {

    .services-preview {
        height: 40vh;
        min-height: 330px;
    }


    /* HEADING */

    .services-preview-heading {
        top: 22px;
    }

    .services-preview-heading span {
        font-size: 7px;

        letter-spacing: 2px;
    }

    .services-preview-heading h2 {
        font-size: 25px;
    }

    .services-heading-line {
        width: 40px;

        margin-top: 8px;
    }


    /* SLIDER */

    .services-slider {
        top: 52%;
    }

    .services-track {
        gap: 9px;

        animation-duration: 60s;
    }


    /* CARDS */

    .service-card {
        flex-basis: 145px;

        width: 145px;
        height: 95px;
    }

    .service-card-title {
        left: 9px;
        right: 9px;

        bottom: 8px;

        font-size: 8px;

        letter-spacing: 0.9px;
    }


    /* BUTTON */

    .services-preview-button {
        bottom: 15px;

        min-width: 160px;

        padding:
            10px 15px;

        font-size: 8px;
    }

    .services-preview-button:hover {
        transform:
            translateX(-50%)
            translateY(-3px);
    }


    /* DECORATION */

    .services-decoration-left {
        width: 240px;
        height: 240px;

        left: -170px;
        top: -80px;
    }

    .services-decoration-right {
        width: 280px;
        height: 280px;

        right: -190px;
        bottom: -180px;
    }

}


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

@media (max-width: 380px) {

    .services-preview {
        min-height: 310px;
    }

    .services-preview-heading h2 {
        font-size: 22px;
    }

    .service-card {
        flex-basis: 130px;

        width: 130px;
        height: 88px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .services-track {
        animation: none;
    }

    .service-card,
    .service-card img,
    .services-preview-button {
        transition: none !important;
    }

}

/* =========================================================
   BOTTOM TRANSITION
========================================================= */

.clients7-transition-bottom {

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100%;

    height: 42px;

    z-index: 10;

    background: #ffffff;

    clip-path:
        ellipse(
            62% 100% at 50% 100%
        );

}



/* =========================================================
   SECTION 4 — MISSION & VISION
========================================================= */

.mission-vision {
    position: relative;

    width: 100%;
    height: 80vh;
    min-height: 600px;

    background: var(--white);

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

    overflow: hidden;
}


/* =========================================================
   TEXT AREA
========================================================= */

.mission-vision-text {
    width: min(900px, 85%);

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.mission-vision-label {
    display: block;

    margin-bottom: 12px;

    color: var(--lime-dark);

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

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.mission-vision-text > h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(38px, 5vw, 64px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -2.5px;
}

.mission-vision-text > h2 span {
    color: var(--lime-dark);

    margin: 0 5px;
}


/* =========================================================
   LINE
========================================================= */

.mission-vision-line {
    width: 60px;
    height: 3px;

    margin: 20px auto 50px;

    background: var(--navy);

    position: relative;
}

.mission-vision-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 20px;
    height: 3px;

    background: var(--lime);

    transform: translateX(-50%);
}


/* =========================================================
   MISSION / VISION
========================================================= */

.mission-block,
.vision-block {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   MISSION
========================================================= */

.mission-block {
    margin-bottom: 42px;
}


/* =========================================================
   SMALL TITLE
========================================================= */

.mission-block > span,
.vision-block > span {
    display: block;

    margin-bottom: 12px;

    color: var(--navy);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================================
   LIME UNDERLINE
========================================================= */

.mission-block > span::after,
.vision-block > span::after {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin: 8px auto 0;

    background: var(--lime);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.mission-block p,
.vision-block p {
    margin: 0;

    color: rgba(7, 27, 58, 0.68);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.9;
}


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

@media (max-width: 650px) {

    .mission-vision {
        height: 80vh;
        min-height: 620px;
    }

    .mission-vision-text {
        width: 88%;
    }

    .mission-vision-label {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .mission-vision-text > h2 {
        font-size: 36px;
        letter-spacing: -1.5px;
    }

    .mission-vision-line {
        margin:
            17px auto 38px;
    }

    .mission-block {
        margin-bottom: 35px;
    }

    .mission-block > span,
    .vision-block > span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .mission-block p,
    .vision-block p {
        font-size: 12px;
        line-height: 1.8;
    }
}


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

@media (max-width: 380px) {

    .mission-vision {
        min-height: 650px;
    }

    .mission-vision-text > h2 {
        font-size: 31px;
    }

    .mission-block p,
    .vision-block p {
        font-size: 11px;
    }
}


/* =========================================================
   SECTION 5 — WHY CHOOSE US
========================================================= */

.neat5-section {
    position: relative;
    width: 100%;
    height: 120vh;
    min-height: 800px;

    background: #ffffff;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #071b3a;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.neat5-container {
    width: min(1280px, 90%);
    height: 82vh;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.78fr 1.22fr;

    gap: 75px;

    align-items: center;
}


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

.neat5-intro {
    opacity: 0;

    transform:
        translate3d(-100px, 35px, 0);

    transition:
        opacity 0.9s ease,
        transform 1.1s cubic-bezier(.16, 1, .3, 1);

    will-change: transform, opacity;
}


.neat5-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-family: "Inter", sans-serif;

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

    letter-spacing: 4px;

    color: #91b800;
}


.neat5-intro h2 {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: clamp(50px, 5.2vw, 78px);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -4px;

    color: #071b3a;
}


.neat5-intro h2 strong {
    display: block;

    color: #b7e600;
}


.neat5-line {
    position: relative;

    width: 100px;
    height: 3px;

    margin: 32px 0 28px;

    background: #071b3a;

    overflow: hidden;
}


.neat5-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #b7e600;

    transition:
        width 1.2s cubic-bezier(.16, 1, .3, 1);
}


.neat5-intro p {
    max-width: 430px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.9;

    color: #58677b;
}


/* =========================================================
   PRINCIPLES GRID
========================================================= */

.neat5-principles {
    display: grid;

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

    width: 100%;

    
}


/* =========================================================
   PRINCIPLE
========================================================= */

.neat5-principle {
    position: relative;

    min-height: 270px;

    padding: 35px 38px;

    background: #ffffff;

    

    opacity: 0;

    transform:
        translate3d(80px, 70px, 0)
        scale(0.96);

    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(.16, 1, .3, 1),
        background 0.35s ease;

    will-change: transform, opacity;
}


/* =========================================================
   DIFFERENT STARTING POSITIONS
========================================================= */

.neat5-principle:nth-child(1) {
    transform:
        translate3d(80px, 70px, 0)
        scale(0.96);
}


.neat5-principle:nth-child(2) {
    transform:
        translate3d(110px, 90px, 0)
        scale(0.96);
}


.neat5-principle:nth-child(3) {
    transform:
        translate3d(80px, 110px, 0)
        scale(0.96);
}


.neat5-principle:nth-child(4) {
    transform:
        translate3d(110px, 130px, 0)
        scale(0.96);
}


/* =========================================================
   ICON
========================================================= */

.neat5-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 22px;

    border: 1px solid #b7e600;

    color: #91b800;

    font-size: 18px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.neat5-principle:hover .neat5-icon {
    background: #b7e600;

    color: #071b3a;

    transform:
        translateY(-5px)
        rotate(-4deg);
}


/* =========================================================
   HEADINGS
========================================================= */

.neat5-principle h3 {
    margin: 0 0 14px;

    font-family: "Inter", sans-serif;

    font-size: clamp(18px, 1.45vw, 24px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.4px;

    color: #071b3a;
}


.neat5-principle h3 span {
    display: block;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.neat5-principle p {
    max-width: 390px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    line-height: 1.75;

    color: #647286;
}


/* =========================================================
   BOTTOM LIME LINE
========================================================= */

.neat5-hover-line {
    position: absolute;

    left: 38px;
    bottom: 20px;

    width: 0;
    height: 2px;

    background: #b7e600;

    transition:
        width 0.5s cubic-bezier(.16, 1, .3, 1);
}


.neat5-principle:hover .neat5-hover-line {
    width: 45px;
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.neat5-section.neat5-visible
.neat5-intro {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


.neat5-section.neat5-visible
.neat5-line::after {
    width: 100%;
}


/* =========================================================
   PRINCIPLE 1
========================================================= */

.neat5-section.neat5-visible
.neat5-principle:nth-child(1) {

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition-delay: 0.12s;
}


/* =========================================================
   PRINCIPLE 2
========================================================= */

.neat5-section.neat5-visible
.neat5-principle:nth-child(2) {

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition-delay: 0.25s;
}


/* =========================================================
   PRINCIPLE 3
========================================================= */

.neat5-section.neat5-visible
.neat5-principle:nth-child(3) {

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition-delay: 0.38s;
}


/* =========================================================
   PRINCIPLE 4
========================================================= */

.neat5-section.neat5-visible
.neat5-principle:nth-child(4) {

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition-delay: 0.51s;
}


/* =========================================================
   SCROLL DOWN
========================================================= */

.neat5-section.neat5-down
.neat5-principle:nth-child(1) {

    transform:
        translate3d(0, -5px, 0)
        scale(1.01);
}


.neat5-section.neat5-down
.neat5-principle:nth-child(2) {

    transform:
        translate3d(0, -10px, 0)
        scale(1.01);
}


.neat5-section.neat5-down
.neat5-principle:nth-child(3) {

    transform:
        translate3d(0, -15px, 0)
        scale(1.01);
}


.neat5-section.neat5-down
.neat5-principle:nth-child(4) {

    transform:
        translate3d(0, -20px, 0)
        scale(1.01);
}


/* =========================================================
   SCROLL UP
========================================================= */

.neat5-section.neat5-up
.neat5-intro {

    transform:
        translate3d(0, -8px, 0);
}


.neat5-section.neat5-up
.neat5-principle:nth-child(1) {

    transform:
        translate3d(0, 5px, 0)
        scale(1);
}


.neat5-section.neat5-up
.neat5-principle:nth-child(2) {

    transform:
        translate3d(0, 10px, 0)
        scale(1);
}


.neat5-section.neat5-up
.neat5-principle:nth-child(3) {

    transform:
        translate3d(0, 15px, 0)
        scale(1);
}


.neat5-section.neat5-up
.neat5-principle:nth-child(4) {

    transform:
        translate3d(0, 20px, 0)
        scale(1);
}


/* =========================================================
   ICON FLOATING ANIMATION
========================================================= */

.neat5-section.neat5-visible
.neat5-icon {

    animation:
        neat5Float 3.5s ease-in-out infinite;
}


.neat5-principle:nth-child(2)
.neat5-icon {
    animation-delay: 0.4s;
}


.neat5-principle:nth-child(3)
.neat5-icon {
    animation-delay: 0.8s;
}


.neat5-principle:nth-child(4)
.neat5-icon {
    animation-delay: 1.2s;
}


@keyframes neat5Float {

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

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

}


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

@media (max-width: 1000px) {

    .neat5-container {
        width: 92%;
        gap: 40px;
    }

    .neat5-intro h2 {
        font-size: clamp(42px, 6vw, 62px);
    }

    .neat5-principle {
        min-height: 250px;
        padding: 30px;
    }

    .neat5-hover-line {
        left: 30px;
    }

}


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

@media (max-width: 760px) {

    .neat5-section {
        height: auto;
        min-height: 100vh;

        padding: 90px 0 70px;

        overflow: visible;
    }


    .neat5-container {
        width: 90%;
        height: auto;

        display: block;
    }


    .neat5-intro {
        margin-bottom: 45px;
    }


    .neat5-intro h2 {
        font-size: clamp(44px, 13vw, 62px);
        letter-spacing: -2px;
    }


    .neat5-principles {
        grid-template-columns: 1fr;
    }


    .neat5-principle {
        min-height: 230px;

        padding: 30px;
    }


    .neat5-hover-line {
        left: 30px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .neat5-intro,
    .neat5-principle {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .neat5-line::after {
        width: 100%;
        transition: none;
    }

    .neat5-icon {
        animation: none !important;
    }

}




/* =========================================================
   SECTION 6 — CORE VALUES
========================================================= */

#coreValues.core-values-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    color: #071b3a;
    overflow: hidden;
    isolation: isolate;
}

#coreValues .core-values-container {
    width: min(1400px, 92%);
    min-height: 80vh;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px 0 40px;
}


/* =========================================================
   INTRO
========================================================= */

#coreValues .core-values-intro {
    width: 100%;
    text-align: center;
    margin-bottom: 38px;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

#coreValues .core-values-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;

    color: #91b800;
}

#coreValues .core-values-eyebrow::before,
#coreValues .core-values-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #b7e600;
}

#coreValues .core-values-title {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;

    color: #071b3a;
}

#coreValues .core-values-title strong {
    color: #91b800;
}

#coreValues .core-values-description {
    max-width: 620px;
    margin: 14px auto 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #667085;
}


/* =========================================================
   VALUES ROW
========================================================= */

#coreValues .core-values-list {
    width: 100%;

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

    align-items: stretch;
}


/* =========================================================
   VALUE ITEM
========================================================= */

#coreValues .core-value-item {
    position: relative;

    min-width: 0;

    padding:
        10px
        clamp(18px, 2vw, 32px)
        8px;

    text-align: center;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   DIVIDERS
========================================================= */

#coreValues .core-value-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 12px;
    right: 0;

    width: 1px;
    height: calc(100% - 24px);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(7,27,58,.13),
            transparent
        );
}




/* =========================================================
   VALUE TITLE
========================================================= */

#coreValues .core-value-item h3 {
    margin: 0 0 17px;

    font-family: "Inter", sans-serif;
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .03em;

    color: #071b3a;

    transition:
        color .35s ease,
        letter-spacing .35s ease;
}


/* =========================================================
   ICON
========================================================= */

#coreValues .core-value-icon {
    position: relative;

    width: 68px;
    height: 68px;

    margin: 0 auto 17px;

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

    border: 1px solid rgba(145,184,0,.35);
    border-radius: 50%;

    color: #071b3a;
    background: #ffffff;

    transition:
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

#coreValues .core-value-icon i {
    position: relative;
    z-index: 2;

    font-size: 21px;

    transition:
        color .35s ease,
        transform .35s ease;
}

#coreValues .icon-ring {
    position: absolute;
    inset: 6px;

    border: 1px solid rgba(183,230,0,.75);
    border-radius: 50%;

    opacity: .55;

    transition:
        transform .5s ease,
        opacity .35s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#coreValues .core-value-item p {
    max-width: 205px;
    min-height: 68px;

    margin: 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.65;

    color: #667085;
}


/* =========================================================
   HOVER
========================================================= */

#coreValues .core-value-item:hover h3 {
    color: #91b800;
    letter-spacing: .055em;
}

#coreValues .core-value-item:hover .core-value-icon {
    color: #91b800;

    border-color: #b7e600;

    box-shadow:
        0 0 0 7px rgba(183,230,0,.08);
}

#coreValues .core-value-item:hover .core-value-icon i {
    color: #91b800;
    transform: scale(1.08);
}

#coreValues .core-value-item:hover .icon-ring {
    transform: rotate(45deg) scale(1.05);
    opacity: 1;
}


/* =========================================================
   SCROLL DOWN ANIMATION
========================================================= */

#coreValues.animate-down .core-values-intro {
    animation:
        coreIntroDown .75s cubic-bezier(.22,1,.36,1) both;
}

#coreValues.animate-down .core-value-item {
    animation:
        coreItemDown .75s cubic-bezier(.22,1,.36,1) both;
}

#coreValues.animate-down .core-value-item:nth-child(1) {
    animation-delay: .08s;
}

#coreValues.animate-down .core-value-item:nth-child(2) {
    animation-delay: .16s;
}

#coreValues.animate-down .core-value-item:nth-child(3) {
    animation-delay: .24s;
}

#coreValues.animate-down .core-value-item:nth-child(4) {
    animation-delay: .32s;
}

#coreValues.animate-down .core-value-item:nth-child(5) {
    animation-delay: .40s;
}

#coreValues.animate-down .core-values-bottom {
    animation:
        coreBottomDown .75s cubic-bezier(.22,1,.36,1) both;

    animation-delay: .50s;
}


/* =========================================================
   SCROLL UP ANIMATION
========================================================= */

#coreValues.animate-up .core-values-intro {
    animation:
        coreIntroUp .75s cubic-bezier(.22,1,.36,1) both;
}

#coreValues.animate-up .core-value-item {
    animation:
        coreItemUp .75s cubic-bezier(.22,1,.36,1) both;
}

#coreValues.animate-up .core-value-item:nth-child(1) {
    animation-delay: .08s;
}

#coreValues.animate-up .core-value-item:nth-child(2) {
    animation-delay: .16s;
}

#coreValues.animate-up .core-value-item:nth-child(3) {
    animation-delay: .24s;
}

#coreValues.animate-up .core-value-item:nth-child(4) {
    animation-delay: .32s;
}

#coreValues.animate-up .core-value-item:nth-child(5) {
    animation-delay: .40s;
}

#coreValues.animate-up .core-values-bottom {
    animation:
        coreBottomUp .75s cubic-bezier(.22,1,.36,1) both;

    animation-delay: .50s;
}


/* =========================================================
   KEYFRAMES — DOWN
========================================================= */

@keyframes coreIntroDown {

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

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

@keyframes coreItemDown {

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

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

@keyframes coreBottomDown {

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

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


/* =========================================================
   KEYFRAMES — UP
========================================================= */

@keyframes coreIntroUp {

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

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

@keyframes coreItemUp {

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

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

@keyframes coreBottomUp {

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

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


/* =========================================================
   IDLE ICON EFFECT
========================================================= */

#coreValues.is-idle .core-value-icon {
    animation: coreIconFloat 3.5s ease-in-out infinite;
}

#coreValues.is-idle .core-value-item:nth-child(2) .core-value-icon {
    animation-delay: .4s;
}

#coreValues.is-idle .core-value-item:nth-child(3) .core-value-icon {
    animation-delay: .8s;
}

#coreValues.is-idle .core-value-item:nth-child(4) .core-value-icon {
    animation-delay: 1.2s;
}

#coreValues.is-idle .core-value-item:nth-child(5) .core-value-icon {
    animation-delay: 1.6s;
}

@keyframes coreIconFloat {

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

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


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

#coreValues .core-values-bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 27px;

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

#coreValues .core-values-bottom > span:not(.core-bottom-line) {
    white-space: nowrap;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;

    color: #071b3a;
}

#coreValues .core-bottom-line {
    width: 45px;
    height: 1px;

    background: #b7e600;
}


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

@media (max-width: 1000px) {

    #coreValues.core-values-section {
        height: auto;
        min-height: 80vh;
    }

    #coreValues .core-values-container {
        min-height: 80vh;
        padding: 75px 0 60px;
    }

    #coreValues .core-values-list {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 35px;
    }

}


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

@media (max-width: 650px) {

    #coreValues.core-values-section {
        min-height: 100vh;
    }

    #coreValues .core-values-container {
        min-height: 100vh;
        width: 90%;
        padding: 70px 0 50px;
    }

    #coreValues .core-values-title {
        font-size: 34px;
    }

    #coreValues .core-values-description {
        font-size: 13px;
    }

    #coreValues .core-values-list {
        grid-template-columns: 1fr;
    }

    #coreValues .core-value-item {
        padding: 25px 15px 30px;
    }

    #coreValues .core-value-item:not(:last-child)::after {
        top: auto;
        right: 20%;
        bottom: 0;

        width: 60%;
        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(7,27,58,.13),
                transparent
            );
    }

    #coreValues .core-value-item p {
        max-width: 300px;
    }

    #coreValues .core-values-bottom > span:not(.core-bottom-line) {
        font-size: 8px;
        letter-spacing: .14em;
        text-align: center;
    }

    #coreValues .core-bottom-line {
        width: 25px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #coreValues.animate-up *,
    #coreValues.animate-down * {
        animation: none !important;
    }

    #coreValues.is-idle .core-value-icon {
        animation: none !important;
    }

}





/* =========================================================
   SECTION 7 — OUR CLIENTS
========================================================= */

.clients7-section {

    position: relative;

    width: 100%;

    height: 20vh;

    min-height: 250px;

    overflow: hidden;

    color: #ffffff;

    isolation: isolate;

}



/* =========================================================
   BACKGROUND
========================================================= */

.clients7-bg {

    position: absolute;

    inset: -5%;

    z-index: -5;

    background-image:
        url("../images/services2/1.jpg");

    background-size: cover;

    background-position: center;

    transform: scale(1.05);

    animation:
        clients7Background
        18s
        ease-in-out
        infinite alternate;

}


@keyframes clients7Background {

    0% {

        transform:
            scale(1.05)
            translate3d(
                0,
                0,
                0
            );

    }

    100% {

        transform:
            scale(1.12)
            translate3d(
                -1%,
                -1%,
                0
            );

    }

}



/* =========================================================
   BLUE OVERLAY
========================================================= */

.clients7-overlay {

    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(183, 230, 0, 0.97) 0%,
            rgba(183, 230, 0, 0.78) 35%,
            rgba(183, 230, 0, 0.72) 50%,
            rgba(183, 230, 0, 0.82) 70%,
            rgba(183, 230, 0, 0.96) 100%
        );
color: var(--lime);
}



/* =========================================================
   ANIMATED LIGHT
========================================================= */

.clients7-section::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -30%;

    width: 35%;

    height: 300%;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.267),
            transparent
        );

    transform:
        rotate(18deg);

    animation:
        clients7LightSweep
        9s
        ease-in-out
        infinite;

    pointer-events: none;

}


@keyframes clients7LightSweep {

    0% {

        left: -40%;

    }

    50% {

        left: 110%;

    }

    100% {

        left: 110%;

    }

}



/* =========================================================
   TOP TRANSITION
========================================================= */

.clients7-transition-top {

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: 45px;

    z-index: 10;

    background: #ffffff;

    clip-path:
        ellipse(
            58% 100% at 50% 0%
        );

}



/* =========================================================
   BOTTOM TRANSITION
========================================================= */

.clients7-transition-bottom {

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100%;

    height: 42px;

    z-index: 10;

    background: #ffffff;

    clip-path:
        ellipse(
            62% 100% at 50% 100%
        );

}



/* =========================================================
   GLOW SYSTEM
========================================================= */

.clients7-glow {

    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    filter:
        blur(90px);

    pointer-events: none;

    z-index: -2;

}



/* =========================================================
   BLUE GLOW
========================================================= */

.clients7-glow-1 {

    top: -230px;

    right: 10%;

    background:
        rgba(
            183,
            224,
            0,
            .8
        );

    animation:
        clients7BlueGlow
        9s
        ease-in-out
        infinite alternate;

}


@keyframes clients7BlueGlow {

    0% {

        transform:
            translate(
                0,
                0
            )
            scale(1);

    }

    100% {

        transform:
            translate(
                -130px,
                110px
            )
            scale(1.25);

    }

}



/* =========================================================
   LIME GLOW
========================================================= */

.clients7-glow-2 {

    bottom: -250px;

    left: 12%;

    background:
        rgba(
            183,
            224,
            0,
            .18
        );

    animation:
        clients7LimeGlow
        12s
        ease-in-out
        infinite alternate;

}


@keyframes clients7LimeGlow {

    0% {

        transform:
            translate(
                0,
                0
            )
            scale(1);

    }

    100% {

        transform:
            translate(
                150px,
                -70px
            )
            scale(1.3);

    }

}



/* =========================================================
   FLOATING PARTICLES
========================================================= */

.clients7-container::before,
.clients7-container::after {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        rgba(
            183,
            224,
            0,
            .8
        );

    box-shadow:
        120px 20px
        rgba(
            183,
            224,
            0,
            .45
        ),

        260px -50px
        rgba(
            255,
            255,
            255,
            .35
        ),

        480px 100px
        rgba(
            183,
            224,
            0,
            .35
        ),

        700px -20px
        rgba(
            255,
            255,
            255,
            .25
        );

    animation:
        clients7Particles
        7s
        ease-in-out
        infinite alternate;

    pointer-events: none;

}


@keyframes clients7Particles {

    0% {

        transform:
            translateY(
                15px
            );

        opacity: .3;

    }

    100% {

        transform:
            translateY(
                -20px
            );

        opacity: 1;

    }

}



/* =========================================================
   MAIN CONTAINER
========================================================= */

.clients7-container {

    position: relative;

    width:
        min(
            1450px,
            calc(100% - 70px)
        );

    height: 100%;

    margin:
        0 auto;

}



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

.clients7-heading {

    position: absolute;

    left: 0;

    top: 40%;

    width: 270px;

    z-index: 5;

    opacity: 0;

    transform:
        translateY(-50%)
        translateX(-50px)
        scale(.95);

    transition:
        opacity 1s ease,
        transform 1.1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.clients7-section.is-visible
.clients7-heading {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);

}



/* =========================================================
   LABEL
========================================================= */

.clients7-label {

    display: inline-block;

    margin-bottom: 8px;

    color: #071b3a;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    position: relative;

}


.clients7-label::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    background:
       #071b3a;

    transition:
        width 1s ease 0.5s;

}


.clients7-section.is-visible
.clients7-label::after {

    width: 35px;

}



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

.clients7-heading h2 {

    margin: 0;

    font-size: 38px;

    line-height: .95;

    letter-spacing: -2px;

    font-weight: 900;
    
    color: #071b3a;

}


.clients7-heading h2 span {

    display: block;

    color: #071b3a;

}



/* =========================================================
   DESCRIPTION
========================================================= */

.clients7-heading p {

    margin:
        14px 0 0;

    max-width: 235px;

    color:
        #071b3a;

    font-size: 12px;

    line-height: 1.6;

}



/* =========================================================
   LOGO AREA
========================================================= */

.clients7-logo-area {

    position: absolute;

    left: 305px;

    right: 0;

    top: 43%;

    transform:
        translateY(-50%);

    padding:
        25px 0;

    animation:
        clients7FloatingRow
        6s
        ease-in-out
        infinite alternate;

}


@keyframes clients7FloatingRow {

    0% {

        margin-top: 0;

    }

    100% {

        margin-top: -5px;

    }

}



/* =========================================================
   MARQUEE
========================================================= */

.clients7-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        20px 0;

}



/* =========================================================
   FADE EDGES
========================================================= */

.clients7-marquee::before,
.clients7-marquee::after {

    content: "";

    position: absolute;

    top: 0;

    width: 110px;

    height: 100%;

    z-index: 5;

    pointer-events: none;

}


.clients7-marquee::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            rgba(208, 255, 0, 0.26),
            transparent
        );

}


.clients7-marquee::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            rgba(
            183,
            224,
            0,
            .8
                ),
            transparent
        );

}



/* =========================================================
   TRACK
========================================================= */

.clients7-track {

    display: flex;

    align-items: center;

    width: max-content;

    gap: 22px;

    will-change:
        transform;

}



/* =========================================================
   LARGE CLIENT LOGO
========================================================= */

.clients7-logo {

    flex-shrink: 0;

    width: 170px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 22px;

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

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

    border-radius: 8px;

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            .22
        );

    opacity: 0;

    transform:
        translateY(40px)
        scale(.75)
        rotateX(12deg);

    transition:
        opacity .65s ease,
        transform .75s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        box-shadow .35s ease;

}



/* =========================================================
   LOGO IMAGE
========================================================= */

.clients7-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter:
        grayscale(0%);

    opacity: 1;

    transition:
        filter .4s ease,
        opacity .4s ease,
        transform .4s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}



/* =========================================================
   LOGO ENTRANCE
========================================================= */

.clients7-section.is-visible
.clients7-logo {

    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotateX(0);

}



/* =========================================================
   STAGGERED ENTRANCE
========================================================= */

.clients7-section.is-visible
.clients7-logo:nth-child(1) {
    transition-delay: .05s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(2) {
    transition-delay: .10s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(3) {
    transition-delay: .15s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(4) {
    transition-delay: .20s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(5) {
    transition-delay: .25s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(6) {
    transition-delay: .30s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(7) {
    transition-delay: .35s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(8) {
    transition-delay: .40s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(9) {
    transition-delay: .45s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(10) {
    transition-delay: .50s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(11) {
    transition-delay: .55s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(12) {
    transition-delay: .60s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(13) {
    transition-delay: .65s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(14) {
    transition-delay: .70s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(15) {
    transition-delay: .75s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(16) {
    transition-delay: .80s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(17) {
    transition-delay: .85s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(18) {
    transition-delay: .90s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(19) {
    transition-delay: .95s;
}

.clients7-section.is-visible
.clients7-logo:nth-child(20) {
    transition-delay: 1s;
}



/* =========================================================
   INFINITE MOVEMENT
========================================================= */

.clients7-section.marquee-running
.clients7-track {

    animation:
        clients7InfiniteSlide
        60s
        linear
        infinite;

}


@keyframes clients7InfiniteSlide {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}



/* =========================================================
   HOVER LOGO
========================================================= */

.clients7-logo:hover {

    transform:
        translateY(-10px)
        scale(1.08);

    box-shadow:
        0 22px 50px
        rgba(
            0,
            0,
            0,
            .36
        );

    z-index: 10;

}


.clients7-logo:hover img {

    filter:
        grayscale(0%);

    opacity: 1;

    transform:
        scale(1.08);

}



/* =========================================================
   PAUSE SLIDER
========================================================= */

.clients7-marquee:hover
.clients7-track {

    animation-play-state:
        paused;

}



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

@media (max-width: 1100px) {

    .clients7-container {

        width:
            calc(100% - 45px);

    }


    .clients7-heading {

        width: 225px;

    }


    .clients7-heading h2 {

        font-size: 31px;

    }


    .clients7-logo-area {

        left: 250px;

    }


    .clients7-logo {

        width: 165px;

        height: 78px;

    }


    .clients7-track {

        gap: 16px;

    }

}



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

@media (max-width: 700px) {

    .clients7-section {

        height: auto;

        min-height: 420px;

    }


    .clients7-container {

        width:
            calc(100% - 25px);

    }


    .clients7-heading {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        padding-top: 65px;

        text-align: center;

        transform:
            translateX(-30px)
            scale(.95);

    }


    .clients7-section.is-visible
    .clients7-heading {

        transform:
            translateX(0)
            scale(1);

    }


    .clients7-heading h2 {

        font-size: 34px;

    }


    .clients7-heading p {

        margin:
            12px auto 0;

    }


    .clients7-logo-area {

        position: relative;

        left: auto;

        right: auto;

        top: auto;

        transform: none;

        width:
            calc(100% + 25px);

        margin-left:
            -12.5px;

        margin-top: 18px;

        padding:
            10px 0 50px;

    }


    .clients7-marquee {

        padding:
            18px 0;

    }


    .clients7-logo {

        width: 150px;

        height: 72px;

    }


    .clients7-track {

        gap: 14px;

    }


    .clients7-marquee::before,
    .clients7-marquee::after {

        width: 55px;

    }


    .clients7-transition-top {

        height: 30px;

    }


    .clients7-transition-bottom {

        height: 30px;

    }

}



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

@media (max-width: 400px) {

    .clients7-logo {

        width: 135px;

        height: 65px;

    }


    .clients7-heading h2 {

        font-size: 30px;

    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .clients7-bg,
    .clients7-glow-1,
    .clients7-glow-2,
    .clients7-section::before,
    .clients7-container::before,
    .clients7-container::after,
    .clients7-logo-area {

        animation: none;

    }


    .clients7-track {

        animation: none !important;

    }


    .clients7-heading {

        opacity: 1;

        transform:
            translateY(-50%);

        transition: none;

    }


    .clients7-logo {

        opacity: 1;

        transform: none;

        transition: none;

    }

}

/* =========================================================
   LOGO CLICK ANIMATION
========================================================= */

.clients7-logo.logo-clicked {

    animation:
        clients7LogoClick
        .45s
        ease;

}


@keyframes clients7LogoClick {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.14)
            rotate(-2deg);

    }

    100% {

        transform:
            scale(1);

    }

}


/* =========================================================
   SECTION 8 — NEWS & UPDATES
========================================================= */

.news-section {

    position: relative;

    min-height: 50vh;

    padding: 70px 6%;

    background:
        #ffffff;

    overflow: hidden;

    display: flex;

    align-items: center;
}


/* =========================================================
   CONTAINER
========================================================= */

.news-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.news-heading {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 35px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.news-section.news-visible
.news-heading {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SMALL TITLE
========================================================= */

.news-small-title {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    color:
        #062d4d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.news-small-title i {

    color:
        #b7e000;

    animation:
        newsBolt 2s infinite;
}


@keyframes newsBolt {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.25)
            rotate(8deg);
    }
}


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

.news-heading h2 {

    margin: 0;

    color:
        #043c61;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    font-weight:
        850;

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


.news-heading h2 span {

    color:
        #b7e000;

    position:
        relative;
}


/* UNDERLINE */

.news-heading h2 span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 100%;

    height: 3px;

    background:
        #b7e000;

    border-radius:
        10px;

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.7s ease 0.4s;
}


.news-section.news-visible
.news-heading h2 span::after {

    transform:
        scaleX(1);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.news-heading p {

    margin:
        12px auto 0;

    max-width:
        560px;

    color:
        #71808c;

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   NEWS GRID
========================================================= */

.news-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        22px;
}


/* =========================================================
   NEWS CARD
========================================================= */

.news-card {

    position:
        relative;

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            7,
            86,
            138,
            0.10
        );

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            48,
            80,
            0.07
        );

    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.35s ease;
}


/* STAGGER */

.news-card:nth-child(1) {

    transition-delay:
        0.1s;
}


.news-card:nth-child(2) {

    transition-delay:
        0.25s;
}


.news-card:nth-child(3) {

    transition-delay:
        0.4s;
}


/* ACTIVE */

.news-section.news-visible
.news-card {

    opacity:
        1;

    transform:
        translateY(0);
}


/* HOVER */

.news-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px
        rgba(
            0,
            48,
            80,
            0.14
        );
}


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

.news-image {

    position:
        relative;

    height:
        175px;

    overflow:
        hidden;
}


.news-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform 0.6s ease;
}


.news-card:hover
.news-image img {

    transform:
        scale(1.08);
}


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

.news-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(
                0,
                35,
                55,
                0.45
            )
        );

    pointer-events:
        none;
}


/* =========================================================
   CATEGORY
========================================================= */

.news-category {

    position:
        absolute;

    top:
        12px;

    left:
        12px;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px 9px;

    border-radius:
        7px;

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    backdrop-filter:
        blur(5px);
}


/* ANNOUNCEMENT */

.news-category.announcement {

    background:
        rgba(
            7,
            86,
            138,
            0.92
        );
}


/* BLOG */

.news-category.blog {

    background:
        rgba(
            80,
            110,
            0,
            0.92
        );
}


/* NEWS */

.news-category.company-news {

    background:
        rgba(
            4,
            60,
            97,
            0.92
        );
}


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

.news-content {

    padding:
        17px 18px 18px;
}


/* =========================================================
   DATE
========================================================= */

.news-date {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        7px;

    color:
        #8b99a3;

    font-size:
        8px;

    font-weight:
        600;
}


.news-date i {

    color:
        #b7e000;
}


/* =========================================================
   CARD TITLE
========================================================= */

.news-content h3 {

    margin:
        0 0 7px;

    color:
        #043c61;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.3;

    transition:
        color 0.25s ease;
}


.news-card:hover
.news-content h3 {

    color:
        #07568a;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.news-content p {

    margin:
        0 0 13px;

    color:
        #71808c;

    font-size:
        10px;

    line-height:
        1.6;
}


/* =========================================================
   READ MORE
========================================================= */

.news-read-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #07568a;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color 0.25s ease;
}


.news-read-more i {

    color:
        #b7e000;

    transition:
        transform 0.3s ease;
}


.news-read-more:hover {

    color:
        #043c61;
}


.news-read-more:hover i {

    transform:
        translateX(5px);
}


/* =========================================================
   VIEW ALL
========================================================= */

.news-view-all {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        28px;

    opacity:
        0;

    transform:
        translateY(15px);

    transition:
        opacity 0.6s ease 0.5s,
        transform 0.6s ease 0.5s;
}


.news-section.news-visible
.news-view-all {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.news-view-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 18px;

    border:
        1px solid
        #07568a;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #07568a;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        all 0.3s ease;
}


.news-view-button i {

    transition:
        transform 0.3s ease;
}


.news-view-button:hover {

    background:
        #07568a;

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(
            7,
            86,
            138,
            0.18
        );
}


.news-view-button:hover i {

    transform:
        translateX(5px);
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.news-decoration {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        0.5;
}


.news-decoration-one {

    width:
        180px;

    height:
        180px;

    right:
        -80px;

    top:
        30px;

    border:
        25px solid
        rgba(
            183,
            224,
            0,
            0.08
        );

    animation:
        newsFloat 7s ease-in-out infinite;
}


.news-decoration-two {

    width:
        120px;

    height:
        120px;

    left:
        -60px;

    bottom:
        20px;

    border:
        20px solid
        rgba(
            7,
            86,
            138,
            0.06
        );

    animation:
        newsFloat 8s ease-in-out infinite reverse;
}


@keyframes newsFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-18px);
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

    .news-section {

        padding:
            60px 5%;
    }


    .news-grid {

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


    .news-card:nth-child(3) {

        grid-column:
            1 / -1;

        max-width:
            500px;

        width:
            100%;

        margin:
            0 auto;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .news-section {

        min-height:
            auto;

        padding:
            55px 20px;
    }


    .news-heading {

        margin-bottom:
            25px;
    }


    .news-heading h2 {

        font-size:
            32px;
    }


    .news-heading p {

        font-size:
            11px;
    }


    .news-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .news-card:nth-child(3) {

        grid-column:
            auto;

        max-width:
            none;
    }


    .news-image {

        height:
            190px;
    }


    .news-content h3 {

        font-size:
            17px;
    }


    .news-content p {

        font-size:
            10px;
    }


    .news-decoration {

        display:
            none;
    }

}




/* =========================================================
   SECTION 9 — FAQ
========================================================= */

#faq-section-9.neat-faq {
    --faq-navy: #071b3a;
    --faq-navy-dark: #041126;
    --faq-lime: #b7e600;
    --faq-lime-dark: #91b800;
    --faq-gray: #687586;
    --faq-border: #e4e8ed;

    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 720px;

    background: #ffffff;

    overflow: hidden;

    font-family: "Inter", Arial, sans-serif;

    color: var(--faq-navy);

    isolation: isolate;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

#faq-section-9 .neat-faq-container {

    position: relative;

    z-index: 5;

    width: min(1240px, 92%);
    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    gap: 50px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

#faq-section-9 .neat-faq-intro {

    position: relative;

    z-index: 5;

    opacity: 1;

    transform: translate3d(0, 0, 0);

    will-change: transform, opacity;
}


/*
   Initial animation state is controlled ONLY
   by .faq9-entering
*/

#faq-section-9.faq9-entering .neat-faq-intro {

    animation:
        faq9IntroIn
        0.9s
        cubic-bezier(.22, 1, .36, 1)
        both;
}


@keyframes faq9IntroIn {

    from {

        opacity: 0;

        transform:
            translate3d(-80px, 0, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


/* =========================================================
   LABEL
========================================================= */

#faq-section-9 .neat-faq-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: var(--faq-navy);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


#faq-section-9 .neat-faq-label span {

    color: var(--faq-lime-dark);

}


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

#faq-section-9 .neat-faq-title {

    margin: 0;

    color: var(--faq-navy);

    font-size: clamp(44px, 4.5vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    font-weight: 800;
}


#faq-section-9 .neat-faq-title strong {

    display: block;

    color: var(--faq-lime-dark);

    font-weight: 800;
}


/* =========================================================
   LINE
========================================================= */

#faq-section-9 .neat-faq-line {

    width: 65px;

    height: 5px;

    margin: 22px 0 18px;

    background: var(--faq-lime);

    transform-origin: left center;

    transform: scaleX(1);
}


#faq-section-9.faq9-entering .neat-faq-line {

    animation:
        faq9LineIn
        0.7s
        ease
        .25s
        both;
}


@keyframes faq9LineIn {

    from {

        transform: scaleX(0);

    }

    to {

        transform: scaleX(1);

    }

}


/* =========================================================
   DESCRIPTION
========================================================= */

#faq-section-9 .neat-faq-description {

    max-width: 430px;

    margin: 0;

    color: var(--faq-gray);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   HELP CARD
========================================================= */

#faq-section-9 .neat-faq-help {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    width: 100%;

    max-width: 440px;

    margin-top: 28px;

    padding: 17px 20px;

    background: var(--faq-navy);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 15px 35px rgba(7, 27, 58, .12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


#faq-section-9 .neat-faq-help:hover {

    transform: translateY(-5px);

    box-shadow:
        0 22px 45px rgba(7, 27, 58, .20);
}


#faq-section-9 .neat-faq-help::after {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -95px;
    top: -80px;

    border: 1px solid rgba(183, 230, 0, .35);

    border-radius: 50%;
}


/* =========================================================
   QUESTION MARK
========================================================= */

#faq-section-9 .neat-faq-question-icon {

    position: relative;

    z-index: 2;

    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background: var(--faq-lime);

    color: var(--faq-navy);

    font-size: 25px;

    font-weight: 800;

    animation:
        faq9Float
        3.2s
        ease-in-out
        infinite;
}


@keyframes faq9Float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

}


/* =========================================================
   HELP TEXT
========================================================= */

#faq-section-9 .neat-faq-help-content {

    position: relative;

    z-index: 2;
}


#faq-section-9 .neat-faq-help-content > span {

    display: block;

    margin-bottom: 5px;

    color: var(--faq-lime);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


#faq-section-9 .neat-faq-help-content p {

    margin: 0 0 9px;

    color: rgba(255, 255, 255, .75);

    font-size: 10px;

    line-height: 1.5;
}


#faq-section-9 .neat-faq-help-content a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


#faq-section-9 .neat-faq-help-content a b {

    color: var(--faq-lime);

    font-size: 15px;

    transition:
        transform .3s ease;
}


#faq-section-9 .neat-faq-help-content a:hover {

    color: var(--faq-lime);
}


#faq-section-9 .neat-faq-help-content a:hover b {

    transform: translateX(5px);
}


/* =========================================================
   FAQ LIST
========================================================= */

#faq-section-9 .neat-faq-list {

    position: relative;

    z-index: 10;

    width: 100%;

    max-height: 560px;

    overflow-y: auto;

    padding-right: 7px;

    scrollbar-width: thin;

    scrollbar-color:
        var(--faq-lime)
        transparent;
}


#faq-section-9 .neat-faq-list::-webkit-scrollbar {

    width: 4px;
}


#faq-section-9 .neat-faq-list::-webkit-scrollbar-track {

    background: transparent;
}


#faq-section-9 .neat-faq-list::-webkit-scrollbar-thumb {

    background: var(--faq-lime);

    border-radius: 20px;
}


/* =========================================================
   FAQ ITEMS
========================================================= */

#faq-section-9 .neat-faq-item {

    position: relative;

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

    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition:
        border-color .3s ease,
        transform .3s ease;
}


#faq-section-9 .neat-faq-item:last-child {

    border-bottom: 1px solid var(--faq-border);
}


/* =========================================================
   FAQ ENTER ANIMATION
========================================================= */

#faq-section-9.faq9-entering .neat-faq-item {

    animation:
        faq9ItemIn
        .65s
        cubic-bezier(.22, 1, .36, 1)
        both;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(1) {
    animation-delay: .12s;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(2) {
    animation-delay: .20s;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(3) {
    animation-delay: .28s;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(4) {
    animation-delay: .36s;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(5) {
    animation-delay: .44s;
}


#faq-section-9.faq9-entering .neat-faq-item:nth-child(6) {
    animation-delay: .52s;
}


@keyframes faq9ItemIn {

    from {

        opacity: 0;

        transform:
            translate3d(70px, 0, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


/* =========================================================
   QUESTION BUTTON
========================================================= */

#faq-section-9 .neat-faq-question {

    position: relative;

    z-index: 20;

    width: 100%;

    min-height: 62px;

    display: grid;

    grid-template-columns: 35px minmax(0, 1fr) 32px;

    align-items: center;

    gap: 10px;

    padding: 17px 5px;

    margin: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--faq-navy);

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    -webkit-appearance: none;

    appearance: none;

    transition:
        padding .3s ease;
}


#faq-section-9 .neat-faq-question:hover {

    padding-left: 12px;
}


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

#faq-section-9 .neat-faq-number {

    color: #9da6b1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        color .3s ease;
}


/* =========================================================
   QUESTION TEXT
========================================================= */

#faq-section-9 .neat-faq-question-text {

    color: var(--faq-navy);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

    transition:
        color .3s ease;
}


#faq-section-9 .neat-faq-question:hover
.neat-faq-question-text {

    color: var(--faq-lime-dark);
}


/* =========================================================
   PLUS BUTTON
========================================================= */

#faq-section-9 .neat-faq-plus {

    width: 30px;
    height: 30px;

    display: flex;

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

    border: 1px solid #d8dee5;

    border-radius: 50%;

    color: var(--faq-navy);

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


#faq-section-9 .neat-faq-question:hover
.neat-faq-plus {

    background: var(--faq-lime);

    border-color: var(--faq-lime);
}


/* =========================================================
   ACTIVE QUESTION
========================================================= */

#faq-section-9 .neat-faq-item.active
.neat-faq-number {

    color: var(--faq-lime-dark);
}


#faq-section-9 .neat-faq-item.active
.neat-faq-question-text {

    color: var(--faq-navy);
}


#faq-section-9 .neat-faq-item.active
.neat-faq-plus {

    background: var(--faq-lime);

    border-color: var(--faq-lime);

    transform: rotate(45deg);
}


/* =========================================================
   ANSWER
========================================================= */

#faq-section-9 .neat-faq-answer {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .5s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
}


#faq-section-9 .neat-faq-answer p {

    margin: 0;

    padding:
        0
        45px
        0
        45px;

    color: var(--faq-gray);

    font-size: 11px;

    line-height: 1.8;

    transform: translateY(-5px);

    transition:
        transform .4s ease,
        padding .4s ease;
}


/* OPEN */

#faq-section-9 .neat-faq-item.active
.neat-faq-answer {

    max-height: 180px;

    opacity: 1;
}


#faq-section-9 .neat-faq-item.active
.neat-faq-answer p {

    padding-bottom: 20px;

    transform: translateY(0);
}


/* =========================================================
   DECORATIVE ORBITS
========================================================= */

#faq-section-9 .neat-faq-orbit {

    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    transition:
        transform 1.5s ease;
}


#faq-section-9 .neat-faq-orbit-1 {

    width: 400px;
    height: 400px;

    top: -250px;
    right: -260px;

    border: 1px solid rgba(183, 230, 0, .20);
}


#faq-section-9 .neat-faq-orbit-2 {

    width: 230px;
    height: 230px;

    left: -170px;
    bottom: -170px;

    background: rgba(183, 230, 0, .045);
}


#faq-section-9.faq9-staying
.neat-faq-orbit-1 {

    transform: scale(1.12) rotate(15deg);
}


#faq-section-9.faq9-staying
.neat-faq-orbit-2 {

    transform: scale(1.15);
}




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

@media (max-width: 768px) {

    #faq-section-9.neat-faq {

        height: auto;

        min-height: 0;

        padding:
            80px
            0
            70px;
    }


    #faq-section-9 .neat-faq-container {

        width: 90%;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 40px;
    }


    #faq-section-9 .neat-faq-title {

        font-size:
            clamp(42px, 12vw, 58px);

        letter-spacing: -2px;
    }


    #faq-section-9 .neat-faq-help {

        max-width: none;
    }


    #faq-section-9 .neat-faq-list {

        max-height: none;

        overflow: visible;

        padding-right: 0;
    }


    #faq-section-9 .neat-faq-question {

        grid-template-columns:
            28px
            minmax(0, 1fr)
            30px;

        min-height: 60px;

        padding: 16px 0;
    }


    #faq-section-9 .neat-faq-question-text {

        font-size: 12px;
    }


    #faq-section-9 .neat-faq-answer p {

        padding-left: 35px;

        padding-right: 20px;
    }


    #faq-section-9 .neat-faq-footer-mark {

        display: none;
    }

}


@media (max-width: 480px) {

    #faq-section-9.neat-faq {

        padding-top: 70px;
    }


    #faq-section-9 .neat-faq-help {

        padding: 15px;
    }


    #faq-section-9 .neat-faq-question {

        grid-template-columns:
            25px
            minmax(0, 1fr)
            28px;

        gap: 7px;
    }


    #faq-section-9 .neat-faq-question-text {

        font-size: 11px;
    }


    #faq-section-9 .neat-faq-plus {

        width: 27px;
        height: 27px;

        font-size: 16px;
    }


    #faq-section-9 .neat-faq-answer p {

        padding-left: 32px;

        font-size: 10px;
    }

}








/* =========================================================
   SECTION 10 — HOW TO REACH OUT
========================================================= */

#neat-section-10 {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px;

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

    padding: 70px 5%;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

#neat-section-10 .neat10-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

#neat-section-10 .neat10-header {
    text-align: center;

    max-width: 720px;

    margin: 0 auto 55px;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}


#neat-section-10 .neat10-eyebrow {
    margin-bottom: 12px;

    color: #91b800;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


#neat-section-10 .neat10-header h2 {
    margin: 0;

    color: #071b3a;

    font-size: clamp(32px, 4vw, 50px);

    line-height: 1.05;

    font-weight: 300;

    letter-spacing: -1.5px;
}


#neat-section-10 .neat10-header h2 span {
    font-weight: 800;
}


#neat-section-10 .neat10-header p {
    max-width: 650px;

    margin: 17px auto 0;

    color: #667384;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   JOURNEY
========================================================= */

#neat-section-10 .neat10-journey {
    position: relative;

    display: grid;

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

    gap: 30px;

    width: 100%;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

#neat-section-10 .neat10-connector {
    position: absolute;

    top: 34px;

    left: 12%;
    right: 12%;

    height: 2px;

    background: #dce2e8;

    z-index: 0;
}


#neat-section-10 .neat10-connector-fill {
    position: absolute;

    top: 0;
    left: 0;

    width: 0%;

    height: 100%;

    background: #b7e600;

    transition:
        width 1.2s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   STEP
========================================================= */

#neat-section-10 .neat10-step {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   ICON
========================================================= */

#neat-section-10 .neat10-icon {
    position: relative;

    width: 68px;
    height: 68px;

    display: flex;

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

    border: 2px solid #071b3a;

    border-radius: 50%;

    background: #ffffff;

    color: #071b3a;

    font-size: 20px;

    box-shadow:
        0 5px 18px rgba(7, 27, 58, 0.06);

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


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

#neat-section-10 .neat10-step-content {
    margin-top: 20px;
}


#neat-section-10 .neat10-step-content > span {
    display: block;

    margin-bottom: 7px;

    color: #91b800;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


#neat-section-10 .neat10-step-content h3 {
    margin: 0 0 9px;

    color: #071b3a;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 800;
}


#neat-section-10 .neat10-step-content p {
    max-width: 245px;

    margin: 0 auto;

    color: #667384;

    font-size: 11.5px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

#neat-section-10 .neat10-cta {
    display: flex;

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

    gap: 20px;

    margin-top: 43px;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


#neat-section-10 .neat10-cta-text {
    color: #071b3a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


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

#neat-section-10
.neat10-cta button {
    display: inline-flex;

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

    gap: 10px;

    padding: 13px 22px;

    border: none;

    border-radius: 3px;

    background: #071b3a;

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


#neat-section-10
.neat10-cta button i {
    transition:
        transform 0.3s ease;
}


#neat-section-10
.neat10-cta button:hover {
    background: #b7e600;

    color: #071b3a;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(7, 27, 58, 0.15);
}


#neat-section-10
.neat10-cta button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SCROLL DOWN ANIMATION
========================================================= */

#neat-section-10.neat10-animate-down
.neat10-header {
    opacity: 0;

    transform: translateY(45px);
}


#neat-section-10.neat10-animate-down
.neat10-step {
    opacity: 0;

    transform:
        translateY(60px)
        scale(0.95);
}


#neat-section-10.neat10-animate-down
.neat10-cta {
    opacity: 0;

    transform: translateY(35px);
}


/* =========================================================
   SCROLL UP ANIMATION
========================================================= */

#neat-section-10.neat10-animate-up
.neat10-header {
    opacity: 0;

    transform: translateY(-45px);
}


#neat-section-10.neat10-animate-up
.neat10-step {
    opacity: 0;

    transform:
        translateY(-60px)
        scale(0.95);
}


#neat-section-10.neat10-animate-up
.neat10-cta {
    opacity: 0;

    transform: translateY(-35px);
}


/* =========================================================
   ANIMATION ACTIVE
========================================================= */

#neat-section-10.neat10-animation-active
.neat10-header {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.05s;
}


#neat-section-10.neat10-animation-active
.neat10-step {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


#neat-section-10.neat10-animation-active
.neat10-step:nth-child(2) {
    transition-delay: 0.15s;
}


#neat-section-10.neat10-animation-active
.neat10-step:nth-child(3) {
    transition-delay: 0.30s;
}


#neat-section-10.neat10-animation-active
.neat10-step:nth-child(4) {
    transition-delay: 0.45s;
}


#neat-section-10.neat10-animation-active
.neat10-step:nth-child(5) {
    transition-delay: 0.60s;
}


#neat-section-10.neat10-animation-active
.neat10-cta {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.75s;
}


/* =========================================================
   ACTIVE STEP
========================================================= */

#neat-section-10
.neat10-step.active
.neat10-icon {
    background: #b7e600;

    border-color: #b7e600;

    color: #071b3a;

    transform: scale(1.1);

    box-shadow:
        0 0 0 8px rgba(183, 230, 0, 0.10);
}


/* =========================================================
   HOVER
========================================================= */

#neat-section-10
.neat10-step:hover {
    transform: translateY(-7px);
}


#neat-section-10
.neat10-step:hover
.neat10-icon {
    border-color: #b7e600;

    box-shadow:
        0 12px 30px
        rgba(7, 27, 58, 0.12);

    transform: scale(1.08);
}


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

@media (max-width: 900px) {

    #neat-section-10 {
        height: auto;

        min-height: 100vh;

        padding:
            100px 7%
            90px;
    }


    #neat-section-10 .neat10-journey {
        display: flex;

        flex-direction: column;

        gap: 40px;
    }


    #neat-section-10 .neat10-connector {
        top: 34px;
        bottom: 34px;

        left: 34px;
        right: auto;

        width: 2px;

        height: auto;
    }


    #neat-section-10 .neat10-connector-fill {
        width: 100%;

        height: 0%;
    }


    #neat-section-10 .neat10-step {
        display: grid;

        grid-template-columns:
            68px 1fr;

        column-gap: 24px;

        align-items: center;

        text-align: left;
    }


    #neat-section-10 .neat10-step-content {
        margin-top: 0;
    }


    #neat-section-10 .neat10-step-content p {
        max-width: 500px;

        margin: 0;
    }


    #neat-section-10 .neat10-cta {
        flex-direction: column;

        margin-top: 55px;
    }
}


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

@media (max-width: 600px) {

    #neat-section-10 {
        padding:
            90px 6%
            75px;
    }


    #neat-section-10 .neat10-header h2 {
        font-size: 32px;
    }


    #neat-section-10 .neat10-step {
        grid-template-columns:
            58px 1fr;

        column-gap: 18px;
    }


    #neat-section-10 .neat10-icon {
        width: 58px;
        height: 58px;

        font-size: 17px;
    }


    #neat-section-10 .neat10-connector {
        left: 29px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #neat-section-10 *,
    #neat-section-10 *::before,
    #neat-section-10 *::after {

        animation: none !important;

        transition: none !important;
    }
}











/* =========================================================
   SECTION 11 — SCROLLING IMAGE
========================================================= */

#neat-section-11 {

    position: relative;

    width: 100%;
    height: 40vh;

    min-height: 400px;

    overflow: hidden;

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

    background: #071b3a;
}


/* =========================================================
   PHOTO
========================================================= */

#neat-section-11 .neat11-photo {

    position: absolute;

    left: 0;

    /*
       Extra height gives the image room to move.
    */

    top: -35%;

    width: 100%;

    height: 170%;

    background-image:
        url("../images/services/bg 12.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    /*
       THIS is controlled by JavaScript.
    */

    transform:
        translate3d(
            0,
            var(--neat11-move, 0px),
            0
        );

    will-change: transform;

    z-index: 1;
}


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

#neat-section-11 .neat11-dark {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(4,17,38,.82),
            rgba(7,27,58,.52)
        );

    z-index: 2;

    pointer-events: none;
}


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

#neat-section-11 .neat11-content {

    position: relative;

    z-index: 3;

    width: 90%;

    max-width: 900px;

    text-align: center;

    color: #ffffff;
}


/* =========================================================
   LABEL
========================================================= */

#neat-section-11 .neat11-label {

    margin-bottom: 14px;

    color: #b7e600;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;
}


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

#neat-section-11 h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: clamp(32px, 4vw, 58px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#neat-section-11 p {

    max-width: 650px;

    margin: 20px auto 28px;

    color: rgba(255,255,255,.9);

    font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


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

#neat-section-11 .neat11-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 15px 25px;

    min-width: 210px;

    background: #b7e600;

    color: #071b3a;

    border: 2px solid #b7e600;

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


#neat-section-11 .neat11-button:hover {

    background: #ffffff;

    border-color: #ffffff;

    color: #071b3a;

    transform: translateY(-4px);
}


#neat-section-11 .neat11-button i {

    transition:
        transform .3s ease;
}


#neat-section-11 .neat11-button:hover i {

    transform: translateX(6px);
}


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

@media (max-width: 768px) {

    #neat-section-11 {

        height: 50vh;

        min-height: 430px;
    }


    #neat-section-11 .neat11-photo {

        top: -35%;

        height: 170%;
    }


    #neat-section-11 .neat11-content {

        width: 88%;
    }


    #neat-section-11 h2 {

        font-size: 32px;
    }


    #neat-section-11 p {

        font-size: 13px;
    }
}






/* =========================================================
   SECTION 12 — FREE SERVICE CATALOG
========================================================= */

#neat-section-12 {

    --neat12-lime: #b7e600;
    --neat12-lime-dark: #91b800;
    --neat12-navy: #071b3a;
    --neat12-navy-dark: #041126;
    --neat12-text: #17233a;
    --neat12-muted: #687386;

    position: relative;

    width: 100%;
    min-height: 150vh;
    height: 150vh;

    background: #ffffff;

    overflow: hidden;

    display: flex;
    align-items: center;

    font-family: "Inter", Arial, sans-serif;

    isolation: isolate;
}


/* =========================================================
   CONTAINER
========================================================= */

#neat-section-12 .neat12-container {

    width: min(1200px, 90%);

    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 90px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   LEFT SIDE
========================================================= */

#neat-section-12 .neat12-left {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    opacity: 0;

    transform:
        translateX(-70px)
        scale(.96);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.16, 1, .3, 1);
}


/* Active state */

#neat-section-12.neat12-visible .neat12-left {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

#neat-section-12 .neat12-image-wrap {

    position: relative;

    width: min(470px, 100%);

    aspect-ratio: 4 / 3;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   IMAGE GLOW
========================================================= */

#neat-section-12 .neat12-image-glow {

    position: absolute;

    width: 75%;
    height: 75%;

    background:
        radial-gradient(
            circle,
            rgba(183, 230, 0, .24),
            transparent 70%
        );

    filter: blur(35px);

    z-index: -1;

    transform:
        translate(
            -10px,
            20px
        );
}


/* =========================================================
   CATALOG CARD
========================================================= */

#neat-section-12 .neat12-catalog-card {

    position: relative;

    width: 82%;

    height: 140%;

    background: #ffffff;

    padding: 12px;

    border-radius: 4px;

    box-shadow:
        0 30px 70px rgba(7, 27, 58, .16),
        0 8px 25px rgba(7, 27, 58, .08);

    transform:
        rotate(-2deg)
        translateY(20px);

    opacity: 0;

    transition:
        opacity 1s ease .15s,
        transform 1.2s cubic-bezier(.16, 1, .3, 1);
}


#neat-section-12.neat12-visible
.neat12-catalog-card {

    opacity: 1;

    transform:
        rotate(-2deg)
        translateY(0);
}


/* =========================================================
   CATALOG IMAGE
========================================================= */

#neat-section-12 .neat12-catalog-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 2px;

    transition:
        transform 1.2s cubic-bezier(.16, 1, .3, 1);
}


/* Subtle movement */

#neat-section-12.neat12-scroll-down
.neat12-catalog-image {

    transform:
        scale(1.035)
        translateY(-5px);
}


#neat-section-12.neat12-scroll-up
.neat12-catalog-image {

    transform:
        scale(1.02)
        translateY(5px);
}


/* =========================================================
   FLOATING LABEL
========================================================= */

#neat-section-12 .neat12-floating-label {

    position: absolute;

    left: 0;
    bottom: 8%;

    padding: 12px 18px;

    background: var(--neat12-navy);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    display: flex;

    align-items: center;

    gap: 9px;

    box-shadow:
        0 12px 30px rgba(7, 27, 58, .18);

    opacity: 0;

    transform:
        translateX(-25px);

    transition:
        opacity .8s ease .4s,
        transform .8s ease .4s;
}


#neat-section-12.neat12-visible
.neat12-floating-label {

    opacity: 1;

    transform:
        translateX(0);
}


/* Label dot */

#neat-section-12 .neat12-label-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--neat12-lime);

    box-shadow:
        0 0 0 4px rgba(183, 230, 0, .12);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

#neat-section-12 .neat12-right {

    display: flex;

    align-items: center;

    height: 100%;

    opacity: 0;

    transform:
        translateX(70px);

    transition:
        opacity .9s ease .1s,
        transform 1s cubic-bezier(.16, 1, .3, 1);
}


#neat-section-12.neat12-visible .neat12-right {

    opacity: 1;

    transform:
        translateX(0);
}


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

#neat-section-12 .neat12-content {

    width: 100%;

    max-width: 520px;
}


/* =========================================================
   EYEBROW
========================================================= */

#neat-section-12 .neat12-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    color: var(--neat12-navy);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


#neat-section-12 .neat12-eyebrow::before {

    content: "";

    display: block;

    width: 35px;
    height: 3px;

    background:
        var(--neat12-lime);
}


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

#neat-section-12 .neat12-title {

    margin: 0;

    color: var(--neat12-navy);

    font-size: clamp(
        36px,
        4vw,
        58px
    );

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 800;
}


#neat-section-12 .neat12-title span {

    color: var(--neat12-lime-dark);

    position: relative;
}


/* Lime underline */

#neat-section-12 .neat12-title span::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -5px;

    height: 4px;

    background:
        var(--neat12-lime);

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .8s ease .8s;
}


#neat-section-12.neat12-visible
.neat12-title span::after {

    transform:
        scaleX(1);
}


/* =========================================================
   DESCRIPTION
========================================================= */

#neat-section-12 .neat12-description {

    margin: 22px 0 28px;

    max-width: 500px;

    color: var(--neat12-muted);

    font-size: 14px;

    line-height: 1.75;
}


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

#neat-section-12 .neat12-form {

    width: 100%;
}


/* =========================================================
   FORM ROW
========================================================= */

#neat-section-12 .neat12-form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 24px;
}


/* =========================================================
   FIELD
========================================================= */

#neat-section-12 .neat12-field {

    position: relative;

    margin-bottom: 20px;
}


#neat-section-12 .neat12-field label {

    display: block;

    margin-bottom: 7px;

    color: var(--neat12-navy);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


#neat-section-12 .neat12-field input {

    width: 100%;

    height: 40px;

    padding: 0 0 8px;

    border: none;

    border-radius: 0;

    outline: none;

    background: transparent;

    color: var(--neat12-navy);

    font-family: inherit;

    font-size: 14px;

    border-bottom:
        1px solid #d7dce3;

    transition:
        border-color .3s ease;
}


#neat-section-12 .neat12-field input::placeholder {

    color: #a2a9b4;

    font-size: 13px;
}


#neat-section-12 .neat12-field input:focus {

    border-bottom-color:
        var(--neat12-lime-dark);
}


/* =========================================================
   EMAIL
========================================================= */

#neat-section-12 .neat12-email-field {

    margin-bottom: 18px;
}


/* =========================================================
   RECAPTCHA NOTICE
========================================================= */

#neat-section-12 .neat12-recaptcha {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin:
        3px 0 20px;

    max-width: 500px;
}


#neat-section-12 .neat12-recaptcha-icon {

    flex-shrink: 0;

    width: 25px;
    height: 17px;

    border-radius: 4px;

    background:
        #f1f4f7;

    color:
        #607080;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;
}


#neat-section-12 .neat12-recaptcha p {

    margin: 0;

    color: #8a929d;

    font-size: 10px;

    line-height: 1.55;
}


#neat-section-12 .neat12-recaptcha a {

    color: #687584;

    text-decoration:
        underline;

    text-underline-offset: 2px;
}


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

#neat-section-12 .neat12-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-width: 225px;

    height: 52px;

    padding: 0 10px 0 10px;

    border: none;

    border-radius: 0;

    background:
        var(--neat12-navy);

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


#neat-section-12 .neat12-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--neat12-lime);

    transform:
        translateX(-101%);

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);

    z-index: 0;
}


#neat-section-12 .neat12-button:hover::before {

    transform:
        translateX(0);
}


#neat-section-12 .neat12-button:hover {

    color:
        var(--neat12-navy);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(7, 27, 58, .16);
}


#neat-section-12 .neat12-button-text,
#neat-section-12 .neat12-button-icon {

    position: relative;

    z-index: 2;
}


#neat-section-12 .neat12-button-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--neat12-lime);

    color:
        var(--neat12-navy);

    transition:
        transform .3s ease,
        background .3s ease;
}


#neat-section-12 .neat12-button:hover
.neat12-button-icon {

    transform:
        translateX(4px);

    background:
        var(--neat12-navy);

    color:
        var(--neat12-lime);
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

#neat-section-12 .neat12-success {

    display: none;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 13px 16px;

    background:
        #f5f9e7;

    border-left:
        4px solid var(--neat12-lime-dark);

    color:
        var(--neat12-navy);
}


#neat-section-12 .neat12-success.show {

    display: flex;

    animation:
        neat12SuccessIn .5s ease both;
}


#neat-section-12 .neat12-success-icon {

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--neat12-lime);

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--neat12-navy);

    font-size: 12px;
}


#neat-section-12 .neat12-success strong {

    display: block;

    font-size: 12px;
}


#neat-section-12 .neat12-success p {

    margin: 2px 0 0;

    color:
        var(--neat12-muted);

    font-size: 11px;
}


/* =========================================================
   VALIDATION
========================================================= */

#neat-section-12 .neat12-field.error input {

    border-bottom-color:
        #d64242;
}


#neat-section-12 .neat12-field.valid input {

    border-bottom-color:
        var(--neat12-lime-dark);
}


/* =========================================================
   SCROLL DOWN EFFECT
========================================================= */

#neat-section-12.neat12-scroll-down
.neat12-left {

    transform:
        translateY(-5px);
}


#neat-section-12.neat12-scroll-down
.neat12-right {

    transform:
        translateY(-3px);
}


/* =========================================================
   SCROLL UP EFFECT
========================================================= */

#neat-section-12.neat12-scroll-up
.neat12-left {

    transform:
        translateY(5px);
}


#neat-section-12.neat12-scroll-up
.neat12-right {

    transform:
        translateY(3px);
}


/* =========================================================
   KEYFRAME
========================================================= */

@keyframes neat12SuccessIn {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 1000px) {

    #neat-section-12 {

        height: auto;

        min-height: 100vh;

        padding:
            80px 0;
    }


    #neat-section-12 .neat12-container {

        grid-template-columns:
            1fr;

        gap: 55px;

        width: min(720px, 88%);
    }


    #neat-section-12 .neat12-left {

        height: auto;
    }


    #neat-section-12 .neat12-image-wrap {

        width:
            min(480px, 100%);

        aspect-ratio:
            4 / 3;
    }


    #neat-section-12 .neat12-right {

        height: auto;

        justify-content: center;
    }


    #neat-section-12 .neat12-content {

        max-width:
            600px;
    }

}


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

@media (max-width: 600px) {

    #neat-section-12 {

        min-height: auto;

        padding:
            65px 0 70px;
    }


    #neat-section-12 .neat12-container {

        width: 88%;

        gap: 40px;
    }


    #neat-section-12 .neat12-image-wrap {

        width: 100%;

        aspect-ratio:
            4 / 3;
    }


    #neat-section-12 .neat12-catalog-card {

        width: 86%;

        height: 88%;
    }


    #neat-section-12 .neat12-floating-label {

        left: 0;

        bottom: 4%;

        padding:
            10px 13px;

        font-size:
            8px;

        letter-spacing:
            1.5px;
    }


    #neat-section-12 .neat12-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;
    }


    #neat-section-12 .neat12-title {

        font-size:
            clamp(35px, 11vw, 48px);

        letter-spacing:
            -1.8px;
    }


    #neat-section-12 .neat12-description {

        margin:
            18px 0 25px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    #neat-section-12 .neat12-form-row {

        grid-template-columns:
            1fr;

        gap: 0;
    }


    #neat-section-12 .neat12-field {

        margin-bottom:
            18px;
    }


    #neat-section-12 .neat12-button {

        width: 100%;

        min-width: 0;
    }

}







/* =========================================================
   NEAT ENGAGEMENTS
   PREMIUM CORPORATE FOOTER
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.site-footer {

    --footer-bg: #041126e8;
    --footer-bg-soft: #071b3a;
    --footer-blue: #0d467f;
    --footer-lime: #b7e600;
    --footer-white: #ffffff;
    --footer-muted: rgba(255, 255, 255, .62);
    --footer-soft: rgba(255, 255, 255, .42);
    --footer-border: rgba(255, 255, 255, .09);

    position: relative;

    width: 100%;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(13, 70, 127, .20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--footer-bg) 0%,
            var(--footer-bg-soft) 100%
        );

    color: var(--footer-white);

    overflow: hidden;
}


/* =========================================================
   TOP LIME ACCENT
========================================================= */

.footer-accent {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--footer-lime);

    z-index: 10;
}


/* =========================================================
   MAIN FOOTER CONTAINER
========================================================= */

.footer-container {

    position: relative;

    z-index: 2;

    width: min(1300px, 90%);

    margin: 0 auto;

    padding: 50px 0 40px;

    display: grid;

    grid-template-columns:
        1.45fr
        .85fr
        1fr
        1.35fr;

    gap: 60px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

    max-width: 360px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-brand-link {

    display: inline-flex;

    align-items: center;

    text-decoration: none;
}


.footer-logo {

    display: block;

    width: 165px;
    height: auto;

    margin-bottom: 18px;

    transition:
        transform .4s ease,
        opacity .4s ease;
}


.footer-brand-link:hover .footer-logo {

    transform: translateY(-3px);

    opacity: .9;
}


/* =========================================================
   BRAND KICKER
========================================================= */

.footer-kicker {

    display: block;

    margin-bottom: 18px;

    color: var(--footer-lime);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.6;
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.footer-description {

    max-width: 330px;

    margin: 0;

    color: var(--white);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.85;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.footer-social {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;
}


.footer-social-link {

    width: 36px;
    height: 36px;

    display: inline-flex;

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

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

    border-radius: 50%;

    color: var(--white);

    font-size: 13px;

    text-decoration: none;

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


.footer-social-link:hover {

    background: var(--footer-lime);

    border-color: var(--footer-lime);

    color: var(--footer-bg);

    transform: translateY(-4px);
}


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

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-column h3 {

    margin: 0;

    color: var(--footer-white);

    font-size: 20px;

    font-weight: 900;

    letter-spacing: 2px;

    line-height: 1.4;
}


/* =========================================================
   HEADING LINE
========================================================= */

.footer-heading-line {

    width: 30px;
    height: 2px;

    margin-top: 11px;
    margin-bottom: 23px;

    background: var(--footer-lime);
}


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

.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.footer-links a {

    position: relative;

    display: inline-block;

    color: var(--white);

    font-size: 15px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}


.footer-links a::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background: var(--footer-lime);

    transition: width .3s ease;
}


.footer-links a:hover {

    color: var(--footer-lime);

    transform: translateX(4px);
}


.footer-links a:hover::before {

    width: 100%;
}


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

.footer-contact {

    max-width: 330px;
}


.footer-contact-item {

    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}


.footer-contact-icon {

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    display: flex;

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

    border:
        1px solid
        rgba(183, 230, 0, .20);

    border-radius: 50%;

    color: var(--footer-lime);

    font-size: 15px;

    transition:
        background .3s ease,
        transform .3s ease;
}


.footer-contact-item:hover .footer-contact-icon {

    background: rgba(183, 230, 0, .10);

    transform: translateY(-2px);
}


.footer-contact-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-contact-label {

    margin-bottom: 4px;

    color: rgb(255, 255, 255);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.footer-contact-content p {

    margin: 0;

    color: var(--white);

    font-size: 12px;

    line-height: 1.65;
}


.footer-contact-content a {

    max-width: 100%;

    color: var(--white);

    font-size: 12px;

    line-height: 1.6;

    text-decoration: none;

    word-break: break-word;

    transition: color .3s ease;
}


.footer-contact-content a:hover {

    color: var(--footer-lime);
}




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

.footer-bottom {

    position: relative;

    z-index: 5;

    width: 100%;

    border-top:
        1px solid
        var(--footer-border);
}


.footer-bottom-inner {

    width: min(1300px, 90%);

    min-height: 62px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-copyright {

    color: rgba(255, 255, 255, .40);

    font-size: 12px;

    letter-spacing: .3px;
}


.footer-legal {

    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-legal a {

    color: rgba(255, 255, 255, .45);

    font-size: 12px;

    text-decoration: none;

    transition: color .3s ease;
}


.footer-legal a:hover {

    color: var(--footer-lime);
}


.footer-legal span {

    color: rgba(255, 255, 255, .20);

    font-size: 10px;
}


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

@media (max-width: 1050px) {

    .footer-container {

        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap: 50px;

        padding-top: 65px;
    }


    .footer-brand {

        grid-column: span 3;

        max-width: 600px;
    }


    .footer-description {

        max-width: 500px;
    }


    .footer-cta {

        padding: 28px 30px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 800px) {

    .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap: 45px 35px;
    }


    .footer-brand {

        grid-column: span 2;
    }


    .footer-contact {

        max-width: 100%;
    }


    .footer-cta {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .footer-cta-button {

        min-width: 190px;
    }


    .footer-wordmark {

        font-size: 17vw;
    }

}


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

@media (max-width: 600px) {

    .site-footer {

        text-align: left;
    }


    .footer-container {

        width: 88%;

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 55px 0 45px;
    }


    .footer-brand {

        grid-column: span 1;

        max-width: 100%;
    }


    .footer-logo {

        width: 145px;

        margin-bottom: 16px;
    }


    .footer-kicker {

        max-width: 300px;

        font-size: 8px;

        letter-spacing: 1.5px;
    }


    .footer-description {

        max-width: 100%;

        font-size: 12px;

        line-height: 1.8;
    }


    .footer-social {

        margin-top: 22px;
    }


    .footer-column {

        width: 100%;
    }


    .footer-column h3 {

        font-size: 12px;
    }


    .footer-heading-line {

        margin-bottom: 19px;
    }


    .footer-links {

        gap: 10px;
    }


    .footer-links a {

        font-size: 11px;
    }


    .footer-contact-item {

        margin-bottom: 16px;
    }


    .footer-contact-content p,
    .footer-contact-content a {

        font-size: 11px;
    }


    .footer-cta-wrapper {

        width: 88%;

        padding-bottom: 35px;
    }


    .footer-cta {

        min-height: auto;

        padding: 27px 23px;

        gap: 23px;
    }


    .footer-cta h2 {

        font-size: 24px;

        line-height: 1.12;
    }


    .footer-cta p {

        font-size: 11px;
    }


    .footer-cta-button {

        width: 100%;

        min-width: 0;

        min-height: 48px;
    }


    .footer-wordmark {

        bottom: 35px;

        font-size: 19vw;

        transform:
            translateX(-50%)
            translateY(10px);
    }


    .footer-bottom-inner {

        width: 88%;

        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 10px;
    }


    .footer-copyright {

        font-size: 8px;

        line-height: 1.6;
    }


    .footer-legal {

        gap: 9px;
    }


    .footer-legal a {

        font-size: 8px;
    }


    .footer-legal span {

        font-size: 8px;
    }

}


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

@media (max-width: 380px) {

    .footer-container {

        width: 90%;

        gap: 35px;
    }


    .footer-logo {

        width: 135px;
    }


    .footer-cta-wrapper {

        width: 90%;
    }


    .footer-cta {

        padding: 24px 19px;
    }


    .footer-cta h2 {

        font-size: 21px;
    }


    .footer-cta-button {

        font-size: 9px;
    }


    .footer-bottom-inner {

        width: 90%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-logo,
    .footer-social-link,
    .footer-links a,
    .footer-contact-icon,
    .footer-cta-button,
    .footer-cta-button i {

        transition: none;
    }

}



/* =========================================================
   GLOBAL SCROLL TRANSITIONS
   NEAT ENGAGEMENTS
========================================================= */

/*
   These transitions animate the CONTENT inside sections,
   rather than moving the entire section itself.

   This keeps:
   - continuous sliders working
   - 320vh sections stable
   - 200vh Core Values section stable
   - mobile layouts stable
*/

/* =========================================================
   BASE REVEAL
========================================================= */

.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 55px, 0);
    transition:
        opacity 0.85s cubic-bezier(.22, 1, .36, 1),
        transform 0.95s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}


/* =========================================================
   DOWNWARD SCROLL
========================================================= */

.scroll-reveal.scroll-from-down {
    transform: translate3d(0, 55px, 0);
}


/* =========================================================
   UPWARD SCROLL
========================================================= */

.scroll-reveal.scroll-from-up {
    transform: translate3d(0, -55px, 0);
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.scroll-reveal.scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   HORIZONTAL REVEALS
========================================================= */

.scroll-reveal.scroll-from-left {
    transform: translate3d(-65px, 0, 0);
}

.scroll-reveal.scroll-from-right {
    transform: translate3d(65px, 0, 0);
}

.scroll-reveal.scroll-from-left.scroll-visible,
.scroll-reveal.scroll-from-right.scroll-visible {
    transform: translate3d(0, 0, 0);
}


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

.hero-scroll-content {
    opacity: 0;
    transform: translate3d(-45px, 0, 0);
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.hero-scroll-content.hero-scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   SECTION 2 — ABOUT
========================================================= */

.about-preview-container {
    opacity: 0;
    transform: translate3d(0, 55px, 0);
    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.about-preview.scroll-visible .about-preview-container {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   SECTION 3 — SERVICES
========================================================= */

/*
   IMPORTANT:
   The .services-track itself is NOT animated by the
   scroll-reveal system.

   Only the heading and button reveal.
*/

.services-preview-heading {
    opacity: 0;
    transform: translate3d(0, -35px, 0);
    transition:
        opacity 0.8s cubic-bezier(.22, 1, .36, 1),
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}

.services-preview-button {
    opacity: 0;
    transform: translate3d(-50%, 35px, 0);
    transition:
        opacity 0.8s ease .18s,
        transform 0.85s cubic-bezier(.22, 1, .36, 1) .18s,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.services-preview.scroll-visible .services-preview-heading {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.services-preview.scroll-visible .services-preview-button {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}


/* =========================================================
   SECTION 4 — MISSION & VISION
========================================================= */

.mission-vision-text {
    opacity: 0;
    transform: translate3d(0, 55px, 0);
    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.mission-vision.scroll-visible .mission-vision-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}



/* =========================================================
   SECTION 7 — CLIENTS
========================================================= */

/*
   Again, the continuous logo track is NOT touched.
*/

.clients-heading {
    opacity: 0;
    transform: translate3d(-45px, 0, 0);
    transition:
        opacity 0.85s cubic-bezier(.22, 1, .36, 1),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.clients-slider {
    opacity: 0;
    transform: translate3d(55px, 0, 0);
    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1) .12s,
        transform 0.95s cubic-bezier(.22, 1, .36, 1) .12s;
}

.clients-section.scroll-visible .clients-heading,
.clients-section.scroll-visible .clients-slider {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   SECTION 8 — NEWS
========================================================= */

/*
   Existing news animation remains active.
   These rules provide a subtle exit state.
*/

.news-section.news-scroll-exit-up .news-container {
    transform: translate3d(0, -30px, 0);
    opacity: .72;
    transition:
        opacity .45s ease,
        transform .55s ease;
}

.news-section.news-scroll-exit-down .news-container {
    transform: translate3d(0, 30px, 0);
    opacity: .72;
    transition:
        opacity .45s ease,
        transform .55s ease;
}





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

.site-footer .footer-container,
.site-footer .footer-bottom-inner {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.site-footer.footer-visible .footer-container,
.site-footer.footer-visible .footer-bottom-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.site-footer .footer-bottom-inner {
    transition-delay: .12s;
}


/* =========================================================
   SECTION EXIT STATES
========================================================= */

.scroll-section-exit-up {
    opacity: .92;
}

.scroll-section-exit-down {
    opacity: .92;
}


/* =========================================================
   STAGGER EFFECT
========================================================= */

.about-preview.scroll-visible .about-preview-label {
    animation: scrollFadeUp .7s ease both;
}

.about-preview.scroll-visible h2 {
    animation: scrollFadeUp .7s ease .08s both;
}

.about-preview.scroll-visible .about-preview-line {
    animation: scrollFadeUp .7s ease .16s both;
}

.about-preview.scroll-visible p:nth-of-type(1) {
    animation: scrollFadeUp .7s ease .24s both;
}

.about-preview.scroll-visible p:nth-of-type(2) {
    animation: scrollFadeUp .7s ease .32s both;
}

.about-preview.scroll-visible .about-preview-button {
    animation: scrollFadeUp .7s ease .40s both;
}

@keyframes scrollFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .hero-scroll-content,
    .about-preview-container,
    .services-preview-heading,
    .services-preview-button,
    .mission-vision-text,
    .why-title,
    .why-item,
    .clients-heading,
    .clients-slider,
    .site-footer .footer-container,
    .site-footer .footer-bottom-inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .news-section.news-scroll-exit-up .news-container,
    .news-section.news-scroll-exit-down .news-container {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* =========================================================
   HERO — REDUCED MOTION OVERRIDE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-slide-current,
    .hero-background.slide-active .hero-slide-current,
    .hero-background.slide-active .hero-slide-next {
        animation: none !important;
    }

    .hero-slide-current {
        transform: translate3d(0, 0, 0) scale(1.02);
    }

    .hero-slide-next {
        transform: translate3d(-100%, 0, 0) scale(1.02);
    }

}







/* =========================================================
   PRIVACY POLICY MODAL
========================================================= */

.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 30px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* =========================================================
   ACTIVE STATE
========================================================= */

.privacy-modal.active {
    visibility: visible;
    opacity: 1;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.privacy-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(2, 23, 47, 0.82);

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

    cursor: pointer;
}


/* =========================================================
   MODAL CONTAINER
========================================================= */

.privacy-modal-content {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);
    max-height: 88vh;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    transform: translateY(30px) scale(0.97);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.privacy-modal.active .privacy-modal-content {
    transform: translateY(0) scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.privacy-modal-close {
    position: absolute;

    top: 20px;
    right: 22px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #071b3a;
    color: #ffffff;

    font-size: 28px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

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

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


.privacy-modal-close:hover {
    background: #b7e600;
    color: #071b3a;

    transform: rotate(90deg);
}


/* =========================================================
   MODAL HEADER
========================================================= */

.privacy-modal-header {
    padding: 45px 55px 30px;

    background:
        linear-gradient(
            135deg,
            #071b3a,
            #02172f
        );

    color: #ffffff;
}


.privacy-modal-label {
    display: block;

    margin-bottom: 10px;

    color: #b7e600;

    font-family: "Inter", sans-serif;

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

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


.privacy-modal-header h2 {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;

    letter-spacing: -1px;
}


.privacy-modal-header p {
    margin: 8px 0 0;

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

    font-size: 14px;
}


/* =========================================================
   MODAL BODY
========================================================= */

.privacy-modal-body {
    max-height: 58vh;

    overflow-y: auto;

    padding: 35px 55px 45px;

    color: #333333;

    font-family: "Inter", sans-serif;

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


/* CUSTOM SCROLLBAR */

.privacy-modal-body::-webkit-scrollbar {
    width: 7px;
}

.privacy-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.privacy-modal-body::-webkit-scrollbar-thumb {
    background: #b7e600;
    border-radius: 10px;
}


/* =========================================================
   BODY TEXT
========================================================= */

.privacy-modal-body p {
    margin: 0 0 22px;
}


.privacy-modal-body h3 {
    margin: 30px 0 10px;

    color: #071b3a;

    font-size: 17px;
    font-weight: 800;
}


.privacy-modal-body strong {
    color: #b7e600;
}


/* =========================================================
   CONTACT BOX
========================================================= */

.privacy-contact-box {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 30px;
    padding: 22px 25px;

    border-left: 4px solid #b7e600;

    background: #071b3a;

    border-radius: 0 10px 10px 0;

    color: #444444;

    font-size: 13px;
}


.privacy-contact-box strong {
    margin-bottom: 4px;

    font-size: 15px;
}


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

.privacy-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 18px 30px;

    border-top: 1px solid #eeeeee;

    background: #ffffff;
}


.privacy-modal-footer button {
    border: none;

    padding: 11px 25px;

    border-radius: 30px;

    background: #b7e600;
    color: #071b3a;

    font-family: "Inter", sans-serif;

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

    letter-spacing: 0.5px;

    cursor: pointer;

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


.privacy-modal-footer button:hover {
    background: #96c703;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .privacy-modal {
        padding: 15px;
    }


    .privacy-modal-content {
        width: 100%;
        max-height: 94vh;

        border-radius: 14px;
    }


    .privacy-modal-header {
        padding: 35px 25px 25px;
    }


    .privacy-modal-header h2 {
        font-size: 28px;
    }


    .privacy-modal-body {
        max-height: 65vh;

        padding: 25px 25px 35px;

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


    .privacy-modal-close {
        top: 15px;
        right: 15px;

        width: 38px;
        height: 38px;

        font-size: 24px;
    }


    .privacy-modal-footer {
        padding: 15px 20px;
    }

}




/* =========================================================
   TERMS & CONDITIONS MODAL
========================================================= */

.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;

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

    padding: 30px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* =========================================================
   ACTIVE STATE
========================================================= */

.terms-modal.active {
    visibility: visible;
    opacity: 1;
}


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

.terms-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(2, 23, 47, 0.82);

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

    cursor: pointer;
}


/* =========================================================
   MODAL
========================================================= */

.terms-modal-content {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);
    max-height: 88vh;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    transform:
        translateY(30px)
        scale(0.97);

    transition:
        transform 0.4s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.terms-modal.active .terms-modal-content {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.terms-modal-close {

    position: absolute;

    top: 20px;
    right: 22px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #071b3a;
    color: #ffffff;

    font-size: 28px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

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

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


.terms-modal-close:hover {

    background: #b7e600;
    color: #071b3a;

    transform: rotate(90deg);
}


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

.terms-modal-header {

    padding: 45px 55px 30px;

    background:
        linear-gradient(
            135deg,
            #071b3a,
            #02172f
        );

    color: #ffffff;
}


.terms-modal-label {

    display: block;

    margin-bottom: 10px;

    color: #b7e600;

    font-family: "Inter", sans-serif;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


.terms-modal-header h2 {

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: clamp(
        28px,
        4vw,
        42px
    );

    font-weight: 800;

    letter-spacing: -1px;
}


.terms-modal-header p {

    margin: 8px 0 0;

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

    font-size: 14px;
}


/* =========================================================
   BODY
========================================================= */

.terms-modal-body {

    max-height: 58vh;

    overflow-y: auto;

    padding:
        35px
        55px
        45px;

    color: #333333;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.terms-modal-body::-webkit-scrollbar {
    width: 7px;
}


.terms-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}


.terms-modal-body::-webkit-scrollbar-thumb {

    background: #b7e600;

    border-radius: 10px;
}


/* =========================================================
   TEXT
========================================================= */

.terms-modal-body p {

    margin:
        0
        0
        22px;
}


.terms-modal-body h3 {

    margin:
        30px
        0
        10px;

    color: #071b3a;

    font-size: 17px;

    font-weight: 800;
}


.terms-modal-body strong {

    color: #b7e600;
}


/* =========================================================
   CONTACT BOX
========================================================= */

.terms-contact-box {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 30px;

    padding:
        22px
        25px;

    border-left:
        4px solid
        #b7e600;

    background: #071b3a;

    border-radius:
        0
        10px
        10px
        0;

    color: #444444;

    font-size: 13px;
}


.terms-contact-box strong {

    margin-bottom: 4px;

    font-size: 15px;
}


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

.terms-modal-footer {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding:
        18px
        30px;

    border-top:
        1px solid
        #eeeeee;

    background: #ffffff;
}


.terms-modal-footer button {

    border: none;

    padding:
        11px
        25px;

    border-radius: 30px;

    background: #b7e600;

    color: #071b3a;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

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


.terms-modal-footer button:hover {

    background: #96c703;

    transform:
        translateY(-2px);
}


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

@media (max-width: 768px) {

    .terms-modal {

        padding: 15px;
    }


    .terms-modal-content {

        width: 100%;

        max-height: 94vh;

        border-radius: 14px;
    }


    .terms-modal-header {

        padding:
            35px
            25px
            25px;
    }


    .terms-modal-header h2 {

        font-size: 28px;
    }


    .terms-modal-body {

        max-height: 65vh;

        padding:
            25px
            25px
            35px;

        font-size: 13px;

        line-height: 1.7;
    }


    .terms-modal-close {

        top: 15px;
        right: 15px;

        width: 38px;
        height: 38px;

        font-size: 24px;
    }


    .terms-modal-footer {

        padding:
            15px
            20px;
    }

}



/* =========================================================
   COOKIE CONSENT BANNER
========================================================= */

.cookie-banner {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 99990;

    padding:
        18px
        25px;

    background:
        rgba(4, 17, 38, 0.97);

    border-top:
        1px solid
        rgba(183, 230, 0, 0.35);

    box-shadow:
        0 -15px 40px
        rgba(0, 0, 0, 0.20);

    transform:
        translateY(110%);

    opacity: 0;

    visibility: hidden;

    transition:
        transform 0.6s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   SHOW BANNER
========================================================= */

.cookie-banner.show {

    transform:
        translateY(0);

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   INNER CONTAINER
========================================================= */

.cookie-banner-inner {

    position: relative;

    width:
        min(
            1240px,
            92%
        );

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 20px;
}


/* =========================================================
   COOKIE ICON
========================================================= */

.cookie-icon {

    flex-shrink: 0;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(
            183,
            230,
            0,
            0.12
        );

    border:
        1px solid
        rgba(
            183,
            230,
            0,
            0.35
        );

    color:
        #b7e600;

    font-size: 22px;
}


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

.cookie-content {

    flex: 1;

    min-width: 0;
}


.cookie-content h3 {

    margin: 0 0 5px;

    color: #ffffff;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    letter-spacing:
        0.2px;
}


.cookie-content p {

    margin: 0;

    max-width: 800px;

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

    font-family:
        "Inter",
        sans-serif;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PRIVACY POLICY LINK
========================================================= */

.cookie-policy-link {

    margin-top: 6px;

    padding: 0;

    border: none;

    background: none;

    color:
        #b7e600;

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    text-decoration: underline;

    text-underline-offset: 3px;
}


.cookie-policy-link:hover {

    color: #ffffff;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.cookie-actions {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 30px;
}


.cookie-actions button {

    min-height: 40px;

    padding:
        0 18px;

    border-radius: 30px;

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.3px;

    cursor: pointer;

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


/* =========================================================
   DECLINE
========================================================= */

.cookie-decline {

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

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );
}


.cookie-decline:hover {

    border-color:
        #ffffff;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


/* =========================================================
   ACCEPT
========================================================= */

.cookie-accept {

    border:
        1px solid
        #b7e600;

    background:
        #b7e600;

    color:
        #071b3a;
}


.cookie-accept:hover {

    background:
        #96c703;

    border-color:
        #96c703;

    transform:
        translateY(-2px);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.cookie-close {

    position: absolute;

    top: -7px;
    right: 0;

    width: 24px;
    height: 24px;

    display: flex;

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

    border: none;

    background:
        transparent;

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

    font-size: 20px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

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


.cookie-close:hover {

    color:
        #b7e600;

    transform:
        rotate(90deg);
}


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

@media (max-width: 768px) {

    .cookie-banner {

        padding:
            18px
            15px;
    }


    .cookie-banner-inner {

        width: 100%;

        display: grid;

        grid-template-columns:
            auto 1fr;

        gap:
            14px;
    }


    .cookie-icon {

        width: 42px;
        height: 42px;

        font-size: 18px;
    }


    .cookie-content {

        padding-right: 15px;
    }


    .cookie-content h3 {

        font-size: 14px;
    }


    .cookie-content p {

        font-size: 11px;

        line-height: 1.55;
    }


    .cookie-actions {

        grid-column:
            1 / -1;

        width: 100%;

        padding:
            5px
            0
            0;

        display: flex;

        justify-content: flex-end;
    }


    .cookie-actions button {

        flex: 1;

        min-height: 40px;
    }


    .cookie-close {

        top: -5px;
        right: -2px;
    }

}


/* =========================================================
   FINAL DEVICE COMPATIBILITY PATCH
   NEAT ENGAGEMENTS — ALL PAGES / ALL SCREEN SIZES
   ---------------------------------------------------------
   This layer keeps the existing visual design intact while
   improving viewport handling, text scaling, navigation,
   touch targets, safe-area support, and small-screen layout.
========================================================= */


/* =========================================================
   MODERN VIEWPORT + TEXT RENDERING
========================================================= */

html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;

    scroll-padding-top: 82px;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   MEDIA ELEMENTS
========================================================= */

img,
svg,
video,
canvas {
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}


/* =========================================================
   INTERACTIVE ELEMENTS
========================================================= */

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

input,
textarea,
select,
button {
    font-size: inherit;
}


/* =========================================================
   HEADER — EXTRA-WIDE / LAPTOP SAFETY
========================================================= */

.header-container {
    width: min(1240px, calc(100% - 40px));
}

.main-nav {
    min-width: 0;
}

.nav-link,
.contact-button {
    white-space: nowrap;
}

.brand {
    min-width: 0;
}

.brand-name {
    min-width: 0;
}


/* =========================================================
   TABLET NAVIGATION
   Move to hamburger slightly earlier so 768–980px devices
   never get a crowded desktop navigation.
========================================================= */

@media (max-width: 980px) {

    .site-header {
        height: 74px;
    }

    .site-header.scrolled {
        height: 68px;
    }

    .header-container {
        width: min(94%, 760px);
    }

    .main-nav {
        position: fixed;

        top: 74px;
        right: -100%;

        width: min(320px, 100vw);
        height: calc(100dvh - 74px);
        height: calc(100svh - 74px);

        padding: 40px 28px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 22px;

        overflow-y: auto;
        overflow-x: hidden;

        background: rgba(4, 17, 38, 0.98);

        box-shadow:
            -10px 0 35px rgba(0, 0, 0, 0.18);

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

        transition: right 0.4s ease;

        z-index: 1001;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-link {
        font-size: 12px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
    }

    .site-header.scrolled .nav-link {
        color: var(--white);
    }

    .site-header.scrolled .nav-link:hover {
        color: var(--lime);
    }

    .contact-button {
        width: 100%;
        min-height: 46px;
        margin-top: 8px;
    }

    .menu-toggle {
        display: block;
        flex: 0 0 44px;
    }

    /* Prevent the menu from sitting below a shortened header. */
    .site-header.scrolled .main-nav {
        top: 68px;
        height: calc(100dvh - 68px);
        height: calc(100svh - 68px);
    }
}


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

@media (min-width: 651px) and (max-width: 980px) {

    .hero-section {
        height: 100dvh;
        height: 100svh;
        min-height: 620px;
    }

    .hero-container {
        width: min(90%, 850px);
    }

    .hero-content {
        width: min(76%, 650px);
        padding-top: 55px;
    }

    .hero-content h1 {
        font-size: clamp(44px, 7vw, 70px);
    }

    .hero-content h2 {
        font-size: clamp(25px, 4vw, 48px);
        line-height: 0.9;
    }

    .typing-area {
        font-size: clamp(18px, 2.8vw, 28px);
    }

    .hero-description {
        max-width: 600px;
        font-size: 13px;
    }

    .hero-counter {
        right: 4%;
        bottom: 24px;
    }
}


/* =========================================================
   MOBILE HEADER / HERO
========================================================= */

@media (max-width: 650px) {

    html {
        scroll-padding-top: 74px;
    }

    .header-container {
        width: calc(100% - 28px);
    }

    .site-header {
        height: 72px;
    }

    .site-header.scrolled {
        height: 66px;
    }

    .brand {
        gap: 8px;
        max-width: calc(100% - 54px);
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .brand-name span:first-child {
        font-size: clamp(10px, 3.2vw, 13px);
        letter-spacing: .7px;
        white-space: nowrap;
    }

    .brand-name span:last-child {
        font-size: clamp(5px, 1.7vw, 7px);
        letter-spacing: clamp(1px, .5vw, 2px);
        white-space: nowrap;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .main-nav {
        top: 72px;
        width: 100vw;
        height: calc(100dvh - 72px);
        height: calc(100svh - 72px);

        padding:
            max(30px, env(safe-area-inset-top))
            24px
            max(30px, env(safe-area-inset-bottom));
    }

    .site-header.scrolled .main-nav {
        top: 66px;
        height: calc(100dvh - 66px);
        height: calc(100svh - 66px);
    }

    .nav-link {
        font-size: 11px;
        letter-spacing: 1.3px;
        min-height: 38px;
    }

    .contact-button {
        min-height: 48px;
    }

    .hero-section {
        height: 100dvh;
        height: 100svh;

        /*
           Keep the existing full-screen feel without forcing
           very short phones into an unnecessarily tall section.
        */
        min-height: 560px;
    }

    .hero-background {
        inset: -6%;
    }

    .hero-container {
        width: calc(100% - 32px);
        min-height: 100%;
    }

    .hero-content {
        width: 100%;
        max-width: 620px;
        padding-top: 38px;
    }

    .hero-content h1 {
        font-size: clamp(36px, 12vw, 56px);
        line-height: .96;
        letter-spacing: -2px;
        overflow-wrap: anywhere;
    }

    .hero-content h2 {
        font-size: clamp(18px, 5.4vw, 28px);
        line-height: 1.15;
        letter-spacing: 0;
        margin-bottom: 22px;
        overflow-wrap: anywhere;
    }

    .typing-area {
        min-height: 32px;
        font-size: clamp(14px, 4.3vw, 21px);
        line-height: 1.35;
    }

    .hero-description {
        max-width: 100%;
        font-size: clamp(12px, 3.4vw, 14px);
        line-height: 1.7;
        margin-bottom: 24px;
    }

    .hero-buttons {
        width: 100%;
        max-width: 430px;
    }

    .hero-button {
        width: 100%;
        min-height: 48px;
        padding-inline: 18px;
    }

    .hero-counter {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        font-size: 9px;
        letter-spacing: 1.5px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .header-container {
        width: calc(100% - 22px);
    }

    .brand-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .brand-name span:first-child {
        font-size: 10px;
    }

    .brand-name span:last-child {
        font-size: 5px;
        letter-spacing: 1px;
    }

    .hero-section {
        min-height: 540px;
    }

    .hero-container {
        width: calc(100% - 26px);
    }

    .hero-content {
        padding-top: 30px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 11.5vw, 48px);
    }

    .hero-content h2 {
        font-size: clamp(16px, 5vw, 22px);
    }

    .typing-area {
        font-size: 13px;
    }

    .hero-description {
        font-size: 11px;
    }

    .hero-button {
        min-height: 46px;
    }
}


/* =========================================================
   LANDSCAPE PHONES
   Avoid oversized vertical spacing when the device is short.
========================================================= */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {

    .site-header {
        height: 62px;
    }

    .site-header.scrolled {
        height: 58px;
    }

    .main-nav {
        top: 62px;
        height: calc(100dvh - 62px);
        height: calc(100svh - 62px);
        padding: 22px 25px;
        gap: 14px;
    }

    .site-header.scrolled .main-nav {
        top: 58px;
        height: calc(100dvh - 58px);
        height: calc(100svh - 58px);
    }

    .hero-section {
        height: 100dvh;
        height: 100svh;
        min-height: 460px;
    }

    .hero-content {
        padding-top: 28px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 7vw, 52px);
    }

    .hero-content h2 {
        font-size: clamp(16px, 3.5vw, 25px);
        margin-bottom: 15px;
    }

    .typing-area {
        font-size: clamp(13px, 2.5vw, 19px);
        min-height: 24px;
    }

    .hero-description {
        font-size: 11px;
        line-height: 1.5;
        margin-bottom: 14px;
        max-width: 560px;
    }

    .hero-buttons {
        flex-direction: row;
        align-items: center;
    }

    .hero-button {
        width: auto;
        min-width: 125px;
        min-height: 42px;
        padding: 10px 16px;
    }

    .hero-counter {
        bottom: 10px;
    }
}


/* =========================================================
   ABOUT PREVIEW — FLUID HEIGHT
========================================================= */

.about-preview-container {
    width: min(900px, calc(100% - 40px));
}

.about-preview p {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {

    .about-preview {
        height: auto;
        min-height: 600px;
        padding:
            90px
            0
            75px;
    }

    .about-preview-container {
        width: calc(100% - 34px);
    }

    .about-preview h2 {
        font-size: clamp(32px, 10vw, 50px);
        line-height: 1.02;
    }

    .about-preview p {
        font-size: clamp(12px, 3.4vw, 14px);
    }

    .about-preview-button {
        min-height: 46px;
    }
}


/* =========================================================
   SERVICES PREVIEW — PREVENT CARD / BUTTON COLLISIONS
========================================================= */

.services-preview-heading {
    max-width: calc(100% - 32px);
}

.services-preview-heading h2 {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {

    .services-preview {
        height: auto;
        min-height: 360px;
        padding: 72px 0 70px;
    }

    .services-preview-content {
        min-height: 360px;
    }

    .services-preview-heading {
        top: 22px;
        width: calc(100% - 28px);
        white-space: normal;
    }

    .services-slider {
        top: 52%;
    }

    .services-preview-button {
        bottom: 16px;
        min-height: 42px;
    }
}

@media (max-width: 380px) {

    .services-preview {
        min-height: 345px;
        padding-bottom: 65px;
    }

    .services-preview-content {
        min-height: 345px;
    }

    .services-preview-heading h2 {
        font-size: clamp(20px, 7vw, 24px);
    }

    .service-card {
        flex-basis: 128px;
        width: 128px;
        height: 88px;
    }
}


/* =========================================================
   MISSION & VISION — LET TEXT GROW INSTEAD OF CLIP
========================================================= */

.mission-vision-text,
.mission-block,
.vision-block {
    min-width: 0;
}

.mission-block p,
.vision-block p {
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {

    .mission-vision {
        height: auto;
        min-height: 620px;
        padding: 80px 0 75px;
    }

    .mission-vision-text {
        width: calc(100% - 34px);
    }

    .mission-vision-text > h2 {
        font-size: clamp(30px, 9.5vw, 40px);
        line-height: 1.05;
    }

    .mission-block p,
    .vision-block p {
        font-size: clamp(11px, 3.2vw, 13px);
    }
}



/* =========================================================
   CORE VALUES — PREVENT OVERFLOW FROM LARGE DECORATIONS
========================================================= */

.why6-section {
    min-width: 0;
}

.why6-header,
.why6-header h2 {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 650px) {

    .why6-watermark {
        font-size: clamp(5rem, 25vw, 10rem);
        max-width: 100vw;
        overflow: hidden;
    }
}


/* =========================================================
   CLIENTS — RESPONSIVE LOGO TRACK
========================================================= */

.clients7-section {
    min-width: 0;
}

@media (max-width: 650px) {

    .clients7-section {
        height: auto;
        min-height: 330px;
    }
}


/* =========================================================
   NEWS — FLUID CARDS
========================================================= */

.news-container,
.news-grid,
.news-card {
    min-width: 0;
}

.news-card img,
.news-image img {
    max-width: 100%;
}

.news-content h3,
.news-content p {
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {

    .news-section {
        width: 100%;
        padding-left: 17px;
        padding-right: 17px;
    }

    .news-container {
        width: 100%;
    }

    .news-heading h2 {
        font-size: clamp(28px, 9vw, 36px);
        line-height: 1.05;
    }

    .news-image {
        height: clamp(170px, 52vw, 220px);
    }
}


/* =========================================================
   FOOTER — SAFE-AREA + LONG ADDRESS HANDLING
========================================================= */

.footer-container,
.footer-bottom-inner {
    min-width: 0;
}

.footer-brand,
.footer-column,
.footer-contact {
    min-width: 0;
}

.footer-brand p,
.footer-contact p,
.footer-column a {
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {

    .site-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .footer-container {
        width: calc(100% - 34px);
    }

    .footer-bottom-inner {
        width: calc(100% - 34px);
    }
}


/* =========================================================
   PRIVACY / TERMS MODALS — DYNAMIC VIEWPORT
========================================================= */

.privacy-modal,
.terms-modal {
    padding:
        max(15px, env(safe-area-inset-top))
        max(15px, env(safe-area-inset-right))
        max(15px, env(safe-area-inset-bottom))
        max(15px, env(safe-area-inset-left));
}

.privacy-modal-content,
.terms-modal-content {
    width: min(900px, 100%);
    max-width: 100%;
    max-height: 90dvh;
    max-height: 90svh;
}

.privacy-modal-body,
.terms-modal-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.privacy-modal-body *,
.terms-modal-body * {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {

    .privacy-modal,
    .terms-modal {
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .privacy-modal-content,
    .terms-modal-content {
        width: 100%;
        max-height: 94dvh;
        max-height: 94svh;
        border-radius: 12px;
    }

    .privacy-modal-header,
    .terms-modal-header {
        padding: 30px 22px 22px;
    }

    .privacy-modal-header h2,
    .terms-modal-header h2 {
        font-size: clamp(24px, 7vw, 30px);
        padding-right: 35px;
    }

    .privacy-modal-header p,
    .terms-modal-header p {
        font-size: 12px;
        line-height: 1.6;
        padding-right: 25px;
    }

    .privacy-modal-body,
    .terms-modal-body {
        max-height: 68dvh;
        max-height: 68svh;
        padding: 22px 22px 30px;
        font-size: 12px;
        line-height: 1.7;
    }

    .privacy-modal-close,
    .terms-modal-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 23px;
    }

    .privacy-modal-footer,
    .terms-modal-footer {
        padding:
            13px
            18px
            max(13px, env(safe-area-inset-bottom));
    }

    .privacy-modal-footer button,
    .terms-modal-footer button {
        min-height: 42px;
        padding-inline: 22px;
    }
}


/* =========================================================
   COOKIE BANNER — SMALL DEVICES / SAFE AREA
========================================================= */

.cookie-banner {
    padding-bottom:
        max(18px, env(safe-area-inset-bottom));
}

.cookie-banner-inner {
    min-width: 0;
}

.cookie-content {
    min-width: 0;
}

.cookie-content p {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {

    .cookie-banner {
        padding:
            15px
            13px
            max(15px, env(safe-area-inset-bottom));
    }

    .cookie-banner-inner {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cookie-content {
        padding-right: 5px;
    }

    .cookie-actions {
        width: 100%;
        gap: 8px;
    }

    .cookie-actions button {
        min-width: 0;
        min-height: 42px;
        padding-inline: 12px;
        white-space: nowrap;
    }

    .cookie-close {
        right: 0;
    }
}

@media (max-width: 380px) {

    .cookie-banner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cookie-banner-inner {
        gap: 10px;
    }

    .cookie-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .cookie-content h3 {
        font-size: 12px;
    }

    .cookie-content p {
        font-size: 10px;
    }

    .cookie-actions button {
        font-size: 10px;
        padding-inline: 9px;
    }
}


/* =========================================================
   TOUCH DEVICES
   Hover effects should not interfere with touch interaction.
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .contact-button:hover,
    .hero-button:hover,
    .about-preview-button:hover,
    .services-preview-button:hover,
    .service-card:hover,
    .news-view-button:hover,
    .privacy-modal-close:hover,
    .terms-modal-close:hover,
    .cookie-actions button:hover {
        transform: none;
    }

    .service-card:hover img,
    .why-item-image:hover img {
        transform: none;
    }

    .services-track:hover {
        animation-play-state: running;
    }
}


/* =========================================================
   HIGH-CONTRAST / FORCED COLORS
========================================================= */

@media (forced-colors: active) {

    .nav-link::after,
    .service-card::before,
    .hero-button,
    .contact-button {
        forced-color-adjust: none;
    }

    .menu-toggle {
        border: 1px solid ButtonText;
    }
}


/* =========================================================
   REDUCED MOTION — FINAL SAFETY OVERRIDE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .site-header,
    .menu-toggle,
    .hero-buttons,
    .hero-counter,
    .cookie-banner,
    .privacy-modal,
    .terms-modal {
        display: none !important;
    }

    body {
        overflow: visible !important;
        color: #000 !important;
        background: #fff !important;
    }

    section,
    .site-footer {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        page-break-inside: avoid;
    }
}







/* =========================================================
   NEAT ENGAGEMENTS
   NEAT AI ASSISTANT
========================================================= */


/* =========================================================
   AI VARIABLES
========================================================= */

.neat-ai {

    --ai-lime: #b7e600;
    --ai-lime-dark: #96c703;

    --ai-navy: #071b3a;
    --ai-navy-dark: #041126;

    --ai-blue: #0d467f;

    --ai-white: #ffffff;

    --ai-text: #172b45;
    --ai-muted: #8290a2;

    --ai-border: #e5eaf0;

    --ai-shadow:
        0 25px 70px rgba(4, 17, 38, 0.22);

    position: fixed;

    right: 26px;
    bottom: 26px;

    z-index: 99999;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   FLOATING LAUNCHER
========================================================= */

.neat-ai-launcher {

    position: fixed;
    right: 26px;
    bottom: 55px;
    z-index: 99999;

    width: 70px;
    height: 70px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--ai-lime),
            #a7d500
        );

    color: var(--ai-navy);

    display: flex;

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

    cursor: pointer;

    box-shadow:
        0 12px 35px rgba(7, 27, 58, 0.25);

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


.neat-ai-launcher:hover {

    transform:
        translateY(-5px)
        scale(1.04);

    box-shadow:
        0 18px 42px rgba(7, 27, 58, 0.30);
}


/* =========================================================
   ROBOT ICON
========================================================= */

.ai-launcher-robot {

    font-size: 27px;

    display: flex;

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

    transition:
        transform 0.3s ease,
        opacity 0.25s ease;
}


.ai-launcher-close {

    position: absolute;

    font-size: 25px;

    opacity: 0;

    transform:
        rotate(-90deg)
        scale(0.5);

    transition:
        transform 0.3s ease,
        opacity 0.25s ease;
}


.neat-ai.open .ai-launcher-robot {

    opacity: 0;

    transform:
        rotate(90deg)
        scale(0.5);
}


.neat-ai.open .ai-launcher-close {

    opacity: 1;

    transform:
        rotate(0)
        scale(1);
}


/* =========================================================
   LAUNCHER RING
========================================================= */

.ai-launcher-ring {

    position: absolute;

    inset: -5px;

    border:
        2px solid
        rgba(183, 230, 0, 0.35);

    border-radius: 50%;

    animation:
        aiLauncherPulse 2.5s
        infinite;
}


@keyframes aiLauncherPulse {

    0% {

        transform: scale(0.95);

        opacity: 0.8;
    }

    70% {

        transform: scale(1.12);

        opacity: 0;
    }

    100% {

        transform: scale(1.12);

        opacity: 0;
    }

}


/* =========================================================
   ONLINE STATUS
========================================================= */

.ai-launcher-status {

    position: absolute;

    width: 14px;
    height: 14px;

    right: 1px;
    top: 1px;

    border-radius: 50%;

    background: #38d879;

    border:
        3px solid
        #ffffff;

    transition:
        opacity 0.2s ease;
}


.neat-ai.open .ai-launcher-status {

    opacity: 0;
}


/* =========================================================
   CHAT PANEL
========================================================= */

.neat-ai-panel {

    position: absolute;

    right: 0;

    bottom: 82px;

    width: 390px;

    height: 600px;

    max-width:
        calc(100vw - 30px);

    max-height:
        calc(100vh - 115px);

    background: var(--ai-white);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        var(--ai-shadow);

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(22px)
        scale(0.95);

    transform-origin:
        bottom right;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}


.neat-ai.open .neat-ai-panel {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


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

.neat-ai-header {

    min-height: 86px;

    padding:
        14px
        17px;

    background:
        linear-gradient(
            135deg,
            var(--ai-navy-dark),
            var(--ai-navy),
            var(--ai-blue)
        );

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;
}


.neat-ai-header::after {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -80px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(183, 230, 0, 0.12);
}


/* =========================================================
   BRAND
========================================================= */

.neat-ai-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    position: relative;

    z-index: 2;
}


.neat-ai-title h3 {

    margin: 0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.2px;
}


.neat-ai-title span {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 5px;

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

    font-size: 10px;

    letter-spacing: 0.5px;
}


.neat-ai-title span i {

    color: #54dc87;

    font-size: 6px;
}


/* =========================================================
   ROBOT HEAD
========================================================= */

.neat-ai-robot {

    position: relative;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    justify-content: center;

    align-items: flex-end;
}


/* ANTENNA */

.robot-antenna {

    position: absolute;

    width: 2px;
    height: 8px;

    top: 0;

    background: var(--ai-lime);

    left: 50%;

    transform:
        translateX(-50%);
}


.robot-antenna span {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--ai-lime);

    left: 50%;
    top: -5px;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 8px
        rgba(183,230,0,0.7);
}


/* HEAD */

.robot-head {

    position: relative;

    width: 42px;
    height: 34px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dce5ee
        );

    border-radius:
        11px
        11px
        13px
        13px;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,0.2);
}


/* EARS */

.robot-ear {

    position: absolute;

    top: 10px;

    width: 5px;
    height: 14px;

    border-radius: 4px;

    background:
        #aab8c8;
}


.robot-ear-left {

    left: -5px;
}


.robot-ear-right {

    right: -5px;
}


/* FACE */

.robot-face {

    position: absolute;

    left: 5px;
    right: 5px;

    top: 6px;
    bottom: 5px;

    border-radius: 8px;

    background:
        var(--ai-navy);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}


/* EYES */

.robot-eye {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--ai-lime);

    box-shadow:
        0 0 7px
        rgba(183,230,0,0.7);

    animation:
        robotBlink 4s
        infinite;
}


@keyframes robotBlink {

    0%,
    44%,
    48%,
    100% {

        transform:
            scaleY(1);
    }

    46% {

        transform:
            scaleY(0.15);
    }

}


/* MOUTH */

.robot-mouth {

    position: absolute;

    width: 8px;
    height: 3px;

    bottom: 5px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 4px;

    background:
        rgba(183,230,0,0.7);
}


/* =========================================================
   CLOSE
========================================================= */

.neat-ai-close {

    position: relative;

    z-index: 3;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

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

    color: #ffffff;

    cursor: pointer;

    display: flex;

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

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


.neat-ai-close:hover {

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

    transform:
        rotate(90deg);
}


/* =========================================================
   MESSAGES AREA
========================================================= */

.neat-ai-messages {

    flex: 1;

    overflow-y: auto;

    padding:
        20px
        17px;

    background:
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 100%
        );
}


.neat-ai-messages::-webkit-scrollbar {

    width: 5px;
}


.neat-ai-messages::-webkit-scrollbar-thumb {

    background:
        #ccd5df;

    border-radius: 20px;
}


/* =========================================================
   MESSAGE
========================================================= */

.neat-ai-message {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 17px;
}


.neat-ai-small-robot {

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        var(--ai-lime);

    color:
        var(--ai-navy);

    display: flex;

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

    font-size: 12px;
}


.neat-ai-bubble {

    max-width: 82%;

    padding:
        12px
        14px;

    background:
        #ffffff;

    border:
        1px solid
        #edf0f4;

    border-radius:
        5px
        15px
        15px
        15px;

    box-shadow:
        0 4px 15px
        rgba(7,27,58,0.05);
}


.neat-ai-bubble p {

    margin:
        0
        0
        7px;

    color:
        var(--ai-text);

    font-size: 12.5px;

    line-height: 1.6;
}


.neat-ai-bubble p:last-child {

    margin-bottom: 0;
}


.neat-ai-greeting {

    margin-bottom: 7px;

    color:
        var(--ai-navy);

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.neat-ai-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin:
        2px
        0
        8px
        39px;
}


.neat-ai-actions button {

    width: 100%;

    min-height: 55px;

    padding:
        8px
        10px;

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

    border-radius: 12px;

    background:
        #ffffff;

    display: grid;

    grid-template-columns:
        34px
        1fr
        16px;

    align-items: center;

    gap: 9px;

    text-align: left;

    cursor: pointer;

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


.neat-ai-actions button:hover {

    transform:
        translateX(3px);

    border-color:
        var(--ai-lime-dark);

    background:
        #fbfef4;

    box-shadow:
        0 5px 16px
        rgba(7,27,58,0.06);
}


.ai-action-icon {

    width: 34px;
    height: 34px;

    border-radius: 10px;

    background:
        #f1f8d9;

    color:
        #719600;

    display: flex;

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

    font-size: 13px;
}


.neat-ai-actions strong {

    display: block;

    color:
        var(--ai-navy);

    font-size: 11.5px;

    font-weight: 700;
}


.neat-ai-actions small {

    display: block;

    margin-top: 2px;

    color:
        var(--ai-muted);

    font-size: 9.5px;
}


.neat-ai-actions button > i {

    color:
        #aab4c0;

    font-size: 9px;
}


/* =========================================================
   USER MESSAGE
========================================================= */

.neat-ai-user {

    justify-content: flex-end;
}


.neat-ai-user .neat-ai-bubble {

    background:
        var(--ai-navy);

    border: none;

    border-radius:
        15px
        5px
        15px
        15px;
}


.neat-ai-user .neat-ai-bubble p {

    color: #ffffff;
}


/* =========================================================
   TYPING
========================================================= */

.neat-ai-typing {

    display: none;

    align-items: center;

    gap: 9px;

    padding:
        0
        17px
        9px;
}


.neat-ai-typing.active {

    display: flex;
}


.neat-ai-typing-bubble {

    display: flex;

    align-items: center;

    gap: 4px;

    padding:
        10px
        13px;

    border-radius:
        5px
        14px
        14px
        14px;

    background: #ffffff;

    border:
        1px solid
        #edf0f4;
}


.neat-ai-typing-bubble span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #8794a4;

    animation:
        aiTyping 1.2s
        infinite ease-in-out;
}


.neat-ai-typing-bubble span:nth-child(2) {

    animation-delay:
        0.15s;
}


.neat-ai-typing-bubble span:nth-child(3) {

    animation-delay:
        0.3s;
}


@keyframes aiTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity: 0.35;
    }

    30% {

        transform:
            translateY(-4px);

        opacity: 1;
    }

}


/* =========================================================
   INPUT
========================================================= */

.neat-ai-input-wrapper {

    padding:
        10px
        12px
        8px;

    border-top:
        1px solid
        #edf0f4;

    background:
        #ffffff;
}


.neat-ai-input-box {

    height: 45px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        4px
        4px
        4px
        13px;

    border:
        1px solid
        #dce3eb;

    border-radius: 13px;

    background:
        #f8fafc;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.neat-ai-input-box:focus-within {

    border-color:
        var(--ai-lime-dark);

    background:
        #ffffff;
}


.neat-ai-input-box input {

    flex: 1;

    min-width: 0;

    height: 35px;

    border: 0;

    outline: 0;

    background: transparent;

    color:
        var(--ai-text);

    font-size: 11.5px;
}


.neat-ai-input-box input::placeholder {

    color:
        #9aa5b2;
}


.neat-ai-input-box button {

    flex-shrink: 0;

    width: 35px;
    height: 35px;

    border: 0;

    border-radius: 10px;

    background:
        var(--ai-lime);

    color:
        var(--ai-navy);

    cursor: pointer;

    display: flex;

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

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


.neat-ai-input-box button:hover {

    background:
        var(--ai-lime-dark);

    transform:
        translateY(-1px);
}


.neat-ai-disclaimer {

    text-align: center;

    padding-top: 6px;

    color:
        #a3adba;

    font-size: 8px;

    letter-spacing: 0.4px;
}


/* =========================================================
   AI POP NOTIFICATION
========================================================= */

.neat-ai-notification {

    position: absolute;

    right: 76px;

    bottom: 60px;

    width: 285px;

    padding:
        14px
        38px
        14px
        14px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(7, 27, 58, 0.08);

    border-radius: 15px;

    box-shadow:
        0 14px 40px
        rgba(4, 17, 38, 0.18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(18px)
        translateY(8px)
        scale(0.94);

    transform-origin:
        bottom right;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;

    z-index: 20;
}


/* SHOW */

.neat-ai-notification.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


/* NOTIFICATION ARROW */

.neat-ai-notification::after {

    content: "";

    position: absolute;

    right: -7px;

    bottom: 18px;

    width: 14px;
    height: 14px;

    background:
        #ffffff;

    border-top:
        1px solid
        rgba(7, 27, 58, 0.08);

    border-right:
        1px solid
        rgba(7, 27, 58, 0.08);

    transform:
        rotate(45deg);
}


/* NOTIFICATION ICON */

.neat-ai-notification-icon {

    flex-shrink: 0;

    width: 39px;
    height: 39px;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            var(--ai-lime),
            #a7d500
        );

    color:
        var(--ai-navy);

    display: flex;

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

    font-size: 16px;

    box-shadow:
        0 6px 15px
        rgba(183, 230, 0, 0.25);

    animation:
        aiNotificationRobot 2.5s
        ease-in-out
        infinite;
}


@keyframes aiNotificationRobot {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-3px);
    }

}


/* NOTIFICATION CONTENT */

.neat-ai-notification-content {

    min-width: 0;
}


.neat-ai-notification-content strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--ai-navy);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.3;
}


.neat-ai-notification-content p {

    margin: 0;

    color:
        var(--ai-text);

    font-size: 10px;

    line-height: 1.5;
}


/* NOTIFICATION CLOSE */

.neat-ai-notification-close {

    position: absolute;

    top: 7px;

    right: 7px;

    width: 22px;
    height: 22px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        #f1f4f7;

    color:
        #7d8997;

    display: flex;

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

    cursor: pointer;

    font-size: 9px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.neat-ai-notification-close:hover {

    background:
        var(--ai-navy);

    color:
        #ffffff;

    transform:
        rotate(90deg);
}


/* HIDE NOTIFICATION WHEN AI IS OPEN */

.neat-ai.open .neat-ai-notification {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(18px)
        translateY(8px)
        scale(0.94);
}


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

@media (max-width: 600px) {

    .neat-ai {

        right: 15px;

        bottom: 15px;
    }


    .neat-ai-launcher {

        width: 58px;
        height: 58px;
    }


    .neat-ai-panel {

        position: fixed;

        left: 10px;
        right: 10px;

        bottom: 83px;

        width: auto;

        max-width: none;

        height:
            min(
                620px,
                calc(100vh - 105px)
            );

        max-height:
            calc(100vh - 105px);

        border-radius: 19px;

        transform-origin:
            bottom right;
    }


    .neat-ai-header {

        min-height: 76px;
    }


    .neat-ai-messages {

        padding:
            17px
            13px;
    }


    .neat-ai-bubble {

        max-width: 86%;
    }


    .neat-ai-actions {

        margin-left: 39px;
    }


    /* MOBILE NOTIFICATION */

    .neat-ai-notification {

        right: 70px;

        bottom: 5px;

        width: 245px;

        padding:
            12px
            34px
            12px
            12px;

        border-radius: 14px;
    }


    .neat-ai-notification-icon {

        width: 35px;
        height: 35px;

        border-radius: 10px;

        font-size: 14px;
    }


    .neat-ai-notification-content strong {

        font-size: 11px;
    }


    .neat-ai-notification-content p {

        font-size: 9px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .neat-ai {

        right: 11px;

        bottom: 11px;
    }


    .neat-ai-panel {

        left: 7px;

        right: 7px;

        bottom: 76px;
    }


    .neat-ai-header {

        padding:
            12px
            13px;
    }


    .neat-ai-title h3 {

        font-size: 14px;
    }


    .neat-ai-actions {

        margin-left: 36px;
    }


    /* SMALL PHONE NOTIFICATION */

    .neat-ai-notification {

        right: 65px;

        bottom: 3px;

        width: 220px;

        padding:
            11px
            32px
            11px
            11px;
    }


    .neat-ai-notification-icon {

        width: 32px;

        height: 32px;

        font-size: 13px;
    }


    .neat-ai-notification-content strong {

        font-size: 10.5px;
    }


    .neat-ai-notification-content p {

        font-size: 8.5px;
    }

}
/* =========================================================
   FINAL RESPONSIVE COMPATIBILITY LAYER
   Added without changing the existing desktop design.
   Purpose: improve behavior on tablets, phones, small screens,
   landscape phones, notched devices, and touch devices.
========================================================= */

/* Fluid media and long-content safety */
img,
video,
svg,
canvas {
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
}

input,
textarea,
select {
    min-width: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
label,
span {
    overflow-wrap: break-word;
}

/* Prevent flex/grid children from forcing horizontal overflow */
.header-container,
.hero-container,
.hero-content,
.about-preview-container,
.services-preview-content,
.mission-vision-text,
.why6-section,
.clients7-container,
.news-container,
.neat-faq-container,
.neat5-container,
.neat10-container,
.neat12-container,
.footer-container,
.footer-bottom-inner {
    min-width: 0;
}

/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
========================================================= */

@media (max-width: 1100px) {

    .header-container {
        width: min(94%, 1100px);
    }

    .main-nav {
        gap: 20px;
    }

    .hero-content {
        width: min(70%, 720px);
    }

    .hero-container {
        width: min(92%, 1000px);
    }

    .neat5-container,
    .neat10-container,
    .neat12-container {
        width: min(92%, 1000px);
    }
}

/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 900px) {

    /* Make multi-column layouts collapse before they become cramped. */
    .news-grid,
    .neat12-container,
    .neat5-container {
        grid-template-columns: 1fr;
    }

    .news-grid {
        gap: 24px;
    }

    .neat12-image-wrap,
    .neat12-content {
        width: 100%;
        max-width: 100%;
    }

    /* Prevent decorative elements from creating horizontal scroll. */
    .services-decoration,
    .services-decoration-left,
    .services-decoration-right,
    .news-decoration,
    .why6-watermark,
    .neat-faq-orbit,
    .neat-faq-footer-mark {
        max-width: 100vw;
        overflow: hidden;
    }

    /* Better touch sizing for interactive controls. */
    .nav-link,
    .contact-button,
    .hero-button,
    .primary-button,
    .secondary-button,
    .services-preview-button,
    .neat11-button,
    .neat12-button,
    .news-view-button,
    .news-read-more {
        min-height: 44px;
    }
}

/* =========================================================
   PHONES
========================================================= */

@media (max-width: 650px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .header-container,
    .hero-container,
    .about-preview-container,
    .neat5-container,
    .neat10-container,
    .neat12-container,
    .footer-container,
    .footer-bottom-inner {
        width: calc(100% - 32px);
        max-width: 100%;
    }

    /* Keep buttons usable with thumbs and prevent label clipping. */
    .hero-buttons,
    .neat12-form-row {
        width: 100%;
        min-width: 0;
    }

    .hero-button,
    .primary-button,
    .secondary-button,
    .contact-button,
    .neat11-button,
    .neat12-button,
    .services-preview-button,
    .about-preview-button {
        max-width: 100%;
        white-space: normal;
    }

    /* Forms become one column on narrow screens. */
    .neat12-form-row {
        grid-template-columns: 1fr;
    }

    /* FAQ and news text should never force the viewport wider. */
    .neat-faq-question,
    .neat-faq-question-text,
    .neat-faq-answer,
    .news-content,
    .news-card,
    .news-card h3,
    .news-card p {
        min-width: 0;
        max-width: 100%;
    }

    /* Prevent large title/decorative layers from producing overflow. */
    .clients7-heading,
    .core-values-title,
    .core-values-intro,
    .why-title,
    .news-heading,
    .neat-faq-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Images stay inside their cards/columns. */
    .service-card img,
    .news-card img,
    .news-image img,
    .neat12-catalog-image,
    .why-item-image img,
    .clients7-logo img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .header-container,
    .hero-container,
    .about-preview-container,
    .neat5-container,
    .neat10-container,
    .neat12-container,
    .footer-container,
    .footer-bottom-inner {
        width: calc(100% - 24px);
    }

    .brand-name span:first-child {
        font-size: 13px;
        letter-spacing: .7px;
    }

    .brand-name span:last-child {
        font-size: 6px;
        letter-spacing: 2px;
    }

    .hero-buttons {
        gap: 9px;
    }

    .hero-button {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* =========================================================
   SHORT LANDSCAPE DEVICES
========================================================= */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {

    .hero-section {
        min-height: 430px;
    }

    .hero-content {
        padding-top: 18px;
    }

    .hero-description {
        max-width: 620px;
    }

    .main-nav {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

/* =========================================================
   SAFE-AREA SUPPORT FOR NOTCHED DEVICES
========================================================= */

@supports (padding: max(0px)) {

    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .site-footer {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    .main-nav {
        padding-right: max(28px, env(safe-area-inset-right));
        padding-left: max(28px, env(safe-area-inset-left));
    }
}

/* =========================================================
   TOUCH DEVICES
   Avoid hover-only interactions becoming inaccessible.
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .brand:hover .brand-logo {
        transform: none;
    }

    .service-card:hover,
    .news-card:hover,
    .why-item:hover,
    .neat-faq-item:hover {
        transform: none;
    }

    .nav-link,
    .contact-button,
    .hero-button,
    .primary-button,
    .secondary-button,
    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PRINT / EMBED SAFETY
========================================================= */

@media print {

    html,
    body {
        width: 100%;
        overflow: visible;
    }

    .site-header,
    .menu-toggle,
    .main-nav,
    .hero-scroll-content {
        position: static;
    }
}


/* ========================================================================
   NEAT ENGAGEMENTS — FINAL DEVICE COMPATIBILITY OVERRIDE
   This layer is intentionally placed last so it becomes the single
   authoritative responsive layer without changing the existing desktop
   visual language, colors, animations, or component structure.
========================================================================= */

/* ------------------------------------------------------------------------
   GLOBAL BOX / OVERFLOW SAFETY
------------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 82px;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

input,
textarea,
select,
button {
    min-width: 0;
    max-width: 100%;
}

textarea {
    resize: vertical;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent long words, URLs, and email addresses from creating a new
   horizontal scrollbar. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
label,
span,
li,
td,
th {
    overflow-wrap: anywhere;
}

/* Flex/grid children are allowed to shrink instead of forcing overflow. */
.header-container,
.header-actions,
.main-nav,
.hero-container,
.hero-content,
.about-preview-container,
.services-preview-content,
.mission-vision-text,
.why6-section,
.why6-container,
.clients7-container,
.news-container,
.neat-faq-container,
.neat5-container,
.neat10-container,
.neat12-container,
.footer-container,
.footer-bottom-inner,
.cookie-banner-inner {
    min-width: 0;
}

/* ------------------------------------------------------------------------
   HEADER — LARGE / TABLET
------------------------------------------------------------------------ */
@media (max-width: 1100px) and (min-width: 901px) {
    .header-container {
        width: min(94%, 1100px);
    }

    .main-nav {
        gap: clamp(14px, 2vw, 22px);
    }

    .nav-link {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .header-actions {
        gap: 8px;
    }

    .header-search {
        width: clamp(125px, 15vw, 160px);
    }

    .contact-button {
        min-width: 88px;
        padding-inline: 12px;
    }
}

/* ------------------------------------------------------------------------
   TABLET / MOBILE HEADER
   One consistent menu behavior: top-down full-width menu.
------------------------------------------------------------------------ */
@media (max-width: 900px) {
    html {
        scroll-padding-top: 74px;
    }

    .site-header {
        height: 74px;
        z-index: 10000;
    }

    .site-header.scrolled {
        height: 68px;
    }

    .header-container {
        width: calc(100% - 32px);
        max-width: 1240px;
    }

    .brand {
        max-width: calc(100% - 58px);
        min-width: 0;
    }

    .brand-name {
        min-width: 0;
    }

    .brand-name span {
        white-space: nowrap;
    }

    /* Desktop Contact + search stay desktop-only. Contact remains available
       through the page's normal contact controls on mobile. */
    .header-actions {
        display: none !important;
    }

    .menu-toggle {
        display: block;
        flex: 0 0 44px;
        margin-left: auto;
    }

    .main-nav {
        position: fixed;
        top: 74px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100dvh - 74px);
        min-height: 0;
        max-height: calc(100dvh - 74px);
        padding: 28px 24px max(28px, env(safe-area-inset-bottom));

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        background: var(--navy-dark);
        z-index: 9999;
    }

    .main-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-header.scrolled .main-nav {
        top: 68px;
        height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
    }

    .nav-link {
        width: min(100%, 360px);
        justify-content: center;
        min-height: 46px;
        padding: 11px 10px;
        font-size: 11px;
        letter-spacing: 1.25px;
        text-align: center;
        white-space: normal;
    }

    .nav-link::after {
        bottom: 4px;
    }

    /* If Contact is placed inside the navigation by the HTML, make it fit
       the same touch-friendly layout. */
    .main-nav .contact-button {
        width: min(100%, 360px);
        min-height: 48px;
        margin-top: 8px;
    }
}

/* ------------------------------------------------------------------------
   HERO — FLUID HEIGHT
------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .hero-section {
        width: 100%;
        height: auto;
        min-height: max(560px, 100svh);
        min-height: max(560px, 100dvh);
    }

    .hero-container {
        width: calc(100% - 32px);
        max-width: 1000px;
        min-height: inherit;
        padding-top: 84px;
        padding-bottom: 88px;
    }

    .hero-content {
        width: 100%;
        max-width: 720px;
        min-width: 0;
    }

    .hero-content h1 {
        font-size: clamp(36px, 10vw, 58px);
        line-height: .96;
        letter-spacing: -2px;
        overflow-wrap: anywhere;
    }

    .hero-content h2 {
        font-size: clamp(18px, 4vw, 28px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .typing-area {
        max-width: 100%;
        font-size: clamp(14px, 3vw, 22px);
        line-height: 1.35;
    }

    .hero-description {
        max-width: 680px;
        font-size: clamp(12px, 2vw, 14px);
        line-height: 1.7;
    }

    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 100%;
    }

    .hero-button {
        min-height: 46px;
    }

    .hero-counter {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .hero-background {
        inset: -6%;
    }
}

/* ------------------------------------------------------------------------
   CONTENT SECTIONS — TABLET
------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .about-preview-container,
    .news-container,
    .neat10-container,
    .neat12-container,
    .footer-container,
    .footer-bottom-inner {
        width: calc(100% - 32px);
        max-width: 100%;
    }

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

    .news-card {
        min-width: 0;
    }

    .neat12-container {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        gap: 45px;
    }

    #neat-section-12 {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        padding-block: 80px;
    }

    #neat-section-12 .neat12-left,
    #neat-section-12 .neat12-right {
        height: auto;
        min-height: 0;
    }

    #neat-section-10 {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        padding-block: 80px;
    }

    #faq-section-9.neat-faq {
        height: auto;
        min-height: 100svh;
        min-height: 680px;
        padding-block: 80px;
    }

    #faq-section-9 .neat-faq-container {
        width: calc(100% - 32px);
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

    .privacy-modal,
    .terms-modal {
        padding: 18px;
    }

    .privacy-modal-content,
    .terms-modal-content {
        width: 100%;
        max-width: 900px;
        max-height: calc(100svh - 36px);
        max-height: calc(100dvh - 36px);
    }
}

/* ------------------------------------------------------------------------
   PHONE
------------------------------------------------------------------------ */
@media (max-width: 650px) {
    html {
        scroll-padding-top: 72px;
    }

    .site-header {
        height: 72px;
    }

    .site-header.scrolled {
        height: 66px;
    }

    .header-container {
        width: calc(100% - 24px);
    }

    .brand {
        gap: 8px;
        max-width: calc(100% - 54px);
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .brand-name span:first-child {
        font-size: clamp(10px, 3.2vw, 13px);
        letter-spacing: .7px;
    }

    .brand-name span:last-child {
        font-size: clamp(5px, 1.7vw, 7px);
        letter-spacing: clamp(1px, .5vw, 2px);
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .main-nav {
        top: 72px;
        height: calc(100svh - 72px);
        height: calc(100dvh - 72px);
        max-height: calc(100svh - 72px);
        max-height: calc(100dvh - 72px);
        padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
    }

    .site-header.scrolled .main-nav {
        top: 66px;
        height: calc(100svh - 66px);
        height: calc(100dvh - 66px);
        max-height: calc(100svh - 66px);
        max-height: calc(100dvh - 66px);
    }

    .nav-link {
        min-height: 44px;
        font-size: 10px;
        letter-spacing: 1.15px;
    }

    .hero-section {
        min-height: 560px;
        height: auto;
    }

    .hero-container {
        width: calc(100% - 28px);
        padding-top: 88px;
        padding-bottom: 82px;
    }

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

    .hero-content h1 {
        font-size: clamp(34px, 12vw, 56px);
        letter-spacing: -1.8px;
    }

    .hero-content h2 {
        font-size: clamp(17px, 5.2vw, 27px);
        margin-bottom: 20px;
    }

    .typing-area {
        min-height: 30px;
        font-size: clamp(13px, 4vw, 20px);
    }

    .hero-description {
        font-size: clamp(12px, 3.5vw, 14px);
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        max-width: 430px;
    }

    .hero-button {
        width: 100%;
        min-height: 48px;
    }

    .hero-counter {
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    /* Content sections are allowed to grow with their text instead of
       clipping at a fixed viewport height. */
    .about-preview {
        height: auto;
        min-height: 600px;
        padding: 90px 0 75px;
    }

    .services-preview {
        height: auto;
        min-height: 330px;
    }

    .news-section {
        min-height: 0;
        padding: 65px 16px;
    }

    .news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .clients7-section {
        height: auto;
        min-height: 330px;
    }

    #faq-section-9.neat-faq {
        height: auto;
        min-height: 680px;
        padding: 80px 0;
    }

    #faq-section-9 .neat-faq-container {
        width: calc(100% - 28px);
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    #neat-section-10 {
        height: auto;
        min-height: 680px;
        padding: 75px 14px;
    }

    #neat-section-10 .neat10-container {
        width: 100%;
    }

    #neat-section-12 {
        height: auto;
        min-height: 0;
        padding: 70px 0;
    }

    #neat-section-12 .neat12-container {
        width: calc(100% - 28px);
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Forms */
    form,
    .form-row,
    .form-group,
    .contact-form,
    .contact-form-grid {
        min-width: 0;
        max-width: 100%;
    }

    input,
    textarea,
    select {
        width: 100%;
        max-width: 100%;
    }

    /* Modals */
    .privacy-modal,
    .terms-modal {
        padding: 10px;
    }

    .privacy-modal-content,
    .terms-modal-content {
        width: 100%;
        max-height: calc(100svh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
    }

    .privacy-modal-header,
    .terms-modal-header {
        padding: 32px 22px 22px;
    }

    .privacy-modal-header h2,
    .terms-modal-header h2 {
        font-size: clamp(25px, 8vw, 34px);
        padding-right: 35px;
    }

    .privacy-modal-body,
    .terms-modal-body {
        max-height: calc(100svh - 250px);
        max-height: calc(100dvh - 250px);
        padding: 24px 22px 30px;
        font-size: 13px;
        line-height: 1.7;
    }

    .privacy-modal-close,
    .terms-modal-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    /* Cookie banner stacks cleanly on narrow screens. */
    .cookie-banner {
        padding: 14px 12px;
    }

    .cookie-banner-inner {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .cookie-content {
        min-width: 0;
    }

    .cookie-actions {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cookie-actions button {
        min-height: 42px;
        flex: 1 1 120px;
    }
}

/* ------------------------------------------------------------------------
   VERY SMALL PHONES
------------------------------------------------------------------------ */
@media (max-width: 380px) {
    .header-container {
        width: calc(100% - 18px);
    }

    .brand-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .brand-name span:first-child {
        font-size: 10px;
    }

    .brand-name span:last-child {
        font-size: 5px;
        letter-spacing: 1px;
    }

    .hero-container {
        width: calc(100% - 22px);
        padding-top: 84px;
        padding-bottom: 78px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 12.5vw, 47px);
    }

    .hero-content h2 {
        font-size: clamp(16px, 5.4vw, 22px);
    }

    .hero-description {
        font-size: 12px;
    }

    .hero-counter {
        font-size: 8px;
        right: 10px;
    }

    .privacy-modal,
    .terms-modal {
        padding: 6px;
    }

    .privacy-modal-content,
    .terms-modal-content {
        max-height: calc(100svh - 12px);
        max-height: calc(100dvh - 12px);
    }

    .privacy-modal-body,
    .terms-modal-body {
        padding-inline: 17px;
    }

    .cookie-banner-inner {
        grid-template-columns: 1fr;
    }

    .cookie-icon {
        width: 36px;
        height: 36px;
    }
}

/* ------------------------------------------------------------------------
   SHORT LANDSCAPE PHONES / TABLETS
------------------------------------------------------------------------ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
    html {
        scroll-padding-top: 64px;
    }

    .site-header,
    .site-header.scrolled {
        height: 64px;
    }

    .main-nav,
    .site-header.scrolled .main-nav {
        top: 64px;
        height: calc(100svh - 64px);
        height: calc(100dvh - 64px);
        max-height: calc(100svh - 64px);
        max-height: calc(100dvh - 64px);
        padding-top: 12px;
        padding-bottom: 18px;
    }

    .hero-section {
        min-height: 430px;
        height: auto;
    }

    .hero-container {
        padding-top: 76px;
        padding-bottom: 68px;
    }

    .hero-content h1 {
        font-size: clamp(30px, 7vw, 46px);
    }

    .hero-content h2 {
        font-size: clamp(16px, 3.5vw, 22px);
        margin-bottom: 12px;
    }

    .typing-area {
        font-size: clamp(12px, 2.6vw, 17px);
        min-height: 24px;
    }

    .hero-description {
        font-size: 11px;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .hero-buttons {
        flex-direction: row;
        max-width: 460px;
    }

    .hero-button {
        width: auto;
        flex: 1 1 0;
        min-height: 42px;
    }

    .hero-counter {
        bottom: 8px;
    }

    .about-preview,
    #faq-section-9.neat-faq,
    #neat-section-10 {
        height: auto;
        min-height: 520px;
        padding-block: 65px;
    }

    #neat-section-12 {
        height: auto;
        min-height: 0;
        padding-block: 65px;
    }
}

/* ------------------------------------------------------------------------
   TOUCH DEVICES
------------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    .brand:hover .brand-logo,
    .contact-button:hover,
    .hero-button:hover,
    .about-preview-button:hover,
    .services-preview-button:hover,
    .service-card:hover,
    .news-card:hover,
    .why-item:hover,
    .neat-faq-item:hover,
    .privacy-modal-close:hover,
    .terms-modal-close:hover,
    .cookie-actions button:hover,
    .neat-ai-launcher:hover {
        transform: none;
    }

    .service-card:hover img,
    .why-item-image:hover img {
        transform: none;
    }
}

/* ------------------------------------------------------------------------
   AI ASSISTANT — VIEWPORT-SAFE POSITIONING
------------------------------------------------------------------------ */
.neat-ai,
.neat-ai-launcher,
.neat-ai-panel,
.neat-ai-notification {
    max-width: calc(100vw - 16px);
}

@media (max-width: 650px) {
    .neat-ai {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    .neat-ai-launcher {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 58px;
        height: 58px;
    }

    .neat-ai-panel {
        left: 8px;
        right: 8px;
        bottom: 80px;
        width: auto;
        max-width: none;
        height: min(620px, calc(100svh - 96px));
        max-height: calc(100svh - 96px);
        max-height: calc(100dvh - 96px);
    }

    .neat-ai-notification {
        right: 66px;
        bottom: max(6px, env(safe-area-inset-bottom));
        width: min(245px, calc(100vw - 82px));
    }
}

@media (max-width: 380px) {
    .neat-ai-launcher {
        width: 54px;
        height: 54px;
        right: 8px;
    }

    .neat-ai-panel {
        left: 6px;
        right: 6px;
        bottom: 70px;
        height: min(600px, calc(100svh - 82px));
        max-height: calc(100dvh - 82px);
    }

    .neat-ai-notification {
        right: 62px;
        width: min(220px, calc(100vw - 76px));
    }
}

/* ------------------------------------------------------------------------
   SAFE AREAS
------------------------------------------------------------------------ */
@supports (padding: max(0px)) {
    .site-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .site-footer {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    .cookie-banner {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------------------------
   REDUCED MOTION — FINAL
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-background.slide-active .hero-slide-current,
    .hero-background.slide-active .hero-slide-next {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------------
   PRINT
------------------------------------------------------------------------ */
@media print {
    html,
    body {
        width: 100%;
        max-width: none;
        overflow: visible !important;
    }

    section,
    .site-footer {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}