@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Michroma&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --black: #020409;
    --black-soft: #050912;
    --white: #f4f8ff;
    --white-soft: #a8b3c2;
    --blue: #3da8ff;
    --cyan: #48e5ff;
    --line: rgba(255,255,255,.07);
}

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

html {
    scroll-behavior: smooth;
}

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

button {
    font: inherit;
}

a {
    color: inherit;
}

main {
    width: 100%;
}


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

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 50% 45%, rgba(45,145,230,.10), transparent 32%),
        radial-gradient(circle at 50% 80%, rgba(72,229,255,.045), transparent 40%),
        var(--black);
}

.hero-grid {
    position: absolute;
    width: 180%;
    height: 170%;
    left: -40%;
    top: 30%;
    z-index: -6;

    background-image:
        linear-gradient(rgba(72,229,255,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72,229,255,.065) 1px, transparent 1px);

    background-size: 80px 80px;

    transform:
        perspective(850px)
        rotateX(62deg);

    transform-origin: center bottom;
    opacity: .45;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 25%,
            black 75%,
            transparent 100%
        );

    animation:
        gridMove 24s linear infinite;
}

.hero-grid-glow {
    position: absolute;

    width: 900px;
    height: 400px;

    left: 50%;
    bottom: -100px;

    transform:
        translateX(-50%);

    z-index: -5;

    background:
        radial-gradient(
            ellipse,
            rgba(61,168,255,.16),
            transparent 68%
        );

    filter:
        blur(40px);
}

.hero-light {
    position: absolute;

    width: 750px;
    height: 750px;

    left: 50%;
    top: 48%;

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

    border-radius: 50%;

    z-index: -4;

    background:
        radial-gradient(
            circle,
            rgba(61,168,255,.10),
            rgba(61,168,255,.035) 35%,
            transparent 70%
        );

    filter:
        blur(30px);

    animation:
        centralLight 8s ease-in-out infinite;
}

.tech-lines {
    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;
    overflow: hidden;
}

.tech-lines span {
    position: absolute;

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.35),
            transparent
        );

    box-shadow:
        0 0 10px rgba(72,229,255,.25);

    opacity: 0;
}

.tech-lines span:nth-child(1) {
    width: 40%;
    top: 27%;
    left: -40%;
    animation: techLineOne 8s linear infinite;
}

.tech-lines span:nth-child(2) {
    width: 30%;
    top: 43%;
    right: -30%;
    animation: techLineTwo 10s linear infinite 2s;
}

.tech-lines span:nth-child(3) {
    width: 25%;
    top: 65%;
    left: -25%;
    animation: techLineOne 12s linear infinite 4s;
}

.tech-lines span:nth-child(4) {
    width: 35%;
    top: 78%;
    right: -35%;
    animation: techLineTwo 11s linear infinite 1s;
}


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

.site-header {
    position: absolute;

    top: 30px;
    left: 5%;
    right: 5%;

    z-index: 30;

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

    gap: 30px;

    opacity: 0;

    transform:
        translateY(-22px);

    filter:
        blur(6px);

    transition:
        opacity .85s ease .05s,
        transform .95s cubic-bezier(.16,1,.3,1) .05s,
        filter .85s ease .05s;
}

.hero.visible .site-header {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}

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

    gap: 16px;

    flex-shrink: 0;

    text-decoration: none;

    color:
        var(--white);
}

.brand img {
    width: 64px;
    height: 64px;

    object-fit:
        contain;

    opacity: .98;

    filter:
        grayscale(1)
        contrast(1.2)
        brightness(2.05)
        drop-shadow(0 0 9px rgba(255,255,255,.16))
        drop-shadow(0 0 18px rgba(72,229,255,.38));
}

.brand-name {
    display: flex;
    align-items: baseline;

    gap: 10px;

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

    letter-spacing:
        2.2px;
}

.brand-name strong {
    font-size:
        19px;

    font-weight:
        400;

    color:
        #fff;

    letter-spacing:
        1.4px;

    text-shadow:
        0 0 12px rgba(255,255,255,.10),
        0 0 18px rgba(72,229,255,.10);
}

.brand-name span {
    font-size:
        9px;

    font-weight:
        400;

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

    letter-spacing:
        2.1px;
}


/* =====================================================
   LADO DIREITO DO HEADER
===================================================== */

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 20px;

    min-width: 0;
}


/* =====================================================
   SELETOR DE IDIOMA
===================================================== */

.language-switch {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0;

    border: none;

    background: transparent;

    box-shadow: none;
}

.language-switch::before {
    display: none;
}

.language-btn {
    position: relative;

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

    gap: 6px;

    min-width: auto;
    height: auto;

    padding: 5px 2px;

    border: none;

    background: transparent;

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

    cursor: pointer;

    outline: none;

    transition:
        color .3s ease,
        opacity .3s ease,
        transform .3s ease,
        filter .3s ease;
}

.language-btn::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        var(--cyan);

    box-shadow:
        0 0 8px rgba(72,229,255,.80);

    transition:
        width .3s ease;
}

.language-btn:hover {
    color:
        rgba(255,255,255,.85);

    transform:
        translateY(-1px);
}

.language-btn.active {
    color:
        rgba(255,255,255,.95);
}

.language-btn.active::before {
    width:
        78%;
}

.language-btn:focus-visible {
    outline:
        1px solid rgba(72,229,255,.55);

    outline-offset:
        4px;
}


/* =====================================================
   BANDEIRAS
===================================================== */

.language-flag {
    display: inline-flex;

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

    width: 27px;
    height: 19px;

    flex:
        0 0 auto;

    opacity:
        .58;

    border-radius:
        2px;

    overflow:
        hidden;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10);

    filter:
        saturate(.82)
        brightness(.90);

    transition:
        opacity .3s ease,
        transform .3s ease,
        filter .3s ease,
        box-shadow .3s ease;
}

.language-flag svg {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;
}

.language-btn:hover
.language-flag {
    opacity:
        .88;

    filter:
        saturate(1)
        brightness(1.03);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 0 8px rgba(72,229,255,.08);
}

.language-btn.active
.language-flag {
    opacity:
        1;

    transform:
        scale(1.06);

    filter:
        saturate(1.08)
        brightness(1.06);

    box-shadow:
        0 0 0 1px rgba(72,229,255,.30),
        0 0 10px rgba(72,229,255,.13);
}

.language-code {
    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        1px;
}


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

.header-status {
    display: flex;
    align-items: center;

    gap: 9px;

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

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        2.7px;

    white-space:
        nowrap;

    text-shadow:
        0 0 8px rgba(255,255,255,.08);
}

.status-dot {
    width: 5px;
    height: 5px;

    flex:
        0 0 auto;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px rgba(72,229,255,.9);

    animation:
        statusPulse 2s ease-in-out infinite;
}


/* =====================================================
   RAPOSA CENTRAL
===================================================== */

.fox-container {
    position: absolute;

    z-index: 1;

    width:
        min(720px,58vw);

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-43%)
        scale(.88);

    opacity: 0;

    filter:
        blur(10px);

    pointer-events:
        none;

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

    transition:
        opacity 1.3s ease .08s,
        transform 1.4s cubic-bezier(.16,1,.3,1) .08s,
        filter 1.3s ease .08s;
}

.hero.visible
.fox-container {
    opacity: 1;

    transform:
        translate(-50%,-47%)
        scale(1);

    filter:
        blur(0);
}

.fox-aura {
    position: absolute;

    width: 115%;
    height: 115%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(61,168,255,.12),
            transparent 68%
        );

    filter:
        blur(35px);

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

.fox-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(72,229,255,.12);
}

.ring-one {
    width: 80%;
    height: 80%;

    animation:
        ringRotate 24s linear infinite;
}

.ring-two {
    width: 92%;
    height: 92%;

    border-style:
        dashed;

    border-color:
        rgba(61,168,255,.08);

    animation:
        ringRotateReverse 35s linear infinite;
}

.ring-three {
    width: 108%;
    height: 108%;

    border-color:
        rgba(72,229,255,.045);

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

.fox-logo {
    position: relative;

    z-index: 5;

    width: 72%;
    height: auto;

    display: block;

    opacity: .17;

    object-fit:
        contain;

    filter:
        grayscale(1)
        contrast(1.25)
        brightness(1.8)
        drop-shadow(0 0 25px rgba(61,168,255,.35));

    animation:
        foxFloat 9s ease-in-out infinite,
        foxBreath 7s ease-in-out infinite;
}

.fox-scan {
    position: absolute;

    z-index: 8;

    width: 68%;
    height: 1px;

    left: 16%;
    top: 18%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.9),
            transparent
        );

    box-shadow:
        0 0 14px rgba(72,229,255,.65);

    opacity: 0;

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

.digital-points {
    position: absolute;

    inset: 8%;

    z-index: 9;
}

.digital-points span {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 9px rgba(72,229,255,.8);

    opacity: 0;

    animation:
        digitalPoint 4s ease-in-out infinite;
}

.digital-points span:nth-child(1) { left:17%; top:28%; }
.digital-points span:nth-child(2) { left:72%; top:22%; animation-delay:.7s; }
.digital-points span:nth-child(3) { left:82%; top:55%; animation-delay:1.4s; }
.digital-points span:nth-child(4) { left:23%; top:70%; animation-delay:2.1s; }
.digital-points span:nth-child(5) { left:48%; top:12%; animation-delay:2.8s; }
.digital-points span:nth-child(6) { left:64%; top:76%; animation-delay:1.1s; }
.digital-points span:nth-child(7) { left:8%; top:50%; animation-delay:2.4s; }
.digital-points span:nth-child(8) { left:90%; top:35%; animation-delay:3.1s; }


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

.hero-content {
    position: relative;

    z-index: 15;

    min-height: 100vh;

    width:
        min(1250px,88%);

    margin:
        0 auto;

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

    padding:
        120px 0 90px;
}

.hero-copy {
    max-width:
        850px;
}

.eyebrow {
    margin-bottom:
        24px;

    color:
        var(--cyan);

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

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        4px;
}

