:root {

    --light: #d6dde1;
    --soft: #c0d5d6;
    --aqua: #9ad6d5;
    --blue: #8dbacc;
    --teal: #78b2ba;

    --dark: #10282e;
    --dark-2: #0b1d22;

    --text: #193238;
    --muted: #587077;

    --white: #ffffff;

    --border: rgba(120,178,186,.25);

    --shadow:
        0 25px 70px rgba(16,40,46,.13);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

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

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            #f8fbfc,
            var(--light),
            #eef8f8
        );

    overflow-x: hidden;
}


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


.background-grid {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -2;

    opacity: .28;

    background-image:

        linear-gradient(
            rgba(120,178,186,.16) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(120,178,186,.16) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


/* HEADER */

.header {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 82px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 6%;

    background:
        rgba(248,251,252,.78);

    backdrop-filter: blur(20px);

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


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

    font-size: 18px;
}


.logo span {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: var(--aqua);

    background: var(--dark);

    box-shadow:
        0 10px 25px rgba(16,40,46,.2);
}


.navigation {

    display: flex;

    align-items: center;

    gap: 23px;

    font-size: 13px;

    font-weight: 700;
}


.navigation a {

    opacity: .7;

    transition: .3s;
}


.navigation a:hover,
.navigation a.active {

    opacity: 1;

    color: #467e87;
}


.navigation .contact-link {

    padding: 11px 17px;

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

    border-radius: 50px;

    opacity: 1;
}


.menu-toggle {

    display: none;

    border: 0;

    background: none;

    font-size: 25px;

    cursor: pointer;
}


/* HERO */

.hero {

    width: min(1180px,88%);

    min-height:
        calc(100vh - 82px);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 40px;
}


.eyebrow {

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #4e838b;
}


.hero h1,
.page-hero h1 {

    margin: 0 0 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(45px,6vw,78px);

    line-height: .98;

    letter-spacing: -3px;
}


.hero h1 span {

    color: #4b8991;
}


.hero-content > p {

    max-width: 720px;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.8;
}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin: 32px 0;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

    transition: .3s;

    cursor: pointer;
}


.btn-primary {

    background: var(--dark);

    color: white;

    box-shadow:
        0 15px 35px rgba(16,40,46,.2);
}


.btn-primary:hover {

    transform:
        translateY(-4px);

    background: #28505a;
}


.btn-outline {

    border:
        1px solid rgba(16,40,46,.25);
}


.btn-outline:hover {

    background: white;

    transform:
        translateY(-4px);
}


.hero-stats {

    display: flex;

    gap: 35px;
}


.hero-stats strong {

    display: block;

    font-family:
        "Space Grotesk";

    font-size: 20px;
}


.hero-stats span {

    font-size: 12px;

    color: var(--muted);
}


/* ORB */

.technology-orb {

    height: 560px;

    position: relative;

    display: grid;

    place-items: center;
}


.orb {

    width: 285px;

    height: 285px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #eaffff,
            var(--aqua) 28%,
            var(--teal) 70%,
            #508892
        );

    box-shadow:

        0 0 110px
        rgba(120,178,186,.5),

        inset -30px -35px 60px
        rgba(16,40,46,.17);

    animation:
        floating 6s ease-in-out infinite;
}


.orb-ring {

    position: absolute;

    border:
        1px solid
        rgba(78,131,139,.3);

    border-radius: 50%;
}


.ring-one {

    width: 350px;

    height: 350px;

    animation:
        rotate 16s linear infinite;
}


.ring-two {

    width: 450px;

    height: 200px;

    transform:
        rotate(30deg);

    animation:
        rotate 21s linear infinite;
}


.ring-three {

    width: 250px;

    height: 510px;

    transform:
        rotate(-30deg);

    animation:
        rotate 25s linear infinite;
}


.floating-card {

    position: absolute;

    padding: 15px 18px;

    border-radius: 14px;

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

    backdrop-filter:
        blur(15px);

    border:
        1px solid white;

    box-shadow:
        var(--shadow);

    font-size: 13px;

    font-weight: 800;
}


.floating-card strong {

    margin-left: 12px;

    color: var(--teal);
}


.card-one {

    top: 20%;

    right: 2%;

    animation:
        floating 5s ease-in-out infinite;
}


.card-two {

    bottom: 23%;

    left: 2%;

    animation:
        floating 7s ease-in-out infinite reverse;
}


.card-three {

    top: 57%;

    right: -3%;

    animation:
        floating 6s ease-in-out infinite;
}


/* SECTIONS */

.section {

    width: min(1180px,88%);

    margin: auto;

    padding: 110px 0;
}


.section-title {

    max-width: 780px;

    margin-bottom: 45px;
}


.section-title h2,
.section h2,
.philosophy h2,
.cta h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 1.08;

    letter-spacing: -2px;

    margin: 0 0 18px;
}


.section-title p,
.section > p {

    color: var(--muted);

    line-height: 1.8;
}


/* CARDS */

.cards {

    display: grid;

    gap: 18px;
}


.cards.four {

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


.cards.three {

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


.service-card,
.long-card {

    position: relative;

    overflow: hidden;

    padding: 30px;

    border-radius: 20px;

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

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

    box-shadow:
        0 15px 45px
        rgba(16,40,46,.08);

    transition:
        .35s ease;
}


.service-card:hover,
.long-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);
}


.service-card::before,
.long-card::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -70px;

    bottom: -80px;

    border-radius: 50%;

    background:
        var(--aqua);

    opacity: .16;
}


.service-card > span,
.long-card > span {

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    color: #538a92;
}


.service-card h3 {

    margin-top: 40px;

    font-family:
        "Space Grotesk";

    font-size: 22px;
}


