/* roulang page: index */
:root{
            --blue:#2563eb;
            --blue-deep:#1746a2;
            --blue-soft:#eaf2ff;
            --cyan:#0ea5b7;
            --ink:#14213d;
            --muted:#63708a;
            --line:#dbe5f2;
            --bg:#f6f9fd;
            --card:#ffffff;
            --warm:#fff6ef;
            --coral:#e88962;
            --success:#18866b;
            --shadow:0 18px 48px rgba(28,61,112,.10);
            --shadow-sm:0 8px 24px rgba(28,61,112,.08);
            --radius-lg:26px;
            --radius-md:18px;
            --radius-sm:12px;
            --container:1220px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--bg);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        :focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .eyebrow{
            display:inline-flex;align-items:center;gap:9px;
            color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.08em;
            text-transform:uppercase;
        }
        .eyebrow::before{content:"";width:22px;height:2px;background:var(--blue);border-radius:2px}
        .section{padding:108px 0}
        .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
        .section-head h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.035em}
        .section-head p{max-width:570px;margin:0;color:var(--muted)}
        .pill{
            display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
            color:var(--blue-deep);background:var(--blue-soft);font-size:12px;font-weight:700;
        }
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:9px;
            min-height:48px;padding:0 21px;border-radius:999px;border:1px solid transparent;
            font-weight:700;transition:.22s ease;white-space:nowrap;
        }
        .btn-primary{color:#fff;background:var(--blue);box-shadow:0 10px 22px rgba(37,99,235,.20)}
        .btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
        .btn-primary:active{transform:translateY(0);box-shadow:none}
        .btn-secondary{color:var(--blue-deep);background:#fff;border-color:#bcd0ed}
        .btn-secondary:hover{background:var(--blue-soft);border-color:var(--blue)}
        .btn-muted{color:var(--muted);background:#eef3f8;border-color:#e1e8f0}
        .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
        
        .site-header{position:relative;z-index:20;padding:22px 0}
        .nav-shell{
            display:flex;align-items:center;gap:24px;padding:12px 14px 12px 21px;
            border:1px solid rgba(185,205,232,.75);background:rgba(255,255,255,.92);
            box-shadow:var(--shadow-sm);border-radius:999px;backdrop-filter:blur(14px);
        }
        .brand{display:flex;align-items:center;gap:11px;min-width:260px;font-weight:800;line-height:1.15}
        .brand-mark{
            display:grid;place-items:center;width:35px;height:35px;border-radius:11px;
            color:#fff;background:linear-gradient(145deg,#2f7af4,#1444a4);font-size:13px;
        }
        .brand-text{font-size:14px;letter-spacing:-.02em}
        .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
        .nav-links a{padding:9px 14px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:650;transition:.2s}
        .nav-links a:hover,.nav-links a.active{color:var(--blue-deep);background:var(--blue-soft)}
        .nav-cta{min-height:42px;padding:0 17px;font-size:13px}
        .menu-toggle{display:none;border:0;background:var(--blue-soft);color:var(--blue-deep);border-radius:50%;width:42px;height:42px}
        
        .hero{padding:64px 0 94px;overflow:hidden}
        .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.92fr);gap:76px;align-items:center}
        .hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.12;letter-spacing:-.055em;margin:18px 0 24px;max-width:680px}
        .hero h1 strong{color:var(--blue)}
        .hero-copy{font-size:18px;color:var(--muted);max-width:640px;margin:0 0 30px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:33px;color:var(--muted);font-size:13px}
        .trust-row span{display:flex;align-items:center;gap:7px}
        .trust-row i{width:7px;height:7px;background:var(--cyan);border-radius:50%}
        .stage{
            position:relative;min-height:420px;padding:28px;border:1px solid #cfe0f5;
            border-radius:34px;background:#edf5ff;box-shadow:var(--shadow);overflow:hidden;
        }
        .stage::before,.stage::after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
        .stage::before{width:230px;height:230px;right:-65px;top:-70px;background:#cfe1ff}
        .stage::after{width:180px;height:180px;left:-70px;bottom:-70px;background:#d6f2f0}
        .stage-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
        .stage-title{font-weight:800;font-size:15px}
        .stage-index{font-size:12px;color:var(--blue);font-weight:800}
        .preview-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
        .preview-card{position:relative;min-height:154px;padding:17px;border-radius:18px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#376fd2,#163875)}
        .preview-card.large{grid-row:span 2;min-height:322px;background:linear-gradient(155deg,#1d5ac7 0%,#42a7b7 100%)}
        .preview-card:nth-child(2){background:linear-gradient(150deg,#7789bb,#424c78)}
        .preview-card:nth-child(3){background:linear-gradient(150deg,#d28b75,#795a86)}
        .preview-card::after{content:"";position:absolute;width:150px;height:150px;right:-45px;bottom:-50px;border:22px solid rgba(255,255,255,.14);border-radius:50%}
        .preview-no{font-size:12px;opacity:.75}
        .preview-card h3{position:absolute;left:17px;bottom:18px;right:12px;margin:0;font-size:17px;line-height:1.35}
        .stage-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:#536987;font-size:12px}
        
        .service-grid{display:grid;grid-template-columns:1.08fr .92fr 1fr 1fr;gap:16px}
        .service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:25px;min-height:218px;transition:.22s ease}
        .service-card:hover{transform:translateY(-4px);border-color:#9dbbe5;box-shadow:var(--shadow-sm)}
        .service-card:nth-child(2){margin-top:28px}
        .service-card:nth-child(4){margin-top:-17px}
        .card-no{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.1em}
        .service-card h3{margin:34px 0 9px;font-size:20px}
        .service-card p{color:var(--muted);font-size:14px;margin:0}
        .service-link{display:inline-block;margin-top:17px;color:var(--blue);font-size:13px;font-weight:700}
        
        .metrics{background:#edf5ff;border-top:1px solid #dce9f8;border-bottom:1px solid #dce9f8}
        .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
        .metric{padding:10px 28px;border-right:1px solid #cdddef}
        .metric:first-child{padding-left:0}.metric:last-child{border-right:0}
        .metric strong{display:block;color:var(--blue-deep);font-size:27px;line-height:1.2;margin-bottom:5px}
        .metric span{font-size:14px;font-weight:700}.metric small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
        
        .case-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
        .case-feature,.case-item{border:1px solid var(--line);background:#fff;border-radius:var(--radius-lg);transition:.22s ease}
        .case-feature{padding:29px;display:grid;grid-template-columns:1fr .9fr;gap:25px;min-height:300px}
        .case-feature:hover,.case-item:hover{box-shadow:var(--shadow-sm);border-color:#abc5e7;transform:translateY(-3px)}
        .case-feature h3{font-size:28px;line-height:1.3;margin:18px 0 12px}
        .case-feature p,.case-item p{color:var(--muted);font-size:14px;margin:0}
        .case-visual{border-radius:20px;min-height:240px;background:linear-gradient(135deg,#dcecff,#84b6ed 50%,#bddbd8);position:relative;overflow:hidden}
        .case-visual::before{content:"01";position:absolute;right:20px;top:12px;color:rgba(20,65,130,.2);font-size:64px;font-weight:900}
        .case-visual::after{content:"专题入口";position:absolute;left:20px;bottom:18px;padding:8px 12px;background:rgba(255,255,255,.8);border-radius:9px;color:var(--blue-deep);font-size:12px;font-weight:800}
        .case-stack{display:grid;gap:18px}
        .case-item{padding:24px;display:flex;flex-direction:column;justify-content:space-between}
        .case-item h3{font-size:19px;margin:13px 0 8px}
        .case-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin-top:18px}
        
        .plans{background:#fff}
        .plan-grid{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:16px;align-items:stretch}
        .plan{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--bg);position:relative}
        .plan.featured{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 18px 35px rgba(37,99,235,.22);transform:translateY(-12px)}
        .plan .step{font-size:13px;font-weight:800;color:var(--blue)}
        .plan.featured .step,.plan.featured p,.plan.featured li{color:#dbe8ff}
        .plan h3{font-size:22px;margin:17px 0 10px}.plan p{color:var(--muted);font-size:14px;margin:0 0 20px}
        .plan ul{list-style:none;padding:0;margin:0}.plan li{padding:9px 0;border-top:1px solid var(--line);font-size:14px}
        .plan.featured li{border-color:rgba(255,255,255,.22)}
        .plan li::before{content:"✓";color:var(--cyan);font-weight:800;margin-right:9px}.plan.featured li::before{color:#a7f2e3}
        
        .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}
        .faq-intro h2{font-size:38px;line-height:1.25;margin:14px 0}.faq-intro p{color:var(--muted)}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{display:flex;justify-content:space-between;gap:18px;width:100%;padding:21px 0;border:0;background:none;color:var(--ink);text-align:left;font-weight:750}
        .faq-question span:last-child{color:var(--blue);font-size:22px;line-height:1;transition:.2s}
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 35px 21px 0}
        .faq-item.open .faq-answer{display:block}.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        
        .contact-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;padding:48px;border-radius:30px;background:#eaf3ff;border:1px solid #d1e1f4}
        .contact-panel h2{font-size:35px;line-height:1.25;margin:14px 0}.contact-panel p{color:var(--muted);font-size:15px}
        .contact-note{display:flex;gap:10px;align-items:flex-start;margin-top:26px;color:#536987;font-size:13px}
        .contact-note b{color:var(--blue)}
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
        .field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}
        .field label{font-size:13px;font-weight:750;color:var(--ink)}
        .field input,.field textarea,.field select{width:100%;border:1px solid #c9d8eb;border-radius:12px;background:#fff;color:var(--ink);padding:12px 14px;transition:.2s}
        .field textarea{min-height:108px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.1);outline:0}
        .form-foot{display:flex;align-items:center;gap:16px;margin-top:17px}.form-status{font-size:12px;color:var(--muted)}
        
        .site-footer{padding:50px 0 25px;background:#fff;border-top:1px solid var(--line)}
        .footer-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:37px}
        .footer-brand{max-width:315px}.footer-brand .brand{min-width:0}.footer-brand p{color:var(--muted);font-size:13px;margin:18px 0 0}
        .footer-nav{display:flex;gap:65px}.footer-group h3{font-size:13px;margin:0 0 13px}.footer-group a{display:block;color:var(--muted);font-size:13px;margin:8px 0}.footer-group a:hover{color:var(--blue)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid var(--line);color:#7b8799;font-size:12px}
        .access-tip{color:#8b6b5c}
        
        @media (max-width:1024px){
            .hero-grid{gap:36px;grid-template-columns:1fr 1fr}.brand{min-width:220px}
            .service-grid{grid-template-columns:repeat(2,1fr)}.service-card:nth-child(2),.service-card:nth-child(4){margin-top:0}
            .case-feature{grid-template-columns:1fr}.case-visual{min-height:180px}
        }
        @media (max-width:767px){
            .container{width:min(100% - 32px,var(--container))}
            .section{padding:72px 0}.site-header{padding:14px 0}
            .nav-shell{padding:10px 12px 10px 15px}.brand{min-width:0;flex:1}.brand-text{font-size:12px}.brand-mark{width:32px;height:32px}
            .menu-toggle{display:block}.nav-links{display:none;position:absolute;top:70px;left:16px;right:16px;padding:12px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
            .nav-links.open{display:flex}.nav-links a{padding:13px 15px}.nav-cta{display:none}
            .hero{padding:42px 0 70px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:39px}.hero-copy{font-size:16px}
            .stage{min-height:350px;padding:20px}.preview-card.large{min-height:265px}.preview-card{min-height:125px}
            .section-head{display:block;margin-bottom:28px}.section-head p{margin-top:15px}
            .service-grid,.plan-grid,.case-layout,.faq-layout,.contact-panel{grid-template-columns:1fr}.plan.featured{transform:none}
            .metric-row{grid-template-columns:1fr 1fr;gap:20px}.metric{padding:0 0 0 16px;border-right:0;border-left:1px solid #cdddef}.metric:nth-child(odd){border-left:0;padding-left:0}
            .case-feature{padding:22px}.case-feature h3{font-size:24px}.faq-layout{gap:35px}
            .contact-panel{padding:28px 22px;gap:30px}.contact-panel h2{font-size:29px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.form-foot{align-items:flex-start;flex-direction:column}
            .footer-top,.footer-bottom{display:block}.footer-nav{margin-top:28px;gap:35px;flex-wrap:wrap}.footer-bottom span{display:block;margin-top:8px}
        }
        @media (max-width:420px){
            .brand-text{max-width:170px}.hero h1{font-size:34px}.hero-actions .btn{width:100%}
            .preview-grid{gap:9px}.preview-card h3{font-size:14px}.stage-foot{display:block}.stage-foot span{display:block;margin-top:5px}
        }

/* roulang page: category1 */
:root{
 --blue:#2563eb;
 --blue-deep:#1746a2;
 --blue-soft:#eaf2ff;
 --blue-pale:#f2f7ff;
 --cyan:#0ea5b7;
 --ink:#14213d;
 --muted:#63708a;
 --line:#dbe5f2;
 --bg:#f6f9fd;
 --card:#ffffff;
 --warm:#fff6ef;
 --coral:#e88962;
 --success:#18866b;
 --danger:#c84e4e;
 --warning:#b96b21;
 --shadow:0 18px 48px rgba(28,61,112,.10);
 --shadow-sm:0 8px 24px rgba(28,61,112,.08);
 --radius-lg:26px;
 --radius-md:18px;
 --radius-sm:12px;
 --container:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--ink);
 background:var(--bg);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
 font-size:16px;
 line-height:1.75;
 -webkit-font-smoothing:antialiased;
 overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,input,textarea,select{outline:none}
::selection{color:#fff;background:var(--blue)}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.skip-link{
 position:fixed;left:16px;top:-80px;z-index:100;
 padding:10px 16px;color:#fff;background:var(--blue-deep);
 border-radius:10px;transition:.2s;
}
.skip-link:focus{top:16px}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;
 color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.08em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue);border-radius:2px}
.pill{
 display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
 color:var(--blue-deep);background:var(--blue-soft);font-size:12px;font-weight:700;
}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:48px;padding:0 21px;border-radius:999px;border:1px solid transparent;
 font-weight:700;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
 white-space:nowrap;
}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 10px 22px rgba(37,99,235,.20)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-secondary{color:var(--blue-deep);background:#fff;border-color:#bcd0ed}
.btn-secondary:hover{background:var(--blue-soft);border-color:var(--blue);transform:translateY(-2px)}
.btn-muted{color:var(--muted);background:#eef3f8;border-color:#e1e8f0}
.btn-muted:hover{color:var(--blue-deep);background:var(--blue-soft)}
.btn:disabled,.btn.is-loading{opacity:.55;cursor:not-allowed;transform:none}
.btn:focus-visible,
.nav-links a:focus-visible,
.brand:focus-visible,
.filter-chip:focus-visible,
.page-link:focus-visible,
.card-link:focus-visible,
.faq-button:focus-visible,
.menu-toggle:focus-visible,
.footer-group a:focus-visible{
 outline:3px solid rgba(37,99,235,.27);
 outline-offset:3px;
}
.site-header{position:relative;z-index:30;padding:22px 0}
.site-header.is-scrolled{
 position:sticky;top:0;padding:10px 0;
 background:rgba(246,249,253,.86);backdrop-filter:blur(12px);
}
.nav-shell{
 display:flex;align-items:center;gap:24px;padding:12px 14px 12px 21px;
 border:1px solid rgba(185,205,232,.75);background:rgba(255,255,255,.94);
 box-shadow:var(--shadow-sm);border-radius:999px;backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:11px;min-width:260px;font-weight:800;line-height:1.15}
.brand-mark{
 display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:11px;
 color:#fff;background:linear-gradient(145deg,#2f7af4,#1444a4);font-size:13px;
}
.brand-text{font-size:14px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{padding:9px 14px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:650;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--blue-deep);background:var(--blue-soft)}
.nav-cta{min-height:42px;padding:0 17px;font-size:13px}
.menu-toggle{
 display:none;border:0;background:var(--blue-soft);color:var(--blue-deep);
 border-radius:50%;width:42px;height:42px;font-weight:800;
}
.category-hero{padding:54px 0 82px}
.category-hero-shell{
 position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(370px,.85fr);
 gap:58px;align-items:center;overflow:hidden;padding:58px;
 border:1px solid #cbdcf1;border-radius:34px;
 background:linear-gradient(132deg,#fafdff 0%,#edf5ff 68%,#e9f5f7 100%);
 box-shadow:var(--shadow);
}
.category-hero-shell::before{
 content:"";position:absolute;right:-110px;top:-130px;width:360px;height:360px;
 border:64px solid rgba(37,99,235,.07);border-radius:50%;
}
.category-hero-shell::after{
 content:"";position:absolute;left:45%;bottom:-100px;width:220px;height:220px;
 background:rgba(14,165,183,.07);border-radius:50%;
}
.hero-content,.index-board{position:relative;z-index:1}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--muted);font-size:13px}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{color:#9aabc0}
.category-hero h1{
 margin:14px 0 22px;max-width:760px;font-size:clamp(38px,5vw,64px);
 line-height:1.13;letter-spacing:-.052em;
}
.category-hero h1 strong{display:block;color:var(--blue)}
.hero-summary{max-width:680px;margin:0;color:var(--muted);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{
 display:flex;align-items:flex-start;gap:10px;margin-top:26px;
 color:#536681;font-size:13px;
}
.hero-note i{
 width:8px;height:8px;flex:0 0 8px;margin-top:8px;border-radius:50%;background:var(--cyan);
}
.index-board{
 padding:24px;border:1px solid rgba(188,208,237,.9);border-radius:24px;
 background:rgba(255,255,255,.84);box-shadow:var(--shadow-sm);
}
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.board-head strong{font-size:15px}
.board-head span{color:var(--blue);font-size:12px;font-weight:800}
.board-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.board-card{
 position:relative;min-height:128px;padding:17px;overflow:hidden;
 color:#fff;border-radius:17px;background:linear-gradient(145deg,#2865ce,#173d88);
}
.board-card:first-child{grid-row:span 2;min-height:268px;background:linear-gradient(155deg,#1b5cc9,#35a4b4)}
.board-card:nth-child(2){background:linear-gradient(145deg,#687eaa,#3f507d)}
.board-card:nth-child(3){background:linear-gradient(145deg,#c77d68,#725a84)}
.board-card::after{
 content:"";position:absolute;right:-38px;bottom:-46px;width:126px;height:126px;
 border:20px solid rgba(255,255,255,.12);border-radius:50%;
}
.board-number{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.8}
.board-card h2{position:absolute;left:17px;right:15px;bottom:15px;margin:0;font-size:17px;line-height:1.4}
.board-card:first-child h2{font-size:24px}
.section{padding:98px 0}
.section-soft{background:#eef5fd;border-top:1px solid #e3edf8;border-bottom:1px solid #e3edf8}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:38px}
.section-head h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.035em}
.section-head p{max-width:570px;margin:0;color:var(--muted)}
.filter-panel{
 position:relative;z-index:3;margin-top:-30px;padding:22px;
 border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);
}
.filter-top{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:18px;align-items:center}
.search-wrap{position:relative}
.search-icon{
 position:absolute;left:17px;top:50%;width:16px;height:16px;
 border:2px solid #7890ae;border-radius:50%;transform:translateY(-58%);
}
.search-icon::after{
 content:"";position:absolute;width:7px;height:2px;right:-5px;bottom:-3px;
 background:#7890ae;transform:rotate(45deg);border-radius:2px;
}
.search-input{
 width:100%;height:50px;padding:0 18px 0 48px;
 color:var(--ink);background:#f8fbff;border:1px solid #d4e1ef;border-radius:14px;
 transition:.2s;
}
.search-input::placeholder{color:#8b9ab0}
.search-input:hover{border-color:#a9c1df}
.search-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.search-input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(200,78,78,.08)}
.filter-selects{display:flex;gap:10px}
.select-control{
 height:50px;min-width:150px;padding:0 42px 0 15px;
 color:var(--ink);background:#f8fbff;
 border:1px solid #d4e1ef;border-radius:14px;cursor:pointer;
}
.select-control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.filter-bottom{
 display:flex;align-items:center;justify-content:space-between;gap:18px;
 margin-top:16px;padding-top:16px;border-top:1px solid #edf1f6;
}
.filter-chips{display:flex;flex-wrap:wrap;gap:9px}
.filter-chip{
 border:1px solid #d4e1ef;padding:8px 14px;border-radius:999px;
 color:var(--muted);background:#fff;font-size:13px;font-weight:700;transition:.2s;
}
.filter-chip:hover{color:var(--blue);border-color:#9ebbe4;background:var(--blue-pale)}
.filter-chip.active{color:#fff;border-color:var(--blue);background:var(--blue)}
.filter-chip:disabled{opacity:.45;cursor:not-allowed}
.clear-filter{
 border:0;padding:8px 4px;color:var(--blue);background:transparent;font-weight:700;font-size:13px;
}
.clear-filter:hover{text-decoration:underline}
.content-layout{margin-top:34px}
.feature-card{
 display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;
 border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
 box-shadow:var(--shadow-sm);transition:.25s;
}
.feature-card:hover{transform:translateY(-3px);border-color:#a9c6ed;box-shadow:var(--shadow)}
.feature-cover{
 position:relative;min-height:330px;overflow:hidden;
 background:linear-gradient(145deg,#1e5ecb 0%,#48a7b5 100%);
}
.feature-cover::before{
 content:"";position:absolute;left:12%;top:18%;width:180px;height:180px;
 border:34px solid rgba(255,255,255,.15);border-radius:50%;
}
.feature-cover::after{
 content:"01";position:absolute;right:28px;bottom:10px;
 color:rgba(255,255,255,.17);font-size:118px;font-weight:900;line-height:1;
}
.cover-label{
 position:absolute;left:24px;top:24px;padding:7px 12px;border-radius:999px;
 color:#fff;background:rgba(17,54,111,.45);font-size:12px;font-weight:800;
}
.cover-caption{position:absolute;left:25px;right:25px;bottom:24px;color:#fff}
.cover-caption span{font-size:12px;opacity:.82}
.cover-caption strong{display:block;margin-top:6px;font-size:22px}
.feature-body{display:flex;flex-direction:column;justify-content:center;padding:42px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:17px}
.meta-tag{padding:5px 10px;border-radius:999px;color:var(--blue-deep);background:var(--blue-soft);font-size:12px;font-weight:700}
.meta-tag.warm{color:#9a5437;background:var(--warm)}
.feature-body h3{margin:0 0 14px;font-size:30px;line-height:1.32}
.feature-body p{margin:0;color:var(--muted)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:27px}
.status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.card-link{color:var(--blue);font-weight:800;font-size:14px}
.card-link:hover{text-decoration:underline}
.index-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:18px;margin-top:18px}
.index-card{
 display:flex;flex-direction:column;min-height:335px;overflow:hidden;
 border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;
 box-shadow:var(--shadow-sm);transition:.24s;
}
.index-card:nth-child(2){transform:translateY(18px)}
.index-card:hover,.index-card:focus-within{
 transform:translateY(-3px);border-color:#a9c6ed;box-shadow:var(--shadow);
}
.index-card:nth-child(2):hover,.index-card:nth-child(2):focus-within{transform:translateY(14px)}
.card-cover{
 position:relative;min-height:135px;overflow:hidden;
 background:linear-gradient(145deg,#567bbd,#3f537d);
}
.index-card:nth-child(2) .card-cover{background:linear-gradient(145deg,#cf8a70,#76608b)}
.index-card:nth-child(3) .card-cover{background:linear-gradient(145deg,#2386a3,#275c9a)}
.index-card:nth-child(4) .card-cover{background:linear-gradient(145deg,#5e79a4,#314567)}
.index-card:nth-child(5) .card-cover{background:linear-gradient(145deg,#b88267,#617da3)}
.card-cover::after{
 content:attr(data-number);position:absolute;right:14px;bottom:-15px;
 color:rgba(255,255,255,.18);font-size:78px;font-weight:900;
}
.card-cover .pill{position:absolute;left:16px;top:16px;color:#fff;background:rgba(19,52,105,.48)}
.card-body{display:flex;flex:1;flex-direction:column;padding:23px}
.card-body h3{margin:0 0 10px;font-size:20px;line-height:1.4}
.card-body p{margin:0;color:var(--muted);font-size:14px}
.card-body .card-foot{margin-top:auto;padding-top:22px}
.empty-state{
 display:none;margin-top:20px;padding:38px;text-align:center;
 border:1px dashed #adc2dc;border-radius:var(--radius-md);background:#fff;
}
.empty-state.show{display:block}
.empty-icon{
 display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;
 color:var(--blue);background:var(--blue-soft);border-radius:50%;font-weight:900;
}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:58px}
.page-link{
 display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
 color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:12px;
 font-size:13px;font-weight:800;transition:.2s;
}
.page-link:hover{color:var(--blue);border-color:#9fbce5;background:var(--blue-soft)}
.page-link.current{color:#fff;border-color:var(--blue);background:var(--blue)}
.page-link.disabled{opacity:.45;pointer-events:none}
.value-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
.value-card{
 padding:29px;border:1px solid var(--line);border-radius:var(--radius-md);
 background:#fff;box-shadow:var(--shadow-sm);
}
.value-card.primary{grid-row:span 2;background:linear-gradient(145deg,#1f5fc9,#237dba);color:#fff}
.value-code{display:block;margin-bottom:36px;color:var(--blue);font-weight:900;font-size:13px;letter-spacing:.12em}
.value-card.primary .value-code{color:#bfe5ff}
.value-card h3{margin:0 0 10px;font-size:22px}
.value-card p{margin:0;color:var(--muted);font-size:14px}
.value-card.primary p{color:#dceaff}
.metric-list{display:grid;gap:13px;margin-top:28px}
.metric-item{display:flex;align-items:center;gap:12px;font-size:13px}
.metric-bar{height:6px;flex:1;overflow:hidden;background:rgba(255,255,255,.18);border-radius:99px}
.metric-bar i{display:block;height:100%;border-radius:99px;background:#fff}
.path-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:start}
.path-intro{
 position:sticky;top:110px;padding:32px;border:1px solid var(--line);
 border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);
}
.path-intro h2{margin:12px 0 15px;font-size:36px;line-height:1.24}
.path-intro p{margin:0;color:var(--muted)}
.path-list{display:grid;gap:15px}
.path-card{
 display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;
 padding:24px;border:1px solid var(--line);border-radius:var(--radius-md);
 background:#fff;box-shadow:var(--shadow-sm);transition:.22s;
}
.path-card:hover{border-color:#a7c4ea;transform:translateX(4px)}
.path-number{
 display:grid;place-items:center;width:54px;height:54px;color:var(--blue);
 background:var(--blue-soft);border-radius:16px;font-weight:900;
}
.path-card h3{margin:0 0 5px;font-size:19px}
.path-card p{margin:0;color:var(--muted);font-size:14px}
.path-arrow{color:var(--blue);font-size:22px;font-weight:900}
.related-banner{
 display:flex;align-items:center;justify-content:space-between;gap:30px;
 margin-top:30px;padding:28px 32px;border:1px solid #c8daf0;
 border-radius:var(--radius-md);background:linear-gradient(125deg,#eaf2ff,#f8fbff);
}
.related-banner h3{margin:0 0 5px;font-size:21px}
.related-banner p{margin:0;color:var(--muted);font-size:14px}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:54px}
.faq-intro h2{margin:12px 0 15px;font-size:clamp(30px,4vw,44px);line-height:1.2}
.faq-intro p{margin:0;color:var(--muted)}
.age-note{
 margin-top:25px;padding:18px;border-left:3px solid var(--coral);
 color:#765242;background:var(--warm);border-radius:0 13px 13px 0;font-size:13px;
}
.faq-list{display:grid;gap:12px}
.faq-item{
 overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;
 box-shadow:0 5px 18px rgba(28,61,112,.05);
}
.faq-button{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 width:100%;padding:20px 22px;border:0;color:var(--ink);background:#fff;
 text-align:left;font-weight:800;
}
.faq-button:hover{color:var(--blue)}
.faq-icon{
 display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;
 color:var(--blue);background:var(--blue-soft);border-radius:50%;
 transition:transform .2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 22px 21px;color:var(--muted);font-size:14px}
.faq-item.open .faq-answer{display:block}
.faq-answer p{margin:0}
.contact-section{padding:0 0 104px}
.contact-panel{
 display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;padding:48px;
 border:1px solid #cadcf2;border-radius:var(--radius-lg);
 background:linear-gradient(135deg,#edf5ff,#fff);box-shadow:var(--shadow);
}
.contact-copy h2{margin:12px 0 15px;font-size:clamp(30px,3.7vw,44px);line-height:1.2}
.contact-copy p{margin:0;color:var(--muted)}
.contact-points{display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.contact-points li{display:flex;align-items:center;gap:10px;color:#536681;font-size:14px}
.contact-points i{
 width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--cyan);
}
.feedback-form{
 padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;
 box-shadow:var(--shadow-sm);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:grid;gap:7px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:800}
.field{
 width:100%;min-height:48px;padding:11px 14px;color:var(--ink);
 background:#f9fbfe;border:1px solid #d5e0ed;border-radius:12px;transition:.2s;
}
textarea.field{min-height:118px;resize:vertical}
.field:hover{border-color:#adc2dc}
.field:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.field.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(200,78,78,.08)}
.form-error{display:none;color:var(--danger);font-size:12px}
.form-error.show{display:block}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}
.form-hint{max-width:330px;color:var(--muted);font-size:12px}
.form-status{
 display:none;margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13px;
}
.form-status.success{display:block;color:var(--success);background:#eaf8f3}
.form-status.error{display:block;color:var(--danger);background:#fff0f0}
.site-footer{padding:68px 0 28px;border-top:1px solid var(--line);background:#edf4fc}
.footer-top{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;padding-bottom:45px}
.footer-brand .brand{display:inline-flex;margin-bottom:17px}
.footer-brand p{max-width:430px;margin:0;color:var(--muted)}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.footer-group{display:grid;align-content:start;gap:9px}
.footer-group h3{margin:0 0 7px;font-size:14px}
.footer-group a{width:max-content;color:var(--muted);font-size:13px}
.footer-group a:hover{color:var(--blue);text-decoration:underline}
.footer-bottom{
 display:flex;align-items:center;justify-content:space-between;gap:24px;
 padding-top:25px;border-top:1px solid #d6e2ef;color:var(--muted);font-size:12px;
}
.access-tip{color:#765242}
@media (min-width:1440px){
 .container{width:min(var(--container),calc(100% - 96px))}
 .category-hero{padding-top:72px}
 .category-hero-shell{padding:68px}
}
@media (max-width:1120px){
 .brand{min-width:230px}
 .brand-text{font-size:13px}
 .nav-shell{gap:12px}
 .nav-links a{padding:8px 10px}
 .category-hero-shell{grid-template-columns:1fr 390px;gap:38px;padding:44px}
 .index-grid{grid-template-columns:1fr 1fr}
 .index-card:nth-child(2){transform:none}
 .index-card:nth-child(2):hover,.index-card:nth-child(2):focus-within{transform:translateY(-3px)}
 .value-grid{grid-template-columns:1fr 1fr}
 .value-card.primary{grid-row:auto;grid-column:1/-1}
}
@media (max-width:900px){
 .container{width:min(100% - 36px,var(--container))}
 .nav-cta{display:none}
 .menu-toggle{display:grid;place-items:center;margin-left:auto}
 .nav-shell{position:relative}
 .nav-links{
  position:absolute;left:0;right:0;top:calc(100% + 12px);display:none;
  flex-direction:column;align-items:stretch;margin:0;padding:12px;
  border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);
 }
 .nav-links.open{display:flex}
 .nav-links a{padding:12px 15px}
 .category-hero-shell{grid-template-columns:1fr;padding:42px}
 .index-board{max-width:560px}
 .filter-top{grid-template-columns:1fr}
 .filter-selects{display:grid;grid-template-columns:1fr 1fr}
 .select-control{width:100%}
 .feature-card{grid-template-columns:1fr}
 .feature-cover{min-height:250px}
 .index-grid{grid-template-columns:1fr 1fr}
 .path-wrap{grid-template-columns:1fr}
 .path-intro{position:static}
 .faq-layout{grid-template-columns:1fr}
 .contact-panel{grid-template-columns:1fr}
 .footer-top{grid-template-columns:1fr;gap:38px}
}
@media (max-width:767px){
 .container{width:min(100% - 28px,var(--container))}
 .site-header{padding:14px 0}
 .nav-shell{padding:9px 10px 9px 14px;border-radius:22px}
 .brand{min-width:0;max-width:calc(100% - 54px)}
 .brand-mark{width:33px;height:33px;flex-basis:33px}
 .brand-text{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
 .category-hero{padding:30px 0 64px}
 .category-hero-shell{padding:30px 22px;border-radius:25px}
 .category-hero h1{font-size:clamp(31px,9.4vw,42px);letter-spacing:-.04em}
 .hero-summary{font-size:15px}
 .hero-actions .btn{width:100%}
 .index-board{padding:17px}
 .board-grid{grid-template-columns:1fr 1fr}
 .board-card:first-child{grid-column:1/-1;grid-row:auto;min-height:190px}
 .board-card{min-height:115px}
 .board-card:first-child h2{font-size:21px}
 .section{padding:70px 0}
 .section-head{display:block;margin-bottom:28px}
 .section-head p{margin-top:14px}
 .filter-panel{padding:16px;border-radius:18px}
 .filter-selects{grid-template-columns:1fr}
 .filter-bottom{display:block}
 .filter-chips{
  flex-wrap:nowrap;overflow-x:auto;padding:1px 1px 8px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
 }
 .filter-chip{flex:0 0 auto}
 .clear-filter{margin-top:8px}
 .feature-cover{min-height:218px}
 .feature-body{padding:27px 22px}
 .feature-body h3{font-size:24px}
 .card-foot{align-items:flex-end}
 .index-grid{grid-template-columns:1fr}
 .index-card{min-height:0}
 .card-cover{min-height:150px}
 .pagination{justify-content:flex-start;overflow-x:auto;padding-bottom:5px}
 .value-grid{grid-template-columns:1fr}
 .value-card.primary{grid-column:auto}
 .path-intro{padding:25px}
 .path-intro h2{font-size:30px}
 .path-card{grid-template-columns:48px 1fr;padding:19px;gap:14px}
 .path-number{width:46px;height:46px}
 .path-arrow{display:none}
 .related-banner{display:block;padding:24px}
 .related-banner .btn{width:100%;margin-top:18px}
 .faq-layout{gap:28px}
 .contact-section{padding-bottom:70px}
 .contact-panel{padding:27px 18px;gap:28px}
 .feedback-form{padding:20px 16px}
 .form-grid{grid-template-columns:1fr}
 .form-group.full{grid-column:auto}
 .form-actions{display:block}
 .form-actions .btn{width:100%;margin-top:13px}
 .footer-top{padding-bottom:32px}
 .footer-nav{gap:24px}
 .footer-bottom{display:grid;gap:8px}
}
@media (max-width:520px){
 .container{width:min(100% - 22px,var(--container))}
 .brand-text{max-width:170px}
 .category-hero-shell{padding:26px 18px}
 .category-hero h1{font-size:30px}
 .breadcrumb{flex-wrap:wrap}
 .board-card{padding:13px}
 .board-card h2{left:13px;bottom:13px;font-size:14px}
 .board-card:first-child h2{font-size:19px}
 .feature-cover::after{font-size:88px}
 .feature-body{padding:24px 18px}
 .feature-body h3{font-size:22px}
 .card-foot{display:block}
 .card-link{display:inline-block;margin-top:12px}
 .footer-nav{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
}

/* roulang page: category2 */
:root{
 --blue:#2563eb;
 --blue-deep:#1746a2;
 --blue-soft:#eaf2ff;
 --cyan:#0ea5b7;
 --ink:#14213d;
 --muted:#63708a;
 --line:#dbe5f2;
 --bg:#f6f9fd;
 --card:#ffffff;
 --warm:#fff6ef;
 --coral:#e88962;
 --success:#18866b;
 --warning:#b66a22;
 --danger:#c84b4b;
 --shadow:0 18px 48px rgba(28,61,112,.10);
 --shadow-sm:0 8px 24px rgba(28,61,112,.08);
 --radius-lg:26px;
 --radius-md:18px;
 --radius-sm:12px;
 --container:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--ink);
 background:var(--bg);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
 font-size:16px;
 line-height:1.75;
 -webkit-font-smoothing:antialiased;
 overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,input,textarea,select{color:var(--ink)}
::selection{color:#fff;background:var(--blue)}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.sr-only{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
 position:fixed;left:18px;top:-80px;z-index:1000;
 color:#fff;background:var(--blue-deep);padding:10px 16px;border-radius:10px;
 transition:top .2s;
}
.skip-link:focus{top:18px}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;
 color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.08em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue);border-radius:2px}
.pill{
 display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
 color:var(--blue-deep);background:var(--blue-soft);font-size:12px;font-weight:700;
}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:48px;padding:0 21px;border-radius:999px;border:1px solid transparent;
 font-weight:700;transition:background-color .22s,border-color .22s,box-shadow .22s,transform .22s;
 white-space:nowrap;
}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 10px 22px rgba(37,99,235,.20)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-secondary{color:var(--blue-deep);background:#fff;border-color:#bcd0ed}
.btn-secondary:hover{background:var(--blue-soft);border-color:var(--blue)}
.btn-muted{color:var(--muted);background:#eef3f8;border-color:#e1e8f0}
.btn-muted:hover{color:var(--blue-deep);background:#e3edfb}
.btn:focus-visible,
.filter-chip:focus-visible,
.page-link:focus-visible,
.faq-question:focus-visible,
.menu-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{
 outline:3px solid rgba(37,99,235,.28);
 outline-offset:3px;
}
.btn:disabled,.filter-chip:disabled{opacity:.5;cursor:not-allowed;transform:none}
.site-header{position:relative;z-index:50;padding:22px 0}
.site-header.is-sticky{
 position:sticky;top:0;padding:10px 0;
 background:rgba(246,249,253,.88);backdrop-filter:blur(15px);
}
.nav-shell{
 display:flex;align-items:center;gap:24px;padding:12px 14px 12px 21px;
 border:1px solid rgba(185,205,232,.75);background:rgba(255,255,255,.94);
 box-shadow:var(--shadow-sm);border-radius:999px;backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:11px;min-width:260px;font-weight:800;line-height:1.15}
.brand-mark{
 display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:11px;
 color:#fff;background:linear-gradient(145deg,#2f7af4,#1444a4);font-size:13px;
}
.brand-text{font-size:14px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{padding:9px 14px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:650;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--blue-deep);background:var(--blue-soft)}
.nav-cta{min-height:42px;padding:0 17px;font-size:13px}
.menu-toggle{
 display:none;border:0;background:var(--blue-soft);color:var(--blue-deep);
 border-radius:50%;width:42px;height:42px;font-weight:800;
}
.page-hero{padding:55px 0 76px}
.hero-shell{
 position:relative;overflow:hidden;
 display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);
 gap:54px;align-items:center;padding:58px;
 border:1px solid #d2e1f3;border-radius:34px;background:#fff;box-shadow:var(--shadow);
}
.hero-shell::before{
 content:"";position:absolute;width:430px;height:430px;right:-170px;top:-190px;
 border-radius:50%;background:#e7f0ff;
}
.hero-shell::after{
 content:"";position:absolute;width:180px;height:180px;left:42%;bottom:-125px;
 border-radius:50%;background:#dff5f4;
}
.hero-copy,.hero-directory{position:relative;z-index:1}
.breadcrumb{
 display:flex;align-items:center;gap:8px;margin-bottom:18px;
 color:var(--muted);font-size:13px;
}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline}
.breadcrumb span[aria-current="page"]{color:var(--blue-deep);font-weight:700}
.hero-copy h1{
 max-width:760px;margin:14px 0 22px;
 font-size:clamp(36px,4.6vw,59px);line-height:1.15;letter-spacing:-.05em;
 overflow-wrap:anywhere;
}
.hero-copy h1 strong{display:block;color:var(--blue)}
.hero-copy>p{max-width:690px;margin:0;color:var(--muted);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{
 display:flex;gap:10px;align-items:flex-start;margin-top:26px;
 color:var(--muted);font-size:13px;
}
.hero-note::before{
 content:"18+";display:grid;place-items:center;flex:0 0 34px;height:25px;
 color:var(--warning);background:var(--warm);border-radius:7px;font-size:11px;font-weight:800;
}
.hero-directory{
 padding:23px;border:1px solid #cfe0f5;border-radius:24px;
 background:#f2f7ff;box-shadow:var(--shadow-sm);
}
.directory-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.directory-top strong{font-size:15px}
.directory-top span{color:var(--blue);font-size:12px;font-weight:800}
.directory-search{
 display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:13px;
 border:1px solid #c9d9ee;border-radius:13px;background:#fff;color:var(--muted);
}
.directory-search svg{width:18px;height:18px;stroke:currentColor}
.directory-search span{font-size:13px}
.directory-list{display:grid;gap:10px}
.directory-item{
 display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;
 padding:12px;border:1px solid transparent;border-radius:14px;background:#fff;
 transition:.2s;
}
.directory-item:hover{border-color:#bcd2f0;transform:translateX(3px)}
.directory-number{
 display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
 color:#fff;background:linear-gradient(145deg,var(--blue),var(--cyan));font-size:12px;font-weight:800;
}
.directory-item:nth-child(2) .directory-number{background:linear-gradient(145deg,#6177bb,#8594c7)}
.directory-item:nth-child(3) .directory-number{background:linear-gradient(145deg,#d17e60,#a56573)}
.directory-item strong{display:block;font-size:14px}
.directory-item small{display:block;color:var(--muted);font-size:11px}
.directory-arrow{color:var(--blue);font-weight:800}
.quick-links{
 display:flex;gap:10px;margin-top:15px;overflow:auto;padding-bottom:3px;scrollbar-width:thin;
}
.quick-links a{
 flex:0 0 auto;padding:7px 11px;border-radius:999px;color:var(--blue-deep);
 background:#fff;border:1px solid #cbdcf1;font-size:12px;font-weight:700;
}
.quick-links a:hover{border-color:var(--blue);background:var(--blue-soft)}
.section{padding:96px 0}
.section-soft{background:#edf4fc;border-block:1px solid #dce8f5}
.section-head{
 display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px;
}
.section-head h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.035em}
.section-head p{max-width:570px;margin:0;color:var(--muted)}
.browser-layout{
 display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start;
}
.filter-panel{
 position:sticky;top:102px;padding:23px;border:1px solid var(--line);
 border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm);
}
.filter-panel-head{
 display:flex;align-items:center;justify-content:space-between;
 margin-bottom:19px;padding-bottom:15px;border-bottom:1px solid var(--line);
}
.filter-panel-head h2{margin:0;font-size:18px}
.clear-button{
 padding:4px 0;border:0;background:transparent;color:var(--blue);
 font-size:12px;font-weight:700;
}
.clear-button:hover{text-decoration:underline}
.filter-group{padding:17px 0;border-bottom:1px solid #e8eef5}
.filter-group:last-of-type{border-bottom:0}
.filter-group h3{margin:0 0 12px;font-size:14px}
.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{
 min-height:34px;padding:5px 11px;border:1px solid #d3dfed;border-radius:999px;
 color:var(--muted);background:#fff;font-size:12px;font-weight:650;transition:.2s;
}
.filter-chip:hover{color:var(--blue-deep);border-color:#9fbee8;background:#f5f9ff}
.filter-chip.active{color:#fff;border-color:var(--blue);background:var(--blue)}
.filter-tip{
 margin:17px 0 0;padding:13px;border-radius:12px;background:var(--warm);
 color:#785b4d;font-size:12px;line-height:1.65;
}
.results-panel{min-width:0}
.toolbar{
 display:grid;grid-template-columns:minmax(240px,1fr) auto auto;
 gap:12px;align-items:center;margin-bottom:18px;padding:14px;
 border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;
 box-shadow:var(--shadow-sm);
}
.search-box{position:relative}
.search-box svg{
 position:absolute;left:14px;top:50%;width:18px;height:18px;
 transform:translateY(-50%);stroke:var(--muted);pointer-events:none;
}
.search-box input{
 width:100%;height:46px;padding:0 42px;
 border:1px solid #cbd9e9;border-radius:13px;background:#f9fbfe;outline:0;
 transition:.2s;
}
.search-box input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.search-box input.is-error{border-color:var(--danger);background:#fff8f8}
.search-clear{
 position:absolute;right:8px;top:50%;transform:translateY(-50%);
 width:31px;height:31px;border:0;border-radius:50%;color:var(--muted);background:transparent;
}
.search-clear:hover{color:var(--blue);background:var(--blue-soft)}
.select-wrap select{
 min-width:145px;height:46px;padding:0 38px 0 13px;
 border:1px solid #cbd9e9;border-radius:13px;background:#f9fbfe;
}
.result-count{padding:0 8px;color:var(--muted);font-size:13px;white-space:nowrap}
.result-count strong{color:var(--blue-deep)}
.mobile-filter-button{display:none}
.index-group{margin-top:28px}
.group-title{
 display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:17px;
}
.group-title span{
 display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
 color:var(--blue-deep);background:var(--blue-soft);font-size:11px;
}
.content-list{display:grid;gap:14px}
.content-item{
 display:grid;grid-template-columns:176px minmax(0,1fr) auto;gap:20px;align-items:center;
 padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);
 background:#fff;box-shadow:0 7px 20px rgba(28,61,112,.055);transition:.22s;
}
.content-item:hover,.content-item:focus-within{
 transform:translateY(-3px);border-color:#afc9eb;box-shadow:var(--shadow-sm);
}
.content-cover{
 position:relative;min-height:118px;overflow:hidden;border-radius:14px;
 background:linear-gradient(145deg,#286bd7,#66bfc4);
}
.content-item:nth-child(2) .content-cover{background:linear-gradient(145deg,#667aba,#949fc7)}
.content-item:nth-child(3) .content-cover{background:linear-gradient(145deg,#c47766,#7f6b9d)}
.content-item:nth-child(4) .content-cover{background:linear-gradient(145deg,#3976b5,#54a798)}
.content-item:nth-child(5) .content-cover{background:linear-gradient(145deg,#5476c5,#82a8d7)}
.content-item:nth-child(6) .content-cover{background:linear-gradient(145deg,#bc785e,#c89b87)}
.content-cover::before{
 content:"";position:absolute;width:110px;height:110px;right:-25px;top:-35px;
 border:18px solid rgba(255,255,255,.15);border-radius:50%;
}
.content-cover::after{
 content:"";position:absolute;left:16px;right:16px;bottom:17px;height:2px;
 background:rgba(255,255,255,.38);
}
.cover-index{
 position:absolute;left:15px;top:13px;color:rgba(255,255,255,.95);
 font-size:11px;font-weight:800;letter-spacing:.1em;
}
.cover-label{
 position:absolute;left:15px;bottom:25px;color:#fff;font-size:15px;font-weight:800;
}
.item-body{min-width:0}
.item-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.item-tags span{
 padding:3px 8px;border-radius:999px;color:var(--blue-deep);
 background:var(--blue-soft);font-size:11px;font-weight:700;
}
.item-tags .status{color:var(--success);background:#e8f6f1}
.item-body h3{margin:0 0 6px;font-size:19px;line-height:1.4}
.item-body p{
 display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 margin:0;color:var(--muted);font-size:14px;
}
.item-meta{display:flex;flex-wrap:wrap;gap:15px;margin-top:10px;color:#7b879b;font-size:11px}
.item-action{
 display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:105px;
}
.item-action a{color:var(--blue);font-size:13px;font-weight:800}
.item-action a:hover{text-decoration:underline}
.item-action small{color:var(--muted);font-size:10px}
.empty-state{
 display:none;padding:54px 22px;text-align:center;border:1px dashed #b7cbe4;
 border-radius:var(--radius-md);background:#fff;
}
.empty-state.visible{display:block}
.empty-icon{
 display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;
 border-radius:18px;color:var(--blue);background:var(--blue-soft);font-size:22px;
}
.empty-state h3{margin:0 0 7px}
.empty-state p{margin:0 auto 18px;max-width:440px;color:var(--muted)}
.pagination{
 display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px;
}
.page-link{
 display:grid;place-items:center;min-width:42px;height:42px;padding:0 11px;
 border:1px solid #cbd9e8;border-radius:12px;color:var(--muted);
 background:#fff;font-weight:700;font-size:13px;transition:.2s;
}
.page-link:hover{color:var(--blue-deep);border-color:var(--blue);background:var(--blue-soft)}
.page-link.current{color:#fff;border-color:var(--blue);background:var(--blue)}
.page-link.disabled{opacity:.45;pointer-events:none}
.path-grid{
 display:grid;grid-template-columns:1.15fr .85fr;gap:22px;
}
.path-card{
 position:relative;overflow:hidden;min-height:260px;padding:34px;
 border:1px solid var(--line);border-radius:var(--radius-lg);
 background:#fff;box-shadow:var(--shadow-sm);transition:.22s;
}
.path-card:hover{transform:translateY(-3px);border-color:#afc8e9;box-shadow:var(--shadow)}
.path-card.primary{background:linear-gradient(145deg,#fff,#edf5ff)}
.path-card.secondary{background:linear-gradient(145deg,#fff,#fff7f1)}
.path-number{
 position:absolute;right:28px;top:18px;color:#d9e6f8;
 font-size:72px;line-height:1;font-weight:900;
}
.path-card h3{position:relative;margin:28px 0 10px;font-size:26px}
.path-card p{position:relative;max-width:520px;margin:0 0 24px;color:var(--muted)}
.path-points{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.path-points span{
 padding:6px 10px;border:1px solid #d4e1f1;border-radius:999px;
 background:rgba(255,255,255,.78);color:var(--blue-deep);font-size:12px;font-weight:700;
}
.access-strip{
 display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;
}
.access-point{
 padding:19px;border:1px solid #d4e1f0;border-radius:16px;background:#fff;
}
.access-point strong{display:block;margin-bottom:5px;color:var(--blue-deep)}
.access-point span{color:var(--muted);font-size:12px}
.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:58px;align-items:start}
.faq-intro h2{margin:12px 0 16px;font-size:clamp(30px,3.6vw,46px);line-height:1.2}
.faq-intro p{margin:0;color:var(--muted)}
.faq-list{display:grid;gap:12px}
.faq-item{
 overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;
 box-shadow:0 6px 18px rgba(28,61,112,.045);
}
.faq-question{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 width:100%;padding:19px 21px;border:0;background:#fff;text-align:left;
 color:var(--ink);font-weight:750;
}
.faq-question:hover{color:var(--blue-deep);background:#f9fbff}
.faq-icon{
 display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;
 border-radius:50%;color:var(--blue);background:var(--blue-soft);
 transition:transform .2s;
}
.faq-answer{display:none;padding:0 21px 19px;color:var(--muted);font-size:14px}
.faq-answer p{margin:0}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.contact-panel{
 display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:48px;
 border:1px solid #d2e2f4;border-radius:30px;background:#eef5ff;box-shadow:var(--shadow-sm);
}
.contact-copy h2{margin:10px 0 16px;font-size:clamp(29px,3.5vw,44px);line-height:1.2}
.contact-copy p{margin:0;color:var(--muted)}
.contact-notes{display:grid;gap:10px;margin-top:25px}
.contact-note{display:flex;align-items:flex-start;gap:10px;color:#53627b;font-size:13px}
.contact-note i{
 width:8px;height:8px;flex:0 0 8px;margin-top:8px;border-radius:50%;background:var(--cyan);
}
.feedback-form{
 display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:24px;
 border:1px solid #d4e1f1;border-radius:20px;background:#fff;
}
.form-group{display:grid;gap:7px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:700}
.form-group input,.form-group select,.form-group textarea{
 width:100%;border:1px solid #cbd9e8;border-radius:12px;background:#fbfdff;outline:0;
 transition:.2s;
}
.form-group input,.form-group select{height:46px;padding:0 13px}
.form-group textarea{min-height:118px;padding:11px 13px;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
 border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.1);
}
.form-group.invalid input,.form-group.invalid textarea{border-color:var(--danger);background:#fff8f8}
.field-error{display:none;color:var(--danger);font-size:11px}
.form-group.invalid .field-error{display:block}
.form-consent{
 grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;
 color:var(--muted);font-size:12px;
}
.form-consent input{margin-top:6px;accent-color:var(--blue)}
.form-actions{
 grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.form-status{color:var(--muted);font-size:12px}
.form-status.success{color:var(--success)}
.form-status.error{color:var(--danger)}
.site-footer{padding:66px 0 28px;background:#eaf1f9;border-top:1px solid #d7e3f1}
.footer-top{display:flex;justify-content:space-between;gap:60px;padding-bottom:42px}
.footer-brand{max-width:490px}
.footer-brand .brand{min-width:0;margin-bottom:16px}
.footer-brand p{margin:0;color:var(--muted);font-size:14px}
.footer-nav{display:flex;gap:75px}
.footer-group{display:grid;align-content:start;gap:8px;min-width:120px}
.footer-group h3{margin:0 0 8px;font-size:14px}
.footer-group a{color:var(--muted);font-size:13px}
.footer-group a:hover{color:var(--blue);text-decoration:underline}
.footer-bottom{
 display:flex;justify-content:space-between;gap:24px;padding-top:24px;
 border-top:1px solid #cfdeed;color:#758299;font-size:12px;
}
.access-tip{color:#6f625c}
.mobile-filter-drawer,.drawer-backdrop{display:none}

@media (min-width:1440px){
 .container{width:min(var(--container),calc(100% - 96px))}
 .page-hero{padding-top:70px}
 .hero-shell{padding:68px}
}
@media (max-width:1100px){
 .brand{min-width:215px}
 .brand-text{font-size:12px}
 .nav-shell{gap:12px}
 .nav-links a{padding:8px 10px}
 .hero-shell{grid-template-columns:1fr 360px;gap:32px;padding:42px}
 .browser-layout{grid-template-columns:248px minmax(0,1fr)}
 .content-item{grid-template-columns:145px minmax(0,1fr)}
 .item-action{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
 .contact-panel{gap:30px;padding:35px}
}
@media (max-width:900px){
 .container{width:min(100% - 36px,var(--container))}
 .site-header{padding:16px 0}
 .nav-shell{position:relative}
 .nav-links{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 12px);
  padding:12px;flex-direction:column;align-items:stretch;
  border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);
 }
 .nav-links.open{display:flex}
 .nav-links a{padding:12px 15px}
 .nav-cta{margin-left:auto}
 .menu-toggle{display:block}
 .hero-shell{grid-template-columns:1fr;padding:39px}
 .hero-directory{max-width:620px}
 .section{padding:76px 0}
 .browser-layout{display:block}
 .filter-panel{display:none}
 .toolbar{grid-template-columns:1fr auto}
 .mobile-filter-button{display:inline-flex;grid-row:2}
 .select-wrap{grid-row:2}
 .result-count{grid-row:2;align-self:center}
 .path-grid,.faq-layout,.contact-panel{grid-template-columns:1fr}
 .access-strip{grid-template-columns:1fr 1fr}
 .faq-layout{gap:32px}
 .footer-top{gap:35px}
 .mobile-filter-drawer{
  display:block;position:fixed;z-index:102;left:0;right:0;bottom:0;
  max-height:78vh;overflow:auto;padding:24px;
  border-radius:24px 24px 0 0;background:#fff;
  box-shadow:0 -18px 48px rgba(28,61,112,.18);
  transform:translateY(105%);transition:transform .25s ease;
 }
 .mobile-filter-drawer.open{transform:translateY(0)}
 .drawer-backdrop{
  position:fixed;z-index:101;inset:0;background:rgba(20,33,61,.32);
 }
 .drawer-backdrop.open{display:block}
 .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
 .drawer-head h2{margin:0;font-size:19px}
 .drawer-close{
  width:38px;height:38px;border:0;border-radius:50%;background:var(--blue-soft);color:var(--blue);
 }
}
@media (max-width:680px){
 .container{width:min(100% - 24px,var(--container))}
 .nav-shell{padding:9px 10px 9px 14px}
 .brand{min-width:0;max-width:calc(100% - 96px)}
 .brand-mark{width:32px;height:32px;flex-basis:32px}
 .brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
 .nav-cta{display:none}
 .page-hero{padding:30px 0 54px}
 .hero-shell{padding:27px 20px;border-radius:25px}
 .hero-copy h1{font-size:clamp(31px,9.5vw,41px);letter-spacing:-.04em}
 .hero-copy>p{font-size:15px}
 .hero-actions .btn{width:100%}
 .hero-directory{padding:17px}
 .directory-item{grid-template-columns:34px 1fr auto;padding:10px}
 .directory-number{width:34px;height:34px}
 .section{padding:58px 0}
 .section-head{display:block;margin-bottom:28px}
 .section-head p{margin-top:13px}
 .toolbar{display:flex;flex-wrap:wrap;padding:11px}
 .search-box{width:100%}
 .mobile-filter-button,.select-wrap{flex:1}
 .select-wrap select{width:100%;min-width:0}
 .result-count{width:100%;padding:0 3px}
 .content-item{grid-template-columns:104px minmax(0,1fr);gap:13px;padding:12px}
 .content-cover{min-height:105px}
 .cover-label{left:10px;bottom:20px;font-size:12px}
 .cover-index{left:10px;top:9px}
 .item-body h3{font-size:16px}
 .item-body p{-webkit-line-clamp:1;font-size:12px}
 .item-meta{gap:7px;margin-top:6px}
 .item-action{grid-column:1/-1;flex-direction:row;justify-content:space-between;padding-top:4px}
 .pagination{gap:5px}
 .page-link{min-width:37px;height:39px;padding:0 8px}
 .path-grid{gap:15px}
 .path-card{padding:25px;min-height:0}
 .path-number{font-size:58px}
 .access-strip{grid-template-columns:1fr}
 .contact-panel{padding:25px 18px;border-radius:24px}
 .feedback-form{grid-template-columns:1fr;padding:18px}
 .form-group,.form-group.full,.form-consent,.form-actions{grid-column:1}
 .form-actions{align-items:stretch;flex-direction:column}
 .form-actions .btn{width:100%}
 .footer-top{flex-direction:column}
 .footer-nav{gap:38px}
 .footer-bottom{flex-direction:column;gap:7px}
}
@media (max-width:420px){
 .content-item{grid-template-columns:88px minmax(0,1fr)}
 .content-cover{min-height:98px}
 .item-tags span:nth-child(n+3){display:none}
 .footer-nav{flex-direction:column;gap:24px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important}
}