.gradient-bg {
    background: linear-gradient(180deg, #0a4980 0%, #1573b3 100%);
}

.gradient-blue-vertical {
    background: linear-gradient(180deg, #1573b3 0%, #0a4980 100%);
}

.hero-circles::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: #062f59;
    border-radius: 50%;
    top: 10%;
    right: 15%;
    z-index: -1;
    box-shadow: 0 0 80px rgba(0, 229, 255, 0.2);
}

.hero-circles::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: #79caff;
    border-radius: 50%;
    bottom: -5%;
    right: -5%;
    z-index: -1;
    box-shadow: 0 0 50px rgba(121, 202, 255, 0.4);
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float-delayed {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out infinite 1s;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 229, 255, 0);
    }

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

.btn-glow {
    animation: pulse-glow 2.5s infinite;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.accordion-content p {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion-item.active .accordion-content {
    grid-template-rows: 1fr;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.accordion-item.active .accordion-content p {
    opacity: 1;
    transform: translateY(0);
}

.accordion-item.active .fa-plus {
    transform: rotate(45deg);
}

.accordion-item button .fa-plus {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

body,
header,
section,
.accordion-item,
.accordion-content,
#portais {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode {
    background-color: #07131f;
    color: #e5eef7;
}

body.dark-mode #portais {
    background-color: #0b1724;
}

body.dark-mode section.bg-white {
    background-color: #101d2b;
}

body.dark-mode .gradient-bg {
    background: linear-gradient(180deg, #061e35 0%, #0a385b 100%);
}

body.dark-mode .gradient-blue-vertical {
    background: linear-gradient(180deg, #0a385b 0%, #051e35 100%);
}

body.dark-mode header {
    background-color: rgba(5, 24, 41, 0.92) !important;
    border-color: rgba(121, 202, 255, 0.18);
}

body.dark-mode header .text-brand-blueDark,
body.dark-mode header .border-brand-blueDark {
    color: #d9ecff;
    border-color: #d9ecff;
}

body.dark-mode #webposto {
    background-color: #04122a;
}

body.dark-mode #webposto .bg-brand-green,
body.dark-mode .bg-brand-green {
    background-color: #365b0a;
}

body.dark-mode #webposto .hover\:bg-\[\#4a7206\]:hover,
body.dark-mode .hover\:bg-\[\#68a00b\]:hover {
    background-color: #476f11;
}

body.dark-mode .bg-brand-redLight {
    background-color: #9d2727;
}

body.dark-mode footer {
    background-color: #061b2e;
    border-color: rgba(121, 202, 255, 0.15);
}

body.dark-mode .bg-\[\#0f4673\] {
    background-color: #0a2c47;
}

body.dark-mode .bg-gray-900 {
    background-color: #050b12;
}

body.dark-mode .accordion-item {
    background-color: rgba(18, 34, 49, 0.96);
    border-color: rgba(121, 202, 255, 0.15);
}

body.dark-mode .accordion-item button {
    color: #e5eef7;
}

body.dark-mode .accordion-content {
    background-color: rgba(8, 20, 32, 0.85);
    color: #b9c8d8;
    border-color: #294256;
}

body.dark-mode #portais h3 {
    color: #b9c8d8;
}

body.dark-mode section.bg-white h2 {
    color: #d9ecff;
}

body.dark-mode section.bg-white p {
    color: #aebfd0;
}

body.dark-mode section.bg-white .bg-brand-blueDark\/10 {
    background-color: rgba(121, 202, 255, 0.12);
}

body.dark-mode section.bg-white .text-brand-blueDark {
    color: #79caff;
}

.brand-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

.webposto-logo {
    max-height: 84px;
    width: auto;
    object-fit: contain;
    object-position: left;
}

.single-logo {
    max-height: 84px;
    width: auto;
    object-fit: contain;
}

.logo-placeholder {
    width: 176px;
    height: 48px;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.logo-placeholder.logo-placeholder-light {
    border-color: #7190a8;
    color: #52718a;
}

body.dark-mode .logo-placeholder-light {
    border-color: #86b8db;
    color: #b9dcf5;
}

html {
    scroll-snap-type: none;
}

@media (max-width: 767px) {
    html {
        scroll-snap-type: y proximity;
    }
}


:root {
    --navy-950: #0B2136;
    --navy-900: #0F2942;
    --navy-800: #163A5C;
    --navy-700: #1E4A73;
    --blue-500: #2E7DD2;
    --blue-600: #1D63B0;
    --green-600: #4F7A2A;
    --green-700: #3F6321;
    --ink: #122236;
    --slate-500: #5B6B7C;
    --slate-300: #B9C4CF;
    --paper: #F4F7FA;
    --line: #E3E9EF;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--paper);
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.font-display {
    font-family: 'Manrope', sans-serif;
}

.grain {
    background-image: radial-gradient(var(--navy-700) 0.6px, transparent 0.6px);
    background-size: 14px 14px;
    opacity: 0.10;
}

.card-tool {
    background: linear-gradient(155deg, var(--navy-800), var(--navy-950));
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background .35s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 24px -18px rgba(11, 33, 54, 0.6);
}

.card-tool:hover {
    transform: translateY(-4px);
    background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
    box-shadow: 0 20px 34px -18px rgba(11, 33, 54, 0.55);
}

.card-tool .arrow-circle {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.card-tool:hover .arrow-circle {
    transform: translateX(4px);
    background: var(--blue-500);
}

.eyebrow {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    color: var(--blue-600);
}

.cta-primary {
    background: var(--green-600);
    transition: background .25s ease, transform .2s ease;
}

.cta-primary:hover {
    background: var(--green-700);
    transform: translateY(-1px);
}

.chat-shell {
    background: #FFFFFF;
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -30px rgba(15, 41, 66, 0.35);
}

.bubble-in {
    animation: riseIn .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slate-500);
    animation: bounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: .15s;
}

.typing-dot:nth-child(3) {
    animation-delay: .3s;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .4;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.section-label {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--ink);
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--blue-500);
    margin-right: 10px;
    vertical-align: middle;
}

.social-btn {
    transition: background .2s ease, transform .2s ease;
}

.social-btn:hover {
    background: var(--blue-500);
    transform: translateY(-2px);
}

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

    .card-tool,
    .card-tool .arrow-circle,
    .bubble-in,
    .typing-dot,
    .social-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* Menu de soluções */
.solutions-dropdown {
    position: relative;
}

.solutions-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 10px;
    color: white;
    transition: color .25s ease;
}

.solutions-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 0;
    height: 2px;
    background: #00e5ff;
    transition: width .25s ease;
}

.solutions-trigger i {
    font-size: 10px;
    transition: transform .25s ease;
}

.solutions-dropdown:hover .solutions-trigger,
.solutions-dropdown:focus-within .solutions-trigger,
.solutions-dropdown.is-open .solutions-trigger { color: #00e5ff; }

.solutions-dropdown:hover .solutions-trigger::after,
.solutions-dropdown:focus-within .solutions-trigger::after,
.solutions-dropdown.is-open .solutions-trigger::after { width: 100%; }

.solutions-dropdown:hover .solutions-trigger i,
.solutions-dropdown:focus-within .solutions-trigger i,
.solutions-dropdown.is-open .solutions-trigger i { transform: rotate(180deg); }

.solutions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: 270px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(6,38,65,.97);
    box-shadow: 0 18px 45px rgba(0,0,0,.3);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.solutions-dropdown:hover .solutions-menu,
.solutions-dropdown:focus-within .solutions-menu,
.solutions-dropdown.is-open .solutions-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.solutions-menu a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border-radius: 10px;
    color: white;
    transition: background .2s ease, transform .2s ease;
}

.solutions-menu a:hover,
.solutions-menu a:focus-visible {
    background: rgba(21,115,179,.5);
    transform: translateX(3px);
    outline: none;
}

.solutions-menu a > i {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(121,202,255,.12);
    color: #79caff;
}

.solutions-menu span { display: grid; gap: 2px; text-align: left; }
.solutions-menu strong { font-size: 14px; }
.solutions-menu small { color: #b8d3e7; font-size: 11px; font-weight: 500; }

.counter-value {
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
}

/* Navegação compacta para celulares */
.mobile-menu-toggle {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255,255,255,.82);
    border-radius: 50%;
    color: white;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle[aria-expanded="true"] { background: white; color: #0a4980; }
.mobile-menu-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.mobile-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 18px;
    right: 18px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(5,35,60,.98);
    box-shadow: 0 22px 50px rgba(0,0,0,.35);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top;
    transition: opacity .24s ease, visibility .24s, transform .24s ease;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.mobile-menu > a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 11px;
    color: white;
    font-size: 14px;
    font-weight: 650;
}
.mobile-menu > a:hover,
.mobile-menu > a:focus-visible { background: rgba(21,115,179,.42); outline: none; }
.mobile-menu > a > i { width: 25px; color: #79caff; text-align: center; }
.mobile-menu-label { margin: 8px 12px 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); color: #79caff; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mobile-solution span { display: grid; gap: 1px; }
.mobile-solution small { color: #b8d3e7; font-size: 10px; font-weight: 500; }
.mobile-client { margin-top: 8px; border: 1px solid rgba(255,255,255,.22); justify-content: center; }
.mobile-menu > a[aria-current="page"] { background: rgba(21,115,179,.5); border-color: rgba(121,202,255,.5); }
.single-page .mobile-menu > a[aria-current="page"] { background: rgba(237,27,36,.18); }
.single-page .mobile-menu > a[aria-current="page"] > i { color: #ff646a; }
@media (min-width:768px) { .mobile-menu-toggle { display: none !important; } }

/* Identidade visual da página Single */
.single-page .solutions-trigger::after { background: #ed1b24; }
.single-page .solutions-dropdown:hover .solutions-trigger,
.single-page .solutions-dropdown:focus-within .solutions-trigger,
.single-page .solutions-dropdown.is-open .solutions-trigger { color: #ff5960; }
.single-page .solutions-menu a[aria-current="page"] { background: rgba(237,27,36,.16); }
.single-page .solutions-menu a > i { color: #ff646a; background: rgba(237,27,36,.12); }
.single-page > section.snap-section { isolation: isolate; overflow: hidden; }
.single-page > section.snap-section::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: -2vw;
    bottom: 2vh;
    width: min(460px, 38vw);
    height: 190px;
    background-image: url('https://singlesys.com.br/resources/single-banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .085;
    pointer-events: none;
    animation: single-watermark-drift 14s ease-in-out infinite alternate;
}
.single-page > section.snap-section:nth-of-type(odd)::before { left: auto; right: -3vw; }
.single-page > section[class*="from-[#003f63]"]::before,
.single-page > section[class*="from-[#005f95]"]::before { opacity: .11; }
.single-page .single-hero::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    right: 7%;
    top: 17%;
    z-index: 0;
    border: 2px solid rgba(237,27,36,.2);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(237,27,36,.035);
    animation: single-ring-pulse 6s ease-in-out infinite;
}
.single-product-logo { filter: drop-shadow(0 16px 25px rgba(0,0,0,.28)); }
.single-page .single-footer { padding-block: 24px; }
.single-page .single-footer .footer-identity img { width: 180px; }
@keyframes single-watermark-drift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(22px,-14px,0); }
}
@keyframes single-ring-pulse {
    0%,100% { transform: scale(.94); opacity: .55; }
    50% { transform: scale(1.04); opacity: 1; }
}
@media(max-width:767px) {
    .single-page > section.snap-section::before { width: 68vw; height: 120px; bottom: 2vh; opacity: .06; }
    .single-page .single-hero::after { width: 210px; height: 210px; right: -55px; top: 18%; }
    .single-page .single-footer .footer-identity img { width: 160px; }
}
@media(prefers-reduced-motion:reduce) {
    .single-page > section.snap-section::before,
    .single-page .single-hero::after { animation: none; }
}

/* Tela inicial: foto original, com a van a direita e degradê de leitura. */
#inicio.hero-home {
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    background: linear-gradient(180deg, #0a4980, #1573b3);
}

#inicio .hero-photo {
    position: absolute;
    top: 64px;
    right: -6vw;
    width: 72%;
    max-width: none;
    height: auto;
    z-index: -2;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

#inicio.hero-home::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, #0e548c 0%, rgba(15, 88, 143, .98) 30%, rgba(16, 91, 145, .88) 43%, rgba(12, 76, 124, .3) 65%, rgba(9, 57, 94, .05) 100%);
}

#inicio .hero-copy {
    position: relative;
    z-index: 1;
    width: 52%;
    padding-right: 0;
}

#inicio .hero-copy h1 {
    font-size: clamp(2.25rem, 3.2vw, 3.75rem);
    line-height: 1.08;
    max-width: 12em;
}

#inicio .hero-copy>div.mb-6 {
    display: none;
}

#inicio .hero-copy>a {
    animation: none;
}

