/* stkrz landing page. Same tokens as the app (src/theme.ts): cream, ink, tangerine, Fredoka, Fibonacci spacing. */
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #FFF6E9;
  --bg-alt: #FDECD4;
  --surface: #FFFFFF;
  --ink: #1D1A16;
  --ink-soft: #625849;
  --line: #EADBC4;
  --accent: #FF5B2E;
  --s1: 5px; --s2: 8px; --s3: 13px; --s4: 21px; --s5: 34px; --s6: 55px; --s7: 89px;
  --r: 21px;
  --max: 1100px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130F; --bg-alt: #201A14; --surface: #221D18;
    --ink: #FBF3E6; --ink-soft: #B9AB97; --line: #3A3128; --accent: #FF6A3D;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, .logo, .store, .num, .row span, summary { font-family: 'Fredoka', system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.top, main > section, .foot { max-width: var(--max); margin: 0 auto; padding-inline: max(var(--s4), env(safe-area-inset-left)); }

.top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s4); }
.logo { font-weight: 700; font-size: 30px; color: var(--accent); text-decoration: none; letter-spacing: -0.5px; }

/* The app's button: accent fill, ink outline, hard ink shadow. */
.store {
  display: inline-block;
  padding: var(--s3) var(--s5);
  background: var(--accent);
  color: #1D1A16;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--ink);
  font-weight: 600;
  font-size: 21px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.store:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--ink); }
.store:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.store:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.store-sm { padding: var(--s2) var(--s4); font-size: 17px; box-shadow: 0 4px 0 var(--ink); }

/* Hero: copy and the floating wall split roughly 1 : φ on wide screens. */
.hero { display: grid; gap: var(--s5); align-items: center; padding-block: var(--s5) var(--s6); }
@media (min-width: 860px) { .hero { grid-template-columns: 1fr 1.618fr; } }
h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1.02; letter-spacing: -1.5px; margin: 0 0 var(--s4); font-weight: 700; }
.hl { color: var(--accent); }
.lede { font-size: 21px; color: var(--ink-soft); margin: 0 0 var(--s5); max-width: 30ch; }
.lede strong { color: var(--ink); }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.fine { margin: 0; font-size: 15px; color: var(--ink-soft); }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.wall img { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: var(--s2); animation: bob 4.2s ease-in-out infinite; }
.wall img:nth-child(2n) { animation-delay: -1.3s; transform: rotate(3deg); }
.wall img:nth-child(3n) { animation-delay: -2.6s; transform: rotate(-3deg); }
@keyframes bob { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .wall img { animation: none; } }

h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.8px; margin: 0 0 var(--s4); font-weight: 700; }
.sub { color: var(--ink-soft); margin: 0 0 var(--s5); max-width: 52ch; }
main > section + section { padding-block: var(--s6); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.steps h3 { margin: var(--s3) 0 var(--s1); font-size: 23px; }
.steps p { margin: 0; color: var(--ink-soft); }
.num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #1D1A16; border: 2px solid var(--ink); font-weight: 700; }

.band { background: var(--bg-alt); border-radius: 34px; }
.band.band { padding: var(--s5) var(--s4); margin-block: var(--s5); }
.row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (min-width: 760px) { .row { grid-template-columns: repeat(6, 1fr); } }
.row li { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.row img { background: var(--surface); border-radius: var(--r); padding: var(--s2); }
.row span { font-weight: 500; font-size: 16px; text-align: center; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.grid img { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: var(--s2); }

.faq details { border-bottom: 2px solid var(--line); padding-block: var(--s3); }
.faq summary { cursor: pointer; font-size: 21px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--ink-soft); margin: var(--s2) 0 0; max-width: 62ch; }

.foot { display: flex; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s5) var(--s6); color: var(--ink-soft); font-size: 15px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }