/* =============================================================
   NOODLNA — premium edition
   Type matched to the packaging:
   - Marhey + Lalezar  — chunky Arabic display (matches بتشبع, نودلنا)
   - Tajawal           — body Arabic (clean modern)
   - Pacifico          — script English (matches handwritten "Noodlna")
   - Fredoka           — English UI
   - Caveat            — accents & taglines
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marhey:wght@500;600;700&family=Lalezar&family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@600;700;900&family=Pacifico&family=Fredoka:wght@400;500;600;700&family=Caveat:wght@500;700&family=Bowlby+One+SC&display=swap');

:root {
  --red: #E2231A;
  --red-dark: #B11410;
  --red-glow: rgba(226,35,26,0.4);
  --yellow: #FFD630;
  --yellow-deep: #F5B800;
  --green: #4FAE2A;
  --green-deep: #3C8B1F;
  --blue: #1B9CFC;
  --blue-deep: #0E72C9;
  --purple: #4A1273;
  --purple-light: #7B2DA8;
  --cream: #FFF6E4;
  --cream-soft: #FCEFCD;
  --cream-deep: #F7E6BC;
  --ink: #14110D;
  --ink-soft: #3E3528;
  --shadow-soft: 0 30px 60px -25px rgba(20,17,13,0.35);
  --shadow-hard: 6px 6px 0 var(--ink);
  /* live theme */
  --accent: var(--green);
  --accent-deep: var(--green-deep);
  --accent-ink: #fff;
  --bg: var(--cream);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  font-weight: 500;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.8s ease;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* hide system cursor only in cinematic sections (the noodle takes over) */
[data-noodle="on"], [data-noodle="on"] * { cursor: none; }
[data-noodle="on"] input, [data-noodle="on"] textarea { cursor: text; }

img { display: block; max-width: 100%; }

/* =============================================================
   LONG NOODLE CURSOR — wavy multi-strand
   ============================================================= */
.noodle-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}
.noodle-cursor.show { opacity: 1; }
.noodle-cursor svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.noodle-cursor path.shadow {
  fill: none;
  stroke: rgba(20,17,13,0.35);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(2px, 4px);
}
.noodle-cursor path.outer {
  fill: none;
  stroke: var(--yellow-deep);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.noodle-cursor path.body {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.noodle-cursor path.shine {
  fill: none;
  stroke: #FFF1A8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  transform: translate(-1px, -2px);
}
.noodle-cursor circle.tip {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 3;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.noodle-cursor.hot path.outer { stroke: #c25b1a; }
.noodle-cursor.hot path.body { stroke: #ff8b3a; }
.noodle-cursor.hot path.shine { stroke: #ffd0a8; }
.noodle-cursor.hot circle.tip { fill: #ff8b3a; }

/* =============================================================
   BACKBONE NOODLE
   ============================================================= */
.backbone {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.backbone svg { width: 100%; height: 100%; }
.backbone path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.06));
}
.backbone .bb-edge {
  stroke: var(--yellow-deep);
  stroke-width: 18;
  opacity: 0.5;
}

/* =============================================================
   NAV
   ============================================================= */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
nav.top.solid {
  background: rgba(255, 246, 228, 0.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 rgba(20,17,13,0.06), 0 18px 40px -28px rgba(0,0,0,0.25);
  padding: 12px 4vw;
}
nav.top .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
nav.top .logo img { height: 60px; }
nav.top ul {
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--ink);
  padding: 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
}
nav.top ul a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  font-family: 'Tajawal', sans-serif;
}
nav.top ul a:hover {
  background: var(--ink);
  color: var(--yellow);
}
nav.top .nav-cta {
  background: var(--red);
  color: white;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Tajawal', sans-serif;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform 0.2s, box-shadow 0.2s;
}
nav.top .nav-cta:hover {
  transform: translate(-2px,-2px);
  box-shadow: 9px 9px 0 var(--ink);
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 6vw 80px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 20%, rgba(79,174,42,0.10), transparent 50%),
    radial-gradient(circle at 12% 90%, rgba(226,35,26,0.08), transparent 45%),
    var(--bg);
}
.hero .dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20,17,13,0.08) 1.6px, transparent 1.6px);
  background-size: 28px 28px;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black, transparent);
}

.hero-copy { position: relative; z-index: 4; }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2.5px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 28px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: 'Tajawal', sans-serif;
}
.hero .eyebrow .dot {
  width: 10px; height: 10px;
  background: var(--red); border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(226,35,26,0.18);
  animation: pulse 2s infinite;
}
.hero .eyebrow .en {
  font-family: 'Caveat', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  color: var(--red);
  border-right: 2px solid rgba(20,17,13,0.2);
  padding-right: 12px;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(226,35,26,0.18); }
  50% { box-shadow: 0 0 0 12px rgba(226,35,26,0); }
}

.hero h1 {
  font-family: 'Lalezar', 'Marhey', 'Cairo', sans-serif;
  font-weight: 400;
  font-size: clamp(96px, 13vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
}
.hero h1 .row {
  display: block;
  position: relative;
}
.hero h1 .accent {
  color: var(--red);
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, transparent 8%, var(--yellow) 8%, var(--yellow) 92%, transparent 92%);
  padding: 0 0.08em;
  margin: 0 -0.05em;
  border-radius: 12px;
}
.hero h1 .accent.tilt { transform: rotate(-1.5deg); }
.hero h1 .blue {
  color: var(--blue);
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    3px 3px 0 #fff,
    5px 5px 0 var(--ink);
}
.hero h1 .squiggle {
  position: absolute;
  bottom: -18px; left: 0; right: 0;
  width: 100%;
  z-index: -1;
}

