/* ===== DEMO INTERACTIVE — styles ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fff;--bg2:#F8FAFC;--text:#0F172A;--muted:#64748B;
  --primary:#2563EB;--primary-dark:#1D4ED8;--green:#059669;
  --border:rgba(15,23,42,.08);--r:16px;--sh:0 4px 24px rgba(15,23,42,.08);
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg2);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

.demo-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.demo-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.03em}
.demo-logo span{color:var(--primary)}
.demo-nav-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.demo-btn{padding:.55rem 1rem;border-radius:100px;font-size:.78rem;font-weight:600;border:none;cursor:pointer;font-family:inherit}
.demo-btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.demo-btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.3)}

.demo-hero{padding:2.5rem 0 1.5rem;text-align:center}
.demo-hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}
.demo-hero p{color:var(--muted);max-width:520px;margin:0 auto 1.25rem;font-size:.92rem}

.demo-tabs{display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem}
.demo-tab{padding:.45rem .9rem;border-radius:100px;font-size:.72rem;font-weight:600;border:1px solid var(--border);background:#fff;cursor:pointer;font-family:inherit;color:var(--muted);transition:all .2s}
.demo-tab.on{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 10px rgba(37,99,235,.25)}

.demo-phone{max-width:390px;margin:0 auto;background:#fff;border-radius:28px;border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;min-height:520px}
.demo-status{height:28px;background:#0F172A;display:flex;align-items:center;justify-content:center;font-size:.55rem;color:rgba(255,255,255,.5);letter-spacing:.08em}
.demo-screen{display:none;padding:1rem;animation:fadeIn .35s ease}
.demo-screen.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.demo-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.demo-topbar-t{font-weight:700;font-size:.88rem}
.demo-badge{font-size:.58rem;font-weight:700;padding:.2rem .5rem;border-radius:100px;background:rgba(5,150,105,.1);color:var(--green)}

.demo-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;margin-bottom:.85rem}
.demo-stat{background:var(--bg2);border-radius:12px;padding:.65rem;text-align:center;border:1px solid var(--border)}
.demo-stat-n{font-size:1.15rem;font-weight:800;color:var(--primary)}
.demo-stat-l{font-size:.58rem;color:var(--muted);margin-top:.15rem}

.demo-list{display:flex;flex-direction:column;gap:.45rem}
.demo-item{display:flex;align-items:center;gap:.55rem;padding:.65rem;background:#fff;border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:transform .15s,border-color .15s}
.demo-item:hover{border-color:rgba(37,99,235,.3);transform:translateY(-1px)}
.demo-item-ic{font-size:1.2rem}
.demo-item-t{font-size:.75rem;font-weight:600}
.demo-item-s{font-size:.62rem;color:var(--muted)}

.demo-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:.75rem 0}
.demo-photo{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#CBD5E1,#94A3B8);position:relative;overflow:hidden}
.demo-photo.ai::after{content:'🤖 IA';position:absolute;bottom:4px;left:4px;font-size:.5rem;background:rgba(255,255,255,.9);padding:1px 5px;border-radius:100px;font-weight:700;color:var(--primary)}
.demo-ai-box{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.15);border-radius:12px;padding:.65rem;margin:.65rem 0;font-size:.68rem;line-height:1.55;color:#1E40AF}

.demo-pdf{border:1px solid var(--border);border-radius:12px;padding:1rem;background:#fff;margin-top:.5rem}
.demo-pdf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.demo-pdf-logo{font-weight:800;font-size:.85rem}
.demo-pdf-logo span{color:var(--primary)}
.demo-pdf-meta{font-size:.58rem;color:var(--muted)}

.demo-cta-band{background:linear-gradient(135deg,#0F172A,#1E3A5F);color:#fff;padding:3rem 0;margin-top:2.5rem;text-align:center}
.demo-cta-band h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:.5rem;letter-spacing:-.02em}
.demo-cta-band p{color:rgba(255,255,255,.65);font-size:.88rem;margin-bottom:1.25rem;max-width:480px;margin-left:auto;margin-right:auto}
.demo-cta-band .demo-btn-primary{font-size:.92rem;padding:.85rem 1.75rem}
.demo-cta-note{font-size:.68rem;color:rgba(255,255,255,.45);margin-top:.75rem}

.demo-social{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2rem 0;text-align:center}
@media(max-width:640px){.demo-social{grid-template-columns:repeat(2,1fr)}}
.demo-social-n{font-size:1.5rem;font-weight:800;color:var(--primary)}
.demo-social-l{font-size:.62rem;color:var(--muted);margin-top:.2rem;text-transform:uppercase;letter-spacing:.04em}

.demo-progress{height:4px;background:var(--bg2);border-radius:100px;margin:.5rem 0;overflow:hidden}
.demo-progress-fill{height:100%;background:var(--primary);border-radius:100px;transition:width .5s ease}

.demo-toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:.65rem 1.1rem;border-radius:100px;font-size:.72rem;font-weight:600;opacity:0;pointer-events:none;transition:all .3s;z-index:200}
.demo-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}