/* CELLMIND local reference rebuild — generated from website/cellmind-rebuild/src/styles. Do not edit output. */
/* ---- pages/home.css ---- */
/* Homepage — resolved reference values (computed_dump of bs/index.html and the live English page at
   1440 / 1024 / 768 / 430 / 390 / 320; rules: evidence/css-usage/home-bs.used.css).
   Section grammar (eyebrow / .h2) comes from layout.css; buttons from components/buttons.css;
   cards from components/product-card.css (homepage-only adjustments at the end of this file). */

/* The reference homepage body is 15px / 1.6 / weight 450 (variable DM Sans), #151515, antialiased
   (its homepage body class): page content AND the inheriting parts of the shared chrome (footer
   tagline, Telegram card subline, bottom row; footer list rhythm) take these values on this page.
   This stylesheet is linked on the homepage only. */
body.tpl-home {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--t-text-ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Keyboard focus on the homepage: 2px gold ring at a 3px offset (reference homepage rule). */
body.tpl-home :focus-visible { outline: 2px solid var(--t-border-gold-dark); outline-offset: 3px; }

/* Homepage buttons (ghost / outline "Shop all") are 14px / 500; the primary CTA keeps 15px / 600. */
.home-btn { font-size: 14px; font-weight: 500; }

/* Section rhythm shared by the bestsellers and how-it-works bands. */
.home-best,
.home-steps { padding-block: clamp(56px, 7vw, 88px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: min(74vh, 720px);
  overflow: hidden;
  background: var(--t-bg-off);
}
.home-hero__media,
.home-hero__fade { position: absolute; inset: 0; pointer-events: none; }
.home-hero__media { background: var(--t-bg-off); }
.home-hero__media img { filter: var(--t-hero-filter); }
.home-hero__media picture,
.home-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__media img { display: block; object-fit: cover; object-position: center; }
.home-hero__fade {
  background: linear-gradient(90deg, rgba(var(--t-bg-off-rgb), 0.96) 0%, rgba(var(--t-bg-off-rgb), 0.9) 30%, rgba(var(--t-bg-off-rgb), 0.4) 60%, rgba(var(--t-bg-off-rgb), 0) 100%);
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 96px);
}

.home-hero__title {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--t-text-ink);
}
.home-hero__line,
.home-hero__accent { display: block; }
.home-hero__accent { font-style: italic; font-weight: 400; color: var(--t-text-gold-dark); }

.home-hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 22px 0 26px;
  font-size: 15px;
  color: var(--t-text-ink-2);
  text-decoration: none;
}
.home-hero__stars { display: flex; gap: 2px; color: var(--t-text-gold); }
.home-hero__stars svg { width: 14px; height: 14px; }
.home-hero__score { font-weight: 400; line-height: 1.4; }
.home-hero__score strong,
.home-hero__count strong { font-weight: 600; color: var(--t-text-ink); }
.home-hero__count { position: relative; padding-left: 12px; }
.home-hero__count::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  background: var(--t-bg-line-strong);
  transform: translateY(-50%);
}
.home-hero__count-short { display: none; }

.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ==========================================================================
   Trust marquee — two identical groups translate by -50% in 40s (linear, endless), pause on hover;
   with reduced motion the track is static and the duplicate group is removed.
   ========================================================================== */
.trust-marquee {
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: var(--t-bg-white);
  border-top: 1px solid var(--t-border-line);
  border-bottom: 1px solid var(--t-border-line);
}
.trust-marquee__track {
  display: flex;
  width: max-content;
  animation: trust-marquee-scroll 40s linear infinite;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
.trust-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100cqi;
}
.trust-marquee__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  white-space: nowrap;
}
.trust-marquee__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t-bg-gold); }
.trust-marquee__text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text-ink-2);
}
.trust-marquee__accent { font-weight: 500; color: var(--t-text-gold-dark); }
@keyframes trust-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track { animation: none; }
  .trust-marquee__group + .trust-marquee__group { display: none; }
}

/* ==========================================================================
   Bestsellers
   ========================================================================== */
.home-best__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}
.home-best__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.home-best__all-m { display: none; }

/* ==========================================================================
   Quality statement band
   ========================================================================== */
.home-standard { padding-block: clamp(56px, 7vw, 88px); background: var(--t-bg-cream); }
.home-standard__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}
.home-standard__label { font-size: 12px; }
.home-standard__title {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--t-text-ink);
}
.home-standard__title em { font-style: italic; font-weight: 400; color: var(--t-text-gold-dark); }
.home-standard__body {
  max-width: 52ch;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t-text-ink-2);
}
.home-standard__body strong { font-weight: 600; color: var(--t-text-ink); }
.home-standard__sign { margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--t-text-ink); }

.protocol-card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.protocol-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--t-border-line);
  font-size: 13px;
}
.protocol-card__title { font-weight: 500; color: var(--t-text-ink); }
.protocol-card__note { color: var(--t-text-muted); }
.protocol-card__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--t-border-line);
}
.protocol-card__check {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--t-bg-gold-light);
}
.protocol-card__check::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  box-sizing: content-box; /* the reference's reset does not reach pseudo-elements: 5×9 + 2px strokes */
  width: 5px;
  height: 9px;
  border: solid var(--t-border-gold-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.protocol-card__item-title { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 500; color: var(--t-text-ink); }
.protocol-card__item-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--t-text-muted); }
.protocol-card__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; }
.protocol-card__chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--t-bg-gold-light);
  color: var(--t-text-gold-dark);
  font-size: 11px;
  font-weight: 500;
}

