/* ==========================================================================
   Doctors Branding: Core Stylesheet
   Design tokens, base elements, layout primitives, glass/neumorphic system
   ========================================================================== */

/* ---------------------------------- */
/* 1. Design Tokens                    */
/* ---------------------------------- */
:root{
  /* Backgrounds */
  --bg-void:#020305;
  --bg-navy-950:#04060c;
  --bg-navy-900:#070a15;
  --bg-navy-800:#0a0e1c;
  --bg-charcoal:#08090b;
  --bg-gradient: radial-gradient(ellipse 120% 80% at 50% -10%, #091226 0%, #04060c 45%, #020305 100%);

  /* Accents — derived from the Doctors Branding logo blue (H213 royal blue) */
  --c-primary:#398BEF;
  --c-secondary:#226BC3;
  --c-medical:#70A7EB;
  --c-success:#22C55E;
  --c-navy-deep:#184681;

  --grad-primary: linear-gradient(135deg,#398BEF 0%,#226BC3 50%,#184681 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(57,139,239,.18) 0%, rgba(24,70,129,.18) 100%);
  --grad-text: linear-gradient(135deg,#ffffff 0%,#a9d9ff 45%,#184681 100%);

  /* Text */
  --text-primary:#FFFFFF;
  --text-soft:#C7D0E4;
  --text-muted:#8D98B8;
  --text-faint:#586083;

  /* Glass — Apple-style frosted glass: heavier blur + saturation boost */
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-strong: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-strong: rgba(255,255,255,.26);
  --glass-blur: 28px;
  --glass-filter: blur(var(--glass-blur)) saturate(180%);

  /* Shadows */
  --shadow-glow-blue: 0 8px 40px -8px rgba(57,139,239,.35);
  --shadow-glow-navy: 0 8px 40px -8px rgba(24,70,129,.35);
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.4);
  --shadow-card-hover: 0 30px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);

  /* Radius */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Spacing scale */
  --space-section: clamp(72px, 10vw, 100px);
  --space-container: clamp(20px, 5vw, 48px);

  /* Type */
  --font-heading: 'Plus Jakarta Sans', 'General Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Motion */
  --ease-premium: cubic-bezier(.16,.84,.44,1);
  --ease-out-soft: cubic-bezier(.22,1,.36,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;

  --container-max: 1360px;
}

/* ---------------------------------- */
/* 2. Reset & Base                     */
/* ---------------------------------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:auto; /* Lenis handles smooth scroll */
  -webkit-text-size-adjust:100%;
}

body{
  background: var(--bg-gradient);
  background-color: var(--bg-void);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img, svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font-family:inherit; color:inherit; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.01em;
}

::selection{ background: var(--c-primary); color:#05070d; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-navy-950); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--c-primary), var(--c-navy-deep)); border-radius:10px; }

:focus-visible{
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--c-primary); color:#05070d; padding:12px 20px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------------------------------- */
/* 3. Layout Primitives                */
/* ---------------------------------- */
.container{
  width:100%;
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--space-container);
}

section{
  position:relative;
  padding-block: var(--space-section);
}

.section-inner{ position:relative; z-index:2; }

.section-head{
  max-width:720px;
  margin-bottom: clamp(40px,6vw,72px);
}
.section-head.center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-heading);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--c-medical);
  padding:6px 16px;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  margin-bottom:20px;
  margin-top:45px;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background: var(--c-primary);
  box-shadow: 0 0 10px 2px var(--c-primary);
}

.section-title{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom:20px;
}
.section-title .grad{
  background: var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section-desc{
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  color: var(--text-soft);
  max-width:640px;
}
.section-head.center .section-desc{ margin-inline:auto; }

/* ---------------------------------- */
/* 4. Glassmorphism / Neumorphism      */
/* ---------------------------------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}

.glass-strong{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.gradient-border{
  position:relative;
  border-radius: var(--r-lg);
  background: var(--bg-navy-900);
}
.gradient-border::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(57,139,239,.7), rgba(24,70,129,.5), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.neu-surface{
  background: linear-gradient(145deg, #0b1120, #0a0e1a);
  border-radius: var(--r-lg);
  box-shadow: 12px 12px 32px rgba(0,0,0,.45), -8px -8px 24px rgba(255,255,255,.02);
}

/* Card lift + glow hover (micro-interaction) */
.lift-hover{
  transition: transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast);
}
.lift-hover:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--glass-border-strong);
}

.glow-hover{ position:relative; overflow:hidden; }
.glow-hover::after{
  content:'';
  position:absolute; inset:-40%;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(57,139,239,.18), transparent 60%);
  opacity:0; transition:opacity var(--dur-fast);
  pointer-events:none;
}
.glow-hover:hover::after{ opacity:1; }

