* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background:#0b1220; color:#e6eefc; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; position:sticky; top:0; background:rgba(5,10,20,.7); backdrop-filter: blur(8px); border-bottom:1px solid #16233d; }
.brand { display:flex; gap:12px; align-items:center; }
.logo { font-size:28px; }
.titles h1 { margin:0; font-size:18px; line-height:1; }
.titles small { opacity:.7; }
.btn { background:#0b5fff; color:white; border:0; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
.container { max-width:1100px; margin: 24px auto; padding: 0 16px; }
.intro { margin-bottom: 8px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.card { display:block; padding:16px; border:1px solid #21355d; background:linear-gradient(180deg, rgba(20,34,60,.8), rgba(11,18,32,.7)); border-radius:16px; text-decoration:none; color:inherit; position:relative; min-height:120px; }
.card h2 { margin:0 0 6px 0; font-size:18px; }
.card p { margin:0; opacity:.85; }
.card .chev { position:absolute; right:14px; bottom:12px; font-size:24px; opacity:.5; transition: transform .2s ease; }
.card:hover .chev { transform: translateX(4px); }
.footer { padding: 20px 16px; display:flex; justify-content:center; opacity:.6; }
@media (display-mode: standalone) {
  .topbar { border-bottom-color:#0b5fff55; }
}