/* Bye Spam — landing. CSS puro, mobile-first, sem dependências. */

:root {
    --bg: #fbfaff;
    --surface: #ffffff;
    --surface-alt: #f3f1fc;
    --surface-2: #edebf8;
    --primary: #6a6fe0;
    --periwinkle: #6e74e0;
    --lilac: #8a6fe0;
    --mint: #2fa48d;
    --mint-soft: #cbf3ea;
    --ink: #1c1b22;
    --muted: #55546b;
    --faint: #7a7990;
    --primary-container: #e6e6ff;
    --on-primary-container: #20215c;
    --outline: #e0def0;
    --shadow: 0 10px 30px rgba(60, 50, 120, 0.10);
    --shadow-sm: 0 4px 14px rgba(60, 50, 120, 0.08);
    --radius: 22px;
    --radius-sm: 14px;
    --brand-gradient: linear-gradient(135deg, #6e74e0 0%, #8a6fe0 100%);
    --maxw: 960px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
h1, h2, h3, p, li, a { overflow-wrap: break-word; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Toggle de idioma controla a visibilidade (default: EN).
   !important garante precedência sobre displays específicos (ex.: .play-text small). */
[data-lang="en"] .lang-pt { display: none !important; }
[data-lang="pt"] .lang-en { display: none !important; }

img, svg { max-width: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ── Cabeçalho / toggle ─────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(251, 250, 255, 0.82);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--outline);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 12px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
    font-size: 1.05rem;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

.lang-toggle {
    display: inline-flex;
    background: var(--surface-alt);
    border: 1px solid var(--outline);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.lang-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lang-toggle button[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    background: var(--brand-gradient);
    color: #fff;
    padding-block: 64px 72px;
    text-align: center;
}
.hero-icon {
    width: 84px; height: 84px;
    border-radius: 22px;
    margin: 0 auto 22px;
    display: block;
    box-shadow: 0 12px 28px rgba(40, 30, 90, 0.28);
}
.hero h1 {
    margin: 0 0 8px;
    font-size: clamp(2.3rem, 7vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero .tagline {
    margin: 0 auto 6px;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    font-weight: 600;
    opacity: 0.96;
}
.hero .subline {
    margin: 0 auto 30px;
    max-width: 34ch;
    opacity: 0.9;
}

/* Botão Google Play — estado "Coming soon" (não clicável). */
.play-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    padding: 12px 20px;
    cursor: default;
    user-select: none;
}
.play-badge .play-icon { width: 26px; height: 26px; flex: none; }
.play-badge .play-text { text-align: left; line-height: 1.15; }
.play-badge .play-text small {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}
.play-badge .play-text strong { font-size: 1.05rem; font-weight: 700; }
.play-badge .soon {
    margin-left: 4px;
    background: var(--mint-soft);
    color: #06382e;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Seções ─────────────────────────────────────────────────── */
section { padding-block: 56px; }
section h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.section-intro { color: var(--muted); margin: 0 0 28px; max-width: 60ch; }

.why {
    background: var(--surface-alt);
    border-block: 1px solid var(--outline);
}
.why ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.why li {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.why li strong { color: var(--ink); }
.why .lead, .why .outro { color: var(--muted); margin: 0; max-width: 62ch; }
.why .outro { margin-top: 22px; font-weight: 600; color: var(--ink); }

/* Cards genéricos */
.cards { display: grid; gap: 16px; margin-top: 8px; }
.card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.card .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    margin-bottom: 14px;
}
.card .chip svg { width: 24px; height: 24px; }
.card h3 { margin: 0 0 6px; font-size: 1.12rem; }
.card p { margin: 0; color: var(--muted); }

/* Privacidade em destaque */
.privacy-highlight { background: var(--surface-alt); border-block: 1px solid var(--outline); }
.privacy-highlight .cards { grid-template-columns: 1fr; }
.pill-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pill-list li {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.pill-list .tick {
    flex: none; width: 24px; height: 24px; border-radius: 999px;
    background: var(--mint-soft); color: var(--mint);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.pill-list .tick svg { width: 15px; height: 15px; }
.pill-list b { display: block; }
.pill-list span { color: var(--muted); }

/* Nota voicemail */
.note {
    display: flex; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-left: 4px solid var(--lilac);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    color: var(--muted);
}
.note .note-icon { flex: none; color: var(--lilac); }
.note .note-icon svg { width: 26px; height: 26px; }
.note h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
.note p { margin: 0; }

/* ── Página de privacidade ──────────────────────────────────── */
.doc { padding-block: 44px 64px; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 6px; letter-spacing: -0.01em; }
.doc .updated { color: var(--faint); font-size: 0.9rem; margin: 0 0 26px; }
.doc .prose {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    color: var(--muted);
    font-size: 1.02rem;
}
.doc .prose p { margin: 0; }

/* ── Rodapé ─────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--outline);
    padding-block: 32px 40px;
    color: var(--faint);
    font-size: 0.92rem;
}
.site-footer .container {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    align-items: center; justify-content: space-between;
}
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 720px) {
    .hero { padding-block: 88px 96px; }
    .why ul { grid-template-columns: 1fr 1fr; }
    .cards { grid-template-columns: repeat(3, 1fr); }
    .privacy-highlight .pill-list { grid-template-columns: 1fr 1fr; }
}