/**
 * HL7 & FHIR Integration — CerebrumCity
 * Stylesheet: hl7-fhir.css
 *
 * Enqueue in functions.php:
 *   wp_enqueue_style( 'hl7-fhir', get_template_directory_uri() . '/assets/css/hl7-fhir.css', [], '1.0.0' );
 *
 * All rules are scoped under #hl7-landing to prevent theme bleed-in.
 * Critical properties use explicit values (never inherit) so WordPress
 * theme base styles cannot override them.
 */

/* ============================================================
   GOOGLE FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES  (scoped so they don't pollute :root)
   ============================================================ */
#hl7-landing {
  --hl-bg:         #f0f7f6;
  --hl-bg-alt:     #e8f4f2;
  --hl-white:      #ffffff;
  --hl-border:     rgba(10,95,80,.10);
  --hl-border-h:   rgba(10,95,80,.22);
  --hl-forest:     #063e4e;
  --hl-teal:       #0d8494;
  --hl-teal-lt:    #14b8a6;
  --hl-cyan:       #06b6d4;
  --hl-grad:       linear-gradient(135deg, #0d7594 0%, #06b6d4 100%);
  --hl-grad-hero:  linear-gradient(160deg, #022c24 0%, #06474e 35%, #0d8894 75%, #002e31 100%);
  --hl-text:       #064e3b;
  --hl-text-2:     #1e5c50;
  --hl-text-3:     #6b9e96;
  --hl-glass-bg:   rgba(255,255,255,.68);
  --hl-glass-b:    rgba(255,255,255,.92);
  --hl-glass-b-h:  rgba(13,148,136,.25);
  --hl-shadow:     0 4px 28px rgba(6,78,59,.09),0 1px 4px rgba(6,78,59,.06);
  --hl-shadow-h:   0 8px 40px rgba(6,78,59,.14),0 2px 8px rgba(6,78,59,.08);
  --hl-r:          16px;
  --hl-r-sm:       10px;
  --hl-font:       'Poppins', system-ui, -apple-system, sans-serif;
  --hl-maxw:       1200px;
  --hl-gap:        5.5rem;
}

/* ============================================================
   HARDENED RESET — every element inside #hl7-landing
   ============================================================ */
#hl7-landing,
#hl7-landing *,
#hl7-landing *::before,
#hl7-landing *::after {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
}

/* Strip theme margins/padding from every child */
#hl7-landing h1,
#hl7-landing h2,
#hl7-landing h3,
#hl7-landing h4,
#hl7-landing h5,
#hl7-landing h6,
#hl7-landing p,
#hl7-landing ul,
#hl7-landing ol,
#hl7-landing li,
#hl7-landing figure,
#hl7-landing blockquote,
#hl7-landing dl,
#hl7-landing dd {
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill theme list bullets */
#hl7-landing ul,
#hl7-landing ol {
  list-style: none !important;
}

/* Kill theme link styles */
#hl7-landing a {
  color: inherit;
  text-decoration: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none;
}

/* Kill theme button styles */
#hl7-landing button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}

/* Kill theme heading overrides */
#hl7-landing h1,
#hl7-landing h2,
#hl7-landing h3,
#hl7-landing h4 {
  font-weight: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-family: var(--hl-font) !important;
}

/* ============================================================
   BASE WRAPPER
   ============================================================ */
#hl7-landing {
  background: var(--hl-bg);
  color: var(--hl-text);
  font-family: var(--hl-font) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  overflow-x: hidden;
  width: 100%;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
#hl7-landing .hl-wrap {
  width: 100%;
  max-width: var(--hl-maxw);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1.25rem, 5vw, 2.5rem) !important;
  padding-right: clamp(1.25rem, 5vw, 2.5rem) !important;
}

#hl7-landing .hl-glass {
  background: var(--hl-glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--hl-glass-b) !important;
  border-radius: var(--hl-r) !important;
  box-shadow: var(--hl-shadow) !important;
  transition: border-color .3s, box-shadow .3s, transform .25s;
}
#hl7-landing .hl-glass:hover {
  border-color: var(--hl-glass-b-h) !important;
  box-shadow: var(--hl-shadow-h) !important;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
