/* ============================================================
   MAURICE — HOME PAGE
   ============================================================ */

/* ---------------- Hero ---------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: var(--nav-h); overflow: hidden;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(255,106,61,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, #fff 100%);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__grid {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--s-8);
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); } }

.hero__eyebrow { margin-bottom: var(--s-5); }
.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: var(--s-5);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title .accent { color: var(--red); position: relative; }
.hero__lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 44ch; margin-bottom: var(--s-6); line-height: 1.5; }
.hero__cta { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

.hero__trust { display: flex; gap: var(--s-6); margin-top: var(--s-8); flex-wrap: wrap; }
.hero__trust-item { display: flex; flex-direction: column; }
.hero__trust-item b { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__trust-item span { font-size: var(--fs-cap); color: var(--text-3); }
.hero__trust-sep { width: 1px; background: var(--line); align-self: stretch; }

/* Hero product stage */
.hero__stage { position: relative; aspect-ratio: 1 / 1; }
@media (max-width: 940px) { .hero__stage { aspect-ratio: 4 / 3; max-width: 520px; margin-inline: auto; } }
.hero__ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, #fff 0%, var(--mist) 78%);
  box-shadow: var(--sh-2), inset 0 0 60px rgba(255,106,61,0.06);
}
.hero__ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 220deg, transparent 0deg, rgba(255,106,61,0.5) 40deg, var(--red) 70deg, transparent 120deg);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 69%);
  mask: radial-gradient(circle, transparent 68%, #000 69%);
  opacity: 0.55; animation: spinRing 14s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__ring::before { animation: none; } }

.hero__product {
  position: absolute; inset: 0; display: grid; place-items: center;
  will-change: transform;
}
.hero__product svg, .hero__product img { width: 52%; filter: drop-shadow(0 34px 44px rgba(20,21,24,0.20)); display: block; object-fit: contain; }
.hero__product::after { content: ""; position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); width: 42%; height: 20px; background: radial-gradient(ellipse, rgba(20,21,24,0.16), transparent 70%); filter: blur(4px); z-index: -1; }
.hero__float {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2); padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600;
  will-change: transform;
}
.hero__float svg { width: 20px; height: 20px; color: var(--red); }
.hero__float--1 { top: 14%; left: -4%; }
.hero__float--2 { bottom: 18%; right: -6%; }
.hero__float--3 { bottom: 6%; left: 12%; }
@media (max-width: 560px) { .hero__float { display: none; } }

.hero__scroll {
  position: absolute; bottom: var(--s-6); left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-size: var(--fs-cap); color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase;
}
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--silver), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--red); animation: scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot { to { top: 100%; } }

/* ---------------- Marquee (categories strip) ---------------- */
.strip { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.strip__track { display: flex; gap: var(--s-8); padding-block: var(--s-5); white-space: nowrap; width: max-content; animation: marquee 32s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.strip__item { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-2); }
.strip__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ---------------- Categories ---------------- */
.cats { background: var(--paper); }
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 980px) { .cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cats__grid { grid-template-columns: 1fr; } }
.ccard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.ccard::after {
  content: ""; position: absolute; inset: auto -30% -40% auto; width: 180px; height: 180px;
  background: var(--ember-glow); opacity: 0; filter: blur(24px); transition: opacity var(--dur-3) var(--ease);
}
.ccard:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.ccard:hover::after { opacity: 0.14; }
.ccard__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--red); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ccard__icon svg { width: 26px; height: 26px; }
.ccard:hover .ccard__icon { background: var(--red); color: #fff; }
.ccard__foot { position: relative; z-index: 1; }
.ccard__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text-1); margin-bottom: 2px; }
.ccard__meta { display: flex; align-items: center; justify-content: space-between; }
.ccard__count { font-size: var(--fs-cap); color: var(--text-3); }
.ccard__arrow { color: var(--red); transition: transform var(--dur-2) var(--ease); }
.ccard:hover .ccard__arrow { transform: translateX(4px); }
.ccard--soon { cursor: default; opacity: .88; }
.ccard--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ccard--soon:hover::after { opacity: 0; }
.ccard--soon:hover .ccard__icon { background: var(--surface-2); color: var(--red); }

/* ---------------- Differentiators ---------------- */
.diff { background: var(--ink); color: #d7dade; position: relative; overflow: hidden; }
.diff__glow { position: absolute; top: -20%; left: -10%; width: 560px; height: 560px; background: var(--ember-glow); opacity: 0.10; filter: blur(50px); }
.diff__product { position: absolute; top: 50%; right: clamp(-40px, 2vw, 40px); transform: translateY(-50%); width: clamp(220px, 20vw, 320px); opacity: 0.14; pointer-events: none; }
.diff__product svg, .diff__product img { width: 100%; height: auto; display: block; object-fit: contain; }
@media (max-width: 900px) { .diff__product { display: none; } }
.diff .eyebrow { color: var(--ember); }
.diff h2 { color: #fff; }
.diff__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); margin-top: var(--s-7); }
@media (max-width: 760px) { .diff__grid { grid-template-columns: 1fr; } }
.dcard { position: relative; padding: var(--s-7) var(--s-6); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg); background: rgba(255,255,255,0.02); transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.dcard:hover { border-color: rgba(255,106,61,0.4); background: rgba(255,255,255,0.04); }
.dcard__num { font-family: var(--font-display); font-size: 0.85rem; color: var(--ember); font-weight: 700; letter-spacing: 0.1em; }
.dcard__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: #fff; margin: var(--s-3) 0 var(--s-3); }
.dcard p { color: var(--silver); font-size: var(--fs-sm); max-width: none; }

/* ---------------- Stats band ---------------- */
.stats { background: var(--paper); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); text-align: center; }
@media (max-width: 760px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-4); } }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem); color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__value .suffix { color: var(--red); }
.stat__label { margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.stat__sub { color: var(--text-3); font-size: var(--fs-cap); }

/* ---------------- Featured products ---------------- */
.featured { background: #fff; }
.featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
@media (max-width: 980px) { .featured__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .featured__grid { grid-template-columns: 1fr; } }

/* ---------------- Journey preview ---------------- */
.journey-p { background: var(--paper); position: relative; }
.journey-p__wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 860px) { .journey-p__wrap { grid-template-columns: 1fr; } }
.journey-p__line { position: relative; padding-left: var(--s-6); }
.journey-p__line::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--ember-line); border-radius: 2px; }
.jp-node { position: relative; padding: var(--s-4) 0; }
.jp-node::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) - 4px); top: var(--s-5); width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.jp-node__year { font-family: var(--font-display); font-weight: 700; color: var(--red); font-size: 1.1rem; }
.jp-node__text { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------------- CTA band ---------------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--red) 0%, var(--red-deep) 100%); color: #fff; }
.cta-band__glow { position: absolute; top: -40%; right: 6%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,180,120,0.5), transparent 65%); filter: blur(30px); }
.cta-band__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: var(--s-7); }
@media (max-width: 760px) { .cta-band__inner { grid-template-columns: 1fr; text-align: left; } }
.cta-band h2 { color: #fff; margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,0.86); max-width: 48ch; }
.cta-band__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* Section intro helper shared */
.si { max-width: 60ch; }
.si .eyebrow { margin-bottom: var(--s-4); }
.si h2 { margin-bottom: var(--s-4); }
.si p { color: var(--text-2); }