/* =====================================================================
   Kayakriti — Futuristic 3D Splash
   Screen 0 → Q1 → Q2 → Q3 → Success
   Premium aesthetic with animated mesh gradients, glass orbs, 3D depth
   ===================================================================== */

/* Lock scroll ONLY on the full-screen splash — all other pages scroll normally */
body.is-splash { overflow: hidden; }
body.is-splash {
  padding: 0;
  background: var(--page-bg);
  position: relative;
}

/* Aux palette tokens (used by 3D ring nodes) */
:root {
  --ring-line: rgba(45, 125, 210, 0.32);
  --ring-glow: rgba(45, 125, 210, 0.55);
}

/* Original blue aurora mesh background */
.splash-shell {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(194, 221, 243, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(214, 232, 248, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 80% 90%, rgba(235, 243, 251, 0.7) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(214, 232, 248, 0.55) 0%, transparent 55%),
    var(--page-bg);
  z-index: 1;
  overflow: hidden;
}

/* Floating ambient blue orbs */
.splash-shell::before,
.splash-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.splash-shell::before {
  width: 380px; height: 380px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, var(--blue-2) 0%, transparent 70%);
  animation: orbDrift1 22s ease-in-out infinite;
}
.splash-shell::after {
  width: 460px; height: 460px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, var(--tint-2) 0%, transparent 70%);
  animation: orbDrift2 28s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.1); }
  66% { transform: translate(-30px, 80px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -60px) scale(1.08); }
}

/* ========== TOP BAR ========== */
.splash-top {
  padding: 22px clamp(20px, 4vw, 48px);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
}
.splash-top .brand { font-size: 22px; }
.splash-top .actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.splash-top .skip-link { white-space: nowrap; }
/* Mobile — the Lucknow pill + Skip link + brand all crowd a 390px row.
   Hide the location pill (it's nice-to-have, not critical), tighten skip link. */
@media (max-width: 720px) {
  .splash-top { padding: 16px 16px; }
  .splash-top .brand { font-size: 18px; }
  .splash-top .actions .pill-white { display: none; }
  .splash-top .skip-link { font-size: 12px; padding: 7px 12px; }
}
.skip-link {
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.skip-link:hover {
  background: var(--white); color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--glow-soft);
}

/* ========== STAGE ========== */
.splash-stage {
  flex: 1;
  display: flex;
  align-items: safe center; justify-content: center;
  padding: 16px clamp(20px, 5vw, 80px) 32px;
  position: relative;
  min-height: 0;
  overflow-y: auto;
  z-index: 2;
}
.splash-screen {
  width: 100%;
  max-width: 1100px;
  animation: splashIn 0.6s var(--ease);
}
/* Q1 — slightly wider than the default 1100 so the cards have breathing
   room but the section doesn't span edge-to-edge. Title may wrap to 2
   lines on the longest entry (Reconstructive Surgery); the longer
   descriptions on the other 3 cards balance them to the same total
   line count, and the 180px min-height floor handles any residual gap. */
