@font-face { font-family: "Vazirmatn"; src: url("/assets/fonts/vazirmatn-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --orange: #f26a1b;
  --orange-600: #de5a0f;
  --orange-50: #fff4ec;
  --ink: #1d1d1f;
  --ink-2: #3a3a3f;
  --muted: #6e6e76;
  --canvas: #f6f6f8;
  --line: rgba(20, 20, 30, 0.08);
  --line-strong: rgba(20, 20, 30, 0.14);
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.04), 0 4px 14px rgba(20, 20, 30, 0.05);
  --shadow: 0 2px 6px rgba(20, 20, 30, 0.04), 0 18px 44px rgba(20, 20, 30, 0.08);
  --radius: 22px;
  --top-h: 68px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Vazirmatn", Tahoma, system-ui, sans-serif; color: var(--ink); background: #fff; line-height: 1.8; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
main { overflow-x: clip; }
a { color: inherit; }
.wrap { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }
.skip { position: absolute; top: -80px; inset-inline-start: 16px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[id] { scroll-margin-top: calc(var(--top-h) + 12px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 15px; font: inherit; font-weight: 800; font-size: 15px; color: #fff; text-decoration: none; cursor: pointer; background: linear-gradient(180deg, #ff7a2e, var(--orange)); box-shadow: 0 10px 24px rgba(242, 106, 27, 0.28); transition: transform 160ms ease, box-shadow 160ms ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(242, 106, 27, 0.34); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .segment button:focus-visible { outline: 3px solid rgba(242, 106, 27, 0.4); outline-offset: 2px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.btn-ghost { color: var(--ink); background: #fff; border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { box-shadow: var(--shadow); }

/* --- Header + reading progress ------------------------------------------- */
.top { position: fixed; top: 0; inset-inline: 0; z-index: 30; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--top-h); }
.brand img { height: 56px; width: 56px; object-fit: contain; margin-block: -6px; mix-blend-mode: multiply; }
.top-nav { display: none; gap: 22px; font-weight: 700; font-size: 14px; }
.top-nav a { text-decoration: none; color: var(--ink-2); }
.top-nav a:hover { color: var(--orange-600); }
@media (min-width: 860px) { .top-nav { display: flex; } }
.progress { display: none; }

/* --- Hero (static layout; the pinned version is under .motion below) ------- */
.scroll-hint { display: none; }
.hero { background: radial-gradient(900px 460px at 50% 12%, var(--orange-50), transparent 70%), #fff; }
.hero-stage { display: grid; justify-items: center; gap: 32px; padding: calc(var(--top-h) + 40px) 16px 72px; text-align: center; }
.hero-copy { display: grid; justify-items: center; max-width: 720px; }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--orange-600); background: var(--orange-50); }
.hero h1 { margin: 14px 0 12px; font-size: clamp(38px, 7vw, 84px); line-height: 1.25; font-weight: 900; letter-spacing: -0.02em; }
.hero h1 .w { display: inline-block; }
.hero-copy > p { margin: 0 0 24px; max-width: 600px; color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.phone-wrap { position: relative; }
.phone { position: relative; width: min(320px, 82vw); padding: 14px; border-radius: 38px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(20, 20, 30, 0.14); display: grid; gap: 10px; text-align: start; }
.phone-bar { display: grid; place-items: center; height: 18px; }
.phone-bar span { width: 70px; height: 6px; border-radius: 4px; background: var(--canvas); }
.phone-search { padding: 12px 14px; border-radius: 16px; background: var(--canvas); font-size: 13px; color: var(--ink); font-weight: 800; }
.phone-search.is-empty { color: var(--muted); font-weight: 400; }
.phone-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); }
.phone-card b { display: block; font-size: 14px; }
.phone-card small { color: var(--muted); font-size: 12px; }
.ph-img { flex: none; width: 58px; height: 58px; border-radius: 14px; }
.ph-1 { background: linear-gradient(135deg, #ffd9bd, #f6a26b); }
.ph-2 { background: linear-gradient(135deg, #ffe7a8, #e8a93a); }
.ph-3 { background: linear-gradient(135deg, #ffd0c6, #e06a55); }
.hero-tomato { position: absolute; width: 130px; height: auto; bottom: -26px; inset-inline-end: -56px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.12)); }
@media (max-width: 520px) { .hero-tomato { width: 92px; inset-inline-end: -14px; } }
.preview-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--ink-2); background: rgba(20, 20, 30, 0.06); white-space: nowrap; }
.phone .preview-tag { justify-self: center; }

/* --- Statement ------------------------------------------------------------ */
.say { padding: clamp(56px, 8vw, 104px) 0; }
.say p { margin-block: 0; max-width: 940px; text-align: center; font-size: clamp(26px, 4.8vw, 58px); line-height: 1.55; font-weight: 900; letter-spacing: -0.01em; }

/* --- Sections ------------------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-soft { background: var(--canvas); }
.section-head { max-width: 640px; }
.section-head h2 { margin: 10px 0 12px; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.4; font-weight: 900; letter-spacing: -0.01em; }
.section-head p { margin: 0; color: var(--muted); font-size: 16px; }
.kicker { font-size: 13px; font-weight: 900; color: var(--orange-600); }
.ticks { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 700; color: var(--ink-2); }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: var(--orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23f26a1b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.two-col { display: grid; gap: 36px; align-items: center; }
@media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Craving words that slide sideways with the scroll. */
.marquee { display: grid; gap: 6px; margin-bottom: clamp(36px, 6vw, 72px); overflow: hidden; direction: ltr; }
.marquee-row { --g: clamp(18px, 3vw, 40px); display: flex; gap: var(--g); padding-right: var(--g); width: max-content; white-space: nowrap; font-size: clamp(34px, 6.4vw, 84px); line-height: 1.5; font-weight: 900; color: var(--ink); will-change: transform; }
.marquee-row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--orange); }
.marquee-row { justify-self: start; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.demo { display: grid; gap: 14px; padding: clamp(16px, 2.6vw, 26px); margin-top: 28px; }
.two-col .demo, .steps .demo { margin-top: 0; }
.demo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.demo-search input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 15px; font: inherit; font-size: 16px; background: var(--canvas); }
.demo-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.14); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; background: #fff; cursor: pointer; transition: transform 140ms ease; }
.chip:hover { border-color: var(--orange); color: var(--orange-600); }
.chip:active { transform: scale(0.94); }
.demo-results { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.result { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); }
.result div { flex: 1; min-width: 0; }
.result b { display: block; }
.result small { color: var(--muted); font-size: 12.5px; }
.result-thumb { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; font-weight: 900; color: var(--orange-600); background: var(--orange-50); }
.result-meta { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.empty { margin: 0; color: var(--muted); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 5px; border-radius: 15px; background: var(--canvas); }
.tab { flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px; font: inherit; font-weight: 800; font-size: 14px; color: var(--muted); background: transparent; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.menu-list { display: grid; }
.menu-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px dashed var(--line-strong); font-weight: 700; }
.menu-row:last-child { border-bottom: 0; }
.menu-row.off { color: var(--muted); }
.price s { color: var(--muted); font-size: 12px; font-weight: 600; }
.price b { font-weight: 900; }

/* --- Table ordering steps -------------------------------------------------- */
/* Small screens / reduced motion: step text and its panel interleave in one column. */
.steps { display: grid; gap: 18px; max-width: 620px; margin-top: 36px; }
.steps-text, .steps-visual { display: contents; }
.step:nth-child(1) { order: 1; } .panel:nth-child(1) { order: 2; }
.step:nth-child(2) { order: 3; } .panel:nth-child(2) { order: 4; }
.step:nth-child(3) { order: 5; } .panel:nth-child(3) { order: 6; }
.step { margin-top: 18px; }
.step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 900; color: #fff; background: var(--orange); }
.step h3 { margin: 10px 0 6px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; font-weight: 900; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
/* Tablets and up: each step sits beside its own interactive preview. */
@media (min-width: 700px) {
  .steps { grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 72px) clamp(24px, 4vw, 56px); align-items: center; max-width: none; margin-top: 48px; }
  .steps .step { margin-top: 0; }
  .steps .panel { width: 100%; max-width: 460px; justify-self: center; }
}
.qr-frame { position: relative; display: block; justify-self: center; width: min(240px, 70%); padding: 14px; border: 0; border-radius: 20px; font: inherit; background: var(--canvas); overflow: hidden; cursor: pointer; transition: box-shadow 300ms ease, transform 160ms ease; }
.qr-frame:hover { box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.18); }
.qr-frame:active { transform: scale(0.97); }
.qr-frame:focus-visible { outline: 3px solid rgba(242, 106, 27, 0.4); outline-offset: 2px; }
.qr-frame #qr { display: block; transition: opacity 300ms ease; }
.qr-frame::after { content: "✓"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; font-size: 44px; font-weight: 900; color: #fff; background: #2fa862; transform: scale(0); transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.qr-frame.is-scanned { box-shadow: 0 0 0 4px rgba(47, 168, 98, 0.35); }
.qr-frame.is-scanned #qr { opacity: 0.18; }
.qr-frame.is-scanned::after { transform: scale(1); }
.qr-hint { margin: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--orange-600); }
.qr-hint.is-ok { color: #1b7a43; }
.cart-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cart-foot strong { flex: 1; min-width: 150px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-foot [hidden] { display: none; }
.qr-frame svg { display: block; width: 100%; height: auto; }
.scan { display: none; }
.split-items { display: grid; gap: 8px; }
.split-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--canvas); font-size: 14px; }
.who { font-weight: 900; color: var(--orange-600); }
.cart-status { justify-self: start; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #1b7a43; background: #e6f6ec; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--canvas); }
.segment button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px; font: inherit; font-weight: 800; font-size: 13px; color: var(--muted); background: transparent; cursor: pointer; }
.segment button[aria-pressed="true"] { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.split-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ff8a45, var(--orange-600)); }
.split-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.note { margin: 0; color: var(--muted); font-size: 12.5px; }

