/* ============================================================
   SEO ANALYZER — FINAL CSS
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg-body:#fff;--bg-section:#f7f8fb;--bg-card:#fff;--bg-input:#f2f4f8;
    --border:#e4e7ee;--border-light:#ebeef4;
    --text-primary:#0f1728;--text-secondary:#4b5563;--text-muted:#9ca3af;--text-light:#b0b7c3;
    --blue:#3b5bfe;--blue-dark:#2a45d9;--blue-light:#6b83ff;
    --blue-bg:rgba(59,91,254,0.06);--blue-bg-strong:rgba(59,91,254,0.12);--blue-glow:rgba(59,91,254,0.15);
    --excellent:#10b981;--excellent-bg:rgba(16,185,129,0.08);
    --good:#3b82f6;--good-bg:rgba(59,130,246,0.08);
    --warning:#f59e0b;--warning-bg:rgba(245,158,11,0.08);
    --critical:#ef4444;--critical-bg:rgba(239,68,68,0.08);
    --font:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
    --container:1080px;--radius:14px;--radius-sm:10px;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}

/* Canvas de partículas — fundo global */
#particles-canvas{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

.step{display:none;min-height:100vh}
.step.active{display:flex;align-items:center;justify-content:center;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   LOGO — imagem PNG, pequena, em todas as telas
   ============================================================ */
.site-logo{
    display:block;
    height:26px;
    width:auto;
    margin:0 auto 18px;
    object-fit:contain;
}

/* ============================================================
   HOME
   ============================================================ */
#step-home{position:relative;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,#f4f6fc 50%,#eef1fb 100%)}
.home-bg-effects{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(100px)}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(59,91,254,0.1),transparent 65%);top:-180px;right:-120px;animation:orbFloat 12s ease-in-out infinite}
.orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(99,102,241,0.06),transparent 65%);bottom:-80px;left:-80px;animation:orbFloat 15s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-15px)}}
.grid-overlay{
    position:absolute;inset:0;
    background-image:
        radial-gradient(circle,rgba(59,91,254,0.04) 1px,transparent 1px),
        linear-gradient(rgba(59,91,254,0.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(59,91,254,0.025) 1px,transparent 1px);
    background-size:24px 24px,60px 60px,60px 60px;
}
.home-container{position:relative;z-index:1;text-align:center;max-width:720px;padding:40px 24px}

.brand-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;background:var(--blue-bg);border:1px solid rgba(59,91,254,0.12);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--blue);margin-bottom:22px}
.brand-badge svg{flex-shrink:0}
.brand-badge.small{font-size:.72rem;padding:5px 12px;margin-bottom:10px}

/* TÍTULO — 2 linhas, fonte maior */
.home-title{
    font-size:clamp(1.5rem,3.4vw,2.1rem);
    font-weight:800;
    line-height:1.3;
    margin-bottom:14px;
    letter-spacing:-0.02em;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
}
.home-title em{font-style:normal;color:var(--blue)}

.home-subtitle{font-size:.95rem;color:var(--text-secondary);max-width:520px;margin:0 auto 30px;line-height:1.7}

.url-input-wrapper{display:flex;gap:10px;max-width:560px;margin:0 auto 12px}
.url-input-box{flex:1;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius);transition:border-color .25s,box-shadow .25s}
.url-input-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);background:#fff}
.url-input-box svg{color:var(--text-muted);flex-shrink:0}
.url-input-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:var(--font);font-size:.88rem;font-weight:500;padding:14px 0}
.url-input-box input::placeholder{color:var(--text-light);font-weight:400}

.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);font-family:var(--font);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .25s;white-space:nowrap}
.btn-primary svg{flex-shrink:0}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,91,254,0.25)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-full{width:100%;justify-content:center}

.input-error{color:var(--critical);font-size:.82rem;font-weight:500;margin-top:6px;text-align:center}

