/* Sawyer's Squishys — palette from the logo */
:root{
  --navy:#1e2c70;
  --navy-deep:#16205a;
  --pink:#f0359a;
  --pink-soft:#ffd9e8;
  --blue:#4fb8e8;
  --blue-soft:#d6eefc;
  --green:#6cc24a;
  --green-soft:#dcf4d2;
  --yellow:#f6c025;
  --yellow-soft:#fff2cc;
  --purple:#8b3fc9;
  --teal:#28c4b8;
  --cream:#f5deb3;
  --ink:#232a4d;
  --muted:#5d6488;
  --white:#fff;
  --radius:22px;
  --radius-lg:32px;
  --shadow:0 6px 0 rgba(30,44,112,.10), 0 14px 30px rgba(30,44,112,.10);
  --font:"Nunito","Baloo 2",ui-rounded,"Hiragino Maru Gothic ProN","Quicksand","Segoe UI Rounded",
         -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.2;color:var(--navy);margin:0 0 .4em}
p{margin:0 0 1em}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 12px 0;z-index:100;font-weight:800;
}
.skip-link:focus{left:0}

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

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(1.5rem,5vw,3rem) 1.1rem clamp(3rem,9vw,5rem);
  background:
    radial-gradient(1100px 520px at 50% -18%, var(--blue-soft) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#fdfdff 0%, #ffffff 100%);
  text-align:center;
}
.hero-inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.logo{
  width:100%;max-width:520px;margin:0 auto .6rem;
  filter:drop-shadow(0 10px 22px rgba(30,44,112,.16));
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.tagline{
  font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  font-size:clamp(.82rem,3.4vw,1rem);color:var(--navy);
  margin:.2rem 0 .9rem;
}
.tagline span{color:var(--pink);padding:0 .3em}

.blurb{
  color:var(--muted);font-size:clamp(1rem,3.6vw,1.12rem);
  max-width:34rem;margin:0 auto 1.4rem;font-weight:600;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* floating background blobs */
.blobs{position:absolute;inset:0;z-index:1;pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.5;filter:blur(2px);animation:bob 9s ease-in-out infinite}
.b1{width:70px;height:70px;background:var(--pink-soft);top:8%;left:4%}
.b2{width:44px;height:44px;background:var(--yellow-soft);top:22%;right:7%;animation-delay:-2s}
.b3{width:88px;height:88px;background:var(--green-soft);bottom:12%;left:-14px;animation-delay:-4s}
.b4{width:36px;height:36px;background:var(--blue-soft);bottom:24%;right:12%;animation-delay:-1s}
.b5{width:26px;height:26px;background:var(--pink-soft);top:52%;left:12%;animation-delay:-5s}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.06)}}

