/* ==========================================================================
   BloodAI Analytics — homepage stylesheet
   --------------------------------------------------------------------------
   Loads once, last, after vendor/bootstrap(.rtl).min.css, vendor/fontawesome,
   vendor/fonts.css and tokens.css, on all eight hand-authored homepages
   (index/de/fr/it/es/pt/tr/ar). Nothing loads after this file and nothing
   else styles these pages — no legacy style.css, no home-legacy.css, no
   second design-system layer. Every value here is a token from tokens.css;
   this file owns layout, components and states only.

   Two things it is fighting on purpose:

   1. Bootstrap's utility classes (.text-center, .bg-light, .bg-dark, .shadow,
      .shadow-sm, .border-0, .rounded-circle, .mx-auto, .text-muted/-primary/
      -success/-info/-warning) compile with `!important`. Where the visual
      brief requires a different value than the utility already on the
      markup — body copy that must read start-aligned instead of centred,
      cards that must sit flat instead of carrying a resting shadow, icon
      circles that must become brand tiles — the override needs `!important`
      too, or it is silently discarded. Every `!important` below either beats
      one of these utilities or beats an inline `style=""` attribute (next
      point); none is decorative.

   2. A run of inline `style=""` attributes hand-picks colours the brief asks
      to be themed instead (button fills, icon tints, the hero wash, the
      pricing header gradient). Inline declarations win over any stylesheet
      selector at equal importance, so `!important` is the only way to
      re-point them at tokens. Two spots carry an inline `!important` of
      their own — the "Most Popular" plan's border and the demo card's
      header gradient — and nothing in an external sheet can out-rank that;
      both are left alone and the surrounding chrome is designed around them
      instead of against them.

   Logical properties throughout (margin-inline, inset-inline, text-align:
   start/end, border-inline) so the RTL page (ar.html, dir="rtl", served with
   bootstrap.rtl.min.css) mirrors correctly with zero separate rules.
   ========================================================================== */

/* ------------------------------------------------------------------------
   0. Page-level base the markup itself asks for
   ------------------------------------------------------------------------ */

.anti-copy {
  -webkit-user-select: none;
  user-select: none;
}

/* Custom scrollbar, purely cosmetic, safe to keep un-themed-per-hue: neutral
   ink at low opacity so it reads correctly on both surface tones. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 42%, transparent); }

/* JS toggles this to flex on click; default state must be hidden or every
   render shows the spinner. */
.loading-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  text-align: center;
  padding: var(--s-5);
}
.loading-screen h3 { color: var(--ink); }
.loading-screen p { color: var(--ink-2); }

@keyframes home-spin { to { transform: rotate(360deg); } }
.loading-screen [style*="animation"] { animation-name: home-spin; }

/* ------------------------------------------------------------------------
   1. Section rhythm — alternating surfaces, token vertical cadence
   ------------------------------------------------------------------------ */

/* Bootstrap's .py-5 is a fixed 3rem and !important. Replace it with the
   shared clamp so section spacing breathes the same way on every page that
   loads tokens.css. */
.py-5 { padding-block: var(--section-y) !important; }

/* Sections with no explicit Bootstrap background utility show the page wash
   by default; pin them to --surface so the alternation against .bg-light
   (retinted below) reads as a deliberate pulse, not an accident of markup. */
#features,
#supplement-nutrition,
#how-it-works,
#faq {
  background: var(--surface);
}

/* .bg-light / .bg-dark are !important utilities carrying Bootstrap's own
   grey and near-black. Retint both to the token surfaces so "technology
   partner", pricing, demo, contact (bg-light) and the footer (bg-dark) sit
   inside the same system instead of two unrelated greys. */
.bg-light { background: var(--surface-2) !important; }
.bg-dark { background: var(--ink) !important; }

/* .text-primary/-success/-info/-warning/-muted are !important utilities
   carrying Bootstrap's own theme colours (blue, green, amber, grey) —
   used throughout for icons (contact offices, feature-list checkmarks) and
   for every section-intro paragraph. Without this they would render in
   Bootstrap's palette, not this brand's, on an otherwise fully tokenised
   page. Scoped rules later (the hero trust row, the dark footer) carry
   higher specificity and correctly win over these defaults. */
