:root { --blue: #027f3a; --cyan: #39c77a; --ink: #11251a; --muted: #607d6c; --line: #d7eadf; --soft: #f4fbf7; --container: 1160px; --header-height: 74px; --product-nav-height: 40px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: var(--header-height); background: #1b1f24; border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; height: 100%; }
.brand { display: inline-flex; flex: 0 0 136px; align-items: center; }
.brand-logo { display: block; width: 136px; height: 43px; object-fit: contain; }
.header-links { display: flex; align-items: stretch; height: 100%; margin-left: 56px; color: #e5ede8; font-size: 16px; font-weight: 600; }
.header-links a { display: grid; place-items: center; padding: 0 20px; border-bottom: 3px solid transparent; white-space: nowrap; }
.header-links a:hover, .header-links a.active { border-bottom-color: #f0c73c; color: #fff; background: #087f39; }
.header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: auto; padding: 0 28px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--blue), #1b9a57); font-weight: 700; white-space: nowrap; }
.header-phone { display: inline-flex; align-items: center; gap: 12px; margin-left: 52px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.header-phone::before { width: 27px; height: 27px; background: #fff; content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.64a2 2 0 0 1-.45 2.11L8.01 9.74a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.86.29 1.74.5 2.64.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.64a2 2 0 0 1-.45 2.11L8.01 9.74a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.86.29 1.74.5 2.64.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; }
.product-nav { position: fixed; z-index: 900; top: var(--header-height); right: 0; left: 0; height: var(--product-nav-height); border-bottom: 1px solid #e6e9e7; background: rgba(255,255,255,.98); box-shadow: 0 8px 18px rgba(11,31,20,.08); }
.product-nav-inner { display: flex; align-items: stretch; justify-content: center; height: 100%; }
.product-nav a { display: grid; min-width: 70px; padding: 0 17px; place-items: center; color: #777; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.product-nav a.active { color: #fff; background: #087f39; }
.hero { padding: calc(var(--header-height) + var(--product-nav-height) + 70px) 0 66px; color: #fff; background: radial-gradient(circle at 9% 12%, rgba(2,127,58,.32), transparent 34%), radial-gradient(circle at 85% 0, rgba(57,199,122,.18), transparent 30%), linear-gradient(135deg,#09111f,#103b25); }
.breadcrumbs { margin-bottom: 24px; color: #b8d6c2; font-size: 13px; }.breadcrumbs a, .eyebrow { color: #5edc95; }.eyebrow { margin: 0 0 13px; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
h1,h2,h3 { line-height: 1.3; letter-spacing: -.025em; } h1 { margin: 0 0 17px; font-size: clamp(38px,5vw,60px); }.hero p { max-width: none; margin: 0; color: #bdd9c8; font-size: 18px; white-space: nowrap; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }.hero-meta span { padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #d8efdf; font-size: 13px; background: rgba(255,255,255,.07); }
.content { min-height: 520px; padding: 65px 0 85px; background: var(--soft); }.content-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }.content-head h2 { margin: 0 0 8px; font-size: 31px; }.content-head p,.article-card p,.notice p { margin: 0; color: var(--muted); }.back-link,.article-card .tag,.article-card .read { color: var(--blue); font-size: 14px; font-weight: 700; white-space: nowrap; }
.article-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }.article-card { display: flex; flex-direction: column; min-height: 200px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.article-card:hover { border-color: #8acfa8; box-shadow: 0 16px 35px rgba(2,127,58,.12); transform: translateY(-3px); }.article-card .tag { font-size: 12px; letter-spacing: .1em; }.article-card h3 { margin: 12px 0 9px; font-size: 22px; }.article-card p { flex: 1; font-size: 15px; }.article-card .read { margin-top: 17px; }.article-card.is-upcoming { cursor: default; }.article-card.is-upcoming .read { color: #8fae9a; }
.notice { margin-top: 46px; padding: 25px 28px; border: 1px solid #b9ddc8; border-left: 4px solid var(--blue); border-radius: 12px; background: #f4fbf7; }.notice h3 { margin: 0 0 8px; font-size: 20px; }
.site-footer { padding: 34px 0 23px; color: #9bb5a5; background: #272e36; font-size: 13px; }.footer-inner { display: flex; justify-content: space-between; gap: 25px; }.site-footer a:hover { color: #fff; }

    /* Keep secondary and tertiary navigation identical to the homepage. */
    :root { --product-nav-height: 52px; }
    .site-header { height: var(--header-height); background: #1b1f24; }
    .header-links a { transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
    .header-links a:hover { color: #fff; border-bottom-color: #f0c73c; background: rgba(2,127,58,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
    .header-cta { flex: 0 0 auto; white-space: nowrap; }
    .header-phone { margin-right: 24px; }
    .product-nav a { position: relative; font-size: 12px; transition: color .2s ease, background .2s ease, transform .2s ease; }
    .product-nav a:hover { color: var(--blue); background: #edf8f1; transform: translateY(-1px); }
    .product-nav a.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #f0c73c; content: ""; }

    @media (max-width: 840px) { :root { --header-height: 56px; --product-nav-height: 32px; }.header-links,.header-phone { display: none; }.brand-logo { width: 100px; height: auto; }.product-nav-inner { justify-content: flex-start; overflow-x: auto; }.product-nav a { padding-inline: 13px; font-size: 10px; }.hero { padding-top: calc(var(--header-height) + var(--product-nav-height) + 50px); }.content-head { align-items: flex-start; flex-direction: column; }.article-grid { grid-template-columns: 1fr; }.footer-inner { display: grid; gap: 8px; } }
@media (max-width: 560px) { .container { width: min(var(--container), calc(100% - 32px)); }.hero p { font-size: 16px; white-space: normal; }.content { padding: 48px 0 63px; } }