:root{color-scheme:light;--ink:#0a2136;--muted:#486174;--accent:#14798d;--paper:#f1f8fa}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.page{max-width:1200px;margin:auto;padding:30px 64px 24px;min-height:100svh;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{width:174px;height:auto;display:block;mix-blend-mode:multiply}
.header-note{font-size:14px;color:var(--muted)}
main{flex:1;display:grid;align-items:center}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:34px;padding:48px 0 64px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin:0 0 22px}
h1{font-size:clamp(52px,5.6vw,76px);line-height:1.04;letter-spacing:-.055em;margin:0;font-weight:700}
h1 span{color:var(--accent)}
.intro{font-size:18px;line-height:1.65;max-width:37ch;color:var(--muted);margin:26px 0 0}
.invitation{font-size:14px;line-height:1.6;max-width:40ch;margin:24px 0 14px}
.social{display:flex;flex-wrap:wrap;gap:12px}
.social a{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;min-height:50px;padding:14px 21px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid var(--ink)}
.primary{background:var(--ink);color:white}.secondary{background:transparent}.social a:hover{background:#d8edf1;color:var(--ink)}
a:focus-visible{outline:3px solid #985500;outline-offset:5px}
.illustration{position:relative;isolation:isolate;display:grid;justify-items:center;padding:38px 0 8px}
.circle{position:absolute;inset:0;aspect-ratio:1;border-radius:50%;background:#dceff3;z-index:-1;max-height:100%}
.mascot{display:block;width:112%;max-width:540px;height:auto;filter:drop-shadow(0 18px 15px #14798d18)}
.caption{font-size:14px;color:var(--muted);margin:24px 0 0;text-align:center}
.dot{position:absolute;border-radius:50%;width:16px;height:16px}.dot-one{background:#9985ba;top:8%;left:9%}.dot-two{background:#ea9842;right:3%;top:27%;width:22px;height:22px}.dot-three{background:#6db356;left:3%;bottom:23%;width:12px;height:12px}
footer{border-top:1px solid #cfdee4;padding-top:21px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;line-height:1.5}
.skip{position:absolute;left:16px;top:0;transform:translateY(-150%);padding:12px;background:white;z-index:10}.skip:focus{transform:translateY(8px)}
@media(min-width:1500px){.page{max-width:1280px}}
@media(max-width:760px){.page{padding:24px}.logo{width:140px}.header-note{max-width:15ch;text-align:right;font-size:12px}.hero{grid-template-columns:1fr;gap:38px;padding:40px 0}.copy{max-width:520px}.illustration{max-width:400px;width:90%;justify-self:center}.mascot{max-width:110%}h1{font-size:58px}.intro{font-size:17px}.caption{margin-top:12px}}
@media(max-width:360px){.page{padding:20px}h1{font-size:50px}.social a{gap:15px;padding-inline:17px}footer{flex-direction:column;gap:4px}}