/* ---------- Tokens ---------- */
:root{
  --pink:#F7C8D8;
  --cream:#FFF6F1;
  --cocoa:#3F2E2A;
  --radius:24px;
  --shadow:0 8px 20px rgba(63,46,42,.1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;color:var(--cocoa);background:var(--pink);line-height:1.55;scroll-behavior:smooth}
h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;line-height:1.2;margin-bottom:.9rem;color:#121212}
p{font-size:1rem;margin-bottom:1.6rem}
img{max-width:100%;display:block;border-radius:var(--radius)}

/* ---------- Utilities ---------- */
.section{padding:96px 0}
.container{width:min(90%,1140px);margin-inline:auto}
.btn{display:inline-block;border:none;border-radius:9999px;padding:.85rem 1.8rem;font-size:.95rem;cursor:pointer;font-weight:600;transition:.25s}
.btn--primary{background:var(--cream);color:#121212; text-decoration:none;}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent;color:#121212;border:2px solid #121212; text-decoration:none;}

.btn--ghost:hover{background:#121212;color:#fff}

/* ---------- Navbar ---------- */
.nav{position:sticky;top:0;z-index:10;background:transparent;backdrop-filter:blur(8px);transition:background .3s}
.nav.scrolled{background:#fcd4eb}
.nav__inner{display:flex;justify-content:space-between;align-items:center;max-width:1140px;margin:auto;padding:.6rem 1rem}
.logo{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:800;text-decoration:none;color:#121212}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;background:var(--pink)}
.hero__grid{display:grid;gap:3rem;align-items:center;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hero__img{perspective:800px}
.hero__img img{transform:rotate(360deg);animation:float 35s ease-in-out infinite}
@keyframes float{50%{transform:rotate(3deg) translateY(-10px)}}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

@media(max-width:640px){
  .section{padding:60px 0}
  .nav__inner{flex-direction:column;gap:.5rem}
  .hero__cta{justify-content:center}
}

/* ---------- Flavours section ---------- */
.flavours{background:#fff5d3}
.flavours__grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start;
}

/* glassmorphic card */
.flavour-card{
  position:relative;
  padding:2rem 1.6rem 2.4rem;
  border-radius:var(--radius);
  background:rgba(255, 8, 226, 0.183);
  backdrop-filter:blur(8px);
  border:1px solid rgb(0, 0, 0);
  box-shadow:0 18px 26px rgba(63,46,42,.12) inset, var(--shadow);
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, backdrop-filter .3s;
}
.flavour-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 32px rgba(63,46,42,.15) inset, 0 12px 24px rgba(63,46,42,.18);
  backdrop-filter:blur(10px);
}
.flavour-card h3{font-size:1.3rem;margin:.9rem 0 .5rem}
.flavour-card p{font-size:.9rem;min-height:48px;margin-bottom:1.2rem}

/* ---------- Fade-up reveal ---------- */
.js-reveal{opacity:0;transform:translateY(30px);transition:.6s ease}
.reveal--visible{opacity:1;transform:none}

/* --- tweak flavours heading --- */
.flavours .section__title{
  text-align:center;                 /* centre it */
  font-size:clamp(2.4rem,5vw,3.4rem);/* make it bigger on all screens */
  margin-bottom:3rem; 
}

/* ---------- How-it-works section ---------- */
.howit{background:#F7C8D8}

/* section title already centers from earlier tweak */
.steps-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:2.5rem;
}

.step-card{
  position:relative;
  padding:3.2rem 1.8rem 2.4rem;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.step-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 30px rgba(63,46,42,.14);
}

/* numbered badge */
.step-num{
  position:absolute;
  top:-18px;left:50%;
  transform:translateX(-50%);
  width:36px;height:36px;
  background:var(--cream);
  border:3px solid var(--pistachio);
  color:var(--cocoa);
  border-radius:50%;
  font-weight:700;
  display:grid;place-items:center;
  font-size:1rem;
}

/* emoji / icon */
.step-icon{
  font-size:2.2rem;
  margin-bottom:.8rem;
}

/* headings & copy inside card */
.step-card h3{font-size:1.2rem;margin-bottom:.6rem}
.step-card p{font-size:.9rem;margin-bottom:0}

/* reuse fade-up classes  */
/* --- tweak how-it heading --- */
.howit .section__title{
  text-align:center;                 /* centre it */
  font-size:clamp(2.4rem,5vw,3.4rem);/* make it bigger on all screens */
  margin-bottom:3rem; 
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  color:#fff;
  background:var(--cocoa);
  overflow:hidden;
  padding-top:60px; /* space after wave */
}
.site-footer::before{
  content:"";
  position:absolute;inset:0;
  background:url('images/sprinkles.svg') center/220px repeat;
  opacity:.06;pointer-events:none;
}
.footer-wave{position:absolute;top:0;left:0;width:100%;height:80px;transform:translateY(-100%)}
.footer-wave path{fill:var(--cream)}

.footer__grid{
  position:relative;z-index:1;
  display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:start;
  padding-bottom:24px;
}

/* columns */
.f-col h4{font-family:'Playfair Display',serif;font-weight:800;margin-bottom:.75rem;color:#fff}
.f-logo{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:800;margin-bottom:.4rem}
.f-blurb{opacity:.9}
.f-links a{display:block;color:#fff;text-decoration:none;opacity:.9;margin:.35rem 0}
.f-links a:hover{opacity:1;text-decoration:underline}

/* newsletter */
.f-news{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.f-news input{
  flex:1 1 220px;
  font:inherit;color:#222;background:rgba(255,255,255,.9);
  border:2px solid rgba(255,255,255,.8);border-radius:999px;
  padding:.7rem 1rem;outline:none;
}
.f-news input:focus{border-color:#fff}

/* socials */
.f-socials{display:flex;gap:.6rem;margin-top:1rem}
.ico{
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.12);
  transition:.25s
}
.ico:hover{background:rgba(255,255,255,.2)}
.ico svg{fill:#fff}

/* back to top link */
.back-top{display:inline-block;margin-top:1rem;color:#fff;opacity:.9;text-decoration:none}
.back-top:hover{opacity:1;text-decoration:underline}

/* bottom bar */
.f-bottom{background:#2c201d;margin-top:24px}
.f-bottom__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;color:#eee;font-size:.92rem;gap:1rem;
}
.f-bottom__row a{color:#fff}
.credit{opacity:.85}
@media (max-width:640px){
  .f-bottom__row{flex-direction:column}
}

/* make the last section (if any) not add bottom padding */
section:last-of-type { padding-bottom: 0; }

/* ensure the footer itself contributes no extra space */
.site-footer { margin-bottom: -400px; }
.site-footer *:last-child { margin-bottom: 0; }

/* avoid margin-collapsing weirdness at the end of the page */
html, body { margin: 0; padding: 0; }

/* (optional) if you kept a bottom bar inside the footer */
.f-bottom { margin-top: 0; padding-top: 14px; }  /* convert margin to padding */