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

:root {

    --navy: #071d2b;
    --navy-light: #0d2a3a;
    --navy-card: #0b2535;

    --green: #00e2a8;
    --green-dark: #00c995;

    --white: #ffffff;
    --off-white: #f4f7f8;

    --text-muted: #a8bac3;

    --border: rgba(255, 255, 255, 0.12);

    --container: 1200px;

}


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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    color: var(--white);
    background: var(--navy);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.container {

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}


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

.site-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

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


.header-inner {

    min-height: 82px;

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

    gap: 40px;
}


.brand {

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

    gap: 12px;

    font-weight: 700;
}


.brand-mark {

    display: flex;

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

    width: 280px;
    height: 96px;
}


.brand-mark img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

@media (max-width: 600px) {

    .brand-mark {
        width: 210px;
        height: 72px;
    }

}


.brand-name {

    font-size: 17px;
    letter-spacing: -0.02em;
}


.main-nav {

    display: flex;
    align-items: center;

    gap: 34px;
}


.main-nav > a:not(.button) {

    color: #d9e3e7;

    font-size: 14px;
    font-weight: 500;

    transition:
        color 0.2s ease;
}


.main-nav > a:not(.button):hover {
    color: var(--green);
}


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

.button {

    display: inline-flex;

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

    gap: 12px;

    min-height: 52px;

    padding: 0 25px;

    border: 1px solid var(--green);
    border-radius: 7px;

    background: var(--green);

    color: var(--navy);

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

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


.button:hover {

    transform: translateY(-2px);

    background: var(--green-dark);
    border-color: var(--green-dark);
}


.button-small {

    min-height: 42px;

    padding-inline: 20px;
}


.button-outline {

    background: transparent;

    color: var(--white);

    border-color:
        rgba(255, 255, 255, 0.32);
}


.button-outline:hover {

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

    border-color:
        rgba(255, 255, 255, 0.6);
}


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

.hero {

    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        155px 0
        95px;

    background:

        radial-gradient(
            circle at 80% 45%,
            rgba(0, 226, 168, 0.08),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #071d2b 0%,
            #071d2b 55%,
            #0a2535 100%
        );
}


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.04;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.5) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.5) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;
}


.hero-inner {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.72fr);

    align-items: center;

    gap: 95px;
}


.hero-content {
    max-width: 690px;
}


.hero-location {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: var(--green);

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

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(0, 226, 168, 0.1);
}


