/*
Theme Name: Hospi360
Theme URI: https://www.hospi360.ng
Author: Taka Square Services Ltd
Description: Marketing site for Hospi360 — the command centre for hospital operations. Implements the approved Claude Design template (templates/hospi360-site) with live product screens built from the Hospi360 design system.
Version: 1.2.2
Requires PHP: 7.4
License: Proprietary
Text Domain: hospi360
*/

*{box-sizing:border-box}
body{margin:0;font-family:'Inter','Segoe UI',Arial,Helvetica,sans-serif;color:#1F2937;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#1565C0;text-decoration:none}
a:hover{color:#0F4C81}
.msym{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;display:inline-block;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';vertical-align:middle}
@keyframes h360pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* top nav */
.h360nav{border:none;background:transparent;color:#334155;font:600 14px 'Inter',sans-serif;padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-block}
.h360nav:hover{color:#0F4C81}
.h360nav.navon{background:#E3F0FC;color:#0F4C81}
.btn-primary{background:#1565C0;border:none;color:#fff !important;font:700 14px 'Inter',sans-serif;cursor:pointer;padding:10px 18px;border-radius:10px;box-shadow:0 8px 20px -8px rgba(21,101,192,.6);display:inline-block}
.btn-primary:hover{background:#0F4C81}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px}

/* responsive grids (columns live here so media queries can override;
   everything else stays inline per the approved design) */
.g-hero{display:grid;grid-template-columns:1.05fr 1.25fr;gap:56px;align-items:center}
.g-prob{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.g-loop{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:44px}
.g-proof{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.g-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.g-shots{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.g-integr{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.g-roles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.g-floor{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.g-deploy2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.g-deploy3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.g-contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.g-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}

.hero-h1{font-size:52px;line-height:1.04;letter-spacing:-1.4px;font-weight:800;margin:20px 0 0;color:#0D2B4E;text-wrap:balance}
.h1-lg{font-size:42px;line-height:1.1;letter-spacing:-1.1px;font-weight:800;margin:14px 0 0;color:#0D2B4E}

.modcard{background:#fff;border:1px solid #E5E9F0;border-radius:14px;padding:22px;transition:box-shadow .15s,border-color .15s}
.modcard:hover{box-shadow:0 16px 40px -24px rgba(13,43,78,.4);border-color:#C9D6E5}

@media(max-width:980px){
  .g-hero,.g-proof,.g-shots,.g-integr,.g-contact,.g-floor{grid-template-columns:1fr}
  .g-prob{grid-template-columns:repeat(2,1fr)}
  .g-loop{grid-template-columns:repeat(4,1fr)}
  .g-mods{grid-template-columns:repeat(2,1fr)}
  .g-roles{grid-template-columns:repeat(3,1fr)}
  .g-foot{grid-template-columns:1fr 1fr}
  .hero-h1{font-size:42px}
}
@media(max-width:600px){
  .g-prob,.g-mods,.g-deploy2,.g-deploy3{grid-template-columns:1fr}
  .g-loop{grid-template-columns:repeat(2,1fr)}
  .g-roles{grid-template-columns:repeat(2,1fr)}
  .g-foot{grid-template-columns:1fr}
  .hero-h1{font-size:36px;letter-spacing:-1px}
  .h1-lg{font-size:32px}
  .mainnav{display:none}
  .signin-link{display:none}
}