/* Dishista — marketing site. Fresh, tactile look: warm cream, tomato & saffron, soft "plastic" depth.
   Type: Fraunces (soft axis) + Inter. Palette matches the app icon. */

:root {
  --bg: #fff8f1;
  --bg-2: #fff1e4;
  --surface: #ffffff;
  --surface-2: #fff6ee;
  --text: #1e1712;
  --text-2: #6b5a4e;
  --muted: #a08f82;
  --line: rgba(92, 48, 18, 0.09);
  --tomato: #ee4524;
  --tomato-hi: #ff6b3d;
  --tomato-ink: #c92f17;
  --saffron: #ffb547;
  --basil: #2f9e5b;
  --peach: #ffd9c2;
  --brand: linear-gradient(135deg, #ff6b3d 0%, #ee4524 55%, #c92f17 100%);
  --hl: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(92, 48, 18, 0.05);
  --sh-1: 0 1px 2px rgba(92, 48, 18, 0.06), 0 6px 16px -6px rgba(92, 48, 18, 0.14);
  --sh-2: 0 2px 4px rgba(92, 48, 18, 0.05), 0 18px 40px -14px rgba(92, 48, 18, 0.22), 0 44px 80px -36px rgba(92, 48, 18, 0.3);
  --glass: rgba(255, 255, 255, 0.62);
  --radius: 28px;
  --maxw: 1200px;
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #15100d; --bg-2: #1c1511; --surface: #211915; --surface-2: #2a201a; --text: #f7efe7; --text-2: #cbb9ab;
    --muted: #8e7d70; --line: rgba(255, 236, 220, 0.09); --peach: #4a2a1c;
    --hl: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px -14px rgba(0, 0, 0, 0.6), 0 44px 80px -36px rgba(0, 0, 0, 0.7);
    --glass: rgba(33, 25, 21, 0.62);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #15100d; --bg-2: #1c1511; --surface: #211915; --surface-2: #2a201a; --text: #f7efe7; --text-2: #cbb9ab;
  --muted: #8e7d70; --line: rgba(255, 236, 220, 0.09); --peach: #4a2a1c;
  --hl: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px -14px rgba(0, 0, 0, 0.6), 0 44px 80px -36px rgba(0, 0, 0, 0.7);
  --glass: rgba(33, 25, 21, 0.62);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[lang='zh-Hans'] body { font-family: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }
html[lang='ko'] body { font-family: 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
img { max-width: 100%; display: block; }
a { color: var(--tomato); text-underline-offset: 3px; }
a:hover { color: var(--tomato-ink); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0;
  font-variation-settings: 'SOFT' 100, 'opsz' 96;
}
html[lang='zh-Hans'] :is(h1, h2, h3), html[lang='ko'] :is(h1, h2, h3) { letter-spacing: -0.01em; line-height: 1.2; }
h2 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; font-variation-settings: 'SOFT' 100, 'opsz' 30; }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font: 800 0.76rem/1 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tomato);
}
.kicker::before { content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--brand); }
.section-head.center .kicker { justify-self: center; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: var(--text-2); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.i3d { width: var(--s, 64px); height: auto; filter: drop-shadow(0 10px 14px rgba(92, 48, 18, 0.22)); }

/* ── Reveal on scroll ── */
[data-reveal] { opacity: 0; transform: translateY(30px) scale(0.985); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay='1'] { transition-delay: 0.08s; } [data-reveal-delay='2'] { transition-delay: 0.16s; }
[data-reveal-delay='3'] { transition-delay: 0.24s; } [data-reveal-delay='4'] { transition-delay: 0.32s; }

/* ── Header: floating glass bar ── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: 14px; pointer-events: none; }
.site-header .bar {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px;
  max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto; padding: 0 10px 0 14px; border-radius: 22px;
  background: var(--glass); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: var(--sh-1), var(--hl);
  transition: box-shadow 0.3s, background 0.3s;
}
@media (max-width: 1240px) { .site-header .bar { margin: 0 var(--gutter); } }
.site-header.scrolled .bar { box-shadow: var(--sh-2), var(--hl); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 4px 10px -2px rgba(201, 47, 23, 0.4); }
.brand span { font: 700 1.55rem/1 'Fraunces', serif; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 100; }
.brand em { font-style: normal; color: var(--tomato); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav > a { color: var(--text); opacity: 0.78; text-decoration: none; font-weight: 600; font-size: 0.93rem; padding: 9px 12px; border-radius: 12px; }
.nav > a:hover { opacity: 1; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav .get {
  opacity: 1; margin-left: 4px; padding: 11px 18px; border-radius: 14px; color: #fff; background: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(201, 47, 23, 0.7);
}
.nav .get:hover { color: #fff; background: var(--brand); filter: brightness(1.06); }
@media (max-width: 900px) { .nav .hide-md { display: none; } }
@media (max-width: 520px) { .nav .get { display: none; } .brand span { font-size: 1.4rem; } }

/* Language switcher */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-radius: 12px; font-weight: 700; font-size: 0.86rem; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 16px; height: 16px; }
.flag { display: inline-block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.15); flex: none; }
.lang summary .flag { width: 18px; height: 18px; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 10px); list-style: none; margin: 0; padding: 8px; min-width: 200px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-2);
}
.lang li a span { flex: 1; }
.lang li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; color: var(--text); text-decoration: none; font-size: 0.95rem; }
.lang li a:hover { background: var(--surface-2); }
.lang li a[aria-current='true'] { color: var(--tomato); font-weight: 700; }
.lang li a small { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }

