/* ═══════════════════════════════════════════════════════
       HOME PAGE — REDESIGNED
    ═══════════════════════════════════════════════════════ */

/* ── SECTION SEAMS — replaces flat border-top lines between
   alternating-background sections with a soft blend + a
   hand-torn zigzag strip, so sections feel stitched together
   instead of color-blocked apart. Use the .seam component
   right before a section that needs one. ── */
.seam { position: relative; height: 34px; overflow: hidden; z-index: 2; }
.seam svg { display: block; width: 100%; height: 100%; }
/* seam--to-card2: dark above, card2 below */
.seam--to-card2 { background: linear-gradient(180deg, var(--dark) 0%, var(--card2) 100%); }
.seam--to-card2 svg path { fill: var(--card2); }
/* seam--to-dark: card2 above, dark below */
.seam--to-dark { background: linear-gradient(180deg, var(--card2) 0%, var(--dark) 100%); }
.seam--to-dark svg path { fill: var(--dark); }
.seam-dot-row { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; opacity: .35; }
.seam-dot-row span { width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }

/* ── HERO ── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 7rem 0 5rem;
    background: var(--dark);
}

/* Grain texture overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: .4;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Animated drip accent line */
.hero-drip {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--amber), var(--brown), transparent);
    animation: drip-down 2.2s 0.4s cubic-bezier(.22,1,.36,1) forwards;
    opacity: .55;
}
@keyframes drip-down { to { height: 70vh; } }

.hero-drip-2 {
    position: absolute;
    right: 18px;
    top: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, var(--amber), transparent);
    animation: drip-down 2.6s 0.8s cubic-bezier(.22,1,.36,1) forwards;
    opacity: .2;
}

/* Ambient glow orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse { 0%,100%{opacity:.18;transform:scale(1)} 50%{opacity:.28;transform:scale(1.08)} }

/* Rising fry particles */
.fry-p {
    position: absolute;
    width: 3px;
    border-radius: 2px;
    opacity: 0;
    animation: fry-rise linear infinite;
}
@keyframes fry-rise {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0    }
    8%   { opacity: .7  }
    85%  { opacity: .18 }
    100% { transform: translateY(-10vh) rotate(520deg); opacity: 0    }
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 660px;
    gap: 3rem;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Eyebrow pill */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(239,159,39,.08);
    border: 1px solid rgba(239,159,39,.22);
    border-radius: 100px;
    padding: .32rem .95rem .32rem .62rem;
    font-size: .77rem;
    color: var(--amber);
    margin-bottom: 1.5rem;
    animation: fade-up .65s ease both;
    letter-spacing: .03em;
}
.eyebrow-dot {
    width: 6px; height: 6px;
    background: var(--amber);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.22} }

.hero-h1 {
    font-size: clamp(3rem, 5.8vw, 5.2rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
    animation: fade-up .65s .08s ease both;
}
.hero-h1 .line-muted {
    display: block;
    color: rgba(253,246,236,.22);
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    font-weight: 400;
    letter-spacing: -.01em;
    margin-bottom: .35rem;
    font-style: italic;
}
.hero-h1 em {
    font-style: normal;
    color: var(--amber);
    position: relative;
    display: inline-block;
}
/* Underline swoosh */
.hero-h1 em svg {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 10px;
    overflow: visible;
}
.hero-h1 em svg path {
    stroke: var(--amber);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    stroke-linecap: round;
    animation: swoosh 0.9s 0.7s ease forwards;
}
@keyframes swoosh { to { stroke-dashoffset: 0; } }

.hero-urdu {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: rgba(253,246,236,.28);
    display: block;
    margin-top: .8rem;
    direction: rtl;
    animation: fade-up .65s .18s ease both;
}
.hero-desc {
    font-size: .97rem;
    color: rgba(253,246,236,.48);
    margin-top: 1.5rem;
    line-height: 1.85;
    max-width: 520px;
    animation: fade-up .65s .26s ease both;
}
.hero-actions {
    display: flex;
    gap: .7rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    animation: fade-up .65s .34s ease both;
}
.hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2.8rem;
    animation: fade-up .65s .42s ease both;
    padding-top: 1.85rem;
    border-top: 1px solid var(--border);
}
.stat-val { font-size: 1.65rem; font-weight: 800; color: var(--amber); line-height: 1; letter-spacing: -.03em; }
.stat-lbl { font-size: .68rem; color: rgba(253,246,236,.3); margin-top: .2rem; text-transform: uppercase; letter-spacing: .07em; }
.stat-divider { width: 1px; background: var(--border); align-self: stretch; }
@keyframes fade-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ── HERO ILLUSTRATION ── */
.hero-visual { animation: fade-in .9s .3s ease both; position: relative; }
@keyframes fade-in { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none} }

/* SVG bowl animations */
.bowl-orbit { animation: orbit 28s linear infinite; transform-origin: 240px 255px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.bowl-orbit-2 { animation: orbit 18s linear infinite reverse; transform-origin: 240px 255px; }

.steam-p { animation: steam-anim 2.8s ease-in-out infinite; }
.steam-p:nth-child(2) { animation-delay: .9s; }
.steam-p:nth-child(3) { animation-delay: 1.7s; }
@keyframes steam-anim { 0%,100%{transform:translateY(0);opacity:.3} 50%{transform:translateY(-14px);opacity:.06} }


/* ── HERO RECEIPT — main hero visual (fries box SVG disabled) ── */
/* ── HERO MASCOT — animated, replaces static fries box ── */
.hero-visual { position: relative; display: flex; align-items: flex-end; justify-content: center; /*min-height: 460px*/; }

.hero-mascot-glow {
    position: absolute; width: 360px; height: 360px; border-radius: 50%; left: 50%; top: 10px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(239,159,39,.18), transparent 65%);
    animation: hm-glow-pulse 3s ease-in-out infinite;
}
@keyframes hm-glow-pulse { 0%,100% { opacity:.7; } 50% { opacity:1; } }

.hero-mascot-fig { animation: hm-bob 2.6s ease-in-out infinite; transform-origin: center bottom; position: relative; z-index: 2; }
@keyframes hm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero-mascot-shadow { animation: hm-shadow-squash 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes hm-shadow-squash { 0%,100% { transform: scaleX(1); opacity:.5; } 50% { transform: scaleX(.82); opacity:.3; } }

.hm-wave-arm { transform-origin: 68px 110px; animation: hm-wave 2.6s ease-in-out infinite; }
@keyframes hm-wave { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-10deg); } }

.hm-blink { animation: hm-blink 4.2s ease-in-out infinite; transform-origin: center; }
@keyframes hm-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.hm-steam { animation: hm-steam-rise 3.2s ease-in-out infinite; }
@keyframes hm-steam-rise { 0% { opacity:0; transform: translateY(0) scaleY(1); } 30% { opacity:.55; } 100% { opacity:0; transform: translateY(-26px) scaleY(1.6); } }

.hm-sparkle { animation: hm-twinkle 2.4s ease-in-out infinite; }
@keyframes hm-twinkle { 0%,100% { opacity:0; transform: scale(.4); } 50% { opacity:1; transform: scale(1); } }

.hero-mascot-bubble {
    position: absolute; top: 0; left: 60%; background: var(--cream); color: var(--dark);
    padding: .5rem .9rem; border-radius: 100px 100px 100px 4px; font-weight: 800; font-size: .78rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.4); z-index: 3;
    animation: hm-bubble-in .6s .4s cubic-bezier(.34,1.56,.64,1) both, hm-bubble-bob 2.6s 1s ease-in-out infinite;
}
@keyframes hm-bubble-in { from { opacity:0; transform: scale(.5) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } }
@keyframes hm-bubble-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── APNI MARZI LIVE BUILDER ── */
#apni-marzi { position: relative; overflow: hidden; }

