/* ==========================================================================
   Herbal Health Remedy — Site stylesheet
   Pure CSS. Pink / rose / fuchsia theme.
   Paired with Tailwind (already loaded by every page) for layout utilities.
   ========================================================================== */

/* ------------------------------ design tokens ---------------------------- */
:root {
  --primary: #db2777;
  --primary-dark: #9d174d;
  --primary-deep: #701a45;
  --primary-light: #f9a8d4;

  --secondary: #a21caf;
  --secondary-dark: #701a75;

  --accent: #ff5c8a;
  --accent-dark: #e11d48;

  --ink: #2b0a1e;
  --ink-soft: #4b1631;

  --cloud: #fff5f9;
  --blush: #ffe4ef;
  --line: #f7d4e3;

  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-3xl: 2.5rem;

  --shadow-soft: 0 18px 40px -22px rgba(112, 26, 69, .38);
  --shadow-card: 0 22px 45px -28px rgba(112, 26, 69, .45);

  --nav-h: 76px;
}

* { scroll-behavior: smooth; }

html {
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  background: #fff;
}

h1, h2, h3, h4, .font-display { font-family: "Plus Jakarta Sans", sans-serif; }

[id] { scroll-margin-top: 104px; }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------ scrollbar --------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cloud); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 20px;
  border: 2px solid var(--cloud);
}

/* ================================ LAYOUT ================================== */
.shell { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }

.section { padding-block: 6rem; }
.section--tight { padding-block: 4.5rem; }

.eyebrow {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  color: var(--primary);
}
.eyebrow--accent { color: var(--accent-dark); }