#screen-q1.splash-screen { max-width: 1100px; }
.splash-screen:not(.active) { display: none !important; }
@keyframes splashIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Bottom progress bar */
.splash-bottom {
  padding: 18px clamp(20px, 4vw, 48px);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
  border-top: 1px solid rgba(227, 236, 245, 0.6);
  background: rgba(245, 248, 253, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 5;
  position: relative;
}
.splash-bottom.hidden { display: none; }
.splash-progress-wrap { display: flex; align-items: center; gap: 14px; }
.splash-progress-dots { display: flex; gap: 6px; }
.splash-progress-dots .dot {
  width: 32px; height: 4px; border-radius: 4px; background: var(--line);
  transition: all 0.4s var(--ease);
}
.splash-progress-dots .dot.done { background: var(--blue); }
.splash-progress-dots .dot.active {
  background: var(--grad-blue);
  width: 48px;
  box-shadow: 0 0 12px rgba(45, 125, 210, 0.4);
}
.splash-step-text {
  font-family: var(--font);
  font-size: 11px; color: var(--muted);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.funnel-back {
  font-family: var(--font);
  font-size: 14px; color: var(--muted);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.funnel-back:hover {
  color: var(--ink);
  border-color: var(--tint);
  transform: translateX(-2px);
}

/* ========================================================================
   SCREEN 0 — FUTURISTIC 3D HERO SPLASH
   ======================================================================== */
.screen-0 {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: center;
  max-width: 1200px;
}
@media (max-width: 960px) {
  .screen-0 { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}

.screen-0 .pill-wrap { margin-bottom: 18px; }
.screen-0 .eyebrow {
  background: var(--white);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px -4px rgba(45, 125, 210, 0.15);
}
.screen-0 h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.8vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  font-weight: 400;
  color: var(--ink);
}
.screen-0 h1 .serif {
  display: block;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 50%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.screen-0 .lead {
  font-size: clamp(16px, 1.5vw, 19px);
  margin-bottom: 32px;
  line-height: 1.6;
  color: var(--ink-3);
}
.screen-0 .statbar {
  margin-top: 36px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-bd);
  box-shadow: 0 8px 32px -8px rgba(14, 30, 53, 0.08);
}
.screen-0 .actions {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 960px) { .screen-0 .actions { align-items: center; } }
.cta-call-line {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.cta-call-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.cta-call-link:hover { color: var(--ink); }

/* ========== EDITORIAL SCULPTURE STAGE (3D perspective) ========== */
.illo {
  position: relative;
  aspect-ratio: 0.82;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

/* True 3D orbital rings — tilted in perspective, spin on Z (Saturn-style) */
.illo-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--ring-line);
  transform-style: preserve-3d;
  pointer-events: none;
}
.illo-orbit-1 {
  inset: 18% 6%;
  transform: rotateX(72deg) rotateZ(0deg);
  animation: orbit3D-1 28s linear infinite;
}
.illo-orbit-2 {
  inset: 30% 14%;
  border-color: rgba(45, 125, 210, 0.24);
  border-style: dashed;
  transform: rotateX(70deg) rotateY(18deg) rotateZ(0deg);
  animation: orbit3D-2 38s linear infinite reverse;
}
.illo-orbit-3 {
  inset: 8% 20%;
  border-color: rgba(45, 125, 210, 0.18);
  border-width: 0.5px;
  transform: rotateX(76deg) rotateY(-12deg) rotateZ(0deg);
  animation: orbit3D-3 46s linear infinite;
}

/* Glowing nodes that travel on the rim — they appear to come forward / recede in 3D */
.illo-orbit .orbit-node {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5BAEFF, var(--blue) 50%, var(--blue-deep));
  box-shadow: 0 0 12px var(--ring-glow), inset 0 -2px 3px rgba(0,0,0,0.2);
  top: -5px; left: 50%; transform: translateX(-50%);
}
.illo-orbit-1 .orbit-node:nth-child(2) { top: auto; bottom: -5px; }
.illo-orbit-2 .orbit-node { width: 6px; height: 6px; }

@keyframes orbit3D-1 {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to   { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbit3D-2 {
  from { transform: rotateX(70deg) rotateY(18deg) rotateZ(0deg); }
  to   { transform: rotateX(70deg) rotateY(18deg) rotateZ(360deg); }
}
@keyframes orbit3D-3 {
  from { transform: rotateX(76deg) rotateY(-12deg) rotateZ(0deg); }
  to   { transform: rotateX(76deg) rotateY(-12deg) rotateZ(360deg); }
}

/* Editorial frame — thin blue rectangle behind sculpture */
.illo-frame {
  position: absolute;
  top: 14%; left: 28%;
  width: 44%; height: 64%;
  border: 1.5px solid var(--ring-line);
  border-radius: 2px;
  z-index: 1;
  animation: frameBreathe 7s ease-in-out infinite;
}
@keyframes frameBreathe {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-8px); opacity: 0.85; }
}

/* Soft warm pedestal glow under the sculpture */
.illo-pedestal {
  position: absolute;
  bottom: 8%; left: 50%;
  width: 60%; height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 100% 50% at 50% 50%, rgba(45, 125, 210, 0.28) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

/* Sphere/old-rings classes silenced (safety in case any HTML still references them) */
.illo-ring-outer, .illo-ring-mid, .illo-bg, .illo-sphere, .illo-svg { display: none !important; }
@keyframes sphereFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Floating service tags — refined white/blue glass chips */
.illo-tag {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  padding: 10px 16px 10px 12px;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  display: inline-flex; gap: 8px; align-items: center;
  box-shadow:
    0 18px 36px -10px rgba(14, 30, 53, 0.14),
    0 2px 6px rgba(45, 125, 210, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: floaty 6s ease-in-out infinite;
  z-index: 5;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-size: 11px;
}
.illo-tag .tag-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5BAEFF 0%, var(--blue) 60%, var(--blue-deep) 100%);
  display: grid; place-items: center;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(45, 125, 210, 0.45);
}
.illo-tag .tag-icon svg { width: 13px; height: 13px; }
/* Push tags well outside the figure silhouette so they don't overlap the sculpture */
.illo-tag-1 { top:  4%; left:  -20%; animation-delay: 0s; }
.illo-tag-2 { top: 36%; right: -22%; animation-delay: 1.4s; }
.illo-tag-3 { bottom: 14%; left: -16%; animation-delay: 2.8s; }
.illo-tag-4 { top: 12%; right: -16%; animation-delay: 4.2s; }
/* Tablet (901–960px): just shrink the tag font; positions stay at the
   negative-offset edges defined above. Below 900px the tags are hidden
   entirely by the mobile rules. */
@media (max-width: 960px) {
  .illo-tag { font-size: 11px; padding: 7px 12px 7px 8px; }
  .illo-tag .tag-icon { width: 20px; height: 20px; }
}

/* Decorative drifting particles (sky blue) */
.illo-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(45, 125, 210, 0.55);
  animation: particleFloat 7s ease-in-out infinite;
  z-index: 2;
}
.illo-particle.p1 { width: 6px; height: 6px; top: 12%; left: 18%; animation-delay: 0s; opacity: 0.6; }
.illo-particle.p2 { width: 5px; height: 5px; top: 80%; left: 78%; animation-delay: 1.5s; opacity: 0.5; }
.illo-particle.p3 { width: 4px; height: 4px; top: 28%; right: 12%; animation-delay: 3s; opacity: 0.55; }
.illo-particle.p4 { width: 5px; height: 5px; bottom: 22%; left: 8%; animation-delay: 4.5s; opacity: 0.6; }
@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(8px, -16px); opacity: 0.9; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ========================================================================
   SCREENS 1-2 — QUESTIONS
   ======================================================================== */
.screen-q {
  max-width: 920px; margin: 0 auto;
  text-align: center;
}
.screen-q .eyebrow { margin-bottom: 14px; }
.screen-q h2 {
  font-size: clamp(28px, 4.2vw, 48px);
  margin-bottom: 12px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.screen-q h2 .accent { color: var(--blue); }
.screen-q .subtitle {
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto; margin-right: auto;
}

/* Q1 / Q2 / Q3 grids — using minmax(0, 1fr) instead of 1fr forces every
   column to the same width even when one card's text is longer than the
   others. (Plain `1fr` is shorthand for `minmax(auto, 1fr)` — the auto
   floor lets a column grow to fit min-content, which made the "Not sure
   yet" card visibly wider than its siblings.) `align-items: stretch`
   makes every card the same height as the tallest in its row. */
.opt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
  width: 100%;
  align-items: stretch;
}
/* funnel.css's `.opt-list` rule (loaded after splash.css) re-sets some
   properties — re-assert grid here at the splash-shell scope so its
   properties win on the splash page. */
.splash-shell .opt-list {
  display: grid !important;
  align-items: stretch !important;
}
.opt-list.opt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt-list.opt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Belt-and-braces: force each grid item to its share width AND height
   regardless of the inner content's min-content size. Without this, a
   card with a wrapped title or a longer description can request more
   horizontal space than its siblings (so it appears wider) or vary in
   height (so the row looks staggered). */
.opt-list > .opt {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}
/* Q1 (opt-grid-4) only — fixed min-height so all 4 cards converge to the
   same visible size even when one card's title wraps to two lines.
   Q2 / Q3 grids keep their natural compact sizing. */
.opt-list.opt-grid-4 > .opt { min-height: 180px; }
.opt-list.opt-list-stack { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
/* Tablet — 2 columns */
@media (max-width: 900px) {
  .opt-list,
  .opt-list.opt-grid-3,
  .opt-list.opt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile — single column, every card the same width as its siblings */
@media (max-width: 720px) {
  .opt-list, .opt-list.opt-grid-3, .opt-list.opt-grid-4 { grid-template-columns: 1fr; }
  .opt-list .opt { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* Compact card-style option (used in Q1 grid) */
.opt {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 18px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 84px;
}
.opt::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-aurora);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: -1;
  border-radius: inherit;
}
.opt:hover {
  border-color: var(--blue-2);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(45, 125, 210, 0.2);
}
.opt:hover::before { opacity: 0.5; }
.opt.selected {
  border-color: var(--blue);
  background: rgba(214, 232, 248, 0.6);
  box-shadow: 0 0 0 4px rgba(45, 125, 210, 0.15), var(--glow-blue);
}

.opt-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface), var(--tint));
  display: grid; place-items: center;
  color: var(--blue);
  font-size: 22px;
  flex-shrink: 0;
  transition: all var(--t-base) var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.opt-icon svg { width: 24px; height: 24px; }
.opt:hover .opt-icon { transform: scale(1.08) rotate(-4deg); }
.opt.selected .opt-icon {
  background: var(--grad-blue); color: var(--white);
  box-shadow: 0 6px 16px rgba(45, 125, 210, 0.45);
}

.opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-main .title {
  color: var(--ink); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  line-height: 1.2;
}
.opt-main .desc {
  color: var(--muted); font-size: 12.5px;
  line-height: 1.4;
}

/* Larger stacked variant (used for Q2 sub-services list) */
.opt-list-stack .opt {
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  padding: 18px 22px;
}
.opt-list-stack .opt-icon { width: 52px; height: 52px; font-size: 24px; border-radius: 16px; }
.opt-list-stack .opt-main .title { font-size: 16.5px; }
.opt-list-stack .opt-main .desc { font-size: 13.5px; }
.opt-list-stack .opt-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.opt-list-stack .opt.selected .opt-check {
  background: var(--blue); border-color: var(--blue);
}
.opt-list-stack .opt.selected .opt-check::after {
  content: "✓"; color: var(--white); font-size: 14px; font-weight: 800;
}

/* Q2 sub-service grid (3-col on desktop) */
.opt-grid-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: left;
}
@media (max-width: 900px) { .opt-grid-sub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .opt-grid-sub { grid-template-columns: 1fr; } }
.opt-grid-sub .opt {
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px 16px;
  min-height: 68px;
}
.opt-grid-sub .opt-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
.opt-grid-sub .opt-icon svg { width: 18px; height: 18px; }
.opt-grid-sub .opt-main .title { font-size: 14px; font-family: var(--font); font-weight: 600; }
.opt-grid-sub .opt-main .desc { font-size: 12px; }

