/* ============================================================
   COXINHA EXPRESS — cinematic homepage
   Built on Helium tokens (Poppins display / Inter body),
   re-skinned to a dark charcoal canvas with a Brazilian
   multi-accent palette (emerald · yellow · royal blue · orange).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Anton&display=swap');

:root {
  /* ---- canvas ---- */
  --cx-ink:    #08080a;
  --cx-bg:     #0c0c10;
  --cx-bg-2:   #111118;
  --cx-bg-3:   #16161f;

  /* ---- Brazilian accents ---- */
  --cx-emerald:      #00c878;
  --cx-emerald-deep: #007a4d;
  --cx-yellow:       #ffd23f;
  --cx-blue:         #2b6cdb;
  --cx-grape:        #a855f7;   /* grape soda accent */

  /* ---- NEON Brazil trio (vivid, high-pop) ---- */
  --cx-neon-green:   #00ff95;
  --cx-neon-yellow:  #ffe600;
  --cx-neon-blue:    #2f8bff;
  --cx-orange:       #ff7a1a;
  --cx-gold:         #e9a23b;   /* coxinha crust */
  --cx-gold-hi:      #ffd98a;
  --cx-gold-deep:    #b16a1d;
  --cx-cream:        #f6efe2;

  /* ---- lead accents (driven by Tweaks) ---- */
  --cx-lead:    var(--cx-emerald);
  --cx-lead-2:  var(--cx-orange);
  --cx-lead-3:  var(--cx-yellow);

  /* ---- text (brighter, higher-contrast for crisp readability) ---- */
  --fg:    #fbf9f5;
  --fg-2:  rgba(248,245,239,0.80);
  --fg-3:  rgba(248,245,239,0.58);
  --fg-4:  rgba(248,245,239,0.34);

  /* ---- glass + glow (glow strength driven by Tweaks 0–1.4) ---- */
  --cx-glow: 1;
  --cx-glass:        rgba(255,255,255,0.07);
  --cx-glass-hi:     rgba(255,255,255,0.13);
  --cx-glass-border: rgba(255,255,255,0.18);
  --cx-hairline:     rgba(255,255,255,0.12);

  /* ---- motion (driven by Tweaks 0–1) ---- */
  --cx-motion: 1;
  --cx-grain:  0.03;

  /* ---- type ---- */
  --cx-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --cx-body:    'Inter', system-ui, sans-serif;
  --cx-display-spacing: -0.02em;
  --cx-display-weight: 700;

  --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 34px; --r-pill: 999px;
}

/* font-feel variants set on <html data-font="..."> */
html[data-font="grotesk"]  { --cx-display: 'Space Grotesk', sans-serif; --cx-display-spacing: -0.015em; --cx-display-weight: 700; }
html[data-font="cinema"]   { --cx-display: 'Anton', 'Poppins', sans-serif; --cx-display-spacing: 0.005em; --cx-display-weight: 400; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.no-smooth { scroll-behavior: auto; }

/* Hide scrollbars everywhere (Lenis drives the scroll) — keep scrollability */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--cx-bg);
  color: var(--fg);
  font-family: var(--cx-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--cx-lead); color: #07140d; }

h1,h2,h3,h4 {
  font-family: var(--cx-display);
  font-weight: var(--cx-display-weight);
  letter-spacing: var(--cx-display-spacing);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.eyebrow {
  font-family: var(--cx-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cx-lead);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.eyebrow.center::before { display: none; }

.wrap { width: min(1240px, 92vw); margin-inline: auto; }

/* ============================================================
   GLOBAL CINEMATIC LAYERS (fixed)
   ============================================================ */

/* film grain */
#grain {
  position: fixed; inset: -50%;
  z-index: 9000; pointer-events: none;
  opacity: calc(var(--cx-grain) * var(--cx-motion));
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  animation: grainShift 0.6s steps(4) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}

/* vignette + top fade for cinema framing */
#vignette {
  position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  box-shadow: inset 0 0 200px 30px rgba(0,0,0,0.32);
  background:
    radial-gradient(150% 95% at 50% 0%, transparent 72%, rgba(0,0,0,0.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 14%);
}

/* particle field */
#particles { display: none; }
.spark {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--sp-c) 0%, transparent 70%);
  opacity: 0; will-change: transform, opacity;
  animation: floatUp var(--sp-d) linear infinite;
  animation-delay: var(--sp-delay);
}
@keyframes floatUp {
  0%   { transform: translate3d(0,20px,0) scale(0.6); opacity: 0; }
  10%  { opacity: calc(0.9 * var(--cx-motion)); }
  90%  { opacity: calc(0.5 * var(--cx-motion)); }
  100% { transform: translate3d(var(--sp-x), -110vh, 0) scale(1); opacity: 0; }
}

/* ============================================================
   NAV (floating pill)
   ============================================================ */
.nav {
  position: fixed; top: 20px; left: 0; right: 0; z-index: 7000;
  display: flex; justify-content: center; pointer-events: none;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s;
}
.nav.hide { transform: translateY(-140%); opacity: 0; }

/* Royal-blue ambient bloom behind the pill — balances the green/gold warmth */
.nav::before {
  content: ""; position: absolute; left: 50%; top: 8px;
  transform: translateX(-50%);
  width: min(760px, 92vw); height: 150px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 100% at 26% 50%, color-mix(in srgb, var(--cx-neon-green) 70%, transparent), transparent 72%),
    radial-gradient(46% 100% at 74% 50%, color-mix(in srgb, var(--cx-neon-blue) 75%, transparent), transparent 72%),
    radial-gradient(40% 90% at 50% 60%, color-mix(in srgb, var(--cx-neon-yellow) 45%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: calc(0.85 * var(--cx-glow));
}

.nav-inner {
  position: relative; isolation: isolate;
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 20px;
  border: 0;
  border-radius: var(--r-pill);
  /* cinematic glass: glossy top sheen over a cleaner, darker base */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 46%, rgba(255,255,255,0.06)),
    rgba(9,10,14,0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -10px 24px -16px rgba(0,0,0,0.7) inset,
    0 24px 64px -24px rgba(0,0,0,0.9),
    0 0 40px -18px color-mix(in srgb, var(--cx-neon-green) 75%, transparent),
    0 0 46px -22px color-mix(in srgb, var(--cx-neon-blue) 65%, transparent);
}
.nav-inner > * { position: relative; z-index: 1; }

/* Animated atmospheric edge light (emerald → gold → royal blue) */
.nav-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(115deg,
    var(--cx-neon-green) 0%,
    var(--cx-neon-yellow) 26%,
    rgba(255,255,255,0.85) 42%,
    var(--cx-neon-blue) 60%,
    var(--cx-neon-green) 84%,
    var(--cx-neon-yellow) 100%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--cx-glow);
  filter: saturate(1.4) brightness(1.15);
  animation: navEdge 13s linear infinite;
}

