/* ==========================================================================
   ZINKO MEALS — brand stylesheet
   Palette and type are taken from the ZINKO MEALS brand board.
   ========================================================================== */

:root{
  --forest:#10281A;      /* primary dark green  */
  --forest-2:#0C1F14;    /* deeper shade        */
  --olive:#687F5B;       /* secondary green     */
  --cream:#F5F0E6;       /* primary light       */
  --cream-2:#EBE4D6;     /* light shade         */
  --kraft:#D2B48C;       /* accent              */
  --leaf:#9DBE7A;        /* bright olive tint   */

  --ink:#10281A;
  --muted:rgba(245,240,230,.66);
  --muted-dark:rgba(16,40,26,.62);

  --font-latin:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-ar:'Cairo','SF Arabic','Geeza Pro',system-ui,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --radius:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--forest);
  color:var(--cream);
  font-family:var(--font-ar);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* height:auto keeps width/height attributes (used for lazy-load aspect hints)
   from stretching images once CSS overrides the width */
img{ max-width:100%; height:auto; display:block; }

/* Latin runs (phone numbers, temperatures, macros) must not be reordered by
   the RTL page direction. `direction` alone is inert on inline elements —
   it needs an explicit unicode-bidi value. */
.ltr{ direction:ltr; unicode-bidi:isolate; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- shared type ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--font-latin);
  font-size:12px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--kraft);
}
.eyebrow--muted{ color:var(--muted); }

h1,h2,h3{ margin:0; line-height:1.2; font-weight:700; letter-spacing:-.01em; text-wrap:balance; }
h2.section-title{ font-size:clamp(28px,4.4vw,50px); }
.section-sub{ color:var(--muted); max-width:56ch; margin:18px 0 0; font-size:clamp(15px,1.6vw,18px); }

.latin{ font-family:var(--font-latin); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 30px; border-radius:999px;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  transition:transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:19px; height:19px; flex:0 0 19px; }