/* ---------------------------------- */
/* 5. Buttons                          */
/* ---------------------------------- */
.btn{
  --btn-pad-y: 16px; --btn-pad-x: 30px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-heading);
  font-weight:600; font-size:15px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--r-full);
  white-space:nowrap;
  position:relative;
  isolation:isolate;
  transition: transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.btn svg{ width:18px; height:18px; transition: transform var(--dur-fast) var(--ease-out-soft); }

.btn-primary{
  color:#04121c;
  background: var(--grad-primary);
  background-size:160% 160%;
  box-shadow: var(--shadow-glow-blue);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 50px -6px rgba(57,139,239,.55); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-primary:active{ transform: translateY(-1px) scale(.99); }

.btn-glass{
  color: var(--text-primary);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.btn-glass:hover{
  background: var(--glass-bg-strong);
  border-color: rgba(57,139,239,.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 40px -10px rgba(57,139,239,.25);
}
.btn-glass:hover svg{ transform:translateX(4px); }

.btn-whatsapp{
  color:#fff;
  background: linear-gradient(135deg,#22C55E,#16a34a);
  box-shadow: 0 8px 30px -8px rgba(34,197,94,.5);
}
.btn-whatsapp:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 40px -6px rgba(34,197,94,.6);
}
.btn-whatsapp:hover svg{ transform:scale(1.1); }

.btn-sm{ --btn-pad-y:11px; --btn-pad-x:22px; font-size:13.5px; min-height:44px; }

/* Ripple */
.btn{ overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: ripple-anim .6s var(--ease-out-soft);
  pointer-events:none;
}

/* Magnetic wrapper target (JS adds transform); does not force a display
   value so it never overrides a flex/inline-flex button layout */
.magnetic{ will-change: transform; }
.magnetic:not(.btn){ display:inline-block; }

/* ---------------------------------- */
/* 6. Header / Navigation              */
/* ---------------------------------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  padding: 18px 0;
  transition: padding var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:10px 0;
  background: rgba(3,4,8,.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.6);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center;
}
.brand-logo{ height:55px; width:auto; display:block; }
.footer-logo{ height:52px; width:auto; display:block; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav a.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius: var(--r-full);
  font-size:14.5px; font-weight:500; color: var(--text-soft);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active{
  color: var(--text-primary);
  background: var(--glass-bg);
}
.main-nav li.has-mega{ position:relative; }

/* Invisible hover bridge: the mega menu is offset 14px below the nav link
   (top: calc(100% + 14px) below), so without this the pointer crosses a gap
   that belongs to neither element and :hover releases before it reaches the
   panel — the menu opens on hover but disappears the moment you move toward
   it. This sits over exactly that gap, matching the panel's own position and
   width, so hover never breaks between the two. */
.main-nav li.has-mega::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 86vw);
  height:14px;
}

.mega-menu{
  position:absolute; top: calc(100% + 14px); left:50%; transform: translateX(-50%) translateY(8px);
  width:min(760px, 86vw);
  padding:26px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  background: rgba(4,6,12,.82);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card-hover);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft), visibility var(--dur-fast);
  z-index:50;
}
li.has-mega:hover .mega-menu,
li.has-mega:focus-within .mega-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.mega-menu a{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px; border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.mega-menu a:hover{ background: var(--glass-bg); }
.mega-menu a .mm-icon{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background: var(--grad-primary-soft);
  color: var(--c-medical);
}
.mega-menu a .mm-icon svg{ width:18px; height:18px; }
.mega-menu a strong{ display:block; font-size:14px; color:var(--text-primary); font-weight:600; }
.mega-menu a span{ font-size:12.5px; color:var(--text-muted); }

.header-actions{ display:flex; align-items:center; gap:12px; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:12px;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:20px; height:20px; }

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:1100;
  background: rgba(2,3,6,.96);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  display:flex; flex-direction:column;
  padding: 24px var(--space-container);
  transform: translateX(100%);
  /* Closed by default: visibility (not display) so the slide-out transition
     still runs, but the panel and its links drop out of the tab order and
     the accessibility tree while off-screen — without this, keyboard and
     screen-reader users tabbing through the desktop header would land on a
     full duplicate nav sitting just off the right edge of the viewport. */
  visibility:hidden;
  transition: transform .5s var(--ease-premium), visibility 0s linear .5s;
}
.mobile-drawer.open{
  transform: translateX(0);
  visibility:visible;
  transition: transform .5s var(--ease-premium), visibility 0s linear 0s;
}
.mobile-drawer .close-drawer{ align-self:flex-end; width:44px; height:44px; border-radius:12px; background:var(--glass-bg); border:1px solid var(--glass-border); display:grid; place-items:center; margin-bottom:30px; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.mobile-drawer .m-link{ padding:16px 6px; font-size:19px; font-weight:600; color:var(--text-primary); border-bottom:1px solid var(--glass-border); display:flex; align-items:center; justify-content:space-between; }
.mobile-drawer .m-sub{ display:none; flex-direction:column; padding-left:14px; }
.mobile-drawer .m-sub.open{ display:flex; }
.mobile-drawer .m-sub a{ padding:12px 0; font-size:15px; color:var(--text-soft); }
.mobile-drawer .m-actions{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }

/* Back to top */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--grad-primary); box-shadow: var(--shadow-glow-blue); }
.back-to-top svg{ width:20px; height:20px; }

