/* ============================================================
   The landing page: what MirthDay is, for a parent who has just
   heard about it. Mock-up: design/landing.html, markup: view/index.php.
   Its own tokens on purpose — the invitation is themed per event
   (invite.css), the account chrome is calm (account.css), and the
   shop window is the brightest of the three.
   ============================================================ */
:root{
  --paper:      #FFFDF8;
  --paper-dim:  #FBF9F2;
  --ink:        #33404E;
  --ink-soft:   #6B7785;
  --line:       #E7E2D6;
  --brand:      #F0647B;
  --brand-deep: #D24560;
  --brand-soft: #FFF0F3;
  --ok:         #3E9256;
  --sun:        #FFC94D;
  --sun-deep:   #E0A72E;
  --sky:        #7FBFDF;

  --r-card: 22px;
  --shadow-card: 0 10px 24px rgba(72,105,133,.15), 0 2px 0 rgba(72,105,133,.06);
  --shadow-sticker: 0 6px 0 rgba(72,105,133,.18);

  --f-display: "Fredoka", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  --f-hand: "Caveat", cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--f-body); color:var(--ink);
  background:linear-gradient(180deg, #D9EEF9 0%, #EFF7F3 55%, #F6F9F4 100%);
  min-height:100vh; font-size:17px; line-height:1.55;
  overflow-x:hidden;
}
/* faint confetti scatter over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><circle cx="30" cy="40" r="5" fill="%23F0647B" opacity=".12"/><rect x="150" y="26" width="9" height="9" rx="2" fill="%23FFC94D" opacity=".18" transform="rotate(18 154 30)"/><circle cx="190" cy="150" r="4" fill="%233E9256" opacity=".14"/><rect x="60" y="170" width="8" height="8" rx="2" fill="%237FBFDF" opacity=".18" transform="rotate(-14 64 174)"/></svg>');
}

.wrap{ max-width:1020px; margin:0 auto; padding:0 20px; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 14px;
}
.logo{
  font-family:var(--f-display); font-weight:700; font-size:1.35rem;
  text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.topnav{ display:flex; align-items:center; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem;
  color:#fff; background:var(--brand); text-decoration:none; cursor:pointer;
  border:none; border-radius:15px; padding:13px 24px;
  box-shadow:0 5px 0 var(--brand-deep);
  transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--brand-deep); }
.btn--ghost{
  color:var(--ink); background:#fff;
  border:2px solid var(--line); box-shadow:0 4px 0 rgba(72,105,133,.1);
  font-size:.95rem; padding:10px 18px;
}
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand-deep); }
.btn--big{ font-size:1.15rem; padding:16px 32px; border-radius:18px; }

.mini-bunting{
  display:flex; gap:10px;
  border-top:2px solid rgba(51,64,78,.14);
  padding-top:5px; padding-left:8px;
}
.mini-bunting i{ width:14px; height:18px; clip-path:polygon(0 0,100% 0,50% 100%); }
.mini-bunting i:nth-child(4n+1){ background:var(--brand); }
.mini-bunting i:nth-child(4n+2){ background:var(--sun); }
.mini-bunting i:nth-child(4n+3){ background:var(--ok); }
.mini-bunting i:nth-child(4n+4){ background:var(--sky); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:flex; align-items:center; gap:44px;
  padding:56px 0 70px;
}
.hero-copy{ flex:1 1 52%; min-width:0; }
.hero-kicker{
  font-family:var(--f-hand); font-size:1.6rem; color:var(--brand-deep);
}
.hero h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.2rem, 5.4vw, 3.3rem); line-height:1.1;
  margin:8px 0 16px;
}
.hero h1 em{
  font-style:normal; color:var(--brand-deep);
  text-decoration:underline wavy var(--sun) 4px;
  text-underline-offset:7px;
}
.hero-sub{
  color:var(--ink-soft); font-size:1.12rem; max-width:46ch; margin-bottom:26px;
}
.hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-note{
  font-weight:800; font-size:.9rem; color:var(--ink-soft);
}
.hero-note b{ color:var(--ok); }

/* trust pills */
.trust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.trust span{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:2px solid var(--line); border-radius:999px;
  padding:6px 14px; font-weight:800; font-size:.85rem; color:var(--ink-soft);
}

/* ---------- the phone: a miniature invitation, pure CSS ---------- */
.hero-visual{ flex:0 0 340px; position:relative; }
.float-mascot{
  position:absolute; font-size:44px; z-index:2;
  filter:drop-shadow(0 4px 6px rgba(72,105,133,.25));
}
.float-mascot--1{ top:-26px; left:-18px; transform:rotate(-12deg); }
.float-mascot--2{ bottom:22px; right:-16px; transform:rotate(10deg); font-size:38px; }