.apni-marzi-bg {
    position: absolute;
    z-index: 0;
    top: 50%; left: 50%;
    width: 520px;
    height: auto;
    transform: translate(-50%, -50%) rotate(-4deg);
    opacity: .07;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, #000 40%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 60% at center, #000 40%, transparent 80%);
}
@media (max-width: 760px) {
    .apni-marzi-bg { width: 380px; }
}

/* make sure the actual content paints above it */
#apni-marzi .container { position: relative; z-index: 1; }
.builder-live-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
@media (max-width: 760px) { .builder-live-wrap { grid-template-columns: 1fr; } }
.builder-live-group { margin-bottom: 1.3rem; }
.builder-live-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brown); margin-bottom: .6rem; display:block; }
.hb-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-chip {
    background: var(--card2); border: 1px solid var(--border); color: var(--cream);
    padding: .45rem .9rem; border-radius: 100px; font-size: .78rem; cursor: pointer;
    transition: .15s; user-select: none;
}
.hb-chip:hover { border-color: rgba(239,159,39,.4); }
.hb-chip.selected { background: var(--amber); border-color: var(--amber); color: var(--dark); font-weight: bold; }
.builder-live-receipt {
    background: var(--cream); color: var(--dark); border-radius: 10px; padding: 1.4rem;
    font-family: 'Courier New', monospace; font-size: .82rem; position: sticky; top: 6rem; font-weight: 700;
}
.hlr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.hlr-head b { font-size: 1rem; font-weight: bolder }
.hlr-head span { font-size: .68rem; opacity: .55; }
.hlr-dash { border-top: 1px dashed rgba(15,9,4,.2); margin: .6rem 0; }
.hlr-line { display: flex; justify-content: space-between; padding: .22rem 0; }
.hlr-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1rem; }

/* ════════════════════════════════════════
   ASSEMBLE-IN-LOOP — fries fly in from offscreen,
   settle into the bowl, hold, then the whole
   sequence quietly resets and repeats.
   Total cycle: 9s (matches steam/orbit rhythm)
════════════════════════════════════════ */

/* Each fry group starts far off in a direction, rotated, faded out.
   Travels in with an overshoot-settle ease, holds in place, then
   fades out fast just before the loop restarts so the reset is invisible. */
@keyframes assemble-fall {
    0%   { transform: translate(var(--fx,0), var(--fy,-260px)) rotate(var(--fr,0deg)) scale(.4); opacity: 0; }
    7%   { opacity: 1; }
    32%  { transform: translate(0,0) rotate(0deg) scale(1.06); opacity: 1; }   /* overshoot */
    40%  { transform: translate(0,0) rotate(0deg) scale(1);    opacity: 1; }   /* settle */
    90%  { transform: translate(0,0) rotate(0deg) scale(1);    opacity: 1; }   /* hold */
    97%  { opacity: 0; }
    100% { transform: translate(var(--fx,0), var(--fy,-260px)) rotate(var(--fr,0deg)) scale(.4); opacity: 0; }
}

.assemble-piece {
    animation: assemble-fall 9s cubic-bezier(.22,.9,.3,1.25) infinite;
    transform-origin: center;
}
/* Staggered entrance per piece — each fry/element arrives at a slightly
   different moment so it reads as "coming together" not "popping in" */
.ap-1  { --fx:-210px; --fy:-160px; --fr:-70deg;  animation-delay: 0s;    }
.ap-2  { --fx: 30px;  --fy:-260px; --fr:18deg;   animation-delay: .12s;  }
.ap-3  { --fx: 220px; --fy:-150px; --fr:75deg;   animation-delay: .24s;  }
.ap-4  { --fx:-150px; --fy:-230px; --fr:-35deg;  animation-delay: .36s;  }
.ap-5  { --fx: 160px; --fy:-220px; --fr:40deg;   animation-delay: .48s;  }
/* Masala dots sprinkle in last, after the fries have landed */
.ap-dot { --fy:-90px; animation-delay: 1.5s; }
/* Bowl base + glow appear first, just a quick fade — anchors the scene
   before fries start raining in */
.assemble-base {
    animation: base-fade-loop 9s ease-in-out infinite;
}
@keyframes base-fade-loop {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    93%  { opacity: 1; }
    98%  { opacity: 0; }
    100% { opacity: 0; }
}
/* Small impact ring that pulses once when each fry lands, for a tiny
   "thud" feel without any JS */
.land-ring {
    animation: land-pulse 9s ease-out infinite;
    transform-origin: center;
}
@keyframes land-pulse {
    0%, 30% { opacity: 0; transform: scale(.6); }
    36%     { opacity: .5; transform: scale(1.4); }
    44%     { opacity: 0; transform: scale(1.9); }
    100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .assemble-piece, .assemble-base, .land-ring { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Glow ring */
.glow-ring-svg { animation: ring-svg 4s ease-in-out infinite; }
@keyframes ring-svg { 0%,100%{opacity:.15;transform:scale(1)} 50%{opacity:.04;transform:scale(1.07)} }

/* Sauce drip on SVG */
.sauce-drip { animation: sauce-d 2s ease-in-out infinite; transform-origin: 240px 300px; }
@keyframes sauce-d { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.04)} }

/* ── PILLARS ── */
.pillars-wrap {
    padding: 3rem 0;
    background: rgba(20,12,4,.7);
    position: relative;
    overflow: hidden;
}
.pillars-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(239,159,39,.25),transparent);
}
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; position: relative; }

/* Hand-drawn doodle accents floating around the pillars */
.doodle { position: absolute; pointer-events: none; opacity: .5; }
.doodle-arrow-1 { top: 2.8rem; left: 20%; width: 60px; transform: rotate(-12deg); }
.doodle-spark-1 { top: 4.6rem; right: 8%; width: 40px; }
.doodle-swirl-1 { bottom: -2rem; left: 4%; width: 44px; opacity: .35; }

.pillar {
    padding: 2rem 1.5rem 1.7rem;
    border: 2px solid var(--border);
    background: var(--card2);
    transition: border-color .25s, transform .3s;
    position: relative;
    overflow: visible;
    /* organic blob border-radius — each corner a different curve */
    border-radius: 38px 14px 38px 14px;
}
.pillar:nth-child(2) { border-radius: 14px 38px 14px 38px; transform: rotate(-1.4deg); margin-top: .6rem; }
.pillar:nth-child(1) { transform: rotate(1.1deg); }
.pillar:nth-child(3) { transform: rotate(-.8deg); border-radius: 30px 30px 14px 38px; }
.pillar:hover { border-color: var(--border-h); transform: translateY(-6px) rotate(0deg) scale(1.02); }
.pillar::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 30% 0%, rgba(239,159,39,.08), transparent 65%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.pillar:hover::after { opacity: 1; }

