/* ===== Variante: primeiro bloco (hero) com fundo laranja ===== */
.hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, #ff7a00 0%, #ff6a00 45%, #ff4d2e 100%);
    padding: 80px 0 90px;
}
.hero h1, .hero .hero-title { color: #ffffff; }
.hero .gradient-text {
    background: none;
    -webkit-text-fill-color: #fff2b8;
    color: #fff2b8;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}
.hero .hero-subtitle { color: rgba(255, 255, 255, 0.95); }
.hero .hero-subtitle strong { color: #ffffff; }
.hero .hero-trust, .hero .hero-trust span { color: rgba(255, 255, 255, 0.92); }

.hero .pill-badge {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}
.hero .pill-badge .dot { background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }

.hero .btn-primary {
    background: #ffffff;
    color: #e55a00;
    box-shadow: 0 8px 24px rgba(120, 30, 0, 0.25);
}
.hero .btn-primary:hover { box-shadow: 0 12px 30px rgba(120, 30, 0, 0.35); }
.hero .btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}
.hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.28); color: #ffffff; }

.hero .phone-mockup {
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 30px 70px -20px rgba(110, 25, 0, 0.55);
}

/* sublinhado continuo (sem "pular" as letras com cauda como q, p) */
.hero .gradient-text { text-decoration-skip-ink: none; }