.hero .subline {
  margin-top: 32px;
  max-width: 540px;
  font-size: clamp(18px, 1.4vw, 21px);
  color: var(--ink-soft);
  font-weight: 500;
}
.hero .subline .en {
  display: block;
  margin-top: 14px;
  direction: ltr;
  text-align: right;
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 24px;
  color: var(--red);
  opacity: 0.9;
}

.hero .cta-row {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border: 2.5px solid var(--ink);
  background: white;
  color: var(--ink);
  transition: transform 0.18s, box-shadow 0.18s, background 0.2s, color 0.2s;
  font-family: 'Tajawal', sans-serif;
}
.btn.primary {
  background: var(--red);
  color: white;
  box-shadow: 6px 6px 0 var(--ink);
}
.btn.primary:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--ink);
  background: var(--red-dark);
}
.btn.ghost {
  box-shadow: 6px 6px 0 var(--ink);
}
.btn.ghost:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--ink);
  background: var(--ink);
  color: var(--yellow);
}

/* circle "watch story" play button */
.play-disc {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--ink);
  margin-right: 8px;
}
.play-disc .ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--yellow);
  font-size: 22px;
  transition: transform 0.3s;
}
.play-disc .ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px dashed var(--ink);
  border-radius: 50%;
  animation: spin-slow 14s linear infinite;
}
.play-disc:hover .ring { transform: scale(1.08) rotate(8deg); }
.play-disc .label {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.play-disc .label small {
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 4px;
}

/* social proof / trust strip */
.trust-strip {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: 'Tajawal', sans-serif;
}
.trust-strip .stars {
  display: flex;
  gap: 4px;
  color: var(--red);
  font-size: 18px;
}
.trust-strip .text {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
}
.trust-strip .text b { color: var(--ink); }
.trust-strip .divider {
  width: 1px; height: 32px;
  background: rgba(20,17,13,0.2);
}

/* ------------- HERO STAGE ------------- */
.hero-stage {
  position: relative;
  height: 720px;
  z-index: 3;
}

.hero-stage .halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,214,48,0.5) 0%, rgba(255,214,48,0.18) 40%, transparent 70%);
  animation: halo-breathe 6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

.hero-stage .pack-main {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 115%;
  max-width: 820px;
  height: auto;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,0.3));
  animation: float-bob 6s ease-in-out infinite;
  z-index: 5;
  transition: transform 0.2s ease-out;
}
@keyframes float-bob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-22px) rotate(-1deg); }
}

/* steam */
.steam {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 240px; height: 240px;
  pointer-events: none;
}
.steam span {
  position: absolute;
  bottom: 0;
  width: 50px; height: 50px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  filter: blur(10px);
  animation: rise 4s infinite;
}
.steam span:nth-child(1) { left: 30px; animation-delay: 0s; }
.steam span:nth-child(2) { left: 100px; animation-delay: 0.8s; width: 60px; height: 60px; }
.steam span:nth-child(3) { left: 170px; animation-delay: 1.6s; }
.steam span:nth-child(4) { left: 60px; animation-delay: 2.4s; width: 70px; height: 70px; }
.steam span:nth-child(5) { left: 130px; animation-delay: 3.2s; }
@keyframes rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-240px) scale(1.4) translateX(20px); }
}

.float-wrap {
  position: absolute;
  animation: float-bob-slow 7s ease-in-out infinite;
  z-index: 6;
}
@keyframes float-bob-slow {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}
.float-wrap .chip {
  background: white;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.float-wrap .chip.lg {
  padding: 14px 20px;
  font-size: 15px;
}
.float-wrap .chip .icon {
  font-size: 20px;
}

/* spec card bottom-right */
.spec-card {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--ink);
  color: white;
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  display: flex;
  gap: 24px;
  z-index: 7;
}
.spec-card .item .v {
  font-family: 'Lalezar', 'Marhey';
  font-size: 34px;
  line-height: 1;
  color: var(--yellow);
}
.spec-card .item .k {
  font-family: 'Tajawal';
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 6px;
}
.spec-card .divider {
  width: 1px;
  background: rgba(255,255,255,0.15);
}

/* promo ribbon */
.promo-ribbon {
  position: absolute;
  top: 30px;
  left: 6%;
  background: var(--red);
  color: white;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 16px 24px;
  font-family: 'Marhey', 'Cairo';
  font-weight: 700;
  font-size: 20px;
  transform: rotate(-8deg);
  box-shadow: 5px 5px 0 var(--ink);
  z-index: 8;
}
.promo-ribbon::before {
  content: '🔥';
  margin-left: 8px;
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  font-family: 'Fredoka', sans-serif;
  direction: ltr;
}
.scroll-hint .line {
  width: 2px; height: 56px;
  background: rgba(20,17,13,0.15);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.scroll-hint .line:after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0; right: 0;
  height: 100%;
  background: var(--yellow);
  animation: slither 1.8s ease-in-out infinite;
}
@keyframes slither {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee {
  background: var(--red);
  color: white;
  padding: 22px 0;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
  position: relative;
  z-index: 4;
  transform: rotate(-1.5deg);
  margin: 40px -2vw;
  transition: background 0.6s;
}
.marquee .track {
  display: flex;
  gap: 0;
  animation: marq 40s linear infinite;
  white-space: nowrap;
  font-family: 'Marhey', 'Cairo';
  font-weight: 700;
  font-size: 32px;
  width: max-content;
  direction: ltr;
}
.marquee .track .row {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  padding-left: 56px;
  flex: 0 0 auto;
}
.marquee .track .row b { font-weight: 700; }
@keyframes marq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marq-w, 50%)), 0, 0); }
}
.marquee .star {
  color: var(--yellow);
  font-size: 26px;
  display: inline-block;
  transform: translateY(-2px);
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =============================================================
   SECTION SHELL
   ============================================================= */
section.block {
  position: relative;
  padding: 140px 6vw;
  z-index: 3;
}
.eyetag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Caveat', cursive;
  font-style: italic;
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 18px;
  direction: ltr;
}
.eyetag .bar {
  width: 38px; height: 3px;
  background: var(--red);
  border-radius: 3px;
}
.section-title {
  font-family: 'Lalezar', 'Marhey', 'Cairo';
  font-weight: 400;
  font-size: clamp(56px, 7vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
}
.section-title .pop { color: var(--red); }
.section-title .yel { color: var(--yellow-deep); }

.flavors-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 70px;
  flex-wrap: wrap;
}
.flavors-head .right {
  max-width: 460px;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.6;
}