#inicio .hero-copy>p {
    max-width: 31rem;
}

body.dark-mode #inicio.hero-home {
    background: linear-gradient(180deg, #061e35, #0a385b);
}

body.dark-mode #inicio.hero-home::after {
    background: linear-gradient(90deg, #061e35 0%, rgba(6, 30, 53, .96) 30%, rgba(6, 30, 53, .85) 43%, rgba(6, 30, 53, .48) 65%, rgba(6, 30, 53, .25));
}

@media (min-width: 768px) {
    #inicio.hero-home {
        padding-top: 136px;
        padding-bottom: 104px;
    }

    #inicio main {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    #inicio.hero-home {
        padding-top: 112px;
        padding-bottom: 104px;
    }

    #inicio .hero-copy {
        width: 100%;
    }

    #inicio .hero-photo {
        width: 100%;
        height: calc(100% - 64px);
        right: 0;
        object-fit: cover;
        object-position: 60% center;
        opacity: .4;
    }

    #inicio .hero-copy>a {
        padding-inline: 20px;
        font-size: 14px;
    }
}

/* Presença da marca: arquivos originais, com versão branca via CSS. */
header .brand-logo-prominent {
    width: 200px;
    max-height: 52px;
    padding: 0;
    opacity: 1;
    filter: brightness(0) invert(1);
}

