/* Home pública - Jovem Tech
   Consome os tokens definidos em site.css (:root).
   Ritmo: hero azul-profundo -> blocos claros -> faixa de números -> atendimento escuro -> blocos claros -> CTA azul. */

.home-container {
    width: min(var(--container-max), calc(100% - 40px));
    margin-inline: auto;
}

.home-icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-section {
    padding-block: clamp(64px, 8vw, 104px);
}

.home-eyebrow {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-heading {
    max-width: 680px;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.home-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-heading > p:not(.home-eyebrow) {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--text-lg);
}

.home-heading--center {
    margin-inline: auto;
    text-align: center;
}

.home-heading--light h2 {
    color: #fff;
}

.home-heading--light .home-eyebrow {
    color: var(--brand-on-dark);
}

.home-heading--light > p:not(.home-eyebrow) {
    color: var(--on-dark-muted);
}

.home-button-lg {
    gap: 10px;
    min-height: 54px;
    padding-inline: 26px;
    font-size: 1.02rem;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.home-link .home-icon {
    transition: transform var(--transition-fast);
}

.home-link:hover .home-icon,
.home-link:focus-visible .home-icon {
    transform: translateX(3px);
}

.home-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--accent);
}

.home-stars .home-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke-width: 1.2;
}

.home-stars .home-icon.is-empty {
    fill: none;
    opacity: 0.6;
}

/* 1. Hero -------------------------------------------------------------
   Ilustração isométrica própria (SVG inline em site/partials/home-hero-*.blade.php), sem moldura:
   as trilhas de circuito formam o fundo do hero e passam por trás do texto. Uma única fonte de luz
   (--hero-glow) aparece no selo, no destaque do título, nas trilhas e nas telas dos aparelhos. */

.home-hero {
    --hero-glow: #79b2ff;
    --hero-cyan: #62d0ff;
    --hero-screen-a: #74bcff;
    --hero-screen-b: #3565bd;
    --hero-trace: rgba(121, 178, 255, 0.42);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(40px, 5vw, 72px) clamp(96px, 9vw, 128px);
    background:
        radial-gradient(38% 58% at 74% 58%, rgba(72, 132, 220, 0.5), transparent 72%),
        radial-gradient(30% 50% at 0% 100%, rgba(56, 104, 176, 0.24), transparent 70%),
        linear-gradient(160deg, var(--brand-deep-start), var(--brand-deep) 55%, var(--brand-deep-end));
    color: #fff;
}

