/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  overflow-x: hidden;
  line-height: 1.8;
  color: #3D2B1F;
  background: #FDF6EC;
}

a {
  text-decoration: none;
  color: inherit
}

/* ===== PALETTE ===== */
:root {
  --gold: #B8860B;
  --gold-rich: #DAA520;
  --gold-pale: #F5DEB3;
  --brown: #3D2B1F;
  --brown-light: #6B4226;
  --cream: #FDF6EC;
  --cream-dark: #F5EDDF;
  --sand: #E8D5B7;
  --red: #C0392B;
  --green: #27AE60;
  --white: #FFFFFF;
}

/* ===== MOROCCAN PATTERN ===== */
.moroccan-pattern-global {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .03;
  background-image:
    radial-gradient(circle at 25% 25%, var(--gold) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--gold) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== CONTAINER ===== */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px
}

/* ===== SECTIONS ===== */
.section {
  padding: 90px 0;
  position: relative
}

.section-alt {
  background: var(--cream-dark)
}

.section-head {
  text-align: center;
  margin-bottom: 55px
}

.section-icon {
  font-size: 2.5rem;
  margin-bottom: 8px
}

.section-head h2 {
  font-family: 'Amiri', 'Tajawal', serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--brown);
  line-height: 1.4;
}

.section-head h2 em {
  color: var(--gold);
  font-style: normal
}

.section-divider {
  display: flex;
  justify-content: center;
  margin-top: 18px
}

.section-divider span {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 3px;
}

/* ===== STICKY CTA ===== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(253, 246, 236, 0) 0%, rgba(253, 246, 236, .95) 30%, var(--cream) 100%);
  text-align: center;
  transform: translateY(100%);
  animation: slideUpSticky .5s .8s forwards;
}

@keyframes slideUpSticky {
  to {
    transform: translateY(0)
  }
}

.sticky-btn {
  display: inline-block;
  padding: 16px 50px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 50px;
  box-shadow: 0 6px 25px rgba(184, 134, 11, .35);
  transition: all .3s;
  font-family: 'Tajawal', sans-serif;
}

.sticky-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(184, 134, 11, .5)
}

/* ==========================================================
   HERO
========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1A0F05;
  color: var(--cream);
}

.hero-bg {
  position: absolute;
  inset: 0
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(218, 165, 32, .12) 0%, transparent 70%),
    linear-gradient(180deg, #1A0F05 0%, #2C1A0E 50%, #1A0F05 100%);
}

.sand-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  opacity: .08
}

.sand-wave-1 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23DAA520' d='M0,60 C360,120 720,0 1080,60 C1260,90 1440,60 1440,60 L1440,120 L0,120Z'/%3E%3C/svg%3E") bottom/cover no-repeat;
}

.sand-wave-2 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23B8860B' d='M0,80 C480,20 960,100 1440,40 L1440,120 L0,120Z'/%3E%3C/svg%3E") bottom/cover no-repeat;
  opacity: .05;
}

.hero-ornament {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-rich), transparent);
  opacity: .3;
}

.hero-ornament-top {
  top: 40px
}

.hero-ornament-bottom {
  bottom: 40px
}

/* Particles */
.floating-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.floating-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gold-pale);
  border-radius: 50%;
  opacity: 0;
  animation: particleDrift 8s linear infinite;
}

@keyframes particleDrift {
  0% {
    transform: translate(0, 100vh) scale(.5);
    opacity: 0
  }

  20% {
    opacity: .6
  }

  80% {
    opacity: .4
  }

  100% {
    transform: translate(40px, -20vh) scale(1);
    opacity: 0
  }
}

/* Hero Inner */
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 800px;
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px
}

.badge {
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  backdrop-filter: blur(6px);
}

.badge-price {
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  color: #1A0F05;
}

.badge-val {
  font-size: 1.1rem
}

.badge-cod {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(218, 165, 32, .25);
  color: var(--gold-pale);
}