/* Sub-section header within Q2 */
.q2-section {
  margin-bottom: 24px;
}
.q2-section-title {
  text-align: left;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 10px 4px;
  display: flex; align-items: center; gap: 8px;
}
.q2-section-title::before {
  content: ""; width: 14px; height: 2px; background: var(--blue);
  border-radius: 2px;
}

/* ========================================================================
   SCREEN 3 — LEAD FORM
   ======================================================================== */
.screen-form {
  max-width: 680px; margin: 0 auto;
}
.screen-form .form-header {
  background: var(--grad-ink);
  color: var(--white);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}
.screen-form .form-header::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(45, 125, 210, 0.4) 0%, transparent 70%);
  pointer-events: none;
}
.screen-form .form-header h2 {
  color: var(--white);
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 8px;
  position: relative;
  letter-spacing: -0.03em;
}
.screen-form .form-header p {
  color: rgba(255,255,255,0.78);
  font-size: 14.5px;
  margin-bottom: 16px;
  position: relative;
}
.screen-form .form-header .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative;
}
.screen-form .form-header .pill {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 11px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.screen-form .form-body {
  background: var(--white);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding: 32px 36px;
  box-shadow: 0 24px 60px -16px rgba(14, 30, 53, 0.12);
}

/* Preview-of-service card inside step 3 */
.screen-form .preview-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--tint) 100%);
  border-radius: var(--r-lg); padding: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(45, 125, 210, 0.15);
  position: relative;
  overflow: hidden;
}
.screen-form .preview-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  pointer-events: none;
}
.screen-form .preview-card .eyebrow { margin-bottom: 6px; }
.screen-form .preview-card h3 {
  font-size: 18px; margin-bottom: 6px;
  position: relative;
}
.screen-form .preview-card p { color: var(--body); font-size: 13.5px; margin-bottom: 12px; position: relative; }
.screen-form .preview-card .meta-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 12px;
  position: relative;
}
.screen-form .preview-card .meta-row strong { color: var(--ink); }