.hero h1 {

    max-width: 720px;

    font-size:
        clamp(
            52px,
            5.5vw,
            82px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.hero h1 span {

    display: block;

    color: var(--green);
}


.hero-intro {

    max-width: 630px;

    margin-top: 28px;

    color: var(--text-muted);

    font-size: 18px;

    line-height: 1.75;
}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}


.hero-trust {

    display: flex;

    align-items: stretch;

    gap: 25px;

    margin-top: 48px;

    padding-top: 28px;

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


.trust-item {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.trust-item strong {

    color: var(--white);

    font-size: 14px;
}


.trust-item span {

    color: #8097a2;

    font-size: 11px;
}


.trust-divider {

    width: 1px;

    background: var(--border);
}


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

.hero-card {

    position: relative;

    overflow: hidden;

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

    border-radius: 14px;

    background:
        rgba(11, 37, 53, 0.82);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(15px);
}


.hero-card::before {

    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(0, 226, 168, 0.08);

    filter: blur(10px);
}


.hero-card-top {

    min-height: 68px;

    display: flex;

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

    padding: 0 28px;

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


.card-status {

    position: relative;

    padding-left: 14px;

    color: #c3d2d8;

    font-size: 12px;
}


.card-status::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    transform:
        translateY(-50%);

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);
}


.card-code {

    color: var(--green);

    font-weight: 800;
}


.hero-card-content {

    position: relative;

    z-index: 2;

    padding: 38px 32px 36px;
}


.card-eyebrow {

    margin-bottom: 12px;

    color: var(--green);

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

    letter-spacing: 0.11em;
}


.hero-card h2 {

    max-width: 380px;

    font-size: 27px;

    line-height: 1.2;

    letter-spacing: -0.035em;
}


.problem-list {

    display: grid;

    gap: 15px;

    margin-top: 29px;

    list-style: none;
}


.problem-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #b7c7ce;

    font-size: 13px;
}


.problem-list li span {

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    display: inline-flex;

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

    border-radius: 50%;

    background:
        rgba(0, 226, 168, 0.1);

    color: var(--green);

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


.hero-card-footer {

    display: flex;

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

    min-height: 78px;

    padding: 0 32px;

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

    background:
        rgba(255, 255, 255, 0.025);
}


.hero-card-footer span {

    color: #8198a3;

    font-size: 12px;
}


.hero-card-footer strong {

    color: var(--green);

    font-size: 28px;

    letter-spacing: -0.04em;
}


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

.menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.menu-toggle span {

    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: var(--white);

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


/* =========================================
   TEMP PLACEHOLDERS
========================================= */

.page-placeholder {
    min-height: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .hero {

        min-height: auto;

        padding:
            145px 0
            80px;
    }


    .hero-inner {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .hero-content {
        max-width: 760px;
    }


    .hero-card {
        max-width: 620px;
    }


    .menu-toggle {
        display: block;
    }


    .main-nav {

        position: absolute;

        top: 82px;
        left: 24px;
        right: 24px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 16px;

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

        border-radius: 10px;

        background: #092332;

        box-shadow:
            0 20px 50px
            rgba(0, 0, 0, 0.3);
    }


    .main-nav.is-open {
        display: flex;
    }


    .main-nav > a:not(.button) {

        padding: 14px 12px;

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


    .main-nav .button {
        margin-top: 12px;
    }

}


@media (max-width: 600px) {

    .container {

        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }


    .header-inner {
        min-height: 72px;
    }


    .brand-name {
        font-size: 14px;
    }


    .main-nav {
        top: 72px;
    }


    .hero {

        padding:
            125px 0
            60px;
    }


    .hero h1 {

        font-size:
            clamp(
                45px,
                14vw,
                62px
            );
    }


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


    .hero-actions {

        flex-direction: column;

        align-items: stretch;
    }


    .button {
        width: 100%;
    }


    .hero-trust {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 20px;
    }


    .trust-divider {
        display: none;
    }


    .hero-card-content {

        padding:
            30px 24px;
    }


    .hero-card-top,
    .hero-card-footer {

        padding-left: 24px;
        padding-right: 24px;
    }


    .hero-card-footer strong {
        font-size: 24px;
    }

}



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

.services-section {

    position: relative;

    padding:
        110px 0
        115px;

    overflow: hidden;

    background:
        #f4f7f8;

    color:
        var(--navy);
}


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

.section-heading {

    margin-bottom: 55px;
}


.section-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color:
        #008f72;

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

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.section-eyebrow span {

    width: 24px;
    height: 2px;

    background:
        var(--green-dark);
}


.section-heading-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap: 80px;
}


.section-heading h2 {

    max-width: 680px;

    font-size:
        clamp(
            40px,
            4.5vw,
            64px
        );

    line-height: 1;

    letter-spacing:
        -0.055em;

    font-weight: 800;
}


.section-heading h2 span {

    color:
        #00b98c;
}


.section-heading p {

    max-width: 470px;

    color:
        #60727b;

    font-size: 15px;

    line-height: 1.75;
}


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

.services-grid {

    display: grid;

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

    border-top:
        1px solid #d8e0e3;

    border-left:
        1px solid #d8e0e3;
}


.service-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 550px;

    padding:
        30px 27px
        27px;

    border-right:
        1px solid #d8e0e3;

    border-bottom:
        1px solid #d8e0e3;

    background:
        #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.service-card:hover {

    z-index: 2;

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(7, 29, 43, 0.09);
}


/* =========================================
   FEATURED CARD
========================================= */

.service-card-featured {

    background:
        var(--navy);

    color:
        var(--white);
}


.service-card-featured::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--green);
}


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

.service-card-top {

    min-height: 27px;

    display: flex;

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

    gap: 15px;
}


.service-number {

    color:
        #9babb2;

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

    letter-spacing:
        0.08em;
}


.service-card-featured
.service-number {

    color:
        #738d99;
}


.service-badge {

    padding:
        5px 9px;

    border-radius:
        50px;

    background:
        rgba(0, 226, 168, 0.12);

    color:
        var(--green);

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

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


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

.service-icon {

    width: 47px;
    height: 47px;

    display: inline-flex;

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

    margin-top: 30px;

    border:
        1px solid #d7e1e4;

    border-radius:
        8px;

    color:
        #009e7c;

    font-size: 17px;
    font-weight: 800;
}


.service-card-featured
.service-icon {

    border-color:
        rgba(255,255,255,0.15);

    background:
        rgba(0,226,168,0.06);

    color:
        var(--green);
}


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

.service-card h3 {

    margin-top: 25px;

    font-size: 21px;

    line-height: 1.2;

    letter-spacing:
        -0.035em;
}


.service-card > p {

    min-height: 105px;

    margin-top: 13px;

    color:
        #687981;

    font-size: 13px;

    line-height: 1.7;
}


.service-card-featured > p {

    color:
        #9eb0b8;
}


.service-list {

    display: grid;

    gap: 9px;

    margin:
        7px 0
        28px;

    list-style: none;
}


.service-list li {

    position: relative;

    padding-left: 16px;

    color:
        #52666f;

    font-size: 12px;
}


.service-list li::before {

    content: "";

    position: absolute;

    top: 9px;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #00b98c;
}


.service-card-featured
.service-list li {

    color:
        #b3c1c7;
}


/* =========================================
   PRICE
========================================= */

.service-price {

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: auto;

    padding-top: 22px;

    border-top:
        1px solid #e1e7e9;
}


.service-card-featured
.service-price {

    border-color:
        rgba(255,255,255,0.11);
}


.service-price > span {

    color:
        #85969e;

    font-size: 10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


.service-price strong {

    margin-top: 3px;

    font-size: 30px;

    line-height: 1;

    letter-spacing:
        -0.045em;
}


.service-card-featured
.service-price strong {

    color:
        var(--green);
}


.service-price small {

    color:
        #81949d;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0;
}


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

.service-link {

    display: flex;

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

    margin-top: 23px;

    color:
        #007e65;

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


.service-link span {

    font-size: 18px;

    transition:
        transform 0.2s ease;
}


.service-link:hover span {

    transform:
        translateX(5px);
}


.service-card-featured
.service-link {

    color:
        var(--green);
}


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

.services-footer {

    display: flex;

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

    gap: 40px;

    margin-top: 30px;

    padding:
        25px 28px;

    border:
        1px solid #d8e0e3;

    background:
        #eaf0f2;
}


.services-footer > div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.services-footer strong {

    font-size: 14px;
}


.services-footer span {

    color:
        #667981;

    font-size: 12px;
}


.button-dark {

    flex-shrink: 0;

    border-color:
        var(--navy);

    background:
        var(--navy);

    color:
        var(--white);
}


.button-dark:hover {

    border-color:
        var(--navy-light);

    background:
        var(--navy-light);
}


/* =========================================
   SERVICES RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    .services-grid {

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

}


@media (max-width: 760px) {

    .services-section {

        padding:
            80px 0;
    }


    .section-heading-grid {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .services-grid {

        grid-template-columns:
            1fr;
    }


    .service-card {

        min-height: auto;
    }


    .service-card > p {

        min-height: auto;
    }


    .service-list {

        margin-top: 22px;
    }


    .service-price {

        margin-top: 15px;
    }


    .services-footer {

        flex-direction: column;

        align-items: flex-start;
    }


    .services-footer
    .button {

        width: 100%;
    }

}



/* =========================================
   ABOUT
========================================= */

.about-section {

    position: relative;

    padding:
        120px 0;

    overflow: hidden;

    background:
        var(--navy);

    color:
        var(--white);
}


.about-section::after {

    content: "";

    position: absolute;

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

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        rgba(0, 226, 168, 0.045);

    filter:
        blur(20px);

    pointer-events: none;
}


.about-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(350px, 0.82fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 100px;
}


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

.about-image {

    position: relative;
}


.about-image::before {

    content: "";

    position: absolute;

    top: 25px;
    left: -25px;

    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(0, 226, 168, 0.3);

    border-radius:
        18px;

    pointer-events: none;
}


.about-image img {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius:
        18px;

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, 0.28);
}


.about-image-badge {

    position: absolute;

    z-index: 3;

    right: -30px;
    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 185px;

    padding:
        17px 20px;

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

    border-radius:
        10px;

    background:
        #0c2b3b;

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


.about-image-badge strong {

    color:
        var(--green);

    font-size: 29px;

    line-height: 1;

    letter-spacing:
        -0.05em;
}


.about-image-badge span {

    color:
        #aabcc4;

    font-size: 10px;

    line-height: 1.4;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}


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

.about-content
.section-eyebrow {

    color:
        var(--green);
}


.about-content h2 {

    max-width: 650px;

    font-size:
        clamp(
            40px,
            4.4vw,
            63px
        );

    line-height:
        1.02;

    letter-spacing:
        -0.055em;
}


.about-content h2 span {

    display: block;

    color:
        var(--green);
}


.about-content > p {

    max-width: 660px;

    margin-top: 20px;

    color:
        #94aab4;

    font-size: 14px;

    line-height:
        1.8;
}


.about-content
.about-lead {

    margin-top: 28px;

    color:
        #d6e0e4;

    font-size: 17px;

    line-height:
        1.75;
}


/* =========================================
   ABOUT SKILLS
========================================= */

.about-skills {

    display: grid;

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

    gap: 1px;

    margin:
        35px 0;

    overflow: hidden;

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

    border-radius:
        9px;

    background:
        rgba(255,255,255,0.09);
}


.about-skill {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 80px;

    padding:
        16px 18px;

    background:
        #092332;
}


.about-skill > span {

    width: 37px;
    height: 37px;

    flex:
        0 0 37px;

    display: flex;

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

    border:
        1px solid
        rgba(0,226,168,0.17);

    border-radius:
        7px;

    background:
        rgba(0,226,168,0.05);

    color:
        var(--green);

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


.about-skill div {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.about-skill strong {

    font-size: 12px;
}


.about-skill small {

    color:
        #748d98;

    font-size: 10px;
}


/* =========================================
   ABOUT RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .about-grid {

        grid-template-columns:
            1fr;

        gap: 75px;
    }


    .about-image {

        max-width: 580px;
    }

}


@media (max-width: 600px) {

    .about-section {

        padding:
            80px 0;
    }


    .about-image::before {

        top: 14px;
        left: -10px;
    }


    .about-image-badge {

        right: 15px;
        bottom: -25px;
    }


    .about-content {

        padding-top:
            15px;
    }


    .about-skills {

        grid-template-columns:
            1fr;
    }

}




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

.contact-section {

    padding:
        120px 0;

    background:
        #eef3f4;

    color:
        var(--navy);
}


.contact-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(450px, 1fr);

    align-items: center;

    gap: 110px;
}


.contact-content h2 {

    max-width: 590px;

    font-size:
        clamp(
            44px,
            5vw,
            70px
        );

    line-height: 0.98;

    letter-spacing:
        -0.06em;
}


.contact-content h2 span {

    display: block;

    color:
        #00aa82;
}


.contact-lead {

    max-width: 510px;

    margin-top: 26px;

    color:
        #61747d;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   CONTACT POINTS
========================================= */

.contact-points {

    display: grid;

    gap: 22px;

    margin-top: 40px;
}


.contact-point {

    display: flex;

    align-items: center;

    gap: 16px;
}


.contact-point-icon {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    display: flex;

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

    border:
        1px solid #cad7db;

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #009d79;

    font-size: 15px;
    font-weight: 800;
}


.contact-point > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.contact-point strong {

    font-size: 13px;
}


.contact-point span {

    color:
        #71838b;

    font-size: 11px;
}


/* =========================================
   DIRECT CONTACT
========================================= */

.contact-direct {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-top: 45px;

    padding-top: 25px;

    border-top:
        1px solid #d0dade;
}


.contact-direct > span {

    color:
        #82939a;

    font-size: 10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


.contact-direct a {

    color:
        var(--navy);

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


.contact-direct a:hover {

    color:
        #009d79;
}


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

.contact-form-wrap {

    border-radius:
        15px;

    background:
        var(--navy);

    box-shadow:
        0 35px 75px
        rgba(7,29,43,0.15);
}


.contact-form {

    padding:
        42px;
}


.form-heading {

    margin-bottom:
        30px;
}


.form-heading > span {

    color:
        var(--green);

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

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.form-heading h3 {

    margin-top: 5px;

    color:
        var(--white);

    font-size: 27px;

    letter-spacing:
        -0.035em;
}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}


.form-field {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom:
        17px;
}


.form-field label {

    color:
        #b9c8ce;

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


.form-field label span {

    margin-left: 4px;

    color:
        #607d89;

    font-weight: 400;
}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

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

    border-radius:
        6px;

    outline: none;

    background:
        #0c2939;

    color:
        var(--white);

    font-family:
        inherit;

    font-size: 13px;

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


.form-field input,
.form-field select {

    height: 48px;

    padding:
        0 14px;
}


.form-field textarea {

    min-height:
        130px;

    padding:
        13px 14px;

    resize:
        vertical;
}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        #587481;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(0,226,168,0.07);
}


.form-submit {

    width: 100%;

    margin-top:
        5px;

    border: 0;

    cursor: pointer;
}


.form-note {

    margin-top:
        13px;

    color:
        #617d88;

    font-size: 10px;

    text-align: center;
}


/* =========================================
   CONTACT RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .contact-grid {

        grid-template-columns:
            1fr;

        gap: 65px;
    }

}


@media (max-width: 600px) {

    .contact-section {

        padding:
            80px 0;
    }


    .form-row {

        grid-template-columns:
            1fr;
    }


    .contact-form {

        padding:
            30px 22px;
    }

}


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

.site-footer {

    position: relative;

    padding:
        75px 0
        25px;

    overflow: hidden;

    background:
        #051722;

    color:
        var(--white);

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


.site-footer::before {

    content: "";

    position: absolute;

    top: -220px;
    right: -150px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(0,226,168,0.035);

    pointer-events: none;
}


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

.footer-main {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.4fr
        0.65fr
        0.8fr
        1.25fr;

    gap: 65px;

    padding-bottom:
        55px;
}


.footer-brand p {

    max-width: 310px;

    margin-top: 20px;

    color:
        #708893;

    font-size: 12px;

    line-height: 1.75;
}


.footer-heading {

    display: block;

    margin-bottom: 17px;

    color:
        #66808b;

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

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


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

.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-links a {

    margin-bottom: 10px;

    color:
        #a5b6bd;

    font-size: 12px;

    transition:
        color 0.2s ease;
}


.footer-links a:hover {

    color:
        var(--green);
}


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

.footer-contact p {

    max-width: 290px;

    color:
        #708893;

    font-size: 12px;

    line-height: 1.65;
}


.footer-email {

    display: inline-block;

    margin:
        14px 0
        19px;

    color:
        var(--green);

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


.footer-email:hover {

    text-decoration:
        underline;
}


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

.footer-bottom {

    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 30px;

    padding-top:
        24px;

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

    color:
        #57717c;

    font-size: 10px;
}


.footer-legal {

    display: flex;

    align-items: center;

    gap: 25px;
}


.footer-legal a {

    color:
        #718791;
}


.footer-legal a:hover {

    color:
        var(--green);
}


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

@media (max-width: 950px) {

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            50px 70px;
    }

}


@media (max-width: 600px) {

    .site-footer {

        padding-top:
            60px;
    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap: 40px;
    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;
    }


    .footer-legal {

        flex-wrap: wrap;

        gap: 15px;
    }

}



/* =========================================
   FORM STATUS
========================================= */

.form-status {

    display: none;

    margin-top: 14px;

    padding: 11px 13px;

    border-radius: 6px;

    font-size: 11px;

    line-height: 1.5;
}


.form-status.is-info {

    display: block;

    border:
        1px solid
        rgba(0, 226, 168, 0.22);

    background:
        rgba(0, 226, 168, 0.07);

    color:
        #9debd5;
}


.form-status.is-success {

    display: block;

    border:
        1px solid
        rgba(0, 226, 168, 0.3);

    background:
        rgba(0, 226, 168, 0.1);

    color:
        #b6f5e3;
}


.form-status.is-error {

    display: block;

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

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

    color:
        #ffb1b1;
}


/* =========================================
   PRIVACY PAGE
========================================= */

.privacy-header {

    position: relative;

    background:
        var(--navy);

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


.privacy-page {

    min-height: 70vh;

    padding:
        95px 0
        110px;

    background:
        #f4f7f8;

    color:
        var(--navy);
}


.privacy-container {

    max-width:
        850px;
}


.privacy-page h1 {

    margin-top:
        12px;

    font-size:
        clamp(
            48px,
            7vw,
            76px
        );

    line-height: 1;

    letter-spacing:
        -0.06em;
}


.privacy-updated {

    margin-top:
        15px;

    color:
        #7a8b92;

    font-size:
        11px;
}


.privacy-content {

    margin-top:
        55px;
}


.privacy-content
.privacy-intro {

    margin-bottom:
        45px;

    color:
        #435b65;

    font-size:
        18px;

    line-height:
        1.8;
}


.privacy-content h2 {

    margin:
        40px 0
        12px;

    font-size:
        21px;

    letter-spacing:
        -0.025em;
}


.privacy-content p {

    margin-bottom:
        14px;

    color:
        #60747c;

    font-size:
        14px;

    line-height:
        1.85;
}


.privacy-content a {

    color:
        #009d79;

    font-weight:
        700;
}


.privacy-content a:hover {

    text-decoration:
        underline;
}


.privacy-footer {

    padding:
        0 0 25px;

    background:
        #051722;

    color:
        var(--white);
}


.privacy-footer
.footer-bottom {

    padding-top:
        25px;
}


@media (max-width: 600px) {

    .privacy-page {

        padding:
            70px 0
            80px;
    }


    .privacy-content {

        margin-top:
            40px;
    }


    .privacy-content
    .privacy-intro {

        font-size:
            16px;
    }

}