/* Shubham Foods — landing page styles.
   Brand colors and fonts live in :root so they can be swapped in one place
   once the final brand details arrive. */

:root {
  /* Brand (placeholder palette: warm saffron + leaf green) */
  --color-primary: #d9822b;
  --color-primary-dark: #b5651d;
  --color-primary-soft: #fbe3c6;
  --color-accent: #0e6655;        /* peacock green, from Paithani silk */
  --color-accent-dark: #0a4d40;
  --color-accent-soft: #d5ebe5;
  --color-paithani: #7b1650;      /* Paithani saree magenta */
  --color-paithani-dark: #4e0d33;
  --color-gold: #e0a526;          /* zari gold */
  --color-geru: #8b3a1e;          /* Warli terracotta (geru) */
  --font-marathi: "Tiro Devanagari Marathi", "Kohinoor Devanagari", serif;
  --color-text: #2b2118;
  --color-text-muted: #6b5e52;
  --color-bg: #fffaf3;
  --color-bg-tint: #f8eddd;
  --color-surface: #ffffff;
  --color-border: #ecdcc6;
  --color-on-primary: #ffffff;

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --shadow-sm: 0 4px 12px -4px rgb(60 35 10 / 0.15);
  --shadow: 0 18px 40px -18px rgb(60 35 10 / 0.35);
  --container: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.25rem; }

h1 em,
h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-primary);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--color-primary-dark);
}

svg {
  flex-shrink: 0;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

main {
  overflow-x: clip;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.muted {
  color: var(--color-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  background: var(--color-text);
  color: #fff;
}

.skip-link:focus {
  top: 1rem;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.25s var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-on-primary);
  box-shadow: 0 10px 24px -10px var(--color-primary);
}

.btn--primary:hover {
  box-shadow: 0 14px 28px -10px var(--color-primary);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-text);
}

.btn--light {
  background: #fff;
  color: var(--color-accent-dark);
}

.btn--light:hover {
  transform: translateY(-2px);
}

.btn--outline-light {
  border-color: rgb(255 255 255 / 0.6);
  color: #fff;
}

.btn--outline-light:hover {
  background: rgb(255 255 255 / 0.12);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0 1.125rem;
}

.btn--lg {
  min-height: 3.375rem;
  padding: 0 1.75rem;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  transition: background 0.25s, transform 0.25s var(--ease);
}

.icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-btn:hover {
  background: var(--color-primary);
  transform: rotate(-45deg);
}

/* Announcement bar --------------------------------------------------------- */
.announce {
  padding: 0.5rem var(--gutter);
  background: var(--color-accent-dark);
  color: #f4ead9;
  font-size: 0.875rem;
  text-align: center;
}

.announce p {
  margin: 0;
}

.announce a {
  color: #fff;
  font-weight: 600;
}

/* Header ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px -12px rgb(60 35 10 / 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-text);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
}

.brand__mark svg {
  width: 1.375rem;
  height: 1.375rem;
}

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand__name span {
  color: var(--color-primary);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a:not(.btn) {
  position: relative;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}

.site-nav a:not(.btn):hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary-soft);
  cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform 0.25s var(--ease), background 0.25s;
}

.nav-toggle__bar {
  position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
}

.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(60% 70% at 85% 30%, var(--color-primary-soft), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, var(--color-accent-soft), transparent 70%),
    var(--color-bg);
}

/* Soft dotted pattern, like a festive rangoli grid. */
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(217 130 43 / 0.18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 80% 40%, #000, transparent);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.375rem 1rem 0.375rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.pill svg {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

/* Hand-drawn underline under the highlighted word. */
.swash {
  position: relative;
  white-space: nowrap;
}

.swash::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.08em;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 4, 120 2, 197 10' fill='none' stroke='%232f6b3f' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.lede {
  max-width: 34rem;
  color: var(--color-text-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trust li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.trust strong {
  color: var(--color-text);
}

/* Illustrated hero visual */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 34rem;
  width: 100%;
  margin-inline: auto;
}

.plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 52%, #f6eadb 53% 58%, #fff 59% 100%);
  box-shadow:
    0 40px 80px -30px rgb(120 60 10 / 0.45),
    inset 0 -8px 20px rgb(120 60 10 / 0.08);
}

/* Round food photo sitting in the middle of the plate. */
.plate__photo {
  width: 72%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 16px 30px -12px rgb(120 60 10 / 0.45);
  animation: bob 6s ease-in-out infinite;
}

.plate__ring {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  animation: spin 30s linear infinite;
}

.plate__ring text {
  fill: var(--color-primary-dark);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
}

.deco {
  position: absolute;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.15));
  animation: bob 5s ease-in-out infinite;
}