#servicos {
    isolation: isolate;
    padding-block: 112px;
    scroll-margin-top: 76px;
}

#servicos .services-layout {
    max-width: 1280px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
}

.services-watermark {
    position: absolute;
    width: min(630px, 55vw);
    left: -160px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .065;
    filter: brightness(0) invert(1);
    pointer-events: none;
    z-index: 0;
}

.services-logo {
    width: 270px;
    max-width: 85%;
    height: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 38px;
}

.services-logo-white {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .22)) !important;
    -webkit-filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .22)) !important;
}

.services-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #85e5ff;
    margin-bottom: 16px;
}

.services-intro h2 {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    color: white;
    max-width: 12em;
    margin-bottom: 24px;
}

.services-description {
    color: #d6e9f7;
    font-size: 17px;
    line-height: 1.8;
    max-width: 440px;
}

.services-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    color: white;
    font-weight: 700;
    padding: 15px 20px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: #578608;
    box-shadow: 0 12px 28px rgba(41,76,5,.32);
    transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.services-contact:hover {
    color: white;
    background: #68a00b;
    transform: translateY(-3px);
    box-shadow: 0 17px 34px rgba(41,76,5,.4);
}

.services-contact .fa-arrow-right {
    margin-left: 4px;
    transition: transform .25s ease;
}