.phone{
  background:var(--paper); border-radius:34px;
  border:10px solid var(--ink);
  box-shadow:0 24px 48px rgba(51,64,78,.3);
  overflow:hidden; transform:rotate(2.5deg);
  padding:22px 18px 24px; position:relative;
}
.phone-bunting{
  display:flex; justify-content:space-between;
  margin:-22px -18px 16px; padding:6px 8px 0;
  border-bottom:none;
}
.phone-bunting i{
  width:16px; height:21px; clip-path:polygon(0 0,100% 0,50% 100%);
}
.phone-bunting i:nth-child(5n+1){ background:var(--brand); }
.phone-bunting i:nth-child(5n+2){ background:var(--sun); }
.phone-bunting i:nth-child(5n+3){ background:var(--ok); }
.phone-bunting i:nth-child(5n+4){ background:var(--sky); }
.phone-bunting i:nth-child(5n+5){ background:#B79BE0; }

/* four invitations on a loop, one per theme: each slide holds for 7s of the 28s
   cycle and starts that cycle --slide steps later. The swap itself is quick —
   0.18s, which is 0.65% of the cycle. Stacked in one grid cell so the phone keeps
   the height of the tallest of them and nothing jumps */
.phone-slides{ display:grid; }
.phone-slides > *{ grid-area:1 / 1; }

.phone-cycle{
  opacity:0;
  animation:phone-cycle 20s linear infinite;
  animation-delay:calc(var(--slide) * 5s);
}
@keyframes phone-cycle{
  0%              { opacity:0; }
  0.65%, 24.35%   { opacity:1; }
  25%, 100%       { opacity:0; }
}
/* a carousel nobody asked for is the worst kind: hold the first invitation still */
@media (prefers-reduced-motion: reduce){
  .phone-cycle{ animation:none; opacity:0; }
  .phone-cycle[style*="--slide:0"]{ opacity:1; }
}

.phone-kicker{
  font-family:var(--f-hand); font-size:1.15rem; color:var(--ink-soft);
  text-align:center;
}
.phone-title{
  font-family:var(--f-display); font-weight:700; font-size:1.5rem;
  text-align:center; line-height:1.15; margin:2px 0 10px;
}
.phone-title em{
  font-style:normal; color:var(--slide-accent, var(--ok));
  text-decoration:underline wavy var(--sun) 3px; text-underline-offset:4px;
}
.phone-chips{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.phone-chip{
  font-weight:800; font-size:.72rem;
  color:var(--slide-accent, var(--brand-deep));
  /* the soft fill is mixed from the same colour, so a new theme needs one value */
  background:var(--brand-soft);
  background:color-mix(in srgb, var(--slide-accent, var(--brand)) 12%, #fff);
  border:2px dashed var(--slide-accent, var(--brand));
  border-radius:999px; padding:4px 11px;
}
.phone-q{
  text-align:center; font-family:var(--f-display); font-weight:600;
  font-size:1.02rem; margin-bottom:10px;
}
.phone-stickers{ display:grid; gap:8px; }
.p-sticker{
  font-family:var(--f-display); font-weight:600; font-size:.92rem;
  color:#fff; text-align:center; border-radius:13px;
  border:4px solid #fff; padding:10px 8px;
  box-shadow:0 4px 0 rgba(72,105,133,.16);
}
.p-sticker--yes{ background:var(--ok); transform:rotate(-1.2deg); }
.p-sticker--maybe{ background:var(--sun); color:#6b4d05; transform:rotate(.8deg); }
.p-sticker--no{ background:var(--sky); transform:rotate(-.6deg); }
.phone-coming{
  margin-top:13px; text-align:center;
  font-weight:800; font-size:.75rem; color:var(--ink-soft);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:34px 0 44px; }
.section-head{ text-align:center; margin-bottom:34px; }
.section-head h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.6rem, 4vw, 2.2rem);
}
.section-head .squiggle{
  display:inline-block; height:8px; width:150px; margin-top:8px;
  background:var(--brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="8" viewBox="0 0 150 8"><path d="M2 5 Q 10 0 18 5 T 34 5 T 50 5 T 66 5 T 82 5 T 98 5 T 114 5 T 130 5 T 146 5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>') no-repeat / 150px 8px;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="8" viewBox="0 0 150 8"><path d="M2 5 Q 10 0 18 5 T 34 5 T 50 5 T 66 5 T 82 5 T 98 5 T 114 5 T 130 5 T 146 5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>') no-repeat / 150px 8px;
}
.section-head p{ color:var(--ink-soft); margin-top:10px; }

/* how it works: three sticker steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{
  position:relative; background:var(--paper);
  border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:46px 22px 24px; text-align:center;
}
.step:nth-child(1){ transform:rotate(-.5deg); }
.step:nth-child(3){ transform:rotate(.5deg); }
.step-num{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:#fff;
  background:var(--brand); border:4px solid #fff;
  box-shadow:var(--shadow-sticker);
}
.step-emoji{ font-size:2.2rem; margin-bottom:10px; }
.step h3{
  font-family:var(--f-display); font-weight:600; font-size:1.2rem; margin-bottom:8px;
}
.step p{ color:var(--ink-soft); font-size:.97rem; }

/* features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature{
  background:var(--paper); border-radius:18px;
  box-shadow:var(--shadow-card); padding:22px 20px;
}
.feature-ico{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:22px;
  background:var(--paper-dim); border:3px solid var(--line);
  margin-bottom:12px;
}
.feature h3{
  font-family:var(--f-display); font-weight:600; font-size:1.08rem; margin-bottom:6px;
}
.feature p{ color:var(--ink-soft); font-size:.94rem; }

/* themes strip */
.themes{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.theme-tile{
  width:118px; text-align:center;
  background:var(--paper); border-radius:18px;
  box-shadow:var(--shadow-card); padding:18px 10px 14px;
  font-weight:800; font-size:.85rem; color:var(--ink-soft);
  transition:transform .14s ease;
}
.theme-tile:hover{ transform:translateY(-4px) rotate(-1deg); }
.theme-tile span{ display:block; font-size:2.3rem; margin-bottom:6px; }
.themes-more{
  align-self:center; font-family:var(--f-hand); font-size:1.3rem; color:var(--ink-soft);
}

/* testimonial */
.quote{
  max-width:640px; margin:0 auto; position:relative;
  background:var(--paper); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:30px 30px 24px;
  transform:rotate(-.4deg);
}
.quote .tape{
  position:absolute; top:-12px; left:50%;
  width:110px; height:26px; transform:translateX(-50%) rotate(-2deg);
  background:repeating-linear-gradient(45deg,
      rgba(240,100,123,.7) 0 10px, rgba(255,201,77,.7) 10px 20px);
  border-radius:3px; box-shadow:0 2px 4px rgba(72,105,133,.15);
}
.quote p{
  font-family:var(--f-hand); font-size:1.55rem; line-height:1.35; color:var(--ink);
}
.quote footer{
  margin-top:14px; font-weight:800; font-size:.9rem; color:var(--ink-soft);
}

/* final CTA */
.cta-final{
  text-align:center; background:linear-gradient(135deg, var(--brand-soft), var(--paper));
  border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:46px 26px; margin:20px 0 10px; position:relative; overflow:hidden;
}
.cta-final h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.6rem, 4vw, 2.1rem); margin-bottom:8px;
}
.cta-final p{ color:var(--ink-soft); margin-bottom:22px; }
.cta-final .float-mascot--1{ top:14px; left:20px; font-size:34px; }
.cta-final .float-mascot--2{ bottom:12px; right:22px; font-size:34px; }

/* footer */
.footer{
  padding:36px 0 28px; text-align:center;
  color:var(--ink-soft); font-size:.88rem; font-weight:700;
}
.footer-links{
  display:flex; gap:20px; justify-content:center; margin:10px 0 14px; flex-wrap:wrap;
}
.footer-links a{ color:var(--ink-soft); text-decoration:none; font-weight:800; }
.footer-links a:hover{ color:var(--brand-deep); }

/* grass strip at the very bottom - the brand ground */
.ground-strip{
  height:56px;
  background:
    radial-gradient(circle at 10% 0, var(--ok) 0 18px, transparent 19px),
    radial-gradient(circle at 26% 0, #2E7343 0 24px, transparent 25px),
    radial-gradient(circle at 43% 0, var(--ok) 0 16px, transparent 17px),
    radial-gradient(circle at 60% 0, #2E7343 0 22px, transparent 23px),
    radial-gradient(circle at 77% 0, var(--ok) 0 18px, transparent 19px),
    radial-gradient(circle at 93% 0, #2E7343 0 24px, transparent 25px),
    linear-gradient(var(--ok) 0 100%);
  background-repeat:no-repeat;
  background-position:0 12px,0 7px,0 14px,0 9px,0 12px,0 7px,0 26px;
}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:840px){
  .hero{ flex-direction:column; gap:46px; padding:40px 0 56px; text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta, .trust{ justify-content:center; }
  .hero-visual{ flex-basis:auto; width:min(320px, 88vw); }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .features{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .features{ grid-template-columns:1fr; }
  .topnav .btn:not(.btn--ghost){ padding:11px 16px; font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  html{ scroll-behavior:auto; }
}