/* ── EngHub v2.2 · OFSys surface polish ──────────────────────────────────
   Loaded after the page's own styles. Surface, type and depth only. */

:root{
  --navy:#0f3155;
  --navy2:#1b4677;
  --ink:#13202d;
  --muted:#6a7885;
  --line:#e0e7ee;
  --paper:#f2f5f8;
  --accent:#1b4677;
  --accent2:#0f3155;
  --accent-soft:#eaf0f8;
  --gold:#f2a40b;
  --shadow:0 20px 48px -28px rgba(15,49,85,.45);
}

body{background:
  radial-gradient(900px 460px at 92% -6%, #ffffff 0%, rgba(255,255,255,0) 60%),
  var(--paper);
}

/* rail ------------------------------------------------------------------ */
.side{
  background:#fff;border-right:1px solid var(--line);
  box-shadow:none;padding:22px 14px;
}
.side .brand{border-bottom:1px solid var(--line);padding-bottom:20px}
.nav button{
  color:#4a5c6d;font-weight:500;border-radius:10px;padding:10px 12px;
  transition:background-color .16s ease,color .16s ease;
}
.nav button:hover{background:#eef2f7;color:var(--navy)}
.nav button.active{background:var(--navy);color:#fff;font-weight:600}

/* top bar --------------------------------------------------------------- */
.top{height:68px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);padding:0 clamp(16px,2.4vw,32px)}
.top-brand{display:flex;align-items:center;gap:14px}
.crumb{font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.status{font-size:12.5px;color:var(--muted)}

/* hero ------------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;border-radius:22px;
  background:linear-gradient(152deg,#0f3155 0%,#173f6b 56%,#1b4677 100%);
  padding:clamp(30px,4vw,46px);box-shadow:var(--shadow);
}
.hero::after{
  content:"";position:absolute;right:-90px;top:-130px;width:430px;height:430px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,164,11,.2),transparent 62%);pointer-events:none;
}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:var(--gold);letter-spacing:.14em}
.hero h1{
  font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.035em;margin:10px 0 14px;
}
.hero p{color:#b9c9dc;max-width:64ch}

/* cards ----------------------------------------------------------------- */
.card{
  border-radius:16px;border-color:var(--line);
  box-shadow:0 10px 26px -22px rgba(15,49,85,.55);
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.grid>.card:hover{box-shadow:var(--shadow);border-color:#c9d6e3;transform:translateY(-2px)}
.stat{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.04em;color:var(--navy)}
.tag{letter-spacing:.12em;color:var(--muted)}
.bar{background:#e6ecf3;height:8px}
.bar i{background:linear-gradient(90deg,var(--navy),var(--gold))}
.section h2{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.025em}

.card.module{align-items:center}
.card.module .num{
  font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  color:var(--navy);background:#eaf0f8;border-radius:12px;
}
.card.module h3{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.02em}

/* controls -------------------------------------------------------------- */
.primary{background:var(--navy);color:#fff;border-radius:10px;font-weight:600;transition:background-color .18s,transform .12s}
.primary:hover{background:var(--navy2)}
.primary:active{transform:translateY(1px)}
.secondary{background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--navy);font-weight:600}
.secondary:hover{border-color:var(--navy)}

/* the sign-in gate, matched to EngHub ----------------------------------- */
.enghub-gate{background:rgba(10,36,64,.55);backdrop-filter:blur(8px)}
.enghub-gate-card{
  border-radius:20px;border:0;padding:30px;
  box-shadow:0 36px 90px -24px rgba(10,36,64,.55);text-align:center;
}
.enghub-gate-card .eyebrow{color:var(--gold)}
.enghub-gate-card h2{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.025em}
.enghub-gate-card .gate-actions{justify-content:center}
.enghub-gate-card a,.enghub-gate-card button{border-radius:10px}

@media (prefers-reduced-motion:reduce){.card,.primary{transition:none}.grid>.card:hover{transform:none}}
@media (max-width:900px){.side{position:static;height:auto}}