/* ============================================================
   MHN — Medical & Health Networks
   Design system: "The Life Line"
   A continuous ECG trace is the connective thread between
   One Doctor → One Practice → One World. It runs down every
   page, spiking into a heartbeat at each new idea.

   Color system: clean clinical blues (light mode by default),
   with a matching deep-navy dark mode toggled via
   [data-theme="dark"] on <html>.
   ============================================================ */

:root{
  /* ---- color tokens: LIGHT (default) ---- */
  --bg-0:#FFFFFF;          /* deepest / hero background */
  --bg-1:#FFFFFF;          /* primary background */
  --bg-2:#E7F1FB;          /* secondary panels */
  --card:#FFFFFF;          /* card surface */
  --card-hover:#E7F1FB;    /* card hover surface */
  --line:rgba(23,58,94,0.10);
  --line-strong:rgba(23,58,94,0.20);

  --ink:#173A5E;           /* primary text */
  --ink-dim:#3F6790;       /* secondary text */
  --ink-faint:#7E9CBC;     /* tertiary / captions */

  --pulse:#2F78C8;         /* the "life line" — primary blue */
  --pulse-dim:#2F78C833;
  --brand-green:#008000;   /* accent green used for select homepage elements */
  --brand-green-dim:#00800026;
  --coral:#173A5E;         /* secondary accent / CTA — deep navy */
  --coral-dim:#173A5E1F;
  --amber:#9EC9F3;         /* sparing third accent, stats only */
  --on-accent:#FFFFFF;     /* text drawn on top of --pulse / --coral */

  /* ---- life-line gradient (matches navbar) ---- */
  --lifeline-1:#12335C;
  --lifeline-2:#1E5C96;
  --lifeline-3:#12793D;
  --lifeline-4:#00A651;

  /* ---- type ---- */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:'Playfair Display', Georgia, serif;

  --radius-s:6px;
  --radius-m:14px;
  --radius-l:28px;
}

/* ---- color tokens: DARK ---- */
[data-theme="dark"]{
  --bg-0:#0B1D33;
  --bg-1:#0F2440;
  --bg-2:#132C4E;
  --card:#17325A;
  --card-hover:#1C3B69;
  --line:rgba(231,241,251,0.09);
  --line-strong:rgba(231,241,251,0.16);

  --ink:#EAF3FC;
  --ink-dim:#A9C6E8;
  --ink-faint:#6E93BE;

  --pulse:#5FA8EA;
  --pulse-dim:#5FA8EA33;
  --coral:#9EC9F3;
  --coral-dim:#9EC9F326;
  --amber:#9EC9F3;
  --on-accent:#0B1D33;

  --lifeline-1:#0B2140;
  --lifeline-2:#14487A;
  --lifeline-3:#0E5C31;
  --lifeline-4:#00803D;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{transition:background-color .35s ease, color .35s ease;}
body, .mhn-nav .nav-inner, .card, .quote-card, .news-card, .job-row, .product-preview, .contact-form .form-control{
  transition:background-color .35s ease, border-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--bg-1);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
  color:var(--ink);
  margin:0 0 0.5em;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--pulse); color:var(--on-accent);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--pulse);
  outline-offset:3px;
  border-radius:4px;
}

.container-mhn{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.mhn-nav .container-mhn{max-width:1360px;}

/* ============ CURSOR GLOW ============
   A soft light that follows the cursor across the whole site —
   subtle, low-opacity, purely atmospheric. */
#cursor-glow{
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,120,200,0.14), transparent 70%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
[data-theme="dark"] #cursor-glow{background:radial-gradient(circle, rgba(95,168,234,0.16), transparent 70%);}
#cursor-glow.is-active{opacity:1;}
@media (max-width: 767px){ #cursor-glow{display:none;} }

/* ============ PAGE LOADER (globe + life-line splash) ============ */
#page-loader{
  position:fixed; inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg-0);
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease, visibility 0s linear 0s;
}
.loader-globe{
  position:absolute;
  width:min(58vw, 400px);
  opacity:0.9;
  animation:loaderSpin 18s linear infinite;
}
@keyframes loaderSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.loader-line{
  position:relative;
  width:min(66vw, 380px);
  height:76px;
  z-index:1;
}
.loader-line path{
  fill:none; stroke:url(#loaderLifelineGradient); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  opacity:0.3;
  animation:loaderDraw 1.7s cubic-bezier(.4,0,.2,1) infinite;
  filter:drop-shadow(0 0 6px rgba(226,35,28,.55));
}
@keyframes loaderDraw{
  0%{stroke-dashoffset:900;}
  55%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-900;}
}
.loader-brand{
  position:relative;
  z-index:1;
  margin-top:22px;
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:0.16em;
  font-size:0.85rem;
  color:var(--ink-faint);
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.loader-brand .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 4px var(--pulse-dim);
  animation:loaderPulseDot 1.7s ease-in-out infinite;
}
@keyframes loaderPulseDot{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.5); opacity:0.6;}
}
body.loaded #page-loader{
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .loader-globe{animation:none;}
  .loader-line path{animation:none; stroke-dashoffset:0;}
  .loader-brand .dot{animation:none;}
}

/* ============ PAGE LOAD ============ */
body.is-loading{overflow:hidden;}
body.is-loading .mhn-header, body.is-loading main, body.is-loading .hero, body.is-loading .page-header{
  opacity:0;
}
.mhn-header, .hero, .page-header{
  opacity:1;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
body.is-loading .hero, body.is-loading .page-header{transform:translateY(14px);}

/* nav link click ripple */
.nav-links a{position:relative; overflow:hidden;}
.nav-links a .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(47,120,200,0.35);
  transform:scale(0);
  animation:ripple-out .55s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple-out{ to{ transform:scale(1); opacity:0; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brand-green);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 0 0 4px var(--brand-green-dim);
}
.eyebrow.eyebrow-green{color:var(--brand-green);}
.eyebrow.eyebrow-green::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}
#solutions .eyebrow{color:var(--brand-green);}
#solutions .eyebrow::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}
#news .eyebrow{color:var(--brand-green);}
#news .eyebrow::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}