#hl7-landing .hl-sec-label {
  display: inline-block !important;
  font-size: 0.71rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--hl-teal) !important;
  background: rgba(13,148,136,.09) !important;
  border: 1px solid rgba(13,148,136,.20) !important;
  border-radius: 6px !important;
  padding: .22rem .9rem !important;
  margin-bottom: .85rem !important;
  line-height: 1.6 !important;
}

#hl7-landing .hl-sec-title {
  font-size: clamp(1.8rem, 3.2vw, 2.65rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--hl-forest) !important;
  margin-bottom: 1.1rem !important;
  font-family: var(--hl-font) !important;
}

#hl7-landing .hl-sec-body {
  font-size: 1.05rem !important;
  color: var(--hl-text-2) !important;
  max-width: 680px;
  margin-bottom: 2rem !important;
  line-height: 1.75 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
#hl7-landing .hl-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  border-radius: var(--hl-r-sm) !important;
  padding: .72rem 1.65rem !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s !important;
  cursor: pointer !important;
  border: none !important;
  white-space: nowrap !important;
  font-family: var(--hl-font) !important;
  line-height: 1.4 !important;
}
#hl7-landing .hl-btn:hover {
  transform: translateY(-2px) !important;
}

#hl7-landing .hl-btn--hero-primary {
  background: #fff !important;
  color: var(--hl-forest) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
}
#hl7-landing .hl-btn--hero-primary:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
  color: var(--hl-forest) !important;
}

#hl7-landing .hl-btn--hero-ghost {
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
}
#hl7-landing .hl-btn--hero-ghost:hover {
  background: rgba(255,255,255,.2) !important;
}

#hl7-landing .hl-link-arrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: var(--hl-teal) !important;
  text-decoration: none !important;
  margin-top: 1.2rem !important;
  transition: gap .2s;
}
#hl7-landing .hl-link-arrow:hover {
  gap: .7rem !important;
  color: var(--hl-teal) !important;
}

/* ============================================================
   BULLET LIST
   ============================================================ */
#hl7-landing .hl-bullet-list {
  list-style: none !important;
  margin-top: .9rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .55rem !important;
  padding: 0 !important;
}
#hl7-landing .hl-bullet-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: .65rem !important;
  font-size: .93rem !important;
  color: var(--hl-text-2) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#hl7-landing .hl-bullet-list li::before {
  content: '' !important;
  flex-shrink: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--hl-teal) !important;
  margin-top: .52rem !important;
  display: block !important;
}

/* ============================================================
   HERO
   ============================================================ */
#hl7-landing .hl-hero {
  background: var(--hl-grad-hero) !important;
  position: relative !important;
  padding-top: clamp(5rem, 11vw, 8.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
  overflow: hidden !important;
}
#hl7-landing .hl-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  pointer-events: none !important;
}
#hl7-landing .hl-hero .hl-wrap {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3.5rem !important;
  align-items: center !important;
}

#hl7-landing .hl-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
  padding: .28rem 1rem !important;
  margin-bottom: 1.5rem !important;
  backdrop-filter: blur(8px);
  line-height: 1.5 !important;
}
#hl7-landing .hl-hero__badge::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #6ee7d6 !important;
  box-shadow: 0 0 8px #6ee7d6 !important;
  animation: hl-pulse 2s ease infinite !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
@keyframes hl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.65); }
}

#hl7-landing .hl-hero__head {
  font-size: clamp(2.3rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.09 !important;
  color: #fff !important;
  margin-bottom: 1.3rem !important;
  font-family: var(--hl-font) !important;
}
#hl7-landing .hl-hero__head em {
  font-style: normal !important;
  color: #6ee7d6 !important;
}

#hl7-landing .hl-hero__sub {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,.78) !important;
  margin-bottom: 2.25rem !important;
  max-width: 500px;
  line-height: 1.75 !important;
}

#hl7-landing .hl-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
}

#hl7-landing .hl-hero__visual {
  display: flex !important;
  justify-content: flex-end !important;
}

