/* =========================================================
   OnGPS - STYLE.CSS
   ========================================================= */

/* =========================
   VARIÁVEIS
========================= */

:root {
    --primary: #0b63f6;
    --primary-dark: #0749ba;
    --green: #18c47d;

    --dark: #071526;
    --dark-2: #0c1d35;

    --text: #334259;
    --muted: #6e7b8f;

    --light: #f5f8fc;
    --white: #ffffff;
    --line: #e5ebf3;

    --shadow:
        0 18px 50px
        rgba(20, 41, 72, 0.12);

    --radius: 22px;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--white);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}


/* =========================
   ESTRUTURA GERAL
========================= */

.container {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}

.section {
    padding: 95px 0;
}

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


/* =========================
   TÍTULOS
========================= */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--primary);

    font-size: 0.82rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.eyebrow::before {
    content: "";

    width: 28px;
    height: 3px;

    border-radius: 10px;

    background: var(--green);
}

.title {
    max-width: 760px;

    color: var(--dark);

    font-size: clamp(
        2rem,
        4vw,
        3.35rem
    );

    line-height: 1.08;

    letter-spacing: -0.045em;

    font-weight: 900;
}

.copy {
    max-width: 720px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 1.04rem;
}

.center {
    text-align: center;

    margin-bottom: 48px;
}

.center .title,
.center .copy {
    margin-left: auto;
    margin-right: auto;
}


/* ========================= 
   BOTÕES 
========================= */ 

.btn { 
    min-height: 52px; 
    padding: 0 23px; 

    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 

    border-radius: 13px; 
    border: 1px solid transparent; 

    font-weight: 800; 
    text-decoration: none;

    transition: 0.25s ease; 
} 

.btn:hover { 
    transform: translateY(-2px); 
} 


/* BOTÃO AZUL - CONHECER PLANOS */

.btn-p { 
    background: var(--primary); 
    color: var(--white); 

    box-shadow: 
        0 12px 28px 
        rgba(11, 99, 246, 0.24); 
} 

.btn-p:hover { 
    background: var(--primary-dark); 
    color: var(--white);
} 


/* BOTÃO BRANCO */

.btn-o { 
    background: var(--white); 
    color: var(--dark); 

    border-color: var(--line); 
} 

.btn-o:hover { 
    color: var(--primary); 
    border-color: var(--primary); 
} 


/* BOTÃO WHATSAPP */

.btn-w { 
    background: #25D366; 
    color: #ffffff; 

    border-color: #25D366;

    box-shadow: 
        0 12px 28px 
        rgba(37, 211, 102, 0.22);
} 

.btn-w i { 
    color: #ffffff; 
} 

.btn-w:hover { 
    background: #1ebe5d; 
    color: #ffffff; 

    border-color: #1ebe5d;
} 

.btn-w:hover i { 
    color: #ffffff; 
}


/* =========================
   BARRA SUPERIOR
========================= */

.top {
    background: var(--dark);

    color: #cbd7e7;

    font-size: 0.82rem;
}

.topin {
    min-height: 37px;

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

    gap: 20px;
}

.topin > div {
    display: flex;
    align-items: center;

    gap: 24px;
}

.top i {
    margin-right: 7px;

    color: var(--green);
}

.top a:hover {
    color: var(--white);
}


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

header {
    position: sticky;
    top: 0;

    z-index: 1000;

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

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid
        rgba(
            229,
            235,
            243,
            0.85
        );
}

nav {
    min-height: 78px;

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

    gap: 30px;
}


/* LOGO */

.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--dark);

    font-size: 1.46rem;
    font-weight: 900;

    letter-spacing: -0.05em;
}

.brand span {
    color: var(--primary);
}

.mark {
    position: relative;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #3389ff
        );

    color: var(--white);

    box-shadow:
        0 9px 22px
        rgba(11, 99, 246, 0.2);
}

.mark::after {
    content: "";

    position: absolute;

    right: -2px;
    top: -2px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    border:
        3px solid
        var(--green);

    background: var(--white);
}


/* LINKS */

.links {
    display: flex;
    align-items: center;

    gap: 28px;
}

.links a {
    color: #3d4b61;

    font-size: 0.91rem;
    font-weight: 700;

    transition: 0.2s;
}

.links a:hover {
    color: var(--primary);
}


/* AÇÕES */

.actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.menu {
    display: none;

    width: 46px;
    height: 46px;

    background: var(--white);

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

    border-radius: 12px;

    color: var(--dark);

    font-size: 1.2rem;
}


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

.hero {
    position: relative;

    min-height: 690px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:

        radial-gradient(
            circle at 78% 25%,
            rgba(38, 127, 255, 0.24),
            transparent 26%
        ),

        radial-gradient(
            circle at 88% 80%,
            rgba(18, 194, 124, 0.14),
            transparent 22%
        ),

        linear-gradient(
            120deg,
            #061222 0%,
            #0a1d37 60%,
            #0b2850 100%
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.13;

    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:
        48px 48px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black
        );
}

.heroin {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items: center;

    gap: 60px;

    padding: 80px 0;
}

.hero .eyebrow {
    color: #9ec6ff;
}

.hero h1 {
    max-width: 720px;

    font-size: clamp(
        2.8rem,
        5.3vw,
        5rem
    );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.06em;
}

.hero h1 span {
    color: #69a8ff;
}

.hero p {
    max-width: 650px;

    margin:
        24px
        0
        30px;

    color: #c8d4e5;

    font-size: 1.08rem;
}


/* BOTÕES HERO */