.hero-copy
.eyebrow {
    opacity: 0;

    transform:
        translateX(-35px);

    filter:
        blur(6px);

    transition:
        opacity .8s ease .12s,
        transform .9s cubic-bezier(.16,1,.3,1) .12s,
        filter .8s ease .12s;
}

.hero.visible
.hero-copy
.eyebrow {
    opacity: 1;

    transform:
        translateX(0);

    filter:
        blur(0);
}

.hero h1 {
    max-width:
        900px;

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

    font-size:
        clamp(52px,6.7vw,100px);

    line-height:
        .94;

    font-weight:
        500;

    letter-spacing:
        -5px;

    opacity: 0;

    transform:
        translateX(-65px)
        translateY(20px)
        scale(.96);

    filter:
        blur(11px);

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

.hero.visible h1 {
    opacity: 1;

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

    filter:
        blur(0);
}

.hero-title-main {
    display: block;
}

.hero h1 > span:last-child {
    display: block;

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

    font-size:
        .68em;

    line-height:
        1.1;

    letter-spacing:
        -1px;

    margin-top:
        8px;

    background:
        linear-gradient(
            90deg,
            #fff 0%,
            #c8e7ff 50%,
            var(--cyan) 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    transition:
        text-shadow 1.2s ease .8s;
}

.hero.visible
h1 > span:last-child {
    text-shadow:
        0 0 25px rgba(72,229,255,.12);
}

.scroll-indicator {
    position: absolute;

    bottom: 40px;
    left: 0;

    display: flex;
    flex-direction: column;

    gap: 12px;

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

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

    font-size:
        7px;

    font-weight:
        500;

    letter-spacing:
        3px;

    opacity: 0;

    transform:
        translateY(18px);

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

.hero.visible
.scroll-indicator {
    opacity: 1;

    transform:
        translateY(0);
}

.scroll-line {
    width: 1px;
    height: 55px;

    background:
        linear-gradient(
            to bottom,
            var(--cyan),
            transparent
        );

    box-shadow:
        0 0 12px rgba(72,229,255,.55);

    animation:
        scrollLine 2s ease-in-out infinite;
}


/* =====================================================
   SEÇÕES
===================================================== */

.about,
.projects,
.automation-section {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
        140px 8%;

    overflow: hidden;

    background:
        var(--black-soft);

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

.about {
    min-height: auto;

    padding-top:
        150px;

    padding-bottom:
        150px;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(61,168,255,.055),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(72,229,255,.025),
            transparent 30%
        ),
        var(--black-soft);
}

.projects {
    min-height: auto;

    padding-top:
        150px;

    padding-bottom:
        150px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(72,229,255,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(61,168,255,.035),
            transparent 30%
        ),
        var(--black);
}

.section-label {
    position: absolute;

    top: 70px;
    left: 8%;

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

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

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        4px;

    opacity: 0;

    transform:
        translateY(-18px);

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

section.visible
.section-label {
    opacity: 1;

    transform:
        translateY(0);
}

.background-number {
    position: absolute;

    right: -40px;
    bottom: -130px;

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

    font-size:
        clamp(300px,45vw,700px);

    line-height:
        1;

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

    pointer-events:
        none;
}

.about-content,
.projects-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width:
        1050px;
}

.about-content {
    max-width:
        1180px;

    margin:
        0 auto;
}

.projects-content {
    max-width:
        1240px;

    margin:
        0 auto;
}

.about h2,
.projects h2,
.closing h2,
.automation-copy h2 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(48px,6vw,88px);

    line-height:
        .98;

    font-weight:
        500;

    letter-spacing:
        -5px;
}

.about h2 {
    max-width:
        980px;

    font-size:
        clamp(48px,5.6vw,82px);
}

.about h2 span,
.projects h2 span,
.closing h2 span,
.automation-copy h2 span {
    color:
        var(--cyan);
}

/* =====================================================
   DESTAQUES GRANDES EM AZUL/CYANO
===================================================== */

.about h2 span:last-child,
.projects h2 span:last-child,
.closing h2 span:last-child,
.automation-copy h2 span:last-child {
    font-family:
        "Exo 2",
        sans-serif;

    font-weight:
        600;

    letter-spacing:
        -2px;

    text-transform:
        none;
}

.about-title-main,
.automation-title-main,
.solutions-title-main,
.closing-title-main {
    color:
        var(--white) !important;
}

.about h2 span {
    display:
        block;
}

.about-intro {
    max-width:
        900px;
}

.about-description {
    max-width:
        820px;

    margin-top:
        28px;

    color:
        var(--white-soft);

    font-size:
        clamp(16px,1.45vw,19px);

    line-height:
        1.8;

    font-weight:
        300;
}

.projects-description {
    max-width:
        720px;

    margin-top:
        30px;

    color:
        var(--white-soft);

    font-size:
        17px;

    line-height:
        1.75;
}


/* =====================================================
   SOBRE
===================================================== */

.about
.eyebrow.about-reveal {
    opacity: 0;

    transform:
        translateX(-40px);

    filter:
        blur(7px);

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

.about.visible
.eyebrow.about-reveal {
    opacity: 1;

    transform:
        translateX(0);

    filter:
        blur(0);
}

.about
h2.about-reveal {
    opacity: 0;

    transform:
        translateX(-65px)
        translateY(10px);

    filter:
        blur(10px);

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

.about.visible
h2.about-reveal {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0);

    filter:
        blur(0);
}

.about h2 span {
    transition:
        text-shadow 1.4s ease .7s;
}

.about.visible
h2 span:last-child {
    text-shadow:
        0 0 28px rgba(72,229,255,.18);
}

.about-intro.about-reveal {
    opacity: 0;

    transform:
        translateY(45px);

    filter:
        blur(6px);

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

.about.visible
.about-intro.about-reveal {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}

.services-area.about-reveal {
    opacity: 1;
    transform: none;
    filter: none;
}


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

.services-area {
    margin-top:
        72px;
}

.services-heading {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom:
        28px;

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease .62s,
        transform .9s cubic-bezier(.16,1,.3,1) .62s;
}

.about.visible
.services-heading {
    opacity: 1;

    transform:
        translateY(0);
}

.services-heading-index {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(72,229,255,.22);

    color:
        var(--cyan);

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

    font-size:
        8px;

    letter-spacing:
        1px;
}

.services-heading h3 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(26px,3vw,38px);

    font-weight:
        500;

    letter-spacing:
        -1.5px;
}

.services-grid {
    display: grid;

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

    gap:
        16px;
}

.service-card {
    position: relative;

    min-height:
        310px;

    padding:
        26px;

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

    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.025),
            rgba(2,4,9,.38)
        );

    overflow:
        hidden;

    opacity:
        0;
}

.service-card:nth-child(1) {
    transform:
        translateX(-65px)
        translateY(22px)
        scale(.96);
}

.service-card:nth-child(2) {
    transform:
        translateY(55px)
        scale(.96);
}

.service-card:nth-child(3) {
    transform:
        translateX(65px)
        translateY(22px)
        scale(.96);
}

.about.visible
.service-card {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}

.about.visible
.service-card:nth-child(1) {
    transition:
        opacity .85s ease .78s,
        transform 1s cubic-bezier(.16,1,.3,1) .78s,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.about.visible
.service-card:nth-child(2) {
    transition:
        opacity .85s ease 1.02s,
        transform 1s cubic-bezier(.16,1,.3,1) 1.02s,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.about.visible
.service-card:nth-child(3) {
    transition:
        opacity .85s ease 1.26s,
        transform 1s cubic-bezier(.16,1,.3,1) 1.26s,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

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

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            transparent
        );

    box-shadow:
        0 0 18px rgba(72,229,255,.7);
}

.about.visible
.service-card::before {
    animation:
        cardTopLine
        1.2s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.about.visible
.service-card:nth-child(1)::before {
    animation-delay:
        .85s;
}

.about.visible
.service-card:nth-child(2)::before {
    animation-delay:
        1.1s;
}

.about.visible
.service-card:nth-child(3)::before {
    animation-delay:
        1.35s;
}

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

    position: absolute;

    top: -30%;
    left: -80%;

    width: 45%;
    height: 160%;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.09),
            rgba(255,255,255,.05),
            transparent
        );

    opacity:
        0;
}

.about.visible
.service-card::after {
    animation:
        serviceSweep
        1.8s ease-out forwards;
}

.about.visible
.service-card:nth-child(1)::after {
    animation-delay:
        1.2s;
}

.about.visible
.service-card:nth-child(2)::after {
    animation-delay:
        1.45s;
}

.about.visible
.service-card:nth-child(3)::after {
    animation-delay:
        1.7s;
}

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

    border-color:
        rgba(72,229,255,.28);

    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.055),
            rgba(2,4,9,.45)
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.22),
        0 0 25px rgba(72,229,255,.04),
        inset 0 0 30px rgba(72,229,255,.02);
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        18px;
}

.service-number,
.service-status {
    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}

.service-number {
    color:
        var(--cyan);
}

.service-status {
    color:
        rgba(255,255,255,.28);
}

.service-line {
    width: 100%;
    height: 1px;

    margin-bottom:
        25px;

    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.22),
            rgba(255,255,255,.04),
            transparent
        );
}

.service-card h4 {
    max-width:
        280px;

    color:
        var(--white);

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

    font-size:
        21px;

    line-height:
        1.18;

    font-weight:
        500;

    letter-spacing:
        -.5px;
}

.service-card p {
    margin-top:
        20px;

    color:
        var(--white-soft);

    font-size:
        14px;

    line-height:
        1.75;

    font-weight:
        300;
}


/* =====================================================
   FRASE FINAL SOBRE
===================================================== */

.about-statement {
    position: relative;

    max-width:
        900px;

    margin-top:
        58px;

    padding:
        35px 38px
        30px 40px;

    border-left:
        1px solid rgba(72,229,255,.45);

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

    border-bottom:
        1px solid rgba(255,255,255,.05);

    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.035),
            transparent 75%
        );
}

