*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,#091224,#0e1b34 28%,#f4f8ff 28%,#eef4fd 100%);color:#18233a}
.wrap{max-width:980px;margin:auto;padding:24px 18px 44px}
.top-actions{display:flex;justify-content:flex-end;gap:12px;margin-bottom:18px}
.action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(179,202,237,.42);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}
.action-btn.alt{background:#fff;color:#1e57c8;box-shadow:0 10px 24px rgba(6,24,63,.12)}
.hero{text-align:center;color:#fff;margin:8px 0 24px}.hero-logo{width:128px;height:128px;border-radius:999px;padding:8px;background:radial-gradient(circle at 35% 25%,rgba(44,102,255,.28),rgba(9,21,48,.96) 62%,rgba(5,11,27,.98) 100%);margin:0 auto 16px;display:grid;place-items:center;box-shadow:0 20px 42px rgba(1,10,28,.32), inset 0 0 0 1px rgba(117,171,255,.25), inset 0 0 28px rgba(70,161,255,.18)}
.hero-logo img{width:112px;height:112px;display:block;border-radius:30px}.hero h1{margin:0;font-size:38px;letter-spacing:-.04em}.hero p{margin:8px auto 0;max-width:640px;color:#c4d5f0;line-height:1.7}
.card{background:#fff;border:1px solid #dce6f3;border-radius:26px;box-shadow:0 22px 58px rgba(33,54,92,.12);padding:30px}.intro{padding:18px 20px;border-radius:18px;background:#f5f8fe;border:1px solid #e1e8f4;color:#51627a;line-height:1.75;margin-bottom:22px}.list{display:grid;gap:16px}.item{display:grid;grid-template-columns:60px 1fr;gap:16px;padding:18px;border:1px solid #e2eaf3;border-radius:18px;background:#fbfdff}.num{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#1b69fa,#4ec7ff);color:#fff;font-weight:900}.item h3{margin:2px 0 8px;font-size:20px}.item p{margin:0;color:#5f6f85;line-height:1.75}
@media(max-width:640px){.wrap{padding:16px 12px 30px}.top-actions{justify-content:center;flex-wrap:wrap}.hero h1{font-size:30px}.card{padding:18px}.item{grid-template-columns:1fr}.num{width:52px;height:52px}.hero-logo{width:100px;height:100px;padding:6px}.hero-logo img{width:88px;height:88px;border-radius:24px}}