/* UniScene — FIESTA design system (extracted from packages/ui/src/tokens.css) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --berry:#ff4d8d; --sun:#ffc233; --cream:#fff8ec; --paper:#fff; --ink:#221a3b;
  --mango:#ff8a3d; --grape:#6c4ce0; --mint:#16c79a; --ink-soft:#5b5274; --faint:#ada6bc;
  --shadow-sm:3px 3px 0 var(--ink); --shadow:5px 6px 0 var(--ink); --shadow-lg:8px 10px 0 var(--ink);
  --r-card:20px; --r-card-lg:24px; --r-btn:18px; --r-tile:13px;
  --display:'Bricolage Grotesque',ui-sans-serif,sans-serif;
  --body:'Hanken Grotesk',ui-sans-serif,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.02em}
.mono{font-family:var(--mono);letter-spacing:.02em}
a{color:inherit;text-decoration:none}

/* wordmark */
.wordmark{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:.15em}
.wordmark .star{color:var(--berry)}
.wordmark .dot{color:var(--berry)}

/* chip / badge */
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:.5em 1em;box-shadow:var(--shadow-sm)}
.chip .pulse{width:.55em;height:.55em;border-radius:50%;background:var(--berry);box-shadow:0 0 0 0 rgba(255,77,141,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,141,.6)}70%{box-shadow:0 0 0 9px rgba(255,77,141,0)}100%{box-shadow:0 0 0 0 rgba(255,77,141,0)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:1.02rem;
  border:3px solid var(--ink);border-radius:var(--r-btn);padding:.85em 1.5em;background:var(--berry);color:#fff;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translate(2px,3px);box-shadow:var(--shadow-sm)}
.btn.sun{background:var(--sun);color:var(--ink)}
.btn.paper{background:var(--paper);color:var(--ink)}

/* notify field */
.notify{display:flex;gap:.6rem;max-width:440px;flex-wrap:wrap}
.notify input{flex:1;min-width:200px;font-family:var(--body);font-weight:500;font-size:1rem;padding:.85em 1.1em;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.notify input:focus{outline:none;box-shadow:var(--shadow)}

/* QR card */
.qr{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;background:#fff;border:3px solid var(--ink);border-radius:var(--r-card);padding:1.1rem;box-shadow:var(--shadow)}
.qr img{width:170px;height:170px;display:block;border-radius:8px}
.qr .cap{font-family:var(--mono);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}

/* store badges */
.stores{display:flex;gap:.6rem;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:.6em;border:2.5px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff;padding:.6em 1em;box-shadow:var(--shadow-sm)}
.store .ic{font-size:1.3em}
.store .t{display:flex;flex-direction:column;line-height:1.05}
.store .t small{font-size:.6rem;opacity:.8;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.store .t b{font-family:var(--display);font-weight:700;font-size:.92rem}
.store.soon{background:#fff;color:var(--ink)}

/* phone mockup */
.phone{width:270px;border:4px solid var(--ink);border-radius:38px;background:var(--ink);padding:9px;box-shadow:var(--shadow-lg)}
.phone .scr{border-radius:28px;overflow:hidden;background:var(--cream);border:2px solid var(--ink)}
.phone .top{background:var(--berry);color:#fff;padding:14px 16px 18px}
.phone .top .bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.62rem;opacity:.9}
.phone .top h4{font-family:var(--display);font-weight:800;font-size:1.35rem;margin-top:8px}
.phone .top p{font-size:.72rem;opacity:.92;margin-top:2px}
.phone .body{padding:12px}
.offer{display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:9px 11px;margin-bottom:9px;box-shadow:var(--shadow-sm)}
.offer .lg{width:34px;height:34px;border-radius:9px;border:2px solid var(--ink);display:grid;place-items:center;font-size:1.1rem;flex:none}
.offer .txt{flex:1;min-width:0}
.offer .txt b{font-family:var(--display);font-weight:700;font-size:.82rem;display:block}
.offer .txt small{font-size:.66rem;color:var(--ink-soft)}
.offer .pct{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--berry)}

/* footer */
.foot{border-top:3px solid var(--ink);padding:2rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.foot .mono{font-size:.72rem;color:var(--ink-soft)}

/* marquee */
.marquee{overflow:hidden;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--ink)}
.marquee .track{display:flex;gap:2.5rem;white-space:nowrap;animation:scroll 18s linear infinite;padding:.7rem 0}
.marquee .track span{font-family:var(--display);font-weight:700;color:#fff;font-size:1rem;display:inline-flex;gap:.5em;align-items:center}
.marquee .track span::before{content:'✶';color:var(--sun)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* reveal on load */
.rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}

/* dotted paper texture helper */
.dots{background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px);background-size:22px 22px;opacity:.06}