/*
Theme Name: MedFlow HMS Landing
Theme URI: https://cloudhospitalmanagement.com/
Author: Farsh.pk
Description: Custom landing page theme for MedFlow HMS (Hospital Management System) — converted from static HTML.
Version: 1.0
Requires PHP: 7.4
Text Domain: medflow-hms
*/

  :root{
    --brand-50:#ECFBF5; --brand-100:#D2F5E5; --brand-200:#A6EBCD; --brand-300:#6BD9AE;
    --brand-400:#34C08C; --brand-500:#17A673; --brand-600:#0F6D4C; --brand-700:#0C5A40;
    --brand-800:#0A4733; --brand-900:#073829;
    --ink-50:#F7F9FA; --ink-100:#EEF2F3; --ink-200:#DEE5E7; --ink-300:#C2CDD1;
    --ink-400:#8FA0A6; --ink-500:#64767C; --ink-600:#48585D; --ink-700:#33403F;
    --ink-800:#212B2A; --ink-900:#131A19;
    --coral-500:#E5484D; --coral-600:#C93A3F;
    --info-500:#3B6FE0;
    --amber-500:#D98C2B; --amber-600:#B8721E;
    --paper-50:#FCE7E7; --paper-100:#FBDADA; --paper-200:#F8C6C6;
    --navy-900:#080C16; --navy-800:#0B1220; --navy-700:#111B2E; --navy-600:#182946;
    --vital-hr:#3DF2A0; --vital-spo2:#3FD0F0; --vital-bp:#FF6B85; --vital-resp:#FFD166;
    --violet-500:#8B7FE8; --violet-600:#6E61D6;
    --er-red:#A6242E; --er-red-deep:#7E1620;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; font-size:15px; }
  body{
    margin:0;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:#ffffff;
    color:var(--ink-800);
    /* Stops the browser from drawing a fake-bold/fake-italic version of the
       fallback system font while the real webfont is still loading — that
       synthesized weight is part of what made the pre-swap text look
       noticeably different in size/weight from the final rendered text. */
    font-synthesis: none;
    text-rendering: optimizeSpeed;
}
  img,svg{ display:block; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  h1,h2,h3,p{ margin:0; }

  .font-display{ font-family:'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
  .font-clinical{ font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
  .font-data{ font-family:'IBM Plex Mono', 'Courier New', monospace; }

  .container{ max-width:1280px; margin:0 auto; padding:0 20px; }
  @media (min-width:1024px){ .container{ padding:0 32px; } }

  .section-py{ padding-top:5rem; padding-bottom:5rem; }
  @media (min-width:1024px){ .section-py{ padding-top:6.5rem; padding-bottom:6.5rem; } }

  .icon{ display:inline-block; vertical-align:middle; }

  /* Scanline / pulse / ekg animations (kept as plain CSS, no framer-motion) */
  @keyframes pulseRing{
    0%{ transform:scale(1); opacity:.8; }
    70%{ transform:scale(2.2); opacity:0; }
    100%{ transform:scale(1); opacity:0; }
  }
  .pulse-dot{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:8px; height:8px; }
  .pulse-dot::before{
    content:''; position:absolute; inset:-4px; border-radius:50%;
    background:currentColor; animation:pulseRing 2s ease-out infinite;
  }
  .pulse-dot .dot{ position:relative; width:8px; height:8px; border-radius:50%; }

  @keyframes ekgScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .ekg-wrap{ overflow:hidden; width:100%; }
  .ekg-track{ display:flex; width:200%; height:100%; animation:ekgScroll 3s linear infinite; }
  .ekg-track svg{ width:50%; height:100%; flex-shrink:0; }

  @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
  .fade-up{ animation:fadeUp .7s ease forwards; }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }
/* ===================== HOSPITAL RED THEME ===================== */
/* Section-level red — deeper, richer clinical red instead of flat #FF0000 */
/* NOTE: the global force-red rule that used to sit here (body, main, section,
   .section-py, #live-demo, #trust-band, #pricing, #faq, #about, #contact)
   has been removed — every one of those targets already gets its real
   color (green or white) from the more specific rules below, so the old
   rule was dead weight that only showed up as a red flash on body/main
   during scroll and overscroll bounce. */

/* Cards/panels are LEFT ALONE here on purpose — module-card, demo-panel, demo-card,
   plan-card, bed-card, doctor-card, alert-item, pharmacy-row, admission-row, dept-bars,
   dq-action, dq-stat, ring-inner, contact-card were all originally white/light/translucent
   panels floating on a dark section background. Forcing them all flat red killed the
   contrast and depth — reverting them to their own CSS lets that "dashboard on red"
   look come back, same as it worked on the original navy design. */

/* Headings/body text that sit directly on the red section (no card behind them)
   still need to be light for contrast */
.hero p.lead, .section-desc, .footer-brand p, .contact-row p.label, .body {
    color: #ffffff !important;
    opacity: 0.95;
}
.hero h1, #features .section-title, #pricing .section-title, #about .section-title {
    color: #ffffff !important;
}
#top .hero-trust div, #top .btn-ghost {
    color: rgba(255,255,255,.85) !important;
}

/* Trust band (Encrypted by default / Role-based access / Daily backups / Built for uptime) — white,
   for the green/white alternating flow */
#trust-band, #trust-band .container {
    background: #ffffff !important;
    border-color: transparent !important;
}

