:root{
  --sky-top:#cfe8fb;
  --sky-bottom:#f4faff;
  --cloud:#ffffff;
  --ink:#16324f;
  --ink-soft:#4a6580;
  --blue:#1f6fd1;
  --blue-dark:#164f99;
  --sun:#ffc94d;
  --sun-dark:#e9a91a;
  --line:#d3e4f5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Quicksand","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  line-height:1.7;
  background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 520px,#fff 100%);
  background-repeat:no-repeat;
  min-height:100vh;
}
a{color:var(--blue-dark)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sun-dark);outline-offset:3px}

/* header */
header.site{
  max-width:1040px;margin:0 auto;padding:18px 24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.1rem}
.brand img{height:44px;width:auto;border-radius:8px;background:#fff;padding:3px}
nav.main{display:flex;gap:6px;flex-wrap:wrap}
nav.main a{
  text-decoration:none;color:var(--ink);font-weight:600;
  padding:8px 16px;border-radius:999px;
}
nav.main a:hover{background:rgba(255,255,255,.7)}
nav.main a[aria-current="page"]{background:#fff;box-shadow:0 2px 10px rgba(31,111,209,.15)}

/* hero with drifting clouds */
.hero{position:relative;overflow:hidden;padding:56px 24px 96px;text-align:center}
.cloud{
  position:absolute;background:var(--cloud);border-radius:999px;opacity:.9;
  filter:blur(1px);
}
.cloud::before,.cloud::after{content:"";position:absolute;background:var(--cloud);border-radius:50%}
.c1{width:190px;height:54px;top:40px;left:6%;animation:drift 38s linear infinite alternate}
.c1::before{width:80px;height:80px;top:-36px;left:32px}
.c1::after{width:60px;height:60px;top:-24px;left:92px}
.c2{width:240px;height:64px;top:150px;right:5%;animation:drift 52s linear infinite alternate-reverse}
.c2::before{width:100px;height:100px;top:-46px;left:40px}
.c2::after{width:76px;height:76px;top:-30px;left:122px}
.c3{width:140px;height:40px;top:300px;left:14%;animation:drift 46s linear infinite alternate}
.c3::before{width:56px;height:56px;top:-26px;left:24px}
.c3::after{width:44px;height:44px;top:-18px;left:70px}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(60px)}}
@media (prefers-reduced-motion:reduce){.cloud{animation:none}}

.hero-inner{position:relative;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin:0 0 18px}
.hero p.lead{font-size:1.15rem;color:var(--ink-soft);margin:0 auto 32px;max-width:620px}

.actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:20px 38px;border-radius:16px;font-size:1.2rem;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-main{background:var(--blue);color:#fff;box-shadow:0 8px 0 var(--blue-dark),0 14px 24px rgba(22,79,153,.25)}
.btn-alt{background:var(--sun);color:#3a2a00;box-shadow:0 8px 0 var(--sun-dark),0 14px 24px rgba(233,169,26,.3)}
.btn:hover{transform:translateY(3px)}
.btn-main:hover{box-shadow:0 5px 0 var(--blue-dark),0 10px 18px rgba(22,79,153,.25)}
.btn-alt:hover{box-shadow:0 5px 0 var(--sun-dark),0 10px 18px rgba(233,169,26,.3)}

/* content */
main{max-width:820px;margin:0 auto;padding:0 24px 40px}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:32px 36px;margin:0 0 24px;
  box-shadow:0 10px 30px rgba(31,111,209,.08);
}
.panel h2{margin:0 0 12px;font-size:1.5rem;line-height:1.3}
.panel p{margin:0 0 14px}
.panel p:last-child{margin-bottom:0}
.panel ol,.panel ul{margin:0 0 14px;padding-left:22px}
.panel li{margin-bottom:6px}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.pair a.tile{
  display:block;text-decoration:none;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:24px;padding:26px;
}
.pair a.tile:hover{border-color:var(--blue)}
.pair a.tile strong{display:block;font-size:1.2rem;margin-bottom:6px}
@media (max-width:640px){.pair{grid-template-columns:1fr}.panel{padding:24px}}

footer.site{
  max-width:820px;margin:0 auto;padding:24px 24px 48px;
  color:var(--ink-soft);font-size:.9rem;text-align:center;
}

/* photos */
figure.photo{margin:0 0 24px;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px rgba(31,111,209,.08)}
figure.photo img{display:block;width:100%;height:auto}
figure.photo figcaption{padding:12px 20px;font-size:.92rem;color:var(--ink-soft)}