/* --- Hero Card / Mock Dashboard --- */
#hl7-landing .hl-hero__card {
  width: 100% !important;
  background: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  padding: 1.4rem !important;
  overflow: hidden !important;
  position: relative !important;
}
#hl7-landing .hl-hero__card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(110,231,214,.7), rgba(6,182,212,.6), transparent) !important;
}

#hl7-landing .hl-mock-bar {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: .5rem .9rem !important;
  margin-bottom: 1rem !important;
}
#hl7-landing .hl-mock-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#hl7-landing .hl-mock-dot:nth-child(1) { background: #ff6b6b !important; }
#hl7-landing .hl-mock-dot:nth-child(2) { background: #ffd166 !important; }
#hl7-landing .hl-mock-dot:nth-child(3) { background: #6bcb77 !important; }
#hl7-landing .hl-mock-url {
  flex: 1 !important;
  font-size: .68rem !important;
  color: rgba(255,255,255,.45) !important;
  text-align: center !important;
  letter-spacing: .04em !important;
}

#hl7-landing .hl-mock-body {
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;
}

#hl7-landing .hl-mock-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#hl7-landing .hl-mock-head h4 {
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.9) !important;
  margin: 0 !important;
  font-family: var(--hl-font) !important;
}

#hl7-landing .hl-mock-pill {
  font-size: .6rem !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  padding: .14rem .55rem !important;
  letter-spacing: .05em !important;
  line-height: 1.5 !important;
}
#hl7-landing .hl-mock-pill--live {
  background: rgba(16,185,129,.18) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16,185,129,.3) !important;
}
#hl7-landing .hl-mock-pill--warn {
  background: rgba(245,158,11,.15) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245,158,11,.25) !important;
}

#hl7-landing .hl-mock-flow {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  padding: .85rem 1rem !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: .3rem !important;
}
#hl7-landing .hl-mock-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .28rem !important;
}
#hl7-landing .hl-mock-node-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .9rem !important;
  background: rgba(255,255,255,.1) !important;
  flex-shrink: 0 !important;
}
#hl7-landing .hl-mock-node-icon.hub {
  background: linear-gradient(135deg, rgba(13,148,136,.5), rgba(6,182,212,.45)) !important;
  border: 1px solid rgba(110,231,214,.3) !important;
  box-shadow: 0 0 14px rgba(13,148,136,.2) !important;
}
#hl7-landing .hl-mock-node-label {
  font-size: .54rem !important;
  color: rgba(255,255,255,.58) !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

#hl7-landing .hl-mock-arrow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .12rem !important;
  flex-shrink: 0 !important;
}
#hl7-landing .hl-mock-arrow-line {
  width: 22px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #6ee7d6, #67e8f9) !important;
  position: relative !important;
}
#hl7-landing .hl-mock-arrow-line::after {
  content: '' !important;
  position: absolute !important;
  right: -4px !important; top: -3px !important;
  border: 3px solid transparent !important;
  border-left: 4px solid #67e8f9 !important;
}
#hl7-landing .hl-mock-arrow-label {
  font-size: .52rem !important;
  color: rgba(255,255,255,.38) !important;
}

#hl7-landing .hl-mock-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: .5rem !important;
}
#hl7-landing .hl-mock-stat {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  padding: .55rem .5rem !important;
  text-align: center !important;
}
#hl7-landing .hl-mock-stat strong {
  display: block !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #6ee7d6 !important;
}
#hl7-landing .hl-mock-stat span {
  font-size: .56rem !important;
  color: rgba(255,255,255,.5) !important;
}

#hl7-landing .hl-mock-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: .38rem !important;
}
#hl7-landing .hl-mock-feed-item {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 7px !important;
  padding: .42rem .65rem !important;
}
#hl7-landing .hl-mock-feed-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#hl7-landing .hl-mock-feed-text {
  flex: 1 !important;
  font-size: .61rem !important;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.35 !important;
}
#hl7-landing .hl-mock-feed-time {
  font-size: .56rem !important;
  color: rgba(255,255,255,.35) !important;
  flex-shrink: 0 !important;
}