.section{
  position:relative;
  padding:110px 0;
  border-top:1px solid var(--line);
}
.section-tight{padding:70px 0;}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head p{color:var(--ink-dim); font-size:1.05rem; max-width:560px;}

/* ============ THE LIFE LINE (signature element) ============
   A persistent, named sidebar of section buttons, fixed to the
   left edge of the viewport on every page. The track fills with
   the pulse color as you scroll, and whichever section you're
   currently on is bolded and highlighted. Content is per-page:
   built dynamically from each [data-pulse-node]'s data-pulse-label. */
#pulse-rail{
  position:fixed;
  top:0; left:0;
  width:96px; height:100vh;
  pointer-events:none;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.rail-name{
  pointer-events:auto;
  margin:100px 0 0 27px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.rail-name .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 3px var(--pulse-dim);
  flex-shrink:0;
}
#pulse-rail-items{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding-left:26px;
  margin:24px 0;
}
#pulse-rail-items::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:2px;
  background:var(--line-strong);
}
#pulse-rail-fill{
  position:absolute;
  left:0; top:0; width:2px; height:0;
  background:var(--pulse);
  box-shadow:0 0 8px var(--pulse-dim);
  transition:height .12s linear;
}
.rail-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  cursor:pointer;
  background:none;
  border:none;
  padding:3px 0;
  font-family:var(--font-mono);
}
.rail-item .tick{
  width:16px; height:2px;
  border-radius:2px;
  background:var(--line-strong);
  flex-shrink:0;
  transition:background .35s ease, width .35s ease, box-shadow .35s ease;
}
.rail-item .lbl{
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  font-weight:500;
  transition:color .35s ease, transform .35s ease, font-weight .35s ease;
  transform:translateX(-4px);
  opacity:0.85;
}
.rail-item:hover .tick{background:var(--pulse); width:22px;}
.rail-item:hover .lbl{color:var(--ink);}
.rail-item.is-active .tick{
  background:var(--brand-green);
  width:26px;
  box-shadow:0 0 10px rgba(0,128,0,0.55);
}
.rail-item.is-active .lbl{
  color:var(--brand-green);
  font-weight:700;
  transform:translateX(0);
  opacity:1;
}
.rail-item.is-passed .tick{background:var(--pulse-dim);}
@media (max-width: 1100px){
  #pulse-rail{width:76px;}
  .rail-name{margin-left:20px;}
  #pulse-rail-items{padding-left:20px;}
  .rail-name span:last-child{display:none;}
}
@media (max-width: 991px){
  #pulse-rail{display:none;}
}

/* ============ NAVBAR ============ */
.mhn-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}

