/* ═══════════════════════════════════════════════════════════
   ALPHA HOSPITAL SOLUTIONS — STYLE.CSS
   Premium corporate · Glassmorphism · Apple + Stripe quality
═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --primary:    #0F5CC0;
  --secondary:  #2A7DE1;
  --accent:     #0099FF;
  --bg:         #F7FAFD;
  --dark:       #0E1E33;
  --text:       #2B2B2B;
  --text-muted: #6B7280;
  --white:      #FFFFFF;
  --card-bg:    rgba(255,255,255,0.7);
  --glass-bg:   rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.2);
  --shadow-sm:  0 2px 8px rgba(15,92,192,0.08);
  --shadow-md:  0 8px 32px rgba(15,92,192,0.14);
  --shadow-lg:  0 20px 60px rgba(15,92,192,0.2);
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --font-head:  'Poppins', sans-serif;
  --font-body:  'Inter', sans-serif;
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
  --nav-h:      72px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
select, input, textarea { font-family: inherit; }
/* Prevent long strings (email, phone, URLs) from overflowing narrow containers */
p, a, li, span, td { overflow-wrap: break-word; word-break: break-word; }

/* ── Premium Global Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — use Playfair Display for accent words */
:root {
  --font-display: 'Playfair Display', 'Poppins', serif;
}

/* Caps label style — used for subheadings inside cards */
.caps-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Custom Cursor ── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: opacity 0.3s;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 2px solid rgba(0,153,255,0.5);
  border-radius: 50%;
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}
body:hover .cursor-ring { opacity: 1; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ── Mouse Glow ── */
.mouse-glow {
  position: fixed;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,153,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%,-50%);
  transition: opacity 0.5s;
}

/* ══════════════════════════════════════════
   INTRO LOADER — Bright Vivid Blue
══════════════════════════════════════════ */
.intro-loader {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Bright vivid gradient — no dark navy */
.intro-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0A6FE8 0%, #0F90FF 40%, #00AAFF 70%, #29D4FC 100%);
  background-size: 300% 300%;
  animation: gradMove 4s ease infinite;
}
@keyframes gradMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Bright white center radial light burst */
.intro-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.10) 35%,
    transparent 70%);
}

/* Animated light rays */
.intro-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255,255,255,0.06) 20deg,
    transparent 40deg,
    transparent 60deg,
    rgba(255,255,255,0.06) 80deg,
    transparent 100deg,
    transparent 120deg,
    rgba(255,255,255,0.06) 140deg,
    transparent 160deg,
    transparent 180deg,
    rgba(255,255,255,0.06) 200deg,
    transparent 220deg,
    transparent 240deg,
    rgba(255,255,255,0.06) 260deg,
    transparent 280deg,
    transparent 300deg,
    rgba(255,255,255,0.06) 320deg,
    transparent 340deg,
    transparent 360deg
  );
  animation: raysRotate 20s linear infinite;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }

.intro-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}

.intro-logo-wrap {
  position: relative;
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
}

/* Outer ring — bright white */
.intro-logo-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  animation: spinRing 2.5s linear infinite;
}
.intro-logo-ring::before {
  content: '';
  position: absolute; top: -3px; left: 28%;
  width: 28%; height: 5px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(255,255,255,0.9);
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* Inner pulsing glow — much brighter white */
.intro-logo-glow {
  position: absolute; inset: -30px;
  background: radial-gradient(circle,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.15) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 1.8s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
  from { transform: scale(0.9); opacity: 0.7; }
  to   { transform: scale(1.4); opacity: 1; }
}

.intro-logo-img {
  width: 130px; height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.8)) brightness(1.1);
  animation: floatLogo 2.5s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes floatLogo {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-10px) scale(1.03); }
}
.intro-logo-text {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  position: relative; z-index: 1;
}
.intro-logo-letter {
  font-size: 76px; font-weight: 900;
  color: white;
  text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 60px rgba(255,255,255,0.6);
}

