:root { --brand:#008e6b; --success:#46b065; --soft:#dcecb5; --paper:#fbfff2; --ink:#103c34; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; } main { max-width:720px; margin:auto; padding:0 18px 36px; } .topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #d8e7d5; } .brand { display:flex; gap:10px; align-items:center; } .brand img { width:54px; height:54px; object-fit:contain; border-radius:14px; background:#fff; } .brand strong { display:block; font-size:19px; } .brand span { display:block; margin-top:5px; color:#62796f; font-size:13px; } .outline,.primary { text-decoration:none; border-radius:999px; font-weight:700; } .outline { color:var(--ink); border:1px solid #81c570; padding:11px 20px; } .hero { margin-top:20px; padding:38px 30px; border-radius:30px; background:var(--soft); } .hero>span,.section>span,.contact>span { color:#297a67; font-size:13px; letter-spacing:2px; font-weight:800; } h1 { margin:20px 0 15px; font-size:42px; line-height:1.24; letter-spacing:-2px; } h2 { margin:12px 0; font-size:27px; } p { color:#526f66; line-height:1.7; } .primary { display:inline-block; margin-top:16px; background:var(--brand); color:#fff; padding:15px 23px; } .section,.contact { margin-top:46px; } .grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } article { min-height:164px; padding:18px; background:#fff; border:1px solid #d4e7da; border-radius:20px; box-shadow:0 9px 22px rgba(21,84,65,.05); } article i { display:grid; place-items:center; width:30px; height:30px; margin-bottom:14px; border-radius:10px; background:var(--soft); color:var(--brand); font-style:normal; font-weight:900; } article b { display:block; font-size:16px; } article p { margin:7px 0 0; font-size:13px; } .availability { padding:22px; border-radius:22px; background:#f0f8dc; } .contact { padding:26px; border-radius:24px; background:var(--brand); color:#fff; } .contact span,.contact p { color:#e2f4d0; } .contact strong { display:block; margin-top:16px; font-size:28px; letter-spacing:1px; } @media (max-width:390px) { main { padding-left:14px; padding-right:14px; } .hero { padding:30px 22px; } h1 { font-size:38px; } }