/* ============================================================================
   Happy B-Town — website design system
   Tokens are lifted verbatim from the Flutter app (app/user/lib/core/
   constants/app_colors.dart + theme/custom_text_style.dart + utils/
   dimensions.dart) so the site and the app read as one brand.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Light.woff2?v=2b61799f') format('woff2');      font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.woff2?v=2b61799f') format('woff2');    font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.woff2?v=2b61799f') format('woff2');     font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff2?v=2b61799f') format('woff2');   font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.woff2?v=2b61799f') format('woff2');       font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ExtraBold.woff2?v=2b61799f') format('woff2');  font-weight: 800; font-display: swap; }
@font-face { font-family: 'Marker';  src: url('../fonts/PermanentMarker-Regular.woff2?v=2b61799f') format('woff2'); font-weight: 400; font-display: swap; }
/* --------------------------------------------------------------- tokens -- */
:root {
  /* Brand — identical in both themes, exactly as the app treats it. */
  --brand:        #F4B942;
  --on-brand:     #1A1A1A;

  /* Light theme (AppColors.light*) */
  --brand-deep:   #E0A32E;
  --brand-soft:   #FDF0D0;
  --bg:           #FAF7F0;
  --surface:      #FFFFFF;
  --surface-2:    #F3F4F6;
  --text:         #1A1A1A;
  --text-muted:   #6B6B6B;
  --border:       #E5E7EB;
  --fill:         #E3E8EF;

  --success:      #2E9E5B;
  --danger:       #E5484D;
  --info:         #2F80ED;
  --warning:      #F59E0B;

  /* Type scale — the app's 28/24/20/18/16/14/12/11 ladder, made fluid. */
  --t-hero:  clamp(2.6rem, 1.4rem + 5vw, 5.25rem);
  --t-28:    clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --t-24:    clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --t-20:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-18:    1.125rem;
  --t-16:    1rem;
  --t-14:    0.875rem;
  --t-12:    0.75rem;
  --t-11:    0.6875rem;

  /* Radii — Dimensions.cardRadius 12 / sheetRadius 16 / chip 20 / pill 28 */
  --r-card:  12px;
  --r-sheet: 16px;
  --r-lg:    24px;
  --r-chip:  20px;
  --r-pill:  999px;

  /* Shadows — SPEC §10.1: y2 blur12 soft card, y-2 blur16 sticky footer. */
  --shadow-sm:  0 2px 12px rgba(0,0,0,.06);
  --shadow-md:  0 8px 28px rgba(0,0,0,.08);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.12);
  --shadow-brand: 0 14px 34px rgba(244,185,66,.38);

  /* Panels are not a flat fill any more: a very shallow top-to-bottom
     gradient plus a resting shadow is what separates a card from the page
     behind it before you hover anything. Built from the theme tokens, so it
     inverts with the palette rather than needing a dark-mode twin. */
  --card-face: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 52%, var(--surface)) 100%);
  --ico-face:  linear-gradient(150deg, color-mix(in srgb, var(--brand) 30%, var(--surface)), var(--brand-soft) 72%);
  --ico-ring:  inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
  --brand-face: linear-gradient(135deg, #FFD98A 0%, var(--brand) 45%, var(--brand-deep) 100%);

  --nav-h: 76px;
  --strip-h: 38px;                       /* the announcement band above the nav */
  --top-h: calc(var(--nav-h) + var(--strip-h));
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-bump: cubic-bezier(.34,1.56,.64,1);
  --container: 1200px;
}
html[data-theme="dark"] {
  --brand-deep:   #F7C860;
  --brand-soft:   #3B2F16;
  --bg:           #121110;
  --surface:      #1C1A18;
  --surface-2:    #26231F;
  --text:         #F2EFE9;
  --text-muted:   #A39D94;
  --border:       #34302B;
  --fill:         #3A3630;

  --success:      #4CC98A;
  --danger:       #FF6E72;
  --info:         #5B9DF9;
  --warning:      #FBBF24;

  --shadow-sm:  0 2px 12px rgba(0,0,0,.35);
  --shadow-md:  0 8px 28px rgba(0,0,0,.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.6);
  --shadow-brand: 0 14px 34px rgba(244,185,66,.22);
}
/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* Marquee tracks are wider than the viewport by design, so the clip has to sit
     on html as well — body alone still lets some mobile browsers scroll
     sideways. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 20px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-16);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  transition: background .45s var(--ease), color .45s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--brand); color: var(--on-brand); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--brand-deep); border-radius: 99px; border: 3px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; border-radius: 4px; }
/* ------------------------------------------------------------ primitives -- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2.5rem, 1440px); margin-inline: auto; }
section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.wordmark {
  font-family: 'Marker', cursive;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.05;
}
/* The brand name itself is a drawn wordmark. It is stamped through a mask
   rather than dropped in as an <img> so it picks up currentColor and keeps
   inverting with the theme; --brandmark-h drives the size, the width follows
   the artwork's 6.638:1 ratio.

   That ratio is the artwork's own, so name-logo.webp must stay trimmed to its
   ink — mask-size is 100% 100%, which stretches whatever it is given to fill
   the box. Transparent padding in the file, or a different aspect ratio, comes
   out as a squashed wordmark rather than a smaller one. */