/* Title */
.hero-title {
  font-family: 'Amiri', 'Tajawal', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.hero-title-highlight {
  display: block;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-rich), var(--gold-pale));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  opacity: .75;
  margin-bottom: 15px;
  line-height: 2
}

.symptom {
  display: inline-block;
  padding: 2px 14px;
  margin: 3px;
  background: rgba(218, 165, 32, .12);
  border: 1px solid rgba(218, 165, 32, .2);
  border-radius: 20px;
  font-weight: 600;
}

/* Product Showcase */
.hero-product-showcase {
  position: relative;
  margin: 35px auto 35px;
  width: 200px;
  height: 260px;
}

.product-rays {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(218, 165, 32, .15) 0%, transparent 65%);
  animation: rayPulse 4s ease-in-out infinite;
}

@keyframes rayPulse {

  0%,
  100% {
    opacity: .5;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.08)
  }
}

.product-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.product-jar {
  width: 160px;
  height: 210px;
  position: relative;
  border-radius: 18px 18px 22px 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #E8D5B7 0%, #C8A870 30%, #A67C52 70%, #8B6914 100%);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, .5),
    0 0 80px rgba(218, 165, 32, .12),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 4px rgba(0, 0, 0, .2);
}

.jar-shine {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 5;
}

.jar-top {
  height: 32px;
  background: linear-gradient(180deg, #F5DEB3 0%, #DAA520 50%, #B8860B 100%);
  border-bottom: 2px solid rgba(0, 0, 0, .15);
  position: relative;
}

.jar-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}

.jar-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: calc(100% - 32px);
  position: relative;
}

.jar-emblem {
  margin-bottom: 8px
}

.camel-svg {
  width: 55px;
  height: 40px;
  color: var(--gold-pale);
  opacity: .9
}

.jar-text-ar {
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1A0F05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

.jar-text-sub {
  font-size: .65rem;
  color: #3D2B1F;
  opacity: .7;
  margin-top: 2px
}

.jar-moroccan-border {
  position: absolute;
  bottom: 12px;
  left: 15px;
  right: 15px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .4;
}

/* Real product image */
.hero-product-img {
  max-height: 280px;
  width: auto;
  border-radius: 18px;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, .5)) drop-shadow(0 0 60px rgba(218, 165, 32, .15));
  transition: transform .5s;
  animation: productFloat 4s ease-in-out infinite;
}

.hero-product-img:hover {
  transform: scale(1.05)
}

@keyframes productFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

/* ========== PRODUCT SHOWCASE SECTION ========== */
.section-products {
  background: linear-gradient(180deg, var(--cream) 0%, #fff9f0 50%, var(--cream) 100%);
}

.section-subtitle {
  font-family: var(--body);
  font-size: 1.15rem;
  color: var(--brown);
  opacity: .8;
  margin-top: -.5rem;
}

/* Pack Showcase */
.pack-showcase {
  position: relative;
  text-align: center;
  margin: 2.5rem auto 3rem;
  max-width: 600px;
}

.pack-main-img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 25px 70px rgba(61, 43, 31, .2), 0 0 0 3px rgba(218, 165, 32, .15);
  transition: transform .4s;
}

.pack-main-img:hover {
  transform: scale(1.02)
}

.pack-badge {
  display: inline-block;
  margin-top: 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  padding: 12px 32px;
  border-radius: 50px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 8px 25px rgba(218, 165, 32, .35);
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 8px 25px rgba(218, 165, 32, .35)
  }

  50% {
    box-shadow: 0 8px 35px rgba(218, 165, 32, .55)
  }
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 0 auto 3rem;
  max-width: 900px;
}

/* Product Card */
.product-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(61, 43, 31, .08);
  border: 1px solid rgba(218, 165, 32, .12);
  transition: transform .3s, box-shadow .3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(61, 43, 31, .14);
}

/* Product Card Image */
.product-card-img {
  position: relative;
  background: linear-gradient(135deg, #f5f0e8, #fff);
  padding: 25px;
  text-align: center;
}

.product-card-img img {
  max-height: 280px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .1));
  transition: transform .4s;
}

.product-card:hover .product-card-img img {
  transform: scale(1.05);
}