/* ========================================================================
   SCREEN 4 — SUCCESS
   ======================================================================== */
.screen-success {
  text-align: center; max-width: 600px; margin: 0 auto;
}
.screen-success .check {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(31, 169, 113, 0.15), rgba(45, 125, 210, 0.1));
  border: 2px solid rgba(31, 169, 113, 0.3);
  color: var(--success);
  margin: 0 auto 28px;
  display: grid; place-items: center;
  font-size: 48px;
  position: relative;
  animation: checkBounce 0.8s var(--ease-spring);
}
.screen-success .check::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(31, 169, 113, 0.2);
  animation: checkRipple 2s ease-out infinite;
}
@keyframes checkBounce {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkRipple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.screen-success h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 12px;
  letter-spacing: -0.035em;
}
.screen-success .lead { color: var(--muted); margin-bottom: 32px; }
.screen-success .next-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: left;
  margin-bottom: 14px;
  transition: all var(--t-base) var(--ease);
}
.screen-success .next-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-soft);
  border-color: var(--tint);
}
.screen-success .next-card h4 {
  font-family: var(--font);
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 700;
}
.screen-success .next-card .hdr { font-weight: 700; color: var(--ink); margin-bottom: 12px; font-size: 17px; }
.screen-success .next-card p { color: var(--body); font-size: 14px; margin-bottom: 16px; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 720px) {
  /* Splash form (Q4) — keep everything inside the container on phones. */
  .screen-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .screen-form .form-header,
  .screen-form .form-body {
    padding: 22px 18px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;          /* clip any ghost pixel of bleed */
  }
  .screen-form .form { gap: 12px; }
  .screen-form .form .field input,
  .screen-form .form .field select,
  .screen-form .form .field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .screen-form .tel-wrap { min-width: 0; max-width: 100%; }
  .opt-list-stack .opt {
    grid-template-columns: 44px 1fr auto;
    padding: 14px 16px; gap: 12px;
  }
  .opt-list-stack .opt-icon { width: 42px; height: 42px; font-size: 20px; }
}

.splash-stage { padding-bottom: 24px; }

/* ========================================================================
   Q4 SERVICE PICKER
   When the user picked a sub-category at Q3 (e.g. Eyes), the Q4 preview
   card lists every procedure under it as small selectable chips. Picking
   one writes state.step4 and updates the redirect target + tag pills.
   ======================================================================== */
.preview-card-services .preview-prompt {
  margin: 8px 0 12px;
  font-size: 13.5px;
  color: var(--body);
}
.q4-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 540px) {
  .q4-service-list { grid-template-columns: 1fr; }
}
.q4-service {
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  min-width: 0;
}
.q4-service:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.q4-service.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.18);
}
.q4-service-title {
  flex: 1;
  line-height: 1.25;
  word-break: break-word;
}

/* ========================================================================
   APPOINTMENT TYPE CARDS
   Two selectable cards above "Preferred time" — Video (Free) / In-patient (Paid).
   Each card has a flashing golden-gradient sticker pinned to the top-right.
   ======================================================================== */
