/* ==========================================================================
   LiverCare AI — Hero screen
   Layout is expressed in reference-pixel units: every size is written as
   `calc(<reference px> * var(--u))`, where --u is one reference pixel scaled
   to the current viewport. That keeps the approved proportions intact.
   ========================================================================== */

:root {
  /* 1 reference pixel. The design canvas is 1448 x 1086, so the unit tracks
     whichever axis is tighter — that keeps the whole composition inside one
     viewport on short/wide screens without changing any proportion. Clamped so
     it never grows past the approved scale on very large monitors. */
  --u: max(0.60px, min(0.0690608vw, 0.1005vh));

  /* the navbar gets its own unit that depends on viewport WIDTH only, so the
     bar keeps the same size no matter how short the window is or how far the
     page is scrolled */
  --nu: clamp(0.66px, 0.0690608vw, 1.9px);

  /* palette — taken from the approved reference only */
  --white: #ffffff;
  --ice: #f4f7fb;
  --light-blue: #dce9f7;
  --blue: #1766e8;
  --blue-top: #2d7df0;
  --blue-bottom: #1357cf;
  --blue-deep: #0f49b7;
  --navy: #09162f;
  --ink: #071329;
  --slate: #35445e;
  --muted: #5c6b82;

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: var(--navy);
  background: var(--ice);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Decorative hero artwork must never increase the page width on narrow
   devices. Individual sections retain their own vertical scrolling. */
html,
body { overflow-x: clip; }

::selection { color: #ffffff; background: #1766e8; }

html { scrollbar-color: #97b9e7 #edf3fa; scrollbar-width: thin; }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #edf3fa; }
body::-webkit-scrollbar-thumb {
  border: 3px solid #edf3fa;
  border-radius: 999px;
  background: #97b9e7;
}

/* ==========================================================================
   STAGE — clinical photograph, ambient light, liver aura
   ========================================================================== */

.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.stage__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 62% 42%;
  animation:
    photoIn 1400ms var(--ease-soft) 120ms both,
    heroDrift 34s var(--ease-soft) 1500ms infinite;
}

/* the sharp photo is sized from the same unit as the rest of the hero, so the
   doctor/patient visual grows and shrinks with the text at every zoom level.
   A blurred copy fills whatever the sharp layer does not cover. */
.hero-bg-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1448 * var(--u));
  height: calc(1086 * var(--u));
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
  filter: saturate(0.88) contrast(1.02);
}

.hero-bg-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
  filter: blur(26px) saturate(106%);
  transform: scale(1.1);
}

/* the loop only runs while the hero is on screen (toggled from JS) */
.stage.is-hero-idle .stage__photo,
.stage.is-hero-idle .stage__ambient,
.stage.is-hero-idle .liver-aura,
.stage.is-hero-idle .stage__sheen { animation-play-state: paused; }

/* slow blue light sweeping across the clinical photograph */
.stage__sheen {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(28% 34% at 30% 40%,
      rgba(150, 205, 255, 0.22), rgba(150, 205, 255, 0) 70%);
  animation: heroSheen 26s var(--ease-soft) 1500ms infinite;
}

.stage__ambient {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 22% 34%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 70%),
    radial-gradient(38% 40% at 78% 22%, rgba(150, 205, 255, 0.16), rgba(150, 205, 255, 0) 72%),
    radial-gradient(60% 50% at 50% 100%, rgba(228, 243, 255, 0.2), rgba(228, 243, 255, 0) 70%);
  animation: ambientDrift 19s var(--ease-soft) infinite alternate;
}

.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg,
      rgba(247, 250, 253, 0.93) 0%,
      rgba(247, 250, 253, 0.72) 34%,
      rgba(247, 250, 253, 0.06) 64%,
      rgba(247, 250, 253, 0.02) 100%);
}

/* translucent liver-health glass graphic glow (sits over the panel in the art) */
.liver-aura {
  position: absolute;
  left: 66.5%;
  top: 18.5%;
  width: 19%;
  height: 26%;
  pointer-events: none;
  border-radius: 28% 28% 26% 26%;
  background:
    radial-gradient(60% 60% at 42% 38%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 72%),
    radial-gradient(70% 70% at 62% 62%, rgba(120, 190, 255, 0.24), rgba(120, 190, 255, 0) 74%);
  filter: blur(18px);
  animation:
    auraIn 1100ms var(--ease-soft) 1200ms both,
    auraFloat 9s var(--ease-soft) 2200ms infinite;
}

/* ==========================================================================
   HERO SHELL — the big rounded glass container
   ========================================================================== */

.hero {
  position: absolute;
  left: 2.76%;
  right: 3.04%;
  top: 5.06%;
  bottom: 7.18%;
  display: flex;
  flex-direction: column;
  padding: calc(38 * var(--u)) calc(28 * var(--u)) calc(34 * var(--u)) calc(35 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: clamp(22px, calc(30 * var(--u)), 30px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035) 60%);
  box-shadow:
    0 calc(24 * var(--u)) calc(64 * var(--u)) rgba(9, 35, 75, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  animation: shellIn 1000ms var(--ease-soft) 60ms both;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.nav {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(91 * var(--u));
  flex: 0 0 auto;
  padding-left: calc(40 * var(--u));
  padding-right: calc(18 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: calc(46 * var(--u));
  background: rgba(250, 252, 255, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow:
    0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(9, 35, 75, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: navIn 760ms var(--ease-out) 360ms both;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* gap: calc(10 * var(--u)); */
  text-decoration: none;
  animation: fadeUp 700ms var(--ease-out) 560ms both;
}

.nav__mark {
  display: block;
  width: calc(56 * var(--u));
  height: calc(46 * var(--u));
}

.nav__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(17, 90, 190, 0.16));
}

.nav__word {
  font-size: calc(28 * var(--u));
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #000000;
  white-space: nowrap;
}

.nav__word-accent { color: var(--blue); }

.nav__links {
  display: flex;
  align-items: center;
  gap: calc(42 * var(--u));
  margin-left: calc(85 * var(--u));
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: calc(19 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #2e3440;
  text-decoration: none;
  white-space: nowrap;
  transition: color 260ms var(--ease-out);
  animation: linkIn 620ms var(--ease-out) calc(660ms + var(--i) * 70ms) both;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: calc(-9 * var(--u));
  height: calc(2 * var(--u));
  border-radius: 2px;
  background: var(--blue);
  opacity: 0;
  transition: left 300ms var(--ease-out), right 300ms var(--ease-out), opacity 300ms var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--blue); }

.nav__link:hover::after,
.nav__link:focus-visible::after { left: 0; right: 0; opacity: 1; }

.nav__link.is-active { color: var(--blue); font-weight: 500; }

.nav__cta {
  position: relative;
  margin-left: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(243 * var(--u));
  height: calc(59 * var(--u));
  padding-right: calc(38 * var(--u));
  border: 0;
  border-radius: calc(30 * var(--u));
  font-family: inherit;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--white);
  cursor: pointer;
  background: linear-gradient(180deg, var(--blue-top), var(--blue-bottom));
  box-shadow:
    0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(15, 105, 210, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  animation: ctaPop 760ms var(--ease-soft) 980ms both;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  transform: translateY(calc(-3 * var(--u)));
  box-shadow:
    0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(15, 105, 210, 0.42),
    0 0 0 calc(5 * var(--u)) rgba(64, 147, 239, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav__cta-arrow,
.panel__cta-arrow {
  position: absolute;
  right: calc(8 * var(--u));
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.nav__cta:hover .nav__cta-arrow,
.nav__cta:focus-visible .nav__cta-arrow,
.panel__cta:hover .panel__cta-arrow,
.panel__cta:focus-visible .panel__cta-arrow {
  opacity: 1;
  transform: translateX(calc(2 * var(--u))) scale(1.04);
}

.nav__burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #2e3440;
  transition: transform 260ms var(--ease-out), opacity 200ms linear;
}

.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO BODY — headline + supporting copy
   ========================================================================== */

.hero__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}

.hero__copy {
  padding-left: calc(30 * var(--u));
  margin-top: calc(20 * var(--u));
  width: min(calc(650 * var(--u)), 52vw);
  max-width: 650px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(12px, calc(18 * var(--u)), 18px);
  font-size: clamp(0.75rem, calc(14 * var(--u)), 0.875rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--blue-deep);
  animation: fadeUp 760ms var(--ease-out) 680ms both;
}

.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(23, 102, 232, 0.1);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.65rem, calc(60 * var(--u)), 3.75rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.line__in {
  display: inline-block;
  animation: lineUp 900ms var(--ease-soft) calc(780ms + var(--i) * 120ms) both;
}

.line--accent { color: var(--blue); position: relative; }

.line--accent .line__in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.72) 45%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-110%);
  animation: accentSweep 1200ms var(--ease-soft) 1160ms both;
  pointer-events: none;
}

.hero__lead {
  margin: clamp(16px, calc(22 * var(--u)), 22px) 0 0;
  font-size: clamp(1rem, calc(19 * var(--u)), 1.1875rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.003em;
  color: #34435a;
  max-width: 50ch;
  animation: fadeUp 900ms var(--ease-out) 1240ms both;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, calc(26 * var(--u)), 26px);
  animation: fadeUp 820ms var(--ease-out) 1360ms both;
}

.hero__cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out),
              border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}