/* Soft drifting colour reflections across the glass surface */
.nav-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: 0; pointer-events: none; mix-blend-mode: screen;
  filter: blur(6px) saturate(1.5);
  opacity: calc(0.95 * var(--cx-glow));
  background:
    radial-gradient(150px 86px at 10% -12%, color-mix(in srgb, var(--cx-neon-green) 65%, transparent), transparent 70%),
    radial-gradient(170px 96px at 52% 122%, color-mix(in srgb, var(--cx-neon-yellow) 55%, transparent), transparent 72%),
    radial-gradient(150px 86px at 92% -20%, color-mix(in srgb, var(--cx-neon-blue) 68%, transparent), transparent 70%);
  background-size: 210% 210%;
  animation: navSheen 15s ease-in-out infinite alternate;
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: 14px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; position: relative; flex: none;
  /* neon Brazil trio: green → yellow → blue */
  background: conic-gradient(from 210deg,
    var(--cx-neon-green), var(--cx-neon-yellow) 30%, var(--cx-neon-blue) 58%,
    var(--cx-neon-green) 88%, var(--cx-neon-green));
  box-shadow:
    0 0 calc(30px * var(--cx-glow)) -4px color-mix(in srgb, var(--cx-neon-green) 90%, transparent),
    0 0 calc(22px * var(--cx-glow)) -6px color-mix(in srgb, var(--cx-neon-blue) 75%, transparent),
    0 6px 16px -6px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.4) inset;
  display: grid; place-items: center;
  animation: brandGlow 5s ease-in-out infinite;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 6px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.10), transparent 55%),
    var(--cx-ink);
}
.brand-mark span {
  position: relative; z-index: 1; font-family: var(--cx-display);
  font-weight: 800; font-size: 15px; color: var(--cx-gold-hi);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cx-gold-hi) 60%, transparent);
}
.brand-name { font-family: var(--cx-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em;
  display: inline-flex; flex-direction: column; line-height: 1.02; }
.brand-by { font-family: var(--cx-body); font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); margin-top: 3px; }
.brand-name b { color: var(--cx-neon-green); font-weight: 700; text-shadow: 0 0 16px color-mix(in srgb, var(--cx-neon-green) 75%, transparent); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 14px; color: var(--fg-2); padding: 9px 15px; border-radius: var(--r-pill);
  transition: color .25s, background .25s, box-shadow .25s; font-weight: 500;
}
.nav-links a:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--cx-neon-green) 18%, var(--cx-glass-hi));
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--cx-neon-green) 90%, transparent);
}
.nav-links a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--cx-neon-yellow);
  outline-offset: 2px;
}
/* Neon-green primary CTA in the navbar */
.nav .btn { margin-left: 6px; }

/* Language switch — segmented control on the nav glass */
.lang-switch {
  display: flex; align-items: center; gap: 2px; margin-left: 4px;
  padding: 3px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--cx-glass-border);
}
.lang-switch button {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--cx-body); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--fg-3); background: transparent;
  padding: 6px 9px; border-radius: var(--r-pill); line-height: 1;
  transition: color .25s, background .25s, box-shadow .25s;
}
.lang-switch button:hover { color: var(--fg); }
.lang-switch button.on {
  color: #03210f;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cx-neon-green) 92%, white), var(--cx-neon-green));
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--cx-neon-green) 80%, transparent);
}
.lang-switch button:focus-visible { outline: 2px solid var(--cx-neon-yellow); outline-offset: 2px; }

/* ============================================================
   MOBILE NAV (hamburger + full-screen sheet) + ALWAYS-ON ORDERING
   Injected by engine.js on every page (official export system).
   ============================================================ */
.nav-burger {
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; padding: 0; margin-left: 6px; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--cx-glass-border); background: var(--cx-glass);
}
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform .3s, opacity .25s; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 6800; display: flex; flex-direction: column;
  padding: 104px 26px calc(34px + env(safe-area-inset-bottom));
  background: rgba(8,8,10,0.97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .35s ease, transform .35s ease;
}
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu .mm-links { display: flex; flex-direction: column; }
.mobile-menu .mm-links a {
  font-family: var(--cx-display); font-weight: 600; font-size: clamp(26px, 8vw, 34px); letter-spacing: -0.02em;
  color: var(--fg); padding: 16px 0; border-bottom: 1px solid var(--cx-hairline);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu .mm-links a.cur { color: var(--cx-lead); }
.mobile-menu .mm-links a::after { content: "→"; color: var(--fg-4); font-family: var(--cx-body); font-size: 19px; }
.mobile-menu .mm-lang { display: flex; gap: 8px; margin-top: 22px; }
.mobile-menu .mm-lang button {
  flex: 1; appearance: none; cursor: pointer; font-family: var(--cx-body); font-weight: 600; font-size: 14px;
  color: var(--fg-3); background: var(--cx-glass); border: 1px solid var(--cx-glass-border);
  border-radius: var(--r-pill); padding: 12px 0; transition: color .25s, background .25s;
}
.mobile-menu .mm-lang button.on { color: #03210f; background: var(--cx-neon-green); }
.mobile-menu .mm-foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu .mm-foot .btn { width: 100%; justify-content: center; gap: 10px; padding: 16px 22px; font-size: 16px; }
/* the inline WhatsApp SVG ships with no width/height — pin it so it never blows up */
.mobile-menu .mm-foot .btn svg { width: 20px; height: 20px; flex: none; }
.mobile-menu .mm-contact { display: flex; gap: 10px; }
.mobile-menu .mm-contact a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: var(--r-pill); border: 1px solid var(--cx-glass-border);
  background: var(--cx-glass); font-size: 14px; font-weight: 600; color: var(--fg);
}
.mobile-menu .mm-contact a svg { width: 17px; height: 17px; }

/* always-on order CTA */
.order-cta { position: fixed; z-index: 6500; display: flex; align-items: center; }
.order-cta .oc-main {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  font-family: var(--cx-body); font-weight: 700; letter-spacing: 0.004em; font-size: 15px; color: #04221a;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--r-pill); padding: 15px 24px; border: 0;
  background:
    radial-gradient(120% 80% at 50% -30%, rgba(255,240,200,0.30), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, color-mix(in srgb, #38c98a 90%, white) 0%, #38c98a 30%, #12b06e 64%, color-mix(in srgb, #12b06e 88%, black) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 0 1px color-mix(in srgb, #12b06e 30%, transparent), 0 10px 22px -10px color-mix(in srgb, #12b06e 55%, rgba(0,0,0,0.5));
  transition: transform .25s cubic-bezier(.3,.8,.3,1.2), filter .2s, box-shadow .25s;
}
.order-cta .oc-ic { display: inline-flex; flex: none; }
.order-cta .oc-main svg { width: 19px; height: 19px; }
.order-cta .oc-arr { display: inline-flex; flex: none; opacity: .82; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.order-cta .oc-arr svg { width: 17px; height: 17px; }
/* soft light sweep across the pill */
.order-cta .oc-main::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
.order-cta .oc-main:hover { transform: translateY(-1px) scale(1.015); filter: brightness(1.04); }
.order-cta .oc-main:hover .oc-arr { transform: translateX(3px); }
.order-cta .oc-main:hover::after { left: 130%; }
.order-cta .oc-main:active { transform: scale(.98); }
.order-cta .oc-mini { display: none; }

/* desktop: floating WhatsApp pill, slides in after scrolling past the hero */
@media (min-width: 861px) {
  .order-cta { right: 22px; bottom: 22px; transform: translateY(160%); transition: transform .5s cubic-bezier(.3,.8,.3,1.2); }
  .order-cta.show { transform: none; }
}

/* ============================================================
   Campaign hero image carries its own baked headline.
   Hide the duplicate HTML copy visually (kept for SR/SEO) and drop the
   interactive CTAs + stats to the bottom over the clear table area.
   ============================================================ */
/* Anchor the hero content to the bottom (flex-column beats the grid's
   vertical centering so the action group truly sits at the bottom). */
.hero { flex-direction: column; justify-content: flex-end; align-items: stretch; padding-bottom: 7vh; }
/* The image carries the headline — hide the duplicate HTML headline copy
   (kept for screen readers / SEO). Buttons + reviews stay visible. */
.hero .eyebrow,
#hero-headline,
.hero-sub {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Tidy bottom-left action group: buttons, then the reviews, under the headline */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-cta { margin-top: 0; }
.hero-cta .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.10), 0 8px 20px -10px rgba(0,0,0,0.6); }
.hero-stats { margin-top: 0; gap: 30px; }
.hero .hero-stat .n { text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.hero .hero-stat .l { color: #fff; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 2px 12px rgba(0,0,0,0.85); }
/* Portrait: the landscape poster crops — favour the coxinha. */
@media (max-aspect-ratio: 1/1) {
  #cx-hero-video img { object-position: 70% 50% !important; }
}

@keyframes navEdge { 0% { background-position: 0% 50%; } 100% { background-position: 240% 50%; } }
@keyframes navSheen { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes brandGlow {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cx-emerald) 50%, transparent)); }
  50%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--cx-emerald) 80%, transparent))
                     drop-shadow(0 0 7px color-mix(in srgb, var(--cx-gold-hi) 55%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-inner::before, .nav-inner::after, .brand-mark { animation: none; }
}
/* mobile: full-width sticky bottom order bar + hamburger */
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .nav-links { display: none; }
  .nav-inner > .lang-switch { display: none; }
  .nav-inner > .btn { display: none; }
  .nav-inner { padding: 8px 10px 8px 18px; }
  /* compact, centered floating pill card — not an edge-to-edge blob */
  .order-cta {
    left: 50%; right: auto; transform: translateX(-50%) translateY(160%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: min(88%, 420px); justify-content: center; padding: 0;
    transition: transform .5s cubic-bezier(.3,.8,.3,1.2);
  }
  .order-cta.show { transform: translateX(-50%); }
  .order-cta .oc-main {
    flex: 1; height: 64px; padding: 0 22px; font-size: 16px; gap: 11px;
    /* premium depth: glossy emerald + clean shadow, minimal glow */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.24),
      0 0 0 1px rgba(0,0,0,0.12), 0 14px 30px -14px rgba(0,0,0,0.7),
      0 0 22px -14px color-mix(in srgb, #0a9d63 70%, transparent);
  }
  /* call + menu live in the burger sheet / nav, so drop the duplicate minis */
  .order-cta .oc-mini { display: none; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.menu-open { overflow: hidden; }
  .footer { padding-bottom: 30px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --bg: #12b06e;                 /* rich, bright tropical emerald */
  --bg-hi: #38c98a;              /* lighter tropical green for the centre lift */
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cx-body); font-weight: 700; font-size: 15px; letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding: 14px 22px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  color: #04221a; white-space: nowrap;
  /* glossy top highlight + warm golden reflection + bright emerald→tropical fill */
  background:
    radial-gradient(120% 80% at 50% -30%, rgba(255,240,200,0.32), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 40%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-hi) 90%, white) 0%,
      var(--bg-hi) 30%,
      var(--bg) 64%,
      color-mix(in srgb, var(--bg) 88%, black) 100%);
  /* layered, clean depth — slight float, no blurry bloom */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px color-mix(in srgb, var(--bg) 30%, transparent),
    0 2px 3px rgba(0,0,0,0.18),
    0 10px 22px -10px color-mix(in srgb, var(--bg) 55%, rgba(0,0,0,0.5));
  transition: transform .25s cubic-bezier(.3,.8,.3,1.2), box-shadow .25s, filter .2s;
  overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,0.38) 50%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn:hover {
  transform: translateY(-2px) scale(1.015); filter: brightness(1.06) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px color-mix(in srgb, var(--bg) 34%, transparent),
    0 3px 6px rgba(0,0,0,0.2),
    0 16px 30px -10px color-mix(in srgb, var(--bg) 60%, rgba(0,0,0,0.5));
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.985); filter: brightness(0.99); }
.btn .arr { transition: transform .3s cubic-bezier(.3,.8,.3,1.2); }
.btn:hover .arr { transform: translateX(4px); }
/* safety net: inline icons inside any .btn must never balloon to fill it */
.btn > svg { width: 19px; height: 19px; flex: none; }

