:root{--blu:#123a5e;--acc:#c9962b;--bg:#f5f3ee;--txt:#1d2733;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,Segoe UI,Roboto,sans-serif;color:var(--txt);background:var(--bg);line-height:1.55}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.hero{background:linear-gradient(135deg,var(--blu),#0c2740);color:#fff;padding:64px 0 56px;text-align:center}
.logo{font-weight:800;letter-spacing:2px;font-size:20px}
.logo span{color:var(--acc);margin-left:6px}
.hero h1{font-size:44px;margin:18px 0 10px}
.claim{opacity:.9;max-width:620px;margin:0 auto}
.state{display:inline-block;margin-top:22px;padding:7px 16px;border-radius:20px;background:rgba(255,255,255,.12);font-size:14px}
.state.ok{background:rgba(60,180,90,.25)}.state.ko{background:rgba(200,80,80,.25)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:44px 0}
.card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.05);border-top:3px solid var(--acc)}
.card h3{color:var(--blu);margin-bottom:8px;font-size:18px}
.access{background:#fff;border-radius:12px;padding:28px;margin-bottom:48px;text-align:center}
.access h2{color:var(--blu);margin-bottom:8px}
.access a{color:var(--acc);font-weight:600}
footer{background:var(--blu);color:#cdd8e4;font-size:13px;padding:20px 0;text-align:center}