/* ---- top utility bar ---- */
.mhn-topbar{
  padding:12px 0;
  background:linear-gradient(90deg, #12335C 0%, #1E5C96 40%, #12793D 75%, #00A651 100%);
  border-bottom:1px solid rgba(234,243,252,0.10);
  transition:padding .35s ease, background .35s ease, max-height .35s ease, opacity .35s ease;
  overflow:hidden;
  max-height:200px;
}
[data-theme="dark"] .mhn-topbar{ background:linear-gradient(90deg, #0B2140 0%, #14487A 40%, #0E5C31 75%, #00803D 100%); }
.mhn-topbar.topbar-hidden{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  border-bottom-color:transparent;
  pointer-events:none;
}
.mhn-topbar .container-mhn{max-width:1360px;}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar-logo{
  display:flex; align-items:center;
  flex-shrink:0;
}
.topbar-logo img{
  height:44px;
  width:auto;
  display:block;
}
.topbar-navslot{display:flex; justify-content:center; flex:1; min-width:0;}
.nav-controls{display:flex; align-items:center; gap:18px;}
.topbar-actions{display:flex; align-items:center; gap:18px;}
.topbar-signin, .topbar-pill-link{
  position:relative;
  z-index:1;
  font-family:var(--font-body); font-weight:600; font-size:0.86rem;
  color:rgba(234,243,252,0.85); display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px;
  margin:-8px -16px;
  border-radius:999px;
  transition:color .25s ease;
}
.topbar-signin::before, .topbar-pill-link::before{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background:linear-gradient(120deg, #EAF3FC, #CFE4FB, #EAF3FC);
  background-size:200% 200%;
  opacity:0;
  transform:scale(0.85);
  transition:opacity .3s ease, transform .3s ease;
  z-index:-1;
}
.topbar-signin:hover, .topbar-pill-link:hover{color:#12335C;}
.topbar-signin:hover::before, .topbar-pill-link:hover::before{
  opacity:1;
  transform:scale(1);
  animation:navPillGradient 2.4s ease infinite;
}
@keyframes navPillGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.topbar-contact{
  font-family:var(--font-body); font-weight:600; font-size:0.85rem;
  color:#FFFFFF; border:1px solid rgba(255,255,255,0.55);
  padding:8px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.topbar-contact:hover{
  border-color:transparent;
  color:#12335C;
  background:linear-gradient(120deg, #EAF3FC, #CFE4FB, #EAF3FC);
  background-size:200% 200%;
  animation:navPillGradient 2.4s ease infinite;
}
@media (max-width:767px){
  .topbar-signin span{display:none;}
}
@media (max-width:991px){
  .topbar-signin{display:none;}
}

/* ============ NAVBAR (the "broken off" bar shown once the page is
   scrolled -- hidden until then, since the links live in the top bar
   at rest) ============ */
/* ============ NAVBAR (floating link bar shown once the page is
   scrolled -- the top bar tucks away, and just the nav links +
   search float directly over the page, with no background or
   pill behind them). ============ */
.mhn-nav{
  max-height:0;
  padding:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .35s ease, padding .35s ease, opacity .3s ease;
}
.mhn-nav.is-scrolled{
  max-height:200px;
  padding:14px 0;
  opacity:1;
  overflow:visible;
  pointer-events:auto;
}
.mhn-nav{position:relative;}
.mhn-nav .nav-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.mhn-nav .nav-inner .brand{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  margin-right:0;
}
/* the scrolled-state pill: same gradient theme as the top bar, with the
   same light/visible icon treatment -- scoped to .mhn-nav only, so the
   top bar itself (logo + Contact Us section) is completely untouched. */
.mhn-nav .nav-controls{
  background:linear-gradient(90deg, #12335C 0%, #1E5C96 40%, #12793D 75%, #00A651 100%);
  border:1px solid rgba(234,243,252,0.22);
  border-radius:999px;
  padding:8px 20px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,0.35);
}
/* "Contact Us" pill duplicate that only shows once the nav-controls
   group has floated into the scrolled pill bar -- the top bar's own
   Contact Us button is hidden at that point (whole top bar tucks
   away), so this keeps Contact reachable while scrolled. Hidden at
   rest since the top bar already shows Contact Us there. */
.nav-contact-scroll{display:none;}
.mhn-nav .nav-contact-scroll{
  display:inline-flex;
  padding:6px 16px;
  font-size:0.82rem;
  white-space:nowrap;
}
[data-theme="dark"] .mhn-nav .nav-controls{
  background:linear-gradient(90deg, #0B2140 0%, #14487A 40%, #0E5C31 75%, #00803D 100%);
}
.mhn-nav .nav-links a{color:rgba(234,243,252,0.85);}
.mhn-nav .nav-links a:hover{color:#EAF3FC; background:rgba(234,243,252,0.16);}
.mhn-nav .nav-links a.active{color:#12335C; background:#EAF3FC;}
.mhn-nav .nav-search{border-color:rgba(234,243,252,0.4); background:rgba(234,243,252,0.14);}
[data-theme="dark"] .mhn-nav .nav-search{background:rgba(234,243,252,0.14);}
.mhn-nav .nav-search:hover{border-color:#EAF3FC;}
.mhn-nav .nav-search.is-open{background:rgba(6,16,32,0.55); border-color:rgba(234,243,252,0.4);}
.mhn-nav .nav-search button{color:#EAF3FC;}
.mhn-nav .nav-search input{color:#EAF3FC;}
.mhn-nav .nav-search input::placeholder{color:rgba(234,243,252,0.6);}
.mhn-nav .nav-toggle{margin-left:auto; color:#EAF3FC;}

.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:0.02em;
  color:var(--ink);
  position:relative; z-index:1;
  padding-right:20px;
  margin-right:8px;
  border-right:1px solid rgba(234,243,252,0.16);
}
@media (max-width: 767px){ .brand{border-right:none; padding-right:0; margin-right:0;} }
.nav-brand-logo{height:30px; width:auto; display:block;}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 0 var(--pulse-dim);
  animation:beat 1.8s infinite;
}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 0 var(--pulse-dim);}
  35%{box-shadow:0 0 0 6px var(--pulse-dim);}
}

.nav-links{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
  position:relative; z-index:1;
}
.nav-links a{
  font-size:0.9rem;
  color:var(--ink-dim);
  padding:8px 14px;
  border-radius:999px;
  transition:color .25s ease, background .25s ease;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--ink);
  background:rgba(255,255,255,0.06);
}

/* nav links now live inside the colorful gradient topbar by default --
   the dim navy text above is meant for light/dark theme backgrounds, so
   give them light text here for contrast against the topbar gradient.
   (.active keeps the white-pill treatment above, which already reads fine.) */
.topbar-navslot .nav-links a{color:rgba(234,243,252,0.8);}
.topbar-navslot .nav-links a:hover{color:#EAF3FC; background:rgba(234,243,252,0.14);}
.topbar-navslot .nav-search{border-color:rgba(234,243,252,0.35); background:rgba(234,243,252,0.10);}
.topbar-navslot .nav-search:hover{border-color:#EAF3FC;}

.btn-pulse{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.88rem;
  color:var(--on-accent);
  background:var(--brand-green);
  border:none;
  padding:11px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  position:relative; z-index:1;
  cursor:pointer;
}
.btn-pulse:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);
  color:var(--on-accent);
}
.hero-actions .btn-pulse{background:var(--brand-green);}
.hero-actions .btn-pulse:hover{box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);}
.btn-coral{
  background:var(--coral);
  color:var(--on-accent);
}
.btn-coral:hover{
  box-shadow:0 10px 24px -8px rgba(23,58,94,0.45);
  color:var(--on-accent);
}
.btn-ghost{
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink);
  border:1px solid var(--line-strong);
  padding:10px 20px;
  border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .25s ease, background .25s ease;
}
.btn-ghost:hover{ border-color:var(--pulse); background:rgba(47,120,200,0.06); color:var(--ink);}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  flex-shrink:0;
  padding:0;
  border-radius:50%;
  /* very light frosted-glass look */
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  /* blur only (no colour boost) so the button never shows up as a coloured disc */
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:none;
  color:rgba(255,255,255,0.75);
  font-size:1.5rem; line-height:1;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index:1;
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.22); color:#FFFFFF;}
.nav-toggle:active{transform:scale(0.92);}
/* "Contact Us" + theme entries inside the mobile menu (never shown on desktop) */
.nav-links > .nav-links-contact,
.nav-links > .nav-links-theme{display:none !important;}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  position:relative; z-index:1;
  width:38px; height:38px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .35s ease;
}
.theme-toggle:hover{border-color:var(--pulse); color:var(--pulse);}
.theme-toggle:active{transform:scale(0.9);}
.theme-toggle .bi-sun-fill{display:none;}
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill{display:none;}
[data-theme="dark"] .theme-toggle .bi-sun-fill{display:inline-block;}

/* ============ LOGIN BUTTON (next to theme toggle) ============ */
.nav-login-btn{
  position:relative; z-index:1;
  width:38px; height:38px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}
.nav-login-btn:hover{border-color:var(--pulse); color:var(--pulse);}
.nav-login-btn:active{transform:scale(0.9);}

/* ---- nav search ---- */
.nav-search{
  position:relative; z-index:1;
  display:flex; align-items:center;
  height:38px; width:38px;
  flex-shrink:0;
  border-radius:999px;
  border:1px solid rgba(234,243,252,0.22);
  background:rgba(234,243,252,0.06);
  overflow:hidden;
  transition:width .35s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
}
.nav-search:hover{border-color:var(--pulse);}
.nav-search.is-open{width:200px; background:rgba(6,16,32,0.55);}
.nav-search button{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:#EAF3FC; font-size:0.95rem; cursor:pointer;
}
.nav-search input{
  border:none; background:none; outline:none;
  color:#EAF3FC; font-family:var(--font-body); font-size:0.85rem;
  width:0; opacity:0; min-width:0;
  transition:width .3s ease, opacity .3s ease;
}
.nav-search.is-open input{width:150px; opacity:1;}
.nav-search input::placeholder{color:rgba(234,243,252,0.5);}
.nav-search-results{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:300px;
  max-height:340px;
  overflow-y:auto;
  background:#0B1D33;
  border:1px solid rgba(234,243,252,0.16);
  border-radius:14px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,0.5);
  padding:6px;
  display:none;
}
.nav-search-results.is-visible{display:block;}
.nav-search-results a{
  display:block;
  padding:9px 12px;
  border-radius:9px;
  font-size:0.85rem;
  font-weight:500;
  color:#EAF3FC;
  transition:background .2s ease;
}
.nav-search-results a:hover, .nav-search-results a.is-active{background:rgba(255,255,255,0.09);}
.nav-search-results a .sr-page{
  display:block;
  font-size:0.7rem;
  font-family:var(--font-mono);
  color:rgba(234,243,252,0.5);
  margin-top:2px;
}
.nav-search-results .sr-empty{
  padding:10px 12px;
  font-size:0.82rem;
  color:rgba(234,243,252,0.55);
}
@media (max-width: 767px){ .nav-search{display:none;} }
@media (max-width: 991px){
  /* one clean row on tablets & phones:  hamburger (left) · logo · actions (right) */
  /* bar = hamburger + logo on the left, theme (mood) button on the right.
     Contact Us moves into the hamburger menu. */
  .topbar-inner{display:flex; align-items:center; justify-content:flex-start; gap:14px;}
  .topbar-navslot{order:-1; flex:0 0 auto; justify-content:flex-start;}
  .topbar-actions{margin-left:auto; gap:10px;}
  .topbar-actions .topbar-contact{display:none;}
  .nav-controls{gap:0;}
  .nav-toggle{display:flex; position:relative; z-index:201;}
  .nav-cta{display:none;}
  .nav-contact-scroll{display:none !important;}

  /* the dropdown menu — same gradient as the top bar so the light link text is
     always readable, in both themes */
  .nav-links{
    position:fixed;
    top:84px; left:16px; right:16px;
    z-index:200;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column;
    align-items:stretch;
    background:linear-gradient(90deg, rgba(18,51,92,0.14) 0%, rgba(30,92,150,0.14) 40%, rgba(18,121,61,0.14) 75%, rgba(0,166,81,0.14) 100%);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    border:1px solid rgba(234,243,252,0.18);
    border-radius:18px;
    padding:10px;
    box-shadow:0 24px 40px -20px rgba(11,29,51,0.35);
    display:none;
    gap:4px;
  }
  .nav-links.is-open{display:flex;}
  [data-theme="dark"] .nav-links{
    background:linear-gradient(90deg, rgba(11,33,64,0.18) 0%, rgba(20,72,122,0.18) 40%, rgba(14,92,49,0.18) 75%, rgba(0,128,61,0.18) 100%);
  }
  .nav-links a,
  .topbar-navslot .nav-links a{
    display:block;
    padding:12px 16px;
    font-size:1rem;
    color:rgba(234,243,252,0.92);
  }
  .nav-links a:hover,
  .topbar-navslot .nav-links a:hover{color:#FFFFFF; background:rgba(234,243,252,0.14);}
  .topbar-navslot .nav-links a.active{color:#FFFFFF; font-weight:700; background:rgba(234,243,252,0.18);}
  .nav-links > .nav-links-contact{display:block !important; margin-top:6px;}
  .nav-links-contact a{
    display:flex !important;
    align-items:center; justify-content:center; gap:8px;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.55);
  }
  .nav-links > .nav-links-theme{display:block !important;}
  .nav-theme-item{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.4);
    color:#FFFFFF;
    font-family:var(--font-body); font-size:1rem; font-weight:500;
    cursor:pointer;
  }
  .nav-theme-item:hover{background:rgba(255,255,255,0.24);}
  .nav-theme-item .bi-sun-fill,
  .nav-theme-item .lbl-light{display:none;}
  [data-theme="dark"] .nav-theme-item .bi-moon-stars-fill,
  [data-theme="dark"] .nav-theme-item .lbl-dark{display:none;}
  [data-theme="dark"] .nav-theme-item .bi-sun-fill{display:inline-block;}
  [data-theme="dark"] .nav-theme-item .lbl-light{display:inline;}

  /* the floating pill nav is desktop-only: on small screens the top bar just
     stays in place, so the hamburger, logo, theme and Contact never disappear */
  .mhn-topbar.topbar-hidden{
    max-height:200px;
    padding:12px 0;
    opacity:1;
    pointer-events:auto;
    border-bottom-color:rgba(234,243,252,0.10);
  }
  .mhn-nav{display:none;}
  body.nav-open{overflow:hidden;}
}
@media (max-width: 600px){
  .mhn-topbar .container-mhn{padding:0 16px;}
  .topbar-logo img{height:36px;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:100px 0 16px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,29,51,0.24), rgba(11,29,51,0.14) 45%, rgba(11,29,51,0.24)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
}
[data-theme="dark"] .hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.16) 45%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
}
.hero-orbit{
  position:absolute;
  right:max(7%, calc((100% - 1240px) / 2 + 60px));
  top:52%;
  transform:translateY(-50%);
  width:min(34vw, 440px);
  height:auto;
  opacity:0.32;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
@media (max-width: 1100px){
  .hero-orbit{right:5%; width:min(34vw, 320px);}
}
@media (max-width: 767px){
  .hero-orbit{opacity:0.16; right:8%; width:min(48vw, 260px); top:62%;}
}
.hero-content{position:relative; z-index:2; max-width:700px;}
.hero-heading{
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brand-green);
  margin:0 0 6px;
}
.hero-tag{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
  display:block;
}
.hero h1{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom:12px;
  line-height:1.15;
}
.hero h1 .accent{color:var(--brand-green);}
.hero p.lead{
  font-size:1.05rem;
  color:var(--ink-dim);
  max-width:560px;
  margin-bottom:18px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-meta{
  margin-top:20px;
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
}
.hero-meta div{border-left:2px solid var(--pulse-dim); padding-left:14px;}
.hero-meta .n{font-size:1.5rem; color:var(--ink); display:block; font-family:var(--font-display);}
.hero-meta .l{font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em;}

/* animated life-line trace across hero */
.hero-trace{
  position:absolute;
  left:0; right:0;
  top:0;
  height:100%;
  width:100%;
  z-index:1;
  pointer-events:none;
}
@media (max-height: 820px){
  .hero{padding-top:90px; padding-bottom:12px;}
  .hero-meta{margin-top:14px;}
}
@media (max-width: 767px){
  .hero{padding-top:110px;}
  .hero-trace{height:220px; top:auto; bottom:0;}
}
@media (min-width: 768px) and (max-width: 991px){
  .hero-trace{height:280px; top:auto; bottom:0;}
}
.hero-trace path{
  fill:none; stroke:url(#heroLifelineGradient); stroke-width:2;
  stroke-linecap:butt; stroke-linejoin:miter;
  opacity:0.12;
  stroke-dasharray:10 7;
  filter:drop-shadow(0 0 2px rgba(226,35,28,0.25));
  animation:dash 3.2s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-200; } }

/* ============ CARDS: SOLUTIONS ============ */
.grid{display:grid; gap:22px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width: 991px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(240px 140px at var(--mx,50%) var(--my,0%), rgba(47,120,200,0.12), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--pulse-dim);
  background:var(--card-hover);
}
.card:hover::after{opacity:1;}
.card-media.skeleton{
  height:64px;
  border-radius:10px;
  margin-bottom:16px;
  background:linear-gradient(100deg, var(--bg-2) 30%, var(--card-hover) 50%, var(--bg-2) 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}
.card-media{
  height:150px;
  border-radius:10px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-media img{transform:scale(1.07);}
.card-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(47,120,200,0.38), rgba(23,58,94,0.16));
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-theme="dark"] .card-media::after{
  background:linear-gradient(160deg, rgba(47,120,200,0.5), rgba(6,16,32,0.4));
  mix-blend-mode:color;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.card[data-selectable].is-selected{
  border-color:var(--pulse);
  background:var(--card-hover);
  box-shadow:0 0 0 1px var(--pulse-dim), 0 16px 34px -18px rgba(47,120,200,0.4);
}
.card[data-selectable].is-selected .icon{
  background:var(--pulse);
  color:var(--on-accent);
}
.card .icon{
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-green-dim);
  color:var(--brand-green);
  font-size:1.3rem;
  margin-bottom:20px;
}
.card h3{font-size:1.15rem; margin-bottom:8px;}
.card p{color:var(--ink-dim); font-size:0.94rem; margin-bottom:16px;}
.card .learn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.82rem;
  color:var(--pulse);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:999px;
  border:1.5px solid var(--pulse);
  background:rgba(47,120,200,0.08);
  transition:transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card .learn:hover{
  background:var(--brand-green);
  color:var(--on-accent);
  border-color:var(--brand-green);
  box-shadow:0 10px 24px -10px rgba(0,128,0,0.5);
  transform:translateY(-2px);
}
.card .learn:active{
  transform:translateY(0) scale(0.94);
  box-shadow:0 4px 10px -6px rgba(0,128,0,0.5);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card .learn i{transition:transform .25s ease;}
.card .learn:hover i{transform:translateX(4px);}

/* ============ CORE VALUES MARQUEE ============ */
.values-marquee{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  overflow:hidden;
}
.values-marquee .container-mhn{
  display:flex;
  align-items:center;
  gap:36px;
}
.values-marquee .vm-label{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brand-green);
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:28px;
  border-right:1px solid var(--line-strong);
}
.values-marquee .vm-label::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 0 0 4px var(--brand-green-dim);
  flex-shrink:0;
}
.vm-track-wrap{
  flex:1;
  min-width:0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.vm-track{
  display:flex;
  width:max-content;
  animation:vm-scroll 22s linear infinite;
}
.vm-track span{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.3rem;
  color:var(--ink);
  white-space:nowrap;
  padding:0 30px;
  position:relative;
}
.vm-track span::after{
  content:"◆";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  font-size:0.5rem;
  color:var(--pulse);
  opacity:0.6;
}
@keyframes vm-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .vm-track{animation:none;}
}
@media (max-width: 767px){
  .values-marquee .container-mhn{flex-direction:column; align-items:flex-start; gap:14px;}
  .values-marquee .vm-label{border-right:none; padding-right:0;}
}

/* ============ STAT STRIP ============ */
.stat-strip{
  background:var(--bg-0);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:70px 0;
}
.stat-strip .grid-4{gap:0;}
.stat{
  text-align:center;
  padding:20px 16px;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;}
.stat .num{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--pulse);
  font-variant-numeric:tabular-nums;
}
.stat .num .unit{font-size:0.5em; color:var(--ink-dim); margin-left:2px;}
.stat .lbl{
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-top:8px;
}
@media (max-width: 640px){
  .stat{border-right:none; border-bottom:1px solid var(--line);}
}

/* ============ PRODUCT PREVIEW ============ */
.product-preview{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:6px;
  position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.6);
}
.product-preview .chrome{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px;
}
.product-preview .chrome span{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.product-preview .screen{
  background:var(--bg-0);
  border-radius:calc(var(--radius-l) - 10px);
  padding:26px;
  font-family:var(--font-mono);
  font-size:0.8rem;
}
.mock-row{display:flex; gap:18px;}
.mock-side{width:150px; flex-shrink:0; display:flex; flex-direction:column; gap:10px;}
.mock-pill{height:12px; border-radius:6px; background:var(--line-strong);}
.mock-pill.active{background:var(--pulse-dim); border:1px solid var(--pulse);}
.mock-main{flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.mock-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; min-height:80px;}
.mock-card .k{color:var(--ink-faint); font-size:0.68rem;}
.mock-card .v{color:var(--pulse); font-size:1.3rem; font-family:var(--font-display); margin-top:6px;}
.mock-chart{grid-column:1/-1; height:110px; background:var(--card); border:1px solid var(--line); border-radius:10px; margin-top:12px; position:relative; overflow:hidden;}
.mock-chart svg{position:absolute; inset:0; width:100%; height:100%;}
@media (max-width: 767px){ .mock-side{display:none;} .mock-main{grid-template-columns:1fr 1fr;} }

/* ---- 3D animated chart (Inside the Platform) ---- */
.chart-3d{
  grid-column:1/-1;
  height:190px;
  margin-top:12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% 100%, var(--card) 0%, var(--bg-2) 100%);
  display:flex; align-items:flex-end; justify-content:center;
  gap:16px;
  padding:22px 20px 0;
  perspective:900px;
  overflow:hidden;
  position:relative;
}
.chart-3d::before{
  content:"PATIENT VOLUME — LAST 9 DAYS";
  position:absolute; top:10px; left:16px;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em;
  color:var(--ink-faint);
}
.chart-3d-floor{
  display:flex; align-items:flex-end; justify-content:center;
  gap:14px;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transform:rotateX(24deg) rotateY(-8deg);
  animation:chart-breathe 8s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes chart-breathe{
  0%,100%{ transform:rotateX(24deg) rotateY(-8deg); }
  50%{ transform:rotateX(17deg) rotateY(-3deg); }
}
@media (prefers-reduced-motion: reduce){
  .chart-3d-floor{animation:none;}
}
.bar-3d{
  position:relative;
  width:22px;
  height:0;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--amber), var(--pulse) 45%, var(--coral));
  box-shadow:9px 5px 0 -1px rgba(23,58,94,0.55);
  transform:translateZ(calc(var(--i) * 2px));
  transform-origin:bottom center;
  transition:height 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * 70ms);
}
.bar-3d::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:6px;
  background:rgba(255,255,255,0.55);
  border-radius:4px 4px 0 0;
}
[data-theme="dark"] .bar-3d::after{background:rgba(255,255,255,0.28);}
.reveal.is-visible .bar-3d{height:var(--h);}