.appt-type-field { gap: 8px; }
.appt-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.appt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  /* Symmetric padding — sticker is now pinned to the same baseline as
     the title, so we don't need extra top space above the heading. */
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color: var(--ink);
  min-width: 0;
}
.appt-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.appt-card.selected {
  border-color: var(--blue);
  background: var(--tint, #E6F0FB);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15);
}
.appt-title {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--ink);
  /* Reserve space on the right for the absolutely-positioned sticker so
     a long title never overlaps the badge. */
  padding-right: 60px;
}
.appt-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

/* Golden sticker — animated shimmer + soft pulsing glow.
   Pinned to the top-right of each card. */
.appt-sticker {
  position: absolute;
  /* Top:14px aligns with the card's 14px top padding so the sticker sits
     on the SAME line as the title (no empty space above the title). */
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5A3A00;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.6);
  background: linear-gradient(
    105deg,
    #E6B23F 0%,
    #FCE38A 30%,
    #FFF6CF 50%,
    #FCE38A 70%,
    #E6B23F 100%
  );
  background-size: 220% 100%;
  animation: applyShimmer 2.4s linear infinite, applyPulse 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes applyShimmer {
  0%   { background-position: 220% 50%; }
  100% { background-position: -120% 50%; }
}
@keyframes applyPulse {
  0%, 100% { box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 6px 18px -4px rgba(255, 200, 80, 0.85); transform: scale(1.06); }
}

/* On phones, stack the two cards. */
@media (max-width: 540px) {
  .appt-type-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .appt-sticker { animation: none; }
}

/* ========================================================================
   SYNCED HEADLINE WORD ROTATOR + CENTER MORPHING BODY-PART STACK
   Single 14s clock — 4 states × 3.5s each.
   Word and matching body-part icon are locked via shared animation-delay.
   ======================================================================== */

/* --- Three-line stacked headline (Where every / [rotator] / begins.) --- */
.screen-0 h1.hero-headline { line-height: 1.02; }
.screen-0 h1.hero-headline .line {
  display: block;
}
.screen-0 h1.hero-headline .line-rotator {
  /* The rotator line sits on its own row so width changes don't push other words. */
  min-height: 1.05em;
}

/* --- Headline rotator --- */
.screen-0 h1 .word-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  perspective: 800px;
}
/* Invisible ghost word — sets the container width to the longest word.
   Now isolated to its own line so trailing words never collide. */
