/* ============================================================
   SaluVista — Brand Theme
   An Orozan company · medical-tourism platform
   Drop-in CSS: link this file, then use the tokens + classes.
   ============================================================ */

:root {
  /* ---- Brand blue (established — matches published media) ---- */
  --salu-blue:            #273ED4;  /* PRIMARY: CTAs, links, key accents */
  --salu-blue-hover:      #3550E0;  /* button hover */
  --salu-blue-light:      #5B72F0;  /* secondary accent */
  --salu-blue-lilac:      #8B9BF5;  /* highlights on dark surfaces */

  /* ---- Navy (same hue, darkened — grounding surfaces) ---- */
  --salu-navy:            #16205C;  /* dark sections, ink on light bg */
  --salu-navy-deep:       #10184A;  /* bars, footer */

  /* ---- Text ---- */
  --salu-ink:             #16205C;  /* headlines on light */
  --salu-text-muted:      #404A82;  /* body on light */
  --salu-text-soft:       #B9C0EE;  /* body on dark */

  /* ---- Surfaces ---- */
  --salu-white:           #FFFFFF;
  --salu-tint-1:          #F3F4FD;  /* soft section bg */
  --salu-tint-2:          #E4E8FB;  /* deeper section bg */
  --salu-border:          #C7CDF0;

  /* ---- Shape ---- */
  --salu-radius:          12px;
  --salu-radius-pill:     26px;

  /* ---- Type ---- */
  --salu-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* body / UI */
  --salu-font-head: "Lora", Georgia, "Times New Roman", serif;            /* headings */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--salu-font);
  color: var(--salu-ink);
  background: var(--salu-white);
  font-size: 17px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ============================================================
   HERO — animated "smoke on water" gradient
   ============================================================ */
.salu-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg,
              var(--salu-white) 0%,
              var(--salu-tint-1) 55%,
              var(--salu-tint-2) 100%);
}
.salu-hero__content { position: relative; z-index: 1; }
.salu-hero__smoke {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
  pointer-events: none;
}
.salu-hero__smoke.a {
  width: 300px; height: 300px; top: -70px; left: -40px;
  background: radial-gradient(circle, rgba(39,62,212,0.45), transparent 68%);
  animation: salu-drift-a 24s ease-in-out infinite;
}
.salu-hero__smoke.b {
  width: 360px; height: 360px; bottom: -110px; right: -50px;
  background: radial-gradient(circle, rgba(139,155,245,0.60), transparent 68%);
  animation: salu-drift-b 28s ease-in-out infinite;
}
.salu-hero__smoke.c {
  width: 240px; height: 240px; top: 20px; right: 22%;
  background: radial-gradient(circle, rgba(91,114,240,0.40), transparent 70%);
  animation: salu-drift-c 32s ease-in-out infinite;
}
.salu-hero__smoke.d {
  width: 200px; height: 200px; bottom: 10px; left: 26%;
  background: radial-gradient(circle, rgba(39,62,212,0.30), transparent 70%);
  animation: salu-drift-a 30s ease-in-out infinite reverse;
}
@keyframes salu-drift-a {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(70px,40px) scale(1.25); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes salu-drift-b {
  0%   { transform: translate(0,0) scale(1.1); }
  50%  { transform: translate(-80px,-30px) scale(1); }
  100% { transform: translate(0,0) scale(1.1); }
}
@keyframes salu-drift-c {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(50px,-50px) scale(1.3); }
  100% { transform: translate(0,0) scale(1); }
}
/* Accessibility: hold the smoke still for motion-sensitive visitors */
@media (prefers-reduced-motion: reduce) {
  .salu-hero__smoke { animation: none !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.salu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--salu-font);
  font-size: 14px; font-weight: 500;
  padding: 13px 24px;
  border-radius: var(--salu-radius-pill);
  border: 0; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background .18s ease, transform .1s ease;
}
@media (pointer: coarse) { .salu-btn { padding: 14px 26px; } }
.salu-btn svg { flex: 0 0 auto; }
.salu-btn:active { transform: scale(0.98); }
.salu-btn--primary { background: var(--salu-blue); color: #fff; }
.salu-btn--primary:hover { background: var(--salu-blue-hover); }
.salu-btn--ghost {
  background: rgba(255,255,255,0.8);
  color: var(--salu-ink);
  border: 0.5px solid var(--salu-border);
}
.salu-btn--ghost:hover { background: #fff; }

/* ============================================================
   BITS: eyebrow badge, footer note, wordmark
   ============================================================ */
.salu-eyebrow {
  display: inline-block;
  font-size: 12px; color: var(--salu-blue);
  background: rgba(255,255,255,0.65);
  padding: 5px 12px; border-radius: 20px;
}
.salu-footer-note {
  padding: 9px 26px; text-align: center;
  background: var(--salu-navy-deep);
  font-size: 11px; color: #7E88C4;
}
.salu-wordmark {
  font-size: 20px; font-weight: 600; color: var(--salu-ink);
  letter-spacing: 0.3px;
}
.salu-wordmark span { color: var(--salu-blue); }

/* ============================================================
   BRAND LOCKUP — the Vista Lens mark (animated) + wordmark.
   Waves are 128-wide seamless tiles inside a 64-clip; the two
   layers drift at different speeds so the water line breathes.
   ============================================================ */
.salu-logo {
  display: inline-flex; align-items: center; gap: 9px;
  line-height: 1; text-decoration: none;
}
.salu-logo svg { display: block; flex: none; }
/* Two wave layers scroll horizontally at different speeds so the water line
   gently "waves" in a seamless loop (period = 32 user units). The mark reads
   as a lens/horizon: light-blue sky over deep-blue water, split by a bright
   crest line — the SaluVista Vista Lens. */
.salu-logo .salu-wave--front, .appcta .phone .salu-wave--front { animation: salu-wave 7s linear infinite; }
.salu-logo .salu-wave--back, .appcta .phone .salu-wave--back  { animation: salu-wave 10.5s linear infinite; }
@keyframes salu-wave { to { transform: translateX(-32px); } }
.salu-logo__word {
  font-family: var(--salu-font);
  font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--salu-navy);
}
.salu-logo__word b { font-weight: 700; color: var(--salu-blue); }
@media (prefers-reduced-motion: reduce) {
  .salu-logo .salu-wave--front, .salu-logo .salu-wave--back,
  .appcta .phone .salu-wave--front, .appcta .phone .salu-wave--back { animation: none; }
}

/* ============================================================
   HEADINGS / TEXT helpers
   ============================================================ */
.salu-h1 {
  font-family: var(--salu-font-head);
  font-size: clamp(30px, 5vw, 46px); line-height: 1.15; font-weight: 600;
  color: var(--salu-ink); margin: 0;
}
.salu-h1 .accent { color: var(--salu-blue); }
.salu-lead {
  font-size: 17px; line-height: 1.6;
  color: var(--salu-text-muted); margin: 16px 0 0;
}