/* ── Store buttons ── */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store {
  position: relative; display: inline-flex; align-items: center; gap: 11px; height: 60px; padding: 0 22px 0 17px; border-radius: 18px;
  color: #fff; text-decoration: none; background: linear-gradient(180deg, #2c2623 0%, #0f0c0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 6px rgba(0, 0, 0, 0.45), 0 14px 28px -12px rgba(30, 12, 4, 0.65), 0 2px 4px rgba(30, 12, 4, 0.2);
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s;
}
.store:hover { color: #fff; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 6px rgba(0,0,0,.45), 0 22px 36px -14px rgba(30,12,4,.7), 0 2px 4px rgba(30,12,4,.2); }
.store:active { transform: translateY(0) scale(0.98); }
.store .logo { width: 27px; height: 27px; flex: none; }
.store.google .logo { width: 24px; height: 26px; }
.store .txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.store .txt small { font: 500 0.7rem/1.2 -apple-system, 'Inter', sans-serif; opacity: 0.86; letter-spacing: 0.01em; }
.store .txt b { font: 600 1.32rem/1.1 -apple-system, 'SF Pro Display', 'Inter', sans-serif; letter-spacing: -0.02em; }
.store.name-first .txt { flex-direction: column-reverse; }
.store .soon {
  position: absolute; top: -10px; right: -10px; padding: 4px 9px; border-radius: 999px; font: 800 0.62rem/1.3 'Inter', sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase; color: #3a1d06; background: linear-gradient(180deg, #ffd27a, #ffaa2c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 12px -4px rgba(150, 70, 0, 0.5); white-space: nowrap; transform: rotate(5deg);
}

/* Perks chips */
.perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.perks li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 8px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  background: var(--surface); box-shadow: var(--sh-1), var(--hl);
}
.perks li svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #46c07a, #2f9e5b); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.perks.light li { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.perks.light li svg { background: #fff; color: var(--tomato); }

