:root { --ink:#10241b; --green:#075f3d; --deep:#073e2c; --muted:#68756f; --cream:#f7f5ee; --line:rgba(16,36,27,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
[v-cloak] { display:none; }

.header { position:absolute; z-index:5; top:0; left:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; height:84px; padding:0 clamp(22px,6vw,86px); border-bottom:1px solid rgba(16,36,27,.1); }
.brand { display:flex; align-items:center; gap:11px; justify-self:start; }
.brand img { width:42px; height:42px; border-radius:12px; box-shadow:0 8px 20px rgba(7,95,61,.15); }
.brand span { display:flex; flex-direction:column; gap:2px; }
.brand strong { font-size:18px; letter-spacing:.12em; }
.brand small { color:#53685d; font-size:8px; letter-spacing:.15em; }
nav { display:flex; gap:34px; font-size:14px; font-weight:600; }
.contact-link { justify-self:end; padding:10px 18px; border:1px solid rgba(16,36,27,.25); border-radius:99px; font-size:13px; font-weight:700; }
nav a:hover,.contact-link:hover { color:var(--green); }

.hero { position:relative; min-height:730px; height:100vh; overflow:hidden; background:#edf6ef; }
.hero>img,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero>img { object-fit:cover; }
.hero-shade { background:linear-gradient(90deg,rgba(247,250,243,.99),rgba(247,250,243,.89) 38%,rgba(247,250,243,.08) 70%); }
.hero-content { position:relative; z-index:2; width:min(650px,55vw); padding:clamp(175px,23vh,225px) 0 70px clamp(22px,8vw,124px); }
.eyebrow { margin:0 0 22px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.2em; }
.eyebrow.light { color:#9bd3b0; }
h1 { margin:0; font-size:clamp(44px,5vw,74px); line-height:1.17; letter-spacing:-.055em; }
.lead { max-width:600px; margin:28px 0 0; color:#52665c; font-size:16px; line-height:1.9; }
.actions { display:flex; gap:13px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:0 24px; border-radius:99px; font-size:14px; font-weight:700; }
.primary { background:var(--green); color:#fff; box-shadow:0 14px 30px rgba(7,95,61,.2); }
.secondary { border:1px solid rgba(16,36,27,.25); background:rgba(255,255,255,.4); }

.section { padding:120px clamp(22px,8vw,124px); }
.services { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(55px,9vw,135px); }
h2 { margin:0; font-size:clamp(37px,4vw,58px); line-height:1.23; letter-spacing:-.04em; }
.service-list { border-top:1px solid var(--line); }
.service-item { display:grid; grid-template-columns:48px 1fr auto; gap:16px; padding:30px 0; border-bottom:1px solid var(--line); }
.number { padding-top:6px; color:#9aa69f; font:12px ui-monospace,monospace; }
.service-item h3 { margin:0 0 8px; font-size:22px; }
.service-item p { max-width:520px; margin:0; color:var(--muted); font-size:15px; line-height:1.75; }
.arrow { color:var(--green); font-size:20px; }

.product { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,10vw,150px); align-items:center; min-height:700px; padding:100px clamp(22px,10vw,155px); background:var(--deep); color:#fff; }
.product-copy h3 { max-width:530px; margin:24px 0 0; color:#daf0e2; font-size:22px; line-height:1.65; }
.product-copy>p:not(.eyebrow) { max-width:550px; color:rgba(255,255,255,.65); line-height:1.9; }
.tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.tags span { padding:9px 13px; border:1px solid rgba(255,255,255,.18); border-radius:99px; font-size:12px; }
.product-card { width:min(440px,100%); padding:20px; border-radius:34px; background:#eff5ed; color:var(--deep); transform:rotate(3deg); box-shadow:0 35px 70px rgba(0,0,0,.28); }
.product-card img { width:100%; border-radius:24px; }
.product-card div { display:flex; align-items:center; justify-content:space-between; padding:18px 4px 3px; }
.product-card span { font-size:10px; font-weight:800; letter-spacing:.15em; }

.about { display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:clamp(65px,10vw,150px); background:var(--cream); }
.about-art { position:relative; width:min(370px,100%); aspect-ratio:1; border:1px solid rgba(7,95,61,.14); border-radius:50%; background:radial-gradient(circle,#dbeadf 0 24%,transparent 25% 100%); }
.about-art:before { content:""; position:absolute; inset:22%; border:1px solid rgba(7,95,61,.15); border-radius:50%; }
.about-art i { position:absolute; width:16px; height:16px; border-radius:5px; background:#f2b741; }
.about-art i:nth-child(1){top:20%;left:48%}.about-art i:nth-child(2){top:35%;right:22%;background:#e76d6d}.about-art i:nth-child(3){bottom:25%;right:30%;background:#76b989}.about-art i:nth-child(4){bottom:23%;left:28%;background:#6d9fd3}.about-art i:nth-child(5){top:36%;left:20%;background:#ff8068}
.about-copy { max-width:650px; margin:27px 0 0; color:var(--muted); font-size:16px; line-height:1.95; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:38px; }
.values span { display:flex; flex-direction:column; gap:7px; padding-top:18px; border-top:1px solid var(--line); color:#7d8983; font-size:12px; }
.values strong { color:var(--ink); font-size:18px; }

.contact { padding:110px 22px; background:#0a2d20; color:#fff; text-align:center; }
.contact h2 { max-width:800px; margin:auto; }
.contact>p:not(.eyebrow) { margin:22px 0 32px; color:rgba(255,255,255,.64); }
.white { background:#fff; color:var(--deep); }
footer { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:38px clamp(22px,6vw,86px); background:#071f17; color:rgba(255,255,255,.58); font-size:12px; }
footer>div { display:flex; flex-direction:column; gap:7px; }
footer strong { color:#fff; font-size:14px; }
footer small { font-size:9px; letter-spacing:.07em; }
.footer-right { align-items:flex-end; }
.footer-right a { color:#fff; }

@media(max-width:860px){
  .header{grid-template-columns:1fr auto;height:74px}.header nav{display:none}.hero-content{width:min(620px,88vw);padding-top:155px}.services,.product,.about{grid-template-columns:1fr}.product-card,.about-art{margin:auto}.product{padding-block:85px}.about-art{width:min(320px,75vw)}
}
@media(max-width:560px){
  .header{padding-inline:17px}.brand img{width:37px;height:37px}.brand strong{font-size:16px}.brand small{display:none}.contact-link{padding:8px 13px}
  .hero{min-height:680px;height:auto}.hero>img{object-position:68% center}.hero-shade{background:rgba(247,250,243,.78)}.hero-content{width:100%;padding:140px 20px 115px}h1{font-size:41px}.lead{font-size:15px}.actions{flex-direction:column;width:min(100%,320px)}
  .section{padding:85px 20px}.services{gap:45px}.service-item{grid-template-columns:35px 1fr auto;gap:10px}
  .product{gap:50px;padding:78px 20px}.product-card{padding:14px;border-radius:24px}.product-card img{border-radius:17px}
  .values{grid-template-columns:1fr}.contact{padding:85px 20px}footer{flex-direction:column;align-items:flex-start}.footer-right{align-items:flex-start}
}