/* SmartBearPicks — minimal, modern, friendly */
:root{
  --bg:#0b0b0c;
  --text:#eae9e4;
  --muted:#bdbab2;
  --accent:#62d26f;
  --card:#161618;
  --card2:#0f0f10;
  --chip:#232325;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif}

body{padding: 0px 10px}

.container{max-width:1100px;padding:0 20px;margin:0 auto}

.site-header{position:sticky;top:0;z-index:10;background:rgba(11,11,12,.8);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #1e1e20}
.header-inner{display:flex;align-items:center;gap:24px;padding:12px 0}
.brand-logo{height:52px;width:auto;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.1))}
.nav{margin-left:auto;display:flex;gap:11px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;border:1px solid #2a2a2d}
.btn.primary{background:var(--accent);color:#0b140d;border-color:transparent;font-weight:700}
.btn.ghost{color:var(--text);background:var(--chip)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

.section{padding:40px 0}
.section.alt{background:linear-gradient(180deg, #0e0e10, #0b0b0c)}
.section h2{font-size:28px;margin:0 0 12px}
.section .section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}

.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--chip);color:var(--text);border:1px solid #2a2a2d;padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.active,.chip:hover{background:#2b2b2e}

.card-grid{display:grid;grid-template-columns:repeat( auto-fill, minmax(280px, 1fr) );gap:18px;margin-top:16px}
.card{background:var(--card);border:1px solid #242428;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content: space-between;padding:14px 14px 16px}
.card-img{height:350px;background-size:cover;background-repeat:no-repeat;background-position:top center;}
.card-body{height:200px;overflow: auto;padding:10px 0px}
.card h3{margin:0 0 6px;font-size:18px}
.meta{color:#9e9a8f;font-size:12px;margin:0 0 8px}
.card .btn{margin-top:auto;display:inline-block}

.categories .category-grid{display:grid;grid-template-columns:repeat(2, minmax(150px, 1fr));gap:12px;margin-top:10px}
.category{display:block;background:var(--card2);border:1px solid #242428;border-radius:16px;padding:22px;text-decoration:none;color:var(--text);text-align:center}
.category:hover{background:#1a1a1d}

.ticks{list-style:none;padding:0;margin:10px 0 0}
.ticks li{margin:8px 0;padding-left:26px;position:relative}
.ticks li::before{content:'✔';position:absolute;left:0;color:var(--accent)}

.disclaimer{color:#9c988f}

.site-footer{border-top:1px solid #1e1e20;background:#0b0b0c}
.footer-inner{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:18px 0;color:#9c988f}
.footer-nav a{color:#9c988f;text-decoration:none;margin-left:14px}
.footer-nav a:hover{color:var(--text)}
.mailto{color: #aaaaaa}

@media (max-width:900px){
  .mascot{grid-template-columns:1fr;gap:10px}
  .mascot-art{order:-1;text-align:center}
  .mascot-art img{max-width:260px}
}