.product-qty-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #d4380d, #ff6b35);
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 5px 15px rgba(212, 56, 13, .3);
}

/* Product Card Body */
.product-card-body {
  padding: 25px 28px 30px;
}

.product-card-body h3 {
  font-family: var(--heading);
  font-size: 1.45rem;
  color: var(--brown-dark);
  margin-bottom: 4px;
}

.product-tagline {
  font-family: var(--body);
  font-size: .9rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 14px;
}

.product-desc {
  font-family: var(--body);
  font-size: .98rem;
  color: var(--brown);
  line-height: 1.7;
  margin-bottom: 16px;
}

.product-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.product-benefits li {
  font-family: var(--body);
  font-size: .92rem;
  color: var(--brown-dark);
  padding: 6px 0;
  border-bottom: 1px solid rgba(218, 165, 32, .08);
  line-height: 1.5;
}

.product-benefits li:last-child {
  border-bottom: none
}

.product-usage {
  background: linear-gradient(135deg, #fef9f0, #fdf3e3);
  border: 1px solid rgba(218, 165, 32, .15);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--body);
  font-size: .88rem;
  color: var(--brown);
  line-height: 1.6;
}

/* Pack Value Proposition */
.pack-value {
  background: linear-gradient(135deg, var(--brown-dark), #4a3525);
  color: #fff;
  border-radius: 22px;
  padding: 35px 40px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 15px 45px rgba(61, 43, 31, .2);
}

.pv-icon {
  font-size: 2.2rem;
  margin-bottom: 10px
}

.pack-value h3 {
  font-family: var(--heading);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 12px;
}

.pack-value p {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.8;
  opacity: .92;
}

.pack-value strong {
  color: var(--gold)
}

.pack-value em {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.15rem;
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
}

/* Order section product image */
.order-product-img {
  text-align: center;
  margin-bottom: 35px;
}

.order-pack-img {
  width: 100%;
  max-width: 500px;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(61, 43, 31, .15);
  margin: 0 auto;
  display: block;
}

/* CTA Hero */
.cta-hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 55px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  color: #1A0F05;
  font-size: 1.3rem;
  font-weight: 900;
  border-radius: 60px;
  box-shadow: 0 8px 35px rgba(184, 134, 11, .4);
  transition: all .35s;
  font-family: 'Tajawal', sans-serif;
  animation: ctaPulse 3s ease-in-out infinite;
}

.cta-hero:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 45px rgba(184, 134, 11, .55)
}

@keyframes ctaPulse {

  0%,
  100% {
    box-shadow: 0 8px 35px rgba(184, 134, 11, .4)
  }

  50% {
    box-shadow: 0 8px 55px rgba(218, 165, 32, .65)
  }
}

.cta-arrow {
  font-size: 1.5rem;
  transition: transform .3s
}

.cta-hero:hover .cta-arrow {
  transform: translateX(-5px)
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  color: var(--gold-pale);
  opacity: .4;
  font-size: .75rem;
}

.scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, var(--gold-pale), transparent);
  margin: 0 auto 8px;
  animation: scrollDraw 2s ease-in-out infinite;
}

@keyframes scrollDraw {

  0%,
  100% {
    height: 15px;
    opacity: .3
  }

  50% {
    height: 30px;
    opacity: .7
  }
}

/* ==========================================================
   WHY SECTION
========================================================== */
.why-story {
  text-align: center;
  margin-bottom: 40px
}

.story-lead {
  font-family: 'Amiri', serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--brown-light);
  max-width: 650px;
  margin: 0 auto;
  line-height: 2;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px
}

.card {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 35px 28px;
  text-align: center;
  border: 1px solid var(--sand);
  transition: all .4s;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(61, 43, 31, .1);
  border-color: var(--gold)
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-rich), var(--gold), var(--gold-rich));
  opacity: 0;
  transition: opacity .4s;
}

.card:hover .card-accent {
  opacity: 1
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 14px
}

.card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 10px
}

