/* =============================================================================
   styles.css — Love Forever Gift Box landing page
   Design-token foundation. Section content styles will be added per section.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. @font-face — Hind Siliguri (Bengali subset)
   Source: /fonts/hind-siliguri-bn-{400,600,700}.woff2
   unicode-range targets Bangla + Devanagari punctuation + Zero Width chars
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hind-siliguri-bn-400.woff2") format("woff2");
  unicode-range:
    U+0951-0952, U+0964-0965, U+0980-09FE,
    U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8,
    U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7,
    U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hind-siliguri-bn-600.woff2") format("woff2");
  unicode-range:
    U+0951-0952, U+0964-0965, U+0980-09FE,
    U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8,
    U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7,
    U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

@font-face {
  font-family: "Hind Siliguri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hind-siliguri-bn-700.woff2") format("woff2");
  unicode-range:
    U+0951-0952, U+0964-0965, U+0980-09FE,
    U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8,
    U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7,
    U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* ---------------------------------------------------------------------------
   2. Design Tokens — :root
   All hero/brand color tokens + derived shadow/gradient values.
   Sourced from :root block in assets/index-CljqMTJ6.css
   --------------------------------------------------------------------------- */
:root {
  /* ── Hero palette ──────────────────────────────────────────────────────── */
  --hero-bg:     hsl(330 100% 98%);   /* near-white blush page background    */
  --hero-dot:    hsl(339 84% 84%);    /* polka-dot colour (pink)             */
  --hero-accent: hsl(339 100% 59%);   /* brand pink/red — buttons, borders   */
  --hero-ink:    hsl(222 47% 11%);    /* near-black heading text             */
  --hero-muted:  hsl(215 14% 47%);    /* muted/secondary body text           */
  --hero-border: hsl(334 48% 89%);    /* subtle pink card borders            */
  --hero-tint:   hsl(330 100% 98%);   /* very light pink — card tints        */

  /* ── Color swatches (necklace variant picker) ──────────────────────────── */
  --swatch-red:   hsl(0   84% 60%);   /* red/coral variant                   */
  --swatch-pink:  hsl(336 100% 83%);  /* baby pink variant                   */
  --swatch-black: hsl(222 47% 11%);   /* midnight-blue/black variant         */

  /* ── Polka-dot pattern parameters (used in .bg-polka) ─────────────────── */
  --hero-dot-opacity:    0.32;
  --hero-dot-size:       84px;
  --hero-dot-radius:     6px;
  --hero-glow-opacity:   0.14;
  --hero-vignette-ink:   hsl(0 0% 0%);
  --hero-vignette-opacity: 0;

  /* ── Reusable shadows ──────────────────────────────────────────────────── */
  /* soft-shadow: replaces Tailwind's shadow-soft utility */
  --shadow-soft:       0 10px 30px -18px hsl(339 100% 59% / 0.25);
  /* card glow (default / hover) */
  --card-glow:         0 14px 40px -26px hsl(339 100% 59% / 0.18);
  --card-glow-hover:   0 18px 54px -28px hsl(339 100% 59% / 0.30);
  /* button glow (default / hover) */
  --button-glow:       0 16px 40px -22px hsl(339 100% 59% / 0.35);
  --button-glow-hover: 0 22px 60px -26px hsl(339 100% 59% / 0.55);

  /* ── Border-radius scale (mirrors reference rounded-[*] classes) ───────── */
  --radius-sm:   12px;   /* small cards / chips                               */
  --radius-md:   18px;   /* general cards                                     */
  --radius-lg:   22px;   /* media containers                                  */
  --radius-xl:   26px;   /* hero info card / major panels                     */
  --radius-full: 9999px; /* pills / badges / swatch circles                   */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-px:  1.5rem;   /* side padding on mobile                        */
  --container-px-md: 2rem;   /* side padding on wider viewports               */
}

/* ---------------------------------------------------------------------------
   3. Base Reset
   Minimal, opinionated reset to complement the design system.
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:
    "Hind Siliguri",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hero-ink);
  background-color: var(--hero-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video,
svg,
canvas,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ol,
ul {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   4. Layout — Container
   Max-width centered wrapper, responsive horizontal padding.
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-px-md);
  }
}

/* ---------------------------------------------------------------------------
   5. Polka-dot Section Background   (.bg-polka)
   Replicates .bg-hero-polka from assets/index-CljqMTJ6.css:
     - Light pink base (--hero-bg)
     - Repeating radial dot grid (--hero-dot at low opacity)
     - Soft corner accent glow (--hero-accent at low opacity)
   --------------------------------------------------------------------------- */
.bg-polka {
  background-color: var(--hero-bg);
  background-image:
    /* layer 1: repeating polka-dot grid */
    radial-gradient(
      circle at 10px 10px,
      hsl(339 84% 84% / var(--hero-dot-opacity)) 0,
      hsl(339 84% 84% / var(--hero-dot-opacity)) var(--hero-dot-radius),
      transparent calc(var(--hero-dot-radius) + 0.5px)
    ),
    /* layer 2: soft accent glow — bottom-right corner */
    radial-gradient(
      700px 420px at 85% 85%,
      hsl(339 100% 59% / var(--hero-glow-opacity)) 0%,
      transparent 60%
    ),
    /* layer 3: optional top vignette (opacity 0 in light mode) */
    radial-gradient(
      1000px 700px at 50% 15%,
      hsl(0 0% 0% / var(--hero-vignette-opacity)) 0%,
      transparent 62%
    );
  background-size:
    var(--hero-dot-size) var(--hero-dot-size),
    auto,
    auto;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat;
}

/* ---------------------------------------------------------------------------
   6. Reusable Utility Classes
   Small set of helpers used across sections — keeps markup clean.
   --------------------------------------------------------------------------- */

/* Soft drop-shadow (maps to --shadow-soft) */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

/* Card glow */
.card-glow {
  box-shadow: var(--card-glow);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card-glow:hover {
  box-shadow: var(--card-glow-hover);
}

/* Visually hidden (accessible sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   7. Section Base Styles
   Shared padding for all page sections. Content-specific rules go in
   per-section blocks below (added step-by-step as sections are built).
   --------------------------------------------------------------------------- */
section {
  width: 100%;
  overflow: hidden;
}

/* Placeholder visual during skeleton phase — remove when sections are filled */
.hero,
.box-contents,
.why-special,
.projection-showcase,
.projection-unboxing-carousel,
.unboxing-carousel,
.special-offer,
.delivery-order {
  min-height: 2px; /* collapses to nothing when empty — won't show gaps */
}

/* =============================================================================
   Section-specific styles will be appended below as each section is built.
   ============================================================================= */

/* =============================================================================
   HERO SECTION
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero Header  (badge → h1 → h2 → subtitle para)
   Reference: mS() in index-DFgrzBFu.js
   max-w-[1000px], center-aligned, pb-8 pt-8 / sm:py-14 sm:min-h-[600px]
   --------------------------------------------------------------------------- */
.hero-header {
  width: 100%;
}
.hero-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
  padding: 1.5rem 1rem 1.25rem;
}
@media (min-width: 640px) {
  .hero-header__inner {
    min-height: auto;
    justify-content: center;
    padding: 2rem 1.5rem 2rem;
  }
}

/* Pill badge  – mb-6 inline-flex rounded-full border bg-card px-5 py-2 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

/* H1 — text-[40px] sm:text-[68px] font-black leading-[1.05] tracking-[-0.02em] */
.hero-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 2.5rem;        /* 40px */
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .hero-title { font-size: 4.25rem; } /* 68px */
}

/* H2 — mt-3 text-[34px] sm:mt-4 sm:text-[58px] same weight/tracking */
.hero-subtitle-title {
  margin-top: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 2.125rem;      /* 34px */
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .hero-subtitle-title {
    margin-top: 0.75rem;
    font-size: 3.625rem;    /* 58px */
  }
}

/* Accent span inside h2 — text-hero-accent */
.hero-accent-text {
  color: var(--hero-accent);
}

/* Subtitle paragraph — mt-5 max-w-[46rem] text-[15px] sm:text-[16px] */
.hero-subtitle-para {
  margin-top: 0.75rem;
  max-width: 46rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.9375rem;     /* 15px */
  font-weight: 600;
  line-height: 1.625;
  color: var(--hero-muted);
}
@media (min-width: 640px) {
  .hero-subtitle-para { font-size: 1rem; }
}

/* ---------------------------------------------------------------------------
   Hero section container  (gallery + info card grid)
   Reference: $() export in LoveForeverHeroCarouselAndDetails-X2BVcajh.js
   max-w-[1200px] px-6 pb-12 pt-4 / sm:px-8 sm:pb-16 sm:pt-0
   grid gap-7 md:grid-cols-2 md:items-stretch md:gap-8 max-w-[1100px]
   --------------------------------------------------------------------------- */
.hero {
  width: 100%;
}
.hero__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0.5rem 1rem 1rem;
}
@media (min-width: 640px) {
  .hero__outer {
    padding: 0.75rem 1.5rem 1.25rem;
  }
}
.hero__grid {
  display: grid;
  gap: 1.75rem;
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 2rem;
  }
}
.hero__gallery-col {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Gallery card
   Reference: A() — embedded variant
   rounded-[26px] border border-hero-border bg-card shadow-soft md:h-full
   p-4 sm:p-6   label + carousel wrapper
   --------------------------------------------------------------------------- */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);  /* 26px */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 1rem;
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .gallery-card { padding: 1.5rem; }
}

/* "📸 প্রোডাক্ট ছবি" label — text-center font-brand text-[12px] font-extrabold */
.gallery-label {
  text-align: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 800;
  color: var(--hero-ink);
}

/* Main slide area — one visible at a time */
.gallery-main {
  position: relative;
  width: 100%;
}

/* Individual slides — aspect-[3/4] md:h-full in embedded variant */
.gallery-slide {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-md);   /* 18px for embedded */
  overflow: hidden;
  background-color: var(--hero-tint);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gallery-slide:hover {
  transform: scale(1.01);
  box-shadow: var(--card-glow-hover);
}
.gallery-slide--hidden {
  display: none;
}
.gallery-slide__inner {
  aspect-ratio: 3 / 4;
  padding: 0.75rem;
  width: 100%;
}
@media (min-width: 640px) {
  .gallery-slide__inner { padding: 1rem; }
}

.gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);   /* 14px */
}

/* Thumbnail strip — 4 equal-width thumbs */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.gallery-thumb {
  position: relative;
  border: 2px solid var(--hero-border);
  border-radius: var(--radius-sm);   /* 12px */
  overflow: hidden;
  background: var(--hero-tint);
  padding: 0;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gallery-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--hero-accent);
}
.gallery-thumb--active {
  border-color: var(--hero-accent);
  box-shadow: 0 0 0 2.5px var(--hero-accent);
  transform: translateY(-2px);
}
.gallery-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.gallery-thumb:not(.gallery-thumb--active) .gallery-thumb__img {
  opacity: 0.72;
}
.gallery-thumb:hover .gallery-thumb__img,
.gallery-thumb--active .gallery-thumb__img {
  opacity: 1;
  transform: scale(1.05);
}
/* Numbered swatch — lightweight replacement for heavy GIF thumbnails */
.gallery-thumb__swatch {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-brand, "Hind Siliguri", sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hero-accent);
  background: var(--hero-tint);
  border-radius: 10px;
  user-select: none;
}
.gallery-thumb--active .gallery-thumb__swatch {
  background: hsl(339 100% 96%);
  color: var(--hero-accent);
}

/* Prev/Next arrows */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #ffffffcc;
  backdrop-filter: blur(4px);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--hero-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-soft);
}
.gallery-arrow:hover {
  background-color: #fff;
  box-shadow: var(--card-glow-hover);
}
.gallery-arrow--prev { left: 0.5rem; }
.gallery-arrow--next { right: 0.5rem; }

/* ---------------------------------------------------------------------------
   Info card  (right column)
   Reference: z() component — rounded-[24px] bg-card p-5 sm:p-6 shadow-soft
   --------------------------------------------------------------------------- */
.info-card {
  border-radius: var(--radius-xl);   /* 24px → we'll use 24 to match ref exactly */
  background-color: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
@media (min-width: 640px) {
  .info-card { padding: 1.5rem; }
}

/* "Special Gift" badge — inline-flex rounded-full border bg-hero-tint px-3 py-1.5 */
.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  font-size: 0.75rem;       /* 12px */
  font-weight: 800;
  color: var(--hero-accent);
  width: fit-content;
}
.info-badge__icon {
  flex-shrink: 0;
  color: var(--hero-accent);
}

/* Info card heading — mt-4 text-[30px] sm:text-[40px] font-black */
.info-card__title {
  margin-top: 1rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.875rem;      /* 30px */
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
  word-break: break-word;
}
@media (min-width: 640px) {
  .info-card__title { font-size: 2.5rem; } /* 40px */
}

