:root { 
    --p: #FF5733; 
    --hero-bg: #1A1A1A; 
    --side-bg: #2A2A2A;
    --bg: #F8F9FA; 
    --txt: #212529; 
    --r: 16px; 
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
body { background: var(--bg); color: var(--txt); }

/* Navigation */
.nav { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; background: white; position: fixed; top:0; width: 100%; z-index: 1000; border-bottom: 1px solid #eee; }
.logo { font-weight: 800; font-size: 1.5rem; text-decoration: none; color: var(--txt); }
.logo span { color: var(--p); }

.nav-links { display: flex; list-style: none; gap: 40px; margin: 0; align-items: center; }
.nav-links li { cursor: pointer; font-weight: 600; padding: 10px 0; position: relative; }

/* Dropdown Fix */
.dropdown { 
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); 
    background: white; border-radius: 12px; min-width: 180px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); list-style: none; padding: 10px 0; margin-top: 5px; z-index: 2000;
}
.nav-links li:hover .dropdown { display: block; }
.dropdown li { padding: 12px 25px; font-size: 0.9rem; white-space: nowrap; transition: 0.2s; }
.dropdown li:hover { background: var(--bg); color: var(--p); }

/* Layout */
.page { display: none; padding-top: 100px; padding-bottom: 50px; }
.page.active { display: block; }

.hero { padding: 0 40px; display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.bento { border-radius: var(--r); padding: 40px; color: white; display: flex; flex-direction: column; justify-content: center; }
.main { background: var(--hero-bg); }
.side { background: var(--side-bg); }

.hub-icon { background: var(--p); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-weight: bold; }

.search-container { background: white; border-radius: 12px; display: flex; overflow: hidden; margin-top: 25px; height: 55px; max-width: 500px; }
.search-container input { flex: 1; border: none; outline: none; padding: 0 20px; font-size: 1rem; color: #333; }
.btn-search { background: var(--p); color: white; border: none; padding: 0 30px; font-weight: 700; cursor: pointer; }

.section-header { margin: 40px 40px 20px; font-weight: 800; color: var(--hero-bg); font-size: 1.8rem; }

/* Grid & Cards */
.grid { padding: 0 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.card { background: white; border-radius: var(--r); overflow: hidden; transition: 0.3s ease; border: 1px solid #eee; }
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: var(--p); }

.card img { width: 100%; height: 200px; object-fit: contain; padding: 25px; background: white; transition: 0.3s; }
.card:hover img { transform: scale(1.05); }

.card-info { padding: 25px; }
.cat-tag { font-size: 0.7rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.card-info h3 { margin: 8px 0; font-size: 1.2rem; color: var(--hero-bg); }
.price { color: var(--p); font-weight: 800; font-size: 1.1rem; margin-bottom: 15px; display: block; }

.btn-p { background: var(--hero-bg); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; width: 100%; }
.btn-p:hover { background: var(--p); }
.btn-outline { border: 2px solid rgba(255,255,255,0.2); background: transparent; color: white; padding: 12px; border-radius: 8px; margin-top: 15px; cursor: pointer; font-weight: 600; }

/* Forms */
.form-card { background: white; padding: 40px; border-radius: var(--r); max-width: 450px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.form-input { width: 100%; padding: 14px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
.err-msg { color: var(--p); font-size: 0.8rem; display: none; margin-bottom: 10px; }