/* ── Hero ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero .blobs { position: absolute; inset: -10%; z-index: -1; filter: blur(60px); opacity: 0.95; }
.hero .blobs i { position: absolute; border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; }
.hero .blobs i:nth-child(1) { width: 46vw; height: 46vw; right: 2%; top: 0; background: radial-gradient(circle, rgba(255, 181, 71, 0.75), transparent 65%); }
.hero .blobs i:nth-child(2) { width: 40vw; height: 40vw; right: 18%; bottom: 0; background: radial-gradient(circle, rgba(255, 107, 61, 0.45), transparent 65%); animation-delay: -6s; }
.hero .blobs i:nth-child(3) { width: 36vw; height: 36vw; left: -4%; bottom: 4%; background: radial-gradient(circle, rgba(70, 192, 122, 0.28), transparent 65%); animation-delay: -12s; }
@keyframes drift { to { transform: translate(4vw, -3vw) scale(1.12); } }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 28px; min-height: 100vh; min-height: 100svh; padding-top: 110px; padding-bottom: 72px; }
.hero .copy { position: relative; z-index: 2; display: grid; gap: 24px; align-content: center; }
.pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(10px); font-size: 0.88rem; font-weight: 700; box-shadow: var(--sh-1), var(--hl);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3cc173; flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60,193,115,.55); } 70% { box-shadow: 0 0 0 11px rgba(60,193,115,0); } 100% { box-shadow: 0 0 0 0 rgba(60,193,115,0); } }
.hero h1 { font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -0.045em; line-height: 0.98; font-variation-settings: 'SOFT' 100, 'opsz' 144; }
html[lang='zh-Hans'] .hero h1, html[lang='ko'] .hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.3rem); line-height: 1.12; }
.hero h1 .rotator { display: inline-grid; vertical-align: bottom; }
.hero h1 .rotator > span {
  grid-area: 1 / 1; font-style: italic; font-weight: 700; white-space: nowrap; padding-right: 0.08em;
  background: linear-gradient(100deg, #ff7a3d 0%, #ee4524 45%, #ffb547 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(0.4em) rotate(2deg); filter: blur(6px);
  transition: opacity 0.55s, transform 0.65s cubic-bezier(.2,.8,.2,1), filter 0.55s;
}
.hero h1 .rotator > span.on { opacity: 1; transform: none; filter: none; }
.hero h1 .line2 { display: block; }
.hero .subtitle { font-size: clamp(1.08rem, 1.55vw, 1.28rem); color: var(--text-2); max-width: 33em; }
.hero .status { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.93rem; font-weight: 500; }

.stage { position: relative; height: min(80vh, 740px); min-height: 540px; }
.globe { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 0.8s ease; }
.globe.ready { opacity: 1; }
.globe-pins { position: absolute; inset: -60px; pointer-events: none; z-index: 1; }
.gpin {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 8px 16px -6px rgba(92, 48, 18, 0.5), inset 0 1px 0 rgba(255,255,255,.9);
  font: 19px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; will-change: transform, opacity;
}
.gpin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 2px; background: inherit; transform: rotate(45deg); z-index: -1; }
.globe:active { cursor: grabbing; }
.globe-hint { position: absolute; left: 30%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); pointer-events: none; }
.globe-hint svg { width: 16px; height: 16px; }
.stage .hero-phone { position: absolute; right: 0; bottom: 4%; z-index: 3; width: clamp(210px, 19.5vw, 282px); }
.hero-phone, .float-chip, .stage .float { will-change: transform; }
.stage .hero-phone { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0) rotate(calc(5deg - var(--sr, 0deg))); }
.float-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  color: var(--text); font-weight: 700; font-size: 0.92rem; box-shadow: var(--sh-2), var(--hl); white-space: nowrap;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
}
.float-chip > span { display: grid; line-height: 1.15; }
.float-chip small { font-size: 0.7rem; font-weight: 600; color: var(--text-2); }
.float-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.float-chip.c1 { left: -4%; top: 20%; } .float-chip.c2 { left: 4%; bottom: 10%; } .float-chip.c3 { right: 2%; top: 0; }
.stage .float { position: absolute; z-index: 2; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.stage .f1 { --s: 86px; left: 46%; top: 2%; }
.stage .f2 { --s: 72px; left: 0; top: 52%; z-index: 4; }
.stage .f3 { --s: 54px; left: 50%; bottom: 2%; z-index: 4; }
.stage .float, .float-chip { animation: bob 7s ease-in-out infinite; }
.stage .f2, .float-chip.c2 { animation-delay: -2.5s; } .stage .f3, .float-chip.c3 { animation-delay: -4.5s; }
@keyframes bob { 50% { translate: 0 -12px; } }
/* Tablets (portrait) and phones: one centred column, the globe + phone scene below the copy. */
@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 124px; padding-bottom: 64px; gap: 8px; text-align: center; }
  .hero .copy { justify-items: center; gap: 22px; }
  .hero .pill { justify-self: center; }
  .hero .subtitle { margin: 0 auto; }
  .hero h1 .rotator { display: grid; justify-items: center; }
  .perks, .stores { justify-content: center; }
  .stage { width: min(760px, 100%); margin: 0 auto; height: clamp(440px, 72vw, 660px); min-height: 0; }
  .stage .hero-phone { width: clamp(180px, 30vw, 270px); right: 4%; bottom: 2%; }
  .float-chip.c1 { left: 0; top: 10%; } .float-chip.c2 { left: 4%; bottom: 6%; } .float-chip.c3 { right: 0; top: -2%; }
  .stage .f1 { left: 44%; top: -2%; } .stage .f3 { left: 50%; bottom: 0; }
  .globe-hint { left: 36%; bottom: -6px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .hero .wrap { padding-top: 104px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .hero .subtitle { font-size: 1.04rem; }
  .pill { font-size: 0.82rem; }
  .perks { gap: 6px; } .perks li { font-size: 0.84rem; padding: 6px 11px 6px 7px; }
  .stores { gap: 10px; }
  .store { height: 54px; padding: 0 15px 0 12px; gap: 9px; border-radius: 16px; }
  .store .txt b { font-size: 1.12rem; } .store .txt small { font-size: 0.64rem; } .store .logo { width: 23px; height: 23px; }
  .stage { height: 118vw; max-height: 500px; margin: 0 calc(var(--gutter) * -1); width: auto; }
  .stage .hero-phone { width: 44vw; max-width: 200px; right: 5%; bottom: 3%; }
  .float-chip { font-size: 0.78rem; padding: 5px 12px 5px 5px; gap: 8px; }
  .float-chip img { width: 34px; height: 34px; }
  .float-chip small { font-size: 0.64rem; }
  .float-chip.c1 { left: 4%; top: 6%; } .float-chip.c2 { left: 4%; bottom: 8%; }
  .float-chip.c3, .stage .f3 { display: none; }
  .stage .f1 { --s: 58px; left: 50%; top: 0; }
  .globe-hint { left: 30%; bottom: 0; }
  h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .section-head { margin-bottom: 36px; }
  .tile { padding: 22px; } .clay { width: 70px; height: 70px; border-radius: 22px; } .clay .i3d { --s: 50px; }
  .tile.big h3 { font-size: 1.7rem; }
  .marquee, .bento, .chef, .plans, .cuisines, .cta { padding-top: 80px; padding-bottom: 80px; }
  .price { padding: 84px 0; }
  .stats ul { padding: 22px 16px; border-radius: 26px; }
  .cta .panel { border-radius: 32px; padding: 36px 22px 0; }
  .receipt .paper { padding: 24px 22px 40px; }
}

/* ── iPhone 16 Pro (Black Titanium). Real proportions: 402×874 pt screen, ~3.35 % border per side
   (0.8 % titanium band + 2.55 % black bezel), screen corner radius 13.7 % of its width.
   .phone is the size container, so every cqi below is a share of the phone's own width. ── */
.phone { position: relative; container-type: inline-size; aspect-ratio: 100 / 209.55; }
.phone .body {
  position: absolute; inset: 0; border-radius: 16.15cqi; padding: 0.8cqi;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 94%, rgba(255,255,255,.18) 100%),
    linear-gradient(90deg, #5a5a5d 0%, #2b2b2e 2.2%, #1b1b1d 50%, #2b2b2e 97.8%, #5a5a5d 100%);
  box-shadow:
    inset 0 0 0 0.12cqi rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 18px 28px -16px rgba(20, 12, 8, 0.45),
    0 48px 80px -36px rgba(20, 12, 8, 0.5);
}
.phone .bezel { position: relative; height: 100%; border-radius: 15.35cqi; padding: 2.55cqi; background: #000; box-shadow: inset 0 0 0 0.25cqi #0d0d0e; }
.phone .screen { position: relative; height: 100%; border-radius: 12.8cqi; overflow: hidden; background: #000; transform: translateZ(0); isolation: isolate; }
.phone .screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1), clip-path 0.9s cubic-bezier(.65,0,.25,1);
}
.phone .screen img:not(.on) { opacity: 0; }
.phone .glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 22%);
  box-shadow: inset 0 0 0 0.2cqi rgba(255,255,255,.05);
}
.phone .b { position: absolute; width: 0.75cqi; border-radius: 0.4cqi; background: linear-gradient(90deg, #0e0e0f 0%, #4b4b4e 50%, #1d1d1f 100%); }
.phone .action { left: -0.6cqi; top: 18%; height: 6%; }
.phone .vol-up { left: -0.6cqi; top: 27%; height: 10.5%; }
.phone .vol-down { left: -0.6cqi; top: 39.5%; height: 10.5%; }
.phone .power { right: -0.6cqi; top: 29.5%; height: 16%; transform: scaleX(-1); }
.phone .camera { right: -0.35cqi; top: 61%; height: 8.5%; width: 0.5cqi; background: linear-gradient(90deg, #232325, #0a0a0b); }

/* ── Food mist: soft, blurred hints of dishes behind some sections ── */
.mist {
  position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  filter: blur(var(--blur, 22px)) saturate(1.25); opacity: var(--o, 0.4);
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%);
}
:root[data-theme='dark'] .mist { opacity: calc(var(--o, 0.4) * 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .mist { opacity: calc(var(--o, 0.4) * 0.7); } }
.m-hero-1 { width: 520px; left: -170px; top: 52%; --blur: 26px; --o: 0.42; }
.m-hero-2 { width: 380px; right: 34%; top: -150px; --blur: 30px; --o: 0.3; }
.m-story { width: 560px; right: -200px; top: 18%; --blur: 34px; --o: 0.3; }
.m-chef { width: 460px; left: -180px; top: 8%; --blur: 26px; --o: 0.34; }
.m-price { width: 520px; right: -160px; bottom: -160px; --blur: 28px; --o: 0.32; }
.m-cuisines-1 { width: 420px; left: -160px; top: -60px; --blur: 30px; --o: 0.3; }
.m-cuisines-2 { width: 360px; right: -120px; bottom: -40px; --blur: 30px; --o: 0.28; }
.chef, .price, .cuisines { position: relative; overflow: clip; }
.story { position: relative; }
.story > .wrap, .chef > .wrap, .price > .wrap, .cuisines > .wrap { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .mist { --blur: 20px; }
  .m-hero-1 { width: 320px; left: -140px; top: 60%; } .m-hero-2 { width: 260px; right: -60px; top: -90px; }
  .m-story, .m-chef, .m-price, .m-cuisines-1, .m-cuisines-2 { width: 300px; }
}

/* ── Stats ── */
.stats { position: relative; z-index: 3; margin-top: -40px; }
.stats ul {
  list-style: none; margin: 0; padding: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--surface); border-radius: 32px; box-shadow: var(--sh-2), var(--hl);
}
.stats li { text-align: center; display: grid; gap: 4px; }
.stats b { font: 700 clamp(2.2rem, 4.2vw, 3.2rem)/1 'Fraunces', serif; font-variation-settings: 'SOFT' 100; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--text-2); font-size: 0.95rem; font-weight: 600; }
@media (max-width: 640px) { .stats ul { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }

/* ── Marquee ── */
.marquee { padding: 120px 0 80px; overflow: hidden; }
.track { display: flex; gap: 20px; width: max-content; animation: slide 60s linear infinite; padding: 14px 0 22px; }
.track.reverse { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.dish { position: relative; width: 236px; height: 300px; margin: 0; border-radius: 30px; overflow: hidden; flex: none; box-shadow: var(--sh-2); }
.dish img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.dish:hover img { transform: scale(1.07); }
.dish figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: grid; gap: 1px; padding: 10px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  color: #1e1712; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.dish figcaption small { font-size: 0.74rem; font-weight: 700; color: #6b5a4e; }
.dish figcaption strong { font: 700 1.08rem/1.15 'Fraunces', serif; font-variation-settings: 'SOFT' 100; }
@media (max-width: 520px) { .dish { width: 184px; height: 236px; } }

/* ── Scrollytelling ── */
.story { padding: 60px 0 100px; }
.story .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.story .sticky { position: sticky; top: 11vh; height: 78vh; display: grid; place-items: center; }
.story .sticky { perspective: 1600px; }
.story .stage3d { position: relative; transform-style: preserve-3d; will-change: transform; }
.story .sticky .phone { width: min(330px, calc(76vh / 2.0955)); }
/* Screens wipe in from the bottom like an app switching views. */
.story .sticky .screen img { clip-path: inset(100% 0 0 0); transform: scale(1.08); opacity: 1; }
.story .sticky .screen img.on { clip-path: inset(0 0 0 0); transform: none; }
.story .sticky .screen img.past { clip-path: inset(0 0 0 0); transform: scale(0.94); opacity: 0; }
.callouts { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.co {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: var(--sh-2), var(--hl); white-space: nowrap; color: var(--text);
  opacity: 0; transform: translate3d(var(--dx, 0), 24px, 60px) scale(0.85);
  transition: opacity 0.45s ease, transform 0.75s cubic-bezier(.2,.9,.25,1.35);
}
.callouts.on .co { opacity: 1; transform: translate3d(0, calc(var(--local, 0) * -46px), 60px) scale(1); }
.callouts.on .co.b { transition-delay: 0.14s; transform: translate3d(0, calc(var(--local, 0) * 38px), 90px) scale(1); }
.co.a { left: -46%; top: 18%; --dx: 40px; }
.co.b { right: -44%; bottom: 20%; --dx: -40px; }
.co b { font-weight: 800; }
.co small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-2); }
.co-dish > img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.co-dish span { display: grid; line-height: 1.2; }
.co-dish b { font: 700 1rem/1.2 'Fraunces', serif; font-variation-settings: 'SOFT' 100; }
.co-dish small .flag { width: 13px; height: 13px; vertical-align: -2px; }
.co-stat { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 18px; }
.co-stat b { font: 700 2rem/1 'Fraunces', serif; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-stat span { font-size: 0.82rem; font-weight: 700; color: var(--text-2); }
.co-flags { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; font-weight: 600; font-size: 0.88rem; }
.co-flags .flags { display: flex; }
.co-flags .flags img { width: 28px; height: 28px; border-radius: 50%; margin-right: -3px; box-shadow: 0 0 0 2px var(--surface); }
.co-bubble { padding: 12px 16px; border-radius: 20px 20px 20px 6px; color: #fff; font-weight: 700; background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -12px rgba(201,47,23,.7); }
.co-plan { color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 30px -14px var(--c1); }
.co-plan span { display: grid; } .co-plan small { color: rgba(255,255,255,.85); }
.co-plan .i3d { --s: 40px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.co-kcal svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.co-kcal circle { fill: none; stroke: color-mix(in srgb, var(--text) 10%, transparent); stroke-width: 5; }
.co-kcal circle.arc { stroke: #3cc173; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) 0.3s; }
.callouts.on .co-kcal circle.arc { stroke-dashoffset: 4; }
.co-kcal span { display: grid; } .co-kcal b { font: 700 1.3rem/1 'Fraunces', serif; }
@media (max-width: 1180px) { .co.a { left: -30%; } .co.b { right: -28%; } }
.story .steps { display: grid; }
.story .step { min-height: 80vh; display: grid; align-content: center; gap: 18px; opacity: 0.22; transition: opacity 0.5s; }
.story .step.active { opacity: 1; }
.story .step h3 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.06; font-variation-settings: 'SOFT' 100, 'opsz' 96; }
.story .step .num {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font: 700 1.2rem 'Fraunces', serif; color: #fff;
  background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -8px rgba(201,47,23,.6);
}
.story .step .mobile-shot { display: none; }
@media (max-width: 900px) {
  .story .grid { grid-template-columns: 1fr; }
  .story .sticky { display: none; }
  .story .step { min-height: 0; opacity: 1; padding: 36px 0; }
  .story .step .mobile-shot { display: block; width: 250px; margin: 18px auto 0; }
  .story .step .mobile-shot .screen img { opacity: 1; transform: none; }
  /* Na mobilu telefon „vyplave“ ze stolu: náklon dozadu → rovně. */
  .story .step .mobile-shot[data-reveal] { perspective: 900px; opacity: 1; transform: none; }
  .story .step .mobile-shot[data-reveal] .phone { transform: rotateX(28deg) translateY(70px) scale(0.9); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 0.7s ease; }
  .story .step .mobile-shot[data-reveal].in .phone { transform: rotateX(0) translateY(0) scale(1); opacity: 1; }
}

/* ── Chef ── */
.chef { padding: 110px 0; background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg)); }
.chef .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.chat { position: relative; display: grid; gap: 14px; padding: 28px; border-radius: 34px; background: var(--surface); box-shadow: var(--sh-2), var(--hl); }
.chat .head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat .head img { width: 46px; height: 46px; }
.chat .head b { display: block; font-size: 1rem; }
.chat .head small { color: var(--basil); font-weight: 700; }
.bubble { max-width: 85%; padding: 12px 16px; border-radius: 22px; font-size: 0.98rem; opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2,.8,.2,1.2); }
.bubble.in { opacity: 1; transform: none; }
.bubble.bot { background: var(--surface-2); border-bottom-left-radius: 8px; box-shadow: var(--hl); }
.bubble.me { justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -10px rgba(201,47,23,.7); }
.bubble.typing { display: inline-flex; gap: 5px; width: max-content; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; } .bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.goals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.goals span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 9px; border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 0.94rem; box-shadow: var(--sh-1), var(--hl); }
.goals .i3d { --s: 28px; filter: drop-shadow(0 3px 4px rgba(92,48,18,.2)); }
@media (max-width: 900px) { .chef .grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── Clay icon tile (shared by features and price) ── */
.clay {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; flex: none;
  background: radial-gradient(120% 120% at 30% 15%, #fff 0%, var(--surface-2) 60%, color-mix(in srgb, var(--peach) 60%, var(--surface-2)) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -6px 12px rgba(160, 80, 30, 0.08), 0 12px 24px -12px rgba(92, 48, 18, 0.35);
}
.clay .i3d { --s: 60px; }

/* ── Bento ── */
.bento { padding: 110px 0; }
.bento .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--sh-1), var(--hl); transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--sh-2), var(--hl); }
.tile:hover .clay .i3d { transform: rotate(-8deg) scale(1.08); }
.clay .i3d { transition: transform 0.5s cubic-bezier(.2,.8,.2,1.4); }
.tile .clay { margin-bottom: 8px; }
.tile p { color: var(--text-2); }
.tile.big { grid-column: span 2; grid-row: span 2; align-content: end; min-height: 400px; color: #fff; background: linear-gradient(180deg, rgba(20,12,8,0) 30%, rgba(20,12,8,.82)), var(--bg-img) center / cover; }
.tile.big .clay { position: absolute; top: 24px; left: 24px; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); }
.tile.big p { color: rgba(255, 255, 255, 0.86); }
.tile.big h3 { font-size: 2.1rem; }
.tile.wide { grid-column: span 2; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
.tile.wide .clay { grid-row: span 2; margin: 0; }
.tile.wide h3 { align-self: end; } .tile.wide p { align-self: start; }
@media (max-width: 960px) { .bento .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .bento .grid { grid-template-columns: 1fr; }
  .tile.big, .tile.wide { grid-column: auto; } .tile.big { min-height: 320px; }
  .tile.wide { grid-template-columns: 1fr; } .tile.wide .clay { grid-row: auto; margin-bottom: 8px; }
}

/* ── Price ── */
.price { position: relative; padding: 120px 0; overflow: hidden; background: radial-gradient(60% 70% at 85% 40%, color-mix(in srgb, var(--saffron) 22%, transparent), transparent 70%), var(--bg-2); }
.price .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.price .section-head { margin-bottom: 36px; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 4px; }
.price-tag b {
  font: 700 clamp(2.8rem, 5vw, 3.8rem)/1 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'opsz' 144; letter-spacing: -0.03em;
  background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-tag span { color: var(--text-2); font-weight: 700; font-size: 1rem; }
.perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perk-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 24px; background: var(--surface); box-shadow: var(--sh-1), var(--hl); }
.perk-list .clay { width: 64px; height: 64px; border-radius: 20px; }
.perk-list .clay .i3d { --s: 44px; }
.perk-list h3 { font-size: 1.12rem; margin: 4px 0 4px; }
.perk-list p { color: var(--text-2); font-size: 0.94rem; line-height: 1.5; }
.receipt { position: relative; justify-self: center; width: min(400px, 100%); transform: rotate(2deg); filter: drop-shadow(0 30px 40px rgba(92, 48, 18, 0.28)) drop-shadow(0 2px 3px rgba(92, 48, 18, 0.1)); }
.receipt.in { transform: rotate(2deg); }
.receipt .paper {
  padding: 30px 30px 44px; color: #2a1f18; background: #fffdf9; border-radius: 22px 22px 0 0; font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% / 20px 100% repeat-x;
          mask: radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% / 20px 100% repeat-x;
}
.r-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 2px dashed rgba(42, 31, 24, 0.15); }
.r-head img { width: 44px; height: 44px; border-radius: 12px; }
.r-head b { display: block; font: 700 1.3rem/1.1 'Fraunces', serif; font-variation-settings: 'SOFT' 100; }
.r-head small { color: #8a7869; font-weight: 600; }
.r-lines { list-style: none; margin: 0; padding: 18px 0; display: grid; gap: 12px; }
.r-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.97rem; }
.r-lines li.sep { height: 0; border-top: 2px dashed rgba(42, 31, 24, 0.15); margin: 4px 0; }
.r-lines b { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.r-lines b.ok { color: #2f9e5b; } .r-lines b.ok svg { width: 16px; height: 16px; }
.r-lines b.zero { color: #ee4524; }
.r-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 2px solid #2a1f18; }
.r-total span { font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; }
.r-total b { font: 700 1.3rem/1.2 'Fraunces', serif; font-variation-settings: 'SOFT' 100; text-align: right; }
.stamp {
  position: absolute; right: -10px; bottom: -26px; padding: 8px 14px; border: 3px solid #ee4524; background: rgba(255, 253, 249, 0.92); border-radius: 12px; color: #ee4524;
  font: 800 0.95rem/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-14deg); opacity: 0.85;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1.6) 0.5s, opacity 0.4s 0.5s;
}
.receipt:not(.in) .stamp { transform: rotate(-14deg) scale(2.2); opacity: 0; }
@media (max-width: 960px) { .price .grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .perk-list { grid-template-columns: 1fr; } }

/* ── Plans ── */
.plans { padding: 110px 0; }
.plans .rail { --pad: var(--gutter); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px var(--pad) 30px; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.plans .rail::-webkit-scrollbar { display: none; }
@media (min-width: 1240px) { .plans .rail { --pad: calc((100vw - var(--maxw)) / 2 + var(--gutter)); } }
.plan {
  scroll-snap-align: start; position: relative; display: grid; gap: 10px; align-content: start; min-height: 320px; padding: 26px; border-radius: 30px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.28), transparent 50%), linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 30px rgba(0,0,0,.08), 0 24px 40px -22px var(--c1);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.plan:hover { transform: translateY(-8px) rotate(-0.6deg); }
.plan .i3d { --s: 76px; margin: -6px 0 4px -6px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.25)); transition: transform 0.5s cubic-bezier(.2,.8,.2,1.4); }
.plan:hover .i3d { transform: rotate(-10deg) scale(1.08); }
.plan h3 { font-size: 1.5rem; }
.plan p { color: rgba(255, 255, 255, 0.92); font-size: 0.97rem; }
.plan .days { margin-top: auto; justify-self: start; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-weight: 700; font-size: 0.86rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }

