/* ------------------------------------------------------------------
   Site do DownZone (zone1.top/site/).
   Mesma identidade do painel: tinta azul-esverdeada + laranja-sinal.
   Texto sobre laranja cheio é SEMPRE escuro (contraste). Mobile primeiro.
   ------------------------------------------------------------------ */

:root {
    --ink: #0b0f14;
    --ink-2: #0e141b;
    --slab: #131a22;
    --slab-2: #1b242e;
    --edge: #26323f;
    --edge-soft: rgba(255, 255, 255, 0.07);
    --text: #eaf0f6;
    --muted: #9aa8b7;
    --dim: #66768a;
    --signal: #ff6b2c;
    --signal-hi: #ff8552;
    --signal-ink: #1a0a03;
    --ok: #2ed3a0;
    --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--signal-hi); }
code { font-family: var(--font-mono); font-size: .92em; background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; color: var(--text); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 6px; }

.s-wrap { width: min(var(--wrap), 100% - 2 * clamp(18px, 4vw, 32px)); margin-inline: auto; }
.s-pular { position: absolute; left: -999px; top: 8px; background: var(--signal); color: var(--signal-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.s-pular:focus { left: 8px; }

/* ---------------- topo ---------------- */
.s-top { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 20, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge-soft); }
.s-top-in { display: flex; align-items: center; gap: 22px; height: 64px; }
.s-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.s-logo .dz-texto { display: grid; line-height: 1.05; }
.s-logo .dz-nome { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.s-logo .dz-zone { color: var(--signal); }
.s-logo .dz-sub { display: none; }
.s-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.s-nav a { white-space: nowrap; color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; }
.s-nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.s-nav .s-nav-baixar { display: none; }
.s-top-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.s-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--edge); border-radius: 10px; background: var(--slab); cursor: pointer; padding: 0; align-content: center; justify-content: center; gap: 4px; }
.s-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; margin-inline: auto; transition: transform .2s, opacity .2s; }
.s-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.s-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- botões ---------------- */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 10px; font: 600 14.5px/1 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; white-space: nowrap; }
.s-btn:active { transform: translateY(1px); }
.s-btn-sinal { background: var(--signal); color: var(--signal-ink); box-shadow: 0 10px 28px -12px rgba(255, 107, 44, .75); }
.s-btn-sinal:hover { background: var(--signal-hi); }
.s-btn-fino { background: transparent; color: var(--text); border-color: var(--edge); }
.s-btn-fino:hover { border-color: #3a4a5c; background: rgba(255,255,255,.04); }
.s-btn-grande { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.s-btn-bloco { width: 100%; }

/* ---------------- hero ---------------- */
.s-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); background: radial-gradient(900px 480px at 85% -8%, rgba(255, 107, 44, .16), transparent 62%), radial-gradient(700px 400px at -10% 30%, rgba(46, 211, 160, .05), transparent 60%), var(--ink); }
.s-anel { position: absolute; width: 760px; right: -220px; top: -90px; opacity: .07; pointer-events: none; }
.s-hero-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.s-eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal-hi); margin-bottom: 16px; }
.s-hero h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 800; }
.s-hero h1 em { font-style: normal; color: var(--signal); }
.s-lead { margin-top: 20px; font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 54ch; }
.s-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.s-ctas-centro { justify-content: center; }
.s-provas { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 14.5px; }
.s-provas li { display: flex; gap: 10px; align-items: baseline; }
.s-provas li::before { content: "\2713"; color: var(--ok); font-weight: 700; flex: none; }

