/* ============================================
   Nibbly — Design tokens
   ============================================ */
:root {
  /* Brand palette, sampled from packaging & logo */
  --purple-900: #3C2A5E;
  --purple-700: #4E3585;
  --purple-600: #5B3E96;
  --purple-500: #6E4FAE;
  --purple-300: #A88FD1;
  --purple-200: #C9B8E8;
  --purple-100: #EDE6F8;

  --pink: #E98CB0;
  --pink-soft: #FBEAF1;

  --blue: #7FBEDD;
  --blue-soft: #EAF5FA;

  --green: #7CB342;
  --green-soft: #EEF6E4;

  --red: #DD4B3E;

  --cream: #FBF3E7;
  --lavender: #F7F2FD;
  --white: #FFFFFF;

  --ink: #372C4C;
  --ink-soft: #6B6078;

  --font-head: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 16px 40px rgba(76, 48, 133, 0.14);
  --shadow-sm: 0 6px 16px rgba(76, 48, 133, 0.1);

  --wrap: 1180px;
}

/* Arabic script needs different typefaces -- Baloo Bhaijaan 2 is the
   official Arabic companion to Baloo 2, Cairo pairs well with Nunito's
   friendly, rounded feel for body copy. */
[dir="rtl"] {
  --font-head: "Baloo Bhaijaan 2", "Baloo 2", sans-serif;
  --font-body: "Cairo", "Nunito", sans-serif;
}

/* ============================================
   Reset
   ============================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; color: var(--purple-900); line-height: 1.15; }
p { margin: 0; }
.icon { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { stroke-width: 2; }

/* Visible keyboard focus (buttons/links have no custom style otherwise) */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--purple-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect the OS-level "reduce motion" preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  position: relative;
  /* Fallback for when JS hasn't run: keeps a native anchor jump from parking
     the section heading underneath the sticky header. */
  scroll-margin-top: 90px;
}

/* ============================================
   Preloader
   ============================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  opacity: 1;
  transition: opacity .6s ease;
}
.preloader-logo {
  height: 110px;
  width: auto;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}
.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes preloaderPulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ============================================
   Scroll reveal
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: .12s; }

/* Staggered cascade for grid/list reveals */
.features-grid .feature-card:nth-child(1) { transition-delay: 0s; }
.features-grid .feature-card:nth-child(2) { transition-delay: .06s; }
.features-grid .feature-card:nth-child(3) { transition-delay: .12s; }
.features-grid .feature-card:nth-child(4) { transition-delay: .18s; }
.features-grid .feature-card:nth-child(5) { transition-delay: .06s; }
.features-grid .feature-card:nth-child(6) { transition-delay: .12s; }
.features-grid .feature-card:nth-child(7) { transition-delay: .18s; }
.features-grid .feature-card:nth-child(8) { transition-delay: .24s; }

.who-grid .who-card:nth-child(1) { transition-delay: 0s; }
.who-grid .who-card:nth-child(2) { transition-delay: .08s; }
.who-grid .who-card:nth-child(3) { transition-delay: .16s; }
.who-grid .who-card:nth-child(4) { transition-delay: .24s; }

.steps-list li:nth-child(1) { transition-delay: 0s; }
.steps-list li:nth-child(2) { transition-delay: .1s; }
.steps-list li:nth-child(3) { transition-delay: .2s; }
.steps-list li:nth-child(4) { transition-delay: .3s; }

/* ============================================
   Eyebrow / section head
   ============================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--purple-500);
  background: var(--purple-100);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin: 0 0 16px;
}
.eyebrow-light { color: var(--white); background: rgba(255,255,255,.18); }
.eyebrow .icon-sm { animation: sparklePulse 2.2s ease-in-out infinite; }

@keyframes sparklePulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(18deg); opacity: .65; }
}

.section-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 12px; }
.section-sub { color: var(--ink-soft); font-size: 17px; margin-top: 8px; }

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 243, 231, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(91, 62, 150, .08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Reading-progress line pinned to the bottom edge of the sticky header */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  max-width: 100%;
  background: linear-gradient(90deg, var(--purple-500), var(--pink));
  border-radius: 0 3px 3px 0;
  transition: width .12s linear;
}
[dir="rtl"] .scroll-progress {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.header-right { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 56px; width: auto; }
.brand-tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--purple-500);
  white-space: nowrap;
  padding-left: 14px;
  border-left: 2px solid var(--purple-200);
}
[dir="rtl"] .brand-tagline {
  padding-left: 0;
  border-left: none;
  padding-right: 14px;
  border-right: 2px solid var(--purple-200);
}
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--purple-700);
}
.main-nav a:hover { color: var(--purple-500); }
.nav-cta {
  background: var(--purple-600);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--purple-700);
  cursor: pointer;
  padding: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--purple-100);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--purple-500);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease;
}
.lang-btn.is-active {
  background: var(--purple-600);
  color: var(--white);
}
.lang-btn:not(.is-active):hover { color: var(--purple-700); }