/* "Getting started" (how-it-works) — white, for the green/white alternating flow */
#how-it-works, #how-it-works .container {
    background: #ffffff !important;
    border-color: transparent !important;
}
#how-it-works .step {
    background: var(--brand-700);
    border: 1px solid var(--brand-700);
    border-radius: 1rem;
    padding: 24px;
}
#how-it-works .step .step-title {
    color: #ffffff !important;
}
#how-it-works .step .step-desc {
    color: rgba(255,255,255,.75) !important;
    opacity: 1;
}
#how-it-works .step .step-code {
    color: rgba(255,255,255,.5) !important;
    opacity: 1;
}

/* Footer black */
footer {
    background: #000000 !important;
}
footer .container {
    background: transparent !important;
    border-color: transparent !important;
}

/* CTA section wapas apne original green pe (design mein pehle se hi brand green tha) */
#contact {
    background: #ffffff !important;
}
#contact .container {
    background: transparent !important;
}
#contact h2 {
    color: var(--ink-900) !important;
}
#contact p.lead {
    color: var(--ink-600) !important;
}
#contact .contact-card {
    background: var(--brand-50) !important;
    border: 1px solid var(--brand-200) !important;
    backdrop-filter: none !important;
}
#contact .contact-icon {
    background: var(--brand-50) !important;
    color: var(--brand-600) !important;
}
#contact .contact-row p.label {
    color: var(--ink-500) !important;
}
#contact .contact-row p.value {
    color: var(--ink-900) !important;
}
#contact .btn-demo {
    background: var(--brand-700) !important;
    color: #ffffff !important;
}

/* Hero, "The chart", "Live readout", Pricing, About — green (green/white alternating flow) */
#top, #features, #live-demo, #pricing, #about {
    background: var(--brand-700) !important;
}

/* "The chart" section ke 8 module boxes white (baki section red hi rahega) */
#features .module-card {
    background: #ffffff !important;
    border-color: var(--ink-100) !important;
}
#features .module-desc {
    color: var(--ink-500) !important;
    opacity: 1;
}

/* FAQ section white, uska container bhi fix */
#faq, #faq .container {
    background: #ffffff !important;
    border-color: transparent !important;
}
#faq .faq-sub a {
    color: var(--brand-600) !important;
}

header, header.scrolled {
    background: #ffffff !important;
}

/* nav ke andar wala .container bhi red list mein tha, usko white karo */
header .container {
    background: #ffffff !important;
    border-color: transparent !important;
}