/* Brand name — bold caps, wide tracking */
.intro-title {
  font-family: var(--font-head);
  font-size: clamp(13px, 2.8vw, 18px);
  font-weight: 800;
  color: white;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,80,180,0.3);
  animation: fadeSlideUp 0.7s 0.4s both;
}
.intro-tagline {
  font-family: var(--font-head);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: fadeSlideUp 0.7s 0.7s both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intro-bar-wrap {
  width: 220px; height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
  animation: fadeIn 0.4s 0.9s both;
}
.intro-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), white);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
  animation: barFill 2.8s 0.9s ease-out both;
}
@keyframes barFill { from { width: 0; } to { width: 100%; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}
.site-header.scrolled {
  background: rgba(14,30,51,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
}
.nav-container {
  max-width: 1440px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center;
  padding: 0 32px;
  gap: 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 50px; width: auto;
  object-fit: contain;
}
.nav-logo-fallback {
  display: flex; align-items: center; gap: 8px;
}
.logo-alpha {
  font-size: 30px; font-weight: 900;
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 20px rgba(0,153,255,0.4);
}
.logo-text {
  font-family: var(--font-head);
  font-size: 11px; font-weight: 800;
  color: white;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.35;
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin: 0 auto;
}
.nav-link {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
  position: relative;
  display: flex; align-items: center; gap: 4px;
}
.nav-link:hover, .nav-link.active {
  color: white;
  background: rgba(255,255,255,0.08);
}
.nav-link::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%; right: 50%;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: left var(--transition), right var(--transition);
}
.nav-link.active::after,
.nav-link:hover::after { left: 14px; right: 14px; }
.chevron { font-size: 10px; opacity: 0.7; }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: rgba(14,30,51,0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  min-width: 220px;
  padding: 8px;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: var(--shadow-lg);
}
.has-dropdown:hover .dropdown {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.8);
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}
.dropdown li a:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

/* Nav actions */
.nav-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.btn-call, .btn-whatsapp {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-head);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-call {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
}
.btn-call:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  box-shadow: 0 4px 15px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37,211,102,0.45);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  width: 32px; height: 32px;
  justify-content: center; align-items: center;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: white;
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   HERO — Animated CSS Background (no images needed)
══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #070f1e;
}

/* Animated background container */
.hero-animated-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #070f1e 0%, #0a1f45 35%, #0d2d66 65%, #0a1f45 100%);
  background-size: 300% 300%;
  animation: heroBgMove 12s ease infinite;
}
@keyframes heroBgMove {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Animated glowing orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 10s ease-in-out infinite;
  pointer-events: none;
}
.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,153,255,0.18) 0%, transparent 70%);
  top: -150px; right: -100px;
  animation-duration: 12s;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,125,225,0.14) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  animation-duration: 15s; animation-delay: -4s;
}
.orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(15,92,192,0.22) 0%, transparent 70%);
  top: 40%; left: 35%;
  animation-duration: 9s; animation-delay: -7s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(40px,-40px) scale(1.06); }
  66%       { transform: translate(-25px,25px) scale(0.94); }
}

/* Dot grid pattern */
.hero-grid-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Floating medical crosses */
.hero-crosses { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hcross {
  position: absolute;
  left: var(--hx); top: var(--hy);
  font-size: calc(28px * var(--hs));
  color: rgba(0,153,255,0.12);
  font-weight: 300;
  animation: crossFloat 7s ease-in-out infinite;
  animation-delay: var(--hd);
  user-select: none;
}
@keyframes crossFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
  50%       { transform: translateY(-24px) rotate(20deg); opacity: 0.25; }
}

/* JS slideshow sits on top of animated bg */
.hero-slideshow {
  position: absolute; inset: 0;
  z-index: 1;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 0.4; } /* subtle overlay over animated bg */
.hero-img-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(7,15,30,0.5)   0%,
    rgba(7,15,30,0.65)  50%,
    rgba(7,15,30,0.88)  100%
  );
}