/* ============================================
   Buttons — buy row
   ============================================ */
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 18px;
}
.buy-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--purple-200);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--purple-700);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.buy-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--purple-500);
}
/* Rounded corners suit logos that ship with a solid background (Mumzworld's
   pink block) and are invisible on transparent ones, so this can apply to every
   marketplace -- including any added later from the admin panel. */
.buy-btn img { height: 21px; width: auto; max-width: 96px; object-fit: contain; border-radius: 4px; }

.buy-row-lg .buy-btn { padding: 15px 28px; font-size: 16px; background: var(--white); }
.buy-row-lg .buy-btn img { height: 23px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--purple-700);
}
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row .icon { color: var(--purple-500); }

/* ============================================
   Hero
   ============================================ */
.hero { padding: 52px 0 68px; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 18px;
}
.hero h1 .accent { color: var(--purple-500); }
.hero-sub { font-size: 18px; color: var(--ink-soft); max-width: 520px; }

.hero-media { position: relative; display: flex; justify-content: center; }
.hero-media-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.hero-img {
  border-radius: calc(var(--radius-lg) - 10px);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.floating-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.badge-top {
  top: 10px;
  right: -14px;
  background: var(--red);
  color: var(--white);
  animation: floatY 3.2s ease-in-out infinite;
}
.badge-bottom {
  bottom: 24px;
  left: -20px;
  background: var(--white);
  color: var(--purple-700);
  border: 2px solid var(--purple-200);
  animation: floatY 3.6s ease-in-out infinite reverse;
}
[dir="rtl"] .badge-top { right: auto; left: -14px; }
[dir="rtl"] .badge-bottom { left: auto; right: -20px; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ============================================
   About strip
   ============================================ */
.about-strip {
  background: linear-gradient(180deg, var(--cream) 0%, transparent 130px), var(--white);
  color: var(--ink);
  padding: 54px 0;
}
.about-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.about-strip h2 { color: var(--purple-900); font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 16px; }
.about-strip p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }

/* The photo is a transparent cut-out, so it needs a shape behind it —
   floating on plain white would read as a mistake. */
.about-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.about-visual::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 290px;
  height: 290px;
  max-width: 100%;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--purple-200), var(--lavender));
}
.about-photo {
  position: relative;
  width: 100%;
  /* The source is a square canvas with transparent margins either side, so the
     baby occupies ~77% of the width. The max-width is sized up to compensate,
     which lands the visible child at roughly 330px. */
  max-width: 430px;
  height: auto;
  /* The cut-out ends in a straight cut across the pack, which reads as a hard
     line against the white section. A short fade at the very bottom softens it
     without hiding the packaging. */
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}

/* ============================================
   Features
   ============================================ */
.features {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--white) 0%, transparent 130px), var(--cream);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--purple-100);
  color: var(--purple-600);
  margin-bottom: 16px;
  transition: transform .3s ease;
}
.feature-card:hover .feature-icon,
.who-card:hover .feature-icon { transform: scale(1.1) rotate(-6deg); }
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* alternate accent colors across the grid for visual rhythm */
.feature-card:nth-child(4n+2) .feature-icon { background: var(--pink-soft); color: var(--pink); }
.feature-card:nth-child(4n+3) .feature-icon { background: var(--blue-soft); color: #4C93BD; }
.feature-card:nth-child(4n+4) .feature-icon { background: var(--green-soft); color: var(--green); }

/* ============================================
   How to use
   ============================================ */
.how-to-use {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--white) 0%, transparent 120px), var(--cream);
}
.steps-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
.steps-list { display: flex; flex-direction: column; gap: 26px; }
.steps-list li { display: flex; gap: 20px; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple-600);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps-list h3 { font-size: 18px; margin-bottom: 4px; }
.steps-list p { color: var(--ink-soft); font-size: 15px; }