.trust-badges{display:flex;justify-content:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.trust-badges span{display:flex;align-items:center;gap:5px;font-size:.74rem;font-weight:500;color:var(--text-muted)}
.trust-badges svg{color:var(--blue);flex-shrink:0}

/* ============================================================
   LEAD FORM
   ============================================================ */
#step-lead{background:linear-gradient(160deg,#ffffff 0%,#f5f7fc 50%,#eff2fb 100%)}
.lead-container{width:100%;max-width:560px}
.lead-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:32px 36px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.lead-card-header{margin-bottom:20px}
.lead-icon-wrap{width:46px;height:46px;border-radius:50%;background:var(--blue-bg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--blue)}

/* FRASE EM 1 LINHA — maior */
.lead-title{
    font-size:1.05rem;
    font-weight:800;
    margin-bottom:8px;
    letter-spacing:-0.01em;
    white-space:nowrap;
}
.lead-card-header p{font-size:.83rem;color:var(--text-secondary);margin-bottom:0}
.lead-url-highlight{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:4px;
    padding:5px 10px;
    background:var(--blue-bg);
    border-radius:6px;
}

.form-group{text-align:left;margin-bottom:12px}
.form-group label{display:block;font-size:.74rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.form-group input{width:100%;padding:12px 14px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font);font-size:.88rem;font-weight:500;outline:none;transition:border-color .25s,box-shadow .25s}
.form-group input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);background:#fff}
.form-group input::placeholder{color:var(--text-light);font-weight:400}
#lead-form .btn-primary{margin-top:6px}
.lead-privacy{font-size:.7rem;color:var(--text-light);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:500}

/* ============================================================
   LOADING + TIMER
   ============================================================ */
#step-loading{background:linear-gradient(160deg,#ffffff 0%,#f5f7fc 50%,#eff2fb 100%)}
.loading-container{text-align:center;max-width:480px;width:100%}
.loading-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:32px 28px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}

.loading-spinner{position:relative;width:72px;height:72px;margin:0 auto 18px}
.spinner-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--border);border-top-color:var(--blue);animation:spin 1.1s linear infinite}
.spinner-ring.inner{inset:10px;border-top-color:var(--blue-light);animation-duration:.75s;animation-direction:reverse}
.spinner-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-card h2{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.loading-card>p{color:var(--text-secondary);font-size:.83rem;margin-bottom:6px;min-height:1.2em}

/* TIMER */
.loading-timer{
    font-size:.8rem;
    font-weight:600;
    color:var(--blue);
    margin-bottom:16px;
    padding:6px 14px;
    background:var(--blue-bg);
    border-radius:100px;
    display:inline-block;
}
.loading-timer span{
    font-variant-numeric:tabular-nums;
}

.loading-progress{height:4px;background:var(--bg-input);border-radius:4px;overflow:hidden;margin-bottom:20px}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--blue-light));border-radius:4px;transition:width .5s ease}

.loading-steps{text-align:left;display:flex;flex-direction:column;gap:8px}
.loading-step{font-size:.78rem;font-weight:500;color:var(--text-light);display:flex;align-items:center;gap:10px;transition:color .3s}
.ls-dot{width:8px;height:8px;min-width:8px;border-radius:50%;background:var(--border);transition:background .3s,box-shadow .3s}
.loading-step.active{color:var(--blue)}
.loading-step.active .ls-dot{background:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);animation:pulse-dot 1.2s ease-in-out infinite}
.loading-step.done{color:var(--excellent)}
.loading-step.done .ls-dot{background:var(--excellent);box-shadow:none;animation:none}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px var(--blue-glow)}50%{box-shadow:0 0 0 6px rgba(59,91,254,0.08)}}

/* ============================================================
   DASHBOARD
   ============================================================ */
#step-dashboard.active{display:block;min-height:auto;padding:36px 0 56px;animation:fadeIn .5s ease;background:linear-gradient(160deg,#ffffff 0%,#f5f7fc 50%,#eff2fb 100%)}
.dash-header{padding:28px 0 22px}
.dash-header h1{font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800;margin-bottom:6px;letter-spacing:-0.02em}
.dash-url{color:var(--blue);font-size:.86rem;font-weight:600;word-break:break-all;margin-bottom:3px}
.dash-date{font-size:.74rem;font-weight:500;color:var(--text-muted)}

