/* roulang page: index */
:root{
      --brand:#315f8f;
      --brand-dark:#244b75;
      --brand-soft:#eef6fb;
      --accent:#d98935;
      --accent-soft:#fff2e3;
      --mint:#5da79a;
      --mint-soft:#e9f7f4;
      --ink:#26313d;
      --muted:#697684;
      --weak:#8c98a6;
      --line:#dbe5ee;
      --bg:#fbfcfd;
      --panel:#ffffff;
      --section:#f3f7fb;
      --radius-sm:10px;
      --radius:16px;
      --radius-lg:24px;
      --shadow-sm:0 8px 22px rgba(39,61,85,.07);
      --shadow:0 18px 45px rgba(39,61,85,.12);
      --shadow-hover:0 24px 60px rgba(39,61,85,.16);
      --container:1240px;
      --nav-height:76px;
      --speed:.22s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 8%, rgba(93,167,154,.10), transparent 32%),
        radial-gradient(circle at 92% 4%, rgba(217,137,53,.10), transparent 30%),
        var(--bg);
      line-height:1.72;
      font-size:16px;
      overflow-x:hidden;
    }

    a{
      color:inherit;
      text-decoration:none;
      transition:color var(--speed), background var(--speed), transform var(--speed), border-color var(--speed);
    }
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(49,95,143,.18)}
    .container{
      max-width:var(--container);
      padding-left:24px;
      padding-right:24px;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1020;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(219,229,238,.9);
      box-shadow:0 8px 26px rgba(35,55,75,.04);
    }
    .navbar{
      min-height:var(--nav-height);
      padding:10px 0;
    }
    .brand-logo{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      color:var(--ink);
      letter-spacing:-.02em;
    }
    .logo-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--brand),#6ea6c2);
      position:relative;
      box-shadow:0 12px 24px rgba(49,95,143,.24);
      flex:0 0 auto;
    }
    .logo-mark::before{
      content:"";
      position:absolute;
      width:16px;
      height:16px;
      border-radius:50%;
      background:var(--accent);
      right:7px;
      top:8px;
      box-shadow:0 0 0 6px rgba(255,255,255,.25);
    }
    .logo-mark::after{
      content:"";
      position:absolute;
      width:18px;
      height:7px;
      border-radius:999px;
      background:#fff;
      left:8px;
      bottom:10px;
      opacity:.95;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.15;
    }
    .brand-text strong{
      font-size:17px;
      max-width:260px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      font-size:12px;
      color:var(--muted);
      font-weight:600;
      margin-top:3px;
    }
    .navbar-toggler{
      border:1px solid var(--line);
      border-radius:12px;
      padding:9px 11px;
      box-shadow:none!important;
      background:#fff;
    }
    .navbar-toggler:focus{
      outline:3px solid rgba(49,95,143,.18);
    }
    .navbar-nav{
      gap:8px;
      align-items:center;
    }
    .nav-link{
      color:var(--muted);
      font-weight:700;
      padding:10px 14px!important;
      border-radius:999px;
      position:relative;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:var(--brand);
      background:var(--brand-soft);
    }
    .nav-link.active{
      color:var(--brand);
      background:rgba(49,95,143,.10);
    }
    .nav-action{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:12px;
    }
    .mega-wrap{
      position:relative;
    }
    .mega-toggle{
      border:1px solid var(--line);
      color:var(--brand-dark);
      background:#fff;
      border-radius:999px;
      padding:10px 14px;
      font-weight:800;
      display:flex;
      align-items:center;
      gap:8px;
      box-shadow:var(--shadow-sm);
    }
    .mega-toggle:hover,
    .mega-wrap:hover .mega-toggle{
      border-color:rgba(49,95,143,.35);
      background:var(--brand-soft);
      transform:translateY(-1px);
    }
    .mega-panel{
      position:absolute;
      right:0;
      top:calc(100% + 14px);
      width:390px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:18px;
      opacity:0;
      visibility:hidden;
      transform:translateY(8px);
      transition:all var(--speed);
    }
    .mega-wrap:hover .mega-panel,
    .mega-wrap:focus-within .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .mega-panel::before{
      content:"";
      position:absolute;
      top:-12px;
      right:34px;
      border-left:12px solid transparent;
      border-right:12px solid transparent;
      border-bottom:12px solid #fff;
    }
    .mega-title{
      font-size:14px;
      color:var(--weak);
      margin-bottom:10px;
      font-weight:800;
    }
    .mega-card{
      display:flex;
      gap:12px;
      padding:12px;
      border-radius:16px;
      background:linear-gradient(180deg,#fff,var(--brand-soft));
      border:1px solid rgba(219,229,238,.75);
      margin-bottom:10px;
    }
    .mega-icon{
      width:38px;
      height:38px;
      border-radius:13px;
      display:grid;
      place-items:center;
      background:var(--mint-soft);
      color:var(--mint);
      font-weight:900;
      flex:0 0 auto;
    }
    .mega-card strong{display:block;font-size:15px;margin-bottom:3px}
    .mega-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

    .btn-brand,
    .btn-accent,
    .btn-ghost{
      border-radius:999px;
      padding:12px 22px;
      font-weight:800;
      border:1px solid transparent;
      transition:transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed), color var(--speed);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .btn-brand{
      background:var(--brand);
      color:#fff;
      box-shadow:0 14px 26px rgba(49,95,143,.22);
    }
    .btn-brand:hover{
      background:var(--brand-dark);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 36px rgba(49,95,143,.28);
    }
    .btn-accent{
      background:var(--accent);
      color:#fff;
      box-shadow:0 14px 26px rgba(217,137,53,.22);
    }
    .btn-accent:hover{
      background:#c8792d;
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 36px rgba(217,137,53,.30);
    }
    .btn-ghost{
      background:#fff;
      color:var(--brand);
      border-color:rgba(49,95,143,.22);
    }
    .btn-ghost:hover{
      background:var(--brand-soft);
      border-color:rgba(49,95,143,.42);
      transform:translateY(-2px);
    }
    .btn-brand:focus,
    .btn-accent:focus,
    .btn-ghost:focus,
    .form-control:focus{
      outline:3px solid rgba(217,137,53,.18);
      box-shadow:none;
    }

    .site-main{overflow:hidden}
    .hero{
      padding:74px 0 54px;
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:auto -120px 0 auto;
      width:360px;
      height:360px;
      background:radial-gradient(circle,rgba(49,95,143,.12),transparent 65%);
      pointer-events:none;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(93,167,154,.12);
      color:#3c8177;
      border:1px solid rgba(93,167,154,.20);
      font-weight:800;
      font-size:14px;
      margin-bottom:18px;
    }
    .eyebrow .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(217,137,53,.12);
    }
    .hero h1{
      font-size:clamp(36px,5vw,60px);
      line-height:1.15;
      letter-spacing:-.04em;
      font-weight:900;
      margin:0 0 20px;
      color:var(--ink);
    }
    .hero h1 span{color:var(--brand)}
    .hero-lead{
      color:var(--muted);
      font-size:18px;
      max-width:680px;
      margin-bottom:28px;
    }
    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
      margin-bottom:26px;
    }
    .trust-line{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
    }
    .trust-line span{
      display:inline-flex;
      align-items:center;
      gap:7px;
    }
    .trust-line i{
      width:18px;
      height:18px;
      border-radius:50%;
      background:var(--mint-soft);
      color:var(--mint);
      display:inline-grid;
      place-items:center;
      font-style:normal;
      font-size:12px;
    }

    .dashboard{
      background:#fff;
      border:1px solid var(--line);
      border-radius:30px;
      box-shadow:var(--shadow);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .dashboard::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(49,95,143,.08),transparent 38%,rgba(217,137,53,.08));
      pointer-events:none;
    }
    .dash-top{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
      gap:14px;
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#3c8177;
      background:var(--mint-soft);
      border-radius:999px;
      padding:7px 11px;
      font-weight:800;
      font-size:13px;
    }
    .status-pill::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--mint);
      animation:pulse 1.8s infinite;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(93,167,154,.36)}
      70%{box-shadow:0 0 0 9px rgba(93,167,154,0)}
      100%{box-shadow:0 0 0 0 rgba(93,167,154,0)}
    }
    .dash-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
    }
    .preview-card,
    .rank-card,
    .timeline-card{
      border:1px solid rgba(219,229,238,.8);
      border-radius:20px;
      background:rgba(255,255,255,.86);
      padding:16px;
    }
    .preview-card{
      min-height:226px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .wave{
      height:96px;
      border-radius:18px;
      background:
        linear-gradient(90deg,rgba(49,95,143,.12) 1px,transparent 1px) 0 0/22px 100%,
        linear-gradient(180deg,rgba(93,167,154,.18),rgba(49,95,143,.08));
      position:relative;
      overflow:hidden;
      margin:14px 0;
    }
    .wave::before{
      content:"";
      position:absolute;
      left:10px;
      right:10px;
      bottom:18px;
      height:42px;
      background:linear-gradient(90deg,var(--brand),#77b7c8,var(--accent));
      clip-path:polygon(0 65%,8% 44%,17% 58%,25% 21%,35% 54%,43% 33%,52% 72%,62% 42%,72% 55%,82% 18%,92% 38%,100% 28%,100% 100%,0 100%);
      opacity:.88;
      border-radius:12px;
    }
    .progress-soft{
      height:9px;
      background:#eaf1f6;
      border-radius:999px;
      overflow:hidden;
    }
    .progress-soft span{
      display:block;
      height:100%;
      width:72%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--brand),var(--mint));
    }
    .rank-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 0;
      border-bottom:1px dashed var(--line);
      font-size:14px;
    }
    .rank-item:last-child{border-bottom:0}
    .rank-no{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:var(--accent-soft);
      color:var(--accent);
      font-weight:900;
    }
    .timeline-card{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .time-step{
      padding:12px;
      border-radius:16px;
      background:var(--brand-soft);
    }
    .time-step strong{display:block;color:var(--brand);margin-bottom:4px}
    .time-step span{font-size:13px;color:var(--muted)}

    .section{
      padding:72px 0;
    }
    .section-soft{
      background:linear-gradient(180deg,rgba(243,247,251,.8),rgba(255,255,255,.88));
    }
    .section-head{
      margin-bottom:34px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
    }
    .section-kicker{
      color:var(--mint);
      font-weight:900;
      letter-spacing:.04em;
      margin-bottom:8px;
    }
    .section-title{
      font-size:clamp(26px,3vw,40px);
      line-height:1.25;
      font-weight:900;
      letter-spacing:-.03em;
      margin:0;
    }
    .section-desc{
      color:var(--muted);
      max-width:520px;
      margin:0;
    }

    .metrics-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .metric-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:24px;
      box-shadow:var(--shadow-sm);
      transition:transform var(--speed), box-shadow var(--speed);
      position:relative;
      overflow:hidden;
    }
    .metric-card::after{
      content:"";
      position:absolute;
      width:74px;
      height:74px;
      right:-22px;
      top:-20px;
      background:rgba(49,95,143,.08);
      border-radius:50%;
    }
    .metric-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
    }
    .metric-num{
      font-size:34px;
      font-weight:900;
      color:var(--brand);
      line-height:1;
      margin-bottom:10px;
    }
    .metric-label{
      font-weight:900;
      margin-bottom:6px;
    }
    .metric-note{
      color:var(--muted);
      font-size:14px;
      margin:0;
    }

    .category-entry{
      background:#fff;
      border:1px solid var(--line);
      border-radius:28px;
      padding:26px;
      box-shadow:var(--shadow-sm);
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:24px;
      align-items:center;
    }
    .entry-tags{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin:18px 0 0;
      padding:0;
      list-style:none;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 12px;
      border-radius:999px;
      background:var(--brand-soft);
      color:var(--brand-dark);
      font-weight:800;
      font-size:13px;
      border:1px solid rgba(49,95,143,.10);
    }
    .tag.mint{background:var(--mint-soft);color:#3c8177;border-color:rgba(93,167,154,.14)}
    .tag.orange{background:var(--accent-soft);color:#a66022;border-color:rgba(217,137,53,.14)}
    .entry-mini{
      display:grid;
      gap:12px;
    }
    .entry-mini div{
      padding:16px;
      border-radius:18px;
      background:linear-gradient(135deg,var(--brand-soft),#fff);
      border:1px solid rgba(219,229,238,.82);
    }
    .entry-mini strong{display:block;margin-bottom:4px}
    .entry-mini span{color:var(--muted);font-size:14px}

    .service-layout{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:18px;
      align-items:stretch;
    }
    .service-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:26px;
      box-shadow:var(--shadow-sm);
      transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }
    .service-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(49,95,143,.22);
    }
    .service-card.large{
      min-height:100%;
      background:
        linear-gradient(145deg,rgba(49,95,143,.09),transparent 48%),
        #fff;
    }
    .service-list{
      display:grid;
      gap:18px;
    }
    .service-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:var(--brand-soft);
      color:var(--brand);
      font-weight:900;
      margin-bottom:18px;
    }
    .service-card:nth-child(2n) .service-icon{background:var(--mint-soft);color:var(--mint)}
    .service-card h3{
      font-size:22px;
      font-weight:900;
      margin-bottom:10px;
    }
    .service-card p{
      color:var(--muted);
      margin-bottom:16px;
    }
    .action-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:900;
      color:var(--brand);
    }
    .action-link:hover{
      text-decoration:underline;
      text-underline-offset:4px;
    }

    .comparison{
      background:#fff;
      border:1px solid var(--line);
      border-radius:30px;
      box-shadow:var(--shadow-sm);
      padding:28px;
    }
    .compare-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
    }
    .compare-box{
      border-radius:24px;
      padding:24px;
      border:1px solid var(--line);
      min-height:270px;
    }
    .compare-box.before{
      background:#f8fafc;
    }
    .compare-box.after{
      background:linear-gradient(145deg,var(--brand-soft),#fff 60%,var(--accent-soft));
      border-color:rgba(49,95,143,.18);
    }
    .compare-box h3{
      font-size:22px;
      font-weight:900;
      margin-bottom:16px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .state-dot{
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--weak);
    }
    .after .state-dot{background:var(--accent)}
    .compare-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .compare-list li{
      display:flex;
      gap:10px;
      color:var(--muted);
    }
    .compare-list li::before{
      content:"";
      flex:0 0 auto;
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--line);
      margin-top:10px;
    }
    .after .compare-list li::before{background:var(--mint)}
    .flow-strip{
      margin-top:20px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }
    .flow-step{
      padding:14px;
      border-radius:18px;
      background:var(--section);
      border:1px solid rgba(219,229,238,.8);
      font-weight:800;
      color:var(--brand-dark);
      text-align:center;
    }

    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      border:1px solid var(--line)!important;
      border-radius:18px!important;
      overflow:hidden;
      background:#fff;
      box-shadow:0 8px 18px rgba(39,61,85,.04);
    }
    .accordion-button{
      font-weight:900;
      color:var(--ink);
      background:#fff;
      padding:18px 20px;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--brand);
      background:var(--brand-soft);
    }
    .accordion-button:focus{
      border-color:transparent;
      box-shadow:0 0 0 3px rgba(49,95,143,.14)!important;
    }
    .accordion-body{
      color:var(--muted);
      padding:18px 20px 22px;
      background:#fff;
    }

    .contact-band{
      background:
        linear-gradient(135deg,rgba(49,95,143,.95),rgba(43,86,131,.95)),
        radial-gradient(circle at 80% 20%,rgba(217,137,53,.28),transparent 32%);
      border-radius:34px;
      padding:34px;
      color:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .contact-band::after{
      content:"";
      position:absolute;
      width:260px;
      height:260px;
      border-radius:50%;
      border:42px solid rgba(255,255,255,.08);
      right:-80px;
      bottom:-120px;
    }
    .contact-band h2{
      font-size:clamp(26px,3vw,40px);
      font-weight:900;
      letter-spacing:-.03em;
      margin-bottom:12px;
    }
    .contact-band p{
      color:rgba(255,255,255,.78);
      margin-bottom:0;
    }
    .form-card{
      background:#fff;
      border-radius:26px;
      padding:22px;
      box-shadow:0 20px 45px rgba(15,30,48,.20);
      position:relative;
      z-index:1;
    }
    .form-label{
      font-weight:800;
      color:var(--ink);
      font-size:14px;
    }
    .form-control{
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px 14px;
      color:var(--ink);
      background:#fbfdff;
    }
    .form-control::placeholder{color:#a2acb8}
    textarea.form-control{min-height:112px;resize:vertical}
    .form-tip{
      color:var(--weak);
      font-size:13px;
      margin-top:10px;
    }

    .site-footer{
      padding:54px 0 28px;
      background:#f7fafc;
      border-top:1px solid var(--line);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .7fr .7fr;
      gap:28px;
      margin-bottom:28px;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:900;
      margin-bottom:14px;
    }
    .footer-desc{
      color:var(--muted);
      max-width:520px;
      margin:0;
    }
    .footer-title{
      font-size:15px;
      font-weight:900;
      margin-bottom:12px;
      color:var(--ink);
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:700;
    }
    .footer-links a:hover{
      color:var(--brand);
      text-decoration:underline;
      text-underline-offset:4px;
    }
    .copyright{
      border-top:1px solid var(--line);
      padding-top:20px;
      color:var(--weak);
      font-size:14px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    @media (max-width:1199px){
      .brand-text strong{max-width:220px}
      .metrics-grid{grid-template-columns:repeat(2,1fr)}
      .service-layout{grid-template-columns:1fr}
    }
    @media (max-width:991px){
      .navbar-collapse{
        padding:16px 0 10px;
      }
      .navbar-nav{
        align-items:stretch;
        gap:6px;
      }
      .nav-action{
        margin-left:0;
        margin-top:12px;
        align-items:stretch;
        flex-direction:column;
      }
      .mega-panel{
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
        margin-top:12px;
        box-shadow:var(--shadow-sm);
      }
      .mega-panel::before{display:none}
      .hero{padding:52px 0 42px}
      .dash-grid{grid-template-columns:1fr}
      .timeline-card{grid-template-columns:1fr}
      .section-head{align-items:flex-start;flex-direction:column}
      .category-entry{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .flow-strip{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:767px){
      .container{padding-left:18px;padding-right:18px}
      .brand-text strong{max-width:190px;font-size:15px}
      .brand-text span{display:none}
      .hero-actions .btn-brand,
      .hero-actions .btn-ghost{width:100%}
      .metrics-grid{grid-template-columns:1fr}
      .section{padding:54px 0}
      .contact-band{padding:24px;border-radius:26px}
      .form-card{margin-top:20px}
      .footer-grid{grid-template-columns:1fr}
      .copyright{flex-direction:column}
    }
    @media (max-width:575px){
      body{font-size:15px}
      .hero h1{font-size:34px}
      .dashboard{padding:16px;border-radius:24px}
      .metric-card,
      .service-card,
      .category-entry,
      .comparison{border-radius:22px;padding:20px}
      .flow-strip{grid-template-columns:1fr}
      .btn-brand,
      .btn-accent,
      .btn-ghost{width:100%;padding:12px 18px}
      .mega-toggle{width:100%;justify-content:center}
    }

/* roulang page: category1 */
:root{
  --bg:#f4f7fb;
  --bg-soft:#eef4fa;
  --panel:#ffffff;
  --panel-2:#f8fbfe;
  --text:#213243;
  --muted:#667686;
  --line:#dbe4ee;
  --line-2:#cfdbe7;
  --primary:#355f86;
  --primary-2:#234766;
  --secondary:#0d8a78;
  --accent:#d7923e;
  --accent-soft:#fff3e4;
  --secondary-soft:#e7f5f2;
  --primary-soft:#eaf1f8;
  --shadow:0 16px 40px rgba(25,45,68,.08);
  --shadow-2:0 20px 52px rgba(25,45,68,.12);
  --radius:18px;
  --radius-sm:14px;
  --container:1280px;
  --transition:.22s ease;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(53,95,134,.08), transparent 26%),
    radial-gradient(circle at bottom left, rgba(13,138,120,.06), transparent 24%),
    linear-gradient(180deg, #f8fbfe 0%, #f4f7fb 100%);
  line-height:1.72;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  width:320px;
  height:320px;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:-1;
  opacity:.55;
}
body::before{top:-90px; right:-80px; background:rgba(53,95,134,.08)}
body::after{left:-110px; bottom:-120px; background:rgba(13,138,120,.07)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none; transition:color var(--transition), opacity var(--transition), transform var(--transition)}
a:hover{color:var(--primary-2)}
button,input,select,textarea{font:inherit}
::selection{background:rgba(53,95,134,.18); color:var(--text)}
:focus-visible{
  outline:3px solid rgba(53,95,134,.24);
  outline-offset:3px;
  border-radius:12px;
}
.container{max-width:var(--container)}
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:saturate(150%) blur(10px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(219,228,238,.82);
  box-shadow:0 8px 24px rgba(25,45,68,.04);
}
.navbar{
  padding:.9rem 0;
}
.brand-logo{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
}
.logo-mark{
  position:relative;
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(145deg, var(--primary) 0%, #4a78a6 55%, var(--secondary) 100%);
  box-shadow:0 10px 24px rgba(53,95,134,.22);
  flex:none;
}
.logo-mark::before,
.logo-mark::after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:999px;
  background:rgba(255,255,255,.92);
}
.logo-mark::before{
  width:18px;
  height:4px;
  top:13px;
  left:12px;
}
.logo-mark::after{
  width:12px;
  height:4px;
  top:22px;
  left:12px;
  box-shadow:6px -8px 0 0 rgba(255,255,255,.92);
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.brand-text strong{
  font-size:1rem;
  line-height:1.2;
  letter-spacing:.2px;
  color:var(--text);
}
.brand-text span{
  font-size:.82rem;
  color:var(--muted);
}
.navbar-toggler{
  border:1px solid var(--line);
  box-shadow:none !important;
  border-radius:14px;
  width:46px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.navbar-toggler-icon{
  width:1.2rem;
  height:1.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%2835,50,67,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-nav{
  gap:.35rem;
  align-items:center;
}
.nav-link{
  color:var(--muted);
  font-weight:600;
  border-radius:999px;
  padding:.72rem 1rem !important;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
.nav-link:hover,
.nav-link:focus{
  color:var(--primary-2);
  background:rgba(53,95,134,.08);
}
.nav-link.active{
  color:var(--primary-2);
  background:rgba(53,95,134,.12);
}
.nav-action{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:1rem;
}
.btn-brand,
.btn-outline-brand,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.88rem 1.2rem;
  font-weight:700;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-brand{
  color:#fff;
  background:linear-gradient(135deg, var(--primary) 0%, #416f9c 100%);
  box-shadow:0 12px 24px rgba(53,95,134,.22);
}
.btn-brand:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(53,95,134,.28);
}
.btn-outline-brand{
  color:var(--primary-2);
  background:rgba(255,255,255,.82);
  border-color:rgba(53,95,134,.16);
}
.btn-outline-brand:hover{
  color:var(--primary-2);
  border-color:rgba(53,95,134,.3);
  background:rgba(234,241,248,.9);
  transform:translateY(-1px);
}
.btn-ghost{
  color:var(--text);
  background:rgba(255,255,255,.74);
  border-color:rgba(219,228,238,.85);
}
.btn-ghost:hover{
  color:var(--primary-2);
  background:#fff;
  border-color:rgba(53,95,134,.18);
  transform:translateY(-1px);
}
.mega-wrap{
  position:relative;
}
.mega-toggle{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid rgba(53,95,134,.16);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:.84rem 1rem;
  font-weight:700;
  box-shadow:0 10px 22px rgba(25,45,68,.05);
  transition:all var(--transition);
}
.mega-toggle:hover,
.mega-wrap.is-open .mega-toggle{
  border-color:rgba(53,95,134,.3);
  background:var(--primary-soft);
  color:var(--primary-2);
  transform:translateY(-1px);
}
.mega-panel{
  position:absolute;
  right:0;
  top:calc(100% + 14px);
  width:360px;
  padding:1rem;
  border:1px solid rgba(219,228,238,.92);
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:var(--shadow-2);
  display:none;
}
.mega-wrap:hover .mega-panel,
.mega-wrap.is-open .mega-panel{
  display:block;
}
.mega-title{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:.8rem;
  font-weight:700;
}
.mega-card{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:.92rem .9rem;
  border-radius:18px;
  border:1px solid rgba(219,228,238,.8);
  background:linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.mega-card + .mega-card{margin-top:.8rem}
.mega-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(25,45,68,.08);
  border-color:rgba(53,95,134,.2);
}
.mega-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--primary-soft);
  color:var(--primary-2);
  font-weight:800;
}
.mega-card strong{
  display:block;
  color:var(--text);
  margin-bottom:.16rem;
}
.mega-card p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.55;
}
main{padding-bottom:2rem}
.hero-shell{
  padding:1.3rem 0 0;
}
.breadcrumb-bar{
  padding:1rem 0 .2rem;
}
.custom-breadcrumb{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.custom-breadcrumb a{
  color:var(--muted);
}
.custom-breadcrumb a:hover{color:var(--primary-2)}
.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before{
  color:#99a8b7;
}
.page-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,251,254,.98) 100%);
  border:1px solid rgba(219,228,238,.9);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:2rem;
}
.page-hero::before{
  content:"";
  position:absolute;
  right:-80px;
  top:-60px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(53,95,134,.09) 0%, rgba(53,95,134,0) 70%);
}
.page-hero::after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-120px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(13,138,120,.08) 0%, rgba(13,138,120,0) 72%);
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1.6rem;
  align-items:center;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.48rem .8rem;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-2);
  font-weight:700;
  font-size:.9rem;
  margin-bottom:1rem;
}
.hero-title{
  font-size:clamp(2rem, 4vw, 3.65rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--text);
  margin:0 0 1rem;
  font-weight:800;
}
.hero-title .accent{
  color:var(--primary-2);
}
.hero-text{
  font-size:1.02rem;
  color:var(--muted);
  max-width:42rem;
  margin:0 0 1.35rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-bottom:1.25rem;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.small-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .78rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(219,228,238,.92);
  color:var(--muted);
  font-size:.88rem;
  box-shadow:0 10px 20px rgba(25,45,68,.04);
}
.hero-aside{
  position:relative;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%);
  border:1px solid rgba(219,228,238,.92);
  border-radius:24px;
  padding:1.2rem;
  box-shadow:0 18px 40px rgba(25,45,68,.08);
}
.aside-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1rem;
}
.aside-head h2{
  font-size:1.05rem;
  margin:0;
  font-weight:800;
  color:var(--text);
}
.aside-head p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}
.aside-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
  margin-bottom:1rem;
}
.mini-stat{
  border-radius:18px;
  border:1px solid rgba(219,228,238,.9);
  background:#fff;
  padding:.95rem;
}
.mini-stat .num{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  color:var(--primary-2);
  line-height:1;
}
.mini-stat .label{
  display:block;
  font-size:.9rem;
  color:var(--text);
  margin-top:.35rem;
  font-weight:700;
}
.mini-stat .desc{
  display:block;
  color:var(--muted);
  font-size:.86rem;
  margin-top:.18rem;
}
.aside-card{
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(234,241,248,.95), rgba(255,255,255,.95));
  border:1px solid rgba(53,95,134,.14);
  padding:1rem;
}
.aside-card h3{
  margin:0 0 .8rem;
  font-size:1rem;
  font-weight:800;
}
.check-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.58rem;
}
.check-list li{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  color:var(--text);
  font-size:.95rem;
}
.check-list i{
  color:var(--secondary);
  margin-top:.1rem;
  flex:none;
}
.value-strip{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px dashed rgba(163,178,192,.55);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.value-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  padding:.48rem .75rem;
  font-size:.88rem;
  font-weight:700;
  background:#fff;
  border:1px solid rgba(219,228,238,.92);
  color:var(--muted);
}
.value-chip strong{color:var(--primary-2)}
.surface{
  margin-top:1.4rem;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(219,228,238,.92);
  border-radius:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.surface-inner{
  padding:1.6rem;
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.15rem;
}
.section-heading h2{
  margin:0;
  font-size:clamp(1.45rem, 2.6vw, 2rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.section-heading p{
  margin:0;
  color:var(--muted);
  max-width:42rem;
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  padding:.15rem 0 0;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.64rem .95rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(219,228,238,.95);
  color:var(--text);
  font-size:.92rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(25,45,68,.04);
}
.filter-chip:hover{
  background:var(--primary-soft);
  border-color:rgba(53,95,134,.2);
}
.filter-chip.active{
  background:var(--primary-2);
  color:#fff;
  border-color:var(--primary-2);
}
.content-wrap{
  margin-top:1.5rem;
}
.content-card{
  height:100%;
  border-radius:24px;
  border:1px solid rgba(219,228,238,.95);
  background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  padding:1.2rem;
  box-shadow:0 14px 30px rgba(25,45,68,.06);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position:relative;
  overflow:hidden;
}
.content-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 52%, var(--accent) 100%);
  opacity:.85;
}
.content-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:rgba(53,95,134,.18);
}
.card-top{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin-bottom:.9rem;
}
.card-num{
  width:44px;
  height:44px;
  border-radius:16px;
  background:var(--primary-soft);
  color:var(--primary-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-size:1.05rem;
  font-weight:800;
}
.card-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .62rem;
  border-radius:999px;
  background:var(--secondary-soft);
  color:var(--secondary);
  font-size:.78rem;
  font-weight:800;
  margin-bottom:.55rem;
}
.content-card h3{
  font-size:1.16rem;
  line-height:1.36;
  margin:0 0 .6rem;
  font-weight:800;
}
.content-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.72;
}
.card-meta{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(219,228,238,.8);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.meta-tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.38rem .62rem;
  border-radius:999px;
  background:#f6f9fc;
  color:var(--muted);
  border:1px solid rgba(219,228,238,.82);
  font-size:.82rem;
}
.card-action{
  margin-top:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.link-action{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--primary-2);
  font-weight:800;
}
.link-action:hover{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:3px;
}
.sidebar{
  position:sticky;
  top:96px;
}
.sidebar-card{
  background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border:1px solid rgba(219,228,238,.95);
  border-radius:24px;
  padding:1.2rem;
  box-shadow:0 14px 30px rgba(25,45,68,.06);
}
.sidebar-card + .sidebar-card{margin-top:1rem}
.sidebar-title{
  margin:0 0 .8rem;
  font-size:1.04rem;
  font-weight:800;
}
.side-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
}
.side-list li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  color:var(--text);
}
.side-dot{
  width:30px;
  height:30px;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:800;
  flex:none;
}
.side-list strong{
  display:block;
  margin-bottom:.1rem;
}
.side-list span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}
.sidebar-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.58rem;
}
.sidebar-tags .filter-chip{
  font-size:.88rem;
  padding:.54rem .8rem;
}
.compare-shell{
  margin-top:1.6rem;
  padding:1.6rem;
  background:linear-gradient(180deg, rgba(242,247,252,.96), rgba(248,251,254,.98));
  border:1px solid rgba(219,228,238,.92);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.compare-card{
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(219,228,238,.92);
  padding:1.25rem;
  box-shadow:0 12px 26px rgba(25,45,68,.05);
  height:100%;
}
.compare-card h3{
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 .9rem;
}
.compare-card.bad{
  background:linear-gradient(180deg, #fff 0%, #fcfbfa 100%);
}
.compare-card.good{
  background:linear-gradient(180deg, #fff 0%, #f9fcfb 100%);
}
.compare-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.72rem;
}
.compare-list li{
  display:flex;
  gap:.58rem;
  align-items:flex-start;
}
.compare-list i{
  flex:none;
  margin-top:.2rem;
}
.compare-list.bad i{color:#b96f29}
.compare-list.good i{color:var(--secondary)}
.compare-bars{
  margin-top:1.1rem;
  display:grid;
  gap:.8rem;
}
.bar-item{
  display:grid;
  gap:.34rem;
}
.bar-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.92rem;
  color:var(--text);
  font-weight:700;
}
.bar{
  height:10px;
  background:#edf2f7;
  border-radius:999px;
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}
.faq-shell{
  margin-top:1.6rem;
  padding:1.6rem;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(219,228,238,.92);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.faq-shell .accordion-item{
  border:1px solid rgba(219,228,238,.9);
  border-radius:18px !important;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px rgba(25,45,68,.04);
}
.faq-shell .accordion-item + .accordion-item{margin-top:.9rem}
.faq-shell .accordion-button{
  background:#fff;
  color:var(--text);
  font-weight:800;
  padding:1rem 1.15rem;
  box-shadow:none !important;
}
.faq-shell .accordion-button:not(.collapsed){
  background:var(--primary-soft);
  color:var(--primary-2);
}
.faq-shell .accordion-button::after{
  filter:saturate(.7) brightness(.8);
}
.faq-shell .accordion-body{
  color:var(--muted);
  padding:0 1.15rem 1rem;
}
.cta-shell{
  margin-top:1.6rem;
  padding:1.6rem;
  background:linear-gradient(135deg, rgba(53,95,134,.06), rgba(13,138,120,.06));
  border:1px solid rgba(219,228,238,.92);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.form-card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(219,228,238,.92);
  border-radius:24px;
  padding:1.3rem;
  box-shadow:0 14px 28px rgba(25,45,68,.06);
}
.form-card .form-label{
  color:var(--text);
  font-weight:700;
  margin-bottom:.45rem;
}
.form-control,
.form-select{
  min-height:52px;
  border-radius:14px;
  border:1px solid #cfdbe7;
  background:#fff;
  box-shadow:none !important;
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.form-control:focus,
.form-select:focus{
  border-color:rgba(53,95,134,.42);
  box-shadow:0 0 0 .2rem rgba(53,95,134,.12) !important;
}
textarea.form-control{
  min-height:130px;
  resize:vertical;
}
.note-box{
  height:100%;
  border-radius:24px;
  padding:1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,254,.96));
  border:1px solid rgba(219,228,238,.92);
  box-shadow:0 14px 28px rgba(25,45,68,.06);
}
.note-box h3{
  margin:0 0 .8rem;
  font-weight:800;
  font-size:1.15rem;
}
.note-box p{
  margin:0 0 1rem;
  color:var(--muted);
}
.note-box .check-list li{
  align-items:flex-start;
}
.note-box .check-list li strong{
  display:block;
  margin-bottom:.1rem;
}
.site-footer{
  margin-top:1.8rem;
  padding:2rem 0 1.1rem;
  border-top:1px solid rgba(219,228,238,.9);
  background:rgba(248,251,254,.86);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr .9fr;
  gap:1.2rem;
  padding-bottom:1.4rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  font-size:1.08rem;
  margin-bottom:.8rem;
}
.footer-desc{
  color:var(--muted);
  margin:0;
  max-width:38rem;
}
.footer-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:.85rem;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}
.footer-links a{
  color:var(--muted);
}
.footer-links a:hover{
  color:var(--primary-2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.copyright{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1rem;
  border-top:1px solid rgba(219,228,238,.9);
  color:var(--muted);
  font-size:.92rem;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.38rem .64rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  background:var(--accent-soft);
  color:#9c6428;
}
.badge-green{
  background:var(--secondary-soft);
  color:var(--secondary);
}
.badge-blue{
  background:var(--primary-soft);
  color:var(--primary-2);
}
.badge-line{
  background:#fff;
  color:var(--muted);
  border:1px solid rgba(219,228,238,.92);
}
.section-mini{
  font-size:.92rem;
  color:var(--muted);
}
.accent-line{
  width:54px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  margin-bottom:1rem;
}
.mb-soft{margin-bottom:1rem}
.mt-soft{margin-top:1rem}
@media (max-width: 1199.98px){
  .hero-grid{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width: 991.98px){
  .nav-action{
    margin-left:0;
    margin-top:1rem;
    flex-wrap:wrap;
  }
  .mega-panel{
    position:static;
    width:100%;
    margin-top:.8rem;
    display:none;
  }
  .mega-wrap:hover .mega-panel{display:none}
  .mega-wrap.is-open .mega-panel{display:block}
  .page-hero,
  .surface-inner,
  .compare-shell,
  .faq-shell,
  .cta-shell{padding:1.2rem}
  .compare-grid,
  .footer-grid{grid-template-columns:1fr}
  .footer-grid{gap:1.4rem}
}
@media (max-width: 767.98px){
  .navbar{padding:.75rem 0}
  .page-hero{border-radius:24px}
  .hero-actions,
  .hero-pills,
  .filter-row{gap:.6rem}
  .aside-stats{grid-template-columns:1fr}
  .content-card{padding:1.05rem}
  .section-heading{
    flex-direction:column;
    align-items:flex-start;
  }
  .compare-card,
  .form-card,
  .note-box{padding:1.1rem}
  .btn-brand,
  .btn-outline-brand,
  .btn-ghost,
  .mega-toggle{
    width:100%;
    justify-content:center;
  }
  .nav-action{
    width:100%;
  }
  .nav-action > *{width:100%}
  .hero-title{font-size:clamp(1.8rem, 9vw, 2.8rem)}
}
@media (max-width: 575.98px){
  .brand-text span{display:none}
  .page-hero,
  .surface,
  .compare-shell,
  .faq-shell,
  .cta-shell{border-radius:22px}
  .hero-pills,
  .filter-row{overflow-x:auto; padding-bottom:.25rem; flex-wrap:nowrap; scrollbar-width:none}
  .hero-pills::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar{display:none}
  .small-pill,
  .filter-chip{flex:none}
  .content-wrap .row{--bs-gutter-x:.9rem; --bs-gutter-y:.9rem}
  .footer-brand{font-size:1rem}
}