/* Icon sits in a hand-drawn-feel blob, slightly tilted, with a tiny doodle accent badge */
.pillar-icon {
    width: 54px; height: 54px;
    background: rgba(239,159,39,.12);
    border: 2px dashed rgba(239,159,39,.3);
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
    color: var(--amber);
    font-size: 1.3rem;
    position: relative; z-index: 1;
    transform: rotate(-4deg);
}
.pillar:nth-child(2) .pillar-icon { transform: rotate(5deg); border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
.pillar:nth-child(3) .pillar-icon { transform: rotate(-7deg); }
.pillar-title { font-weight: 800; font-size: .98rem; margin-bottom: .35rem; position: relative; z-index: 1; letter-spacing: -.01em; }
.pillar-desc { font-size: .79rem; color: rgba(253,246,236,.42); line-height: 1.7; position: relative; z-index: 1; }
.pillar-num {
    position: absolute; top: -.7rem; right: -.6rem;
    width: 32px; height: 32px;
    background: var(--amber); color: var(--dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 900;
    transform: rotate(8deg);
    box-shadow: 0 4px 14px rgba(239,159,39,.35);
    z-index: 2;
}

/* ── MENU PREVIEW — overlapping, tilted, oversized photography ── */
.bg-fry-scatter {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    animation: bg-fry-drift 14s ease-in-out infinite;
}
@keyframes bg-fry-drift {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-14px); }
}
.menu-preview-wrap { position: relative; padding-top: 1rem; z-index: 1; }
.menu-preview-scroll {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    padding: 2.5rem 1rem 3rem;
    margin: 0 -1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.menu-preview-scroll::-webkit-scrollbar { display: none; }
.menu-prev-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    background: var(--card2);
    border: 2px solid var(--border);
    overflow: visible;
    transition: transform .3s, border-color .25s;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    /* organic blob shape, alternating per card via nth-child below */
    border-radius: 38px 14px 38px 14px;
}
.menu-prev-card:nth-child(2n) { transform: rotate(-3deg) translateY(14px); border-radius: 38px 14px 38px 14px; }
.menu-prev-card:nth-child(2n+1) { transform: rotate(2.5deg); }
.menu-prev-card:nth-child(3n) { transform: rotate(-1.5deg) translateY(-8px); border-radius: 38px 14px 38px 14px; }
.menu-prev-card:hover { transform: rotate(0deg) translateY(-10px) scale(1.04) !important; border-color: var(--border-h); z-index: 5; }

.mpc-img-wrap { position: relative; height: 158px; display: flex; align-items: center; justify-content: center; overflow: visible; }
/* SVG fries-box frame sitting behind the food image — one consistent shape,
   the photo gets clipped to its opening so it never floats or fights the frame */
.mpc-box-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.mpc-img {
    position: relative; z-index: 1;
    width: 70px; height: 70px;
    object-fit: contain;
    margin-top: -8px;
    /* clip the photo itself to the box-opening shape so nothing pokes outside the carton */
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    transition: transform .3s;
}
.menu-prev-card:hover .mpc-img { transform: scale(1.08) translateY(-2px); }
.menu-prev-card { cursor: pointer; }
.mpc-badge {
    position: absolute; top: 1rem; right: .5rem; z-index: 2;
    font-size: .62rem; font-weight: 800; padding: .22rem .6rem;
    border-radius: 100px; background: var(--amber); color: var(--dark);
    transform: rotate(8deg);
    box-shadow: 0 4px 12px rgba(239,159,39,.4);
}
.mpc-badge:nth-child(2n) {transform: rotate(-3deg) translateY(14px)}
.mpc-badge:nth-child(2n+1) {transform: rotate(2.5deg)}
.mpc-badge:nth-child(3n) {transform: rotate(-1.5deg) translateY(-8px)}
/* Quick-add plus button — bottom-right of the image, on both
   menu preview cards and deal cards (reuses the same class) */
.mpc-quick-add {
    position: absolute; bottom: -.4rem; right: 50%;
    transform: translateX(48px);
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--amber); color: var(--dark);
    border: 2px solid var(--card2);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; cursor: pointer; z-index: 3;
    box-shadow: 0 4px 12px rgba(239,159,39,.4);
    transition: transform .2s, background .2s;
}
.mpc-quick-add:hover { background: #f5aa35; transform: translateX(48px) scale(1.12); }
.deal-card { cursor: pointer; }
.deal-img-wrap .mpc-quick-add { transform: translateX(36px); }
.deal-img-wrap .mpc-quick-add:hover { transform: translateX(36px) scale(1.12); }
.mpc-body { padding: .5rem 1.1rem 1.1rem; position: relative; z-index: 1; }
.mpc-name { font-size: .98rem; font-weight: 800; margin-bottom: .1rem; color: var(--cream); letter-spacing: -.01em; }
.mpc-urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: .7rem; color: rgba(253,246,236,.28); direction: rtl; margin-bottom: .55rem; }
.mpc-bottom { display: flex; justify-content: space-between; align-items: center; }
.mpc-price { font-size: .92rem; font-weight: 800; color: var(--amber); }
.heat-row { display: flex; gap: 2px; }
.hdot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hdot.off { background: rgba(253,246,236,.1); }
.menu-cta-row { margin-top: 1rem; text-align: center; }

/* Scroll hint arrow doodle */
.scroll-hint { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: -1rem; margin-bottom: 1.5rem; opacity: .4; font-size: .72rem; color: var(--brown); }
.scroll-hint svg { width: 40px; animation: hint-slide 1.8s ease-in-out infinite; }
@keyframes hint-slide { 0%,100%{transform:translateX(0)} 50%{transform:translateX(8px)} }


/* ── PROCESS / HOW IT'S MADE (SVG Infographic) ── */
.process-section {
    background: var(--card2);
    position: relative;
    overflow: hidden;
}
.process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(239,159,39,.04), transparent 60%);
    pointer-events: none;
}

/* SVG Process pipeline — scroll-driven workflow */
.process-svg-wrap {
    margin: 3rem 0 2rem;
    position: relative;
    overflow: visible;
}

/* ── Track line: full-width background ghost + amber fill that grows ── */
/* SVG process nodes — base state (dimmed until scroll activates) */
.proc-node { cursor: default; }
.proc-icon-g {
    opacity: .28;
    transition: opacity .5s cubic-bezier(.34,1.2,.64,1);
}
.proc-node.active .proc-icon-g { opacity: 1; }
.proc-label {
    font-size: 1rem; font-weight: 700; font-family: inherit;
    fill: rgba(253,246,236,.85);
    opacity: .3; transition: opacity .45s;
}
.proc-node.active .proc-label { opacity: 1; }
.proc-sub {
    font-size: .7rem; font-family: inherit;
    fill: rgba(253,246,236,.38);
    opacity: 0; transition: opacity .45s .1s;
}
.proc-node.active .proc-sub { opacity: 1; }
.proc-step-badge {
    font-size: 8px; font-weight: 800; font-family: inherit;
    fill: #BA7517;
}
@keyframes proc-ring { 0%{r:42;opacity:.45} 100%{r:60;opacity:0} }

.proc-track-bg  { stroke: rgba(186,117,23,.15); }
.proc-track-fill {
    stroke: url(#trackGrad);
    /* dasharray/dashoffset are set by JS; these are fallbacks */
    stroke-dasharray: 762 762;
    stroke-dashoffset: 762;
}

.proc-node .proc-circle-ring {
    opacity: 0;
    transition: opacity .4s;
}
.proc-node.active .proc-circle-ring {
    opacity: 1;
    animation: proc-ring 2.8s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
/* Node circles gain a bright amber stroke when active */
.proc-node.active circle:nth-child(3) {
    stroke: rgba(239,159,39,.75);
    fill:   rgba(239,159,39,.14);
}
.proc-end-arrow { transition: opacity .45s; opacity: 0; }
.proc-end-arrow.active { opacity: 1; }

/* Metrics row */
.proc-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem;
    padding: 2.5rem 0 0;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
}
.proc-metric { text-align: center; }
.proc-metric-num { font-size: 2.2rem; font-weight: 800; color: var(--amber); line-height: 1; letter-spacing: -.04em; }
.proc-metric-lbl { font-size: .72rem; color: rgba(253,246,236,.35); margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; }

/* Day timeline — upgraded dots with a small doodle ring instead of
   a plain flat circle, hand-drawn connecting line */
.day-timeline { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--border); }
.timeline-hdr { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brown); font-weight: 700; margin-bottom: 1.75rem; display: flex; align-items: center; gap: .4rem; }
.timeline-track { position: relative; padding-left: 3rem; }
.tl-line { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--amber) 0%, rgba(186,117,23,.12) 100%); }
.tl-item { display: flex; gap: 1.4rem; margin-bottom: 1.85rem; align-items: flex-start; opacity: .35; transition: opacity .45s; }
.tl-item.lit { opacity: 1; }
.tl-dot { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border); background: var(--card2); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: all .45s; }
.tl-item.lit .tl-dot { border-color: var(--amber); background: rgba(239,159,39,.1); box-shadow: 0 0 14px rgba(239,159,39,.2); }
.tl-dot i { font-size: .85rem; color: rgba(253,246,236,.22); transition: color .45s; }
.tl-item.lit .tl-dot i { color: var(--amber); }
.tl-time { font-size: .7rem; color: var(--brown); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .2rem; }
.tl-title { font-size: .92rem; font-weight: 700; margin-bottom: .18rem; }
.tl-desc { font-size: .78rem; color: rgba(253,246,236,.36); line-height: 1.58; }

