:root {
  --primary: #0d7c86;
  --primary-dark: #075963;
  --accent: #58c6d0;
  --ink: #102a43;
  --muted: #627386;
  --light: #f5fbfc;
  --card: rgba(255, 255, 255, 0.86);
  --border: rgba(13, 124, 134, 0.14);
  --shadow: 0 24px 70px rgba(12, 78, 89, 0.13);
}

html {
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 86% 14%, rgba(88, 198, 208, 0.36) 0 18%, transparent 36%),
    radial-gradient(circle at 12% 44%, rgba(13, 124, 134, 0.14) 0 12%, transparent 30%),
    radial-gradient(circle at 90% 78%, rgba(88, 198, 208, 0.22) 0 16%, transparent 34%),
    linear-gradient(135deg, #f7fcfd 0%, #edf8fa 45%, #ffffff 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.82; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  gap: 18px;
  align-content: center;
  background: radial-gradient(circle at center, #ffffff 0%, #ecfbfd 58%, #dff5f7 100%);
  color: var(--primary-dark);
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: loaderExit 0.75s ease 2.45s forwards;
}

.loader-orbit {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(13, 124, 134, 0.12);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 16px 48px rgba(13, 124, 134, 0.16);
}

.loader-logo {
  width: 78px;
  height: 78px;
  object-fit: contain;
  animation: counterSpin 1s linear infinite;
}

.glass-nav {
  padding: 8px 0;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(13, 124, 134, 0.09);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(22, 85, 97, 0.07);
}

.brand-wrap { display: flex; align-items: center; gap: 0; font-weight: 800; color: var(--primary-dark); }
.brand-logo { width: 126px; height: 44px; object-fit: contain; border-radius: 8px; }
.brand-fallback { width: 70px; height: 36px; display: none; place-items: center; color: #ffffff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 10px; box-shadow: 0 10px 24px rgba(13, 124, 134, 0.2); font-size: 0.82rem; }

.navbar .nav-link { position: relative; padding: 8px 12px !important; color: #264c5a; font-size: 0.95rem; font-weight: 700; transition: color 0.2s ease, transform 0.2s ease; }
.navbar .nav-link:hover { color: var(--primary); transform: translateY(-1px); }
.nav-cta { color: #ffffff !important; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 12px 28px rgba(13, 124, 134, 0.2); }

.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 132px 0 86px; overflow: hidden; }
.hero-section::before, .hero-section::after { content: ''; position: absolute; border-radius: 999px; filter: blur(4px); opacity: 0.78; }
.hero-section::before { width: 450px; height: 450px; right: -90px; top: 88px; background: rgba(136, 224, 231, 0.58); }
.hero-section::after { width: 310px; height: 310px; left: -90px; bottom: 40px; background: rgba(168, 233, 211, 0.5); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); gap: 60px; align-items: center; }
.section-kicker { display: inline-flex; margin-bottom: 16px; color: var(--primary); font-size: 0.83rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-content h1, .section-heading h2, .info-card h2, .service-panel h2 { color: var(--ink); font-weight: 800; letter-spacing: -0.045em; }
.hero-content h1 { max-width: 760px; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: 0.98; }
.hero-content p { max-width: 680px; margin: 26px 0 0; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.primary-btn, .secondary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.primary-btn { color: #ffffff; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 18px 38px rgba(13, 124, 134, 0.23); }
.secondary-btn { color: var(--primary-dark); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.78); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.hero-visual { position: relative; min-height: 450px; display: grid; place-items: center; }
.medical-card, .text-panel, .value-card, .info-card, .service-panel { border: 1px solid var(--border); border-radius: 32px; background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.main-card { position: relative; z-index: 2; width: min(360px, 100%); padding: 38px; }
.main-card span { display: inline-flex; margin-bottom: 18px; color: var(--primary); font-size: 3.8rem; font-weight: 800; letter-spacing: -0.06em; }
.main-card strong { display: block; font-size: 1.55rem; color: var(--ink); }
.pulse-ring { position: absolute; width: 300px; height: 300px; border: 1px solid rgba(13, 124, 134, 0.16); border-radius: 50%; animation: pulse 2.6s ease-in-out infinite; }
.floating-badge { position: absolute; z-index: 3; padding: 12px 18px; color: var(--primary-dark); font-weight: 800; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 16px 36px rgba(12, 78, 89, 0.12); animation: float 4s ease-in-out infinite; }
.badge-one { top: 60px; right: 26px; }
.badge-two { left: 20px; bottom: 70px; animation-delay: 1s; }

.content-section, .values-section { position: relative; padding: 96px 0; overflow: hidden; }
.content-section::before, .values-section::before { content: ''; position: absolute; width: 220px; height: 220px; right: 5%; top: 18%; border-radius: 999px; background: rgba(88, 198, 208, 0.14); filter: blur(2px); pointer-events: none; }
.content-section:nth-of-type(even)::before { left: 4%; right: auto; top: 56%; width: 180px; height: 180px; background: rgba(13, 124, 134, 0.1); }
.soft-bg { background: rgba(237, 248, 250, 0.72); }
.section-heading { max-width: 820px; margin-bottom: 34px; }
.section-heading h2, .info-card h2, .service-panel h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
.text-panel, .service-panel { padding: 38px; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.value-card { padding: 28px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; }
.value-card:hover { transform: translateY(-6px) scale(1.035); border-color: rgba(13, 124, 134, 0.3); background: rgba(255, 255, 255, 0.96); box-shadow: 0 28px 62px rgba(12, 78, 89, 0.18); }
.value-card h3 { color: var(--primary-dark); font-size: 1.22rem; font-weight: 800; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.info-card { padding: 34px; }
.brand-slider { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; align-items: center; }
.brand-cloud { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 10px 4px 14px; cursor: grab; scrollbar-width: none; }
.brand-cloud::-webkit-scrollbar { display: none; }
.brand-cloud:active { cursor: grabbing; }
.brand-cloud span { flex: 0 0 210px; min-height: 66px; display: inline-flex; align-items: center; justify-content: center; scroll-snap-align: start; padding: 18px 26px; color: var(--primary-dark); font-size: 1.08rem; font-weight: 800; border: 1px solid var(--border); border-radius: 20px; background: #ffffff; box-shadow: 0 14px 32px rgba(12, 78, 89, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.brand-cloud span:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(12, 78, 89, 0.13); }
.brand-arrow { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--primary-dark); font-size: 2rem; line-height: 1; background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 28px rgba(12, 78, 89, 0.1); transition: transform 0.2s ease, background 0.2s ease; }
.brand-arrow:hover { transform: translateY(-2px); color: #ffffff; background: var(--primary); }

.site-footer { padding: 34px 0 16px; color: rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, #073a42, #0d7c86); }
.footer-grid { display: grid; grid-template-columns: 1.15fr 1fr 0.65fr; gap: 22px; }
.footer-brand, .site-footer h3 { margin-bottom: 12px; color: #ffffff; font-weight: 800; }
.site-footer p { margin-bottom: 6px; color: rgba(255, 255, 255, 0.76); font-size: 0.9rem; line-height: 1.55; transition: color 0.2s ease, transform 0.2s ease; }
.site-footer p:hover { color: #ffffff; transform: translateX(2px); }
.site-footer a { color: #ffffff; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.footer-contact-link, .linkedin-link { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; color: #ffffff !important; background: rgba(255, 255, 255, 0.08); }
.footer-contact-link:hover, .linkedin-link:hover { color: var(--primary-dark) !important; background: #ffffff; border-color: #ffffff; transform: translateY(-2px); }
.footer-bottom { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.84rem; text-align: center; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counterSpin { to { transform: rotate(-360deg); } }
@keyframes loaderExit { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes pulse { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.12); opacity: 0.22; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (max-width: 991px) {
  .glass-nav .navbar-collapse { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255, 255, 255, 0.96); }
  .hero-grid, .two-column, .footer-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-logo { width: 112px; height: 40px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  .glass-nav { padding: 6px 0; }
  .brand-logo { width: 104px; height: 38px; }
  .navbar .nav-link { padding: 9px 10px !important; }
  .hero-section { min-height: auto; padding: 112px 0 64px; }
  .hero-content h1 { font-size: clamp(2.2rem, 12vw, 3.35rem); }
  .hero-visual { min-height: 340px; }
  .values-grid { grid-template-columns: 1fr; }
  .content-section, .values-section { padding: 68px 0; }
  .text-panel, .service-panel, .info-card, .main-card { padding: 24px; border-radius: 24px; }
  .brand-slider { grid-template-columns: 1fr; }
  .brand-arrow { display: none; }
  .brand-cloud span { padding: 16px 20px; font-size: 1rem; }
  .footer-grid { gap: 18px; }
  .site-footer { padding: 30px 0 16px; }
  .footer-bottom { text-align: center; }
}