/* Info card subtitle — mt-3 text-[14px] font-semibold leading-relaxed */
.info-card__subtitle {
  margin-top: 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  font-weight: 600;
  line-height: 1.625;
  color: var(--hero-muted);
}

/* ---------------------------------------------------------------------------
   Color Selector  — mt-5 flex items-center gap-3 + mt-3 flex gap-3
   --------------------------------------------------------------------------- */
.color-selector {
  margin-top: 1.25rem;
}
.color-selector__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  font-weight: 700;
  color: var(--hero-ink);
}
.color-selector__word {
  color: var(--hero-muted);
}
.color-selector__current {
  color: var(--hero-ink);
}
.color-selector__swatches {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Individual swatch circles — h-7 w-7 rounded-full border-2 shadow-soft */
.color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--hero-border);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.03); }
.color-swatch--active {
  border-color: var(--hero-accent);
  box-shadow: 0 0 0 2px var(--hero-accent), var(--shadow-soft);
}
.color-swatch--red   { background-color: var(--swatch-red); }
.color-swatch--pink  { background-color: var(--swatch-pink); }
.color-swatch--black { background-color: var(--swatch-black); }

/* ---------------------------------------------------------------------------
   Countdown block  — mt-6 rounded-[18px] border bg-hero-tint p-4
   --------------------------------------------------------------------------- */
.countdown-block {
  margin-top: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-md);   /* 18px */
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  padding: 1rem;
}

/* Heading row — flex items-center gap-2 text-[13px] font-extrabold */
.countdown-block__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
}
.countdown-block__icon { color: var(--hero-accent); flex-shrink: 0; }

/* Boxes row — mt-3 flex flex-nowrap items-center justify-between gap-2 */
.countdown-boxes {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow: hidden;
}
@media (min-width: 640px) {
  .countdown-boxes {
    justify-content: flex-start;
    gap: 0.75rem;
  }
}

/* Single time unit box — h-[46px] w-[56px] sm:h-[56px] sm:w-[74px] */
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 56px;
  border-radius: var(--radius-sm);   /* 12px */
  background-color: var(--hero-ink);
  color: var(--hero-tint);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .countdown-unit { height: 56px; width: 74px; }
}

/* Number — text-[15px] sm:text-[18px] font-extrabold leading-none */
.countdown-num {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .countdown-num { font-size: 1.125rem; }
}

/* Label — mt-1 text-[10px] font-semibold leading-none opacity-80 */
.countdown-label {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.8;
}

/* Separating colon — hidden on mobile, shown sm+ */
.countdown-sep {
  display: none;
  font-size: 1rem;
  font-weight: 800;
  color: var(--hero-muted);
}
@media (min-width: 640px) {
  .countdown-sep { display: inline; font-size: 1.125rem; }
}

/* ---------------------------------------------------------------------------
   Delivery checklist  — mt-6 rounded-[18px] border bg-card p-5
   --------------------------------------------------------------------------- */
.delivery-list {
  margin-top: 1.5rem;
  border-radius: var(--radius-md);   /* 18px */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;
}
.delivery-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
.delivery-item__icon {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  flex-shrink: 0;
  color: var(--hero-accent);
}
.delivery-item__icon svg { color: var(--hero-accent); }
.delivery-item__text {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  min-width: 0;
}
.delivery-item__title {
  font-weight: 800;
  color: var(--hero-ink);
}
.delivery-item__desc {
  margin-top: 0.125rem;
  font-weight: 600;
  color: var(--hero-muted);
}

/* ---------------------------------------------------------------------------
   Theme switcher  (fixed bottom-right)
   Reference: vS() — fixed right-4 z-50 bottom:max(0.5rem,safe-area-inset)
   --------------------------------------------------------------------------- */
.theme-switcher {
  position: fixed;
  right: 1rem;
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 50;
}
.theme-switcher__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 0.25rem;
  box-shadow: var(--shadow-soft);
}
.theme-btn {
  border-radius: var(--radius-full);
  padding: 0.375rem 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--hero-ink);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.theme-btn:hover { background-color: var(--hero-tint); }
.theme-btn--active {
  background-color: var(--hero-accent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Floating WhatsApp button  (mobile only, fixed bottom-left)
   Reference: xS() — fixed left-4 z-50 — only shown on mobile (<768px)
   --------------------------------------------------------------------------- */
.whatsapp-float {
  display: none; /* hidden by default; JS/CSS shows on mobile */
  position: fixed;
  left: 1rem;
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 50;
}
@media (max-width: 768px) {
  .whatsapp-float { display: none !important; }
}
.whatsapp-float__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding-inline: 1rem;
  border-radius: var(--radius-sm);   /* 14px */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.whatsapp-float__btn:hover { background-color: var(--hero-tint); }
.whatsapp-icon {
  width: 1rem;
  height: 1rem;
  color: var(--hero-accent);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Lightbox modal
   --------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: min(92vw, 56rem);
  max-height: 95vh;
  overflow: hidden;
}

.lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Caption — text-center font-brand text-[14px] font-extrabold text-hero-ink */
.lightbox__caption {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  flex: 1;
  text-align: center;
}

.lightbox__close {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}
.lightbox__close:hover { background-color: rgba(255,255,255,0.3); }

.lightbox__img-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);   /* 18px */
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
}

.lightbox__img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  padding: 0.75rem;
}

/* ---------------------------------------------------------------------------
   theme-noir overrides  — applied when <html> has class "theme-noir"
   --------------------------------------------------------------------------- */
.theme-noir {
  --hero-bg: hsl(240 7% 10%);
  --hero-dot: hsl(350 72% 20%);
  --hero-accent: hsl(334 88% 60%);
  --hero-ink: hsl(210 22% 95%);
  --hero-muted: hsl(220 12% 74%);
  --hero-border: hsl(240 7% 26%);
  --hero-tint: hsl(240 7% 18%);
  --hero-dot-opacity: 0;
  --hero-glow-opacity: 0.18;
  --hero-vignette-ink: hsl(240 10% 2%);
  --hero-vignette-opacity: 0.32;
  --swatch-red: hsl(350 80% 48%);
  --swatch-pink: hsl(334 88% 60%);
  --swatch-black: hsl(240 10% 8%);
  --shadow-soft: 0 18px 46px -28px hsl(334 88% 60% / 0.35);
}
.theme-noir .hero-badge,
.theme-noir .gallery-card,
.theme-noir .info-card,
.theme-noir .gallery-arrow,
.theme-noir .delivery-list,
.theme-noir .theme-switcher__inner,
.theme-noir .whatsapp-float__btn {
  background-color: hsl(240 7% 13%);
  color: hsl(210 22% 95%);
}
.theme-noir .countdown-unit {
  background-color: hsl(240 7% 18%);
  color: hsl(210 22% 95%);
}
.theme-noir .lightbox__img-wrap {
  background-color: hsl(240 7% 13%);
}

/* =============================================================================
   BOX CONTENTS SECTION
   Reference: BoxContentsSection-DyPFYURB.js
   mx-auto max-w-[1200px] px-6 py-10 sm:px-8 sm:py-14
   header: max-w-[900px] text-center
   grid: mt-7 sm:mt-10 max-w-[1050px] grid-cols-2 md:grid-cols-4 gap-4 sm:gap-5
   card: rounded-[22px] border border-hero-border bg-card p-5 text-center shadow-soft
   icon-wrap: h-12 w-12 rounded-[14px] bg-hero-tint text-hero-accent shadow-soft
   icon: h-6 w-6
   title: mt-4 text-[13px] font-extrabold sm:text-[14px]
   subtitle: mt-1 text-[12px] font-semibold text-hero-muted
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Outer wrapper — max-w + padding
   --------------------------------------------------------------------------- */
.box-contents__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0.75rem 1rem 2rem;
}
@media (min-width: 640px) {
  .box-contents__outer {
    padding: 1rem 1.5rem 2.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Centered header
   --------------------------------------------------------------------------- */
.box-contents__header {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* H2 — font-brand text-[28px] font-black leading-tight sm:text-[38px] */
.box-contents__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.75rem;       /* 28px */
  font-weight: 900;
  line-height: 1.2;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .box-contents__title { font-size: 2.375rem; } /* 38px */
}

/* subtitle — mt-2 text-[14px] font-semibold text-hero-muted */
.box-contents__subtitle {
  margin-top: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  font-weight: 600;
  color: var(--hero-muted);
}

/* ---------------------------------------------------------------------------
   4-item grid
   mt-7 sm:mt-10   grid-cols-2 md:grid-cols-4   gap-4 sm:gap-5
   max-w-[1050px]  mx-auto
   --------------------------------------------------------------------------- */
.box-contents__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;                /* gap-4 */
  max-width: 1050px;
  margin-inline: auto;
  margin-top: 1.25rem;
}
@media (min-width: 640px) {
  .box-contents__grid {
    margin-top: 1.5rem;
    gap: 1.25rem;           /* sm:gap-5 */
  }
}
@media (min-width: 768px) {
  .box-contents__grid {
    grid-template-columns: repeat(4, 1fr); /* md:grid-cols-4 */
  }
}

/* ---------------------------------------------------------------------------
   Individual item card
   rounded-[22px] border border-hero-border bg-card p-5 text-center shadow-soft
   --------------------------------------------------------------------------- */
.box-item {
  border-radius: 22px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;         /* p-5 */
  text-align: center;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.box-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-glow-hover);
}

/* Icon wrapper — mx-auto h-12 w-12 rounded-[14px] bg-hero-tint text-hero-accent shadow-soft */
.box-item__icon-wrap {
  display: grid;
  place-items: center;
  width: 3rem;              /* w-12 = 48px */
  height: 3rem;             /* h-12 = 48px */
  border-radius: 14px;
  background-color: var(--hero-tint);
  color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

/* Icon SVG — h-6 w-6 = 24px (explicit width/height on element prevents unconstrained SVG bug) */
.box-item__icon {
  width: 1.5rem;            /* 24px */
  height: 1.5rem;
  display: block;
  color: var(--hero-accent);
  flex-shrink: 0;
}

/* Title — mt-4 font-brand text-[13px] font-extrabold sm:text-[14px] text-hero-ink */
.box-item__title {
  margin-top: 1rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
}
@media (min-width: 640px) {
  .box-item__title { font-size: 0.875rem; } /* 14px */
}

/* Subtitle — mt-1 font-brand text-[12px] font-semibold text-hero-muted */
.box-item__subtitle {
  margin-top: 0.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.4;
}

/* Dark-mode overrides */
.theme-noir .box-item {
  background-color: hsl(240 7% 13%);
  color: hsl(210 22% 95%);
}
.theme-noir .box-item__icon-wrap {
  background-color: hsl(240 7% 20%);
}

/* =============================================================================
   WHY SPECIAL SECTION
   Reference: NecklaceWhyAndHowSections-BzF57v-a.js
   outer: mx-auto max-w-[1200px] px-6 py-10 sm:px-8 sm:py-14
   inner: mx-auto max-w-[1050px]
   header: flex items-center justify-center gap-2 text-center
     → ✨ accent span (text-hero-accent) + h2 (text-[22px] sm:text-[26px] font-black)
   grid: mt-5 gap-4 md:mt-6 md:grid-cols-3  (1 col mobile → 3 col ≥768px)
   card: rounded-[20px] border border-hero-border bg-card p-5 shadow-soft
   icon-wrap: mx-auto h-11 w-11 (44px) rounded-[14px] bg-hero-tint shadow-soft
   icon: h-5 w-5 (20px)
   title: mt-3 text-center text-[13px] font-extrabold sm:text-[14px]
   desc: mt-1 text-center text-[12px] font-semibold text-hero-muted
   ============================================================================= */

@media (max-width: 768px) {
  .why-special {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Outer wrapper
   --------------------------------------------------------------------------- */
.why-special__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.5rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .why-special__outer {
    padding: 2rem 1.5rem 1.75rem;
  }
}

/* Inner max-width constrainer */
.why-special__inner {
  max-width: 1050px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Header row — flex, horizontally centered, ✨ + h2 side by side
   --------------------------------------------------------------------------- */
.why-special__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

/* ✨ accent character */
.why-special__accent {
  color: var(--hero-accent);
  font-size: 1.375rem;      /* same visual size as the h2 at mobile */
  line-height: 1;
  flex-shrink: 0;
}

/* H2 — font-brand text-[22px] font-black sm:text-[26px] */
.why-special__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.375rem;      /* 22px */
  font-weight: 900;
  line-height: 1.2;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .why-special__title { font-size: 1.625rem; } /* 26px */
  .why-special__accent { font-size: 1.625rem; }
}

/* ---------------------------------------------------------------------------
   3-item grid — 1 col mobile, 3 col md+
   mt-5 gap-4 md:mt-6 md:grid-cols-3
   --------------------------------------------------------------------------- */
.why-special__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;                /* gap-4 */
  margin-top: 1.25rem;      /* mt-5 */
}
@media (min-width: 768px) {
  .why-special__grid {
    grid-template-columns: repeat(3, 1fr);  /* md:grid-cols-3 */
    margin-top: 1.5rem;     /* md:mt-6 */
  }
}

/* ---------------------------------------------------------------------------
   Individual feature card
   rounded-[20px] border border-hero-border bg-card p-5 shadow-soft
   Note: NO align-items:center on the card — icon-wrap uses mx-auto instead
   --------------------------------------------------------------------------- */
.why-item {
  border-radius: 20px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;         /* p-5 */
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-glow-hover);
}