.brandmark {
  display: block;
  flex: none;
  height: var(--brandmark-h, 1.15rem);
  width: calc(var(--brandmark-h, 1.15rem) * 6.638);
  background: currentColor;
  -webkit-mask: url(../img/brand/name-logo.webp?v=2b61799f) no-repeat center / 100% 100%;
  mask: url(../img/brand/name-logo.webp?v=2b61799f) no-repeat center / 100% 100%;
}
h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-28); }
h3 { font-size: var(--t-20); }
.lead { font-size: clamp(1rem, .95rem + .35vw, 1.175rem); color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.section-head { position: relative; isolation: isolate; max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-inline: auto; margin-top: 1rem; }
/* A barely-there warm haze sitting behind the title. It is what stops a section
   head from reading as text dropped onto a flat band. */
.section-head::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -2.75rem; transform: translateX(-50%);
  width: min(620px, 108%); height: 15rem;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand) 17%, transparent), transparent 70%);
}
/* The kicker above a heading — one or two words naming the section, in the same
   soft-yellow chip the app uses for its own labels. Decorative: it repeats what
   the heading already says, so it carries no landmark role of its own. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .34rem .95rem .34rem .78rem; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  font-size: var(--t-11); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-deep); }
.section-head .eyebrow { margin-bottom: 1.15rem; }
.split-copy .eyebrow { margin-bottom: .25rem; }
/* Yellow marker underline that sweeps in when scrolled to. */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl::after {
  content: ''; position: absolute; left: -.1em; right: -.1em; bottom: .04em; height: .34em;
  background: var(--brand); border-radius: 3px; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ease) .2s;
}
.is-in .hl::after, .hl.is-in::after { transform: scaleX(1); }
/* ------------------------------------------------------------- buttons --- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.75rem; border-radius: var(--r-pill);
  font-size: var(--t-14); font-weight: 600; letter-spacing: .01em;
  border: 2px solid transparent; cursor: pointer; overflow: hidden;
  transition: transform .35s var(--ease-bump), box-shadow .35s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn::after {                       /* sheen sweep on hover */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--brand-face); color: var(--on-brand); box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(244,185,66,.5); }
.btn-dark { background: var(--text); color: var(--bg); }
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-ghost { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-3px); }
.btn-lg { padding: 1.1rem 2.25rem; font-size: var(--t-16); }
.btn-sm { padding: .6rem 1.15rem; font-size: var(--t-12); }
.btn-group { display: flex; flex-wrap: wrap; gap: .9rem; }
/* ---------------------------------------------------------- store CTAs --- */
/* Official Google Play / App Store artwork. Both vendors forbid recoloring,
   cropping or restyling their badge, so nothing here touches the image itself —
   only its scale and the clear space each brand requires around it.

   The Play PNG ships with that clear space baked into the canvas (the black box
   is 168 of the asset's 250px height); Apple's SVG does not, so .apple adds the
   quarter-height padding their guidelines ask for. Sizing both so the black
   boxes land on the same 44px height is what makes them line up. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.store-badge { display: inline-block; flex: none; transition: transform .35s var(--ease-bump), opacity .3s; }
.store-badge img { height: 74px; width: auto; }          /* 74 x 168/250 ≈ 50px badge box */
.store-badge.apple { padding: 12px; }                     /* Apple's required clear space */
.store-badge.apple img { height: 50px; }
.store-badge:hover { transform: translateY(-3px); }
.store-badge:active { transform: scale(.97); }
/* Apple's terms only allow their badge to link to a live listing, so an
   unreleased iOS build gets a plain note instead of a dressed-up dead badge. */