.btn--primary{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#FFFDF6,var(--cream));
  color:var(--forest); box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.btn--primary:hover{ background:linear-gradient(135deg,#FFFFFF,#F8F3E8); }
/* light sweep across the pill on hover */
.btn--primary::after{
  content:""; position:absolute; top:-20%; bottom:-20%; width:34%;
  inset-inline-start:-50%; transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  pointer-events:none;
}
.btn--primary:hover::after{ animation:shine .85s var(--ease); }
@keyframes shine{ to{ inset-inline-start:125%; } }
.btn--ghost{ border:1.5px solid rgba(245,240,230,.4); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(245,240,230,.08); }
.btn--dark{ background:var(--forest); color:var(--cream); }
.btn--dark:hover{ background:var(--forest-2); }

/* ==========================================================================
   header
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(16,40,26,.72);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(245,240,230,.10);
  transition:background-color .4s var(--ease);
}
.header__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:78px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:clamp(116px,14vw,150px); height:auto; }
.brand__tag{
  font-family:var(--font-latin); font-size:10px; letter-spacing:.34em;
  color:var(--muted); padding-right:.34em; display:none;
}
@media (min-width:1100px){ .brand__tag{ display:block; } }

.nav{ display:none; align-items:center; gap:36px; }
@media (min-width:900px){ .nav{ display:flex; } }
.nav a{
  font-size:15px; font-weight:600; color:rgba(245,240,230,.82);
  position:relative; padding:6px 0; transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1.5px;
  background:var(--kraft); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ transform:scaleX(1); }

.header__cta{ display:none; }
@media (min-width:700px){ .header__cta{ display:inline-flex; } }
.header .btn{ padding:12px 22px; font-size:14px; }

.burger{ display:grid; gap:5px; padding:10px; }
@media (min-width:900px){ .burger{ display:none; } }
.burger span{ display:block; width:22px; height:1.8px; background:var(--cream); transition:transform .3s var(--ease), opacity .3s var(--ease); }

.mobile-menu{
  display:none; flex-direction:column; gap:4px;
  padding:8px var(--pad) 24px;
  border-top:1px solid rgba(245,240,230,.10);
}
.mobile-menu[data-open="true"]{ display:flex; }
.mobile-menu a{ padding:13px 0; font-weight:600; border-bottom:1px solid rgba(245,240,230,.08); }

/* ==========================================================================
   hero
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px); }
.hero__leaf{
  position:absolute; z-index:0; fill:var(--cream); pointer-events:none;
}
.hero__leaf--a{ inset-inline-start:-120px; bottom:-140px; width:min(560px,52vw); opacity:.055; transform:rotate(-12deg); }
.hero__leaf--b{ inset-inline-end:-140px; top:-120px; width:min(460px,44vw); opacity:.04; transform:rotate(148deg); }

.hero__grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(36px,5vw,68px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){ .hero__grid{ grid-template-columns:1.05fr .95fr; } }

.hero__title{
  font-size:clamp(38px,6.4vw,74px); font-weight:800; margin-top:22px;
  letter-spacing:-.02em;
}
.hero__title em{
  font-style:normal; color:var(--kraft);
}
.hero__text{ margin-top:24px; color:var(--muted); font-size:clamp(16px,1.9vw,19px); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px);
  margin-top:52px; padding-top:34px;
  border-top:1px solid rgba(245,240,230,.14);
}
.stat__n{
  font-family:var(--font-latin); font-weight:700; font-size:clamp(26px,3.6vw,38px);
  line-height:1; letter-spacing:-.02em;
  direction:ltr; unicode-bidi:isolate;
}
.stat__l{ font-size:14px; color:var(--muted); margin-top:9px; }

.hero__visual{ position:relative; }
.hero__frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,40,26,.55), transparent 46%);
}
@media (min-width:960px){ .hero__frame{ aspect-ratio:5/6; } }

/* rotating brand seal */
.seal{
  position:absolute; inset-inline-start:-38px; bottom:38px;
  width:132px; height:132px; z-index:2;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.4));
}
@media (max-width:640px){ .seal{ display:none; } }
.seal__ring{ animation:spin 26s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .seal__ring{ animation:none; } }

/* ==========================================================================
   marquee
   ========================================================================== */
.marquee{
  border-block:1px solid rgba(245,240,230,.14);
  background:rgba(0,0,0,.14);
  overflow:hidden; padding:20px 0;
}
.marquee__row{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__row{ animation:none; } }
.marquee__item{
  font-family:var(--font-latin); font-size:13px; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(245,240,230,.72);
  padding:0 34px; white-space:nowrap;
}
.marquee__item::after{ content:"·"; margin-inline-start:68px; color:var(--kraft); }

/* ==========================================================================
   sections
   ========================================================================== */
.section{ padding:clamp(72px,9vw,132px) 0; }
.section--cream{ background:var(--cream); color:var(--ink); }
.section--cream .section-sub,
.section--cream .stat__l{ color:var(--muted-dark); }
.section--cream .eyebrow{ color:var(--olive); }
.section__head{ max-width:720px; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .section-sub{ margin-inline:auto; }

/* ---------- meals ---------- */
.meals{
  display:grid; gap:clamp(18px,2.4vw,28px); margin-top:clamp(38px,5vw,62px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.meal{
  background:#fff; border-radius:22px; overflow:hidden;
  border:1px solid rgba(16,40,26,.09);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.meal:hover{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(16,40,26,.16); }
.meal__img{ aspect-ratio:4/3; overflow:hidden; background:var(--cream-2); }
.meal__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.meal:hover .meal__img img{ transform:scale(1.06); }
.meal__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.meal__name{ font-family:var(--font-latin); font-weight:600; font-size:19px; letter-spacing:-.01em; }
.meal__ar{ font-size:16px; font-weight:600; margin-top:7px; color:rgba(16,40,26,.72); }
.meal__meta{
  display:flex; gap:22px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(16,40,26,.10); margin-top:auto;
}
.meal__meta div{ font-family:var(--font-latin); }
.meal__meta b{ display:block; font-size:19px; font-weight:700; direction:ltr; unicode-bidi:isolate; }
.meal__meta span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dark); }

/* ---------- storage guide ---------- */
.guide{
  display:grid; gap:clamp(20px,3vw,34px); margin-top:clamp(38px,5vw,62px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.gcard{
  border:1px solid rgba(245,240,230,.16); border-radius:22px;
  padding:34px 30px 30px; background:rgba(245,240,230,.035);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.gcard:hover{ background:rgba(245,240,230,.07); border-color:rgba(245,240,230,.3); }
.gcard__ico{
  width:66px; height:66px; border-radius:50%;
  border:1.6px solid rgba(245,240,230,.55);
  display:grid; place-items:center; margin-bottom:24px;
}
.gcard__ico svg{ width:30px; height:30px; stroke:var(--cream); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gcard h3{ font-size:21px; }
.gcard p{ color:var(--muted); font-size:15.5px; margin:12px 0 0; }
.gcard__temp{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:20px; font-size:13px; color:var(--kraft);
}
.gcard__temp b{
  font-family:var(--font-latin); font-size:13px; font-weight:600; letter-spacing:.14em;
  direction:ltr; unicode-bidi:isolate;
}

/* ---------- packaging / brand ---------- */
.split{
  display:grid; gap:clamp(34px,5vw,64px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){ .split{ grid-template-columns:1fr 1fr; } }
.split--flip .split__media{ order:2; }
@media (max-width:959px){ .split--flip .split__media{ order:0; } }

.split__media{ border-radius:var(--radius); overflow:hidden; box-shadow:0 34px 80px rgba(0,0,0,.4); }
.split__media img{ width:100%; height:100%; object-fit:cover; }

.swatches{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.swatch{ text-align:center; }
.swatch i{
  display:block; width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(245,240,230,.45);
  box-shadow:inset 0 0 0 3px rgba(16,40,26,.35);
}
.swatch span{
  font-family:var(--font-latin); font-size:10.5px; letter-spacing:.12em;
  color:var(--muted); margin-top:11px; display:block;
}

.pill-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.pill{
  font-family:var(--font-latin); font-size:11.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  padding:11px 20px; border-radius:999px;
  border:1px solid rgba(245,240,230,.26); color:rgba(245,240,230,.88);
}

/* ==========================================================================
   contact
   ========================================================================== */
.contact__grid{
  display:grid; gap:clamp(34px,5vw,64px); align-items:center; margin-top:clamp(30px,4vw,48px);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .contact__grid{ grid-template-columns:1.15fr .85fr; } }

.contact__rows{ display:flex; flex-direction:column; gap:2px; margin-top:34px; }
.crow{
  display:flex; align-items:center; gap:20px;
  padding:22px 4px; border-bottom:1px solid rgba(16,40,26,.13);
  transition:padding-inline-start .35s var(--ease);
}
.crow:hover{ padding-inline-start:12px; }
.crow__ico{ width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; }
.crow__ico svg{ width:26px; height:26px; fill:var(--forest); }
.crow__lbl{ font-size:13px; color:var(--muted-dark); }
.crow__val{ font-family:var(--font-latin); font-weight:600; font-size:19px; letter-spacing:.01em;
            direction:ltr; unicode-bidi:isolate; }
.crow__val--ar{ font-family:var(--font-ar); direction:rtl; }

.qrbox{
  background:var(--forest); border-radius:var(--radius);
  padding:clamp(26px,3.4vw,40px); text-align:center;
  box-shadow:0 34px 80px rgba(16,40,26,.3);
}
.qrbox__plate{
  background:var(--cream); border-radius:22px; padding:14px;
  width:min(300px,88%); margin-inline:auto;
}
.qrbox__plate img{ width:100%; border-radius:12px; }
/* on narrow screens the QR needs every pixel it can get to stay scannable */
@media (max-width:520px){
  .qrbox{ padding:20px; }
  .qrbox__plate{ width:min(300px,100%); padding:10px; }
}
.qrbox h3{ color:var(--cream); font-size:22px; margin-top:26px; }
.qrbox p{ color:var(--muted); font-size:15px; margin:9px 0 0; }
.qrbox .btn{ margin-top:26px; width:100%; }

/* ==========================================================================
   footer
   ========================================================================== */
.footer{
  border-top:1px solid rgba(245,240,230,.14);
  padding:clamp(44px,6vw,72px) 0 34px; background:var(--forest-2);
}
.footer__grid{
  display:grid; gap:36px; grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:820px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer img{ width:150px; }
.footer p{ color:var(--muted); font-size:14.5px; margin:20px 0 0; max-width:40ch; }
.footer h4{
  font-family:var(--font-latin); font-size:11px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--kraft); margin:0 0 18px;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer ul a{ font-size:15px; color:rgba(245,240,230,.8); transition:color .3s var(--ease); }
.footer ul a:hover{ color:var(--cream); }
.footer__bar{
  margin-top:52px; padding-top:24px; border-top:1px solid rgba(245,240,230,.10);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-family:var(--font-latin); font-size:12px; letter-spacing:.1em; color:rgba(245,240,230,.5);
}

/* ==========================================================================
   floating whatsapp
   ========================================================================== */
.fab{
  position:fixed; inset-inline-end:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px);
  z-index:70; width:58px; height:58px; border-radius:50%;
  background:var(--cream); color:var(--forest);
  display:grid; place-items:center;
  box-shadow:0 16px 38px rgba(0,0,0,.4);
  transition:transform .35s var(--ease);
}
.fab:hover{ transform:scale(1.07); }
.fab svg{ width:29px; height:29px; fill:currentColor; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

:focus-visible{ outline:2.5px solid var(--kraft); outline-offset:3px; border-radius:6px; }

/* ==========================================================================
   v2 polish — ambient light, badges, card accents, progress, micro-motion
   ========================================================================== */

/* ---------- page chrome ---------- */
html{ scroll-padding-top:92px; }
::selection{ background:var(--kraft); color:var(--forest); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--forest-2); }
::-webkit-scrollbar-thumb{ background:#3E5847; border-radius:99px; border:3px solid var(--forest-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--olive); }

/* reading progress line under the header */
.progress{
  position:absolute; bottom:0; inset-inline-start:0; height:2.5px; width:0;
  background:linear-gradient(90deg,var(--olive),var(--kraft));
  z-index:61; pointer-events:none;
}

/* ---------- hero ---------- */
/* soft olive/kraft ambient glows behind the leaves */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px 440px at 14% -6%, rgba(104,127,91,.30), transparent 62%),
    radial-gradient(560px 500px at 90% 106%, rgba(210,180,140,.13), transparent 60%);
}

/* live badge above the eyebrow */
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  font-size:13.5px; font-weight:700; color:rgba(245,240,230,.88);
  border:1px solid rgba(245,240,230,.18); background:rgba(245,240,230,.06);
  padding:8px 18px; border-radius:999px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.hero-badge i{
  width:8px; height:8px; border-radius:50%; background:var(--leaf); flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(157,190,122,.55);
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{
  70%{ box-shadow:0 0 0 10px rgba(157,190,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(157,190,122,0); }
}

/* hand-drawn underline beneath the accent words */
.hero__title em{
  padding-bottom:.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9C30 3 62 2 118 7' fill='none' stroke='%23D2B48C' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom center / 100% .16em;
}

/* offset kraft frame peeking behind the hero image */
.hero__visual::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block:22px -20px; inset-inline:22px -20px;
  border:1.5px solid rgba(210,180,140,.45); border-radius:var(--radius);
}
.hero__frame{ z-index:1; }

/* gentle bob on the rotating seal */
.seal{ animation:floaty 6.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

/* ---------- marquee edge fade ---------- */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* ---------- meals ---------- */
.meal{ position:relative; }
.meal::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--olive),var(--kraft));
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.meal:hover::before{ transform:scaleX(1); }
.meal__img{ position:relative; }
.meal__tag{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  font-size:12px; font-weight:700; line-height:1;
  padding:8px 14px; border-radius:999px;
  background:rgba(16,40,26,.82); color:var(--cream);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.meal__tag--hot{ background:var(--kraft); color:var(--forest); }
.meal__cta{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; width:-moz-fit-content; width:fit-content;
  font-size:14px; font-weight:700; color:var(--forest);
}
.meal__cta svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.meal__cta::after{
  content:""; position:absolute; bottom:-4px; inset-inline-start:0; width:100%; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.meal__cta:hover{ color:var(--olive); }
.meal__cta:hover::after{ transform:scaleX(1); }
.meal__cta:hover svg{ transform:translateX(-4px); }

/* ---------- storage cards ---------- */
.gcard{ position:relative; overflow:hidden; }
.gcard__step{
  position:absolute; top:14px; inset-inline-end:18px;
  font-family:var(--font-latin); font-weight:800; font-size:46px; line-height:1;
  color:rgba(245,240,230,.06); letter-spacing:.02em;
  direction:ltr; unicode-bidi:isolate;
  transition:color .45s var(--ease);
}
.gcard:hover .gcard__step{ color:rgba(210,180,140,.22); }
.gcard__ico{ transition:background-color .4s var(--ease), border-color .4s var(--ease); }
.gcard__ico svg{ transition:stroke .4s var(--ease); }
.gcard:hover .gcard__ico{ background:var(--kraft); border-color:var(--kraft); }
.gcard:hover .gcard__ico svg{ stroke:var(--forest); }

/* ---------- brand swatches & pills ---------- */
.swatch i{ transition:transform .35s var(--ease); }
.swatch:hover i{ transform:scale(1.14) rotate(-5deg); }
.pill{
  transition:border-color .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover{
  transform:translateY(-2px);
  border-color:rgba(210,180,140,.55);
  background:rgba(210,180,140,.12);
  color:var(--kraft);
}

/* ---------- contact rows & qr ---------- */
.crow::after{
  content:"←"; font-size:17px; font-weight:700; color:var(--kraft);
  opacity:0; transform:translateX(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.crow:hover::after{ opacity:1; transform:none; }
.crow__ico svg{ transition:fill .35s var(--ease); }
.crow:hover .crow__ico svg{ fill:var(--olive); }

.qrbox{
  position:relative; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* soft gradient halo hugging the dark box */
.qrbox::after{
  content:""; position:absolute; inset:-2px; z-index:-1;
  border-radius:calc(var(--radius) + 2px);
  background:linear-gradient(135deg, rgba(157,190,122,.7), rgba(210,180,140,.65), rgba(104,127,91,.7));
  opacity:.5; transition:opacity .45s var(--ease);
}
.qrbox:hover{ transform:translateY(-5px); box-shadow:0 40px 90px rgba(16,40,26,.38); }
.qrbox:hover::after{ opacity:1; }
.qrbox__plate{ transition:transform .4s var(--ease); }
.qrbox:hover .qrbox__plate{ transform:translateY(-3px); }

/* ---------- footer signature ---------- */
.footer .sig{
  font-family:'Great Vibes',cursive;
  font-size:clamp(30px,3.4vw,40px); font-weight:400;
  color:var(--kraft); margin:18px 0 0; line-height:1.1;
}

/* ---------- floating whatsapp pulse ---------- */
.fab::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--cream); opacity:0;
  animation:pulse 3s var(--ease) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.5; }
  75%,100%{ transform:scale(1.65); opacity:0; }
}

/* ---------- nav active section ---------- */
.nav a.is-active{ color:var(--kraft); }
.nav a.is-active::after{ transform:scaleX(1); }

/* ---------- reveal with a soft focus pull ---------- */
.reveal{
  filter:blur(6px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.reveal.is-in{ filter:blur(0); }

@media (prefers-reduced-motion:reduce){
  .seal{ animation:none; }
  .fab::before{ animation:none; display:none; }
  .hero-badge i{ animation:none; }
  .btn--primary:hover::after{ animation:none; }
  .reveal{ filter:none; }
}

/* ==========================================================================
   v3 — how to order + FAQ
   ========================================================================== */

/* ---------- how to order ---------- */
.how{
  display:grid; gap:clamp(28px,3.6vw,44px); margin-top:clamp(44px,6vw,72px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.hstep{ position:relative; padding-inline-end:clamp(28px,3.4vw,48px); }
.hstep__n{
  display:block; font-family:var(--font-latin); font-weight:800;
  font-size:clamp(46px,5.6vw,64px); line-height:1; letter-spacing:-.03em;
  color:rgba(210,180,140,.22); -webkit-text-stroke:1.2px rgba(210,180,140,.55);
  direction:ltr; unicode-bidi:isolate;
  transition:color .45s var(--ease);
}
.hstep:hover .hstep__n{ color:rgba(210,180,140,.42); }
.hstep h3{ font-size:21px; margin-top:20px; }
.hstep p{ color:var(--muted); font-size:15.5px; margin:10px 0 0; max-width:34ch; }
/* dashed connector between the steps, centered in the grid gap */
.hstep::after{
  content:""; position:absolute; top:10px; bottom:12px;
  inset-inline-end:calc(clamp(28px,3.6vw,44px) / -2);
  border-inline-end:1px dashed rgba(245,240,230,.16);
}
.hstep:last-child::after{ display:none; }
@media (max-width:899px){
  .hstep{ padding-inline-end:0; }
  .hstep::after{ display:none; }
}
.how__cta{
  margin-top:clamp(44px,6vw,64px); padding-top:clamp(36px,4.5vw,52px);
  border-top:1px solid rgba(245,240,230,.12); text-align:center;
}
.how__lead{ font-size:20px; font-weight:700; margin:0 0 20px; }

/* ---------- faq ---------- */
#faq{ border-bottom:1px solid rgba(16,40,26,.08); }
.faq{
  max-width:820px; margin:clamp(38px,5vw,56px) auto 0;
  display:grid; gap:14px;
}
.faq__item{
  background:#fff; border:1px solid rgba(16,40,26,.1); border-radius:18px;
  overflow:hidden;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq__item[open]{
  border-color:rgba(104,127,91,.45);
  box-shadow:0 16px 38px rgba(16,40,26,.09);
}
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center;
  padding-block:20px; padding-inline:24px 58px;
  font-weight:700; font-size:17px; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--olive); }
.faq__item summary::after{
  content:""; position:absolute; inset-inline-end:24px; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-inline-end:2px solid var(--olive); border-block-end:2px solid var(--olive);
  transform:rotate(-45deg);
  transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item p{
  margin:0; padding:0 24px 22px; color:rgba(16,40,26,.7);
  font-size:15.5px; line-height:1.85;
}
.faq__item[open] p{ animation:faqIn .4s var(--ease); }
@keyframes faqIn{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:none; }
}
.faq__item summary:focus-visible{ outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){
  .faq__item[open] p{ animation:none; }
}