:root {
  --bg:#08101e;
  --bg2:#0a1734;
  --card:rgba(16,28,56,.45);
  --line:rgba(0,225,255,.18);
  --tx:#ffffff;
  --mut:#cbd5e1;
  --cy:#00e1ff;
  --bl:#3a9bf8;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

*,*::before,*::after {
  box-sizing:inherit;
  margin:0
}

body {
  background:var(--bg);
  color:var(--tx);
  font:16px/1.6 var(--sans);
  overflow-x:hidden;

background-image:radial-gradient(1px 1px at 12% 20%,#00e1ff88,transparent),radial-gradient(1px 1px at 70% 8%,#00e1ff66,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#3a9bf855,transparent),radial-gradient(1px 1px at 88% 75%,#00e1ff66,transparent),radial-gradient(1px 1px at 25% 90%,#00e1ff55,transparent),radial-gradient(60% 40% at 90% 30%,#0a2a4a66,transparent),radial-gradient(50% 30% at 0% 70%,#08203a44,transparent);
  background-size:340px 340px,420px 420px,300px 300px,380px 380px,460px 460px,100% 100%,100% 100%
}

a {
  color:inherit;
  text-decoration:none
}

.wrap {
  max-width:1180px;
  margin:0 auto;
  padding:0 24px
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.08
}

h2 {
  font-size:clamp(30px,4.2vw,48px);
  text-align:center;
  color:#d7e2f7
}

h3 {
  font-weight:500;
  letter-spacing:-.01em
}

.mono {
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px
}

.tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
  color:var(--cy);
  background:#0a1a2a88
}

.tag::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cy);
  box-shadow:0 0 8px var(--cy)
}

section {
  padding:96px 0;
  position:relative
}

.center {
  text-align:center
}

.center .lead {
  margin:16px auto 0
}

.lead {
  color:var(--mut);
  max-width:620px
}

.rv {
  opacity:0
}

.rv.in {
  opacity:1;
  animation:up .85s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards
}

.skip {
  position:absolute;
  left:-999px;
  top:8px
}

.skip:focus {
  left:8px;
  z-index:50;
  background:var(--cy);
  color:#002432;
  padding:8px 14px;
  border-radius:8px
}