/* =============================================================
   FLAVORS
   ============================================================= */
.flavors {
  position: relative;
  background: var(--bg);
  transition: background-color 0.8s ease;
}

.flavor-stage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 640px;
}
.flavor-display {
  position: relative;
  height: 740px;
}
.flavor-display .circle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: var(--accent);
  transition: background 0.7s ease;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
}
.flavor-display .circle::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 3px dashed var(--ink);
  opacity: 0.15;
  animation: spin-slow 50s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.flavor-display .pack {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 92%;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.3));
  transition: opacity 0.5s, transform 0.7s cubic-bezier(.2,.9,.2,1.2);
  opacity: 0;
  transform: scale(0.7) rotate(8deg);
}
.flavor-display .pack.active {
  opacity: 1;
  transform: scale(1) rotate(-3deg);
}
.flavor-display .badge {
  position: absolute;
  top: 30px; right: -20px;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 400;
  font-family: 'Lalezar', 'Marhey';
  font-size: 24px;
  transform: rotate(8deg);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 5;
}

.flavor-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flav-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: white;
  box-shadow: 6px 6px 0 transparent;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  text-align: right;
  font-family: inherit;
}
.flav-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.flav-card.active {
  background: var(--ink);
  color: white;
  box-shadow: 6px 6px 0 var(--accent);
}
.flav-card .swatch {
  width: 64px; height: 64px;
  border-radius: 16px;
  border: 2.5px solid var(--ink);
  display: grid;
  place-items: center;
}
.flav-card.active .swatch { border-color: white; }
.flav-card .name {
  font-family: 'Marhey', 'Cairo';
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
}
.flav-card .desc {
  font-size: 14px;
  color: var(--ink-soft);
  font-family: 'Tajawal';
  font-weight: 500;
}
.flav-card.active .desc { color: rgba(255,255,255,0.7); }
.flav-card .heat { display: flex; gap: 3px; }
.flav-card .heat .pep {
  width: 12px; height: 18px;
  background: rgba(20,17,13,0.15);
  clip-path: polygon(50% 0, 0 35%, 25% 100%, 75% 100%, 100% 35%);
}
.flav-card .heat .pep.on { background: var(--red); }
.flav-card.active .heat .pep { background: rgba(255,255,255,0.2); }
.flav-card.active .heat .pep.on { background: var(--yellow); }

.ingr {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  border: 2.5px solid var(--ink);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  font-size: 30px;
  animation: orbit-bob 5s ease-in-out infinite;
  z-index: 6;
}
@keyframes orbit-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* =============================================================
   3 MINUTE RITUAL
   ============================================================= */
.ritual {
  background: var(--ink);
  color: white;
  position: relative;
  overflow: hidden;
}
.ritual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,214,48,0.10), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(226,35,26,0.12), transparent 40%);
  z-index: 0;
}
.ritual > * { position: relative; z-index: 1; }
.ritual .section-title { color: white; }
.ritual .eyetag { color: var(--yellow); }
.ritual .eyetag .bar { background: var(--yellow); }
.ritual .lead {
  max-width: 640px;
  color: rgba(255,255,255,0.7);
  font-size: 19px;
  margin-bottom: 60px;
}
.ritual-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cooktop {
  position: relative;
  height: 600px;
  display: grid;
  place-items: center;
}
.pot {
  width: 380px;
  height: 300px;
  background: linear-gradient(180deg, #2a2a2a 0%, #0d0d0d 100%);
  border-radius: 50% / 30%;
  position: relative;
  box-shadow: inset 0 -30px 60px rgba(0,0,0,0.6), 0 40px 80px rgba(0,0,0,0.6);
  border: 4px solid #444;
}
.pot::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 50%;
  background: radial-gradient(ellipse at 50% 30%, var(--red) 0%, var(--red-dark) 60%, #6b0c08 100%);
  border-radius: 50% / 50%;
  box-shadow: inset 0 8px 20px rgba(0,0,0,0.5);
  transition: background 0.4s;
}
.pot.boiling::before {
  background: radial-gradient(ellipse at 50% 30%, #ffaa3a 0%, var(--red) 50%, var(--red-dark) 100%);
}
.pot .handle {
  position: absolute;
  width: 70px; height: 18px;
  background: #444;
  border-radius: 4px;
  border: 2px solid #222;
  top: 55%;
}
.pot .handle.left { left: -55px; }
.pot .handle.right { right: -55px; }

.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  pointer-events: none;
  animation: bubble-up 2s ease-out infinite;
}
@keyframes bubble-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-200px) scale(1.2); opacity: 0; }
}