/* WhatsApp floating button */
.whatsapp-fab{
  position:fixed; left:24px; bottom:24px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg,#22C55E,#16a34a);
  box-shadow: 0 10px 30px -6px rgba(34,197,94,.55);
  opacity:0; visibility:hidden; transform: translateY(12px) scale(.9);
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.whatsapp-fab.show{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.whatsapp-fab svg{ width:26px; height:26px; color:#fff; }

/* ---------------------------------- */
/* 7. Background FX layers             */
/* ---------------------------------- */
.bg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
}
.bg-noise{
  position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.blob{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  opacity:.55;
  will-change: transform;
}
.blob-1{ width:560px; height:560px; top:-160px; left:-120px; background:radial-gradient(circle,var(--c-primary),transparent 70%); }
.blob-2{ width:620px; height:620px; top:20%; right:-200px; background:radial-gradient(circle,var(--c-navy-deep),transparent 70%); opacity:.4; }
.blob-3{ width:480px; height:480px; bottom:0; left:20%; background:radial-gradient(circle,var(--c-medical),transparent 70%); opacity:.3; }

.medical-outline{
  position:absolute; opacity:.08; color: var(--c-medical);
}

/* Particle canvas */
#particles-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---------------------------------- */
/* 8. Stats / Counters                 */
/* ---------------------------------- */
.stat-card{
  padding:18px 20px; text-align:center;
}
.stat-num{
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight:800;
  background: var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.stat-label{ margin-top:8px; font-size:13.5px; color: var(--text-muted); font-weight:500; letter-spacing:.02em; }

/* ---------------------------------- */
/* 9. Grids & general components       */
/* ---------------------------------- */
.grid{ display:grid; gap:24px; min-width:0; }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.video-testimonial-panel{ max-width:1040px; margin-inline:auto; }
.trust-stats-grid{ max-width:1040px; margin-inline:auto; }
.video-testimonial-grid{ gap:20px; }

.hero-grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; min-width:0; }
.hero-grid > *{ min-width:0; }
.hero-visual{ width:100%; min-width:0; }
.why-grid{ grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.services-grid{ grid-template-columns:repeat(4,1fr); }
.industries-grid{ grid-template-columns:repeat(5,1fr); gap:16px; }
.testimonial-grid{ grid-template-columns:repeat(3,1fr); gap:28px; }
.footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; }

.icon-badge{
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center;
  background: var(--grad-primary-soft);
  color: var(--c-medical);
  border:1px solid rgba(57,139,239,.25);
}
.icon-badge svg{ width:24px; height:24px; }

.tag-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--r-full);
  font-size:12.5px; font-weight:600; color: var(--text-soft);
  background: var(--glass-bg); border:1px solid var(--glass-border);
}

.logo-marquee-label{
  text-align:center; font-family: var(--font-heading);
  font-size:13.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-soft); margin-bottom:28px;
}

