/* roulang page: index */
:root{
--primary:#1B4332;--gold:#D4AF6A;--darkbg:#0F2A23;--cream:#F8F6F2;--text:#1B2A24;--text2:#5A6B63;--text3:#8A9B93;
--border:rgba(27,67,50,.14);--success:#2D6A4F;--warn:#B08968;--error:#A44A3F;--radius:12px;--radius2:6px;--radius3:8px;
--shadow:0 2px 8px rgba(27,43,36,.06);--shadow2:0 8px 24px rgba(27,43,36,.10);--shadow3:0 12px 32px rgba(0,0,0,.12);
--space:72px;--space-mobile:48px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--text);line-height:1.75;font-size:1rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s ease-out}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:'Noto Serif SC',Georgia,serif;line-height:1.3}
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.section{padding-top:var(--space);padding-bottom:var(--space)}
.section-head{text-align:center;margin-bottom:48px}
.section-head .eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px;background:rgba(212,175,106,.1);padding:4px 14px;border-radius:20px}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--primary);font-weight:600;margin-bottom:12px}
.section-head p{color:var(--text2);font-size:.95rem;max-width:560px;margin-left:auto;margin-right:auto}
.site-header{background:var(--primary);height:72px;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{font-family:'Noto Serif SC',serif;font-size:1.25rem;font-weight:600;color:#fff;letter-spacing:.02em;white-space:nowrap}
.logo span{color:var(--gold)}
.primary-nav{display:flex;align-items:center;gap:36px}
.nav-item{position:relative;color:rgba(255,255,255,.85);font-size:.95rem;font-weight:500;padding:8px 0;letter-spacing:.02em;transition:color .25s ease-out}
.nav-item::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:2px;background:var(--gold);transition:width .25s ease-out,left .25s ease-out}
.nav-item:hover{color:var(--gold)}
.nav-item:hover::after{width:100%;left:0;transform:none}
.nav-item.active{color:var(--gold)}
.nav-item.active::after{width:100%;left:0;transform:none}
.mega-trigger{position:relative}
.mega-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:var(--radius2);padding:8px 18px;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:8px;transition:all .25s ease-out}
.mega-btn .arrow{display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease-out}
.mega-trigger:hover .mega-btn{background:rgba(212,175,106,.18);border-color:var(--gold);color:var(--gold)}
.mega-trigger:hover .mega-btn .arrow{transform:rotate(225deg) translateY(0)}
.mega-panel{position:absolute;top:calc(100% + 12px);right:0;width:740px;background:#fff;border-radius:0 0 14px 14px;box-shadow:var(--shadow3);border-top:3px solid var(--gold);padding:28px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease-out,transform .25s ease-out,visibility .25s ease-out;z-index:1001}
.mega-trigger:hover .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.mega-panel h5{font-family:'Noto Sans SC',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:600;margin-bottom:14px}
.mega-list{list-style:none}
.mega-list li{margin-bottom:10px}
.mega-list a{font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:8px;transition:color .2s ease-out}
.mega-list a::before{content:'›';color:var(--gold);font-weight:700}
.mega-list a:hover{color:var(--primary)}
.mega-news-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(27,67,50,.07)}
.mega-news-item:last-child{border-bottom:none}
.mega-news-item a{font-size:.85rem;color:var(--text);line-height:1.4;display:block}
.mega-news-item a:hover{color:var(--primary)}
.mega-news-item time{font-size:.7rem;color:var(--text3);white-space:nowrap;margin-left:12px}
.mega-cta{background:linear-gradient(135deg,var(--darkbg),var(--primary));border-radius:var(--radius);padding:20px;text-align:center;color:#fff}
.mega-cta h6{font-family:'Noto Sans SC',sans-serif;font-size:.95rem;font-weight:600;margin-bottom:4px;color:var(--gold)}
.mega-cta p{font-size:.8rem;color:rgba(255,255,255,.7);margin-bottom:14px;line-height:1.5}
.mega-cta a{display:inline-block;background:var(--gold);color:var(--darkbg);font-size:.82rem;font-weight:600;padding:8px 20px;border-radius:20px;transition:all .25s ease-out}
.mega-cta a:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px}
.hamburger span{display:block;height:2px;background:#fff;border-radius:2px;transition:all .3s ease-out}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--darkbg);z-index:999;padding:24px;transform:translateX(100%);transition:transform .3s ease-out;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav .nav-item{display:block;color:rgba(255,255,255,.85);font-size:1.05rem;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .nav-item.active{color:var(--gold)}
.mobile-nav .mega-btn{margin-top:16px;width:100%;justify-content:center}
.hero{background:linear-gradient(90deg,rgba(15,42,35,.94) 0%,rgba(27,67,50,.78) 45%,rgba(15,42,35,.5) 100%),url('/assets/images/backpic/back-1.png') center/cover no-repeat;padding-top:160px;padding-bottom:120px;position:relative}
.hero-content{max-width:640px}
.hero h1{font-size:clamp(2.1rem,4vw,3.4rem);color:#fff;font-weight:600;line-height:1.25;margin-bottom:20px}
.hero h1 .gold{color:var(--gold)}
.hero-sub{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.8;margin-bottom:36px;max-width:520px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius2);font-size:.95rem;font-weight:500;transition:all .25s ease-out;border:none;line-height:1.4}
.btn-gold{background:var(--gold);color:var(--darkbg)}
.btn-gold:hover{background:#e0c07a;transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,175,106,.35)}
.btn-gold:active{transform:translateY(0)}
.btn-outline-light{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-outline-dark{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-outline-dark:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-solid{background:var(--primary);color:#fff}
.btn-solid:hover{background:#264b3c;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-white{background:#fff;color:var(--darkbg)}
.btn-white:hover{background:var(--gold);color:var(--darkbg);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,255,255,.3)}
.trust-bar{background:#fff;border-radius:16px;box-shadow:var(--shadow2);margin-top:-40px;margin-bottom:60px;padding:28px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:10;border:1px solid rgba(27,67,50,.06)}
.trust-item{text-align:center;padding:8px 12px}
.trust-item .num{display:block;font-family:'Noto Serif SC',serif;font-size:1.8rem;font-weight:600;color:var(--primary);line-height:1.2}
.trust-item .label{display:block;font-size:.8rem;color:var(--text2);margin-top:6px;letter-spacing:.02em}
.pricing-section{background:#fff}
.pricing-layout{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:32px;align-items:start;position:relative}
.pricing-layout::before{content:'';position:absolute;left:8%;right:8%;top:70%;border-top:2px dashed rgba(212,175,106,.35);transform:rotate(-1.5deg);pointer-events:none;z-index:0}
.pricing-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;position:relative;z-index:1;box-shadow:var(--shadow);transition:box-shadow .3s ease-out,transform .3s ease-out}
.pricing-card:hover{box-shadow:var(--shadow2)}
.pricing-card .plan-name{font-family:'Noto Sans SC',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.08em;color:var(--text2);text-transform:uppercase;margin-bottom:12px}
.pricing-card .price{color:var(--gold);font-family:'Noto Serif SC',serif;font-size:2.6rem;font-weight:700;line-height:1;margin-bottom:20px}
.pricing-card .price small{font-size:1rem;font-weight:400;color:var(--text3);margin-left:4px}
.pricing-card ul{list-style:none;margin-bottom:28px}
.pricing-card ul li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:.9rem;color:var(--text);line-height:1.5}
.pricing-card ul li .check{color:var(--success);font-weight:700;flex-shrink:0;font-size:1rem}
.pricing-card .btn{width:100%}
.pricing-card.featured{transform:scale(1.15);border-color:var(--gold);box-shadow:0 8px 30px rgba(212,175,106,.25);z-index:2}
.pricing-card.featured:hover{box-shadow:0 12px 36px rgba(212,175,106,.35)}
.pricing-card.featured .plan-name{color:var(--gold)}
.pricing-card.premium{margin-top:24px}
.badge-recommend{position:absolute;top:-12px;right:20px;background:var(--gold);color:var(--darkbg);font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.05em;box-shadow:0 4px 12px rgba(212,175,106,.35)}
.compare-section{background:var(--cream)}
.compare-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:stretch;max-width:960px;margin:0 auto}
.compare-divider{width:2px;background:linear-gradient(180deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);position:relative}
.compare-plan{background:#fff;border-radius:var(--radius);padding:40px 36px;box-shadow:var(--shadow);border:1px solid var(--border)}
.compare-plan h3{font-size:1.4rem;color:var(--primary);margin-bottom:8px}
.compare-plan .scene{font-size:.88rem;color:var(--text2);margin-bottom:24px;line-height:1.6}
.compare-plan ul{list-style:none}
.compare-plan ul li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:.92rem;border-bottom:1px solid rgba(27,67,50,.06)}
.compare-plan ul li:last-child{border-bottom:none}
.compare-plan .diff{color:var(--gold);font-weight:600}
.compare-plan .btn{margin-top:28px;width:100%}
.limited-section{background-color:var(--darkbg);background-image:linear-gradient(rgba(212,175,106,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,106,.04) 1px,transparent 1px);background-size:40px 40px;padding-top:80px;padding-bottom:80px;text-align:center;color:#fff;position:relative;overflow:hidden}
.limited-inner{max-width:680px;margin:0 auto}
.badge-gold{display:inline-block;background:var(--gold);color:var(--darkbg);font-size:.75rem;font-weight:700;padding:4px 16px;border-radius:20px;letter-spacing:.06em;margin-bottom:20px}
.limited-section h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;margin-bottom:16px;color:#fff}
.limited-section p{color:rgba(255,255,255,.75);font-size:.95rem;max-width:480px;margin:0 auto 32px}
.countdown{display:flex;justify-content:center;gap:20px;margin-bottom:36px}
.count-num{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px 22px;min-width:82px;transition:border-color .25s ease-out}
.count-num .num{display:block;font-family:'Noto Serif SC',serif;font-size:2.2rem;font-weight:600;color:var(--gold);line-height:1}
.count-num .label{margin-top:6px;font-size:.72rem;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}
.news-section{background:#fff}
.news-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:20px}
.news-head h2{font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--primary);font-weight:600}
.news-head .eyebrow{display:block;font-size:.75rem;letter-spacing:.08em;color:var(--gold);font-weight:600;margin-bottom:6px;background:rgba(212,175,106,.1);padding:2px 12px;border-radius:20px;width:fit-content}
.news-head .more-link{white-space:nowrap;font-size:.9rem;color:var(--primary);font-weight:500;display:flex;align-items:center;gap:4px;transition:color .2s ease-out}
.news-head .more-link:hover{color:var(--gold)}
.news-list{display:flex;flex-direction:column;gap:16px}
.news-card{display:flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .3s ease-out,background .3s ease-out;box-shadow:var(--shadow)}
.news-card:hover{box-shadow:var(--shadow2);background:#F0EDE8}
.news-thumb{width:180px;flex-shrink:0;overflow:hidden;background:#eee}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.news-card:hover .news-thumb img{transform:scale(1.03)}
.news-body{flex:1;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.news-body h3{font-size:1.05rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;transition:color .3s ease-out}
.news-card:hover .news-body h3{color:var(--primary)}
.news-body p{font-size:.88rem;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.news-meta{display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--text3)}
.news-meta .badge{background:rgba(212,175,106,.15);color:#8a6d2f;font-size:.7rem;font-weight:600;padding:2px 10px;border-radius:20px}
.news-empty{background:var(--cream);border:1px dashed var(--border);border-radius:var(--radius);padding:56px 24px;text-align:center;color:var(--text3);font-size:.95rem}
.faq-section{background:var(--cream)}
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(27,67,50,.12);transition:background .25s ease-out;border-radius:8px 8px 0 0}
.faq-item:hover{background:#F0EDE8}
.faq-item.active{background:#F0EDE8}
.faq-item.active .faq-q{border-left:3px solid var(--gold)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:transparent;border:none;padding:22px 20px;font-size:1rem;font-weight:600;color:var(--text);text-align:left;font-family:'Noto Sans SC',sans-serif;border-left:3px solid transparent;transition:border-color .25s ease-out}
.faq-q .icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary);transition:all .25s ease-out;background:#fff}
.faq-item.active .faq-q .icon{transform:rotate(45deg);border-color:var(--gold);color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease-out;padding:0 20px}
.faq-a p{padding-bottom:22px;font-size:.9rem;color:var(--text2);line-height:1.75}
.contact-section{background:#fff}
.contact-layout{display:grid;grid-template-columns:40% 60%;gap:56px;max-width:1100px;margin:0 auto}
.contact-info h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--primary);font-weight:600;margin-bottom:16px}
.contact-info>p{color:var(--text2);font-size:.95rem;margin-bottom:32px;line-height:1.8}
.info-list{list-style:none}
.info-list li{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.info-list .icon-box{width:44px;height:44px;border-radius:12px;background:rgba(212,175,106,.12);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.1rem;flex-shrink:0}
.info-list .info-label{font-size:.75rem;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.info-list .info-value{font-size:.95rem;color:var(--text);font-weight:500;line-height:1.5}
.contact-form{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.contact-form h3{font-size:1.25rem;color:var(--primary);font-weight:600;margin-bottom:24px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.85rem;color:var(--primary);font-weight:500;margin-bottom:7px}
.form-group label .req{color:var(--error);margin-left:2px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:#fff;border:1px solid rgba(27,67,50,.2);border-radius:var(--radius3);padding:12px 14px;font-size:.9rem;font-family:'Noto Sans SC',sans-serif;color:var(--text);transition:border-color .25s ease-out,box-shadow .25s ease-out;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,106,.2)}
.form-group textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-submit{width:100%;background:var(--primary);color:#fff;padding:14px 28px;border-radius:var(--radius2);font-size:.95rem;font-weight:600;border:none;transition:all .25s ease-out}
.btn-submit:hover{background:#264b3c;transform:translateY(-2px);box-shadow:var(--shadow2)}
.btn-submit:active{transform:translateY(0)}
.site-footer{background:var(--darkbg);color:rgba(255,255,255,.75);padding-top:72px}
.footer-layout{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:48px;padding-bottom:48px}
.footer-brand .logo{font-size:1.3rem;margin-bottom:16px;display:block}
.footer-brand p{font-size:.88rem;line-height:1.8;color:rgba(255,255,255,.6)}
.footer-title{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:.88rem;color:rgba(255,255,255,.7)}
.footer-links a:hover{color:var(--gold)}
.footer-contact{list-style:none}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:12px}
.footer-contact span{color:var(--gold);flex-shrink:0}
.copyright{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.35)}
@media (max-width:1024px){
:root{--space:56px}
.container{padding-left:20px;padding-right:20px}
.pricing-layout{grid-template-columns:1fr 1fr;gap:24px}
.pricing-card.premium{grid-column:1/3;margin-top:8px}
.pricing-card.featured{grid-column:1/3;transform:scale(1.02);margin-top:8px}
.compare-layout{grid-template-columns:1fr;gap:24px}
.compare-divider{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent)}
.contact-layout{grid-template-columns:1fr;gap:36px}
.footer-layout{grid-template-columns:1fr 1fr;gap:32px}
.mega-panel{width:600px}
.trust-bar{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
.site-header{height:60px}
.mobile-nav{top:60px}
.hero{padding-top:100px;padding-bottom:80px}
.hero h1{font-size:calc(2rem + 0.2vw)}
.hero-sub{font-size:.95rem}
.primary-nav{display:none}
.mega-trigger{display:none}
.hamburger{display:flex}
.trust-bar{margin-top:-32px;grid-template-columns:repeat(2,1fr);padding:20px 16px;gap:16px}
.trust-item .num{font-size:1.4rem}
.pricing-layout{grid-template-columns:1fr;gap:20px}
.pricing-card,.pricing-card.premium,.pricing-card.featured{grid-column:1;transform:none;margin-top:0}
.badge-recommend{top:-10px;right:14px}
.news-head{flex-direction:column;align-items:flex-start;gap:8px}
.news-card{flex-direction:column}
.news-thumb{width:100%;height:110px}
.news-body{padding:16px 18px}
.news-body h3{white-space:normal;overflow:visible;text-overflow:unset;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.contact-layout{grid-template-columns:1fr}
.contact-form{padding:24px 20px}
.form-row{grid-template-columns:1fr}
.footer-layout{grid-template-columns:1fr;gap:32px}
.footer-brand .logo{margin-bottom:12px}
.footer-contact li,.footer-links li{line-height:2}
.countdown{flex-wrap:wrap;gap:12px}
.count-num{min-width:64px;padding:12px 14px}
.count-num .num{font-size:1.5rem}
.mega-panel{display:none}
.mobile-nav .mega-panel-static{display:block;background:rgba(255,255,255,.05);border-radius:12px;padding:16px;margin-top:16px}
.mobile-nav .mega-panel-static h5{color:var(--gold);font-size:.8rem;margin-bottom:10px}
.mobile-nav .mega-panel-static ul{list-style:none}
.mobile-nav .mega-panel-static ul li{margin-bottom:8px}
.mobile-nav .mega-panel-static ul a{color:rgba(255,255,255,.7);font-size:.9rem}
}
@media (max-width:520px){
:root{--space:48px}
.container{padding-left:16px;padding-right:16px}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn{width:100%}
.trust-bar{grid-template-columns:1fr 1fr;gap:12px;padding:16px 12px}
.trust-item .num{font-size:1.2rem}
.trust-item .label{font-size:.72rem}
.pricing-card{padding:22px 18px}
.compare-plan{padding:28px 20px}
.count-num{min-width:56px;padding:10px 10px}
.count-num .num{font-size:1.3rem}
.news-thumb{height:90px}
}
:focus-visible{outline:3px solid rgba(212,175,106,.5);outline-offset:2px}

/* roulang page: category1 */
:root {
  --primary: #1B4332;
  --accent: #D4AF6A;
  --bg: #F8F6F2;
  --dark: #0F2A23;
  --text: #1B2A24;
  --text-sub: #5A6B63;
  --muted: #8A9B93;
  --border: rgba(27, 67, 50, 0.14);
  --radius: 12px;
  --radius-large: 20px;
  --shadow: 0 2px 8px rgba(27, 43, 36, 0.06);
  --shadow-hover: 0 8px 24px rgba(27, 43, 36, 0.10);
  --transition: 0.25s ease-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  padding-top: 72px;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3 {
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  line-height: 1.3;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border: 1px solid rgba(212, 175, 106, 0.6);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
  background: rgba(212, 175, 106, 0.08);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.section-tag.light {
  color: var(--accent);
  border-color: rgba(212, 175, 106, 0.45);
  background: rgba(212, 175, 106, 0.06);
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  background: var(--primary);
  box-shadow: 0 2px 10px rgba(15, 42, 35, 0.18);
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: "Noto Serif SC", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.logo span {
  color: var(--accent);
  margin: 0 2px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  padding: 8px 0;
  transition: color var(--transition);
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.nav-item:hover {
  color: var(--accent);
}

.nav-item:hover::after,
.nav-item.active::after {
  transform: scaleX(1);
}

.nav-item.active {
  color: var(--accent);
}

/* Mega menu */
.mega-wrap {
  position: relative;
}

.mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.mega-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

.mega-arrow {
  font-size: 0.7rem;
  transition: transform var(--transition);
}

.mega-wrap:hover .mega-arrow,
.mega-wrap.open .mega-arrow {
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 660px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}

.mega-wrap:hover .mega-panel,
.mega-wrap.open .mega-panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.mega-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 14px 14px 0 0;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.2fr;
  gap: 24px;
  padding: 26px 28px 28px;
}

.mega-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.mega-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}

.mega-links a:hover {
  color: var(--accent);
}

.mega-news {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mega-news li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-news a {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.5;
  transition: color var(--transition);
}

.mega-news a:hover {
  color: var(--primary);
}

.mega-news span {
  font-size: 0.75rem;
  color: var(--muted);
}

.mega-cta {
  background: var(--bg);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mega-cta-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.mega-cta p {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: "Noto Sans SC", sans-serif;
  border: none;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn-gold {
  background: var(--accent);
  color: #1B2A24;
}

.btn-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 106, 0.35);
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline-dark:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Hero / category banner */
.category-hero {
  position: relative;
  background: linear-gradient(92deg, rgba(15, 42, 35, 0.96), rgba(15, 42, 35, 0.72) 55%, rgba(15, 42, 35, 0.56)), url('/assets/images/backpic/back-1.png') center/cover no-repeat;
  padding: 64px 0 72px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.bc-sep {
  color: var(--accent);
}

.hero-copy {
  max-width: 760px;
}

.hero-badge {
  display: inline-block;
  padding: 5px 16px;
  border: 1px solid rgba(212, 175, 106, 0.45);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 20px;
}

.category-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.85;
  max-width: 640px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Single column content */
.single-col {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 16px 0;
}

.content-section {
  margin-bottom: 64px;
}

.content-section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}

.lead {
  font-size: 1rem;
  color: var(--text-sub);
  line-height: 1.85;
  margin-bottom: 32px;
}

.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.media-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding-bottom: 22px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.media-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.media-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.media-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 20px;
  margin-bottom: 8px;
}

.media-card p {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.7;
  padding: 0 20px;
  margin-bottom: 14px;
}

.dot-list {
  list-style: none;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dot-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--text-sub);
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Steps */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}

.step-item {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 16px 0;
}

.step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 48px;
  bottom: -8px;
  width: 1px;
  background: rgba(212, 175, 106, 0.35);
}

.step-num {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--accent);
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
}

.step-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.step-item p {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.7;
}

/* Security band */
.security-band {
  background: linear-gradient(90deg, rgba(15, 42, 35, 0.95), rgba(15, 42, 35, 0.82)), url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  padding: 72px 0;
  margin-top: 56px;
}

.security-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 12px;
}

.security-band .section-tag.light {
  margin-bottom: 16px;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.security-item {
  background: rgba(248, 246, 242, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: background var(--transition), transform var(--transition);
}

.security-item:hover {
  background: rgba(248, 246, 242, 0.1);
  transform: translateY(-2px);
}

.sec-icon {
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.security-item h3 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.security-item p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

/* FAQ */
.faq-list {
  border-top: 1px solid var(--border);
  margin-top: 28px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.faq-item:hover {
  background: #F0EDE8;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 6px;
  background: none;
  border: none;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--primary);
}

.faq-icon {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform var(--transition);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-item.open .faq-question {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer p {
  padding: 0 16px 18px;
  font-size: 0.9rem;
  color: var(--text-sub);
  line-height: 1.75;
}

/* Related cards */
.related-section {
  padding: 72px 24px 0;
}

.section-head {
  margin-bottom: 28px;
}

.section-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--text);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.card-image {
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.card:hover .card-image img {
  transform: scale(1.03);
}

.card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 3px 12px;
  border: 1px solid rgba(212, 175, 106, 0.55);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--primary);
  margin-bottom: 12px;
}

.card-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  transition: color var(--transition);
}

.card-body p {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 16px;
}

.card-arrow {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary);
  transition: color var(--transition);
}

.card:hover .card-arrow {
  color: var(--accent);
}

/* CTA / contact */
.cta-section {
  padding: 72px 24px;
}

.cta-box {
  background: #fff;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  padding: 40px;
}

.cta-info h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--text);
  margin-bottom: 14px;
}

.cta-info > p {
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.8;
  margin-bottom: 22px;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-list li {
  font-size: 0.9rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-list li span {
  color: var(--accent);
}

.cta-form {
  background: var(--bg);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 6px;
}

.req {
  color: #A44A3F;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(27, 67, 50, 0.2);
  border-radius: 8px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.2);
}

.form-control::placeholder {
  color: var(--muted);
  font-size: 0.86rem;
}

textarea.form-control {
  resize: vertical;
}

.form-note {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* Footer */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.74);
  padding-top: 56px;
}

.footer-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}

.footer-brand .logo {
  font-size: 1.3rem;
  margin-bottom: 16px;
  display: inline-block;
}

.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.66);
  max-width: 340px;
}

.footer-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact li span {
  color: var(--accent);
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.46);
}

/* Responsive */
@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }

  .site-header,
  .header-inner {
    height: 60px;
  }

  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--primary);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 99;
  }

  .site-header.nav-open .primary-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .primary-nav .nav-item {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .primary-nav .nav-item::after {
    display: none;
  }

  .mega-wrap {
    width: 100%;
    padding-top: 8px;
  }

  .mega-trigger {
    width: 100%;
    justify-content: space-between;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .mega-panel {
    position: static;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transform: none;
    margin-top: 10px;
  }

  .mega-wrap.open .mega-panel {
    visibility: visible;
    opacity: 1;
  }

  .mega-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .container {
    padding: 0 16px;
  }

  .category-hero {
    padding: 48px 0 56px;
  }

  .single-col {
    padding: 56px 16px 0;
  }

  .content-section {
    margin-bottom: 48px;
  }

  .media-split,
  .related-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }

  .related-section,
  .cta-section {
    padding: 56px 16px;
  }

  .security-band {
    padding: 56px 0;
  }

  .cta-box {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 22px;
  }

  .card-image img {
    height: 180px;
  }

  .footer-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 520px) {
  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-sub {
    font-size: 0.92rem;
  }

  .category-hero h1 {
    font-size: 1.7rem;
  }

  .cta-box {
    padding: 20px 16px;
  }

  .content-section h2 {
    font-size: 1.4rem;
  }
}

/* roulang page: article */
:root {
  --primary: #1B4332;
  --primary-dark: #0F2A23;
  --accent: #D4AF6A;
  --accent-strong: #C8A45C;
  --bg: #F8F6F2;
  --bg-soft: #F0EDE8;
  --text: #1B2A24;
  --text-secondary: #5A6B63;
  --text-muted: #8A9B93;
  --border: rgba(27, 67, 50, 0.14);
  --success: #2D6A4F;
  --warning: #B08968;
  --error: #A44A3F;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --shadow: 0 2px 8px rgba(27, 43, 36, 0.06);
  --shadow-lg: 0 8px 24px rgba(27, 43, 36, 0.10);
  --container: 1200px;
  --transition: 0.25s ease-out;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: 'Noto Serif SC', 'Songti SC', serif; line-height: 1.3; font-weight: 600; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-accent { background: var(--accent); color: #1B2A24; }
.btn-accent:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212, 175, 106, 0.35); }
.btn-accent:active { transform: translateY(0); box-shadow: none; }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.btn-outline-dark { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline-dark:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-outline-dark:active { transform: translateY(0); }

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: var(--primary);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(15, 42, 35, 0.18);
}
.header-inner { height: 72px; display: flex; align-items: center; gap: 32px; }
.logo {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease-out;
}
.logo:hover { color: var(--accent); }
.logo span { color: var(--accent); margin: 0 2px; }
.primary-nav { display: flex; align-items: center; gap: 6px; flex: 1; }
.nav-item {
  position: relative;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  transition: color 0.2s ease-out;
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-out;
}
.nav-item:hover { color: var(--accent); }
.nav-item:hover::after { transform: scaleX(1); }
.nav-item.active { color: var(--accent); }
.nav-item.active::after { transform: scaleX(1); }

/* ===== Mega Menu ===== */
.mega-trigger { position: relative; }
.mega-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease-out;
}
.mega-btn:hover { color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.mega-arrow { display: inline-block; transition: transform 0.2s ease-out; }
.mega-trigger:hover .mega-arrow { transform: rotate(180deg); }
.mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 680px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-top: 3px solid var(--accent);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease-out;
  z-index: 1200;
}
.mega-trigger:hover .mega-panel,
.mega-trigger:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.mega-heading {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.mega-links li { margin-bottom: 10px; }
.mega-links a { color: var(--text-secondary); font-size: 0.92rem; transition: all 0.2s; }
.mega-links a:hover { color: var(--primary); padding-left: 4px; }
.mega-news li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mega-news a { color: var(--text-secondary); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 155px; transition: color 0.2s; }
.mega-news a:hover { color: var(--primary); }
.mega-news em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); }
.mega-cta {
  background: linear-gradient(135deg, rgba(27, 67, 50, 0.06), rgba(212, 175, 106, 0.12));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.mega-cta strong { display: block; font-family: 'Noto Serif SC', serif; font-size: 0.98rem; color: var(--primary); margin-bottom: 4px; }
.mega-cta p { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 12px; }
.mega-cta a { font-size: 0.85rem; font-weight: 500; color: var(--primary); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.2s; }
.mega-cta a:hover { color: var(--accent-strong); }

/* ===== Mobile Menu ===== */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; background: none; border: none; }
.mobile-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.2s ease-out; }
.mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }

