:root{--bg:#F4F7FF;--ink:#1D2140;--muted:#575D7D;--blue:#4F6BFF;--lilac:#DCD3FF;--mint:#C9F4E5;--sun:#FFEBAD;--peach:#FFD9D3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 1.05rem/1.65 "DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:Fredoka,"Trebuchet MS",sans-serif;line-height:1.1;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.7rem,10vw,5.2rem)}h2{font-size:clamp(1.8rem,5vw,2.6rem)}h3{font-size:1.25rem}
p{margin:0 0 1em}a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
header{position:sticky;top:0;z-index:5;background:rgba(244,247,255,.88);backdrop-filter:blur(10px)}
nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{font:600 1.5rem Fredoka,sans-serif;text-decoration:none}
nav ul{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
nav ul a{display:block;padding:.4rem .95rem;border-radius:99px;text-decoration:none;font-weight:500}
nav ul a:hover,nav ul a[aria-current]{background:var(--lilac)}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none}
.btn.alt{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:hover{transform:translateY(-2px)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.hero{position:relative;overflow:hidden;padding:4.5rem 0 5.5rem}
.hero .wrap{position:relative;z-index:1}
.hero p{max-width:34rem;font-size:1.2rem;color:var(--muted)}
.bubble{position:absolute;border-radius:50%;animation:float 9s ease-in-out infinite}
.b2{width:9rem;height:9rem;background:var(--mint);left:40%;bottom:.75rem;animation-delay:-3s}
.b3{width:5rem;height:5rem;background:var(--sun);right:4%;bottom:2rem;animation-delay:-6s}
.b4{width:3rem;height:3rem;background:var(--peach);left:46%;top:2.5rem;animation-delay:-1.5s}
@keyframes float{50%{transform:translateY(-22px)}}
section{padding:3rem 0}
.lede{max-width:40rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1rem 0 0;list-style:none}
.chips li{padding:.3rem .9rem;border-radius:99px;background:#fff;font-weight:500;font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem}
.card{padding:1.5rem;border-radius:2rem;background:var(--c,#fff)}
.card:nth-child(even){border-radius:1rem 2.5rem 1rem 2.5rem}
.card .chips li{background:rgba(255,255,255,.7)}
.c1{--c:var(--lilac)}.c2{--c:var(--mint)}.c3{--c:var(--sun)}.c4{--c:var(--peach)}.c5{--c:#fff}
.job{border-left:4px solid var(--blue);padding:0 0 1.5rem 1.25rem;margin-left:.4rem}
.job small{color:var(--muted);font-weight:500}
.job ul{padding-left:1.1rem;margin:.5rem 0 0}
.panel{background:var(--lilac);border-radius:3rem;padding:clamp(1.5rem,5vw,3.5rem)}
.post .tag{display:inline-block;padding:.15rem .8rem;border-radius:99px;background:#fff;font-size:.85rem;font-weight:700;margin-bottom:.75rem}
footer{padding:2rem 0 3rem;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}html{scroll-behavior:auto}.btn:hover{transform:none}}
@media (max-width:40rem){.b2,.b4{display:none}.b3{bottom:1rem}.panel{border-radius:2rem}.hero{padding:2.5rem 0 4rem}.hero-grid{grid-template-columns:1fr}.portrait{order:-1;width:9.5rem}}
.sub{margin:2rem 0 1rem}.card ul.plain{padding-left:1.1rem;margin:0}.card ul.plain li{margin-bottom:.6rem}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center}
.portrait{position:relative;width:clamp(13rem,30vw,19rem);aspect-ratio:1;margin:0 .9rem .9rem 0}
.portrait::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lilac);transform:translate(.9rem,.9rem)}
.portrait::after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:var(--sun);left:-4%;bottom:6%;border:.3rem solid var(--bg)}
.portrait img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:.35rem solid #fff;background:#fff}
@media (max-width:40rem){.portrait::after{display:none}}