/* Icon wrapper — mx-auto h-11 w-11 (44px) rounded-[14px] bg-hero-tint shadow-soft */
.why-item__icon-wrap {
  display: grid;
  place-items: center;
  width: 2.75rem;           /* w-11 = 44px */
  height: 2.75rem;          /* h-11 = 44px */
  border-radius: 14px;
  background-color: var(--hero-tint);
  color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  margin-inline: auto;      /* mx-auto centers it within the card */
}

/* Icon SVG — h-5 w-5 = 20px */
.why-item__icon {
  width: 1.25rem;           /* 20px */
  height: 1.25rem;
  display: block;
  color: var(--hero-accent);
  flex-shrink: 0;
}

/* Title — mt-3 text-center text-[13px] font-extrabold sm:text-[14px] */
.why-item__title {
  margin-top: 0.75rem;      /* mt-3 */
  text-align: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
}
@media (min-width: 640px) {
  .why-item__title { font-size: 0.875rem; } /* 14px */
}

/* Description — mt-1 text-center text-[12px] font-semibold text-hero-muted */
.why-item__desc {
  margin-top: 0.25rem;      /* mt-1 */
  text-align: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.5;
}

/* Dark-mode overrides */
.theme-noir .why-item {
  background-color: hsl(240 7% 13%);
  color: hsl(210 22% 95%);
}
.theme-noir .why-item__icon-wrap {
  background-color: hsl(240 7% 20%);
}

/* =============================================================================
   PROJECTION SHOWCASE SECTION
   Reference: ProjectionNecklaceShowcase-BVKNx9xM.js
   outer: mx-auto max-w-[1200px] px-6 py-10 sm:px-8 sm:py-14
   header: mx-auto max-w-[1000px] text-center
   badge: inline-flex rounded-full border bg-card px-4 py-2 text-[13px] font-extrabold shadow-soft
   h3: mt-4 text-[26px] sm:text-[34px] font-black leading-tight
   subtitle: mt-2 text-[14px] font-semibold text-hero-muted
   grid: mx-auto mt-7 max-w-[1100px] gap-7 md:mt-10 md:grid-cols-2 md:items-start md:gap-8
   media card: rounded-[26px] border shadow-soft overflow-hidden
   aspect: [9/16] for YouTube / [3/4] sm:[4/5] for photo
   lang-badge: absolute right-4 top-4 rounded-[14px] bg-hero-accent text-[12px] font-extrabold
   tabs: mt-4 flex flex-wrap justify-center gap-2 sm:gap-3
   tab: rounded-full border px-4 py-2 text-[13px] font-extrabold
   slide pills: mt-4 flex flex-wrap justify-center gap-3 min-w-[92px]
   info card: rounded-[24px] border p-5 sm:p-6 shadow-soft
   feature cards: mt-4 grid gap-3 sm:grid-cols-2 rounded-[18px] border p-4
   how-card: mt-4 rounded-[18px] border bg-hero-ink p-5
   step circle: h-6 w-6 rounded-full bg-hero-accent text-[12px] font-extrabold
   lang dot: h-1.5 w-6 (active) / w-1.5 (inactive) rounded-full
   ============================================================================= */

/* ---------------------------------------------------------------------------
   @keyframes — animate-enter (opacity + translateY slide-in)
   Matches the reference's Tailwind "animate-enter" utility.
   --------------------------------------------------------------------------- */
@keyframes ps-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-enter {
  animation: ps-enter 0.28s ease both;
}

/* ---------------------------------------------------------------------------
   Outer wrapper
   --------------------------------------------------------------------------- */
.ps-outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .ps-outer { padding: 1.75rem 1.5rem 2rem; }
}

/* ---------------------------------------------------------------------------
   Section header
   --------------------------------------------------------------------------- */
.ps-header {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/* Sparkles pill badge — inline-flex rounded-full border bg-card shadow-soft */
.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 0.5rem 1rem;     /* py-2 px-4 */
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
}
.ps-badge__icon {
  color: var(--hero-accent);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* H3 — mt-4 text-[26px] sm:text-[34px] font-black leading-tight */
.ps-heading {
  margin-top: 1rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.625rem;      /* 26px */
  font-weight: 900;
  line-height: 1.15;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .ps-heading { font-size: 2.125rem; } /* 34px */
}

/* Subtitle — mt-2 text-[14px] font-semibold text-hero-muted */
.ps-subtitle {
  margin-top: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.6;
}
.ps-subtitle__accent {
  color: var(--hero-accent);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Two-column grid
   mx-auto mt-7 max-w-[1100px] gap-7 md:mt-10 md:grid-cols-2 md:items-start md:gap-8
   --------------------------------------------------------------------------- */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 1100px;
  margin-inline: auto;
  margin-top: 1.25rem;
}
@media (min-width: 768px) {
  .ps-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin-top: 1.5rem;
    gap: 2rem;              /* md:gap-8 */
  }
}

/* ---------------------------------------------------------------------------
   LEFT: Media column
   --------------------------------------------------------------------------- */
.ps-media-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Media card — rounded-[26px] border border-hero-border bg-card shadow-soft overflow-hidden */
.ps-media-card {
  border-radius: var(--radius-xl);  /* 26px */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}

/* Media viewport wrapper — aspect ratio set dynamically by JS class */
.ps-media-wrap {
  position: relative;
  width: 100%;
  /* Default: YouTube aspect 9/16 */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: var(--hero-tint);
}
/* Photo mode: 3/4 → 4/5 sm+ */
.ps-media-wrap--photo {
  aspect-ratio: 3 / 4;
}
@media (min-width: 640px) {
  .ps-media-wrap--photo {
    aspect-ratio: 4 / 5;
  }
}

/* "100 Languages" badge — absolute right-4 top-4 rounded-[14px] bg-hero-accent */
.ps-lang-badge {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 10;
  border-radius: 14px;
  background-color: var(--hero-accent);
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

/* Video layer and photo layer */
.ps-video-layer,
.ps-photo-layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.2s ease;
}
.ps-photo-layer--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Individual YouTube slide — fills its layer */
.ps-yt-slide {
  position: absolute;
  inset: 0;
}
.ps-yt-slide--hidden {
  display: none;
}

/* Thumbnail wrapper */
.ps-yt-thumb {
  position: absolute;
  inset: 0;
  cursor: pointer;
  overflow: hidden;
}
.ps-yt-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  transition: transform 0.3s ease;
  display: block;
}
.ps-yt-thumb:hover .ps-yt-thumb__img {
  transform: scale(1.01);
}

/* Dark gradient overlay on thumbnail */
.ps-yt-thumb__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.12) 45%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

/* Centered play button wrap */
.ps-yt-thumb__play-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Play button circle */
.ps-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;              /* h-16 w-16 */
  height: 4rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}
.ps-yt-thumb:hover .ps-play-btn {
  transform: scale(1.04);
}
.ps-play-icon {
  color: #fff;
  width: 1.75rem;           /* w-7 */
  height: 1.75rem;
  margin-left: 0.25rem;    /* ml-1 optical centering for triangle */
}

/* "Tap to play" bottom-left label */
.ps-tap-label {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  border-radius: var(--radius-full);
  background-color: rgba(255,255,255,0.8);
  padding: 0.375rem 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 800;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

/* YouTube iframe wrapper — fills slide after click-to-load */
.ps-yt-iframe-wrap {
  position: absolute;
  inset: 0;
}
.ps-yt-iframe-wrap[hidden] { display: none; }
.ps-yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Photo image — fills its layer */
.ps-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   Tab buttons (ভিডিও / ছবি) — below media card
   mt-4 flex flex-wrap items-center justify-center gap-2 sm:gap-3
   tab: rounded-full border px-4 py-2 sm:px-6 sm:py-2.5 text-[13px] sm:text-[14px] font-extrabold
   --------------------------------------------------------------------------- */
.ps-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .ps-tabs { gap: 0.75rem; }
}

.ps-tab {
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  padding: 0.5rem 1rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  background-color: #fff;
  color: var(--hero-muted);
  transition: transform 0.15s ease;
}
@media (min-width: 640px) {
  .ps-tab {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;    /* 14px */
  }
}
.ps-tab:hover { transform: scale(1.02); }
.ps-tab--active {
  border-color: var(--hero-accent);
  background-color: var(--hero-tint);
  color: var(--hero-ink);
}

/* ---------------------------------------------------------------------------
   Video slide selector pills
   mt-4 flex flex-wrap justify-center gap-3 min-w-[92px]
   --------------------------------------------------------------------------- */
.ps-slide-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ps-slide-pill {
  min-width: 92px;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  padding: 0.5rem 1.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  background-color: #fff;
  color: var(--hero-muted);
  transition: transform 0.15s ease;
}
@media (min-width: 640px) {
  .ps-slide-pill {
    min-width: 108px;
    font-size: 0.875rem;    /* 14px */
  }
}
.ps-slide-pill:hover { transform: scale(1.02); }
.ps-slide-pill--active {
  border-color: var(--hero-accent);
  background-color: var(--hero-accent);
  color: #fff;
}

/* Hidden state for slide pills (photo tab active) */
.ps-slide-pills--hidden {
  display: none;
}

/* ---------------------------------------------------------------------------
   RIGHT: Info card
   rounded-[24px] border p-5 sm:p-6 shadow-soft
   --------------------------------------------------------------------------- */
.ps-info-col { min-width: 0; }

.ps-info-card {
  border-radius: 24px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;         /* p-5 */
  box-shadow: var(--shadow-soft);
}
@media (min-width: 640px) {
  .ps-info-card { padding: 1.5rem; } /* sm:p-6 */
}

