
:root{--ink:#15333f;--muted:#60747b;--brand:#0e6f77;--brand2:#0f8e87;--soft:#eef8f7;--line:#dce9e8;--accent:#f4b860;--white:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{color:inherit}.topbar{background:#0d3640;color:#fff;padding:9px 18px;text-align:center;font-size:14px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;gap:20px}
.logo{text-decoration:none;font-size:28px;font-weight:800;color:var(--brand)}.logo span{color:var(--ink)}
.navlinks{display:flex;gap:18px;flex-wrap:wrap}.navlinks a{text-decoration:none;font-weight:700;font-size:14px}
.hero{background:linear-gradient(135deg,#e8f7f5,#fdf7ea);padding:62px 20px}
.hero-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.3fr .7fr;gap:35px;align-items:center}
.hero h1{font-size:54px;line-height:1.05;margin:0 0 18px}.hero p{font-size:20px;color:var(--muted);max-width:720px}
.hero-card{background:white;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 12px 35px rgba(18,66,73,.08)}
.badge{display:inline-block;background:var(--soft);color:var(--brand);padding:7px 12px;border-radius:999px;font-size:13px;font-weight:800}
.container{max-width:1180px;margin:auto;padding:42px 20px}
.section-title{font-size:34px;margin:0 0 10px}.section-copy{color:var(--muted);margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(18,66,73,.05)}
.card img{width:100%;height:190px;object-fit:cover;display:block}.card-body{padding:20px}.card h3{margin:0 0 8px;font-size:21px}.card p{color:var(--muted);font-size:14px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:12px 18px;border-radius:10px;font-weight:800}.btn:hover{background:var(--brand2)}
.article-wrap{max-width:860px;margin:auto;padding:42px 20px 110px}.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:18px}.article-wrap h1{font-size:44px;line-height:1.12}.article-wrap h2{margin-top:32px;font-size:28px}
.meta{color:var(--muted);font-size:14px;margin-bottom:22px}.hero-img{width:100%;border-radius:20px;border:1px solid var(--line);margin:18px 0 28px}
.note{background:#f7fbfb;border-left:5px solid var(--brand);padding:16px 18px;border-radius:10px}.warning{background:#fff8eb;border-left-color:#d2942f}
.share{border:1px solid var(--line);padding:18px;border-radius:16px;margin:28px 0}.share a,.share button{display:inline-block;margin:4px;padding:9px 12px;border:0;border-radius:8px;background:#eef4f5;text-decoration:none;font-weight:700;cursor:pointer}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.related a{border:1px solid var(--line);padding:14px;border-radius:12px;text-decoration:none;font-weight:700}
footer{background:#0d3640;color:#dce7e9;padding:42px 20px}.foot{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}.foot a{color:#fff}
.sticky-cta{position:fixed;right:18px;bottom:18px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.15);padding:12px;border-radius:16px;z-index:30;max-width:260px}.sticky-cta strong{display:block;margin-bottom:8px}
.mobile-nav{display:none}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.hero-inner{grid-template-columns:1fr}.hero h1{font-size:42px}.navlinks{display:none}.foot{grid-template-columns:1fr}.article-wrap h1{font-size:36px}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.hero{padding:40px 16px}.hero h1{font-size:38px}.container{padding:30px 16px}.article-wrap{padding:28px 16px 120px}.related{grid-template-columns:1fr}.sticky-cta{left:12px;right:12px;bottom:66px;max-width:none}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:10px 8px;z-index:40}.mobile-nav a{text-decoration:none;font-weight:800;font-size:13px}}