.btn.ghost {
  color: var(--fg); background: var(--cx-glass);
  border: 1px solid var(--cx-glass-border); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.btn.ghost:hover { background: var(--cx-glass-hi); transform: translateY(-3px); box-shadow: 0 14px 36px -14px rgba(0,0,0,0.8); }
.btn.wa { --bg: #10a866; --bg-hi: #34c98a; color: #04221a; }   /* bright tropical emerald */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 120px 0 80px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* blurred nightlife bokeh */
.bokeh { position: absolute; border-radius: 50%; filter: blur(70px); opacity: calc(0.55 * var(--cx-glow)); will-change: transform; }
.bokeh.b1 { width: 540px; height: 540px; left: -120px; top: -80px;  background: radial-gradient(circle, var(--cx-emerald), transparent 65%); }
.bokeh.b2 { width: 460px; height: 460px; right: -60px; top: 8%;     background: radial-gradient(circle, var(--cx-blue), transparent 65%); }
.bokeh.b3 { width: 520px; height: 520px; right: 14%;  bottom: -160px; background: radial-gradient(circle, var(--cx-orange), transparent 65%); }
.bokeh.b4 { width: 360px; height: 360px; left: 18%;   bottom: -60px;  background: radial-gradient(circle, var(--cx-yellow), transparent 70%); opacity: calc(0.4 * var(--cx-glow)); }
/* wet-street reflection sheen at the bottom */
.hero-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  z-index: 2;
}
.hero-floor::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 50% 120%, color-mix(in srgb, var(--cx-lead) 30%, transparent), transparent 70%);
  mix-blend-mode: screen; opacity: var(--cx-glow);
}

.hero .wrap { position: relative; z-index: 5; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }

.hero-copy { max-width: 620px; }
.hero h1 {
  font-size: clamp(48px, 8vw, 116px);
  letter-spacing: -0.03em; line-height: 0.94; margin: 22px 0 0;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--cx-lead), var(--cx-lead-3) 55%, var(--cx-lead-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin-top: 26px; font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-2); max-width: 460px; line-height: 1.65; }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { margin-top: 46px; display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stat .n { font-family: var(--cx-display); font-weight: 700; font-size: 30px; line-height: 1; }
.hero-stat .n b { color: var(--cx-lead); }
.hero-stat .l { font-size: 12.5px; color: var(--fg-3); margin-top: 6px; letter-spacing: 0.04em; }

/* ---- REVEAL SYSTEM (clone-safe) ----
   Elements are VISIBLE by default; the `.off` class supplies the hidden
   start-state with no transition. JS removes `.off` to animate them in.
   This guarantees content is never stuck-hidden in a throttled tab or a
   cloned render (screenshots / PPTX), and degrades gracefully without JS. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-line.off > span { transform: translateY(110%); transition: none; }
.reveal-line:nth-child(2) > span { transition-delay: .08s; }
.reveal-line:nth-child(3) > span { transition-delay: .16s; }

.fade-up { transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.fade-up.off { opacity: 0; transform: translateY(20px); transition: none; }
.fade-up.d1 { transition-delay: .35s; }
.fade-up.d2 { transition-delay: .45s; }
.fade-up.d3 { transition-delay: .55s; }

/* ---- the coxinha centerpiece ---- */
.hero-stage { position: relative; display: grid; place-items: center; min-height: 540px; }
.stage-glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cx-lead) 55%, transparent), transparent 62%);
  filter: blur(50px); opacity: calc(0.85 * var(--cx-glow)); animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{transform:scale(1);opacity:calc(0.7*var(--cx-glow))} 50%{transform:scale(1.12);opacity:calc(0.95*var(--cx-glow))} }