.text-primary { color: var(--brand) !important; }
.text-success { color: var(--ok) !important; }
.text-info { color: var(--brand-600) !important; }
.text-warning { color: var(--warn) !important; }
.text-muted { color: var(--ink-2) !important; }

/* ------------------------------------------------------------------------
   2. Typography scale
   ------------------------------------------------------------------------ */

/* h1–h6 already get family/weight/colour/tracking from tokens.css. Bootstrap
   still owns raw font-size for headings and the .h1–.h6 helper classes
   (component-level, not !important), so unify the scale here — one set of
   sizes for every language, no per-page drift. */
h2 { font-size: var(--t-3xl); }
h3, .h3 { font-size: var(--t-2xl); }
.h4 { font-size: var(--t-xl); font-family: var(--display); font-weight: 700; letter-spacing: var(--tight); }
.h5 { font-size: var(--t-lg); font-family: var(--display); font-weight: 700; letter-spacing: var(--tight); }

/* Section kickers: "Centre only a section's own kicker/heading/lead block."
   These <header class="text-center"> wrappers are exactly that, so their
   Bootstrap centring is kept, just given a measure and rhythm. */
main > section > .container > header.text-center,
main > section > .container > .supplement-nutrition-section > header.text-center {
  max-width: 46rem;
  margin-inline: auto;
}
/* These <p> already carry Bootstrap's .text-muted (retinted to --ink-2
   above with !important); no separate rule needed here. */

/* ------------------------------------------------------------------------
   3. Body copy alignment — the twelve cards
   ------------------------------------------------------------------------ */

/* Bootstrap's .text-center is `text-align: center !important`. It sits on
   exactly twelve .card-body elements on this page (six feature cards, four
   how-it-works steps, two contact-office cards) and on nothing that should
   stay centred — the section headers above use a plain <header>, not a
   .card-body, so this selector cannot reach them. Needs !important to win;
   without it the rule below silently loses to Bootstrap's, which is what
   sank the previous attempt. */
.card-body.text-center {
  text-align: start !important;
}

/* ------------------------------------------------------------------------
   4. Cards — one consistent treatment everywhere
   ------------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
/* .border-0 and .shadow-sm/.shadow are !important utilities every card in
   the markup already carries. Flat at rest, one hairline, lift on hover —
   never a resting drop shadow. */
.card.border-0 { border: 1px solid var(--line) !important; }
.card.shadow-sm,
.card.shadow {
  box-shadow: var(--sh-1) !important;
}
.card.shadow-sm:hover,
.card.shadow:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2) !important;
  border-color: var(--line-2) !important;
}
.card-body { padding: var(--s-5); }
.card-title { color: var(--ink); }
.card-text { color: var(--ink-2); }
.card-header {
  font-family: var(--display);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) var(--s-5);
}
.card-footer.border-0 {
  border-top: 1px solid var(--line) !important;
  color: var(--ink-2);
}

/* Icon tiles: every .rounded-circle.mx-auto on this page lives inside a
   .card-body.text-center (the six "why choose" cards' 80px circles and the
   four how-it-works 60px circles) — nothing else on the page uses that
   combination, so this cannot catch the scroll-to-top FAB, which is a real
   circle by design and stays one. .rounded-circle and .mx-auto are both
   !important utilities and each icon carries its own inline
   background-color/color, so every property below needs !important to
   actually land. Square-ish brand tile at the line's start, not a pale
   centred circle. */
.card-body.text-center .rounded-circle.mx-auto {
  border-radius: var(--r) !important;
  background: var(--brand-soft) !important;
  margin-inline: 0 !important;
  margin-block-end: var(--s-4) !important;
}
.card-body.text-center .rounded-circle.mx-auto > * {
  color: var(--brand) !important;
}

/* ------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------ */

.btn {
  font-weight: 600;
  border-radius: var(--r);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Every .btn-primary on the page (hero CTA, upload button, both pricing
   CTAs, scroll-to-top) hardcodes the same inline background/border colour.
   One rule re-points all of them at the brand token; !important is required
   only because of that inline attribute. */
.btn-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: var(--sh-brand);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  box-shadow: var(--sh-2), var(--sh-brand);
  transform: translateY(-1px);
}
.btn-primary:active { background: var(--brand-700) !important; border-color: var(--brand-700) !important; }

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: var(--brand-soft) !important;
  border-color: var(--brand-600) !important;
  color: var(--brand-700) !important;
}

