/* ============================================================
   AutoScore — Páginas públicas (site)
   ============================================================ */

/* ===== HERO ===== */
.hero {
    width: 100%;
    background: var(--color-primary-dark);
    color: var(--color-gray-50);
    min-height: 0;
    height: auto;
    position: relative;
    overflow-x: clip;
}
.hero::before {
    display: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    padding-block: clamp(16px, 2svh, 24px);
}

.home-hero-stack {
    position: relative;
    --home-banner-height: 560px;
}
.home-banner-rotator {
    --home-banner-image-radius: 16px;
    --home-banner-media-max: min(560px, calc(var(--home-banner-height) - 96px));
    --home-banner-nav-offset: 24px;
    position: relative;
    z-index: 1;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    overflow: hidden;
    background: var(--color-primary-dark);
}
.home-banner-rotator__nav {
    position: absolute;
    z-index: 5;
    left: 50%;
    right: auto;
    bottom: var(--home-banner-nav-offset);
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transform: translateX(-50%);
    pointer-events: auto;
}
.home-banner-rotator__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.home-banner-rotator__arrow:hover,
.home-banner-rotator__arrow:focus-visible {
    opacity: 0.85;
    outline: none;
}
.home-banner-rotator__arrow:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 55%);
}
.home-banner-rotator__arrow:active {
    transform: scale(0.96);
}
.home-banner-rotator__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 14%);
    border: 1px solid rgb(255 255 255 / 10%);
    backdrop-filter: blur(4px);
    box-shadow: none;
}
.home-banner-rotator__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1.5px solid rgb(255 255 255 / 92%);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.home-banner-rotator__dot.is-active,
.home-banner-rotator__dot[aria-selected="true"] {
    border-color: #fff;
    background: #fff;
}
.home-banner-rotator__dot:hover,
.home-banner-rotator__dot:focus-visible {
    border-color: #fff;
    outline: none;
    transform: scale(1.08);
}
.home-banner-rotator__dot:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 45%);
}
.home-banner-rotator > .home-banner[data-home-banner] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}
.home-banner-rotator > .home-banner[data-home-banner].is-active {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}
.home-banner-rotator > .hero.hero-home.home-banner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.home-banner-rotator > .hero.hero-home .hero-inner {
    width: 100%;
    max-width: var(--site-container, 1280px);
    margin-inline: auto;
    min-height: 0;
    box-sizing: border-box;
}
.home-banner-rotator > .home-banner-split {
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    box-sizing: border-box;
}
.home-banner-rotator > .home-banner-repasse {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    max-height: var(--home-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.home-banner-rotator .repasse-banner__product {
    width: 100%;
}
.home-banner-rotator .repasse-banner__product-frame {
    width: min(100%, 1200px);
    max-width: 1200px;
    aspect-ratio: 1200 / 450;
}
.home-banner-rotator .repasse-banner__product img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}
.home-banner-rotator .hero-animation {
    width: min(100%, 620px, calc(var(--home-banner-height, 600px) - 40px));
    max-height: var(--home-banner-media-max);
}
.home-banner-split {
    height: var(--home-banner-height, 560px);
    min-height: var(--home-banner-height, 560px);
    max-height: var(--home-banner-height, 560px);
    display: flex;
    align-items: center;
    color: #fff;
    padding: 24px 0;
    box-sizing: border-box;
}
.home-banner-split-inner {
    width: 100%;
    max-width: var(--site-container, 1280px);
    margin-inline: auto;
    width: min(calc(100% - 48px), 1200px);
    height: 100%;
    max-height: 100%;
    padding-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}
.home-banner-split-copy {
    width: 100%;
    max-width: 520px;
    min-width: 0;
}
.home-banner-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 14px;
    border: 1px solid rgba(83, 174, 241, 0.55);
    border-radius: 999px;
    background: rgba(83, 174, 241, 0.08);
    color: #53aef1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.home-banner-split-badge__icon {
    font-size: 13px;
    line-height: 1;
}
.home-banner-split-title-main,
.home-banner-split-title-accent {
    display: block;
}
.home-banner-split-title-accent {
    color: #53aef1;
}
.home-banner-split-features {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.home-banner-split-features li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}
.home-banner-split-features__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(83, 174, 241, 0.14);
    color: #53aef1;
    font-size: 14px;
    line-height: 1;
}
.home-banner-split-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 620px;
    max-height: 100%;
    align-self: center;
}
.home-banner-split-media__frame {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--home-banner-image-radius, 16px);
    background: transparent;
    box-shadow: none;
    overflow: visible;
    line-height: 0;
    isolation: isolate;
}
.home-banner-split-media picture {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
}
.home-banner-split-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 390px;
    object-fit: contain;
    display: block;
    border-radius: var(--home-banner-image-radius, 16px);
    clip-path: none;
}
.home-banner-rotator .home-banner-split-media__frame,
.home-banner-rotator .home-banner-split-media img {
    border-radius: var(--home-banner-image-radius, 16px);
}
.home-banner-rotator .home-banner-split-media img {
    clip-path: none;
}
.home-banner-image {
    display: block;
}
.home-banner-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.home-banner-image-media {
    aspect-ratio: 1920 / 760;
}
.home-banner-repasse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    max-height: var(--home-banner-height);
    color: #fff;
    padding: 16px 24px;
    box-sizing: border-box;
    background-color: var(--color-primary-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
}
.home-banner-repasse .repasse-banner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--site-container, 1280px);
    margin-inline: auto;
    min-height: 0;
    max-height: 100%;
    text-align: center;
    gap: 8px;
    box-sizing: border-box;
}
.home-banner-repasse .repasse-banner__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    gap: 4px;
    flex: 0 0 auto;
}
.home-banner-repasse .repasse-banner__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    margin: 0 0 2px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-self: center;
    text-align: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}
