@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto:wght@300;400;500;700&display=swap');

*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Roboto,Arial,sans-serif;color:#dfe5e8;background:#07100f}
body{overflow-x:hidden}.bg{position:fixed;inset:0;z-index:-2;background:
radial-gradient(circle at 50% 20%,rgba(67,84,71,.32),transparent 38%),
linear-gradient(rgba(3,10,9,.64),rgba(3,10,9,.96)),
url("images/district-dashboard-reference.png") center/cover fixed no-repeat}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 45%,rgba(0,0,0,.3))}
.topbar{height:82px;background:rgba(3,11,12,.88);border-bottom:1px solid rgba(180,210,210,.14);display:flex;align-items:center;padding:0 34px;gap:38px;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.brand{width:205px;text-decoration:none;color:#eef3f4;display:flex;flex-direction:column;line-height:.9}.brand strong{font-family:Oswald;font-size:34px;letter-spacing:2px}.brand span{font-size:9px;letter-spacing:4px;color:#9aa6a7;margin-top:5px}
nav{display:flex;align-items:stretch;height:100%;gap:30px;flex:1}nav a{display:flex;gap:10px;align-items:center;color:#aeb8bb;text-decoration:none;font-size:14px;padding:0 3px;border-bottom:3px solid transparent}nav a.active{color:#fff;border-bottom-color:#8bcf3f}
.login{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#dce3e5;border-radius:24px;padding:11px 18px;cursor:pointer}.login:hover{background:rgba(139,207,63,.15)}
main{max-width:1180px;margin:auto;padding:58px 28px 35px}.hero{text-align:center;padding:20px 0 38px}.eyebrow{font-family:Oswald;font-size:72px;font-weight:600;letter-spacing:2px;color:#f1f4f4;text-shadow:0 4px 25px #000}.hero h1{font-family:Oswald;margin:2px 0 15px;font-size:48px;letter-spacing:2px;color:#f0f3f4}.hero p{margin:0;color:#aeb9b9;font-size:17px;letter-spacing:3px}.hero i{display:inline-block;height:18px;border-left:2px solid #8bcf3f;margin:0 15px -4px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{position:relative;min-height:166px;padding:26px 24px;border:1px solid rgba(210,225,225,.18);border-radius:6px;background:linear-gradient(135deg,rgba(17,29,29,.9),rgba(6,15,15,.78));box-shadow:0 10px 28px rgba(0,0,0,.22);text-decoration:none;color:#fff;overflow:hidden;transition:.2s}.card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.04),transparent);transform:translateX(-100%);transition:.5s}.card:hover{transform:translateY(-3px);border-color:rgba(139,207,63,.55);box-shadow:0 12px 35px rgba(0,0,0,.4)}.card:hover:after{transform:translateX(100%)}.card .icon{width:62px;height:62px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:30px;background:rgba(110,130,130,.2);margin-bottom:17px}.card.green .icon{background:#3b790f}.card.gold .icon,.card.amber .icon{background:#6e5415}.card.blue .icon{background:#15556d}.card.red .icon{background:#76282b}.card.purple .icon{background:#4d2e76}.card.cyan .icon{background:#126d6d}.card.orange .icon{background:#774014}.card h2{font-family:Oswald;margin:0;font-size:23px;letter-spacing:.5px}.card p{margin:7px 0 0;color:#aebabb;font-size:14px}.card b{position:absolute;right:20px;bottom:20px;font-size:31px;color:#b7c0c2;font-weight:300}.wide{grid-column:span 1}
footer{min-height:70px;background:rgba(3,11,12,.9);border-top:1px solid rgba(180,210,210,.13);display:flex;align-items:center;gap:30px;padding:14px 4%;color:#9eaaac;font-size:13px}footer strong{color:#8bcf3f}.dot{display:inline-block;width:9px;height:9px;background:#65c52e;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #65c52e}.address{margin-left:auto}footer button{border:1px solid #79b83e;background:transparent;color:#9bd35b;padding:10px 16px;border-radius:22px;font-weight:600;cursor:pointer}
@media(max-width:850px){.topbar{height:auto;min-height:72px;padding:13px 18px;gap:15px}.brand{width:auto}.brand strong{font-size:26px}.brand span{font-size:7px}nav{gap:12px}nav a span{display:none}.login{font-size:0;padding:11px}.login:first-letter{font-size:16px}main{padding:35px 14px}.eyebrow{font-size:50px}.hero h1{font-size:34px}.grid{grid-template-columns:repeat(2,1fr)}.card{min-height:150px;padding:20px}.card h2{font-size:20px}footer{gap:15px;flex-wrap:wrap}.address{display:none}}
@media(max-width:520px){.topbar{position:relative}nav{justify-content:flex-end}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.hero{padding-top:5px}.hero p{font-size:13px}.hero i{margin:0 8px -4px}footer{font-size:11px}}