:root {
  color-scheme: light dark;
  --purple: #7a46fa;
  --pink: #ff4fa1;
  --cyan: #33ccf2;
  --mint: #47dbab;
  --yellow: #ffc73d;
  --ink: #201c2d;
  --muted: #696478;
  --glass: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.62);
  --shadow: 0 24px 80px rgba(58, 37, 99, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(255,79,161,.24), transparent 28rem),
    radial-gradient(circle at 92% 30%, rgba(51,204,242,.20), transparent 30rem),
    radial-gradient(circle at 15% 90%, rgba(255,199,61,.19), transparent 28rem),
    linear-gradient(145deg, #fbf2ff 0%, #effbff 54%, #fff9e9 100%);
}
a { color: inherit; }
.wrap { width: min(920px, calc(100% - 32px)); margin: 0 auto; }
nav {
  position: sticky; top: 0; z-index: 10;
  padding: 14px 0;
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  background: rgba(255,255,255,.44);
  border-bottom: 1px solid rgba(255,255,255,.5);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:850; text-decoration:none; letter-spacing:.01em; }
.mark { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:24px; font-weight:900; background:linear-gradient(145deg,var(--pink),var(--purple),var(--cyan)); box-shadow:0 10px 24px rgba(122,70,250,.25); }
.links { display:flex; gap:16px; font-size:14px; font-weight:700; }
.links a { text-decoration:none; opacity:.72; }
.links a:hover { opacity:1; }
header { padding: 78px 0 38px; text-align:center; }
.eyebrow { display:inline-flex; padding:8px 14px; border-radius:999px; color:var(--purple); background:rgba(122,70,250,.10); font-size:13px; font-weight:900; letter-spacing:.12em; }
h1 { margin:18px auto 14px; max-width:760px; font-size:clamp(38px,7vw,72px); line-height:1.07; letter-spacing:-.045em; }
.lead { max-width:680px; margin:0 auto; color:var(--muted); font-size:clamp(16px,2.6vw,21px); line-height:1.75; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0 56px; }
.card, article {
  border:1px solid var(--line);
  background:var(--glass);
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
}
.card { border-radius:28px; padding:24px; }
.icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:22px; margin-bottom:16px; }
.card:nth-child(1) .icon { background:linear-gradient(145deg,var(--purple),var(--pink)); }
.card:nth-child(2) .icon { background:linear-gradient(145deg,var(--cyan),var(--purple)); }
.card:nth-child(3) .icon { background:linear-gradient(145deg,var(--mint),var(--cyan)); }
.card h2 { margin:0 0 7px; font-size:18px; }
.card p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
article { border-radius:32px; padding:clamp(24px,5vw,48px); margin:0 0 24px; }
article h2 { margin:30px 0 8px; font-size:22px; }
article h2:first-child { margin-top:0; }
article p, article li { color:var(--muted); line-height:1.85; }
article ul { padding-left:1.3em; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:18px; text-decoration:none; font-weight:850; color:#fff; background:linear-gradient(120deg,var(--purple),var(--pink)); box-shadow:0 14px 34px rgba(122,70,250,.23); }
.note { padding:18px 20px; border-radius:20px; background:rgba(71,219,171,.12); color:#356b5b; font-weight:700; line-height:1.7; }
footer { padding:38px 0 60px; text-align:center; color:var(--muted); font-size:13px; }
@media (max-width:720px) { .grid { grid-template-columns:1fr; } .links { gap:10px; font-size:12px; } header { padding-top:55px; } }
@media (prefers-color-scheme: dark) {
  :root { --ink:#f7f4ff; --muted:#b6b0c4; --glass:rgba(23,18,38,.72); --line:rgba(255,255,255,.09); --shadow:0 24px 80px rgba(0,0,0,.28); }
  body { background:radial-gradient(circle at 8% 8%,rgba(255,79,161,.20),transparent 28rem),radial-gradient(circle at 92% 30%,rgba(51,204,242,.17),transparent 30rem),linear-gradient(145deg,#110c20,#111b25 62%,#201a0f); }
  nav { background:rgba(15,12,24,.52); border-bottom-color:rgba(255,255,255,.07); }
  .note { color:#aee8d4; }
}