.home-banner-repasse .repasse-banner__content h1,
.home-banner-repasse .repasse-banner__intro h1 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2px;
    color: #fff;
    line-height: 0.98;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
    word-break: normal;
    align-self: center;
    text-align: center;
}
.home-banner-repasse .repasse-banner__lead,
.home-banner-repasse p.repasse-banner__lead {
    flex: 0 0 auto;
    width: min(100%, 720px);
    max-width: 720px;
    margin: 0 auto;
    padding-inline: 12px;
    color: var(--color-gray-300);
    font-size: 18px;
    line-height: 1.35;
    text-align: center;
    align-self: center;
    box-sizing: border-box;
}
.home-banner-repasse .repasse-banner__audiences {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.home-banner-repasse .repasse-banner__audience-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}
.home-banner-repasse .repasse-banner__audiences-divider {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(83, 174, 241, 0.45);
    border-radius: 50%;
    background: rgba(83, 174, 241, 0.18);
    color: #53aef1;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
}
.home-banner-repasse .repasse-banner__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    margin: 0;
}
.home-banner-repasse .repasse-banner__product-frame {
    width: min(100%, 1200px);
    max-width: 1140px;
    height: auto;
    min-height: 0;
    max-height: 100%;
    margin-inline: auto;
    aspect-ratio: 1200 / 450;
    padding: 0;
    border: 0;
    border-radius: var(--home-banner-image-radius, 16px);
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
    isolation: isolate;
}
.home-banner-repasse .repasse-banner__product img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    object-position: center;
}
.home-banner-repasse .repasse-banner__captions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
}
.home-banner-repasse .repasse-banner__captions span {
    display: block;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 320px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 28px; line-height: 1.02; }
    .home-banner-repasse .repasse-banner__lead { max-width: 300px; font-size: 14px; line-height: 1.3; }
    .home-banner-repasse .repasse-banner__audiences { max-width: 100%; gap: 3px; }
    .home-banner-repasse .repasse-banner__audience-pill { min-height: 28px; padding: 5px 5px; font-size: 8px; letter-spacing: 0.03em; }
    .home-banner-repasse .repasse-banner__audiences-divider { flex-basis: 24px; width: 24px; height: 24px; font-size: 11px; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 300px); }
    .home-banner-repasse .repasse-banner__captions { gap: 6px; margin-top: 4px; }
    .home-banner-repasse .repasse-banner__captions span { font-size: 11px; line-height: 1.2; }
}
@media (min-width: 321px) and (max-width: 576px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 34px; line-height: 1.02; }
    .home-banner-repasse .repasse-banner__lead { max-width: 440px; font-size: 16px; line-height: 1.3; }
    .home-banner-repasse .repasse-banner__audiences { max-width: 100%; gap: 4px; }
    .home-banner-repasse .repasse-banner__audience-pill { min-height: 30px; padding: 6px 7px; font-size: 9px; letter-spacing: 0.04em; }
    .home-banner-repasse .repasse-banner__audiences-divider { flex-basis: 26px; width: 26px; height: 26px; font-size: 12px; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 460px); }
    .home-banner-repasse .repasse-banner__captions span { font-size: 12px; line-height: 1.2; }
}
@media (min-width: 577px) and (max-width: 767px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 40px; line-height: 1.02; }
    .home-banner-repasse .repasse-banner__lead { max-width: 680px; font-size: 17px; line-height: 1.3; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 700px); }
    .home-banner-repasse .repasse-banner__audience-pill { font-size: 10px; padding-inline: 9px; }
    .home-banner-repasse .repasse-banner__captions span { font-size: 13px; line-height: 1.2; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 42px; line-height: 1; }
    .home-banner-repasse .repasse-banner__lead { max-width: 760px; font-size: 18px; line-height: 1.3; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 900px); }
    .home-banner-repasse .repasse-banner__audience-pill { font-size: 10px; padding-inline: 10px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 46px; line-height: 1; }
    .home-banner-repasse .repasse-banner__lead { max-width: 780px; font-size: 18px; line-height: 1.3; }
    .home-banner-repasse .repasse-banner__content { justify-content: center; align-items: center; }
    .home-banner-repasse .repasse-banner__product { flex: 0 1 auto; align-items: center; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 780px); }
    .home-banner-repasse .repasse-banner__captions { display: grid; visibility: visible; opacity: 1; }
}
@media (min-width: 1200px) {
    .home-banner-repasse .repasse-banner__content h1 { font-size: 52px; line-height: 0.98; }
    .home-banner-repasse .repasse-banner__content { justify-content: center; align-items: center; }
    .home-banner-repasse .repasse-banner__product { flex: 0 1 auto; align-items: center; }
    .home-banner-repasse .repasse-banner__product-frame { width: min(100%, 900px); }
    .home-banner-repasse .repasse-banner__captions { display: grid; visibility: visible; opacity: 1; }
}