/* Sirf "The Flatline" section white, uska container aur desc text bhi fix */
#flatline-section, #flatline-section .container {
    background: #ffffff !important;
    border-color: transparent !important;
}
#flatline-section .section-desc {
    color: var(--ink-600) !important;
    opacity: 1;
}
  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:4rem; display:flex; align-items:center;
    background:transparent; transition:all .3s;
  }
  header.scrolled{
    background:var(--paper-50); backdrop-filter:blur(6px);
  }
  header nav{ width:100%; display:flex; align-items:center; justify-content:space-between; }
  .logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .logo-badge{
    display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
    background:linear-gradient(to bottom right, var(--navy-800), var(--navy-600)); color:var(--vital-hr);
  }
  .logo-text{ font-weight:700; font-size:1rem; letter-spacing:-.01em; color:var(--ink-900); }
  .logo-text .dot{ color:var(--vital-hr); }

  .nav-links{ display:none; align-items:center; gap:2rem; }
  .nav-links a{ font-size:.9rem; font-weight:500; color:var(--ink-600); transition:color .2s; }
  .nav-links a:hover{ color:var(--ink-900); }

  .nav-actions{ display:none; align-items:center; gap:12px; }
  .nav-actions .signin{ font-size:.9rem; font-weight:500; color:var(--ink-700); }
  .btn-pill{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--navy-900); color:#fff; font-weight:600; font-size:.9rem;
    padding:8px 14px 8px 16px; border-radius:999px; transition:background .2s,color .2s;
  }
  .btn-pill:hover{ background:var(--vital-hr); color:var(--navy-900); }

  .menu-btn{ display:grid; place-items:center; width:36px; height:36px; border-radius:999px; color:var(--ink-800); }
  .mobile-panel{
    display:none; background:var(--paper-50); border-top:1px solid var(--ink-100);
    padding:16px 20px; flex-direction:column; gap:14px;
  }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{ color:var(--ink-700); font-weight:500; font-size:.9rem; }
  .mobile-panel .btn-pill{ justify-content:center; margin-top:4px; }

  @media (min-width:1024px){
    .nav-links{ display:flex; }
    .nav-actions{ display:flex; }
    .menu-btn{ display:none; }
  }

  /* ---------- Hero ---------- */
  #top{
    position:relative; overflow:hidden;
    padding-top:7rem; padding-bottom:4rem;
    background:var(--brand-700);
}
  @media (min-width:1024px){ #top{ padding-top:9rem; padding-bottom:5rem; } }
  .hero-grid{ display:grid; gap:3rem; align-items:center; }
  @media (min-width:1024px){ .hero-grid{ grid-template-columns:1fr 1fr; } }

  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; background:#fff;
    border:1px solid rgba(222,229,231,.7); border-radius:999px; padding:4px 12px 4px 10px;
    margin-bottom:1.5rem;
  }
  .hero-badge span{ font-size:.75rem; font-weight:500; color:var(--ink-600); font-family:'IBM Plex Mono',monospace; }
  .hero-badge .icon{ color:var(--vital-hr); }

  .hero h1{
    font-weight:700; font-size:2.2rem; line-height:1.1; color:var(--ink-900); letter-spacing:-.02em;
  }
  @media (min-width:640px){ .hero h1{ font-size:3rem; line-height:1.07; } }
  .hero h1 .accent{ color:var(--vital-hr); text-shadow:0 0 22px rgba(61,242,160,.22); }

  .hero p.lead{ margin-top:1.25rem; font-size:1rem; color:var(--ink-600); line-height:1.6; max-width:32rem; }

  .hero-ctas{ margin-top:1.75rem; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:8px; background:var(--navy-900); color:#fff;
    font-weight:600; font-size:.9rem; padding:12px 16px 12px 20px; border-radius:999px; transition:background .2s,color .2s;
  }
  .btn-primary:hover{ background:var(--vital-hr); color:var(--navy-900); }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px; color:var(--ink-800); font-weight:600; font-size:.9rem;
    padding:12px 16px 12px 8px; border-radius:999px; transition:background .2s;
  }
  .btn-ghost:hover{ background:#fff; }
  .btn-ghost:hover, .btn-ghost:hover .icon, #top .btn-ghost:hover{ color:var(--navy-900) !important; }
  .btn-ghost .icon{ color:var(--vital-hr); }

  .hero-trust{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:1.75rem 1rem; }
  .hero-trust div{ display:flex; align-items:center; gap:8px; color:var(--ink-500); }
  .hero-trust .icon{ color:var(--vital-hr); }
  .hero-trust span{ font-size:.75rem; font-weight:500; }

  /* Pulse card */
  .pulse-card-wrap{ position:relative; width:100%; max-width:28rem; margin:0 auto; padding-bottom:2rem; }
  @media (min-width:1024px){ .pulse-card-wrap{ margin-left:auto; margin-right:0; } }
  .pulse-glow{
    position:absolute; inset:-40px; border-radius:3rem; pointer-events:none; filter:blur(60px);
    background:radial-gradient(circle at 30% 20%, rgba(166,235,205,.45), rgba(210,245,229,.15) 50%, transparent 80%);
    opacity:0;
  }
  .pulse-card{
    position:relative; background:#fff; border-radius:2rem; border:1px solid var(--ink-100);
    padding:28px 32px 32px;
  }
  .pc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
  .pc-head-left{ display:flex; align-items:center; gap:10px; }
  .pc-badge{ display:grid; place-items:center; width:32px; height:32px; border-radius:12px; background:var(--navy-900); color:var(--vital-hr); }
  .pc-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem; color:var(--ink-900); line-height:1.2; }
  .pc-sub{ font-size:.65rem; color:var(--ink-400); font-family:'IBM Plex Mono',monospace; }
  .pc-live{
    display:flex; align-items:center; gap:6px; font-size:.65rem; font-family:'IBM Plex Mono',monospace; font-weight:600;
    color:var(--brand-700); background:var(--brand-50); border:1px solid rgba(166,235,205,.7); padding:4px 10px; border-radius:999px;
  }
  .pc-live .pulse-dot{ color:var(--brand-500); }
  .pc-live .dot{ background:var(--brand-500); }

  .pc-ekg{ margin:0 -8px 8px; opacity:.9; height:48px; }

  .pc-metric{ margin-bottom:1.75rem; }
  .pc-metric .num{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:3rem; line-height:1; color:var(--ink-900); letter-spacing:-.02em; }
  .pc-metric .cap{ font-size:.9rem; color:var(--ink-500); margin-top:8px; }

  .pc-divider{ height:1px; background:var(--ink-100); margin-bottom:1.25rem; }

  .pc-stats{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem; }
  .pc-stat{ display:flex; flex-direction:column; align-items:flex-start; }
  .pc-stat-label{ display:flex; align-items:center; gap:6px; color:var(--ink-400); margin-bottom:4px; }
  .pc-stat-label span{ font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; }
  .pc-stat-val{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1rem; color:var(--ink-900); }
  .pc-sep{ width:1px; height:32px; background:var(--ink-100); }

  .pc-week-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .pc-week-head span:first-child{ font-size:.65rem; font-weight:600; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
  .pc-week-trend{ display:flex; align-items:center; gap:4px; font-size:.65rem; font-family:'IBM Plex Mono',monospace; color:var(--brand-600); }
  .pc-bars{ display:flex; align-items:flex-end; gap:8px; height:56px; }
  .pc-bars div{ flex:1; border-radius:2px 2px 0 0; background:rgba(23,166,115,.28); }
  .pc-bars div.active{ background:var(--brand-500); }

  .pc-float{
    display:none; position:absolute; right:24px; bottom:-4px; align-items:center; gap:8px;
    border:1px solid var(--ink-100); background:#fff;
    padding:10px 14px; border-radius:12px;
  }
  @media (min-width:640px){ .pc-float{ display:flex; } }
  .pc-float-badge{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); }
  .pc-float p:first-child{ font-size:.6rem; color:var(--ink-400); font-family:'IBM Plex Mono',monospace; }
  .pc-float p:last-child{ font-size:.75rem; font-weight:600; color:var(--brand-700); }

  /* ---------- Generic section heading ---------- */
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:14px; display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px 6px 12px; border-radius:999px;
  }
  .section-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; line-height:1.25; color:var(--ink-900); letter-spacing:-.01em; }
  @media (min-width:640px){ .section-title{ font-size:2.1rem; } }
  .section-desc{ margin-top:1rem; font-size:1rem; color:var(--ink-600); line-height:1.6; }
  .section-head{ max-width:36rem; margin-bottom:3rem; }

  /* ---------- Problem / Solution ---------- */
  .ps-grid{ display:grid; gap:20px; }
  @media (min-width:768px){ .ps-grid{ grid-template-columns:1fr 1fr; } }
  .ps-card{ border-radius:1rem; padding:28px; }
  .ps-card.bad{ border:1px solid var(--navy-700); background:var(--navy-900); }
  .ps-card.good{ border:1px solid rgba(61,242,160,.3); background:#ffffff; }
  .ps-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
  .ps-card-head p{ font-family:'IBM Plex Mono',monospace; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .ps-card.bad .ps-card-head p{ color:rgba(255,255,255,.45); }
  .ps-card.good .ps-card-head p{ color:var(--vital-hr); }
  .ps-tag{ font-size:.6rem; font-family:'IBM Plex Mono',monospace; padding:2px 8px; border-radius:999px; }
  .ps-card.bad .ps-tag{ color:var(--coral-500); border:1px solid rgba(229,72,77,.3); background:rgba(229,72,77,.1); }
  .ps-card.good .ps-tag{ color:var(--vital-hr); border:1px solid rgba(61,242,160,.3); background:rgba(61,242,160,.1); }
  .ps-list{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
  .ps-list li{ display:flex; align-items:flex-start; gap:12px; }
  .ps-mark{ margin-top:2px; display:grid; place-items:center; width:20px; height:20px; border-radius:999px; flex-shrink:0; }
  .ps-card.bad .ps-mark{ background:rgba(229,72,77,.1); color:var(--coral-500); }
  .ps-card.good .ps-mark{ background:rgba(61,242,160,.15); color:var(--brand-700); }
  .ps-card.bad li span:last-child{ font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.5; }
  .ps-card.good li span:last-child{ font-size:.9rem; color:var(--ink-700); line-height:1.5; }
  .flatline-svg{ width:100%; height:28px; }

  /* ---------- Features ---------- */
  .modules-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:640px){ .modules-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1024px){ .modules-grid{ grid-template-columns:repeat(4,1fr); } }
  .module-card{
    background:#fff; border-radius:12px; border:1px solid var(--ink-100); overflow:hidden;
    transition:transform .3s;
  }
  .module-card:hover{ transform:translateY(-4px); }
  .module-accent-bar{ height:3px; background:var(--brand-500); opacity:.7; }
  .module-body{ padding:20px; }
  .module-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .module-icon{
    display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
    background:rgba(23,166,115,.1); border:1px solid rgba(23,166,115,.18); color:var(--brand-500);
  }
  .module-code{ font-size:.6rem; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink-300); letter-spacing:.05em; }
  .module-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.95rem; color:var(--ink-900); margin-bottom:6px; }
  .module-desc{ font-size:.75rem; color:var(--ink-500); line-height:1.5; }

  /* ---------- How it works ---------- */
  .steps-grid{ display:grid; gap:28px; position:relative; }
  @media (min-width:768px){
    .steps-grid{ grid-template-columns:repeat(3,1fr); }
    .steps-line{ display:block; position:absolute; top:24px; left:17%; right:17%; height:1px; background:var(--ink-200); }
  }
  .steps-line{ display:none; }
  .step{ position:relative; }
  .step-icon{ position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.18); color:var(--vital-hr); margin-bottom:1.25rem; }
  .step-code{ font-size:.6rem; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink-300); letter-spacing:.08em; margin-bottom:4px; }
  .step-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; color:var(--ink-900); margin-bottom:8px; }
  .step-desc{ font-size:.9rem; color:var(--ink-500); line-height:1.5; }

  /* ---------- Live demo ---------- */
  #live-demo{ position:relative; overflow:hidden; background:var(--navy-900); }
  #live-demo::before{
    content:''; position:absolute; inset:0; opacity:.35;
    background:radial-gradient(600px 350px at 85% 0%, rgba(61,242,160,.18), transparent 60%);
  }
  .demo-head{ position:relative; display:flex; flex-direction:column; gap:20px; margin-bottom:2.5rem; }
  @media (min-width:1024px){ .demo-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
  .demo-head .eyebrow{ background:#ffffff; color:var(--brand-700); }
  .demo-head h2{ color:#fff; }
  .demo-head p.section-desc{ color:rgba(255,255,255,.45); }
  .btn-white{
    display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--navy-900); font-weight:600; font-size:.9rem;
    padding:12px 16px 12px 20px; border-radius:999px; transition:background .2s; width:fit-content; flex-shrink:0;
  }
  .btn-white:hover{ background:var(--vital-hr); }

  .demo-tabs{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.25rem; }
  .demo-tab{
    display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:500; padding:8px 14px; border-radius:999px;
    background:rgba(255,255,255,.05); color:rgba(255,255,255,.45); transition:background .2s,color .2s;
  }
  .demo-tab:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .demo-tab.active{ background:#fff; color:var(--navy-900); }

  .demo-panel{
    position:relative; border-radius:16px; border:1px solid rgba(255,255,255,.08); overflow:hidden;
    background:rgba(255,255,255,.025); backdrop-filter:blur(4px); padding:16px;
  }
  @media (min-width:640px){ .demo-panel{ padding:24px; } }
  .demo-view{ display:none; }
  .demo-view.active{ display:block; }

  .dq-label{ color:rgba(255,255,255,.7); font-size:.75rem; font-weight:600; margin-bottom:16px; }
  .dq-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
  @media (min-width:640px){ .dq-actions{ grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1024px){ .dq-actions{ grid-template-columns:repeat(5,1fr); } }
  .dq-action{ background:#fff; border-radius:12px; padding:16px; transition:transform .2s; cursor:pointer; }
  .dq-action:hover{ transform:translateY(-2px); }
  .dq-action-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:8px; margin-bottom:10px; }
  .dq-action p.title{ font-size:.75rem; font-weight:600; color:var(--ink-900); line-height:1.3; }
  .dq-action p.sub{ font-size:.65rem; color:var(--ink-400); margin-top:2px; }

  .dq-stats{ display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:640px){ .dq-stats{ grid-template-columns:repeat(3,1fr); } }
  .dq-stat{ display:flex; align-items:center; gap:12px; border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
  .dq-stat-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:8px; flex-shrink:0; }
  .dq-stat p.val{ color:#fff; font-size:.9rem; font-weight:600; font-family:'IBM Plex Mono',monospace; }
  .dq-stat p.lbl{ color:rgba(255,255,255,.35); font-size:.6rem; }

  .demo-cols{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:768px){ .demo-cols{ grid-template-columns:1fr 1fr; } }
  .demo-card{ background:#fff; border-radius:12px; padding:20px; }
  .demo-card-title{ font-size:.9rem; font-weight:600; color:var(--ink-800); margin-bottom:16px; }

  .ring-row{ display:flex; align-items:center; gap:20px; margin-bottom:20px; }
  .ring{ position:relative; display:grid; place-items:center; width:80px; height:80px; border-radius:50%; flex-shrink:0; }
  .ring-inner{ position:absolute; inset:8px; border-radius:50%; background:#fff; display:grid; place-items:center; }
  .ring-inner span{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1rem; color:var(--ink-900); }
  .ring-copy p{ font-size:.9rem; }
  .ring-copy p.muted{ color:var(--ink-500); }
  .ring-copy p.sub{ font-size:.75rem; color:var(--ink-400); }

  .beds-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .bed-card{ background:var(--ink-50); border-radius:8px; padding:12px; }
  .bed-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .bed-top span:first-child{ font-size:.6rem; font-weight:600; color:var(--ink-500); text-transform:uppercase; }
  .bed-top span:last-child{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.9rem; color:var(--ink-900); }
  .bed-track{ height:6px; border-radius:999px; background:var(--ink-200); }
  .bed-fill{ height:100%; border-radius:999px; }

  .dept-load-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .dept-bars{ display:flex; align-items:flex-end; gap:8px; height:128px; margin-bottom:8px; }
  .dept-bars div{ flex:1; border-radius:4px 4px 0 0; }
  .dept-days{ display:flex; justify-content:space-between; }
  .dept-days span{ font-size:.55rem; font-family:'IBM Plex Mono',monospace; color:var(--ink-400); flex:1; text-align:center; }

  .admissions-list{ display:flex; flex-direction:column; gap:10px; }
  .admission-row{ display:flex; align-items:center; justify-content:space-between; background:rgba(247,249,250,.7); border-radius:8px; padding:12px; }
  .admission-left{ display:flex; align-items:center; gap:12px; }
  .avatar{ display:grid; place-items:center; width:32px; height:32px; border-radius:8px; font-weight:600; font-size:.75rem; }
  .admission-name{ font-size:.9rem; font-weight:600; color:var(--ink-900); }
  .admission-meta{ font-size:.65rem; color:var(--ink-400); }
  .admission-status{ text-align:right; flex-shrink:0; }
  .status-pill{ font-size:.6rem; font-weight:600; padding:2px 8px; border-radius:999px; }
  .admission-time{ font-size:.58rem; color:var(--ink-400); margin-top:4px; display:flex; align-items:center; gap:4px; justify-content:flex-end; }

  .doctors-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .doctor-card{ background:rgba(247,249,250,.7); border-radius:8px; padding:12px; text-align:center; }
  .doctor-avatar{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; font-weight:600; font-size:.75rem; margin-bottom:8px; }
  .doctor-name{ font-size:.75rem; font-weight:600; color:var(--ink-900); line-height:1.3; }
  .doctor-dept{ font-size:.6rem; color:var(--ink-400); margin:4px 0; display:flex; align-items:center; justify-content:center; gap:4px; }
  .doctor-time{ font-size:.75rem; font-family:'IBM Plex Mono',monospace; }

  .alert-list{ display:flex; flex-direction:column; gap:10px; }
  .alert-item{ border-radius:8px; padding:14px; }
  .alert-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .alert-title{ font-size:.9rem; font-weight:600; color:var(--ink-900); }
  .alert-tag{ font-size:.58rem; font-weight:700; padding:2px 6px; border-radius:4px; }
  .alert-desc{ font-size:.75rem; color:var(--ink-500); }

  .pharmacy-list{ display:flex; flex-direction:column; gap:8px; }
  .pharmacy-row{ display:flex; align-items:center; justify-content:space-between; background:rgba(247,249,250,.7); border-radius:8px; padding:10px 12px; }
  .pharmacy-row p{ font-size:.9rem; font-weight:500; color:var(--ink-800); }

  /* ---------- Trust band ---------- */
  #trust-band{ padding-top:3.5rem; padding-bottom:3.5rem; background:var(--paper-50); border-top:1px solid var(--ink-100); border-bottom:1px solid var(--ink-100); }
  .trust-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
  @media (min-width:640px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1024px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }
  .trust-item{ display:flex; align-items:flex-start; gap:12px; }
  .trust-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; flex-shrink:0; }
  .trust-item p.title{ font-weight:600; color:var(--ink-900); font-size:.9rem; }
  .trust-item p.desc{ font-size:.75rem; color:var(--ink-500); margin-top:4px; line-height:1.5; }

  /* ---------- Pricing ---------- */
  .pricing-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
  @media (min-width:1024px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }
  .plan-card{ border-radius:1rem; padding:28px; display:flex; flex-direction:column; }
  .plan-card.regular{ background:#fff; border:1px solid var(--ink-100); }
  .plan-card.highlight{ background:var(--navy-900); color:#fff; }
  @media (min-width:1024px){ .plan-card.highlight{ transform:translateY(-8px); } }
  .plan-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .plan-badge{ background:var(--vital-hr); color:var(--navy-900); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; }
  .plan-code{ font-size:.62rem; font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:.05em; color:var(--ink-300); }
  .plan-card.highlight .plan-code{ color:rgba(255,255,255,.3); }
  .plan-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; margin-bottom:4px; color:var(--ink-900); }
  .plan-card.highlight .plan-name{ color:#fff; }
  .plan-desc{ font-size:.75rem; margin-bottom:20px; color:var(--ink-500); }
  .plan-card.highlight .plan-desc{ color:rgba(255,255,255,.45); }
  .plan-price{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.875rem; margin-bottom:20px; color:var(--ink-900); }
  .plan-card.highlight .plan-price{ color:#fff; }
  .plan-features{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; flex:1; }
  .plan-features li{ display:flex; align-items:flex-start; gap:8px; font-size:.9rem; }
  .plan-features .icon{ margin-top:2px; flex-shrink:0; color:var(--brand-600); }
  .plan-card.highlight .plan-features .icon{ color:var(--vital-hr); }
  .plan-features span{ color:var(--ink-600); }
  .plan-card.highlight .plan-features span{ color:rgba(255,255,255,.65); }
  .plan-cta{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:600; font-size:.9rem; padding:10px; border-radius:999px; background:var(--navy-900); color:#fff; transition:background .2s,color .2s; }
  .plan-cta:hover{ background:var(--vital-hr); color:var(--navy-900); }
  .plan-card.highlight .plan-cta{ background:#fff; color:var(--navy-900); }
  .plan-card.highlight .plan-cta:hover{ background:var(--vital-hr); color:var(--navy-900); }

  /* ---------- FAQ ---------- */
  #faq .container{ max-width:768px; }
  .faq-sub{ margin-top:.75rem; font-size:.95rem; color:var(--ink-500); }
  .faq-sub a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  .faq-list{
    display:flex; flex-direction:column; background:#fff; border:1px solid var(--ink-100);
    border-radius:1.25rem; padding:6px 24px;
  }
  @media (min-width:640px){ .faq-list{ padding:6px 28px; } }
  .faq-item{ border-bottom:1px solid var(--ink-100); }
  .faq-item:last-child{ border-bottom:none; }
  .faq-item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
    padding:20px 4px; border-radius:12px; transition:background-color .2s;
  }
  .faq-item summary:hover{ background:transparent; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-num{
    font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700; color:var(--brand-600);
    background:var(--brand-50); border-radius:8px; width:30px; height:30px; flex-shrink:0;
    display:grid; place-items:center;
  }
  .faq-q{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--ink-900); font-size:1rem; flex:1; }
  .faq-toggle{ display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--ink-50); color:var(--ink-700); flex-shrink:0; transition:transform .3s, background-color .3s, color .3s; }
  .faq-item.is-open .faq-toggle{ transform:rotate(45deg); background:var(--brand-500); color:#fff; }
  .faq-a-wrap{
    overflow:hidden; max-height:0; opacity:0; padding:0 4px 20px; margin-left:46px;
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  .faq-item.is-open .faq-a-wrap{ opacity:1; }
  .faq-a{ font-size:.9rem; color:var(--ink-600); line-height:1.6; background:var(--ink-50); border-radius:12px; padding:14px 18px; }
  .faq-footer{ text-align:center; margin-top:2.5rem; }
  .faq-footer p{ color:var(--ink-500); font-size:.9rem; margin-bottom:14px; }

  /* ---------- About ---------- */
  .about-grid{ display:grid; gap:56px; align-items:center; grid-template-columns:1fr; }
  @media (min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; } }
  .about-grid p.body{ margin-top:20px; font-size:1rem; color:var(--ink-600); line-height:1.6; }
  .stats-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:640px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1024px){ .stats-grid{ grid-template-columns:1fr; } }
  .stat-card{ border-radius:12px; border:1px solid var(--brand-200); background:var(--brand-50); padding:24px; display:flex; flex-direction:column; }
  @media (min-width:1024px){ .stat-card{ flex-direction:row; align-items:center; justify-content:space-between; } }
  .stat-val{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:2.25rem; }
  .stat-lbl{ color:var(--ink-500); font-weight:500; font-size:.9rem; margin-top:6px; }

  /* ---------- Final CTA ---------- */
  #contact{ position:relative; overflow:hidden; background:var(--brand-700); }
  #contact::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(800px 400px at 90% 100%, rgba(255,255,255,.07), transparent 60%);
  }
  .cta-grid{ position:relative; display:grid; gap:56px; align-items:center; grid-template-columns:1fr; }
  @media (min-width:1024px){ .cta-grid{ grid-template-columns:1fr 1fr; } }
  #contact h2{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.5rem; line-height:1.25; color:#fff; letter-spacing:-.01em; }
  @media (min-width:640px){ #contact h2{ font-size:2.1rem; } }
  #contact p.lead{ margin-top:1rem; font-size:1rem; color:var(--brand-100); line-height:1.6; max-width:28rem; }
  .btn-demo{
    margin-top:28px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--brand-700);
    font-weight:600; font-size:.9rem; padding:12px 16px 12px 20px; border-radius:999px; transition:background .2s,color .2s;
  }
  .btn-demo:hover{ background:var(--ink-900); color:#fff; }
  .contact-card{ background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15); border-radius:1rem; padding:28px; display:flex; flex-direction:column; gap:20px; }
  .contact-row{ display:flex; align-items:center; gap:14px; }
  .contact-icon{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.15); color:#fff; flex-shrink:0; }
  .contact-row p.label{ font-size:.65rem; font-weight:600; color:var(--brand-100); text-transform:uppercase; letter-spacing:.03em; }
  .contact-row p.value{ color:#fff; font-weight:500; font-size:.9rem; }

  /* ---------- Footer ---------- */
  footer{ background:var(--ink-900); padding-top:4rem; padding-bottom:2rem; }
  .footer-grid{ display:grid; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); grid-template-columns:1fr; }
  @media (min-width:1024px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
  .footer-brand p{ color:var(--ink-400); font-size:.75rem; line-height:1.6; max-width:20rem; margin-top:16px; }
  .footer-socials{ display:flex; align-items:center; gap:10px; margin-top:20px; }
  .footer-socials a{ display:grid; place-items:center; width:32px; height:32px; border-radius:999px; background:rgba(255,255,255,.05); color:var(--ink-300); transition:background .2s,color .2s; }
  .footer-socials a:hover{ background:var(--brand-600); color:#fff; }
  .footer-col p.title{ color:#fff; font-weight:600; font-size:.9rem; margin-bottom:16px; }
  .footer-col ul{ display:flex; flex-direction:column; gap:12px; }
  .footer-col a{ color:var(--ink-400); font-size:.75rem; transition:color .2s; }
  .footer-col a:hover{ color:#fff; }
  .footer-bottom{ padding-top:24px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:12px; }
  @media (min-width:640px){ .footer-bottom{ flex-direction:row; } }
  .footer-bottom p{ color:var(--ink-500); font-size:.75rem; }
  .footer-bottom-links{ display:flex; align-items:center; gap:20px; }
  .footer-bottom-links a{ color:var(--ink-500); font-size:.75rem; transition:color .2s; }
  .footer-bottom-links a:hover{ color:#fff; }

  /* ---------- Legal pages (Privacy Policy / Terms of Service) — shown/hidden as full "pages" via JS ---------- */
  .page-view{ background:#ffffff; min-height:100vh; }
  .page-view[hidden], #home-view[hidden]{ display:none !important; }
  .page-header{ position:sticky; top:0; z-index:50; height:4rem; display:flex; align-items:center; background:#ffffff; border-bottom:1px solid var(--ink-100); }
  .page-header .container{ width:100%; display:flex; align-items:center; justify-content:space-between; }
  .back-link{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:500; color:var(--ink-600); transition:color .2s; }
  .back-link:hover{ color:var(--brand-700); }
  .legal-hero{ padding:3.5rem 0 2rem; border-bottom:1px solid var(--ink-100); }
  .legal-h1{ font-family:'Sora',sans-serif; font-weight:700; font-size:2rem; color:var(--ink-900); letter-spacing:-.02em; }
  .legal-hero p.updated{ margin-top:.75rem; font-size:.85rem; color:var(--ink-500); }
  .legal-body{ padding:2.5rem 0 4rem; }
  .legal-block{ margin-bottom:2.25rem; max-width:900px; }
  .legal-block h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.1rem; color:var(--ink-900); margin-bottom:.75rem; }
  .legal-block p{ font-size:.92rem; line-height:1.75; color:var(--ink-600); margin-bottom:.75rem; }
  .legal-block ul{ display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0; }
  .legal-block li{ font-size:.92rem; line-height:1.7; color:var(--ink-600); padding-left:1.25rem; position:relative; list-style:none; }
  .legal-block li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--brand-500); }
  .legal-block a.inline-link{ color:var(--brand-700); font-weight:600; }
  #privacy-view footer, #terms-view footer{ background:var(--ink-900); padding-top:2.5rem; padding-bottom:2rem; }

  /* ---------- Dashboard demo (embedded as isolated iframe, untouched original code) ---------- */
  #dashboard-view{ display:flex; flex-direction:column; height:100vh; }
  #dashboard-view .page-header{ flex:none; }
  #dashboard-frame-wrap{ flex:1 1 auto; min-height:0; position:relative; }
  #dashboard-frame{ width:100%; height:100%; border:0; display:block; }
  #dashboard-loading{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; background:#ffffff; z-index:5; transition:opacity .25s ease;
  }
  #dashboard-loading[hidden]{ display:none; }
  #dashboard-loading .dl-spinner{
    width:34px; height:34px; border-radius:50%;
    border:3px solid #E9E3D3; border-top-color:#149063;
    animation:dlSpin .7s linear infinite;
  }
  #dashboard-loading .dl-text{ font-size:13px; font-weight:600; color:#5F5A4C; letter-spacing:.01em; }
  @keyframes dlSpin{ to{ transform:rotate(360deg); } }