.store-soon {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  font-size: var(--t-12); color: var(--text-muted);
  padding-left: 1rem; border-left: 2px dashed var(--border);
}
.store-soon b { font-size: var(--t-14); font-weight: 600; color: var(--text); }
.cta .store-badges { justify-content: center; }
.cta .store-soon { color: color-mix(in srgb, var(--on-brand) 72%, transparent); border-left-color: rgba(26,26,26,.28); }
.cta .store-soon b { color: var(--on-brand); }
/* --------------------------------------------------------------- header -- */
.site-top { position: fixed; inset: 0 0 auto 0; z-index: 900; transition: transform .45s var(--ease); }
.site-top.is-hidden { transform: translateY(-100%); }
.site-header {
  position: relative; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: height .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Over a photographic hero the bar starts invisible so the image runs edge to
   edge behind it, then takes its surface back the moment the page scrolls.
   Scoped to :not(.is-stuck) so the stuck state needs no counter-rules. */
body.has-hero-media .site-header:not(.is-stuck) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
body.has-hero-media .site-header:not(.is-stuck) .brand-lockup .brandmark { color: #FBF7EF; }
body.has-hero-media .site-header:not(.is-stuck) .nav a { color: rgba(251,247,239,.78); }
body.has-hero-media .site-header:not(.is-stuck) .nav a:hover,
body.has-hero-media .site-header:not(.is-stuck) .nav a[aria-current="page"] { color: #FBF7EF; }
body.has-hero-media .site-header:not(.is-stuck) .icon-btn,
body.has-hero-media .site-header:not(.is-stuck) .burger {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); color: #FBF7EF;
}
body.has-hero-media .site-header:not(.is-stuck) .burger span { background: #FBF7EF; }
.site-header.is-stuck { height: 64px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container-wide { display: flex; align-items: center; gap: 1.5rem; width: min(100% - 2rem, 1440px); }
.brand-lockup { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand-lockup img { width: 42px; height: 42px; border-radius: 11px; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-bump); }
.brand-lockup:hover img { transform: rotate(-8deg) scale(1.08); }
.brand-lockup .brandmark { --brandmark-h: 1.3rem; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative; padding: .55rem .9rem; border-radius: var(--r-chip);
  font-size: var(--t-14); font-weight: 500; color: var(--text-muted);
  transition: color .28s var(--ease), background .28s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 50%; bottom: .28rem; width: 0; height: 2px;
  background: var(--brand); border-radius: 2px;
  transform: translateX(-50%); transition: width .35s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { width: 42%; }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav a[aria-current="page"]::after { width: 42%; }
.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); flex: none;
  transition: transform .4s var(--ease-bump), border-color .3s, background .3s, color .3s;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { transform: translateY(-2px) rotate(12deg); border-color: var(--brand); color: var(--brand-deep); }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); position: relative; }
.burger span { position: absolute; left: 12px; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .4s var(--ease), opacity .25s; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 890;
  background: var(--bg);
  padding: calc(var(--top-h) + 2rem) 1.75rem 2rem;
  display: flex; flex-direction: column; gap: .25rem;
  clip-path: circle(0% at calc(100% - 44px) 38px);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
  overflow-y: auto;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); pointer-events: auto; }
.drawer a {
  font-size: 1.5rem; font-weight: 600; padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateX(-26px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.drawer.is-open a { opacity: 1; transform: none; }
.drawer a:hover { color: var(--brand-deep); }
.drawer .btn { margin-top: 1.75rem; opacity: 0; transition: opacity .5s var(--ease) .45s; }
.drawer.is-open .btn { opacity: 1; }
/* --------------------------------------------------------- page progress -- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 999;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transform: scaleX(0); transform-origin: left;
}
/* ------------------------------------------------------------ preloader -- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 1.5rem;
  background: var(--bg);
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader .p-inner { display: grid; place-items: center; gap: 1.25rem; }
.preloader img { width: 78px; height: 78px; border-radius: 20px; animation: loaderPop 1.4s var(--ease-bump) infinite; }
@keyframes loaderPop { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.13) rotate(4deg); } }
.preloader .brandmark { --brandmark-h: 1.4rem; }
.loader-bar { width: 170px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--brand); animation: loaderSlide 1.15s var(--ease) infinite; }
@keyframes loaderSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
/* -------------------------------------------------------- scroll reveal -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="flip"]  { transform: perspective(900px) rotateX(-16deg) translateY(30px); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  /* The marquee is decorative — park it at the start rather than letting the
     0.01ms override snap it to -50%. */
  .announce__track { animation: none !important; transform: none !important; }
}
/* --------------------------------------------------------------- decor --- */
.blob {
  position: absolute; border-radius: 50%; filter: blur(75px);
  opacity: .5; pointer-events: none; z-index: 0;
  animation: blobDrift 22s ease-in-out infinite alternate;
}
html[data-theme="dark"] .blob { opacity: .22; }
@keyframes blobDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(46px,-34px) scale(1.14); }
  100% { transform: translate(-30px,26px) scale(.94); }
}
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; z-index: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-deep) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}
/* Floating fruit emoji that drift behind the hero. */
.float-fruit { position: absolute; font-size: 2.6rem; opacity: .8; z-index: 1; pointer-events: none; will-change: transform;
  animation: floatY 7s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.14)); }
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-26px) rotate(8deg); } }
/* ----------------------------------------------------------------- hero -- */
/* Full-bleed photographic banner: one image behind everything, a scrim that
   buys legibility, and centered type over the top. Patterned on the hero at
   drinkjoyrush.com — the treatment, not the typefaces; the wordmark and Poppins
   stay so it still reads as Happy B-Town. */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 900px);
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--top-h) + 4rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Two scrims doing different jobs: a warm ink wash for overall contrast, and a
   stronger center pool so the headline never sits on a bright highlight. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20,17,14,.72), transparent 72%),
    linear-gradient(180deg, rgba(20,17,14,.66) 0%, rgba(20,17,14,.52) 45%, rgba(20,17,14,.78) 100%);
}
/* A slow drift, so a still photograph does not feel like a dead backdrop. */
.hero__media img { animation: heroDrift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroDrift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%,-1.5%,0); } }
.hero__inner { position: relative; z-index: 2; max-width: 60rem; }
.hero h1 {
  font-size: clamp(2.5rem, 1.1rem + 6.2vw, 6rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.02;
  text-transform: uppercase;
  color: #FBF7EF;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
  margin-bottom: 1.5rem;
}
/* The script line is the brand's own voice — it stays sentence case, because
   the marker face has no real capitals to shout with. */
.hero h1 .wordmark {
  display: block; text-transform: none;
  font-size: .82em; color: var(--brand); letter-spacing: 0;
  margin-top: .12em;
}
.hero__sub {
  max-width: 34rem; margin: 0 auto 2.5rem;
  font-size: var(--t-12); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.85;
  color: rgba(251,247,239,.86);
}
/* CTA: a wide pill next to a detached round button, as in the reference. */
.hero__cta { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.hero-pill, .hero-round {
  background: #FBF7EF; color: #1A1A1A;
  border-radius: var(--r-pill);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .35s var(--ease-bump), background .3s, color .3s, box-shadow .35s;
}
.hero-pill { padding: 1.05rem 2.4rem; font-size: var(--t-12); }
.hero-round { width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.hero-round svg { width: 20px; height: 20px; }
.hero-pill:hover, .hero-round:hover {
  background: var(--brand); color: var(--on-brand);
  transform: translateY(-3px); box-shadow: 0 16px 38px rgba(244,185,66,.42);
}
.hero-round:hover { transform: translateY(-3px) rotate(45deg); }
/* Scroll hint pinned to the bottom of the frame. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  z-index: 2; display: grid; place-items: center; gap: .5rem;
  font-size: var(--t-11); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,247,239,.62);
}
.hero__scroll i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(251,247,239,.75));
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 860px) {
  .hero { min-height: min(92svh, 760px); }
  .hero__scroll { display: none; }
}
/* ---------------------------------------------------- announcement band -- */
/* A flat, full-bleed strip of short brand lines that scrolls sideways, each
   phrase preceded by a sparkle glyph. Two sizes off one component: .announce
   is the slim bar pinned above the nav, .announce--lg the loud section divider.

   Two identical runs sit side by side and the track translates to exactly -50%,
   which is one run's width, so the loop has no seam. The second run is hidden
   from assistive tech — it is the same sentence twice, and a screen reader
   should hear it once. */
.announce {
  --announce-bg: var(--brand);
  --announce-fg: var(--on-brand);
  background: var(--announce-bg); color: var(--announce-fg);
  overflow: hidden; position: relative; z-index: 3;
  height: var(--strip-h); display: flex; align-items: center;
}
.announce__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
/* One run is exactly half the track, so -50% lands the second run where the
   first started — a seamless loop with no jump. */
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.announce:hover .announce__track { animation-play-state: paused; }
.announce__run { display: inline-flex; align-items: center; }
.announce__item {
  display: inline-flex; align-items: center; gap: 1.15rem;
  padding-right: 1.15rem;
  font-size: var(--t-12); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.announce__item svg { width: 11px; height: 11px; flex: none; }
/* The loud variant — same component, dialled up, used to break sections. */
.announce--lg {
  --announce-bg: #1A1A1A;
  --announce-fg: var(--brand);
  height: auto;
}
.announce--lg .announce__track { animation-duration: 52s; }
.announce--lg .announce__item {
  gap: 1.9rem; padding-right: 1.9rem;
  padding-block: 1.15rem;
  font-size: clamp(.9rem, .8rem + .45vw, 1.2rem);
  letter-spacing: .08em;
}
.announce--lg .announce__item svg { width: 17px; height: 17px; }
/* ------------------------------------------------------------ categories -- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; }
.cat-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--card-face); border: 1px solid var(--border);
  border-radius: var(--r-sheet); padding: 1.6rem 1.25rem; box-shadow: var(--shadow-sm);
  text-align: center; transition: transform .5s var(--ease-bump), box-shadow .5s var(--ease), border-color .4s;
}
.cat-card::before {
  content: ''; position: absolute; inset: auto -20% -70% -20%; height: 150%; z-index: -1;
  background: radial-gradient(circle at 50% 100%, var(--brand-soft), transparent 68%);
  transform: translateY(58%); transition: transform .65s var(--ease);
}
.cat-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.cat-card:hover::before { transform: translateY(0); }
.cat-card .ico {
  width: 66px; height: 66px; margin: 0 auto .95rem; border-radius: var(--r-card);
  display: grid; place-items: center; font-size: 2rem;
  background: var(--ico-face); box-shadow: var(--ico-ring);
  transition: transform .55s var(--ease-bump), border-radius .5s;
}
.cat-card:hover .ico { transform: scale(1.12) rotate(-9deg); border-radius: 50%; }
.cat-card h3 { font-size: var(--t-16); margin-bottom: .3rem; }
.cat-card p { font-size: var(--t-12); color: var(--text-muted); line-height: 1.5; }
.cat-card .count { display: inline-block; margin-top: .8rem; font-size: var(--t-11); font-weight: 700; color: var(--brand-deep); }
/* The department grid holds fourteen tiles. It keeps the shared .cat-grid
   columns — five abreast on desktop lands it on 5/5/4 with no stranded card —
   and only trims the tiles down where two have to share a phone screen. */
@media (max-width: 560px) {
  .dept-grid .cat-card { padding: 1.25rem .9rem; }
  .dept-grid .ico { width: 54px; height: 54px; font-size: 1.6rem; }
}
/* ------------------------------------------------------------- products -- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.25rem; }
.prod-card {
  position: relative; background: var(--card-face); border: 1px solid var(--border);
  border-radius: var(--r-sheet); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-bump), box-shadow .5s var(--ease), border-color .4s;
}
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.prod-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prod-card:hover .prod-media img { transform: scale(1.11) rotate(1.5deg); }
.prod-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.4), transparent 45%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.prod-card:hover .prod-media::after { opacity: 1; }
.prod-tag {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-size: var(--t-11); font-weight: 700; padding: .28rem .65rem;
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}
.prod-tag.imported { background: var(--info); color: #fff; }
.prod-tag.cut { background: var(--success); color: #fff; }
.prod-fav {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px); color: var(--text-muted);
  transform: translateY(-8px); opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease-bump), color .25s, background .25s;
}
.prod-card:hover .prod-fav { opacity: 1; transform: none; }
.prod-fav:hover { color: var(--danger); background: var(--surface); }
.prod-fav svg { width: 17px; height: 17px; }
.prod-fav.is-on { opacity: 1; transform: none; color: var(--danger); }
.prod-fav.is-on svg { fill: currentColor; }
.prod-body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font-size: var(--t-14); font-weight: 600; line-height: 1.35; margin-bottom: .3rem; }
.prod-body .units { font-size: var(--t-11); color: var(--text-muted); margin-bottom: .85rem; }
.prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.prod-price { font-size: var(--t-12); font-weight: 700; color: var(--brand-deep); line-height: 1.25; }
.prod-price small { display: block; font-size: var(--t-11); font-weight: 500; color: var(--text-muted); }
.prod-add {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-bump), box-shadow .35s;
}
.prod-add svg { width: 17px; height: 17px; }
.prod-add:hover { transform: rotate(90deg) scale(1.12); box-shadow: var(--shadow-brand); }
/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; justify-content: center; }
.chip {
  padding: .55rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--t-12); font-weight: 600; color: var(--text-muted);
  transition: transform .35s var(--ease-bump), background .3s, color .3s, border-color .3s;
}
.chip:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--text); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.search-wrap { position: relative; max-width: 460px; margin: 0 auto 1.5rem; }
.search-wrap input {
  width: 100%; padding: .95rem 1.1rem .95rem 3rem;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--t-14);
  transition: border-color .3s, box-shadow .3s;
}
.search-wrap input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search-wrap svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.result-count { text-align: center; font-size: var(--t-12); color: var(--text-muted); margin-bottom: 1.5rem; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state .e-ico { font-size: 3.5rem; margin-bottom: 1rem; }
/* Card entry stagger used by the shop filter */
.prod-card.enter { animation: cardIn .55s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------- steps -- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; position: relative; }
.step { position: relative; text-align: center; padding: 2rem 1.25rem; background: var(--card-face); border: 1px solid var(--border); border-radius: var(--r-sheet); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-bump), box-shadow .5s; }
.step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.step .num {
  width: 54px; height: 54px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: var(--t-18);
  background: var(--brand-face); color: var(--on-brand);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .5s var(--ease-bump);
}
.step:hover .num { transform: scale(1.13) rotate(-10deg); }
.step h3 { font-size: var(--t-18); margin-bottom: .5rem; }
.step p { font-size: var(--t-14); color: var(--text-muted); }
/* The run between two steps. Dashed rather than solid so it reads as "and
   then", and brand-tinted so it belongs to the numbers it joins. */
.step .line {
  position: absolute; top: 3.4rem; right: -1.1rem; width: 1.1rem; height: 2px;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand) 75%, transparent) 60%, transparent 0);
  background-size: 7px 2px; background-repeat: repeat-x;
}
/* --------------------------------------------------------------- feature -- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
/* Three abreast strands the fourth card on a row of its own with a hole beside
   it. A grid of exactly four asks for wider columns instead, which lands it on
   a clean 2 x 2. Browsers without :has() keep the 3 + 1, which is only untidy. */