#hl7-landing .hl-mock-vitals {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: .4rem !important;
}
#hl7-landing .hl-mock-vital-card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  padding: .55rem .4rem !important;
  text-align: center !important;
}
#hl7-landing .hl-mock-vital-card.alert {
  border-color: rgba(225,29,72,.4) !important;
  background: rgba(225,29,72,.1) !important;
}
#hl7-landing .hl-mock-vital-icon {
  font-size: .9rem !important;
  margin-bottom: .15rem !important;
  display: block !important;
}
#hl7-landing .hl-mock-vital-val {
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.88) !important;
  display: block !important;
}
#hl7-landing .hl-mock-vital-lbl {
  font-size: .5rem !important;
  color: rgba(255,255,255,.42) !important;
  display: block !important;
}
#hl7-landing .hl-mock-vital-card.alert .hl-mock-vital-val {
  color: #fda4af !important;
}

/* ============================================================
   LEGACY CREDENTIAL BAR
   ============================================================ */
#hl7-landing .hl-legacy-bar {
  background: linear-gradient(90deg, #0a292e 0%, #0d474a 50%, #0a222e 100%) !important;
  border-bottom: 1px solid rgba(110,231,183,.15) !important;
  padding-top: .85rem !important;
  padding-bottom: .85rem !important;
  position: relative !important;
  overflow: hidden !important;
}
#hl7-landing .hl-legacy-bar::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
}
#hl7-landing .hl-legacy-bar .hl-wrap {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 2rem !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
}
#hl7-landing .hl-legacy-item {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 9px !important;
  padding: .38rem 1rem !important;
}
#hl7-landing .hl-legacy-divider {
  width: 1px !important;
  align-self: stretch !important;
  background: rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#hl7-landing .hl-legacy-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  background: rgba(110,231,183,.14) !important;
  border: 1px solid rgba(110,231,183,.25) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .9rem !important;
  flex-shrink: 0 !important;
}
#hl7-landing .hl-legacy-text strong {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #6ee7b7 !important;
  letter-spacing: .02em !important;
  line-height: 1.2 !important;
  display: block !important;
  margin: 0 !important;
}
#hl7-landing .hl-legacy-text span {
  font-size: .66rem !important;
  color: rgba(255,255,255,.48) !important;
  letter-spacing: .03em !important;
  display: block !important;
}

#hl7-landing .hl-biztalk-badge {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 9px !important;
  padding: .38rem 1rem !important;
}
#hl7-landing .hl-biztalk-badge .ms-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  width: 18px !important;
}
#hl7-landing .hl-biztalk-badge .ms-grid span {
  display: block !important;
  width: 8px !important; height: 8px !important;
  border-radius: 1px !important;
}
#hl7-landing .hl-biztalk-badge .ms-grid span:nth-child(1) { background: #f25022 !important; }
#hl7-landing .hl-biztalk-badge .ms-grid span:nth-child(2) { background: #7fba00 !important; }
#hl7-landing .hl-biztalk-badge .ms-grid span:nth-child(3) { background: #00a4ef !important; }
#hl7-landing .hl-biztalk-badge .ms-grid span:nth-child(4) { background: #ffb900 !important; }
#hl7-landing .hl-biztalk-badge p {
  margin: 0 !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.88) !important;
  line-height: 1.25 !important;
}
#hl7-landing .hl-biztalk-badge p em {
  font-style: normal !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.42) !important;
  font-size: .63rem !important;
  display: block !important;
}

/* ============================================================
   LOGO STRIP
   ============================================================ */
#hl7-landing .hl-logos-strip {
  background: #fff !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--hl-border) !important;
  overflow: hidden !important;
}
#hl7-landing .hl-logos__label {
  text-align: center !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--hl-text-3) !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

@keyframes hl-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#hl7-landing .continuous-marquee {
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
#hl7-landing .marquee-track {
  display: flex !important;
  gap: 52px !important;
  width: max-content !important;
  animation: hl-logo-marquee 100s linear infinite !important;
  align-items: center !important;
}
#hl7-landing .marquee-track:hover { animation-play-state: paused !important; }
#hl7-landing .marquee-item {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
#hl7-landing .logo-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  padding: 0 20px !important;
  background: #f0f7f6 !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--hl-text-3) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .25s, opacity .25s;
}
#hl7-landing .logo-pill:hover { filter: none !important; opacity: 1 !important; }