.services-contact:hover .fa-arrow-right {
    transform: translateX(4px);
}

#servicos .accordion-item {
    border-radius: 14px;
}

#servicos .accordion-item button {
    min-height: 88px;
}

.brand-footer {
    padding-block: 32px;
}

.footer-identity img {
    width: 200px;
    height: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 14px;
}

.footer-identity p {
    color: #bed2e2;
}

/* Portal do cliente: marca d'agua e rodape com assinatura visivel. */
.client-portal-hero {
    isolation: isolate;
}

.client-portal-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(360px, 42vw, 660px);
    aspect-ratio: 1;
    left: clamp(-250px, -12vw, -120px);
    top: 50%;
    transform: translateY(-44%) rotate(-7deg);
    background: url("assets/tecnoexpress-symbol.png") center / contain no-repeat;
    opacity: .075;
    filter: grayscale(1) saturate(0) contrast(1.3);
    pointer-events: none;
    animation: client-watermark-float 10s ease-in-out infinite alternate;
}

.client-portal-hero > * {
    position: relative;
    z-index: 1;
}

.client-footer {
    padding-block: 30px;
    min-height: 138px;
    background: linear-gradient(120deg, #073454 0%, #0b4c79 58%, #0a3e64 100%);
}

.client-footer .footer-identity img {
    width: 190px;
    margin-bottom: 10px;
}

.client-footer-contact p:last-child {
    color: #a9c7dc;
}

@keyframes client-watermark-float {
    from { transform: translateY(-46%) rotate(-8deg) scale(.98); }
    to { transform: translateY(-41%) rotate(-4deg) scale(1.04); }
}

body.dark-mode .client-portal-hero::before {
    opacity: .1;
    filter: grayscale(1) brightness(1.7);
}

@media (max-width: 767px) {
    .client-portal-hero::before {
        width: 390px;
        left: -190px;
        top: 43%;
        opacity: .07;
    }

    .client-footer {
        padding-block: 28px;
        min-height: 250px;
    }

    .client-footer .footer-identity img {
        width: 175px;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-portal-hero::before { animation: none; }
}

.services-contact:focus-visible {
    outline: 2px solid #85e5ff;
    outline-offset: 6px;
}

@media (max-width: 1023px) {
    header .brand-logo-prominent {
        width: 160px;
    }
}

@media (max-width: 767px) {
    #servicos {
        padding-block: 88px;
    }

    #servicos .services-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-logo {
        width: 230px;
        margin-bottom: 28px;
    }

    .services-watermark {
        width: 440px;
        max-width: none;
        left: -180px;
        top: 120px;
        transform: none;
    }

    #servicos .accordion-item button {
        padding: 20px 16px;
        font-size: 16px;
    }

    #servicos .accordion-item button>span {
        gap: 12px;
    }

    .footer-identity {
        text-align: center;
    }

    .footer-identity img {
        margin-inline: auto;
    }

    .brand-footer>div {
        gap: 24px;
    }
}