/* Header row — flex items-start justify-between gap-4 */
.ps-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ps-info-header__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
}
.ps-heart-icon {
  color: var(--hero-accent);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* "Slide" pill — hidden on mobile, sm:inline-flex */
.ps-slide-pill-sm {
  display: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  padding: 0.375rem 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 800;
  color: var(--hero-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .ps-slide-pill-sm { display: inline-flex; align-items: center; }
}

/* Language display — mt-5 text-center */
.ps-lang-display {
  margin-top: 1.25rem;
  text-align: center;
  min-height: 4.5rem; /* prevents layout shift during animation */
}
/* Large word — text-[30px] sm:text-[36px] font-black text-hero-accent */
.ps-lang-word {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.875rem;      /* 30px */
  font-weight: 900;
  line-height: 1;
  color: var(--hero-accent);
}
@media (min-width: 640px) {
  .ps-lang-word { font-size: 2.25rem; } /* 36px */
}
/* Language name — mt-1 text-[12px] font-bold text-hero-muted */
.ps-lang-name {
  margin-top: 0.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 700;
  color: var(--hero-muted);
}

/* Language dots — mt-4 flex items-center justify-center gap-2 */
.ps-lang-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
/* Dot — h-1.5 rounded-full transition-all */
.ps-lang-dot {
  height: 0.375rem;         /* h-1.5 = 6px */
  border-radius: var(--radius-full);
  transition: width 0.2s ease, background-color 0.2s ease;
  width: 0.375rem;          /* w-1.5 (inactive) */
  background-color: var(--hero-border);
  cursor: pointer;
  display: block;
}
.ps-lang-dot--active {
  width: 1.5rem;            /* w-6 (active) */
  background-color: var(--hero-accent);
}

/* Feature cards grid — mt-4 grid gap-3 sm:grid-cols-2 */
.ps-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
/* Feature card — rounded-[18px] border p-4 shadow-soft */
.ps-feature-card {
  border-radius: var(--radius-md);  /* 18px */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.ps-feature-card__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
}
.ps-feature-card__desc {
  margin-top: 0.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;       /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
}

/* How-it-works dark card — mt-4 rounded-[18px] border bg-hero-ink p-5 */
.ps-how-card {
  margin-top: 1rem;
  border-radius: var(--radius-md);  /* 18px */
  border: 1px solid var(--hero-border);
  background-color: var(--hero-ink);
  padding: 1.25rem;
  overflow: hidden;
}
.ps-how-card__heading {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;      /* 14px */
  font-weight: 800;
  color: var(--hero-tint);
}
/* Steps list — mt-4 space-y-3 */
.ps-how-steps {
  margin-top: 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Step row — flex items-start gap-3 */
.ps-how-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
/* Numbered circle — h-6 w-6 grid rounded-full bg-hero-accent text-[12px] font-extrabold */
.ps-step-num {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-accent);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
/* Step text */
.ps-step-text {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 600;
  color: var(--hero-tint);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Dark-mode overrides
   --------------------------------------------------------------------------- */
.theme-noir .ps-badge,
.theme-noir .ps-media-card,
.theme-noir .ps-tab,
.theme-noir .ps-slide-pill,
.theme-noir .ps-info-card,
.theme-noir .ps-feature-card {
  background-color: hsl(240 7% 13%);
}
.theme-noir .ps-tap-label {
  background-color: rgba(255,255,255,0.15);
  color: hsl(210 22% 95%);
}
.theme-noir .ps-how-card {
  background-color: hsl(240 7% 5%);
}

/* =============================================================================
   SHORTS CAROUSEL — shared component
   Used by: .projection-unboxing-carousel  and  .unboxing-carousel
   Source references: ProjectionUnboxingShortsCarousel-CC5cJetn.js
                      UnboxingShortsCarousel-DNYfTg5h.js
   ============================================================================= */

/* ── Section wrapper ── */
.projection-unboxing-carousel,
.unboxing-carousel {
  width: 100%;
}

/* ── Outer container (max-w-[1200px] px-6 py-10 / sm:px-8 sm:py-14) ── */
.shorts-carousel__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .shorts-carousel__outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}

/* ── Centered header ── */
.shorts-carousel__header {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .shorts-carousel__header {
    margin-bottom: 1.25rem;
  }
}

/* h3 — font-brand text-[26px] sm:text-[34px] font-black */
.shorts-carousel__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.625rem;  /* 26px */
  font-weight: 900;
  line-height: 1.25;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .shorts-carousel__title {
    font-size: 2.125rem; /* 34px */
  }
}

/* Subtitle — mt-2 text-[14px] font-semibold text-hero-muted */
.shorts-carousel__subtitle {
  margin-top: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;  /* 14px */
  font-weight: 600;
  color: var(--hero-muted);
}

/* ── Viewport wrap (positions arrows relative to track) ── */
.shorts-carousel__viewport-wrap {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
}

/* ── Scrollable track ──
   Three cards: on mobile → 1 visible (100% width),
   sm → 2 visible, lg → 3 visible.
   Uses CSS scroll-snap for smooth swipe.
   Scrollbar hidden.
   ── */
.shorts-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* hide scrollbar */
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 0.5rem 0.25rem 1rem; /* vertical breathing room */
}
.shorts-carousel__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ── Each item — fills 100% on mobile, 50% sm, 33.33% lg ── */
.shorts-carousel__item {
  flex: 0 0 calc(100% - 1rem);   /* mobile: ~1 card */
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 640px) {
  .shorts-carousel__item {
    flex: 0 0 calc(50% - 0.625rem);  /* sm: ~2 cards */
  }
}
@media (min-width: 1024px) {
  .shorts-carousel__item {
    flex: 0 0 calc(33.333% - 0.834rem); /* lg: 3 cards */
  }
}

/* ── Prev / Next arrows (same visual style as .gallery-arrow) ──
   Positioned absolutely outside the track:
   -left-3 sm:-left-6 and -right-3 sm:-right-6
   h-14 w-14 sm:h-16 sm:w-16   (56px / 64px)
   ── */
.shorts-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3.5rem;   /* 56px = h-14 w-14 */
  height: 3.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #ffffffcc;
  backdrop-filter: blur(4px);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--hero-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.shorts-carousel__arrow:hover {
  background-color: #fff;
  box-shadow: var(--card-glow-hover);
  transform: translateY(-50%) scale(1.05);
}
.shorts-carousel__arrow--prev {
  left: -0.75rem;  /* -left-3 */
}
.shorts-carousel__arrow--next {
  right: -0.75rem; /* -right-3 */
}
@media (min-width: 640px) {
  .shorts-carousel__arrow {
    width: 4rem;   /* 64px = h-16 w-16 */
    height: 4rem;
  }
  .shorts-carousel__arrow--prev { left: -1.5rem; }  /* sm:-left-6 */
  .shorts-carousel__arrow--next { right: -1.5rem; } /* sm:-right-6 */
}

/* ── Video card button ──
   Full width, rounded-[22px], border, bg-hero-ink shadow-soft
   Contains: 9:16 aspect-ratio inner div
   ── */
.shorts-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hero-border);
  border-radius: 22px;  /* rounded-[22px] from source */
  overflow: hidden;
  background-color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  appearance: none;  /* reset button styles */
  -webkit-appearance: none;
}
.shorts-card:hover {
  transform: scale(1.02);  /* group-hover:scale-[1.02] */
  box-shadow: var(--card-glow-hover);
}
.shorts-card:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 3px;
}

/* 9:16 inner container */
.shorts-card__inner {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
}

/* Thumbnail image — absolute inset, object-cover, opacity-90 */
.shorts-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.3s ease;
}
.shorts-card:hover .shorts-card__thumb {
  transform: scale(1.02);
}

/* Dark gradient overlay — top/bottom (matches source exactly) */
.shorts-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

/* UNBOXING badge — absolute left-4 top-4, rounded-full, accent bg */
.shorts-card__badge {
  position: absolute;
  left: 1rem;     /* left-4 */
  top: 1rem;      /* top-4 */
  padding: 0.375rem 0.75rem;  /* px-3 py-1.5 */
  border-radius: var(--radius-full);
  background-color: var(--hero-accent);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;  /* 12px */
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Centered play button wrap */
.shorts-card__play-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Circular play button — h-16 w-16 rounded-full bg-hero-accent */
.shorts-card__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;   /* h-16 w-16 = 64px */
  height: 4rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  color: #fff;
  transition: transform 0.2s ease;
  /* offset triangle icon slightly to the right (ml-1) */
  padding-left: 0.25rem;
}
.shorts-card:hover .shorts-card__play-btn {
  transform: scale(1.04);  /* group-hover:scale-[1.04] */
}

/* ── Dark-mode overrides for carousel arrows ── */
.theme-noir .shorts-carousel__arrow {
  background-color: hsl(240 7% 13% / 0.95);
  border-color: hsl(240 7% 25%);
  color: hsl(210 22% 90%);
}
.theme-noir .shorts-carousel__arrow:hover {
  background-color: hsl(240 7% 18%);
}

/* =============================================================================
   VIDEO MODAL — shared by both carousel sections
   Reuses lightbox patterns: full-screen backdrop, centered panel, close btn
   Panel: w-[92vw] max-w-[420px] / sm:max-w-[520px] / md:max-w-[600px] / lg:max-w-[680px]
   ============================================================================= */

/* ── Full-screen overlay (same as .lightbox) ── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.video-modal[hidden] {
  display: none;
}

/* Dark backdrop */
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Panel (appears above backdrop) */
.video-modal__panel {
  position: relative;
  z-index: 1;
  width: 92vw;
  max-width: 420px;
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-lg);  /* 22px */
  background-color: var(--hero-ink);
  overflow: hidden;
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.06);
}
@media (min-width: 640px) {
  .video-modal__panel { max-width: 520px; }
}
@media (min-width: 768px) {
  .video-modal__panel { max-width: 600px; }
}
@media (min-width: 1024px) {
  .video-modal__panel { max-width: 680px; }
}

/* Close button — top-right */
.video-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.25);
  background-color: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, transform 0.15s;
}
.video-modal__close:hover {
  background-color: rgba(0,0,0,0.80);
  transform: scale(1.1);
}
.video-modal__close:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 2px;
}

/* Frame wrap (provides inner padding) */
.video-modal__frame-wrap {
  padding: 0;
}

/* 9:16 aspect container — max-h-[75vh] */
.video-modal__aspect {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 75vh;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px);
  background-color: var(--hero-ink);
}
.video-modal__aspect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Modal open animation (fade+scale) ── */
@keyframes vm-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.video-modal:not([hidden]) .video-modal__panel {
  animation: vm-in 0.22s ease both;
}

/* =============================================================================
   SPECIAL OFFER SECTION
   Reference: SpecialOfferSection-Co7O-D--.js
   ============================================================================= */

/* ── Outer container (max-w-[1200px] px-6 py-10 / sm:px-8 sm:py-14) ── */
.so-outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .so-outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}

/* ── Intro header block (max-w-[900px] mx-auto, but inner max-w-[980px]) ── */
.so-intro {
  max-width: 900px;
  margin-inline: auto;
}
.so-intro__inner {
  max-width: 980px;
}

/* Emoji + heading row — flex items-center justify-start gap-2 text-left */
.so-intro__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: left;
}
.so-intro__emoji {
  font-size: 1.25rem;
  color: var(--hero-accent);
  flex-shrink: 0;
  line-height: 1;
}
/* font-brand text-[18px] sm:text-[20px] font-black text-hero-ink */
.so-intro__heading {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.125rem;   /* 18px */
  font-weight: 900;
  color: var(--hero-ink);
  line-height: 1.3;
}
@media (min-width: 640px) {
  .so-intro__heading {
    font-size: 1.25rem;  /* 20px */
  }
}

/* ── 6-chip grid (mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3) ── */
.so-chips {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .so-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .so-chips {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Individual chip card — rounded-[14px] border bg-card px-4 py-3 text-left */
.so-chip {
  border-radius: 14px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 0.75rem 1rem;    /* py-3 px-4 */
  text-align: left;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;     /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.so-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-glow-hover);
}

/* ── Main offer block (mt-7 sm:mt-10, max-w-[980px] mx-auto) ── */
.so-main {
  margin-top: 1.25rem;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .so-main {
    margin-top: 1.5rem;
  }
}

/* ── Centered sub-header ── */
.so-subheader {
  text-align: center;
}
/* font-brand text-[16px] sm:text-[18px] font-black text-hero-ink */
.so-subheader__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1rem;      /* 16px */
  font-weight: 900;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .so-subheader__title {
    font-size: 1.125rem; /* 18px */
  }
}
/* mt-2 font-brand text-[13px] sm:text-[14px] font-semibold text-hero-muted */
.so-subheader__subtitle {
  margin-top: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;  /* 13px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.6;
}
@media (min-width: 640px) {
  .so-subheader__subtitle {
    font-size: 0.875rem; /* 14px */
  }
}

/* ── Main price card ──
   relative mt-6 overflow-hidden rounded-[26px] border border-hero-border
   bg-card shadow-soft
   ── */
.so-price-card {
  position: relative;
  margin-top: 1.5rem;
  overflow: hidden;
  border-radius: 26px;         /* rounded-[26px] */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
}

/* 4px accent top bar (absolute inset-x-0 top-0 h-1 bg-hero-accent) */
.so-price-card__topbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;                  /* h-1 = 4px */
  background-color: var(--hero-accent);
}

/* Card body — grid gap-5 p-6 sm:p-8 */
.so-price-card__body {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;              /* p-6 */
  padding-top: calc(1.5rem + 4px); /* offset for topbar */
}
@media (min-width: 640px) {
  .so-price-card__body {
    padding: 2rem;              /* p-8 */
    padding-top: calc(2rem + 4px);
  }
}

/* ── Top row: price LEFT + badges RIGHT ──
   flex flex-col items-center justify-between gap-4
   sm:flex-row sm:items-end
   ── */
.so-price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) {
  .so-price-row {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* LEFT side — min-w-0, text-center sm:text-left */
.so-price-left {
  min-width: 0;
  text-align: center;
}
@media (min-width: 640px) {
  .so-price-left {
    text-align: left;
  }
}

/* Small label above price: font-brand text-[12px] font-bold text-hero-muted */
.so-price-label {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;    /* 12px */
  font-weight: 700;
  color: var(--hero-muted);
}

/* Flex wrap container for price box */
.so-price-display {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem 0.75rem;
}
@media (min-width: 640px) {
  .so-price-display {
    justify-content: flex-start;
  }
}

/* Rounded tinted price box — rounded-[16px] border bg-hero-tint px-4 py-2
   font-brand text-[42px] sm:text-[52px] font-black leading-none text-hero-accent shadow-soft */
.so-price-box {
  border-radius: 16px;
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  padding: 0.5rem 1rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 2.625rem;   /* 42px */
  font-weight: 900;
  line-height: 1;
  color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .so-price-box {
    font-size: 3.25rem;  /* 52px */
  }
}

/* ── RIGHT side: badges — flex flex-wrap items-center justify-center gap-2 sm:justify-end ── */
.so-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .so-badges {
    justify-content: flex-end;
  }
}

/* Base badge styles */
.so-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--hero-border);
  background-color: var(--hero-tint);
  white-space: nowrap;
}

/* Badge variant 1 — pill (rounded-full px-3 py-1.5 text-[12px]) */
.so-badge--pill {
  border-radius: var(--radius-full);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;    /* 12px */
  color: var(--hero-ink);
}

/* Badge variant 2 — rect (rounded-[16px] px-4 py-2 text-[14px] leading-none text-hero-accent) */
.so-badge--rect {
  border-radius: 16px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;   /* 14px */
  line-height: 1;
  color: var(--hero-accent);
  font-weight: 900;
}

