:root { --bg:#0f1512; --panel:#17201b; --line:#26342b; --text:#eef3ef; --muted:#a9b8ae; --green:#22a861; --green-dark:#0a7d3b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--green); }
.wrap { max-width:960px; margin:0 auto; padding:0 20px; }

/* header and menu (no scripts: the checkbox opens the menu on phones) */
header { border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
.bar { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-weight:800; font-size:24px; letter-spacing:.3px; color:var(--text); text-decoration:none; }
.logo span { color:var(--green); }
#menu-toggle { position:absolute; opacity:0; pointer-events:none; }
.burger { display:none; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger i { display:block; width:24px; height:2px; background:var(--text); }
nav { display:flex; align-items:center; gap:22px; }
nav a { color:var(--muted); text-decoration:none; font-size:16px; }
nav a:hover, nav a.here { color:var(--text); }
nav a.btn { background:var(--green-dark); color:#fff; padding:8px 16px; border-radius:8px; }
@media (max-width:720px) {
  .burger { display:flex; }
  nav { display:none; position:absolute; left:0; right:0; top:64px; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 18px; }
  nav a { padding:12px 0; width:100%; font-size:18px; }
  nav a.btn { width:auto; margin-top:8px; }
  #menu-toggle:checked ~ nav { display:flex; }
}

.hero { padding:44px 0 56px; display:grid; gap:28px; align-items:center; grid-template-columns:1.1fr .9fr; }
@media (max-width:720px) { .hero { grid-template-columns:1fr; } .hero img { order:-1; max-width:320px; margin:0 auto; } }
.hero img { width:100%; height:auto; max-width:440px; justify-self:center; border-radius:18px; border:1px solid var(--line); box-shadow:0 12px 40px rgba(0,0,0,.45); }
h1 { font-size:clamp(32px,6vw,52px); line-height:1.1; margin:0 0 18px; }
h1 em { color:var(--green); font-style:normal; }
.lead { color:var(--muted); font-size:19px; max-width:620px; margin:0 0 28px; }
.page-title { padding:44px 0 8px; }
.play { display:inline-flex; align-items:center; gap:12px; background:#000; color:#fff; border:1px solid #6b6b6b; border-radius:10px; padding:9px 18px 9px 14px; font:inherit; cursor:default; text-align:left; }
.play svg { width:30px; height:30px; flex:none; }
.play small { display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; line-height:1.1; }
.play b { display:block; font-size:21px; line-height:1.15; font-weight:600; }
section { padding:48px 0; border-top:1px solid var(--line); }
section.first { border-top:0; }
h2 { font-size:clamp(25px,4vw,34px); margin:0 0 12px; line-height:1.2; }
.sub { color:var(--muted); max-width:660px; margin:0 0 26px; }
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; }
.card h3 { margin:0 0 8px; font-size:19px; }
.card p { margin:0; color:var(--muted); font-size:16px; }
.num { display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--green-dark); color:#fff; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; }
.drive { background:var(--green-dark); border-radius:18px; padding:34px 24px; }
.drive h2, .drive .sub { color:#fff; }
.drive .sub { opacity:.92; }
details { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:12px; }
summary { cursor:pointer; font-weight:600; font-size:18px; }
details p { color:var(--muted); margin:10px 0 0; }
ul.tick { list-style:none; padding:0; margin:0 0 8px; }
ul.tick li { padding:8px 0 8px 30px; position:relative; color:var(--muted); }
ul.tick li::before { content:""; position:absolute; left:2px; top:15px; width:12px; height:7px; border-left:3px solid var(--green); border-bottom:3px solid var(--green); transform:rotate(-45deg); }
.path { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; display:inline-block; color:var(--text); font-weight:600; }
footer { border-top:1px solid var(--line); padding:30px 0 46px; color:var(--muted); font-size:15px; }
footer a { margin-right:18px; }

/* contact form */
form.contact { display:grid; gap:16px; max-width:560px; }
form.contact label { display:block; margin-bottom:6px; color:var(--muted); font-size:15px; }
form.contact input, form.contact textarea { width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:inherit; }
form.contact textarea { min-height:160px; resize:vertical; }
form.contact input:focus, form.contact textarea:focus { outline:2px solid var(--green); border-color:var(--green); }
form.contact button { background:var(--green-dark); color:#fff; border:0; border-radius:10px; padding:13px 22px; font:inherit; font-weight:600; cursor:pointer; justify-self:start; }
form.contact .trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#problem { display:none; background:#3a1d1d; border:1px solid #7a3030; border-radius:10px; padding:12px 16px; margin:0 0 20px; max-width:560px; }
#problem:target { display:block; }

/* English / Hausa switch, always visible in the top bar */
.lang { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-left:16px; order:2; }
.lang button { background:transparent; color:var(--muted); border:0; padding:7px 14px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.lang button[aria-pressed="true"] { background:var(--green-dark); color:#fff; }
.burger { order:3; }
@media (max-width:720px) { .lang { margin-left:auto; margin-right:8px; } }