/* ===== Breadcrumb ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-secondary); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--accent); font-size: 1.05rem; line-height: 1; }
.breadcrumb .current { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.breadcrumb-light a, .breadcrumb-light .sep, .breadcrumb-light .current { color: rgba(255, 255, 255, 0.6); }
.breadcrumb-light a:hover { color: var(--accent); }

/* ===== Article Banner / Header ===== */
.article-main { padding-top: 72px; }
.article-banner {
  background:
    linear-gradient(115deg, rgba(10, 30, 24, 0.95) 15%, rgba(27, 67, 50, 0.88) 60%, rgba(15, 42, 35, 0.82) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255, 255, 255, 0.035) 39px, rgba(255, 255, 255, 0.035) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255, 255, 255, 0.035) 39px, rgba(255, 255, 255, 0.035) 40px),
    url('/assets/images/backpic/back-2.webp') center 30% / cover no-repeat;
  padding: 48px 0 40px;
  border-bottom: 3px solid var(--accent);
}
.article-header { padding: 32px 0 24px; text-align: center; }
.category-badge {
  display: inline-block;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  border: 1px solid rgba(212, 175, 106, 0.55);
  border-radius: 999px;
  background: rgba(212, 175, 106, 0.08);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.article-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.article-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Article Body ===== */
.article-layout { max-width: 760px; margin: 0 auto; padding: 48px 0 56px; }
.article-body { font-size: 1rem; line-height: 1.9; color: var(--text); }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-size: 1.5rem; margin: 40px 0 16px; color: var(--primary); }
.article-body h3 { font-size: 1.2rem; margin: 32px 0 12px; color: var(--primary); }
.article-body h4 { font-size: 1.05rem; margin: 28px 0 12px; color: var(--primary); }
.article-body img { border-radius: var(--radius); margin: 32px auto; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  margin: 24px 0;
  color: var(--text-secondary);
}
.article-body ul, .article-body ol { margin: 16px 0 24px; padding-left: 24px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--primary); border-bottom: 1px solid var(--accent); transition: color 0.2s; }
.article-body a:hover { color: var(--accent-strong); }
.article-body hr { border: none; height: 1px; background: var(--border); margin: 40px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.92rem; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.article-body th { background: var(--bg-soft); color: var(--primary); font-weight: 600; }
.article-body figure { margin: 24px 0; }
.article-body figcaption { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.article-body pre {
  background: var(--primary-dark);
  color: #E8EDEA;
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 24px 0;
}
.article-body code { font-family: Consolas, Monaco, monospace; font-size: 0.88em; background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-empty { text-align: center; padding: 80px 24px; }
.article-empty p { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 20px; }

/* ===== Post Nav ===== */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 8px 0 0;
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.post-nav-item:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.post-nav-label { font-size: 0.8rem; color: var(--accent-strong); font-weight: 600; letter-spacing: 0.05em; }
.post-nav-title { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.post-nav-next { text-align: right; }

/* ===== Related ===== */
.related-section {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27, 67, 50, 0.03), transparent 60%);
}
.related-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.related-header h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--primary); }
.more-link { font-size: 0.88rem; color: var(--text-secondary); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.2s; }
.more-link:hover { color: var(--primary); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-image {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-soft), #e5e0d8);
}
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
.card:hover .card-image img { transform: scale(1.03); }
.card-body { padding: 20px; }
.card-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent-strong);
  border: 1px solid rgba(212, 175, 106, 0.5);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 10px;
  background: rgba(212, 175, 106, 0.06);
}
.card-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.card-title:hover { color: var(--primary); }
.card-summary {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}
.card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); }
.read-link { color: var(--text-muted); transition: color 0.2s; }
.read-link:hover { color: var(--primary); }

