:root {
  --navy-950:#071724;
  --navy-900:#0b2133;
  --navy-800:#12334b;
  --green-700:#087255;
  --green-600:#0d9f76;
  --green-500:#16b889;
  --green-100:#dff8f0;
  --slate-900:#17212b;
  --slate-700:#3e4b59;
  --slate-600:#607080;
  --slate-500:#7e8c99;
  --slate-300:#cbd5de;
  --slate-200:#e4eaf0;
  --page:#f3f6f8;
  --surface:#ffffff;
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font)}
body{
  min-height:100vh;
  color:var(--slate-900);
  background:
    radial-gradient(circle at 8% 0%,rgba(22,184,137,.12),transparent 27rem),
    radial-gradient(circle at 96% 8%,rgba(18,51,75,.08),transparent 26rem),
    var(--page);
}

a{color:inherit;text-decoration:none}

.portal-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:28px 0 36px}

.portal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  border:1px solid rgba(203,213,222,.8);
  border-radius:18px;
  box-shadow:0 12px 34px rgba(15,35,50,.07);
}

.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-500),var(--green-700));
  color:#fff;font-weight:900;letter-spacing:-.04em;box-shadow:0 8px 20px rgba(13,159,118,.24)
}
.brand strong{display:block;color:var(--navy-900);font-size:16px;line-height:1.1}
.brand span{display:block;margin-top:4px;color:var(--slate-500);font-size:11px}

.secure-badge{
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;
  background:var(--green-100);color:var(--green-700);font-size:10px;font-weight:850
}
.secure-dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(22,184,137,.12)}

.hero{padding:72px 8px 32px;max-width:760px}
.eyebrow{display:inline-flex;color:var(--green-700);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.hero h1{margin:10px 0 12px;color:var(--navy-900);font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.045em}
.hero p{margin:0;color:var(--slate-600);font-size:14px;line-height:1.65;max-width:620px}

.panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px}
.panel-card{
  min-height:225px;display:flex;gap:18px;padding:22px;border-radius:20px;
  background:var(--surface);border:1px solid var(--slate-200);
  box-shadow:0 15px 38px rgba(15,35,50,.08);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.panel-card:hover,.panel-card:focus-visible{
  transform:translateY(-3px);border-color:rgba(22,184,137,.48);
  box-shadow:0 22px 52px rgba(15,35,50,.13);outline:none
}
.panel-icon{
  flex:0 0 54px;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy-900),var(--navy-800));color:#fff
}
.panel-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.panel-content{min-width:0;display:flex;flex-direction:column;flex:1}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-title-row h2{margin:1px 0 0;color:var(--navy-900);font-size:19px;letter-spacing:-.025em}
.status{padding:5px 8px;border-radius:999px;background:var(--green-100);color:var(--green-700);font-size:9px;font-weight:900}
.panel-content p{margin:14px 0;color:var(--slate-600);font-size:11px;line-height:1.65}
.panel-meta{margin-top:auto;padding-top:16px;border-top:1px solid #edf1f4;display:flex;align-items:center;justify-content:space-between;color:var(--slate-500);font-size:10px;font-weight:800}
.arrow{font-size:21px;color:var(--green-600);transition:transform .18s ease}
.panel-card:hover .arrow{transform:translateX(4px)}

.portal-footer{display:flex;justify-content:space-between;gap:15px;margin-top:70px;padding:18px 8px 0;border-top:1px solid var(--slate-200);color:var(--slate-500);font-size:9px}

@media(max-width:900px){.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .portal-shell{width:min(100% - 24px,1180px);padding-top:12px}
  .portal-header{padding:12px}.secure-badge{font-size:0;padding:9px}.secure-dot{margin:0}
  .hero{padding:48px 4px 24px}.hero p{font-size:12px}
  .panel-grid{grid-template-columns:1fr}.panel-card{min-height:205px;padding:18px}
  .portal-footer{flex-direction:column;margin-top:48px}
}