:root { --accent:#047857; --ink:#1f2937; --muted:#667085; --surface:#fff; --line:rgba(31,41,55,.08); --soft:#f6f8fc; }
* { box-sizing:border-box; } body { margin:0; background:var(--soft); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
a { color:inherit; text-decoration:none; } .wrap { width:min(1140px, calc(100% - 32px)); margin:0 auto; }
.hero { padding:76px 0 48px; background:linear-gradient(135deg,#047857,#0f172a); color:#fff; } .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:end; }
.pill { display:inline-flex; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.14); font-size:13px; letter-spacing:.08em; } h1 { margin:18px 0 14px; font-size:clamp(36px,5vw,64px); line-height:1.04; max-width:10em; } .hero p { margin:0; color:rgba(255,255,255,.9); line-height:1.8; font-size:18px; }
.hero-box,.shot,.service-wall article,.brick,.contact-mini { background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 34px rgba(15,23,42,.05); }
.hero-box { padding:24px; border-radius:28px; color:var(--ink); } .hero-box strong { display:block; font-size:28px; margin-bottom:8px; } .hero-box p,.shot p,.service-wall p,.brick p,.contact-mini p,.meta span { color:var(--muted); line-height:1.76; }
.shot-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:18px; padding:28px 0; } .shot { padding:22px; border-radius:24px; } .main { grid-row:span 2; background:linear-gradient(180deg,#fff,#f9fbff); }
.shot h3,.service-wall h3,.brick h3,.contact-mini h2 { margin:0 0 10px; font-size:22px; }
.service-wall { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom:24px; } .service-wall article { padding:22px; border-radius:22px; }
.masonry { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:26px; } .brick { padding:22px; border-radius:22px; } .brick span { color:var(--accent); font-size:13px; } .arrow { display:inline-flex; margin-top:14px; color:var(--accent); font-weight:700; }
.contact-mini { padding:28px; border-radius:30px; margin-bottom:48px; } .meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; color:var(--accent); }
@media (max-width: 900px) { .hero-grid,.shot-grid,.service-wall,.masonry { grid-template-columns:1fr; } }