/* roulang page: index */
:root {
            --primary: #0066cc;
            --primary-dark: #0052a3;
            --secondary: #f8f9fa;
            --text: #333333;
            --text-light: #666666;
            --border: #e0e0e0;
            --radius: 12px;
            --shadow: 0 4px 20px rgba(0, 102, 204, 0.08);
        }
        * {
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.7;
            color: var(--text);
            background-color: #fff;
            margin: 0;
            padding: 0;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .navbar {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }
        .nav-link {
            font-weight: 500;
            color: var(--text);
            transition: all 0.3s ease;
        }
        .nav-link:hover {
            color: var(--primary-dark);
        }
        .nav-link.active {
            color: var(--primary-dark);
            position: relative;
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-dark);
        }
        .hero {
            min-height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            display: flex;
            align-items: center;
            color: white;
            position: relative;
        }
        .hero-content {
            max-width: 800px;
        }
        .hero h1 {
            font-size: 3.2rem;
            margin-bottom: 1rem;
            line-height: 1.1;
        }
        .btn-primary {
            background: var(--primary);
            border: none;
            padding: 14px 32px;
            font-size: 1.1rem;
            border-radius: var(--radius);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
        }
        .section {
            padding: 100px 0;
        }
        .card {
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 102, 204, 0.12);
        }
        .news-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .news-date {
            color: var(--text-light);
            font-size: 0.95rem;
        }
        .footer {
            background: #f8f9fa;
            padding: 80px 0 40px;
            border-top: 1px solid var(--border);
        }
        .btn-outline-primary {
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 12px 28px;
        }
        .btn-outline-primary:hover {
            background: var(--primary);
            color: white;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        .feature-item {
            text-align: center;
        }
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.6rem;
            }
            .section {
                padding: 70px 0;
            }
        }
        .nav-item {
            position: relative;
        }