/* --- Business --------------------------------------------------------------- */
.section-dark { color: #fff; background: radial-gradient(700px 360px at 15% 0%, rgba(242, 106, 27, 0.35), transparent 70%), #1b1b1f; }
.section-dark .section-head p { color: rgba(255, 255, 255, 0.72); }
.section-dark .kicker { color: #ffb27f; }
.features { display: grid; gap: 14px; margin: 34px 0; }
@media (min-width: 600px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }
.features article { padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.features b { font-size: 17px; }
.features p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.center { text-align: center; }

/* --- Premium inventory ------------------------------------------------------ */
.inv { background: radial-gradient(800px 420px at 90% 0%, var(--orange-50), transparent 70%), var(--canvas); }
.premium-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: var(--orange-600); }
.premium-tag::before { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c.6 4.4 3.6 7.4 8 8-4.4.6-7.4 3.6-8 8-.6-4.4-3.6-7.4-8-8 4.4-.6 7.4-3.6 8-8z' fill='%23f26a1b'/%3E%3C/svg%3E") center/contain no-repeat; }
.inv-benefits { display: grid; gap: 14px; margin: 34px 0 0; }
@media (min-width: 600px) { .inv-benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .inv-benefits { grid-template-columns: repeat(3, 1fr); } }
.inv-benefits article { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.inv-benefits article::before { content: ""; display: block; width: 34px; height: 5px; margin-bottom: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--orange), #ffb347); }
.inv-benefits b { font-size: 17px; }
.inv-benefits p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.inv-lead { max-width: 760px; margin: clamp(48px, 7vw, 88px) auto 26px; text-align: center; }
.inv-lead h3 { margin: 0 0 10px; font-size: clamp(24px, 3.6vw, 44px); line-height: 1.45; font-weight: 900; letter-spacing: -0.01em; }
.inv-lead p { margin: 0; color: var(--muted); font-size: 16px; }

.dash { display: grid; gap: 14px; padding: clamp(12px, 2vw, 22px); border-radius: 28px; box-shadow: 0 30px 80px rgba(20, 20, 30, 0.12); }
.dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); }
.dash-bar strong { flex: 1; min-width: 0; font-size: 15px; }
.dash-dots { display: inline-flex; gap: 6px; direction: ltr; }
.dash-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.dash-dots i:first-child { background: var(--orange); }
.dash-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .dash-grid { grid-template-columns: 1.1fr 0.9fr; } }
.dash-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dash-box { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--canvas); min-width: 0; }
.dash-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.badge:empty { display: none; }
.badge-ok { color: #1b7a43; background: #e6f6ec; }
.badge-warn { color: #a34a00; background: #ffe8cf; }
.badge-out { color: #a3231b; background: #fde4e1; }
.stock-list { display: grid; gap: 8px; }
.stock { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color 300ms ease, box-shadow 300ms ease; }
.stock.is-low { border-color: rgba(242, 106, 27, 0.5); }
.stock.is-hit { box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.16); }
.stock-name b { font-size: 14px; }
.stock-name small { display: block; color: var(--muted); font-size: 11.5px; }
.stock-qty { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.stock-qty .badge { margin-inline-start: 6px; }
.bar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--canvas); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #35b46b, #7fd39f); transform: scaleX(var(--f, 1)); transform-origin: right center; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.stock.is-low .bar i { background: linear-gradient(90deg, var(--orange), #ffb347); }
.stock.is-out .bar i { background: #e2574c; }
.link-btn { border: 0; padding: 4px 8px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; color: var(--orange-600); background: transparent; cursor: pointer; }
.link-btn:hover { background: var(--orange-50); }
.chip[disabled] { opacity: 0.45; cursor: not-allowed; }
.dash-use { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.recipe { display: grid; gap: 6px; }
.recipe-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line-strong); font-size: 14px; }
.recipe-row small { color: var(--muted); }
.recipe-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.recipe-sum div { padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.recipe-sum small { display: block; color: var(--muted); font-size: 12px; }
.recipe-sum b { font-size: 15px; font-variant-numeric: tabular-nums; }
.margin { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ff8a45, var(--orange-600)); }
.margin-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.margin-top b { font-size: 22px; font-variant-numeric: tabular-nums; }
.margin .bar { background: rgba(255, 255, 255, 0.28); }
.margin .bar i { background: #fff; }
.dash-tip { background: #fff; border: 1px solid rgba(242, 106, 27, 0.35); }
.dash-tip p { margin: 0; font-size: 14px; color: var(--ink-2); }
.inv-cta { display: grid; justify-items: center; gap: 10px; margin-top: 30px; text-align: center; }

/* --- Final call: an illustrated map of the places around you ---------------- */
.final-panel { position: relative; display: grid; place-items: center; min-height: clamp(520px, 50vw, 640px); padding: clamp(20px, 4vw, 56px); border-radius: 36px; overflow: hidden; background: #fdebd9; isolation: isolate; }
.map { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.map path { fill: none; stroke-linecap: round; }
.map .map-park { fill: #dff0d3; }
.map .map-water { stroke: #cfe6f5; stroke-width: 46; }
.map-road path { stroke: #fff; stroke-width: 12; }
.map-road-main path { stroke-width: 26; }
.final-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, rgba(253, 235, 217, 0.96) 35%, rgba(253, 235, 217, 0) 100%); }
.pins { position: absolute; inset: 0; }
.pin { position: absolute; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--ink); background: #fff; box-shadow: 0 10px 24px rgba(20, 20, 30, 0.14); }
.pin::after { content: ""; position: absolute; top: 100%; left: 50%; width: 12px; height: 12px; margin: -7px 0 0 -6px; border-radius: 0 0 4px 0; background: #fff; transform: rotate(45deg); }
.pin-1 { top: 13%; left: 9%; } .pin-2 { top: 20%; right: 10%; } .pin-3 { bottom: 16%; left: 16%; }
.pin-4 { bottom: 22%; right: 13%; } .pin-5 { top: 50%; left: 4%; } .pin-6 { top: 55%; right: 4%; }
.here { position: absolute; top: 12%; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--orange); border: 4px solid #fff; box-shadow: 0 0 0 0 rgba(242, 106, 27, 0.45); }
.final-inner { display: grid; justify-items: center; gap: 16px; width: min(100%, 520px); text-align: center; }
.final-inner img { width: 120px; height: auto; }
.final-inner h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.4; font-weight: 900; }
@media (max-width: 760px) {
  .pin { font-size: 12.5px; padding: 5px 11px; }
  .pin-1 { top: 7%; left: 6%; } .pin-2 { top: 13%; right: 6%; } .pin-3 { bottom: 8%; left: 8%; } .pin-4 { bottom: 14%; right: 7%; }
  .pin-5, .pin-6 { display: none; }
  .here { top: 4%; }
}

.foot { padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.foot img { height: 44px; width: 44px; object-fit: contain; }

/* --- /go and 404 ------------------------------------------------------------ */
.go-page { min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(700px 360px at 85% 0%, var(--orange-50), transparent 70%), #fff; }
.go-card { width: min(440px, calc(100% - 32px)); display: grid; justify-items: center; gap: 12px; padding: 34px 24px; text-align: center; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.go-card > img { height: 64px; width: 64px; object-fit: contain; }
.go-mascot { width: min(240px, 80%); height: auto; }
.go-card h1 { margin: 6px 0 0; font-size: 22px; font-weight: 900; }
.go-card p { margin: 0; color: var(--muted); }
.go-card #down, .go-card #checking { display: grid; justify-items: center; gap: 10px; }
.go-card [hidden] { display: none !important; }
.go-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--orange-50); border-top-color: var(--orange); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .spinner { animation-duration: 2s; } .btn, .chip { transition: none; } }

/* ============================================================================
   Scroll-driven motion. Only active when boot.js has set .motion on <html> (the
   visitor has not asked for reduced motion). app.js turns the scroll position into
   progress variables (--p per element, --h/--lift/--k/--c/--t for the hero) and the
   rules below turn those into transforms. Every variable falls back to its finished
   value, so content is fully visible if the script never runs.
   ========================================================================== */

/* Hero: pinned for about two screens of scrolling. svh keeps it steady when a phone's address bar hides. */
.motion .hero { height: 320vh; height: 320svh; }
@media (max-width: 700px) { .motion .hero { height: 260vh; height: 260svh; } }
.motion .hero-stage { --ps: 1; --rise: 47vh; --rise: 47svh; display: block; position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
@media (max-height: 700px) { .motion .hero-stage { --ps: 0.86; } }
@media (max-height: 600px) { .motion .hero-stage { --ps: 0.72; } }
@media (min-height: 900px) and (min-width: 920px) { .motion .hero-stage { --ps: 1.14; } }
.motion .hero-copy { position: absolute; z-index: 2; top: clamp(84px, 15svh, 200px); inset-inline: 16px; margin-inline: auto; opacity: calc(1 - var(--h, 0)); transform: translate3d(0, calc(var(--h, 0) * -70px), 0) scale(calc(1 - var(--h, 0) * 0.06)); will-change: transform, opacity; }
.motion .hero-copy.is-gone { visibility: hidden; }
.motion .hero h1 .w { animation: word-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.motion .hero h1 .w:nth-of-type(2) { animation-delay: 90ms; }
.motion .hero h1 .w:nth-of-type(3) { animation-delay: 220ms; }
.motion .hero h1 .w:nth-of-type(4) { animation-delay: 310ms; }
.motion .pill, .motion .hero-copy > p, .motion .hero-actions { animation: soft-in 800ms 450ms ease both; }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em) rotate(4deg); } }
@keyframes soft-in { from { opacity: 0; transform: translateY(14px); } }
.motion .scroll-hint { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--muted); animation: soft-in 800ms 900ms ease both, nudge 1.8s 1.8s ease-in-out infinite; }
.motion .scroll-hint::after { content: " ↓"; }
@keyframes nudge { 50% { transform: translateY(5px); } }
@media (max-height: 720px) { .motion .scroll-hint { display: none; } }
.motion .phone-wrap { position: absolute; z-index: 1; left: 50%; top: 57%; transform: translate3d(-50%, calc(-50% + var(--lift, 0) * var(--rise)), 0) scale(calc(var(--ps) * (1 - var(--lift, 0) * 0.08))); will-change: transform; }
.motion .phone-card { opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 26px), 0) scale(calc(0.94 + var(--k, 1) * 0.06)); }
.motion .phone-search.is-typing span::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: var(--orange); animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.motion .hero-tomato { opacity: var(--t, 1); transform: translate3d(calc((1 - var(--t, 1)) * -140px), 0, 0) rotate(calc((1 - var(--t, 1)) * -220deg)); }
/* The three promises become captions that swap above the phone. */
.motion .hero-points { display: block; position: absolute; z-index: 2; top: clamp(92px, 13.5svh, 150px); inset-inline: 16px; }
.motion .hero-points li { position: absolute; top: 0; inset-inline: 0; opacity: var(--c, 0); transform: translate3d(0, calc((1 - var(--c, 0)) * 18px), 0); color: var(--ink); font-size: clamp(21px, 3.4vw, 42px); line-height: 1.45; font-weight: 900; }
.motion .hero-points li:last-child { opacity: var(--c, 1); }

/* Statement: pinned; words light up in reading order and all of them are lit before it lets go. */
.motion .say { height: 220vh; height: 220svh; padding: 0; }
@media (max-width: 700px) { .motion .say { height: 190vh; height: 190svh; } }
.motion .say-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.motion .say .w { color: rgba(29, 29, 31, 0.13); transition: color 320ms ease; }
.motion .say .w.on { color: var(--ink); }

/* Content rising into view. It is fully opaque by the time it clears the bottom edge of the screen. */
.motion [data-reveal] { opacity: calc(var(--p, 1) * 2.4); transform: translate3d(0, calc((1 - var(--p, 1)) * 44px), 0); }
.motion .tilt-wrap { perspective: 1200px; }
.motion .tilt-wrap > [data-reveal] { transform: rotateX(calc((1 - var(--p, 1)) * 24deg)) scale(calc(0.88 + var(--p, 1) * 0.12)); transform-origin: center top; }
.motion .dash[data-reveal] { transform: translate3d(0, calc((1 - var(--p, 1)) * 60px), 0) scale(calc(0.93 + var(--p, 1) * 0.07)); transform-origin: center top; }
.motion [data-reveal-children] > * { --q: clamp(0, var(--p, 1) * 2.6 - var(--i, 0) * 0.26, 1); opacity: calc(var(--q) * 2); transform: translate3d(0, calc((1 - var(--q)) * 50px), 0); }
.motion [data-reveal-children] > :nth-child(2) { --i: 1; }
.motion [data-reveal-children] > :nth-child(3) { --i: 2; }
.motion [data-reveal-children] > :nth-child(4) { --i: 3; }
.motion [data-reveal-children] > :nth-child(5) { --i: 4; }
.motion [data-reveal-children] > :nth-child(6) { --i: 5; }
/* Craving words slide sideways with the scroll. */
.motion .row-a { transform: translate3d(calc(var(--p, 0) * -24%), 0, 0); }
.motion .row-b { transform: translate3d(calc(-26% + var(--p, 0) * 24%), 0, 0); }

/* Feedback for things the visitor does. */
.motion .result { animation: pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; animation-delay: calc(var(--i, 0) * 45ms); }
.motion .menu-row, .motion .recipe > * { animation: soft-in 320ms ease both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes pop { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
.motion .scan { display: block; position: absolute; inset-inline: 10px; top: 12px; height: 3px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 18px 4px rgba(242, 106, 27, 0.5); animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { to { top: calc(100% - 15px); } }
.motion .qr-frame.is-scanning .scan { animation: scan 0.55s ease-in-out 2 alternate; }
.motion .qr-frame.is-scanned .scan { display: none; }
.motion #cart-items .split-row.is-new, .motion .cart-status { animation: pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.motion .dash:not(.is-live) .bar i { transform: scaleX(0); }

@media (min-width: 700px) {
  /* Tablets and up: the preview stays pinned and swaps while the three steps scroll past.
     The current step is marked by its number, not by dimming the others. */
  .motion .steps { align-items: stretch; gap: 0 clamp(24px, 4vw, 56px); margin-top: 0; }
  .motion .steps-text { display: block; padding-block: 10vh; padding-block: 10svh; }
  .motion .steps .step { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 72vh; min-height: 72svh; }
  .motion .step-n { transition: background-color 300ms ease, color 300ms ease, transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .motion .step:not(.is-active) .step-n { color: var(--ink-2); background: rgba(20, 20, 30, 0.1); }
  .motion .step.is-active .step-n { transform: scale(1.15); }
  .motion .steps-visual { display: grid; place-items: center; position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; }
  .motion .steps .panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 28px, 0) scale(0.95); transition: opacity 450ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 450ms; }
  .motion .steps .panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* Business: the dark section opens up from an inset rounded card to full bleed. */
.motion .section-dark { clip-path: inset(0 calc((1 - var(--p, 1)) * 6vw) round calc((1 - var(--p, 1)) * 56px)); }

/* Final: the map panel grows into place, pins drop in one by one and the tomato hops in. */
.motion .final-panel[data-reveal] { opacity: 1; transform: scale(calc(0.86 + var(--p, 1) * 0.14)); }
.motion .pin { --q: clamp(0, var(--p, 1) * 3 - 1.1 - var(--i, 0) * 0.14, 1); opacity: calc(var(--q) * 2); transform: translate3d(0, calc((1 - var(--q)) * -46px), 0) scale(calc(0.6 + var(--q) * 0.4)); }
.motion .pin-2 { --i: 1; } .motion .pin-3 { --i: 2; } .motion .pin-4 { --i: 3; } .motion .pin-5 { --i: 4; } .motion .pin-6 { --i: 5; }
.motion .here { animation: ping 2s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 22px rgba(242, 106, 27, 0); } }
.motion .final-inner img { transform: translate3d(0, calc((1 - var(--p, 1)) * 70px), 0) rotate(calc((1 - var(--p, 1)) * -50deg)); }
.motion .bob { display: block; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* Phones: skip the two effects that repaint large areas on every scrolled frame. */
@media (max-width: 700px) {
  .top { background: rgba(255, 255, 255, 0.97); backdrop-filter: none; }
  .motion .section-dark { clip-path: none; }
}

/* Native scroll timelines (touch screens only; boot.js sets .tl). There the scroll-linked transforms
   and fades below replace the script-driven ones above. They run on the compositor, exactly in step with a
   finger scroll, and need no script per frame (app.js then only handles the typed word, the lit
   words and the current step). Keyframe percentages are the same progress points app.js uses. */
@supports (animation-timeline: view()) {
  .motion.tl .hero { view-timeline: --hero block; }
  .motion.tl .hero-copy, .motion.tl .phone-wrap, .motion.tl .phone-card, .motion.tl .hero-points li, .motion.tl .hero-tomato { animation: hero-copy linear both; animation-timeline: --hero; animation-range: contain 0% contain 100%; }
  @keyframes hero-copy { from { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 20%, to { opacity: 0; transform: translate3d(0, -70px, 0) scale(0.94); } }
  .motion.tl .phone-wrap { animation-name: hero-phone; }
  @keyframes hero-phone { from { transform: translate3d(-50%, calc(-50% + var(--rise)), 0) scale(calc(var(--ps) * 0.92)); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 30%, to { transform: translate3d(-50%, -50%, 0) scale(var(--ps)); } }
  .motion.tl .phone-card { animation-name: card-1; }
  .motion.tl .phone-card + .phone-card { animation-name: card-2; }
  .motion.tl .phone-card + .phone-card + .phone-card { animation-name: card-3; }
  @keyframes card-1 { from, 36% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); } 44%, to { opacity: 1; transform: none; } }
  @keyframes card-2 { from, 41% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); } 49%, to { opacity: 1; transform: none; } }
  @keyframes card-3 { from, 46% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); } 54%, to { opacity: 1; transform: none; } }
  .motion.tl .hero-points li:nth-child(1) { animation-name: cap-1; }
  .motion.tl .hero-points li:nth-child(2) { animation-name: cap-2; }
  .motion.tl .hero-points li:nth-child(3) { animation-name: cap-3; }
  @keyframes cap-1 { from, 30% { opacity: 0; transform: translate3d(0, 18px, 0); } 35%, 47% { opacity: 1; transform: none; } 52%, to { opacity: 0; transform: translate3d(0, 18px, 0); } }
  @keyframes cap-2 { from, 52% { opacity: 0; transform: translate3d(0, 18px, 0); } 57%, 69% { opacity: 1; transform: none; } 74%, to { opacity: 0; transform: translate3d(0, 18px, 0); } }
  @keyframes cap-3 { from, 74% { opacity: 0; transform: translate3d(0, 18px, 0); } 79%, to { opacity: 1; transform: none; } }
  .motion.tl .hero-tomato { animation-name: hero-tomato; }
  @keyframes hero-tomato { from, 70% { opacity: 0; transform: translate3d(-140px, 0, 0) rotate(-220deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 88%, to { opacity: 1; transform: none; } }

  .motion.tl [data-reveal] { animation: rise linear both; animation-timeline: view(); animation-range: cover 0% cover 30svh; }
  .motion.tl [data-reveal-children] > * { animation: rise linear both; animation-timeline: view(); animation-range: cover calc(var(--i, 0) * 3svh) cover calc(34svh + var(--i, 0) * 3svh); }
  @keyframes rise { from { opacity: 0; transform: translate3d(0, 44px, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
  .motion.tl .tilt-wrap > [data-reveal] { animation-name: tilt-in; animation-range: cover 0% cover 50svh; }
  @keyframes tilt-in { from { opacity: 0; transform: rotateX(24deg) scale(0.88); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
  .motion.tl .dash[data-reveal] { animation-name: dash-in; animation-range: cover 0% cover 50svh; }
  @keyframes dash-in { from { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.93); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }

  .motion.tl .marquee { view-timeline: --mq block; }
  .motion.tl .row-a, .motion.tl .row-b { animation: mq-a linear both; animation-timeline: --mq; }
  .motion.tl .row-b { animation-name: mq-b; }
  @keyframes mq-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-24%, 0, 0); } }
  @keyframes mq-b { from { transform: translate3d(-26%, 0, 0); } to { transform: translate3d(-2%, 0, 0); } }

  @media (min-width: 701px) {
    .motion.tl .section-dark { animation: open-up linear both; animation-timeline: view(); animation-range: cover 0% cover 70svh; }
    @keyframes open-up { from { clip-path: inset(0 6vw round 56px); } to { clip-path: inset(0 0 round 0); } }
  }

  .motion.tl .final-panel[data-reveal] { view-timeline: --final block; animation: grow-in linear both; animation-timeline: --final; animation-range: cover 0% cover 75svh; }
  @keyframes grow-in { from { transform: scale(0.86); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } to { transform: none; } }
  .motion.tl .pin { animation: pin-in linear both; animation-timeline: --final; animation-range: cover calc(27svh + var(--i, 0) * 3.5svh) cover calc(52svh + var(--i, 0) * 3.5svh); }
  @keyframes pin-in { from { opacity: 0; transform: translate3d(0, -46px, 0) scale(0.6); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
  .motion.tl .final-inner img { animation: hop-in linear both; animation-timeline: --final; animation-range: cover 0% cover 75svh; }
  @keyframes hop-in { from { transform: translate3d(0, 70px, 0) rotate(-50deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } to { transform: none; } }
}

/* Reading progress: pure CSS where the browser supports scroll timelines, otherwise hidden. */
@supports (animation-timeline: scroll()) {
  .motion .progress { display: block; position: fixed; top: 0; inset-inline: 0; z-index: 40; height: 3px; background: var(--orange); transform-origin: right center; animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Membership request dialog */
.join { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(20, 20, 30, 0.25); }
.join::backdrop { background: rgba(20, 20, 30, 0.45); backdrop-filter: blur(3px); }
.join-form { display: grid; gap: 14px; padding: 22px; }
.join-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.join-head h2 { margin: 0; font-size: 20px; }
.join-close { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.join-lead { margin: 0; color: var(--muted, #5b5b66); font-size: 14px; line-height: 1.9; }
.join-field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.join-field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 13px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
.join-field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.14); }
.join-err { color: #c0362c; font-weight: 600; font-size: 12.5px; }
.join-err:empty { display: none; }
.join-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.join-status { margin: 0; font-size: 14px; line-height: 1.8; }
.join-status:empty { display: none; }
.join-status.is-ok { padding: 12px 14px; border-radius: 13px; color: #11643a; background: #e8f7ee; }
.join-status.is-error { padding: 12px 14px; border-radius: 13px; color: #9b2c22; background: #fdecea; }
.join-submit { width: 100%; }
.join-member { justify-self: center; color: var(--orange-600); font-weight: 700; font-size: 14px; text-decoration: none; }