/* ── DEALS — tilted, overlapping, torn-paper feel ── */
.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
    gap: 2.2rem 1.6rem;
    margin-top: 3rem;
    position: relative;
}
.deal-card {
    background: var(--card);
    border: 2px solid rgba(186,117,23,.22);
    padding: 1.5rem 1.4rem 1.4rem;
    position: relative;
    overflow: visible;
    transition: transform .3s, border-color .25s;
    border-radius: 8px 32px 8px 32px;
}
.deal-card:nth-child(2n) { transform: rotate(-1.8deg); border-radius: 32px 8px 32px 8px; }
.deal-card:nth-child(2n+1) { transform: rotate(1.4deg); }
.deal-card:nth-child(3n) { transform: rotate(-1deg); margin-top: 1.2rem; }
.deal-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.03) !important; border-color: var(--border-h); z-index: 5; }

/* push-pin doodle accent at top */
.deal-card::before {
    content: '📌';
    position: absolute;
    top: -.9rem; left: 1.3rem;
    font-size: 1.3rem;
    transform: rotate(-12deg);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.deal-card:nth-child(2n)::before { left: auto; right: 1.3rem; transform: rotate(14deg); content: '📍'; }

.deal-img-wrap { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
.deal-img {
    position: relative; z-index: 1;
    width: 70px; height: 70px;
    object-fit: contain;
    margin-top: -6px;
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 5px 9px rgba(0,0,0,.35));
}
.deal-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(216,90,48,.12); color: var(--red);
    border: 1.5px dashed rgba(216,90,48,.35);
    border-radius: 100px; font-size: .65rem; font-weight: 800;
    padding: .2rem .65rem; margin-bottom: .85rem;
    transform: rotate(-2deg);
}
.deal-name { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; letter-spacing: -.015em; }
.deal-desc { font-size: .78rem; color: rgba(253,246,236,.4); line-height: 1.6; margin-bottom: .8rem; }
.deal-includes-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; color: var(--brown); margin-bottom: .35rem; font-weight: 700; }
.deal-include { font-size: .78rem; color: rgba(253,246,236,.55); display: flex; align-items: center; gap: .45rem; margin-bottom: .2rem; }
.deal-include i { color: var(--amber); font-size: .6rem; }
.deal-price-row { display: flex; align-items: baseline; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 2px dashed var(--border); }
.deal-price { font-size: 1.4rem; font-weight: 900; color: var(--amber); letter-spacing: -.03em; }
.deal-was { font-size: .82rem; color: rgba(253,246,236,.26); text-decoration: line-through; }
.deal-save { background: rgba(40,167,69,.1); color: #4ade80; border: 1px solid rgba(40,167,69,.18); border-radius: 100px; font-size: .65rem; font-weight: 700; padding: .16rem .52rem; }

/* ── MASCOT — Fry Khana fries-box character, appears in 2+ spots ── */
.mascot-wrap {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    animation: mascot-bob 2.6s ease-in-out infinite;
    transform-origin: bottom center;
}
@keyframes mascot-bob {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%     { transform: translateY(-10px) rotate(3deg); }
}
.mascot-bubble {
    position: absolute;
    background: var(--cream);
    color: var(--dark);
    font-size: .68rem;
    font-weight: 800;
    padding: .4rem .75rem;
    border-radius: 14px 14px 14px 3px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    z-index: 2;
}
/* Menu preview corner mascot — viewBox 200x220, ~0.91 aspect */
.mascot-menu { top: -2.6rem; right: -.3rem; width: 78px; }
.mascot-menu svg { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mascot-menu .mascot-bubble { left: -.6rem; top: -.6rem; }

/* was: .mascot-menu svg / .mascot-deals svg / .mascot-loyalty svg */
.mascot-menu img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mascot-deals img { width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mascot-loyalty img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }

/* Deals section corner mascot — mirrored so it points inward from the left */
.mascot-deals { top: -2.8rem; left: 18.5rem; width: 84px; }
.mascot-deals svg { width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mascot-deals .mascot-bubble { right: -.6rem; top: -.6rem; }

/* Loyalty section mascot — sits beside the heading, celebrating */
.mascot-loyalty { top: -1rem; right: -1rem; width: 76px; }
.mascot-loyalty svg { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mascot-loyalty .mascot-bubble { left: -.4rem; top: -.6rem; }

@media (max-width: 768px) {
    /* Mascots stay visible on mobile too — just smaller and
       repositioned so they don't overflow narrow viewports
       or collide with section headings. */
    .mascot-wrap { animation-duration: 2.2s; }
    .mascot-menu { top: -2.1rem; right: .2rem; width: 54px; }
    .mascot-deals { top: -2.3rem; left: .2rem; width: 58px; }
    .mascot-loyalty { top: -.6rem; right: -.2rem; width: 52px; }
    .mascot-bubble { font-size: .58rem; padding: .3rem .55rem; }
}
@media (max-width: 380px) {
    /* On very small phones, keep the character but drop the
       speech bubble to avoid crowding the heading text */
    .mascot-bubble { display: none; }
}

/* ── SPICE LEVELS (SVG meter style) ── */
.spice-section { background: var(--card2); }
.spice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
.spice-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.6rem 1rem 1.3rem;
    text-align: center;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.spice-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% -10%, var(--sg,transparent), transparent 60%); opacity: .06; transition: opacity .3s; }
.spice-card:hover::before { opacity: .14; }
.spice-card:hover { transform: translateY(-4px); }

/* SVG flame meter */
.spice-svg-meter { margin: .6rem auto .85rem; display: block; }
.flame-fill { transition: stroke-dashoffset .6s ease; }

.spice-icon-wrap { margin-bottom: .55rem; }
.spice-icon-wrap i { font-size: 1.8rem; }
.spice-name { font-weight: 700; font-size: .88rem; margin-bottom: .12rem; }
.spice-urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: .74rem; direction: rtl; margin-bottom: .3rem; opacity: .36; }
.spice-desc { font-size: .7rem; opacity: .36; line-height: 1.52; }

/* Heat badge */
.heat-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .6rem;
    padding: .18rem .55rem;
    border-radius: 100px;
    font-size: .65rem;
    font-weight: 700;
    border: 1px solid currentColor;
}

/* ── TESTIMONIALS ── */
.reviews-section {
    background: var(--dark);
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 1.1rem;
    margin-top: 2.5rem;
}
.review-card {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    position: relative;
    transition: border-color .22s, transform .28s;
}
.review-card::before {
    content: '\201C';
    position: absolute;
    top: .8rem;
    right: 1rem;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--amber);
    opacity: .08;
    font-family: Georgia, serif;
    pointer-events: none;
}
.review-card:hover { border-color: var(--border-h); transform: translateY(-4px); }
.review-stars { display: flex; gap: 2px; margin-bottom: .75rem; }
.review-stars i { font-size: .72rem; color: var(--amber); }
.review-quote {
    font-size: .85rem;
    line-height: 1.75;
    color: rgba(253,246,236,.62);
    margin-bottom: 1.1rem;
    font-style: italic;
}
.review-author { display: flex; align-items: center; gap: .65rem; }
.review-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(239,159,39,.12);
    border: 1.5px solid rgba(239,159,39,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--amber);
    flex-shrink: 0;
}
.review-name { font-size: .85rem; font-weight: 700; margin-bottom: .06rem; }
.review-date { font-size: .7rem; color: rgba(253,246,236,.28); }