.about-statement.about-reveal {
    opacity: 0;

    transform:
        translateY(45px)
        scale(.98);

    filter:
        blur(5px);

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

.about.visible
.about-statement.about-reveal {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    animation:
        statementPulse
        1.6s ease-out
        2.05s 1;
}

.statement-mark {
    position: absolute;

    top: 6px;
    left: 18px;

    color:
        rgba(72,229,255,.16);

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

    font-size:
        70px;

    line-height:
        1;
}

.about-statement p {
    position: relative;

    z-index: 2;

    color:
        rgba(244,248,255,.78);

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

    font-size:
        clamp(20px,2.2vw,29px);

    line-height:
        1.35;

    font-weight:
        400;

    letter-spacing:
        -.7px;
}

.about-statement strong {
    color:
        var(--white);

    font-weight:
        500;
}

.statement-signature {
    display:
        block;

    margin-top:
        22px;

    color:
        rgba(72,229,255,.48);

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

    font-size:
        7px;

    letter-spacing:
        3px;
}


/* =====================================================
   AUTOMAÇÃO
===================================================== */

.automation-section {
    min-height:
        auto;

    padding-top:
        150px;

    padding-bottom:
        150px;

    background:
        radial-gradient(
            circle at 72% 50%,
            rgba(72,229,255,.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 20% 50%,
            rgba(61,168,255,.06),
            transparent 32%
        ),
        var(--black);
}

.automation-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width:
        1240px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(540px,1.2fr);

    gap:
        72px;

    align-items:
        center;
}

.automation-copy {
    max-width:
        560px;
}

.automation-copy
.eyebrow {
    margin-bottom:
        20px;

    opacity: 0;

    transform:
        translateX(-38px);

    filter:
        blur(6px);

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

.automation-section.visible
.automation-copy
.eyebrow {
    opacity: 1;

    transform:
        translateX(0);

    filter:
        blur(0);
}

.automation-copy h2 {
    font-size:
        clamp(44px,5vw,72px);

    letter-spacing:
        -4px;

    opacity: 0;

    transform:
        translateX(-58px)
        translateY(12px);

    filter:
        blur(9px);

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

.automation-section.visible
.automation-copy h2 {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0);

    filter:
        blur(0);
}

.automation-copy h2 span:last-child {
    display:
        block;

    color:
        var(--cyan);
}

.automation-description {
    margin-top:
        26px;

    color:
        rgba(190,204,220,.88);

    font-size:
        16px;

    line-height:
        1.78;

    font-weight:
        300;

    opacity: 0;

    transform:
        translateY(32px);

    filter:
        blur(4px);
}

.automation-description:nth-of-type(2) {
    transition:
        opacity .8s ease .32s,
        transform .9s cubic-bezier(.16,1,.3,1) .32s,
        filter .8s ease .32s;
}

.automation-description:nth-of-type(3) {
    transition:
        opacity .8s ease .48s,
        transform .9s cubic-bezier(.16,1,.3,1) .48s,
        filter .8s ease .48s;
}

.automation-section.visible
.automation-description {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


/* =====================================================
   GRÁFICO
===================================================== */

.automation-chart {
    --mouse-x: 50%;
    --mouse-y: 50%;

    position: relative;

    width: 100%;

    min-height:
        465px;

    padding:
        28px;

    border:
        1px solid rgba(72,229,255,.32);

    background:
        radial-gradient(
            circle at var(--mouse-x) var(--mouse-y),
            rgba(72,229,255,.09),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            rgba(18,36,52,.72),
            rgba(4,12,20,.86)
        );

    box-shadow:
        inset 0 0 70px rgba(72,229,255,.04),
        inset 0 0 12px rgba(72,229,255,.06),
        0 0 50px rgba(0,0,0,.38),
        0 0 30px rgba(72,229,255,.045);

    overflow:
        hidden;

    opacity: 0;

    transform:
        translateX(55px)
        translateY(30px)
        scale(.96);

    filter:
        blur(8px)
        brightness(.78);

    transition:
        opacity 1s ease .48s,
        transform 1.15s cubic-bezier(.16,1,.3,1) .48s,
        filter 1s ease .48s,
        border-color .4s ease,
        box-shadow .4s ease,
        background .25s ease;
}

.automation-section.visible
.automation-chart {
    opacity: 1;

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

    filter:
        blur(0)
        brightness(1);
}

.automation-section.chart-active
.automation-chart {
    animation:
        chartAmbientPulse
        4.5s ease-in-out infinite;
}

.automation-chart:hover {
    border-color:
        rgba(72,229,255,.5);

    box-shadow:
        inset 0 0 80px rgba(72,229,255,.055),
        inset 0 0 14px rgba(72,229,255,.08),
        0 0 55px rgba(0,0,0,.4),
        0 0 38px rgba(72,229,255,.08);
}

.automation-chart::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(72,229,255,.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(72,229,255,.065) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 88%
        );

    pointer-events:
        none;

    opacity:
        .9;

    animation:
        chartGridMove
        14s linear infinite;
}

.automation-chart::after {
    content: "";

    position: absolute;

    width: 180%;
    height: 2px;

    left: -40%;
    top: -5%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.95),
            rgba(255,255,255,.8),
            rgba(72,229,255,.95),
            transparent
        );

    box-shadow:
        0 0 20px rgba(72,229,255,.8),
        0 0 8px rgba(255,255,255,.35);

    opacity:
        0;

    pointer-events:
        none;
}

.automation-section.chart-active
.automation-chart::after {
    animation:
        chartScanner
        3.6s linear infinite;
}

.chart-header,
.chart-footer {
    position: relative;

    z-index: 5;

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

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

    font-size:
        8px;

    letter-spacing:
        2.5px;

    color:
        rgba(230,241,250,.62);
}

.chart-header {
    padding-bottom:
        16px;

    border-bottom:
        1px solid rgba(72,229,255,.12);
}

.chart-live {
    display: flex;
    align-items: center;

    gap:
        8px;

    color:
        rgba(72,229,255,.95);

    text-shadow:
        0 0 12px rgba(72,229,255,.3);
}

.chart-live i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 9px var(--cyan),
        0 0 18px rgba(72,229,255,.45);

    animation:
        livePulse
        1.15s ease-in-out infinite;
}

.chart-comparison {
    position: relative;

    z-index: 4;

    margin-top:
        30px;

    display: grid;

    grid-template-columns:
        1fr 78px 1fr;

    gap:
        18px;

    align-items:
        stretch;
}

.chart-column {
    position: relative;

    padding:
        22px;

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

    background:
        rgba(3,10,17,.72);
}

.manual-column {
    border-color:
        rgba(188,204,220,.16);

    background:
        linear-gradient(
            145deg,
            rgba(130,150,170,.075),
            rgba(3,9,15,.72)
        );
}

.automated-column {
    border-color:
        rgba(72,229,255,.31);

    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.09),
            rgba(3,13,22,.78)
        );

    box-shadow:
        inset 0 0 34px rgba(72,229,255,.04),
        0 0 24px rgba(72,229,255,.025);
}

.automation-section.chart-active
.automated-column {
    animation:
        automatedPanelGlow
        3.4s ease-in-out infinite;
}

.chart-column-title {
    display: flex;
    align-items: center;

    gap:
        10px;

    min-height:
        34px;

    margin-bottom:
        28px;

    color:
        rgba(240,247,255,.72);

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

    font-size:
        8px;

    line-height:
        1.45;

    letter-spacing:
        1.6px;
}

.chart-index {
    color:
        rgba(72,229,255,.92);
}

.metric {
    margin-bottom:
        26px;
}

.metric-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        12px;

    margin-bottom:
        10px;

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

    font-size:
        8px;

    line-height:
        1.4;

    letter-spacing:
        .8px;
}

.metric-info span {
    color:
        rgba(225,236,246,.62);
}

.metric-info strong {
    color:
        rgba(255,255,255,.9);

    font-size:
        9px;

    font-weight:
        600;

    white-space:
        nowrap;
}

.automated-column
.metric-info strong {
    color:
        var(--cyan);
}

.metric-track {
    position: relative;

    width: 100%;
    height: 7px;

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

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

    overflow:
        hidden;
}

.metric-fill {
    position: relative;

    width: 0;
    height: 100%;

    transform-origin:
        left center;

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

.metric-fill::after {
    content: "";

    position: absolute;

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

    width: 42px;
    height: 10px;

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

    filter:
        blur(4px);

    opacity:
        0;
}

.automation-section.chart-active
.metric-fill::after {
    animation:
        metricShine
        1.8s linear infinite;
}

.manual-fill {
    background:
        linear-gradient(
            90deg,
            rgba(150,170,190,.38),
            rgba(205,218,230,.65)
        );
}

.automated-fill {
    background:
        linear-gradient(
            90deg,
            rgba(61,168,255,.85),
            var(--cyan)
        );

    box-shadow:
        0 0 15px rgba(72,229,255,.55),
        0 0 5px rgba(72,229,255,.5);
}

.metric-complete {
    animation:
        metricComplete
        1.2s ease-out 1;
}

.chart-state {
    display: flex;
    align-items: center;

    gap:
        9px;

    margin-top:
        30px;

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

    font-size:
        7px;

    line-height:
        1.4;

    letter-spacing:
        1.4px;
}

.chart-state span {
    width: 6px;
    height: 6px;

    flex:
        0 0 auto;

    border-radius:
        50%;
}

.manual-state {
    color:
        rgba(225,235,245,.48);
}

.manual-state span {
    background:
        rgba(220,230,240,.5);
}

.automated-state {
    color:
        rgba(72,229,255,.92);
}

.automated-state span {
    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan),
        0 0 15px rgba(72,229,255,.4);

    animation:
        statusPulse
        1.3s ease-in-out infinite;
}

.chart-transform {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.transform-line {
    position: absolute;

    width: 1px;
    height: 82%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(72,229,255,.65),
            transparent
        );

    animation:
        transformLinePulse
        1.7s ease-in-out infinite;
}