.btn-secondary {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--line-2); }

/* ------------------------------------------------------------------------
   6. Alerts, badges, forms — the generic components this page actually uses
   ------------------------------------------------------------------------ */

.alert {
  border: 1px solid transparent;
  border-radius: var(--r);
  border-inline-start-width: 4px;
  text-align: start;
}
.alert-info,
.alert-primary {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  border-inline-start-color: var(--brand);
  color: var(--brand-700);
}
.alert-info i,
.alert-primary i { color: var(--brand); }

.badge {
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 0.35em 0.7em;
}

.form-control {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ------------------------------------------------------------------------
   7. Navbar
   ------------------------------------------------------------------------ */

.navbar {
  padding-block: var(--s-3);
}
/* .bg-white and .shadow-sm are !important utilities on this element;
   frosted-sticky needs its own background and a hairline, not Bootstrap's
   flat white + drop shadow. */
.navbar.bg-white {
  background: var(--surface) !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none !important;
  border-block-end: 1px solid var(--line);
}
.navbar-brand { display: flex; align-items: center; }
.navbar-brand > span { color: var(--ink) !important; letter-spacing: var(--tight); }
.navbar-brand > span > span { color: var(--brand) !important; }
.navbar-nav .nav-link {
  color: var(--ink-2);
  font-weight: 600;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--brand);
  background: var(--brand-soft);
}
.navbar-toggler {
  border-color: var(--line-2);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--brand-ring); }

/* Language dropdown in the primary nav */
.language-selector .dropdown-toggle::after { margin-inline-start: var(--s-2); vertical-align: 0.1em; }
.language-selector .current-language {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
}
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  padding-block: var(--s-2);
}
.dropdown-item {
  color: var(--ink-2);
  text-align: start;
  padding-inline: var(--s-4);
  padding-block: var(--s-2);
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-700);
}
.dropdown-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}

/* ------------------------------------------------------------------------
   8. Hero — the strongest thing on the page
   ------------------------------------------------------------------------ */

/* -----------------------------------------------------------------------
   Hero palette — deliberately NOT token-derived.
   --brand-* lighten in dark mode, which is correct for text and icons and
   wrong for a full-bleed band: the hero inverted into a bright lavender
   panel under a dark navbar. These three stay deep in both schemes, so the
   hero reads as the same object whichever scheme the reader is in, and the
   foreground stays a fixed near-white rather than --page.
   ----------------------------------------------------------------------- */
:root {
  --hero-1: #1b1e78;
  --hero-2: #2f32b8;
  --hero-3: #3f2ea6;
  --hero-ink: #f4f6ff;
  --hero-ink-2: rgba(244, 246, 255, 0.82);
}

/* The hero <section> has no id, only aria-labelledby="hero-heading"; that
   attribute is stable markup (it is what makes the section accessible) and
   unique on the page, so it doubles as the hook here. Its inline background
   is a pale wash, not !important, so !important reliably replaces it with a
   deep, multi-stop band built entirely from brand tokens. --brand-700/
   --brand/--brand-600 read as a rich indigo in light mode; in dark mode the
   same tokens invert to a light, luminous lavender, so the band stays
   built from the same three custom properties in both schemes without a
   separate dark-mode block. Heading and button colours below are chosen
   from --page (the opposite end of the light/dark scale from the band's
   own tokens) for exactly the same reason: the pairing keeps >7:1 contrast
   automatically whichever scheme is active. */
section[aria-labelledby="hero-heading"] {
  background:
    radial-gradient(120% 160% at 14% -25%, color-mix(in srgb, var(--hero-2) 60%, transparent) 0%, transparent 58%),
    radial-gradient(90% 130% at 100% 115%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--hero-1) 0%, var(--hero-3) 52%, var(--hero-2) 100%) !important;
  padding-block: calc(var(--section-y) * 1.15) !important;
  position: relative;
  overflow: clip;
}