/* Stagger reveal for review cards */
.review-card:nth-child(1) { transition-delay: .05s; }
.review-card:nth-child(2) { transition-delay: .1s; }
.review-card:nth-child(3) { transition-delay: .15s; }
.review-card:nth-child(4) { transition-delay: .2s; }
.review-card:nth-child(5) { transition-delay: .25s; }
.review-card:nth-child(6) { transition-delay: .3s; }

/* Review badge */
.review-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(239,159,39,.07);
    border: 1px solid rgba(239,159,39,.18);
    border-radius: 100px;
    padding: .25rem .75rem;
    font-size: .7rem;
    color: var(--amber);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* ── LOYALTY ── */
.loyalty-section { background: var(--card2); }
.loyalty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ls-steps { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.ls-step { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1rem; background: rgba(239,159,39,.03); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .22s; }
.ls-step:hover { border-color: var(--border-h); }
.ls-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(239,159,39,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--amber); }
.ls-title { font-weight: 700; font-size: .86rem; margin-bottom: .1rem; }
.ls-desc { font-size: .76rem; color: rgba(253,246,236,.38); line-height: 1.52; }
.stamp-card-demo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.stamps-demo-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem; margin: 1.1rem 0; }
.stamp-d { aspect-ratio: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: all .3s; font-size: .85rem; }
.stamp-d.empty { border: 1.5px dashed rgba(186,117,23,.22); }
.stamp-d.filled { border: 1.5px solid var(--amber); background: rgba(239,159,39,.1); color: var(--amber); }
.stamp-d.gift { border: 1.5px solid var(--green); background: rgba(40,167,69,.08); color: #4ade80; }
.stamp-d.current { border: 1.5px dashed var(--amber); animation: stamp-pulse 1.5s ease-in-out infinite; }
@keyframes stamp-pulse { 0%,100%{border-color:var(--amber)} 50%{border-color:rgba(239,159,39,.28)} }
.stamp-pop { animation: s-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes s-pop { from{transform:scale(.55);opacity:0} to{transform:scale(1);opacity:1} }
.stamp-prog { height: 3px; background: rgba(186,117,23,.1); border-radius: 2px; overflow: hidden; margin: .5rem 0 .3rem; }
.stamp-prog-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--brown)); border-radius: 2px; transition: width .5s ease; }

/* ── WHATSAPP ── */
.wa-section { background: var(--dark); }
.wa-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: center; max-width: 960px; margin: 0 auto; }
.wa-steps { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.4rem; }
.wa-step { display: flex; align-items: flex-start; gap: .8rem; }
.wa-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(239,159,39,.1); border: 1px solid rgba(239,159,39,.22); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--amber); flex-shrink: 0; margin-top: .1rem; }
.wa-step-text { font-size: .86rem; color: rgba(253,246,236,.52); line-height: 1.68; padding-top: .05rem; }
.wa-step-text strong { color: var(--cream); font-weight: 600; }
.wa-mockup { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 320px; }
.wa-mock-header { background: #1a1108; padding: .75rem 1rem; display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid var(--border); }
.wa-mock-av { width: 34px; height: 34px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 1rem; }
.wa-mock-name { font-size: .88rem; font-weight: 700; }
.wa-mock-status { font-size: .7rem; color: #4ade80; display: flex; align-items: center; gap: .3rem; }
.wa-mock-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: status-blink 2s ease-in-out infinite; }
@keyframes status-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.wa-mock-body { padding: .9rem; display: flex; flex-direction: column; gap: .55rem; min-height: 170px; }
.wa-msg { max-width: 90%; padding: .6rem .8rem; border-radius: 11px; font-size: .78rem; line-height: 1.58; }
.wa-msg-in { background: #1f130a; border-radius: 0 11px 11px 11px; color: rgba(253,246,236,.62); align-self: flex-start; }
.wa-msg-out { background: rgba(239,159,39,.13); border: 1px solid rgba(239,159,39,.18); border-radius: 11px 0 11px 11px; color: var(--cream); align-self: flex-end; }
.wa-msg-out strong { color: var(--amber); display: block; margin-bottom: .2rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.wa-msg-time { font-size: .6rem; color: rgba(253,246,236,.2); margin-top: .2rem; text-align: right; }
.wa-mock-cta { display: flex; align-items: center; justify-content: center; gap: .55rem; background: #25d366; color: #fff; font-weight: 700; font-size: .88rem; padding: .8rem; transition: background .2s; text-decoration: none; }
.wa-mock-cta:hover { background: #22c55e; }

/* ── LOCATION ── */
.location-section { background: var(--card2); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.loc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.loc-row { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.loc-row:last-child { border-bottom: none; }
.loc-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(239,159,39,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--amber); }
.loc-label { font-size: .67rem; color: rgba(253,246,236,.3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .18rem; font-weight: 700; }
.loc-val { font-size: .88rem; font-weight: 500; }
.loc-val a { color: var(--amber); }
.map-placeholder { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); height: 26rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; position: relative; overflow: hidden; }
.map-ring { border-radius: 50%; border: 1px solid rgba(239,159,39,.1); position: absolute; animation: map-expand 3s ease-in-out infinite; }
.map-ring:nth-child(2) { animation-delay: 1s; }
.map-ring:nth-child(3) { animation-delay: 2s; }
@keyframes map-expand { 0%{width:60px;height:60px;opacity:.7} 100%{width:280px;height:280px;opacity:0} }
.map-pin-icon { font-size: 2.4rem; color: var(--amber); position: relative; z-index: 1; animation: pin-b 2.5s ease-in-out infinite; }
@keyframes pin-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── CTA ── */
.cta-section {
    text-align: center;
    padding: 5.5rem 0;
    background: var(--dark);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(239,159,39,.05), transparent 65%);
    pointer-events: none;
}

/* ── MOBILE ── */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    /*.hero-visual {*/
    /*    min-height: 220px;*/
    /*    margin-top: .5rem;*/
    /*}*/
    .hero-mascot-fig {
        width: 190px;
        height: auto;
    }
    .hero-mascot-glow {
        width: 220px;
        height: 220px;
        top: -10px;
    }
    .hero-mascot-shadow {
        width: 130px;
    }
    .hero-mascot-bubble {
        font-size: .68rem;
        padding: .4rem .75rem;
        left: 62%;
        top: -6px;
    }
    .loyalty-grid { grid-template-columns: 1fr; }
    .wa-grid { grid-template-columns: 1fr; gap: 2rem; }
    .location-grid { grid-template-columns: 1fr; }
    .proc-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .pillars-grid { grid-template-columns: 1fr 1fr; }
    .pillar { transform: none !important; }
    .pillar:hover { transform: translateY(-4px) !important; }
    .doodle { display: none; }
    .proc-doodle { display: none; }
    .proc-metric { transform: none !important; }
    .proc-metric:hover { transform: translateY(-3px) !important; }
    .spice-grid { grid-template-columns: 1fr 1fr; }
    .deals-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .deal-card { transform: none !important; margin-top: 0 !important; }
    .deal-card:hover { transform: translateY(-4px) !important; }
    .reviews-grid { grid-template-columns: 1fr; }
    .menu-prev-card { flex-basis: 170px; }
}
@media (max-width: 480px) {
    .spice-grid { grid-template-columns: 1fr 1fr; }
    .pillars-grid { grid-template-columns: 1fr; }
    .proc-metrics { grid-template-columns: 1fr 1fr; }
}

/* ── DRIVING FRIES CART — loops left to right across the bottom ── */
.cart-drive-wrap {
    position: fixed;
    left: 0; right: 0; bottom: 3px;
    height: 90px;
    pointer-events: none;
    z-index: 350;
    overflow: hidden;
}
.cart-drive {
    position: absolute;
    left: -170px;
    bottom: 0;
    width: 150px; height: auto;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
    will-change: transform;
    animation: cart-drive-across 18s linear infinite;
}
@keyframes cart-drive-across {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 170px)); }
}
/* Each wheel group spins around its own hub center (set via transform-origin
   inline per wheel since they sit at different x positions) */
.cart-wheel { animation: cart-wheel-spin 1s linear infinite; }
@keyframes cart-wheel-spin { to { transform: rotate(360deg); } }
.cart-steam { animation: cart-steam-rise 2.2s ease-in-out infinite; }
@keyframes cart-steam-rise { 0%,100%{opacity:.5;transform:translateY(0)} 50%{opacity:.1;transform:translateY(-6px)} }

@media (max-width: 768px) {
    .cart-drive { width: 112px; }
    /* Sit above the bottom tab bar instead of overlapping it */
    .cart-drive-wrap { bottom: calc(60px + env(safe-area-inset-bottom,0) + 3px); }
}
@media (prefers-reduced-motion: reduce) {
    .cart-drive-wrap { display: none; }
}

/* ── HOME PAGE VARIANT PICKER MODAL — same look as menu.blade.php's ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.82);
    display: none; align-items: flex-end; justify-content: center; z-index: 600;
}
.modal-overlay.show { display: flex; }
.modal-sheet {
    background: var(--card); border-radius: 18px 18px 0 0;
    width: 100%; max-width: 480px; padding: 1.4rem;
    animation: sheet-up .25s ease;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.modal-drag { width: 34px; height: 4px; background: rgba(253,246,236,.12); border-radius: 2px; margin: 0 auto .8rem; }
.modal-title { font-size: 1.02rem; font-weight: 700; margin-bottom: .2rem; }
.modal-sub { font-size: .78rem; color: var(--brown); margin-bottom: 1.1rem; }
.variant-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.variant-opt {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem .95rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all .2s;
}
.variant-opt:hover, .variant-opt.selected { border-color: var(--amber); background: rgba(239,159,39,.07); }
.variant-label { font-size: .86rem; font-weight: 600; }
.variant-urdu { font-size: .7rem; color: var(--brown); font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; }
.variant-price { font-size: .92rem; font-weight: 700; color: var(--amber); }
.variant-popular { font-size: .62rem; background: rgba(239,159,39,.12); color: var(--amber); border-radius: 100px; padding: .14rem .45rem; margin-left: .35rem; }
.modal-add-btn {
    width: 100%; padding: .82rem; background: var(--amber); color: var(--dark);
    border: none; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 700;
    cursor: pointer; font-family: 'Space Grotesk', sans-serif;
}

/* ── FLOATING MINI CART BAR — appears once an item is added on this page ── */
.home-cart-bar {
    position: fixed; left: 50%; bottom: 1.4rem;
    transform: translateX(-50%) translateY(120%);
    width: calc(100% - 2.4rem); max-width: 420px;
    background: var(--card); border: 1.5px solid rgba(239,159,39,.3);
    border-radius: 16px; padding: .85rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    box-shadow: 0 10px 36px rgba(0,0,0,.5);
    z-index: 480;
    transition: transform .3s cubic-bezier(.34,1.2,.64,1);
    overflow: visible;
}

.home-cart-mascot {
    position: absolute;
    left: 10rem;
    top: -2.5rem;
    width: 70px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
    animation: mascot-bob 2.6s ease-in-out infinite;
    pointer-events: none;
}
@media (max-width: 768px) {
    .home-cart-mascot { display: none }
}
.home-cart-bar.show { transform: translateX(-50%) translateY(0); }
.home-cart-total { font-size: 1.05rem; font-weight: 800; color: var(--amber); line-height: 1; }
.home-cart-count { font-size: .72rem; color: rgba(253,246,236,.4); margin-top: .2rem; }
@media (max-width: 768px) {
    /* Sit above the bottom tab bar on mobile, same pattern as cart-drive */
    .home-cart-bar { bottom: calc(60px + env(safe-area-inset-bottom,0) + 12px); }
}

/* ── Toast confirmation ── */
.home-toast {
    position: fixed; top: 5.5rem; left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: var(--card2); border: 1px solid rgba(239,159,39,.3);
    color: var(--cream); font-size: .82rem; font-weight: 600;
    padding: .65rem 1.1rem; border-radius: 100px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; z-index: 900;
    transition: opacity .25s, transform .25s;
}
.home-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════
   SECTION BACKGROUND OVERLAYS — subtle textured depth per section
   (same diagonal-hatch + radial-glow language used on the menu page)
   ════════════════════════════════════════════════════════════ */

/* ── Hero: adds to the existing grain ::before via a second layer (::after) ── */
.hero::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 88% 12%, rgba(239,159,39,.10), transparent 55%),
        repeating-linear-gradient(45deg, rgba(253,246,236,.018) 0 2px, transparent 2px 20px);
}

