@font-face {
  font-family: "Mochibop";
  src: url("/fonts/mochibop.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: oklch(0.33 0.17 265);        /* flyer navy */
  --ink-soft: oklch(0.42 0.12 262);
  --sky: oklch(0.72 0.09 255);        /* brush-stroke blue */
  --wash: oklch(0.92 0.035 250);      /* pale brush wash */
  --bg: oklch(1 0 0);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* main owns the tinted background and isolates blending, so the
   multiply-blended logo and brush strokes blend with this gradient
   instead of the page canvas. */
main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.75rem, 2.5vh, 1.5rem);
  padding: 2rem 16px 2.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 0% 0%, #dfedf8 0%, #eef5fb 22%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #e3edf9 0%, #f1f6fc 22%, transparent 55%),
    var(--bg);
}
.brush {
  position: absolute; z-index: -1;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}
.brush-tl { width: min(72vw, 640px); top: -6%; left: -14%; transform: rotate(-6deg); }
.brush-br { width: min(84vw, 760px); bottom: -8%; right: -12%; transform: rotate(-10deg); }
.hero {
  position: relative;
  width: min(80vw, 400px);
}
.logo {
  width: 100%; aspect-ratio: 1; height: auto;
  display: block;
  mix-blend-mode: multiply;
  animation: rise 900ms var(--ease-out) both;
}
.save {
  position: absolute; right: -0.25rem; bottom: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 700 0.95rem/1 "Nunito", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px oklch(0.33 0.17 265 / 0.28);
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
  animation: rise 900ms 200ms var(--ease-out) both;
}
.save:hover { background: var(--ink-soft); transform: translateY(-1px); }
.save:active { transform: translateY(0); }
.save:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.save[aria-busy="true"] { pointer-events: none; }
.save svg { width: 1.05em; height: 1.05em; flex: none; }
h1 {
  font-family: "Mochibop", "Nunito", cursive;
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 4rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #002b80;
  text-wrap: balance;
  position: relative;
  animation: rise 900ms 120ms var(--ease-out) both;
}
h1::after {
  content: "";
  display: block; width: 2.4em; height: 4px; margin: 0.24em auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--sky), transparent);
}
.tagline {
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 600;
  color: var(--ink-soft);
  animation: rise 900ms 220ms var(--ease-out) both;
}
.when {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  margin-top: 0.5rem;
  animation: rise 900ms 320ms var(--ease-out) both;
}
.when div {
  padding: 0.6rem 1.4rem 0.7rem;
  background: var(--wash);
  border-radius: 999px;
  line-height: 1.2;
}
.when dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.when dd {
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 700;
}
.tiktok {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-top: 0.25rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px oklch(0.33 0.17 265 / 0.14), 0 1px 3px oklch(0.33 0.17 265 / 0.08);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  animation: rise 900ms 420ms var(--ease-out) both;
}
.tiktok:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px oklch(0.33 0.17 265 / 0.18), 0 1px 3px oklch(0.33 0.17 265 / 0.08);
}
.tiktok:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.tiktok-icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  background: #010101;
  border-radius: 0.9rem;
}
.tiktok-icon svg { width: 1.7rem; height: 1.7rem; }
.tiktok-text { display: flex; flex-direction: column; line-height: 1.2; }
.tiktok-text small { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.tiktok-text strong { font-size: clamp(1.1rem, 3.6vw, 1.35rem); font-weight: 800; }

@media (max-width: 480px) {
  .when { gap: 0.5rem; }
  .when div { padding: 0.4rem 1rem 0.5rem; }
  .when dt { font-size: 0.7rem; }
  .when dd { font-size: 1rem; }
  .tiktok { gap: 0.7rem; padding: 0.4rem 1.2rem 0.4rem 0.4rem; border-radius: 1rem; }
  .tiktok-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; }
  .tiktok-icon svg { width: 1.45rem; height: 1.45rem; }
  .tiktok-text small { font-size: 0.72rem; }
  .tiktok-text strong { font-size: 1.05rem; }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}