/* ── Cuisines ── */
.cuisines { padding: 110px 0; background: var(--bg-2); }
.cuisine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cuisine {
  position: relative; overflow: hidden; display: grid; gap: 4px; padding: 22px; border-radius: 24px; background: var(--surface);
  box-shadow: var(--sh-1), var(--hl); transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
}
.cuisine::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--accent); opacity: 0.12; transition: transform 0.5s; }
.cuisine:hover { transform: translateY(-5px); box-shadow: var(--sh-2), var(--hl); }
.cuisine:hover::after { transform: scale(1.5); }
.cuisine .flag { font-size: 2.1rem; line-height: 1.1; }
.cuisine b { font: 700 1.22rem/1.2 'Fraunces', serif; font-variation-settings: 'SOFT' 100; }
.cuisine small { color: var(--text-2); }
@media (max-width: 900px) { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .cuisine-grid { grid-template-columns: repeat(2, 1fr); } .cuisine { padding: 18px; } }

/* ── Final CTA ── */
.cta { padding: 110px 0 120px; }
.cta .panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  padding: clamp(32px, 6vw, 72px); border-radius: 44px; color: #fff;
  background: radial-gradient(70% 110% at 100% 0%, #ffb547 0%, rgba(255,181,71,0) 55%), radial-gradient(60% 80% at 0% 100%, rgba(120, 20, 0, .35), transparent 60%), var(--brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 50px 90px -40px rgba(201, 47, 23, 0.7);
}
.cta .panel::before { content: ''; position: absolute; inset: 0; background: url(/assets/icons/sparkles.webp) 92% 8% / 70px no-repeat; opacity: 0.9; pointer-events: none; }
.cta-copy { position: relative; display: grid; gap: 22px; justify-items: start; }
.cta h2 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.cta p { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; }
.cta .store { background: linear-gradient(180deg, #2c2623, #0f0c0b); }
.cta .phones { position: relative; height: 460px; }
.cta .phone { position: absolute; width: 214px; }
.cta .phone:nth-child(1) { right: 36%; top: 40px; transform: rotate(-8deg); }
.cta .phone:nth-child(2) { right: 3%; top: 0; transform: rotate(7deg); }
@media (max-width: 900px) { .cta-copy { justify-items: center; text-align: center; } .cta .perks, .cta .stores { justify-content: center; } }
@media (max-width: 900px) { .cta .panel { grid-template-columns: 1fr; } .cta .phones { height: 380px; } .cta .phone { width: 176px; } .cta .phone:nth-child(1) { right: 46%; } }
@media (max-width: 420px) { .cta .phone { width: 150px; } .cta .phones { height: 330px; } }

/* ── Footer ── */
.site-footer { padding: 52px 0 64px; color: var(--text-2); font-size: 0.93rem; border-top: 1px solid var(--line); }
.site-footer .wrap { display: grid; gap: 22px; }
.site-footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer nav a { color: var(--text-2); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: var(--text); }
.site-footer .brand img { width: 36px; height: 36px; border-radius: 10px; }
.langs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.langs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 0.9rem; }
.langs .flag { width: 16px; height: 16px; }
.langs a[aria-current='true'] { color: var(--tomato); font-weight: 700; }
.credits { color: var(--muted); font-size: 0.84rem; max-width: 90ch; }
.credits details summary { cursor: pointer; color: var(--text-2); }
.credits ul { columns: 2; padding-left: 18px; margin: 10px 0 0; }
.credits li { break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 640px) { .credits ul { columns: 1; } }

/* ── Coming-soon dialog ── */
dialog.soon-dialog { border: 0; padding: 0; border-radius: 34px; max-width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35), var(--hl); }
dialog.soon-dialog[open] { animation: pop 0.45s cubic-bezier(.2,.8,.2,1.3); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
dialog.soon-dialog::backdrop { background: rgba(30, 18, 10, 0.45); backdrop-filter: blur(8px); }
.soon-dialog .body { position: relative; display: grid; gap: 14px; padding: 36px 30px 30px; text-align: center; justify-items: center; }
.soon-dialog .big { width: 96px; height: 96px; filter: drop-shadow(0 14px 16px rgba(92,48,18,.3)); animation: bob 3s ease-in-out infinite; }
.soon-dialog h3 { font-size: 1.8rem; }
.soon-dialog p { color: var(--text-2); }
.soon-dialog .x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.soon-dialog .x svg { width: 18px; height: 18px; }
.soon-dialog .primary { width: 100%; margin-top: 6px; padding: 15px; border: 0; border-radius: 16px; color: #fff; font: 700 1rem 'Inter', sans-serif; cursor: pointer; background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -10px rgba(201,47,23,.7); }

/* ── Document pages ── */
.doc { padding: 140px 0 96px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(2.5rem, 5.6vw, 3.8rem); margin-top: 14px; }
.doc .meta { color: var(--muted); margin: 14px 0 30px; }
.doc h2 { font-size: 1.6rem; margin: 46px 0 12px; }
.doc h3 { font-size: 1.12rem; margin: 26px 0 8px; font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0; }
.doc p, .doc li { color: var(--text-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.doc strong { color: var(--text); }
.contact-card { display: flex; gap: 20px; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--sh-2), var(--hl); }
.contact-card h3 { margin: 4px 0 6px; font-family: 'Fraunces', serif; font-size: 1.35rem; letter-spacing: -0.015em; }
.contact-card .btn {
  display: inline-flex; margin-top: 14px; padding: 13px 20px; border-radius: 14px; color: #fff; font-weight: 700; text-decoration: none; word-break: break-all;
  background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -10px rgba(201,47,23,.7);
}
.contact-card .btn:hover { color: #fff; filter: brightness(1.06); }
@media (max-width: 520px) { .contact-card { flex-direction: column; padding: 22px; } }
.sources .src-card { display: flex; gap: 20px; align-items: flex-start; margin-top: 18px; padding: 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--sh-1), var(--hl); }
.sources .src-card h2 { margin: 6px 0 8px; font-size: 1.35rem; }
.sources .src-card .clay { width: 72px; height: 72px; border-radius: 22px; }
.sources .src-card .clay .i3d { --s: 50px; }
.src-list { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; display: grid; gap: 10px !important; }
.src-list li { display: grid; gap: 1px; }
.src-list a { font-weight: 700; text-decoration: none; }
.src-list small { color: var(--muted); font-size: 0.85rem; }
.src-links { margin-top: 10px !important; font-weight: 700; }
.src-links a { text-decoration: none; }
@media (max-width: 520px) { .sources .src-card { flex-direction: column; padding: 20px; } }
.summary { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--sh-1), var(--hl); }
.summary ul { list-style: none; padding: 0; }
.summary li::before { content: '✓  '; color: var(--basil); font-weight: 800; }
.note { color: var(--muted); font-size: 0.92rem; margin-top: 14px; }
details.faq { background: var(--surface); border-radius: 20px; padding: 17px 20px; margin: 10px 0; box-shadow: var(--sh-1), var(--hl); }
details.faq summary { cursor: pointer; font-weight: 700; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 9px; color: #fff; background: var(--brand); font-size: 1.1rem; line-height: 1; transition: transform 0.3s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 10px; }
.todo { background: color-mix(in srgb, var(--saffron) 30%, transparent); color: var(--text); padding: 0 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .track { animation: none; }
}