.logo-marquee{
  display:flex; overflow:hidden; position:relative;
  padding-block:8px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track{ display:flex; gap:20px; align-items:center; animation: marquee 32s linear infinite; padding-inline:32px; }
.logo-track img{
	height: 90px;
	opacity: 1;
	filter: none;
	background: #fff;
	border-radius: 10px;
	padding: 8px;
}

/* Dummy client logo lockup (icon mark + wordmark, no external images used) */
.dummy-logo{
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  padding:12px 20px 12px 12px;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  transition: transform var(--dur-fast) var(--ease-out-soft), background var(--dur-fast), border-color var(--dur-fast);
}
.dummy-logo:hover{ transform: translateY(-2px); background: var(--glass-bg-strong); border-color: var(--glass-border-strong); }
.logo-mark{
  flex:none; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.5);
}
.logo-mark svg{ width:19px; height:19px; color:#fff; }
.logo-word{
  font-family: var(--font-heading); font-weight:700; font-size:16px;
  color: var(--text-primary); letter-spacing:-0.01em;
}

/* Video testimonial cards (click to open modal) */
.video-testimonial-card{
  position:relative; display:block; width:100%; padding:0;
  border-radius: var(--r-lg); overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--glass-border);
  background: var(--bg-navy-900); cursor:pointer;
}
.video-testimonial-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s var(--ease-out-soft);
}
.video-testimonial-card:hover img{ transform:scale(1.05); }
.video-testimonial-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(2,3,6,.8) 0%, rgba(2,3,6,.1) 45%, rgba(2,3,6,.25) 100%);
}
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; width:64px; height:64px; border-radius:50%;
  background: var(--grad-primary); display:grid; place-items:center;
  box-shadow: var(--shadow-glow-blue);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.video-testimonial-card:hover .video-play-btn{ transform:translate(-50%,-50%) scale(1.1); }
.video-play-btn svg{ width:26px; height:26px; color:#04121c; margin-left:3px; }
.video-card-caption{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family: var(--font-heading); font-weight:700; font-size:14.5px; color:#fff;
}

/* Inline mid-section CTA banner */
.section-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  padding:28px 32px;
  max-width:1040px; margin-inline:auto;
}
.section-cta-title{ font-size:1.15rem; margin-bottom:4px; }
.section-cta-desc{ font-size:14px; color:var(--text-soft); max-width:480px; }
.section-cta .btn{ flex:none; }
@media (max-width:640px){
  .section-cta{ flex-direction:column; text-align:center; padding:24px 22px; }
  .section-cta-desc{ max-width:100%; }
  .section-cta .btn{ width:100%; }
}

hr.divider{ border:none; height:1px; background: var(--glass-border); margin-block:32px; }

/* Footer nav links: larger tap area without inflating visual density */
.footer-links{ display:flex; flex-direction:column; }
.footer-links a{ display:block; padding-block:9px; }

/* Header logo link: enlarge tap area to match its visual footprint */
.brand{ padding-block:10px; margin-block:-10px; }

/* Hero social proof: avatar stack */
.avatar-stack{ display:flex; }
.avatar-chip{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; object-position:center 15%;
  border:3px solid var(--bg-navy-950);
  margin-left:-14px;
  flex:none;
}
.avatar-chip:first-child{ margin-left:0; }

/* Process timeline numbered circle */
.process-num{
  width:52px; height:52px; border-radius:50%;
  background: var(--grad-primary);
  display:grid; place-items:center;
  font-family: var(--font-heading); font-weight:800; color:#04121c;
  flex:none;
}

.mockup-frame{
  border-radius: var(--r-xl);
  border:1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-card);
  padding:14px;
  position:relative;
  z-index:1;
}
.float-card{ position:absolute; z-index:5; }
.mockup-frame .mockup-topbar{
  display:flex; gap:6px; padding:0 6px 12px;
}
.mockup-frame .mockup-topbar span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.18); }
.mockup-screen{
  border-radius: var(--r-md);
  background: linear-gradient(145deg,#0d1428,#0a0e1a);
  height:300px;
  overflow:hidden;
  position:relative;
}

/* Hero mockup: full-frame auto-sliding doctor showcase (no controls, decorative) */
.doctor-slider{ width:100%; height:100%; }
.doctor-slider .swiper-wrapper{ height:100%; }
.doctor-slider .swiper-slide{ height:100%; }
.doctor-slide-full{ position:relative; width:100%; height:100%; }
.doctor-photo-full{
  width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block;
}
.doctor-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px 20px 18px;
  background: linear-gradient(0deg, rgba(2,3,6,.92) 0%, rgba(2,3,6,.5) 65%, transparent 100%);
}
.doctor-overlay .doctor-name{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:#fff; }
.doctor-overlay .doctor-specialty{ font-size:12.5px; color:rgba(255,255,255,.75); margin-top:3px; }

/* Case Studies Section */
#case-studies{
  background: linear-gradient(180deg, transparent 0%, rgba(57,139,239,.05) 50%, transparent 100%);
}

#case-studies .section-head{
  margin-bottom:64px;
}

.case-study-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:stretch;
  padding:48px;
  border-radius: var(--r-lg);
  margin-bottom:32px;
  transition: all var(--dur-slow) var(--ease-premium);
}

