/* style.css - realistic hospital frontend theme (no external images) */
:root{
  --bg-gradient: linear-gradient(180deg, #0f1724 0%, #071426 60%);
  --card-bg: rgba(255,255,255,0.04);
  --accent: #00c6ff;
  --accent-2: #0072ff;
  --muted: rgba(255,255,255,0.78);
  --glass: rgba(255,255,255,0.04);
  --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--muted);
  background: var(--bg-gradient);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100%;
  background-attachment: fixed;
}

/* Header */
.site-header{background:linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15)); position:sticky; top:0; z-index:40}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 20px; max-width:1200px; margin:0 auto}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-size:18px;margin:0;color:#fff}
.brand small{display:block;color:rgba(255,255,255,0.75); font-size:12px}
.nav{display:flex; gap:8px; align-items:center}
.nav a{color:rgba(255,255,255,0.9); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600}
.nav a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#061428}
.nav a:hover{background:rgba(255,255,255,0.04);}

/* Container */
.container{width:92%; max-width:1200px; margin:0 auto}

/* Hero */
.hero{padding:48px 0 28px}
.hero-grid{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:center}
.hero-left h2{font-size:28px; margin:0 0 12px; color:#fff}
.hero-left p{color:rgba(255,255,255,0.85); margin:0 0 16px}
.hero-actions{display:flex; gap:10px; margin-bottom:12px}
.btn{display:inline-block; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; text-decoration:none; color:#fff; background:var(--glass); font-weight:700}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.06)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#061428; box-shadow: 0 10px 20px rgba(3,115,171,0.08)}

/* features list */
.features-list{display:flex; gap:12px; margin-top:10px; list-style:none; padding:0}
.features-list li{background:rgba(255,255,255,0.03); padding:8px 12px; border-radius:8px; font-weight:600}

/* Dashboard card */
.dash-card{background:var(--card-bg); border-radius:14px; padding:14px; box-shadow: 0 10px 30px rgba(0,0,0,0.6)}
.dash-header h3{margin:0; color:#fff}
.dash-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-top:10px}
.metric{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; border-radius:10px}
.metric-value{font-size:20px; font-weight:800; color:#fff}
.metric-label{font-size:12px; opacity:0.9}

/* Mini chart */
.mini-chart{margin-top:12px; height:44px; background:linear-gradient(90deg, rgba(0,198,255,0.06), rgba(0,114,255,0.04)); border-radius:8px; overflow:hidden}
.chart-svg{width:100%; height:100%}

/* modules */
.section{padding:36px 0}
.section-title{font-size:20px; color:#fff; margin:0 0 8px}
.section-sub{color:rgba(255,255,255,0.7); margin:0 0 18px}

/* cards grid */
.cards-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.card{background:var(--glass); padding:18px; border-radius:12px; min-height:120px; display:flex; flex-direction:column; gap:8px}
.card-icon{font-size:28px}

/* demo forms */
.demo-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.demo-box{background:var(--card-bg); padding:16px; border-radius:12px}
.demo-box input, .demo-box select{width:100%; padding:10px; border-radius:8px; background:rgba(255,255,255,0.03); border:none; color:#fff; margin-bottom:10px}
.result{margin-top:8px; color:rgba(255,255,255,0.9)}

/* CTA section */
.cta-section{background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.1)); padding:20px; margin-top:24px; border-radius:12px}
.cta-grid{display:flex; justify-content:space-between; align-items:center}

/* footer */
.site-footer{padding:18px 0 40px; margin-top:30px; color:rgba(255,255,255,0.8)}
.footer-grid{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}

/* requirements page specifics */
.requirement-img{width:100%; border-radius:10px; margin:12px 0; display:block}
.table{width:100%; border-collapse:collapse; margin-top:12px}
.table th, .table td{border:1px solid rgba(255,255,255,0.07); padding:10px; text-align:left; vertical-align:top; font-size:14px}
.table th{background:rgba(0,0,0,0.4); font-weight:700}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .cards-grid{grid-template-columns: repeat(2,1fr)}
  .demo-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column; gap:12px}
}
@media (max-width:600px){
  .cards-grid{grid-template-columns:1fr}
  .nav{display:none} /* simple mobile fallback */
  .header-inner{justify-content:space-between}
}