.pot-steam {
  position: absolute;
  bottom: 260px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.pot-steam.on { opacity: 1; }
.pot-steam span {
  position: absolute;
  bottom: 0;
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0;
  animation: rise 3s infinite;
}
.pot-steam span:nth-child(1) { left: 40px; animation-delay: 0s; }
.pot-steam span:nth-child(2) { left: 130px; animation-delay: 0.6s; width: 100px; height: 100px; }
.pot-steam span:nth-child(3) { left: 220px; animation-delay: 1.2s; }
.pot-steam span:nth-child(4) { left: 80px; animation-delay: 1.8s; width: 90px; height: 90px; }
.pot-steam span:nth-child(5) { left: 170px; animation-delay: 2.4s; }

.timer-display {
  position: absolute;
  bottom: -34px; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 12px 26px;
  font-family: 'Fredoka', 'Bowlby One SC', monospace;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.05em;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  direction: ltr;
}

.steps-list { display: flex; flex-direction: column; gap: 22px; }
.step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  transition: all 0.3s;
}
.step.active {
  border-color: var(--yellow);
  background: rgba(255, 214, 48, 0.06);
  transform: translateX(-6px);
}
.step .num {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Lalezar';
  font-weight: 400;
  font-size: 30px;
  color: rgba(255,255,255,0.5);
  transition: all 0.3s;
}
.step.active .num {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.step h3 {
  font-family: 'Marhey', 'Cairo';
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}
.step p { color: rgba(255,255,255,0.65); font-size: 16px; }

.cook-button {
  background: var(--red);
  color: white;
  padding: 18px 38px;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  font-family: 'Marhey', 'Cairo';
  font-weight: 700;
  font-size: 22px;
  margin-top: 30px;
  box-shadow: 0 14px 30px -10px rgba(226,35,26,0.7);
  transition: transform 0.2s;
}
.cook-button:hover { transform: translateY(-3px); }
.cook-button:disabled { opacity: 0.6; transform: none; }

/* =============================================================
   HEAT METER
   ============================================================= */
.heat-sec {
  background: var(--cream);
  position: relative;
}
.heat-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.heat-vis {
  position: relative;
  height: 620px;
  display: grid;
  place-items: center;
}
.thermo {
  position: relative;
  width: 130px;
  height: 500px;
}
.thermo .tube {
  position: absolute;
  inset: 0;
  background: white;
  border: 4px solid var(--ink);
  border-radius: 65px;
  overflow: hidden;
  box-shadow: inset 8px 0 0 rgba(0,0,0,0.04), 0 18px 36px -16px rgba(0,0,0,0.3);
}
.thermo .fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--red) 0%, #ff8b3a 100%);
  height: 30%;
  border-radius: 0 0 65px 65px;
  transition: height 0.3s cubic-bezier(.2,.9,.2,1.2);
}
.thermo .bulb {
  position: absolute;
  bottom: -54px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 170px;
  background: var(--red);
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset -10px -15px 30px rgba(0,0,0,0.25), 0 20px 40px -20px rgba(226,35,26,0.6);
}
.thermo .ticks {
  position: absolute;
  top: 20px; bottom: 20px;
  right: -140px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  font-family: 'Tajawal', sans-serif;
}
.thermo .ticks span {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.thermo .ticks span.hit { opacity: 1; transform: scale(1.15); color: var(--red); }

.heat-readout { text-align: right; }
.heat-readout .reaction {
  font-family: 'Lalezar', 'Marhey';
  font-size: clamp(72px, 9vw, 140px);
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  transition: color 0.4s;
}
.heat-readout .reaction.fire { color: var(--red); }
.heat-readout .fact {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 30px;
}
.heat-slider {
  width: 100%;
  appearance: none;
  height: 12px;
  background: linear-gradient(90deg, var(--yellow), var(--red));
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  outline: none;
}
.heat-slider::-webkit-slider-thumb {
  appearance: none;
  width: 40px; height: 40px;
  background: white;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--ink);
}
.heat-slider::-moz-range-thumb {
  width: 40px; height: 40px;
  background: white;
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.peppers {
  display: flex; gap: 12px;
  margin-top: 24px;
}
.peppers .p {
  width: 38px; height: 52px;
  background: rgba(20,17,13,0.12);
  clip-path: polygon(50% 0, 0 35%, 25% 100%, 75% 100%, 100% 35%);
  transition: background 0.25s, transform 0.25s;
}
.peppers .p.on {
  background: var(--red);
  transform: translateY(-4px) rotate(-5deg);
}

/* =============================================================
   RECIPES
   ============================================================= */
.recipes { background: var(--cream-soft); }
.rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.rec-card {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 8px 8px 0 var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.rec-card:hover {
  transform: translate(-4px,-4px);
  box-shadow: 12px 12px 0 var(--ink);
}
.rec-card .bowl {
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.rec-card.r1 .bowl { background: linear-gradient(135deg, #4FAE2A, #84d044); }
.rec-card.r2 .bowl { background: linear-gradient(135deg, var(--red), #ff7647); }
.rec-card.r3 .bowl { background: linear-gradient(135deg, var(--yellow), #ffa83a); }
.rec-card h3 {
  font-family: 'Marhey', 'Cairo';
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}
.rec-card .time {
  display: inline-block;
  background: var(--ink);
  color: white;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  direction: ltr;
  font-family: 'Fredoka';
}
.rec-card .ingredients {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-card .ingredients li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: 'Tajawal';
}
.rec-card .ingredients li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.rec-card .step {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--ink);
  font-weight: 600;
  font-size: 16px;
  font-family: 'Tajawal';
}

/* =============================================================
   HERITAGE
   ============================================================= */
.heritage {
  background: var(--purple);
  color: white;
  overflow: hidden;
  position: relative;
}
.heritage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,214,48,0.10), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.04), transparent 40%);
}
.heritage > * { position: relative; z-index: 1; }
.heritage .section-title { color: white; }
.heritage .eyetag { color: var(--yellow); }
.heritage .eyetag .bar { background: var(--yellow); }
.heritage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.heritage .lead {
  font-size: 20px;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  font-family: 'Tajawal';
}
.heritage .quote {
  font-family: 'Lalezar', 'Marhey';
  font-size: 50px;
  font-weight: 400;
  color: var(--yellow);
  margin: 36px 0;
  line-height: 1.2;
  position: relative;
  padding-right: 30px;
  border-right: 6px solid var(--yellow);
}
.heritage .syria-logo {
  background: white;
  border-radius: 22px;
  padding: 32px 44px;
  display: inline-block;
  margin-top: 24px;
}
.heritage .syria-logo img { height: 90px; }
.wheat-stage {
  position: relative;
  height: 540px;
}
.wheat-stage svg.wheat { width: 100%; height: 100%; }

/* =============================================================
   B2B SECTION
   ============================================================= */
.b2b {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  position: relative;
  overflow: hidden;
}
.b2b::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 60px,
    rgba(20,17,13,0.025) 60px,
    rgba(20,17,13,0.025) 61px
  );
}
.b2b > * { position: relative; }

.b2b-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 70px;
}
.b2b-hero .right {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 8px 8px 0 var(--ink);
}
.b2b-hero .right h4 {
  font-family: 'Marhey';
  font-size: 24px;
  margin-bottom: 12px;
}
.b2b-hero .right p {
  color: var(--ink-soft);
  font-family: 'Tajawal';
  margin-bottom: 18px;
}
.b2b-hero .right .quick {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.b2b-hero .right .quick a {
  background: var(--ink);
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Tajawal';
  transition: background 0.2s;
}
.b2b-hero .right .quick a:hover { background: var(--red); }
.b2b-hero .right .quick a.alt {
  background: var(--yellow);
  color: var(--ink);
}

.b2b-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.b2b-card {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 28px;
  position: relative;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.25s, box-shadow 0.25s;
}
.b2b-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.b2b-card .icon {
  width: 64px; height: 64px;
  background: var(--accent);
  color: white;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 32px;
  margin-bottom: 18px;
}
.b2b-card:nth-child(1) .icon { background: var(--red); }
.b2b-card:nth-child(2) .icon { background: var(--yellow); color: var(--ink); }
.b2b-card:nth-child(3) .icon { background: var(--green); }
.b2b-card:nth-child(4) .icon { background: var(--purple); }
.b2b-card h4 {
  font-family: 'Marhey';
  font-size: 24px;
  margin-bottom: 10px;
}
.b2b-card p {
  color: var(--ink-soft);
  font-family: 'Tajawal';
  font-size: 15px;
  line-height: 1.6;
}

/* spec / carton block */
.carton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  background: var(--ink);
  color: white;
  border-radius: 32px;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.carton-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.carton-grid > * { position: relative; }
.carton-grid h3 {
  font-family: 'Lalezar', 'Marhey';
  font-size: clamp(40px, 4.5vw, 70px);
  line-height: 1;
  margin-bottom: 16px;
}
.carton-grid h3 .yel { color: var(--yellow); }
.carton-grid .lead {
  color: rgba(255,255,255,0.7);
  max-width: 460px;
  margin-bottom: 28px;
  font-family: 'Tajawal';
  font-size: 17px;
}
.carton-grid .spec-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 30px;
}
.carton-grid .spec-list li {
  display: flex;
  flex-direction: column;
  font-family: 'Tajawal';
}
.carton-grid .spec-list .k {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.carton-grid .spec-list .v {
  font-family: 'Lalezar';
  font-size: 28px;
  color: var(--yellow);
}
.carton-vis {
  position: relative;
  height: 380px;
  display: grid;
  place-items: center;
}
.carton-vis img {
  width: 100%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
  border-radius: 8px;
  border: 3px solid var(--yellow);
}

/* contact ribbon */
.b2b-contact {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.b2b-contact .tile {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 28px;
  text-align: right;
  box-shadow: 6px 6px 0 var(--ink);
}
.b2b-contact .tile .k {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: 'Fredoka';
}
.b2b-contact .tile .v {
  font-family: 'Marhey';
  font-size: 26px;
  margin-top: 8px;
  font-weight: 700;
  direction: ltr;
  text-align: right;
}
.b2b-contact .tile a {
  color: var(--red);
  text-decoration: none;
}

/* =============================================================
   STATS
   ============================================================= */
.stats {
  background: var(--red);
  color: white;
  padding: 90px 6vw;
  position: relative;
  border-top: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(0,0,0,0.15), transparent 40%);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  position: relative;
}
.stat .num {
  font-family: 'Bowlby One SC', 'Lalezar';
  font-size: clamp(72px, 9vw, 130px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.stat .lbl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.9;
  font-family: 'Fredoka';
}
.stat .ar {
  display: block;
  font-family: 'Tajawal';
  font-size: 16px;
  margin-top: 4px;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}

/* =============================================================
   BIG REVEAL
   ============================================================= */
.big-reveal {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  padding: 140px 6vw;
  position: relative;
  overflow: hidden;
  transition: background 0.7s;
}
.big-reveal h2 {
  font-family: 'Lalezar', 'Marhey';
  font-size: clamp(72px, 12vw, 220px);
  line-height: 0.88;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.big-reveal h2 .strike {
  display: inline-block;
  background: var(--ink);
  color: white;
  padding: 0 18px;
  transform: rotate(-2deg);
  margin: 0 8px;
}
.big-reveal h2 .yelbg {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 14px;
  transform: rotate(1deg);
  display: inline-block;
}
.big-reveal .en {
  font-family: 'Caveat';
  font-size: 38px;
  font-weight: 700;
  margin-top: 24px;
  direction: ltr;
  opacity: 0.85;
}

/* =============================================================
   FOOTER
   ============================================================= */
footer.foot {
  background: var(--ink);
  color: white;
  padding: 90px 6vw 40px;
  position: relative;
  overflow: hidden;
}
footer.foot::before {
  content: '';
  position: absolute;
  top: -40%; left: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(226,35,26,0.18), transparent 60%);
}
.foot > * { position: relative; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 50px;
}
.foot h4 {
  font-family: 'Marhey';
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--yellow);
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot ul a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 15px;
  font-family: 'Tajawal';
  transition: color 0.2s;
}
.foot ul a:hover { color: var(--yellow); }
.foot .brand img { height: 90px; margin-bottom: 16px; }
.foot .brand p { color: rgba(255,255,255,0.6); max-width: 320px; font-size: 15px; font-family: 'Tajawal'; }
.foot .socials {
  display: flex; gap: 12px;
  margin-top: 24px;
}
.foot .socials a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: white;
  transition: background 0.2s, transform 0.2s;
}
.foot .socials a:hover { background: var(--red); transform: translateY(-3px); }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.foot-bottom .copy { color: rgba(255,255,255,0.5); font-size: 14px; font-family: 'Tajawal'; }
.foot-bottom .made {
  font-family: 'Caveat'; font-weight: 700; font-size: 24px;
  color: var(--yellow);
  direction: ltr;
}

/* =============================================================
   UTILS
   ============================================================= */
.deco-noodle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   PRODUCTS — scales to 12+ items
   ============================================================= */
.products {
  position: relative;
  background: var(--bg);
  transition: background-color 0.8s ease;
}

.product-stage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 560px;
  margin-bottom: 0;
  padding-top: 0;
}
.product-display {
  position: relative;
  height: 460px;
}
.product-display .circle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--accent);
  transition: background 0.7s ease;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35);
}
.product-display .circle::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 3px dashed var(--ink);
  opacity: 0.15;
  animation: spin-slow 50s linear infinite;
}
.product-display .pack {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 86%;
  max-width: 420px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.3));
  transition: opacity 0.5s, transform 0.7s cubic-bezier(.2,.9,.2,1.2);
  opacity: 0;
  transform: scale(0.7) rotate(8deg);
}
.product-display .pack.active {
  opacity: 1;
  transform: scale(1) rotate(-3deg);
}
.product-display .badge {
  position: absolute;
  top: 10px; right: -10px;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'Lalezar', 'Marhey';
  font-size: 22px;
  transform: rotate(8deg);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 5;
}