.hero-content {
  position: relative; z-index: 3;
  text-align: center;
  padding: 0 24px;
  max-width: 960px;
  padding-top: var(--nav-h);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 22px;
  border-radius: 50px;
  background: rgba(0,153,255,0.12);
  border: 1px solid rgba(0,153,255,0.35);
  color: #7DD3FC;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 28px;
  font-family: var(--font-head);
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(38px, 6.5vw, 80px);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.06;
  margin-bottom: 24px;
  letter-spacing: -2px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
  text-transform: capitalize;
}
/* Second line uses Playfair Display for premium serif contrast */
.hero-title-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(90deg, #93C5FD, #60A5FA, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.hero-subtitle {
  font-size: clamp(15px, 2vw, 20px);
  color: rgba(255,255,255,0.8);
  margin-bottom: 44px;
  line-height: 1.75;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.hero-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Trust tags below CTA */
.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 48px;
}
.trust-tag {
  padding: 7px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-head);
  letter-spacing: 0.3px;
  transition: background var(--transition), border-color var(--transition);
}
.trust-tag:hover {
  background: rgba(0,153,255,0.12);
  border-color: rgba(0,153,255,0.3);
  color: white;
}

/* Counter wrap */
.counter-wrap {
  display: flex; align-items: baseline; justify-content: center;
}
.counter-divider {
  width: 1px; height: 60px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.hero-scroll-hint { z-index: 3; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(15,92,192,0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15,92,192,0.55);
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.btn-outline:hover {
  border-color: white;
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* Hero counters */
.hero-counters {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 28px 48px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.counter-item {
  text-align: center;
  padding: 0 36px;
}
.counter-item .counter-num {
  font-family: var(--font-head);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  text-shadow: 0 0 30px rgba(0,153,255,0.4);
}
.counter-suffix {
  font-family: var(--font-head);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  color: var(--accent);
}
.counter-item p {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-head);
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll-hint span {
  font-size: 11px; letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  font-family: var(--font-head);
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(0,153,255,0.6), transparent);
  animation: scrollPulse 1.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.3; transform: scaleY(0.7); }
}

/* ══════════════════════════════════════════
   SECTIONS SHARED
══════════════════════════════════════════ */
.section { padding: 100px 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.section-header {
  text-align: center; margin-bottom: 68px;
}

/* Top label — pill badge, all-caps with wide tracking */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(15,92,192,0.06);
  border: 1.5px solid rgba(15,92,192,0.15);
  padding: 7px 22px;
  border-radius: 50px;
  margin-bottom: 22px;
}

/* Main heading — Poppins 900, tight tracking, initial-caps styling */
.section-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 900;
  color: #0E1E33;
  margin-bottom: 0;
  letter-spacing: -1.5px;
  line-height: 1.08;
  /* Ensure first letter of each word is visually strong */
  text-transform: capitalize;
}

/* Accent word — Playfair Display for premium serif contrast */
.section-title .accent {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  color: var(--primary);
  letter-spacing: -1px;
}

/* Gradient accent word */
.section-title .accent-light {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(90deg, var(--primary) 20%, var(--accent) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

/* Decorative underline bar under every section title */
.section-title-bar {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin: 18px 0 18px;
}
.section-title-bar::before,
.section-title-bar::after {
  content: '';
  height: 2px; width: 40px;
  background: rgba(15,92,192,0.15);
  border-radius: 1px;
}
.section-title-bar span {
  width: 60px; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  display: block;
}

.section-desc {
  font-size: 17px;
  color: #4B5563;
  max-width: 640px; margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
}

/* Inverted section headers (dark bg sections) */
.approvals-section .section-label {
  background: rgba(0,153,255,0.12);
  border-color: rgba(0,153,255,0.25);
  color: #7DD3FC;
}
.approvals-section .section-title { color: #FFFFFF; }
.approvals-section .section-desc  { color: rgba(255,255,255,0.72); }
.approvals-section .section-title-bar::before,
.approvals-section .section-title-bar::after { background: rgba(255,255,255,0.15); }

/* Reviews section header */
.reviews-section .section-label { color: var(--primary); }
.reviews-section .section-title { color: #0E1E33; }

/* Glass utility */
.glass {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(15,92,192,0.12);
  box-shadow: 0 8px 40px rgba(15,92,192,0.1);
}

/* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
.about-section { background: white; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px; align-items: start;
}

/* ── About Infographic Card ── */
.about-infographic {
  background: linear-gradient(145deg, #0a1628 0%, #0d2b5c 50%, #0a1f45 100%);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: 0 24px 80px rgba(15,92,192,0.3);
  overflow: hidden;
  position: relative;
}
.about-infographic::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.ainfo-top {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 28px;
  position: relative;
}
.ainfo-logo-wrap {
  width: 64px; height: 64px;
  background: rgba(0,153,255,0.15);
  border: 2px solid rgba(0,153,255,0.3);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ainfo-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ainfo-logo-fallback {
  font-size: 36px; font-weight: 900;
  color: var(--accent);
  font-family: var(--font-head);
  display: flex; align-items: center; justify-content: center;
}
.ainfo-top-text h3 {
  font-family: var(--font-head);
  font-size: 18px; font-weight: 800;
  color: white; margin-bottom: 4px;
}
.ainfo-top-text p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.4; }

/* Stats grid */
.ainfo-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 28px; position: relative;
}
.ainfo-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: background var(--transition);
}
.ainfo-stat:hover { background: rgba(0,153,255,0.1); }
.ainfo-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 36px; font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 6px;
}
.ainfo-stat strong span { color: var(--accent); font-size: 28px; }
.ainfo-stat em {
  font-style: normal;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-head);
}

/* Branch offices */
.ainfo-branches {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
  position: relative;
}
.ainfo-branches h4 {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.ainfo-branch-icon { font-size: 14px; }
.ainfo-branch-list { display: flex; flex-direction: column; gap: 12px; }
.ainfo-branch {
  display: flex; align-items: center; gap: 12px;
}
.branch-dot {
  width: 10px; height: 10px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.3);
  position: relative;
}
.branch-dot.head {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0,153,255,0.5);
}
.ainfo-branch strong {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: white; display: block;
}
.ainfo-branch small { font-size: 12px; color: rgba(255,255,255,0.5); }

/* Badge */
.ainfo-badge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,153,255,0.1);
  border: 1px solid rgba(0,153,255,0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  position: relative;
}
.ainfo-badge span { font-size: 24px; flex-shrink: 0; }
.ainfo-badge p { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.4; font-weight: 500; }

