/* roulang page: index */
:root{
      --ink:#17212b;
      --muted:#687783;
      --soft:#f4f7f6;
      --paper:#ffffff;
      --line:#dce6e3;
      --green:#0e8b74;
      --green-dark:#076452;
      --mint:#d9f3e9;
      --yellow:#f3bf55;
      --navy:#153e4b;
      --shadow:0 18px 45px rgba(21,62,75,.10);
      --shadow-sm:0 8px 24px rgba(21,62,75,.07);
      --radius:18px;
      --radius-sm:11px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Manrope",sans-serif;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1180px}
    .topline{height:4px;background:var(--green)}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,230,227,.8)}
    .navbar{min-height:76px}
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:1.1rem;letter-spacing:0}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:"Manrope",sans-serif;font-weight:800;font-size:1.15rem}
    .brand small{display:block;color:var(--green);font-size:.68rem;line-height:1.1;font-weight:700;margin-top:1px}
    .nav-link{color:#50616a!important;font-weight:600;font-size:.94rem;padding:.65rem 1rem!important;border-radius:9px}
    .nav-link:hover,.nav-link.active{color:var(--green)!important;background:#eef8f4}
    .nav-action{color:#fff!important;background:var(--green);border-radius:9px;padding:.68rem 1.05rem!important}
    .nav-action:hover{background:var(--green-dark);transform:translateY(-1px)}
    .hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:78px 0 48px}
    .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,62,75,.98) 15%,rgba(21,62,75,.83) 52%,rgba(21,62,75,.38)),url("https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1800&q=85") center/cover}
    .hero .container{position:relative;z-index:1}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#b9f0db;font-size:.82rem;font-weight:700;letter-spacing:.08em;margin-bottom:17px}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--yellow)}
    .hero h1{font-size:clamp(2.25rem,4.5vw,4.25rem);line-height:1.15;letter-spacing:0;margin:0 0 22px;font-weight:900;max-width:760px}
    .hero-copy{font-size:1.08rem;color:#d8e9e7;max-width:720px;margin:0 0 30px}
    .hero-links{display:flex;gap:12px;flex-wrap:wrap}
    .btn-main,.btn-ghost{border-radius:10px;padding:.8rem 1.25rem;font-weight:700;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent}
    .btn-main{background:var(--yellow);color:#26363b}
    .btn-main:hover{background:#ffd477;color:#17212b;transform:translateY(-2px)}
    .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
    .btn-ghost:hover{background:#fff;color:var(--navy)}
    .roadmap{margin-top:65px;border-top:1px solid rgba(255,255,255,.25);padding-top:25px}
    .roadmap-title{font-size:.78rem;color:#b8d3d0;font-weight:700;margin-bottom:18px;letter-spacing:.08em}
    .roadmap-track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .road-node{position:relative;padding-left:18px;border-left:2px solid rgba(255,255,255,.22);min-height:55px}
    .road-node.current{border-color:var(--yellow)}
    .road-node b{display:block;font-size:.95rem}
    .road-node span{color:#a9c2c0;font-size:.78rem}
    .section{padding:88px 0}
    .section-soft{background:var(--soft)}
    .section-dark{background:#173f4b;color:#fff}
    .section-head{max-width:700px;margin-bottom:42px}
    .section-kicker{color:var(--green);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
    .section-dark .section-kicker{color:#aee9d2}
    h2{font-weight:900;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.25;letter-spacing:0;margin:0 0 15px}
    .section-head p{color:var(--muted);margin:0;font-size:1rem}
    .section-dark .section-head p{color:#c2d7d6}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .feature-card,.check-card,.quote-card,.news-card,.faq-item,.scene-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-sm);height:100%;transition:.25s ease}
    .feature-card:hover,.check-card:hover,.news-card:hover,.scene-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .icon-box{width:45px;height:45px;border-radius:12px;background:var(--mint);color:var(--green-dark);display:grid;place-items:center;font-size:1.25rem;font-weight:900;margin-bottom:18px}
    .feature-card h3,.check-card h3,.scene-card h3{font-size:1.15rem;margin:0 0 9px;font-weight:800}
    .feature-card p,.check-card p,.scene-card p{color:var(--muted);font-size:.92rem;margin:0}
    .split{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
    .check-list{display:grid;gap:13px;margin-top:25px}
    .check-row{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
    .check-mark{width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:#dff4e9;color:var(--green);display:grid;place-items:center;font-weight:900}
    .check-row strong{display:block;font-size:.98rem}
    .check-row span{display:block;color:var(--muted);font-size:.86rem}
    .visual-panel{min-height:390px;border-radius:22px;overflow:hidden;position:relative;background:url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=1000&q=85") center/cover;box-shadow:var(--shadow)}
    .visual-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(13,38,45,.86))}
    .visual-note{position:absolute;z-index:1;bottom:27px;left:27px;right:27px;color:#fff}
    .visual-note strong{font-size:1.3rem;display:block;margin-bottom:7px}
    .visual-note span{font-size:.88rem;color:#d1e5e1}
    .badge-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .seal{border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 17px;background:#fff;display:flex;align-items:center;gap:13px}
    .seal-mark{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font-weight:900}
    .seal b{font-size:.9rem;display:block}.seal span{font-size:.75rem;color:var(--muted)}
    .boundary{background:#fff7e7;border-left:4px solid var(--yellow);padding:26px 29px;border-radius:0 var(--radius) var(--radius) 0}
    .boundary h3{margin:0 0 8px;font-size:1.22rem}.boundary p{margin:0;color:#6c6250;font-size:.94rem}
    .matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .matrix-item{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
    .matrix-item strong{font-size:1.7rem;color:var(--green);display:block;font-family:"Manrope",sans-serif}
    .matrix-item span{display:block;font-size:.86rem;color:var(--muted);margin-top:4px}
    .scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}
    .scene-card{padding:0;overflow:hidden}
    .scene-image{height:145px;background-position:center;background-size:cover}
    .scene-content{padding:22px}
    .scene-content .tag{display:inline-block;color:var(--green);background:var(--mint);font-size:.72rem;padding:3px 8px;border-radius:5px;margin-bottom:10px}
    .news-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:18px}
    .news-card{padding:0;overflow:hidden}
    .news-image{height:170px;background-size:cover;background-position:center}
    .news-body{padding:22px}
    .news-meta{font-size:.74rem;color:var(--green);font-weight:700;margin-bottom:9px}
    .news-card h3{font-size:1.08rem;line-height:1.45;margin:0 0 9px}
    .news-card p{font-size:.86rem;color:var(--muted);margin:0}
    .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .quote-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
    .quote-card p{color:#d8e9e7;font-size:.94rem;margin:0 0 21px}
    .quote-card footer{display:flex;align-items:center;gap:10px;color:#fff;font-size:.84rem}
    .quote-avatar{width:35px;height:35px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:800}
    .faq-list{display:grid;gap:12px;max-width:900px}
    .faq-item{padding:0;overflow:hidden}
    .faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:800;display:flex;justify-content:space-between;gap:15px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";color:var(--green);font-size:1.3rem;line-height:1}
    .faq-item[open] summary:after{content:"−"}
    .faq-answer{padding:0 24px 21px;color:var(--muted);font-size:.92rem}
    .final-cta{padding:72px 0;background:var(--mint)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-inner h2{max-width:650px;margin-bottom:8px}.cta-inner p{color:var(--muted);margin:0}
    .footer{background:#102f38;color:#c6dcda;padding:54px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px}
    .footer .brand{color:#fff;margin-bottom:15px}.footer .brand small{color:#aee9d2}
    .footer p{font-size:.83rem;color:#9dbab7;max-width:300px}
    .footer h4{font-size:.9rem;color:#fff;margin:5px 0 15px}
    .footer a{display:block;color:#9dbab7;font-size:.84rem;margin:8px 0}.footer a:hover{color:#fff}
    .copyright{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;color:#88a6a4;font-size:.76rem;display:flex;justify-content:space-between;gap:15px}
    :focus-visible{outline:3px solid rgba(243,191,85,.75);outline-offset:3px}
    @media(max-width:991px){
      .hero{padding-top:62px}.split{gap:35px}.news-grid{grid-template-columns:repeat(2,1fr)}.news-card:first-child{grid-column:span 2}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:767px){
      .navbar{min-height:68px}.nav-action{display:inline-block;margin-top:7px}
      .hero{padding:54px 0 35px}.hero h1{font-size:2.35rem}.hero-copy{font-size:1rem}.roadmap{margin-top:45px}.roadmap-track{grid-template-columns:repeat(2,1fr);row-gap:22px}
      .section{padding:62px 0}.feature-grid,.scene-grid,.quote-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.visual-panel{min-height:300px}
      .badge-strip,.matrix{grid-template-columns:repeat(2,1fr)}.news-grid{grid-template-columns:1fr}.news-card:first-child{grid-column:auto}
      .cta-inner{display:block}.cta-inner .btn-main{margin-top:24px}
    }
    @media(max-width:520px){
      .brand{font-size:.96rem}.brand-mark{width:34px;height:34px}.hero h1{font-size:2rem}.hero-links>*{width:100%;justify-content:center}
      .roadmap-track,.badge-strip,.matrix{grid-template-columns:1fr}.section-head{margin-bottom:29px}.footer-grid{grid-template-columns:1fr;gap:24px}.copyright{display:block}.copyright span{display:block;margin-top:5px}
    }

/* roulang page: category1 */
:root{
 --ink:#17212b;
 --muted:#687783;
 --soft:#f4f7f6;
 --paper:#ffffff;
 --line:#dce6e3;
 --green:#0e8b74;
 --green-dark:#076452;
 --mint:#d9f3e9;
 --yellow:#f3bf55;
 --navy:#153e4b;
 --shadow:0 18px 45px rgba(21,62,75,.10);
 --shadow-sm:0 8px 24px rgba(21,62,75,.07);
 --radius:18px;
 --radius-sm:11px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
 margin:0;
 background:var(--paper);
 color:var(--ink);
 font-family:"Noto Sans SC","Manrope",sans-serif;
 line-height:1.75;
 overflow-x:hidden;
 -webkit-font-smoothing:antialiased;
}

body::selection{background:var(--mint);color:var(--navy)}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none;transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}
figure{margin:0}
section[id],div[id]{scroll-margin-top:100px}

a:focus-visible,
button:focus-visible,
summary:focus-visible{
 outline:3px solid rgba(14,139,116,.32);
 outline-offset:3px;
}

.container{
 width:100%;
 max-width:1180px;
 margin-left:auto;
 margin-right:auto;
 padding-left:20px;
 padding-right:20px;
}

.site-header{
 position:sticky;
 top:0;
 z-index:50;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(16px);
 border-bottom:1px solid rgba(220,230,227,.8);
}

.navbar{min-height:76px}

.brand{
 display:flex;
 align-items:center;
 gap:11px;
 color:var(--ink);
 font-weight:900;
 font-size:1.1rem;
 letter-spacing:0;
 white-space:nowrap;
}

.brand-mark{
 width:38px;
 height:38px;
 border-radius:12px;
 background:var(--navy);
 color:#fff;
 display:grid;
 place-items:center;
 font-family:"Manrope",sans-serif;
 font-weight:800;
 font-size:1.15rem;
 flex:0 0 auto;
}

.brand > span:last-child{
 line-height:1.2;
}

.brand small{
 display:block;
 color:var(--green);
 font-size:.68rem;
 line-height:1.1;
 font-weight:700;
 margin-top:2px;
}

.nav-link{
 color:#50616a!important;
 font-weight:600;
 font-size:.94rem;
 padding:.65rem 1rem!important;
 border-radius:9px;
}

.nav-link:hover,
.nav-link.active{
 color:var(--green)!important;
 background:#eef8f4;
}

.nav-action{
 color:#fff!important;
 background:var(--green);
 border-radius:9px;
 padding:.68rem 1.05rem!important;
}

.nav-action:hover{
 color:#fff!important;
 background:var(--green-dark);
 transform:translateY(-1px);
}

.navbar-toggler{
 padding:.55rem;
 border-radius:9px;
}

.navbar-toggler-icon{
 width:1.35rem;
 height:1rem;
 position:relative;
 background-image:none!important;
 border-top:2px solid var(--navy);
 border-bottom:2px solid var(--navy);
}

.navbar-toggler-icon::after{
 content:"";
 position:absolute;
 left:0;
 right:0;
 top:50%;
 height:2px;
 background:var(--navy);
 transform:translateY(-50%);
}

main{overflow:hidden}

.hero{
 position:relative;
 overflow:hidden;
}

.category-hero{
 padding:64px 0 0;
 background:#eef7f3;
 border-bottom:1px solid var(--line);
}

.category-hero::after{
 content:"";
 position:absolute;
 right:-12%;
 bottom:-38%;
 width:61%;
 height:82%;
 background:#e1f0e9;
 border-radius:58% 0 0 0;
 transform:rotate(-8deg);
}

.category-hero .container{
 position:relative;
 z-index:1;
}

.category-hero-top{
 padding-bottom:54px;
}

.eyebrow{
 display:inline-flex;
 align-items:center;
 gap:8px;
 color:#b9f0db;
 font-size:.82rem;
 font-weight:700;
 letter-spacing:.08em;
 margin-bottom:17px;
}

.eyebrow::before{
 content:"";
 width:24px;
 height:2px;
 background:var(--yellow);
}

.category-hero .eyebrow{
 color:var(--green-dark);
}

.category-hero .eyebrow::before{background:var(--green)}

.category-hero h1{
 max-width:700px;
 color:var(--navy);
 font-size:4rem;
 line-height:1.15;
 font-weight:900;
 letter-spacing:0;
 margin-bottom:20px;
}

.hero-copy{
 max-width:720px;
 color:#d8e9e7;
 font-size:1.08rem;
 margin-bottom:30px;
}

.category-hero .hero-copy{
 max-width:650px;
 color:#506a6b;
}

.hero-links{
 display:flex;
 align-items:center;
 gap:12px;
 flex-wrap:wrap;
}

.btn-main,
.btn-ghost{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 border-radius:10px;
 padding:.8rem 1.25rem;
 font-weight:700;
 border:1px solid transparent;
 line-height:1.35;
}

.btn-main{
 background:var(--yellow);
 color:#26363b;
}

.btn-main:hover{
 background:#ffd477;
 color:var(--ink);
 transform:translateY(-2px);
 box-shadow:0 8px 18px rgba(243,191,85,.24);
}

.btn-ghost{
 border-color:rgba(255,255,255,.4);
 color:#fff;
}

.btn-ghost:hover{
 background:#fff;
 color:var(--navy);
}

.category-hero .btn-ghost{
 color:var(--navy);
 border-color:#b8d2ca;
}

.category-hero .btn-ghost:hover{
 background:var(--navy);
 border-color:var(--navy);
 color:#fff;
}

.btn-main i,
.btn-ghost i{font-size:1rem}

.hero-panel{
 max-width:470px;
 margin-left:auto;
 padding:14px;
 background:rgba(255,255,255,.9);
 border:1px solid rgba(220,230,227,.95);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
}

.hero-panel-media{
 position:relative;
 overflow:hidden;
 border-radius:13px;
 background:var(--navy);
}

.hero-panel-media img{
 width:100%;
 aspect-ratio:1.25 / 1;
 object-fit:cover;
}

.hero-panel-caption{
 position:absolute;
 left:16px;
 right:16px;
 bottom:16px;
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:12px;
 padding:12px 14px;
 color:#fff;
 background:rgba(21,62,75,.88);
 border:1px solid rgba(255,255,255,.16);
 border-radius:11px;
}

.hero-panel-caption span{
 display:block;
 color:#b8d3d0;
 font-size:.74rem;
}

.hero-panel-caption strong{
 display:block;
 font-size:1rem;
}

.hero-readout{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:0;
 margin-top:14px;
}

.readout-cell{
 padding:3px 14px;
 border-right:1px solid var(--line);
}

.readout-cell:first-child{padding-left:4px}
.readout-cell:last-child{border-right:0}

.readout-cell span{
 display:block;
 color:var(--muted);
 font-size:.74rem;
 margin-bottom:3px;
}

.readout-cell strong{
 display:flex;
 align-items:center;
 gap:6px;
 color:var(--navy);
 font-size:.93rem;
 white-space:nowrap;
}

.status-dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 0 4px rgba(14,139,116,.12);
}

.path-bar{
 display:grid;
 grid-template-columns:150px minmax(0,1fr);
 align-items:center;
 gap:24px;
 padding:18px 0 22px;
 border-top:1px solid rgba(14,139,116,.16);
}

.path-label{
 color:var(--green-dark);
 font-size:.76rem;
 font-weight:800;
 letter-spacing:.08em;
}

.path-steps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:0;
}

.path-step{
 display:flex;
 align-items:center;
 gap:10px;
 min-width:0;
 padding:2px 16px;
 border-left:1px solid #c6ddd5;
 color:#536d6d;
}

.path-step:first-child{
 border-left:0;
 padding-left:0;
}

.path-step:hover{color:var(--green-dark)}

.path-step > span{
 display:grid;
 place-items:center;
 width:28px;
 height:28px;
 border-radius:50%;
 color:var(--green-dark);
 background:var(--mint);
 font-family:"Manrope",sans-serif;
 font-size:.72rem;
 font-weight:800;
 flex:0 0 auto;
}

.path-step strong{
 display:block;
 font-size:.82rem;
 line-height:1.3;
}

.path-step small{
 display:block;
 color:#849593;
 font-size:.7rem;
 margin-top:2px;
 line-height:1.3;
}

.section{
 padding:88px 0;
}

.section-soft{background:var(--soft)}

.section-dark{
 background:#173f4b;
 color:#fff;
}

.section-head{
 max-width:720px;
 margin-bottom:42px;
}

.section-kicker{
 color:var(--green);
 font-size:.78rem;
 font-weight:800;
 letter-spacing:.1em;
 text-transform:uppercase;
 margin-bottom:9px;
}

.section-dark .section-kicker{color:#aee9d2}

.section-head h2{
 max-width:780px;
 color:var(--ink);
 font-size:2.25rem;
 line-height:1.3;
 font-weight:900;
 letter-spacing:0;
 margin-bottom:14px;
}

.section-dark .section-head h2{color:#fff}

.section-head p{
 color:var(--muted);
 margin:0;
 font-size:1rem;
}

.section-dark .section-head p{color:#c2d7d6}

.overview-layout{
 display:grid;
 grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
 gap:56px;
 align-items:start;
}

.metric-stack{
 border-top:1px solid var(--line);
}

.metric-row{
 display:grid;
 grid-template-columns:48px minmax(0,1fr) auto;
 gap:18px;
 align-items:center;
 padding:20px 0;
 border-bottom:1px solid var(--line);
}

.metric-number{
 color:var(--green);
 font-family:"Manrope",sans-serif;
 font-size:.82rem;
 font-weight:800;
}

.metric-content strong{
 display:block;
 color:var(--ink);
 font-size:1.05rem;
 font-weight:800;
 margin-bottom:3px;
}

.metric-content span{
 display:block;
 color:var(--muted);
 font-size:.9rem;
}

.metric-state{
 color:var(--green-dark;font-size:.78rem;
 font-weight:700;
 white-space:nowrap;
}

.expand-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:16px;
}

.expand-card{
 position:relative;
 min-height:190px;
 padding:25px;
 background:#fff;
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-sm);
 transition:.25s ease;
}

.expand-card:hover{
 transform:translateY(-5px);
 box-shadow:var(--shadow);
 border-color:#b8d9ce;
}

.expand-card::before{
 content:"";
 position:absolute;
 top:0;
 left:25px;
 right:25px;
 height:3px;
 background:var(--green);
 border-radius:0 0 4px 4px;
 transform:scaleX(.35);
 transform-origin:left;
 transition:.25s ease;
}

.expand-card:hover::before{transform:scaleX(1)}

.card-icon{
 display:grid;
 place-items:center;
 width:40px;
 height:40px;
 margin-bottom:19px;
 border-radius:11px;
 color:var(--green-dark);
 background:var(--mint);
 font-size:1.15rem;
}

.expand-card h3{
 color:var(--ink);
 font-size:1.08rem;
 font-weight:800;
 margin-bottom:8px;
}

.expand-card p{
 color:var(--muted);
 font-size:.88rem;
 margin:0;
}

.notice-band{
 padding:25px 0;
 background:var(--yellow);
 color:#28383a;
}

.notice-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
}

.notice-title{
 display:flex;
 align-items:center;
 gap:12px;
 font-weight:800;
}

.notice-title i{
 display:grid;
 place-items:center;
 width:34px;
 height:34px;
 border-radius:50%;
 background:rgba(255,255,255,.45);
 color:#70551c;
}

.notice-inner p{
 max-width:650px;
 margin:0;
 font-size:.9rem;
}

.channel-layout{
 display:grid;
 grid-template-columns:270px minmax(0,1fr);
 gap:48px;
 align-items:start;
}

.channel-intro{
 position:sticky;
 top:110px;
}

.channel-intro h2{
 color:var(--navy);
 font-size:2rem;
 line-height:1.35;
 font-weight:900;
 margin-bottom:14px;
}

.channel-intro p{
 color:var(--muted);
 font-size:.92rem;
 margin-bottom:22px;
}

.channel-rule{
 display:flex;
 align-items:center;
 gap:8px;
 color:var(--green);
 font-size:.78rem;
 font-weight:800;
}

.channel-rule::before{
 content:"";
 width:25px;
 height:2px;
 background:var(--green);
}

.channel-list{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:14px;
}

.channel-item{
 display:flex;
 align-items:flex-start;
 gap:15px;
 padding:20px;
 background:#fff;
 border:1px solid var(--line);
 border-radius:var(--radius-sm);
 transition:.25s ease;
}

.channel-item:hover{
 border-color:#a8d5c7;
 box-shadow:var(--shadow-sm);
 transform:translateY(-3px);
}

.channel-item-number{
 color:var(--green);
 font-family:"Manrope",sans-serif;
 font-size:.78rem;
 font-weight:800;
 padding-top:3px;
}

.channel-item h3{
 color:var(--ink);
 font-size:1rem;
 line-height:1.45;
 font-weight:800;
 margin-bottom:5px;
}

.channel-item p{
 color:var(--muted);
 font-size:.83rem;
 line-height:1.65;
 margin:0;
}

.compare-wrap{
 display:grid;
 grid-template-columns:minmax(0,1fr) 260px;
 gap:22px;
 align-items:stretch;
}

.compare-table{
 width:100%;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.14);
 border-radius:var(--radius);
 background:rgba(255,255,255,.06);
}

.compare-row{
 display:grid;
 grid-template-columns:1.2fr repeat(3,1fr);
 align-items:center;
 min-height:63px;
 border-bottom:1px solid rgba(255,255,255,.12);
}

.compare-row:last-child{border-bottom:0}

.compare-row > div{
 padding:13px 17px;
 color:#d4e6e3;
 font-size:.84rem;
 border-left:1px solid rgba(255,255,255,.1);
}

.compare-row > div:first-child{
 color:#fff;
 font-weight:700;
 border-left:0;
}

.compare-row.head{
 min-height:50px;
 background:rgba(255,255,255,.07);
}

.compare-row.head > div{
 color:#aee9d2;
 font-size:.74rem;
 font-weight:800;
}

.compare-good{
 color:#b9f0db!important;
 font-weight:700;
}

.compare-note{
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 padding:25px;
 border-radius:var(--radius);
 background:var(--mint);
 color:var(--navy);
}

.compare-note i{
 color:var(--green);
 font-size:1.65rem;
}

.compare-note h3{
 font-size:1.18rem;
 line-height:1.45;
 font-weight:900;
 margin:20px 0 10px;
}

.compare-note p{
 color:#50716c;
 font-size:.84rem;
 margin:0;
}

.visual-section{
 padding:88px 0;
 background:#fff;
}

.visual-layout{
 display:grid;
 grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
 gap:54px;
 align-items:center;
}

.visual-frame{
 position:relative;
 padding:13px;
 background:#edf5f1;
 border-radius:24px;
}

.visual-frame img{
 width:100%;
 aspect-ratio:1.28 / 1;
 object-fit:cover;
 border-radius:16px;
}

.visual-frame::after{
 content:"";
 position:absolute;
 right:-18px;
 bottom:-18px;
 width:105px;
 height:105px;
 border-right:3px solid var(--yellow);
 border-bottom:3px solid var(--yellow);
 border-radius:0 0 17px 0;
 pointer-events:none;
}

.visual-caption{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 padding:16px 2px 0;
}

.visual-caption span{
 color:var(--muted);
 font-size:.78rem;
}

.visual-caption strong{
 color:var(--green-dark);
 font-family:"Manrope",sans-serif;
 font-size:.82rem;
}

.visual-copy h2{
 color:var(--navy);
 font-size:2.35rem;
 line-height:1.3;
 font-weight:900;
 margin-bottom:17px;
}

.visual-copy > p{
 color:var(--muted);
 margin-bottom:25px;
}

.signal-list{
 display:grid;
 gap:14px;
}

.signal-item{
 display:flex;
 align-items:flex-start;
 gap:12px;
 padding:14px 0;
 border-top:1px solid var(--line);
}

.signal-item i{
 color:var(--green);
 font-size:1.05rem;
 margin-top:3px;
}

.signal-item strong{
 display:block;
 color:var(--ink);
 font-size:.93rem;
 margin-bottom:2px;
}

.signal-item span{
 display:block;
 color:var(--muted);
 font-size:.82rem;
}

.quote-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
}

.quote-card{
 min-height:210px;
 padding:25px;
 background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.16);
 border-radius:var(--radius);
 box-shadow:none;
}

.quote-card p{
 color:#d8e9e7;
 font-size:.94rem;
 margin:0 0 21px;
}

.quote-card footer{
 display:flex;
 align-items:center;
 gap:10px;
 color:#fff;
 font-size:.84rem;
}

.quote-avatar{
 display:grid;
 place-items:center;
 width:33px;
 height:33px;
 border-radius:50%;
 color:var(--navy);
 background:var(--yellow);
 font-family:"Manrope",sans-serif;
 font-size:.75rem;
 font-weight:800;
}

.news-layout{
 display:grid;
 grid-template-columns:1.05fr .95fr;
 gap:38px;
 align-items:start;
}

.news-feature{
 padding:28px;
 border-radius:var(--radius);
 background:#edf7f3;
 border:1px solid #d5eae2;
}

.news-meta{
 display:inline-block;
 color:var(--green);
 font-size:.74rem;
 font-weight:800;
 letter-spacing:.04em;
 margin-bottom:14px;
}

.news-feature h2{
 color:var(--navy);
 font-size:1.55rem;
 line-height:1.45;
 font-weight:900;
 margin-bottom:12px;
}

.news-feature p{
 color:var(--muted);
 font-size:.9rem;
 margin-bottom:22px;
}

.news-link{
 display:inline-flex;
 align-items:center;
 gap:8px;
 color:var(--green-dark);
 font-weight:800;
 font-size:.86rem;
}

.news-link:hover{
 color:var(--green);
 gap:12px;
}

.news-list{
 border-top:1px solid var(--line);
}

.news-list-item{
 display:grid;
 grid-template-columns:82px minmax(0,1fr);
 gap:18px;
 padding:18px 0;
 border-bottom:1px solid var(--line);
}

.news-date{
 color:var(--green);
 font-family:"Manrope",sans-serif;
 font-size:.78rem;
 font-weight:800;
 padding-top:3px;
}

.news-list-item h3{
 color:var(--ink);
 font-size:.98rem;
 line-height:1.5;
 font-weight:800;
 margin-bottom:4px;
}

.news-list-item p{
 color:var(--muted);
 font-size:.82rem;
 margin:0;
}

.faq-list{
 display:grid;
 gap:12px;
 max-width:900px;
}

.faq-item{
 padding:0;
 overflow:hidden;
 background:#fff;
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-sm);
}

.faq-item summary{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px;
 padding:20px 24px;
 color:var(--ink);
 font-weight:800;
 cursor:pointer;
 list-style:none;
}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary::after{
 content:"+";
 color:var(--green);
 font-size:1.3rem;
 line-height:1;
}

.faq-item[open] summary::after{content:"−"}

.faq-answer{
 padding:0 24px 21px;
 color:var(--muted);
 font-size:.92rem;
}

.final-cta{
 padding:72px 0;
 background:var(--mint);
}

.cta-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.cta-inner h2{
 max-width:650px;
 color:var(--navy);
 font-size:2rem;
 line-height:1.35;
 font-weight:900;
 margin-bottom:8px;
}

.cta-inner p{
 color:var(--muted);
 margin:0;
}

.footer{
 background:#102f38;
 color:#c6dcda;
 padding:54px 0 24px;
}

.footer-grid{
 display:grid;
 grid-template-columns:1.3fr 1fr 1fr 1fr;
 gap:35px;
 padding-bottom:42px;
}

.footer .brand{
 color:#fff;
 margin-bottom:15px;
}

.footer .brand small{color:#aee9d2}

.footer p{
 max-width:280px;
 color:#a9c3c1;
 font-size:.83rem;
 line-height:1.8;
}

.footer h4{
 color:#fff;
 font-size:.86rem;
 font-weight:800;
 margin:4px 0 15px;
}

.footer-grid > div:not(:first-child) a{
 display:block;
 color:#a9c3c1;
 font-size:.82rem;
 margin:8px 0;
}

.footer-grid > div:not(:first-child) a:hover{
 color:#aee9d2;
 transform:translateX(3px);
}

.copyright{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 padding-top:22px;
 color:#86aaa8;
 font-size:.74rem;
 border-top:1px solid rgba(255,255,255,.13);
}

@media (max-width:1199px){
 .category-hero h1{font-size:3.5rem}
 .container{max-width:100%}
}

@media (max-width:991px){
 .navbar-collapse{
  padding:12px 0 17px;
 }
 .nav-link{margin:2px 0}
 .nav-action{
  display:inline-flex;
  margin-top:7px;
 }
 .category-hero{padding-top:52px}
 .category-hero-top{padding-bottom:42px}
 .category-hero h1{font-size:3rem}
 .hero-panel{margin:32px 0 0;max-width:100%}
 .hero-panel-media img{aspect-ratio:2 / 1}
 .path-bar{
  grid-template-columns:1fr;
  gap:13px;
 }
 .path-steps{gap:3px}
 .path-step{padding:2px 10px}
 .overview-layout,
 .visual-layout,
 .news-layout{grid-template-columns:1fr;gap:35px}
 .channel-layout{grid-template-columns:1fr;gap:25px}
 .channel-intro{position:static}
 .compare-wrap{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
 .footer-grid > div:last-child{grid-column:2}
}

@media (max-width:767px){
 .section,
 .visual-section{padding:62px 0}
 .category-hero{padding-top:40px}
 .category-hero h1{font-size:2.4rem}
 .hero-copy{font-size:.98rem}
 .hero-panel-media img{aspect-ratio:1.45 / 1}
 .hero-readout{grid-template-columns:repeat(3,1fr)}
 .readout-cell{padding:3px 8px}
 .readout-cell strong{font-size:.78rem}
 .path-steps{grid-template-columns:repeat(2,1fr);gap:9px}
 .path-step{
  padding:8px 0!important;
  border-left:0;
  border-bottom:1px solid #c6ddd5;
 }
 .path-step:nth-child(3),
 .path-step:nth-child(4){border-bottom:0}
 .section-head{margin-bottom:30px}
 .section-head h2,
 .visual-copy h2{font-size:1.8rem}
 .expand-grid,
 .channel-list{grid-template-columns:1fr}
 .metric-row{grid-template-columns:34px minmax(0,1fr);gap:11px}
 .metric-state{grid-column:2}
 .notice-inner{align-items:flex-start;flex-direction:column;gap:11px}
 .compare-row{grid-template-columns:1.15fr repeat(3,minmax(68px,1fr));min-width:610px}
 .compare-table{overflow-x:auto}
 .compare-row > div{padding:12px 10px;font-size:.75rem}
 .visual-frame::after{right:-8px;bottom:-8px}
 .quote-grid{grid-template-columns:1fr}
 .quote-card{min-height:auto}
 .cta-inner{align-items:flex-start;flex-direction:column}
 .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}
 .footer-grid > div:first-child{grid-column:1 / -1}
 .footer-grid > div:last-child{grid-column:auto}
 .copyright{align-items:flex-start;flex-direction:column;gap:5px}
}

@media (max-width:520px){
 .container{padding-left:16px;padding-right:16px}
 .navbar{min-height:68px}
 .brand{font-size:.98rem;gap:8px}
 .brand-mark{width:34px;height:34px;border-radius:10px;font-size:1rem}
 .brand small{font-size:.6rem}
 .category-hero h1{font-size:2rem}
 .hero-links{align-items:stretch;flex-direction:column}
 .hero-links a{width:100%}
 .hero-panel{padding:9px}
 .hero-panel-caption{left:10px;right:10px;bottom:10px;padding:9px 10px}
 .hero-panel-caption strong{font-size:.84rem}
 .hero-readout{margin-top:10px}
 .readout-cell:first-child{padding-left:0}
 .readout-cell:last-child{padding-right:0}
 .readout-cell span{font-size:.66rem}
 .readout-cell strong{font-size:.7rem}
 .path-steps{grid-template-columns:1fr}
 .path-step:nth-child(3){border-bottom:1px solid #c6ddd5}
 .path-step:nth-child(4){border-bottom:0}
 .metric-row{padding:16px 0}
 .metric-content strong{font-size:.94rem}
 .metric-content span{font-size:.8rem}
 .expand-card{min-height:0;padding:21px}
 .channel-item{padding:17px}
 .news-feature{padding:21px}
 .news-list-item{grid-template-columns:68px minmax(0,1fr);gap:12px}
 .faq-item summary{padding:17px 18px;font-size:.9rem}
 .faq-answer{padding:0 18px 18px;font-size:.84rem}
 .footer{padding-top:42px}
 .footer-grid{grid-template-columns:1fr}
 .footer-grid > div:first-child,
 .footer-grid > div:last-child{grid-column:auto}
 .cta-inner h2{font-size:1.65rem}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}