.coxinha-float { position: relative; animation: bob calc(7s / max(var(--cx-motion),0.35)) ease-in-out infinite; will-change: transform; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-26px) rotate(1.5deg)} }

.coxinha {
  position: relative; width: 270px; height: 270px;
  transform: rotate(45deg) scaleY(1.34);
  border-radius: 6% 56% 56% 56%;
  background:
    radial-gradient(120% 120% at 26% 22%, var(--cx-gold-hi) 0%, var(--cx-gold) 30%, var(--cx-gold-deep) 78%, #7c4711 100%);
  box-shadow:
    inset -16px -18px 44px rgba(90,45,8,0.66),
    inset 14px 16px 30px rgba(255,226,170,0.55),
    0 40px 80px -30px rgba(0,0,0,0.9);
}
/* breadcrumb texture */
.coxinha::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(120,64,15,0.5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 64%, rgba(255,236,196,0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 50% 80%, rgba(120,64,15,0.4) 0 1.4px, transparent 2px);
  background-size: 26px 26px, 19px 19px, 31px 31px;
  mix-blend-mode: soft-light; opacity: 0.9;
}
/* rim light */
.coxinha::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255,236,196,0.2);
  background: linear-gradient(125deg, rgba(255,255,255,0.5), transparent 32%);
  opacity: 0.7;
}
/* specular hotspot */
.coxinha-spec {
  position: absolute; width: 64px; height: 90px; left: 24%; top: 18%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.85), transparent);
  filter: blur(4px); transform: rotate(-30deg); border-radius: 50%; z-index: 2;
  pointer-events: none;
}
/* steam */
.steam { position: absolute; left: 50%; bottom: 78%; transform: translateX(-50%); z-index: -1; }
.steam i {
  position: absolute; bottom: 0; width: 26px; height: 150px; border-radius: 50%;
  background: linear-gradient(0deg, rgba(255,245,225,0), rgba(255,245,225,0.5));
  filter: blur(12px); opacity: 0;
  animation: rise calc(4.4s / max(var(--cx-motion),0.35)) ease-in infinite;
}
.steam i:nth-child(1){ left: -34px; animation-delay: 0s; }
.steam i:nth-child(2){ left: -4px;  animation-delay: 1.1s; height: 190px; }
.steam i:nth-child(3){ left: 26px;  animation-delay: 2.2s; }
@keyframes rise {
  0%{ transform: translateY(40px) scaleX(.6); opacity: 0; }
  30%{ opacity: calc(0.5 * var(--cx-motion)); }
  100%{ transform: translateY(-150px) scaleX(1.5); opacity: 0; }
}

/* floating ingredient chips around the coxinha */
.orbit { position: absolute; z-index: 6;
  background: rgba(12,12,16,0.9); border: 1px solid var(--cx-glass-border);
  border-radius: var(--r-pill); padding: 9px 15px 9px 11px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04) inset; font-size: 13px; font-weight: 500;
  animation: bob calc(8s / max(var(--cx-motion),0.35)) ease-in-out infinite;
}
.orbit .dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; }
.orbit.o1 { top: 4%; left: -14%; animation-delay: .4s; }
.orbit.o2 { top: 46%; right: -16%; animation-delay: 1.2s; }
.orbit.o3 { bottom: 2%; left: -8%; animation-delay: 2s; }

.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--fg-3); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.scroll-hint .mouse { width: 22px; height: 36px; border: 1.5px solid var(--fg-3); border-radius: 12px; position: relative; }
.scroll-hint .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--cx-lead); transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

@media (max-width: 940px){
  .hero .wrap { grid-template-columns: 1fr; gap: 10px; }
  .hero-stage { order: -1; min-height: 380px; transform: scale(.82); }
  .hero h1 { font-size: clamp(44px, 13vw, 80px); }
  .orbit.o1{ left: 2%; } .orbit.o2{ right: 0; } .orbit.o3{ left: 6%; }
}

/* ============================================================
   SECTION SCAFFOLD + lighting
   ============================================================ */
section { position: relative; }
.sec { padding: clamp(80px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(34px, 5vw, 66px); margin-top: 18px; letter-spacing: -0.025em; }
.sec-head p { margin-top: 20px; color: var(--fg-2); font-size: 18px; max-width: 560px; }
.sec-head.center p { margin-inline: auto; }

/* per-section ambient light */
.sec-light { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(110px); opacity: calc(0.3 * var(--cx-glow)); }
.sec > .wrap { position: relative; z-index: 1; }

.glass {
  background: var(--cx-glass);
  border: 1px solid var(--cx-glass-border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -36px rgba(0,0,0,0.9);
}

/* scroll reveal (clone-safe: visible by default, `.off` hides) */
.r { transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.r.off { opacity: 0; transform: translateY(34px); transition: none; }
.r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s}.r.d4{transition-delay:.32s}.r.d5{transition-delay:.4s}.r.d6{transition-delay:.48s}

/* ============================================================
   SIGNATURE COXINHAS — editorial cards
   ============================================================ */
.sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .sig-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.sig-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #15140f 0%, var(--cx-bg-2) 42%, var(--cx-bg) 100%);
  border: 1px solid var(--cx-hairline);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .55s, box-shadow .55s;
  /* own GPU layer → the 1px border stays crisp during the hover lift */
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
}
.sig-card:hover {
  transform: translate3d(0, -10px, 0);
  border-color: color-mix(in srgb, var(--card-c) 55%, transparent);
  box-shadow: 0 60px 110px -40px color-mix(in srgb, var(--card-c) 45%, black), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* food photo — the hero of the card (~70%), kept bright + high contrast */
.sig-media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.sig-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.sig-card:hover .sig-img { transform: scale(1.07); }
/* only the very bottom of the photo blends into the body */
.sig-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 64%,
    color-mix(in srgb, var(--cx-bg) 70%, transparent) 85%, var(--cx-bg) 100%);
}
/* soft brand light at the image base, blooms on hover */
.sig-media::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8%; height: 38%; z-index: 1;
  pointer-events: none; mix-blend-mode: screen; filter: blur(32px);
  opacity: calc(0.35 * var(--cx-glow)); transition: opacity .55s;
  background: radial-gradient(60% 100% at 32% 100%, var(--card-c), transparent 70%);
}
.sig-card:hover .sig-media::before { opacity: calc(0.7 * var(--cx-glow)); }

