:root{
--bg:#f5efdf;
--dark:#111;
--green:#2c4d45;
--red:#6d2020;
--paper:#f2e6c9;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:"Microsoft YaHei",sans-serif;
background:var(--bg);
color:var(--dark);
line-height:1.8;
}
.container{width:min(1180px,92%);margin:auto}
.site-header{
background:#111;color:#fff;padding:18px 0;
position:sticky;top:0;z-index:9;
}
.nav-wrap{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:28px;font-weight:700;letter-spacing:2px}
nav a{
color:#f5efdf;text-decoration:none;margin-left:18px
}
.hero{
padding:90px 0;
background:linear-gradient(135deg,#111,#2c4d45);
color:#fff;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.paper-card,.service-card,.timeline-card,.faq-item,.video-card{
background:var(--paper);
padding:24px;border-radius:18px;
box-shadow:0 10px 20px rgba(0,0,0,.08)
}
.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px
}
section{padding:70px 0}
h1,h2,h3{line-height:1.3}
.btn{
display:inline-block;
padding:12px 26px;
border:2px solid #fff;
color:#fff;text-decoration:none;
margin-top:20px
}
.dark-btn{
border-color:var(--red);
color:var(--red)
}
.story-line{
border-left:4px solid var(--green);
padding-left:18px;
margin-bottom:20px
}
.site-footer{
background:#111;color:#ddd;
padding:30px 0;text-align:center
}
img.svg-hero{width:100%;max-width:420px}
@media(max-width:768px){
.hero-grid,.grid-3,.grid-2{
grid-template-columns:1fr
}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end}
nav a{margin:6px}
}