/* ===== CTA Band ===== */
.cta-band {
  background:
    linear-gradient(rgba(15, 42, 35, 0.93), rgba(15, 42, 35, 0.93)),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255, 255, 255, 0.04) 39px, rgba(255, 255, 255, 0.04) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255, 255, 255, 0.04) 39px, rgba(255, 255, 255, 0.04) 40px),
    url('/assets/images/backpic/back-3.webp') center / cover no-repeat;
  border-radius: var(--radius);
  padding: 56px 48px;
  margin: 16px 0 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(212, 175, 106, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  background: rgba(212, 175, 106, 0.08);
}
.cta-band h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; max-width: 540px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Footer ===== */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 0;
  scroll-margin-top: 72px;
}
.footer-layout { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; padding-bottom: 48px; }
.footer-brand .logo { font-size: 1.2rem; display: inline-block; margin-bottom: 14px; }
.footer-brand p { font-size: 0.88rem; line-height: 1.8; color: rgba(255, 255, 255, 0.6); max-width: 380px; }
.footer-title { font-size: 0.9rem; font-weight: 600; color: #fff; margin-bottom: 18px; letter-spacing: 0.05em; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); transition: color 0.2s, padding-left 0.2s; }
.footer-links a:hover { color: var(--accent); padding-left: 4px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); margin-bottom: 12px; }
.footer-contact span { color: var(--accent); }
.copyright { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); text-align: center; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .header-inner { gap: 12px; }
  .logo { font-size: 1.2rem; }
  .nav-item { padding: 8px 10px; font-size: 0.88rem; }
  .mega-panel { width: 580px; }
  .mega-grid { gap: 18px; }
  .footer-layout { grid-template-columns: 1fr 1fr; gap: 36px; }
  .related-grid { gap: 18px; }
  .cta-band { padding: 48px 36px; }
}
@media (max-width: 768px) {
  .site-header { height: 60px; }
  .header-inner { height: 60px; gap: 10px; }
  .primary-nav, .mega-trigger { display: none; }
  .mobile-toggle { display: flex; margin-left: auto; }
  .mobile-menu {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--primary-dark);
    padding: 20px 24px 32px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all 0.25s ease-out;
    z-index: 1100;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-nav a { display: block; }
  .mobile-link {
    padding: 12px 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s;
  }
  .mobile-link:hover { color: var(--accent); }
  .mobile-mega summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 8px;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mobile-mega summary::-webkit-details-marker { display: none; }
  .mobile-mega .arrow { display: inline-block; transition: transform 0.2s; }
  .mobile-mega[open] summary .arrow { transform: rotate(180deg); }
  .mobile-mega-list { padding: 4px 0 12px; }
  .mobile-sub-link {
    display: block;
    padding: 10px 8px 10px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.2s;
  }
  .mobile-sub-link:hover { color: var(--accent); }
  .article-main { padding-top: 60px; }
  .article-banner { padding: 32px 0 32px; }
  .article-header { padding: 24px 0 16px; }
  .related-grid { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; flex-direction: column; align-items: flex-start; }
  .footer-layout { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .site-footer { padding-top: 48px; }
}
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .article-meta { flex-direction: column; gap: 8px; }
  .article-layout { padding: 32px 0 40px; }
  .related-grid { gap: 16px; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .footer-layout { gap: 24px; }
}