.tips-card {
  background: var(--purple-100);
  border-radius: var(--radius-md);
  padding: 32px 28px;
}
.tips-card h3 { font-size: 18px; margin-bottom: 18px; }
.tips-card ul { display: flex; flex-direction: column; gap: 14px; }
.tips-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--purple-700); font-weight: 600; }
.tips-card .icon { color: var(--green); margin-top: 2px; }

/* ============================================
   Holder / clip
   ============================================ */
.holder {
  padding: 68px 0;
  background: linear-gradient(180deg, var(--cream) 0%, transparent 120px), var(--lavender);
}
/* A single rounded panel of icon + text rows -- reads like a compact table,
   and stacks down to a phone without leaving big empty space the way a large
   decorative circle did. */
.holder-list {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.holder-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  transition: background .25s ease;
}
.holder-row + .holder-row { border-top: 1px solid var(--purple-100); }
.holder-row:hover { background: #FBF9FE; }
.holder-row .feature-icon { margin-bottom: 0; }
.holder-row:nth-child(2) .feature-icon { background: var(--pink-soft); color: var(--pink); }
.holder-row:nth-child(3) .feature-icon { background: var(--green-soft); color: var(--green); }
.holder-row:hover .feature-icon { transform: scale(1.1) rotate(-6deg); }
.holder-row-text h3 { font-size: 18px; margin-bottom: 4px; }
.holder-row-text p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

.holder-row:nth-child(1) { transition-delay: 0s; }
.holder-row:nth-child(2) { transition-delay: .08s; }
.holder-row:nth-child(3) { transition-delay: .16s; }

/* ============================================
   Who it's for
   ============================================ */
.who-its-for {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--lavender) 0%, transparent 120px), var(--white);
}
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.who-card {
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--radius-md);
  border: 2px solid var(--purple-100);
}
.who-card .feature-icon { margin: 0 auto 16px; }
.who-card h3 { font-size: 17px; margin-bottom: 8px; }
.who-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }

/* ============================================
   Ingredients & nutrition
   ============================================ */
.nutrition {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--cream) 0%, transparent 120px), var(--lavender);
}
.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.nutrition-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.nutrition-card h3 { font-size: 20px; margin-bottom: 16px; }
.ingredients-list { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }

.allergen-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--pink-soft);
  color: var(--purple-900);
  font-size: 14.5px;
  line-height: 1.5;
}
.allergen-note .icon { color: var(--pink); margin-top: 2px; }

/* Wide tables get their own scroll container so the page body never scrolls
   sideways on a phone. */
.table-scroll { overflow-x: auto; }
.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.nutrition-table th,
.nutrition-table td {
  padding: 11px 10px;
  text-align: start;
  white-space: nowrap;
}
.nutrition-table thead th {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--purple-500);
  border-bottom: 2px solid var(--purple-200);
}
.nutrition-table tbody th {
  font-weight: 700;
  color: var(--ink);
}
/* Values mix digits with Latin units ("1557 kJ"). Inside an RTL paragraph the
   bidi algorithm can reorder those into "kJ 1557", so each value is isolated
   and forced LTR, while the cell itself still hugs the row's start edge. */
.nutrition-table tbody td {
  color: var(--ink-soft);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
[dir="rtl"] .nutrition-table tbody td { text-align: right; }
.nutrition-table tbody tr + tr th,
.nutrition-table tbody tr + tr td { border-top: 1px solid var(--purple-100); }
.nutrition-table tbody tr:hover th,
.nutrition-table tbody tr:hover td { background: #FBF9FE; }

/* ============================================
   Contact form
   ============================================ */
.contact {
  padding: 72px 0;
  background: linear-gradient(180deg, var(--lavender) 0%, transparent 120px), var(--white);
}
.contact-panel {
  max-width: 680px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--purple-700);
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px; /* 16px avoids iOS Safari zooming in on focus */
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--purple-200);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: #A79FB4; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 4px rgba(110, 79, 174, .14);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--red); }
.field.has-error input:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 4px rgba(221, 75, 62, .14); }