.service-card p,
.long-card p {

    color: var(--muted);

    line-height: 1.75;
}


.service-card a {

    color: #477f87;

    font-size: 13px;

    font-weight: 800;
}


/* PHILOSOPHY */

.philosophy {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    padding:
        85px 6%;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--dark),
            var(--dark-2)
        );
}


.philosophy .eyebrow {

    color: var(--aqua);
}


.philosophy p {

    color: var(--soft);

    line-height: 1.8;

    font-size: 17px;
}


/* SPLIT */

.split {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;
}


.feature-list > div {

    display: flex;

    gap: 20px;

    padding: 22px 0;

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


.feature-list b {

    color: #4c8790;
}


.feature-list p {

    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}


/* PAGE HERO */

.page-hero {

    width: min(1180px,88%);

    margin: auto;

    padding:
        115px 0 65px;
}


.page-hero h1 {

    max-width: 950px;
}


.lead {

    max-width: 800px;

    color: var(--muted);

    font-size: 19px;

    line-height: 1.8;
}


/* CONTENT */

.inner-content {

    padding-top: 20px;
}


.inner-content h2 {

    margin-top: 60px;
}


.inner-content > p {

    max-width: 900px;

    color: var(--muted);

    line-height: 1.85;

    font-size: 16px;
}


.long-card {

    margin-bottom: 20px;
}


.long-card h2 {

    font-family:
        "Space Grotesk";

    font-size: 30px;

    margin:
        20px 0 10px;
}


/* TIMELINE */

.timeline {

    display: grid;

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

    gap: 18px;
}


.timeline > div {

    padding: 30px;

    border-left:
        3px solid var(--teal);

    border-radius:
        0 18px 18px 0;

    background:
        rgba(255,255,255,.6);
}


.timeline b {

    color: #4d858e;

    font-size: 14px;
}


.timeline h2 {

    font-family:
        "Space Grotesk";

    margin: 10px 0;
}


.timeline p {

    color: var(--muted);

    line-height: 1.7;
}


/* INSIGHTS */

.insight-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


/* CONTACT */

.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 70px;
}


.contact-info h2 {

    font-family:
        "Space Grotesk";

    font-size: 42px;
}


.contact-item {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 18px 0;

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


.contact-item b {

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #4d838b;
}


.contact-item span,
.contact-item a {

    color: var(--muted);
}


.contact-form {

    padding: 32px;

    border-radius: 22px;

    border:
        1px solid white;

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

    box-shadow:
        var(--shadow);
}


.contact-form label {

    display: block;

    margin-bottom: 18px;

    font-size: 12px;

    font-weight: 800;
}


input,
textarea,
select {

    width: 100%;

    margin-top: 8px;

    padding: 14px;

    border-radius: 10px;

    border:
        1px solid rgba(16,40,46,.15);

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

    font:
        inherit;

    outline: none;
}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--teal);

    box-shadow:
        0 0 0 4px
        rgba(120,178,186,.13);
}


#formStatus {

    color: #4c828a;

    font-size: 13px;
}


/* CTA */

.cta {

    width: min(1180px,88%);

    margin: auto;

    padding:
        100px 20px;

    text-align: center;
}


.cta h2 {

    max-width: 800px;

    margin:
        auto auto 30px;
}


/* FOOTER */

.footer {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1.3fr 1fr;

    gap: 40px;

    padding:
        65px 6%;

    background:
        var(--dark-2);

    color:
        var(--soft);
}


.footer-logo {

    color: white;

    margin-bottom: 16px;
}


.footer p {

    max-width: 390px;

    color: #91adb2;

    line-height: 1.7;
}


.footer h4 {

    color: white;

    margin-top: 0;
}


.footer a,
.footer span {

    display: block;

    margin:
        10px 0;

    font-size: 13px;

    color: #9bb9bd;
}


.footer a:hover {

    color: var(--aqua);
}


/* ANIMATIONS */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);
}


@keyframes floating {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-16px);
    }
}


@keyframes rotate {

    from {

        transform:
            rotate(0);
    }

    to {

        transform:
            rotate(360deg);
    }
}


/* TABLET */

@media(max-width: 1000px) {

    .navigation {

        gap: 13px;

    }

    .cards.four {

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

}


/* MOBILE */

@media(max-width: 850px) {

    .menu-toggle {

        display: block;
    }


    .navigation {

        position: absolute;

        top: 82px;

        left: 0;

        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 20px 6%;

        background:
            rgba(248,251,252,.97);

        backdrop-filter:
            blur(20px);

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


    .navigation.open {

        display: flex;
    }


    .navigation a {

        padding: 10px;
    }


    .hero {

        grid-template-columns:
            1fr;

        padding:
            70px 0;
    }


    .technology-orb {

        height: 400px;
    }


    .split,
    .philosophy,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .timeline,
    .insight-grid {

        grid-template-columns:
            1fr;
    }


    .footer {

        grid-template-columns:
            1fr 1fr;
    }

}


/* SMALL MOBILE */

@media(max-width: 600px) {

    .cards.four,
    .cards.three {

        grid-template-columns:
            1fr;
    }


    .footer {

        grid-template-columns:
            1fr;
    }


    .hero h1,
    .page-hero h1 {

        font-size: 43px;

        letter-spacing:
            -2px;
    }


    .hero-buttons {

        flex-direction:
            column;
    }


    .hero-stats {

        flex-wrap:
            wrap;
    }


    .orb {

        width: 220px;

        height: 220px;
    }


    .ring-one {

        width: 280px;

        height: 280px;
    }


    .ring-two {

        width: 330px;

        height: 160px;
    }


    .ring-three {

        height: 380px;
    }


    .floating-card {

        font-size:
            11px;
    }


    .section {

        padding:
            75px 0;
    }

}