/* ===================== Reset & base ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --mint: #5FE0A5;
  --mint-deep: #2FBE85;
  --mint-bg: #F4FBF7;
  --pink: #FFD9E8;
  --pink-deep: #FFB8D6;
  --ink: #1A2E28;
}

html { scroll-behavior: smooth; }

body{
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--mint-bg);
  overflow-x: hidden;
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.font-display{ font-family: 'Baloo 2', sans-serif; }

/* ===================== Layout helpers ===================== */
.max-w-6xl{ max-width: 72rem; }
.max-w-3xl{ max-width: 48rem; }
.max-w-xl{ max-width: 36rem; }
.max-w-md{ max-width: 28rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.relative{ position:relative; }
.absolute{ position:absolute; }
.overflow-hidden{ overflow:hidden; }
.overflow-x-hidden{ overflow-x:hidden; }
.pointer-events-none{ pointer-events:none; }
.inset-0{ top:0; right:0; bottom:0; left:0; }
.z-20{ z-index:20; }
.select-none{ user-select:none; }

.flex{ display:flex; }
.grid{ display:grid; }
.inline-block{ display:inline-block; }
.inline-flex{ display:inline-flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.flex-col{ flex-direction:column; }
.gap-2{ gap:0.5rem; }
.gap-4{ gap:1rem; }
.gap-6{ gap:1.5rem; }

.text-center{ text-align:center; }
.text-right{ text-align:right; }

.rounded-2xl{ border-radius:1rem; }
.rounded-3xl{ border-radius:1.5rem; }
.rounded-full{ border-radius:9999px; }

.border{ border:1px solid transparent; }
.border-2{ border:2px solid transparent; }
.border-black\/5{ border-color: rgba(0,0,0,0.05); }

.shadow-sm{ box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-lg{ box-shadow: 0 12px 28px -8px rgba(0,0,0,0.18); }

.w-12{ width:3rem; } .h-12{ height:3rem; }
.h-5{ height:1.25rem; } .h-7{ height:1.75rem; } .h-8{ height:2rem; }
.w-auto{ width:auto; }

.opacity-80{ opacity:0.8; }

/* ===================== Spacing ===================== */
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-7{padding-left:1.75rem;padding-right:1.75rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.pt-6{padding-top:1.5rem;}
.pt-16{padding-top:4rem;}
.pb-20{padding-bottom:5rem;}

.mt-2{margin-top:0.5rem;}
.mt-3{margin-top:0.75rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mt-9{margin-top:2.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-12{margin-bottom:3rem;}

/* ===================== Typography ===================== */
.text-sm{font-size:0.875rem;}
.text-base{font-size:1rem;}
.text-lg{font-size:1.125rem;}
.text-2xl{font-size:1.5rem;}
.text-4xl{font-size:2.25rem;}

.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}

.leading-relaxed{line-height:1.65;}
.leading-tight{line-height:1.1;}

.text-white{color:#fff;}
.text-white\/85{color:rgba(255,255,255,0.85);}

/* ===================== Colors / brand ===================== */
.bg-white{background:#fff;}
.text-\[var\(--mint-deep\)\]{color:var(--mint-deep);}
.bg-\[var\(--mint-deep\)\]{background:var(--mint-deep);}
.bg-\[var\(--mint-bg\)\]{background:var(--mint-bg);}
.border-\[var\(--mint\)\]{border-color:var(--mint);}
.text-\[var\(--ink\)\]\/70{color:rgba(26,46,40,0.70);}
.text-\[var\(--ink\)\]\/65{color:rgba(26,46,40,0.65);}
.text-\[var\(--ink\)\]\/60{color:rgba(26,46,40,0.60);}
.text-\[var\(--ink\)\]\/50{color:rgba(26,46,40,0.50);}
.bg-white\/10{background:rgba(255,255,255,0.10);}

/* ===================== Components ===================== */
header.site-header{
  max-width:72rem; margin:0 auto; padding:1.5rem 1.5rem 0;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:20;
}

.say-hi{
  display:none;
  align-items:center; gap:0.5rem;
  font-size:0.875rem; font-weight:600; font-family:'Baloo 2', sans-serif;
  border-radius:9999px; padding:0.625rem 1.25rem;
  background:#fff; border:2px solid var(--mint); color:var(--mint-deep);
  text-decoration:none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (min-width:640px){ .say-hi{ display:inline-flex; } }

.hero{
  position:relative;
  max-width:72rem; margin:0 auto;
  padding: 4rem 1.5rem 5rem;
  overflow: hidden;
}
@media (max-width: 639px){
  .hero{ padding: 3rem 1.25rem 3.5rem; }
}
.hero-inner{
  position:relative; text-align:center; max-width:48rem; margin:0 auto;
}
.eyebrow{
  display:inline-block; font-family:'Baloo 2', sans-serif; font-weight:600;
  font-size:0.95rem; background:#fff; color:var(--mint-deep);
  padding:0.4rem 1.1rem; border-radius:9999px;
  border:1px solid rgba(95,224,165,0.4); box-shadow:0 1px 2px rgba(0,0,0,0.05);
  margin-bottom:1.5rem;
}
.hero h1{
  font-family:'Baloo 2', sans-serif; font-weight:800; line-height:1.05;
  font-size: 2.5rem;
}
@media (min-width:640px){ .hero h1{ font-size:3.75rem; } }
@media (min-width:768px){ .hero h1{ font-size:4.5rem; } }
.hero h1 .accent{ display:block; color:var(--mint-deep); }

.hero p.lede{
  margin-top:1.5rem; font-size:1rem; color:rgba(26,46,40,0.7);
  max-width:36rem; margin-left:auto; margin-right:auto; line-height:1.65;
}
@media (min-width:640px){ .hero p.lede{ font-size:1.125rem; } }

.squiggle{
  text-decoration:none; font-weight:600; color:var(--ink);
  background-color: var(--pink);
  border-radius: 6px;
  padding:0.1em 0.35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.btn{
  font-family:'Baloo 2', sans-serif; font-weight:700;
  display:inline-flex; align-items:center; gap:0.5rem;
  border-radius:9999px; text-decoration:none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(47,190,133,0.45); }
.btn:active{ transform:translateY(0) scale(0.98); }

.btn-primary{
  font-size:1rem; color:#fff; background:var(--mint-deep);
  padding:1rem 2rem; box-shadow:0 12px 28px -8px rgba(95,224,165,0.4);
}
@media (min-width:640px){ .btn-primary{ font-size:1.125rem; } }

.btn-on-dark{
  font-size:1rem; color:var(--mint-deep); background:#fff;
  padding:1rem 2rem; box-shadow:0 12px 28px -8px rgba(0,0,0,0.18);
}

.cta-wrap{ margin-top:2.25rem; display:flex; justify-content:center; }

/* blobs */
.blob{ position:absolute; border-radius:50%; opacity:0.55; }
@media (max-width: 639px){
  .blob{ transform: scale(0.6); opacity: 0.4; }
}
@media (prefers-reduced-motion: no-preference){
  .blob-float{ animation: floaty 9s ease-in-out infinite; }
  .blob-float-slow{ animation: floaty 13s ease-in-out infinite; }
  .blob-float-rev{ animation: floatyRev 11s ease-in-out infinite; }
}
@keyframes floaty{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(12px,-18px) scale(1.04); }
}
@keyframes floatyRev{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-14px,16px) scale(0.97); }
}

/* what I do */
.section{ max-width:72rem; margin:0 auto; padding:4rem 1.5rem; position:relative; }
.section-head{ text-align:center; margin-bottom:3rem; }
.section-head h2{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.5rem; }
@media (min-width:640px){ .section-head h2{ font-size:1.875rem; } }
.section-head p{ color:rgba(26,46,40,0.6); margin-top:0.5rem; }

.cards{ display:grid; gap:1.5rem; grid-template-columns: 1fr; }
@media (min-width:640px){ .cards{ grid-template-columns: repeat(3,1fr); } }

.card{
  background:#fff; border-radius:1.5rem; padding:1.75rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(26,46,40,0.12); }
.card .icon{
  width:3rem; height:3rem; border-radius:1rem; background:var(--mint-bg);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem;
}
.card h3{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.125rem; margin-bottom:0.5rem; }
.card p{ font-size:0.875rem; color:rgba(26,46,40,0.65); line-height:1.65; }

/* cta band */
.cta-band{
  position:relative; overflow:hidden; border-radius:2.5rem;
  background:var(--mint-deep); color:#fff;
  padding:3.5rem 2rem; text-align:center;
}
@media (min-width:640px){ .cta-band{ padding:4rem 3.5rem; } }
.cta-band h2{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.5rem; position:relative; }
@media (min-width:640px){ .cta-band h2{ font-size:2.25rem; } }
.cta-band p{ margin-top:0.75rem; color:rgba(255,255,255,0.85); max-width:28rem; margin-left:auto; margin-right:auto; position:relative; }
.cta-band .btn{ margin-top:2rem; position:relative; }
.cta-band .deco{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.1); }

/* footer */
footer.site-footer{
  max-width:72rem; margin:0 auto; padding:2.5rem 1.5rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
@media (min-width:640px){
  footer.site-footer{ flex-direction:row; justify-content:space-between; }
}
footer.site-footer p{ font-size:0.875rem; color:rgba(26,46,40,0.5); text-align:center; }
@media (min-width:640px){ footer.site-footer p{ text-align:right; } }

:focus-visible{
  outline: 3px solid var(--mint-deep);
  outline-offset: 3px;
  border-radius: 8px;
}