#hero-heading {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--hero-ink) !important;
  font-size: var(--t-5xl);
  font-weight: 800;
  max-width: 20ch;
}

.hero-description {
  color: var(--hero-ink-2);
  font-size: var(--t-lg);
  max-width: var(--measure);
}
.hero-description a[style] {
  color: var(--hero-ink) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* Primary CTA on the deep band: an inverted pill so it is unmistakably the
   one action to take. Secondary stays a quiet ghost outline beside it. */
section[aria-labelledby="hero-heading"] .btn-primary {
  background: var(--hero-ink) !important;
  border-color: var(--hero-ink) !important;
  color: var(--hero-1) !important;
  box-shadow: var(--sh-2);
}
section[aria-labelledby="hero-heading"] .btn-primary:hover,
section[aria-labelledby="hero-heading"] .btn-primary:focus-visible {
  background: color-mix(in srgb, var(--hero-ink) 88%, transparent) !important;
  color: var(--hero-1) !important;
}
section[aria-labelledby="hero-heading"] .btn-outline-primary {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--hero-ink) 45%, transparent) !important;
  color: var(--hero-ink) !important;
}
section[aria-labelledby="hero-heading"] .btn-outline-primary:hover,
section[aria-labelledby="hero-heading"] .btn-outline-primary:focus-visible {
  background: color-mix(in srgb, var(--hero-ink) 16%, transparent) !important;
  border-color: var(--hero-ink) !important;
  color: var(--hero-ink) !important;
}

/* Trust row: four bare <span>s in a .small.text-muted wrapper, no custom
   class at all. Turned into instrument-panel chips instead of loose text —
   still every word the owner asked to keep, just legible on the band. The
   four colour utilities on the icons (.text-success/-primary/-info/-warning)
   are !important and would otherwise clash against the deep background. */
section[aria-labelledby="hero-heading"] .small.text-muted {
  color: color-mix(in srgb, var(--hero-ink) 90%, transparent) !important;
  row-gap: var(--s-2);
}
section[aria-labelledby="hero-heading"] .small.text-muted > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.9em;
  background: color-mix(in srgb, var(--hero-ink) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 24%, transparent);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--hero-ink) 95%, transparent);
}
section[aria-labelledby="hero-heading"] .small.text-muted .text-success,
section[aria-labelledby="hero-heading"] .small.text-muted .text-primary,
section[aria-labelledby="hero-heading"] .small.text-muted .text-info,
section[aria-labelledby="hero-heading"] .small.text-muted .text-warning {
  color: inherit !important;
}

/* .shadow on the hero illustration is !important; replace Bootstrap's flat
   drop shadow with a grounded shadow plus a hairline ring so the image
   reads as sitting on the band rather than floating with a grey smear. */
section[aria-labelledby="hero-heading"] img.shadow {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 0 0 1px color-mix(in srgb, var(--hero-ink) 20%, transparent) !important;
  border-radius: var(--r-xl) !important;
}

@media (max-width: 991.98px) {
  #hero-heading { font-size: var(--t-4xl); max-width: none; }
}

/* ------------------------------------------------------------------------
   9. AI Supplement Recommendation & Nutrition Diet AI
   ------------------------------------------------------------------------ */

.supplement-nutrition-section {
  background: linear-gradient(155deg, var(--brand-soft) 0%, var(--surface) 62%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--section-y) var(--s-6);
  position: relative;
  overflow: clip;
}
.supplement-nutrition-section::before {
  content: '';
  position: absolute;
  inset-block-start: -35%;
  inset-inline-end: -25%;
  width: 65%;
  height: 90%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
#supplement-nutrition-heading i[style] { color: var(--ok) !important; }

.feature-highlight-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  height: 100%;
  text-align: start;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.feature-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--line-2);
}
.feature-highlight-card ul { color: var(--ink-2); }
.feature-highlight-card ul li { text-align: start; }

.feature-highlight-icon {
  width: 62px;
  height: 62px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xl);
  margin-block-end: var(--s-5);
}
.supplement-icon { background: var(--ok-soft); color: var(--ok); }
.nutrition-icon { background: var(--warn-soft); color: var(--warn); }