.card p {
  font-size: .95rem;
  color: var(--brown-light);
  line-height: 1.9
}

.why-conclusion {
  margin-top: 45px;
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, rgba(184, 134, 11, .08), rgba(218, 165, 32, .04));
  border-radius: 20px;
  border: 1px solid rgba(184, 134, 11, .15);
}

.conclusion-icon {
  font-size: 2rem;
  margin-bottom: 10px
}

.why-conclusion p {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brown)
}

/* ==========================================================
   STEPS TIMELINE
========================================================== */
.steps-timeline {
  position: relative;
  max-width: 650px;
  margin: 0 auto
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--sand));
  border-radius: 3px;
}

.step {
  display: flex;
  gap: 24px;
  margin-bottom: 35px;
  align-items: flex-start
}

.step:last-child {
  margin-bottom: 0
}

.step-marker {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  box-shadow: 0 4px 18px rgba(184, 134, 11, .3);
  position: relative;
  z-index: 2;
}

.step-content {
  flex: 1;
  background: var(--white);
  border-radius: 18px;
  padding: 28px;
  border: 1px solid var(--sand);
  transition: all .3s;
}

.step:hover .step-content {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(61, 43, 31, .08)
}

.step-emoji {
  font-size: 1.8rem;
  margin-bottom: 8px
}

.step-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 8px
}

.step-content p {
  font-size: .92rem;
  color: var(--brown-light);
  line-height: 1.9
}

/* ==========================================================
   COMPARE
========================================================== */
.compare-banner {
  background: var(--white);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  border: 1px solid var(--sand);
  box-shadow: 0 15px 50px rgba(61, 43, 31, .06);
}

.compare-quote-mark {
  font-family: 'Amiri', serif;
  font-size: 4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 5px;
  opacity: .4;
}

.compare-banner h2 {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--brown);
  margin-bottom: 12px;
}

.compare-highlight {
  font-size: 1.15rem;
  line-height: 1.8
}

.compare-highlight em {
  color: var(--gold);
  font-style: normal;
  font-weight: 800
}

.compare-separator {
  width: 60px;
  height: 2px;
  margin: 20px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.compare-body {
  font-size: 1rem;
  color: var(--brown-light);
  max-width: 600px;
  margin: 0 auto 35px;
  line-height: 1.9
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: right
}

.compare-col {
  padding: 25px;
  border-radius: 16px
}

.compare-col h4 {
  font-size: 1.05rem;
  margin-bottom: 15px;
  font-weight: 800
}

.compare-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.compare-col li {
  font-size: .95rem;
  font-weight: 600
}

.compare-us {
  background: rgba(39, 174, 96, .06);
  border: 1px solid rgba(39, 174, 96, .15)
}

.compare-us h4 {
  color: var(--gold)
}

.compare-them {
  background: rgba(192, 57, 43, .04);
  border: 1px solid rgba(192, 57, 43, .1)
}

.compare-them h4 {
  color: var(--red);
  opacity: .7
}

/* ==========================================================
   TESTIMONIALS
========================================================== */
.testimonials-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px;
  margin: 0 auto
}

.testimonial {
  background: var(--white);
  border-radius: 20px;
  padding: 30px 32px;
  border: 1px solid var(--sand);
  position: relative;
  transition: all .3s;
}

.testimonial:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 35px rgba(61, 43, 31, .08)
}

.testimonial-quote {
  font-family: 'Amiri', serif;
  font-size: 3rem;
  color: var(--gold);
  opacity: .2;
  position: absolute;
  top: 15px;
  right: 25px;
  line-height: 1;
}

.testimonial-text {
  font-size: 1.05rem;
  line-height: 2;
  color: var(--brown);
  padding-right: 35px;
  margin-bottom: 18px;
}

.testimonial-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px
}

.testimonial-stars {
  color: var(--gold-rich);
  font-size: .9rem;
  margin-left: 8px
}

.testimonial-info {
  font-size: .9rem;
  color: var(--brown-light)
}

.testimonial-info strong {
  color: var(--brown)
}