/* Implantação e acompanhamento */
.implementation-section,
.support-section {
    position: relative;
    padding: 100px 24px;
    scroll-margin-top: 76px;
}

.implementation-section {
    background: #f4f8fc;
    color: #123a59;
    overflow: hidden;
    isolation: isolate;
}

.journey-container {
    max-width: 1232px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.implementation-watermarks {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.implementation-logo-watermark {
    position: absolute;
    width: min(620px, 48vw);
    height: auto;
    left: 50%;
    top: 52%;
    opacity: .035;
    filter: grayscale(1) contrast(1.4);
    transform: translate(-50%, -50%);
    animation: logo-watermark-breathe 14s ease-in-out infinite alternate;
}

.watermark-icon {
    position: absolute;
    color: #0875aa;
    opacity: .075;
    line-height: 1;
    will-change: transform;
    animation: watermark-drift 9s ease-in-out infinite alternate;
}

.watermark-icon-1 { font-size: 112px; top: 9%; left: 4%; transform: rotate(-12deg); animation-delay: -1s; }
.watermark-icon-2 { font-size: 80px; top: 12%; right: 7%; transform: rotate(14deg); animation-delay: -4s; animation-duration: 11s; }
.watermark-icon-3 { font-size: 92px; bottom: 9%; left: 7%; transform: rotate(7deg); animation-delay: -7s; animation-duration: 12s; }
.watermark-icon-4 { font-size: 76px; bottom: 8%; right: 8%; transform: rotate(-9deg); animation-delay: -3s; }
.watermark-icon-5 { font-size: 54px; top: 39%; left: 1.5%; animation-delay: -5s; animation-duration: 10s; }
.watermark-icon-6 { font-size: 58px; top: 43%; right: 2%; animation-delay: -8s; animation-duration: 13s; }
.watermark-icon-7 { font-size: 46px; bottom: 28%; left: 22%; transform: rotate(-18deg); animation-delay: -2s; animation-duration: 8s; }
.watermark-icon-8 { font-size: 48px; bottom: 27%; right: 22%; transform: rotate(12deg); animation-delay: -6s; animation-duration: 10s; }

@keyframes watermark-drift {
    0% { translate: 0 0; }
    50% { translate: 8px -13px; }
    100% { translate: -5px 10px; }
}

@keyframes logo-watermark-breathe {
    0% { transform: translate(-50%, -50%) scale(.94) rotate(-2deg); opacity: .025; }
    100% { transform: translate(-50%, -50%) scale(1.06) rotate(2deg); opacity: .055; }
}

/* Entrada das frases conforme cada parte da página aparece. */
.phrase-reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(3px);
    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .75s cubic-bezier(.22, 1, .36, 1),
        filter .65s ease;
    transition-delay: var(--phrase-delay, 0ms);
}

.phrase-reveal.phrase-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.journey-heading {
    max-width: 740px;
    margin: 0 auto 64px;
    text-align: center;
}

.journey-brand-logo {
    display: block;
    margin-inline: auto !important;
}

.journey-eyebrow {
    color: #0875aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: 18px;
}

.journey-heading h2,
.support-copy h2 {
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 22px;
}

.journey-heading>p:last-child {
    color: #526a7c;
    font-size: 17px;
    line-height: 1.8;
    max-width: 650px;
    margin-inline: auto;
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    list-style: none;
    padding: 0;
}

.journey-steps li {
    position: relative;
}

.journey-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 76px;
    width: calc(100% - 60px);
    height: 1px;
    background: #c2d9e8;
}