/* ============================== TEXT / ACCENT ============================= */
.text-gradient {
  background: linear-gradient(100deg, var(--primary) 0%, var(--secondary) 45%, var(--accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 9s ease infinite;
}

.rule {
  height: 4px;
  width: 72px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.lead { color: var(--ink-soft); opacity: .82; line-height: 1.75; }

/* ================================ BUTTONS ================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease,
              color .25s ease, border-color .25s ease;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled, .btn[data-busy="1"] {
  opacity: .8;
  cursor: progress;
  transform: none;
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 16px 30px -16px rgba(219, 39, 119, .75);
}
.btn--primary:hover { background: var(--primary-dark); }

.btn--accent {
  background: linear-gradient(120deg, var(--accent), var(--primary));
  color: #fff;
  box-shadow: 0 16px 30px -16px rgba(255, 92, 138, .75);
}

.btn--ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn--light {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--light:hover { background: #fff; color: var(--primary-dark); border-color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: .7rem 1.25rem; font-size: .82rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  font-size: .9rem;
}
.tlink i { transition: transform .25s ease; }
.tlink:hover { color: var(--primary-dark); }
.tlink:hover i { transform: translateX(4px); }

/* ================================ SURFACES ================================ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.card--pad { padding: 1.9rem; }

.tilt-card {
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.tilt-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-light);
  box-shadow: 0 28px 55px -30px rgba(112, 26, 69, .55);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1.1rem;
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.icon-tile--sm { width: 2.75rem; height: 2.75rem; border-radius: .9rem; font-size: 1.05rem; }

.tone-pink { background: #fdf2f8; color: var(--primary); }
.tone-fuchsia { background: #fae8ff; color: var(--secondary); }
.tone-coral { background: #ffe9ef; color: var(--accent-dark); }
.tone-plum { background: #fbe9f3; color: var(--primary-deep); }
.tone-rose { background: #ffe4e6; color: #be123c; }
.tone-slate { background: #f8fafc; color: #334155; }

/* chip / pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
}
.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.chip i { color: var(--primary); }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--blush);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .78rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

/* ================================= HEADER ================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-stuck {
  box-shadow: 0 14px 30px -24px rgba(112, 26, 69, .75);
  background: rgba(255, 255, 255, .94);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand__mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 12px 24px -14px rgba(162, 28, 175, .85);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: .9rem;
}
.nav-link {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: .3rem;
  transition: color .25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .3s ease;
}
.nav-link:hover { color: var(--primary); }
.nav-link:hover::after { width: 100%; }
.nav-link.is-active { color: var(--primary); }
.nav-link.is-active::after { width: 100%; }

.nav-cta { display: none; }

.menu-btn {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .9rem;
  background: var(--blush);
  color: var(--primary-deep);
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}

.mobile-menu {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 1.1rem 1.5rem 1.5rem;
  display: none;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: .75rem .25rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed var(--blush);
}
.mobile-menu a:hover { color: var(--primary); }
.mobile-menu a.mobile-menu__cta {
  margin-top: 1rem;
  border: none;
  text-align: center;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  padding: .9rem 1rem;
}
.mobile-menu a.is-active { color: var(--primary); }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }
  .mobile-menu { display: none !important; }
}

/* =============================== PAGE HERO ================================ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, #ffe1ee 0%, rgba(255, 225, 238, 0) 62%),
    radial-gradient(900px 480px at 92% 6%, #f8e0ff 0%, rgba(248, 224, 255, 0) 60%),
    linear-gradient(180deg, #fff7fb 0%, #ffffff 68%);
}
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(112, 26, 69, .12) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 76%);
  opacity: .55;
}
.hero__inner { position: relative; padding-top: 9.5rem; padding-bottom: 5.5rem; }
@media (min-width: 1024px) { .hero__inner { padding-top: 11.5rem; padding-bottom: 7rem; } }

.hero__title {
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(2.1rem, 5.4vw, 3.85rem);
}

.blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .7;
  pointer-events: none;
}
.blob--1 { width: 22rem; height: 22rem; top: -6rem; left: -6rem; background: rgba(255, 92, 138, .35); }
.blob--2 { width: 20rem; height: 20rem; top: 28%; right: -6rem; background: rgba(162, 28, 175, .3); }
.blob--3 { width: 16rem; height: 16rem; bottom: -5rem; left: 34%; background: rgba(219, 39, 119, .22); }

/* floating icon tiles */
.float-icon {
  position: absolute;
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(247, 212, 227, .95);
  box-shadow: 0 18px 34px -22px rgba(112, 26, 69, .6);
  backdrop-filter: blur(6px);
  font-size: 1.25rem;
  animation: floaty 7s ease-in-out infinite;
}
.float-icon--2 { animation: floaty2 8.5s ease-in-out infinite; }
.float-icon--3 { animation: floaty 9.5s ease-in-out infinite; }
@media (max-width: 767px) { .float-icon { display: none; } }

/* page header (inner pages) */
.page-head { position: relative; overflow: hidden; background:
  radial-gradient(900px 420px at 8% -20%, #ffe4f0 0%, rgba(255, 228, 240, 0) 60%),
  radial-gradient(760px 420px at 96% 0%, #f6e2ff 0%, rgba(246, 226, 255, 0) 62%),
  linear-gradient(180deg, #fff7fb 0%, #ffffff 72%); }
.page-head__inner { position: relative; padding-top: 8.5rem; padding-bottom: 3.6rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: .8;
  margin-bottom: 1rem;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs i { font-size: .6rem; opacity: .6; }

/* ============================== ANIMATIONS ================================ */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(7deg); }
}
@keyframes floaty2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(16px) rotate(-9deg); }
}
@keyframes blobmove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(28px, -34px) scale(1.08); }
  66% { transform: translate(-22px, 22px) scale(.96); }
}
.blob { animation: blobmove 16s ease-in-out infinite; }
.blob--2 { animation-duration: 19s; }
.blob--3 { animation-duration: 22s; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-anim { background-size: 220% 220%; animation: gradientShift 9s ease infinite; }

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(219, 39, 119, .45); }
  70% { box-shadow: 0 0 0 20px rgba(219, 39, 119, 0); }
  100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
}
.pulse-ring { animation: pulseRing 2.6s infinite; }

@keyframes popIn {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.pop-in { animation: popIn .6s cubic-bezier(.34, 1.56, .64, 1) both; }

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track { animation: ticker 26s linear infinite; }

/* scroll reveal — only hidden when JavaScript is available (html.js) */
html.js .reveal,
html.js .reveal-left,
html.js .reveal-right,
html.js .reveal-scale {
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
html.js .reveal { transform: translateY(38px); }
html.js .reveal-left { transform: translateX(-46px); }
html.js .reveal-right { transform: translateX(46px); }
html.js .reveal-scale { transform: scale(.9); }
html.js .reveal.in-view,
html.js .reveal-left.in-view,
html.js .reveal-right.in-view,
html.js .reveal-scale.in-view,
html.js .reveal.is-static,
html.js .reveal-left.is-static,
html.js .reveal-right.is-static,
html.js .reveal-scale.is-static {
  opacity: 1;
  transform: none;
}

/* ============================ SERVICE CARDS =============================== */
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-card__body {
  color: var(--ink-soft);
  opacity: .85;
  font-size: .875rem;
  line-height: 1.75;
  max-height: 11rem;
  overflow-y: auto;
  padding-right: .5rem;
  margin-top: .35rem;
}
.svc-card__body.is-open { max-height: none; overflow: visible; }
.svc-card__index {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: .78rem;
  color: var(--primary);
  background: var(--blush);
  border-radius: 999px;
  padding: .3rem .7rem;
}

/* slim scrollbars inside cards */
.card-scroll::-webkit-scrollbar { width: 5px; }
.card-scroll::-webkit-scrollbar-track { background: transparent; }
.card-scroll::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 10px;
  border: none;
}

/* ============================ TESTIMONIAL SLIDER ========================== */
.ts-viewport { overflow: hidden; border-radius: var(--radius-2xl); }
.ts-track { display: flex; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.ts-slide { min-width: 100%; padding: .35rem; }
.ts-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: 2.6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ts-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}
.ts-quote-mark {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--blush);
}
.ts-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.ts-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  transition: all .25s ease;
  z-index: 2;
}
.ts-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.ts-btn--prev { left: -1.4rem; }
.ts-btn--next { right: -1.4rem; }
@media (max-width: 640px) {
  .ts-btn--prev { left: .25rem; }
  .ts-btn--next { right: .25rem; }
}
.ts-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.9rem; }
.ts-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  border: none;
  background: var(--blush);
  cursor: pointer;
  transition: all .3s ease;
  padding: 0;
}
.ts-dot.is-active {
  width: 1.7rem;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* ================================ ACCORDION =============================== */
.acc-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.acc-item.is-open { border-color: var(--primary-light); box-shadow: var(--shadow-soft); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.3rem 1.5rem;
  font-weight: 800;
  font-size: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
.acc-btn i {
  color: var(--primary);
  transition: transform .35s ease;
  flex: 0 0 auto;
}
.acc-btn[aria-expanded="true"] { color: var(--primary-dark); }
.acc-btn[aria-expanded="true"] i { transform: rotate(45deg); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}
.acc-body__inner {
  padding: 0 1.5rem 1.4rem;
  color: var(--ink-soft);
  opacity: .85;
  font-size: .9rem;
  line-height: 1.8;
}
.acc-body__inner p { margin: 0; }

/* ================================= FORMS ================================== */
.field { display: block; }
.field__label {
  display: block;
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: .5rem;
  color: var(--ink);
}
.field__hint { font-size: .74rem; color: var(--ink-soft); opacity: .7; }

.input,
.select,
.textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: .95rem;
  padding: .9rem 1.05rem;
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.input::placeholder, .textarea::placeholder { color: #c39db1; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(219, 39, 119, .12);
  outline: none;
}
.textarea { resize: vertical; min-height: 8rem; }
.select { appearance: none; background-image: none; cursor: pointer; }

.input.has-error, .textarea.has-error, .select.has-error {
  border-color: #e11d48;
  background: #fff5f7;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .84rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.6;
}
.check input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.check.has-error { color: #be123c; }

.form-note { font-size: .76rem; color: var(--ink-soft); opacity: .75; }

/* inline validation message */
.field__error {
  display: none;
  font-size: .74rem;
  font-weight: 700;
  color: #e11d48;
  margin-top: .35rem;
}
.field__error.is-visible { display: block; }

/* ================================ TOASTS ================================== */
.toast-host {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 140;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: min(23rem, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 480px) {
  .toast-host { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
}

.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 1.05rem;
  padding: 1rem 1rem .95rem;
  box-shadow: 0 22px 44px -22px rgba(112, 26, 69, .6);
  overflow: hidden;
  animation: toastIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
.toast.is-leaving { animation: toastOut .28s ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translate3d(110%, 0, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translate3d(110%, 0, 0) scale(.97); }
}
@keyframes toastBar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.toast__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex: 0 0 auto;
  background: #fdf2f8;
  color: var(--primary);
}
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: .92rem;
  color: var(--ink);
  margin: 0 0 .2rem;
}
.toast__msg {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: .88;
}
.toast__action {
  margin-top: .7rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toast__action:hover { color: var(--primary-dark); }
.toast__close {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: none;
  background: var(--cloud);
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: .75rem;
  transition: all .2s ease;
}
.toast__close:hover { background: var(--blush); color: var(--primary-dark); }
.toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: toastBar var(--toast-life, 6s) linear forwards;
}
.toast.is-paused .toast__bar { animation-play-state: paused; }

.toast--success { border-left-color: #db2777; }
.toast--info { border-left-color: var(--secondary); }
.toast--info .toast__icon { background: #fae8ff; color: var(--secondary); }
.toast--error { border-left-color: #e11d48; }
.toast--error .toast__icon { background: #ffe4e6; color: #be123c; }
.toast--error .toast__bar { background: linear-gradient(90deg, #e11d48, #fb7185); }

/* ================================ CONFETTI ================================ */
.confetti-host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: .95;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(460px) rotate(720deg); opacity: 0; }
}

/* ============================== CTA BAND ================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, #701a45 0%, #a21caf 52%, #db2777 100%);
}
.cta-band__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .5;
}

/* ============================ LEGAL / DOC PAGES =========================== */
.doc-shell { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .doc-shell { grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; }
}

.doc-toc {
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.4rem 1.5rem;
}
@media (min-width: 1024px) {
  .doc-toc { position: sticky; top: 7rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
}
.doc-toc__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 .9rem;
}
.doc-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.doc-toc__list a {
  display: block;
  padding: .5rem .7rem;
  border-radius: .7rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .22s ease;
}
.doc-toc__list a:hover { background: #fff; color: var(--primary-dark); }
.doc-toc__list a.is-current {
  background: #fff;
  color: var(--primary-dark);
  border-left-color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.doc-body { display: grid; gap: 1.15rem; }
.doc-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.8rem;
  scroll-margin-top: 7.5rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.doc-section:hover { border-color: var(--primary-light); box-shadow: var(--shadow-soft); }
.doc-section__head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .85rem;
}
.doc-section__num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: .7rem;
  padding: .3rem .6rem;
  flex: 0 0 auto;
  min-width: 2.1rem;
  text-align: center;
}
.doc-section h3 {
  font-size: 1.06rem;
  font-weight: 900;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.01em;
}
.doc-section p {
  margin: 0;
  color: var(--ink-soft);
  opacity: .87;
  font-size: .92rem;
  line-height: 1.85;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: .8;
  margin-top: 1.1rem;
}
.doc-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.doc-meta i { color: var(--primary); }

/* ============================ BACK TO TOP ================================= */
.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 18px 32px -16px rgba(112, 26, 69, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all .35s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }

/* ================================= FOOTER ================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(165deg, #2b0a1e 0%, #45102c 55%, #701a45 100%);
  padding-top: 5rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 26rem;
  height: 26rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(219, 39, 119, .4) 0%, rgba(219, 39, 119, 0) 68%);
}
.footer-grid {
  position: relative;
  display: grid;
  gap: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.35fr 1fr 1fr 1.15fr; } }

.footer-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: .95rem;
  margin: 0 0 1.15rem;
  color: #fff;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-list a, .footer-list li {
  color: rgba(255, 255, 255, .66);
  font-size: .86rem;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  transition: color .25s ease, transform .25s ease;
  line-height: 1.6;
}
.footer-list a:hover { color: #ffb3d1; transform: translateX(3px); }
.footer-list i { color: #f9a8d4; margin-top: .15rem; }

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  margin-bottom: 1.05rem;
}
.footer-brand__mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff5c8a, #a21caf);
  color: #fff;
  font-size: 1.05rem;
}
.footer-blurb { color: rgba(255, 255, 255, .66); font-size: .86rem; line-height: 1.8; margin: 0 0 1.4rem; }

.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; }
.footer-bottom a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.footer-bottom a:hover { color: #ffb3d1; }

/* ============================= MISC / HELPERS ============================= */
.stack-sm { display: grid; gap: .85rem; }
.stack-md { display: grid; gap: 1.5rem; }

.panel-soft {
  background: linear-gradient(180deg, #fff 0%, var(--cloud) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
}

.icon-mosaic {
  border-radius: var(--radius-3xl);
  background: linear-gradient(140deg, #701a45 0%, #a21caf 50%, #db2777 100%);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  box-shadow: 0 30px 60px -34px rgba(112, 26, 69, .95);
  position: relative;
  overflow: hidden;
}
.icon-mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .25) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: .35;
}
.icon-mosaic i {
  color: rgba(255, 255, 255, .92);
  font-size: 2.1rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.stat-strip {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-strip__item {
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--blush);
  border-radius: 1.25rem;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
}

.divider-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0;
}

.rating { color: #f59e0b; display: inline-flex; gap: .18rem; }

.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;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: .5rem;
  z-index: 300;
  background: var(--primary);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: .8rem;
  font-weight: 800;
  font-size: .82rem;
  text-decoration: none;
}
.skip-link:focus { left: .75rem; }

/* -------------------------- reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
}

/* --------------------------- print (legal docs) --------------------------- */
@media print {
  .site-header, .site-footer, .to-top, .toast-host, .doc-toc { display: none !important; }
  .doc-section { border-color: #ddd; break-inside: avoid; }
  body { color: #000; }
}