.audio-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(184, 134, 11, .08), rgba(184, 134, 11, .04));
  border: 1px solid rgba(184, 134, 11, .2);
  border-radius: 30px;
  color: var(--gold);
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .3s;
}

.audio-btn:hover {
  background: rgba(184, 134, 11, .12);
  border-color: var(--gold)
}

/* ==========================================================
   ORDER SECTION
========================================================== */
.section-order {
  background: linear-gradient(180deg, var(--cream-dark) 0%, #EDE0CC 50%, var(--cream-dark) 100%);
  padding-bottom: 120px;
}

.order-wrapper {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 28px;
  padding: 45px 38px;
  border: 2px solid var(--gold);
  box-shadow: 0 25px 70px rgba(184, 134, 11, .12);
  position: relative;
  overflow: hidden;
}

.order-ornament {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-rich), var(--gold));
}

.order-head {
  text-align: center;
  margin-bottom: 35px
}

.order-head h2 {
  font-family: 'Amiri', serif;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--brown);
  margin-bottom: 12px;
}

.order-head h2 em {
  color: var(--gold);
  font-style: normal
}

.urgency-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(192, 57, 43, .06);
  border: 1px solid rgba(192, 57, 43, .15);
  border-radius: 30px;
  color: var(--red);
  font-weight: 700;
  font-size: .9rem;
  animation: urgPulse 2.5s infinite;
}

@keyframes urgPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .65
  }
}

.urgency-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: dotBlink 1s infinite;
}

@keyframes dotBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.order-pricing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 15px;
  margin-top: 18px
}

.price-was {
  font-size: 1.2rem;
  text-decoration: line-through;
  color: #999
}

.price-now {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--gold)
}

.price-only {
  font-size: 1rem;
  color: var(--brown-light)
}

/* Form */
.field {
  margin-bottom: 18px
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--brown)
}

.field input,
.field select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--sand);
  border-radius: 14px;
  background: var(--cream);
  font-size: 1rem;
  font-family: 'Tajawal', sans-serif;
  color: var(--brown);
  transition: border-color .3s;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold)
}

.field input::placeholder {
  color: #B8A88A
}

.fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.cta-submit {
  display: block;
  width: 100%;
  padding: 18px;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--green), #1E8449);
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 800;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Tajawal', sans-serif;
  box-shadow: 0 6px 25px rgba(39, 174, 96, .25);
  transition: all .3s;
}

.cta-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(39, 174, 96, .4)
}

.form-trust {
  text-align: center;
  font-size: .8rem;
  color: #999;
  margin-top: 14px
}

.form-success {
  text-align: center;
  padding: 40px 20px
}

.success-check {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--green), #1E8449);
  color: var(--white);
  border-radius: 50%;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.form-success h3 {
  font-size: 1.4rem;
  color: var(--brown);
  margin-bottom: 8px
}

.form-success p {
  color: var(--brown-light)
}

/* ==========================================================
   FOOTER
========================================================== */
.footer {
  background: var(--brown);
  color: var(--cream);
  padding: 40px 0 35px;
  text-align: center;
}

.footer-trust {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 600;
}

.footer-copy {
  font-size: .75rem;
  opacity: .35
}

/* ==========================================================
   HERO BACKGROUND IMAGE
========================================================== */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 15, 5, .7) 0%, rgba(26, 15, 5, .4) 40%, rgba(26, 15, 5, .85) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(218, 165, 32, .1) 0%, transparent 70%);
}

/* ==========================================================
   IMAGE BANNER (Why Section)
========================================================== */
.image-banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 45px;
  height: 280px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 5, .2) 0%, rgba(26, 15, 5, .75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 30px 35px;
}

.banner-overlay .story-lead {
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  max-width: 100%;
  margin: 0;
}