/* ============================================================
   STATS
   ============================================================ */
#hl7-landing .hl-stats {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  background: linear-gradient(180deg, #cdf5ee 0%, #d0f5e8, rgba(255,255,255,1) 90%) !important;
}
#hl7-landing .hl-stats__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.1rem !important;
}

#hl7-landing .hl-stat-card {
  padding: 1.75rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .4rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s;
}
#hl7-landing .hl-stat-card:hover { transform: translateY(-3px) !important; }
#hl7-landing .hl-stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--hl-grad) !important;
  border-radius: 3px 3px 0 0 !important;
}
#hl7-landing .hl-stat-card__num {
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  background: var(--hl-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2 !important;
  margin: 0 !important;
}
#hl7-landing .hl-stat-card__label {
  font-size: .85rem !important;
  color: var(--hl-text-2) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* ============================================================
   INTRO
   ============================================================ */
#hl7-landing .hl-intro {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  background: #fff !important;
}
#hl7-landing .hl-intro__inner { max-width: 800px; }

/* ============================================================
   FEATURE TABS
   ============================================================ */
#hl7-landing .hl-tab-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: linear-gradient(145deg, #fff 0%, #fff 10%, #cdf5ee 30%, rgba(208,245,232,.62), rgba(255,255,255,1) 90%) !important;
}
#hl7-landing .hl-tabs { margin-top: 2.25rem !important; }
#hl7-landing .hl-tabs__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  border-bottom: 2px solid var(--hl-border) !important;
  margin-bottom: 2.5rem !important;
  padding: 0 !important;
}
#hl7-landing .hl-tab-btn {
  background: none !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  color: var(--hl-text-3) !important;
  font-family: var(--hl-font) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  padding: .75rem 1.3rem !important;
  cursor: pointer !important;
  transition: color .2s, border-color .2s;
  margin-bottom: -2px !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
#hl7-landing .hl-tab-btn:hover { color: var(--hl-text-2) !important; }
#hl7-landing .hl-tab-btn.active {
  color: var(--hl-teal) !important;
  border-bottom-color: var(--hl-teal) !important;
  font-weight: 600 !important;
}

#hl7-landing .hl-panel         { display: none !important; }
#hl7-landing .hl-panel.active  { display: block !important; }

#hl7-landing .hl-panel__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
}
#hl7-landing .hl-panel__text h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem) !important;
  font-weight: 700 !important;
  color: var(--hl-forest) !important;
  margin-bottom: .75rem !important;
  font-family: var(--hl-font) !important;
  line-height: 1.25 !important;
}
#hl7-landing .hl-panel__text p {
  color: var(--hl-text-2) !important;
  line-height: 1.75 !important;
  font-size: .97rem !important;
  margin: 0 !important;
}