/* Badge icon (h-4 w-4) */
.so-badge__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
/* Accent-colored icon (for BadgeCheck) */
.so-badge__icon--accent {
  color: var(--hero-accent);
}

/* ── Info grid — grid gap-3 sm:grid-cols-2 ── */
.so-info-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .so-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Info card — rounded-[18px] border bg-card p-4 shadow-soft */
.so-info-card {
  border-radius: 18px;   /* rounded-[18px] */
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.so-info-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-glow-hover);
}

/* Info card title — font-brand text-[13px] font-extrabold text-hero-ink */
.so-info-card__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;  /* 13px */
  font-weight: 800;
  color: var(--hero-ink);
}

/* Info card desc — mt-1 font-brand text-[12px] font-semibold text-hero-muted */
.so-info-card__desc {
  margin-top: 0.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;    /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.5;
}

/* ── Dark-mode overrides ── */
.theme-noir .so-chip,
.theme-noir .so-price-card,
.theme-noir .so-info-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .so-intro__heading,
.theme-noir .so-subheader__title,
.theme-noir .so-chip,
.theme-noir .so-info-card__title {
  color: hsl(210 22% 92%);
}
.theme-noir .so-subheader__subtitle,
.theme-noir .so-info-card__desc,
.theme-noir .so-price-label {
  color: hsl(215 14% 60%);
}
.theme-noir .so-badge {
  background-color: hsl(240 7% 18%);
  border-color: hsl(240 7% 28%);
}
.theme-noir .so-badge--pill {
  color: hsl(210 22% 88%);
}
.theme-noir .so-price-box {
  background-color: hsl(240 7% 10%);
  border-color: hsl(240 7% 22%);
}

/* =============================================================================
   DELIVERY & ORDER SECTION
   Reference: DeliveryAndOrderSection-Cu9Hn8IA.js
   ============================================================================= */

/* ── Outer container (max-w-[1200px] px-6 py-10 / sm:px-8 sm:py-14) ── */
.do-outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .do-outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}

/* ── Inner (max-w-[980px] mx-auto) ── */
.do-inner {
  max-width: 980px;
  margin-inline: auto;
}

/* ── Single centered card — overflow-hidden rounded-[26px] border bg-card shadow-soft ── */
.do-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
}

/* Card body — p-6 text-center / sm:p-8 */
.do-card__body {
  padding: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .do-card__body {
    padding: 2rem;
  }
}

/* ── Icon badge — mx-auto h-10 w-10 grid place-items-center rounded-[12px]
   bg-hero-tint text-hero-accent shadow-soft ── */
.do-icon-badge {
  display: grid;
  place-items: center;
  width: 2.5rem;       /* h-10 w-10 = 40px */
  height: 2.5rem;
  border-radius: 12px; /* rounded-[12px] */
  background-color: var(--hero-tint);
  color: var(--hero-accent);
  box-shadow: var(--shadow-soft);
  margin-inline: auto;
}

/* ── Heading — mt-3 font-brand text-[22px] sm:text-[26px] font-black text-hero-ink ── */
.do-heading {
  margin-top: 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.375rem;   /* 22px */
  font-weight: 900;
  line-height: 1.25;
  color: var(--hero-ink);
}
@media (min-width: 640px) {
  .do-heading {
    font-size: 1.625rem; /* 26px */
  }
}

/* ── Subtitle — mt-1 font-brand text-[12px] font-semibold text-hero-muted ── */
.do-subtitle {
  margin-top: 0.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;   /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
  line-height: 1.6;
}

/* ── Button stack — mt-6 grid gap-3 ── */
.do-buttons {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

/* ── Shared button base ──
   h-12 w-full rounded-[14px] font-brand text-[14px] font-extrabold
   inline-flex items-center justify-center gap-2
   ── */
.do-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;          /* h-12 = 48px */
  border-radius: 14px;   /* rounded-[14px] */
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;   /* 14px */
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.do-btn:hover {
  transform: translateY(-1px);
}

/* PRIMARY — filled accent bg, white text */
.do-btn--primary {
  background-color: var(--hero-accent);
  color: #fff;
  border: none;
  box-shadow: var(--button-glow);
}
.do-btn--primary:hover {
  box-shadow: var(--button-glow-hover);
  opacity: 0.92;
}
.do-btn--primary:active {
  transform: translateY(0);
}

/* SECONDARY — outline variant, transparent bg, ink text */
.do-btn--outline {
  background-color: transparent;
  color: var(--hero-ink);
  border: 1px solid var(--hero-border);
  box-shadow: var(--shadow-soft);
}
.do-btn--outline:hover {
  background-color: var(--hero-tint);
  border-color: var(--hero-accent);
  box-shadow: var(--card-glow-hover);
}

/* Button icon (h-4 w-4) */
.do-btn__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ── Muted caption — mt-3 font-brand text-[12px] font-semibold text-hero-muted ── */
.do-caption {
  margin-top: 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;   /* 12px */
  font-weight: 600;
  color: var(--hero-muted);
}

/* ── Dark-mode overrides ── */
.theme-noir .do-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .do-heading {
  color: hsl(210 22% 92%);
}
.theme-noir .do-subtitle,
.theme-noir .do-caption {
  color: hsl(215 14% 60%);
}
.theme-noir .do-icon-badge {
  background-color: hsl(240 7% 18%);
}
.theme-noir .do-btn--outline {
  color: hsl(210 22% 88%);
  border-color: hsl(240 7% 30%);
  background-color: transparent;
}
.theme-noir .do-btn--outline:hover {
  background-color: hsl(240 7% 18%);
  border-color: var(--hero-accent);
}

/* =============================================================================
   CRO-3: Authentic Courier Partner Logos Styles
   ============================================================================= */
.courier-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.65rem;
  width: 100%;
}
.courier-row__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hero-muted);
}
.courier-row__label-icon {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--hero-accent);
  flex-shrink: 0;
}
.courier-row__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.courier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  min-height: 38px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.courier-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.12);
  border-color: var(--hero-accent);
}
.courier-badge__img {
  height: 22px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}
.courier-badge__img--steadfast {
  height: 24px;
}
.courier-badge__img--pathao {
  height: 23px;
}
.courier-badge__img--redx {
  height: 21px;
}

/* Dark mode - Keep crisp white pill background so official brand logos stay 100% authentic and vibrant */
.theme-noir .courier-badge {
  background-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.45);
}
.theme-noir .courier-badge:hover {
  border-color: var(--hero-accent);
  box-shadow: 0 8px 20px -2px rgba(230, 0, 90, 0.3);
}

/* =============================================================================
   CRO-2: Trust Badges & Simple Policy Footer Styles
   ============================================================================= */
.trust-badge-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--hero-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.trust-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-tint);
  border: 1px solid var(--hero-border);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.775rem;
  font-weight: 800;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.trust-badge-pill:hover {
  transform: translateY(-1px);
}
.trust-badge-pill__icon {
  color: var(--hero-accent);
  flex-shrink: 0;
}
.theme-noir .trust-badge-pill {
  background-color: hsl(240 7% 16%);
  border-color: hsl(240 7% 28%);
  color: hsl(210 22% 90%);
}

/* Policy Footer */
.site-footer {
  border-top: 1px solid var(--hero-border);
  padding: 1.75rem 1.5rem 1.75rem;
  background-color: var(--hero-bg);
}
.site-footer__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.site-footer__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--hero-ink);
}
.site-footer__tagline {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.825rem;
  color: var(--hero-muted);
  margin-top: 0.2rem;
}
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--hero-muted);
}
.site-footer__link {
  color: var(--hero-muted);
  transition: color 0.15s ease;
}
.site-footer__link:hover {
  color: var(--hero-accent);
  text-decoration: underline;
}
.site-footer__sep {
  color: var(--hero-border);
}
.site-footer__copy {
  font-size: 0.75rem;
  color: var(--hero-muted);
}
.theme-noir .site-footer {
  border-color: hsl(240 7% 22%);
}
.theme-noir .site-footer__title {
  color: hsl(210 22% 92%);
}
.theme-noir .site-footer__tagline,
.theme-noir .site-footer__copy {
  color: hsl(215 14% 60%);
}
.theme-noir .site-footer__link {
  color: hsl(215 14% 70%);
}
.theme-noir .site-footer__link:hover {
  color: var(--hero-accent);
}

/* =============================================================================
   CRO-1: Customer Reviews / Testimonials Section Styles
   ============================================================================= */
.reviews {
  width: 100%;
}
.reviews__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .reviews__outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}
.reviews__inner {
  max-width: 980px;
  margin-inline: auto;
}
.reviews__header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.reviews__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
}
.reviews__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--hero-ink);
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .reviews__title {
    font-size: 2rem;
  }
}
.reviews__subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  color: var(--hero-muted);
  margin-top: 0.35rem;
}
.reviews__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.review-card {
  border-radius: 20px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-glow-hover);
}
.review-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--hero-tint);
  border: 1px dashed var(--hero-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hero-muted);
  flex-shrink: 0;
  text-align: center;
}
.review-card__user {
  flex: 1;
  min-width: 0;
}
.review-card__name {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
}
.review-card__city {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  color: var(--hero-muted);
}
.review-card__badge {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: hsl(142 76% 94%);
  color: hsl(142 76% 28%);
  white-space: nowrap;
}
.review-card__stars {
  color: #f59e0b;
  font-size: 1rem;
  margin: 0.6rem 0 0.35rem;
  letter-spacing: 2px;
}
.review-card__quote {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--hero-ink);
  flex: 1;
}
.review-card__footer {
  margin-top: 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--hero-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  color: var(--hero-muted);
}
.reviews__note {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--hero-muted);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}
.theme-noir .reviews__badge,
.theme-noir .review-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .reviews__title,
.theme-noir .review-card__name,
.theme-noir .review-card__quote {
  color: hsl(210 22% 92%);
}
.theme-noir .reviews__subtitle,
.theme-noir .review-card__city,
.theme-noir .review-card__footer,
.theme-noir .reviews__note {
  color: hsl(215 14% 60%);
}
.theme-noir .review-card__avatar {
  background-color: hsl(240 7% 18%);
  border-color: hsl(240 7% 30%);
  color: hsl(215 14% 60%);
}
.theme-noir .review-card__footer {
  border-color: hsl(240 7% 22%);
}
.theme-noir .review-card__badge {
  background-color: hsl(142 50% 18%);
  color: hsl(142 70% 65%);
}

/* =============================================================================
   CRO-4: Live Purchase Notification Popup Styles
   ============================================================================= */
.purchase-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 1.25rem;
  z-index: 980;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 330px;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hero-border);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.18);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.purchase-toast[hidden] {
  display: none !important;
}
@media (min-width: 768px) {
  .purchase-toast {
    bottom: 1.5rem;
    left: 1.5rem;
  }
}
.purchase-toast--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.purchase-toast--out {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
}
.purchase-toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--hero-muted);
  cursor: pointer;
  background: none;
  border: none;
}
.purchase-toast__close:hover {
  color: var(--hero-ink);
}
.purchase-toast__icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: var(--hero-tint);
  border: 1px solid var(--hero-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.purchase-toast__body {
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}
.purchase-toast__title {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--hero-ink);
}
.purchase-toast__name {
  font-weight: 800;
}
.purchase-toast__city {
  color: var(--hero-muted);
  font-weight: 600;
  margin-left: 2px;
}
.purchase-toast__sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.725rem;
  color: var(--hero-muted);
  margin-top: 2px;
}
.purchase-toast__dot {
  font-size: 0.6rem;
  color: var(--hero-border);
}
.purchase-toast__time {
  color: var(--hero-accent);
  font-weight: 700;
}
.purchase-toast__demo-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--hero-muted);
  margin-top: 3px;
  opacity: 0.75;
}
.theme-noir .purchase-toast {
  background-color: rgba(26, 26, 32, 0.94);
  border-color: hsl(240 7% 25%);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
}
.theme-noir .purchase-toast__icon-wrap {
  background-color: hsl(240 7% 20%);
  border-color: hsl(240 7% 30%);
}
.theme-noir .purchase-toast__title {
  color: hsl(210 22% 92%);
}
.theme-noir .purchase-toast__close {
  color: hsl(215 14% 60%);
}

/* =============================================================================
   CRO-5: Live Chat Bubble Popup & WhatsApp Floating Button
   ============================================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 990;
}
@media (max-width: 768px) {
  .whatsapp-float {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .whatsapp-float {
    /* On desktop, keep purchase-toast left and whatsapp-float elevated or grouped */
    bottom: 5.5rem;
    left: 1.5rem;
  }
}
.whatsapp-float__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-full);
  background-color: #25D366;
  color: #fff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.whatsapp-float__btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -6px rgba(37, 211, 102, 0.65);
}
.whatsapp-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Chat bubble */
.whatsapp-chat-bubble {
  position: fixed;
  bottom: 4.75rem;
  left: 1.25rem;
  z-index: 995;
  background-color: #fff;
  border-radius: 18px;
  border: 1px solid var(--hero-border);
  box-shadow: 0 14px 38px -10px rgba(0, 0, 0, 0.22);
  padding: 0.85rem 1rem;
  max-width: 290px;
  animation: bubble-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}