/* ==========================================================
   CARD IMAGES
========================================================== */
.card-img-wrap {
  width: 100%;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.card:hover .card-img {
  transform: scale(1.06)
}

/* ==========================================================
   SECTION FEATURE IMAGE (How It Works)
========================================================== */
.how-hero-img {
  text-align: center;
  margin-bottom: 45px;
}

.section-feature-img {
  width: 100%;
  max-width: 600px;
  height: 250px;
  object-fit: cover;
  border-radius: 20px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 15px 40px rgba(61, 43, 31, .1);
}

/* ==========================================================
   BEFORE / AFTER
========================================================== */
.before-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.ba-card {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(61, 43, 31, .1);
}

.ba-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.ba-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
}

.ba-label-before {
  background: linear-gradient(180deg, transparent, rgba(192, 57, 43, .8));
  color: var(--white);
}

.ba-label-after {
  background: linear-gradient(180deg, transparent, rgba(39, 174, 96, .8));
  color: var(--white);
}

.ba-arrow {
  font-size: 2.5rem;
  color: var(--gold);
  font-weight: 900;
  flex-shrink: 0;
}

/* ==========================================================
   INGREDIENTS STRIP
========================================================== */
.ingredients-strip {
  padding: 60px 0;
  background: var(--brown);
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.ingredient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ingredient-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

.ingredient span {
  color: var(--gold-pale);
  font-weight: 700;
  font-size: .9rem;
}

/* ==========================================================
   TESTIMONIAL AVATARS
========================================================== */
.testimonial {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.testimonial-avatar {
  flex-shrink: 0
}

.avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(61, 43, 31, .1);
}

.testimonial-body {
  flex: 1
}

.testimonial-quote {
  position: static;
  font-family: 'Amiri', serif;
  font-size: 2.5rem;
  color: var(--gold);
  opacity: .25;
  line-height: .8;
  margin-bottom: 5px;
}

/* ==========================================================
   ANIMATIONS
========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(25px);
  transition: all .7s cubic-bezier(.22, 1, .36, 1)
}

[data-reveal].visible {
  opacity: 1;
  transform: translateY(0)
}

/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:768px) {
  .section {
    padding: 65px 0
  }

  /* Products section mobile */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .product-card-img {
    padding: 20px
  }

  .product-card-img img {
    max-height: 220px
  }

  .product-card-body {
    padding: 20px 22px 25px
  }

  .product-card-body h3 {
    font-size: 1.25rem
  }

  .pack-showcase {
    max-width: 100%
  }

  .pack-value {
    padding: 25px 22px
  }

  .pack-value h3 {
    font-size: 1.3rem
  }

  .pack-badge {
    font-size: .95rem;
    padding: 10px 24px
  }

  .hero-inner {
    padding: 40px 18px 30px
  }

  .hero-product-showcase {
    width: 160px;
    height: 220px
  }

  .product-jar {
    width: 130px;
    height: 175px
  }

  .compare-grid {
    grid-template-columns: 1fr
  }

  .compare-banner {
    padding: 35px 22px
  }

  .order-wrapper {
    padding: 30px 22px
  }

  .fields-row {
    grid-template-columns: 1fr
  }

  .step {
    gap: 16px
  }

  .step-marker {
    width: 44px;
    height: 44px;
    font-size: 1rem
  }

  .timeline-line {
    right: 20px
  }

  .cta-hero {
    padding: 16px 40px;
    font-size: 1.1rem
  }

  .testimonial-text {
    padding-right: 20px
  }

  .image-banner {
    height: 200px
  }

  .banner-overlay {
    padding: 20px
  }

  .ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px
  }

  .ingredient-img {
    width: 75px;
    height: 75px
  }

  .before-after {
    flex-direction: column
  }

  .ba-arrow {
    transform: rotate(90deg)
  }

  .ba-card {
    max-width: 100%
  }

  .section-feature-img {
    height: 180px
  }

  .testimonial {
    flex-direction: column;
    align-items: center;
    text-align: center
  }

  .testimonial-bottom {
    justify-content: center
  }

  .avatar-img {
    width: 55px;
    height: 55px
  }

  .testimonial-quote {
    text-align: center
  }
}

@media(max-width:400px) {
  .hero-title {
    font-size: 1.7rem
  }

  .sticky-btn {
    padding: 14px 35px;
    font-size: 1rem
  }
}