.dash-summary{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.summary-icon{width:42px;height:42px;min-width:42px;background:var(--blue-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.summary-content h3{font-size:.86rem;font-weight:700;margin-bottom:4px}
.summary-content p{font-size:.83rem;color:var(--text-secondary);line-height:1.6}

.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:18px}
.score-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center;transition:all .25s;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.score-card:hover{border-color:var(--blue-bg-strong);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.score-card .card-label{font-size:.68rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}

.score-gauge{position:relative;width:86px;height:86px;margin:0 auto 12px}
.score-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-gauge .gauge-bg{fill:none;stroke:var(--bg-input);stroke-width:5}
.score-gauge .gauge-fill{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease}
.score-gauge .gauge-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;letter-spacing:-0.02em}

.card-status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.card-status.excellent{background:var(--excellent-bg);color:var(--excellent)}
.card-status.good{background:var(--good-bg);color:var(--good)}
.card-status.warning{background:var(--warning-bg);color:var(--warning)}
.card-status.critical{background:var(--critical-bg);color:var(--critical)}
.card-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.score-card .card-tip{font-size:.74rem;color:var(--text-muted);margin-top:8px;line-height:1.4}

.dash-observations{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.dash-observations h3{font-size:.88rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.dash-observations h3 svg{color:var(--blue);flex-shrink:0}
.obs-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border-light)}
.obs-item:last-child{border-bottom:none;padding-bottom:0}
.obs-item:first-child{padding-top:0}
.obs-dot{width:8px;height:8px;min-width:8px;border-radius:50%;margin-top:6px}
.obs-dot.excellent{background:var(--excellent)}.obs-dot.good{background:var(--good)}.obs-dot.warning{background:var(--warning)}.obs-dot.critical{background:var(--critical)}
.obs-text{font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.obs-text strong{color:var(--text-primary);font-weight:700}

.dash-cta{background:var(--bg-card);border:1.5px solid var(--blue-bg-strong);border-radius:var(--radius);padding:36px 28px;text-align:center;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,0.04);position:relative;overflow:hidden}
.dash-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-light))}
.cta-content h2{font-size:clamp(1.1rem,2.8vw,1.35rem);font-weight:800;margin-bottom:8px;line-height:1.3}
.cta-content p{color:var(--text-secondary);font-size:.86rem;max-width:480px;margin:0 auto 22px;line-height:1.6}
.cta-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--radius-sm);font-family:var(--font);font-size:.86rem;font-weight:700;cursor:pointer;transition:all .25s;text-decoration:none;border:none}
.btn-cta.whatsapp{background:#25D366;color:#fff}
.btn-cta.whatsapp:hover{background:#1fb855;transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,211,102,0.25)}
.btn-cta.secondary{background:var(--bg-input);color:var(--text-secondary);border:1.5px solid var(--border)}
.btn-cta.secondary:hover{background:var(--border-light);color:var(--text-primary)}
.dash-footer{text-align:center;padding:16px 0}
.dash-footer p{font-size:.7rem;color:var(--text-light)}
.powered-by-footer{margin-top:4px}
.powered-by-footer a{color:var(--blue);text-decoration:none;font-weight:700}

/* Favicon do cliente — lead form */
.client-favicon{width:18px;height:18px;border-radius:3px;vertical-align:middle;margin-right:6px}
#lead-url-text{color:var(--blue);font-weight:700;font-size:.83rem;word-break:break-all}

/* Favicon do cliente — dashboard */
.dash-client-info{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.client-favicon-dash{width:24px;height:24px;border-radius:4px;border:1.5px solid var(--border)}

/* Botão PDF */
.btn-cta.pdf{background:var(--blue);color:#fff}
.btn-cta.pdf:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,91,254,0.25)}

/* ============================================================
   RODAPÉ GLOBAL — discreto em todas as telas
   ============================================================ */
.global-footer{
    text-align:center;
    font-size:.55rem;
    color:var(--text-muted);
    opacity:.4;
    margin-top:28px;
    font-weight:500;
    letter-spacing:.01em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:640px){
    .url-input-wrapper{flex-direction:column}
    .btn-primary{justify-content:center}
    .trust-badges{flex-direction:column;align-items:center;gap:6px}
    .lead-card{padding:24px 18px}
    .lead-title{font-size:.85rem}
    .score-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .score-card{padding:16px 12px}
    .score-gauge{width:68px;height:68px}
    .score-gauge .gauge-value{font-size:1.15rem}
    .dash-summary{flex-direction:column;text-align:center;align-items:center}
    .dash-cta{padding:28px 18px}
    .cta-buttons{flex-direction:column}
}
@media(max-width:400px){.score-grid{grid-template-columns:1fr}}