.transform-core {
    position: relative;

    z-index: 4;

    width: 52px;
    height: 52px;

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

    border:
        1px solid rgba(72,229,255,.7);

    border-radius:
        50%;

    background:
        rgba(3,12,20,.98);

    box-shadow:
        0 0 24px rgba(72,229,255,.18),
        inset 0 0 18px rgba(72,229,255,.10);

    animation:
        transformCore
        2s ease-in-out infinite;
}

.transform-core::before {
    content: "";

    position: absolute;

    inset:
        -7px;

    border:
        1px dashed rgba(72,229,255,.18);

    border-radius:
        50%;

    animation:
        transformRing
        8s linear infinite;
}

.transform-core span {
    color:
        var(--cyan);

    font-size:
        24px;

    animation:
        arrowMove
        1.15s ease-in-out infinite;
}

.transform-label {
    position: relative;

    z-index: 5;

    margin-top:
        20px;

    color:
        rgba(72,229,255,.82);

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

    font-size:
        7px;

    letter-spacing:
        1.8px;

    writing-mode:
        vertical-rl;
}

.chart-data-stream {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 57px;

    height: 2px;

    display: flex;

    gap:
        9px;

    opacity:
        .75;
}

.chart-data-stream span {
    flex: 1;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    animation:
        dataStream
        1.45s ease-in-out infinite;
}

.chart-data-stream span:nth-child(2) { animation-delay:.10s; }
.chart-data-stream span:nth-child(3) { animation-delay:.20s; }
.chart-data-stream span:nth-child(4) { animation-delay:.30s; }
.chart-data-stream span:nth-child(5) { animation-delay:.40s; }
.chart-data-stream span:nth-child(6) { animation-delay:.50s; }
.chart-data-stream span:nth-child(7) { animation-delay:.60s; }
.chart-data-stream span:nth-child(8) { animation-delay:.70s; }
.chart-data-stream span:nth-child(9) { animation-delay:.80s; }
.chart-data-stream span:nth-child(10) { animation-delay:.90s; }
.chart-data-stream span:nth-child(11) { animation-delay:1s; }
.chart-data-stream span:nth-child(12) { animation-delay:1.1s; }

.chart-footer {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 20px;

    padding-top:
        12px;

    border-top:
        1px solid rgba(72,229,255,.09);

    font-size:
        7px;

    color:
        rgba(218,231,242,.42);
}


/* =====================================================
   SOLUÇÕES
===================================================== */

.projects-content
.eyebrow {
    opacity: 0;

    transform:
        translateX(-38px);

    filter:
        blur(6px);

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

.projects.visible
.projects-content
.eyebrow {
    opacity: 1;

    transform:
        translateX(0);

    filter:
        blur(0);
}

.projects h2 {
    opacity: 0;

    transform:
        translateX(-60px)
        translateY(12px);

    filter:
        blur(9px);

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

.projects.visible
h2 {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0);

    filter:
        blur(0);
}

.projects-description {
    opacity: 0;

    transform:
        translateY(34px);

    filter:
        blur(5px);

    transition:
        opacity .85s ease .32s,
        transform .95s cubic-bezier(.16,1,.3,1) .32s,
        filter .85s ease .32s;
}

.projects.visible
.projects-description {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}

.solutions-grid {
    display: grid;

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

    gap:
        22px;

    margin-top:
        64px;
}


/* =====================================================
   CARDS SOLUÇÕES
===================================================== */

.solution-card {
    position: relative;

    min-height:
        760px;

    padding:
        28px 28px 78px;

    border:
        1px solid rgba(72,229,255,.16);

    background:
        linear-gradient(
            150deg,
            rgba(72,229,255,.035),
            rgba(5,10,17,.95) 35%,
            rgba(2,4,9,.98)
        );

    box-shadow:
        inset 0 0 50px rgba(72,229,255,.018),
        0 20px 60px rgba(0,0,0,.24);

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateY(55px)
        scale(.97);

    filter:
        blur(6px);

    transition:
        opacity .95s ease,
        transform 1.05s cubic-bezier(.16,1,.3,1),
        filter .95s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.projects.visible
.solution-card:nth-child(1) {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    transition-delay:
        .50s;
}

.projects.visible
.solution-card:nth-child(2) {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    transition-delay:
        .68s;
}

.projects.visible
.solution-card:nth-child(3) {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    transition-delay:
        .86s;
}

.solution-card:hover {
    transform:
        translateY(-7px)
        scale(1.005);

    border-color:
        rgba(72,229,255,.34);

    box-shadow:
        inset 0 0 65px rgba(72,229,255,.035),
        0 25px 70px rgba(0,0,0,.32),
        0 0 30px rgba(72,229,255,.045);
}

.solution-card-featured {
    border-color:
        rgba(72,229,255,.26);

    background:
        linear-gradient(
            150deg,
            rgba(72,229,255,.055),
            rgba(6,16,25,.96) 35%,
            rgba(2,4,9,.98)
        );
}

.solution-card-wide {
    grid-column:
        1 / -1;

    min-height:
        auto;

    padding-bottom:
        82px;

    border-color:
        rgba(72,229,255,.28);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(72,229,255,.075),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(72,229,255,.045),
            rgba(5,12,20,.96) 40%,
            rgba(2,4,9,.99)
        );
}

.solution-card-wide
.solution-card-title h3 {
    max-width:
        880px;

    font-size:
        clamp(34px,4.2vw,58px);
}

.solution-card-content-wide {
    display: grid;

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

    gap:
        24px 28px;
}

.solution-card-content-wide
.solution-result-wide {
    grid-column:
        1 / -1;
}

.solution-result-wide {
    min-height:
        140px;

    align-items:
        center;
}

.solution-card-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    right: -120px;
    top: -120px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(72,229,255,.12),
            transparent 70%
        );

    filter:
        blur(18px);

    opacity:
        .55;

    pointer-events:
        none;

    animation:
        solutionGlow
        4.5s ease-in-out infinite;
}

.solution-card-scan {
    position: absolute;

    top: -10%;
    left: -25%;

    width: 150%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.8),
            rgba(255,255,255,.5),
            rgba(72,229,255,.8),
            transparent
        );

    box-shadow:
        0 0 18px rgba(72,229,255,.48);

    opacity:
        0;

    pointer-events:
        none;
}

.projects.visible
.solution-card-scan {
    animation:
        solutionScan
        4.3s linear infinite;
}

.solution-card-header {
    position: relative;

    z-index: 3;

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

    gap:
        18px;
}

.solution-card-index {
    display: flex;
    align-items: center;

    gap:
        13px;
}

.solution-card-index > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(72,229,255,.30);

    color:
        var(--cyan);

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

    font-size:
        8px;

    letter-spacing:
        1px;
}

.solution-card-index small {
    color:
        rgba(230,240,250,.42);

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

    font-size:
        7px;

    letter-spacing:
        2px;
}

.solution-card-status {
    display: flex;
    align-items: center;

    gap:
        7px;

    color:
        rgba(72,229,255,.72);

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

    font-size:
        6px;

    letter-spacing:
        1.5px;

    white-space:
        nowrap;
}

.solution-card-status i {
    width: 5px;
    height: 5px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

    animation:
        statusPulse
        1.5s ease-in-out infinite;
}

.solution-card-line {
    width: 100%;
    height: 1px;

    margin:
        22px 0 26px;

    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.28),
            rgba(255,255,255,.055),
            transparent
        );
}

.solution-card-title {
    position:
        relative;

    z-index:
        3;
}

.solution-category {
    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        rgba(72,229,255,.78);

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

    font-size:
        7px;

    letter-spacing:
        2px;
}

.solution-card-title h3 {
    max-width:
        520px;

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

    font-size:
        clamp(30px,3vw,42px);

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -2px;

    color:
        var(--white);
}

.solution-client {
    display: flex;
    align-items: center;

    gap:
        10px;

    margin-top:
        18px;

    color:
        rgba(228,238,248,.58);

    font-size:
        12px;
}

.solution-client span {
    color:
        rgba(72,229,255,.70);

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

    font-size:
        6px;

    letter-spacing:
        1.5px;
}

.solution-card-content {
    position:
        relative;

    z-index:
        3;

    display: flex;
    flex-direction: column;

    gap:
        25px;

    margin-top:
        34px;
}

.solution-info {
    position:
        relative;

    padding-left:
        15px;

    border-left:
        1px solid rgba(255,255,255,.07);
}

.solution-info-label {
    display:
        block;

    margin-bottom:
        9px;

    color:
        rgba(72,229,255,.72);

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

    font-size:
        7px;

    letter-spacing:
        1.7px;
}

.solution-info p {
    color:
        rgba(190,204,219,.86);

    font-size:
        14px;

    line-height:
        1.72;

    font-weight:
        300;
}

.solution-tags {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px;
}

.solution-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        28px;

    padding:
        0 11px;

    border:
        1px solid rgba(72,229,255,.16);

    background:
        rgba(72,229,255,.035);

    color:
        rgba(215,232,245,.72);

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

    font-size:
        6px;

    letter-spacing:
        1px;
}

.solution-result {
    position: relative;

    display: grid;

    grid-template-columns:
        46px 1fr;

    gap:
        15px;

    align-items:
        start;

    padding:
        20px;

    border:
        1px solid rgba(72,229,255,.15);

    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.055),
            rgba(72,229,255,.015)
        );
}

.solution-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border:
        1px solid rgba(72,229,255,.32);

    border-radius:
        50%;

    color:
        var(--cyan);

    font-size:
        18px;

    animation:
        resultPulse
        2.6s ease-in-out infinite;
}

.solution-result p {
    color:
        rgba(210,223,235,.88);

    font-size:
        14px;

    line-height:
        1.7;
}

.solution-card-footer {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 22px;

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

    gap:
        15px;

    padding-top:
        15px;

    border-top:
        1px solid rgba(72,229,255,.07);

    color:
        rgba(210,224,236,.28);

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

    font-size:
        6px;

    letter-spacing:
        1.6px;
}




/* =====================================================
   SOLICITAR NOVO PROJETO
===================================================== */

.project-request {
    position: relative;
    min-height: auto;
    padding: 150px 8%;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(72,229,255,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 78%,
            rgba(61,168,255,.04),
            transparent 28%
        ),
        var(--black-soft);
}