/* ── Deals section — purple-tinted, matches the deal-card accent used on the menu page ── */
#deals { position: relative; overflow: hidden; }
#deals::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 85%, rgba(111,66,193,.09), transparent 55%),
        repeating-linear-gradient(45deg, rgba(253,246,236,.016) 0 2px, transparent 2px 20px);
}
#deals .container { position: relative; z-index: 1; }

/* ── Loyalty section — warm amber/gold, matches stamps & stars imagery ── */
.loyalty-section { position: relative; overflow: hidden; }
.loyalty-section::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 85% 20%, rgba(239,159,39,.12), transparent 55%),
        repeating-linear-gradient(45deg, rgba(253,246,236,.016) 0 2px, transparent 2px 20px);
}
.loyalty-section .container { position: relative; z-index: 1; }

/* ── Contact/location section — soft brown, quieter than the others ── */
.location-section { position: relative; overflow: hidden; }
.location-section::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(186,117,23,.10), transparent 55%),
        repeating-linear-gradient(45deg, rgba(253,246,236,.014) 0 2px, transparent 2px 20px);
}
.location-section .container { position: relative; z-index: 1; }

/* ── CTA section — enhance the existing ::before with the same hatch (adds a layer, doesn't replace the glow) ── */
.cta-section::before {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(239,159,39,.05), transparent 65%),
        repeating-linear-gradient(45deg, rgba(253,246,236,.016) 0 2px, transparent 2px 20px);
}

/* ════════════════════════════════════════════════════════════
   WHY FRY KHANA — infographic badges (Meal Monkey "How We Serve
   You" style, adapted to the dark/amber brand palette)
   ════════════════════════════════════════════════════════════ */
.why-fk-section { padding: 5rem 0; position: relative; overflow: hidden; }
.why-fk-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem; margin-top: 3rem;
}
@media (max-width: 900px) {
    .why-fk-grid { grid-template-columns: 1fr; gap: 2.8rem; max-width: 320px; margin-left: auto; margin-right: auto; }
}

.why-fk-item { text-align: center; }
.why-fk-badge-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 1.4rem; }
.why-fk-badge {
    position: absolute; inset: 14px;
    background: var(--card2); border: 1px solid var(--border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--amber);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.why-fk-arc {
    position: absolute; inset: 0; width: 100%; height: 100%;
    fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round;
}
.why-fk-arc-2 { stroke-dasharray: 6 7; opacity: .8; }
.why-fk-title { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--cream); margin-bottom: .4rem; }
.why-fk-desc { font-size: .83rem; color: rgba(253,246,236,.45); line-height: 1.55; max-width: 260px; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════
   EXPLORE CATEGORIES — homepage category badges (photo + doodle arcs)
   ════════════════════════════════════════════════════════════ */
.explore-cats-section { padding: 5rem 0 6rem; }
.explore-cats-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 1rem; margin-top: 3.5rem; align-items: start;
}
.explore-cat-item-offset { margin-top: 2.2rem; }
@media (max-width: 900px) {
    .explore-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1rem; }
    .explore-cat-item-offset { margin-top: 0; }
}
@media (max-width: 520px) {
    .explore-cats-grid { grid-template-columns: repeat(2, 1fr); }
}

