/*
  Design Tokens (from MasterGo DSL)
  - color-surface: #FFFFFF (paint_2:59)
  - color-bg: #F9FAFB (paint_2:11)
  - color-text: #111827 (paint_2:30)
  - color-muted: #9CA3AF (paint_2:541)
  - color-subtle: #4B5563 (paint_2:0965)
  - color-primary: #6366F1 (paint_2:100)
  - color-footer-bg: #111827 (paint_2:30)
  - border-color: #E5E7EB (paint_2:0442)
  - shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) (effect_2:22)
  - overlay-40: rgba(0, 0, 0, 0.4) (paint_2:0006)
  - hero-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%) (paint_us9:0141)
  - glass-blur: backdrop-filter: blur(4px) (effect_2:2793)
  - font: Roboto (font_*)
*/

:root{
  --color-bg:#F9FAFB;
  --color-surface:#FFFFFF;
  --color-text:#111827;
  --color-muted:#9CA3AF;
  --color-subtle:#4B5563;
  --color-primary:#6366F1;
  --color-footer-bg:#111827;
  --border-color:#E5E7EB;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
}

.container{
  width:100%;
  max-width:1376px;
  margin:0 auto;
  padding:0 32px;
}

/* Header */
.site-header{background:var(--color-surface); box-shadow:var(--shadow-sm)}
.nav{height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav-left{display:flex; align-items:center; gap:24px}
.logo{display:inline-flex; align-items:center; height:32px}
.logo-icon{width:39px; height:32px; background:#000; mask: none; -webkit-mask: none; border-radius:6px}
.nav-links{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.nav-links a{color:var(--color-text); text-decoration:none; font-weight:500}
.nav-right{display:flex; align-items:center; gap:16px}
.search{position:relative; width:256px; height:40px; background:var(--color-surface); border:1px solid var(--border-color); border-radius:4px; display:flex; align-items:center}
.search input{border:none; outline:none; background:transparent; width:100%; height:100%; padding:0 16px 0 40px; color:var(--color-text)}
.icon-search{position:absolute; left:12px; width:16px; height:16px; background:var(--color-muted); border-radius:2px}
.cart{display:flex; align-items:center; gap:8px; color:var(--color-text); text-decoration:none}
.icon-cart{width:18px; height:16px; background:var(--color-text); border-radius:2px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border-radius:4px; text-decoration:none; cursor:pointer; white-space:nowrap}
.btn.primary{background:var(--color-primary); color:#fff}
.btn.outline{background:transparent; color:var(--color-primary); border:1px solid var(--color-primary)}

/* Hero */
.hero{background:url('../images/hero-bg.jpg') center/cover no-repeat; padding:64px 0 0}
.hero-inner{display:flex; justify-content:center; align-items:center; min-height:600px}
.hero-card{width:100%; max-width:640px; margin:0 auto; background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%); backdrop-filter:blur(4px); border-radius:12px; padding:48px; box-shadow:var(--shadow-sm)}
.hero-card h1{margin:0 0 16px; font-size:48px; line-height:48px}
.hero-card p{margin:0 0 24px; color:#FBFBFB}

/* Sections */
.section{padding:80px 0}
.bg-white{background:#fff}
.section-title{text-align:center; font-size:30px; line-height:36px; margin:0 0 24px}
.section-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}

/* Categories */
.grid{display:grid; gap:24px}
.categories{grid-template-columns:repeat(4, 1fr)}
.category-card{position:relative; height:320px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; background:var(--bg) center/cover no-repeat}
.category-card::before{content:""; position:absolute; inset:0; background:var(--overlay, rgba(0,0,0,0.4)); z-index:1}
.category-card span{position:relative; font-size:24px; font-weight:700; z-index:2}
.category-card{--bg: var(--bg)}

/* Featured works */
.featured{grid-template-columns:repeat(3, 1fr)}
.card{background:var(--color-surface); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.card-media{height:320px; overflow:hidden; display:block}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:24px}
.card-body h3{margin:0 0 8px; font-size:20px; line-height:28px}
.meta{margin:0 0 16px; color:var(--color-subtle)}
.card-actions{display:flex; align-items:center; justify-content:space-between}
.price{font-size:20px; font-weight:700; color:var(--color-primary)}

/* Stats */
.stats{grid-template-columns:repeat(4, 1fr)}
.stat-card{background:#fff; border-radius:12px; padding:32px; text-align:center; box-shadow:var(--shadow-sm)}
.stat-value{font-size:36px; line-height:40px; color:var(--color-primary)}
.stat-label{margin-top:10px; color:var(--color-subtle)}

/* Artists */
.artists{grid-template-columns:repeat(3, 1fr)}
.artist-card{display:flex; flex-direction:column; align-items:center; gap:8px}
.avatar{width:192px; height:192px; border-radius:9999px; overflow:hidden; box-shadow:var(--shadow-sm)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.artist-card h3{margin:16px 0 0}
.artist-card p{margin:0; color:var(--color-subtle)}

/* Contact */
.contact{background:#fff}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px}
.contact-info h2{margin:0 0 16px}
.contact-info p{margin:0 0 24px; color:var(--color-subtle)}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:16px; color:var(--color-subtle)}
.contact-form{display:grid; gap:24px}
.contact-form label{display:grid; gap:8px; color:#374151; font-weight:500}
.contact-form input,.contact-form textarea{width:100%; height:40px; padding:8px 12px; border:1px solid var(--border-color); border-radius:4px; outline:none}
.contact-form textarea{height:auto; resize:vertical}

/* Footer */
.site-footer{background:var(--color-footer-bg); color:#fff; padding:80px 0}
.footer-top{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:32px}
.footer-col h4{margin:0 0 16px; font-size:16px}
.footer-col p{color:#9CA3AF}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.footer-col a{color:#9CA3AF; text-decoration:none}
.socials{display:flex; gap:16px}
.social{width:40px; height:40px; background:#1F2937; border-radius:9999px; display:inline-block}
.footer-bottom{height:53px}

/* Responsive */
@media (max-width: 1200px){
  .categories{grid-template-columns:repeat(2, 1fr)}
  .featured{grid-template-columns:repeat(2, 1fr)}
  .stats{grid-template-columns:repeat(2, 1fr)}
  .artists{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .nav{height:auto; padding:12px 0; flex-wrap:wrap}
  .search{width:100%}
  .hero-inner{min-height:480px}
  .hero-card{padding:32px}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .categories,.featured,.stats,.artists{grid-template-columns:1fr}
}