.deco--1 { top: 4%; right: 12%; animation-delay: -1s; }
.deco--2 { bottom: 10%; left: 2%; animation-delay: -2.5s; }
.deco--3 { top: 40%; right: -2%; animation-delay: -3.5s; }

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  font-size: 0.875rem;
  line-height: 1.3;
  animation: bob 7s ease-in-out infinite;
}

.float-card small {
  display: block;
  color: var(--color-text-muted);
}

.float-card--rating {
  top: 12%;
  left: -2%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.float-card--customers {
  right: 0;
  bottom: 6%;
  animation-delay: -3s;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: #f2a516;
}

.stars svg {
  width: 1rem;
  height: 1rem;
}

.avatars {
  display: flex;
}

.avatars i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.5rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
}

.avatars i:first-child { margin-left: 0; background: var(--color-accent); }
.avatars i:last-child  { background: #b5465a; }

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Marquee ------------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  padding: 1.125rem 0;
  background: var(--color-primary);
  color: #fff;
  transform: rotate(-1.2deg) scale(1.02);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 35s linear infinite;
}

.marquee span {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 600;
  white-space: nowrap;
}

.marquee span::after {
  content: "✦";
  font-size: 0.875em;
  opacity: 0.7;
}

@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* Sections ----------------------------------------------------------------- */
.section {
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.section--tight {
  padding-block: clamp(2rem, 5vw, 3rem);
}

.section--tinted {
  background: var(--color-bg-tint);
}

.section--dark {
  background:
    radial-gradient(50% 80% at 100% 0%, rgb(217 130 43 / 0.25), transparent 70%),
    var(--color-accent-dark);
  color: #f4ead9;
}

.section--dark h2 em {
  color: #f6c27a;
}

.section__head {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section__head p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
}

.eyebrow--light {
  color: #f6c27a;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.split--top {
  align-items: start;
}

/* About -------------------------------------------------------------------- */
.about-visual {
  position: relative;
  min-height: 28rem;
}

.about-visual__main,
.about-visual__small {
  position: absolute;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  object-fit: cover;
  background: var(--color-bg-tint);
}

.about-visual__main {
  top: 0;
  left: 0;
  width: 82%;
  height: 88%;
}

.about-visual__small {
  right: 0;
  bottom: 0;
  width: 44%;
  height: auto;
  aspect-ratio: 1;
  border: 8px solid var(--color-bg);
}

.badge-circle {
  position: absolute;
  top: 6%;
  right: 6%;
  display: grid;
  place-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--color-accent-dark);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow);
  line-height: 1.1;
}

.badge-circle strong {
  order: 2;
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.badge-circle span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.checklist {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 2rem;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.stats strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--color-primary);
  line-height: 1.1;
}

.stats span {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* Products ----------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.filter {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.filter:hover {
  border-color: var(--color-text);
}

.filter[aria-pressed="true"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.product[hidden] {
  display: none;
}

.product__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0.625rem 0.625rem 0;
  border-radius: calc(var(--radius-lg) - 6px);
  overflow: hidden;
  background: var(--tone);
}

.product__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product:hover .product__media > img {
  transform: scale(1.08);
}

/* Small round badge showing the chip flavour. */
.flavour {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow-sm);
  font-size: 1.5rem;
}

.tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-text);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.tag--new {
  background: var(--color-accent);
}

.product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.25rem;
}