.explore-cat-item { text-decoration: none; text-align: center; display: block; transition: transform .25s; }
.explore-cat-item:hover { transform: translateY(-6px); }

.explore-cat-circle {
    position: relative; width: 130px; height: 130px; margin: 0 auto 1.1rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: box-shadow .25s;
}
.explore-cat-circle.clr-amber  { background: radial-gradient(circle at 50% 38%, rgba(239,159,39,.22), var(--card2) 72%); }
.explore-cat-circle.clr-brown  { background: radial-gradient(circle at 50% 38%, rgba(186,117,23,.22), var(--card2) 72%); }
.explore-cat-circle.clr-purple { background: radial-gradient(circle at 50% 38%, rgba(111,66,193,.24), var(--card2) 72%); }
.explore-cat-circle.clr-pink   { background: radial-gradient(circle at 50% 38%, rgba(232,62,140,.22), var(--card2) 72%); }
.explore-cat-item:hover .explore-cat-circle { box-shadow: 0 16px 34px rgba(0,0,0,.45); }

.explore-cat-circle img {
    width: 66%; height: 66%; object-fit: contain; position: relative; z-index: 2;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); transition: transform .25s;
}
.explore-cat-item:hover .explore-cat-circle img { transform: scale(1.08) rotate(-4deg); }
.explore-cat-circle i { font-size: 2.1rem; position: relative; z-index: 2; color: var(--amber); }
.explore-cat-circle.clr-purple i { color: #a78bfa; }
.explore-cat-circle.clr-pink i { color: #f472b6; }

.explore-cat-arc { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.explore-cat-arc-2 { stroke-dasharray: 5 8; opacity: .75; }

.explore-cat-label { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1rem; color: var(--cream); margin-bottom: .25rem; }
.explore-cat-link {
    font-size: .74rem; font-weight: 700; color: var(--amber);
    display: inline-flex; align-items: center; gap: .35rem;
    opacity: .75; transition: gap .2s, opacity .2s;
}
.explore-cat-item:hover .explore-cat-link { opacity: 1; gap: .55rem; }

/*!* ════════════════════════════════════════════════════════════*/
/*   DEALS — bento grid with a featured first tile*/
/*   ════════════════════════════════════════════════════════════ *!*/
/*.deals-grid.bento {*/
/*    grid-template-columns: 1.3fr 1fr;*/
/*    grid-auto-rows: min-content;*/
/*}*/
/*.deal-card-featured {*/
/*    grid-column: 1; grid-row: 1 / 3;*/
/*    display: flex; align-items: center; gap: 1.8rem;*/
/*    padding: 2rem 1.8rem;*/
/*}*/
/*.deal-card-featured .deal-img-wrap { height: auto; margin-bottom: 0; flex-shrink: 0; width: 150px; }*/
/*.deal-card-featured .deal-img { width: 130px; height: 130px; }*/
/*.deal-card-featured .deal-body { flex: 1; min-width: 0; }*/
/*.deal-card-featured .deal-tag { background: rgba(239,159,39,.15); color: var(--amber); border-color: rgba(239,159,39,.4); }*/
/*@media (max-width: 860px) {*/
/*    .deals-grid.bento { grid-template-columns: 1fr; }*/
/*    .deal-card-featured {*/
/*        grid-column: 1; grid-row: auto;*/
/*        flex-direction: column; text-align: center;*/
/*        padding: 1.6rem 1.4rem;*/
/*    }*/
/*    .deal-card-featured .deal-img-wrap { width: 100%; }*/
/*}*/
/* ═══════════════════════════════════════════════════════════════
    OPTION A — SIRF IMAGE
    Purana hero block DELETE kar ke ye paste karo.
   ═══════════════════════════════════════════════════════════════ */

/*.hero-inner {*/
/*    display: grid;*/
/*    grid-template-columns: 600px 440px;*/
/*    justify-content: space-between;*/
/*    gap: 3rem;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*}*/

/*.hero-visual {*/
/*    display: block;*/
/*    position: relative;*/
/*    min-height: auto;*/
/*    overflow: visible;*/
/*    animation: none;*/
/*}*/

/*.hero-solo {*/
/*    position: relative;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*!* ── Image ── *!*/
/*.hero-solo-img {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    width: 120%;*/
/*    height: auto;*/
/*    max-height: 560px;*/
/*    object-fit: contain;*/
/*    filter: drop-shadow(0 30px 50px rgba(0,0,0,.7));*/
/*    animation: hs-float 6s ease-in-out infinite;*/
/*}*/
/*@keyframes hs-float {*/
/*    0%,100% { transform: translateY(0); }*/
/*    50%     { transform: translateY(-16px); }*/
/*}*/

/*!* ── Glows ── *!*/
/*.hero-solo-glow,*/
/*.hero-solo-glow-2 {*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    pointer-events: none;*/
/*    z-index: 1;*/
/*}*/
/*.hero-solo-glow {*/
/*    width: 88%; aspect-ratio: 1;*/
/*    left: 50%; top: 48%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: radial-gradient(circle, rgba(239,159,39,.28), transparent 66%);*/
/*    filter: blur(30px);*/
/*    animation: hs-pulse 5s ease-in-out infinite;*/
/*}*/
/*.hero-solo-glow-2 {*/
/*    width: 52%; aspect-ratio: 1;*/
/*    left: 50%; top: 66%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: radial-gradient(circle, rgba(216,90,48,.22), transparent 62%);*/
/*    filter: blur(34px);*/
/*    animation: hs-pulse 5s ease-in-out 1.5s infinite;*/
/*}*/
/*@keyframes hs-pulse {*/
/*    0%,100% { opacity: .65; }*/
/*    50%     { opacity: 1; }*/
/*}*/

/*!* ── Badge ── *!*/
/*.hero-solo-badge {*/
/*    position: absolute;*/
/*    right: -6%; top: 14%;*/
/*    z-index: 4;*/
/*    background: var(--amber);*/
/*    color: var(--dark);*/
/*    border-radius: 16px;*/
/*    padding: .55rem .9rem;*/
/*    text-align: right;*/
/*    box-shadow: 0 12px 32px rgba(239,159,39,.45);*/
/*    animation: hs-in .9s .6s cubic-bezier(.16,1,.3,1) both;*/
/*}*/
/*@keyframes hs-in {*/
/*    from { opacity: 0; transform: translateY(-14px) scale(.9); }*/
/*    to   { opacity: 1; transform: none; }*/
/*}*/
/*.hero-solo-badge-lbl {*/
/*    display: block;*/
/*    font-size: .58rem; font-weight: 700;*/
/*    text-transform: uppercase; letter-spacing: .1em;*/
/*    opacity: .6;*/
/*}*/
/*.hero-solo-badge-val {*/
/*    display: block;*/
/*    font-size: 1.15rem; font-weight: 800;*/
/*    line-height: 1.1; letter-spacing: -.02em;*/
/*}*/

/*!* ── Mascot ── *!*/
/*.hero-solo-mascot {*/
/*    position: absolute;*/
/*    left: -2%; bottom: 6%;*/
/*    z-index: 4;*/
/*    filter: drop-shadow(0 8px 18px rgba(0,0,0,.8));*/
/*    animation: hs-bob 3.6s ease-in-out infinite;*/
/*    transform-origin: center bottom;*/
/*}*/
/*@keyframes hs-bob {*/
/*    0%,100% { transform: translateY(0) rotate(-3deg); }*/
/*    50%     { transform: translateY(-9px) rotate(3deg); }*/
/*}*/

/*!* ── Urdu tagline ── *!*/
/*.hero-urdu {*/
/*    color: var(--amber) !important;*/
/*    font-size: clamp(1.15rem, 2.2vw, 2rem) !important;*/
/*    opacity: .88;*/
/*    margin-top: 1.1rem !important;*/
/*    line-height: 2.1;*/
/*    max-width: 460px;*/
/*}*/
/*.hero-desc { max-width: 540px; }*/

/*!* ── Responsive ── *!*/
/*@media (max-width: 1150px) {*/
/*    .hero-inner { grid-template-columns: minmax(0,1fr) 360px; gap: 2rem; }*/
/*    .hero-solo-img { max-height: 430px; }*/
/*}*/
/*@media (max-width: 968px) {*/
/*    .hero-inner { grid-template-columns: 1fr; }*/
/*    .hero-visual { display: none; }*/
/*    .hero-solo { max-width: 340px; margin: 0 auto; }*/
/*    .hero-solo-img { width: 100%; max-height: 340px; }*/
/*    .hero-solo-mascot { width: 54px; left: -6%; }*/
/*    .hero-solo-badge { right: -2%; padding: .42rem .7rem; }*/
/*    .hero-solo-badge-val { font-size: .95rem; }*/
/*}*/




/* ═══════════════════════════════════════════════════════════════
    OPTION B — IMAGE + TAIRTE HUE MENU CHIPS
    Purana hero block DELETE kar ke ye paste karo.
   ═══════════════════════════════════════════════════════════════ */

.hero-inner {
    display: grid;
    grid-template-columns: 600px 460px;
    justify-content: space-between;
    gap: 5rem;
    align-items: center;
    width: 100%;
}

.hero-visual {
    display: block;
    position: relative;
    min-height: auto;
    overflow: visible;
    animation: none;
}

.hero-stack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* ── Main image ── */
.hero-stack-img {
    position: relative;
    z-index: 2;
    width: 104%;
    height: auto;
    max-height: 35rem;
    object-fit: contain;
    filter: drop-shadow(0 28px 46px rgba(0,0,0,.7));
    animation: hk-float 6s ease-in-out infinite;
}
@keyframes hk-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-14px); }
}