.project-request::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(72,229,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72,229,255,.04) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%
        );
}

.project-request-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.project-request-copy {
    max-width: 850px;
    margin-bottom: 62px;
}

.project-request-copy .eyebrow {
    margin-bottom: 18px;
}

.project-request-copy h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(48px,6vw,88px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -5px;
}

.project-request-copy h2 span {
    display: block;
}

.project-request-title-main {
    color: var(--white);
}

.project-request-copy h2 span:last-child {
    color: var(--cyan);
    font-family: "Exo 2", sans-serif;
    font-weight: 600;
    letter-spacing: -2px;
    text-shadow: 0 0 28px rgba(72,229,255,.10);
}

.project-request-description {
    max-width: 760px;
    margin-top: 28px;
    color: var(--white-soft);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
}

.project-request-form {
    position: relative;
    border: 1px solid rgba(72,229,255,.16);
    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.025),
            rgba(3,8,14,.94)
        );
    box-shadow:
        inset 0 0 60px rgba(72,229,255,.018),
        0 24px 70px rgba(0,0,0,.24);
    overflow: hidden;
}

.project-request-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            transparent 80%
        );
    box-shadow: 0 0 18px rgba(72,229,255,.35);
}

.project-form-block {
    position: relative;
    display: grid;
    grid-template-columns: 58px 260px minmax(0,1fr);
    gap: 24px;
    padding: 34px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.project-form-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(72,229,255,.26);
    color: var(--cyan);
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    background: rgba(72,229,255,.025);
}

.project-form-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.project-form-heading > span {
    color: rgba(241,247,253,.90);
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    line-height: 1.55;
    letter-spacing: 1.8px;
}

.project-form-heading small {
    color: rgba(190,204,219,.43);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 300;
}

.project-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.project-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

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

.project-field > span {
    color: rgba(72,229,255,.70);
    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    letter-spacing: 1.4px;
}

.project-field input,
.project-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.10);
    outline: none;
    border-radius: 0;
    background: rgba(2,6,11,.78);
    color: var(--white);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.project-field textarea {
    min-height: 150px;
    resize: vertical;
}

.project-field input::placeholder,
.project-field textarea::placeholder {
    color: rgba(190,204,219,.30);
}

.project-field input:focus,
.project-field textarea:focus {
    border-color: rgba(72,229,255,.48);
    background: rgba(4,12,20,.92);
    box-shadow:
        0 0 0 1px rgba(72,229,255,.05),
        0 0 22px rgba(72,229,255,.045);
}

.project-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.project-option {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.project-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-option > span {
    position: relative;
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 12px 15px 12px 43px;
    border: 1px solid rgba(255,255,255,.085);
    background: rgba(2,7,12,.60);
    color: rgba(216,228,239,.70);
    font-size: 13px;
    line-height: 1.45;
    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.project-option > span::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    border: 1px solid rgba(72,229,255,.30);
    background: rgba(72,229,255,.02);
    box-shadow: inset 0 0 0 3px rgba(2,7,12,.95);
    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.project-option input[type="radio"] + span::before {
    border-radius: 50%;
}

.project-option:hover > span {
    color: var(--white);
    border-color: rgba(72,229,255,.22);
    background: rgba(72,229,255,.035);
    transform: translateY(-1px);
}

.project-option input:checked + span {
    color: var(--white);
    border-color: rgba(72,229,255,.48);
    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.09),
            rgba(72,229,255,.025)
        );
    box-shadow:
        inset 0 0 24px rgba(72,229,255,.025),
        0 0 16px rgba(72,229,255,.035);
}

.project-option input:checked + span::before {
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow:
        inset 0 0 0 3px rgba(2,7,12,.98),
        0 0 9px rgba(72,229,255,.55);
}

.project-option input:focus-visible + span {
    outline: 1px solid rgba(72,229,255,.55);
    outline-offset: 2px;
}

.project-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 30px 34px;
    background:
        linear-gradient(
            90deg,
            rgba(72,229,255,.035),
            transparent
        );
}

.project-form-submit > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.project-form-submit > div span {
    color: var(--white);
    font-family: "Michroma", sans-serif;
    font-size: 11px;
    letter-spacing: 1.6px;
}

.project-form-submit > div small {
    color: rgba(72,229,255,.52);
    font-family: "Orbitron", sans-serif;
    font-size: 6px;
    letter-spacing: 1.7px;
}

.project-submit-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 22px;
    border: 1px solid rgba(72,229,255,.55);
    background:
        linear-gradient(
            90deg,
            rgba(61,168,255,.13),
            rgba(72,229,255,.08)
        );
    color: var(--white);
    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.project-submit-btn span:last-child {
    color: var(--cyan);
    font-size: 18px;
    line-height: 1;
    transition: transform .3s ease;
}

.project-submit-btn:hover {
    transform: translateY(-2px);
    border-color: var(--cyan);
    background:
        linear-gradient(
            90deg,
            rgba(61,168,255,.20),
            rgba(72,229,255,.12)
        );
    box-shadow:
        0 0 26px rgba(72,229,255,.09),
        inset 0 0 22px rgba(72,229,255,.035);
}

.project-submit-btn:hover span:last-child {
    transform: translateX(4px);
}

.project-submit-btn:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.project-form-message {
    display: none;
    margin: 0 34px 30px;
    padding: 14px 16px;
    border: 1px solid rgba(72,229,255,.16);
    background: rgba(72,229,255,.035);
    color: rgba(223,236,246,.78);
    font-size: 13px;
    line-height: 1.6;
}

.project-form-message.show {
    display: block;
}

.project-form-message.success {
    border-color: rgba(72,229,255,.35);
    color: var(--cyan);
}

.project-form-message.error {
    border-color: rgba(255,255,255,.18);
    color: rgba(244,248,255,.80);
}

@media (max-width: 1050px) {

    .project-form-block {
        grid-template-columns: 50px minmax(0,1fr);
    }

    .project-form-heading {
        grid-column: 2;
    }

    .project-form-grid,
    .project-options,
    .project-field {
        grid-column: 2;
    }
}

@media (max-width: 768px) {

    .project-request {
        padding: 120px 8%;
    }

    .project-request-copy {
        margin-bottom: 42px;
    }

    .project-request-copy h2 {
        font-size: clamp(43px,11vw,68px);
        letter-spacing: -3.5px;
    }

    .project-request-copy h2 span:last-child {
        letter-spacing: -1.2px;
    }

    .project-request-description {
        font-size: 15px;
    }

    .project-form-block {
        grid-template-columns: 40px minmax(0,1fr);
        gap: 16px 14px;
        padding: 24px 20px;
    }

    .project-form-index {
        width: 34px;
        height: 34px;
    }

    .project-form-grid,
    .project-options {
        grid-template-columns: 1fr;
    }

    .project-form-submit {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
    }

    .project-submit-btn {
        width: 100%;
    }

    .project-form-message {
        margin: 0 20px 24px;
    }
}

@media (max-width: 480px) {

    .project-form-block {
        grid-template-columns: 1fr;
    }

    .project-form-index,
    .project-form-heading,
    .project-form-grid,
    .project-options,
    .project-field {
        grid-column: 1;
    }

    .project-form-index {
        margin-bottom: 2px;
    }

    .project-form-heading {
        margin-bottom: 6px;
    }

    .project-option > span {
        padding-right: 12px;
    }
}


/* =====================================================
   ENCERRAMENTO
===================================================== */

.closing {
    position: relative;

    min-height:
        100vh;

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

    padding:
        120px 10%;

    text-align:
        center;

    overflow:
        hidden;

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

    background:
        radial-gradient(
            circle at center,
            rgba(61,168,255,.11),
            transparent 45%
        ),
        var(--black);
}

.closing-grid {
    position: absolute;

    inset:
        0;

    opacity:
        .18;

    background-image:
        linear-gradient(
            rgba(72,229,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(72,229,255,.05) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;
}

.closing-fox {
    position: absolute;

    width:
        650px;

    left: 50%;
    bottom: -230px;

    transform:
        translateX(-50%);

    opacity:
        .06;

    filter:
        grayscale(1)
        brightness(1.8)
        drop-shadow(0 0 60px rgba(72,229,255,.25));

    pointer-events:
        none;
}

.closing-fox img {
    width: 100%;
    height: auto;
}

.closing-content {
    position: relative;

    z-index: 3;

    max-width:
        1000px;
}

.closing-content
.eyebrow {
    opacity: 0;

    transform:
        translateY(25px);

    filter:
        blur(5px);

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

.closing.visible
.closing-content
.eyebrow {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}

.closing h2 {
    margin-bottom:
        40px;

    opacity: 0;

    transform:
        translateY(55px)
        scale(.96);

    filter:
        blur(10px);

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

.closing.visible
h2 {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);
}

.closing h2 span {
    display:
        block;
}

.closing-content
> p:last-child {
    color:
        var(--white-soft);

    font-size:
        16px;

    opacity: 0;

    transform:
        translateY(30px);

    filter:
        blur(4px);

    transition:
        opacity .85s ease .35s,
        transform .9s cubic-bezier(.16,1,.3,1) .35s,
        filter .85s ease .35s;
}

.closing.visible
.closing-content
> p:last-child {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


/* =====================================================
   RODAPÉ
===================================================== */

.site-footer {
    position: relative;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(72,229,255,.045),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #03070d,
            #020409
        );

    border-top:
        1px solid rgba(72,229,255,.12);

    overflow:
        hidden;
}

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.65),
            transparent
        );

    box-shadow:
        0 0 12px rgba(72,229,255,.25);
}

.footer-inner {
    position: relative;

    z-index: 2;

    width:
        min(1240px,84%);

    margin:
        0 auto;

    padding:
        70px 0 55px;

    display: grid;

    grid-template-columns:
        1.3fr 1.2fr .8fr .7fr;

    gap:
        50px;
}

.footer-brand-name {
    font-family:
        "Michroma",
        sans-serif;

    font-size:
        16px;

    font-weight:
        400;

    letter-spacing:
        2px;

    color:
        var(--white);

    text-shadow:
        0 0 14px rgba(72,229,255,.08);
}

