:root{
  --grid-gap: 18px;
  --card-radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{scroll-behavior:smooth}
.sticky-topbar{position:sticky; top:0; z-index:1000; backdrop-filter: blur(8px);}
.logo-title{font-weight:800; letter-spacing:.4px;}
.hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--grid-gap); }
@media (max-width: 992px){ .hero{ grid-template-columns: 1fr; } }
.hero-card{ position:relative; border-radius: var(--card-radius); overflow:hidden; box-shadow: var(--shadow); min-height: 320px; }
.hero-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-card .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.65) 100%); display:flex; align-items:flex-end; padding:20px; color:#fff; }
.hero-list{ display:grid; gap: var(--grid-gap); grid-template-rows: 1fr 1fr; }
.hero-list .mini{ position:relative; border-radius: var(--card-radius); overflow:hidden; box-shadow: var(--shadow); min-height: 150px;}
.hero-list .mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-list .mini .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%); display:flex; align-items:flex-end; padding:14px; color:#fff; font-size:14px; }

/* Grid */
.grid{ margin-top: 26px; display:grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card{ border:none; border-radius: var(--card-radius); overflow:hidden; box-shadow: var(--shadow); background:#fff; }
.card .media{ aspect-ratio: 4/3; overflow:hidden; }
.card .media img, .card .media video{ width:100%; height:100%; object-fit:cover; display:block; }
.card .body{ padding:12px 14px; }
.card .meta{ color:#6c757d; font-size:.85rem; }

/* Animations */
.reveal{ opacity:0; transform: translateY(12px); transition: all .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.img-zoom{ transition: transform .35s ease; }
.img-zoom:hover{ transform: scale(1.05); }

/* Search */
.searchbar{ display:flex; gap:10px; margin: 16px 0 8px; }
.searchbar input{ height:42px; }