.trust-signals {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: start;
  height: 100%;
}
.trust-badge i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-md);
}
.trust-badge strong { color: var(--ink); }

/* ------------------------------------------------------------------------
   10. Technology partner
   ------------------------------------------------------------------------ */

.technology-partner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  text-align: center;
}
.technology-partner h3 { color: var(--ink); }
.technology-partner p { color: var(--ink-2); max-width: var(--measure); margin-inline: auto; }

/* ------------------------------------------------------------------------
   11. Pricing — the conversion moment
   ------------------------------------------------------------------------ */

.pricing-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.pricing-card.border-0 { border: 1px solid var(--line) !important; }
.pricing-card.shadow { box-shadow: var(--sh-1) !important; }
.pricing-card.shadow:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2) !important;
}
/* The popular card's own inline border is `!important` and cannot be
   out-ranked from here — by design its indigo reads correctly on --surface
   in both schemes, so the rest of the treatment (elevation, badge, header)
   is built to complement it rather than fight it. */
.pricing-card.position-relative:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3) !important;
}

.pricing-header {
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.pricing-header.bg-light { background: var(--surface-2) !important; }
/* Inline, not !important — safe to retheme onto brand tokens. */
.pricing-header[style*="linear-gradient"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-600)) !important;
}
.pricing-price {
  font-family: var(--display);
  font-size: var(--t-4xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tight);
  line-height: 1.1;
}
.pricing-period { color: var(--ink-3); }
.pricing-header[style*="linear-gradient"] .pricing-period { color: color-mix(in srgb, #fff 78%, transparent); }

.pricing-features {
  padding: var(--s-5) var(--s-5) 0;
  flex: 1;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-2);
  text-align: start;
  color: var(--ink-2);
  border-block-end: 1px solid var(--line);
}
.pricing-feature:last-child { border-block-end: 0; }
.pricing-feature i {
  color: var(--ok);
  margin-block-start: 0.2em;
  flex: 0 0 auto;
}
.pricing-feature span { color: var(--ink); }

.pricing-cta { padding: var(--s-5); }
.pricing-cta .btn { width: 100%; }

.popular-badge {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  background: var(--accent);
  color: #fff;
  padding: 0.3em 0.9em;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--wide);
  text-transform: uppercase;
  box-shadow: var(--sh-1);
}

/* ------------------------------------------------------------------------
   12. Demo — the interactive analyzer preview
   ------------------------------------------------------------------------ */

.analyzer-preview {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  position: relative;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.analyzer-preview:hover,
.analyzer-preview:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--line-2);
}

.analyzer-header {
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.analyzer-title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.analyzer-title i[style] { color: var(--brand) !important; }
.analyzer-controls { display: flex; align-items: center; gap: var(--s-2); }
.analyzer-control {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface-3);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.analyzer-preview:hover .analyzer-control { background: var(--line-2); color: var(--ink-2); }

.analyzer-content { padding: var(--s-5); }
.analyzer-ui { display: flex; flex-direction: column; gap: var(--s-5); }

.analyzer-upload-area {
  border: 2px dashed var(--line-2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6) var(--s-5);
  background: var(--surface-2);
  gap: var(--s-3);
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.analyzer-preview:hover .analyzer-upload-area,
.analyzer-preview:focus-visible .analyzer-upload-area {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.upload-icon {
  width: 76px;
  height: 76px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-2xl);
  transition: transform var(--base) var(--ease);
}
.analyzer-preview:hover .upload-icon { transform: scale(1.06); }

.upload-text { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: var(--t-lg); }
.upload-hint { color: var(--ink-2); max-width: 42ch; }

.analyzer-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.analyzer-feature {
  flex: 1 1 150px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  text-align: start;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.analyzer-preview:hover .analyzer-feature { border-color: var(--line-2); }

.feature-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-base);
}
.feature-label { font-weight: 700; color: var(--ink); font-size: var(--t-sm); }

.analyzer-overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--s-5);
  display: flex;
  justify-content: center;
  background: linear-gradient(to top, color-mix(in srgb, var(--surface) 95%, transparent) 0%, transparent 100%);
  pointer-events: none;
}
.try-now-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-brand);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
  pointer-events: auto;
}
.analyzer-preview:hover .try-now-badge {
  transform: translateY(-3px);
  box-shadow: var(--sh-2), var(--sh-brand);
}