.case-study-card:hover{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.case-study-header{
  display:flex;
  align-items:center;
}

.case-study-image{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:100%;
  height:100%;
  min-height:380px;
}

.case-preview{
  position:relative;
  border-radius: var(--r-md);
  overflow:hidden;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition: all var(--dur-med) var(--ease-premium);
}

.case-preview:hover{
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.state-label{
  position:absolute;
  top:12px;
  right:12px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:6px 12px;
  border-radius: var(--r-sm);
  font-size:11px;
  font-weight:600;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.device-mockup{
  width:100%;
}

.case-study-content{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.case-study-meta{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}

.badge{
  display:inline-block;
  padding:6px 14px;
  border-radius: var(--r-full);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.badge-primary{
  background: rgba(57,139,239,.15);
  color:var(--c-primary);
  border:1px solid rgba(57,139,239,.3);
}

.badge-success{
  background: rgba(34,197,94,.15);
  color:var(--c-success);
  border:1px solid rgba(34,197,94,.3);
}

.badge-warning{
  background: rgba(249,115,22,.15);
  color:#f97316;
  border:1px solid rgba(249,115,22,.3);
}

.meta-text{
  font-size:12px;
  color:var(--text-muted);
  padding-left:12px;
  border-left:1px solid var(--glass-border);
}

.case-study-title{
  font-size:clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom:16px;
  line-height:1.2;
}

.case-study-overview{
  font-size:15px;
  color:var(--text-soft);
  margin-bottom:32px;
  line-height:1.6;
}

.case-study-section{
  margin-bottom:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--glass-border);
}

.case-study-section:last-of-type{
  margin-bottom:28px;
  padding-bottom:0;
  border-bottom:none;
}

.case-section-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-primary);
  margin-bottom:10px;
  display:flex;
  align-items:center;
}

.case-section-text{
  font-size:14px;
  color:var(--text-soft);
  line-height:1.7;
}

.case-study-results{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin:32px 0;
  padding:24px;
  background: var(--glass-bg);
  border-radius: var(--r-md);
  border:1px solid var(--glass-border);
}

.result-metric{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.result-number{
  font-size:28px;
  font-weight:800;
  font-family: var(--font-heading);
  line-height:1;
}

.grad-text{
  background: var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.result-label{
  font-size:12px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
}

.case-study-testimonial{
  margin-top:32px;
  padding:24px;
  background: linear-gradient(135deg, rgba(57,139,239,.08) 0%, rgba(24,70,129,.06) 100%);
  border-left:3px solid var(--c-primary);
  border-radius: var(--r-md);
}

.testimonial-text{
  font-size:14px;
  color:var(--text-soft);
  line-height:1.7;
  font-style:italic;
  margin-bottom:16px;
}

.testimonial-author{
  font-size:13px;
  font-weight:600;
  color:var(--c-primary);
}

.w-full{
  width:100%;
}

/* Team Section */
#team{
  background: linear-gradient(180deg, transparent 0%, rgba(57,139,239,.04) 50%, transparent 100%);
}

#team .section-head{
  margin-bottom:64px;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  margin-bottom:48px;
}

.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  border-radius: var(--r-lg);
  transition: all var(--dur-slow) var(--ease-premium);
}

.team-card:hover{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.team-image{
  width:100%;
  height:320px;
  margin-bottom:0;
  border-radius:0;
  overflow:hidden;
  border:none;
}

.avatar-placeholder{
  width:100%;
  height:100%;
}

.team-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.team-name{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
  margin:24px 0 8px;
  line-height:1.3;
  padding:0 20px;
}

.team-role{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--c-primary);
  margin-bottom:16px;
  padding:0 20px;
}

.team-bio{
  font-size:13.5px;
  color:var(--text-soft);
  line-height:1.7;
  margin-bottom:24px;
  padding:0 20px;
}

/* Breadcrumbs */
/* Sits before .page-hero/.archive-hero, so it — not the hero — absorbs the
   fixed .site-header's clearance; the adjacent-sibling rule below hands the
   hero back its normal (non-header-clearing) top padding so the two don't
   double up. */
.breadcrumbs{ padding:clamp(120px,14vw,180px) 24px 0; }
.breadcrumbs + .page-hero,
.breadcrumbs + .archive-hero,
.breadcrumbs + article > .page-hero{ padding-top:clamp(24px,3vw,32px); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; list-style:none; margin:0 auto; padding:0; max-width:1200px; text-align:center; }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.breadcrumbs a{ font-size:13px; color:var(--text-muted); text-decoration:none; transition:color .15s ease; }
.breadcrumbs a:hover{ color:var(--c-medical); }
.breadcrumbs span[aria-current]{ font-size:13px; color:var(--text-soft); }
.breadcrumbs__sep{ font-size:13px; color:var(--text-faint); }

/* Utility */
.text-center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }