:root {
    --navy: #061525;
    --navy2: #0a2239;
    --blue: #0785f5;
    --cyan: #38c5ff;
    --ink: #0a1826;
    --muted: #667789;
    --line: #dce6ed;
    --soft: #f3f7fa;
    --white: #fff;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Manrope, sans-serif;
    color: var(--ink);
}

a {
    text-decoration: none;
}


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

.navbar {
    padding: 18px 0;
    transition: .3s;
    background: linear-gradient(#04111fe8, transparent);
}

.navbar.scrolled {
    padding: 10px 0;
    background: #051422f7;
    box-shadow: 0 10px 35px #0003;
}

.navbar-brand,
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: Space Grotesk;
}

.navbar-brand small,
.footer-brand small {
    display: block;
    font: 700 8px Manrope;
    letter-spacing: 2px;
    color: #8da4b7;
}

.brand-mark {
    width: 40px;
    height: 40px;
    border: 1px solid #38c5ff77;
    display: grid;
    place-items: center;
    color: var(--cyan);
    transform: skew(-7deg);
}

.nav-link {
    color: #dbe7ef !important;
    font-size: 12px;
    font-weight: 700;
    margin: 0 5px;
}


/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-menu {
    background: #081b2c;
    border: 1px solid #17334a;
    border-radius: 3px;
    padding: 8px;
}

.dropdown-item {
    color: #cbd9e4;
    font-size: 12px;
    padding: 10px 14px;
}

.dropdown-item:hover {
    background: #0e2b44;
    color: #fff;
}


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

.btn {
    border-radius: 3px;
    font-weight: 800;
    font-size: 12px;
    padding: 13px 20px;
}

.btn-brand {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow: 0 10px 30px #087df13d;
}

.btn-brand:hover {
    color: #fff;
    transform: translateY(-1px);
}


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

.home-hero,
.inner-hero {
    background:
        radial-gradient(
            circle at 80% 45%,
            #123f67 0,
            #071b2e 30%,
            #030c16 72%
        );

    color: #fff;
    position: relative;
    overflow: hidden;
}

.min-vh-70 {
    min-height: 70vh;
}