/* Banner 01 — layout isolado do hero rotativo. */
.home-banner-rotator > .hero.hero-home.home-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--home-banner-height);
    min-height: var(--home-banner-height);
    max-height: var(--home-banner-height);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-inner {
    display: grid;
    width: min(calc(100% - 96px), 1200px);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: 48px;
    padding: 24px 0;
    box-sizing: border-box;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-copy {
    width: 100%;
    max-width: 560px;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 {
    color: #fff;
    width: 100%;
    font-weight: 800;
    overflow-wrap: normal;
    word-break: normal;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead {
    color: var(--color-gray-300);
    overflow-wrap: normal;
    word-break: normal;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-visual {
    width: 100%;
    min-width: 0;
    max-width: 560px;
    min-height: 0;
    max-height: 100%;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-animation > img,
.home-banner-rotator > .hero.hero-home.home-banner .hero-animation > picture,
.home-banner-rotator > .hero.hero-home.home-banner .hero-animation > canvas {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.home-banner-rotator > .hero.hero-home.home-banner .eyebrow {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.1em;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}
.home-banner-rotator > .hero.hero-home.home-banner .hero-ctas .btn {
    min-width: 0;
    min-height: 42px;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 320px) {
    .home-banner-rotator > .hero.hero-home.home-banner { align-items: flex-start; padding-top: 12px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner {
        grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start;
        justify-items: center; width: calc(100% - 24px); max-width: 320px; gap: 4px; padding-block: 6px; text-align: center;
    }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { align-items: center; max-width: 300px; text-align: center; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { max-width: 300px; margin-bottom: 6px; font-size: 26px; line-height: 1.02; letter-spacing: -0.025em; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 300px; margin-bottom: 8px; font-size: 14px; line-height: 1.3; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 240px; margin-inline: auto; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation .phones { transform: scale(1); }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas { flex-direction: column; gap: 6px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas .btn { width: 100%; min-height: 38px; height: 38px; padding: 7px 10px; font-size: 12px; }
}
@media (min-width: 321px) and (max-width: 576px) {
    .home-banner-rotator > .hero.hero-home.home-banner { align-items: flex-start; padding-top: 16px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner {
        grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start;
        justify-items: center; width: calc(100% - 32px); max-width: 540px; gap: 6px; padding-block: 8px; text-align: center;
    }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { align-items: center; max-width: 520px; text-align: center; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { max-width: 500px; margin-bottom: 8px; font-size: 30px; line-height: 1.02; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 500px; margin-bottom: 12px; font-size: 15px; line-height: 1.35; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 330px; margin-inline: auto; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation .phones { transform: scale(1); }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas { justify-content: center; gap: 8px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas .btn { flex: 1 1 0; min-height: 40px; height: 40px; padding: 8px 10px; font-size: 13px; }
}
@media (min-width: 577px) and (max-width: 767px) {
    .home-banner-rotator > .hero.hero-home.home-banner { align-items: flex-start; padding-top: 18px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner {
        grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start;
        justify-items: center; width: calc(100% - 40px); max-width: 700px; gap: 6px; padding-block: 10px; text-align: center;
    }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { align-items: center; max-width: 680px; text-align: center; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { max-width: 680px; margin-bottom: 8px; font-size: 36px; line-height: 1.02; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 660px; margin-bottom: 12px; font-size: 16px; line-height: 1.35; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 400px; margin-inline: auto; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation .phones { transform: scale(1); }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas { justify-content: center; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-banner-rotator > .hero.hero-home.home-banner { align-items: flex-start; padding-top: 20px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner {
        grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start;
        justify-items: center; width: calc(100% - 48px); max-width: 900px; gap: 8px; padding-block: 12px; text-align: center;
    }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { align-items: center; max-width: 820px; text-align: center; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { max-width: 820px; margin-bottom: 8px; font-size: 42px; line-height: 1.02; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 760px; margin-bottom: 12px; font-size: 16px; line-height: 1.35; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 320px; margin-inline: auto; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-ctas { justify-content: center; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner { width: calc(100% - 64px); max-width: 1080px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 32px; padding-block: 24px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { max-width: 520px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 460px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { margin-bottom: 14px; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 480px; margin-bottom: 18px; font-size: 17px; line-height: 1.4; }
}
@media (min-width: 1200px) {
    .home-banner-rotator > .hero.hero-home.home-banner .hero-inner { width: min(calc(100% - 96px), 1200px); grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 48px; padding-block: 24px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy { max-width: 560px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-visual,
    .home-banner-rotator > .hero.hero-home.home-banner .hero-animation { max-width: 560px; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 { margin: 0 0 18px; font-size: 56px; line-height: 0.98; letter-spacing: -0.035em; }
    .home-banner-rotator > .hero.hero-home.home-banner .hero-copy p.lead { max-width: 540px; margin: 0 0 24px; font-size: 19px; line-height: 1.45; }
}
@keyframes home-banner-in {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Tipografia compartilhada somente dos banners 01 e 03. */
.home-banner-rotator > .hero.hero-home h1 {
    font-size: clamp(2.6rem, 3.5vw, 4rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--color-white);
    max-width: none;
    width: 100%;
}
.home-banner-rotator > .hero.hero-home p.lead {
    font-size: 19px;
    color: var(--color-gray-300);
    line-height: 1.6;
    max-width: 800px;
}
.home-banner-rotator .eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Banner 02 (split) — implementação responsiva única. */
.home-banner-split-copy h1 {
    width: 100%;
    margin: 0 0 14px;
    color: #fff;
    font-size: 52px;
    line-height: 0.98;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
    word-break: normal;
}
.home-banner-split-copy > p.lead {
    max-width: 520px;
    margin: 0 0 20px;
    color: var(--color-gray-300);
    font-size: 18px;
    line-height: 1.45;
    overflow-wrap: normal;
}
.home-banner-split-features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
    gap: 8px 18px;
    list-style: none;
}
.home-banner-split-features li {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
}
.home-banner-split .hero-ctas {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}
.home-banner-split .hero-ctas .btn {
    min-width: 0;
    flex: 1 1 0;
    min-height: 42px;
    height: 42px;
    white-space: normal;
    text-align: center;
}
.home-banner-split .btn-outline-white {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}
.home-banner-split .btn-outline-white:hover,
.home-banner-split .btn-outline-white:focus-visible {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 320px),
       (min-width: 321px) and (max-width: 576px),
       (min-width: 577px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 991px) {
    .home-banner-split {
        align-items: flex-start;
        padding: 24px 0 18px;
    }
    .home-banner-split-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
        justify-items: center;
        width: min(calc(100% - 32px), 720px);
        height: 100%;
        gap: 10px;
        text-align: center;
    }
    .home-banner-split-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 680px;
    }
    .home-banner-split-media {
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
    }
}
@media (max-width: 320px) {
    .home-banner-split-inner { width: calc(100% - 24px); gap: 6px; }
    .home-banner-split-badge { margin-bottom: 8px; padding: 5px 10px; font-size: 9px; }
    .home-banner-split-copy h1 { max-width: 290px; margin-bottom: 8px; font-size: 24px; line-height: 1.02; }
    .home-banner-split-copy > p.lead { max-width: 292px; margin-bottom: 10px; font-size: 13px; line-height: 1.3; }
    .home-banner-split .hero-ctas { gap: 4px; flex-wrap: nowrap; }
    .home-banner-split .hero-ctas .btn { width: auto; min-height: 40px; height: 40px; padding: 6px 5px; font-size: 10px; line-height: 1.05; }
    .home-banner-split-features { gap: 5px 8px; }
    .home-banner-split-features li { gap: 5px; font-size: 11px; line-height: 1.2; }
    .home-banner-split-features__icon { width: 25px; height: 25px; border-radius: 6px; font-size: 12px; }
    .home-banner-split-media { max-width: 155px; margin-top: 4px; }
    .home-banner-split-media img { max-height: 155px; }
}
@media (min-width: 321px) and (max-width: 576px) {
    .home-banner-split-inner { gap: 8px; }
    .home-banner-split-badge { margin-bottom: 8px; padding: 6px 12px; font-size: 10px; }
    .home-banner-split-copy h1 { max-width: 440px; margin-bottom: 8px; font-size: 28px; line-height: 1.02; }
    .home-banner-split-copy > p.lead { max-width: 500px; margin-bottom: 12px; font-size: 14px; line-height: 1.35; }
    .home-banner-split .hero-ctas { max-width: 520px; gap: 6px; flex-wrap: nowrap; }
    .home-banner-split .hero-ctas .btn { width: auto; min-height: 42px; height: 42px; padding: 8px 7px; font-size: 11px; }
    .home-banner-split-features { gap: 6px 10px; }
    .home-banner-split-features li { gap: 6px; font-size: 12px; line-height: 1.2; }
    .home-banner-split-features__icon { width: 27px; height: 27px; font-size: 12px; }
    .home-banner-split-media { max-width: 210px; margin-top: 4px; }
    .home-banner-split-media img { max-height: 210px; }
}
@media (min-width: 577px) and (max-width: 767px) {
    .home-banner-split-inner { gap: 8px; }
    .home-banner-split-copy h1 { max-width: 680px; margin-bottom: 8px; font-size: 32px; line-height: 1.02; }
    .home-banner-split-copy > p.lead { max-width: 680px; margin-bottom: 12px; font-size: 15px; line-height: 1.35; }
    .home-banner-split .hero-ctas { max-width: 700px; gap: 8px; }
    .home-banner-split .hero-ctas .btn { flex: 1 1 0; min-height: 42px; height: 42px; padding: 9px 10px; font-size: 13px; }
    .home-banner-split-features { gap: 6px 12px; }
    .home-banner-split-features li { gap: 6px; font-size: 12px; }
    .home-banner-split-media { max-width: 260px; margin-top: 4px; }
    .home-banner-split-media img { max-height: 245px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-banner-split-inner { width: min(calc(100% - 48px), 900px); gap: 8px; }
    .home-banner-split-copy h1 { max-width: 850px; margin-bottom: 8px; font-size: 34px; line-height: 1.02; }
    .home-banner-split-copy > p.lead { max-width: 820px; margin-bottom: 12px; font-size: 15px; line-height: 1.35; }
    .home-banner-split .hero-ctas { max-width: 760px; gap: 10px; }
    .home-banner-split .hero-ctas .btn { flex: 1 1 0; min-height: 42px; height: 42px; padding: 9px 12px; font-size: 14px; }
    .home-banner-split-features { gap: 6px 18px; }
    .home-banner-split-features li { gap: 7px; font-size: 13px; }
    .home-banner-split-features__icon { width: 28px; height: 28px; }
    .home-banner-split-media { max-width: 300px; margin-top: 4px; }
    .home-banner-split-media img { max-height: 275px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .home-banner-split-inner { width: calc(100% - 48px); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; }
    .home-banner-split-copy { max-width: 480px; text-align: left; }
    .home-banner-split-copy h1 { font-size: 40px; line-height: 1; margin-bottom: 12px; }
    .home-banner-split-copy > p.lead { max-width: 450px; margin-bottom: 16px; font-size: 16px; line-height: 1.4; }
    .home-banner-split-media { max-width: 500px; }
    .home-banner-split-media__frame,
    .home-banner-split-media picture,
    .home-banner-split-media img { border-radius: 16px; }
    .home-banner-split-media__frame,
    .home-banner-split-media img { clip-path: inset(0 round 16px); }
    .home-banner-split-media__frame { overflow: hidden; }
    .home-banner-split-media img { max-height: 350px; }
    .home-banner-split-features { justify-content: flex-start; gap: 6px 14px; margin-top: 14px; }
    .home-banner-split-features li { font-size: 12px; }
}
@media (max-width: 320px) {
    .home-banner-rotator { --home-banner-nav-offset: 16px; }
    .home-banner-rotator__nav {
        gap: 8px;
    }
    .home-banner-rotator__arrow {
        width: 32px;
        height: 32px;
    }
    .home-banner-rotator__dots {
        gap: 8px;
        min-height: 30px;
        padding: 5px 10px;
    }
    .home-banner-rotator__dot {
        width: 8px;
        height: 8px;
    }
}
@media (min-width: 992px) and (max-width: 1199px),
       (min-width: 1200px) {
    .home-banner-rotator { --home-banner-nav-offset: 40px; }
}
@media (min-width: 1200px) {
    .home-hero-stack { --home-banner-height: 600px; }
    .home-banner-rotator { --home-banner-height: 600px; }
    .home-banner-rotator__nav {
        gap: 16px;
    }
    .home-banner-split-inner { width: min(calc(100% - 96px), 1200px); gap: 40px; }
    .home-banner-split-copy { max-width: 520px; text-align: left; }
    .home-banner-split-copy h1 { font-size: 52px; line-height: 0.98; }
    .home-banner-split-copy > p.lead { max-width: 520px; font-size: 18px; line-height: 1.45; }
    .home-banner-split-media { max-width: 620px; }
    .home-banner-split-media__frame,
    .home-banner-split-media picture,
    .home-banner-split-media img { border-radius: 16px; }
    .home-banner-split-media__frame,
    .home-banner-split-media img { clip-path: inset(0 round 16px); }
    .home-banner-split-media__frame { overflow: hidden; }
    .home-banner-split-media img { max-height: 390px; }
    .home-banner-split-features { justify-content: flex-start; gap: 8px 18px; margin-top: 14px; }
    .home-banner-split-features li { font-size: 13px; }
}

@media (max-width: 320px),
       (min-width: 321px) and (max-width: 576px),
       (min-width: 577px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 991px),
       (min-width: 992px) and (max-width: 1199px) {
    .home-hero-stack { --home-banner-height: 560px; }
    .home-banner-rotator { --home-banner-height: 560px; }
}

/* ===== AUDIÊNCIAS ===== */
.audiences {
    width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
    padding: 24px 34px 16px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 992px) and (max-width: 1199px),
       (min-width: 1200px) {
    .audiences { margin-top: -18px; }
}
@media (max-width: 320px),
       (min-width: 321px) and (max-width: 576px),
       (min-width: 577px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 991px) {
    .audiences { margin-top: 0; }
}
.audiences article {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.audiences .circle {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-primary-light);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 31px;
    line-height: 1;
}
.audiences h2 {
    margin: 0 0 8px;
    color: var(--color-primary-dark);
    font-size: 20px;
    line-height: 1.2;
}
.audiences p {
    max-width: 420px;
    margin: 0 0 10px;
    color: var(--color-gray-500);
    font-size: 14px;
    line-height: 1.45;
}
.audiences a {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}
.audiences > i {
    width: 1px;
    height: 126px;
    background: var(--color-gray-200);
}
.audiences .notice {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0;
    background: transparent;
    color: var(--color-gray-500);
    font-size: 12px;
    text-align: center;
}
.hero-inner > * {
    min-width: 0;
}
.hero-copy {
    width: 100%;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero h1 {
    color: var(--color-white);
    margin-bottom: 20px;
    font-size: clamp(2.6rem, 3.5vw, 4rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    max-width: none;
}
.hero p.lead {
    font-size: 19px;
    color: var(--color-gray-300);
    margin-bottom: 32px;
    max-width: 560px;
}
.hero-ctas {
    display: flex;
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.hero-ctas .btn {
    min-width: 0;
    white-space: normal;
    flex: 0 1 auto;
}
.hero .hero-ctas .btn {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 42px;
}
.home-banner-rotator .home-banner-split .hero-ctas .btn.btn-lg {
    padding: 10px 18px;
    font-size: 14px;
    line-height: 1.2;
    min-height: 44px;
}
.hero:not(.home-banner-split) .btn-outline-white {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Hero visual / app mockup */
.hero-visual {
    width: 100%;
    min-width: 0;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

.home-banner-rotator > .hero.hero-home.home-banner .hero-copy h1 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
}
@media (min-width: 1200px) {
    .hero-home .hero-copy h1 {
        font-size: clamp(2.25rem, 3vw, 3.5rem);
        line-height: 0.98;
    }
}
.hero-mock-app {
    max-width: 280px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    overflow: hidden;
}
.hero-mock-app img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* Float cards */
.float-card {
    position: absolute;
    background: #fff;
    color: var(--color-gray-900);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.float-card .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
}
.fc-1 {
    top: -10px;
    right: -10px;
}
.fc-2 {
    bottom: 30px;
    left: -30px;
}
.fc-3 {
    bottom: -15px;
    right: 30px;
    background: var(--color-primary);
    color: #fff;
}

/* Hero compacto — páginas internas */
.hero-compact {
    padding: 80px 0 60px;
}
.hero-compact .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
}
.hero-compact h1 {
    max-width: 760px;
    margin: 0 auto 16px;
}
.hero-compact .lead {
    margin: 0 auto 28px;
}
.hero-compact .hero-ctas {
    justify-content: center;
}

/* ===== STATS ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.stat {
    text-align: center;
    padding: 28px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}
.stat .num {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
}
.stat .lbl {
    color: var(--color-gray-600);
    font-size: 14px;
    margin-top: 6px;
}

/* ===== SPLIT (imagem + texto) ===== */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}
.split.reverse {
    direction: rtl;
}
.split.reverse > * {
    direction: ltr;
}
.split > div:not(.split-visual) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.split-visual {
    background: var(--gradient-soft);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    min-height: 0;
    width: 100%;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.split-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Garante que os blocos principais não fiquem ocultos se a animação reveal falhar */
.split.reveal,
.hero .reveal,
.hero-visual {
    opacity: 1;
    transform: none;
}

/* ===== TIMELINE (como funciona) ===== */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: tl;
}
.timeline-item {
    background: #fff;
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: 24px;
    position: relative;
    counter-increment: tl;
}
.timeline-item::before {
    content: counter(tl, decimal-leading-zero);
    position: absolute;
    top: -14px;
    left: 24px;
    background: var(--color-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}
.timeline-item h4 {
    margin-bottom: 8px;
}
.timeline-item p {
    font-size: 14px;
}

/* ===== BLOG ===== */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}
.blog-filters button {
    padding: 8px 16px;
    border-radius: 99px;
    background: var(--color-gray-100);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-700);
    transition: var(--transition-fast);
}
.blog-filters button:hover,
.blog-filters button.active {
    background: var(--color-primary);
    color: #fff;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.post-card {
    background: #fff;
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.post-img {
    aspect-ratio: 16/9;
    background: var(--gradient-primary);
    overflow: hidden;
}
.post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-body {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-body .badge {
    margin-bottom: 10px;
    align-self: flex-start;
}
.post-body h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.post-body p {
    font-size: 14.5px;
    flex: 1;
}
.post-meta {
    margin-top: 14px;
    font-size: 13px;
    color: var(--color-gray-500);
    display: flex;
    gap: 14px;
}

/* Artigo */
.article-wrap {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 60px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}
.article-body h2 {
    margin: 36px 0 14px;
    font-size: 28px;
}
.article-body h3 {
    margin: 28px 0 12px;
    font-size: 22px;
}
.article-body p {
    margin-bottom: 16px;
}
.article-hero-img {
    aspect-ratio: 21/9;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    margin: 24px 0 32px;
    overflow: hidden;
}
.article-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TOC sidebar */
.toc {
    position: sticky;
    top: 100px;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: 22px;
    font-size: 14px;
}
.toc h4 {
    margin-bottom: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
}
.toc a {
    display: block;
    padding: 6px 0;
    color: var(--color-gray-700);
}
.toc a:hover {
    color: var(--color-primary);
}

/* Busca */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 48px;
}
.search-form input {
    flex: 1;
}
.search-form-field {
    margin-bottom: 0;
    flex: 1;
}
.search-results-count {
    text-align: center;
    color: var(--color-gray-500);
    font-size: 15px;
    margin-bottom: 32px;
}
.blog-filter-pill {
    border-radius: 99px;
}
.list-gap-md {
    margin: 14px 0;
}
.badge-gap-sm {
    margin-bottom: 12px;
}
.section-narrow-780 {
    max-width: 780px;
    margin: 0 auto;
}
.faq-heading-gap {
    margin: 40px 0 18px;
}
.empty-state-full {
    grid-column: 1 / -1;
}
.empty-state-action {
    margin-top: 16px;
}
.article-compact {
    padding: 60px 0 30px;
}
.article-title-gap {
    margin: 14px 0;
}
.article-excerpt {
    font-size: 19px;
    color: var(--color-gray-600);
}
.article-meta {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--color-gray-500);
    flex-wrap: wrap;
}
.article-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-cover-placeholder {
    background: var(--gradient-primary);
}
.article-cta-gap {
    margin-top: 40px;
}
.toc-note {
    font-size: 13px;
    color: var(--color-gray-500);
}

/* ===== CONTATO ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}
.contact-info {
    background: var(--gradient-dark);
    color: #fff;
    padding: 36px;
    border-radius: var(--radius-lg);
}
.contact-info h3 {
    color: #fff;
    margin-bottom: 18px;
}
.contact-info .info-block {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.contact-info .info-block:last-child {
    border: none;
}
.contact-info .info-block h4 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.contact-info .info-block p {
    color: #fff;
    font-size: 15px;
}
.contact-info .info-block a {
    color: var(--color-primary-light);
}

/* ===== CADASTRO / LEAD ===== */
.signup-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.signup-benefits {
    background: var(--gradient-soft);
    padding: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
}
.signup-benefits h3 {
    margin-bottom: 20px;
}
.signup-benefits ul li {
    padding: 10px 0;
    display: flex;
    gap: 10px;
    font-size: 15px;
    color: var(--color-gray-700);
}
.signup-benefits ul li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230382E7' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(3, 130, 231, 0.1);
}

/* ===== CTA SECTION ===== */
.cta-section {
    background: var(--gradient-dark);
    color: #fff;
    text-align: center;
    border-radius: var(--radius-xl);
    padding: 60px 32px;
    margin: 60px auto;
    max-width: var(--container);
}
.cta-section h2 {
    color: #fff;
    margin-bottom: 14px;
}
.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 28px;
}
.cta-section .hero-ctas {
    justify-content: center;
}

/* ===== PÁGINAS LEGAIS ===== */
.legal-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}
.legal-wrap h2 {
    font-size: 24px;
    margin: 36px 0 12px;
}
.legal-wrap h3 {
    font-size: 19px;
    margin: 28px 0 10px;
}
.legal-wrap p {
    margin-bottom: 16px;
    font-size: 15px;
}
.legal-wrap ul,
.legal-wrap ol {
    margin: 12px 0 16px 24px;
}
.legal-wrap li {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--color-gray-700);
    list-style: disc;
}
.legal-date {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 32px;
}
.legal-container-narrow {
    max-width: 820px;
}
.legal-link-strong {
    font-weight: 600;
}
.legal-draft-notice {
    background: rgba(253, 176, 34, 0.12);
    border: 1px solid rgba(253, 176, 34, 0.4);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 13px;
    color: #7a4f00;
    margin-bottom: 32px;
}

/* ===== ERROS ===== */
.error-page {
    min-height: 80vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 60px 20px;
}
.error-card {
    max-width: 520px;
}
.error-code {
    font-size: 120px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    letter-spacing: -0.04em;
}
.error-card h1 {
    margin: 10px 0 14px;
    font-size: 32px;
}
.error-card p {
    font-size: 16px;
    margin-bottom: 0;
}
.error-card .btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ===== LOGIN ADMIN ===== */
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
}
.login-side {
    background: var(--gradient-dark);
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.login-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 30% 30%,
        rgba(83, 174, 241, 0.25),
        transparent 50%
    );
    pointer-events: none;
}
.login-side .brand {
    color: #fff;
    margin-bottom: 40px;
    position: relative;
}
.login-side .brand img {
    filter: brightness(0) invert(1);
}
.login-side h2 {
    color: #fff;
    margin-bottom: 14px;
    position: relative;
}
.login-side p {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    margin-bottom: 30px;
}
.login-mini-cards {
    position: relative;
    display: grid;
    gap: 10px;
}
.login-mini-cards span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}
.login-form {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}
.login-form h2 {
    margin-bottom: 8px;
}
.login-form > p {
    margin-bottom: 30px;
}
:root {
    color-scheme: dark;
    --duration: 2.08s;
    --turn-ease: cubic-bezier(0.4, 0, 0.18, 1);
    --phone-ratio: 0.4833333333;
    --phone-height: min(82vh, 700px);
    --phone-width: calc(var(--phone-height) * var(--phone-ratio));
    --phone-depth: calc(var(--phone-width) * 0.1154);
    --phone-body-depth: var(--phone-depth);
}

* {
    box-sizing: border-box;
}

.hero-animation {
    position: relative;
    min-width: 0;
    container-type: size;
    --animation-ratio: 1.55;
    --phone-height: min(100cqh, 560px, 64cqw);
    --phone-width: calc(var(--phone-height) * var(--phone-ratio));
    --phone-depth: calc(var(--phone-width) * 0.1154);
    --phone-body-depth: var(--phone-depth);
    overflow: visible;
    display: grid;
    width: min(100%, 560px);
    height: auto;
    aspect-ratio: var(--animation-ratio);
    place-items: center;
    isolation: isolate;
    background: transparent;
}

.ambient-light {
    position: absolute;
    z-index: -1;
    width: min(70vw, 1000px);
    height: min(58vh, 580px);
    border-radius: 50%;
    opacity: 0;
    background: transparent;
    filter: none;
    transform: scale(1);
}

.phones {
    position: relative;
    width: min(100%, 1220px);
    height: var(--phone-height);
    perspective: 1500px;
    perspective-origin: 50% 48%;
    transform-style: preserve-3d;
}

.phone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--phone-width);
    height: var(--phone-height);
    padding: clamp(4px, 0.45vw, 7px);
    border: 1px solid #62666a;
    border-radius: calc(var(--phone-width) * 0.145);
    opacity: 0;
    background: linear-gradient(
        105deg,
        #171716 0%,
        #8a8882 6%,
        #4b4a47 13%,
        #292927 22%,
        #1d1d1c 50%,
        #343330 78%,
        #6c6a65 94%,
        #171716 100%
    );
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 20%),
        inset 3px 0 4px rgb(255 255 255 / 9%),
        inset -3px 0 4px rgb(0 0 0 / 48%);
    contain: layout style;
    transform-style: preserve-3d;
}

.phone::before {
    position: absolute;
    z-index: 4;
    inset: 1px;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.phone::after {
    position: absolute;
    z-index: -3;
    inset: 0;
    border: 1px solid #08090a;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        #111110,
        #4a4946 12%,
        #191918 48%,
        #403f3c 88%,
        #0e0e0d
    );
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 8%),
        0 2px 3px rgb(0 0 0 / 80%);
    content: "";
    transform: translateZ(calc(var(--phone-body-depth) * -1));
}

.phone__back {
    position: absolute;
    z-index: 2;
    inset: clamp(4px, 0.45vw, 7px);
    overflow: hidden;
    border: 1px solid #242422;
    border-radius: calc(var(--phone-width) * 0.12);
    background:
        radial-gradient(
            circle at 72% 19%,
            rgb(255 255 255 / 5%),
            transparent 24%
        ),
        linear-gradient(
            112deg,
            #252523 0%,
            #343431 21%,
            #242422 48%,
            #30302e 76%,
            #1c1c1b 100%
        );
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 7%),
        inset 8px 0 18px rgb(255 255 255 / 2%),
        inset -10px 0 20px rgb(0 0 0 / 18%);
    transform: translateZ(calc(var(--phone-body-depth) * -1)) rotateY(180deg);
    backface-visibility: hidden;
}

.phone__back::after {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            105deg,
            transparent 0 2px,
            rgb(255 255 255 / 1.1%) 2px 3px
        ),
        linear-gradient(
            112deg,
            rgb(255 255 255 / 3%),
            transparent 24% 72%,
            rgb(0 0 0 / 8%)
        );
    content: "";
    pointer-events: none;
}

.phone__camera-plate {
    position: absolute;
    z-index: 2;
    top: 2.8%;
    left: 6.5%;
    width: 44%;
    aspect-ratio: 1;
    border: 1px solid #464642;
    border-radius: 25%;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgb(255 255 255 / 8%),
            transparent 35%
        ),
        linear-gradient(130deg, #343432, #222220 55%, #30302e);
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 65%),
        1px 3px 8px rgb(0 0 0 / 58%),
        inset 0 1px rgb(255 255 255 / 12%),
        inset -2px -3px 7px rgb(0 0 0 / 22%);
    transform: translateZ(2px);
}

.phone__rear-lens {
    position: absolute;
    width: 39%;
    aspect-ratio: 1;
    border: clamp(2px, 0.3vw, 4px) solid #111211;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 36% 32%,
            rgb(128 170 195 / 52%) 0 3%,
            transparent 4%
        ),
        radial-gradient(
            circle at 57% 61%,
            #05070a 0 17%,
            #0b1720 18% 27%,
            #020304 29% 46%,
            #1a1b1c 48% 55%,
            #050505 57% 100%
        );
    box-shadow:
        0 0 0 1px #575753,
        0 2px 4px rgb(0 0 0 / 72%),
        inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.phone__rear-lens::after {
    position: absolute;
    top: 16%;
    left: 18%;
    width: 24%;
    height: 12%;
    border-radius: 50%;
    background: rgb(199 220 231 / 18%);
    content: "";
    filter: blur(0.5px);
    transform: rotate(-34deg);
}

.phone__rear-lens--wide {
    top: 6%;
    left: 7%;
}
.phone__rear-lens--tele {
    bottom: 6%;
    left: 7%;
}
.phone__rear-lens--ultra {
    top: 30.5%;
    right: 6%;
}

.phone__rear-flash {
    position: absolute;
    top: 8.5%;
    right: 15%;
    width: 15.5%;
    aspect-ratio: 1;
    border: 2px solid #aea997;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff8d9 0 24%,
        #ddd5b0 27% 51%,
        #827f72 54% 100%
    );
    box-shadow: 0 0 3px rgb(255 247 206 / 24%);
}

.phone__rear-mic {
    position: absolute;
    top: 46%;
    right: 5%;
    width: 5.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #050505;
    box-shadow: inset 0 0 0 1px #292927;
}

.phone__rear-lidar {
    position: absolute;
    right: 14%;
    bottom: 9%;
    width: 16%;
    aspect-ratio: 1;
    border: 2px solid #111;
    border-radius: 50%;
    background: radial-gradient(
        circle at 42% 38%,
        #1d2930,
        #07090b 46%,
        #191a19 67%
    );
    box-shadow: 0 0 0 1px #4b4b47;
}

.phone__apple {
    position: absolute;
    z-index: 1;
    top: 43%;
    left: 50%;
    width: 16.5%;
    height: auto;
    fill: #5c5c59;
    filter: drop-shadow(0 1px 0 rgb(255 255 255 / 8%))
        drop-shadow(0 -1px 0 rgb(0 0 0 / 28%));
    opacity: 0.82;
    transform: translateX(-50%);
}

.phone__rail {
    position: absolute;
    top: 1.5%;
    bottom: 1.5%;
    width: var(--phone-depth);
    border: 1px solid #4b4a47;
    border-radius: calc(var(--phone-depth) * 0.2);
    background: linear-gradient(
        90deg,
        #191918,
        #807e78 5%,
        #4c4b48 11%,
        #292927 19%,
        #20201f 82%,
        #686660 95%,
        #171716
    );
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 14%),
        inset 0 0 7px rgb(0 0 0 / 42%);
    pointer-events: none;
    backface-visibility: hidden;
}

.phone__rail--left {
    left: 0;
    transform: rotateY(90deg);
    transform-origin: left center;
}

.phone__rail--right {
    right: 0;
    transform: rotateY(-90deg);
    transform-origin: right center;
}

.phone-shadow {
    position: absolute;
    z-index: 0;
    top: 97%;
    left: 50%;
    width: calc(var(--phone-width) * 1.22);
    height: clamp(24px, 7vh, 54px);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgb(0 0 0 / 78%) 0%,
        rgb(0 0 0 / 48%) 42%,
        transparent 74%
    );
    filter: blur(11px);
    pointer-events: none;
}

.phone-shadow--center {
    opacity: 0.96;
    transform: translate(-50%, -50%) scaleX(0.88);
}

.phone-shadow--left,
.phone-shadow--right {
    opacity: 0;
    will-change: opacity, transform;
}

.hero-animation .phone-shadow--left {
    animation: left-shadow var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1) both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hero-animation .phone-shadow--right {
    animation: right-shadow var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1)
        both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.phone__face {
    position: absolute;
    z-index: 2;
    inset: clamp(4px, 0.45vw, 7px);
    overflow: hidden;
    border: 2px solid #080909;
    border-radius: calc(var(--phone-width) * 0.12);
    background: #050505;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 8%),
        0 0 0 1px #030303;
    backface-visibility: hidden;
}

.phone__face img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: calc(var(--phone-width) * 0.108);
    object-fit: cover;
    object-position: top center;
    background: #050505;
}

.phone__island {
    position: absolute;
    top: 1.45%;
    left: 50%;
    display: block;
    width: 30%;
    height: 3.45%;
    border-radius: 999px;
    background: linear-gradient(180deg, #010101, #070707);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 5%),
        0 1px 2px rgb(0 0 0 / 42%);
    transform: translateX(-50%);
}

.phone__camera {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 10%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 30%,
        #263d51,
        #07111d 52%,
        #020203 76%
    );
    box-shadow: 0 0 0 1px #111;
    transform: translateY(-50%);
}

.phone__shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        108deg,
        rgb(255 255 255 / 6%),
        transparent 16%,
        transparent 84%,
        rgb(255 255 255 / 3%)
    );
    mix-blend-mode: screen;
}

.phone__button {
    position: absolute;
    z-index: 1;
    left: -1.7%;
    width: 2.2%;
    border-radius: 3px 0 0 3px;
    border: 1px solid #292825;
    background: linear-gradient(90deg, #242421, #77756f 68%, #34332f);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 18%),
        inset 0 -1px rgb(0 0 0 / 52%),
        -1px 0 2px rgb(0 0 0 / 30%);
}

.phone__button--action {
    top: 16%;
    height: 5.2%;
}
.phone__button--volume-up {
    top: 25%;
    height: 8.2%;
}
.phone__button--volume-down {
    top: 35%;
    height: 8.2%;
}
.phone__button--power {
    top: 25%;
    right: -1.7%;
    left: auto;
    height: 12.5%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #34332f, #77756f 32%, #242421);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 18%),
        inset 0 -1px rgb(0 0 0 / 52%),
        1px 0 2px rgb(0 0 0 / 30%);
}

.phone__button--camera-control {
    top: 45.5%;
    right: -1.25%;
    left: auto;
    width: 1.7%;
    height: 8.5%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #2b2a27, #55534f 38%, #171716);
    box-shadow:
        inset 1px 0 rgb(255 255 255 / 10%),
        inset 0 0 3px rgb(0 0 0 / 52%);
}

.phone__antenna {
    position: absolute;
    z-index: 3;
    width: 3.2%;
    height: 2px;
    background: #111110;
    box-shadow: 0 1px rgb(255 255 255 / 8%);
    pointer-events: none;
}

.phone__antenna--left-top {
    top: 10%;
    left: -1px;
}
.phone__antenna--left-bottom {
    bottom: 10%;
    left: -1px;
}
.phone__antenna--right-top {
    top: 10%;
    right: -1px;
}
.phone__antenna--right-bottom {
    right: -1px;
    bottom: 10%;
}

.phone--center {
    z-index: 20;
    opacity: 1;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 20%),
        inset 3px 0 4px rgb(255 255 255 / 9%),
        inset -3px 0 4px rgb(0 0 0 / 48%),
        0 18px 28px rgb(0 0 0 / 38%),
        0 38px 72px rgb(0 0 0 / 72%);
    transform: translate(-50%, -50%);
}

.phone--left,
.phone--right {
    z-index: 2;
    opacity: 1;
    will-change: transform;
}

.hero-animation .phone--left {
    animation:
        left-translate var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1) infinite
            alternate,
        left-rotate var(--duration) cubic-bezier(0.42, 0, 0.58, 1) infinite
            alternate,
        side-scale var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1) infinite
            alternate;
}

.hero-animation .phone--right {
    animation:
        right-translate var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1)
            infinite alternate,
        right-rotate var(--duration) cubic-bezier(0.42, 0, 0.58, 1) infinite
            alternate,
        side-scale var(--duration) cubic-bezier(0.22, 0.5, 0.32, 1) infinite
            alternate;
}

.hint {
    position: absolute;
    right: 22px;
    bottom: 16px;
    margin: 0;
    color: rgb(255 255 255 / 42%);
    font-size: 11px;
    letter-spacing: 0.08em;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity 300ms ease;
}

.hero-animation:hover .hint,
.hero-animation:focus-within .hint {
    opacity: 1;
}

@keyframes left-translate {
    0% {
        translate: -55.8% -50% -320px;
    }
    42%,
    100% {
        translate: -155% -50% -180px;
    }
}

@keyframes right-translate {
    0% {
        translate: -40.4% -50% -320px;
    }
    42%,
    100% {
        translate: 58% -50% -180px;
    }
}

@keyframes left-rotate {
    0% {
        rotate: y -178deg;
    }
    42%,
    100% {
        rotate: y 22deg;
    }
}

@keyframes right-rotate {
    0% {
        rotate: y 178deg;
    }
    42%,
    100% {
        rotate: y -22deg;
    }
}

@keyframes side-scale {
    0% {
        scale: 0.94;
    }
    42%,
    100% {
        scale: 1.05;
    }
}

@keyframes left-shadow {
    0% {
        opacity: 0;
        transform: translate(-55.8%, -50%) scaleX(0.35);
    }
    42%,
    100% {
        opacity: 0.78;
        transform: translate(-155%, -50%) scaleX(0.82);
    }
}

@keyframes right-shadow {
    0% {
        opacity: 0;
        transform: translate(-40.4%, -50%) scaleX(0.35);
    }
    42%,
    100% {
        opacity: 0.78;
        transform: translate(58%, -50%) scaleX(0.82);
    }
}

@media (max-width: 320px),
       (min-width: 321px) and (max-width: 576px),
       (min-width: 577px) and (max-width: 767px) {
    .hero-animation {
        --phone-height: min(100cqh, 460px, 62cqw);
    }

    .hero-animation .phones {
        transform: scale(0.8);
    }

    @keyframes left-translate {
        0% {
            translate: -55.8% -50% -320px;
        }
        42%,
        100% {
            translate: -138% -50% -180px;
        }
    }

    @keyframes right-translate {
        0% {
            translate: -40.4% -50% -320px;
        }
        42%,
        100% {
            translate: 42% -50% -180px;
        }
    }

    @keyframes left-shadow {
        0% {
            opacity: 0;
            transform: translate(-55.8%, -50%) scaleX(0.35);
        }
        42%,
        100% {
            opacity: 0.78;
            transform: translate(-138%, -50%) scaleX(0.82);
        }
    }

    @keyframes right-shadow {
        0% {
            opacity: 0;
            transform: translate(-40.4%, -50%) scaleX(0.35);
        }
        42%,
        100% {
            opacity: 0.78;
            transform: translate(42%, -50%) scaleX(0.82);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-animation .phone--left,
    .hero-animation .phone--right,
    .hero-animation .phone-shadow--left,
    .hero-animation .phone-shadow--right {
        animation: none;
    }
}

.lead-shell-header {
    background: #fff;
    border-bottom: 1px solid #e6edf5;
}
.lead-shell-header-inner,
.lead-form-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lead-shell-status {
    color: #0f6b3f;
    font-weight: 600;
}
.lead-form-page {
    padding: 48px 0 80px;
    background: #f7fafc;
}
.lead-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: 40px;
    align-items: start;
}
.lead-form-intro h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 16px 0;
}
.lead-form-stats {
    display: grid;
    gap: 16px;
    margin: 28px 0;
}
.lead-form-stats article {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    padding: 16px;
}
.lead-form-stats strong {
    display: block;
    font-size: 1.4rem;
}
.lead-form-trust {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e6edf5;
}
.lead-form-panel {
    padding: 28px;
}
.lead-step-indicator {
    font-size: 0.85rem;
    font-weight: 700;
    color: #35507a;
    margin-bottom: 20px;
}
.lead-form-hint {
    margin-top: 12px;
    color: #5b6f88;
    font-size: 0.95rem;
}
.lead-form-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.lead-thankyou {
    padding: 56px 0 80px;
}
.lead-thankyou-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.lead-thankyou-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e8f8ef;
    color: #0f6b3f;
    display: grid;
    place-items: center;
    font-size: 2rem;
    margin: 0 auto 20px;
}
.lead-thankyou-eyebrow {
    font-weight: 700;
    color: #0f6b3f;
    letter-spacing: 0.04em;
}
.lead-thankyou-video-frame {
    position: relative;
    padding-top: 56.25%;
    background: #0b1f3a;
    border-radius: 16px;
    overflow: hidden;
}
.lead-thankyou-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.lead-thankyou-video-placeholder {
    min-height: 220px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0b1f3a, #163a67);
    color: #fff;
    border-radius: 16px;
}
.lead-thankyou-box {
    margin-top: 32px;
    text-align: left;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 16px;
    padding: 24px;
}
.lead-thankyou-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}
.lead-thankyou-steps li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
}
.lead-thankyou-steps strong {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf4ff;
    color: #1d4f91;
    display: grid;
    place-items: center;
}
.banner-slot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.banner-slot-card {
    border: 1px solid #e6edf5;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}
.banner-slot-preview {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin: 12px 0;
}
.release-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.release-dashboard-card {
    border: 1px solid #e6edf5;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}
.release-quick-run-form {
    border: 1px solid #e6edf5;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}
.release-quick-run-inline {
    margin: 0;
}
@media (max-width: 320px),
       (min-width: 321px) and (max-width: 576px),
       (min-width: 577px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 991px) {
    .lead-form-grid,
    .banner-slot-grid,
    .release-dashboard-grid {
        grid-template-columns: 1fr;
    }
}