.product-info { text-align: right; margin-top: 26px; }
.product-info .cat {
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Fredoka';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  direction: ltr;
}
.product-info h3 {
  font-family: 'Lalezar', 'Marhey';
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 0.95;
  margin-bottom: 8px;
}
.product-info .en {
  font-family: 'Caveat';
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  direction: ltr;
  text-align: right;
  display: block;
  margin-bottom: 12px;
}
.product-info p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 540px;
  margin-bottom: 16px;
  font-family: 'Tajawal';
}
.product-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.product-meta .item .k {
  font-size: 10px;
  font-family: 'Fredoka';
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.product-meta .item .v {
  font-family: 'Lalezar';
  font-size: 22px;
  color: var(--ink);
  margin-top: 4px;
}
.product-meta .item .heat { display: flex; gap: 3px; margin-top: 6px; }
.product-meta .item .heat .pep {
  width: 11px; height: 16px;
  background: rgba(20,17,13,0.15);
  clip-path: polygon(50% 0, 0 35%, 25% 100%, 75% 100%, 100% 35%);
}
.product-meta .item .heat .pep.on { background: var(--red); }

/* ---- vertical auto-scrolling list ---- */
.product-listwrap { position: relative; }
.product-listwrap .lhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.product-listwrap .lhead h4 {
  font-family: 'Marhey';
  font-weight: 700;
  font-size: 22px;
}
.product-listwrap .lhead .pill {
  font-family: 'Fredoka';
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--yellow);
  padding: 6px 14px;
  border-radius: 999px;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-listwrap .lhead .pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse 1.6s infinite;
}

