:root { --ink:#18162c; --muted:#68657a; --purple:#6c5ce7; --teal:#0f9b8e; --paper:#f7f7fb; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:var(--purple); font-weight:650; text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { width:min(100% - 32px,860px); margin:auto; }
nav { display:flex; justify-content:space-between; align-items:center; padding:20px 0; }
.brand { color:var(--ink); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }.brand span { color:var(--purple); }
nav div { display:flex; gap:18px; font-size:.9rem; }
.hero { background:linear-gradient(135deg,#6c5ce7,#8e7cff); color:white; padding:66px 0 62px; border-radius:0 0 34px 34px; }.hero h1 { font-size:clamp(2.25rem,8vw,4.3rem); letter-spacing:-.055em; line-height:1; margin:14px 0; max-width:720px; }.hero p { max-width:550px; font-size:1.1rem; color:#f1efff; }.eyebrow { text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; font-weight:800; color:#dedaff; }
main { padding:42px 0 60px; }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.card { background:var(--card); padding:20px; border-radius:20px; box-shadow:0 8px 24px #2822440b; }.card h2 { margin:0 0 6px; font-size:1.05rem; }.card p,.muted { color:var(--muted); margin:0; font-size:.92rem; }.button { display:inline-block; background:var(--ink); color:white; padding:13px 18px; border-radius:13px; margin-top:10px; }.button:hover { text-decoration:none; opacity:.9; }
.article { background:white; padding:clamp(22px,5vw,48px); border-radius:24px; box-shadow:0 8px 24px #2822440b; }.article h1 { font-size:clamp(2rem,5vw,3rem); letter-spacing:-.04em; margin-top:0; }.article h2 { margin-top:34px; font-size:1.25rem; }.article li { margin:8px 0; }.notice { padding:15px 17px; border-radius:15px; background:#eeeafe; color:#3e347e; font-size:.92rem; }
footer { padding:24px 0 38px; color:var(--muted); font-size:.82rem; } footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media(max-width:620px) { .grid { grid-template-columns:1fr; } nav div { gap:12px; } .hero { padding:48px 0; } }