.screen-0 h1 .word-rotator .word-ghost {
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.screen-0 h1 .word-rotator .word {
  position: absolute;
  left: 0; right: 0; top: 0;
  /* Inherit alignment from parent — center on mobile (where headline is centered),
     left on desktop (where headline sits in the left column). */
  text-align: inherit;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, #5BAEFF 0%, var(--blue) 45%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 24px rgba(45, 125, 210, 0.18);
  opacity: 0;
  transform: translateY(28px) rotateX(-40deg);
  transform-origin: 50% 100%;
  filter: blur(10px);
  animation: wordCycle 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.screen-0 h1 .word-rotator .w1 { animation-delay: 0s; }
.screen-0 h1 .word-rotator .w2 { animation-delay: 3.5s; }
.screen-0 h1 .word-rotator .w3 { animation-delay: 7s; }
.screen-0 h1 .word-rotator .w4 { animation-delay: 10.5s; }

@keyframes wordCycle {
  0%   { opacity: 0; transform: translateY(28px) rotateX(-40deg); filter: blur(10px); }
  4%   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  21%  { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  25%  { opacity: 0; transform: translateY(-24px) rotateX(40deg); filter: blur(10px); }
  100% { opacity: 0; transform: translateY(28px) rotateX(-40deg); filter: blur(10px); }
}

/* --- Center morphing sculpture stack (DEGA-style) --- */
.illo-morph {
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: 78%;
  aspect-ratio: 0.73;
  z-index: 3;
  display: grid;
  place-items: end center;
  pointer-events: none;
  animation: sculptFloat 9s ease-in-out infinite;
}
@keyframes sculptFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}
.illo-morph .morph-svg,
.illo-morph .morph-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  filter: blur(18px) drop-shadow(0 18px 30px rgba(45, 125, 210, 0.18));
  animation: morphCycle 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: opacity, transform, filter;
}
.illo-morph .m1 { animation-delay: 0s; }
.illo-morph .m2 { animation-delay: 3.5s; }
.illo-morph .m3 { animation-delay: 7s; }
.illo-morph .m4 { animation-delay: 10.5s; }

@keyframes morphCycle {
  0%   { opacity: 0; transform: scale(0.7) translateY(30px); filter: blur(20px); }
  4%   { opacity: 1; transform: scale(1.02) translateY(0); filter: blur(0); }
  10%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  20%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  25%  { opacity: 0; transform: scale(1.05) translateY(-30px); filter: blur(20px); }
  100% { opacity: 0; transform: scale(0.7) translateY(30px); filter: blur(20px); }
}

/* Reduced motion — kill the rotation, freeze on the first state */
@media (prefers-reduced-motion: reduce) {
  .screen-0 h1 .word-rotator .word,
  .illo-morph .morph-svg,
  .illo-morph .morph-img {
    animation: none;
  }
  .screen-0 h1 .word-rotator .w1,
  .illo-morph .m1 {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .illo-morph .m1 { filter: drop-shadow(0 18px 36px rgba(45, 125, 210, 0.42)); }
}

/* ============================================================
   MOBILE FIRST-FOLD FIX
   Goal: image AND rotating word are visible together in the
   initial viewport — no scrolling required to see the rotation.
   Layout order (mobile only):
     1. Compact image (top, ~36% of viewport)
     2. Eyebrow + headline (rotating word)
     3. Lead text + buttons
     4. Statbar (intentionally below the fold)
   ============================================================ */
@media (max-width: 900px) {
  .screen-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: none;
    gap: 10px; /* 10px rhythm between every column item */
  }
  /* Flatten the text-block so its children participate in the flex column
     gap (and let us reorder independently of HTML structure). */
  .screen-0 > div:first-child { display: contents; }

  /* === Mobile order — title + image + Get started visible in first viewport ===
     1 pill   2 headline   3 IMAGE   4 actions   5 lead   6 statbar
     All vertical spacing is now driven by the parent's `gap: 5px`,
     so per-element margins are zeroed out. */
  .screen-0 .pill-wrap        { order: 1; margin: 0; }
  .screen-0 h1.hero-headline  { order: 2; margin: 0; font-size: 34px; line-height: 1.05; }
  .screen-0 > .illo,
  .screen-0 > .doctor-stage   { order: 3; margin: 0 auto; }
  .screen-0 .actions          { order: 4; margin: 0; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .screen-0 .actions .btn     { padding: 12px 18px; font-size: 14px; }
  .screen-0 .lead             { order: 5; margin: 0 auto; font-size: 14px; line-height: 1.5; max-width: 420px; }
  .screen-0 .statbar          { order: 6; margin: 0; padding: 16px; gap: 8px; width: 100%; max-width: 460px; }
  .screen-0 .statbar > div strong { font-size: 22px; }
  .screen-0 .statbar > div span   { font-size: 11px; }

  /* === Image: sized so title + image + Get started all fit in first fold ===
     Cap height at ~42vh so the actions row stays above the fold on
     standard mobile viewports (~700–850px tall). */
  .screen-0 > .illo,
  .screen-0 > .doctor-stage {
    margin: 0 auto;
    width: 70%;
    max-width: 280px;
    min-width: 200px;
    max-height: 42vh;
  }
  .screen-0 > .illo         { aspect-ratio: 0.82; }
  .screen-0 > .doctor-stage { aspect-ratio: 0.78; }

  /* === Center the eyebrow pill explicitly on mobile ===
     The pill-wrap container needs to be a flex centring box so the
     inline-flex .eyebrow chip lands in the middle of its line. */
  .screen-0 .pill-wrap { display: flex; justify-content: center; width: 100%; }

  /* === Mobile fix for the DOCTOR variant only ===
     The doctor portrait was using position:absolute, which can collapse
     the stage's aspect-ratio height in a flex column and let the lead
     text overlap the image. Switch to natural flow so the stage height
     is driven by the image itself. The sculpture variant is left
     completely alone — its absolute positioning is correctly anchored
     by .illo's aspect-ratio inside its grid frame. */
  .screen-0.doctor-mode .doctor-stage {
    aspect-ratio: auto;
    min-height: 0;
  }
  .screen-0.doctor-mode .dr-portrait {
    position: relative;
    inset: auto;
    width: 100%;
    display: block;
  }
  .screen-0.doctor-mode .dr-portrait img {
    height: auto;
    width: 100%;
    max-height: 40vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    /* Same soft fade at the bottom on mobile too */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 78%,
      rgba(0, 0, 0, 0.6) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 78%,
      rgba(0, 0, 0, 0.6) 90%,
      transparent 100%
    );
  }

  /* === Floating tags on mobile — keep them visible but compact ===
     Smaller font, icon-only feel, anchored to the outer edges of the stage. */
  .screen-0 .illo-tag,
  .screen-0 .dr-tag {
    font-size: 10px;
    padding: 5px 9px 5px 6px;
    gap: 5px;
    box-shadow: 0 4px 12px -4px rgba(14, 30, 53, 0.18);
  }
  .screen-0 .illo-tag .tag-icon,
  .screen-0 .dr-tag .tag-icon { width: 16px; height: 16px; }
  .screen-0 .illo-tag .tag-icon svg,
  .screen-0 .dr-tag .tag-icon svg { width: 9px; height: 9px; }

  /* Pull tags closer in — negative offsets are too aggressive on a small stage */
  .screen-0 .illo-tag-1 { top:  -2%; left:  -10%; }
  .screen-0 .illo-tag-2 { top:  32%; right: -12%; }
  .screen-0 .illo-tag-3 { bottom: 4%; left:  -10%; }
  .screen-0 .illo-tag-4 { top:   8%; right: -10%; }

  .screen-0 .dr-tag-1   { top:  -2%; left:  -8%;  }
  .screen-0 .dr-tag-2   { top:  22%; right: -10%; }
  .screen-0 .dr-tag-3   { bottom: 26%; left: -10%; }
  .screen-0 .dr-tag-4   { bottom: 4%; right: -8%;  }

  /* Credential chips smaller too */
  .screen-0 .dr-cred { font-size: 9px; padding: 4px 8px; }
  .screen-0 .dr-cred-1 { top: 12%;  right: -8%; }
  .screen-0 .dr-cred-2 { top: 50%;  left:  -14%; }
  .screen-0 .dr-cred-3 { bottom: 18%; right: -8%; }

  /* Hide only the very small decorative noise — keep the orbits/frame */
  .screen-0 .illo-particle,
  .screen-0 .dr-particle { display: none !important; }
}

/* Very small screens (<380px) — drop image size further so it still fits */
@media (max-width: 380px) {
  .screen-0 > .illo,
  .screen-0 > .doctor-stage { max-width: 240px; width: 80%; }
  .screen-0 h1.hero-headline { font-size: 32px; }
  /* On very small screens the tags compete for too little horizontal room.
     Hide them — the image carries the story. */
  .screen-0 .illo-tag,
  .screen-0 .dr-tag,
  .screen-0 .dr-cred { display: none; }
}

/* =====================================================================
   DOCTOR-LED HERO VARIANT  (.screen-0.doctor-mode)
   index-doctor.html — Dr. Agarwal photo with orbiting service tags
   ===================================================================== */

.doctor-stage {
  position: relative;
  aspect-ratio: 0.78;
  max-width: 340px;       /* reduced — was 440, still too large */
  width: 100%;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  overflow: visible; /* tags need to extend beyond the stage box */
}
/* The image itself shouldn't ever bleed into following text, so we
   isolate its overflow via the dr-portrait container (see below). */

/* Desktop only: pin doctor stage to the top of the right column so it
   sits next to the title, not centered vertically. */
@media (min-width: 901px) {
  .screen-0.doctor-mode { align-items: start; }
  .doctor-stage { align-self: start; margin-top: 8px; }
}

/* Soft halo behind the doctor (radial brand glow) */
.dr-halo {
  position: absolute;
  inset: 8% 12% 14% 12%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(45,125,210,0.22) 0%, rgba(194,221,243,0.18) 30%, transparent 60%);
  filter: blur(20px);
  z-index: 1;
}