/* text panel */
.sig-body { position: relative; z-index: 2; padding: 18px 26px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.sig-card .tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--card-c); padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--card-c) 45%, transparent);
  background: color-mix(in srgb, var(--card-c) 14%, transparent);
}
.sig-card h3 { font-size: clamp(26px, 2.1vw, 32px); margin-top: 16px; letter-spacing: -0.01em; }
.sig-card p { color: var(--fg-2); font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
.sig-card .price { margin-top: 18px; font-family: var(--cx-display); font-weight: 700; font-size: 21px; color: var(--fg); }
.sig-card .price small { color: var(--fg-3); font-weight: 400; font-size: 13px; }

/* ============================================================
   HORIZONTAL SHOWCASE STRIP — Brazilian Street Flavors
   ============================================================ */
.hstrip { position: relative; height: 340vh; }
.hstrip .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hstrip-head { position: absolute; top: 7vh; left: 0; right: 0; z-index: 4; text-align: center; pointer-events: none; }
.hstrip-head h2 { font-size: clamp(30px, 4.4vw, 58px); }
.hstrip-track { display: flex; gap: 30px; padding: 0 8vw; will-change: transform; align-items: center; }
.flavor {
  position: relative; flex: none; width: clamp(280px, 34vw, 460px); height: 60vh; border-radius: var(--r-2xl);
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px;
  border: 1px solid var(--cx-glass-border);
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.78)), var(--flav-bg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
}
.flavor .scene { position: absolute; inset: 0; z-index: 0; }
.flavor .scene .blob { position: absolute; border-radius: 50%; filter: blur(34px); }
/* full-bleed background video inside a flavor card + readability scrim */
.flav-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.flavor.has-video .scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 42%, rgba(8,8,11,0.86) 100%); }
.flavor .ix { position: relative; z-index: 2; font-size: 12px; color: var(--fg-3); letter-spacing: 0.2em; }
.flavor h3 { position: relative; z-index: 2; font-size: clamp(26px,2.6vw,38px); margin-top: 8px; }
.flavor p { position: relative; z-index: 2; color: var(--fg-2); margin-top: 10px; font-size: 14.5px; max-width: 300px; }
.flavor .heat { position: relative; z-index: 2; margin-top: 16px; display: flex; gap: 5px; }
.flavor .heat i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-4); }
.flavor .heat i.on { background: var(--cx-orange); box-shadow: 0 0 10px var(--cx-orange); }
/* editorial scrub line — a single refined progress cue, not carousel dots */
.hprog { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); z-index: 4; width: 240px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 12%, rgba(255,255,255,0.14) 88%, transparent); overflow: visible; }
.hprog i { position: absolute; left: 0; top: -0.5px; bottom: -0.5px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--cx-neon-green), var(--cx-neon-yellow) 60%, var(--cx-neon-blue));
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cx-neon-yellow) 75%, transparent); transition: width .15s linear; }
/* soft comet glow riding the leading edge */
.hprog i::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%);
  border-radius: 50%; background: var(--cx-neon-yellow); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cx-neon-yellow) 80%, transparent); }

@media (max-width: 760px){
  .hstrip { height: auto; }
  .hstrip .pin { position: static; height: auto; min-height: auto; display: block; padding: 90px 0 40px; }
  .hstrip-head { position: relative; top: auto; margin-bottom: 30px; }
  .hstrip-track { flex-direction: column; transform: none !important; padding: 0 6vw; }
  .flavor { width: 100%; height: 64vh; }
  .hprog { display: none; }
}

/* ============================================================
   HANDMADE DAILY — process steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px; border-radius: var(--r-xl); background: var(--cx-bg-2); border: 1px solid var(--cx-hairline);
  transition: transform .5s, border-color .5s; }
.step:hover { transform: translateY(-6px); border-color: var(--cx-glass-border); }
.step .num { font-family: var(--cx-display); font-weight: 700; font-size: 15px; color: var(--cx-lead);
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--cx-lead) 40%, transparent);
  background: color-mix(in srgb, var(--cx-lead) 12%, transparent); }
.step h4 { font-size: 19px; margin-top: 20px; }
.step p { color: var(--fg-2); font-size: 14px; margin-top: 8px; }

/* ============================================================
   DELIVERY EXPERIENCE
   ============================================================ */
.delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
@media (max-width: 880px){ .delivery { grid-template-columns: 1fr; } }
.delivery-visual { position: relative; min-height: 440px; border-radius: var(--r-2xl); overflow: hidden;
  background: radial-gradient(120% 120% at 70% 10%, var(--cx-bg-3), var(--cx-ink)); border: 1px solid var(--cx-hairline);
  display: grid; place-items: center; }
.map-grid { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(var(--cx-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--cx-hairline) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%); }
.route { position: absolute; inset: 0; }
.pin-loc { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--cx-lead); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cx-lead) 22%, transparent), 0 0 22px var(--cx-lead); }
.pin-loc.dest { background: var(--cx-orange); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cx-orange) 22%, transparent), 0 0 22px var(--cx-orange); }
.eta-chip { position: relative; z-index: 2; text-align: center; }
.eta-chip .t { font-family: var(--cx-display); font-weight: 700; font-size: 64px; line-height: 1; }
.eta-chip .t b { color: var(--cx-lead); }
.eta-chip .l { color: var(--fg-3); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.feat-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat .ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--cx-glass); border: 1px solid var(--cx-glass-border); color: var(--cx-lead); }
.feat h4 { font-size: 16px; }
.feat p { color: var(--fg-2); font-size: 14px; margin-top: 3px; }

/* ============================================================
   MENU PREVIEW
   ============================================================ */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
