:root{--ink:#0e2a47;--sea:#1f7a8c;--sun:#ffc857;--sand:#f2e4c9;--paper:#fffaf0;--line:#0e2a4722}
@media (prefers-color-scheme:dark){:root{--paper:#0b1c30;--ink:#f2e4c9;--line:#f2e4c92a}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:17px/1.6 "Figtree",system-ui,sans-serif;background:var(--paper);color:var(--ink)}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.05;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.wrap{width:min(1100px,92%);margin-inline:auto}
nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 4%;color:#fff;transition:.3s}
nav.solid{background:#0e2a47ee;backdrop-filter:blur(8px)}
nav b{font:800 1.4rem "Bricolage Grotesque",sans-serif}
nav ul{display:flex;gap:26px;list-style:none;padding:0}
nav a{text-decoration:none;font-weight:600}
.hero{min-height:100svh;display:grid;align-items:center;color:#fff;background:#14123a url(img/hero.svg) center/cover}
.hero h1{font-size:clamp(3rem,9vw,7.5rem);max-width:10ch;font-weight:800;animation:rise 1s both}
.hero p{max-width:42ch;font-size:1.2rem;margin:22px 0 32px;animation:rise 1s .2s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.btn{display:inline-block;padding:14px 28px;border:0;border-radius:999px;background:var(--sun);color:#0e2a47;font:700 1rem inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:transform .2s}
.btn:hover{transform:scale(1.05)}
.btn.ghost{background:none;color:#fff;border:2px solid #fff;margin-left:10px}
section{padding:110px 0}
.head{max-width:620px;margin-bottom:44px}
.head h2{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:12px}
.filters{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.chip{padding:8px 20px;border-radius:999px;border:2px solid var(--ink);background:none;color:inherit;font:600 .95rem inherit;font-family:inherit;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.card{overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,var(--ink))}
.card:nth-child(1){border-radius:120px 24px 24px 24px}.card:nth-child(2){border-radius:24px}.card:nth-child(3){border-radius:24px 24px 120px 24px}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.card div{padding:22px 24px 28px}.card h3{font-size:1.6rem;margin-bottom:6px}
.card small{font-weight:700;color:var(--sea)}
.card[hidden]{display:none}
.band{background:var(--ink);color:var(--paper);padding:90px 0}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.band blockquote{font:700 clamp(1.6rem,3.5vw,2.6rem)/1.15 "Bricolage Grotesque",sans-serif}
.band p{opacity:.85}
form{display:grid;gap:16px;max-width:560px}
label{display:grid;gap:6px;font-weight:600}
input,select{padding:14px;border-radius:12px;border:2px solid var(--line);background:transparent;color:inherit;font:inherit}
input:focus,select:focus{border-color:var(--sea);outline:0}
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);background:var(--sea);color:#fff;padding:16px 28px;border-radius:14px;font-weight:700;transition:.4s;z-index:20}
#toast.show{transform:translate(-50%,0)}
footer{padding:40px 0;border-top:1px solid var(--line);text-align:center;opacity:.8}
@media(max-width:760px){nav ul{display:none}.band .wrap{grid-template-columns:1fr}.btn.ghost{margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}