.step-number {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: white;
    background: #0b609b;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 26px;
}

.journey-steps h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 12px;
}

.journey-steps p {
    color: #526a7c;
    font-size: 15px;
    line-height: 1.8;
}

.journey-action {
    text-align: center;
    margin-top: 48px;
}

.service-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 17px 24px;
    border-radius: 9px;
    background: #578608;
    color: white;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: background .2s;
}

.service-cta:hover {
    background: #456b06;
}

.service-cta:focus-visible {
    outline: 3px solid #32c5ee;
    outline-offset: 5px;
}

.support-section {
    background: #082d4c;
    color: white;
    overflow: hidden;
}

.support-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.support-brand {
    position: relative;
    min-height: 500px;
    border: 1px solid #ffffff18;
    border-radius: 32px;
    background: radial-gradient(circle at 50% 20%, #147aa366, transparent 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.support-brand>img {
    width: 230px;
    max-width: 80%;
    height: auto;
    margin-bottom: 32px;
}

.support-brand-caption {
    text-align: center;
}

.support-brand-caption>span {
    font-size: 12px;
    letter-spacing: .2em;
    color: #8fdbf3;
    font-weight: 700;
}

.support-brand-caption p {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 15px;
}

.support-copy .journey-eyebrow {
    color: #85e5ff;
}

.support-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #c4d9e8;
}

.support-benefits {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: grid;
    gap: 22px;
}

.support-benefits li {
    display: flex;
    gap: 18px;
}

.support-benefits li>i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #ffffff0d;
    border-radius: 12px;
    color: #65d9fa;
}

.support-benefits h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
}