@media (max-width: 820px){ .menu { grid-template-columns: 1fr; } }
.menu-item { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--cx-hairline); transition: padding .35s; cursor: pointer; }
.menu-item:hover { padding-left: 10px; }
.menu-item .nm { font-family: var(--cx-display); font-weight: 600; font-size: 20px; }
.menu-item:hover .nm { color: var(--cx-lead); }
.menu-item .ds { color: var(--fg-3); font-size: 13.5px; }
.menu-item .leader { flex: 1; border-bottom: 1px dotted var(--fg-4); transform: translateY(-4px); }
.menu-item .pr { font-family: var(--cx-display); font-weight: 700; font-size: 18px; color: var(--cx-lead-3); white-space: nowrap; }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .proof-grid { grid-template-columns: 1fr; } }
.quote { padding: 30px; border-radius: var(--r-2xl); background: var(--cx-bg-2); border: 1px solid var(--cx-hairline); }
.quote .stars { color: var(--cx-yellow); letter-spacing: 3px; font-size: 14px; }
.quote p { font-size: 16.5px; line-height: 1.55; margin-top: 16px; color: var(--fg); }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.quote .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.quote .who .nm { font-weight: 600; font-size: 14px; }
.quote .who .rl { color: var(--fg-3); font-size: 12.5px; }
.proof-stats { display: flex; gap: 50px; flex-wrap: wrap; justify-content: center; margin-top: 60px; text-align: center; }
.proof-stats .n { font-family: var(--cx-display); font-weight: 700; font-size: clamp(40px,5vw,64px); }
.proof-stats .n b { background: linear-gradient(120deg, var(--cx-lead), var(--cx-lead-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof-stats .l { color: var(--fg-3); font-size: 13px; letter-spacing: 0.08em; margin-top: 6px; }

/* ============================================================
   WHATSAPP ORDERING (mock chat)
   ============================================================ */
.wa-wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: center; }
@media (max-width: 900px){ .wa-wrap { grid-template-columns: 1fr; } }
.phone { width: 330px; max-width: 100%; margin-inline: auto; border-radius: 42px; padding: 12px; background: #050507;
  border: 1px solid var(--cx-glass-border); box-shadow: 0 50px 90px -40px rgba(0,0,0,0.95), 0 0 calc(60px*var(--cx-glow)) -20px var(--cx-lead);
  position: relative; }
.phone .notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; border-radius: 14px; background: #050507; z-index: 5; }
.phone-screen { border-radius: 32px; overflow: hidden; background: #0b141a; height: 600px; display: flex; flex-direction: column; }
.wa-top { background: #1f2c33; padding: 38px 16px 12px; display: flex; align-items: center; gap: 12px; }
.wa-top .av { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 200deg, var(--cx-emerald), var(--cx-yellow), var(--cx-orange)); display: grid; place-items: center; font-size: 16px; }
.wa-top .nm { font-weight: 600; font-size: 15px; }
.wa-top .st { font-size: 11.5px; color: #25d366; }
.wa-msgs { flex: 1; padding: 18px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(37,211,102,0.05), transparent 40%),
    #0b141a; }
.bub { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(10px); }
.bub.in { opacity: 1; transform: none; transition: opacity .4s, transform .4s; }
.bub.them { background: #1f2c33; align-self: flex-start; border-bottom-left-radius: 4px; }
.bub.me { background: #144d37; align-self: flex-end; border-bottom-right-radius: 4px; }
.bub .meta { display: block; font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 4px; text-align: right; }
.bub.menu-card { background: #1f2c33; padding: 6px; }
.bub.menu-card .row { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 9px; }
.bub.menu-card .row .mc { width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: radial-gradient(120% 120% at 30% 25%, var(--cx-gold-hi), var(--cx-gold) 40%, var(--cx-gold-deep)); }
.wa-input { padding: 9px 12px; background: #1f2c33; display: flex; align-items: center; gap: 9px; }
.wa-input .field { flex: 1; background: #0b141a; border-radius: var(--r-pill); padding: 9px 14px; color: var(--fg-3); font-size: 13px; }
.wa-input .send { width: 38px; height: 38px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #04210f; flex: none; }
.typing i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); margin: 0 1px; animation: typing 1.2s infinite; }
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typing { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }

.wa-copy .step-mini { display: flex; gap: 14px; margin-top: 22px; align-items: flex-start; }
.wa-copy .step-mini .b { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-family: var(--cx-display); color: #04210f; background: #25d366; font-size: 14px; }
.wa-copy .step-mini h4 { font-size: 16px; }
.wa-copy .step-mini p { color: var(--fg-2); font-size: 14px; margin-top: 2px; }

/* ============================================================
   BRAND STORY
   ============================================================ */
.story { position: relative; }
.story-quote { font-family: var(--cx-display); font-weight: 600; font-size: clamp(28px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.story-quote em { font-style: normal; background: linear-gradient(120deg, var(--cx-lead), var(--cx-lead-3) 60%, var(--cx-lead-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-meta { margin-top: 40px; display: flex; gap: 18px; align-items: center; }
.story-meta .seal { width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
  background: conic-gradient(from 200deg, var(--cx-emerald), var(--cx-yellow), var(--cx-orange), var(--cx-emerald)); }
.story-meta .seal i { width: 46px; height: 46px; border-radius: 12px; background: var(--cx-ink); display: grid; place-items: center; font-family: var(--cx-display); font-weight: 800; color: var(--cx-gold-hi); }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final { text-align: center; padding: clamp(90px,12vw,160px) 0; position: relative; }
.final h2 { font-size: clamp(40px, 6.5vw, 92px); letter-spacing: -0.03em; }
.final .glow-floor { position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%); width: 80%; height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cx-lead) 50%, transparent), transparent 64%); filter: blur(70px); opacity: calc(0.7*var(--cx-glow)); }
.footer { border-top: 1px solid var(--cx-hairline); padding: 50px 0 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h5 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; font-family: var(--cx-body); font-weight: 600; }
.footer-col a { display: block; color: var(--fg-2); font-size: 14.5px; padding: 5px 0; transition: color .25s; }
.footer-col a:hover { color: var(--cx-lead); }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--cx-hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-3); font-size: 13px; }

/* marquee flavor ticker */
.ticker { border-block: 1px solid var(--cx-hairline); padding: 22px 0; overflow: hidden; background: var(--cx-bg-2); position: relative; z-index: 2; }
.ticker-track { display: flex; gap: 50px; white-space: nowrap; width: max-content; animation: scrollx calc(36s / max(var(--cx-motion),0.4)) linear infinite; }
.ticker-track span { font-family: var(--cx-display); font-weight: 700; font-size: 22px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 50px; letter-spacing: -0.01em; }
.ticker-track span::after { content: "✦"; color: var(--cx-lead); font-size: 14px; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   INTRO CURTAIN
   ============================================================ */
/* ---- CINEMATIC INTRO ---- */
#intro { position: fixed; inset: 0; z-index: 9500; overflow: hidden; background: #050506;
  opacity: 1; transition: opacity .9s cubic-bezier(.4,0,.2,1); will-change: opacity; }
#intro.gone { opacity: 0; pointer-events: none; }

/* warm glow that emerges first */
.intro-glow { position: absolute; left: 50%; top: 52%; width: 92vw; max-width: 900px; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.6); opacity: 0; filter: blur(8px); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cx-gold) 42%, transparent), color-mix(in srgb, var(--cx-orange) 16%, transparent) 38%, transparent 66%);
  transition: opacity 1.1s ease, transform 3s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
#intro.s-glow .intro-glow, #intro.s-video .intro-glow { opacity: .85; transform: translate(-50%,-50%) scale(1); }

/* fullscreen cinematic video with slow ken-burns drift */
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.12); transition: opacity 1s ease; will-change: opacity, transform; }
#intro.s-video .intro-video { opacity: 1; animation: introKen 5.2s linear forwards; }
@keyframes introKen { from { transform: scale(1.12); } to { transform: scale(1.0); } }

/* warm tropical grade + cinematic vignette */
.intro-grade { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
  transition: opacity 1.1s ease;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cx-emerald) 24%, transparent) 0%, transparent 44%, color-mix(in srgb, var(--cx-orange) 28%, transparent) 100%); }
.intro-vignette { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.1s ease;
  background: radial-gradient(120% 92% at 50% 46%, transparent 50%, rgba(0,0,0,.64) 100%); }
#intro.s-video .intro-grade, #intro.s-video .intro-vignette { opacity: 1; }

/* soft ambient particles */
.intro-particles { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
#intro.s-glow .intro-particles, #intro.s-video .intro-particles { opacity: 1; }
#intro.dissolve .intro-particles { opacity: 0; transition: opacity .6s ease; }
.intro-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--cx-gold-hi) 92%, #fff); box-shadow: 0 0 8px var(--cx-gold-hi);
  opacity: 0; animation: introFloat linear infinite; will-change: transform, opacity; }
@keyframes introFloat { 0%{ transform: translateY(24px); opacity: 0; } 16%{ opacity:.7; } 84%{ opacity:.55; } 100%{ transform: translateY(-66px); opacity: 0; } }