.product-list {
  position: relative;
  height: calc(4 * 104px + 3 * 12px);
  overflow: hidden;
  border-radius: 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, black 7%, black 93%, transparent 100%);
}
.product-list .track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.ptile {
  flex: 0 0 104px;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  overflow: hidden;
}
.ptile:hover { transform: translateX(-4px); }
.ptile.active {
  background: var(--ink);
  color: white;
  box-shadow: 4px 4px 0 var(--accent);
  transform: translateX(-6px);
}
.ptile .img {
  width: 80px; height: 80px;
  background: var(--cream);
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ptile.active .img { background: rgba(255,255,255,0.06); }
.ptile .img img {
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2));
}
.ptile .pmeta { flex: 1; min-width: 0; }
.ptile .pname {
  font-family: 'Marhey';
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptile .pdesc {
  font-size: 11px;
  color: var(--ink-soft);
  font-family: 'Tajawal';
  direction: ltr;
  text-align: right;
}
.ptile.active .pdesc { color: rgba(255,255,255,0.6); }
.ptile .pheat { display: flex; gap: 2px; margin-top: 6px; }
.ptile .pheat .pep {
  width: 8px; height: 13px;
  background: rgba(20,17,13,0.15);
  clip-path: polygon(50% 0, 0 35%, 25% 100%, 75% 100%, 100% 35%);
}
.ptile .pheat .pep.on { background: var(--red); }
.ptile.active .pheat .pep { background: rgba(255,255,255,0.15); }
.ptile.active .pheat .pep.on { background: var(--yellow); }
.ptile .ptag {
  position: absolute;
  top: 8px;
  left: 10px;
  background: var(--red);
  color: white;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Fredoka';
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ptile .ptag.new { background: var(--green); }
.ptile .ptag.light { background: var(--yellow); color: var(--ink); }

.list-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.list-progress .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(20,17,13,0.2);
  transition: all 0.3s;
}
.list-progress .dot.active {
  background: var(--red);
  width: 28px;
  border-radius: 999px;
}

/* =============================================================
   SECRETS — kitchen tricks reveal cards
   ============================================================= */
.secrets {
  background: linear-gradient(180deg, #1a0d2e 0%, #2a1454 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.secrets::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,214,48,0.12), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(226,35,26,0.10), transparent 35%);
}
.secrets > * { position: relative; }
.secrets .section-title { color: white; }
.secrets .section-title .yel { color: var(--yellow); }
.secrets .eyetag { color: var(--yellow); }
.secrets .eyetag .bar { background: var(--yellow); }
.secrets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.secret-card {
  position: relative;
  aspect-ratio: 1 / 1.1;
  perspective: 1000px;
  cursor: pointer;
}
.secret-card .inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.5,.1,.3,1.2);
}
.secret-card.flipped .inner { transform: rotateY(180deg); }
.secret-card .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2.5px solid rgba(255,255,255,0.15);
}
.secret-card .front {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.secret-card .back {
  background: var(--yellow);
  color: var(--ink);
  transform: rotateY(180deg);
  border-color: var(--ink);
}
.secret-card .lock {
  font-size: 56px;
  margin-bottom: 16px;
  display: inline-block;
}
.secret-card .num-tag {
  font-family: 'Fredoka';
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 10px;
}
.secret-card h4 {
  font-family: 'Marhey';
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.secret-card .hint {
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 22px;
  color: var(--yellow);
  opacity: 0.9;
}
.secret-card .back h4 { color: var(--ink); margin-bottom: 16px; }
.secret-card .back p {
  font-family: 'Tajawal';
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  flex: 1;
}
.secret-card .back .close {
  font-family: 'Fredoka';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 14px;
}
.secret-card:not(.flipped):hover .lock {
  animation: shake 0.5s;
}
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* =============================================================
   B2B — WhatsApp + Export Request form
   ============================================================= */
.b2b-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 60px;
}
.b2b-action {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 8px 8px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.b2b-action.whatsapp {
  background: #25D366;
  color: white;
  border-color: var(--ink);
}
.b2b-action.whatsapp h4 { color: white; }
.b2b-action.whatsapp p { color: rgba(255,255,255,0.9); }
.b2b-action h4 {
  font-family: 'Marhey';
  font-size: 28px;
  font-weight: 700;
}
.b2b-action p {
  color: var(--ink-soft);
  font-family: 'Tajawal';
  flex: 1;
}
.b2b-action .wa-cta,
.b2b-action .form-cta {
  background: var(--ink);
  color: white;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Tajawal';
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  transition: transform 0.2s;
  border: 2px solid var(--ink);
}
.b2b-action .wa-cta:hover, .b2b-action .form-cta:hover {
  transform: translateY(-2px);
}
.b2b-action.whatsapp .wa-cta {
  background: white;
  color: #128C7E;
  border-color: white;
}
.b2b-action .stats-mini {
  display: flex;
  gap: 18px;
  font-family: 'Tajawal';
  margin-top: 8px;
}
.b2b-action .stats-mini b {
  display: block;
  font-family: 'Lalezar';
  font-size: 26px;
  margin-top: 2px;
}

.export-form {
  background: var(--ink);
  color: white;
  border-radius: 32px;
  padding: 50px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}
.export-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,214,48,0.12), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(226,35,26,0.10), transparent 40%);
}
.export-form > * { position: relative; }
.export-form h3 {
  font-family: 'Lalezar';
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 16px;
}
.export-form h3 .yel { color: var(--yellow); }
.export-form p.lead {
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin-bottom: 30px;
  font-family: 'Tajawal';
}
.export-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: 'Fredoka';
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 14px 18px;
  color: white;
  font-family: 'Tajawal';
  font-size: 16px;
  outline: none;
  font-weight: 500;
  transition: border 0.2s, background 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--yellow);
  background: rgba(255,255,255,0.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.export-form .submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 20px;
  flex-wrap: wrap;
}
.export-form .submit-row small {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-family: 'Tajawal';
}
.export-form button[type=submit] {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--yellow);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-family: 'Tajawal';
  font-size: 16px;
  transition: transform 0.2s, background 0.2s;
}
.export-form button[type=submit]:hover {
  transform: translateY(-2px);
  background: white;
}