@media (min-width: 768px) {
  .whatsapp-chat-bubble {
    bottom: 9rem;
    left: 1.5rem;
  }
}
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.whatsapp-chat-bubble__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--hero-muted);
  cursor: pointer;
  background: none;
  border: none;
}
.whatsapp-chat-bubble__close:hover {
  color: var(--hero-ink);
}
.whatsapp-chat-bubble__link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.whatsapp-chat-bubble__avatar {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.whatsapp-chat-bubble__content {
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}
.whatsapp-chat-bubble__msg {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hero-ink);
}
.whatsapp-chat-bubble__cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #25D366;
}
.theme-noir .whatsapp-chat-bubble {
  background-color: hsl(240 7% 14%);
  border-color: hsl(240 7% 25%);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55);
}
.theme-noir .whatsapp-chat-bubble__msg {
  color: hsl(210 22% 92%);
}
.theme-noir .whatsapp-chat-bubble__close {
  color: hsl(215 14% 60%);
}

/* Theme Switcher Widget */
.theme-switcher {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 990;
}
.theme-switcher__inner {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  padding: 0.25rem;
  box-shadow: var(--shadow-soft);
}
.theme-btn {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hero-muted);
  transition: all 0.15s ease;
  cursor: pointer;
}
.theme-btn--active {
  background-color: var(--hero-accent);
  color: #fff;
  box-shadow: var(--button-glow);
}
.theme-noir .theme-switcher__inner {
  background-color: hsl(240 7% 14%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .theme-btn {
  color: hsl(215 14% 65%);
}
.theme-noir .theme-btn--active {
  background-color: var(--hero-accent);
  color: #fff;
}

/* =============================================================================
   CRO-7: "কেন আমাদের থেকে কিনবেন?" Differentiator Section Styles
   ============================================================================= */
.why-us {
  width: 100%;
}
.why-us__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .why-us__outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}
.why-us__inner {
  max-width: 980px;
  margin-inline: auto;
}
.why-us__header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.why-us__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
}
.why-us__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--hero-ink);
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .why-us__title {
    font-size: 2.125rem;
  }
}
.why-us__subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  color: var(--hero-muted);
  margin-top: 0.35rem;
}
.why-us__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.why-us__card {
  border-radius: 20px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-us__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-glow-hover);
}
.why-us__icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.why-us__icon-box--green {
  background-color: hsl(142 76% 94%);
  color: hsl(142 76% 30%);
}
.why-us__icon-box--pink {
  background-color: hsl(330 100% 95%);
  color: var(--hero-accent);
}
.why-us__icon-box--amber {
  background-color: hsl(38 92% 93%);
  color: hsl(38 92% 35%);
}
.why-us__icon-box--blue {
  background-color: hsl(210 100% 94%);
  color: hsl(210 100% 45%);
}
.why-us__card-content {
  flex: 1;
  min-width: 0;
}
.why-us__card-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
}
.why-us__card-desc {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.85rem;
  color: var(--hero-muted);
  line-height: 1.55;
  margin-top: 0.25rem;
}
.theme-noir .why-us__badge,
.theme-noir .why-us__card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .why-us__title,
.theme-noir .why-us__card-title {
  color: hsl(210 22% 92%);
}
.theme-noir .why-us__subtitle,
.theme-noir .why-us__card-desc {
  color: hsl(215 14% 60%);
}
.theme-noir .why-us__icon-box--green {
  background-color: hsl(142 50% 18%);
  color: hsl(142 70% 65%);
}
.theme-noir .why-us__icon-box--pink {
  background-color: hsl(339 60% 20%);
  color: hsl(339 100% 75%);
}
.theme-noir .why-us__icon-box--amber {
  background-color: hsl(38 60% 18%);
  color: hsl(38 90% 70%);
}
.theme-noir .why-us__icon-box--blue {
  background-color: hsl(210 60% 20%);
  color: hsl(210 90% 70%);
}

/* =============================================================================
   CRO-9: Package Tiers Selector (Basic / Standard / Premium)
   ============================================================================= */
.package-tiers {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .package-tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tier-card {
  position: relative;
  border-radius: 18px;
  border: 2px solid var(--hero-border);
  background-color: #fff;
  padding: 1.15rem 1rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}
.tier-card:hover {
  border-color: var(--hero-accent);
  transform: translateY(-2px);
  box-shadow: var(--card-glow-hover);
}
.tier-card--active {
  border-color: var(--hero-accent);
  background-color: var(--hero-tint);
  box-shadow: 0 10px 26px -8px hsl(339 100% 59% / 0.25);
}
.tier-card--popular {
  border-color: var(--hero-accent);
}
.tier-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--hero-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--button-glow);
}
.tier-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tier-card__radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--hero-border);
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.tier-card--active .tier-card__radio {
  border-color: var(--hero-accent);
  background: radial-gradient(circle, var(--hero-accent) 45%, transparent 50%);
}
.tier-card__name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--hero-ink);
}
.tier-card__desc {
  font-size: 0.775rem;
  color: var(--hero-muted);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.tier-card__price-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.tier-card__anchor {
  font-size: 0.775rem;
  color: var(--hero-muted);
}
.tier-card__price {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--hero-accent);
  line-height: 1;
}
.theme-noir .tier-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .tier-card--active {
  background-color: hsl(240 7% 17%);
  border-color: var(--hero-accent);
}
.theme-noir .tier-card__name {
  color: hsl(210 22% 92%);
}
.theme-noir .tier-card__desc,
.theme-noir .tier-card__anchor {
  color: hsl(215 14% 60%);
}

/* =============================================================================
   CRO-8: Price Anchoring Display Styles
   ============================================================================= */
.so-price-anchor-tag {
  display: block;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hero-muted);
  margin-bottom: 0.2rem;
}
.so-price-strikethrough {
  text-decoration: line-through;
  opacity: 0.85;
}
.so-price-main-line {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.so-price-today-tag {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--hero-ink);
  white-space: nowrap;
}
.so-price-amount {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 2.375rem;
  font-weight: 900;
  color: var(--hero-accent);
  line-height: 1;
}
@media (min-width: 640px) {
  .so-price-amount {
    font-size: 3rem;
  }
}
.theme-noir .so-price-today-tag {
  color: hsl(210 22% 88%);
}

/* =============================================================================
   CRO-10: Bundle Discount Note
   ============================================================================= */
.bundle-discount-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background-color: hsl(38 100% 95%);
  border: 1px dashed hsl(38 90% 70%);
  color: hsl(38 90% 28%);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.775rem;
  font-weight: 800;
}
.bundle-discount-note__icon {
  font-size: 0.95rem;
}
.theme-noir .bundle-discount-note {
  background-color: hsl(38 60% 15%);
  border-color: hsl(38 60% 30%);
  color: hsl(38 90% 75%);
}

/* =============================================================================
   CRO-6: Support Hours Line
   ============================================================================= */
.support-hours-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hero-muted);
}
.support-hours-note__icon {
  color: #25D366;
  flex-shrink: 0;
}
.theme-noir .support-hours-note {
  color: hsl(215 14% 65%);
}

/* =============================================================================
   CRO-12: Problem-Agitate-Solve (PAS) Intro Block Styles
   ============================================================================= */
.pas-intro {
  width: 100%;
}
.pas-intro__outer {
  max-width: 1000px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .pas-intro__outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}
.pas-intro__card {
  border-radius: 24px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) {
  .pas-intro__card {
    padding: 1.75rem 2rem;
  }
}
.pas-intro__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-tint);
  border: 1px solid var(--hero-border);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--hero-accent);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.pas-intro__heading {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--hero-ink);
  max-width: 720px;
  margin-inline: auto;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .pas-intro__heading {
    font-size: 2.125rem;
  }
}
.pas-intro__body {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--hero-muted);
  max-width: 680px;
  margin: 1rem auto 1.5rem;
}
@media (min-width: 640px) {
  .pas-intro__body {
    font-size: 1.0625rem;
  }
}
.pas-intro__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}
.pas-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.825rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background-color: hsl(0 0% 96%);
  color: hsl(0 0% 40%);
}
.pas-highlight--accent {
  background-color: hsl(330 100% 96%);
  border: 1px solid var(--hero-border);
  color: var(--hero-accent);
}
.theme-noir .pas-intro__card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .pas-intro__heading {
  color: hsl(210 22% 92%);
}
.theme-noir .pas-intro__body {
  color: hsl(215 14% 65%);
}
.theme-noir .pas-highlight {
  background-color: hsl(240 7% 18%);
  color: hsl(215 14% 65%);
}
.theme-noir .pas-highlight--accent {
  background-color: hsl(339 60% 18%);
  border-color: hsl(339 60% 30%);
  color: hsl(339 100% 75%);
}

/* =============================================================================
   CRO-15: Gift Message Card Preview Mockup Styles
   ============================================================================= */
.gift-card-preview {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.gift-card-preview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  width: 100%;
}
.gift-card-mockup {
  width: 100%;
  background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
  border: 2px dashed hsl(339 60% 82%);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.08);
  transform: rotate(-0.8deg);
  transition: transform 0.2s ease;
}
.gift-card-mockup:hover {
  transform: rotate(0deg) scale(1.02);
}
.gift-card-mockup__ribbon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.gift-card-mockup__msg {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--hero-accent);
  letter-spacing: 0.01em;
}
.gift-card-mockup__sub {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.725rem;
  color: var(--hero-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gift-card-preview__caption {
  margin-top: 0.65rem;
  text-align: center;
}
.gift-card-preview__tag {
  display: inline-block;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.675rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background-color: hsl(339 100% 95%);
  color: var(--hero-accent);
}
.gift-card-preview__note {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  color: var(--hero-muted);
  margin-top: 0.2rem;
}
.theme-noir .gift-card-mockup {
  background: linear-gradient(135deg, hsl(240 7% 15%) 0%, hsl(240 7% 13%) 100%);
  border-color: hsl(339 40% 35%);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}
.theme-noir .gift-card-preview__tag {
  background-color: hsl(339 50% 20%);
  color: hsl(339 100% 75%);
}

/* =============================================================================
   CRO-11: Add-on Cross-Sell Styles
   ============================================================================= */
.addon-cross-sell {
  margin-top: 1.25rem;
  width: 100%;
}
.addon-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background-color: var(--hero-tint);
  border: 1.5px dashed var(--hero-accent);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}
.addon-card:hover {
  background-color: #fff;
  box-shadow: var(--shadow-soft);
}
.addon-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.addon-card__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--hero-accent);
  display: grid;
  place-items: center;
  background-color: #fff;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.addon-card__check {
  width: 14px;
  height: 14px;
  color: #fff;
  display: none;
}
.addon-card__input:checked + .addon-card__box {
  background-color: var(--hero-accent);
}
.addon-card__input:checked + .addon-card__box .addon-card__check {
  display: block;
}
.addon-card__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.addon-card__title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--hero-ink);
}
.addon-card__desc {
  font-size: 0.725rem;
  color: var(--hero-muted);
}
.addon-card__tag {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--hero-muted);
  white-space: nowrap;
}
.theme-noir .addon-card {
  background-color: hsl(240 7% 15%);
  border-color: var(--hero-accent);
}
.theme-noir .addon-card:hover {
  background-color: hsl(240 7% 18%);
}
.theme-noir .addon-card__title {
  color: hsl(210 22% 92%);
}
.theme-noir .addon-card__desc {
  color: hsl(215 14% 65%);
}
.theme-noir .addon-card__box {
  background-color: hsl(240 7% 12%);
}
.theme-noir .addon-card__tag {
  background-color: hsl(240 7% 22%);
  color: hsl(215 14% 65%);
}

/* =============================================================================
   CRO-13: Frequently Asked Questions (FAQ) Section Styles
   ============================================================================= */