/* brand reveal (logo + tagline) */
.intro-brand { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; z-index: 3; padding: 0 24px; }
.intro-brand .seal { width: 70px; height: 70px; border-radius: 20px; margin: 0 auto 18px; display: grid; place-items: center;
  background: conic-gradient(from 200deg, var(--cx-emerald), var(--cx-yellow), var(--cx-orange), var(--cx-emerald));
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.7), 0 0 24px -10px color-mix(in srgb, var(--cx-gold) 55%, transparent);
  opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.intro-brand .seal i { width: 56px; height: 56px; border-radius: 14px; background: #0a0a0c; display: grid; place-items: center; font-family: var(--cx-display); font-weight: 800; font-size: 28px; color: var(--cx-gold-hi); }
.intro-brand .nm { font-family: var(--cx-display); font-weight: 700; font-size: clamp(26px,5vw,40px); letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.intro-brand .ln { font-size: clamp(10px,2.4vw,13px); letter-spacing: 0.5em; text-transform: uppercase; margin-top: 12px;
  color: color-mix(in srgb, var(--cx-gold-hi) 82%, #fff);
  opacity: 0; transform: translateY(8px); transition: opacity .8s ease .05s, transform .8s cubic-bezier(.16,1,.3,1) .05s, letter-spacing .9s ease; }
#intro.s-logo .intro-brand .seal, #intro.s-logo .intro-brand .nm, #intro.s-logo .intro-brand .ln { opacity: 1; transform: none; }
#intro.s-logo .intro-brand .ln { letter-spacing: 0.34em; }

/* tropical light sweep on reveal */
.intro-sweep { position: absolute; inset: -20% -40%; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-120%) rotate(8deg);
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--cx-gold-hi) 50%, transparent) 50%, transparent 58%); }
#intro.dissolve .intro-sweep { opacity: .9; transform: translateX(120%) rotate(8deg); transition: transform 1s cubic-bezier(.4,0,.2,1), opacity 1s ease; }

/* reveal: video/overlays dissolve so the hero crossfades through */
#intro.dissolve .intro-video, #intro.dissolve .intro-grade, #intro.dissolve .intro-vignette, #intro.dissolve .intro-brand { opacity: 0; transition: opacity .8s ease; }

/* skip button */
.intro-skip { position: absolute; z-index: 6; top: calc(18px + env(safe-area-inset-top,0px)); right: 18px;
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--r-pill);
  font: inherit; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .5s ease .25s, background .2s, transform .2s; }
#intro:not(.gone) .intro-skip { opacity: 1; }
.intro-skip:hover { background: rgba(255,255,255,.14); transform: translateX(2px); }
.intro-skip svg { width: 14px; height: 14px; }

body.intro-active { overflow: hidden; }

/* letterbox bars (open as part of the reveal) */
.bar { position: fixed; left: 0; right: 0; height: 50vh; background: #050506; z-index: 9400; pointer-events: none; transition: transform 1s cubic-bezier(.76,0,.24,1); }
.bar.top { top: 0; } .bar.bot { bottom: 0; }
body.curtain-open .bar.top { transform: translateY(-100%); }
body.curtain-open .bar.bot { transform: translateY(100%); }
@keyframes fadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .r, .fade-up { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
}

/* ============================================================
   COOKIE CONSENT — premium glass banner + preferences modal
   ============================================================ */
#cx-cookie { position: fixed; inset: 0; z-index: 9600; pointer-events: none; }
#cx-cookie button { font-family: var(--cx-body); cursor: pointer; }

.cx-cc-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  color: var(--cx-neon-green); background: color-mix(in srgb, var(--cx-neon-green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cx-neon-green) 35%, transparent); }
.cx-cc-ic svg { width: 22px; height: 22px; }
.cx-cc-ic.sm { width: 34px; height: 34px; } .cx-cc-ic.sm svg { width: 18px; height: 18px; }

/* banner */
.cx-cc-banner {
  pointer-events: auto; position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%);
  width: min(680px, calc(100vw - 28px)); display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,21,17,0.86), rgba(11,12,16,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.9),
    0 0 50px -26px color-mix(in srgb, var(--cx-neon-green) 70%, transparent),
    0 1px 0 rgba(255,255,255,0.08) inset;
  opacity: 0; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.cx-cc-banner.show { transform: translate(-50%, 0); opacity: 1; }
.cx-cc-text b { font-family: var(--cx-display); font-size: 15px; }
.cx-cc-text p { color: var(--fg-2); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.cx-cc-actions { display: flex; gap: 8px; flex: none; }

.cx-cc-btn { border: 0; border-radius: var(--r-pill); padding: 11px 16px; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.cx-cc-btn:hover { transform: translateY(-2px); }
.cx-cc-btn.ghost { background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.14); }
.cx-cc-btn.ghost:hover { background: rgba(255,255,255,0.12); }
.cx-cc-btn.primary { color: #03210f;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cx-neon-green) 92%, white), var(--cx-neon-green));
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--cx-neon-green) 80%, transparent); }
.cx-cc-btn:focus-visible { outline: 2px solid var(--cx-neon-yellow); outline-offset: 2px; }

/* modal */
.cx-cc-modal { pointer-events: auto; position: fixed; inset: 0; display: grid; place-items: center; padding: 18px; z-index: 9700; }
.cx-cc-modal[hidden] { display: none; }
.cx-cc-scrim { position: absolute; inset: 0; background: rgba(4,5,7,0.6); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .32s; }
.cx-cc-modal.show .cx-cc-scrim { opacity: 1; }
.cx-cc-sheet { position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto;
  border-radius: 26px; padding: 24px;
  background: linear-gradient(180deg, rgba(22,23,18,0.96), rgba(12,13,17,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.95), 0 0 60px -30px color-mix(in srgb, var(--cx-neon-green) 60%, transparent);
  transform: translateY(20px) scale(.97); opacity: 0; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .35s; }
.cx-cc-modal.show .cx-cc-sheet { transform: none; opacity: 1; }
.cx-cc-sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.cx-cc-sheet-head b { font-family: var(--cx-display); font-size: 18px; }
.cx-cc-sheet-head p { color: var(--fg-2); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.cx-cc-x { margin-left: auto; background: rgba(255,255,255,0.06); border: 0; color: var(--fg-2); width: 30px; height: 30px;
  border-radius: 50%; font-size: 13px; flex: none; }
.cx-cc-x:hover { background: rgba(255,255,255,0.14); color: var(--fg); }
.cx-cc-cats { margin: 18px 0; display: flex; flex-direction: column; gap: 2px; }
.cx-cc-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.cx-cc-cat:last-child { border-bottom: 0; }
.cx-cc-cat b { font-size: 14.5px; } .cx-cc-cat p { color: var(--fg-3); font-size: 12.5px; margin-top: 3px; line-height: 1.45; max-width: 320px; }
.cx-cc-sheet-foot { display: flex; gap: 10px; }
.cx-cc-sheet-foot .cx-cc-btn { flex: 1; text-align: center; padding: 13px; }

/* toggle */
.cx-cc-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.cx-cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cx-cc-track { width: 46px; height: 27px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16); position: relative; transition: background .3s; }
.cx-cc-thumb { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; transition: transform .3s cubic-bezier(.3,.8,.3,1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.cx-cc-toggle input:checked + .cx-cc-track { background: var(--cx-neon-green);
  box-shadow: 0 0 16px -3px color-mix(in srgb, var(--cx-neon-green) 80%, transparent); }
.cx-cc-toggle input:checked + .cx-cc-track .cx-cc-thumb { transform: translateX(19px); }
.cx-cc-toggle.locked { opacity: .9; }
.cx-cc-toggle.locked em { font-style: normal; font-size: 11px; color: var(--cx-neon-green); font-weight: 600; }
.cx-cc-toggle.locked .cx-cc-track { display: none; }

@media (max-width: 620px){
  .cx-cc-banner { flex-direction: column; align-items: flex-start; gap: 12px; bottom: 10px; padding: 16px; }
  .cx-cc-actions { width: 100%; flex-wrap: wrap; }
  .cx-cc-actions .cx-cc-btn { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .cx-cc-banner, .cx-cc-sheet, .cx-cc-scrim { transition: opacity .2s !important; transform: none !important; }
}

/* footer contact strip + cookie reopen */
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--cx-hairline); }
.foot-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--fg-2); background: rgba(255,255,255,0.04);
  border: 1px solid var(--cx-hairline); transition: color .25s, background .25s, border-color .25s; }