.product__cat {
  margin: 0 0 0.25rem;
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product h3 {
  margin-bottom: 0.25rem;
}

.product__body > p:not(.product__cat) {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Features (dark section) -------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 2rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.05);
  transition: background 0.3s, transform 0.35s var(--ease);
}

.features li:hover {
  background: rgb(255 255 255 / 0.1);
  transform: translateY(-4px);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #f6c27a, var(--color-primary));
  color: var(--color-accent-dark);
}

.feature__icon svg {
  width: 1.625rem;
  height: 1.625rem;
}

.features h3 {
  color: #fff;
}

.features p {
  margin: 0;
  color: #d7cdbd;
  font-size: 0.9375rem;
}

/* Steps -------------------------------------------------------------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: center;
}

/* Dashed line joining the three numbers on wide screens. */
.steps::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 16%;
  right: 16%;
  border-top: 2px dashed var(--color-border);
}

.steps li {
  position: relative;
}

.steps__num {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  border: 6px solid var(--color-bg);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 10px 20px -10px var(--color-primary);
}

.steps p {
  max-width: 18rem;
  margin: 0 auto;
  color: var(--color-text-muted);
}

/* Reviews ------------------------------------------------------------------ */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.review blockquote {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  line-height: 1.45;
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  line-height: 1.3;
}

.review figcaption i {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-style: normal;
  font-weight: 700;
}

.review figcaption small {
  display: block;
  color: var(--color-text-muted);
}

/* Order CTA ---------------------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 120% at 100% 50%, rgb(246 194 122 / 0.35), transparent 70%),
    linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
}

.cta__copy {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.cta h2 {
  margin-bottom: 0.25rem;
}

.cta p {
  margin: 0;
  color: #e3eadf;
}

.cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta__emoji {
  position: absolute;
  right: -1rem;
  bottom: -2.5rem;
  font-size: 9rem;
  opacity: 0.18;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* Contact ------------------------------------------------------------------ */
.contact-cards {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-cards li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  line-height: 1.35;
}

.contact-cards small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.contact-cards__link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.contact-cards__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.contact-cards__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.contact-form h3 {
  margin: 0;
  font-size: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgb(217 130 43 / 0.2);
}

.contact-form .btn {
  align-self: flex-start;
}

.form-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--color-accent);
  font-weight: 500;
}

