/* index + products-nav shared styles */
.wrap{text-align:center;max-width:500px;padding:20px}
h1{color:#0969da;font-size:24px;margin-bottom:8px}
.sub{color:#656d76;font-size:13px;margin-bottom:32px}
.cards{display:flex;flex-wrap:wrap;gap:12px}
.card{display:block;background:#f6f8fa;border:1px solid #d0d7de;border-radius:8px;padding:20px;text-decoration:none;transition:border-color .2s;flex:1 1 200px;min-width:180px}
.card:hover{border-color:#0969da}
.card .icon{font-size:36px;margin-bottom:8px}
.card .title{color:#24292f;font-size:16px;font-weight:600;margin-bottom:4px}
.card .desc{color:#656d76;font-size:12px}
.footer{color:#8c959f;font-size:11px;margin-top:40px}
.top-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.top-bar .back{color:#656d76;text-decoration:none;font-size:13px}
.top-bar .back:hover{color:#0969da}

body.index-page{display:flex;align-items:center;justify-content:center;min-height:100vh}
body.nav-page{min-height:100vh;padding:16px}
body.nav-page h1{font-size:22px;margin-bottom:6px}
body.nav-page .sub{margin-bottom:24px}
body.nav-page .cards{flex-direction:row}

@media(max-width:768px){
  .cards{flex-direction:column}
  .wrap{padding:15px}
  .card{padding:15px}
}