.heroact {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


/* PROVAS */

/* PROVAS */

.proofs {
    display: grid;
    grid-template-columns: max-content max-content;

    column-gap: 28px;
    row-gap: 28px;

    margin-top: 35px;
}

.proof {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #dce7f7;

    font-size: 0.9rem;
    font-weight: 700;
}

.proof b {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

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

    color: var(--green);
}


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

.visual {
    position: relative;

    min-height: 470px;
}

.map {
    position: absolute;

    inset:
        18px
        0
        18px
        20px;

    overflow: hidden;

    border-radius: 32px;

    border:
        7px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    background:
        linear-gradient(
            145deg,
            #f7fbff,
            #e7f1ff
        );

    box-shadow:
        0 32px 70px
        rgba(0, 0, 0, 0.32);
}

.grid {
    position: absolute;

    inset: 0;

    opacity: 0.35;

    background-image:

        linear-gradient(
            30deg,
            transparent 47%,
            #a9c4e9 48%,
            #a9c4e9 50%,
            transparent 51%
        ),

        linear-gradient(
            120deg,
            transparent 47%,
            #c2d6ef 48%,
            #c2d6ef 50%,
            transparent 51%
        );

    background-size:
        90px 90px;
}

.road {
    position: absolute;

    height: 64px;

    background: #cddced;

    border:
        12px solid
        #e8f0f8;

    border-left: none;
    border-right: none;

    transform-origin: center;
}

.r1 {
    width: 620px;

    left: -95px;
    top: 205px;

    transform:
        rotate(-22deg);
}

.r2 {
    width: 520px;
    height: 58px;

    left: 80px;
    top: 180px;

    transform:
        rotate(63deg);
}


/* PIN */

.pin {
    position: absolute;

    width: 45px;
    height: 45px;

    border-radius:
        50%
        50%
        50%
        12%;

    background:
        var(--primary);

    transform:
        rotate(-45deg);

    display: grid;
    place-items: center;

    box-shadow:
        0 10px 26px
        rgba(11, 99, 246, 0.35);
}

.pin::after {
    content: "";

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: var(--white);
}

.p1 {
    left: 58%;
    top: 37%;
}

.p2 {
    left: 26%;
    top: 65%;

    transform:
        rotate(-45deg)
        scale(0.72);

    opacity: 0.65;
}


/* CARTÃO VEÍCULO */

.track {
    position: absolute;

    right: -16px;
    top: 45px;

    width: 220px;

    padding: 18px;

    border-radius: 20px;

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

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

.trh {
    display: flex;
    align-items: center;

    gap: 12px;
}

.carico {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #edf5ff;

    color: var(--primary);

    font-size: 1.25rem;
}

.track h4 {
    font-size: 0.9rem;
}

.track small {
    color: var(--muted);
}

.status {
    margin-top: 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #15895f;

    font-size: 0.8rem;
    font-weight: 800;
}

.dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(18, 194, 124, 0.13);
}


/* VELOCIDADE */

.speed {
    position: absolute;

    left: -10px;
    bottom: 45px;

    min-width: 170px;

    padding:
        16px
        20px;

    border-radius: 18px;

    background: var(--dark);

    color: var(--white);

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

.speed span {
    color: #9fb0c9;

    font-size: 0.74rem;
}

.speed strong {
    display: block;

    margin-top: 2px;

    font-size: 1.65rem;
}

.speed em {
    color: #8fdcbd;

    font-size: 0.7rem;

    font-style: normal;
}


/* =========================
   ESTATÍSTICAS
========================= */

.statswrap {
    position: relative;

    z-index: 20;

    margin-top: -55px;
}

.stats {
    display: grid;

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

    overflow: hidden;

    background: var(--white);

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

    border-radius: 22px;

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

.stat {
    padding: 28px;

    border-right:
        1px solid
        var(--line);
}

.stat:last-child {
    border-right: none;
}

.stat strong {
    display: block;

    color: var(--dark);

    font-size: 1.55rem;

    letter-spacing: -0.04em;
}

.stat span {
    color: var(--muted);

    font-size: 0.87rem;
}


/* =========================
   QUEM SOMOS
========================= */

.about {
    display: grid;

    grid-template-columns:
        0.92fr
        1.08fr;

    align-items: center;

    gap: 78px;
}

.aboutpic {
    position: relative;

    min-height: 515px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #0d1e35,
            #0a67f7
        );

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

.aboutpic::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -120px;
    top: -90px;

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

    border-radius: 50%;

    box-shadow:

        0 0 0 45px
        rgba(
            255,
            255,
            255,
            0.03
        ),

        0 0 0 90px
        rgba(
            255,
            255,
            255,
            0.025
        );
}

.signal {
    position: absolute;

    left: 50%;
    top: 29%;

    transform:
        translateX(-50%);

    color: #78b4ff;

    font-size: 3rem;
}

.bigcar {
    position: absolute;

    left: 50%;
    top: 48%;

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

    color: var(--white);

    font-size: 8.5rem;

    text-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.26);
}

.badge {
    position: absolute;

    right: 24px;
    bottom: 24px;

    max-width: 230px;

    padding:
        17px
        20px;

    border-radius: 18px;

    background: var(--white);

    color: var(--dark);

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

.badge strong {
    display: block;

    margin-bottom: 3px;
}

.badge i {
    margin-right: 7px;

    color: var(--green);
}

.badge small {
    color: var(--muted);
}


/* CHECKLIST */

.checks {
    display: grid;

    gap: 13px;

    margin:
        26px
        0
        30px;
}

.checks li {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    color: #445168;
}

.checks i {
    margin-top: 5px;

    color: var(--green);
}


/* =========================
   SERVIÇOS
========================= */

.servhead {
    display: flex;

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

    gap: 30px;

    margin-bottom: 42px;
}

.services {
    display: grid;

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

    gap: 20px;
}

.card {
    padding: 29px;

    background: var(--white);

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

    border-radius: 20px;

    transition: 0.25s ease;
}

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

    border-color: transparent;

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

.ico {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 16px;

    background: #edf5ff;

    color: var(--primary);

    font-size: 1.3rem;
}

.card h3 {
    margin-bottom: 8px;

    color: var(--dark);

    font-size: 1.08rem;
}

.card p {
    color: var(--muted);

    font-size: 0.91rem;
}


/* =========================
   FAIXA AZUL
========================= */

.band {
    padding: 38px 0;

    background:
        linear-gradient(
            100deg,
            var(--primary),
            #074dcb
        );

    color: var(--white);
}

.bandin {
    display: flex;

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

    gap: 30px;
}

.bandin h3 {
    font-size: clamp(
        1.5rem,
        3vw,
        2.2rem
    );

    letter-spacing: -0.04em;

    line-height: 1.1;
}

.bandin p {
    margin-top: 7px;

    color: #dbeaff;
}


/* =========================
   PLANOS
========================= */

.prices {
    display: grid;

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

    gap: 22px;

    align-items: stretch;
}

.pricecard {
    position: relative;

    padding:
        34px
        31px;

    display: flex;
    flex-direction: column;

    background: var(--white);

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

    border-radius: 25px;

    box-shadow:
        0 10px 35px
        rgba(
            28,
            48,
            77,
            0.07
        );
}

.pricecard.hot {
    transform:
        translateY(-8px);

    border:
        2px solid
        var(--primary);

    box-shadow:
        0 20px 50px
        rgba(
            11,
            99,
            246,
            0.14
        );
}

.popular {
    position: absolute;

    top: -14px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        7px
        14px;

    border-radius: 99px;

    background: var(--primary);

    color: var(--white);

    white-space: nowrap;

    font-size: 0.72rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricecard h3 {
    color: var(--dark);

    font-size: 1.2rem;
}

.desc {
    min-height: 42px;

    margin-top: 6px;

    color: var(--muted);

    font-size: 0.87rem;
}

.price {
    margin:
        25px
        0
        20px;

    display: flex;
    align-items: flex-end;

    gap: 6px;

    color: var(--dark);
}

.cur {
    margin-bottom: 7px;

    font-weight: 800;
}

.price strong {
    font-size: 3rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.06em;
}

.month {
    margin-bottom: 6px;

    color: var(--muted);

    font-size: 0.8rem;
}

.features {
    flex: 1;

    display: grid;

    gap: 12px;

    margin:
        4px
        0
        28px;
}

.features li {
    display: flex;

    gap: 10px;

    color: #4c5a70;

    font-size: 0.9rem;
}

.features i {
    margin-top: 4px;

    color: var(--green);
}

.pricecard .btn {
    width: 100%;
}

.note {
    margin-top: 22px;

    text-align: center;

    color: var(--muted);

    font-size: 0.78rem;
}


/* =========================
   APLICATIVO
========================= */

.app {
    position: relative;

    overflow: hidden;

    background: var(--dark);

    color: var(--white);
}

.app::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -230px;

    border-radius: 50%;

    background:
        rgba(
            11,
            99,
            246,
            0.25
        );

    filter: blur(10px);
}

.appin {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        0.9fr;

    align-items: center;

    gap: 70px;
}

.app .title {
    color: var(--white);
}

.app .copy {
    color: #b9c7da;
}

.apoints {
    display: grid;

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

    gap: 14px;

    margin-top: 28px;
}

.apoint {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #d7e0ed;

    font-size: 0.9rem;
}

.apoint i {
    color: var(--green);
}


/* CELULAR */

.phone {
    position: relative;

    width: 300px;
    height: 565px;

    margin: 0 auto;

    padding:
        19px
        13px;

    border:
        9px solid
        #202a36;

    border-radius: 48px;

    background: #060d17;

    box-shadow:
        0 40px 80px
        rgba(
            0,
            0,
            0,
            0.38
        );
}

.phone::before {
    content: "";

    position: absolute;

    width: 96px;
    height: 22px;

    left: 50%;
    top: 0;

    transform:
        translateX(-50%);

    border-radius:
        0
        0
        14px
        14px;

    background: #202a36;
}

.screen {
    position: relative;

    height: 100%;

    overflow: hidden;

    border-radius: 34px;

    background: #f6f9fd;

    color: var(--dark);
}

.scrtop {
    padding:
        27px
        18px
        15px;

    background: var(--white);
}

.scrtop small {
    color: var(--muted);
}

.scrtop strong {
    display: block;

    margin-top: 2px;
}

.minimap {
    position: relative;

    height: 258px;

    overflow: hidden;

    background: #e9f2fb;
}

.minimap::before {
    content: "";

    position: absolute;

    inset: -20%;

    background:
        repeating-linear-gradient(
            32deg,
            transparent 0 38px,
            #d0dfec 40px 50px,
            transparent 52px 90px
        );
}

.mpin {
    position: absolute;

    left: 53%;
    top: 44%;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--primary);

    color: var(--white);

    box-shadow:
        0 8px 20px
        rgba(
            11,
            99,
            246,
            0.28
        );
}

.scrbody {
    padding: 17px;
}

.vehicle {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px;

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

    border-radius: 14px;

    background: var(--white);
}

.vico {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #eef5ff;

    color: var(--primary);
}

.vehicle small {
    display: block;

    color: var(--muted);

    font-size: 0.68rem;
}

.scracts {
    display: grid;

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

    gap: 8px;

    margin-top: 12px;
}

.scract {
    padding:
        11px
        4px;

    text-align: center;

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

    border-radius: 11px;

    background: var(--white);

    font-size: 0.62rem;
}

.scract i {
    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 0.95rem;
}


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

.faq {
    max-width: 900px;

    margin:
        42px
        auto
        0;

    display: grid;

    gap: 12px;
}

.faqitem {
    overflow: hidden;

    background: var(--white);

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

    border-radius: 16px;
}

.faqbtn {
    width: 100%;

    padding:
        20px
        22px;

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

    gap: 20px;

    border: none;

    background: var(--white);

    color: var(--dark);

    text-align: left;

    font-weight: 800;
}

.faqbtn i {
    color: var(--primary);

    transition: 0.2s;
}

.faqans {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height
        0.25s ease;
}

.faqans p {
    padding:
        0
        22px
        21px;

    color: var(--muted);

    font-size: 0.92rem;
}

.faqitem.active .faqans {
    max-height: 220px;
}

.faqitem.active .faqbtn i {
    transform:
        rotate(180deg);
}


/* =========================
   CONTATO
========================= */

.contact {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    overflow: hidden;

    background: var(--white);

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

    border-radius: 28px;

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

.contactcopy {
    padding: 47px;

    background:
        linear-gradient(
            145deg,
            #0b63f6,
            #0749ba
        );

    color: var(--white);
}

.contactcopy h2 {
    font-size: 2.2rem;

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.contactcopy p {
    margin:
        15px
        0
        28px;

    color: #ddebff;
}

.cinfo {
    display: grid;

    gap: 13px;
}

.cinfo div {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 0.9rem;
}

.cinfo i {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

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


/* FORMULÁRIO */

.form {
    padding: 45px;
}

.formgrid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 13px;
}

.field {
    display: grid;

    gap: 7px;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    color: var(--dark);

    font-size: 0.78rem;
    font-weight: 800;
}

.field input {
    width: 100%;

    padding:
        13px
        14px;

    outline: none;

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

    border-radius: 11px;

    background: #fbfcfe;
}

.field input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            99,
            246,
            0.08
        );
}

.form .btn {
    width: 100%;

    margin-top: 16px;
}


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

footer {
    padding:
        58px
        0
        25px;

    background: #06101d;

    color: #aebcd0;
}

.footgrid {
    display: grid;

    grid-template-columns:
        1.2fr
        0.7fr
        0.8fr
        1fr;

    gap: 45px;
}

.footbrand p {
    max-width: 310px;

    margin-top: 16px;

    font-size: 0.88rem;
}

footer h4 {
    margin-bottom: 15px;

    color: var(--white);

    font-size: 0.92rem;
}

footer ul {
    display: grid;

    gap: 9px;

    font-size: 0.85rem;
}

footer a {
    transition: 0.2s;
}

footer a:hover {
    color: var(--white);
}


/* REDES SOCIAIS */

.social {
    display: flex;

    gap: 9px;

    margin-top: 17px;
}

.social a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #0d1e31;

    color: var(--white);
}