.about-text {
  font-size: 16px; line-height: 1.85;
  color: #4B5563;
  margin-bottom: 18px;
}

/* Timeline */
.timeline { margin-top: 40px; position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius: 1px;
}
.timeline-item {
  position: relative; padding-bottom: 28px;
}
.timeline-dot {
  position: absolute; left: -24px; top: 6px;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-content h4 {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 800;
  color: #0E1E33; margin-bottom: 4px;
  text-transform: capitalize;
  letter-spacing: -0.2px;
}
.timeline-content p { font-size: 14px; color: #4B5563; line-height: 1.7; }
.timeline-year {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--accent);
  background: rgba(0,153,255,0.08);
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
  font-family: var(--font-head);
}

/* ══════════════════════════════════════════
   SERVICES
══════════════════════════════════════════ */
.services-section {
  background: var(--bg);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.service-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,92,192,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transition: transform var(--transition);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0,153,255,0.2); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  font-size: 40px; margin-bottom: 16px;
  display: block;
  transition: transform var(--transition);
}
.service-card:hover .service-icon { transform: scale(1.15); }
.service-card h3 {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 800;
  color: #0E1E33; margin-bottom: 10px;
  letter-spacing: -0.3px;
  text-transform: capitalize;
  line-height: 1.3;
}
.service-card p { font-size: 14px; color: #4B5563; line-height: 1.78; }

/* ══════════════════════════════════════════
   APPROVALS
══════════════════════════════════════════ */
.approvals-section {
  background: linear-gradient(135deg, var(--dark) 0%, #0F2C60 100%);
}
.approvals-section .section-title,
.approvals-section .section-label,
.approvals-section .section-desc { color: rgba(255,255,255,0.9); }
.approvals-section .section-desc { color: rgba(255,255,255,0.65); }
.approvals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.approval-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  transition: transform var(--transition), background var(--transition);
}
.approval-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.1);
}
.approval-icon { font-size: 36px; margin-bottom: 14px; }
.approval-card h3 {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 800;
  color: white; margin-bottom: 10px;
  text-transform: capitalize;
  letter-spacing: -0.2px;
}
.approval-card p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.6; }

