/* Simple aesthetic CSS for demo hosting site */
:root{--bg:#071022;--card:#0b1224;--accent:#22c1c3;--muted:#9fb0c7;color:#eaf6ff}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg),#031223);color:var(--muted);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(255,255,255,0.02);backdrop-filter:blur(4px)}
.brand{font-weight:800;font-size:20px;color:var(--accent)}
nav a{color:var(--muted);margin-left:12px;text-decoration:none}
.main{padding:20px;max-width:1000px;margin:0 auto}
.hero{padding:28px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);border-radius:12px}
.hero h1{color:#fff;margin:0 0 8px 0}
.features{display:flex;gap:12px;margin-top:12px}
.card{background:var(--card);padding:12px;border-radius:10px;color:var(--muted);box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.plan{padding:12px}
footer{padding:12px;text-align:center;opacity:0.7}

/* Cutscene overlay styles */
.overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.95),rgba(2,6,23,0.99));display:flex;align-items:center;justify-content:center;z-index:9999}
.hidden{display:none}
.scene{position:relative;width:100%;height:100%;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#7ec8ff,#3b82f6 60%);height:60%}
.road{position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(90deg,#222,#222 30px,#1a1a1a 30px,#1a1a1a 60px)}
.car{position:absolute;left:-200px;bottom:120px;width:200px;height:80px;background:linear-gradient(180deg,#111,#333);border-radius:12px;display:flex;align-items:flex-end;justify-content:space-between;padding:8px 14px;animation:carDrive 6s linear forwards}
.car .wheel{width:28px;height:28px;border-radius:50%;background:#000;border:4px solid #333}
.person{position:absolute;left:-60px;bottom:160px;width:48px;height:80px;background:linear-gradient(180deg,#ffd9c7,#ff8a65);border-radius:8px;animation:personWalk 6s linear forwards}
.desk{position:absolute;right:120px;bottom:140px;width:160px;height:100px;background:#2b2b2b;border-radius:8px;display:flex;align-items:flex-end;justify-content:center}
.desk-top{width:140px;height:16px;background:#3b3b3b;border-radius:4px;margin-bottom:10px}
#caption{position:absolute;left:16px;top:16px;color:#fff;font-size:18px}
#skip{position:absolute;right:16px;top:16px;padding:8px 12px;background:rgba(0,0,0,0.4);color:#fff;border:0;border-radius:8px}

@keyframes carDrive{0%{left:-250px}50%{left:40%}100%{left:60%}}
@keyframes personWalk{0%{left:-100px}50%{left:48%}100%{left:56%}}

/* simple responsive */
@media(max-width:600px){ .features{flex-direction:column} }