.social a:hover {
    background: var(--primary);
}


/* RODAPÉ FINAL */

.footbottom {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 43px;

    padding-top: 23px;

    border-top:
        1px solid
        #162438;

    font-size: 0.77rem;
}


/* =========================
   WHATSAPP FLUTUANTE
========================= */

.whats {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 900;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #25d366;

    color: var(--white);

    font-size: 1.65rem;

    box-shadow:
        0 13px 30px
        rgba(
            24,
            120,
            65,
            0.30
        );

    transition: 0.2s;
}

.whats:hover {
    transform:
        translateY(-4px)
        scale(1.03);
}


/* =========================================================
   RESPONSIVIDADE - TABLET
   ========================================================= */

@media (max-width: 980px) {

    .links {
        display: none;
    }

    .actions .btn {
        display: none;
    }

    .menu {
        display: block;
    }


    /* MENU MOBILE ABERTO */

    .links.open {
        position: absolute;

        left: 20px;
        right: 20px;

        top: 85px;

        display: flex;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 10px;

        background: var(--white);

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

        border-radius: 16px;

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

    .links.open a {
        display: block;

        padding:
            12px
            13px;
    }


    /* HERO */

    .heroin {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .visual {
        width: 100%;

        max-width: 700px;

        min-height: 430px;

        margin: auto;
    }


    /* ESTATÍSTICAS */

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

    .stat:nth-child(2) {
        border-right: none;
    }

    .stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--line);
    }


    /* SOBRE */

    .about {
        grid-template-columns: 1fr;
    }


    /* SERVIÇOS */

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


    /* PLANOS */

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

    .pricecard.hot {
        transform: none;
    }


    /* APP */

    .appin {
        grid-template-columns: 1fr;
    }


    /* CONTATO */

    .contact {
        grid-template-columns: 1fr;
    }


    /* FOOTER */

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


/* =========================================================
   RESPONSIVIDADE - CELULAR
   ========================================================= */

@media (max-width: 680px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                1180px
            );
    }

    .section {
        padding:
            70px
            0;
    }


    /* TOP */

    .top {
        display: none;
    }


    /* NAV */

    nav {
        min-height: 70px;
    }


    /* HERO */

    .heroin {
        padding:
            65px
            0
            35px;

        gap: 30px;
    }

    .hero h1 {
        font-size: 2.75rem;
    }

    .hero p {
        font-size: 0.98rem;
    }

    .heroact .btn {
        width: 100%;
    }

    .proofs {
        gap: 13px;
    }

    .visual {
        min-height: 330px;
    }

    .map {
        inset:
            10px
            0;
    }

    .track {
        width: 190px;

        right: -6px;
        top: 30px;
    }

    .speed {
        left: -3px;
        bottom: 25px;
    }


    /* ESTATÍSTICAS */

    .statswrap {
        margin-top: -10px;
    }

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

    .stat {
        padding: 20px;
    }


    /* SOBRE */

    .about {
        gap: 38px;
    }

    .aboutpic {
        min-height: 380px;
    }

    .bigcar {
        font-size: 6rem;
    }


    /* SERVIÇOS */

    .servhead {
        flex-direction: column;

        align-items: flex-start;
    }

    .services {
        grid-template-columns: 1fr;
    }


    /* FAIXA */

    .bandin {
        flex-direction: column;

        align-items: flex-start;
    }


    /* PLANOS */

    .prices {
        grid-template-columns: 1fr;
    }


    /* APP */

    .apoints {
        grid-template-columns: 1fr;
    }

    .phone {
        transform:
            scale(0.9);

        margin-top: -20px;
        margin-bottom: -25px;
    }


    /* CONTATO */

    .contactcopy {
        padding:
            31px
            23px;
    }

    .form {
        padding:
            31px
            23px;
    }

    .formgrid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }


    /* FOOTER */

    .footgrid {
        grid-template-columns: 1fr;
    }

    .footbottom {
        flex-direction: column;
    }
}