#hl7-landing .hl-panel__img-wrap {
  padding: 30px !important;
  border: 4px solid rgba(255,255,255,.3) !important;
  border-top-width: 1px !important;
  border-left-width: 2px !important;
  border-radius: 30px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.1) !important;
  min-height: 300px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(13,148,136,.07) 0%, rgba(6,182,212,.04) 100%) !important;
}
#hl7-landing .hl-panel__placeholder {
  width: 100% !important;
  min-height: 220px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem !important;
  text-align: center !important;
  padding: 2rem !important;
}
#hl7-landing .hl-panel__placeholder .icon {
  font-size: 2.8rem !important;
  display: block !important;
}
#hl7-landing .hl-panel__placeholder p {
  font-size: .7rem !important;
  color: var(--hl-text-3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
#hl7-landing .hl-testi-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: #e8f4f2 !important;
}
#hl7-landing .hl-testi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  margin-top: 2.5rem !important;
}
#hl7-landing .hl-testi-card {
  padding: 1.9rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .9rem !important;
  border-radius: var(--hl-r) !important;
  box-shadow: var(--hl-shadow) !important;
  transition: transform .25s, box-shadow .25s;
  background: #fff !important;
  border: none !important;
}
#hl7-landing .hl-testi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hl-shadow-h) !important;
}
#hl7-landing .hl-testi-card__icon {
  color: var(--hl-teal) !important;
  opacity: .7;
  display: block !important;
}
#hl7-landing .hl-testi-card__text {
  font-size: .94rem !important;
  color: var(--hl-text-2) !important;
  line-height: 1.75 !important;
  font-style: italic !important;
  flex: 1 !important;
  margin: 0 !important;
}
#hl7-landing .hl-testi-card__footer {
  display: flex !important;
  flex-direction: column !important;
  gap: .2rem !important;
  padding-top: .9rem !important;
  border-top: 1px solid var(--hl-border) !important;
  margin: 0 !important;
}
#hl7-landing .hl-testi-card__footer strong {
  font-size: .9rem !important;
  color: var(--hl-forest) !important;
  font-weight: 600 !important;
  display: block !important;
  margin: 0 !important;
}
#hl7-landing .hl-testi-card__footer span {
  font-size: .8rem !important;
  color: var(--hl-text-3) !important;
  display: block !important;
}

/* ============================================================
   SOLUTIONS TABS
   ============================================================ */
#hl7-landing .hl-sol-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: #fff !important;
}
#hl7-landing .hl-pills-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin-bottom: 2.25rem !important;
  padding: 0 !important;
  border: none !important;
}
#hl7-landing .hl-pill-btn {
  background: transparent !important;
  border: 1.5px solid var(--hl-border) !important;
  border-radius: 8px !important;
  color: var(--hl-text-2) !important;
  font-family: var(--hl-font) !important;
  font-size: .83rem !important;
  font-weight: 500 !important;
  padding: .42rem 1.1rem !important;
  cursor: pointer !important;
  transition: all .2s;
  line-height: 1.5 !important;
  text-transform: none !important;
}
#hl7-landing .hl-pill-btn:hover {
  color: var(--hl-forest) !important;
  border-color: var(--hl-border-h) !important;
}
#hl7-landing .hl-pill-btn.active {
  background: rgba(13,148,136,.09) !important;
  border-color: rgba(13,148,136,.30) !important;
  color: var(--hl-teal) !important;
  font-weight: 600 !important;
}

/* ============================================================
   STANDARDS MARQUEE
   ============================================================ */
#hl7-landing .hl-standards-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: #f0f7f6 !important;
}
@keyframes hl-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#hl7-landing .hl-marquee-wrap {
  overflow: hidden !important;
  margin-top: 2.25rem !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
#hl7-landing .hl-marquee-track {
  display: flex !important;
  gap: .85rem !important;
  width: max-content !important;
  animation: hl-marquee 100s linear infinite !important;
  align-items: center !important;
}
#hl7-landing .hl-marquee-track:hover { animation-play-state: paused !important; }

#hl7-landing .hl-std-item {
  flex-shrink: 0 !important;
  padding: .8rem 1.6rem !important;
  min-width: 130px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-r-sm) !important;
  box-shadow: 0 2px 8px rgba(6,78,59,.05) !important;
  transition: border-color .2s;
}
#hl7-landing .hl-std-item:hover { border-color: rgba(13,148,136,.28) !important; }
#hl7-landing .hl-std-item span {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: var(--hl-text-2) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
#hl7-landing .hl-std-item:hover span { color: var(--hl-teal) !important; }

/* ============================================================
   INTEGRATIONS
   ============================================================ */
#hl7-landing .hl-int-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: #fff !important;
}
#hl7-landing .hl-int-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .85rem !important;
  margin-top: 2.25rem !important;
}
#hl7-landing .hl-int-item {
  padding: .75rem 1.6rem !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f0f7f6 !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-r-sm) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#hl7-landing .hl-int-item:hover {
  border-color: rgba(13,148,136,.28) !important;
  box-shadow: 0 4px 16px rgba(6,78,59,.08) !important;
  transform: translateY(-2px) !important;
}
#hl7-landing .hl-int-item span {
  font-size: .83rem !important;
  font-weight: 600 !important;
  color: var(--hl-text-2) !important;
  transition: color .2s;
}
#hl7-landing .hl-int-item:hover span { color: var(--hl-teal) !important; }