@media (max-width: 767.98px) {
  .analyzer-features { flex-direction: column; }
  .analyzer-feature { min-width: 100%; }
}

/* ------------------------------------------------------------------------
   13. FAQ accordion
   ------------------------------------------------------------------------ */

.accordion-item.border-0 { border: 1px solid var(--line) !important; }
.accordion-item.shadow-sm { box-shadow: var(--sh-1) !important; }
.accordion-item {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  background: var(--surface);
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: var(--sh-2) !important;
}
.accordion-button {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  text-align: start;
}
.accordion-button:not(.collapsed) {
  background: var(--brand-soft);
  color: var(--brand-700);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.accordion-body { color: var(--ink-2); text-align: start; }

/* ------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------ */

footer.bg-dark { color: color-mix(in srgb, #fff 92%, transparent); }
footer.bg-dark p.text-muted { color: color-mix(in srgb, #fff 60%, transparent) !important; }
footer.bg-dark a.text-white:hover,
footer.bg-dark a.text-white:focus-visible {
  color: var(--brand-soft) !important;
  text-decoration: underline;
}
.language-links a { display: inline-block; padding-block: var(--s-1); }

.powered-by-section {
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: var(--r);
  padding: var(--s-4);
  text-align: center;
}
.powered-by-section p { color: color-mix(in srgb, #fff 78%, transparent); font-size: var(--t-sm); }
.powered-by-section a {
  color: color-mix(in srgb, #fff 96%, transparent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
.powered-by-section a:hover { color: var(--brand-soft); }

/* ------------------------------------------------------------------------
   15. Modals (Privacy Policy / Terms of Service)
   ------------------------------------------------------------------------ */

.modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.modal-header {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
  border-bottom: 0;
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}
.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.modal-header .btn-close:hover { opacity: 1; }
.modal-body { color: var(--ink-2); max-height: 70vh; overflow-y: auto; }
.modal-body h3 { color: var(--brand); margin-block-start: var(--s-5); }
.modal-body h4 { color: var(--ink); margin-block-start: var(--s-4); }
.modal-body p,
.modal-body ul { color: var(--ink-2); }
.modal-body ul li { margin-block-end: var(--s-2); text-align: start; }
.modal-footer { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------------
   16. Small screens — 360px baseline
   ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {
  #hero-heading { font-size: var(--t-3xl); }
  .supplement-nutrition-section,
  .technology-partner,
  .trust-signals { padding: var(--s-5) var(--s-4); }
  .feature-highlight-card { padding: var(--s-5); }
  .analyzer-content { padding: var(--s-4); }
  .try-now-badge { font-size: var(--t-sm); padding: var(--s-2) var(--s-4); }
}

/* -----------------------------------------------------------------------
   Scroll-to-top button
   Ships as `position-fixed bottom-0 end-0 translate-middle-y` with an inline
   `margin: 2rem`, which on a 390px screen parks it on top of the last two
   lines of whatever card is in view. Pulled into the corner properly, made
   smaller on phones, and given a safe-area inset so it clears the home
   indicator on notched devices.
   ----------------------------------------------------------------------- */
#scroll-to-top {
  margin: 0 !important;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  inset-inline-end: 1rem !important;
  inset-block-start: auto !important;
  inset-inline-start: auto !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: var(--sh-brand);
  opacity: 0.94;
}
#scroll-to-top:hover,
#scroll-to-top:focus-visible { opacity: 1; }

@media (min-width: 992px) {
  #scroll-to-top {
    inset-block-end: 2rem !important;
    inset-inline-end: 2rem !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* -----------------------------------------------------------------------
   Contrast repairs found by scripts/check-visual.mjs
   Measured in a browser against what is actually painted, not read off the
   source. Each of these passed in light mode and failed in dark, which is
   exactly the case a phone at night hits.
   ----------------------------------------------------------------------- */

/* --brand lightens in dark mode — correct for text on a dark surface, wrong
   as a fill under white text, where it measured 2.91:1. Filled buttons use
   the fixed brand instead, and the light pill takes the fixed brand as ink. */
.btn-primary,
.btn.btn-primary,
#pricing .btn-primary,
.pricing-cta .btn-primary {
  background: var(--brand-solid) !important;
  border-color: var(--brand-solid) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: color-mix(in srgb, var(--brand-solid) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--brand-solid) 88%, #000) !important;
  color: #fff !important;
}
.btn-light,
.btn-outline-light {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--brand-solid) !important;
}

/* Links carrying the old hardcoded #4f46e5 as an inline attribute measured
   2.97:1 once the surface behind them went dark. */
a[style*="#4f46e5"],
a[style*="color: #4f46e5"],
a[style*="rgb(79, 70, 229)"] {
  color: var(--brand) !important;
}

/* Bootstrap's `.bg-white` is `background-color: #fff !important`, so it stayed
   white in dark mode and anything inside it — the pricing CTA's outline button
   — measured 2.91:1. Only !important reaches it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bg-white { background-color: var(--surface) !important; }
}
:root[data-theme='dark'] .bg-white { background-color: var(--surface) !important; }

/* -----------------------------------------------------------------------
   Hero illustration
   The asset is a transparent PNG with the wordmark baked into it: the drop
   mark, the words "BloodAI Analytics" in dark navy and grey, and the vial.
   On the deep hero band that lettering sat straight on the blue at poor
   contrast, and it repeated the wordmark already in the navbar two inches
   above — it read as a sticker rather than as part of the page.

   Rather than ship another asset, the image is cropped to the vial alone.
   `cover` on a tall box with the focus pushed toward the end of the image
   shows roughly the right-hand 39% of it, which is exactly the vial; the
   wordmark and the duplicate drop mark fall outside the window. A soft brand
   bloom sits behind it so it belongs to the band instead of floating on it.
   ----------------------------------------------------------------------- */
section[aria-labelledby="hero-heading"] .col-lg-6:last-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

section[aria-labelledby="hero-heading"] .col-lg-6:last-child::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: clamp(240px, 34vw, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 66%);
  filter: blur(26px);
  pointer-events: none;
}

section[aria-labelledby="hero-heading"] .col-lg-6:last-child img {
  position: relative;
  width: clamp(240px, 32vw, 430px);
  height: auto;
  max-width: 100%;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  /* No drop-shadow: it is rasterised before the mask, so the shadow of the
     masked-away lettering survives as hard rectangles. The bloom behind the
     image supplies the depth instead. */
  /* Keep the drop mark and the vial, drop the baked-in wordmark.
     Measured off the asset rather than guessed: in the left half of the image
     the drop mark occupies y 38-58%, "BloodAI" y 63-73% and "Analytics"
     y 77-86%. So the lettering is exactly the region x < 52% AND y > 61%.
     The mask is the union of "right of 52%" and "above 61%", which keeps both
     graphics and removes only the text. Cropping to the vial alone — the
     previous attempt — left a lone floating tube. */
  --wordmark-mask:
    linear-gradient(to right, transparent 0 52%, #000 52%),
    linear-gradient(to bottom, #000 0 61%, transparent 61%);
  -webkit-mask-image: var(--wordmark-mask);
  mask-image: var(--wordmark-mask);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 991.98px) {
  section[aria-labelledby="hero-heading"] .col-lg-6:last-child img {
    width: clamp(160px, 46vw, 220px);
  }
}

/* -----------------------------------------------------------------------
   Vertical rhythm on the hand-authored pages
   These carry fourteen sections against the generated pages' eight, so any
   slack between them compounds. Bootstrap spacing utilities sitting on the
   section elements themselves stacked on top of the section padding — a
   `.py-5 .mb-5` hero added 48px on top of its own 92px — and a section's last
   child kept its own bottom margin inside that padding.
   ----------------------------------------------------------------------- */
section.mb-5,
section.mt-5,
section.my-5 { margin-block: 0 !important; }

section > .container > :last-child,
section > .container-fluid > :last-child,
section > .container > .row:last-child { margin-block-end: 0 !important; }

/* A section header block should sit close to what it introduces. */
section > .container > .text-center:first-child,
section > .container > header:first-child { margin-block-end: var(--s-5) !important; }