:root{
  --bg:#fff;
  --text:#222;
  --accent:#c62828;
  --muted:#666;
  --container-width:1100px;
  --border:#eee;
}
*{box-sizing:border-box}
body{font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC","PingFang SC", "Microsoft YaHei", sans-serif; margin:0; color:var(--text); background:var(--bg); line-height:1.6}
.container{max-width:var(--container-width); margin:0 auto; padding:20px}

/* header */
.site-header{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700}
.logo{height:36px}
.main-nav a{margin:0 10px; text-decoration:none; color:var(--text); font-weight:600; padding:8px 6px; border-radius:6px}
.main-nav a.active, .main-nav a:hover{background:#fafafa}
.menu-btn{display:none}

/* hero */
.hero{padding:40px 0; background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03))}
.hero-inner{display:flex; gap:30px; align-items:center}
.hero-text{flex:1}
.hero-text h1{font-size:36px; margin:0 0 12px}
.hero-text p{color:var(--muted); margin:0 0 18px}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:10px 18px; text-decoration:none; border-radius:8px; border:1px solid var(--accent)}
.btn:hover{filter:brightness(0.95)}
.btn-outline{background:#fff; color:var(--accent); border:1px solid var(--accent)}
.hero-image img{width:100%; max-width:520px; display:block}

/* sections */
.highlights{padding:30px 0}
.highlights-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.highlight{background:#fff; border:1px solid var(--border); padding:16px; border-radius:10px}

.cta{padding:40px 0; background:#fafafa}
.cta-inner{text-align:center}

/* model grid */
.models-section{padding:30px 0}
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.model-card{background:#fff; border:1px solid var(--border); padding:12px; text-align:center; border-radius:10px}
.model-card img{width:100%; height:230px; object-fit:cover; border-radius:8px; background:#f6f6f6}
.model-card h3{margin:10px 0 6px}
.meta{color:var(--muted); font-size:13px}
.desc{font-size:14px; color:#333}

/* detail */
.model-detail{padding:30px 0}
.detail-inner{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:22px}
.gallery img{width:100%; border-radius:12px; border:1px solid var(--border); background:#f6f6f6}
.profile h1{margin-top:0}
.profile-meta{list-style:none; padding:0; margin:10px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.profile-meta li{background:#fff; border:1px solid var(--border); padding:8px 10px; border-radius:8px}
.actions{display:flex; gap:10px; margin-top:14px}
.more{padding:10px 0 40px}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.thumbs img{width:100%; border:1px solid var(--border); border-radius:8px; background:#f6f6f6}

/* about / contact */
.about, .contact{padding:30px 0}
form{display:grid; gap:12px; max-width:520px}
label{display:grid; gap:6px; font-weight:600}
input, textarea{padding:10px; border:1px solid var(--border); border-radius:8px; font:inherit}
.form-tip{color:var(--muted); font-size:13px}

/* footer */
.site-footer{padding:18px 0; text-align:center; border-top:1px solid var(--border); margin-top:30px}

/* responsive */
@media (max-width:900px){
  .model-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column}
  .detail-inner{grid-template-columns: 1fr}
}
@media (max-width:600px){
  .main-nav{display:none}
  .menu-btn{display:inline-block}
  .model-grid{grid-template-columns:1fr}
}