/* ============ TESTIMONIALS ============ */
.quote-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:32px;
  height:100%;
}
.quote-card .mark{font-family:var(--font-display); font-size:2.6rem; color:var(--pulse-dim); line-height:1; margin-bottom:6px;}
.quote-card p.q{font-size:1.02rem; color:var(--ink); margin-bottom:22px;}
.quote-who{display:flex; align-items:center; gap:12px;}
.quote-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--pulse), var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--on-accent);
}
.quote-who .name{font-weight:600; font-size:0.92rem;}
.quote-who .org{color:var(--ink-faint); font-size:0.8rem; font-family:var(--font-mono);}

/* ============ NEWS ============ */
.news-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--card);
  transition:border-color .3s ease, transform .3s ease;
}
.news-card:hover{border-color:var(--pulse-dim); transform:translateY(-4px);}
.news-card.is-selected{border-color:var(--pulse); box-shadow:0 0 0 1px var(--pulse-dim);}
.news-card.is-selected .date{color:var(--coral);}
.news-card .thumb{
  height:150px;
  background:linear-gradient(135deg, var(--bg-2), var(--card-hover));
  position:relative;
  overflow:hidden;
}
.news-card .thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:16px 16px;
}
.news-card .thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.news-card:hover .thumb img{transform:scale(1.08);}
.news-card .thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(47,120,200,0.34), rgba(23,58,94,0.14));
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-theme="dark"] .news-card .thumb::after{
  background:linear-gradient(160deg, rgba(47,120,200,0.46), rgba(6,16,32,0.4));
  mix-blend-mode:color;
}
.news-card .thumb.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}
[data-theme="dark"] .news-card .thumb.skeleton::after{
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size:200% 100%;
}
.news-card .body{padding:20px;}
.news-card .date{font-family:var(--font-mono); font-size:0.72rem; color:var(--brand-green); text-transform:uppercase; letter-spacing:0.06em;}
.news-card h4{font-size:1rem; margin:10px 0 0;}

