/* ════════════════════════════════════════════════════════════════
   Strahl Developers — portal hub.
   Brand-matched to strahl-landing (Spectrum: light, fintech blue).
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg:#F3F7FC; --surface:#FFFFFF;
  --ink:#0B1B33; --muted:rgba(11,27,51,0.60); --line:rgba(11,27,51,0.12);
  --primary:#2563EB; --accent:#38BDF8;
  --soft:#E7F0FE; --soft-ink:#1D4FBE;
  --shadow:0 18px 50px -22px rgba(20,60,140,0.34);
  --serif:'Spectral',Georgia,serif;
  --ui:'Libre Franklin',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --max:1080px; --pad:clamp(22px,5vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--ui);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--primary); color:#fff; }
h1,h2{ font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.08; }

/* ── Nav ── */
nav{ position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--max); margin:0 auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:20px; }
.logo{ font-family:var(--serif); font-size:23px; font-weight:500; letter-spacing:-0.03em; }
.logo-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-left:6px; vertical-align:2px; }
.nav-right{ margin-left:auto; display:flex; gap:22px; }
.nav-right a{ font-size:14px; color:var(--muted); transition:color .2s; }
.nav-right a:hover{ color:var(--ink); }

/* ── Hero ── */
.hero{ max-width:var(--max); margin:0 auto; padding:clamp(64px,11vw,120px) var(--pad) clamp(30px,5vw,52px); }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--primary); display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.6; }
.hero h1{ font-size:clamp(34px,5vw,58px); }
.hero h1 .grad{ background:linear-gradient(100deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub{ margin-top:20px; max-width:60ch; font-size:clamp(16px,1.3vw,18px); color:var(--muted); }

/* ── Card grid ── */
.grid{ max-width:var(--max); margin:0 auto; padding:clamp(20px,4vw,40px) var(--pad) clamp(70px,9vw,110px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.card{ display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:28px 28px 26px;
  transition:transform .22s, box-shadow .22s, border-color .22s; }
.card[href]:hover{ transform:translateY(-4px); box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--primary) 40%, var(--line)); }
.card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-ic{ width:46px; height:46px; border-radius:12px; background:var(--soft); color:var(--soft-ink);
  display:flex; align-items:center; justify-content:center; }
.card-ic svg{ width:24px; height:24px; }
.card h2{ font-family:var(--ui); font-weight:600; font-size:20px; letter-spacing:-0.01em; }
.card p{ margin-top:10px; font-size:15.5px; color:var(--muted); flex:1; }
.go{ margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--primary); }
.go-muted{ color:var(--muted); }
.card-soon{ opacity:.72; }

/* status chips */
.chip{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.chip-on{ color:var(--soft-ink); background:var(--soft); border-color:transparent; }

/* ── Footer ── */
footer{ border-top:1px solid var(--line); max-width:var(--max); margin:0 auto;
  padding:26px var(--pad) 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--muted); }
.foot-links{ display:flex; gap:20px; }
.foot-links a{ transition:color .2s; }
.foot-links a:hover{ color:var(--ink); }