/* ============================================================
   QUICK LINKS
   ============================================================ */
#hl7-landing .hl-ql-sec {
  padding-top: var(--hl-gap) !important;
  padding-bottom: var(--hl-gap) !important;
  border-top: 1px solid var(--hl-border) !important;
  background: #e8f4f2 !important;
}
#hl7-landing .hl-ql-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}
#hl7-landing .hl-ql-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .7rem !important;
  padding: 1.4rem 1.25rem !important;
  text-decoration: none !important;
  color: var(--hl-text) !important;
  background: #fff !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-r) !important;
  box-shadow: 0 2px 10px rgba(6,78,59,.05) !important;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
#hl7-landing .hl-ql-item:hover {
  border-color: rgba(13,148,136,.28) !important;
  box-shadow: 0 8px 28px rgba(6,78,59,.1) !important;
  transform: translateY(-3px) !important;
}
#hl7-landing .hl-ql-icon {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important;
  background: rgba(13,148,136,.12) !important;
  flex-shrink: 0 !important;
}
#hl7-landing .hl-ql-label {
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: var(--hl-forest) !important;
  line-height: 1.4 !important;
}
#hl7-landing .hl-ql-arrow {
  font-size: .82rem !important;
  color: var(--hl-teal) !important;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  display: block !important;
}
#hl7-landing .hl-ql-item:hover .hl-ql-arrow {
  opacity: 1 !important;
  transform: translateX(3px) !important;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
#hl7-landing .hl-final-cta {
  padding-top: var(--hl-gap) !important;
  padding-bottom: calc(var(--hl-gap) * 1.3) !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(160deg, #02232c 0%, #064b4e 35%, #0d8e94 75%, #5199bd 100%) !important
}
#hl7-landing .hl-final-cta::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  pointer-events: none !important;
}
#hl7-landing .hl-cta-card {
  position: relative !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(2.5rem, 6vw, 4.5rem) !important;
  text-align: center !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.12) !important;
}
#hl7-landing .hl-cta-card h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  font-family: var(--hl-font) !important;
  line-height: 1.2 !important;
}
#hl7-landing .hl-cta-card p {
  color: rgba(255,255,255,.78) !important;
  margin-bottom: 2rem !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}
#hl7-landing .hl-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  #hl7-landing .hl-hero__content { animation: hl-fade-up .65s ease both; }
  #hl7-landing .hl-hero__visual  { animation: hl-fade-up .65s ease .15s both; }
}
@keyframes hl-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  #hl7-landing .hl-stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #hl7-landing .hl-ql-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 960px) {
  #hl7-landing .hl-hero .hl-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #hl7-landing .hl-hero__visual  { order: -1 !important; }
  #hl7-landing .hl-panel__inner  { grid-template-columns: 1fr !important; }
  #hl7-landing .hl-testi-grid    { grid-template-columns: 1fr 1fr !important; }
  #hl7-landing .hl-legacy-bar .hl-wrap {
    flex-wrap: wrap !important;
    gap: .75rem !important;
  }
}

@media (max-width: 768px) {
  #hl7-landing {
    --hl-gap: 4rem;
  }
  #hl7-landing .hl-stats__grid   { grid-template-columns: 1fr 1fr !important; }
  #hl7-landing .hl-ql-grid       { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  #hl7-landing {
    --hl-gap: 3.5rem;
  }
  #hl7-landing .hl-testi-grid    { grid-template-columns: 1fr !important; }
  #hl7-landing .hl-stats__grid   { grid-template-columns: 1fr 1fr !important; }
  #hl7-landing .hl-ql-grid       { grid-template-columns: 1fr 1fr !important; }
  #hl7-landing .hl-hero .hl-wrap { gap: 1.5rem !important; }
  #hl7-landing .hl-legacy-bar .hl-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #hl7-landing .hl-legacy-divider { display: none !important; }
}