.footer-brand p {
    max-width:
        330px;

    margin-top:
        16px;

    color:
        rgba(185,199,214,.64);

    font-size:
        13px;

    line-height:
        1.75;

    font-weight:
        300;
}

.footer-contact,
.footer-location,
.footer-social {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}

.footer-label {
    display:
        block;

    margin-bottom:
        20px;

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

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

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        2.2px;
}

.footer-link,
.footer-location-row {
    display: flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(220,231,241,.65);

    font-size:
        12px;

    line-height:
        1.5;
}

.footer-link {
    margin-bottom:
        14px;

    text-decoration:
        none;

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

.footer-link:hover {
    color:
        var(--white);

    transform:
        translateX(3px);
}

.footer-whatsapp:hover {
    color:
        var(--cyan);
}

.footer-contact-icon {
    display: inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    color:
        rgba(72,229,255,.72);
}

.footer-contact-icon svg {
    width:
        15px;

    height:
        15px;
}

.footer-location-row {
    color:
        rgba(220,231,241,.60);
}

.social-links {
    display: flex;

    align-items:
        center;

    gap:
        10px;
}

.social-link {
    position: relative;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid rgba(72,229,255,.14);

    color:
        rgba(215,229,241,.60);

    background:
        rgba(72,229,255,.025);

    text-decoration:
        none;

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

.social-link svg {
    width:
        18px;

    height:
        18px;
}

.social-link:hover {
    color:
        var(--cyan);

    border-color:
        rgba(72,229,255,.38);

    background:
        rgba(72,229,255,.06);

    transform:
        translateY(-3px);

    box-shadow:
        0 0 18px rgba(72,229,255,.08);
}


/* =====================================================
   RODAPÉ — LINHA FINAL
===================================================== */

.footer-bottom {
    width:
        min(1240px,84%);

    margin:
        0 auto;

    padding:
        22px 0 28px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    color:
        rgba(205,219,232,.27);

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

    font-size:
        6px;

    letter-spacing:
        1.7px;
}


/* =====================================================
   ANIMAÇÕES
===================================================== */

@keyframes gridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            80px 80px;
    }
}

@keyframes centralLight {

    0%,
    100% {
        opacity:
            .55;

        transform:
            translate(-50%,-50%)
            scale(.9);
    }

    50% {
        opacity:
            1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}

@keyframes foxFloat {

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

    50% {
        transform:
            translateY(-12px)
            scale(1.015);
    }
}

@keyframes foxBreath {

    0%,
    100% {
        opacity:
            .15;
    }

    50% {
        opacity:
            .20;
    }
}

@keyframes foxAura {

    0%,
    100% {
        opacity:
            .4;

        transform:
            scale(.9);
    }

    50% {
        opacity:
            .8;

        transform:
            scale(1.05);
    }
}

@keyframes ringRotate {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }
}

@keyframes ringRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0);
    }
}

@keyframes ringPulse {

    0%,
    100% {
        opacity:
            .25;

        transform:
            scale(.96);
    }

    50% {
        opacity:
            .7;

        transform:
            scale(1.03);
    }
}

@keyframes foxScan {

    0% {
        top:
            15%;

        opacity:
            0;
    }

    15% {
        opacity:
            .8;
    }

    80% {
        opacity:
            .7;
    }

    100% {
        top:
            85%;

        opacity:
            0;
    }
}

@keyframes digitalPoint {

    0%,
    100% {
        opacity:
            0;

        transform:
            scale(.5);
    }

    50% {
        opacity:
            .9;

        transform:
            scale(1.5);
    }
}

@keyframes techLineOne {

    0% {
        left:
            -40%;

        opacity:
            0;
    }

    15%,
    85% {
        opacity:
            .7;
    }

    100% {
        left:
            110%;

        opacity:
            0;
    }
}

@keyframes techLineTwo {

    0% {
        right:
            -30%;

        opacity:
            0;
    }

    15%,
    85% {
        opacity:
            .7;
    }

    100% {
        right:
            110%;

        opacity:
            0;
    }
}

@keyframes statusPulse {

    0%,
    100% {
        opacity:
            .4;

        transform:
            scale(.82);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.25);
    }
}

@keyframes livePulse {

    0%,
    100% {
        opacity:
            .45;

        transform:
            scale(.75);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.3);
    }
}

@keyframes scrollLine {

    0%,
    100% {
        opacity:
            .25;

        transform:
            scaleY(.6);
    }

    50% {
        opacity:
            1;

        transform:
            scaleY(1);
    }
}

@keyframes cardTopLine {

    from {
        transform:
            scaleX(0);

        opacity:
            0;
    }

    to {
        transform:
            scaleX(1);

        opacity:
            1;
    }
}

@keyframes serviceSweep {

    0% {
        left:
            -80%;

        opacity:
            0;
    }

    20% {
        opacity:
            1;
    }

    75% {
        opacity:
            .6;
    }

    100% {
        left:
            140%;

        opacity:
            0;
    }
}

@keyframes statementPulse {

    0% {
        box-shadow:
            inset 0 0 0 rgba(72,229,255,0);
    }

    45% {
        box-shadow:
            inset 25px 0 50px rgba(72,229,255,.06);
    }

    100% {
        box-shadow:
            inset 0 0 0 rgba(72,229,255,0);
    }
}

@keyframes chartScanner {

    0% {
        top:
            -5%;

        opacity:
            0;
    }

    10% {
        opacity:
            .95;
    }

    88% {
        opacity:
            .8;
    }

    100% {
        top:
            105%;

        opacity:
            0;
    }
}

@keyframes chartGridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            34px 34px,
            34px 34px;
    }
}

@keyframes chartAmbientPulse {

    0%,
    100% {
        box-shadow:
            inset 0 0 70px rgba(72,229,255,.04),
            0 0 25px rgba(72,229,255,.03);
    }

    50% {
        box-shadow:
            inset 0 0 82px rgba(72,229,255,.065),
            0 0 38px rgba(72,229,255,.075);
    }
}

@keyframes automatedPanelGlow {

    0%,
    100% {
        border-color:
            rgba(72,229,255,.28);
    }

    50% {
        border-color:
            rgba(72,229,255,.46);
    }
}

@keyframes metricShine {

    0% {
        transform:
            translateX(-55px);

        opacity:
            0;
    }

    22% {
        opacity:
            1;
    }

    100% {
        transform:
            translateX(70px);

        opacity:
            0;
    }
}

@keyframes metricComplete {

    0% {
        filter:
            brightness(1);
    }

    45% {
        filter:
            brightness(1.7);
    }

    100% {
        filter:
            brightness(1);
    }
}

@keyframes transformCore {

    0%,
    100% {
        transform:
            scale(.94);
    }

    50% {
        transform:
            scale(1.09);
    }
}

@keyframes transformRing {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }
}

@keyframes arrowMove {

    0%,
    100% {
        transform:
            translateX(-4px);
    }

    50% {
        transform:
            translateX(5px);
    }
}

@keyframes transformLinePulse {

    0%,
    100% {
        opacity:
            .3;
    }

    50% {
        opacity:
            1;
    }
}

@keyframes dataStream {

    0% {
        transform:
            translateX(-18px)
            scaleX(.08);

        opacity:
            .12;
    }

    50% {
        transform:
            translateX(0)
            scaleX(1);

        opacity:
            1;
    }

    100% {
        transform:
            translateX(18px)
            scaleX(.08);

        opacity:
            .12;
    }
}

@keyframes solutionGlow {

    0%,
    100% {
        opacity:
            .35;

        transform:
            scale(.9);
    }

    50% {
        opacity:
            .75;

        transform:
            scale(1.08);
    }
}

@keyframes solutionScan {

    0% {
        top:
            -10%;

        opacity:
            0;
    }

    12% {
        opacity:
            .75;
    }

    82% {
        opacity:
            .45;
    }

    100% {
        top:
            110%;

        opacity:
            0;
    }
}

@keyframes resultPulse {

    0%,
    100% {
        transform:
            scale(.96);
    }

    50% {
        transform:
            scale(1.05);
    }
}


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

@media (max-width: 1100px) {

    .site-header {
        left: 4%;
        right: 4%;
    }

    .header-right {
        gap: 14px;
    }

    .header-status {
        font-size: 7px;

        letter-spacing:
            1.8px;
    }

    .footer-inner {
        grid-template-columns:
            repeat(2,1fr);

        gap:
            45px 60px;
    }
}

@media (max-width: 1050px) {

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

    .automation-content {
        grid-template-columns:
            1fr;
    }

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

    .solution-card {
        min-height:
            auto;

        padding-bottom:
            85px;
    }

    .solution-card-wide {
        grid-column:
            auto;
    }

    .solution-card-content-wide {
        grid-template-columns:
            1fr;
    }

    .solution-card-content-wide
    .solution-result-wide {
        grid-column:
            auto;
    }
}


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