/* ============ CAREERS / HIRING TEASER ============ */
.hiring-section{
  background:
    radial-gradient(ellipse 700px 400px at 85% 20%, rgba(95,168,234,0.16), transparent 65%),
    linear-gradient(135deg, #12335C, #173A5E 55%, #0E2846);
}
[data-theme="dark"] .hiring-section{
  background:
    radial-gradient(ellipse 700px 400px at 85% 20%, rgba(95,168,234,0.14), transparent 65%),
    linear-gradient(135deg, #0B2140, #0F2A4C 55%, #081A30);
}
.careers-banner{
  background:rgba(234,243,252,0.06);
  border:1px solid rgba(234,243,252,0.16);
  border-radius:var(--radius-l);
  padding:38px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.careers-banner h3{margin:0 0 6px; font-size:1.3rem; color:#EAF3FC;}
.careers-banner p{margin:0; color:rgba(234,243,252,0.7);}

/* round, animated gradient CTA */
.btn-gradient-round{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  color:#fff;
  border:none;
  padding:15px 30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  cursor:pointer;
  background:linear-gradient(115deg, #00590a, #008000, #2fb84f, #008000);
  background-size:300% 100%;
  animation:gradient-flow 5s ease-in-out infinite;
  box-shadow:0 10px 30px -10px rgba(0,128,0,0.65);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.btn-gradient-round:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 38px -10px rgba(47,184,79,0.75);
  color:#fff;
}
.btn-gradient-round:active{transform:translateY(-1px) scale(0.99);}
@keyframes gradient-flow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .btn-gradient-round{animation:none;}
}

/* ============ FOOTER ============ */
footer.mhn-footer{
  position:relative;
  overflow:hidden;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:84px 0 28px;
}
footer.mhn-footer, footer.mhn-footer .brand{color:var(--ink);}
footer.mhn-footer .text-dim, footer.mhn-footer .footer-grid a, footer.mhn-footer .footer-bottom{color:var(--ink-dim);}
footer.mhn-footer .footer-grid h5{color:var(--ink);}
footer.mhn-footer .footer-grid a:hover{color:var(--pulse);}
footer.mhn-footer .footer-bottom{border-color:var(--line);}
footer.mhn-footer .social-icons a{border:none; color:var(--ink-dim);}
footer.mhn-footer .social-icons a:hover{border-color:transparent; color:var(--pulse);}

.footer-watermark{
  position:absolute;
  top:-0.16em;
  left:50%;
  transform:translateX(-32%);
  transform-origin:50% 50%;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(9rem, 15vw, 15rem);
  letter-spacing:0.02em;
  color:var(--ink);
  opacity:0.055;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  backface-visibility:hidden;
}
footer.mhn-footer{perspective:1400px;}
@keyframes footerWatermarkSpin{
  from{transform:translateX(-32%) rotateY(0deg);}
  to{transform:translateX(-32%) rotateY(360deg);}
}
footer.mhn-footer.footer-animate .footer-watermark{
  animation:footerWatermarkSpin 1.5s cubic-bezier(.4,0,.2,1) 1;
}
@media (max-width: 767px){
  @keyframes footerWatermarkSpinMobile{
    from{transform:translateX(-28%) rotateY(0deg);}
    to{transform:translateX(-28%) rotateY(360deg);}
  }
  footer.mhn-footer.footer-animate .footer-watermark{
    animation-name:footerWatermarkSpinMobile;
  }
}

/* DESKTOP (>= 992px): original full-footer background ECG line */
.footer-lifeline{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.footer-lifeline path,
.footer-lifeline-m path{
  fill:none;
  stroke-width:2;
  stroke-linecap:butt;
  stroke-linejoin:miter;
  opacity:0.12;
  stroke-dasharray:10 7;
  filter:drop-shadow(0 0 2px rgba(226,35,28,0.25));
  animation:dash 3.2s linear infinite;
}
.footer-lifeline path{stroke:url(#footerLifelineGradient);}
.footer-lifeline-m path{stroke:url(#footerLifelineGradientM);}

/* SHORT SCREENS (tablet/mobile): separate in-flow strip; hidden on desktop */
.footer-lifeline-strip{display:none;}
@media (max-width: 991px){
  .footer-lifeline--desktop{display:none;}
  .footer-lifeline-strip{
    display:block;
    position:relative;
    width:100%;
    height:56px;
    margin-top:40px;
    overflow:hidden;
    pointer-events:none;
  }
  .footer-lifeline-m{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .footer-lifeline-m path{opacity:0.08;}
}
@media (prefers-reduced-motion: reduce){
  footer.mhn-footer.footer-animate .footer-watermark{animation:none;}
  .footer-lifeline path,
  .footer-lifeline-m path{animation:none;}
}

footer.mhn-footer .container-mhn{position:relative; z-index:1;}

footer.mhn-footer .brand{
  display:flex; align-items:flex-start; gap:14px;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.55rem;
  line-height:1.25;
  letter-spacing:0;
  border:none; padding:0; margin:0 0 18px;
}
footer.mhn-footer .brand .footer-logo{
  height:42px; width:auto; flex-shrink:0;
  display:block;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-grid > div{min-width:0;}
footer.mhn-footer .brand{min-width:0;}
@media (max-width: 991px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}
@media (max-width: 767px){
  .footer-grid{grid-template-columns:1fr; row-gap:32px;}
  .footer-watermark{font-size:clamp(5rem, 26vw, 8rem); transform:translateX(-28%);}
  .footer-lifeline-strip{height:60px; margin-top:28px;}
  .footer-lifeline-m path{stroke-width:2.5; opacity:0.14;}
}
.footer-grid h5{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:18px;
}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-grid a{color:var(--ink-dim); font-size:0.94rem; font-family:var(--font-body);}
.footer-grid a:hover{color:var(--pulse);}
.footer-bottom{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width: 991px){
  .footer-bottom{margin-top:20px;}
}
.footer-bottom .bottom-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-bottom .bottom-links a{color:var(--ink-faint);}
.footer-bottom .bottom-links a:hover{color:var(--pulse);}
.social-icons{display:flex; gap:16px; margin-top:20px;}
.social-icons a{
  width:auto; height:auto;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  color:var(--ink-dim);
  transition:color .25s ease;
}
.social-icons a:hover{color:var(--pulse);}

/* ============ PAGE HEADER (interior pages) ============ */
.page-header{
  padding:170px 0 70px;
  background:
    radial-gradient(ellipse 700px 400px at 85% 0%, rgba(47,120,200,0.08), transparent 60%),
    var(--bg-0);
  border-bottom:1px solid var(--line);
}
.page-header .eyebrow{margin-bottom:16px;}
.page-header h1{font-size:clamp(2rem, 4vw, 3rem); max-width:760px;}
.page-header p{color:var(--ink-dim); max-width:620px; font-size:1.05rem;}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:0.08s;}
.reveal-delay-2{transition-delay:0.16s;}
.reveal-delay-3{transition-delay:0.24s;}
.reveal-delay-4{transition-delay:0.32s;}

/* ============ PROCESS STEPS (services page) ============ */
.process-step{
  display:flex; gap:22px;
  padding:28px 0;
  border-top:1px solid var(--line);
}
.process-step:last-child{border-bottom:1px solid var(--line);}
.process-step .idx{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--pulse);
  width:38px; flex-shrink:0;
  padding-top:4px;
}
.process-step h4{font-size:1.05rem; margin-bottom:6px;}
.process-step p{color:var(--ink-dim); margin:0; max-width:560px;}

/* ============ TEAM ============ */
.team-card{text-align:left;}
.team-photo{
  aspect-ratio:1/1;
  border-radius:var(--radius-m);
  background:linear-gradient(160deg, var(--card), var(--bg-2));
  border:1px solid var(--line);
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.team-photo .initials{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:var(--ink-faint);
}
.team-card h4{margin-bottom:2px; font-size:1.02rem;}
.team-card .role{color:var(--pulse); font-family:var(--font-mono); font-size:0.78rem;}
.team-card .bio{color:var(--ink-dim); font-size:0.88rem; margin-top:10px;}

/* ============ TIMELINE (about) ============ */
.timeline{position:relative; padding-left:34px;}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line-strong);}
.timeline-item{position:relative; padding-bottom:36px;}
.timeline-item::before{
  content:""; position:absolute; left:-34px; top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-1); border:2px solid var(--pulse);
}
.timeline-item .yr{font-family:var(--font-mono); color:var(--pulse); font-size:0.85rem;}
.timeline-item h4{margin:6px 0 6px;}
.timeline-item p{color:var(--ink-dim); margin:0;}

/* ============ VALUES ============ */
.value-card{padding:26px 0; border-top:1px solid var(--line);}
.value-card:last-child{border-bottom:1px solid var(--line);}
.value-card .icon{color:var(--pulse); font-size:1.4rem; margin-bottom:14px;}

/* ============ PRODUCT DETAIL SECTIONS ============ */
.product-block{padding:80px 0; border-top:1px solid var(--line);}
.product-block:nth-child(even){background:var(--bg-2);}
.feature-list{list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-direction:column; gap:12px;}
.feature-list li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-dim); font-size:0.95rem;}
.feature-list i{color:var(--pulse); margin-top:3px;}
.tag-pill{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px; margin-right:8px;
}

/* ============ JOB LISTING (careers) ============ */
.job-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.filter-chip{
  font-family:var(--font-mono); font-size:0.8rem;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 16px; cursor:pointer; color:var(--ink-dim);
  transition:all .25s ease;
  background:none;
}
.filter-chip.active, .filter-chip:hover{border-color:var(--pulse); color:var(--pulse); background:var(--pulse-dim);}
.job-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius-m);
  margin-bottom:14px; transition:border-color .25s ease, transform .25s ease;
  flex-wrap:wrap; gap:14px;
  background:var(--card);
}
.job-row:hover{border-color:var(--pulse-dim); transform:translateX(4px);}
.job-row h4{margin:0 0 6px; font-size:1.02rem;}
.job-row .meta{color:var(--ink-faint); font-family:var(--font-mono); font-size:0.78rem; display:flex; gap:14px; flex-wrap:wrap;}

/* ============ CONTACT ============ */
.contact-form .form-control{
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  color:var(--ink);
  border-radius:var(--radius-s);
  padding:13px 16px;
  font-family:var(--font-body);
}
.contact-form .form-control:focus{
  background:var(--bg-2);
  color:var(--ink);
  border-color:var(--pulse);
  box-shadow:0 0 0 3px var(--pulse-dim);
}
.contact-form label{font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:8px;}
.contact-info-item{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line);}
.contact-info-item:last-child{border-bottom:1px solid var(--line);}
.contact-info-item .ic{color:var(--pulse); font-size:1.2rem; width:24px;}
.map-frame{
  border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; background:var(--bg-2); position:relative;
}
.map-frame::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:26px 26px;
}
.map-frame::after{
  content:"⚑ Lahore Office";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-mono); color:var(--coral); font-size:0.85rem;
  background:var(--bg-0); padding:6px 14px; border-radius:999px; border:1px solid var(--coral);
}

/* generic utility */
.text-dim{color:var(--ink-dim);}
.mt-btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.section-cta{text-align:center; padding:100px 0;}
.section-cta h2{font-size:clamp(1.8rem,4vw,2.6rem); max-width:640px; margin:0 auto 16px;}
.section-cta p{color:var(--ink-dim); max-width:520px; margin:0 auto 30px;}