.wave{
  position:absolute;left:0;right:0;bottom:-1px;height:44px;z-index:2;
  background:
    radial-gradient(circle at 20px -10px, #fff 22px, transparent 23px) repeat-x;
  background-size:40px 44px;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:900;font-size:1.02rem;
  padding:.85rem 1.7rem;border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:48px;
}
.btn-primary{
  background:var(--pink);color:#fff;
  box-shadow:0 5px 0 #c42a7c, 0 10px 20px rgba(240,53,154,.28);
}
.btn-primary:hover{background:#ff45a8;transform:translateY(-2px);box-shadow:0 7px 0 #c42a7c,0 14px 26px rgba(240,53,154,.32)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #c42a7c}
.btn-ghost{
  background:#fff;color:var(--navy);
  box-shadow:0 5px 0 rgba(30,44,112,.16), inset 0 0 0 2.5px var(--navy);
}
.btn-ghost:hover{background:var(--blue-soft);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(30,44,112,.16), inset 0 0 0 2.5px var(--navy)}
.btn-block{width:100%}
.btn[disabled]{opacity:.62;cursor:not-allowed;transform:none!important}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(2.2rem,7vw,3.6rem) 1.1rem;max-width:720px;margin:0 auto}
.section-alt{
  max-width:none;
  background:linear-gradient(180deg,#fff 0%, var(--pink-soft) 100%);
}
.section-alt > *{max-width:720px;margin-left:auto;margin-right:auto}
.section h2{font-size:clamp(1.6rem,6vw,2.2rem);text-align:center;margin-bottom:.25em}
.emoji{font-size:.9em}
.section-sub{text-align:center;color:var(--muted);font-weight:600;margin-bottom:1.6rem}

/* ---------- EVENTS ---------- */

/* ---------- PRODUCTS ---------- */
.products{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.products{grid-template-columns:1fr 1fr}}
.product{
  background:#fff;border-radius:var(--radius-lg);padding:1.2rem 1.2rem 1.3rem;
  box-shadow:var(--shadow);border:2.5px solid var(--blue-soft);text-align:center;
  transition:transform .15s ease;
}
.product:hover{transform:translateY(-3px)}
.product-yellow{border-color:var(--yellow-soft);background:linear-gradient(180deg,#fff 55%,var(--yellow-soft))}
.product-green{border-color:var(--green-soft);background:linear-gradient(180deg,#fff 55%,var(--green-soft))}
.product-pink{border-color:var(--pink-soft);background:linear-gradient(180deg,#fff 55%,var(--pink-soft))}
.product-blue{border-color:var(--blue-soft);background:linear-gradient(180deg,#fff 55%,var(--blue-soft))}
.product-emoji{display:block;font-size:2.2rem;line-height:1;margin-bottom:.5rem}
.product h3{font-size:1.15rem;margin:0 0 .35rem}
.product p{margin:0;color:var(--muted);font-weight:600;font-size:.95rem;line-height:1.45}
.product a{color:var(--pink);font-weight:800}

.events{display:grid;gap:1rem}
.loading{text-align:center;color:var(--muted)}

.event-card{
  background:#fff;border-radius:var(--radius-lg);padding:1.2rem 1.3rem;
  box-shadow:var(--shadow);border:2.5px solid var(--blue-soft);
  position:relative;overflow:hidden;
}
.event-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg,var(--blue),var(--green),var(--yellow),var(--pink));
}
.event-card h3{font-size:1.22rem;margin:0 0 .5rem;padding-left:.2rem}
.event-meta{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.event-meta li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;color:var(--ink);font-size:.98rem}
.event-meta .ico{flex:0 0 1.3rem;text-align:center;font-size:1rem;line-height:1.5}
.event-notes{
  margin:.85rem 0 0;padding:.6rem .8rem;background:var(--yellow-soft);
  border-radius:14px;font-size:.93rem;color:var(--navy);font-weight:600;
}
.badge{
  display:inline-block;background:var(--green);color:#fff;font-size:.72rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;padding:.22rem .6rem;border-radius:999px;
  vertical-align:middle;margin-left:.45rem;
}
.badge.soon{background:var(--pink)}

.empty-state{
  text-align:center;background:#fff;border:3px dashed var(--blue);
  border-radius:var(--radius-lg);padding:2rem 1.3rem;box-shadow:var(--shadow);
}
.empty-state .big{font-size:2.6rem;line-height:1;margin-bottom:.5rem}
.empty-state p{margin:0;font-weight:800;color:var(--navy);font-size:1.12rem}
.empty-state .sub{font-weight:600;color:var(--muted);font-size:.97rem;margin-top:.4rem}

/* ---------- FORM ---------- */
.card{background:#fff;border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow);border:2.5px solid #fff}
.field{margin-bottom:1rem}
label{display:block;font-weight:800;color:var(--navy);margin-bottom:.35rem;font-size:.97rem}
input[type=text],input[type=email],textarea{
  width:100%;font-family:var(--font);font-size:16px;font-weight:600;color:var(--ink);
  padding:.8rem .95rem;border:2.5px solid var(--blue-soft);border-radius:var(--radius);
  background:#fbfdff;transition:border-color .15s ease, background .15s ease;
}
input::placeholder,textarea::placeholder{color:#6b7299;font-weight:500;opacity:1}
input:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--pink);background:#fff6fa}
textarea{resize:vertical;min-height:120px}

.hp{position:absolute!important;left:-9999px!important;opacity:0;width:1px;height:1px}

.form-status{margin:.9rem 0 0;text-align:center;font-weight:800;min-height:1.4em;font-size:.97rem}
.form-status.ok{color:#2f8a3f}
.form-status.err{color:#c62f6b}
.form-status.busy{color:var(--muted)}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--navy);color:#fff;text-align:center;
  padding:1.8rem 1.1rem 2.2rem;
}
.footer p{margin:0;font-weight:700}
.footer-sub{margin-top:.3rem!important;font-size:.83rem;letter-spacing:.09em;
  text-transform:uppercase;color:#b9c2ee;font-weight:800}

@media (min-width:700px){
  body{font-size:18px}
  .events{grid-template-columns:1fr 1fr}
  .empty-state{grid-column:1/-1}
}