.feature-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.feature {
  position: relative; overflow: hidden;
  padding: 2rem 1.75rem; border-radius: var(--r-sheet);
  background: var(--card-face); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-bump), box-shadow .5s, border-color .4s;
}
.feature::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.feature:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.feature:hover::after { transform: scaleX(1); }
.feature .f-ico {
  width: 52px; height: 52px; border-radius: var(--r-card); display: grid; place-items: center;
  background: var(--ico-face); box-shadow: var(--ico-ring); color: var(--brand-deep); margin-bottom: 1.15rem;
  transition: transform .5s var(--ease-bump), border-radius .45s;
}
.feature .f-ico svg { width: 25px; height: 25px; }
.feature:hover .f-ico { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }
.feature h3 { font-size: var(--t-18); margin-bottom: .55rem; }
.feature p { font-size: var(--t-14); color: var(--text-muted); }
/* --------------------------------------------------------------- split --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.reverse .split-visual { order: -1; }
.split-copy h2 { margin: 1.1rem 0 1.2rem; }
.split-copy .lead { margin-bottom: 1.75rem; }
.tick-list { display: grid; gap: .85rem; margin-bottom: 2rem; }
.tick-list li { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--t-14); }
.tick-list .tk {
  width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: .1rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success);
}
.tick-list .tk svg { width: 13px; height: 13px; }
.tick-list b { font-weight: 600; }
.split-visual { position: relative; }
.split-visual .frame {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.split-visual .frame img { width: 100%; height: 100%; object-fit: cover; }
/* Collage of produce shots */
.collage { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: .9rem; }
.collage figure { overflow: hidden; border-radius: var(--r-sheet); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.collage figure:nth-child(1) { grid-row: span 2; }
.collage figure:nth-child(4) { grid-column: span 2; }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.collage figure:hover img { transform: scale(1.1); }

/* Catalog shots are cut-outs on a transparent ground, not framed photographs:
   cover-cropping them slices the fruit and still leaves the tile half empty.
   So a collage filled from the catalog behaves like a product card instead —
   an even square grid, a tinted ground, and the whole cut-out fitted inside. */
.collage[data-produce] { grid-auto-rows: auto; gap: 1rem; }
.collage[data-produce] figure {
  grid-row: auto; grid-column: auto; aspect-ratio: 1;
  display: grid; place-items: center; padding: 1.15rem;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand) 14%, var(--surface)) 0%, var(--surface) 70%);
}
.collage[data-produce] img {
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .16));
}
/* ----------------------------------------------------------------- phone -- */
/* A bezel around a real screenshot of the app's home screen. The frame sizes
   itself from the image rather than carrying an aspect-ratio of its own, so a
   new screenshot of a different length drops in without cropping or squashing.

   The bezel is a physical object, not a themed surface — it stays dark in both
   themes, or the dark palette hands you a white phone. There is no drawn notch
   because the screenshot already carries the device's own status bar. */