/* Trilhas de fundo: cobrem o hero inteiro e somem nas bordas e atrás do texto. */
.home-hero__circuit {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(90% 95% at 74% 56%, #000 28%, rgba(0, 0, 0, 0.3) 62%, transparent 92%);
    mask-image: radial-gradient(90% 95% at 74% 56%, #000 28%, rgba(0, 0, 0, 0.3) 62%, transparent 92%);
}

.home-hero__circuit-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.home-hero__copy {
    position: relative;
    z-index: 1;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 7px 14px;
    border: 1px solid rgba(156, 192, 242, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(11, 37, 71, 0.55);
    color: #dbe8fb;
    font-size: var(--text-sm);
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.home-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hero-cyan);
    box-shadow: 0 0 0 4px rgba(98, 208, 255, 0.18), 0 0 12px var(--hero-glow);
}

.home-hero h1 {
    margin: 0;
    color: #fff;
    font-size: var(--title-display);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-hero h1 span {
    color: var(--brand-on-dark);
    background: linear-gradient(90deg, var(--hero-glow), #e6f0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-hero__lead {
    max-width: 540px;
    margin: 22px 0 0;
    color: var(--on-dark-muted);
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    line-height: 1.65;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* O contorno ganha fundo escuro translúcido: as trilhas passam por trás sem cruzar o texto. */
.home-hero .home-button-ghost {
    background: rgba(11, 37, 71, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.home-hero .home-button-ghost:hover,
.home-hero .home-button-ghost:focus-visible {
    background: rgba(35, 70, 120, 0.85);
}

.home-hero .home-button-light:hover,
.home-hero .home-button-light:focus-visible {
    box-shadow: 0 0 0 4px rgba(121, 178, 255, 0.22), 0 14px 36px rgba(121, 178, 255, 0.35);
}

.home-hero__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 24px 0 0;
    color: #dbe8fb;
    font-size: var(--text-sm);
}

.home-hero__rating strong {
    color: #fff;
    font-size: 1rem;
}

.home-hero a:focus-visible {
    outline-color: #fff;
}

/* Cena: notebook e smartphone. Sem moldura; as trilhas do chão vazam para fora do desenho. */
.home-hero__scene {
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.home-hero__scene-svg {
    display: block;
    /* Maior que a coluna (sem moldura, invade o respiro lateral), mas limitada pela altura útil
       da janela e pela borda direita da tela. --hero-scene-ratio vem do viewBox da cena. */
    width: min(
        135%,
        calc((100vh - 150px) * var(--hero-scene-ratio)),
        calc(106% + max(0px, (100vw - var(--container-max)) / 2 - 16px))
    );
    max-width: none;
    height: auto;
    margin-left: -6%;
    overflow: visible;
}

/* Ilustração: cores das peças. */
.ha-trace,
.ha-bridge path,
.ha-board-line,
.ha-pulse {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ha-trace { stroke: var(--hero-trace); stroke-width: 1.6; }
.ha-pad circle,
.ha-pad ellipse { fill: var(--brand-deep); stroke: rgba(121, 178, 255, 0.7); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ha-pad-lg { fill: var(--hero-cyan); stroke: #e6f0ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ha-bridge path { stroke: rgba(140, 196, 255, 0.8); stroke-width: 2; }
.ha-pulse { stroke: #e6f0ff; stroke-width: 3; stroke-dasharray: 7 193; stroke-dashoffset: 200; opacity: 0.95; }
.ha-bin { fill: rgba(156, 192, 242, 0.16); font: 700 14px/1 ui-monospace, "DejaVu Sans Mono", monospace; letter-spacing: 0.18em; }
.ha-bin--b { fill: rgba(156, 192, 242, 0.1); }
.ha-top { fill: #1d4176; }
.ha-sl { fill: #133058; }
.ha-sr { fill: #0c2345; }
.ha-rim { fill: none; stroke: var(--hero-glow); stroke-width: 2; stroke-linejoin: round; }
.ha-rim-glow { fill: none; stroke: var(--hero-glow); stroke-width: 7; opacity: 0.75; }
.ha-rim-top { fill: none; stroke: rgba(156, 192, 242, 0.55); stroke-width: 1.2; stroke-linejoin: round; }
.ha-board { fill: #0f2a52; stroke: rgba(121, 178, 255, 0.35); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ha-board-line { stroke: rgba(121, 178, 255, 0.42); stroke-width: 1.4; }
.ha-ram-t { fill: #2d5fa8; }
.ha-ram-l { fill: #214a88; }
.ha-ram-r { fill: #183c72; }
.ha-ram-chip { fill: #0b1f3d; }
.ha-chip-t { fill: #102748; }
.ha-chip-l { fill: #0b1c36; }
.ha-chip-r { fill: #081528; }
.ha-chip-die { fill: #17375f; stroke: var(--hero-glow); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ha-bat-t { fill: #2a5697; }
.ha-bat-l { fill: #1e4478; }
.ha-bat-r { fill: #163866; }
.ha-bat-label { fill: rgba(230, 240, 255, 0.4); }
.ha-ssd-t { fill: #3b72c2; }
.ha-ssd-l { fill: #2a5aa0; }
.ha-ssd-r { fill: #214b88; }
.ha-pcb-t { fill: #173a6a; }
.ha-pcb-l { fill: #112e56; }
.ha-pcb-r { fill: #0d2546; }
.ha-cam-t { fill: #0f2342; }
.ha-cam-l { fill: #0a1a33; }
.ha-cam-r { fill: #071427; }
.ha-lens { fill: #061429; stroke: var(--hero-glow); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ha-fan-t { fill: #14315b; }
.ha-fan-l { fill: #0e2647; }
.ha-fan-r { fill: #0a1d39; }
.ha-fan-hole { fill: #061429; }
.ha-fan path { fill: #3f78ca; }
.ha-fan-hub { fill: var(--brand-on-dark); }
.ha-led { fill: var(--hero-cyan); }
.ha-lid { fill: #14315b; }
.ha-lid-side { fill: #0a1d39; }
.ha-lid-edge { fill: #2a5594; }
.ha-screen-glow { fill: var(--hero-glow); opacity: 0.55; }
.ha-ui { fill: rgba(255, 255, 255, 0.92); }
.ha-ui-soft { fill: rgba(255, 255, 255, 0.45); }
.ha-ui-dot { fill: rgba(255, 255, 255, 0.6); }
.ha-ui-panel { fill: rgba(6, 20, 42, 0.26); }
.ha-ui-wave { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ha-ui-check-bg { fill: rgba(255, 255, 255, 0.92); }
.ha-ui-check { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha-ui-track { fill: rgba(6, 20, 42, 0.3); }
.ha-ui-fill { fill: #fff; }
.ha-ui-outline { fill: none; stroke: #fff; stroke-width: 3; }
.ha-hinge { fill: none; stroke: #081528; stroke-width: 5; stroke-linecap: round; }
.ha-ladder { fill: none; stroke: var(--brand-on-dark); stroke-width: 3.2; stroke-linecap: round; }
.ha-ladder-rung { fill: none; stroke: var(--brand-on-dark); stroke-width: 2.2; stroke-linecap: round; }
.ha-shadow { fill: rgba(3, 10, 24, 0.45); }
.ha-leg { fill: #d6deea; }
.ha-leg-b { fill: #a9b6c8; }
.ha-shoe { fill: #0b1a33; }
.ha-coat { fill: #4a86dc; }
.ha-coat-s { fill: #3a6fc0; }
.ha-skin { fill: #eebf98; }
.ha-hair { fill: #3a2a22; }
.ha-cap { fill: var(--brand-on-dark); }
.ha-cap-b { fill: #7ea8e0; }
.ha-tool { fill: #e6f0ff; }
.ha-flex { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; opacity: 0.9; }
.ha-guide { fill: none; stroke: rgba(156, 192, 242, 0.5); stroke-width: 1.2; stroke-dasharray: 4 5; }
.ha-glass-t { fill: #1f4478; }
.ha-glass-l { fill: #16335e; }
.ha-glass-r { fill: #0f2749; }
.ha-notch { fill: #0b1a33; }

/* Movimento sutil (desligado com "reduzir movimento", no fim do arquivo). */
@keyframes ha-pulse {
    to { stroke-dashoffset: 0; }
}

@keyframes ha-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes ha-spin {
    to { transform: rotate(360deg); }
}

@keyframes ha-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes ha-breathe {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}

.ha-pulse {
    animation: ha-pulse 4.2s linear infinite;
    animation-delay: var(--d, 0s);
}

.ha-pulse--bridge {
    animation-direction: reverse;
    animation-duration: 3.4s;
}

.ha-pulse--bg {
    animation-duration: 6s;
}

.ha-led,
.home-pill__dot {
    animation: ha-blink 2.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.ha-fan {
    transform-box: fill-box;
    transform-origin: center;
    animation: ha-spin 2.6s linear infinite;
}

.ha-float {
    animation: ha-float 5s ease-in-out infinite;
}

.ha-screen-glow {
    animation: ha-breathe 4s ease-in-out infinite;
}

/* 2. Diferenciais ----------------------------------------------------- */

.home-highlights {
    position: relative;
    z-index: 1;
    margin-top: -56px;
}

.home-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(7, 23, 46, 0.14);
}

.home-highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 22px;
}

.home-highlight + .home-highlight {
    border-left: 1px solid var(--line);
}

.home-highlight__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--icon);
}

.home-highlight h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.home-highlight p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* 3. Equipamentos ----------------------------------------------------- */

.home-devices__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-device-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.home-device-card:hover,
.home-device-card:focus-within {
    border-color: rgba(56, 104, 176, 0.3);
    box-shadow: var(--shadow-lift);
    transform: translateY(-4px);
}

/* Painel ilustrado do card: gradiente da marca, anéis e ícone grande. */
.home-device-card__media {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 120%, rgba(56, 104, 176, 0.28), transparent 60%),
        linear-gradient(160deg, #f4f8ff, #dce8fa);
    border-bottom: 1px solid var(--line);
}

.home-device-card__media::before,
.home-device-card__media::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(56, 104, 176, 0.18);
    border-radius: 50%;
}

.home-device-card__media::before {
    width: 150px;
    height: 150px;
}

.home-device-card__media::after {
    width: 230px;
    height: 230px;
    border-style: dashed;
    border-color: rgba(56, 104, 176, 0.14);
}

.home-device-card__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
    color: #fff;
    box-shadow: 0 18px 36px rgba(37, 79, 141, 0.32);
}

.home-device-card__icon .home-icon {
    width: 36px;
    height: 36px;
    stroke-width: 1.6;
}

.home-device-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px 26px 26px;
}

.home-device-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-xl);
    font-weight: 800;
}

.home-device-card__body > p {
    margin: 6px 0 0;
    color: var(--muted);
}

.home-device-card ul {
    display: grid;
    gap: 10px;
    margin: 20px 0 24px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.home-device-card li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-device-card li .home-icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
    stroke-width: 2.4;
}

.home-device-card .home-link {
    margin-top: auto;
}

.home-device-card .home-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.home-devices__note {
    margin: 28px 0 0;
    color: var(--muted);
    text-align: center;
}

.home-devices__note a {
    color: var(--brand);
    font-weight: 700;
}

/* 4. Números ---------------------------------------------------------- */

.home-stats {
    padding-bottom: clamp(64px, 8vw, 104px);
}

.home-stats__grid {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    padding: clamp(28px, 3.5vw, 40px) clamp(20px, 3vw, 36px);
    border-radius: 28px;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
        linear-gradient(120deg, var(--brand-strong), var(--brand));
    color: #fff;
    box-shadow: 0 30px 70px rgba(37, 79, 141, 0.26);
}

.home-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 4px;
    padding-inline: clamp(12px, 2vw, 28px);
    text-align: center;
}

.home-stat + .home-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.home-stat dd {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.home-stat dt {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* 5. Como funciona ---------------------------------------------------- */

.home-process {
    border-block: 1px solid var(--line);
    background: var(--surface);
}

.home-process__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-process-step {
    position: relative;
    padding: 26px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    text-align: center;
}

.home-process-step__number {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 0 6px var(--brand-soft), 0 12px 24px rgba(37, 79, 141, 0.24);
}

.home-process-step h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.3;
}

.home-process-step p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* 6. Atendimento online ---------------------------------------------- */

.home-services {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(50% 80% at 100% 0%, rgba(56, 104, 176, 0.38), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(56, 104, 176, 0.2), transparent 70%),
        linear-gradient(135deg, var(--brand-deep-start), var(--brand-deep) 62%, var(--brand-deep-end));
}

.home-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.home-service-card:hover,
.home-service-card:focus-visible {
    border-color: rgba(156, 192, 242, 0.5);
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

.home-service-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #fff;
    color: var(--brand);
}

.home-service-card__label {
    color: var(--brand-on-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-service-card strong {
    font-size: var(--text-lg);
    line-height: 1.3;
}

.home-service-card p {
    margin: 0 0 18px;
    color: var(--on-dark-muted);
    font-size: var(--text-sm);
}

.home-service-card__arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-top: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.home-service-card:hover .home-service-card__arrow,
.home-service-card:focus-visible .home-service-card__arrow {
    background: var(--brand);
    transform: translateX(3px);
}

.home-services a:focus-visible,
.home-final a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* 7. Editorial -------------------------------------------------------- */

.home-editorial__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
}

.home-editorial__visual {
    position: relative;
    padding: 0 22px 22px 0;
}

.home-editorial__visual::before {
    content: "";
    position: absolute;
    inset: 22px 0 0 22px;
    border-radius: 28px;
    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
    opacity: 0.14;
}

.home-editorial__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    border-radius: 28px;
    background: var(--brand-soft);
    box-shadow: var(--shadow-card);
}

.home-editorial__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-editorial__copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-editorial__copy > p:not(.home-eyebrow) {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: var(--text-lg);
}

.home-editorial__list {
    display: grid;
    gap: 18px;
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}

.home-editorial__list li {
    position: relative;
    padding-left: 18px;
    border-left: 3px solid var(--brand);
}

.home-editorial__list strong {
    display: block;
    color: var(--ink);
}

.home-editorial__list span {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* 8. Avaliações ------------------------------------------------------- */

.home-reviews {
    border-block: 1px solid var(--line);
    background: var(--surface);
}

.home-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.home-reviews__head .home-heading {
    margin-bottom: 0;
}

.home-reviews__score {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-soft);
}

.home-reviews__rating {
    color: var(--ink);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.home-reviews__score p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.home-reviews__score .home-link {
    margin-top: 4px;
    font-size: var(--text-sm);
}

.home-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-soft);
}

.home-review__quote {
    width: 30px;
    height: 30px;
    color: var(--brand);
    fill: currentColor;
    stroke: none;
    opacity: 0.22;
}

.home-review blockquote {
    flex: 1 1 auto;
    margin: 14px 0 22px;
}

.home-review blockquote p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}

.home-review figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.home-review__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
    color: #fff;
    font-weight: 800;
}

.home-review figcaption strong {
    display: block;
    color: var(--ink);
    line-height: 1.3;
}

.home-review figcaption small {
    color: var(--muted);
    font-size: var(--text-xs);
}

/* 9. FAQ -------------------------------------------------------------- */

.home-faq {
    padding-top: 0;
}

.home-reviews + .home-faq {
    padding-top: clamp(64px, 8vw, 104px);
}

.home-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(32px, 6vw, 80px);
}

.home-faq .home-heading {
    margin-bottom: 0;
}

.home-faq .home-heading .button {
    margin-top: 24px;
}

.home-faq__list {
    display: grid;
    gap: 12px;
}

.home-faq__item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.home-faq__item[open] {
    border-color: rgba(56, 104, 176, 0.3);
    box-shadow: var(--shadow-soft);
}

.home-faq__item summary {
    position: relative;
    padding: 18px 56px 18px 20px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.home-faq__item summary::-webkit-details-marker {
    display: none;
}

.home-faq__item summary::after {
    content: "+";
    content: "+" / "";
    position: absolute;
    top: 50%;
    right: 18px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.2rem;
    line-height: 1;
    transform: translateY(-50%);
}

.home-faq__item[open] summary::after {
    content: "\2212";
    content: "\2212" / "";
}

.home-faq__item summary:focus-visible {
    border-radius: var(--radius-md);
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.home-faq__item p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--muted);
}

/* 10. Chamada final --------------------------------------------------- */

.home-final {
    padding-bottom: clamp(64px, 8vw, 104px);
}

.home-final__card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 32px;
    padding: clamp(32px, 5vw, 56px);
    border-radius: 28px;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
        linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    box-shadow: 0 30px 70px rgba(37, 79, 141, 0.26);
}

.home-final .home-eyebrow {
    color: rgba(255, 255, 255, 0.92);
}

.home-final h2 {
    margin: 0;
    color: #fff;
    max-width: 640px;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-final__info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-sm);
}

.home-final__info li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-final__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Botões sobre fundos escuros/azuis (hero e CTA final). */
.home-button-light {
    background: #fff;
    color: var(--brand-strong);
}

.home-button-light:hover,
.home-button-light:focus-visible {
    background: var(--brand-soft);
    box-shadow: 0 14px 32px rgba(3, 12, 26, 0.3);
}

.home-button-ghost {
    gap: 10px;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
    color: #fff;
}

.home-button-ghost:hover,
.home-button-ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Notebooks com pouca altura útil (1366×768 com abas e favoritos, Full HD com zoom de 125%):
   espaçamentos do hero e tamanho da ilustração se ajustam à altura para selo, título, CTAs,
   notebook e smartphone caberem na primeira dobra. O título já escala pela altura em --title-display. */
@media (min-width: 921px) and (max-height: 820px) {
    .home-hero {
        padding-top: clamp(24px, 5vh, 56px);
    }

    .home-pill {
        margin-bottom: clamp(12px, 2.4vh, 22px);
    }

    .home-hero__lead {
        margin-top: clamp(12px, 2.4vh, 22px);
    }

    .home-hero__actions {
        margin-top: clamp(18px, 3.4vh, 32px);
    }

    .home-hero__rating {
        margin-top: clamp(12px, 2.4vh, 24px);
    }
}

@media (min-width: 921px) and (max-height: 640px) {
    .home-hero__lead {
        line-height: 1.55;
    }
}

/* Encaixe por bloco (desktop) --------------------------------------------
   O alinhamento é feito por assets/js/home-snap.js, só na navegação pelo teclado (setas,
   PageUp/PageDown, espaço, Home/End); com mouse e trackpad a rolagem é livre e contínua.
   O `scroll-snap-type: mandatory` do CSS foi descartado porque, com blocos altos, giros lentos
   da roda voltavam para o bloco anterior e a página parecia travada.
   Aqui ficam só os espaçamentos: cada bloco (espaço superior + conteúdo) cabe inteiro abaixo
   do cabeçalho fixo (77px). Só na home (este arquivo só é carregado nela) e no desktop. */
@media (min-width: 921px) and (min-height: 540px) {
    html {
        scroll-padding-top: 77px;
    }

    /* Mostra um pouco do azul do hero acima da faixa de diferenciais (lido pelo home-snap.js). */
    .home-highlights {
        scroll-margin-top: 28px;
    }

    .home-section,
    .home-faq,
    .home-reviews + .home-faq {
        padding-block: clamp(28px, 7vh, 104px);
    }

    .home-stats,
    .home-final {
        padding-block: clamp(28px, 7vh, 104px);
    }
}

/* Janelas baixas de desktop: títulos, cards e listas compactos para cada bloco caber inteiro. */
@media (min-width: 921px) and (max-height: 960px) {
    .home-heading {
        max-width: 920px;
        margin-bottom: clamp(14px, 3vh, 52px);
    }

    .home-heading h2,
    .home-editorial__copy h2 {
        font-size: clamp(1.6rem, 4.4vh, 2.75rem);
    }

    .home-heading > p:not(.home-eyebrow) {
        margin-top: clamp(6px, 1.4vh, 14px);
        font-size: clamp(0.98rem, 1.9vh, 1.08rem);
    }

    .home-eyebrow {
        margin-bottom: clamp(6px, 1.4vh, 12px);
    }

    .home-device-card__media {
        height: clamp(60px, 12vh, 150px);
    }

    .home-device-card__media::before {
        width: clamp(96px, 19vh, 150px);
        height: clamp(96px, 19vh, 150px);
    }

    .home-device-card__icon {
        width: clamp(48px, 8.4vh, 76px);
        height: clamp(48px, 8.4vh, 76px);
        border-radius: clamp(14px, 2.4vh, 22px);
    }

    .home-device-card__icon .home-icon {
        width: clamp(24px, 4vh, 36px);
        height: clamp(24px, 4vh, 36px);
    }

    .home-device-card__body {
        padding: clamp(14px, 2.6vh, 24px) 24px clamp(16px, 2.8vh, 26px);
    }

    .home-device-card h3 {
        font-size: clamp(1.02rem, 2vh, 1.18rem);
    }

    .home-device-card__body > p {
        margin-top: 2px;
        font-size: clamp(0.88rem, 1.7vh, 1rem);
        line-height: 1.5;
    }

    .home-device-card ul {
        gap: clamp(4px, 1vh, 10px);
        margin: clamp(10px, 2vh, 20px) 0 clamp(12px, 2.4vh, 24px);
        padding-top: clamp(10px, 2vh, 18px);
        font-size: clamp(0.84rem, 1.6vh, 0.92rem);
        line-height: 1.45;
    }

    .home-devices__note {
        margin-top: clamp(10px, 2vh, 28px);
        font-size: var(--text-sm);
    }

    .home-editorial__copy > p:not(.home-eyebrow) {
        margin-top: clamp(8px, 1.6vh, 16px);
        font-size: clamp(0.98rem, 1.9vh, 1.08rem);
    }

    .home-editorial__list {
        gap: clamp(8px, 1.8vh, 18px);
        margin: clamp(14px, 2.8vh, 28px) 0 clamp(16px, 3.2vh, 32px);
    }

    .home-editorial__media {
        max-height: calc(100vh - 77px - 2 * clamp(28px, 7vh, 104px) - 22px);
    }

    .home-reviews__head {
        margin-bottom: clamp(18px, 3.4vh, 48px);
    }

    .home-review {
        padding: clamp(18px, 3.2vh, 28px) 24px;
    }

    .home-review blockquote {
        margin: clamp(8px, 1.4vh, 14px) 0 clamp(12px, 2.2vh, 22px);
    }

    .home-review blockquote p {
        font-size: clamp(0.92rem, 1.8vh, 1.02rem);
        line-height: 1.55;
    }

    .home-review figcaption {
        padding-top: clamp(10px, 1.8vh, 18px);
    }

    .home-faq__item summary {
        padding-block: clamp(12px, 2.2vh, 18px);
    }
}

/* Responsivo ---------------------------------------------------------- */

@media (max-width: 1080px) {
    .home-highlights__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-highlight + .home-highlight {
        border-left: 0;
    }

    .home-highlight:nth-child(even) {
        border-left: 1px solid var(--line);
    }

    .home-highlight:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .home-services__grid,
    .home-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-reviews__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 680px;
    }
}

@media (max-width: 920px) {
    .home-hero__grid,
    .home-editorial__grid,
    .home-faq__grid,
    .home-final__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-editorial__visual {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    /* Cena abaixo do texto, de borda a borda (o overflow do hero corta o excesso). */
    .home-hero__scene {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .home-hero__scene-svg {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .home-devices__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin-inline: auto;
    }

    .home-stats__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }

    .home-stat:nth-child(odd) {
        border-left: 0;
    }

    .home-final__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .home-container {
        width: calc(100% - 32px);
    }

    .home-hero {
        padding-bottom: 88px;
    }

    .home-hero__actions .button,
    .home-final__actions .button {
        flex: 1 1 100%;
    }

    .home-editorial__visual {
        padding: 0 14px 14px 0;
    }

    .home-editorial__visual::before {
        inset: 14px 0 0 14px;
        border-radius: 22px;
    }

    .home-editorial__media {
        border-radius: 22px;
    }

    .home-highlights {
        margin-top: -48px;
    }

    .home-highlights__grid,
    .home-services__grid,
    .home-process__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-highlight:nth-child(even) {
        border-left: 0;
    }

    .home-highlight + .home-highlight {
        border-top: 1px solid var(--line);
    }

    .home-highlight {
        padding: 18px;
    }

    .home-device-card__media {
        height: 128px;
    }

    .home-device-card__body {
        padding: 20px 22px 22px;
    }

    .home-stats__grid {
        border-radius: 22px;
    }

    .home-process-step {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px 18px;
        text-align: left;
    }

    .home-process-step__number {
        grid-row: 1 / 3;
        margin: 0;
    }

    .home-process-step h3 {
        margin-bottom: 4px;
    }

    .home-reviews__score {
        width: 100%;
    }

    .home-review {
        padding: 22px 20px;
    }

    .home-final__card {
        border-radius: 22px;
    }
}

@media (max-width: 360px) {
    .home-stats__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-stat + .home-stat {
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        border-left: 0;
    }

    .home-reviews__score {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ha-led,
    .home-pill__dot,
    .ha-fan,
    .ha-float,
    .ha-screen-glow {
        animation: none;
    }

    .ha-pulse {
        display: none;
    }

    .home-device-card,
    .home-service-card,
    .home-service-card__arrow,
    .home-link .home-icon,
    .home-faq__item {
        transition: none;
    }

    .home-device-card:hover,
    .home-device-card:focus-within,
    .home-service-card:hover,
    .home-service-card:focus-visible,
    .home-service-card:hover .home-service-card__arrow,
    .home-service-card:focus-visible .home-service-card__arrow,
    .home-link:hover .home-icon,
    .home-link:focus-visible .home-icon {
        transform: none;
    }
}

/* Desktop estreito e baixo (ex.: 1024×600): mantém 4 colunas em "Como funciona" e
   "Atendimento online" para cada bloco continuar cabendo inteiro na tela. */
@media (min-width: 921px) and (max-width: 1080px) and (max-height: 960px) {
    .home-process__grid,
    .home-services__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .home-process-step {
        padding: 20px 14px;
    }

    .home-service-card {
        padding: 20px 16px;
    }
}