@media (max-width: 768px) {

    .hero {
        min-height:
            100svh;
    }

    .site-header {
        top: 18px;
        left: 5%;
        right: 5%;

        gap:
            12px;
    }

    .brand {
        gap:
            9px;
    }

    .brand img {
        width:
            48px;

        height:
            48px;
    }

    .brand-name {
        gap:
            4px;

        letter-spacing:
            1.5px;
    }

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

    .brand-name span {
        font-size:
            6px;

        letter-spacing:
            1.2px;
    }

    .header-right {
        gap:
            0;
    }

    .header-status {
        display:
            none;
    }

    .language-switch {
        gap:
            10px;
    }

    .language-btn {
        gap:
            4px;

        padding:
            3px 1px;
    }

    .language-flag {
        width:
            24px;

        height:
            17px;
    }

    .language-code {
        font-size:
            6px;

        letter-spacing:
            .7px;
    }

    .hero-grid {
        width:
            220%;

        height:
            160%;

        left:
            -60%;

        background-size:
            55px 55px;
    }

    .fox-container {
        width:
            620px;

        max-width:
            none;

        top:
            51%;
    }

    .fox-logo {
        width:
            68%;

        opacity:
            .12;
    }

    .hero-content {
        width:
            86%;

        padding:
            110px 0 80px;
    }

    .eyebrow {
        font-size:
            7px;

        letter-spacing:
            3px;
    }

    .hero h1 {
        font-size:
            clamp(44px,12vw,70px);

        letter-spacing:
            -3.5px;
    }

    .about,
    .projects,
    .automation-section {
        padding:
            120px 8%;
    }

    .section-label {
        top:
            45px;

        left:
            8%;
    }

    .about h2,
    .projects h2,
    .closing h2,
    .automation-copy h2 {
        font-size:
            clamp(43px,11vw,68px);

        letter-spacing:
            -3.5px;
    }

    .about h2 span:last-child,
    .projects h2 span:last-child,
    .closing h2 span:last-child,
    .automation-copy h2 span:last-child {
        letter-spacing:
            -1.2px;
    }

    .about-description {
        font-size:
            16px;
    }

    .services-grid {
        gap:
            12px;
    }

    .service-card {
        padding:
            23px;
    }

    .automation-content {
        gap:
            42px;
    }

    .automation-chart {
        min-height:
            690px;

        padding:
            19px;
    }

    .chart-comparison {
        grid-template-columns:
            1fr;
    }

    .chart-transform {
        height:
            64px;

        flex-direction:
            row;
    }

    .transform-line {
        width:
            74%;

        height:
            1px;
    }

    .transform-label {
        margin-top:
            0;

        writing-mode:
            horizontal-tb;
    }

    .chart-footer {
        font-size:
            5px;

        letter-spacing:
            1px;
    }

    .projects-description {
        font-size:
            15px;
    }

    .solutions-grid {
        margin-top:
            46px;

        gap:
            16px;
    }

    .solution-card,
    .solution-card-wide {
        min-height:
            auto;

        padding:
            22px 20px 82px;
    }

    .solution-card-header {
        align-items:
            flex-start;
    }

    .solution-card-status {
        font-size:
            5px;

        white-space:
            normal;

        text-align:
            right;

        max-width:
            120px;
    }

    .solution-card-title h3,
    .solution-card-wide
    .solution-card-title h3 {
        font-size:
            clamp(30px,9vw,42px);

        letter-spacing:
            -1.5px;
    }

    .solution-client {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .solution-card-content,
    .solution-card-content-wide {
        display:
            flex;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            30px;
    }

    .solution-info p,
    .solution-result p {
        font-size:
            13px;
    }

    .solution-result {
        grid-template-columns:
            38px 1fr;

        gap:
            12px;

        padding:
            17px 15px;
    }

    .solution-result-wide {
        min-height:
            auto;
    }

    .solution-result-icon {
        width:
            34px;

        height:
            34px;

        font-size:
            15px;
    }

    .solution-card-footer {
        left:
            20px;

        right:
            20px;

        font-size:
            5px;

        letter-spacing:
            1px;
    }

    .background-number {
        font-size:
            300px;

        right:
            -50px;

        bottom:
            -40px;
    }

    .closing {
        padding:
            100px 8%;
    }

    .closing-fox {
        width:
            600px;

        bottom:
            -160px;
    }


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

    .footer-inner {
        width:
            86%;

        grid-template-columns:
            1fr;

        gap:
            38px;

        padding:
            55px 0 42px;
    }

    .footer-brand p {
        max-width:
            100%;
    }

    .footer-bottom {
        width:
            86%;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        padding:
            20px 0 24px;
    }
}


/* =====================================================
   CELULARES MENORES
===================================================== */

@media (max-width: 480px) {

    .site-header {
        left:
            4%;

        right:
            4%;
    }

    .brand img {
        width:
            44px;

        height:
            44px;
    }

    .brand-name strong {
        font-size:
            13px;
    }

    .brand-name span {
        font-size:
            5px;

        letter-spacing:
            1px;
    }

    .language-switch {
        gap:
            7px;
    }

    .language-flag {
        width:
            22px;

        height:
            16px;
    }

    .language-code {
        font-size:
            5px;
    }

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

        letter-spacing:
            1.5px;
    }

    .footer-brand p,
    .footer-link,
    .footer-location-row {
        font-size:
            12px;
    }
}




/* =====================================================
   ATIVIDADE DO SITE
===================================================== */

.site-activity {
    position: relative;
    overflow: hidden;

    padding:
        110px 8% 100px;

    border-top:
        1px solid rgba(72,229,255,.10);

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(72,229,255,.06),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #03070d,
            #020409
        );
}

.site-activity::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,229,255,.65),
            transparent
        );

    box-shadow:
        0 0 16px rgba(72,229,255,.18);
}

.activity-grid {
    position: absolute;
    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(72,229,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(72,229,255,.045) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

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

    pointer-events:
        none;

    animation:
        activityGridMove 18s linear infinite;
}

.activity-inner {
    position: relative;

    z-index: 2;

    width:
        min(1240px,100%);

    margin:
        0 auto;
}

.activity-heading {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        42px;
}

.activity-heading .eyebrow {
    margin-bottom:
        14px;
}

.activity-heading h2 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(36px,4.8vw,64px);

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        -3px;

    color:
        var(--white);
}

.activity-online {
    display: inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 14px;

    border:
        1px solid rgba(72,229,255,.22);

    background:
        rgba(72,229,255,.035);

    color:
        rgba(72,229,255,.90);

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

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        1.8px;

    white-space:
        nowrap;
}

.activity-online-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan),
        0 0 16px rgba(72,229,255,.55);

    animation:
        activityPulse 1.4s ease-in-out infinite;
}

.activity-cards {
    display: grid;

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

    gap:
        16px;
}

.activity-card {
    position: relative;

    min-height:
        180px;

    padding:
        24px 22px;

    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.025),
            rgba(4,10,17,.88)
        );

    overflow:
        hidden;

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

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

    position: absolute;

    left: 0;
    top: 0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            rgba(61,168,255,.45),
            transparent
        );

    opacity:
        .55;
}

.activity-card::after {
    content: "";

    position: absolute;

    width:
        130px;

    height:
        130px;

    right:
        -65px;

    bottom:
        -75px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(72,229,255,.11),
            transparent 70%
        );

    filter:
        blur(10px);

    opacity:
        .45;

    pointer-events:
        none;
}

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

    border-color:
        rgba(72,229,255,.26);

    background:
        linear-gradient(
            145deg,
            rgba(72,229,255,.05),
            rgba(4,10,17,.92)
        );

    box-shadow:
        0 16px 40px rgba(0,0,0,.22),
        0 0 22px rgba(72,229,255,.035);
}

.activity-card-live {
    border-color:
        rgba(72,229,255,.24);

    box-shadow:
        inset 0 0 26px rgba(72,229,255,.025);
}

.activity-label {
    position: relative;

    z-index: 2;

    color:
        rgba(72,229,255,.72);

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

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        1.7px;
}

.activity-value {
    position: relative;

    z-index: 2;

    display: block;

    margin:
        22px 0 18px;

    color:
        var(--white);

    font-family:
        "Exo 2",
        sans-serif;

    font-size:
        clamp(24px,2.2vw,34px);

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        -1px;
}

.activity-loading {
    color:
        rgba(215,230,241,.74);

    font-size:
        clamp(16px,1.5vw,21px);

    letter-spacing:
        .5px;

    animation:
        activityLoading 1.8s ease-in-out infinite;
}

.activity-live-value {
    color:
        var(--cyan);

    text-shadow:
        0 0 16px rgba(72,229,255,.16);

    animation:
        activityLiveText 2s ease-in-out infinite;
}

.activity-region {
    font-size:
        clamp(18px,1.7vw,24px);

    line-height:
        1.15;

    letter-spacing:
        .3px;
}

.activity-note {
    position: relative;

    z-index: 2;

    color:
        rgba(205,218,231,.36);

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

    font-size:
        6px;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


/* =====================================================
   ANIMAÇÕES — ATIVIDADE
===================================================== */

@keyframes activityGridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            58px 58px,
            58px 58px;
    }
}

@keyframes activityPulse {

    0%,
    100% {
        opacity:
            .45;

        transform:
            scale(.82);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.25);
    }
}

@keyframes activityLoading {

    0%,
    100% {
        opacity:
            .45;
    }

    50% {
        opacity:
            .95;
    }
}

@keyframes activityLiveText {

    0%,
    100% {
        opacity:
            .75;
    }

    50% {
        opacity:
            1;
    }
}


/* =====================================================
   ATIVIDADE — TABLET
===================================================== */