/* =============================================================
   HAMBURGER (mobile menu)
   ============================================================= */
.hamb {
  display: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: white;
  position: relative;
  box-shadow: var(--shadow-hard);
}
.hamb span {
  position: absolute;
  left: 12px; right: 12px;
  height: 3px;
  background: var(--ink);
  border-radius: 3px;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.hamb span:nth-child(1) { top: 16px; }
.hamb span:nth-child(2) { top: 23px; }
.hamb span:nth-child(3) { top: 30px; }
.hamb.open span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.hamb.open span:nth-child(2) { opacity: 0; }
.hamb.open span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--cream);
  z-index: 49;
  padding: 100px 6vw 30px;
  border-bottom: 3px solid var(--ink);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.3);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu ul a {
  display: block;
  padding: 14px 20px;
  font-family: 'Marhey';
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid rgba(20,17,13,0.08);
}
.mobile-menu .nav-cta {
  display: inline-block;
  background: var(--red);
  color: white;
  padding: 14px 28px;
  border-radius: 999px;
  margin-top: 16px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Tajawal';
}

@media (max-width: 1100px) {
  nav.top ul { display: none; }
  .hamb { display: block; }
}

@media (max-width: 820px) {
  .hero, .flavor-stage, .ritual-grid, .heat-grid, .heritage-grid, .b2b-hero, .carton-grid, .product-stage {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hero { padding: 100px 5vw 60px; }
  .hero-stage { height: 460px; }
  .rec-grid, .secrets-grid { grid-template-columns: 1fr; }
  .b2b-cards { grid-template-columns: 1fr 1fr; }
  .b2b-contact { grid-template-columns: 1fr; }
  .b2b-actions { grid-template-columns: 1fr; }
  .export-form { padding: 30px; border-radius: 22px; }
  .export-form form { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .flavor-display .circle,
  .product-display .circle { width: 320px; height: 320px; }
  .product-display { height: 420px; }
  .flavor-display { height: 480px; }
  .spec-card {
    right: 50%;
    transform: translateX(50%);
    bottom: -40px;
    padding: 16px 20px;
  }
  .spec-card .item .v { font-size: 26px; }
  .promo-ribbon { font-size: 14px; padding: 10px 16px; top: 16px; left: 4%; }
  .section-title { font-size: clamp(40px, 8vw, 64px) !important; }
  .big-reveal h2 { font-size: clamp(48px, 10vw, 80px); }
  .hero h1 { font-size: clamp(80px, 18vw, 140px); }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { justify-content: center; }
  .hero .trust-strip { flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero .trust-strip .divider { display: none; }
  .play-disc { margin: 8px 0 0; }
  section.block { padding: 80px 5vw; }
  .marquee .track { font-size: 22px; }
  .marquee .track .row { gap: 36px; padding-left: 36px; }
  .marquee .star { font-size: 18px; }
  .thermo { width: 90px; height: 380px; }
  .thermo .bulb { width: 130px; height: 130px; bottom: -42px; }
  .thermo .ticks { right: -110px; font-size: 13px; }
  .pot { width: 280px; height: 220px; }
  .timer-display { font-size: 32px; padding: 10px 20px; }
  .heritage .quote { font-size: 36px; }
  .carton-grid { padding: 30px; }
  .carton-grid .spec-list { grid-template-columns: 1fr; gap: 14px; }
  .nav-cta { padding: 10px 16px; font-size: 14px; }
  nav.top .logo img { height: 46px; }
  .noodle-cursor { display: none; }
  [data-noodle="on"], [data-noodle="on"] * { cursor: auto; }
  .product-display { height: 380px; }
  .product-display .circle { width: 300px; height: 300px; }
  .ptile .img { width: 64px; height: 64px; }
  .ptile { padding: 10px; }
  .product-list { height: calc(4 * 92px + 3 * 10px); }
  .ptile { flex: 0 0 92px; }
}

@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .b2b-cards { grid-template-columns: 1fr; }
  .product-info h3 { font-size: 44px; }
  .hero h1 { font-size: 80px; }
}


/* =============================================================
   PEPPER EXPLOSION (heat max)
   ============================================================= */
.pepper-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}
.pepper-fx .flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(226,35,26,0.45) 0%, rgba(255,139,58,0.15) 30%, transparent 60%);
  opacity: 0;
  animation: heat-flash 0.6s ease-out forwards;
  mix-blend-mode: multiply;
}
@keyframes heat-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
.pepper-fx .p {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 32px;
  opacity: 0;
  animation: pepper-fly 1.8s cubic-bezier(.1,.5,.4,1) forwards;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
  will-change: transform, opacity;
  user-select: none;
}
@keyframes pepper-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.2); }
  10%  { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(var(--s, 1)); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.35); }
}

@keyframes heat-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 6px); }
  20% { transform: translate(10px, -6px); }
  30% { transform: translate(-8px, -4px); }
  40% { transform: translate(8px, 4px); }
  50% { transform: translate(-5px, 5px); }
  60% { transform: translate(5px, -5px); }
  70% { transform: translate(-3px, 3px); }
  80% { transform: translate(3px, -3px); }
  90% { transform: translate(-1px, 1px); }
}
.heat-shake { animation: heat-shake 0.55s; }

/* burst ring */
.pepper-fx .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border: 6px solid #ff6b1a;
  border-radius: 50%;
  opacity: 0;
  animation: ring-burst 0.9s ease-out forwards;
}
@keyframes ring-burst {
  0%   { opacity: 0; transform: scale(0.2); border-width: 8px; }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(8); border-width: 1px; }
}
.pepper-fx .ring.r2 { animation-delay: 0.15s; border-color: #ffd630; }