:root{
  --ink:#101a38;
  --muted:#68718d;
  --cyan:#25c9dc;
  --purple:#6962ed;
  --pink:#e457c5;
  --green:#11a67b;
  --amber:#b87916;
  --red:#c54e66;
}

*{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(1080px,calc(100% - 28px));
  margin:auto;
  padding:22px 0 60px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:12px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(20px);
  box-shadow:0 14px 40px rgba(43,53,106,.07);
}

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

.nav a{
  color:#535b79;
  text-decoration:none;
  font-size:10px;
  font-weight:850;
  margin-left:10px;
}

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

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

.hero h1{
  margin:0;
  font-size:clamp(40px,7vw,72px);
  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{
  max-width:770px;
  color:var(--muted);
  line-height:1.72;
  font-size:13px;
}

.notice{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:rgba(184,121,22,.08);
  border:1px solid rgba(184,121,22,.13);
  color:#775315;
  font-size:11px;
  line-height:1.6;
}

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

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

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.product{
  padding:16px;
  border:1px solid rgba(70,82,137,.08);
  border-radius:15px;
  background:rgba(250,251,255,.77);
}

.product strong{
  display:block;
  margin-bottom:5px;
  font-size:13px;
}

.product p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}

.badge{
  display:inline-block;
  margin-top:10px;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}

.amber{
  color:#80560d;
  background:rgba(184,121,22,.11);
}

.red{
  color:#a23f55;
  background:rgba(197,78,102,.10);
}

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

.footer{
  text-align:center;
  padding:30px 10px 5px;
  color:#747c95;
  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{margin-left:5px;font-size:9px}
  .hero{border-radius:22px}
  .grid{grid-template-columns:1fr}
  .section{border-radius:18px}
}