.grid-bg {
    position: absolute;
    inset: 0;
    opacity: .14;

    background-image:
        linear-gradient(#4eb5ff33 1px, transparent 1px),
        linear-gradient(90deg, #4eb5ff33 1px, transparent 1px);

    background-size: 70px 70px;
}

.orb {
    position: absolute;
    width: 650px;
    height: 650px;
    border: 1px solid #38c5ff22;
    border-radius: 50%;
    right: -120px;
    top: 15%;

    box-shadow:
        0 0 0 110px #38c5ff08,
        0 0 0 220px #38c5ff05;
}

.eyebrow,
.section-kicker {
    font-size: 10px;
    letter-spacing: 2.4px;
    font-weight: 800;
    color: #51c9ff;
    margin-top: 50px;
    margin-bottom: 18px;
}

.home-hero h1,
.inner-hero h1 {
    font: 700 clamp(48px, 6vw, 88px) / .98 Space Grotesk;
    letter-spacing: -3px;
}

.inner-hero h1 {
    font-size: clamp(44px, 5vw, 72px);
}

.home-hero h1 span,
.inner-hero h1 span {
    color: transparent;
    -webkit-text-stroke: 1px #62cfff;
}

.home-hero p,
.inner-hero p {
    font-size: 18px;
    line-height: 1.8;
    color: #b2c5d4;
    max-width: 800px;
    margin: 28px 0;
}


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

.hero-stats {
    display: flex;
    gap: 55px;
    border-top: 1px solid #ffffff1c;
    margin-top: 55px;
    padding-top: 25px;
    max-width: 760px;
}

.hero-stats div {
    display: flex;
    flex-direction: column;
}

.hero-stats b {
    font: 700 27px Space Grotesk;
}

.hero-stats small {
    font-size: 8px;
    letter-spacing: 1.4px;
    color: #8098aa;
}

.hero-symbol {
    width: 270px;
    height: 270px;
    border: 1px solid #4fc8ff3b;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto;

    box-shadow:
        0 0 0 55px #4fc8ff0b,
        0 0 0 110px #4fc8ff08;
}

.hero-symbol i {
    font-size: 75px;
    color: #55caff;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding: 105px 0;
}

.soft {
    background: var(--soft);
}

h2 {
    font: 700 clamp(37px, 4vw, 56px) / 1.06 Space Grotesk;
    letter-spacing: -2px;
}

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

.lead-copy {
    font-size: 20px;
    line-height: 1.7;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {
    display: block;
    height: 100%;
    padding: 35px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: .3s;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px #102f4a16;
    border-color: transparent;
}

.service-card > i {
    font-size: 27px;
    color: var(--blue);
    margin-bottom: 32px;
}

.service-card h3,
.info-card h3,
.case-card h3 {
    font: 700 23px Space Grotesk;
}

.service-card p,
.info-card p,
.case-card p {
    color: var(--muted);
    line-height: 1.7;
}

.service-card span {
    font-size: 11px;
    font-weight: 800;
}

.service-card span i {
    margin-left: 8px;
    color: var(--blue);
}


/* =========================================================
   DARK SECTION
========================================================= */

.dark-section {
    padding: 105px 0;
    background: linear-gradient(125deg, #05111e, #09243b);
    color: #fff;
}

.dark-section p {
    color: #9fb4c4;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   TECH VISUAL
========================================================= */

.tech-visual {
    width: 320px;
    height: 320px;
    position: relative;
    display: grid;
    place-items: center;
    margin: auto;
}

.tech-visual > i {
    font-size: 72px;
    color: #4cc8ff;
}

.ring {
    position: absolute;
    border: 1px solid #3fc2ff32;
    border-radius: 50%;
}

.r1 {
    inset: 35px;
}

.r2 {
    inset: 0;
}

.r3 {
    inset: -45px;
}


/* =========================================================
   SEGMENTS
========================================================= */

.segments {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid var(--line);
    margin-top: 50px;
}

.segments div {
    padding: 38px 12px;
    text-align: center;
    border-right: 1px solid var(--line);
    font-size: 11px;
    font-weight: 800;
}

.segments div:last-child {
    border: 0;
}

.segments i {
    display: block;
    font-size: 27px;
    color: var(--blue);
    margin-bottom: 15px;
}


/* =========================================================
   INFO CARDS
========================================================= */

.max-head {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.info-card {
    height: 100%;
    padding: 32px;
    border: 1px solid var(--line);
}

.info-card > i {
    font-size: 24px;
    color: var(--blue);
    margin-bottom: 25px;
}


/* =========================================================
   STEPS
========================================================= */

.steps {
    border: 1px solid #ffffff1c;
}

.steps div {
    padding: 20px;
    border-bottom: 1px solid #ffffff14;
    font-size: 13px;
}

.steps div:last-child {
    border: 0;
}

.steps b {
    color: #47c5ff;
    margin-right: 20px;
}


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

.values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 35px;
    border: 1px solid var(--line);
}

.values div {
    padding: 25px;
    border: 1px solid var(--line);
    display: flex;
    gap: 15px;
}

.values b {
    color: var(--blue);
}


/* =========================================================
   CASES
========================================================= */

.case-note {
    display: flex;
    gap: 25px;
    background: #eaf4fb;
    padding: 30px;
}

.case-note > i {
    font-size: 30px;
    color: var(--blue);
}

.case-placeholder {
    height: 220px;
    background: linear-gradient(135deg, #0b2034, #123c60);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
}

.case-placeholder i {
    font-size: 38px;
    color: #4cbcf5;
}

.case-card {
    border: 1px solid var(--line);
    padding: 15px 15px 25px;
}

.case-card small {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--blue);
    font-weight: 800;
}


/* =========================================================
   NORMS
========================================================= */

.norm-card {
    padding: 35px;
    border: 1px solid var(--line);
    height: 100%;
}

.norm-card b {
    font: 700 22px Space Grotesk;
}

.norm-card p {
    margin: 10px 0 0;
    color: var(--muted);
}


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

.contact-list {
    margin-top: 35px;
}

.contact-list > a,
.contact-list > div {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.contact-list i {
    width: 45px;
    height: 45px;
    border: 1px solid #cad9e4;
    display: grid;
    place-items: center;
    color: var(--blue);
}

.contact-list small {
    display: block;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #7d8d99;
}


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

.contact-form {
    background: #fff;
    padding: 40px;
    box-shadow: 0 20px 60px #102f4a12;
}

.contact-form label {
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border-radius: 2px;
    padding: 13px;
    border-color: #dbe5ec;
    background: #fafcfd;
}


/* =========================================================
   PRE-FOOTER
========================================================= */

.prefooter {
    padding: 65px 0;
    background: linear-gradient(120deg, #087ff0, #32bfff);
    color: #fff;
}

.prefooter small {
    font-size: 9px;
    letter-spacing: 2px;
}

.prefooter h2 {
    font-size: 38px;
    margin: 8px 0 0;
}


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

footer {
    background: #030d17;
    color: #8fa4b4;
    padding: 65px 0 25px;
}

footer p {
    font-size: 12px;
    line-height: 1.8;
}

footer small {
    display: block;
    font-size: 8px;
    letter-spacing: 2px;
    color: #45bfff;
    margin-bottom: 13px;
}

footer a {
    display: block;
    color: #91a5b5;
    font-size: 12px;
    margin: 9px 0;
}

.footer-bottom {
    border-top: 1px solid #172532;
    margin-top: 35px;
    padding-top: 20px;
    font-size: 10px;
}


/* =========================================================
   WHATSAPP FLOAT
========================================================= */

.whatsapp-float {
    position: fixed;
    z-index: 60;
    right: 22px;
    bottom: 22px;
    background: #20b65a;
    color: #fff;
    padding: 13px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 30px #0003;
}

.whatsapp-float i {
    font-size: 18px;
    margin-right: 7px;
}


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

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: .65s;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .navbar {
        background: #051422;
    }

    .section,
    .dark-section {
        padding: 75px 0;
    }

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

    .hero-stats {
        gap: 20px;
    }

    .home-hero h1,
    .inner-hero h1 {
        letter-spacing: -2px;
    }

    .hero-symbol {
        display: none;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 576px) {

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

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-stats b {
        font-size: 21px;
    }

    .hero-stats small {
        font-size: 7px;
    }

    .contact-form {
        padding: 24px;
    }

    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        padding: 0;
        display: grid;
        place-items: center;
    }

    .whatsapp-float i {
        margin: 0;
    }
}