/* ==========================================================================
   Numbers
   ========================================================================== */
.home-numbers { padding-block: clamp(56px, 7vw, 88px); background: var(--t-bg-white); }
.home-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.stat-card {
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(var(--t-shadow-ink-rgb), 0.07), 0 1px 3px rgba(var(--t-shadow-ink-rgb), 0.04);
}
.stat-card__val {
  margin-bottom: 8px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--t-text-ink);
}
.stat-card__label { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--t-text-ink); }
.stat-card__desc { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--t-text-ink-5); }

/* ==========================================================================
   How it works
   ========================================================================== */
.home-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: 36px;
}
.step-card { padding: 22px; background: var(--t-bg-off); border-radius: var(--r); }
.step-card__num {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--t-border-line);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--t-text-gold-dark);
}
.step-card__title { margin-bottom: 6px; font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--t-text-ink); }
.step-card__desc { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--t-text-ink-5); }

.ask-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
}
.ask-bar__text { font-size: 14px; color: var(--t-text-ink-2); }
.ask-bar__text strong { font-weight: 600; color: var(--t-text-ink); }
.ask-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--t-bg-black);
  color: var(--t-text-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.ask-bar:hover .ask-bar__btn { background: var(--t-bg-ink-hover); }
.ask-bar__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--t-text-gold); }
.ask-bar__icon svg { width: 16px; height: 16px; }

/* ==========================================================================
   Product cards on the homepage (shared component, variant "home"): the cart button takes the
   card's text colour (#151515) instead of ink.
   ========================================================================== */
.page--home .product-card__btn { color: inherit; }
.page--home .product-card__btn:hover { color: var(--t-text-white); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
  .home-standard__inner { grid-template-columns: 1fr; gap: 40px; }
  .home-steps__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .home-best { padding-top: 44px; padding-bottom: 48px; }
  .home-best__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .home-best__all { display: none; }
  /* Native horizontal scroller with snap points, bleeding to the viewport edges. */
  .home-best__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    margin: 22px calc(-1 * var(--container-pad)) 16px;
    padding: 4px var(--container-pad) 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    scrollbar-width: none;
  }
  .home-best__grid::-webkit-scrollbar { display: none; }
  .home-best__grid > .product-card { flex: 0 0 min(72vw, 300px); width: min(72vw, 300px); min-width: 0; scroll-snap-align: start; }
  .home-best__all-m { display: inline-flex; width: 100%; }

  .protocol-card__head { flex-wrap: wrap; }

  /* The reference's generic ≤768px number rule removes the right border of every stat card. */
  .stat-card { border-right: 0; }
}

/* Exactly 768px: the reference's generic ≤768px card rules already apply while the homepage's
   ≤767px card rules do not (footer stacks centred, full-width button, compact badges). */
@media (min-width: 768px) and (max-width: 768px) {
  .page--home .product-card__badges { gap: 4px; align-items: center; }
  .page--home .product-card__title { line-height: 1.2; }
  .page--home .product-card__dose { white-space: nowrap; }
  .page--home .product-card__footer { flex-direction: column; align-items: center; }
  .page--home .product-card__btn { width: 100%; max-width: 100%; }
}

@media (max-width: 767px) {
  .home-hero { min-height: auto; align-items: flex-end; }
  .home-hero__media img { object-position: center 20%; }
  .home-hero__fade {
    background: linear-gradient(180deg, rgba(var(--t-bg-off-rgb), 0.05) 0%, rgba(var(--t-bg-off-rgb), 0.6) 40%, rgba(var(--t-bg-off-rgb), 0.98) 65%, var(--t-bg-off) 100%);
  }
  .home-hero__inner { padding-top: min(60vw, 290px); padding-bottom: 36px; }
  .home-hero__title { font-size: clamp(2rem, 9vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; }
  .home-hero__rating { flex-wrap: nowrap; gap: 8px; margin: 18px 0 22px; font-size: 14px; }
  .home-hero__stars svg { width: 12px; height: 12px; }
  .home-hero__score,
  .home-hero__count { white-space: nowrap; }
  .home-hero__count { padding-left: 10px; color: var(--t-text-muted); }
  .home-hero__count-full { display: none; }
  .home-hero__count-short { display: inline; }
  .home-hero__cta { flex: 1 1 auto; }

  .home-numbers__grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .page--home .product-card--home .product-card__body { padding: 12px 12px 14px; }
}

@media (max-width: 540px) {
  .ask-bar__btn { width: 100%; }
}

@media (max-width: 480px) {
  .home-hero__actions { flex-direction: column; width: 100%; }
  .home-hero__cta { width: 100%; }
}

@media (max-width: 479px) {
  .home-steps__grid { grid-template-columns: 1fr; }
}