/* Footer ------------------------------------------------------------------- */
.site-footer {
  padding: 4rem 0 0;
  background: var(--color-text);
  color: #cbbda9;
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer a:not(.brand) {
  color: #cbbda9;
  text-decoration: none;
}

.site-footer a:not(.brand):hover {
  color: #fff;
}

.brand--light {
  margin-bottom: 1rem;
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer__bottom p {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

.site-footer__bottom svg {
  width: 1rem;
  height: 1rem;
  color: #f2786b;
}

/* Scroll reveal (only when JS is running) ---------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .product.reveal.is-visible:hover {
  transform: translateY(-6px);
}

/* Responsive: tablet ------------------------------------------------------- */
@media (max-width: 1024px) {
  .product-grid,
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive: mobile menu + stacked layouts -------------------------------- */
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--color-bg);
    box-shadow: 0 20px 30px -20px rgb(60 35 10 / 0.4);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.35s var(--ease), visibility 0.35s;
  }

  .site-nav.is-open {
    clip-path: inset(0 0 -40px 0);
    visibility: visible;
  }

  .site-nav a:not(.btn) {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.125rem;
  }

  .site-nav a:not(.btn)::after {
    display: none;
  }

  .site-nav .btn {
    margin-top: 1rem;
    min-height: 3rem;
  }

  .hero__inner,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    text-align: center;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .hero__actions,
  .trust {
    justify-content: center;
  }

  .hero__visual {
    max-width: 26rem;
  }

  .about-visual {
    min-height: 22rem;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .steps::before {
    top: 2rem;
    bottom: 2rem;
    left: 50%;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--color-border);
  }

  .steps li {
    padding: 0 0 0;
    background: var(--color-bg);
  }

  .cta {
    text-align: center;
    justify-content: center;
  }

  .cta__actions {
    justify-content: center;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* Responsive: phones ------------------------------------------------------- */
@media (max-width: 600px) {
  .announce {
    font-size: 0.8125rem;
  }

  .brand__name {
    font-size: 1.3125rem;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .float-card {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .float-card--rating {
    left: 0;
    top: 2%;
  }

  /* Products and reviews become swipeable rows. */
  .product-grid,
  .reviews {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.5rem var(--gutter) 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .product-grid::-webkit-scrollbar,
  .reviews::-webkit-scrollbar {
    display: none;
  }

  .product,
  .review {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .features li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    padding: 1.25rem;
  }

  .feature__icon {
    grid-row: span 2;
    margin: 0;
  }

  .features h3 {
    margin: 0 0 0.25rem;
  }

  .stats strong {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form .btn,
  .cta .btn {
    width: 100%;
    align-self: stretch;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Maharashtrian style
   Toran garland, faint floral pattern, Paithani colours and zari border, Warli art,
   and Marathi (Devanagari) type.
   ========================================================================== */

:root {
  /* Paithani zari "temple" border, top and bottom versions. */
  --zari-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Crect width='24' height='12' fill='%234e0d33'/%3E%3Cpolygon points='0,12 12,1 24,12' fill='%23e0a526'/%3E%3Cpolygon points='6,12 12,6.5 18,12' fill='%237b1650'/%3E%3Ccircle cx='12' cy='10.6' r='1.2' fill='%23e0a526'/%3E%3C/svg%3E");
  --zari-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Crect width='24' height='12' fill='%234e0d33'/%3E%3Cpolygon points='0,0 12,11 24,0' fill='%23e0a526'/%3E%3Cpolygon points='6,0 12,5.5 18,0' fill='%237b1650'/%3E%3Ccircle cx='12' cy='1.4' r='1.2' fill='%23e0a526'/%3E%3C/svg%3E");
}

/* Marathi text ------------------------------------------------------------- */
.mr,
[lang="mr"] {
  font-family: var(--font-marathi);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow .mr {
  font-size: 1.25em;
  color: var(--color-paithani);
}

.eyebrow--light .mr {
  color: #ffd98a;
}

/* Brand: English name with the Marathi name below. */
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__mr {
  color: var(--color-paithani);
  font-size: 0.875rem;
}

.brand--light .brand__mr {
  color: #ffd98a;
}

.announce {
  background: var(--color-paithani-dark);
}

.announce a {
  color: #ffd98a;
}

/* Hero: toran, faint motif pattern, Marathi lines -------------------------------------- */
.hero {
  padding-top: clamp(4rem, 9vw, 7rem);
}

.hero__pattern {
  display: none;
}

/* Marigold and mango-leaf garland hanging across the top. */
.toran {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48'%3E%3Cpath d='M0 3 Q32 13 64 3' fill='none' stroke='%238a5a1e' stroke-width='2'/%3E%3Cpath d='M14 6 C21 15 19 27 14 34 C9 27 7 15 14 6Z' fill='%232e7d32'/%3E%3Cpath d='M14 9 L14 31' stroke='%2381c784' stroke-width='1'/%3E%3Cpath d='M50 6 C57 15 55 27 50 34 C45 27 43 15 50 6Z' fill='%232e7d32'/%3E%3Cpath d='M50 9 L50 31' stroke='%2381c784' stroke-width='1'/%3E%3Cpath d='M32 8 L32 40' stroke='%238a5a1e' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='17' r='7.5' fill='%23f59e0b'/%3E%3Ccircle cx='32' cy='17' r='5.5' fill='none' stroke='%23ea580c' stroke-width='3' stroke-dasharray='1.6 1.6'/%3E%3Ccircle cx='32' cy='17' r='2.4' fill='%23b45309'/%3E%3Ccircle cx='32' cy='35' r='6' fill='%23fbbf24'/%3E%3Ccircle cx='32' cy='35' r='4.2' fill='none' stroke='%23f59e0b' stroke-width='2.4' stroke-dasharray='1.4 1.4'/%3E%3Ccircle cx='32' cy='35' r='1.8' fill='%23c2410c'/%3E%3C/svg%3E") repeat-x top center / 64px 48px;
  filter: drop-shadow(0 4px 4px rgb(120 60 10 / 0.18));
  pointer-events: none;
}

.hero__motif {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%237b1650' stroke-width='1'%3E%3Cpath d='M36 24 C40 30 40 33 36 36 C32 33 32 30 36 24Z M36 48 C40 42 40 39 36 36 C32 39 32 42 36 48Z M24 36 C30 32 33 32 36 36 C33 40 30 40 24 36Z M48 36 C42 32 39 32 36 36 C39 40 42 40 48 36Z'/%3E%3C/g%3E%3Cg fill='%23d9822b'%3E%3Ccircle cx='36' cy='36' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.4'/%3E%3Ccircle cx='72' cy='0' r='1.4'/%3E%3Ccircle cx='0' cy='72' r='1.4'/%3E%3Ccircle cx='72' cy='72' r='1.4'/%3E%3C/g%3E%3C/svg%3E") repeat center / 72px 72px;
  opacity: 0.07;
  mask-image: radial-gradient(70% 80% at 75% 45%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 80% at 75% 45%, #000, transparent 80%);
  pointer-events: none;
}

.pill__mr {
  color: var(--color-paithani);
  font-size: 1rem;
}

.hero__mr {
  margin: -0.35em 0 0.9em;
  color: var(--color-paithani);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.4;
}

/* Paithani ribbon (the scrolling marquee) ---------------------------------- */
.marquee {
  padding: 1.75rem 0;
  background:
    var(--zari-top) repeat-x top / 24px 12px,
    var(--zari-bottom) repeat-x bottom / 24px 12px,
    linear-gradient(90deg, var(--color-paithani), #9b2465 50%, var(--color-paithani));
  color: #fde9c4;
}

.marquee span::after {
  color: var(--color-gold);
  opacity: 1;
}

.marquee .mr {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  color: #ffd98a;
}

/* Warli section ("Why us") ------------------------------------------------- */
.section--warli {
  padding-block: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(224 165 38 / 0.18), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(0 0 0 / 0.18), transparent 70%),
    var(--color-geru);
  color: #fdf1e2;
}

/* A chain of Warli figures holding hands. */
.warli-band {
  height: 48px;
  margin: 1.5rem 0 clamp(2.5rem, 6vw, 4rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='48'%3E%3Cg fill='%23fff8ee' stroke='%23fff8ee' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='15' cy='8' r='3.6'/%3E%3Cpolygon points='9,13 21,13 15,23'/%3E%3Cpolygon points='15,23 9,33 21,33'/%3E%3Cpath d='M10 15 L0 21 M20 15 L30 21 M11 33 L8 44 M19 33 L22 44' fill='none'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 30px 48px;
  opacity: 0.85;
}

.warli-band--bottom {
  margin: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  transform: scaleX(-1);
}

.section--warli h2 em {
  color: #ffd98a;
}

.section--warli .features li {
  border: 1.5px dashed rgb(255 248 238 / 0.4);
  background: rgb(255 248 238 / 0.06);
}

.section--warli .feature__icon {
  background: #fff8ee;
  color: var(--color-geru);
}

.section--warli .features p {
  color: #f1d9c4;
}

/* Steps: rangoli-style dotted ring around the numbers. */
.steps__num {
  outline: 2px dashed var(--color-gold);
  outline-offset: 5px;
}

/* Order banner in Paithani silk ------------------------------------------- */
.cta {
  padding-top: calc(clamp(2rem, 5vw, 3.5rem) + 12px);
  background:
    var(--zari-top) repeat-x top / 24px 12px,
    radial-gradient(60% 120% at 100% 50%, rgb(224 165 38 / 0.3), transparent 70%),
    linear-gradient(135deg, var(--color-paithani), var(--color-paithani-dark));
}

.cta .btn--light {
  color: var(--color-paithani);
}

.cta__emoji {
  opacity: 0.3;
}

/* Footer: zari border along the top edge. */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--zari-bottom) repeat-x / 24px 12px;
}

@media (max-width: 860px) {
  .toran {
    height: 40px;
    background-size: 54px 40px;
  }
}