.phone {
  position: relative; width: 320px; max-width: 100%; margin-inline: auto;
  border-radius: 40px; background: #15130F; padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255,255,255,.06);
}
.phone-screen { border-radius: 30px; overflow: hidden; background: var(--bg); }
.phone-screen img { display: block; width: 100%; height: auto; }

.phone-tilt { animation: phoneFloat 6.5s ease-in-out infinite; }
@keyframes phoneFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-20px) rotate(2deg); } }

/* ------------------------------------------------------------ testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; }
.quote {
  position: relative; padding: 2rem 1.75rem 1.75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sheet);
  transition: transform .5s var(--ease-bump), box-shadow .5s;
}
.quote:hover { transform: translateY(-7px) rotate(-.6deg); box-shadow: var(--shadow-md); }
.quote::before {
  content: '“'; position: absolute; top: -.35rem; right: 1.1rem;
  font-family: 'Marker', cursive; font-size: 5rem; line-height: 1;
  color: var(--brand); opacity: .3;
}
.quote .stars { color: var(--brand); font-size: var(--t-14); letter-spacing: 2px; margin-bottom: .85rem; }
.quote p { font-size: var(--t-14); margin-bottom: 1.35rem; }
.quote .who { display: flex; align-items: center; gap: .75rem; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand-soft); color: var(--brand-deep); flex: none; }
.quote .who b { display: block; font-size: var(--t-14); }
.quote .who span { font-size: var(--t-11); color: var(--text-muted); }

/* Auto-scrolling review rails. Two runs per track, each run carries its own
   trailing gap, so the two halves are exactly equal and -50% loops seamlessly. */