/* roulang page: category3 */
:root{--primary:#0066cc;--primary-dark:#0052a3;--secondary:#f8f9fa;--text:#333;--text-light:#666;--muted:#8a99a8;--border:#e0e0e0;--radius:12px;--shadow:0 4px 20px rgba(0,102,204,.08);--shadow-lg:0 18px 46px rgba(0,67,135,.14)}
    *,*:before,*:after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Roboto,sans-serif;line-height:1.7;color:var(--text);background:#fff;margin:0}
    a{text-decoration:none;color:inherit} img{max-width:100%;display:block} button,input{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;padding:13px 0}
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .nav-link{font-weight:600;color:var(--text)!important;padding:10px 13px!important;transition:.3s}
    .nav-link:hover{color:var(--primary)!important}
    .nav-link.active{color:var(--primary-dark)!important;position:relative}
    .nav-link.active:after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:3px;background:var(--primary);border-radius:4px}
    .navbar-toggler{border:1px solid var(--border);padding:8px 10px}
    .hero-inner{background:linear-gradient(110deg,rgba(3,35,75,.88),rgba(0,102,204,.55)),url('/assets/images/backpic/back-2.webp') center/cover;border-radius:0 0 28px 28px;min-height:510px;color:#fff;display:flex;align-items:center}
    .hero-copy{max-width:650px;padding:75px 0}
    .eyebrow,.tag{display:inline-flex;align-items:center;gap:8px;color:#cfe7ff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);padding:7px 13px;border-radius:30px;font-size:.85rem;font-weight:700}
    .hero h1{font-size:clamp(2.4rem,5vw,4.3rem);line-height:1.12;margin:22px 0 18px;font-weight:800;letter-spacing:-2px}
    .hero p{font-size:1.12rem;color:#e8f3ff;max-width:620px}
    .btn-primary,.btn-outline-light,.btn-outline-primary{border-radius:var(--radius);padding:12px 25px;font-weight:700;transition:.3s}
    .btn-primary{background:var(--primary);border:1px solid var(--primary)}
    .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-3px)}
    .btn-outline-light:hover{color:var(--primary);transform:translateY(-3px)}
    .btn-outline-primary{border:2px solid var(--primary);color:var(--primary)}
    .btn-outline-primary:hover{background:var(--primary);color:#fff}
    .section{padding:88px 0}
    .section-soft{background:#f7faff}
    .section-head{max-width:720px;margin-bottom:42px}
    .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
    .kicker{font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--primary);font-weight:800}
    h2{font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.25;font-weight:800;margin:10px 0 14px}
    .lead{font-size:1.08rem;color:var(--text-light)}
    .intro-panel{background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);padding:38px}
    .intro-panel p{color:var(--text-light);font-size:1.04rem;margin-bottom:0}
    .image-card{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);height:100%;background:#dbeafe}
    .image-card img{width:100%;height:100%;min-height:330px;object-fit:cover}
    .profile-card,.moment-card,.step-card,.faq-item,.story-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:.3s}
    .profile-card:hover,.moment-card:hover,.step-card:hover,.story-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
    .profile-card img{height:190px;width:100%;object-fit:cover;border-radius:12px 12px 0 0}
    .card-body{padding:24px}
    .profile-card h3,.moment-card h3,.story-card h3{font-size:1.18rem;font-weight:800;margin:10px 0}
    .card-body p{color:var(--text-light);margin:0}
    .small-label{color:var(--primary);font-size:.82rem;font-weight:800}
    .spotlight{background:#082d59;color:#fff;border-radius:24px;padding:42px;overflow:hidden;position:relative}
    .spotlight:after{content:"";position:absolute;width:260px;height:260px;border:32px solid rgba(74,169,255,.15);border-radius:50%;right:-70px;top:-90px}
    .spotlight p{color:#c8ddf2}
    .metric{border-left:3px solid #50a9ff;padding-left:18px}
    .metric strong{display:block;font-size:2rem;line-height:1.2}
    .metric span{color:#a9c6e2;font-size:.9rem}
    .step-card{padding:27px;height:100%}
    .step-no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e8f3ff;color:var(--primary);font-weight:800;font-size:1.1rem}
    .timeline{border-left:2px solid #b8d7f5;padding-left:28px}
    .timeline-item{position:relative;margin-bottom:28px}
    .timeline-item:before{content:"";position:absolute;left:-37px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--primary);border:3px solid #dceeff}
    .timeline-item h3{font-size:1.1rem;font-weight:800;margin-bottom:5px}
    .timeline-item p{color:var(--text-light);margin:0}
    .faq-item{padding:21px 25px;margin-bottom:14px}
    .faq-item summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:15px}
    .faq-item summary:after{content:"+";color:var(--primary);font-size:1.4rem;line-height:1}
    .faq-item[open] summary:after{content:"−"}
    .faq-answer{color:var(--text-light);padding-top:14px}
    .cta{background:linear-gradient(105deg,#0066cc,#034b91);color:#fff;border-radius:24px;padding:54px}
    .cta p{color:#d9edff;max-width:650px}
    .footer{background:#f8f9fa;padding:75px 0 35px;border-top:1px solid var(--border)}
    .footer h5{font-size:1rem;font-weight:800;margin-bottom:18px}
    .footer a{color:var(--text-light);display:block;margin-bottom:9px;transition:.25s}
    .footer a:hover{color:var(--primary);padding-left:3px}
    .footer-note{color:var(--text-light);font-size:.9rem;max-width:290px}
    .footer-bottom{border-top:1px solid var(--border);margin-top:45px;padding-top:22px;color:#7b8792;font-size:.86rem}
    :focus-visible{outline:3px solid rgba(0,102,204,.35);outline-offset:3px}
    @media(max-width:991px){.navbar-nav{padding-top:14px}.nav-link.active:after{display:none}.hero-inner{border-radius:0 0 22px 22px}.section{padding:68px 0}}
    @media(max-width:767px){.hero-inner{min-height:560px}.hero-copy{padding:55px 0}.hero h1{letter-spacing:-1px}.section{padding:58px 0}.intro-panel,.spotlight,.cta{padding:28px}.image-card img{min-height:230px}.metric{margin-top:22px}.footer{padding-top:55px}}

/* roulang page: category2 */
:root {
      --primary:#0066cc;
      --primary-dark:#0052a3;
      --secondary:#f8f9fa;
      --text:#333333;
      --text-light:#666666;
      --muted:#8793a1;
      --border:#e0e0e0;
      --radius:12px;
      --shadow:0 4px 20px rgba(0,102,204,.08);
      --shadow-lg:0 18px 45px rgba(0,78,155,.14);
      --soft-blue:#edf6ff;
      --navy:#0e2947;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      padding:0;
      color:var(--text);
      background:#fff;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
      line-height:1.7;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border);
      position:sticky;
      top:0;
      z-index:1000;
    }
    .navbar .container{min-height:76px}
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .nav-link{
      color:var(--text);
      font-weight:600;
      padding:26px 12px!important;
      position:relative;
      transition:.3s ease;
      white-space:nowrap;
    }
    .nav-link:hover,.nav-link.active{color:var(--primary-dark)}
    .nav-link.active:after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      height:3px;
      border-radius:3px;
      background:var(--primary);
    }
    .navbar-toggler{border:1px solid var(--border);padding:8px 10px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
    .hero-inner{
      min-height:470px;
      display:flex;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .inner-hero{
      background:linear-gradient(90deg,rgba(7,31,57,.86),rgba(7,31,57,.5)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .inner-hero:after{
      content:"";
      position:absolute;
      width:420px;height:420px;
      right:-120px;top:-140px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:50%;
      box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.025);
    }
    .eyebrow,.section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:1.5px;
      text-transform:uppercase;
    }
    .hero .eyebrow{color:#9bd0ff}
    .eyebrow i,.section-kicker i{font-size:.7rem}
    .hero h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.12;letter-spacing:-2px;margin:18px 0}
    .hero p{max-width:700px;color:rgba(255,255,255,.84);font-size:1.08rem;margin-bottom:28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn-primary{
      background:var(--primary);
      border:0;
      color:#fff;
      padding:13px 27px;
      border-radius:var(--radius);
      font-weight:700;
      transition:.3s ease;
    }
    .btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,102,204,.22)}
    .btn-light-custom{
      background:#fff;color:var(--primary);
      padding:12px 26px;border-radius:var(--radius);
      font-weight:700;transition:.3s ease
    }
    .btn-light-custom:hover{background:#e9f4ff;color:var(--primary-dark);transform:translateY(-3px)}
    .btn-outline-primary{
      border:2px solid var(--primary);color:var(--primary);
      padding:11px 25px;border-radius:var(--radius);font-weight:700;transition:.3s ease
    }
    .btn-outline-primary:hover{background:var(--primary);color:#fff}
    .section{padding:88px 0}
    .section-soft{background:var(--secondary)}
    .section-blue{background:var(--soft-blue)}
    .section-heading{margin-bottom:42px}
    .section-heading h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.2;margin:10px 0 12px;color:var(--navy);font-weight:800;letter-spacing:-1px}
    .section-heading p{color:var(--text-light);max-width:700px;margin:0}
    .intro-panel{
      background:#fff;border:1px solid var(--border);border-radius:20px;
      box-shadow:var(--shadow);padding:34px;
    }
    .intro-panel p{font-size:1.06rem;color:#586575;margin:0}
    .event-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
    .event-feature{border-radius:20px;overflow:hidden;min-height:390px;position:relative;color:#fff;background:#123}
    .event-feature img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
    .event-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,23,43,.88),rgba(5,23,43,.05) 70%)}
    .event-feature-content{position:absolute;z-index:1;left:32px;right:32px;bottom:28px}
    .event-feature h3{font-size:2rem;line-height:1.25;margin:12px 0 8px}
    .event-stack{display:grid;gap:18px}
    .event-mini{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;display:flex;gap:18px;align-items:flex-start;box-shadow:var(--shadow);transition:.3s ease}
    .event-mini:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
    .date-box{min-width:62px;background:var(--soft-blue);color:var(--primary);border-radius:12px;text-align:center;padding:8px 5px;font-weight:800;line-height:1.2}
    .date-box strong{display:block;font-size:1.55rem}
    .event-mini h4{font-size:1.1rem;color:var(--navy);margin:0 0 5px}
    .event-mini p{color:var(--text-light);font-size:.92rem;margin:0}
    .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .choice-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;position:relative;box-shadow:var(--shadow);transition:.3s ease}
    .choice-card.recommend{border:2px solid var(--primary);transform:translateY(-12px);box-shadow:var(--shadow-lg)}
    .choice-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
    .choice-card.recommend:hover{transform:translateY(-16px)}
    .recommend-badge{position:absolute;top:-14px;right:20px;background:var(--primary);color:#fff;border-radius:20px;padding:5px 13px;font-size:.78rem;font-weight:700}
    .choice-card h3{color:var(--navy);font-size:1.35rem;margin:12px 0 8px}
    .choice-card .desc{font-size:.92rem;color:var(--text-light);min-height:58px}
    .choice-list{list-style:none;padding:0;margin:20px 0 26px}
    .choice-list li{padding:9px 0;border-bottom:1px solid #eef2f5;color:#536170;font-size:.94rem}
    .choice-list i{color:var(--primary);margin-right:8px}
    .icon-circle{width:52px;height:52px;border-radius:16px;background:var(--soft-blue);display:grid;place-items:center;color:var(--primary);font-size:1.25rem}
    .advantage-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}
    .advantage-image{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
    .advantage-image img{width:100%;height:430px;object-fit:cover}
    .image-tag{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow);font-weight:700;color:var(--navy)}
    .advantage-list{display:grid;gap:20px}
    .advantage-item{display:flex;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--border)}
    .advantage-item h4{margin:0 0 5px;color:var(--navy);font-size:1.12rem}
    .advantage-item p{margin:0;color:var(--text-light);font-size:.94rem}
    .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cfe3f7;border-radius:18px;overflow:hidden}
    .stat{background:#fff;padding:28px 20px;text-align:center}
    .stat strong{display:block;font-size:2.2rem;color:var(--primary);line-height:1.2}
    .stat span{color:var(--text-light);font-size:.9rem}
    .scenario-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .scenario{background:#fff;padding:25px;border-radius:16px;border:1px solid var(--border);transition:.3s ease}
    .scenario:hover{border-color:#9bc8ef;transform:translateY(-5px)}
    .scenario h4{margin:17px 0 7px;color:var(--navy);font-size:1.08rem}
    .scenario p{color:var(--text-light);font-size:.9rem;margin:0}
    .process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
    .process:before{content:"";position:absolute;top:27px;left:10%;right:10%;height:2px;background:#b9daf7}
    .process-step{position:relative;text-align:center;padding:0 15px}
    .process-num{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;margin:0 auto 18px;font-size:1.15rem;font-weight:800;position:relative;z-index:1;border:6px solid #fff;box-shadow:0 0 0 2px #b9daf7}
    .process-step h4{color:var(--navy);font-size:1.05rem;margin-bottom:6px}
    .process-step p{color:var(--text-light);font-size:.9rem}
    .faq-wrap{max-width:900px;margin:0 auto}
    .accordion-item{border:1px solid var(--border)!important;border-radius:12px!important;margin-bottom:12px;overflow:hidden}
    .accordion-button{font-weight:700;color:var(--navy);padding:19px 22px;background:#fff}
    .accordion-button:not(.collapsed){color:var(--primary-dark);background:var(--soft-blue);box-shadow:none}
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(0,102,204,.13)}
    .accordion-body{color:var(--text-light);padding:0 22px 20px;background:var(--soft-blue)}
    .cta{
      background:linear-gradient(110deg,#075ea9,#0b82d2);
      color:#fff;border-radius:24px;padding:55px 60px;position:relative;overflow:hidden
    }
    .cta:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-60px;top:-100px;box-shadow:0 0 0 25px rgba(255,255,255,.06),0 0 0 50px rgba(255,255,255,.04)}
    .cta h2{font-size:2.2rem;margin:0 0 10px;position:relative;z-index:1}
    .cta p{color:rgba(255,255,255,.82);max-width:680px;margin:0;position:relative;z-index:1}
    .cta .btn-light-custom{position:relative;z-index:1;white-space:nowrap}
    .footer{background:#f8f9fa;padding:75px 0 30px;border-top:1px solid var(--border)}
    .footer h5{color:var(--navy);margin-bottom:18px;font-size:1rem}
    .footer p,.footer li,.footer a{color:var(--text-light);font-size:.92rem}
    .footer a{transition:.25s ease}
    .footer a:hover{color:var(--primary)}
    .footer ul{list-style:none;padding:0;margin:0}
    .footer li{margin-bottom:10px}
    .footer-bottom{border-top:1px solid var(--border);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
    .badge-soft{display:inline-block;background:#e7f3ff;color:var(--primary-dark);border-radius:20px;padding:5px 12px;font-size:.78rem;font-weight:700}
    :focus-visible{outline:3px solid rgba(0,102,204,.35);outline-offset:3px}
    @media(max-width:1024px){
      .nav-link{padding-left:8px!important;padding-right:8px!important;font-size:.92rem}
      .event-grid,.advantage-layout{grid-template-columns:1fr}
      .scenario-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .navbar .container{min-height:68px}
      .nav-link{padding:12px 8px!important}
      .nav-link.active:after{left:8px;right:auto;width:34px;bottom:5px}
      .hero-inner{min-height:410px}
      .section{padding:62px 0}
      .choice-grid{grid-template-columns:1fr}
      .choice-card.recommend{transform:none}
      .choice-card.recommend:hover{transform:translateY(-8px)}
      .stat-row{grid-template-columns:repeat(2,1fr)}
      .process{grid-template-columns:1fr 1fr;gap:26px 10px}
      .process:before{display:none}
      .cta{padding:38px 28px}
      .cta h2{font-size:1.8rem}
    }
    @media(max-width:520px){
      .container{padding:0 16px}
      .hero h1{font-size:2.45rem}
      .hero p{font-size:1rem}
      .hero-actions .btn-primary,.hero-actions .btn-light-custom{width:100%;text-align:center}
      .event-feature{min-height:330px}
      .event-feature-content{left:22px;right:22px}
      .event-feature h3{font-size:1.55rem}
      .scenario-grid{grid-template-columns:1fr}
      .advantage-image img{height:300px}
      .process{grid-template-columns:1fr}
      .stat strong{font-size:1.8rem}
      .footer{padding-top:55px}
    }

/* roulang page: category4 */
:root {
      --primary:#0066cc;
      --primary-dark:#0052a3;
      --primary-soft:#eaf4ff;
      --secondary:#f8f9fa;
      --text:#333333;
      --text-light:#666666;
      --muted:#8793a1;
      --border:#e0e0e0;
      --radius:12px;
      --radius-lg:22px;
      --shadow:0 4px 20px rgba(0,102,204,.08);
      --shadow-lg:0 18px 48px rgba(0,72,145,.14);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;padding:0;color:var(--text);background:#fff;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
      line-height:1.75;font-size:16px;
    }
    a{color:inherit;text-decoration:none;transition:all .3s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{
      background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;
      min-height:76px;
    }
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .navbar .logo:hover{color:var(--primary-dark)}
    .nav-link{font-weight:500;color:var(--text);padding:25px 12px!important;position:relative}
    .nav-link:hover,.nav-link.active{color:var(--primary-dark)}
    .nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:14px;height:3px;border-radius:4px;background:var(--primary)}
    .navbar-toggler{border:1px solid var(--border);padding:8px 10px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
    .hero-inner{
      min-height:470px;display:flex;align-items:center;color:#fff;
      background:linear-gradient(100deg,rgba(3,35,73,.9),rgba(0,77,153,.62)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      position:relative;overflow:hidden;
    }
    .hero-inner:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-100px;top:-120px}
    .hero-content{position:relative;z-index:1;max-width:760px;padding:72px 0}
    .eyebrow,.section-kicker{
      display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
      letter-spacing:1.5px;text-transform:uppercase;color:#82c3ff;margin-bottom:16px
    }
    .eyebrow:before,.section-kicker:before{content:"";width:26px;height:2px;background:currentColor}
    .hero-inner h1{font-size:clamp(2.3rem,5vw,4.35rem);line-height:1.13;letter-spacing:-1px;margin:0 0 20px;font-weight:800}
    .hero-inner p{font-size:1.12rem;color:rgba(255,255,255,.86);max-width:670px;margin:0 0 30px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .btn{border-radius:var(--radius);font-weight:700;padding:13px 25px;transition:all .3s ease}
    .btn-primary{background:var(--primary);border:2px solid var(--primary);color:#fff}
    .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-3px);box-shadow:0 9px 20px rgba(0,82,163,.22)}
    .btn-light{background:#fff;border:2px solid #fff;color:var(--primary-dark)}
    .btn-light:hover{background:#edf6ff;color:var(--primary-dark);transform:translateY(-3px)}
    .btn-outline-primary{border:2px solid var(--primary);color:var(--primary);padding:11px 23px}
    .btn-outline-primary:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
    .section{padding:92px 0}
    .section-tint{background:var(--secondary)}
    .section-blue{background:#f0f7ff}
    .section-heading{max-width:720px;margin-bottom:42px}
    .section-heading h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.25;margin:0 0 14px;font-weight:800;color:#182b42}
    .section-heading p{color:var(--text-light);margin:0;font-size:1.05rem}
    .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
    .intro-copy p{color:var(--text-light);margin-bottom:17px}
    .image-panel{position:relative}
    .image-panel img{height:380px;width:100%;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
    .image-note{position:absolute;left:-18px;bottom:22px;background:#fff;padding:18px 22px;border-radius:14px;box-shadow:var(--shadow);font-weight:700;color:var(--primary-dark)}
    .image-note span{display:block;color:var(--text-light);font-size:13px;font-weight:400}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .feature-card,.info-card,.faq-item,.stat-box{
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
      transition:all .3s ease
    }
    .feature-card{padding:28px;min-height:210px}
    .feature-card:hover,.info-card:hover,.stat-box:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:#b9dcfa}
    .icon-box{width:52px;height:52px;border-radius:15px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}
    .feature-card h3,.info-card h3{font-size:1.2rem;margin:0 0 10px;color:#1b3551}
    .feature-card p,.info-card p{color:var(--text-light);margin:0;font-size:.95rem}
    .split-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;align-items:start}
    .stat-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .stat-box{padding:25px 20px}
    .stat-box strong{font-size:2rem;color:var(--primary-dark);display:block;line-height:1.2}
    .stat-box span{font-size:.9rem;color:var(--text-light)}
    .timeline{border-left:2px solid #cbe4fb;margin-left:14px;padding-left:28px}
    .timeline-item{position:relative;padding:0 0 28px}
    .timeline-item:last-child{padding-bottom:0}
    .timeline-item:before{content:"";position:absolute;width:12px;height:12px;background:var(--primary);border:3px solid #dceeff;border-radius:50%;left:-35px;top:8px}
    .timeline-item small{color:var(--primary);font-weight:700}
    .timeline-item h3{font-size:1.15rem;margin:4px 0 6px}
    .timeline-item p{color:var(--text-light);margin:0}
    .showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
    .showcase-main{position:relative;min-height:360px;overflow:hidden;border-radius:var(--radius-lg);color:#fff}
    .showcase-main img{width:100%;height:100%;object-fit:cover}
    .showcase-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,29,55,.86),transparent 70%)}
    .showcase-caption{position:absolute;z-index:1;bottom:28px;left:30px;right:30px}
    .showcase-caption h3{font-size:1.65rem;margin:8px 0 5px}
    .showcase-caption p{margin:0;color:rgba(255,255,255,.82)}
    .side-list{display:flex;flex-direction:column;gap:15px}
    .info-card{padding:23px;display:flex;gap:16px;align-items:flex-start}
    .info-card .mini-icon{color:var(--primary);font-size:20px;width:28px;text-align:center}
    .info-card h3{font-size:1.05rem;margin-bottom:4px}
    .info-card p{font-size:.9rem}
    .tag{display:inline-block;padding:5px 11px;border-radius:50px;background:var(--primary-soft);color:var(--primary-dark);font-size:12px;font-weight:700}
    .data-board{background:#0b2b4e;color:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-lg)}
    .data-board .section-kicker{color:#87c9ff}
    .data-board h2{font-size:2rem;margin:0 0 12px}
    .data-board p{color:rgba(255,255,255,.72)}
    .board-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:28px}
    .board-cell{padding:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px}
    .board-cell b{display:block;font-size:1.5rem;color:#82c3ff}
    .board-cell span{font-size:.85rem;color:rgba(255,255,255,.68)}
    .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .faq-item{padding:23px 25px}
    .faq-item h3{font-size:1.06rem;color:#1b3551;margin:0 0 9px}
    .faq-item p{font-size:.94rem;color:var(--text-light);margin:0}
    .cta{
      background:linear-gradient(120deg,#0052a3,#1684dd);border-radius:var(--radius-lg);padding:54px 60px;color:#fff;
      display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:var(--shadow-lg)
    }
    .cta h2{font-size:2.15rem;margin:0 0 10px}
    .cta p{margin:0;color:rgba(255,255,255,.82);max-width:650px}
    .footer{background:#f8f9fa;padding:74px 0 30px;border-top:1px solid var(--border)}
    .footer h5{font-size:1rem;margin:0 0 18px;color:#1d334a}
    .footer p{color:var(--text-light);font-size:.94rem}
    .footer ul{padding:0;margin:0;list-style:none}
    .footer li{margin-bottom:10px}
    .footer li a{color:var(--text-light);font-size:.92rem}
    .footer li a:hover{color:var(--primary)}
    .footer-bottom{border-top:1px solid var(--border);margin-top:42px;padding-top:22px;color:#7b8794;font-size:.84rem;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
    :focus-visible{outline:3px solid rgba(0,102,204,.35);outline-offset:3px}
    @media(max-width:992px){
      .navbar .nav-link{padding:13px 10px!important}
      .nav-link.active::after{bottom:5px;left:10px;right:10px}
      .intro-grid,.split-layout,.showcase{grid-template-columns:1fr}
      .image-panel{max-width:720px}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
      .cta{padding:42px 34px}
    }
    @media(max-width:768px){
      .hero-inner{min-height:470px}
      .section{padding:66px 0}
      .feature-grid,.faq-list{grid-template-columns:1fr}
      .board-row{grid-template-columns:1fr}
      .data-board{padding:28px 22px}
      .cta{display:block;padding:36px 25px}
      .cta .btn{margin-top:24px}
      .image-panel img{height:300px}
    }
    @media(max-width:520px){
      .container{padding:0 16px}
      .hero-content{padding:60px 0}
      .hero-inner h1{font-size:2.3rem}
      .hero-inner p{font-size:1rem}
      .hero-actions .btn{width:100%;text-align:center}
      .stat-stack{grid-template-columns:1fr 1fr}
      .stat-box{padding:19px 14px}
      .stat-box strong{font-size:1.55rem}
      .image-note{left:12px;bottom:14px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:8px}
    }

/* roulang page: category5 */
:root {
      --primary: #0066cc;
      --primary-dark: #0052a3;
      --secondary: #f8f9fa;
      --text: #333333;
      --text-light: #666666;
      --muted: #7a8796;
      --border: #e0e0e0;
      --soft-blue: #eaf4ff;
      --soft-navy: #102b4d;
      --radius: 12px;
      --shadow: 0 4px 20px rgba(0, 102, 204, 0.08);
      --shadow-lg: 0 20px 45px rgba(0, 72, 145, 0.14);
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
      line-height: 1.7;
      color: var(--text);
      background: #fff;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: all .3s ease;
    }

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

    button, input {
      font: inherit;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .navbar {
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 15px 0;
    }

    .logo {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -.06em;
      color: var(--primary);
      text-decoration: none;
    }

    .navbar-nav { gap: 5px; }

    .nav-link {
      font-weight: 500;
      color: var(--text);
      padding: 9px 13px !important;
      border-radius: 8px;
      transition: all .3s ease;
      white-space: nowrap;
    }

    .nav-link:hover {
      color: var(--primary-dark);
      background: var(--soft-blue);
    }

    .nav-link.active {
      color: var(--primary-dark);
      position: relative;
      background: var(--soft-blue);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      bottom: -7px;
      left: 13px;
      right: 13px;
      height: 3px;
      background: var(--primary-dark);
      border-radius: 5px;
    }

    .navbar-toggler {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 10px;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(0,102,204,.12);
    }

    .hero-inner {
      position: relative;
      min-height: 450px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: 0 0 28px 28px;
    }

    .page-hero {
      background:
        linear-gradient(100deg, rgba(9,39,73,.9) 0%, rgba(12,69,126,.78) 52%, rgba(0,102,204,.42) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      color: #fff;
    }

    .hero-content {
      max-width: 760px;
      padding: 76px 0 82px;
    }

    .eyebrow, .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 14px;
    }

    .page-hero .eyebrow { color: #a9d5ff; }

    .hero-title {
      font-size: clamp(2.35rem, 5vw, 4.4rem);
      line-height: 1.1;
      letter-spacing: -.045em;
      font-weight: 800;
      margin: 0 0 20px;
    }

    .hero-copy {
      font-size: 1.12rem;
      color: rgba(255,255,255,.85);
      max-width: 650px;
      margin-bottom: 30px;
    }

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

    .btn-primary {
      background: var(--primary);
      border: 1px solid var(--primary);
      color: #fff;
      padding: 13px 27px;
      font-size: 1rem;
      font-weight: 700;
      border-radius: var(--radius);
      transition: all .3s ease;
    }

    .btn-primary:hover, .btn-primary:focus {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 10px 22px rgba(0,82,163,.22);
    }

    .btn-light-custom {
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.45);
      color: #fff;
      padding: 13px 27px;
      font-weight: 700;
      border-radius: var(--radius);
    }

    .btn-light-custom:hover, .btn-light-custom:focus {
      background: #fff;
      color: var(--primary-dark);
      transform: translateY(-3px);
    }

    .btn-outline-primary {
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 10px 22px;
      border-radius: 10px;
      font-weight: 700;
    }

    .btn-outline-primary:hover {
      background: var(--primary);
      color: #fff;
    }

    .section { padding: 84px 0; }

    .section-soft {
      background: var(--secondary);
      border-top: 1px solid #edf0f3;
      border-bottom: 1px solid #edf0f3;
    }

    .section-heading {
      max-width: 730px;
      margin-bottom: 42px;
    }

    .section-heading h2 {
      font-size: clamp(1.8rem, 3vw, 2.75rem);
      line-height: 1.2;
      letter-spacing: -.035em;
      margin: 0 0 14px;
      font-weight: 800;
      color: #173452;
    }

    .section-heading p {
      color: var(--text-light);
      font-size: 1.03rem;
      margin: 0;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 54px;
      align-items: center;
    }

    .intro-text p {
      color: var(--text-light);
      margin-bottom: 17px;
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 26px 0 0;
    }

    .check-list li {
      display: flex;
      gap: 12px;
      margin: 13px 0;
      color: #405366;
    }

    .check-list i {
      color: var(--primary);
      margin-top: 6px;
    }

    .image-card {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      background: #dceeff;
    }

    .image-card img {
      width: 100%;
      height: 410px;
      object-fit: cover;
    }

    .image-caption {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 20px;
      padding: 17px 20px;
      color: #fff;
      border-radius: 14px;
      background: rgba(8,42,78,.84);
      backdrop-filter: blur(8px);
    }

    .image-caption strong {
      display: block;
      font-size: 1.05rem;
      margin-bottom: 3px;
    }

    .image-caption span {
      font-size: .88rem;
      color: rgba(255,255,255,.75);
    }

    .focus-grid {
      display: grid;
      grid-template-columns: 1.4fr .8fr .8fr;
      gap: 20px;
    }

    .focus-card, .plan-card, .scenario-card, .faq-item, .evidence-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: all .3s ease;
    }

    .focus-card:hover, .plan-card:hover, .scenario-card:hover, .evidence-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--shadow-lg);
      border-color: #b9d8f5;
    }

    .focus-card {
      min-height: 205px;
      padding: 28px;
    }

    .focus-card.large {
      min-height: 430px;
      padding: 0;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(0deg, rgba(9,43,79,.92), rgba(9,43,79,.08)),
        url('/assets/images/coverpic/cover-4.webp') center/cover;
      display: flex;
      align-items: flex-end;
    }

    .focus-card.large .focus-content { padding: 30px; }

    .icon-box {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--soft-blue);
      color: var(--primary);
      border-radius: 14px;
      font-size: 1.2rem;
      margin-bottom: 18px;
    }

    .focus-card h3, .plan-card h3, .scenario-card h3 {
      font-size: 1.18rem;
      font-weight: 750;
      color: #173452;
      margin-bottom: 10px;
    }

    .focus-card.large h3 { color: #fff; font-size: 1.55rem; }

    .focus-card p, .plan-card p, .scenario-card p {
      color: var(--text-light);
      margin: 0;
      font-size: .95rem;
    }

    .focus-card.large p { color: rgba(255,255,255,.8); }

    .metric-band {
      background: var(--soft-navy);
      color: #fff;
      padding: 31px 0;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .metric {
      padding: 8px 22px;
      border-left: 1px solid rgba(255,255,255,.2);
    }

    .metric:first-child { border-left: 0; }

    .metric strong {
      display: block;
      color: #fff;
      font-size: 2rem;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .metric span {
      color: rgba(255,255,255,.68);
      font-size: .92rem;
    }

    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 24px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: #cfe4f8;
    }

    .timeline-step {
      position: relative;
      z-index: 1;
      padding-top: 58px;
    }

    .step-number {
      position: absolute;
      top: 0;
      left: 0;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      background: var(--primary);
      border: 5px solid #fff;
      box-shadow: 0 0 0 2px #acd2f2;
      font-weight: 800;
    }

    .timeline-step h3 {
      color: #173452;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .timeline-step p {
      color: var(--text-light);
      font-size: .93rem;
      margin: 0;
    }

    .plan-layout {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 28px;
      align-items: stretch;
    }

    .plan-lead {
      color: #fff;
      padding: 38px;
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(0,82,163,.92), rgba(0,102,204,.68)),
        url('/assets/images/backpic/back-3.webp') center/cover;
      box-shadow: var(--shadow-lg);
    }

    .plan-lead h2 {
      font-size: 2rem;
      line-height: 1.2;
      margin: 0 0 16px;
    }

    .plan-lead p { color: rgba(255,255,255,.8); }

    .plan-lead .tag {
      display: inline-block;
      padding: 5px 11px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50px;
      font-size: .78rem;
      margin: 3px 4px 0 0;
    }

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

    .plan-card {
      padding: 23px;
    }

    .plan-card .plan-time {
      color: var(--primary);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

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

    .scenario-card {
      padding: 28px;
      position: relative;
      overflow: hidden;
    }

    .scenario-card::before {
      content: "";
      position: absolute;
      right: -22px;
      top: -25px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: #edf7ff;
    }

    .scenario-card .number {
      position: relative;
      display: block;
      color: #b3d6f5;
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 22px;
    }

    .evidence-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .evidence-card {
      padding: 29px;
    }

    .evidence-card h3 {
      color: #173452;
      font-size: 1.2rem;
      margin-bottom: 12px;
    }

    .evidence-card p {
      color: var(--text-light);
      margin-bottom: 18px;
    }

    .mini-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mini-list li {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #edf0f3;
      padding: 11px 0;
      color: #516477;
      font-size: .92rem;
    }

    .mini-list b { color: var(--primary-dark); }

    .faq-wrap {
      max-width: 900px;
      margin: 0 auto;
    }

    .faq-item {
      margin-bottom: 13px;
      overflow: hidden;
    }

    .faq-item button {
      width: 100%;
      border: 0;
      background: #fff;
      text-align: left;
      padding: 20px 24px;
      color: #173452;
      font-weight: 750;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

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

    .faq-item button i {
      color: var(--primary);
      transition: transform .3s ease;
    }

    .faq-item button[aria-expanded="true"] i { transform: rotate(45deg); }

    .faq-answer {
      padding: 0 24px 20px;
      color: var(--text-light);
      font-size: .95rem;
    }

    .cta-box {
      position: relative;
      overflow: hidden;
      background: #eaf4ff;
      border: 1px solid #cfe5f8;
      border-radius: 24px;
      padding: 48px 55px;
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: center;
    }

    .cta-box::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(0,102,204,.07);
      right: -55px;
      top: -80px;
    }

    .cta-box h2 {
      position: relative;
      z-index: 1;
      color: #173452;
      margin: 0 0 10px;
      font-size: 2rem;
    }

    .cta-box p {
      position: relative;
      z-index: 1;
      color: var(--text-light);
      margin: 0;
      max-width: 650px;
    }

    .cta-box .btn { position: relative; z-index: 1; white-space: nowrap; }

    .footer {
      background: #f8f9fa;
      padding: 70px 0 35px;
      border-top: 1px solid var(--border);
    }

    .footer .logo { display: inline-block; margin-bottom: 13px; }

    .footer p {
      color: var(--text-light);
      max-width: 300px;
      font-size: .93rem;
    }

    .footer h5 {
      color: #173452;
      font-size: 1rem;
      margin-bottom: 18px;
      font-weight: 750;
    }

    .footer ul { list-style: none; padding: 0; margin: 0; }

    .footer li { margin-bottom: 9px; }

    .footer li a {
      color: var(--text-light);
      font-size: .9rem;
    }

    .footer li a:hover { color: var(--primary); padding-left: 3px; }

    .footer-bottom {
      border-top: 1px solid var(--border);
      margin-top: 42px;
      padding-top: 22px;
      color: #7d8995;
      font-size: .82rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
    }

    .footer-bottom a:hover { color: var(--primary); }

    :focus-visible {
      outline: 3px solid rgba(0,102,204,.35);
      outline-offset: 3px;
    }

    @media (max-width: 1024px) {
      .navbar-nav { gap: 0; }
      .nav-link { padding-left: 9px !important; padding-right: 9px !important; font-size: .92rem; }
      .focus-grid { grid-template-columns: repeat(2, 1fr); }
      .focus-card.large { grid-row: span 2; }
    }

    @media (max-width: 768px) {
      .navbar { padding: 11px 0; }
      .navbar-collapse { padding-top: 14px; }
      .nav-link.active::after { display: none; }
      .hero-inner { min-height: 430px; border-radius: 0 0 20px 20px; }
      .hero-content { padding: 65px 0; }
      .section { padding: 64px 0; }
      .intro-grid, .plan-layout, .evidence-layout { grid-template-columns: 1fr; gap: 30px; }
      .focus-grid { grid-template-columns: 1fr 1fr; }
      .focus-card.large { grid-row: auto; min-height: 320px; grid-column: span 2; }
      .metric-grid { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(3) { border-left: 0; }
      .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
      .timeline::before { display: none; }
      .scenario-grid { grid-template-columns: 1fr; }
      .cta-box { padding: 35px 28px; display: block; }
      .cta-box .btn { margin-top: 24px; }
    }

    @media (max-width: 520px) {
      .container { padding: 0 16px; }
      .hero-title { font-size: 2.35rem; }
      .hero-copy { font-size: 1rem; }
      .hero-actions .btn { width: 100%; }
      .focus-grid, .plan-list, .timeline { grid-template-columns: 1fr; }
      .focus-card.large { grid-column: auto; }
      .metric-grid { grid-template-columns: 1fr 1fr; gap: 0; }
      .metric { padding: 14px 10px; border-left: 0; }
      .metric strong { font-size: 1.55rem; }
      .image-card img { height: 290px; }
      .cta-box h2 { font-size: 1.65rem; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-bottom: 8px; }
    }

/* roulang page: category1 */
:root{
      --primary:#0066cc;
      --primary-dark:#0052a3;
      --secondary:#f8f9fa;
      --text:#333333;
      --text-light:#666666;
      --muted:#8b98a7;
      --border:#e0e0e0;
      --radius:12px;
      --shadow:0 4px 20px rgba(0,102,204,.08);
      --shadow-lg:0 18px 45px rgba(0,70,145,.13);
      --soft-blue:#edf6ff;
      --dark:#10243d;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;line-height:1.75;color:var(--text);background:#fff}
    a{color:inherit;text-decoration:none;transition:all .3s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;min-height:76px}
    .navbar .container{min-height:76px}
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .logo:hover{color:var(--primary-dark)}
    .nav-link{font-weight:600;color:var(--text);padding:27px 13px!important;position:relative}
    .nav-link:hover{color:var(--primary)}
    .nav-link.active{color:var(--primary-dark)}
    .nav-link.active:after{content:"";position:absolute;bottom:12px;left:13px;right:13px;height:3px;border-radius:4px;background:var(--primary)}
    .navbar-toggler{border:1px solid var(--border);padding:8px 11px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,102,204,.14)}
    .hero-inner{background:linear-gradient(90deg,rgba(7,30,57,.86),rgba(8,57,105,.58)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat}
    .hero{min-height:560px;color:#fff;display:flex;align-items:center}
    .hero-content{max-width:760px;padding:82px 0}
    .eyebrow,.badge-soft{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#dceeff;border-radius:30px;padding:7px 15px;font-size:14px;font-weight:700}
    .hero h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.16;letter-spacing:-2px;margin:22px 0 18px;font-weight:800}
    .hero p{font-size:18px;color:#e6f2ff;max-width:690px;margin-bottom:28px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .btn-primary,.btn-light-custom,.btn-outline-primary{border-radius:10px;padding:13px 25px;font-weight:700;transition:all .3s ease}
    .btn-primary{background:var(--primary);border:1px solid var(--primary);color:#fff}
    .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-3px)}
    .btn-light-custom{background:#fff;color:var(--primary-dark);border:1px solid #fff}
    .btn-light-custom:hover{background:#eaf5ff;color:var(--primary-dark);transform:translateY(-3px)}
    .btn-outline-primary{border:2px solid var(--primary);color:var(--primary)}
    .btn-outline-primary:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
    .trust-row{display:flex;gap:25px;flex-wrap:wrap;margin-top:32px;color:#dceeff;font-size:14px}
    .trust-row i{color:#78c2ff;margin-right:6px}
    .section{padding:88px 0}
    .section-label{color:var(--primary);font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
    .section-title{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.3;font-weight:800;color:var(--dark);margin:0 0 16px}
    .section-lead{color:var(--text-light);max-width:700px;font-size:17px}
    .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
    .intro-image{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
    .intro-image img{width:100%;height:350px;object-fit:cover}
    .image-note{position:absolute;left:20px;bottom:20px;background:rgba(8,39,72,.88);color:#fff;border-radius:10px;padding:12px 16px;font-size:14px}
    .check-list{padding:0;margin:25px 0 0;list-style:none}
    .check-list li{display:flex;gap:12px;margin:14px 0;color:#465466}
    .check-list i{color:var(--primary);margin-top:5px}
    .soft-section{background:var(--soft-blue)}
    .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
    .benefit-card,.info-card,.scenario-card,.faq-item{background:#fff;border:1px solid rgba(0,102,204,.1);border-radius:var(--radius);box-shadow:var(--shadow);transition:all .3s ease}
    .benefit-card:hover,.info-card:hover,.scenario-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
    .benefit-card{padding:30px}
    .icon-box{height:48px;width:48px;border-radius:13px;background:#e5f2ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:22px}
    .benefit-card h3,.info-card h3,.scenario-card h3{font-size:20px;color:var(--dark);font-weight:750;margin-bottom:10px}
    .benefit-card p,.info-card p,.scenario-card p{color:var(--text-light);margin:0}
    .stats-band{background:var(--dark);color:#fff;padding:54px 0}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
    .stat{padding-left:22px;border-left:1px solid rgba(255,255,255,.2)}
    .stat strong{display:block;font-size:2.25rem;color:#7dc6ff;line-height:1.2}
    .stat span{color:#c7d8e8;font-size:14px}
    .feature-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
    .feature-panel{background:#f7fbff;border-radius:18px;padding:30px;border:1px solid #dceeff}
    .feature-panel h3{color:var(--dark);font-size:21px;margin-bottom:18px}
    .signal{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid #d8e8f5}
    .signal:last-child{border-bottom:0}
    .signal b{font-size:15px;color:var(--dark)}
    .signal span{font-size:13px;color:var(--primary);background:#e7f3ff;border-radius:20px;padding:4px 9px}
    .article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .info-card{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px}
    .info-card img{width:130px;height:125px;object-fit:cover;border-radius:9px}
    .info-card h3{font-size:17px;margin:2px 0 7px}
    .info-card p{font-size:14px;line-height:1.6}
    .card-meta{font-size:12px;color:var(--muted);margin-bottom:5px}
    .scenario-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;margin-top:38px}
    .scenario-card{padding:28px;min-height:180px}
    .scenario-card.wide{grid-row:span 2;background:linear-gradient(145deg,#0d477f,#0875c7);color:#fff}
    .scenario-card.wide h3,.scenario-card.wide p{color:#fff}
    .scenario-card.wide p{opacity:.86}
    .scenario-card .mini-link{display:inline-block;margin-top:22px;color:var(--primary);font-weight:700}
    .scenario-card.wide .mini-link{color:#b9e1ff}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:42px}
    .step{padding:0 24px 0 0;position:relative}
    .step:not(:last-child):after{content:"";position:absolute;top:21px;right:20px;width:calc(100% - 70px);height:1px;background:#b9d9f3}
    .step-no{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:18px;position:relative;z-index:1}
    .step h3{font-size:18px;color:var(--dark)}
    .step p{color:var(--text-light);font-size:14px}
    .faq-wrap{max-width:900px;margin:38px auto 0}
    .faq-item{margin-bottom:13px;overflow:hidden}
    .faq-item summary{cursor:pointer;padding:20px 24px;color:var(--dark);font-weight:750;list-style:none;position:relative;padding-right:55px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";position:absolute;right:24px;color:var(--primary);font-size:22px;top:15px}
    .faq-item[open] summary:after{content:"−"}
    .faq-answer{padding:0 24px 20px;color:var(--text-light);font-size:15px}
    .cta{background:linear-gradient(110deg,#0066cc,#07539e);color:#fff;border-radius:20px;padding:55px 65px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{font-size:2rem;margin:0 0 10px}
    .cta p{margin:0;color:#d9edff}
    .footer{background:#f8f9fa;padding:72px 0 28px;border-top:1px solid var(--border)}
    .footer h5{color:var(--dark);font-size:16px;margin-bottom:18px}
    .footer p,.footer li,.footer a{color:var(--text-light);font-size:14px}
    .footer ul{list-style:none;padding:0;margin:0}
    .footer li{margin-bottom:10px}
    .footer a:hover{color:var(--primary)}
    .footer-bottom{border-top:1px solid var(--border);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text-light)}
    .footer-bottom a{margin-left:16px}
    :focus-visible{outline:3px solid rgba(0,102,204,.35);outline-offset:3px}
    @media(max-width:992px){
      .nav-link{padding:12px 10px!important}.nav-link.active:after{bottom:4px;left:10px;right:10px}
      .intro-grid,.feature-layout{grid-template-columns:1fr}.benefit-grid{grid-template-columns:repeat(2,1fr)}
      .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:28px}.steps{grid-template-columns:repeat(2,1fr);gap:30px}.step:not(:last-child):after{display:none}
    }
    @media(max-width:768px){
      .hero{min-height:510px}.hero-content{padding:65px 0}.section{padding:65px 0}
      .benefit-grid,.article-list,.scenario-grid{grid-template-columns:1fr}.scenario-card.wide{grid-row:auto}
      .info-card{grid-template-columns:110px 1fr}.info-card img{width:110px;height:115px}
      .cta{padding:38px 26px;display:block}.cta .btn{margin-top:24px}.footer{padding-top:55px}
    }
    @media(max-width:520px){
      .container{padding:0 16px}.hero h1{letter-spacing:-1px}.hero p{font-size:16px}
      .trust-row{gap:11px;display:block}.trust-row span{display:block;margin:6px 0}
      .stats-grid{grid-template-columns:1fr 1fr}.stat strong{font-size:1.75rem}.stat{padding-left:14px}
      .steps{grid-template-columns:1fr}.info-card{grid-template-columns:1fr}.info-card img{width:100%;height:180px}
      .hero-actions .btn{width:100%;text-align:center}.footer-bottom{display:block}.footer-bottom a{margin:0 14px 0 0}
    }

/* roulang page: category6 */
:root {
      --primary: #0066cc;
      --primary-dark: #0052a3;
      --secondary: #f8f9fa;
      --text: #333333;
      --text-light: #666666;
      --border: #e0e0e0;
      --radius: 12px;
      --shadow: 0 4px 20px rgba(0,102,204,.08);
      --shadow-lg: 0 18px 42px rgba(0,75,150,.13);
      --ink-deep: #0d2745;
      --blue-soft: #eaf4ff;
      --blue-pale: #f6faff;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--text);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;line-height:1.75}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;padding:13px 0}
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .nav-link{font-weight:600;color:var(--text);padding:10px 12px!important;transition:.3s ease;position:relative}
    .nav-link:hover,.nav-link.active{color:var(--primary-dark)}
    .nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:10px;background:var(--primary)}
    .navbar-toggler{border:1px solid var(--border);padding:7px 10px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
    .hero-inner{padding:82px 0 92px;position:relative;z-index:1}
    .sub-hero{background:linear-gradient(105deg,rgba(6,35,67,.94),rgba(0,102,204,.78)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
    .sub-hero::after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-100px;top:-130px;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.03)}
    .eyebrow,.badge-soft{display:inline-flex;align-items:center;gap:8px;border-radius:50px;padding:6px 13px;font-size:13px;font-weight:700;letter-spacing:.03em}
    .eyebrow{color:#dff0ff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
    .badge-soft{background:var(--blue-soft);color:var(--primary-dark)}
    .hero h1{font-size:clamp(2.35rem,5vw,4.5rem);line-height:1.12;letter-spacing:-.04em;margin:22px 0 18px;font-weight:800}
    .hero-lead{font-size:1.15rem;max-width:680px;color:rgba(255,255,255,.84);margin-bottom:28px}
    .section{padding:88px 0}
    .section-tight{padding:64px 0}
    .section-head{max-width:720px;margin-bottom:42px}
    .section-head h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.25;color:var(--ink-deep);font-weight:800;margin:13px 0 14px}
    .section-head p{color:var(--text-light);font-size:1.05rem;margin:0}
    .btn-primary{background:var(--primary);border:0;color:#fff;border-radius:var(--radius);padding:13px 28px;font-weight:700;transition:.3s ease;box-shadow:0 8px 18px rgba(0,102,204,.18)}
    .btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-3px);box-shadow:0 13px 26px rgba(0,82,163,.24)}
    .btn-light-custom{background:#fff;color:var(--primary-dark);border-radius:var(--radius);padding:13px 28px;font-weight:700;transition:.3s ease}
    .btn-light-custom:hover{background:#eaf4ff;color:var(--primary-dark);transform:translateY(-3px)}
    .btn-outline-primary{border:2px solid var(--primary);color:var(--primary);border-radius:var(--radius);padding:11px 26px;font-weight:700;transition:.3s ease}
    .btn-outline-primary:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
    .btn:focus,input:focus,textarea:focus{outline:3px solid rgba(0,102,204,.2);outline-offset:2px}
    .hero-panel{background:#fff;border:1px solid rgba(255,255,255,.45);border-radius:22px;padding:27px;color:var(--text);box-shadow:0 24px 60px rgba(0,24,54,.2);position:relative;z-index:2}
    .hero-panel h3{color:var(--ink-deep);font-size:1.25rem;margin-bottom:18px}
    .hero-panel .form-control{border:1px solid var(--border);border-radius:9px;padding:11px 13px}
    .panel-note{font-size:12px;color:var(--text-light);margin-top:12px}
    .stat-strip{margin-top:-38px;position:relative;z-index:3}
    .stat-box{background:#fff;border:1px solid var(--border);padding:23px 25px;height:100%;box-shadow:var(--shadow);border-radius:var(--radius)}
    .stat-box strong{display:block;font-size:2rem;color:var(--primary-dark);line-height:1.2}
    .stat-box span{color:var(--text-light);font-size:.9rem}
    .split-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center}
    .visual-card{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;background:#dceeff}
    .visual-card img{width:100%;height:440px;object-fit:cover}
    .visual-caption{position:absolute;left:22px;right:22px;bottom:20px;background:rgba(8,35,65,.85);backdrop-filter:blur(8px);color:#fff;padding:16px 18px;border-radius:13px}
    .visual-caption strong{display:block;font-size:1.05rem}
    .visual-caption span{font-size:.86rem;color:rgba(255,255,255,.75)}
    .check-list{list-style:none;padding:0;margin:25px 0 0}
    .check-list li{display:flex;gap:13px;margin:16px 0;color:#4d5b68}
    .check-list i{color:var(--primary);margin-top:6px}
    .data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .data-card{padding:25px;background:var(--blue-pale);border:1px solid #dcecff;border-radius:16px;min-height:170px;transition:.3s ease}
    .data-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
    .data-card i{font-size:23px;color:var(--primary);margin-bottom:19px}
    .data-card h3{font-size:1.1rem;color:var(--ink-deep);margin-bottom:8px}
    .data-card p{font-size:.92rem;color:var(--text-light);margin:0}
    .dark-section{background:#0d2745;color:#fff}
    .dark-section .section-head h2{color:#fff}
    .dark-section .section-head p{color:rgba(255,255,255,.68)}
    .metric-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .metric-item{padding:19px 20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06)}
    .metric-item b{font-size:1.4rem;color:#74c5ff;display:block}
    .metric-item span{font-size:.9rem;color:rgba(255,255,255,.7)}
    .use-case{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);height:100%;border:1px solid #edf1f5}
    .use-case img{height:190px;width:100%;object-fit:cover}
    .use-case-body{padding:22px}
    .use-case h3{color:var(--ink-deep);font-size:1.2rem}
    .use-case p{color:var(--text-light);font-size:.94rem;margin-bottom:0}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
    .step{position:relative;padding:25px;border-top:3px solid var(--primary);background:#fff;box-shadow:var(--shadow);border-radius:0 0 15px 15px}
    .step::before{counter-increment:step;content:"0" counter(step);font-size:2rem;color:#b9dafa;font-weight:800}
    .step h3{font-size:1.1rem;color:var(--ink-deep);margin:15px 0 8px}
    .step p{font-size:.92rem;color:var(--text-light);margin:0}
    .compare{background:#f6faff;border-radius:22px;padding:34px}
    .compare-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #dce8f4}
    .compare-row:last-child{border-bottom:0}
    .compare-row strong{color:var(--ink-deep)}
    .compare-row span{color:var(--text-light);font-size:.94rem}
    .faq-wrap{max-width:900px}
    .accordion-item{border:1px solid var(--border)!important;border-radius:12px!important;margin-bottom:12px;overflow:hidden}
    .accordion-button{font-weight:700;color:var(--ink-deep);padding:19px 21px;background:#fff}
    .accordion-button:not(.collapsed){color:var(--primary-dark);background:var(--blue-pale);box-shadow:none}
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(0,102,204,.12)}
    .accordion-body{color:var(--text-light);padding:0 21px 21px;background:var(--blue-pale)}
    .cta{background:linear-gradient(110deg,#0066cc,#0d4e96);color:#fff;border-radius:24px;padding:54px 58px;position:relative;overflow:hidden}
    .cta::after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-65px;top:-90px;box-shadow:0 0 0 25px rgba(255,255,255,.05),0 0 0 50px rgba(255,255,255,.035)}
    .cta h2{font-size:2rem;font-weight:800;position:relative;z-index:1}
    .cta p{color:rgba(255,255,255,.78);max-width:650px;position:relative;z-index:1}
    .footer{background:#f8f9fa;padding:72px 0 30px;border-top:1px solid var(--border)}
    .footer h5{color:var(--ink-deep);font-size:1rem;margin-bottom:18px}
    .footer p,.footer li,.footer a{color:var(--text-light);font-size:.92rem}
    .footer a{display:block;margin-bottom:10px;transition:.25s ease}
    .footer a:hover{color:var(--primary);transform:translateX(2px)}
    .footer-bottom{border-top:1px solid var(--border);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:.85rem;color:var(--text-light)}
    @media(max-width:1024px){.nav-link{padding-left:8px!important;padding-right:8px!important}.split-layout{gap:35px}.data-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.hero-inner{padding:64px 0 72px}.hero-panel{margin-top:30px}.stat-strip{margin-top:0;padding-top:20px}.split-layout{grid-template-columns:1fr}.visual-card img{height:330px}.section{padding:65px 0}.cta{padding:38px 26px}.compare{padding:22px 17px}.compare-row{grid-template-columns:1fr;gap:4px}.footer{padding-top:55px}}
    @media(max-width:520px){.hero h1{font-size:2.35rem}.hero-lead{font-size:1rem}.data-grid,.steps,.metric-list{grid-template-columns:1fr}.stat-box{padding:18px}.cta h2{font-size:1.65rem}.nav-link.active::after{display:none}}

/* roulang page: category7 */
:root{
      --primary:#0066cc;
      --primary-dark:#0052a3;
      --secondary:#f8f9fa;
      --text:#333333;
      --text-light:#666666;
      --border:#e0e0e0;
      --radius:12px;
      --shadow:0 4px 20px rgba(0,102,204,.08);
      --shadow-lg:0 18px 45px rgba(0,74,145,.13);
      --soft-blue:#edf6ff;
      --ink:#102b49;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Roboto,sans-serif;line-height:1.7;color:var(--text);background:#fff;margin:0}
    a{color:inherit;text-decoration:none;transition:all .25s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1280px;margin:0 auto;padding:0 20px}
    .navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
    .navbar .container{min-height:76px}
    .logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px}
    .nav-link{font-weight:500;color:var(--text);padding:26px 13px!important;position:relative}
    .nav-link:hover{color:var(--primary-dark)}
    .nav-link.active{color:var(--primary-dark)}
    .nav-link.active:after{content:"";position:absolute;bottom:13px;left:13px;right:13px;height:3px;border-radius:5px;background:var(--primary)}
    .navbar-toggler{border:1px solid var(--border);padding:8px 10px}
    .hero-strip{background:#f4f9ff url('/assets/images/backpic/back-2.webp') center/cover no-repeat;position:relative;overflow:hidden}
    .hero-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,251,255,.98) 5%,rgba(247,251,255,.85) 52%,rgba(247,251,255,.3))}
    .hero-inner{position:relative;padding:74px 0 70px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:.82rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
    .eyebrow:before{content:"";width:26px;height:3px;background:var(--primary);border-radius:4px}
    h1,h2,h3,h4{color:var(--ink);font-weight:750;line-height:1.25}
    .hero-strip h1{font-size:clamp(2.3rem,5vw,4.1rem);margin:16px 0 18px;max-width:670px}
    .hero-copy{max-width:650px;color:#506477;font-size:1.08rem}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
    .btn-primary,.btn-outline-primary{border-radius:var(--radius);padding:13px 27px;font-weight:700;transition:all .25s ease}
    .btn-primary{background:var(--primary);border:2px solid var(--primary);color:#fff}
    .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-3px);color:#fff}
    .btn-outline-primary{border:2px solid var(--primary);color:var(--primary);background:#fff}
    .btn-outline-primary:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
    .hero-note{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#637487;font-size:.92rem}
    .hero-note i{color:var(--primary);margin-right:6px}
    .section{padding:82px 0}
    .section-muted{background:var(--secondary)}
    .section-heading{margin-bottom:38px}
    .section-heading h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:10px 0 12px}
    .section-heading p{color:var(--text-light);max-width:680px;margin:0}
    .member-card,.benefit-card,.tier-card,.service-panel,.quote-box{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:all .3s ease}
    .member-card:hover,.benefit-card:hover,.tier-card:hover,.service-panel:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:#c8e2fa}
    .member-card{padding:28px;height:100%}
    .icon-box{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--soft-blue);color:var(--primary);font-size:20px;margin-bottom:20px}
    .member-card h3{font-size:1.2rem;margin-bottom:10px}
    .member-card p,.benefit-card p,.tier-card p{color:var(--text-light);font-size:.95rem;margin:0}
    .intro-image{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);height:100%;min-height:330px}
    .intro-image img{height:100%;width:100%;object-fit:cover}
    .intro-copy{padding:12px 10px 12px 28px}
    .intro-copy h2{font-size:2.25rem;margin:12px 0 18px}
    .intro-copy p{color:var(--text-light);font-size:1.03rem}
    .check-list{list-style:none;padding:0;margin:24px 0 0}
    .check-list li{margin:12px 0;color:#41566a}
    .check-list i{color:#16a36a;margin-right:10px}
    .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d7e5f2;border-radius:16px;overflow:hidden;margin-top:28px}
    .metric{background:#fff;padding:24px 18px;text-align:center}
    .metric strong{display:block;font-size:2rem;color:var(--primary);line-height:1.2}
    .metric span{font-size:.9rem;color:var(--text-light)}
    .benefit-card{padding:24px;height:100%;display:flex;gap:18px}
    .benefit-card .icon-box{flex:none;margin:0}
    .benefit-card h3{font-size:1.08rem;margin:2px 0 7px}
    .tier-card{padding:30px;position:relative;height:100%}
    .tier-card.featured{border:2px solid var(--primary);box-shadow:0 16px 38px rgba(0,102,204,.15)}
    .tier-badge{position:absolute;top:18px;right:18px;background:#e7f3ff;color:var(--primary);border-radius:20px;padding:4px 11px;font-size:.75rem;font-weight:700}
    .tier-card h3{margin:0 0 8px}
    .tier-price{font-size:1.7rem;font-weight:800;color:var(--ink);margin:20px 0}
    .tier-price small{font-size:.9rem;color:var(--text-light);font-weight:400}
    .tier-list{list-style:none;padding:0;margin:20px 0 25px;color:#53677a}
    .tier-list li{padding:8px 0;border-bottom:1px solid #edf1f5}
    .tier-list i{color:#16a36a;margin-right:8px}
    .dark-panel{background:#102b49;color:#dbeafa;border-radius:20px;padding:45px}
    .dark-panel h2,.dark-panel h3{color:#fff}
    .dark-panel p{color:#b6c9dc}
    .service-panel{padding:25px;height:100%;background:linear-gradient(145deg,#fff,#f7fbff)}
    .service-number{font-size:2.2rem;color:#b9dafa;font-weight:800;line-height:1}
    .service-panel h3{font-size:1.12rem;margin:18px 0 8px}
    .service-panel p{color:var(--text-light);font-size:.94rem;margin:0}
    .quote-box{padding:30px;border-left:5px solid var(--primary);background:#fbfdff}
    .quote-box p{font-size:1.1rem;color:#40576d;margin:0 0 18px}
    .quote-user{font-weight:700;color:var(--ink)}
    .faq-wrap .accordion-item{border:1px solid var(--border);border-radius:10px!important;margin-bottom:12px;overflow:hidden}
    .accordion-button{font-weight:700;color:var(--ink);background:#fff;padding:20px 22px}
    .accordion-button:not(.collapsed){color:var(--primary-dark);background:#f3f9ff;box-shadow:none}
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
    .accordion-body{color:var(--text-light);padding:0 22px 21px;background:#f3f9ff}
    .cta{background:linear-gradient(110deg,#0066cc,#1685e6);color:#fff;padding:64px 0}
    .cta h2{color:#fff;font-size:2.4rem;margin:8px 0 12px}
    .cta p{color:#dceeff;max-width:650px}
    .cta .btn-light{color:var(--primary-dark);font-weight:700;border-radius:var(--radius);padding:13px 28px}
    .cta .btn-light:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
    .footer{background:#f8f9fa;padding:70px 0 35px;border-top:1px solid var(--border)}
    .footer h5{color:var(--ink);margin-bottom:18px;font-size:1rem}
    .footer p,.footer li,.footer a{color:var(--text-light);font-size:.92rem}
    .footer a:hover{color:var(--primary)}
    .footer ul{list-style:none;padding:0;margin:0}
    .footer li{margin-bottom:10px}
    .footer-bottom{border-top:1px solid var(--border);margin-top:38px;padding-top:22px;font-size:.84rem;color:#748494}
    .footer-bottom a{margin-left:16px}
    .form-control{border:1px solid var(--border);border-radius:10px;padding:13px 15px}
    .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,102,204,.1)}
    :focus-visible{outline:3px solid rgba(0,102,204,.35);outline-offset:3px}
    @media(max-width:991px){.nav-link{padding:12px 0!important}.nav-link.active:after{left:0;right:auto;width:32px;bottom:5px}.hero-inner{padding:58px 0}.intro-copy{padding:25px 0 0}}
    @media(max-width:767px){.section{padding:60px 0}.hero-strip h1{font-size:2.45rem}.metric-row{grid-template-columns:1fr}.dark-panel{padding:28px 22px}.cta h2{font-size:2rem}.footer{padding-top:55px}}
    @media(max-width:520px){.container{padding:0 16px}.hero-actions .btn{width:100%}.intro-copy h2{font-size:1.9rem}.hero-note{gap:10px;display:block}.hero-note span{display:block;margin:5px 0}}