/* ══════════════════════════════════════════
   PROJECTS
══════════════════════════════════════════ */
.projects-section { background: white; }
.project-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}
.filter-btn {
  padding: 9px 22px;
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  border: 2px solid rgba(15,92,192,0.15);
  background: white;
  transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(15,92,192,0.3);
}
.projects-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.project-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  transition: transform var(--transition), box-shadow var(--transition);
}
.project-card:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.project-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.project-card:hover img { transform: scale(1.08); }
.project-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,30,51,0.92) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  transform: translateY(8px);
  transition: transform var(--transition);
}
.project-card:hover .project-overlay { transform: translateY(0); }
.project-cat {
  font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 6px;
}
.project-title {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 700;
  color: white; margin-bottom: 6px;
}
.project-loc { font-size: 13px; color: rgba(255,255,255,0.65); }
.project-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}

/* Project Modal */
.project-modal {
  position: fixed; inset: 0;
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.project-modal.open { opacity: 1; pointer-events: all; }
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(14,30,51,0.85);
  backdrop-filter: blur(8px);
}
.modal-card {
  position: relative; z-index: 1;
  background: white;
  border-radius: var(--radius-xl);
  max-width: 700px; width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform var(--transition);
  display: grid; grid-template-rows: auto 1fr;
}
.project-modal.open .modal-card { transform: scale(1); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  font-size: 16px; color: white;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background var(--transition);
}
.modal-close:hover { background: rgba(0,0,0,0.4); }
.modal-image { aspect-ratio: 16/9; overflow: hidden; }
.modal-image img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 28px; overflow-y: auto; }
.modal-category {
  font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: 2px;
  text-transform: uppercase; display: block; margin-bottom: 8px;
}
.modal-body h3 {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800;
  color: var(--dark); margin-bottom: 12px;
}
.modal-body p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }

/* ══════════════════════════════════════════
   VIDEO SECTION
══════════════════════════════════════════ */
.video-section { background: var(--bg); }
.video-wrap { max-width: 900px; margin: 0 auto; }
.yt-embed {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.yt-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.yt-embed:hover .yt-thumb { transform: scale(1.03); }
.yt-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: none;
  transition: transform 0.2s ease;
}
.yt-play-btn:hover { transform: translate(-50%,-50%) scale(1.12); }
.yt-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-placeholder-text {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--dark) 0%, #0F2C60 100%);
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  text-align: center;
  flex-direction: column;
  gap: 12px;
}

/* ══════════════════════════════════════════
   GALLERY
══════════════════════════════════════════ */
.gallery-section { background: white; }
.gallery-masonry {
  columns: 4 260px; column-gap: 16px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #EDF2F8 0%, #F0F5FF 100%);
  min-height: 140px;
}
.gallery-item img {
  width: 100%; height: auto; display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); filter: brightness(0.85); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(14,30,51,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-zoom-icon { font-size: 32px; color: white; }

/* Gallery placeholder */
.gallery-placeholder {
  grid-column: 1/-1;
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  font-size: 15px;
}
.gallery-placeholder strong { display: block; font-size: 20px; margin-bottom: 8px; color: var(--dark); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-overlay {
  position: absolute; inset: 0;
  background: rgba(14,30,51,0.96);
}
.lb-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  max-width: 95vw; max-height: 95vh;
}
.lb-img-wrap {
  position: relative;
  max-width: 80vw; max-height: 80vh;
}
.lb-img-wrap img {
  max-width: 80vw; max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transition: transform 0.3s ease;
}
.lb-close {
  position: fixed; top: 20px; right: 24px;
  font-size: 24px; color: white;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  z-index: 2;
}
.lb-close:hover { background: rgba(255,255,255,0.2); }
.lb-prev, .lb-next {
  font-size: 36px; color: white;
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition);
}
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.2); }
.lb-zoom-wrap {
  position: absolute; bottom: 12px; right: 12px;
  display: flex; gap: 8px;
}
.lb-zoom-in, .lb-zoom-out {
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.4);
  color: white; font-size: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lb-zoom-in:hover, .lb-zoom-out:hover { background: rgba(0,0,0,0.7); }
