:root{
  --ink:#101a38;
  --muted:#68718d;
  --cyan:#25c9dc;
  --purple:#6962ed;
  --pink:#e457c5;
  --amber:#af7318;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--ink);

  background:
    radial-gradient(circle at 8% 8%,rgba(38,203,220,.17),transparent 31%),
    radial-gradient(circle at 92% 36%,rgba(112,91,240,.16),transparent 36%),
    radial-gradient(circle at 45% 95%,rgba(229,86,195,.11),transparent 40%),
    linear-gradient(155deg,#f8fdff,#eff7ff 36%,#f6f2ff 70%,#fff5fb);
}

.shell{
  width:min(1050px,calc(100% - 28px));
  margin:auto;
  padding:22px 0 60px;
}

.top,
.hero,
.section{
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.73);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(42,52,102,.065);
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  border-radius:20px;
}

.brand{
  font-weight:900;
  text-decoration:none;
  color:var(--ink);
}

.nav a{
  margin-left:10px;
  color:#545d78;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}

.hero{
  margin-top:18px;
  padding:clamp(30px,5vw,56px);
  border-radius:29px;
}

.hero h1{
  margin:0;
  font-size:clamp(38px,7vw,70px);
  line-height:.97;
  letter-spacing:-.055em;
}

.gradient{
  display:block;
  background:linear-gradient(
    105deg,
    var(--cyan),
    var(--purple) 52%,
    var(--pink)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p,
.section p,
.section li{
  color:var(--muted);
  font-size:12px;
  line-height:1.72;
}

.notice{
  margin-top:17px;
  padding:15px;
  border-radius:14px;
  background:rgba(175,115,24,.09);
  border:1px solid rgba(175,115,24,.14);
  color:#75500f;
  font-size:11px;
  line-height:1.6;
}

.section{
  margin-top:17px;
  padding:clamp(21px,4vw,35px);
  border-radius:23px;
}

.section h2{
  margin:0 0 14px;
  font-size:clamp(23px,4vw,34px);
  letter-spacing:-.04em;
}

.status{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(175,115,24,.10);
  color:#77500d;
  font-size:9px;
  font-weight:900;
}

.footer{
  padding:30px 10px 5px;
  text-align:center;
  color:#737b94;
  font-size:10px;
}

.footer a{
  color:#625be4;
  text-decoration:none;
}

@media(max-width:700px){
  .shell{
    width:calc(100% - 18px);
    padding-top:9px;
  }

  .top{border-radius:16px}
  .nav a{font-size:9px;margin-left:6px}
  .hero{border-radius:22px}
  .section{border-radius:18px}
}