/* BOTÃO WHATSAPP */

.btn-w { 
    background: #25D366; 
    color: #ffffff; 

    border-color: #25D366;

    box-shadow: 
        0 12px 28px 
        rgba(37, 211, 102, 0.22);

    animation: whatsapp-shake 2.5s infinite;
} 

.btn-w i { 
    color: #ffffff; 
} 

.btn-w:hover { 
    background: #1ebe5d; 
    color: #ffffff; 

    border-color: #1ebe5d;

    animation-play-state: paused;
} 

.btn-w:hover i { 
    color: #ffffff; 
}


/* TREMER BOTÃO WHATSAPP */

@keyframes whatsapp-shake {

    0%,
    80%,
    100% {
        transform: translateX(0);
    }

    82% {
        transform: translateX(-4px);
    }

    84% {
        transform: translateX(4px);
    }

    86% {
        transform: translateX(-4px);
    }

    88% {
        transform: translateX(4px);
    }

    90% {
        transform: translateX(-2px);
    }

    92% {
        transform: translateX(2px);
    }

    94% {
        transform: translateX(0);
    }
}

/* =========================================================
   AJUSTE FINAL - CARRO + MOTO NO HERO
   Veículos maiores, proporcionais e alinhados na mesma linha
   ========================================================= */

.hero-images-slot {
    width: 680px;
    max-width: 125%;
    min-height: 470px;

    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;

    margin-left: -45px;
    margin-right: 0;

    padding: 0 4px 46px;

    overflow: visible;
}