.hero-stack-glow {
    position: absolute;
    width: 82%; aspect-ratio: 1;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239,159,39,.26), transparent 66%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 1;
    animation: hk-pulse 5s ease-in-out infinite;
}
@keyframes hk-pulse {
    0%,100% { opacity: .65; }
    50%     { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
    CHIPS — CLICKABLE (div-based, deals-grid jaisa pattern)
    optionB-hero-stack.css mein .hero-chip wale rules ye replace karo.
   ═══════════════════════════════════════════════════════════════ */

.hero-chip {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(28,17,8,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(239,159,39,.26);
    border-radius: 14px;
    padding: .55rem .6rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.55);
    cursor: pointer;
    transition: transform .18s, border-color .18s, background .18s;
}
.hero-chip:hover {
    border-color: var(--amber);
    background: rgba(35,20,16,.85);
    transform: translateY(-3px);
    animation-play-state: paused;   /* drift ruk jaye taake click aasan ho */
}
.hero-chip:active { transform: translateY(-1px) scale(.98); }
.hero-chip:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

.hero-chip img {
    width: 64px; height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;    /* click hamesha parent div pe jaye */
}

/*.hero-chip-img {*/
/*    height: 150px; display: flex; align-items: center; justify-content: center;*/
/*    position: relative; overflow: hidden;*/
/*    background: radial-gradient(circle at 50% 45%, rgba(239,159,39,.16), transparent 70%), var(--card);*/
/*}*/
/*.hero-chip-img img {*/
/*    width: 72%; height: 72%; object-fit: contain;*/
/*    filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));*/
/*    transition: transform .25s ease;*/
/*}*/
/*.menu-card:hover .hero-chip-img img { transform: scale(1.08); }*/

.hero-chip-text { min-width: 0; pointer-events: none; }
.hero-chip-name {
    font-size: .86rem;
    font-weight: 700;
    color: var(--cream);
    white-space: nowrap;
    margin-bottom: 1.8rem;
}
.hero-chip-price {
    position: absolute; bottom: .6rem; right: 0; z-index: 2;
    background: var(--amber); color: var(--dark);
    font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: .86rem;
    padding: .3rem .6rem; border-radius: 8px 0 0 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.hero-chip-price.from { font-size: 1rem; }
.hero-chip-price.from::before { content: 'from '; font-weight: 600; opacity: .7; }

.hero-chip-action {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(239,159,39,.14);
    color: var(--amber);
    font-size: .68rem;
    transition: all .18s;
    pointer-events: none;
}
.hero-chip:hover .hero-chip-action {
    background: var(--amber);
    color: var(--dark);
}

/* Har chip ki apni jagah aur raftar */
.hero-chip-1 {
    left: -12%; top: 24%;
    animation: hk-in .8s .5s cubic-bezier(.16,1,.3,1) both,
    hk-drift 5.5s 1.3s ease-in-out infinite;
}
.hero-chip-2 {
    right: -20%; top: 45%;
    animation: hk-in .8s .68s cubic-bezier(.16,1,.3,1) both,
    hk-drift 6.5s 1.5s ease-in-out infinite;
}
.hero-chip-3 {
    left: -6%; bottom: 14%;
    animation: hk-in .8s .86s cubic-bezier(.16,1,.3,1) both,
    hk-drift 7s 1.7s ease-in-out infinite;
}
@keyframes hk-in {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes hk-drift {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-11px); }
}

/* ── Mascot ── */
.hero-stack-mascot {
    position: absolute;
    right: -29%; top: 38%;
    z-index: 6;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.8));
    animation: hk-bob 3.6s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes hk-bob {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%     { transform: translateY(-9px) rotate(3deg); }
}

/* ── Responsive ── */
@media (max-width: 1250px) {
    .hero-inner { grid-template-columns: minmax(0,1fr) 400px; gap: 2rem; }
    .hero-stack-img { max-height: 400px; }
    .hero-chip { padding: .45rem .65rem .45rem .5rem; }
    .hero-chip img { width: 28px; height: 28px; }
    .hero-chip-name { font-size: .7rem; }
    .hero-chip-1 { left: -8%; }
    .hero-chip-2 { right: -6%; }
    .hero-chip-3 { left: -4%; }
}

@media (max-width: 968px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .hero-stack { max-width: 340px; margin: 0 auto; }
    .hero-stack-img { width: 100%; max-height: 330px; }
    /* Chhoti screen pe teeno chips shor machate hain — sirf ek */
    .hero-chip-2, .hero-chip-3 { display: none; }
    .hero-chip-1 { left: -6%; top: 8%; }
    .hero-stack-mascot { width: 52px; right: -2%; }
}

/* ── Column ko positioning context banaya ──
   Taake neeche wali Urdu watermark isi column ke andar
   "behind" reh sake, poore hero mein na phail jaye. */
/*.hero-inner > div:first-child {*/
/*    position: relative;*/
/*}*/

/*.hero-urdu {*/
/*    position: absolute;*/
/*    z-index: -1;*/
/*    top: 15rem;*/
/*    left: 4rem;*/
/*    right: 0;*/

/*    color: var(--amber) !important;*/
/*    opacity: .16;*/
/*    font-size: clamp(2.2rem, 4.4vw, 2.8rem) !important;*/
/*    line-height: 1.3 !important;*/
/*    white-space: normal;*/
/*    text-align: right;*/

/*    margin-top: 0 !important;*/
/*    pointer-events: none;*/
/*}*/