@media (max-width: 1000px) {

    .activity-cards {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


/* =====================================================
   ATIVIDADE — MOBILE
===================================================== */

@media (max-width: 768px) {

    .site-activity {
        padding:
            90px 8% 80px;
    }

    .activity-heading {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-bottom:
            34px;
    }

    .activity-heading h2 {
        font-size:
            clamp(36px,10vw,54px);

        letter-spacing:
            -2px;
    }

    .activity-cards {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

    .activity-card {
        min-height:
            150px;
    }

    .activity-value {
        font-size:
            29px;
    }

    .activity-loading {
        font-size:
            18px;
    }

    .activity-region {
        font-size:
            21px;
    }
}


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

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

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }

    .site-header,
    .fox-container,
    .hero-copy .eyebrow,
    .hero h1,
    .scroll-indicator,
    .about-reveal,
    .services-heading,
    .service-card,
    .about-statement,
    .automation-copy .eyebrow,
    .automation-copy h2,
    .automation-description,
    .automation-chart,
    .projects-content .eyebrow,
    .projects h2,
    .projects-description,
    .solution-card,
    .closing-content .eyebrow,
    .closing h2,
    .closing-content > p:last-child {
        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        transition:
            none !important;
    }
}
/* =========================================================
   CATÁLOGO INTEGRADO — NOSSOS SISTEMAS
========================================================= */
.solutions-grid { display: none; }

.hero-systems-button { width: 100%; min-height: 58px; margin-top: 12px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(101, 231, 255, .34); background: rgba(4, 20, 31, .58); color: #bff8ff; font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 1.35px; text-decoration: none; transition: .2s ease; animation: anBotaoSuave 3.8s ease-in-out infinite; }
.hero-systems-button:hover { border-color: #62ecff; background: rgba(45, 180, 218, .16); transform: translateY(-3px); }
.hero-systems-button span:last-child { color: #4be5ff; font-size: 18px; }
.whatsapp-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(107, 255, 191, .5); border-radius: 50%; background: linear-gradient(135deg, #109b62, #18c77b); box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 0 22px rgba(49, 238, 148, .2); color: #fff; text-decoration: none; animation: anWhatsappSuave 3.6s ease-in-out infinite .3s; }
.whatsapp-flutuante svg { width: 30px; height: 30px; }
.whatsapp-flutuante:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.08); }
.whatsapp-opcoes { position: fixed; right: 22px; bottom: 92px; z-index: 91; width: 245px; padding: 14px; border: 1px solid rgba(72,229,255,.45); border-radius: 12px; background: #071725; box-shadow: 0 18px 38px rgba(0,0,0,.45); color: #dffbff; }
.whatsapp-opcoes span { display:block; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.whatsapp-opcoes a { display:block; margin-top: 8px; padding: 10px; border-radius: 8px; background: rgba(72,229,255,.07); color:#c7f8ff; font-size:12px; line-height:1.45; text-decoration:none; }
.whatsapp-opcoes a:hover { background: rgba(72,229,255,.16); }
@keyframes anBotaoSuave { 0%,100% { box-shadow: 0 0 0 rgba(72,229,255,0); } 50% { box-shadow: 0 0 18px rgba(72,229,255,.2); } }
@keyframes anWhatsappSuave { 0%,100% { box-shadow: 0 12px 30px rgba(0,0,0,.32), 0 0 0 rgba(49,238,148,0); } 50% { box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 24px rgba(49,238,148,.35); } }
@media (max-width: 620px) { .whatsapp-flutuante { right: 14px; bottom: 14px; width: 48px; height: 48px; } .whatsapp-flutuante svg { width: 25px; height: 25px; } }

/* Movimento visível e padronização dos acessos rápidos da capa. */
.hero a[href="#solicitar-projeto"],
.hero-systems-button {
    animation: anMovimentoBotao 2.8s ease-in-out infinite !important;
    will-change: transform, box-shadow;
}

.hero-systems-button { animation-delay: .45s !important; }

.whatsapp-flutuante {
    background: linear-gradient(135deg, #071b2a, #0b3043) !important;
    border-color: rgba(72, 229, 255, .62) !important;
    color: #65ecff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 20px rgba(72,229,255,.16) !important;
    animation: anMovimentoChat 3.1s ease-in-out infinite !important;
}

@keyframes anMovimentoBotao {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 7px rgba(72,229,255,.08); }
    50% { transform: translateY(-6px); box-shadow: 0 0 24px rgba(72,229,255,.34); }
}

@keyframes anMovimentoChat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.035); }
}

/* Conteúdo interno em largura ampla: remove as faixas vazias laterais. */
.about-content,
.projects-content,
.automation-content,
.project-request-content,
.closing-content,
.site-activity-content {
    width: calc(100% - 80px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.catalogo-home-intro,
.catalogo-home-intro > p:last-child,
.projects-description,
.project-request-copy,
.project-request-description {
    max-width: 900px;
}

.catalogo-home-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

@media (min-width: 1500px) {
    .catalogo-home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .about-content,
    .projects-content,
    .automation-content,
    .project-request-content,
    .closing-content,
    .site-activity-content { width: calc(100% - 32px) !important; }
}

/* Legibilidade: amplia e clareia os textos auxiliares do site. */
.eyebrow,
.section-label,
.service-status,
.solution-info-label,
.solution-category,
.solution-card-index small,
.catalogo-home-categoria,
.catalogo-home-busca,
.catalogo-filtro,
.catalogo-home-cta,
.footer-label,
.header-status,
.statement-signature {
    color: rgba(210, 243, 250, .88) !important;
}

.eyebrow,
.section-label,
.service-status,
.solution-info-label,
.solution-category,
.solution-card-index small,
.catalogo-home-categoria,
.catalogo-home-busca,
.catalogo-filtro,
.catalogo-home-cta,
.footer-label {
    font-size: 12px !important;
}

.header-status,
.statement-signature { font-size: 12px !important; }
.catalogo-home-card p,
.catalogo-home-intro > p:last-child,
.projects-description,
.project-request-description { color: rgba(224, 239, 246, .82) !important; }

/* Cada imagem ocupa uma área própria e aparece inteira no card. */
.catalogo-home-card { display: flex; flex-direction: column; }
.catalogo-home-imagem {
    height: auto !important;
    aspect-ratio: 982 / 637;
    padding: 10px;
    background: linear-gradient(145deg, rgba(21, 63, 82, .78), rgba(5, 15, 25, .96)) !important;
}
.catalogo-home-imagem img {
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 7px;
}
.catalogo-home-card-corpo { min-height: 238px !important; }
@media (max-width: 620px) { .catalogo-home-imagem { min-height: 0 !important; } }

.catalogo-home { margin-top: 74px; padding-top: 58px; border-top: 1px solid rgba(100, 219, 255, .16); }
.catalogo-home-intro { max-width: 760px; }
.catalogo-home-intro h3 { margin: 10px 0 14px; color: #f7fbff; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }
.catalogo-home-intro > p:last-child { max-width: 690px; color: rgba(220, 236, 245, .7); font-size: 16px; line-height: 1.7; }
.catalogo-home-filtros { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 40px 0 28px; }
.catalogo-home-busca { display: grid; gap: 8px; min-width: min(100%, 360px); color: #99b8c9; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.catalogo-home-busca input { width: 100%; padding: 14px 16px; border: 1px solid rgba(111, 213, 255, .21); border-radius: 8px; background: rgba(3, 15, 25, .72); color: #f2fbff; outline: none; }
.catalogo-home-busca input:focus { border-color: #4ee5ff; box-shadow: 0 0 0 3px rgba(78, 229, 255, .1); }
.catalogo-home-categorias { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.catalogo-filtro { padding: 10px 13px; border: 1px solid rgba(133, 205, 236, .2); border-radius: 999px; background: transparent; color: #9db8c7; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.catalogo-filtro:hover, .catalogo-filtro.ativo { border-color: #52defe; background: rgba(70, 217, 255, .11); color: #eaffff; }
.catalogo-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.catalogo-home-card { overflow: hidden; border: 1px solid rgba(130, 212, 244, .15); border-radius: 12px; background: linear-gradient(145deg, rgba(12, 29, 43, .9), rgba(4, 13, 23, .9)); transition: transform .22s ease, border-color .22s ease; }
.catalogo-home-card:hover { transform: translateY(-5px); border-color: rgba(79, 223, 255, .52); }
.catalogo-home-card[hidden] { display: none; }
.catalogo-home-imagem { height: 220px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 35% 20%, rgba(65, 194, 255, .35), transparent 50%), #071522; }
.catalogo-home-imagem img { width: 100%; height: 100%; object-fit: cover; }
.catalogo-home-imagem span { color: #73e6ff; font-size: 42px; font-weight: 800; letter-spacing: .08em; }
.catalogo-home-card-corpo { display: flex; flex-direction: column; align-items: flex-start; min-height: 252px; padding: 22px; }
.catalogo-home-categoria { color: #64ddf6; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.catalogo-home-card h4 { display: -webkit-box; margin: 10px 0; overflow: hidden; color: #f6fbff; font-size: 22px; line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalogo-home-card p { display: -webkit-box; margin: 0; overflow: hidden; color: rgba(211, 229, 238, .7); font-size: 14px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalogo-home-cta { margin-top: auto; padding-top: 22px; color: #75e8ff; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.catalogo-home-cta span { margin-left: 8px; font-size: 17px; }
.catalogo-home-cta.indisponivel { color: #8b9ca5; cursor: default; }
.catalogo-home-vazio { grid-column: 1 / -1; padding: 36px; border: 1px dashed rgba(119, 211, 243, .23); border-radius: 10px; color: #94aebc; text-align: center; }
@media (max-width: 980px) { .catalogo-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalogo-home-filtros { align-items: stretch; flex-direction: column; } .catalogo-home-categorias { justify-content: flex-start; } }
@media (max-width: 620px) { .catalogo-home { margin-top: 50px; padding-top: 45px; } .catalogo-home-grid { grid-template-columns: 1fr; } .catalogo-home-categorias { gap: 7px; } .catalogo-filtro { padding: 9px 10px; font-size: 10px; } }
/* AJUSTE FINAL DOS CARDS — IMAGEM INTEIRA E TAMANHO REDUZIDO */
.catalogo-home-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important;
    justify-content: center !important;
    align-items: start !important;
}

.catalogo-home-card {
    width: 100% !important;
    max-width: 340px !important;
}

.catalogo-home-imagem {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.catalogo-home-imagem img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
}

.catalogo-home-card-corpo {
    min-height: 220px !important;
    padding: 18px !important;
}

.catalogo-home-card p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
}

@media (max-width: 620px) {
    .catalogo-home-grid {
        grid-template-columns: 1fr !important;
    }

    .catalogo-home-card {
        max-width: 360px !important;
        margin: 0 auto !important;
    }
}

/* AJUSTE FINAL DOS BOTOES MOBILE */
@media (max-width: 768px) {
    .hero {
        min-height: 100svh !important;
        height: auto !important;
    }

    .hero-content {
        width: auto !important;
        min-height: 100svh !important;
        height: auto !important;
        margin: 0 !important;
        padding: 145px 20px 90px !important;
        justify-content: flex-start !important;
    }

    .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-copy > div[style] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
        transform: none !important;
    }

    .hero a[href="#solicitar-projeto"],
    .hero-systems-button {
        width: 100% !important;
        min-height: 52px !important;
        padding: 0 17px !important;
        font-size: 8px !important;
    }

    .hero-systems-button {
        margin-top: 10px !important;
    }
}