.lb-caption {
  position: fixed; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  background: rgba(0,0,0,0.5);
  padding: 6px 16px;
  border-radius: 20px;
}
.lb-counter {
  position: fixed; top: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}

/* ══════════════════════════════════════════
   PROCESS
══════════════════════════════════════════ */
.process-section { background: var(--bg); }
.process-steps {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
}
.process-step {
  text-align: center;
  max-width: 160px;
  flex: 1; min-width: 120px;
}
.step-num {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.step-icon {
  font-size: 40px; margin-bottom: 14px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.process-step:hover .step-icon { transform: scale(1.2) rotate(5deg); }
.process-step h3 {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 800;
  color: var(--dark); margin-bottom: 8px;
  text-transform: capitalize;
  letter-spacing: -0.2px;
}
.process-step p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.process-connector {
  flex: 0 0 32px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin-bottom: 40px;
  align-self: center;
}

/* ══════════════════════════════════════════
   WHY CHOOSE US
══════════════════════════════════════════ */
.why-section { background: white; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.why-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.why-icon { font-size: 40px; margin-bottom: 16px; }
.why-card h3 {
  font-family: var(--font-head);
  font-size: 18px; font-weight: 800;
  color: #0E1E33; margin-bottom: 10px;
  letter-spacing: -0.2px;
  text-transform: capitalize;
  line-height: 1.3;
}
.why-card p { font-size: 14px; color: #4B5563; line-height: 1.78; }

/* ══════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════ */
.reviews-section {
  background: linear-gradient(135deg, #F0F7FF 0%, #EAF2FF 100%);
  overflow: hidden;
}
.review-stats {
  display: flex; gap: 40px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 56px;
  padding: 32px 48px;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.rstat-item { text-align: center; }
.rstat-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 36px; font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.rstat-item strong span { font-size: 20px; }
.rstat-stars { color: #F59E0B; font-size: 18px; margin: 4px 0; }
.rstat-item p { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Reviews scroller */
.reviews-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.reviews-track {
  display: flex; gap: 24px;
  width: max-content;
  animation: reviewScroll 60s linear infinite;
}
.reviews-track:hover { animation-play-state: paused; }
@keyframes reviewScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.review-card {
  flex-shrink: 0;
  width: 340px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,92,192,0.06);
  transition: box-shadow var(--transition);
}
.review-card:hover { box-shadow: var(--shadow-md); }
.review-stars { color: #F59E0B; font-size: 16px; margin-bottom: 12px; }
.review-text {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 20px;
  font-style: italic;
}
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  color: white; flex-shrink: 0;
}
.review-name {
  font-weight: 700; font-size: 14px;
  color: var(--dark); font-family: var(--font-head);
}
.review-hospital { font-size: 12px; color: var(--text-muted); }
.review-location { font-size: 12px; color: var(--accent); }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.contact-section { background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px; align-items: start;
}
.cinfo-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}
.cinfo-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(15,92,192,0.08);
}
.cinfo-item:last-child { border-bottom: none; }
.cinfo-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.cinfo-item h4 {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  color: var(--text-muted); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 1px;
}
.cinfo-item p, .cinfo-item a, .cinfo-item span {
  font-size: 15px; color: var(--dark); line-height: 1.5;
}
.cinfo-item a:hover { color: var(--primary); }

.social-links { display: flex; gap: 12px; }
.social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,92,192,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}
.social-btn:hover {
  background: var(--primary); color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15,92,192,0.3);
}

/* ── Contact Form Card ── */
.contact-form {
  border-radius: var(--radius-xl);
  padding: 36px;
  background: #FFFFFF;
  border: 1.5px solid rgba(15,92,192,0.1);
  box-shadow: 0 12px 48px rgba(15,92,192,0.12);
}

/* ── Form Rows ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 4px; /* vertical gap comes from error span height below */
}

/* ── Form Group ── */
.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.form-group.full { grid-column: 1 / -1; }

/* ── Input / Select / Textarea base ── */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 56px;
  padding: 20px 44px 6px 16px;
  border: 1.5px solid #D0D7E3;
  border-radius: 10px;
  background: #F8FAFF;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--dark);
  outline: none;
  box-sizing: border-box;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Textarea overrides */
.form-group textarea {
  height: 128px;
  padding: 28px 16px 36px;
  resize: none;
  overflow-y: auto;
}

/* Select: custom arrow */
.form-group select {
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

/* ── Floating Label ── */
.form-group label:not(.checkbox-label) {
  position: absolute;
  top: 28px; /* vertical centre of the 56px input — NOT 50% of form-group */
  left: 16px;
  transform: translateY(-50%);
  font-size: 14px;
  font-family: var(--font-body);
  color: #6B7280;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 48px);
  z-index: 1;
  transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease,
              transform 0.18s ease, font-weight 0.18s ease;
}

/* Textarea label starts at top (not vertically centred) */
.textarea-group label:not(.checkbox-label) {
  top: 16px;
  transform: none;
}

/* ── Float trigger — text inputs ── */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  transform: none;
  letter-spacing: 0.2px;
}

/* ── Float trigger — select (uses :valid since first option is required+empty) ── */
.form-group select:focus + label,
.form-group select:valid + label {
  top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  transform: none;
  letter-spacing: 0.2px;
}

/* ── Float trigger — textarea ── */
.textarea-group textarea:focus + label,
.textarea-group textarea:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
}

/* ── Hover state ── */
.form-group input:not(:focus):hover,
.form-group select:not(:focus):hover,
.form-group textarea:not(:focus):hover {
  border-color: #9CABC4;
  background: #F3F6FF;
}

/* ── Focus state ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3.5px rgba(15,92,192,0.13);
}

/* ── Error state ── */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #EF4444;
  background: #FFF7F7;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.form-group.has-error label:not(.checkbox-label) { color: #DC2626; }

/* ── Success state ── */
.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
  border-color: #10B981;
  background: #F0FDF4;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.form-group.has-success label:not(.checkbox-label) { color: #059669; }

/* ── Success checkmark icon ── */
.field-valid-icon {
  position: absolute;
  right: 14px;
  top: 28px; /* vertically centred inside 56px input */
  transform: translateY(-50%);
  color: #10B981;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.form-group.has-success .field-valid-icon { opacity: 1; }
/* Textarea: no icon (overlaps text) */
.textarea-group .field-valid-icon { display: none; }
/* Select: shift left of the dropdown arrow */
.select-group .field-valid-icon { right: 38px; }

/* ── Error Message — fixed height prevents layout shift ── */
.form-error {
  display: block;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #EF4444;
  padding-left: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.form-group.has-error .form-error {
  opacity: 1;
  transform: translateY(0);
}

/* Label decorators */
.req-star { color: #EF4444; margin-left: 1px; }
.opt-text  { font-size: 11px; font-weight: 400; color: #9CA3AF; margin-left: 4px; }

/* ── Character Counter ── */
.char-counter {
  position: absolute;
  right: 14px;
  bottom: 26px; /* above the .form-error 20px area */
  font-size: 11px;
  color: #9CA3AF;
  pointer-events: none;
  line-height: 1;
  transition: color 0.2s ease;
}
.char-counter.near-limit { color: #F59E0B; }
.char-counter.at-limit   { color: #EF4444; font-weight: 700; }

/* ── Consent ── */
.consent-group { padding-top: 4px; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
/* Hide native checkbox; replaced by .checkbox-custom */
.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.checkbox-custom {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #D0D7E3;
  border-radius: 5px;
  background: #F8FAFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Keyboard focus ring */
.checkbox-label input[type="checkbox"]:focus-visible ~ .checkbox-custom {
  box-shadow: 0 0 0 3px rgba(15,92,192,0.25);
  border-color: var(--primary);
}
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}
/* CSS checkmark (no emoji, cross-browser clean) */
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.consent-text { font-size: 14px; color: #4B5563; line-height: 1.55; }

/* Consent error indented under text */
.consent-error { margin-left: 32px; }

/* Consent error state visual */
.form-group.has-error .checkbox-custom { border-color: #EF4444; }
.form-group.has-success .checkbox-custom { border-color: #10B981; }

/* ── Form Actions (Buttons) ── */
.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.form-actions .btn-primary {
  flex: 1 1 200px;
  justify-content: center;
  min-height: 52px;
  position: relative;
  overflow: hidden;
}
.form-actions .btn-outline {
  flex: 0 0 auto;
  min-height: 52px;
  color: var(--dark);
  border-color: rgba(15,92,192,0.25);
}
.form-actions .btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(15,92,192,0.05);
  transform: translateY(-2px);
}

/* ── Submit button inner states ── */
.btn-content,
.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-loading { display: none; }

#btn-submit.is-loading .btn-content  { display: none; }
#btn-submit.is-loading .btn-loading  { display: flex; }
#btn-submit.is-loading {
  opacity: 0.82;
  pointer-events: none;
  cursor: not-allowed;
}

/* Spinner animation */
@keyframes formSpin { to { transform: rotate(360deg); } }
.btn-spinner { animation: formSpin 0.75s linear infinite; }

/* ── Toast Notification ── */
.form-toast {
  position: fixed;
  bottom: 28px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0F5CC0 0%, #0099FF 100%);
  color: #fff;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  box-shadow: 0 8px 32px rgba(15,92,192,0.35);
  z-index: 9999;
  pointer-events: none;
  max-width: 340px;
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
}
.form-toast.show {
  transform: translateY(0);
  opacity: 1;
}
#toast-icon { font-size: 18px; flex-shrink: 0; }

/* ── Ripple ── */
.ripple { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer { background: var(--dark); }
.footer-main { padding: 80px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.footer-logo { height: 48px; width: auto; object-fit: contain; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-top: 12px; }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.fsocial {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition);
}
.fsocial:hover { background: var(--accent); color: white; border-color: var(--accent); transform: translateY(-2px); }

.footer-links-col h4, .footer-contact-col h4 {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: white; margin-bottom: 20px;
  letter-spacing: 0.5px;
}
.footer-links-col ul li { margin-bottom: 10px; }
.footer-links-col ul li a {
  font-size: 14px; color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-links-col ul li a:hover { color: var(--accent); }
.footer-cinfo p { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 12px; line-height: 1.5; }
.footer-cinfo a { color: rgba(255,255,255,0.55); transition: color var(--transition); }
.footer-cinfo a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
}
.footer-bottom p {
  font-size: 13px; color: rgba(255,255,255,0.4);
  text-align: center;
}

/* ══════════════════════════════════════════
   FLOATING ACTION BUTTONS
══════════════════════════════════════════ */
.fab-group {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 2000;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-end;
  transition: opacity 0.25s ease;
}
/* Mobile: hidden while the contact form is in view so the buttons
   don't sit on top of the input fields (form has its own WhatsApp CTA). */
.fab-group.fab-hidden {
  opacity: 0;
  pointer-events: none;
}
.fab {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  height: 48px;
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600;
  color: white;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition), width var(--transition);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.fab-label {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.3s ease;
  opacity: 0;
}
.fab:hover .fab-label { max-width: 80px; opacity: 1; }
.fab-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.fab-call     { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.fab-email    { background: linear-gradient(135deg, #F59E0B, #D97706); }
.fab-top      { background: linear-gradient(135deg, var(--dark), #1a3a5c); }
.fab:hover    { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg); }
.fab-top      { display: none; }
.fab-top.visible { display: flex; }