button.foot-chip { cursor: pointer; font-family: var(--cx-body); }
.foot-chip:hover { color: var(--fg); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.foot-chip .dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px 0 currentColor; flex: none; }
.foot-social { margin-left: auto; display: flex; gap: 18px; }
.foot-social a { font-size: 13px; color: var(--fg-3); transition: color .25s; }
.foot-social a:hover { color: var(--cx-neon-green); }
@media (max-width: 620px){ .foot-social { margin-left: 0; width: 100%; } }

/* shared helper used by exported sub-pages (small caption heading) */
.h-small { font-family: var(--cx-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--fg-2); }

/* ============================================================
   DELIVERY — cinematic Brazilian night scene
   ============================================================ */
.delivery-visual.cx-night {
  min-height: 460px; border-radius: var(--r-2xl); overflow: hidden;
  background: #06070d; border: 1px solid var(--cx-hairline);
  box-shadow: 0 40px 90px -50px #000, 0 0 0 1px rgba(255,255,255,.03) inset;
  isolation: isolate;
}
.cx-night .nz { position: absolute; inset: 0; pointer-events: none; }
/* sky: deep royal-blue night fading to ink */
.nz-sky {
  background:
    radial-gradient(120% 80% at 70% -10%, #1b2f6b 0%, #0c1430 38%, #06070d 78%),
    linear-gradient(180deg, #0a1230, #06070d 70%);
}
/* warm ambient city glow rising from the street */
.nz-glow {
  background:
    radial-gradient(60% 38% at 50% 100%, rgba(232,163,61,.30), transparent 70%),
    radial-gradient(40% 30% at 18% 96%, rgba(27,153,139,.28), transparent 72%),
    radial-gradient(40% 30% at 86% 92%, rgba(78,140,255,.24), transparent 72%);
  mix-blend-mode: screen; filter: blur(6px);
}
/* skyline silhouette + glowing windows */
.nz-skyline {
  bottom: 30%; top: auto; height: 46%;
  background:
    /* windows */
    radial-gradient(1.5px 1.5px at 12% 60%, rgba(255,210,120,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 40%, rgba(120,220,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,210,120,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 50%, rgba(120,255,200,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 66%, rgba(255,210,120,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 42%, rgba(160,190,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 64%, rgba(255,210,120,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 48%, rgba(120,255,200,.8), transparent 60%),
    /* building blocks */
    linear-gradient(90deg,
      #0b1130 0 8%, #0e1638 8% 16%, #0a1030 16% 27%, #111a40 27% 34%,
      #0b1232 34% 47%, #0e1740 47% 55%, #0a1030 55% 67%, #101a42 67% 74%,
      #0b1130 74% 86%, #0e1638 86% 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%);
  mask-image: linear-gradient(180deg, transparent, #000 18%);
  opacity: .9;
}
/* wet reflective street */
.nz-street {
  top: auto; bottom: 0; height: 32%;
  background:
    linear-gradient(180deg, transparent, rgba(8,10,20,.6) 30%, #04050a 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
  box-shadow: 0 -1px 0 rgba(255,255,255,.05) inset;
}
.nz-street::after { /* shimmering reflections */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 30% 30%, rgba(27,153,139,.25), transparent 70%),
    radial-gradient(50% 70% at 72% 20%, rgba(232,163,61,.22), transparent 72%);
  filter: blur(8px); opacity: .8; mix-blend-mode: screen;
  animation: nzShimmer 7s ease-in-out infinite alternate;
}
@keyframes nzShimmer { from { transform: translateX(-3%) } to { transform: translateX(3%) } }
/* diagonal rain */
.nz-rain {
  background-image: repeating-linear-gradient(74deg, rgba(180,200,255,.16) 0 1px, transparent 1px 9px);
  opacity: .35; mix-blend-mode: screen;
  animation: nzRain .6s linear infinite;
}
@keyframes nzRain { from { background-position: 0 0 } to { background-position: 12px 44px } }
/* route */
.nz-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.nz-route-glow { stroke-dasharray: 26 200; animation: nzDash 5.5s linear infinite; }
@keyframes nzDash { to { stroke-dashoffset: -226; } }
.nz-scooter { filter: drop-shadow(0 0 5px #ffd98a) drop-shadow(0 0 12px rgba(232,163,61,.9)); }
/* origin + destination pins */
.nz-pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; z-index: 3; transform: translate(-50%,-50%); }
.nz-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: nzPulse 2.4s ease-out infinite; }
.nz-pin.origin { left: 9%;  top: 87%; color: var(--cx-neon-green); background: radial-gradient(circle, #fff, var(--cx-neon-green) 70%); box-shadow: 0 0 14px var(--cx-neon-green); }
.nz-pin.dest   { left: 93%; top: 15%; color: var(--cx-neon-yellow); background: radial-gradient(circle, #fff, var(--cx-neon-yellow) 70%); box-shadow: 0 0 16px var(--cx-neon-yellow); }
@keyframes nzPulse { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(2.1); opacity: 0 } }
/* warm steam near destination */
.nz-steam { position: absolute; right: 7%; top: 6%; width: 60px; height: 90px; z-index: 3; }
.nz-steam i { position: absolute; bottom: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,245,225,.5); filter: blur(5px); animation: nzSteam 4.5s ease-in infinite; }
.nz-steam i:nth-child(2) { left: 30%; animation-delay: 1.4s; }
.nz-steam i:nth-child(3) { left: 70%; animation-delay: 2.6s; }
@keyframes nzSteam { 0% { transform: transl(0) scale(.6); opacity: 0 } 25% { opacity: .7 } 100% { transform: translateY(-70px) scale(1.6); opacity: 0 } }
/* ETA glass chip */
.cx-night .eta-chip {
  position: absolute; z-index: 4; left: 22px; bottom: 22px; text-align: left;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(10,14,26,.5); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -22px #000, 0 0 0 1px rgba(255,255,255,.05) inset;
}
.cx-night .eta-chip .t { font-family: var(--cx-display); font-weight: 800; font-size: 40px; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.cx-night .eta-chip .t b { color: var(--cx-neon-yellow); }
.cx-night .eta-chip .t small { font-size: 15px; font-weight: 600; color: var(--fg-2); }
.cx-night .eta-chip .l { color: var(--fg-3); font-size: 12px; letter-spacing: .04em; margin-top: 6px; }
/* copy side */
.del-head { font-size: clamp(34px, 5vw, 62px); margin-top: 16px; letter-spacing: -.025em; line-height: 1.02; }
.del-sub { color: var(--fg-2); margin-top: 18px; font-size: 17px; max-width: 460px; }
.del-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.del-tag { font-size: 13px; font-weight: 600; color: var(--fg); padding: 9px 15px; border-radius: 999px;
  background: var(--cx-glass); border: 1px solid var(--cx-glass-border); }
@media (prefers-reduced-motion: reduce) {
  .nz-rain, .nz-route-glow, .nz-steam i, .nz-street::after, .nz-pin::after { animation: none !important; }
}