.faq-section {
  width: 100%;
}
.faq-section__outer {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
  .faq-section__outer {
    padding: 1.75rem 1.5rem 2rem;
  }
}
.faq-section__inner {
  max-width: 850px;
  margin-inline: auto;
}
.faq-section__header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.faq-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hero-border);
  background-color: #fff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hero-ink);
  box-shadow: var(--shadow-soft);
}
.faq-section__title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--hero-ink);
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .faq-section__title {
    font-size: 2.125rem;
  }
}
.faq-section__subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  color: var(--hero-muted);
  margin-top: 0.35rem;
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  border-radius: 16px;
  border: 1px solid var(--hero-border);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--hero-accent);
  box-shadow: var(--card-glow-hover);
}
.faq-item__question {
  padding: 1.15rem 1.25rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hero-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-item__question::-webkit-details-marker {
  display: none;
}
.faq-item__chevron {
  font-size: 1.15rem;
  color: var(--hero-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--hero-accent);
}
.faq-item__answer {
  padding: 0 1.25rem 1.15rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--hero-muted);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 0.75rem;
}
.faq-item__answer p {
  color: var(--hero-muted);
}
.faq-item__answer strong {
  color: var(--hero-ink);
}
.faq-link {
  color: var(--hero-accent);
  font-weight: 700;
  text-decoration: underline;
}
.theme-noir .faq-section__badge,
.theme-noir .faq-item {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .faq-section__title,
.theme-noir .faq-item__question,
.theme-noir .faq-item__answer strong {
  color: hsl(210 22% 92%);
}
.theme-noir .faq-section__subtitle,
.theme-noir .faq-item__answer,
.theme-noir .faq-item__answer p {
  color: hsl(215 14% 65%);
}
.theme-noir .faq-item__answer {
  border-top-color: hsl(240 7% 20%);
}

/* =============================================================================
   CRO-14: WhatsApp Confirmation Expectation Note Styles
   ============================================================================= */
.do-confirm-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--hero-muted);
  padding: 0.25rem 0.5rem;
  text-align: center;
}
.do-confirm-note__icon {
  color: #25D366;
  flex-shrink: 0;
}
.theme-noir .do-confirm-note {
  color: hsl(215 14% 65%);
}

/* =============================================================================
   CRO-16: Sticky Mobile Bottom Bar Styles
   ============================================================================= */
.mobile-sticky-bar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--hero-border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    display: block;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .mobile-sticky-bar--visible {
    transform: translateY(0);
  }
  .mobile-sticky-bar__inner {
    max-width: 500px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .mobile-sticky-bar__price-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .mobile-sticky-bar__label {
    font-family: "Hind Siliguri", ui-sans-serif, system-ui;
    font-size: 0.725rem;
    font-weight: 600;
    color: var(--hero-muted);
  }
  .mobile-sticky-bar__price {
    font-family: "Hind Siliguri", ui-sans-serif, system-ui;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--hero-accent);
  }
  .mobile-sticky-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, hsl(339 90% 55%) 0%, hsl(339 100% 45%) 100%);
    color: #fff;
    font-family: "Hind Siliguri", ui-sans-serif, system-ui;
    font-size: 0.925rem;
    font-weight: 800;
    box-shadow: 0 4px 14px -2px rgba(230, 0, 90, 0.4);
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  .mobile-sticky-bar__btn:active {
    transform: scale(0.97);
  }
  /* Dark mode sticky bar */
  .theme-noir .mobile-sticky-bar {
    background-color: rgba(24, 24, 28, 0.96);
    border-top-color: hsl(240 7% 25%);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
  }
  .theme-noir .mobile-sticky-bar__label {
    color: hsl(215 14% 65%);
  }
}

/* =============================================================================
   CRO-19: Hero Subtle Scroll Down Hint Styles
   ============================================================================= */
.hero-scroll-hint {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-bottom: 0.5rem;
}
.hero-scroll-hint__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--hero-muted);
  text-decoration: none;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8rem;
  font-weight: 700;
  transition: color 0.2s ease, transform 0.2s ease;
}
.hero-scroll-hint__link:hover {
  color: var(--hero-accent);
  transform: translateY(2px);
}
.hero-scroll-hint__icon {
  animation: bounce-subtle 2s infinite ease-in-out;
}
@keyframes bounce-subtle {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(3px);
  }
}
.theme-noir .hero-scroll-hint__link {
  color: hsl(215 14% 60%);
}
.theme-noir .hero-scroll-hint__link:hover {
  color: var(--hero-accent);
}

/* =============================================================================
   CRO-22: Desktop Exit-Intent Modal Popup Styles
   ============================================================================= */
.exit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.exit-modal-overlay--open {
  opacity: 1;
  pointer-events: auto;
}
.exit-modal-card {
  max-width: 460px;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--hero-border);
  border-radius: 24px;
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.28);
  position: relative;
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-modal-overlay--open .exit-modal-card {
  transform: scale(1);
}
.exit-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--hero-tint);
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--hero-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.exit-modal-close:hover {
  background-color: var(--hero-border);
  color: var(--hero-ink);
}
.exit-modal-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  background-color: var(--hero-tint);
  border: 1px solid var(--hero-border);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--hero-accent);
  margin-bottom: 1rem;
}
.exit-modal-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--hero-ink);
  line-height: 1.3;
}
.exit-modal-body {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.95rem;
  color: var(--hero-muted);
  line-height: 1.6;
  margin: 0.85rem 0 1.5rem;
}
.exit-modal-body strong {
  color: var(--hero-ink);
}
.exit-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.exit-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.925rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.exit-modal-btn--whatsapp {
  background-color: #25D366;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px -2px rgba(37, 211, 102, 0.4);
}
.exit-modal-btn--whatsapp:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.exit-modal-btn--dismiss {
  background: none;
  border: none;
  color: var(--hero-muted);
  font-size: 0.825rem;
  font-weight: 600;
}
.exit-modal-btn--dismiss:hover {
  color: var(--hero-ink);
  text-decoration: underline;
}
.exit-modal-footnote {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--hero-muted);
  margin-top: 1rem;
}
.theme-noir .exit-modal-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 25%);
}
.theme-noir .exit-modal-title,
.theme-noir .exit-modal-body strong {
  color: hsl(210 22% 92%);
}
.theme-noir .exit-modal-body,
.theme-noir .exit-modal-close {
  color: hsl(215 14% 65%);
}
.theme-noir .exit-modal-close {
  background-color: hsl(240 7% 18%);
}

/* =============================================================================
   CRO-23: Checkout Page Transition Animation Loader
   ============================================================================= */
.checkout-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 17, 23, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-loader-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.checkout-loader-card {
  width: 100%;
  max-width: 360px;
  background-color: #ffffff;
  border: 1px solid var(--hero-border);
  border-radius: 24px;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.4), 0 0 40px -8px rgba(244, 63, 94, 0.3);
  transform: scale(0.92) translateY(14px);
  transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.checkout-loader-overlay--active .checkout-loader-card {
  transform: scale(1) translateY(0);
}

.checkout-loader-icon-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-loader-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.4) 0%, transparent 70%);
  animation: checkout-pulse-glow 1.5s ease-in-out infinite;
}

.checkout-loader-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(244, 63, 94, 0.16);
  border-top-color: var(--hero-accent);
  border-right-color: var(--hero-accent);
  animation: checkout-ring-spin 0.85s linear infinite;
}

.checkout-loader-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hero-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-accent);
  animation: checkout-icon-bounce 1.2s ease-in-out infinite;
}

.checkout-loader-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--hero-ink);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.checkout-loader-desc {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hero-muted);
  margin: 0 0 1.25rem;
  line-height: 1.45;
}

.checkout-loader-progress-track {
  width: 100%;
  height: 6px;
  background-color: var(--hero-tint);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.15rem;
}

.checkout-loader-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ec4899, #f43f5e, #fb7185);
  border-radius: 999px;
  transition: width 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.checkout-loader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 700;
  color: #10b981;
  background-color: rgba(16, 185, 129, 0.08);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* Dark Mode Overrides */
.theme-noir .checkout-loader-card {
  background-color: hsl(240 7% 13%);
  border-color: hsl(240 7% 24%);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 40px -6px rgba(244, 63, 94, 0.25);
}

.theme-noir .checkout-loader-title {
  color: hsl(210 22% 95%);
}

.theme-noir .checkout-loader-desc {
  color: hsl(240 5% 65%);
}

.theme-noir .checkout-loader-icon {
  background: rgba(244, 63, 94, 0.15);
}

.theme-noir .checkout-loader-progress-track {
  background-color: hsl(240 7% 20%);
}

/* Keyframes */
@keyframes checkout-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes checkout-pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

@keyframes checkout-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Button Loading State */
.do-btn--loading {
  pointer-events: none;
  opacity: 0.92;
  cursor: wait;
}

.do-btn__spinner {
  animation: checkout-ring-spin 0.75s linear infinite;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

/* =============================================================================
   CRO URGENCY & SCARCITY STYLES
   1. Live Viewers Badge
   2. Delivery Promise Banner
   3. Stock Scarcity Counter Card
   4. Special Offer Urgency Strip
   ============================================================================= */

/* ── 1. Live Viewers Badge ─────────────────────────────────────────────── */
.live-viewers-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(236, 72, 153, 0.12));
  border: 1px solid rgba(244, 63, 94, 0.22);
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(340 82% 40%);
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 10px -3px rgba(244, 63, 94, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  width: fit-content;
}

.live-viewers-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -3px rgba(244, 63, 94, 0.25);
}

.live-viewers-indicator {
  position: relative;
  display: inline-flex;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.live-viewers-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #f43f5e;
  animation: live-ping-anim 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}

.live-viewers-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #e11d48;
}

.live-viewers-text strong {
  color: #e11d48;
  font-weight: 700;
  font-size: 0.92rem;
}

@keyframes live-ping-anim {
  0% { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ── 2. Delivery Promise Banner ─────────────────────────────────────────── */
.delivery-promise-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.5rem 0.9rem;
  background: rgba(244, 63, 94, 0.06);
  border: 1px dashed rgba(244, 63, 94, 0.3);
  border-radius: var(--radius-sm);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.85rem;
  color: var(--hero-ink);
  line-height: 1.4;
  text-align: center;
}

.delivery-promise-icon {
  font-size: 1rem;
  flex-shrink: 0;
  animation: delivery-truck-hop 2.4s ease-in-out infinite;
}

.delivery-highlight {
  color: #e11d48;
  font-weight: 700;
  text-decoration: underline dotted;
}

@keyframes delivery-truck-hop {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* ── 3. Stock Scarcity Counter Card ────────────────────────────────────── */
.stock-counter-card {
  margin: 0.85rem 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.9), rgba(255, 241, 242, 0.95));
  border: 1.5px solid rgba(244, 63, 94, 0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px -6px rgba(244, 63, 94, 0.18);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}

.stock-counter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

.stock-counter-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: hsl(340 70% 25%);
}

.stock-counter-icon {
  font-size: 1.1rem;
  animation: flame-pulse 1.4s ease-in-out infinite alternate;
}

.stock-counter-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: #e11d48;
  padding: 0 0.15rem;
}

.stock-counter-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f43f5e;
  color: #ffffff;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px -2px rgba(244, 63, 94, 0.5);
  animation: badge-subtle-glow 2s ease-in-out infinite;
}

.stock-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.stock-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #f59e0b, #f43f5e, #e11d48);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.stock-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progress-shimmer 2s infinite linear;
}

@keyframes flame-pulse {
  0% { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.18) rotate(4deg); }
}

@keyframes badge-subtle-glow {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 4. Synchronized Special Offer Urgency Strip ────────────────────────── */
.so-urgency-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.85rem 0 1.15rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.08), rgba(251, 113, 133, 0.12));
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--radius-md);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.86rem;
  color: var(--hero-ink);
  flex-wrap: wrap;
}

.so-urgency-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.so-urgency-left strong {
  color: #e11d48;
  font-size: 0.95rem;
}

.so-urgency-fire {
  font-size: 1.1rem;
  animation: flame-pulse 1.4s ease-in-out infinite alternate;
}

.so-urgency-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: hsl(215 14% 35%);
}

.live-viewers-ping-small {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* =============================================================================
   CRO-24: BEFORE / AFTER COMICS EMOTION SECTION STYLES
   ============================================================================= */
.emotion-comparison {
  padding: 3.5rem var(--container-px);
  position: relative;
}

@media (max-width: 768px) {
  .emotion-comparison {
    display: none !important;
  }
}

.ec-outer {
  max-width: var(--container-max);
  margin: 0 auto;
}

.ec-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2.5rem;
}

.ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(244, 63, 94, 0.1);
  color: var(--hero-accent);
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.ec-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.ec-subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1rem;
  color: var(--hero-muted);
  line-height: 1.5;
}

.ec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
}

@media (max-width: 860px) {
  .ec-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.ec-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ec-card:hover {
  transform: translateY(-5px);
}

/* Boring Card (Left) */
.ec-card--boring {
  border: 2px solid hsl(210 20% 90%);
  background: linear-gradient(180deg, #ffffff, #fafafa);
}

.ec-card--boring:hover {
  box-shadow: 0 16px 36px -18px rgba(100, 116, 139, 0.2);
}

/* Wow Card (Right) */
.ec-card--wow {
  border: 2px solid rgba(244, 63, 94, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 241, 242, 0.3) 100%);
  box-shadow: 0 14px 40px -18px rgba(244, 63, 94, 0.3);
}

.ec-card--wow:hover {
  box-shadow: 0 22px 50px -20px rgba(244, 63, 94, 0.45);
  border-color: rgba(244, 63, 94, 0.7);
}

.ec-popular-ribbon {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4);
  letter-spacing: 0.02em;
}

.ec-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.ec-status-tag {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
}

.ec-status-tag--boring {
  background: hsl(210 20% 93%);
  color: hsl(215 16% 40%);
}