.support-benefits p {
    color: #c4d9e8;
    font-size: 14px;
    line-height: 1.7;
}

body.dark-mode .implementation-section {
    background: #101d2b;
    color: #e5eef7;
}

body.dark-mode .watermark-icon {
    color: #79caff;
    opacity: .09;
}

body.dark-mode .implementation-logo-watermark {
    filter: grayscale(1) brightness(2.3);
    opacity: .045;
}

body.dark-mode .journey-heading>p:last-child,
body.dark-mode .journey-steps p {
    color: #b9c8d8;
}

body.dark-mode .implementation-section .journey-eyebrow {
    color: #85e5ff;
}

body.dark-mode .support-section {
    background: #061b2e;
}

/* Paleta coerente da area do cliente no modo noturno. */
body.dark-mode.client-page {
    background: #07131f !important;
    color: #e5eef7;
}

body.dark-mode.client-page .client-portal-hero {
    background: #0b1724 !important;
}

body.dark-mode.client-page .client-portal-hero h1 {
    color: #e8f3fc !important;
}

body.dark-mode.client-page .client-portal-hero h1 + p,
body.dark-mode.client-page .client-portal-hero .chat-shell span,
body.dark-mode.client-page .client-portal-hero .chat-shell div {
    border-color: #294256;
}

body.dark-mode.client-page .client-portal-hero h1 + p {
    color: #b9c8d8 !important;
}

body.dark-mode.client-page .chat-shell {
    background: #101d2b;
    border-color: #294256;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}

body.dark-mode.client-page main .section-label {
    color: #e5eef7;
}

body.dark-mode.client-page main .section-label::before {
    background: #65d9fa;
}

body.dark-mode.client-page .card-tool {
    border: 1px solid rgba(121,202,255,.12);
    background: linear-gradient(155deg, #123552, #081d30);
}

@media(max-width:1023px) {
    .journey-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
    }

    .journey-steps li::after {
        display: none;
    }

    .support-layout {
        gap: 40px;
    }
}

@media(max-width:767px) {

    header nav {
        width: 100%;
        max-width: 100%;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    header .brand-logo-prominent {
        width: 150px;
        max-width: calc(100vw - 132px);
    }

    #inicio main,
    #inicio .hero-copy,
    #inicio .hero-copy > * {
        min-width: 0;
        max-width: 100%;
    }

    #inicio .hero-copy h1 {
        font-size: clamp(2.15rem, 10vw, 2.65rem);
        overflow-wrap: break-word;
    }

    #inicio .hero-copy > a {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }

    #inicio .hero-copy .grid-cols-3 {
        gap: 12px;
        width: 100%;
    }

    #inicio .hero-copy .grid-cols-3 > div {
        min-width: 0;
    }

    #inicio .counter-value {
        font-size: clamp(1.7rem, 8vw, 2.25rem);
    }

    .implementation-section,
    .support-section {
        padding: 76px 24px;
    }

    .journey-heading {
        text-align: center;
        margin-bottom: 40px;
    }

    .journey-heading br {
        display: none;
    }

    .journey-steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .step-number {
        margin-bottom: 16px;
    }

    .support-layout {
        grid-template-columns: 1fr;
    }

    .support-brand {
        min-height: 320px;
        padding: 28px;
    }

    .support-brand>img {
        width: 150px;
        margin-bottom: 20px;
    }

    .support-brand-caption p {
        font-size: 24px;
    }

    .service-cta {
        width: 100%;
    }

    .watermark-icon { opacity: .055; transform: scale(.72); }
    .watermark-icon-5,
    .watermark-icon-6,
    .watermark-icon-7,
    .watermark-icon-8 { display: none; }
    .implementation-logo-watermark { width: 105vw; opacity: .025; }
}

@media (prefers-reduced-motion: reduce) {
    .watermark-icon,
    .implementation-logo-watermark { animation: none; }
    .phrase-reveal { opacity: 1; transform: none; filter: none; transition: none; }
}