/* Doctor portrait — anchored at the bottom centre of the stage */
.dr-portrait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  z-index: 3;
  pointer-events: none;
}
.dr-portrait img {
  height: 96%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(14, 30, 53, 0.20))
          drop-shadow(0 4px 8px rgba(45, 125, 210, 0.10));
  /* Soft fade-out at the bottom so the photo melts into the background
     instead of cutting hard against the page. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    rgba(0, 0, 0, 0.6) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    rgba(0, 0, 0, 0.6) 90%,
    transparent 100%
  );
  animation: dr-float 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes dr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- Orbital rings (slow rotation around the doctor) --- */
.dr-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 210, 0.18);
  pointer-events: none;
  z-index: 2;
  transform-style: preserve-3d;
}
.dr-orbit-1 {
  inset: 8% 4%;
  transform: rotateX(72deg);
  animation: dr-spin 28s linear infinite;
}
.dr-orbit-2 {
  inset: 14% 10%;
  border-color: rgba(45, 125, 210, 0.12);
  border-style: dashed;
  transform: rotateX(72deg) rotateZ(45deg);
  animation: dr-spin 36s linear infinite reverse;
}
.dr-orbit-3 {
  inset: 22% 18%;
  border-color: rgba(45, 125, 210, 0.10);
  transform: rotateX(72deg);
  animation: dr-spin 22s linear infinite;
}
@keyframes dr-spin {
  from { transform: rotateX(72deg) rotateZ(0); }
  to   { transform: rotateX(72deg) rotateZ(360deg); }
}

/* --- Floating service tags (orbit around the photo, but stay legible) --- */
.dr-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  z-index: 4;
  white-space: nowrap;
  animation: dr-floaty 7s ease-in-out infinite;
}
.dr-tag .tag-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
}
.dr-tag .tag-icon svg { width: 12px; height: 12px; }

/* Position tags around the EDGE of the stage, not over the photo.
   Negative offsets push them well outside the image silhouette. */
.dr-tag-1 { top:   2%; left:  -18%; animation-delay: 0s; }
.dr-tag-2 { top:  20%; right: -22%; animation-delay: 1.4s; }
.dr-tag-3 { bottom: 24%; left: -20%; animation-delay: 2.8s; }
.dr-tag-4 { bottom: 4%; right: -16%; animation-delay: 4.2s; }

@keyframes dr-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --- Credential chips (smaller, more clinical, ink-coloured) --- */
.dr-cred {
  position: absolute;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  z-index: 4;
  white-space: nowrap;
  box-shadow: 0 6px 20px -8px rgba(14, 30, 53, 0.35);
  animation: dr-floaty 8s ease-in-out infinite;
}
.dr-cred-1 { top: 10%;   right: -12%; animation-delay: 0.6s; }
.dr-cred-2 { top: 48%;   left: -22%;  animation-delay: 2.2s; }
.dr-cred-3 { bottom: 18%; right: -14%; animation-delay: 3.6s; }

