/* ==========================================================
           SPINHUB PRO - LANDING v2  ·  Direção: SaaS premium clean
           Linguagem: Design System oficial (dark neo-futurista).
           Acento único: Ciano Neon #00e5ff.
           Esmeralda #10b981: apenas sinal de resultado / lucro / gestão.
           Raio: botões = pílula · cartões = 20px · inputs = design-system.
           Glow neon usado com parcimônia (só CTA primário e plano em destaque).
           ========================================================== */
        :root {
            --primary: #00e5ff;
            --primary-light: #80f2ff;
            --primary-dark: #008b99;
            --bg: #030a10;
            --success: #10b981;
            --ink: #f6fafd;
            --ink-soft: #9fb2c2;
            --ink-mute: #5f7284;
            --line: rgba(255, 255, 255, 0.08);
            --line-strong: rgba(255, 255, 255, 0.14);
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        html {
            background-color: var(--bg);
            color: var(--ink);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        body { line-height: 1.5; }

        h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; }
        p { text-wrap: pretty; }
        .tabular-nums { font-variant-numeric: tabular-nums; }
        ::selection { background: var(--primary); color: #04121a; }

        .container-6xl { max-width: 1152px; margin-inline: auto; }

        /* ---------- Botões (pílula) ---------- */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
            border-radius: 9999px; font-weight: 800; font-size: 0.875rem;
            letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
            transition: transform 0.18s var(--ease), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
        }
        .btn:active { transform: scale(0.97); }
        .btn-primary {
            background: linear-gradient(100deg, var(--primary-dark), var(--primary));
            color: #04121a;
            box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
        }
        .btn-primary:hover { box-shadow: 0 0 0 1px rgba(0,229,255,0.25), 0 10px 30px -10px rgba(0,229,255,0.45); transform: translateY(-1px); }
        .btn-ghost {
            background: transparent; color: var(--ink);
            border: 1px solid var(--line-strong);
        }
        .btn-ghost:hover { border-color: rgba(0,229,255,0.5); color: #fff; }
        .btn-emerald {
            background: linear-gradient(100deg, #047857, var(--success));
            color: #ffffff;
            box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
        }
        .btn-emerald:hover { box-shadow: 0 10px 30px -10px rgba(16,185,129,0.5); transform: translateY(-1px); }
        .btn-quiet {
            background: rgba(255,255,255,0.04); color: var(--ink);
            border: 1px solid var(--line);
        }
        .btn-quiet:hover { border-color: var(--line-strong); }

        .link-arrow { color: var(--primary-light); font-weight: 700; }
        .link-arrow i { transition: transform 0.2s var(--ease); }
        .link-arrow:hover i { transform: translateX(3px); }

        .eyebrow {
            font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
            text-transform: uppercase; color: var(--primary-light);
        }

        /* ---------- Cartão sutil (usado com parcimônia) ---------- */
        .card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--line);
            border-radius: 20px;
            transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s var(--ease);
        }
        .card:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.035); }

        /* ---------- Ticker de giros catalogados (único marquee da página) ---------- */
        .ticker {
            position: relative; width: 100vw;
            left: 50%; transform: translateX(-50%);
            border-block: 1px solid var(--line);
            overflow: hidden; padding-block: 20px;
            background: rgba(255,255,255,0.015);
        }
        /* Fade nas bordas via gradiente sólido, não mask-image: em vários navegadores/GPUs
           mobile, mask-image aplicado sobre um elemento com animação de transform infinita
           trava a animação por completo (custo de recompor a máscara a cada frame). */
        .ticker::before, .ticker::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none;
        }
        .ticker::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
        .ticker::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
        .ticker-track {
            display: flex; align-items: center; gap: 14px;
            width: max-content;
            animation: tickerScroll 45s linear infinite;
            will-change: transform;
        }
        .ticker:hover .ticker-track { animation-play-state: paused; }
        @keyframes tickerScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .num-badge {
            width: 30px; height: 30px; flex: none;
            border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 800; color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
        }
        .num-red { background-color: #c53b39; }
        .num-black { background-color: #14161b; border: 1px solid #2b2f38; }
        .num-green { background-color: #1c9553; }

        .star-active { color: #f59e0b; }
        .star-inactive { color: #475569; }

        /* ---------- Botões do modal ---------- */
        .btn-modal-cancel {
            background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong);
            color: var(--ink-soft); border-radius: 9999px; transition: all 0.2s ease;
        }
        .btn-modal-cancel:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
        .btn-modal-confirm {
            background: linear-gradient(100deg, var(--primary-dark), var(--primary));
            color: #04121a; border: none; border-radius: 9999px; transition: all 0.2s ease;
        }
        .btn-modal-confirm:hover { box-shadow: 0 0 16px rgba(0,229,255,0.4); }
        .btn-modal-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

        /* ---------- WhatsApp flutuante ---------- */
        .whatsapp-floating-btn {
            position: fixed; bottom: 24px; left: 24px;
            background-color: #25d366; color: #fff;
            border-radius: 9999px; width: 54px; height: 54px;
            display: flex; justify-content: center; align-items: center;
            font-size: 27px; z-index: 99999;
            box-shadow: 0 10px 26px rgba(37, 211, 102, 0.38);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            text-decoration: none;
        }
        .whatsapp-floating-btn:hover { transform: scale(1.08); color: #fff; box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); }

        /* ---------- Carrossel de feedbacks (infinito) ---------- */
        .feedback-carousel-wrapper {
            position: relative; width: 100%; overflow: hidden; padding: 8px 0 16px 0;
        }
        /* Mesmo motivo do .ticker acima: gradiente sólido em vez de mask-image
           para não travar a animação infinita em navegadores/GPUs mobile mais fracos. */
        .feedback-carousel-wrapper::before, .feedback-carousel-wrapper::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 5%; z-index: 2; pointer-events: none;
        }
        .feedback-carousel-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
        .feedback-carousel-wrapper::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
        .feedback-carousel-track {
            display: flex; align-items: flex-start; width: max-content;
            animation: feedbackScroll 58s linear infinite; will-change: transform;
        }
        .feedback-carousel-wrapper:hover .feedback-carousel-track { animation-play-state: paused; }
        .feedback-column {
            width: 320px; min-width: 320px; max-width: 320px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 16px;
        }
        .feedback-card-item {
            width: 100%; border-radius: 18px; overflow: hidden;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--line);
            transition: transform 0.35s var(--ease), border-color 0.3s ease;
            display: flex; flex-direction: column; cursor: pointer;
        }
        .feedback-card-item:hover { transform: translateY(-4px); border-color: rgba(0,229,255,0.4); }
        .feedback-card-item img { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 17px; }
        @keyframes feedbackScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (max-width: 640px) {
            .feedback-column { width: 264px; min-width: 264px; max-width: 264px; gap: 12px; }
            .feedback-carousel-track { animation-duration: 46s; }
        }

        /* ---------- Reveal on scroll (sutil, respeita prefers-reduced-motion) ---------- */
        @media (prefers-reduced-motion: no-preference) {
            .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
            .reveal.in { opacity: 1; transform: none; }
            .hero-in { animation: heroIn 1s var(--ease) both; }
            @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
        }
        @media (prefers-reduced-motion: reduce) {
            .ticker-track, .feedback-carousel-track { animation: none; }
            .feedback-carousel-track { flex-wrap: nowrap; }
        }

        /* ---------- Brilho de topo do hero (sutil) ---------- */
        .hero-halo {
            position: absolute; inset: -20% 0 auto 0; height: 620px; z-index: 0;
            background: radial-gradient(50% 60% at 50% 0%, rgba(0, 229, 255, 0.12), transparent 70%);
            pointer-events: none;
        }
        .divider { height: 1px; background: var(--line); }