.hero__cta svg { width: 17px; height: 17px; flex: none; transition: transform 240ms var(--ease-out); }
.hero__cta:hover svg, .hero__cta:focus-visible svg { transform: translateX(2px); }

.hero__cta--primary {
  color: var(--white);
  background: linear-gradient(180deg, var(--blue-top), var(--blue-bottom));
  box-shadow: 0 9px 20px rgba(15, 105, 210, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero__cta--secondary {
  color: var(--navy);
  border-color: rgba(23, 102, 232, 0.2);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.hero__cta:hover, .hero__cta:focus-visible { transform: translateY(-2px); }
.hero__cta--primary:hover, .hero__cta--primary:focus-visible { box-shadow: 0 13px 26px rgba(15, 105, 210, 0.32); }
.hero__cta--secondary:hover, .hero__cta--secondary:focus-visible {
  color: var(--blue-deep);
  border-color: rgba(23, 102, 232, 0.38);
  background: rgba(255, 255, 255, 0.9);
}
.hero__cta:active { transform: translateY(0) scale(0.985); }
.hero__cta:focus-visible { outline: 2px solid rgba(6, 106, 217, 0.65); outline-offset: 3px; }

/* ==========================================================================
   ASSESSMENT PANEL
   ========================================================================== */

.panel {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(calc(186 * var(--u)), 0.9fr);
  column-gap: clamp(12px, calc(18 * var(--u)), 18px);
  align-items: end;
  padding: clamp(18px, calc(23 * var(--u)), 23px) clamp(18px, calc(24 * var(--u)), 24px);
  border: 0;
  border-radius: clamp(16px, calc(20 * var(--u)), 20px);
  background: rgba(248, 251, 255, 0.92);
  box-shadow:
    0 calc(18 * var(--u)) calc(46 * var(--u)) rgba(9, 35, 75, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
  animation: panelUp 1000ms var(--ease-soft) 1180ms both;
}

.panel__field {
  min-width: 0;
  animation: fadeUp 760ms var(--ease-out) calc(1440ms + var(--i) * 110ms) both;
}

/* The three report fields and action have equal, deliberate gutters. */
.panel > .panel__field:nth-child(1) { grid-column: 1; }
.panel > .panel__field:nth-child(2) { grid-column: 2; }
.panel > .panel__field:nth-child(3) { grid-column: 3; }
.panel > .panel__hint { grid-column: 1 / -1; }
.panel > .panel__action { grid-column: 4; }

.panel__action {
  min-width: 0;
  justify-self: stretch;
  animation: ctaPop 780ms var(--ease-soft) 1870ms both;
}

.panel__label {
  display: block;
  margin-bottom: calc(13 * var(--u));
  font-size: clamp(0.8125rem, calc(16 * var(--u)), 0.9375rem);
  font-weight: 700;
  letter-spacing: -0.004em;
  color: var(--navy);
}

.select { position: relative; }

.select select {
  width: 100%;
  height: clamp(50px, calc(56 * var(--u)), 56px);
  padding: 0 calc(52 * var(--u)) 0 calc(22 * var(--u));
  border: 1px solid rgba(36, 93, 170, 0.14);
  border-radius: calc(14 * var(--u));
  font-family: inherit;
  font-size: clamp(0.875rem, calc(16 * var(--u)), 1rem);
  font-weight: 400;
  color: var(--muted);
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    0 calc(7 * var(--u)) calc(20 * var(--u)) rgba(9, 35, 75, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out),
              color 200ms linear, transform 280ms var(--ease-out);
}

.select select:hover {
  border-color: rgba(64, 147, 239, 0.55);
  box-shadow:
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(30, 100, 180, 0.16),
    0 0 0 calc(4 * var(--u)) rgba(64, 147, 239, 0.1);
}

.select select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow:
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(30, 100, 180, 0.18),
    0 0 0 calc(4 * var(--u)) rgba(6, 106, 217, 0.18);
}

.select select[aria-invalid="true"] {
  border-color: #d8433f;
  box-shadow: 0 0 0 4px rgba(216, 67, 63, 0.12);
}

.select select.is-chosen { color: var(--navy); }

.select__chevron {
  position: absolute;
  top: 50%;
  right: calc(23 * var(--u));
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  margin-top: calc(-9.5 * var(--u));
  color: #2e3440;
  pointer-events: none;
  transition: transform 280ms var(--ease-out), color 220ms linear;
}

.select:hover .select__chevron { color: var(--blue); transform: translateY(calc(1 * var(--u))); }

.select, .select select { min-width: 0; }

.panel__cta {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(50px, calc(56 * var(--u)), 56px);
  border: 0;
  padding-right: calc(44 * var(--u));
  border-radius: calc(14 * var(--u));
  font-family: inherit;
  font-size: clamp(0.9375rem, calc(17 * var(--u)), 1.0625rem);
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--white);
  cursor: pointer;
  background: linear-gradient(180deg, var(--blue-top), var(--blue-bottom));
  box-shadow:
    0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(15, 105, 210, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.panel__cta:hover,
.panel__cta:focus-visible {
  transform: translateY(calc(-3 * var(--u)));
  box-shadow:
    0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(15, 105, 210, 0.44),
    0 0 0 calc(5 * var(--u)) rgba(64, 147, 239, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav__cta:active,
.panel__cta:active { transform: translateY(0) scale(0.985); }

.nav__cta:focus-visible,
.panel__cta:focus-visible,
.nav__link:focus-visible,
.nav__brand:focus-visible { outline: 2px solid rgba(6, 106, 217, 0.65); outline-offset: 3px; }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes photoIn {
  from { opacity: 0; transform: scale(1.055); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shellIn {
  from { opacity: 0; transform: translateY(calc(14 * var(--u))) scale(0.988); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes navIn {
  from { opacity: 0; transform: translateY(calc(-22 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes linkIn {
  from { opacity: 0; transform: translateY(calc(-9 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(calc(16 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ctaPop {
  0%   { opacity: 0; transform: scale(0.9); box-shadow: 0 0 0 rgba(15, 105, 210, 0); }
  60%  { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes lineUp {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes accentSweep {
  from { transform: translateX(-110%); opacity: 0.9; }
  to   { transform: translateX(115%); opacity: 0; }
}

@keyframes panelUp {
  from { opacity: 0; transform: translateY(calc(40 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes auraIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes auraFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -1.6%, 0) scale(1.025); }
}

@keyframes heroDrift {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  35%  { transform: scale(1.014) translate3d(-0.5%, -0.35%, 0); }
  70%  { transform: scale(1.02) translate3d(0.4%, 0.3%, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes heroSheen {
  0%   { transform: translate3d(-6%, 2%, 0); opacity: 0.55; }
  50%  { transform: translate3d(8%, -3%, 0); opacity: 1; }
  100% { transform: translate3d(-6%, 2%, 0); opacity: 0.55; }
}

@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.8; }
  100% { transform: translate3d(1.4%, -1%, 0); opacity: 1; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .nav__links { gap: calc(34 * var(--u)); margin-left: calc(56 * var(--u)); }
}

@media (max-width: 980px) {
  .stage {
    min-height: 0;
    height: auto;
    overflow: clip;
    padding: 16px;
  }

  .stage__photo,
  .stage__ambient,
  .stage__sheen,
  .stage__scrim { position: absolute; }

  .hero-bg-image, .hero-bg-fill { object-position: 64% 22%; }
  .hero-bg-image { width: 100%; height: 100%; }
  .stage__scrim { opacity: 1; }
  .stage__scrim {
    background: linear-gradient(180deg,
        rgba(247, 250, 253, 0.84) 0%,
        rgba(247, 250, 253, 0.7) 52%,
        rgba(238, 245, 251, 0.9) 100%);
  }
  .liver-aura { display: none; }

  .hero {
    position: relative;
    inset: auto;
    margin: 0;
    min-height: 0;
    padding: 14px 14px 18px;
    border-radius: 18px;
  }

  .nav {
    height: 64px;
    padding-left: 16px;
    padding-right: 10px;
    border-radius: 32px;
    flex-wrap: wrap;
  }

  .nav__mark { width: 38px; height: 31px; }
  .nav__word { font-size: 20px; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }

  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(26, 94, 170, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms;
  }

  .nav__links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__link { padding: 13px 14px; font-size: 16px; border-radius: 14px; animation: none; }
  .nav__link::after { display: none; }
  .nav__link:hover { background: rgba(6, 106, 217, 0.08); }

  .hero__body { align-items: flex-start; padding: 30px 0 26px; }
  .hero__copy { width: min(100%, 620px); max-width: none; padding-left: 4px; margin-top: 0; }

  .hero__eyebrow { margin-bottom: 13px; font-size: 12px; }

  .hero__title {
    font-size: clamp(30px, 7.6vw, 48px);
    line-height: 1.12;
    letter-spacing: -0.018em;
  }

  .line { padding-bottom: 0.1em; margin-bottom: -0.1em; }

  .hero__lead {
    margin-top: 16px;
    font-size: clamp(14px, 3.7vw, 17px);
    line-height: 1.62;
    max-width: 34ch;
  }

  .hero__actions { margin-top: 20px; flex-wrap: wrap; }
  .hero__cta { min-height: 46px; padding-inline: 18px; }

  .panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
    padding: 18px;
    border-radius: 16px;
  }

  .panel > .panel__field:nth-child(1) { grid-column: 1; }
  .panel > .panel__field:nth-child(2) { grid-column: 2; }
  .panel > .panel__field:nth-child(3) { grid-column: 1; }
  .panel > .panel__action { grid-column: 2; }
  .panel > .panel__hint { grid-column: 1 / -1; }

  .panel__label { margin-bottom: 8px; font-size: 14px; }
  .select select { height: 52px; padding: 0 44px 0 18px; border-radius: 26px; font-size: 15px; }
  .select__chevron { right: 16px; width: 18px; height: 18px; margin-top: -9px; }
  .panel__cta { height: 54px; border-radius: 27px; font-size: 16px; }
  .nav__cta-arrow, .panel__cta-arrow { right: 8px; width: 34px; height: 34px; padding: 10px; }
}

@media (max-width: 620px) {
  .hero__body { padding-top: 26px; padding-bottom: 22px; }
  .hero__title { max-width: none; }
  .hero__lead { max-width: 38ch; }
  .hero__actions { align-items: stretch; }
  .hero__cta--primary { flex: 1 1 190px; }
  .hero__cta--secondary { flex: 1 1 160px; }

  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel > .panel__field:nth-child(1),
  .panel > .panel__field:nth-child(2),
  .panel > .panel__field:nth-child(3),
  .panel > .panel__action,
  .panel > .panel__hint { grid-column: 1; }
}

@media (max-width: 420px) {
  .stage { padding: 10px; }
  .hero {
    min-height: 0;
    padding: 12px 12px max(16px, env(safe-area-inset-bottom));
    border-radius: 22px;
  }
  .nav__word { font-size: 18px; }
  .hero__title { font-size: clamp(2rem, 10.5vw, 2.65rem); }
  .hero__lead { font-size: 0.9375rem; line-height: 1.55; }
  .hero__actions { gap: 10px; }
  .hero__cta { width: 100%; flex-basis: 100%; }
  .panel { padding: 15px; row-gap: 12px; }
}

@media (min-width: 981px) and (max-height: 780px) {
  .hero__copy { margin-top: 0; }
  .hero__eyebrow { margin-bottom: 10px; }
  .hero__title { font-size: clamp(2.3rem, calc(54 * var(--u)), 3.35rem); }
  .hero__lead { margin-top: 12px; font-size: 0.9375rem; }
  .hero__actions { margin-top: 14px; }
  .hero__cta { min-height: 44px; }
  .panel { padding-block: 15px; }
  .panel__label { margin-bottom: 8px; }
}

/* On tablets and smaller laptops, show the assessment controls immediately.
   Delayed entrance states can otherwise look like an empty panel while the
   viewport is reflowing after orientation or browser-chrome changes. */
@media (max-width: 1240px) {
  .panel,
  .panel__field,
  .panel__action { animation: none; }
}

/* Preserve single-line CTAs in the narrow desktop band before the navigation
   switches to its mobile menu. */
@media (min-width: 981px) and (max-width: 1100px) {
  .hero__actions { gap: 8px; }
  .hero__cta {
    gap: 8px;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .line--accent .line__in::after { display: none; }
  .stage__photo, .stage__sheen { animation: none !important; }
}


/* ==========================================================================
   SECTION 2 — WHY CHOOSE LIVERCARE AI?
   Every rule below is scoped to .lc-why-choose, so nothing here can reach the
   hero above. Sizes are clamp()-based with hard px ceilings — the icons can
   never grow beyond 50px even if this stylesheet fails to load.
   ========================================================================== */

.lc-why-choose {
  --lc-why-navy: #09162f;
  --lc-why-border: rgba(38, 84, 142, 0.12);
  --lc-why-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lc-why-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 3.4vw, 52px) clamp(16px, 1.66vw, 24px) clamp(40px, 3.8vw, 58px);
  background:
    radial-gradient(56% 82% at 94% 8%, rgba(169, 205, 248, 0.28), transparent 72%),
    linear-gradient(180deg, #f8fafc 0%, #eef4fa 100%);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--lc-why-ease), transform 900ms var(--lc-why-ease);
}

.lc-why-choose.lc-why-in { opacity: 1; transform: translateY(0); }

/* Fixed navigation must not cover the section title after an anchor jump. */
.lc-why-choose { scroll-margin-top: calc(clamp(12px, 3.6vh, 46px) + 91 * var(--nu) + 24px); }

/* soft blue orbs drifting behind the cards */
.lc-why-choose .lc-why-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(26px);
}

.lc-why-choose .lc-why-orb--left {
  left: -70px;
  top: 80px;
  width: clamp(180px, 20.7vw, 300px);
  height: clamp(180px, 20.7vw, 300px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 68%);
  animation: lcWhyOrbA 17s var(--lc-why-ease-soft) infinite alternate;
}

.lc-why-choose .lc-why-orb--right {
  right: -80px;
  top: 40px;
  width: clamp(200px, 23.5vw, 340px);
  height: clamp(200px, 23.5vw, 340px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
  animation: lcWhyOrbB 21s var(--lc-why-ease-soft) infinite alternate;
}

.lc-why-choose .lc-why-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- heading ---------- */

.lc-why-choose .lc-why-heading {
  margin: 0;
  text-align: center;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--lc-why-navy);
}

.lc-why-choose .lc-why-heading-line {
  display: inline;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms var(--lc-why-ease) 120ms,
              transform 760ms var(--lc-why-ease) 120ms;
}

.lc-why-choose .lc-why-heading-line--accent {
  position: relative;
  color: var(--blue);
  transition-delay: 260ms;
  margin-left: 0.16em;
}

.lc-why-choose .lc-why-heading-text {
  position: relative;
  display: inline-block;
}

/* blue highlight wipe across "LiverCare AI?" */
.lc-why-choose .lc-why-heading-text::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 8%;
  bottom: 8%;
  border-radius: 8px;
  background: linear-gradient(90deg,
      rgba(6, 106, 217, 0) 0%,
      rgba(6, 106, 217, 0.2) 45%,
      rgba(6, 106, 217, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

.lc-why-choose.lc-why-in .lc-why-heading-line { opacity: 1; transform: translateY(0); }

.lc-why-choose.lc-why-in .lc-why-heading-text::after {
  animation: lcWhyHighlight 1150ms var(--lc-why-ease-soft) 520ms both;
}

/* ---------- card grid ---------- */

.lc-why-choose .lc-why-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 20px);
  margin-top: clamp(28px, 3.2vw, 44px);
}

.lc-why-choose .lc-why-card:nth-child(1),
.lc-why-choose .lc-why-card:nth-child(4) { grid-column: span 7; }

.lc-why-choose .lc-why-card:nth-child(2),
.lc-why-choose .lc-why-card:nth-child(3) { grid-column: span 5; }

.lc-why-choose .lc-why-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: clamp(172px, 14vw, 206px);
  padding: clamp(22px, 2.2vw, 32px);
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 22px 50px -30px rgba(9, 35, 75, 0.34),
    inset 0 0 0 1px rgba(36, 93, 170, 0.1);
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 700ms var(--lc-why-ease),
    transform 460ms var(--lc-why-ease),
    box-shadow 380ms var(--lc-why-ease),
    border-color 380ms linear;
}

.lc-why-choose.lc-why-in .lc-why-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(320ms + var(--n) * 190ms), calc(320ms + var(--n) * 190ms), 0ms, 0ms;
}

.lc-why-choose .lc-why-card:hover,
.lc-why-choose .lc-why-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 30px 64px -30px rgba(9, 35, 75, 0.42),
    inset 0 0 0 1px rgba(23, 102, 232, 0.2);
}

.lc-why-choose .lc-why-card:first-child {
  color: #ffffff;
  background: #091a38;
  box-shadow: 0 28px 64px -32px rgba(5, 21, 50, 0.58);
}

/* glass shine that sweeps across on hover */
.lc-why-choose .lc-why-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-14deg);
  opacity: 0;
}

.lc-why-choose .lc-why-card:hover .lc-why-shine,
.lc-why-choose .lc-why-card:focus-within .lc-why-shine {
  animation: lcWhyShine 900ms var(--lc-why-ease-soft);
}

/* ---------- icon badge ---------- */

.lc-why-choose .lc-why-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #eaf2fc;
  box-shadow: inset 0 0 0 1px rgba(23, 102, 232, 0.1);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 560ms var(--lc-why-ease-soft),
              transform 560ms var(--lc-why-ease-soft),
              box-shadow 380ms linear;
}

.lc-why-choose.lc-why-in .lc-why-badge {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(470ms + var(--n) * 190ms);
}

.lc-why-choose .lc-why-card:hover .lc-why-badge,
.lc-why-choose .lc-why-card:focus-within .lc-why-badge {
  box-shadow: inset 0 0 0 1px rgba(23, 102, 232, 0.2);
}

.lc-why-choose .lc-why-card:first-child .lc-why-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* hard size lock — the wrapper AND the svg inside are both pinned to 48px,
   and the svg carries width/height attributes too, so the icon cannot take
   its size from the viewport or the card even if this file fails to load. */
.lc-why-choose .lc-why-icon {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  color: var(--blue);
  line-height: 0;
}

.lc-why-choose .lc-why-icon svg {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  overflow: visible;
}

.lc-why-choose .lc-why-icon svg * { transform-box: fill-box; }

/* continuous micro-motion once the section is in view */
.lc-why-choose.lc-why-in .lc-why-icon {
  animation: lcWhyIconFloat 6.5s var(--lc-why-ease-soft) infinite;
  animation-delay: calc(1500ms + var(--n) * 190ms);
}

/* ---------- per-icon behaviour ---------- */

/* 1. AI Assessment — document sheet + chip pulse */
.lc-why-choose .lc-why-doc-sheet { transform-origin: center; }
.lc-why-choose .lc-why-doc-chip { transform-origin: center; }

.lc-why-choose.lc-why-in .lc-why-doc-chip {
  animation: lcWhyChipPulse 3.2s var(--lc-why-ease-soft) 1.4s infinite;
}

.lc-why-choose .lc-why-doc-chip-text {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  fill: #ffffff;
}

.lc-why-choose .lc-why-doc-lines path {
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 420ms var(--lc-why-ease-soft);
}

.lc-why-choose .lc-why-card:hover .lc-why-doc-lines path:nth-child(1) { transform: scaleX(0.82); }
.lc-why-choose .lc-why-card:hover .lc-why-doc-lines path:nth-child(2) { transform: scaleX(1.08); }
.lc-why-choose .lc-why-card:hover .lc-why-doc-lines path:nth-child(3) { transform: scaleX(1.5); }

/* 2. LFT Analysis — bars grow upward */
.lc-why-choose .lc-why-bar {
  transform-origin: bottom center;
  transform: scaleY(0.12);
  opacity: 0.35;
  transition: transform 640ms var(--lc-why-ease-soft), opacity 400ms linear;
}

.lc-why-choose.lc-why-in .lc-why-bar {
  transform: scaleY(1);
  opacity: 1;
  transition-delay: calc(760ms + var(--b) * 150ms);
}

.lc-why-choose .lc-why-bar-dot {
  transform-origin: center;
  opacity: 0;
  transition: opacity 420ms linear 1320ms;
}

.lc-why-choose.lc-why-in .lc-why-bar-dot { opacity: 1; }

.lc-why-choose .lc-why-card:hover .lc-why-bar {
  transform: scaleY(1.08);
  transition-delay: 0ms;
}

/* 3. Ultrasound Screening — screen glow + scanning liver */
.lc-why-choose .lc-why-scan-screen { transform-origin: center; }

.lc-why-choose.lc-why-in .lc-why-scan-liver {
  animation: lcWhyScanPulse 3.4s var(--lc-why-ease-soft) 1.3s infinite;
}

.lc-why-choose .lc-why-scan-cursor {
  transform-origin: center;
  transition: transform 460ms var(--lc-why-ease-soft);
}

.lc-why-choose .lc-why-card:hover .lc-why-scan-cursor { transform: translate(-3px, -3px); }

.lc-why-choose .lc-why-card:hover .lc-why-scan-screen {
  animation: lcWhyScreenGlow 1.4s var(--lc-why-ease-soft) infinite;
}

/* 4. Doctor Support — gentle float + badge pulse */
.lc-why-choose .lc-why-doctor-head,
.lc-why-choose .lc-why-doctor-body { transform-origin: center bottom; }

.lc-why-choose .lc-why-doctor-plus { transform-origin: center; }

.lc-why-choose.lc-why-in .lc-why-doctor-plus {
  animation: lcWhyChipPulse 3.6s var(--lc-why-ease-soft) 1.6s infinite;
}

.lc-why-choose .lc-why-card:hover .lc-why-doctor-head {
  animation: lcWhyDoctorNod 1.6s var(--lc-why-ease-soft) infinite;
}

/* ---------- card text ---------- */

.lc-why-choose .lc-why-title {
  margin: clamp(10px, 0.9vw, 12px) 0 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--lc-why-navy);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms var(--lc-why-ease),
              transform 420ms var(--lc-why-ease-soft),
              color 300ms linear;
}

.lc-why-choose .lc-why-card:first-child .lc-why-title { color: #ffffff; }

.lc-why-choose.lc-why-in .lc-why-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(600ms + var(--n) * 190ms), calc(600ms + var(--n) * 190ms), 0ms;
}

.lc-why-choose .lc-why-card:hover .lc-why-title,
.lc-why-choose .lc-why-card:focus-within .lc-why-title {
  transform: translateY(-3px);
  color: var(--blue);
}

.lc-why-choose .lc-why-sub {
  margin: clamp(3px, 0.3vw, 4px) 0 0;
  max-width: 38ch;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 620ms var(--lc-why-ease), transform 620ms var(--lc-why-ease);
}

.lc-why-choose .lc-why-card:first-child .lc-why-sub { color: #c8d8ee; }

.lc-why-choose .lc-why-card:first-child .lc-why-icon { color: #ffffff; }

.lc-why-choose .lc-why-card:first-child:hover .lc-why-title,
.lc-why-choose .lc-why-card:first-child:focus-within .lc-why-title { color: #ffffff; }

.lc-why-choose.lc-why-in .lc-why-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(700ms + var(--n) * 190ms);
}

/* ---------- keyframes (all prefixed lcWhy) ---------- */

@keyframes lcWhyHighlight {
  0%   { transform: scaleX(0); opacity: 0; }
  35%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes lcWhyShine {
  0%   { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(320%) skewX(-14deg); opacity: 0; }
}

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

@keyframes lcWhyChipPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.09); opacity: 0.88; }
}

@keyframes lcWhyScanPulse {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-1px); }
}

@keyframes lcWhyScreenGlow {
  0%, 100% { opacity: 1; stroke-width: 2.6; }
  50%      { opacity: 0.78; stroke-width: 3.1; }
}

@keyframes lcWhyDoctorNod {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

@keyframes lcWhyOrbA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(26px, -18px, 0) scale(1.08); }
}

@keyframes lcWhyOrbB {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  100% { transform: translate3d(-30px, 20px, 0) scale(1); }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .lc-why-choose { padding: 48px 20px 56px; }
  .lc-why-choose .lc-why-inner { max-width: 720px; }
  .lc-why-choose .lc-why-heading { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.18; }

  .lc-why-choose .lc-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }

  .lc-why-choose .lc-why-card:nth-child(n) { grid-column: auto; }

  .lc-why-choose .lc-why-card { min-height: 0; padding: 22px 18px 24px; border-radius: 16px; }
  .lc-why-choose .lc-why-badge { width: 60px; height: 60px; }
  .lc-why-choose .lc-why-icon,
  .lc-why-choose .lc-why-icon svg {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
    max-height: 42px;
  }
  .lc-why-choose .lc-why-title { margin-top: 14px; font-size: 18px; }
  .lc-why-choose .lc-why-sub { margin-top: 4px; font-size: 14px; }
  .lc-why-choose .lc-why-orb { display: none; }
}

@media (max-width: 600px) {
  .lc-why-choose { padding: 40px 16px 48px; }
  .lc-why-choose .lc-why-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lc-why-choose .lc-why-heading { font-size: clamp(24px, 7.4vw, 32px); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .lc-why-choose,
  .lc-why-choose .lc-why-heading-line,
  .lc-why-choose .lc-why-card,
  .lc-why-choose .lc-why-badge,
  .lc-why-choose .lc-why-title,
  .lc-why-choose .lc-why-sub,
  .lc-why-choose .lc-why-bar,
  .lc-why-choose .lc-why-bar-dot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lc-why-choose .lc-why-icon,
  .lc-why-choose .lc-why-orb,
  .lc-why-choose .lc-why-doc-chip,
  .lc-why-choose .lc-why-doctor-plus,
  .lc-why-choose .lc-why-scan-liver,
  .lc-why-choose .lc-why-shine { animation: none !important; }
}

/* ==========================================================================
   PAGE NAVIGATION — smooth scroll, screen-sized sections, scroll snapping
   Only layout-level rules live here; no section's internals are touched.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

/* one major section per screen on desktop / laptop only */
@media (min-width: 981px) {
  html { scroll-snap-type: y proximity; }

  .lc-screen-snap { scroll-snap-align: start; }

  .lc-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* a flex item with `margin: 0 auto` shrinks to max-content instead of
     stretching, which would squeeze these centred containers — pin them wide */
  .lc-screen > *,
  .lc-why-choose.lc-screen-snap > * { width: 100%; }

  .lc-why-choose.lc-screen-snap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }
}

/* a nav item whose section has not been built yet stays inert instead of
   silently doing nothing on click */
.nav__link[data-pending="true"] { opacity: 0.55; cursor: default; }
.nav__link[data-pending="true"]::after { display: none; }
.nav__link[data-pending="true"]:hover { color: #2e3440; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
}


/* ==========================================================================
   HERO NAVBAR — compact, centred and attached to the landing hero.
   It scrolls away with the hero instead of covering later page content.
   ========================================================================== */

.nav {
  --u: var(--nu);
  position: absolute;
  z-index: 120;
  top: clamp(12px, 3.6vh, 46px);
  left: 50%;
  width: calc(1301 * var(--nu));
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  animation: navFloatIn 820ms var(--ease-soft) 120ms both;
}

/* reserves exactly as much room as the floating bar actually occupies over the
   hero, so the headline can never end up behind it */
.nav-spacer {
  flex: 0 0 auto;
  height: max(
    calc(91 * var(--nu)),
    calc(clamp(12px, 3.6vh, 46px) + 91 * var(--nu) + 14px - 5.06vh - 43 * var(--u))
  );
  pointer-events: none;
}

/* active item sits in a soft blue pill, exactly like the video */
.nav__link {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: transparent;
  transition: color 260ms var(--ease-out), background-color 300ms var(--ease-out),
              transform 260ms var(--ease-out);
}

.nav__links { gap: calc(14 * var(--u)); }

.nav__link::after { display: none; }

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--blue);
  background: rgba(6, 106, 217, 0.07);
  transform: translateY(calc(-1 * var(--u)));
}

.nav__link.is-active {
  color: var(--blue);
  background: rgba(6, 106, 217, 0.11);
  box-shadow: inset 0 0 0 1px rgba(6, 106, 217, 0.12);
}

@keyframes navFloatIn {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(-24 * var(--u))); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 980px) {
  .nav {
    top: 16px;
    width: calc(100% - 32px);
    max-width: none;
  }
  .nav-spacer { height: 64px; }
  .nav__link { padding: 13px 14px; }
  .nav__links { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { animation: none !important; }
}


/* ==========================================================================
   SECTIONS 3-6 + FOOTER
   Supplied markup, scoped under .lc-rest so it cannot reach the approved
   Hero, Why Choose or navbar above. Tokens are declared on .lc-rest only.
   ========================================================================== */

.lc-rest {
  --ink: #09162f;
  --ink-2: #35445e;
  --muted: #647188;
  --blue: #1766e8;
  --blue-2: #3382ed;
  --blue-deep: #0f49b7;
  --blue-soft: #dce9f8;
  --blue-wash: #f1f5fa;
  --line: #d8e1ed;
  --glass: rgba(255, 255, 255, .9);
  --glass-strong: rgba(255, 255, 255, .96);
  --glass-edge: rgba(29, 73, 130, .1);
  --grad: linear-gradient(135deg, #2d7df0 0%, #1766e8 56%, #0f49b7 100%);
  --grad-text: none;
  --shadow-sm: 0 14px 34px -24px rgba(9, 35, 75, .32);
  --shadow: 0 26px 60px -34px rgba(9, 35, 75, .38);
  --shadow-lg: 0 34px 80px -38px rgba(9, 35, 75, .48);
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 16px;
  --r-xl: 16px;
  --font: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --container: 1180px;
  --nav-h: calc(clamp(12px, 3.6vh, 46px) + 91 * var(--nu) + 18px);
  --ease: cubic-bezier(.22, .8, .24, 1);

  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* ---------- base ---------- */
.lc-rest .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lc-rest .container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.lc-rest :where(h1, .lc-rest h2, .lc-rest h3, .lc-rest h4, .lc-rest p) { margin: 0; }
.lc-rest :where(a) { color: inherit; text-decoration: none; }
.lc-rest :where(ul, .lc-rest ol) { list-style: none; margin: 0; padding: 0; }
.lc-rest :where(img) { max-width: 100%; display: block; }
.lc-rest :where(svg) { display: block; }
.lc-rest :focus-visible { outline: 3px solid rgba(23, 102, 242, .45); outline-offset: 3px; border-radius: 10px; }

.lc-rest .glass {
  background: var(--glass);
  border: 0;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--glass-edge);
}
.lc-rest .accent {
  display: block;
  color: var(--blue);
  padding-bottom: .04em;
}
.lc-rest .accent-inline {
  color: var(--blue);
}

.lc-rest .section {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 22px) 0 clamp(48px, 5vw, 76px);
  overflow: hidden;
  isolation: isolate;
}
.lc-rest .section > .container { position: relative; z-index: 1; }
.lc-rest .section::before, .lc-rest .section::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none; filter: blur(2px);
}

.lc-rest .eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue);
  background: rgba(23, 102, 242, .1);
  border: 0;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(23, 102, 232, .12);
}
.lc-rest .kicker {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #6F8BC4;
}
.lc-rest .section-title {
  font-size: clamp(2.15rem, 1.2rem + 2.6vw, 3.65rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: var(--ink);
}
.lc-rest .section-title.center { text-align: center; }
.lc-rest .display-title {
  margin-top: 14px;
  font-size: clamp(2.45rem, 1.25rem + 3.2vw, 4.5rem);
  line-height: 1.04; letter-spacing: -.038em; font-weight: 800; color: var(--ink);
}
.lc-rest .lead {
  margin-top: 16px; max-width: 34em;
  font-size: clamp(1rem, .95rem + .22vw, 1.1rem);
  line-height: 1.65; color: var(--ink-2);
}

.lc-rest .btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 8px 0 22px;
  border: 0; border-radius: 999px;
  font: 600 15.5px/1 var(--font);
  cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.lc-rest .btn-ico {
  width: 34px; height: 34px; padding: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}
.lc-rest .btn:hover .btn-ico { transform: translateX(2px) scale(1.05); background: rgba(255, 255, 255, .22); }
.lc-rest .btn-primary {
  color: #fff; background: var(--grad);
  box-shadow: 0 12px 24px -10px rgba(23, 102, 242, .65), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.lc-rest .btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.lc-rest .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(23, 102, 242, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }
.lc-rest .btn-primary:hover::after { transform: translateX(120%); }
.lc-rest .btn-primary:active { transform: translateY(0); }
.lc-rest .btn-pill { padding-left: 26px; height: 52px; }
.lc-rest .btn-wide { min-width: 220px; height: 52px; }
.lc-rest .btn-white {
  height: 44px; padding: 0 26px; border-radius: 999px;
  background: #fff; color: var(--blue); font-size: 14.5px; font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(5, 30, 90, .45);
}
.lc-rest .btn-white:hover { transform: translateY(-2px); }

/* ---------- 3. Liver health screening ---------- */
.lc-rest .section.screening {
  /* The generic section spacing reserves a full navbar height. This first
     content section already follows the hero, so a smaller safe offset keeps
     it clear of the floating nav without leaving a large empty band. */
  padding-top: clamp(72px, 6vw, 92px);
  background:
    radial-gradient(50% 60% at 25% 50%, rgba(187, 211, 241, .34), transparent 70%),
    #f7f9fc;
}
.lc-rest .screening::before { width: 520px; height: 520px; right: -200px; top: -120px; background: radial-gradient(circle, rgba(214, 232, 255, .9), transparent 65%); }
.lc-rest .screening::after { width: 300px; height: 300px; right: 30%; bottom: -120px; background: radial-gradient(circle, rgba(200, 222, 255, .7), transparent 65%); }
.lc-rest .screen-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.lc-rest .screen-visual { position: relative; height: clamp(340px, 62vh, 540px); }
.lc-rest .screen-panel {
  position: absolute; inset: 0 6% 0 10%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .95), transparent 40%),
    linear-gradient(160deg, rgba(222, 236, 255, .9), rgba(176, 208, 255, .55));
  border: 0;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .82);
  overflow: hidden;
}
.lc-rest .screen-img { position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; }
.lc-rest .scan-art { position: absolute; inset: 0; display: none; }
.lc-rest .screen-panel.no-img .scan-art { display: block; }
.lc-rest .scan-scene { position: absolute; inset: 0; }
.lc-rest .scan-doctor {
  position: absolute; left: 50%; bottom: 0; width: 46%; transform: translateX(-52%);
  filter: drop-shadow(0 18px 30px rgba(24, 92, 168, .18));
}
.lc-rest .scan-doctor svg { width: 100%; height: auto; }
.lc-rest .scan-glow {
  position: absolute; left: 16%; top: 10%; width: 68%; height: 78%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), rgba(213,235,253,.55) 45%, rgba(213,235,253,0) 72%);
}
.lc-rest .sweep { transform-origin: 160px 18px; animation: sweep 4.2s var(--ease) infinite alternate; }
.lc-rest .holo-liver { position: absolute; top: 7%; right: 6%; width: 34%; filter: drop-shadow(0 14px 22px rgba(23, 90, 220, .35)); animation: bob 7s var(--ease) infinite; }
.lc-rest .chip-card {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 124px; padding: 16px 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  font-size: 14px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow);
  animation: float 8s var(--ease) infinite;
}
.lc-rest .chip-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: var(--grad);
  box-shadow: 0 10px 18px -8px rgba(23, 102, 242, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lc-rest .chip-ico svg { width: 24px; height: 24px; }
.lc-rest .chip-lft { left: 0; top: 18%; }
.lc-rest .chip-risk { left: 2%; bottom: 6%; animation-delay: -2.5s; }
.lc-rest .chip-us { right: 0; bottom: 24%; animation-delay: -5s; }
.lc-rest .screen-copy .lead { max-width: 30em; }
.lc-rest .screen-copy .btn { margin-top: 30px; }

/* ---------- 4. Everything you need (hub) ---------- */
.lc-rest .hub-section { background: #eef3f8; }
.lc-rest .hub-section::before { width: 560px; height: 560px; left: -240px; top: 30%; background: radial-gradient(circle, rgba(200, 222, 255, .8), transparent 65%); }
.lc-rest .hub-section::after { width: 520px; height: 520px; right: -200px; top: -100px; background: radial-gradient(circle, rgba(210, 228, 255, .85), transparent 65%); }
.lc-rest .hub { position: relative; width: min(940px, 100%); aspect-ratio: 760 / 400; margin: clamp(28px, 6vh, 64px) auto 0; }
.lc-rest .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-rest .hub-paths path { stroke: #8DB6F5; stroke-width: 2; stroke-dasharray: 5 7; animation: dash 1.6s linear infinite; }
.lc-rest .hub-dots circle { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.lc-rest .hub-pulses circle { fill: var(--blue); filter: drop-shadow(0 0 4px rgba(23, 102, 242, .8)); }
.lc-rest .hub-center {
  position: absolute; left: 50%; top: 50%;
  width: 22%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .55);
  border: 0;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.lc-rest .hub-center::before, .lc-rest .hub-center::after {
  content: ""; position: absolute; inset: 12%;
  border-radius: 30%;
  border: 2px solid rgba(23, 102, 242, .35);
  animation: ripple 3s var(--ease) infinite;
}
.lc-rest .hub-center::after { animation-delay: 1.5s; }
.lc-rest .hub-tile {
  position: relative; z-index: 1;
  width: 78%; aspect-ratio: 1;
  border-radius: 28%;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 22px 36px -16px rgba(23, 102, 242, .8), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -10px 20px rgba(8, 50, 150, .35);
}
.lc-rest .hub-tile svg { width: 64%; height: auto; aspect-ratio: 64 / 48; filter: drop-shadow(0 6px 10px rgba(5, 30, 110, .35)); }
.lc-rest .hub-node { position: absolute; transform: translate(-50%, -50%); width: 13.5%; }
.lc-rest .hub-node.n1 { left: 19.6%; top: 28%; }
.lc-rest .hub-node.n2 { left: 19.6%; top: 72%; }
.lc-rest .hub-node.n3 { left: 80.4%; top: 28%; }
.lc-rest .hub-node.n4 { left: 80.4%; top: 72%; }
.lc-rest .hub-ico {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--blue);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
  transition: transform .45s var(--ease);
}
.lc-rest .hub-ico svg { width: 44%; height: 44%; }
.lc-rest .hub-node:hover .hub-ico { transform: scale(1.07); }
.lc-rest .hub-label {
  position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 6px 14px -8px rgba(23, 80, 190, .3);
}

/* ---------- 5. Assessment ---------- */
.lc-rest .assess { background: #f7f9fc; }
.lc-rest .assess::before { width: 460px; height: 460px; left: -200px; bottom: -120px; background: radial-gradient(circle, rgba(200, 222, 255, .8), transparent 65%); }
.lc-rest .assess::after { width: 300px; height: 300px; right: -90px; top: 30%; background: radial-gradient(circle, rgba(196, 220, 255, .7), transparent 65%); }
.lc-rest .assess-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.lc-rest .assess-copy .display-title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
.lc-rest .assess-copy .lead { max-width: 28em; }
.lc-rest .assess-copy .btn { margin-top: 28px; }
.lc-rest .trust { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.lc-rest .trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.lc-rest .trust-item svg { width: 26px; height: 26px; flex: none; color: var(--blue); }
.lc-rest .trust-sep { width: 1px; height: 28px; background: var(--line); }
.lc-rest .timeline { position: relative; display: grid; gap: clamp(12px, 2.4vh, 20px); --p: 0; }
.lc-rest .timeline::before, .lc-rest .timeline::after {
  content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 0;
}
.lc-rest .timeline::before { border-left: 2px dotted #A6C4F2; }
.lc-rest .timeline::after {
  width: 2px; margin-left: -.5px;
  background: linear-gradient(var(--blue-2), var(--blue));
  transform-origin: top; transform: scaleY(var(--p));
  border-radius: 2px;
}
.lc-rest .t-step { display: grid; grid-template-columns: 52px 1fr; gap: 26px; align-items: center; }
.lc-rest .t-num {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: var(--blue);
  background: rgba(255, 255, 255, .9);
  border: 0;
  box-shadow: 0 10px 24px -16px rgba(9, 35, 75, .4), inset 0 0 0 1px var(--line);
  transition: background .5s var(--ease), color .5s, border-color .5s, box-shadow .5s;
}
.lc-rest .t-step.is-done .t-num { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 10px 20px -8px rgba(23, 102, 242, .7); }
.lc-rest .t-card {
  display: flex; align-items: center; gap: 20px;
  padding: clamp(14px, 2.3vh, 20px) 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.lc-rest .t-step:hover .t-card { transform: translateX(6px); box-shadow: var(--shadow); }
.lc-rest .t-ico { width: 38px; height: 38px; flex: none; color: var(--blue); }
.lc-rest .t-card h3 { font-size: 1.04rem; font-weight: 700; color: var(--ink); }
.lc-rest .t-card p { margin-top: 2px; font-size: .93rem; color: var(--muted); }

/* ---------- 6. Doctor consultation + 3 steps ---------- */
.lc-rest .consult { background: #eef3f8; }
.lc-rest .consult::before { width: 520px; height: 520px; left: -220px; bottom: -160px; background: radial-gradient(circle, rgba(200, 222, 255, .8), transparent 65%); }
.lc-rest .consult::after { width: 360px; height: 360px; right: -140px; top: 10%; background: radial-gradient(circle, rgba(206, 226, 255, .8), transparent 65%); }
.lc-rest .consult-wrap { display: flex; flex-direction: column; }
.lc-rest .speciality {
  text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue);
}
.lc-rest .consult-banner {
  position: relative; overflow: hidden;
  width: min(1040px, 100%); margin: 12px auto 0;
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
  padding: clamp(24px, 4vh, 36px) 48px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(112deg, #0b2b63 0%, #1359c8 58%, #3b83e5 100%);
  box-shadow: var(--shadow-lg);
}
.lc-rest .consult-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 90% at 72% 50%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(30% 60% at 8% 0%, rgba(255, 255, 255, .22), transparent 70%);
}
.lc-rest .consult-banner::after {
  content: ""; position: absolute; inset: 1px; pointer-events: none;
  border-radius: 15px; border: 1px solid rgba(255, 255, 255, .25);
}
.lc-rest .consult-banner > * { position: relative; z-index: 1; }
.lc-rest .consult-tile {
  width: 100px; height: 100px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--blue);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 30px -14px rgba(3, 30, 100, .6), inset 0 -6px 12px rgba(23, 102, 242, .1);
}
.lc-rest .consult-tile svg { width: 52px; height: 52px; }
.lc-rest .consult-copy h2 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.lc-rest .consult-copy p { margin: 6px 0 16px; font-size: 1rem; color: rgba(255, 255, 255, .92); max-width: 26em; }
.lc-rest .stetho { width: clamp(180px, 22vw, 270px); height: auto; margin: -12px 0; filter: drop-shadow(0 16px 20px rgba(3, 30, 100, .35)); animation: sway 9s var(--ease) infinite; transform-origin: 30% 10%; }
.lc-rest .steps-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: clamp(28px, 5vh, 52px); }
.lc-rest .app-scene {
  position: relative;
  height: clamp(260px, 38vh, 360px);
  border-radius: 16px;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .95), transparent 45%),
    radial-gradient(circle at 20% 90%, rgba(170, 205, 255, .6), transparent 50%),
    linear-gradient(150deg, #E4EFFF, #C9DEFF);
  border: 0;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .88);
  overflow: hidden;
}
.lc-rest .phone {
  position: absolute; left: 20%; top: 8%;
  height: 90%; aspect-ratio: 9 / 18.2;
  padding: 7px; border-radius: 30px;
  background: linear-gradient(145deg, #2A3656, #0E1730);
  box-shadow: 0 30px 50px -20px rgba(8, 30, 90, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .15);
  transform: rotate(-9deg);
  animation: phone 9s var(--ease) infinite;
}
.lc-rest .phone-screen {
  height: 100%; border-radius: 24px;
  background: linear-gradient(180deg, #F4F8FF, #fff);
  padding: 16px 11px 11px;
  display: flex; flex-direction: column; gap: 7px;
  overflow: hidden;
}
.lc-rest .ph-brand { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 9.5px; font-weight: 800; color: var(--ink); }
.lc-rest .ph-brand svg,
.lc-rest .ph-brand__mark { width: 16px; height: 12px; flex: none; }
.lc-rest .ph-brand .ph-ai { color: var(--blue); }
.lc-rest .ph-title { text-align: center; font-size: 11px; font-weight: 800; color: var(--ink); }
.lc-rest .ph-doc { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 9px; background: #EAF2FF; }
.lc-rest .ph-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); flex: none; }
.lc-rest .ph-doc span { display: flex; flex-direction: column; line-height: 1.2; }
.lc-rest .ph-doc b { font-size: 8px; color: var(--ink); }
.lc-rest .ph-doc i { font-size: 7px; font-style: normal; color: var(--muted); }
.lc-rest .ph-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; justify-items: center; }
.lc-rest .ph-cal span { font-size: 6.5px; font-weight: 700; color: var(--muted); }
.lc-rest .ph-cal i { width: 12px; height: 12px; border-radius: 4px; background: #E8EFFA; }
.lc-rest .ph-cal i.on { background: var(--grad); box-shadow: 0 3px 6px -2px rgba(23, 102, 242, .7); }
.lc-rest .ph-times { display: flex; gap: 4px; }
.lc-rest .ph-times span { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 7px; font-weight: 700; color: var(--ink-2); background: #EAF2FF; }
.lc-rest .ph-times span.on { color: #fff; background: var(--grad); }
.lc-rest .ph-btn { margin-top: auto; text-align: center; padding: 7px 0; border-radius: 8px; font-size: 8px; font-weight: 700; color: #fff; background: var(--grad); }
.lc-rest .priority-card {
  position: absolute; right: 12%; top: 12%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 16px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  text-align: center; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink);
  animation: float 8s var(--ease) infinite -3s;
}
.lc-rest .priority-card svg { width: 58px; height: 44px; filter: drop-shadow(0 6px 10px rgba(23, 90, 220, .35)); }
.lc-rest .steps-title { font-size: clamp(1.55rem, 1.05rem + 1.4vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.lc-rest .steps { position: relative; display: grid; gap: 14px; margin-top: clamp(18px, 3vh, 28px); }
.lc-rest .steps::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; border-left: 2px dotted #A6C4F2; }
.lc-rest .steps li { display: grid; grid-template-columns: 40px 1fr; gap: 22px; align-items: center; }
.lc-rest .s-num {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: var(--grad);
  box-shadow: 0 0 0 5px rgba(23, 102, 242, .12), 0 8px 16px -6px rgba(23, 102, 242, .7);
}
.lc-rest .s-card {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.lc-rest .steps li:hover .s-card { transform: translateX(6px); box-shadow: var(--shadow); }
.lc-rest .s-ico { width: 32px; height: 32px; flex: none; color: var(--blue); }
.lc-rest .s-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.lc-rest .s-card p { margin-top: 1px; font-size: .9rem; color: var(--muted); }

/* ---------- footer ---------- */
.lc-rest .footer {
  position: relative;
  background: #f8fafc;
  border-top: 1px solid rgba(29, 73, 130, .08);
  box-shadow: 0 -12px 30px -24px rgba(23, 80, 190, .35);
}
.lc-rest .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; padding: 40px 0 28px; }
.lc-rest .footer-grid > * + * { border-left: 1px solid var(--line); padding-left: clamp(24px, 5vw, 80px); }
.lc-rest .f-logo { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; }
.lc-rest .f-mark { width: 34px; height: 26px; color: var(--blue); }
.lc-rest .f-mark svg { width: 100%; height: 100%; }
.lc-rest .f-word { font-size: 19px; font-weight: 700; color: var(--ink); }
.lc-rest .f-word b { color: var(--blue); font-weight: 700; }
.lc-rest .f-brand p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lc-rest .socials { display: flex; gap: 10px; margin-top: 18px; }
.lc-rest .socials a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink); background: #EEF4FF;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.lc-rest .socials a:hover { color: #fff; background: var(--blue); transform: translateY(-2px); }
.lc-rest .socials svg { width: 15px; height: 15px; }
.lc-rest .f-col { display: flex; flex-direction: column; gap: 6px; }
.lc-rest .f-col h4 { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.lc-rest .f-col a {
  width: fit-content;
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  padding-inline: 10px;
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  color: var(--muted);
  transition: color .25s;
}
.lc-rest .f-col a:hover { color: var(--blue); }
.lc-rest .footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* ---------- motion ---------- */
html.js .lc-rest [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .lc-rest [data-reveal="fade"] { transform: scale(.97); }
html.js .lc-rest [data-reveal].is-in { opacity: 1; transform: none; }


@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes phone { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-8px); } }

/* one screen per section, gentle snap */
@media (min-width: 1025px) and (min-height: 680px) {
  .lc-rest .section { scroll-snap-align: start; }
}

@media (min-width: 1025px) and (max-height: 800px) {
  .lc-rest .section { padding: calc(var(--nav-h) + 30px) 0 28px; }
  .lc-rest .lead { margin-top: 12px; }
  .lc-rest .hub { width: min(800px, 100%); }
  .lc-rest .consult-banner { padding: 20px 40px; }
  .lc-rest .consult-tile { width: 84px; height: 84px; }
  .lc-rest .stetho { width: 210px; }
  .lc-rest .steps-grid { margin-top: 22px; }
  .lc-rest .steps { gap: 10px; margin-top: 14px; }
  .lc-rest .s-card { padding: 10px 18px; }
  .lc-rest .app-scene { height: 34vh; }
}

@media (max-width: 1024px) {
  .lc-rest .screen-grid,
  .lc-rest .assess-grid,
  .lc-rest .steps-grid { grid-template-columns: 1fr; }
  .lc-rest .screen-copy, .lc-rest .assess-copy { text-align: center; }
  .lc-rest .screen-copy .lead, .lc-rest .assess-copy .lead { margin-inline: auto; }
  .lc-rest .screen-visual { order: 2; height: clamp(320px, 46vh, 460px); max-width: 620px; width: 100%; margin-inline: auto; }
  .lc-rest .trust { justify-content: center; }
  .lc-rest .timeline { max-width: 640px; width: 100%; margin-inline: auto; }
  .lc-rest .consult-banner { grid-template-columns: auto 1fr; padding: 28px 32px; }
  .lc-rest .stetho { position: absolute; right: -20px; bottom: -30px; width: 190px; opacity: .55; }
  .lc-rest .app-scene { max-width: 560px; width: 100%; margin-inline: auto; }
  .lc-rest .steps-copy { max-width: 640px; width: 100%; margin-inline: auto; }
  .lc-rest .steps-title { text-align: center; }
  .lc-rest .section { min-height: 0; padding: calc(var(--nav-h) + 24px) 0 56px; }
}

@media (max-width: 640px) {
  .lc-rest .container { width: calc(100% - 32px); }
  .lc-rest .section { padding: calc(var(--nav-h) + 18px) 0 44px; }
  .lc-rest .section.screening { padding-top: 72px; }
  .lc-rest .screen-visual { height: 340px; }
  .lc-rest .screen-panel { inset: 0 8%; border-radius: 16px; }
  .lc-rest .scan-doctor { width: 54%; }
  .lc-rest .chip-card { width: 100px; padding: 12px 8px 10px; font-size: 12.5px; }
  .lc-rest .chip-ico { width: 40px; height: 40px; }
  .lc-rest .chip-ico svg { width: 20px; height: 20px; }
  /* Keep the SVG and nodes in the same coordinate system as desktop. */
  .lc-rest .hub { aspect-ratio: 760 / 400; margin-bottom: 24px; }
  .lc-rest .hub-center { border-radius: 10px; }
  .lc-rest .hub-label {
    top: calc(100% + 6px);
    width: max-content;
    max-width: 28vw;
    white-space: normal;
    text-align: center;
    padding: 4px 6px;
    font-size: clamp(9px, 2.5vw, 12.5px);
    line-height: 1.2;
  }
  .lc-rest .t-step { grid-template-columns: 44px 1fr; gap: 14px; }
  .lc-rest .t-num { width: 44px; height: 44px; font-size: 13.5px; }
  .lc-rest .timeline::before, .lc-rest .timeline::after { left: 21px; }
  .lc-rest .t-card { gap: 14px; padding: 14px 16px; }
  .lc-rest .t-ico { width: 30px; height: 30px; }
  .lc-rest .trust { flex-direction: column; gap: 12px; }
  .lc-rest .trust-sep { display: none; }
  .lc-rest .consult-banner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; padding: 26px 22px 30px; }
  .lc-rest .consult-tile { width: 80px; height: 80px; border-radius: 14px; }
  .lc-rest .consult-tile svg { width: 42px; height: 42px; }
  .lc-rest .consult-copy p { margin-inline: auto; }
  .lc-rest .stetho { display: none; }
  .lc-rest .app-scene { height: 250px; border-radius: 16px; }
  .lc-rest .phone { left: 14%; }
  .lc-rest .priority-card { right: 8%; font-size: 11px; }
  .lc-rest .steps li { grid-template-columns: 36px 1fr; gap: 14px; }
  .lc-rest .s-num { width: 36px; height: 36px; font-size: 14px; }
  .lc-rest .steps::before { left: 17px; }
  .lc-rest .s-card { padding: 12px 14px; gap: 12px; }
  .lc-rest .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .lc-rest .f-brand { grid-column: 1 / -1; }
  .lc-rest .footer-grid > * + * { border-left: 0; padding-left: 0; }
  .lc-rest .footer-bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-rest *, .lc-rest *::before, .lc-rest *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .lc-rest [data-reveal] { opacity: 1; transform: none; }
  .lc-rest .hub-pulses { display: none; }
}


/* ==========================================================================
   PATIENTS SECTION VISUAL — approved photographic reference
   Only the artwork inside the existing panel changes; the panel, the three
   glass chips, the copy and the spacing are all untouched.
   ========================================================================== */

.lc-rest .screen-panel .screen-img {
  position: absolute;
  inset: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: 48% 42%;
}

/* the SVG scene stays as the fallback if the photo ever fails to load */
.lc-rest .screen-panel:not(.no-img) .scan-art { display: none; }


/* ==========================================================================
   "EVERYTHING YOU NEED FOR LIVER CARE" — fit the whole diagram in one screen
   Layout, nodes and centre card are unchanged; only the scale and the spacing
   respond to the available height so nothing is clipped top or bottom.
   ========================================================================== */

.lc-rest .section { scroll-margin-top: 0; }

.lc-rest .hub-section .section-title { margin-top: clamp(4px, 1vh, 14px); }

.lc-rest .hub-section .hub {
  margin-top: clamp(12px, 2.4vh, 42px);
  margin-bottom: clamp(8px, 1.6vh, 20px);
}

@media (min-width: 641px) {
  .lc-rest .hub-section .hub {
  /* 760 / 400 is the diagram's aspect ratio, so height drives the width here */
  width: min(940px, 100%, calc((100svh - var(--nav-h) - clamp(150px, 22vh, 230px)) * 1.9));
  }
}

@media (min-width: 1025px) {
  .lc-rest .hub-section { padding-bottom: clamp(24px, 4vh, 44px); }
}


/* ==========================================================================
   HEADING COLOUR — the listed heading words render black; the blue highlighted
   spans (.accent / .accent-inline / .lc-why-heading-line--accent) are untouched.
   ========================================================================== */

.lc-why-choose .lc-why-heading { color: var(--lc-why-navy); text-wrap: balance; }
.lc-rest .section-title,
.lc-rest .display-title,
.lc-rest .steps-title { color: var(--ink); text-wrap: balance; }
/* assessment panel — validation hint (hidden until something is missing) */
.panel__hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 13.5px;
  color: #d8433f;
  animation: panelHint 260ms ease both;
}

.panel__hint[hidden] { display: none; }

@keyframes panelHint {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quick assessment dropdowns: report, scan, then assessment type. */
.panel .select select {
  padding-left: 54px;
  padding-right: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f5f9ff);
  border-color: #d9e5f5;
  font-weight: 500;
}
.panel .select__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: #3577cf;
  pointer-events: none;
}
.panel .select__chevron { color: #3577cf; }
.panel .select:focus-within .select__chevron {
  transform: rotate(180deg);
}
.panel .select select.is-chosen {
  background: #eef5ff;
  border-color: #a8c8f2;
  color: #174e99;
}
.panel .select select option { color: #183454; background: #ffffff; }

/* Progressive enhancement keeps native keyboard and mobile selection. */
@supports (appearance: base-select) {
  .panel .select select,
  .panel .select select::picker(select) { appearance: base-select; }
  .panel .select select { align-items: center; }
  .panel .select select::picker-icon { display: none; }
  .panel .select select::picker(select) {
    margin-top: 8px;
    padding: 6px;
    border: 1px solid #d9e5f5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(20, 65, 125, 0.18);
  }
  .panel .select select option {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
  }
  .panel .select select option:hover,
  .panel .select select option:focus { background: #edf5ff; }
  .panel .select select option:checked {
    color: #175bc0;
    background: #e8f1ff;
    font-weight: 600;
  }
  .panel .select select option::checkmark { color: #1766e8; }
}
/* Responsive navbar typography and scroll state. */
.nav {
  position: fixed;
  top: 20px;
  width: min(1300px, calc(100% - 48px));
  max-width: none;
  height: 80px;
  padding: 0 18px 0 26px;
  gap: 20px;
  border-radius: 44px;
  transition: height 240ms ease, top 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}
.nav__brand { flex-shrink: 0; gap: 8px; }
.nav__mark { width: 42px; height: 36px; }
.nav__word { font-size: clamp(22px, 1.65vw, 28px); line-height: 1.2; }
.nav__links { margin-left: auto; gap: clamp(4px, 1vw, 14px); }
.nav__link { padding: 10px 14px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.3; }
.nav__cta {
  flex-shrink: 0;
  margin-left: auto;
  width: 200px;
  height: 50px;
  padding: 0 42px 0 16px;
  font-size: 16px;
  white-space: nowrap;
}
.nav__cta-arrow { right: 8px; width: 32px; height: 32px; padding: 9px; }
.nav.is-scrolled {
  top: 12px;
  height: 66px;
  background: rgba(250, 252, 255, 0.96);
  box-shadow: 0 8px 28px rgba(9, 35, 75, 0.14);
}
.nav-spacer { height: 90px; }
.nav__mobile-auth { display: none; }
html { scroll-padding-top: 100px; }
#home, #about, .lc-rest .section { scroll-margin-top: 0; }
@media (min-width: 981px) and (max-width: 1100px) {
  .nav { gap: 10px; padding-left: 18px; }
  .nav__link { padding-inline: 9px; }
  .nav__cta { width: 175px; font-size: 15px; }
}
@media (max-width: 980px) {
  .nav, .nav.is-scrolled {
    top: 12px;
    width: calc(100% - 24px);
    height: 64px;
    padding: 0 10px 0 16px;
    gap: 8px;
  }
  .nav__word { font-size: 22px; }
  .nav__mark { width: 34px; height: 30px; }
  .nav__links { margin: 0; gap: 4px; max-height: calc(100svh - 100px); overflow-y: auto; }
  .nav__link { font-size: 16px; padding: 12px 14px; border-radius: 12px; }
  .nav__mobile-auth { display: flex; color: #1766e8; border-top: 1px solid #dce7f5; }
  .nav-spacer { height: 64px; }
  html { scroll-padding-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__link { transition: none; }
}
/* Why Choose: each card reveals when it enters the viewport. */
.lc-why-choose { opacity: 1; transform: none; transition: none; }
.lc-why-choose .lc-why-heading-line { display: inline-block; }
.lc-why-choose .lc-why-heading-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1766e8, #75b8ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 850ms var(--lc-why-ease) 350ms;
}
.lc-why-choose.lc-why-in .lc-why-heading-text::before { transform: scaleX(1); }
.lc-why-choose.lc-why-in .lc-why-card {
  opacity: 0;
  transform: translateY(0);
  transition: transform 300ms ease, box-shadow 300ms ease;
  transition-delay: 0ms;
}
.lc-why-choose.lc-why-in .lc-why-card.is-revealed {
  opacity: 1;
  animation: lcWhyCardReveal 900ms var(--lc-why-ease) both;
  animation-delay: calc(var(--n) * 130ms);
}
@keyframes lcWhyCardReveal {
  from { opacity: 0; translate: 0 60px; scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.lc-why-choose.lc-why-in .lc-why-card.is-revealed .lc-why-shine {
  animation: lcWhyShine 1400ms ease-out both;
  animation-delay: calc(450ms + var(--n) * 130ms);
}
.lc-why-choose.lc-why-in .lc-why-icon {
  animation: lcWhyVisibleFloat 3.6s ease-in-out infinite;
  animation-delay: calc(var(--n) * 250ms);
}
@keyframes lcWhyVisibleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
.lc-why-choose.lc-why-in .lc-why-bar {
  animation: lcWhyBarBreathe 2.8s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--b) * 200ms);
}
@keyframes lcWhyBarBreathe {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.65); opacity: 0.65; }
}
.lc-why-choose.lc-why-in .lc-why-scan-cursor {
  animation: lcWhyScanSweep 3s ease-in-out infinite;
}
@keyframes lcWhyScanSweep {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, -5px); }
}
.lc-why-choose.lc-why-in .lc-why-doctor-plus {
  animation: lcWhySupportPulse 2.8s ease-in-out infinite;
}
@keyframes lcWhySupportPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.lc-why-choose .lc-why-card:not(.is-revealed) *,
.lc-why-choose:not(.lc-why-visible) *,
.lc-why-choose.lc-why-paused * { animation-play-state: paused !important; }
@media (hover: hover) and (pointer: fine) {
  .lc-why-choose.lc-why-in .lc-why-card.is-revealed:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px -20px rgba(23, 102, 232, 0.32), inset 0 0 0 1px rgba(23, 102, 232, 0.3);
  }
  .lc-why-choose.lc-why-in .lc-why-card:hover .lc-why-badge {
    transform: scale(1.1) rotate(-5deg);
    transition-delay: 0ms;
  }
  .lc-why-choose.lc-why-in .lc-why-card:hover .lc-why-title { transition-delay: 0ms; }
  .lc-why-choose.lc-why-in .lc-why-card:hover .lc-why-shine {
    animation: lcWhyHoverSweep 800ms ease-out both;
  }
}
@keyframes lcWhyHoverSweep {
  from { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
  35% { opacity: 0.7; }
  to { transform: translateX(320%) skewX(-14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-why-choose *, .lc-why-choose *::before, .lc-why-choose *::after {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
  .lc-why-choose .lc-why-heading-text::before { transform: scaleX(1); }
}