.hero-images-slot .hero-vehicle {
    position: relative;

    display: block;

    height: auto;
    max-width: none;

    object-fit: contain;

    flex: 0 0 auto;

    user-select: none;
    pointer-events: none;

    filter:
        drop-shadow(
            0 18px 16px
            rgba(0, 0, 0, 0.28)
        );
}

/* CARRO */
.hero-images-slot .hero-car {
    width: 410px;

    transform:
        translateY(-10px);

    z-index: 1;
}

/* MOTO */
.hero-images-slot .hero-moto {
    width: 220px;

    margin-left: -6px;

    z-index: 2;
}


/* =========================================================
   RESPONSIVIDADE - CARRO + MOTO
   ========================================================= */

@media (max-width: 1200px) {

    .hero-images-slot {
        width: 610px;
        max-width: 120%;
        min-height: 430px;

        gap: 18px;

        margin-left: -30px;

        padding-bottom: 42px;
    }

    .hero-images-slot .hero-car {
        width: 365px;
    }

    .hero-images-slot .hero-moto {
        width: 200px;
    }
}


@media (max-width: 980px) {

    .hero-images-slot {
        width: min(720px, 100%);
        max-width: 100%;
        min-height: 390px;

        gap: 20px;

        margin:
            10px
            auto
            0;

        padding-bottom: 36px;
    }

    .hero-images-slot .hero-car {
        width: 430px;

        transform:
            translateY(-8px);
    }

    .hero-images-slot .hero-moto {
        width: 235px;

        margin-left: 0;
    }
}


@media (max-width: 680px) {

    .hero-copy,
    .hero-images-slot,
    .proofs,
    .proof {
        min-width: 0;
    }

    .hero h1 {
        max-width: 100%;

        font-size: 2.4rem;
        line-height: 1.02;
        letter-spacing: -0.05em;

        overflow-wrap: anywhere;
    }

    .hero p {
        max-width: 100%;
    }

    .proofs {
        grid-template-columns: 1fr;

        column-gap: 0;
        row-gap: 14px;
    }

    .proof span {
        display: block;
        white-space: normal;
    }

    .hero-images-slot {
        width: 100%;
        max-width: 100%;
        min-height: 280px;

        gap: 10px;

        margin:
            8px
            auto
            0;

        padding:
            0
            0
            20px;
    }

    .hero-images-slot .hero-car {
        width: 62%;

        transform:
            translateY(-4px);
    }

    .hero-images-slot .hero-moto {
        width: 30%;

        margin-left: 0;
    }
}