/* --- Decorative particles --- */
.dr-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
  z-index: 2;
  animation: dr-float 6s ease-in-out infinite;
}
.dr-particle.p1 { top: 12%; left: 22%; animation-delay: 0s; }
.dr-particle.p2 { top: 65%; right: 20%; animation-delay: 1.5s; opacity: 0.4; }
.dr-particle.p3 { top: 80%; left: 30%; animation-delay: 3s; width: 4px; height: 4px; }

/* Mobile fold + reorder + decoration-hiding handled in the global
   @media (max-width: 900px) block above (search "Order requested by client"). */

/* ===========================================================================
   4-step funnel additions
   =========================================================================== */

/* Make the progress bar handle 4 dots without crowding */
.splash-progress-dots .dot {
  width: 26px;       /* was 32px — leaves room for the new fourth dot */
}
.splash-progress-dots .dot.active { width: 38px; }

/* Q3 grid matches Q2 visual density */
#screen-q3 .opt-list,
#screen-q3 .opt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  #screen-q3 .opt-list,
  #screen-q3 .opt-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #screen-q3 .opt-list,
  #screen-q3 .opt-grid-3 { grid-template-columns: 1fr; }
}

/* Success screen — the 5-second redirect note */
.screen-success .redirect-note {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
  background: rgba(45, 125, 210, 0.08);
  border: 1px solid rgba(45, 125, 210, 0.18);
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-block;
}
.screen-success .redirect-note strong { color: var(--ink); }
.screen-success #redirect-countdown {
  display: inline-block;
  min-width: 1.4em;
  font-weight: 700;
  color: var(--blue);
  font-feature-settings: "tnum";
}

/* ============================================================================
   INACTIVITY POPUP — homepage only.
   Appears after 6s of no clicks/taps/keys. 4 CTAs: Video / In-patient /
   Call / WhatsApp. Dismissible via close button, overlay, or ESC.
   ============================================================================*/
.kaya-inact {
  position: fixed; inset: 0;
  z-index: 9500;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.kaya-inact.open { opacity: 1; visibility: visible; }
.kaya-inact-overlay {
  position: absolute; inset: 0;
  background: rgba(14, 30, 53, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.kaya-inact-box {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(14, 30, 53, 0.25);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaya-inact.open .kaya-inact-box { transform: translateY(0); }

.kaya-inact-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: #fff; display: grid; place-items: center;
  transition: background 0.15s;
  z-index: 2;
}
.kaya-inact-close:hover { background: rgba(255,255,255,0.3); }

.kaya-inact-head {
  background: linear-gradient(135deg, var(--blue) 0%, #1a5fa8 100%);
  border-radius: 20px 20px 0 0;
  padding: 28px 28px 22px;
}
.kaya-inact-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: block; margin-bottom: 8px;
}
.kaya-inact-head h2 {
  font-size: clamp(20px, 3vw, 24px);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; margin: 0 0 8px; color: #fff;
  line-height: 1.2;
}
.kaya-inact-head p {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

.kaya-inact-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.kaya-inact-body .appt-card { width: 100%; min-height: 0; }

/* Skip-to-Website button — sits above the booking options. Layout
   mirrors the .appt-card below: title + description stacked on the
   left, badge / sticker on the right. */
.kaya-inact-skip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.kaya-inact-skip:hover {
  border-color: var(--blue);
  background: var(--tint, #E6F0FB);
  transform: translateY(-1px);
}
.kaya-inact-skip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kaya-inact-skip-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.25;
}
.kaya-inact-skip-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
/* Arrow badge — same golden gradient + shimmer + pulse animations as
   the Free / Paid stickers on the booking cards below. */
.kaya-inact-skip-arrow {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: #5A3A00;
  box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.6);
  background: linear-gradient(
    105deg,
    #E6B23F 0%,
    #FCE38A 30%,
    #FFF6CF 50%,
    #FCE38A 70%,
    #E6B23F 100%
  );
  background-size: 220% 100%;
  animation: applyShimmer 2.4s linear infinite, applyPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kaya-inact-skip-arrow { animation: none; }
}

.kaya-inact-or {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px;
  font-size: 12px; color: var(--muted);
}
.kaya-inact-or::before, .kaya-inact-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.kaya-inact-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kaya-inact-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.kaya-inact-btn:hover { transform: translateY(-1px); }
.kaya-inact-btn-call { color: var(--ink); }
.kaya-inact-btn-call:hover { background: var(--surface); }
.kaya-inact-btn-wa {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.kaya-inact-btn-wa:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
  color: #fff;
}

@media (max-width: 480px) {
  .kaya-inact-head { padding: 22px 20px 18px; border-radius: 20px 20px 0 0; }
  .kaya-inact-body { padding: 18px 18px 22px; }
  /* Keep Call Us / Chat with us side-by-side on phones too (don't stack). */
  .kaya-inact-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kaya-inact-btn { padding: 12px 10px; font-size: 13px; gap: 6px; }
  .kaya-inact-btn span:last-child { white-space: nowrap; }
}