.quote-marquee { display: grid; gap: 1.25rem; }
.quote-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.quote-track { display: flex; width: max-content; animation: marquee 68s linear infinite; }
.quote-track--rev { animation-duration: 82s; animation-direction: reverse; }
.quote-run { display: flex; gap: 1.25rem; padding-right: 1.25rem; }
.quote-marquee:hover .quote-track,
.quote-marquee:focus-within .quote-track { animation-play-state: paused; }
.quote-marquee .quote {
  flex: none; width: clamp(268px, 74vw, 350px);
  padding: 1.75rem 1.5rem 1.5rem; margin: .35rem 0;
}
.quote-marquee .quote:hover { transform: translateY(-5px) rotate(-.4deg); }
.quote-marquee .quote p { min-height: 5.5em; }
@media (prefers-reduced-motion: reduce) {
  .quote-track { animation: none !important; transform: none !important; }
  .quote-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* ------------------------------------------------------------------ FAQ -- */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .75rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sheet); overflow: hidden; transition: border-color .35s, box-shadow .35s; }
.faq-item.is-open { border-color: color-mix(in srgb, var(--brand) 60%, transparent); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; text-align: left; font-size: var(--t-16); font-weight: 600;
  transition: color .3s;
}
.faq-q:hover { color: var(--brand-deep); }
.faq-q .pm { position: relative; width: 22px; height: 22px; flex: none; }
.faq-q .pm::before, .faq-q .pm::after {
  content: ''; position: absolute; inset: 0; margin: auto; background: var(--brand-deep); border-radius: 2px;
  transition: transform .45s var(--ease-bump);
}
.faq-q .pm::before { width: 14px; height: 2px; }
.faq-q .pm::after  { width: 2px; height: 14px; }
.faq-item.is-open .pm::after { transform: rotate(90deg) scaleX(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq-a p { padding: 0 1.4rem 1.35rem; font-size: var(--t-14); color: var(--text-muted); }
/* ----------------------------------------------------------------- table -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sheet); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: .95rem 1.25rem; text-align: left; font-size: var(--t-14); border-bottom: 1px solid var(--border); }
th { font-weight: 700; font-size: var(--t-12); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); background: var(--surface-2); }
tbody tr { transition: background .3s; }
tbody tr:hover { background: var(--brand-soft); }
tbody tr:last-child td { border-bottom: 0; }
/* ------------------------------------------------------------------ CTA -- */
.cta {
  position: relative; overflow: hidden;
  /* A lit brand panel rather than a flat yellow rectangle: the gradient gives
     it a light source, and the fine dot screen keeps the large empty area from
     going dead. Both are painted as background layers so the two drifting
     blobs in ::before/::after still sit on top of them. */
  background-image:
    radial-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
    var(--brand-face);
  background-size: 22px 22px, auto;
  color: var(--on-brand);
  border-radius: var(--r-lg); padding: clamp(2.75rem, 6vw, 4.75rem);
  text-align: center; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.5);
}
.cta::before, .cta::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.28); pointer-events: none;
}
.cta::before { width: 320px; height: 320px; top: -140px; right: -90px; animation: blobDrift 18s ease-in-out infinite alternate; }
.cta::after  { width: 240px; height: 240px; bottom: -120px; left: -70px; animation: blobDrift 22s ease-in-out infinite alternate-reverse; }
.cta > * { position: relative; z-index: 2; }
.cta h2 { margin-bottom: 1rem; }
.cta p { max-width: 55ch; margin: 0 auto 2rem; opacity: .82; }
.cta .btn-dark { background: var(--on-brand); color: #fff; }
.cta .btn-ghost { background: transparent; border-color: rgba(26,26,26,.35); color: var(--on-brand); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.55); border-color: var(--on-brand); color: var(--on-brand); }
/* --------------------------------------------------------------- stats --- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; }
.stat-box { text-align: center; padding: 1.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sheet); transition: transform .5s var(--ease-bump), box-shadow .5s; }
.stat-box:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat-box b { display: block; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 800; color: var(--brand-deep); line-height: 1.1; }
.stat-box span { font-size: var(--t-12); color: var(--text-muted); font-weight: 500; }
/* ----------------------------------------------------------- page banner -- */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--top-h) + clamp(3.5rem, 8vw, 6rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 70% 90% at 82% 12%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 92%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 58%);
  text-align: center;
}
.page-hero .container { position: relative; z-index: 3; }
.page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.75rem); margin: 1.1rem 0 1rem; }
.page-hero .lead { margin-inline: auto; }
.crumbs { display: flex; justify-content: center; gap: .5rem; font-size: var(--t-12); color: var(--text-muted); margin-top: 1.5rem; }
.crumbs a:hover { color: var(--brand-deep); }
/* ----------------------------------------------------------------- form -- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: var(--t-12); font-weight: 600; margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1.05rem; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--t-14); transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-note { font-size: var(--t-11); color: var(--text-muted); margin-top: 1rem; }
.contact-list { display: grid; gap: 1rem; }
.contact-item { display: flex; gap: 1rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sheet); transition: transform .45s var(--ease-bump), box-shadow .45s, border-color .35s; }
.contact-item:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.contact-item .ci { width: 44px; height: 44px; border-radius: var(--r-card); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); flex: none; }
.contact-item .ci svg { width: 21px; height: 21px; }
.contact-item b { display: block; font-size: var(--t-14); margin-bottom: .15rem; }
.contact-item p, .contact-item a { font-size: var(--t-13, .82rem); color: var(--text-muted); }
.contact-item a:hover { color: var(--brand-deep); }
/* -------------------------------------------------------------- timeline -- */
.timeline { position: relative; max-width: 780px; margin-inline: auto; padding-left: 2.5rem; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline .tl-fill { position: absolute; left: 9px; top: 6px; width: 2px; background: var(--brand); transform-origin: top; transform: scaleY(0); transition: transform 1.2s var(--ease); }
.timeline.is-in .tl-fill { transform: scaleY(1); }
.tl-item { position: relative; padding-bottom: 2.25rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -2.5rem; top: .35rem; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); z-index: 2;
}
.tl-item .yr { font-size: var(--t-12); font-weight: 700; color: var(--brand-deep); letter-spacing: .06em; }
.tl-item h3 { font-size: var(--t-18); margin: .2rem 0 .4rem; }
.tl-item p { font-size: var(--t-14); color: var(--text-muted); }
/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: clamp(3.5rem, 7vw, 5rem) 0 0; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.75rem, 4vw, 3rem); padding-bottom: 3rem; }
.footer-grid h4 { font-size: var(--t-12); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 1.15rem; font-weight: 700; }
.footer-grid ul { display: grid; gap: .6rem; }
.footer-grid ul a { font-size: var(--t-14); color: var(--text-muted); transition: color .28s var(--ease), padding-left .28s var(--ease); display: inline-block; }
.footer-grid ul a:hover { color: var(--brand-deep); padding-left: 6px; }
.footer-about .brandmark { --brandmark-h: 1.3rem; margin-bottom: .9rem; }
.footer-about p { font-size: var(--t-14); color: var(--text-muted); max-width: 34ch; margin-bottom: 1.25rem; }
.socials { display: flex; gap: .6rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-muted);
  transition: transform .4s var(--ease-bump), background .3s, color .3s, border-color .3s;
}
.socials a svg { width: 18px; height: 18px; }
.socials a:hover { transform: translateY(-4px); background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* Every profile wears its own platform color: the mark is tinted at rest with
   a matching hairline ring, and the circle fills with the solid color on
   hover. Instagram is the exception — its mark is a gradient, so the rest state
   borrows the mid pink and the hover runs the full three-stop ramp. TikTok
   hovers to its red rather than its black, which would sink into the dark
   theme's footer. Colors read the same on both themes, so no override below. */
.socials a.s-wa        { color: #25D366; border-color: rgba(37, 211, 102, .4); }
.socials a.s-facebook  { color: #1877F2; border-color: rgba(24, 119, 242, .4); }
.socials a.s-instagram { color: #E1306C; border-color: rgba(225, 48, 108, .4); }
.socials a.s-tiktok    { color: #FE2C55; border-color: rgba(254, 44, 85, .4); }
.socials a.s-youtube   { color: #FF0000; border-color: rgba(255, 0, 0, .4); }
.socials a.s-wa:hover        { background: #25D366; border-color: #25D366; color: #fff; }
.socials a.s-facebook:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.socials a.s-instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); border-color: #DD2A7B; color: #fff; }
.socials a.s-tiktok:hover    { background: #FE2C55; border-color: #FE2C55; color: #fff; }
.socials a.s-youtube:hover   { background: #FF0000; border-color: #FF0000; color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: var(--t-12); color: var(--text-muted);
}
.footer-bottom nav { display: flex; gap: 1.25rem; }
.footer-bottom a:hover { color: var(--brand-deep); }
.footer-credit a { color: var(--text); font-weight: 600; }
.footer-credit a:hover { color: var(--brand-deep); }
/* ----------------------------------------------------------- whatsapp fab */
.fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 880;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.42);
  transform: scale(0); transition: transform .5s var(--ease-bump), box-shadow .3s;
}
.fab.is-in { transform: scale(1); }
.fab:hover { transform: scale(1.11) rotate(8deg); }
.fab svg { width: 28px; height: 28px; }
.fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
  animation: ripple 2.4s var(--ease) infinite;
}
@keyframes ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.to-top {
  position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 880;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease-bump), background .3s, color .3s;
}
.to-top.is-in { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.to-top svg { width: 19px; height: 19px; }
/* --------------------------------------------------------------- toast --- */
.toast {
  position: fixed; left: 50%; bottom: 2rem; z-index: 950;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1.35rem; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-size: var(--t-14); font-weight: 500;
  box-shadow: var(--shadow-lg); transition: transform .55s var(--ease-bump);
  max-width: calc(100vw - 2rem);
}
.toast.is-in { transform: translate(-50%, 0); }
/* --------------------------------------------------------------- 404 ----- */
.notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding-top: var(--top-h); }
.notfound .big { font-family: 'Marker', cursive; font-size: clamp(6rem, 18vw, 13rem); line-height: 1; color: var(--brand); }
/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1024px) {
  .hero .btn-group { justify-content: center; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-visual { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }
  .field-row { grid-template-columns: 1fr; }
  .step .line { display: none; }
}
@media (max-width: 560px) {
  :root { --nav-h: 66px; --strip-h: 34px; }
  /* Order-now duplicates the drawer's CTA and crowds the burger at this width. */
  .hide-sm { display: none; }
  /* The drifting fruit sits behind copy once the hero stacks — decoration
     must never be the reason a line is hard to read. */
  .float-fruit { display: none; }
  .container, .container-wide { width: min(100% - 1.75rem, var(--container)); }
  .brand-lockup .brandmark { --brandmark-h: 1.05rem; }
  .brand-lockup img { width: 36px; height: 36px; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .8rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .collage { grid-auto-rows: 115px; }
  .collage[data-produce] { grid-auto-rows: auto; gap: .8rem; }
  .collage[data-produce] figure { padding: .85rem; }
  .fab { right: 1rem; bottom: 1rem; }
  .to-top { right: 1rem; bottom: 4.75rem; }
}