@media (max-width: 480px) {

    .hero h1 {
        font-size: 2.15rem;
    }

    .hero-images-slot {
        min-height: 230px;

        gap: 8px;

        padding-bottom: 14px;
    }

    .hero-images-slot .hero-car {
        width: 60%;

        transform:
            translateY(-2px);
    }

    .hero-images-slot .hero-moto {
        width: 29%;
    }
}


/* =========================================================
   SÍMBOLO DE LOCALIZAÇÃO VERMELHO
   ========================================================= */

.hero-images-slot::before {
    content: "\f3c5";

    position: absolute;

    top: 42px;
    left: 52%;

    transform:
        translateX(-50%);

    font-family: "Font Awesome 6 Free";
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 1;

    color: #ff2b2b;

    text-shadow:
        0 10px 24px
        rgba(255, 43, 43, 0.35);

    z-index: 5;

    pointer-events: none;
}


/* TABLET */
@media (max-width: 980px) {

    .hero-images-slot::before {
        top: 28px;

        font-size: 4rem;
    }
}


/* CELULAR */
@media (max-width: 680px) {

    .hero-images-slot::before {
        top: 8px;

        font-size: 2.7rem;
    }
}

/* =========================================================
   CORREÇÃO DEFINITIVA DE OVERFLOW NO MOBILE
   ========================================================= */
