:root{
  --bg:#0b1020;
  --fg:#e9f0ff;
  --muted:rgba(233,240,255,0.7);
  --accent: #8bd3ff;
  --progress-height:6px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#03030a 0%, #071028 100%);color:var(--fg);}
.topbar{position:sticky;top:0;z-index:40;padding:28px 20px;background:linear-gradient(180deg, rgba(3,4,10,0.6), rgba(3,4,10,0.2));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);}
.topbar h1{margin:0;font-size:1.25rem;letter-spacing:0.02em}
.topbar .lead{margin:6px 0 0;color:var(--muted);font-size:0.95rem}
#progress{position:absolute;left:0;right:0;bottom:0;height:var(--progress-height);background:linear-gradient(90deg,var(--accent),#7b61ff);opacity:0.14}

main{counter-reset:panels}
.panel{position:relative;min-height:85vh;padding:56px 20px;display:flex;align-items:center;}
.panel .bg{position:absolute;inset:0;z-index:0;filter:blur(18px) saturate(120%);opacity:0.18;transform-origin:center;background:radial-gradient(circle at 30% 30%, rgba(139,211,255,0.18), transparent 20%), radial-gradient(circle at 80% 70%, rgba(123,97,255,0.12), transparent 25%)}
.panel .content{position:relative;z-index:2;max-width:900px;margin:0 auto;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:14px;box-shadow:0 6px 40px rgba(2,6,23,0.6);backdrop-filter: blur(6px)}
.panel h2{margin:0 0 8px;font-size:clamp(1.3rem, 2.6vw, 2rem)}
.panel .subtitle{margin:0 0 14px;color:var(--muted);font-weight:500}
.panel p{color:var(--muted);line-height:1.6;margin:0 0 12px}
blockquote{margin:0 0 14px;padding:12px 18px;border-left:3px solid rgba(139,211,255,0.18);background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent)}

.panel{opacity:0;transform:translateY(30px) scale(0.995);transition:opacity 800ms cubic-bezier(.2,.9,.2,1), transform 900ms cubic-bezier(.2,.9,.2,1)}
.panel.reveal{opacity:1;transform:none}

.panel:nth-child(odd) .bg{opacity:0.12}
.panel:nth-child(even) .bg{opacity:0.18}

.footer{padding:24px 20px;text-align:center;color:rgba(233,240,255,0.45);font-size:0.9rem}

@media (max-width:720px){
  .panel{padding:36px 14px}
  .panel .content{padding:20px;border-radius:10px}
}