@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;800&display=swap');
:root{
  --bg1:#f5e27c; --bg2:#0b3d3c; --ink:#0f172a; --muted:#475569;
  --panel:rgba(255,255,255,.75); --shadow:0 12px 28px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; padding:0; font-family:'Raleway',system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink); background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;
}
.container{max-width:1100px;margin:0 auto;padding:24px 20px}
.header{display:flex;flex-direction:column;align-items:center;text-align:center;margin:6px 0 12px}
.logo{max-width:220px;margin:0 auto 8px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.brand{font-weight:800;letter-spacing:.3rem;text-transform:uppercase;margin-top:2px}
.tag{margin-top:6px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.card{background:var(--panel);backdrop-filter:blur(6px) saturate(120%);border-radius:18px;padding:16px;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px 0}
.card p{margin:0;color:var(--muted)}
.icon{width:64px;height:64px;border-radius:14px;display:block;margin:4px 0 10px;background:linear-gradient(135deg,#111,#333);
  box-shadow:0 8px 18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.1rem;letter-spacing:.08rem}
.card a{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:12px;background:#111;color:#fff;text-decoration:none;box-shadow:0 6px 12px rgba(0,0,0,.18)}
.card a:hover{transform:translateY(-1px)}
.footer{margin:18px 0;text-align:center;color:var(--muted);font-size:.95rem}