@media (max-width: 680px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .hero,
    .hero .container,
    .heroin,
    .hero-copy,
    .hero-images-slot {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .heroin {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px;
    }

    .hero-copy {
        overflow: hidden;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.05rem, 10vw, 2.45rem);
        line-height: 1.04;

        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero p {
        width: 100%;
        max-width: 100%;

        white-space: normal;
        overflow-wrap: break-word;
    }

    .heroact {
        width: 100%;
    }

    .heroact .btn {
        width: 100%;
        max-width: 100%;
    }

    .proofs {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        grid-template-columns: minmax(0, 1fr) !important;

        column-gap: 0;
        row-gap: 14px;
    }

    .proof {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .proof span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .hero-images-slot {
        box-sizing: border-box;

        display: flex !important;
        justify-content: center;
        align-items: flex-end;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0;
        padding-right: 0;

        overflow: hidden;
    }

    .hero-images-slot .hero-vehicle {
        max-width: 100% !important;
    }

    .hero-images-slot .hero-car {
        width: 61% !important;
        max-width: 61% !important;
    }

    .hero-images-slot .hero-moto {
        width: 29% !important;
        max-width: 29% !important;

        margin-left: 0 !important;
    }
}

/* =========================================
   DEIXAR CARRO E MOTO MAIS EM DESTAQUE
========================================= */

@media (max-width: 980px) {
    .hero-images-slot {
        min-height: 430px;
        gap: 10px;
        padding-bottom: 24px;
    }

    .hero-images-slot .hero-car {
        width: 480px !important;
        max-width: 68% !important;
        transform: translateY(-6px);
    }

    .hero-images-slot .hero-moto {
        width: 260px !important;
        max-width: 33% !important;
        transform: translateY(6px);
        margin-left: -6px !important;
    }
}

@media (max-width: 680px) {
    .hero-images-slot {
        min-height: 320px !important;
        gap: 6px !important;
        padding-bottom: 12px !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
    }

    .hero-images-slot .hero-car {
        width: 66% !important;
        max-width: 66% !important;
        transform: translateY(-2px) !important;
    }

    .hero-images-slot .hero-moto {
        width: 31% !important;
        max-width: 31% !important;
        margin-left: 0 !important;
        transform: translateY(6px) !important;
    }

    .hero-images-slot::before {
        top: 20px !important;
        font-size: 2.9rem !important;
    }
}

@media (max-width: 480px) {
    .hero-images-slot {
        min-height: 300px !important;
        gap: 4px !important;
        padding-bottom: 8px !important;
    }

    .hero-images-slot .hero-car {
        width: 67% !important;
        max-width: 67% !important;
    }

    .hero-images-slot .hero-moto {
        width: 31% !important;
        max-width: 31% !important;
    }

    .hero-images-slot::before {
        top: 22px !important;
        font-size: 2.7rem !important;
    }
}

/* =========================================================
   IDENTIDADE VISUAL ONGPS - PRETO + VERDE NEON
   Inspirada no logotipo oficial fornecido
   ========================================================= */

:root {
    --ongps-green: #7cff00;
    --ongps-green-2: #a0ff45;
    --ongps-green-dark: #4fcb00;
    --ongps-black: #020503;
    --ongps-dark: #071008;
    --ongps-card: #0b130c;
    --ongps-card-2: #101b12;
    --ongps-line: #203423;
    --ongps-text: #e7f0e9;
    --ongps-muted: #98a79c;

    --primary: var(--ongps-green);
    --primary-dark: var(--ongps-green-dark);
    --green: var(--ongps-green);
    --dark: #f4fff5;
    --dark-2: var(--ongps-dark);
    --text: var(--ongps-text);
    --muted: var(--ongps-muted);
    --light: #071008;
    --line: var(--ongps-line);
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.38);
}

body {
    background: var(--ongps-black);
    color: var(--ongps-text);
}

::selection {
    background: var(--ongps-green);
    color: #050805;
}

.section {
    position: relative;
}

.soft {
    background:
        radial-gradient(circle at 15% 25%, rgba(124, 255, 0, 0.055), transparent 24%),
        linear-gradient(180deg, #071008 0%, #050a06 100%);
}

.eyebrow {
    color: var(--ongps-green);
}

.eyebrow::before {
    background: var(--ongps-green);
    box-shadow: 0 0 14px rgba(124, 255, 0, 0.65);
}

.title,
.card h3,
.pricecard h3,
.price,
.field label {
    color: #ffffff;
}

.copy,
.card p,
.desc,
.month,
.note {
    color: var(--ongps-muted);
}

/* TOPO */
.top {
    background: #000000;
    color: #b9c7bd;
    border-bottom: 1px solid rgba(124, 255, 0, 0.14);
}

.top i {
    color: var(--ongps-green);
}

/* HEADER / LOGO */
header {
    background: rgba(2, 5, 3, 0.94);
    border-bottom: 1px solid rgba(124, 255, 0, 0.18);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
}

nav {
    min-height: 86px;
}

.brand-logo-link {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0;
}

.brand-logo {
    display: block;
    width: 184px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(124, 255, 0, 0.12));
}

.links a {
    color: #d3ddd5;
}

.links a:hover {
    color: var(--ongps-green);
    text-shadow: 0 0 12px rgba(124, 255, 0, 0.25);
}

.menu {
    background: #0b130c;
    border-color: #213823;
    color: var(--ongps-green);
}

.links.open {
    background: rgba(5, 10, 6, 0.98);
    border-color: rgba(124, 255, 0, 0.22);
}

/* BOTÕES */
.btn-p {
    background: linear-gradient(135deg, var(--ongps-green), #9cff32);
    color: #071007;
    border-color: var(--ongps-green);
    box-shadow:
        0 12px 30px rgba(124, 255, 0, 0.20),
        0 0 0 1px rgba(124, 255, 0, 0.10) inset;
}

.btn-p:hover {
    background: linear-gradient(135deg, #92ff25, var(--ongps-green));
    color: #020503;
    box-shadow:
        0 16px 34px rgba(124, 255, 0, 0.28),
        0 0 22px rgba(124, 255, 0, 0.12);
}

.btn-o {
    background: #0b130c;
    color: #f4fff5;
    border-color: #28452c;
}

.btn-o:hover {
    color: var(--ongps-green);
    border-color: var(--ongps-green);
    background: #0e190f;
}

/* HERO */
.hero {
    background:
        radial-gradient(circle at 78% 20%, rgba(124, 255, 0, 0.18), transparent 26%),
        radial-gradient(circle at 89% 78%, rgba(124, 255, 0, 0.10), transparent 24%),
        radial-gradient(circle at 12% 80%, rgba(124, 255, 0, 0.06), transparent 30%),
        linear-gradient(118deg, #000000 0%, #040a05 48%, #071209 100%);
}

.hero::before {
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(124, 255, 0, 0.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 255, 0, 0.17) 1px, transparent 1px);
    background-size: 54px 54px;
}

.hero .eyebrow {
    color: var(--ongps-green);
}

.hero h1 span {
    color: var(--ongps-green);
    text-shadow: 0 0 26px rgba(124, 255, 0, 0.18);
}

.hero p {
    color: #c4d0c7;
}

.proof {
    color: #e1ebe3;
}

.proof b {
    background: rgba(124, 255, 0, 0.09);
    border: 1px solid rgba(124, 255, 0, 0.17);
    color: var(--ongps-green);
    box-shadow: inset 0 0 16px rgba(124, 255, 0, 0.04);
}

.hero-images-slot::before {
    color: var(--ongps-green) !important;
    text-shadow:
        0 0 12px rgba(124, 255, 0, 0.78),
        0 0 30px rgba(124, 255, 0, 0.36) !important;
}

.hero-images-slot::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 5%;
    bottom: 36px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--ongps-green), transparent);
    box-shadow:
        0 0 10px rgba(124, 255, 0, 0.9),
        0 0 28px rgba(124, 255, 0, 0.45);
    transform: perspective(240px) rotateX(55deg);
    z-index: 0;
    pointer-events: none;
}

.hero-images-slot .hero-vehicle {
    filter:
        drop-shadow(0 18px 18px rgba(0, 0, 0, 0.50))
        drop-shadow(0 0 7px rgba(124, 255, 0, 0.10));
}

/* ESTATÍSTICAS */
.statswrap {
    position: relative;
    z-index: 5;
}

.stats {
    background: #0a120b;
    border: 1px solid rgba(124, 255, 0, 0.18);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

.stat {
    border-color: #1c3020 !important;
}

.stat strong {
    color: var(--ongps-green);
    text-shadow: 0 0 16px rgba(124, 255, 0, 0.14);
}

.stat span {
    color: #aab8ae;
}

/* MAPA / QUEM SOMOS */
.visual,
.aboutpic {
    background:
        radial-gradient(circle at 70% 30%, rgba(124, 255, 0, 0.10), transparent 25%),
        #081109;
    border: 1px solid rgba(124, 255, 0, 0.15);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.36);
}

