:root{
  --bg0:#050612;
  --bg1:#070a18;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);

  --text:#f3f5ff;
  --muted: rgba(243,245,255,.72);

  --p:#ff3cac;
  --a:#2b86c5;

  --shadow: 0 14px 45px rgba(0,0,0,.50);
  --r-lg: 22px;
  --r-md: 16px;

  --container: 1120px;
  --navh: 72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}

.container{width:min(var(--container), calc(100% - 2rem)); margin-inline:auto}

.section{padding:84px 0; position:relative}
.section__title{
  font-family:Orbitron, sans-serif;
  text-align:center;
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
  margin:0 0 10px;
  letter-spacing:.6px;
}
.section__lead{
  text-align:center;
  max-width:820px;
  margin:0 auto 34px;
  color:var(--muted);
  line-height:1.6;
}

.section--alt{
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,60,172,.08), transparent 60%);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.note{color:var(--muted); font-size:.92rem; margin:12px 0 0}
.hint{margin:18px 0 0; text-align:center; color:var(--muted)}