/* ============================================================
   InstallerHQ — Demo viewer (frames the real mockup images)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:'Manrope',-apple-system,sans-serif; background:#0c0f0a; color:#fff; line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }

/* top InstallerHQ banner */
.demo-bar { position:sticky; top:0; z-index:50; background:#111; border-bottom:1px solid rgba(255,255,255,.08); }
.demo-bar-in { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px; flex-wrap:wrap; }
.db-left { display:flex; align-items:center; gap:12px; font-weight:700; font-size:0.92rem; }
.db-left .live { display:inline-flex; align-items:center; gap:8px; color:#cdd6c4; font-weight:600; }
.db-left .live::before { content:""; width:9px; height:9px; border-radius:50%; background:#7AC943; box-shadow:0 0 0 0 rgba(122,201,67,.5); animation:dpulse 2s infinite; }
.db-left b { color:#7AC943; }
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(122,201,67,.5);}70%{box-shadow:0 0 0 9px rgba(122,201,67,0);}100%{box-shadow:0 0 0 0 rgba(122,201,67,0);}}
.db-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.05rem; }
.db-logo img{ height:26px; }
.db-logo .hq{ color:#7AC943; }
.db-cta { background:#7AC943; color:#06210a; font-weight:800; padding:9px 18px; border-radius:999px; font-size:0.88rem; white-space:nowrap; transition:.2s; display:inline-flex; align-items:center; gap:7px; }
.db-cta svg{ width:15px; height:15px; }
.db-cta:hover { background:#86d84c; transform:translateY(-1px); }

/* browser frame */
.stage { max-width:1160px; margin:0 auto; padding:26px 20px 120px; }
.tagline { text-align:center; margin-bottom:22px; }
.tagline h1 { font-size:clamp(1.4rem,3.4vw,2.1rem); font-weight:800; letter-spacing:-.02em; }
.tagline h1 .hq{ color:#7AC943; }
.tagline p { color:#9aa596; margin-top:8px; font-size:0.98rem; }

.browser { border-radius:16px 16px 12px 12px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.1); background:#fff; }
.browser-bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:12px 16px; background:#e9edf2; border-bottom:1px solid #d5dbe2; }
.b-dots{ display:flex; gap:7px; }
.b-dots i{ width:12px; height:12px; border-radius:50%; display:block; }
.b-dots i:nth-child(1){background:#ff5f57;} .b-dots i:nth-child(2){background:#febc2e;} .b-dots i:nth-child(3){background:#28c840;}
.b-url { flex:1; background:#fff; border-radius:8px; padding:8px 14px; font-size:0.82rem; color:#4a5560; font-weight:600; display:flex; align-items:center; gap:8px; }
.b-url svg{ width:13px; height:13px; color:#178048; }
.b-refresh{ width:15px; height:15px; color:#8a94a0; }
.browser-scroll { max-height:none; }
.browser-scroll img { width:100%; display:block; }

/* floating CTA */
.float-cta { position:fixed; right:20px; bottom:20px; z-index:60; display:flex; gap:10px; align-items:center; }
.float-cta a { background:#7AC943; color:#06210a; font-weight:800; padding:14px 22px; border-radius:999px; box-shadow:0 16px 40px -12px rgba(0,0,0,.6); display:inline-flex; align-items:center; gap:9px; font-size:0.98rem; transition:.2s; }
.float-cta a svg{ width:17px; height:17px; }
.float-cta a:hover{ background:#86d84c; transform:translateY(-2px); }
.float-cta .back { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.18); }
.float-cta .back:hover{ background:rgba(255,255,255,.18); }

/* bottom note */
.demo-foot { text-align:center; color:#7c8676; font-size:0.88rem; padding:10px 20px 30px; }
.demo-foot a{ color:#7AC943; font-weight:700; }

@media(max-width:620px){
  .db-left .live span{ display:none; }
  .float-cta a{ padding:12px 16px; font-size:0.9rem; }
  .float-cta .back{ display:none; }
}