/* Bremo. pastel design system (rebrand v2). Reusable across all pages. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
/* Real Circular goes here the moment the licensed file is uploaded to /assets/fonts/circular.woff2.
   Until then the stack falls back to Outfit (closest free match). */
@font-face{font-family:'Circular';src:url('/assets/fonts/circular.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{
  --mint:#9FE2C4; --sky:#A8CCF2; --lilac:#CBB8EA; --blush:#F7C9D5; --butter:#F8E9A6; --peach:#F8D0B8;
  --ink:#23252b; --muted:#7b8088; --cloud:#F6F9F8; --line:#eee;
  --grad:linear-gradient(120deg,#9FE2C4,#A8CCF2,#CBB8EA,#F8D0B8);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Circular','Outfit',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;max-width:1180px;margin:0 auto}
.logo{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{text-decoration:none;color:#8b9097;font-weight:500;font-size:.9rem}
.nav-links a.active{color:var(--ink)}
.btn-pill{background:var(--mint);color:#fff;padding:8px 18px;border-radius:30px;font-weight:600;font-size:.85rem;text-decoration:none}

/* hero with animated waves */
.hero{position:relative;height:min(72vh,620px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero.short{height:min(46vh,380px)}
.hero svg{position:absolute;top:0;left:-6%;width:112%;height:100%}
.hero svg path{will-change:transform}
.hero svg path:nth-of-type(1){animation:flow 9s ease-in-out infinite alternate}
.hero svg path:nth-of-type(2){animation:flow 11s ease-in-out infinite alternate-reverse}
.hero svg path:nth-of-type(3){animation:flow 8s ease-in-out infinite alternate}
.hero svg path:nth-of-type(4){animation:flow 13s ease-in-out infinite alternate-reverse}
@keyframes flow{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@media (prefers-reduced-motion:reduce){.hero svg path{animation:none}}
.hero h1{position:relative;z-index:2;color:#fff;font-weight:800;font-size:clamp(2.6rem,9vw,7rem);letter-spacing:-.04em;text-shadow:0 8px 36px rgba(0,0,0,.10);text-align:center;padding:0 20px}
.hero .tagline{position:relative;z-index:2;color:#fff;font-weight:500;opacity:.95;margin-top:8px;text-align:center}
.dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:3}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.dots i.on{background:#fff}

/* typography + sections */
section.block{padding:80px 0}
.eyebrow{color:var(--lilac);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;margin-bottom:12px}
h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
h3{font-weight:700}
.lead{color:var(--muted);font-size:1.06rem;max-width:580px}

/* cards with randomized organic blobs */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:40px}
.card{border-radius:22px;padding:28px;position:relative;overflow:hidden;min-height:190px;text-decoration:none;color:var(--ink);display:block}
.card h3{font-size:1.2rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.93rem}
.card .go{margin-top:14px;font-weight:600;font-size:.86rem;color:var(--ink)}
.c-mint{background:#eafaf2}.c-sky{background:#eaf2fd}.c-lilac{background:#f3eefb}.c-blush{background:#fdeef2}.c-butter{background:#fdfae8}.c-peach{background:#fdf1ea}
.blob{position:absolute;opacity:.5;pointer-events:none}
.card:nth-child(6n+1) .blob{width:132px;height:114px;border-radius:62% 38% 47% 53%/55% 48% 52% 45%;right:-34px;bottom:-30px;transform:rotate(6deg)}
.card:nth-child(6n+2) .blob{width:100px;height:124px;border-radius:42% 58% 63% 37%/45% 55% 45% 55%;right:-24px;top:-32px;transform:rotate(-8deg)}
.card:nth-child(6n+3) .blob{width:146px;height:120px;border-radius:55% 45% 38% 62%/52% 56% 44% 48%;left:-44px;bottom:-38px;transform:rotate(-12deg)}
.card:nth-child(6n+4) .blob{width:98px;height:108px;border-radius:50% 50% 46% 54%/58% 42% 58% 42%;right:-30px;bottom:-20px;transform:rotate(10deg)}
.card:nth-child(6n+5) .blob{width:120px;height:96px;border-radius:60% 40% 55% 45%/48% 52% 48% 52%;right:-32px;top:-22px;transform:rotate(16deg)}
.card:nth-child(6n+6) .blob{width:130px;height:130px;border-radius:48% 52% 42% 58%/56% 44% 56% 44%;left:-36px;bottom:-30px;transform:rotate(-6deg)}

/* buttons + banner */
.pill-cta{display:inline-block;margin-top:34px;background:var(--ink);color:#fff;padding:15px 32px;border-radius:40px;font-weight:600;text-decoration:none}
.pill-light{background:#fff;color:var(--ink)}
.banner{background:var(--mint);text-align:center;padding:74px 24px;border-radius:32px;margin:30px 0;position:relative;overflow:hidden}
.banner h2,.banner p{color:#fff}.banner p{opacity:.92}

/* steps */
.step{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.step .num{flex:0 0 38px;height:38px;border-radius:11px;background:var(--mint);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.step h3{font-size:1.1rem;margin-bottom:4px}.step p{color:var(--muted);font-size:.95rem}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:44px 0;color:var(--muted);font-size:.9rem;margin-top:40px}
.site-footer .inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;max-width:1120px;margin:0 auto;padding:0 24px}