.ec-status-tag--wow {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
}

.ec-mood-emoji {
  font-size: 1.4rem;
}

/* Comic Speech Bubbles */
.ec-comic-bubble {
  position: relative;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}

.ec-comic-bubble--boring {
  background: hsl(210 25% 96%);
  border: 1.5px dashed hsl(215 14% 82%);
  color: hsl(215 20% 30%);
}

.ec-comic-bubble--boring::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 36px;
  border-width: 11px 11px 0;
  border-style: solid;
  border-color: hsl(210 25% 96%) transparent;
  display: block;
  width: 0;
}

.ec-comic-bubble--wow {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 228, 230, 0.85));
  border: 1.5px solid rgba(244, 63, 94, 0.35);
  color: hsl(340 70% 22%);
  box-shadow: 0 4px 16px -8px rgba(244, 63, 94, 0.25);
}

.ec-comic-bubble--wow::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 36px;
  border-width: 11px 11px 0;
  border-style: solid;
  border-color: rgba(255, 228, 230, 0.95) transparent;
  display: block;
  width: 0;
}

.ec-comic-speaker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  opacity: 0.8;
}

.ec-comic-quote {
  font-size: 0.96rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

/* Avatar / Expression Area */
.ec-avatar-wrap {
  margin-bottom: 1.35rem;
}

.ec-avatar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}

.ec-avatar--boring {
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(203, 213, 225, 0.6);
}

.ec-avatar--wow {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.22);
}

.ec-avatar-face {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.ec-avatar-name {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--hero-ink);
}

.ec-avatar-sub {
  font-size: 0.8rem;
  color: var(--hero-muted);
}

/* Feature checklist */
.ec-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.92rem;
  flex-grow: 1;
}

.ec-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.45;
}

.ec-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.ec-features--boring .ec-feat-icon {
  background: #fee2e2;
  color: #ef4444;
}

.ec-features--wow .ec-feat-icon {
  background: #dcfce7;
  color: #16a34a;
}

/* Result strip */
.ec-result {
  margin-top: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.88rem;
  line-height: 1.4;
}

.ec-result--boring {
  background: hsl(210 20% 95%);
  color: hsl(215 16% 40%);
  border-left: 3px solid hsl(215 14% 65%);
}

.ec-result--wow {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.12), rgba(251, 113, 133, 0.15));
  color: #b91c1c;
  border-left: 3px solid #e11d48;
  font-weight: 600;
}

.ec-result-label {
  font-weight: 700;
}

/* =============================================================================
   CRO-25: "কে দিচ্ছেন?" PERSONA SECTION STYLES
   ============================================================================= */
.persona-section {
  padding: 3.5rem var(--container-px);
}

@media (max-width: 768px) {
  .persona-section {
    display: none !important;
  }
}

.persona-outer {
  max-width: var(--container-max);
  margin: 0 auto;
}

.persona-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2.25rem;
}

.persona-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(244, 63, 94, 0.1);
  color: var(--hero-accent);
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.persona-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.persona-subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1rem;
  color: var(--hero-muted);
  line-height: 1.5;
}

/* Chips Bar */
.persona-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-full);
  background: #ffffff;
  border: 1.5px solid rgba(244, 63, 94, 0.25);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hero-ink);
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.06);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.persona-chip:hover {
  border-color: var(--hero-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -6px rgba(244, 63, 94, 0.25);
}

.persona-chip--active {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  border-color: #e11d48;
  color: #ffffff;
  box-shadow: 0 8px 24px -6px rgba(225, 29, 72, 0.45);
  transform: scale(1.03);
}

.persona-chip__icon {
  font-size: 1.15rem;
  line-height: 1;
}

/* Panels */
.persona-panels {
  position: relative;
}

.persona-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.persona-panel--active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.persona-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  background: #ffffff;
  border: 1.5px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  box-shadow: 0 16px 45px -20px rgba(244, 63, 94, 0.2);
}

@media (max-width: 860px) {
  .persona-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

.persona-card__content {
  display: flex;
  flex-direction: column;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}

.persona-card__tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hero-accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.persona-card__heading {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--hero-ink);
  line-height: 1.35;
  margin-bottom: 0.85rem;
}

.persona-card__desc {
  font-size: 0.98rem;
  color: var(--hero-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.persona-card__quote {
  position: relative;
  background: rgba(244, 63, 94, 0.06);
  border-left: 3px solid var(--hero-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.85rem 1.15rem;
  font-size: 0.95rem;
  font-style: italic;
  color: hsl(340 70% 30%);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.persona-card__quote-icon {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--hero-accent);
  font-family: serif;
}

.persona-card__action {
  margin-top: auto;
}

.persona-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(225, 29, 72, 0.4);
  transition: all 0.25s ease;
}

.persona-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(225, 29, 72, 0.6);
  color: #ffffff;
}

/* Aside Highlight Box */
.persona-highlight-box {
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.7), rgba(254, 242, 242, 0.9));
  border: 1px solid rgba(244, 63, 94, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
}

.persona-hl-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hero-ink);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.persona-hl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.persona-hl-list li {
  font-size: 0.92rem;
  color: hsl(222 47% 18%);
  line-height: 1.5;
}

/* =============================================================================
   CRO-26: INTERACTIVE PROJECTION EFFECT DEMO SIMULATOR STYLES
   ============================================================================= */
.projection-demo-card {
  margin-top: 3rem;
  background: linear-gradient(135deg, #0d0f17 0%, #151824 100%);
  border: 2px solid rgba(244, 63, 94, 0.35);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.65), 0 0 40px -10px rgba(244, 63, 94, 0.25);
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

.pdemo-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 1.75rem;
}

.pdemo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.95rem;
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fb7185;
  border-radius: var(--radius-full);
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.65rem;
}

.pdemo-title {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.pdemo-subtitle {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.96rem;
  color: hsl(220 15% 75%);
  line-height: 1.5;
}

/* Controls Bar */
.pdemo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}

.pdemo-torch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  border: none;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 8px 25px -5px rgba(225, 29, 72, 0.5);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.pdemo-torch-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 35px -5px rgba(225, 29, 72, 0.7);
}

.pdemo-torch-btn--active {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.5);
}

.pdemo-torch-btn--active:hover {
  box-shadow: 0 12px 35px -5px rgba(16, 185, 129, 0.7);
}

.pdemo-torch-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.pdemo-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.82rem;
  color: hsl(220 15% 65%);
}

.pdemo-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f43f5e;
  animation: live-ping-anim 1.8s infinite;
}

/* Virtual Stage Wall */
.pdemo-wall {
  position: relative;
  min-height: 460px;
  background: radial-gradient(circle at 50% 80%, #1a1e30 0%, #0d0f17 55%, #050609 100%);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 1.5rem 1rem 1rem;
}

/* Light Cone Beam connecting lens to wall */
.pdemo-light-cone {
  position: absolute;
  bottom: 82px;
  left: 50%;
  width: 290px;
  height: 290px;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255, 240, 220, 0.75) 0%, rgba(244, 63, 94, 0.35) 45%, rgba(225, 29, 72, 0.08) 85%, transparent 100%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0%, 0% 0%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
  filter: blur(8px);
}

.pdemo-wall--on .pdemo-light-cone {
  opacity: 1;
  animation: cone-subtle-flicker 3s infinite ease-in-out;
}

@keyframes cone-subtle-flicker {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
  70% { opacity: 0.9; }
}

/* Pendant at Bottom */
.pdemo-necklace-wrap {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdemo-necklace-wrap:hover {
  transform: translateX(-50%) scale(1.06);
}

.pdemo-pendant-visual {
  position: relative;
  width: 68px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85));
}

.pdemo-pendant-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pdemo-pendant-optic-glow {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff, 0 0 24px #f43f5e;
  opacity: 0.4;
  transition: all 0.4s ease;
  pointer-events: none;
}

.pdemo-wall--on .pdemo-pendant-optic-glow {
  opacity: 1;
  box-shadow: 0 0 15px #ffffff, 0 0 35px #ffedd5, 0 0 55px #f43f5e;
  animation: optic-lens-pulse 2s infinite alternate;
}

@keyframes optic-lens-pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.pdemo-pendant-label {
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 0.35rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(244, 63, 94, 0.4);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Projection Screen / Wall */
.pdemo-projection-wall {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdemo-wall--on .pdemo-projection-wall {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: projection-orb-float 4.5s ease-in-out infinite;
}

.pdemo-wall--off .pdemo-projection-wall {
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
}

@keyframes projection-orb-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.pdemo-projection-circle {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .pdemo-wall {
    min-height: 420px;
  }
  .pdemo-projection-circle {
    width: 215px;
    height: 215px;
  }
  .pdemo-light-cone {
    width: 240px;
    height: 250px;
    bottom: 78px;
  }
}

.pdemo-halo {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.55) 0%, rgba(251, 113, 133, 0.25) 55%, transparent 75%);
  filter: blur(16px);
  animation: halo-pulse 3s infinite alternate;
}

@keyframes halo-pulse {
  0% { transform: scale(0.95); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}

.pdemo-orb-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 35px rgba(244, 63, 94, 0.6), inset 0 0 30px rgba(255, 230, 200, 0.25);
  border: 2px solid rgba(255, 240, 240, 0.6);
  background: #000000;
}

.pdemo-orb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.2) brightness(1.15) drop-shadow(0 0 10px rgba(255, 200, 210, 0.4));
}

.pdemo-orb-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
              radial-gradient(circle at center, transparent 65%, rgba(244, 63, 94, 0.3) 100%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.pdemo-beam-badge {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(251, 113, 133, 0.5);
  color: #fed7aa;
  font-family: "Hind Siliguri", ui-sans-serif, system-ui;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.15rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* ── Dark Theme Overrides ─────────────────────────────────────────────── */
.theme-noir .live-viewers-badge {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
}

.theme-noir .delivery-promise-banner {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.35);
  color: hsl(210 22% 90%);
}

.theme-noir .stock-counter-card {
  background: hsl(240 7% 13%);
  border-color: rgba(244, 63, 94, 0.4);
}

.theme-noir .stock-counter-label {
  color: hsl(210 22% 92%);
}

.theme-noir .stock-progress-track {
  background: hsl(240 7% 22%);
}

.theme-noir .so-urgency-strip {
  background: hsl(240 7% 14%);
  border-color: rgba(244, 63, 94, 0.35);
  color: hsl(210 22% 92%);
}

.theme-noir .ec-card--boring {
  background: hsl(240 7% 13%);
  border-color: hsl(240 7% 22%);
}

.theme-noir .ec-card--wow {
  background: linear-gradient(180deg, hsl(240 7% 14%) 0%, rgba(244, 63, 94, 0.1) 100%);
  border-color: rgba(244, 63, 94, 0.5);
}

.theme-noir .ec-comic-bubble--boring {
  background: hsl(240 7% 18%);
  border-color: hsl(240 7% 28%);
  color: hsl(240 5% 75%);
}

.theme-noir .ec-comic-bubble--boring::after {
  border-color: hsl(240 7% 18%) transparent;
}

.theme-noir .ec-comic-bubble--wow {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.4);
  color: #ffe4e6;
}

.theme-noir .ec-comic-bubble--wow::after {
  border-color: rgba(244, 63, 94, 0.25) transparent;
}

.theme-noir .ec-avatar--boring {
  background: hsl(240 7% 17%);
  border-color: hsl(240 7% 25%);
}

.theme-noir .ec-avatar--wow {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.35);
}

.theme-noir .ec-result--boring {
  background: hsl(240 7% 17%);
  color: hsl(240 5% 70%);
}

.theme-noir .persona-chip {
  background: hsl(240 7% 14%);
  border-color: hsl(240 7% 25%);
  color: hsl(210 22% 90%);
}

.theme-noir .persona-chip--active {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
}

.theme-noir .persona-card {
  background: hsl(240 7% 13%);
  border-color: rgba(244, 63, 94, 0.35);
}

.theme-noir .persona-card__heading {
  color: hsl(210 22% 95%);
}

.theme-noir .persona-card__desc {
  color: hsl(240 5% 70%);
}

.theme-noir .persona-card__quote {
  background: rgba(244, 63, 94, 0.12);
  color: #fecdd3;
}

.theme-noir .persona-highlight-box {
  background: hsl(240 7% 16%);
  border-color: rgba(244, 63, 94, 0.3);
}

.theme-noir .persona-hl-title {
  color: hsl(210 22% 95%);
}

.theme-noir .persona-hl-list li {
  color: hsl(240 5% 75%);
}

/* =============================================================================
   PERFORMANCE: CONTENT VISIBILITY (DEFERRED OFF-SCREEN RENDERING)
   Enables lightning-fast initial page paint by skipping layout/paint
   for heavy off-screen sections until the user scrolls near them.
   ============================================================================= */
.projection-showcase,
.projection-unboxing-carousel,
.unboxing-carousel,
.why-us,
.delivery-section,
.order-section,
.reviews-section,
.faq-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}