:root{
  --bg-start:#0f172a;
  --bg-end:#1e293b;
  --primary:#38bdf8;
  --text:#f8fafc;
  --text-muted:#94a3b8;
  --card-bg:rgba(255,255,255,0.05);
  --radius:16px;
  --transition:0.3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Inter","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  background:linear-gradient(120deg,var(--bg-start),var(--bg-end));
  color:var(--text);
  line-height:1.8;
  scroll-behavior:smooth;
}
header{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 1rem;
  background:linear-gradient(160deg,var(--bg-start) 0%,var(--bg-end) 60%);
}
h1{
  font-size:clamp(2.5rem,6vw,4rem);
  margin-bottom:1rem;
}
.lead{
  font-size:clamp(1.1rem,2.5vw,1.5rem);
  max-width:40rem;
  margin:0 auto 2.5rem;
  color:var(--text-muted);
}
.btn{
  background:var(--primary);
  color:#0f172a;
  padding:0.9rem 2.2rem;
  border:none;
  border-radius:var(--radius);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
.btn:hover{opacity:0.9;transform:translateY(-2px);}
section{
  max-width:960px;
  margin:4rem auto;
  padding:0 1rem;
}
.card{
  background:var(--card-bg);
  backdrop-filter:blur(6px);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
  margin-bottom:2.5rem;
}
h2{
  margin-top:0;
  font-size:2rem;
  color:var(--primary);
}
ul{padding-left:1.25rem;line-height:1.7;}
li{margin-bottom:0.75rem;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
.note{font-style:italic;color:var(--text-muted);}
footer{
  text-align:center;
  padding:3rem 1rem;
  font-size:0.85rem;
  color:var(--text-muted);
}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.6s var(--transition),transform 0.6s var(--transition);}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-color-scheme:light){
  :root{
    --bg-start:#fafafa;
    --bg-end:#e5e7eb;
    --text:#1e293b;
    --text-muted:#64748b;
    --card-bg:rgba(255,255,255,0.65);
  }
  .btn{color:#1e293b;}
}