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

/* ============================================================
   Self-hosted fonts (previously fonts.googleapis.com / fonts.gstatic.com).
   Inter 400/500/600/700 + Lora 500/600/700, split into the same
   latin / latin-ext / cyrillic / cyrillic-ext subsets Google served
   (via unicode-range, so a browser only fetches the subset it needs) —
   this keeps ru/bg (Cyrillic) and tr/ro (Latin-ext diacritics) pages
   rendering identically. Each subset file is the same variable-font
   binary Google's CSS2 API already sent to modern browsers, just
   first-party now, so all declared weights share one file per subset.
   Files live in assets/fonts/. Paths here are relative to THIS file
   (code/saluvista-theme.css), not to the HTML page that links it.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/lora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/lora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/lora-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/lora-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/lora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/lora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/lora-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/lora-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lora-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lora-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}

: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;
}