@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
    --bg:#0a0a0f;
    --card:#14141f;
    --border:#2a2a3a;
    --primary:#667eea;
    --primary-2:#764ba2;
    --text:#fff;
    --text-2:#a0a0b0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1400px;margin:0 auto;padding:0 20px}
a{text-decoration:none;color:inherit}
.section{margin:60px 0}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.section-header h2{font-size:24px;font-weight:700}
.section-header a{color:var(--primary);font-weight:500;font-size:14px}

/* 1. HERO PREMIUM */
.hero-premium{
    display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
    max-width:1400px;margin:0 auto;padding:80px 20px;
    min-height:70vh;
}
.hero-content h1{font-size:56px;font-weight:800;line-height:1.1;margin-bottom:15px}
.hero-content h1 span{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-content p{font-size:18px;color:var(--text-2);margin-bottom:35px}
.search-bar-premium{
    display:flex;align-items:center;background:#fff;border-radius:16px;padding:5px 5px 5px 20px;
    box-shadow:0 10px 40px rgba(102,126,234,0.3);max-width:550px;
}
.search-bar-premium svg{color:#999;flex-shrink:0}
.search-bar-premium input{
    flex:1;padding:15px;border:none;font-size:16px;color:#333;outline:none;background:transparent;
}
.search-bar-premium button{
    padding:15px 35px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
    border:none;color:#fff;font-size:16px;font-weight:600;border-radius:12px;cursor:pointer;
}
.hero-tags{margin-top:25px}
.hero-tags span{color:var(--text-2);margin-right:10px;font-size:14px}
.hero-tags a{
    display:inline-block;background:var(--card);border:1px solid var(--border);
    padding:6px 16px;border-radius:20px;margin:5px;font-size:14px;transition:0.3s;
}
.hero-tags a:hover{background:var(--primary);border-color:var(--primary)}
.hero-featured{
    position:relative;border-radius:20px;overflow:hidden;height:500px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);display:block;
}
.hero-featured img{width:100%;height:100%;object-fit:cover;transition:0.5s}
.hero-featured:hover img{transform:scale(1.05)}
.featured-info{
    position:absolute;bottom:0;left:0;right:0;padding:30px;
    background:linear-gradient(0deg,rgba(0,0,0,0.9) 0%,transparent 100%);
}
.featured-info span{background:var(--primary);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600}
.featured-info h3{font-size:22px;margin-top:10px}

/* 2. CATEGORY GRID */
.cat-grid-premium{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;
}
.cat-card-premium{
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    padding:25px;text-align:center;transition:0.3s;
}
.cat-card-premium:hover{
    transform:translateY(-8px);border-color:var(--primary);
    box-shadow:0 15px 40px rgba(102,126,234,0.2);
}
.cat-icon{font-size:32px;margin-bottom:12px}
.cat-card-premium h3{font-size:16px;font-weight:600;margin-bottom:5px}
.cat-card-premium span{font-size:13px;color:var(--text-2)}

/* 3. WALLPAPER MASONRY GRID */
.wall-grid-masonry{columns:4 280px;column-gap:20px}
.wall-card-premium{
    display:inline-block;width:100%;background:var(--card);border-radius:16px;
    overflow:hidden;margin-bottom:20px;transition:0.3s;break-inside:avoid;
}
.wall-card-premium:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,0.6)}
.wall-img{position:relative;overflow:hidden}
.wall-img img{width:100%;display:block;transition:0.5s}
.wall-card-premium:hover .wall-img img{transform:scale(1.08)}
.wall-overlay{
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 40%);
    opacity:0;transition:0.3s;display:flex;justify-content:space-between;align-items:flex-end;padding:15px;
}
.wall-card-premium:hover .wall-overlay{opacity:1}
.wall-overlay span{background:rgba(0,0,0,0.6);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500}
.wall-info{padding:15px}
.wall-info h3{font-size:14px;font-weight:600;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall-info span{font-size:12px;color:var(--text-2)}

/* 4. MOBILE 100% OPTIMIZED */
@media(max-width:1024px){
    .hero-premium{grid-template-columns:1fr;text-align:center;padding:60px 20px;min-height:auto}
    .hero-featured{display:none}
    .hero-content h1{font-size:40px}
    .search-bar-premium{margin:0 auto}
    .wall-grid-masonry{columns:3 200px}
}
@media(max-width:768px){
    .hero-content h1{font-size:32px}
    .hero-content p{font-size:16px}
    .section{margin:40px 0}
    .section-header h2{font-size:20px}
    .cat-grid-premium{grid-template-columns:repeat(3,1fr);gap:10px}
    .cat-card-premium{padding:20px 10px}
    .cat-icon{font-size:28px}
    .wall-grid-masonry{columns:2 150px;column-gap:10px}
    .wall-card-premium{margin-bottom:10px;border-radius:12px}
    .wall-overlay{display:none}
}
@media(max-width:480px){
    .hero-premium{padding:40px 15px}
    .hero-content h1{font-size:28px}
    .search-bar-premium input{padding:12px;font-size:14px}
    .search-bar-premium button{padding:12px 20px}
    .cat-grid-premium{grid-template-columns:repeat(2,1fr)}
}