.field-error {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red);
  min-height: 0;
}
.field-error:empty { display: none; }

/* Honeypot -- visually gone, still reachable by dumb bots. Kept out of the
   tab order and hidden from screen readers via aria-hidden on the wrapper. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn-submit {
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  background: var(--purple-600);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 38px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-submit:hover:not(:disabled) {
  background: var(--purple-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-submit:disabled { opacity: .65; cursor: default; }

.form-status { font-size: 14.5px; font-weight: 600; color: var(--red); }
.form-status:empty { display: none; }

.contact-success { text-align: center; padding: 20px 0; }
.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  margin-bottom: 18px;
  animation: successPop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-success h3 { font-size: 22px; margin-bottom: 8px; }
.contact-success p { color: var(--ink-soft); font-size: 16px; }

@keyframes successPop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   Buy CTA
   ============================================ */
.buy-cta {
  background: var(--purple-600);
  padding: 68px 0;
  text-align: center;
  color: var(--white);
}
.buy-cta-inner { max-width: 640px; margin: 0 auto; }
.buy-cta h2 { color: var(--white); font-size: clamp(28px, 4vw, 38px); margin-bottom: 12px; }
.buy-cta p:not(.eyebrow) { color: rgba(255,255,255,.88); font-size: 17px; }
.buy-row-lg { justify-content: center; margin-top: 34px; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--purple-900);
  color: rgba(255,255,255,.85);
  padding: 56px 0 24px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-logo-wrap {
  display: inline-flex;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 8px 16px;
}
.footer-logo { height: 44px; }
.footer-brand p { font-family: var(--font-head); font-size: 14px; color: var(--purple-200); margin-top: 8px; }
.footer-nav { display: flex; gap: 26px; font-weight: 600; }
.footer-nav a:hover { color: var(--white); }
.footer-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.footer-contact a:hover { color: var(--white); }
.footer-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-top: 22px;
}

/* ============================================
   Responsive
   ============================================ */
/* ============================================
   Back to top
   ============================================ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--purple-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--purple-700);
  transform: translateY(-3px) scale(1.05);
}
[dir="rtl"] .back-to-top { right: auto; left: 24px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .brand-tagline { display: none; }
}

@media (max-width: 980px) {
  .features-grid, .who-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-layout { grid-template-columns: 1fr; }
  .nutrition-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; max-width: 620px; }
  .about-visual { order: -1; }
  .about-copy .eyebrow { margin-inline: auto; }
}

@media (max-width: 860px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .brand-logo { height: 42px; }
  .brand-tagline {
    display: block;
    font-size: 11px;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    white-space: normal;
  }

  .main-nav {
    position: fixed;
    inset: 74px 16px auto 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-cta { align-self: stretch; text-align: center; }
  .nav-toggle { display: inline-flex; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .features-grid, .who-grid { grid-template-columns: 1fr; }

  /* Sections sit closer together on a phone -- the desktop rhythm leaves the
     blocks feeling disconnected once everything is stacked in one column. */
  .about-strip,
  .features,
  .holder,
  .who-its-for,
  .how-to-use,
  .nutrition,
  .contact,
  .buy-cta { padding: 48px 0; }
  .hero { padding: 32px 0 48px; }
  .section-head { margin-bottom: 28px; }

  /* The photo's transparent side margins would otherwise shrink the child by
     ~20% in the narrower column. Let the image box spill past the text column
     and clip the (empty) overflow, so the child stays the same size as on
     desktop without introducing a horizontal scrollbar. */
  .about-strip { overflow: hidden; }
  .about-visual { margin-inline: -46px; }

  .contact-panel { padding: 26px 20px; }
  .nutrition-card { padding: 24px 20px; }
  .btn-submit { align-self: stretch; text-align: center; }
  .holder-row { padding: 20px; gap: 15px; align-items: flex-start; }
  .holder-row .feature-icon { width: 44px; height: 44px; border-radius: 13px; }
  .holder-row .feature-icon .icon { width: 22px; height: 22px; }
  .buy-row { flex-direction: column; }
  .buy-btn { justify-content: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .site-footer { padding: 40px 0 20px; }
}