main{
    margin-top: 5rem !important;
}
/* public/css/style.css */
:root{
  --bg:#0d0f12; --bg-elev:#141820; --text:#eaeaf1; --muted:#9aa3b2; --accent:#ff6a3d; --accent-2:#ff3d3d;
  --glass: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.15);
}
html,body{background:var(--bg); color:var(--text);} 
.theme-dark{min-height:100vh;}
/* Glassy fixed navbar */
.glass-nav{backdrop-filter: saturate(180%) blur(14px); background: linear-gradient(180deg, rgba(10,10,12,.8), rgba(10,10,12,.2)); border-bottom:1px solid var(--border);} 
.navbar-brand{letter-spacing:.5px}
.nav-link{color:#cfd5e1 !important; opacity:.9}
.nav-link:hover{color:#fff !important}
.btn-ghost{border:1px solid var(--border); color:#e9edf6; background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:#fff}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0; box-shadow:0 8px 24px rgba(255,106,61,.25)}
.btn-accent:hover{filter:brightness(1.05)}
.bg-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));}

/* HERO */
.hero{position:relative; padding-top:120px; padding-bottom:120px; background:
  radial-gradient(1200px 700px at 10% -20%, rgba(255,106,61,.25), transparent),
  radial-gradient(900px 600px at 90% -10%, rgba(255,61,61,.2), transparent),
  linear-gradient(180deg,#0e1116 0%, #0b0d10 100%);
  overflow:hidden;}
.hero-overlay{position:absolute; inset:0; background: url('/img/hero-noise.png'); opacity:.05; pointer-events:none}
.fw-800{font-weight:800}
.logo-pill{display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border:1px solid var(--border); border-radius:999px; color:#cfd5e1; font-weight:600; font-size:.9rem; background:rgba(255,255,255,0.02)}

/* Cards */
.section-title{font-weight:700}
.page-title{font-weight:800}
.category-card{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.category-card .card-img{height:160px; background-size:cover; background-position:center;}
.gradient-mask{background-image: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.6)), var(--bg); background-blend-mode: overlay;}
.category-card .card-img{background-image: var(--bg);} 
.category-card .card-img{position:relative}
.category-card .card-img::before{content:''; position:absolute; inset:0; background-image: var(--bg); background-image: var(--bg);} 
.category-card .card-body{padding:16px}

.mix-card{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.mix-card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.25)}
.mix-cover{width:100%; height:220px; object-fit:cover}

/* Generic glass card */
.glass-card{background:var(--glass); border:1px solid var(--border); border-radius:16px}
.shadow-soft{box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* Footer */
.site-footer{background:linear-gradient(180deg, #0b0d10, #0e1116); border-top:1px solid var(--border)}

/* Tables */
.table{--bs-table-bg: transparent; --bs-table-border-color: var(--border);}
.table thead th{color:#cfd5e1}

/* Utilities */
.text-secondary{color:var(--muted) !important}

/* Placeholder images (noise) */
/* You can replace these with real images: /public/img/cat-*.jpg and /public/img/hero-noise.png */