:root{
  --primary:#4A90A4; /* matches app primary */
  --primary-dark:#2E6B7F;
  --secondary:#D4A574;
  --bg:#F8F9FA;
  --surface:#FFFFFF;
  --text:#2C3E50;
  --text-muted:#5D6D7E;
  --border:#E8E8E8;
  --shadow:0 10px 30px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{width:min(1100px,94%);margin-inline:auto}
.section{padding:64px 0}
.section-title{font-size:28px;margin:0 0 24px;color:var(--text)}

.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.75);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:40px;height:40px;object-fit:contain}
.brand-name{font-weight:700;color:var(--primary)}
.nav a{color:var(--text);text-decoration:none;margin-left:18px;font-weight:600;opacity:.85}
.nav a:hover{opacity:1;color:var(--primary)}

.hero{background:linear-gradient(160deg, var(--bg) 0%, #E9ECEF 100%);padding:56px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-title{font-size:34px;line-height:1.2;margin:0 0 10px}
.accent{color:var(--primary)}
.hero-typing{min-height:28px;color:var(--text-muted);font-size:18px;margin:0 0 20px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.note{color:var(--text-muted);font-size:13px}
.hero-logo{width:100%;max-width:260px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.06))}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid transparent;font-weight:700;text-decoration:none;transition:transform .15s ease, box-shadow .2s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:#f1f7f9}

.grid{display:grid;gap:16px}
.features-grid{grid-template-columns:repeat(3,1fr)}
.modules-grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);padding:18px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--text-muted)}
.module-card{background:var(--surface);padding:18px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden}
.module-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.module-card.survival:before{background:#C41A1A}
.module-card.medical:before{background:#4281A4}
.module-card.engineering:before{background:#997b66}

.site-footer{padding:28px 0;border-top:1px solid var(--border);background:#fff;color:var(--text-muted);text-align:center}

/* Mobile friendly */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-logo{margin-inline:auto}
}
@media (max-width: 720px){
  .features-grid,.modules-grid{grid-template-columns:1fr}
  .hero-title{font-size:28px}
}