:root{
  color-scheme:light;
  --ink:#0c2741;
  --muted:#6d7b88;
  --line:#dce6ee;
  --soft:#f4f8fb;
  --blue:#155b96;
  --green:#2f9a78;
  --white:#fff;
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eef4f8;color:var(--ink)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 12%,rgba(54,141,198,.13),transparent 28rem),
    linear-gradient(180deg,#f8fbfd 0%,#edf4f8 100%);
}

.shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:72px 0 32px}
.hero{display:flex;align-items:center;gap:26px;margin-bottom:46px}
.brand-mark{
  width:88px;height:88px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(145deg,#0d2a45,#17669f);color:#fff;font-weight:800;letter-spacing:.08em;
  box-shadow:0 18px 50px rgba(19,75,116,.18)
}
.eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.18em;color:var(--blue);font-weight:700}
h1{margin:0;font-size:clamp(32px,5vw,58px);line-height:1.08;letter-spacing:-.03em}
.lead{margin:14px 0 0;color:var(--muted);font-size:17px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{
  position:relative;display:flex;min-height:250px;flex-direction:column;padding:28px;border:1px solid var(--line);
  border-radius:24px;background:rgba(255,255,255,.9);color:inherit;text-decoration:none;
  box-shadow:0 12px 34px rgba(31,70,98,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(31,70,98,.12);border-color:#b8cede}
.card-primary{background:linear-gradient(145deg,#0e2e4b,#155e93);color:#fff;border-color:transparent}
.card-primary p,.card-primary .tag{color:rgba(255,255,255,.72)}
.tag{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--blue)}
.card h2{margin:48px 0 10px;font-size:28px;letter-spacing:-.02em}
.card p{margin:0;max-width:34rem;color:var(--muted);line-height:1.75}
.arrow,.status{margin-top:auto;padding-top:28px;font-size:14px;font-weight:700}
.arrow{color:inherit}
.status{color:#8c98a3}
.card-muted{background:rgba(247,250,252,.76);box-shadow:none}

footer{display:flex;justify-content:space-between;gap:16px;margin-top:28px;padding:18px 4px;color:#83909b;font-size:12px}

@media (max-width:760px){
  .shell{width:min(100% - 28px,1180px);padding-top:38px}
  .hero{align-items:flex-start;gap:16px;margin-bottom:30px}
  .brand-mark{width:64px;height:64px;border-radius:18px;font-size:14px;flex:0 0 auto}
  .grid{grid-template-columns:1fr}
  .card{min-height:210px;padding:22px;border-radius:20px}
  .card h2{margin-top:34px;font-size:24px}
  footer{flex-direction:column}
}