/* demonstração: TV + balão do WhatsApp */
.s-demo { position: relative; display: grid; gap: 18px; justify-items: center; }
.s-tv { width: min(100%, 440px); padding: 12px; border-radius: 22px; background: linear-gradient(160deg, #1d2833, #10161d); border: 1px solid var(--edge); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255,255,255,.03) inset; }
.s-tv-tela { position: relative; border-radius: 12px; padding: 22px 22px 20px; background: radial-gradient(420px 220px at 50% -10%, rgba(255,107,44,.12), transparent 70%), #0a0e13; text-align: center; min-height: 372px; overflow: hidden; }
.s-tv-marca { display: flex; justify-content: center; margin-bottom: 10px; }
.s-tv-marca .dz-texto { display: grid; }
.s-tv-marca .dz-nome { font: 800 15px var(--font-display); }
.s-tv-marca .dz-zone { color: var(--signal); }
.s-tv-marca .dz-sub { display: none; }
.s-tv-tit { font: 700 19px var(--font-display); margin-bottom: 14px; }
.s-caixas { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.s-caixas i { width: 40px; height: 48px; border-radius: 9px; border: 1px solid var(--edge); background: var(--ink-2); display: grid; place-items: center; font: 600 22px var(--font-mono); font-style: normal; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.s-caixas i.on { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 107, 44, .15); }
.s-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: 300px; margin: 0 auto 12px; }
.s-teclas span { height: 38px; border-radius: 9px; background: var(--slab-2); border: 1px solid var(--edge-soft); display: grid; place-items: center; font: 600 15px var(--font-mono); color: var(--text); transition: background .12s, transform .12s, border-color .12s; }
.s-teclas span.peq { font: 500 10.5px var(--font-body); color: var(--dim); }
.s-teclas span.press { background: #2a3947; border-color: var(--signal); transform: scale(.94); }
.s-baixar { max-width: 300px; margin: 0 auto; height: 40px; border-radius: 10px; background: #3a2a22; color: #b9a89d; display: grid; place-items: center; font: 600 14px var(--font-body); transition: background .2s, color .2s; }
.s-baixar.pronto { background: var(--signal); color: var(--signal-ink); }
.s-progresso { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; background: rgba(10, 14, 19, .96); padding: 24px; }
.s-progresso[hidden] { display: none; }
.s-progresso b { font: 800 22px var(--font-display); }
.s-barra { width: min(280px, 90%); height: 10px; border-radius: 6px; background: var(--slab-2); overflow: hidden; }
.s-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--signal), #ffb020); border-radius: 6px; }
.s-progresso small { color: var(--muted); font-size: 14px; }
.s-progresso.feito small { color: var(--ok); font-weight: 600; }

.s-zap { display: grid; gap: 8px; justify-items: center; width: min(100%, 300px); }
.s-zap-de { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.s-zap-balao { width: 100%; display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px 16px 16px 4px; background: #124e3e; border: 1px solid rgba(46, 211, 160, .25); text-align: left; }
.s-zap-balao b { font: 800 19px var(--font-display); margin-bottom: 4px; }
.s-zap-balao span { font-size: 12.5px; color: #a9d9c9; }
.s-zap-balao strong { font: 700 24px var(--font-mono); color: #ffb48f; letter-spacing: .03em; margin-bottom: 4px; }
.s-zap-nota { font-size: 12.5px; color: var(--dim); }

/* ---------------- seções ---------------- */
.s-sec { padding: clamp(56px, 8vw, 104px) 0; }
.s-sec-alt { background: var(--ink-2); border-block: 1px solid var(--edge-soft); }
.s-sec h2 { font-size: clamp(27px, 3.6vw, 42px); font-weight: 800; max-width: 22ch; }
.s-lead-sec { margin-top: 14px; color: var(--muted); max-width: 60ch; font-size: 17px; }

.s-passos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: p; }
.s-passos li { position: relative; padding: 26px 24px; border-radius: 16px; background: var(--slab); border: 1px solid var(--edge); }
.s-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 107, 44, .12); border: 1px solid rgba(255, 107, 44, .35); color: var(--signal-hi); font: 800 20px var(--font-display); margin-bottom: 16px; }
.s-passos h3 { font-size: 20px; margin-bottom: 8px; }
.s-passos p { color: var(--muted); font-size: 15.5px; }

.s-recursos { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-recursos article { padding: 24px; border-radius: 16px; background: var(--slab); border: 1px solid var(--edge); transition: border-color .2s, transform .2s; }
.s-recursos article:hover { border-color: #3a4a5c; transform: translateY(-2px); }
.s-ico { width: 28px; height: 28px; color: var(--signal-hi); margin-bottom: 14px; display: block; }
.s-recursos h3, .s-quem-lista h3 { font-size: 18px; margin-bottom: 6px; }
.s-recursos p, .s-quem-lista p { color: var(--muted); font-size: 15px; }

.s-quem { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.s-quem-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.s-quem-lista li { display: flex; gap: 16px; padding: 20px 22px; border-radius: 16px; background: var(--slab); border: 1px solid var(--edge); }
.s-quem-lista .s-ico { flex: none; margin: 2px 0 0; }

/* preços */
.s-precos { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.s-plano { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; border-radius: 18px; background: var(--slab); border: 1px solid var(--edge); }
.s-plano.destaque { border-color: var(--signal); background: linear-gradient(180deg, rgba(255,107,44,.09), var(--slab) 55%); box-shadow: 0 24px 60px -34px rgba(255, 107, 44, .55); }
.s-selo { position: absolute; top: -11px; left: 22px; background: var(--signal); color: var(--signal-ink); font: 700 11.5px var(--font-body); padding: 4px 11px; border-radius: 999px; }
.s-plano h3 { font-size: 22px; }
.s-nome-plano { color: var(--dim); font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.s-preco { display: flex; align-items: baseline; gap: 3px; margin-top: 10px; font-family: var(--font-display); }
.s-preco b { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.s-preco small { font-size: 17px; color: var(--muted); font-weight: 600; }
.s-preco-txt b { font-size: 28px; letter-spacing: -.02em; }
.s-preco-txt small { margin-left: 4px; }
.s-ciclo { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.s-plano ul { list-style: none; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--edge-soft); display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); flex: 1; align-content: start; }
.s-plano li { display: flex; gap: 9px; }
.s-plano li::before { content: "\2713"; color: var(--ok); font-weight: 700; flex: none; }
.s-sob { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-radius: 18px; border: 1px dashed #3a4a5c; background: rgba(255,255,255,.02); }
.s-sob h3 { font-size: 20px; margin-bottom: 6px; max-width: 34ch; }
.s-sob p { color: var(--muted); font-size: 15px; max-width: 62ch; }
.s-sob .s-btn { flex: none; }
.s-nota { margin-top: 22px; color: var(--dim); font-size: 14px; }

/* dúvidas */
.s-faq-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.s-faq { display: grid; gap: 10px; }
.s-faq details { border-radius: 14px; background: var(--slab); border: 1px solid var(--edge); padding: 0 20px; }
.s-faq details[open] { border-color: #3a4a5c; }
.s-faq summary { cursor: pointer; list-style: none; padding: 17px 0; font: 600 16px var(--font-body); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; color: var(--signal-hi); font: 500 24px/1 var(--font-body); flex: none; transition: transform .2s; }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq p { padding: 0 0 18px; color: var(--muted); font-size: 15.5px; max-width: 62ch; }

/* final + rodapé */
.s-final { padding: clamp(56px, 8vw, 96px) 0; text-align: center; background: radial-gradient(700px 320px at 50% 120%, rgba(255, 107, 44, .18), transparent 70%), var(--ink-2); border-top: 1px solid var(--edge-soft); }
.s-final h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; margin-inline: auto; max-width: 20ch; }
.s-final p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.s-rodape { padding: 36px 0 28px; border-top: 1px solid var(--edge-soft); }
.s-rodape-topo { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.s-rodape nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.s-rodape nav a { color: var(--muted); font-size: 14.5px; text-decoration: none; }
.s-rodape nav a:hover { color: var(--text); }
.s-legal { margin-top: 24px; color: var(--dim); font-size: 13px; max-width: 90ch; }
.s-legal b { color: var(--muted); }
.s-copy { margin-top: 14px; color: var(--dim); font-size: 13px; }

/* ---------------- vídeo ---------------- */
.s-video-grade { display: grid; grid-template-columns: minmax(0, 520px) auto; justify-content: center; gap: clamp(28px, 5vw, 72px); align-items: center; }
.s-video-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--muted); font-size: 16px; }
.s-video-lista li { display: flex; gap: 12px; align-items: baseline; }
.s-video-lista li::before { content: "\25B6"; color: var(--signal-hi); font-size: 11px; flex: none; transform: translateY(-1px); }
.s-video-caixa { margin: 0; width: min(100%, 320px); padding: 10px; border-radius: 30px; background: linear-gradient(160deg, #1d2833, #10161d); border: 1px solid var(--edge); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(255, 107, 44, .25); }
.s-video-caixa video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 22px; background: #0a0e13; object-fit: cover; }

/* ---------------- aplicativos nas lojas ---------------- */
.s-lojas { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; }
.s-lojas-img { width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--edge); box-shadow: 0 30px 70px -40px rgba(255, 107, 44, .5); }
.s-lojas-lista { display: grid; gap: 14px; }
.s-loja { display: grid; gap: 8px; justify-items: start; padding: 20px 22px; border-radius: 16px; background: var(--slab); border: 1px solid var(--edge); }
.s-loja-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.s-loja-nome { font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-hi); }
.s-loja-tag { font: 600 11px var(--font-body); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); }
.s-loja h3 { font-size: 20px; }
.s-loja p { color: var(--muted); font-size: 15px; max-width: 58ch; }
.s-loja .s-btn { margin-top: 4px; }

/* ---------------- tutoriais para o cliente ---------------- */
.s-tuts { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: clamp(24px, 5vw, 64px); justify-content: center; }
.s-tut { display: grid; gap: 10px; justify-items: center; text-align: center; }
.s-tut h3 { font-size: 21px; margin-top: 10px; }
.s-tut p { color: var(--muted); font-size: 15px; max-width: 32ch; }
.s-dur { display: inline-block; margin-left: 4px; font: 500 12px var(--font-mono); color: var(--signal-hi); }
.s-tut .s-btn { margin-top: 6px; }

@media (max-width: 1180px) { .s-nav { gap: 0; margin-left: 4px; } .s-nav a { padding: 8px 8px; font-size: 14px; } .s-top-in { gap: 12px; } }

/* ---------------- telas menores ---------------- */
@media (max-width: 980px) {
    .s-hero-grade, .s-quem, .s-faq-grade, .s-video-grade, .s-lojas { grid-template-columns: 1fr; }
    .s-video-caixa { margin-inline: auto; }
    .s-tuts { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }
    .s-lojas-img { max-width: 340px; margin-inline: auto; }
    .s-passos, .s-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-anel { opacity: .05; right: -320px; }
    .s-sec h2 { max-width: 28ch; }
}
@media (max-width: 760px) {
    .s-burger { display: grid; }
    .s-esconde-cel { display: none; }
    .s-nav { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; margin: 0; padding: 10px clamp(18px, 4vw, 32px) 16px; background: rgba(11, 15, 20, .98); border-bottom: 1px solid var(--edge-soft); display: none; }
    .s-nav.aberto { display: flex; }
    .s-nav a { padding: 13px 12px; font-size: 16px; }
    .s-nav .s-nav-baixar { display: block; color: var(--signal-hi); }
    .s-passos, .s-recursos { grid-template-columns: 1fr; }
    .s-btn-grande { width: 100%; }
    .s-sob { flex-direction: column; align-items: stretch; padding: 22px 20px; }
    .s-ctas { flex-direction: column; }
    .s-ctas-centro { align-items: stretch; }
    .s-tv-tela { min-height: 350px; padding: 18px 14px; }
    .s-caixas i { width: 36px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}