.map {
    background: linear-gradient(145deg, #0a120b, #0d190f);
    border-color: #213824;
}

.grid {
    opacity: 0.20;
    filter: hue-rotate(55deg) saturate(1.8);
}

.road {
    background: #2a3a2c;
    box-shadow: inset 0 0 0 4px #111b12;
}

.pin {
    background: var(--ongps-green);
    box-shadow: 0 0 0 7px rgba(124, 255, 0, 0.10), 0 0 22px rgba(124, 255, 0, 0.28);
}

.track,
.speed,
.badge {
    background: rgba(8, 16, 9, 0.94);
    border: 1px solid rgba(124, 255, 0, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

.carico,
.ico,
.vico {
    background: rgba(124, 255, 0, 0.10);
    color: var(--ongps-green);
    border: 1px solid rgba(124, 255, 0, 0.14);
}

.track h4,
.speed strong,
.badge strong {
    color: #ffffff;
}

.track small,
.speed span,
.badge small {
    color: var(--ongps-muted);
}

.status,
.speed em,
.signal,
.badge i,
.checks i {
    color: var(--ongps-green);
}

.dot {
    background: var(--ongps-green);
    box-shadow: 0 0 0 5px rgba(124, 255, 0, 0.10), 0 0 14px rgba(124, 255, 0, 0.45);
}

/* CARDS DE SERVIÇO */
.card {
    background: linear-gradient(180deg, #0d160f, #09100a);
    border-color: #1c3020;
    box-shadow: none;
}

.card:hover {
    border-color: rgba(124, 255, 0, 0.48);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.36),
        0 0 22px rgba(124, 255, 0, 0.08);
}

/* FAIXA */
.band {
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.20), transparent 18%),
        linear-gradient(100deg, #5ee000, var(--ongps-green) 55%, #9cff32);
    color: #071007;
}

.bandin p {
    color: #18300f;
    font-weight: 600;
}

.band .btn-w,
.band .btn-p,
.band .btn-o {
    background: #071007;
    color: #ffffff;
    border-color: #071007;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

/* PLANOS */
.pricecard {
    background: linear-gradient(180deg, #0d160f 0%, #080e09 100%);
    border-color: #1b2e1e;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

.pricecard.hot {
    border-color: var(--ongps-green);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(124, 255, 0, 0.10);
}

.popular {
    background: var(--ongps-green);
    color: #071007;
    box-shadow: 0 8px 22px rgba(124, 255, 0, 0.20);
}

.features li {
    color: #c0cdc3;
}

.features i {
    color: var(--ongps-green);
}

/* APLICATIVO */
.app {
    background:
        radial-gradient(circle at 78% 28%, rgba(124, 255, 0, 0.12), transparent 24%),
        linear-gradient(120deg, #020503 0%, #071008 58%, #0a180c 100%);
}

.app::after {
    opacity: 0.20;
    filter: hue-rotate(62deg) saturate(2);
}

.app .copy,
.apoint {
    color: #c1cdc4;
}

.apoint i {
    color: var(--ongps-green);
}

.phone {
    border-color: #263728;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.52),
        0 0 24px rgba(124, 255, 0, 0.08);
}

.screen {
    background: #f5f8f5;
}

/* FAQ */
.faqitem {
    background: #0c140d;
    border-color: #1b3020;
}

.faqbtn {
    color: #f1f7f2;
}

.faqbtn i {
    color: var(--ongps-green);
}

.faqans p {
    color: var(--ongps-muted);
}

.faqitem.active {
    border-color: rgba(124, 255, 0, 0.38);
}

/* CONTATO */
.contact {
    background: #0b130c;
    border-color: #203724;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.34);
}

.contactcopy {
    background:
        radial-gradient(circle at 12% 15%, rgba(124, 255, 0, 0.16), transparent 34%),
        linear-gradient(145deg, #071008, #0d1c10);
    border-right: 1px solid rgba(124, 255, 0, 0.14);
}

.contactcopy p {
    color: #bcc9bf;
}

.cinfo i {
    background: rgba(124, 255, 0, 0.10);
    color: var(--ongps-green);
    border: 1px solid rgba(124, 255, 0, 0.14);
}

.form {
    background: #0b130c;
}

.field input {
    background: #070d08;
    color: #ffffff;
    border-color: #223825;
}

.field input::placeholder {
    color: #718076;
}

.field input:focus {
    border-color: var(--ongps-green);
    box-shadow: 0 0 0 3px rgba(124, 255, 0, 0.09);
}

/* RODAPÉ */
footer {
    background: #000000;
    color: #9eada2;
    border-top: 1px solid rgba(124, 255, 0, 0.14);
}

.footer-logo-link {
    display: inline-flex;
}

.footer-logo {
    width: 220px;
    max-height: 84px;
}

.social a {
    background: #0b140d;
    border: 1px solid #213824;
}

.social a:hover {
    background: var(--ongps-green);
    color: #071007;
    border-color: var(--ongps-green);
}

.footbottom {
    border-color: #1b2e1e;
}

/* WHATSAPP FLUTUANTE */
.whats {
    box-shadow:
        0 13px 30px rgba(24, 120, 65, 0.30),
        0 0 0 5px rgba(37, 211, 102, 0.08);
}

/* MOBILE */
@media (max-width: 980px) {
    .brand-logo {
        width: 168px;
    }
}

@media (max-width: 680px) {
    nav {
        min-height: 74px;
    }

    .brand-logo {
        width: 148px;
        max-height: 54px;
    }

    .hero {
        background:
            radial-gradient(circle at 78% 70%, rgba(124, 255, 0, 0.12), transparent 28%),
            linear-gradient(145deg, #000000 0%, #061007 100%);
    }

    .hero-images-slot::after {
        bottom: 18px;
    }

    .contactcopy {
        border-right: 0;
        border-bottom: 1px solid rgba(124, 255, 0, 0.14);
    }

    .footer-logo {
        width: 205px;
        max-height: 78px;
    }
}