/* roulang page: index */
:root{
      --bg:#f4f8fb;
      --bg-soft:#edf4f7;
      --surface:#ffffff;
      --surface-2:#f7fafc;
      --text:#12313a;
      --muted:#5f7077;
      --line:#d9e5ea;
      --brand:#0f9d8a;
      --brand-2:#2a6df4;
      --brand-soft:#d8f5ef;
      --accent:#f4a93a;
      --accent-soft:#fff3da;
      --shadow:0 18px 45px rgba(15, 35, 42, .08);
      --shadow-sm:0 8px 22px rgba(15, 35, 42, .06);
      --radius-xl:22px;
      --radius-lg:18px;
      --radius-md:12px;
      --radius-sm:10px;
      --container:1320px;
      --space-section:84px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(244,248,251,.96), rgba(244,248,251,.9)),
        radial-gradient(circle at top left, rgba(15,157,138,.08), transparent 35%),
        radial-gradient(circle at top right, rgba(42,109,244,.07), transparent 34%),
        var(--bg);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      line-height:1.65;
      letter-spacing:0;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    ::selection{background:rgba(15,157,138,.18);color:var(--text)}
    .site-wrap{
      position:relative;
      min-height:100vh;
    }
    .site-wrap::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(18,49,58,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,49,58,.03) 1px, transparent 1px);
      background-size:120px 120px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0));
    }
    .container-xl{
      max-width:var(--container);
      position:relative;
      z-index:1;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter:blur(14px);
      background:rgba(244,248,251,.88);
      border-bottom:1px solid rgba(217,229,234,.7);
    }
    .nav-shell{
      padding:14px 0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      box-shadow:0 12px 24px rgba(42,109,244,.18);
      flex:0 0 auto;
    }
    .brand-mark i{font-size:1.1rem}
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brand-name{
      font-size:1rem;
      font-weight:800;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      font-size:.78rem;
      color:var(--muted);
      white-space:nowrap;
    }
    .navbar{
      padding:0;
    }
    .navbar-nav{
      gap:8px;
      align-items:center;
    }
    .nav-link-custom{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:10px 14px;
      border-radius:999px;
      color:var(--text);
      font-weight:700;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .nav-link-custom:hover,
    .nav-link-custom:focus-visible{
      background:rgba(15,157,138,.08);
      color:var(--brand);
      transform:translateY(-1px);
      outline:none;
    }
    .nav-link-custom.active{
      background:linear-gradient(135deg, rgba(15,157,138,.14), rgba(42,109,244,.12));
      color:var(--brand);
    }
    .nav-search{
      position:relative;
      min-width:280px;
      max-width:360px;
      width:100%;
    }
    .nav-search input{
      width:100%;
      border:1px solid var(--line);
      background:rgba(255,255,255,.92);
      border-radius:999px;
      padding:11px 44px 11px 42px;
      outline:none;
      color:var(--text);
      box-shadow:var(--shadow-sm);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .nav-search input:focus{
      border-color:rgba(15,157,138,.5);
      box-shadow:0 0 0 4px rgba(15,157,138,.12);
      transform:translateY(-1px);
    }
    .nav-search i{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      color:var(--muted);
      pointer-events:none;
      font-size:.98rem;
    }
    .nav-search .search-btn{
      position:absolute;
      right:6px;
      top:50%;
      transform:translateY(-50%);
      width:32px;
      height:32px;
      border:none;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      box-shadow:0 10px 18px rgba(15,157,138,.16);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:12px;
    }
    .btn-brand,
    .btn-soft,
    .btn-outline-brand,
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:14px;
      font-weight:800;
      padding:11px 16px;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      border:1px solid transparent;
      letter-spacing:0;
    }
    .btn-brand{
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      box-shadow:0 14px 28px rgba(42,109,244,.16);
    }
    .btn-brand:hover,
    .btn-brand:focus-visible{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 30px rgba(42,109,244,.22);
    }
    .btn-soft{
      background:rgba(15,157,138,.08);
      color:var(--brand);
      border-color:rgba(15,157,138,.12);
    }
    .btn-soft:hover,
    .btn-soft:focus-visible{
      color:var(--brand);
      transform:translateY(-2px);
      background:rgba(15,157,138,.12);
    }
    .btn-outline-brand{
      background:transparent;
      color:var(--text);
      border-color:var(--line);
    }
    .btn-outline-brand:hover,
    .btn-outline-brand:focus-visible{
      color:var(--brand);
      border-color:rgba(15,157,138,.38);
      background:rgba(15,157,138,.06);
      transform:translateY(-2px);
    }
    .btn-ghost{
      background:transparent;
      color:var(--muted);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      color:var(--text);
      background:rgba(18,49,58,.04);
      transform:translateY(-2px);
    }
    .navbar-toggler{
      border:none;
      box-shadow:none !important;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(255,255,255,.82);
    }
    .navbar-toggler:focus{
      box-shadow:0 0 0 4px rgba(15,157,138,.12) !important;
    }
    .navbar-toggler-icon{
      width:1.25rem;
      height:1.25rem;
    }

    .hero{
      padding:30px 0 18px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,250,252,.98)),
        linear-gradient(135deg, rgba(15,157,138,.06), rgba(42,109,244,.06));
      border:1px solid rgba(217,229,234,.9);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:34px;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(15,157,138,.08), transparent 24%),
        linear-gradient(225deg, rgba(42,109,244,.08), transparent 24%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:28px;
      align-items:center;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(15,157,138,.08);
      color:var(--brand);
      font-size:.88rem;
      font-weight:800;
      margin-bottom:16px;
    }
    .hero h1{
      font-size:3rem;
      line-height:1.08;
      font-weight:900;
      margin:0 0 16px;
      letter-spacing:0;
    }
    .hero-lead{
      max-width:720px;
      margin:0;
      color:var(--muted);
      font-size:1.08rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .hero-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:20px;
    }
    .metric-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(217,229,234,.95);
      background:rgba(255,255,255,.86);
      box-shadow:var(--shadow-sm);
      font-weight:800;
      color:var(--text);
    }
    .metric-pill i{
      width:26px;
      height:26px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(15,157,138,.08);
      color:var(--brand);
      font-size:.9rem;
      flex:0 0 auto;
    }
    .hero-stage{
      display:grid;
      gap:14px;
    }
    .status-panel{
      border-radius:24px;
      border:1px solid rgba(217,229,234,.95);
      background:rgba(255,255,255,.94);
      padding:18px;
      box-shadow:var(--shadow-sm);
    }
    .stage-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .stage-title{
      margin:0;
      font-size:1rem;
      font-weight:900;
    }
    .stage-note{
      font-size:.9rem;
      color:var(--muted);
      margin:4px 0 0;
    }
    .progress-ring{
      --value:86;
      width:122px;
      height:122px;
      border-radius:50%;
      background:
        conic-gradient(var(--brand) calc(var(--value) * 1%), rgba(217,229,234,.65) 0);
      display:grid;
      place-items:center;
      margin-left:auto;
      margin-right:auto;
      margin-bottom:14px;
      position:relative;
    }
    .progress-ring::after{
      content:"";
      position:absolute;
      inset:11px;
      border-radius:50%;
      background:linear-gradient(180deg, #fff, #f7fbfd);
      border:1px solid rgba(217,229,234,.8);
    }
    .progress-ring strong,
    .progress-ring span{
      position:relative;
      z-index:1;
      text-align:center;
    }
    .progress-ring strong{
      font-size:1.55rem;
      line-height:1;
      color:var(--text);
      display:block;
      font-weight:900;
    }
    .progress-ring span{
      display:block;
      margin-top:4px;
      font-size:.8rem;
      color:var(--muted);
      font-weight:700;
    }
    .tier-list{
      display:grid;
      gap:10px;
    }
    .tier-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:var(--surface-2);
      border:1px solid rgba(217,229,234,.8);
    }
    .tier-meta{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .tier-meta strong{
      font-size:.97rem;
      line-height:1.2;
    }
    .tier-meta span{
      font-size:.83rem;
      color:var(--muted);
    }
    .tier-badge{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(15,157,138,.1);
      color:var(--brand);
      font-weight:800;
      font-size:.8rem;
    }
    .status-bar{
      height:12px;
      border-radius:999px;
      background:#e7eef2;
      overflow:hidden;
      margin-top:14px;
      border:1px solid rgba(217,229,234,.85);
    }
    .status-bar span{
      display:block;
      height:100%;
      width:84%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
    }

    .section-band{
      padding:var(--space-section) 0;
    }
    .section-head{
display:flex;
      align-items:end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:22px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.86rem;
      font-weight:800;
      color:var(--brand);
      background:rgba(15,157,138,.08);
      border-radius:999px;
      padding:7px 12px;
      margin-bottom:10px;
    }
    .section-head h2{
      margin:0;
      font-size:1.7rem;
      line-height:1.15;
      font-weight:900;
    }
    .section-head p{
      margin:10px 0 0;
      color:var(--muted);
      max-width:760px;
      font-size:1rem;
    }
    .section-action{
      flex:0 0 auto;
    }

    .entry-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:18px;
    }
    .entry-card{
      grid-column:span 4;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(217,229,234,.95);
      border-radius:var(--radius-xl);
      padding:22px;
      box-shadow:var(--shadow-sm);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      min-height:210px;
    }
    .entry-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:rgba(15,157,138,.22);
    }
    .entry-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .entry-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(15,157,138,.13), rgba(42,109,244,.12));
      color:var(--brand);
      font-size:1.2rem;
      flex:0 0 auto;
    }
    .entry-title{
      margin:0;
      font-size:1.1rem;
      font-weight:900;
      line-height:1.3;
    }
    .entry-desc{
      margin:10px 0 14px;
      color:var(--muted);
      font-size:.96rem;
      min-height:58px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--surface-2);
      border:1px solid rgba(217,229,234,.9);
      color:var(--muted);
      font-weight:700;
      font-size:.8rem;
    }
    .tag.brand{
      background:rgba(15,157,138,.08);
      color:var(--brand);
      border-color:rgba(15,157,138,.12);
    }
    .tag.accent{
      background:rgba(244,169,58,.12);
      color:#a56400;
      border-color:rgba(244,169,58,.18);
    }

    .steps-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:18px;
    }
    .step-card{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,252,.98));
      border:1px solid rgba(217,229,234,.95);
      border-radius:var(--radius-xl);
      padding:22px;
      box-shadow:var(--shadow-sm);
      position:relative;
      overflow:hidden;
    }
    .step-card::before{
      content:"";
      position:absolute;
      inset:auto -10px -20px auto;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(15,157,138,.12), transparent 68%);
      pointer-events:none;
    }
    .step-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      height:42px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      font-weight:900;
      font-size:1rem;
      box-shadow:0 12px 22px rgba(42,109,244,.16);
    }
    .step-card h3{
      margin:16px 0 10px;
      font-size:1.08rem;
      font-weight:900;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      font-size:.96rem;
    }

    .proof-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:18px;
    }
    .proof-panel,
    .news-panel,
    .faq-panel,
    .cta-panel,
    .download-panel,
    .update-panel,
    .topic-panel,
    .trust-panel{
      background:rgba(255,255,255,.95);
      border:1px solid rgba(217,229,234,.95);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
      padding:22px;
    }
    .badge-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
      margin-top:14px;
    }
    .stat-badge{
      border:1px solid rgba(217,229,234,.95);
      border-radius:18px;
      background:var(--surface-2);
      padding:16px;
      display:flex;
      align-items:flex-start;
      gap:12px;
      min-height:112px;
    }
    .stat-badge .ic{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(15,157,138,.1);
      color:var(--brand);
      flex:0 0 auto;
      font-size:1.05rem;
    }
    .stat-badge strong{
      display:block;
      font-size:1.02rem;
      font-weight:900;
      margin-bottom:6px;
    }
    .stat-badge span{
      display:block;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .compare-bars{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .compare-row{
      display:grid;
      grid-template-columns:92px 1fr 70px;
      gap:12px;
      align-items:center;
      font-size:.92rem;
    }
    .compare-row .label{
      color:var(--muted);
      font-weight:700;
    }
    .bar{
      height:12px;
      border-radius:999px;
      background:#e6edf1;
      overflow:hidden;
      border:1px solid rgba(217,229,234,.85);
    }
    .bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
    }
    .bar.alt > span{
      background:linear-gradient(90deg, #9ab7ff, var(--brand-2));
    }
    .bar.warn > span{
      background:linear-gradient(90deg, #ffcf71, var(--accent));
    }
    .proof-note{
      margin-top:16px;
      color:var(--muted);
      font-size:.92rem;
    }

    .news-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
    }
    .news-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .news-item a{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:14px 0;
      border-bottom:1px solid rgba(217,229,234,.75);
      transition:transform .2s ease, color .2s ease;
    }
    .news-item:last-child a{border-bottom:none}
    .news-item a:hover{
      transform:translateX(2px);
      color:var(--brand);
    }
    .news-item strong{
      display:block;
      font-size:1rem;
      line-height:1.45;
      font-weight:800;
      margin-bottom:4px;
    }
    .news-item p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .news-time{
      flex:0 0 auto;
      color:var(--muted);
      font-size:.82rem;
      white-space:nowrap;
      padding-top:2px;
    }
    .mini-panel{
      border-radius:20px;
      background:linear-gradient(180deg, rgba(15,157,138,.08), rgba(42,109,244,.06));
      border:1px solid rgba(15,157,138,.14);
      padding:18px;
      margin-bottom:14px;
    }
    .mini-panel h3{
      font-size:1.02rem;
      font-weight:900;
      margin:0 0 8px;
    }
    .mini-panel p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .mini-list{
      list-style:none;
      padding:0;
      margin:14px 0 0;
      display:grid;
      gap:10px;
    }
    .mini-list li{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      font-size:.95rem;
      padding:8px 0;
      border-bottom:1px dashed rgba(217,229,234,.8);
    }
    .mini-list li:last-child{border-bottom:none}
    .mini-list i{
      width:22px;
      height:22px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(15,157,138,.1);
      color:var(--brand);
      font-size:.75rem;
      flex:0 0 auto;
    }

    .topic-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .topic-chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(217,229,234,.95);
      background:#fff;
      color:var(--text);
      font-weight:700;
      font-size:.9rem;
      transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .topic-chip:hover{
      transform:translateY(-2px);
      border-color:rgba(15,157,138,.24);
      color:var(--brand);
      box-shadow:var(--shadow-sm);
    }

    .accordion{
      --bs-accordion-border-color: rgba(217,229,234,.95);
      --bs-accordion-bg: transparent;
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-active-color: var(--brand);
      --bs-accordion-active-bg: rgba(15,157,138,.06);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(15,157,138,.12);
      --bs-accordion-btn-padding-x: 0;
      --bs-accordion-btn-padding-y: 1rem;
      --bs-accordion-body-padding-x: 0;
      --bs-accordion-body-padding-y: 0 .5rem 1rem;
    }
    .accordion-item{
      background:transparent;
      border:none;
      border-bottom:1px solid rgba(217,229,234,.75);
      border-radius:0;
    }
    .accordion-button{
      background:transparent;
      box-shadow:none !important;
      font-weight:800;
      padding-left:0;
      padding-right:0;
      font-size:1rem;
    }
    .accordion-button:not(.collapsed){
      background:transparent;
      color:var(--brand);
    }
    .accordion-button::after{
      background-size:1rem;
    }
    .accordion-body{
      padding-left:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.95rem;
    }

    .cta-panel{
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(15,157,138,.12), rgba(42,109,244,.10)),
        rgba(255,255,255,.96);
      border-color:rgba(15,157,138,.16);
    }
    .cta-panel .cta-inner{
      display:grid;
      grid-template-columns:1fr auto;
      gap:18px;
      align-items:center;
    }
    .cta-panel h2{
      margin:0;
      font-size:1.5rem;
      font-weight:900;
      line-height:1.2;
    }
    .cta-panel p{
      margin:10px 0 0;
      color:var(--muted);
      max-width:720px;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }

    .download-panel{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:center;
    }
    .download-card{
      background:linear-gradient(180deg, rgba(247,250,252,.96), rgba(255,255,255,.98));
      border:1px solid rgba(217,229,234,.92);
      border-radius:20px;
      padding:18px;
    }
    .download-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
      font-weight:900;
    }
    .download-card p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.94rem;
    }
    .download-list{
      display:grid;
      gap:10px;
      list-style:none;
      padding:0;
      margin:0;
    }
    .download-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:var(--text);
      font-size:.95rem;
    }
    .download-list i{
      color:var(--brand);
      margin-top:3px;
    }

    .update-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .update-item{
      display:grid;
      grid-template-columns:90px 1fr;
      gap:14px;
      align-items:start;
      padding:14px 0;
      border-bottom:1px solid rgba(217,229,234,.78);
    }
    .update-item:last-child{border-bottom:none}
    .update-date{
      display:inline-flex;
      justify-content:center;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(15,157,138,.1);
      color:var(--brand);
      font-weight:800;
      font-size:.82rem;
      white-space:nowrap;
    }
    .update-item strong{
      display:block;
      font-size:1rem;
      font-weight:900;
      margin-bottom:5px;
    }
    .update-item p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
    }

    footer{
      padding:24px 0 32px;
      border-top:1px solid rgba(217,229,234,.8);
      background:rgba(255,255,255,.45);
      margin-top:20px;
    }
    .footer-shell{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .footer-brand p{
      color:var(--muted);
      margin:0;
      max-width:720px;
      font-size:.95rem;
    }
    .footer-links{
      display:grid;
      gap:10px;
      justify-items:start;
    }
    .footer-links a{
      color:var(--text);
      font-weight:700;
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{
      color:var(--brand);
      transform:translateX(2px);
    }
    .copyright{
      margin-top:16px;
      color:var(--muted);
      font-size:.9rem;
    }

    .page-gap{
      height:14px;
    }

    .floating-bar{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      z-index:1040;
      width:min(1180px, calc(100% - 28px));
      background:rgba(255,255,255,.9);
      border:1px solid rgba(217,229,234,.9);
      border-radius:20px;
      box-shadow:var(--shadow);
      padding:12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      backdrop-filter:blur(16px);
    }
    .floating-bar .left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .floating-bar .left strong{
      font-size:.98rem;
      white-space:nowrap;
    }
    .floating-bar .left span{
      color:var(--muted);
      font-size:.9rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    @media (max-width: 1199.98px){
      .hero-grid,
      .proof-grid,
      .news-grid,
      .download-panel,
      .footer-shell,
      .cta-panel .cta-inner{
        grid-template-columns:1fr;
      }
      .entry-card{
        grid-column:span 6;
      }
      .hero h1{
        font-size:2.5rem;
      }
      .nav-search{
        min-width:220px;
      }
    }
    @media (max-width: 991.98px){
      .nav-actions{
        margin-left:0;
        flex-wrap:wrap;
      }
      .navbar-collapse{
        padding-top:16px;
      }
      .entry-card{
        grid-column:span 12;
      }
      .steps-grid,
      .badge-grid{
        grid-template-columns:1fr;
      }
      .hero-shell{
        padding:24px;
      }
      .hero h1{
        font-size:2.2rem;
      }
      .floating-bar{
        display:none;
      }
    }
    @media (max-width: 767.98px){
      :root{
        --space-section:64px;
      }
      .hero{
        padding-top:16px;
      }
      .hero-shell{
        border-radius:24px;
      }
      .hero h1{
        font-size:1.95rem;
      }
      .hero-lead{
        font-size:1rem;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .section-head h2{
        font-size:1.4rem;
      }
      .compare-row{
        grid-template-columns:1fr;
      }
      .update-item{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
      .nav-search{
        min-width:100%;
      }
      .nav-actions{
        width:100%;
      }
      .nav-actions .btn{
        flex:1 1 auto;
      }
      .nav-link-custom{
        width:100%;
        justify-content:flex-start;
        border-radius:14px;
      }
    }

/* roulang page: category1 */
:root{
  --bg: #f4faf8;
  --bg-soft: #ecf6f3;
  --surface: #ffffff;
  --surface-strong: #0f172a;
  --surface-soft: #f7fbfa;
  --text: #10211d;
  --muted: #60706c;
  --border: #d8e6e1;
  --primary: #0f766e;
  --primary-2: #14b8a6;
  --primary-3: #0b5e55;
  --accent: #f59e0b;
  --success: #16a34a;
  --warning: #ea580c;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 24px 48px rgba(15, 23, 42, 0.12);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(15,118,110,0.08) 0%, rgba(244,250,248,0.98) 24%, rgba(237,245,243,0.94) 100%);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-x: hidden;
}
a{
  color: inherit;
  text-decoration: none;
}
a:hover{ color: inherit; }
img{
  max-width: 100%;
  display: block;
}
button,
input,
select,
textarea{
  font: inherit;
}
::selection{
  background: rgba(20,184,166,.18);
  color: var(--text);
}
.container-xl{
  max-width: 1320px;
}
main{
  position: relative;
}
section{
  padding: 72px 0;
}
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.section-head .section-copy{
  max-width: 700px;
}
.section-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20,184,166,.09);
  color: var(--primary-3);
  border: 1px solid rgba(20,184,166,.18);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.section-title{
  margin: 14px 0 10px;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0;
}
.section-desc{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.badge-solid{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.progress{
  height: 9px;
  border-radius: 999px;
  background: #e3f0ec;
  overflow: hidden;
}
.progress-bar{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: inherit;
}
.btn{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: none !important;
}
.btn:focus,
.btn:focus-visible,
input:focus,
select:focus,
button:focus{
  outline: none !important;
  box-shadow: 0 0 0 .2rem rgba(20,184,166,.18) !important;
}
.btn:hover{
  transform: translateY(-2px);
}
.btn-brand{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 26px rgba(15,118,110,.16) !important;
}
.btn-brand:hover{
  color: #fff;
  background: linear-gradient(135deg, var(--primary-3), var(--primary));
}
.btn-soft{
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}
.btn-soft:hover{
  background: #fff;
  border-color: rgba(20,184,166,.35);
}
.btn-lightish{
  color: var(--primary-3);
  border: 1px solid rgba(20,184,166,.18);
  background: rgba(20,184,166,.08);
}
.btn-lightish:hover{
  color: var(--primary-3);
  background: rgba(20,184,166,.14);
  border-color: rgba(20,184,166,.26);
}
.btn-linkish{
  color: var(--primary-3);
  padding-inline: 0;
}
.btn-linkish:hover{
  color: var(--primary);
}
.topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(16px);
  background: rgba(245, 250, 248, 0.88);
  border-bottom: 1px solid rgba(216,230,225,.9);
}
.nav-shell{
  min-height: 84px;
  padding: 14px 0;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-mark{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 20px;
  flex: 0 0 auto;
  box-shadow: 0 12px 24px rgba(15,118,110,.18);
}
.brand-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-name{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-sub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.navbar-nav{
  gap: 8px;
}
.nav-link-custom{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-link-custom:hover{
  color: var(--primary-3);
  background: rgba(20,184,166,.08);
}
.nav-link-custom.active{
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 20px rgba(15,118,110,.14);
}
.nav-search{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 290px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.nav-search i{
  color: var(--muted);
  font-size: 15px;
}
.nav-search input{
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: var(--text);
}
.nav-search input::placeholder{
  color: #8a9692;
}
.search-btn{
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar-toggler{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 11px;
  background: rgba(255,255,255,.86);
}
.navbar-toggler-icon{
  width: 1.15em;
  height: 1.15em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,118,110,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.hero-section{
  padding-top: 34px;
  padding-bottom: 34px;
}
.flash-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(20,184,166,.18);
  background: linear-gradient(90deg, rgba(20,184,166,.10), rgba(255,255,255,.95));
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}
.flash-left{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flash-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15,118,110,.10);
  color: var(--primary-3);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.flash-count{
  color: var(--muted);
  font-size: 14px;
}
.flash-count strong{
  color: var(--text);
}
.flash-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--primary-3);
  font-weight: 700;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  margin-top: 20px;
  align-items: stretch;
}
.hero-copy{
  padding: 12px 4px 0 2px;
}
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20,184,166,.08);
  border: 1px solid rgba(20,184,166,.16);
  color: var(--primary-3);
  font-size: 13px;
  font-weight: 700;
}
.hero-copy h1{
  margin: 14px 0 16px;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}
.hero-copy .lead{
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.hero-actions .btn{
  min-height: 46px;
  padding-inline: 18px;
}
.hero-meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.meta-chip{
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}
.meta-value{
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
  color: var(--text);
}
.meta-label{
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.hero-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,251,250,.98));
  border: 1px solid rgba(216,230,225,.98);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 22px;
}
.panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.panel-title{
  font-weight: 800;
  font-size: 16px;
}
.panel-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.10);
  color: #a35e00;
  border: 1px solid rgba(245,158,11,.20);
  font-size: 12px;
  font-weight: 800;
}
.lane-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lane-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 154px;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid rgba(216,230,225,.95);
  border-radius: 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lane-card:hover{
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.24);
  box-shadow: 0 16px 28px rgba(15,23,42,.08);
}
.lane-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lane-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--primary-3);
  background: rgba(20,184,166,.10);
  border: 1px solid rgba(20,184,166,.16);
}
.lane-state{
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(22,163,74,.10);
  color: #0f7d34;
  font-size: 12px;
  font-weight: 800;
}
.lane-card h3{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.lane-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.lane-foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lane-foot .tiny{
  color: var(--muted);
  font-size: 12px;
}
.lane-foot .btn{
  padding: 7px 12px;
  min-height: 34px;
  font-size: 13px;
}
.filter-section{
  padding-top: 18px;
}
.filter-shell{
  padding: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(216,230,225,.98);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.filter-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: center;
}
.search-field{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-field:focus-within{
  border-color: rgba(20,184,166,.42);
  box-shadow: 0 0 0 .2rem rgba(20,184,166,.12);
}
.search-field i{
  color: var(--muted);
}
.search-field input{
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
}
.search-field input::placeholder{
  color: #8a9692;
}
.control-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filter-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-chip{
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.filter-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(20,184,166,.28);
  background: rgba(20,184,166,.08);
}
.filter-chip.active{
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
}
.sort-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.sort-wrap label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.sort-select{
  min-width: 180px;
  border-radius: 12px;
  border-color: var(--border);
  background-color: #fff;
  padding: 10px 12px;
}
.result-count{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.entry-section{
  padding-top: 22px;
}
.entry-grid{
  row-gap: 18px;
}
.entry-card{
  height: 100%;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,250,.95));
  border: 1px solid rgba(216,230,225,.96);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.entry-card:hover{
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.22);
  box-shadow: var(--shadow-hover);
}
.entry-card.featured{
  background: linear-gradient(180deg, rgba(20,184,166,.08), rgba(255,255,255,.98));
}
.entry-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.entry-title{
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}
.entry-kicker{
  color: var(--primary-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill.on{
  color: #0f7d34;
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.16);
}
.status-pill.hot{
  color: #a35e00;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.18);
}
.status-pill.soft{
  color: var(--primary-3);
  background: rgba(20,184,166,.10);
  border-color: rgba(20,184,166,.16);
}
.entry-desc{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.entry-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.entry-tags .badge-soft{
  background: rgba(255,255,255,.95);
}
.entry-info{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}
.info-box{
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(216,230,225,.96);
  background: rgba(255,255,255,.96);
}
.info-label{
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.info-value{
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 900;
}
.entry-progress{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-progress .progress{
  height: 8px;
}
.entry-progress small{
  color: var(--muted);
  font-size: 12px;
}
.entry-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.entry-actions .btn{
  padding-inline: 14px;
  min-height: 40px;
  font-size: 14px;
}
.empty-state{
  display: none;
  margin-top: 8px;
  padding: 28px;
  border: 1px dashed rgba(20,184,166,.25);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.92);
  color: var(--muted);
  text-align: center;
}
.empty-state i{
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(20,184,166,.08);
  color: var(--primary-3);
  font-size: 24px;
  margin-bottom: 10px;
}
.steps-section{
  background: linear-gradient(180deg, rgba(247,251,250,.96), rgba(236,246,243,.78));
}
.step-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.step-card{
  height: 100%;
  padding: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(216,230,225,.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(20,184,166,.18));
  color: var(--primary-3);
  font-size: 22px;
  font-weight: 900;
}
.step-card h3{
  margin: 14px 0 10px;
  font-size: 20px;
  font-weight: 900;
}
.step-card p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.step-foot{
  margin-top: 14px;
  color: var(--primary-3);
  font-size: 13px;
  font-weight: 700;
}
.signal-section{
  background: linear-gradient(180deg, #ffffff, rgba(247,251,250,.92));
}
.signal-grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
}
.metric-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.metric-card{
  height: 100%;
  padding: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(216,230,225,.95);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.metric-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.metric-icon{
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--primary-3);
  background: rgba(20,184,166,.09);
  border: 1px solid rgba(20,184,166,.16);
}
.metric-value{
  margin-top: 14px;
  display: block;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
}
.metric-label{
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}
.metric-desc{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.report-card{
  height: 100%;
  padding: 22px;
  background: linear-gradient(180deg, rgba(20,184,166,.05), rgba(255,255,255,.97));
  border: 1px solid rgba(216,230,225,.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.report-list{
  display: grid;
  gap: 14px;
}
.report-row{
  display: grid;
  gap: 8px;
}
.report-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
}
.report-top span:last-child{
  color: var(--primary-3);
}
.report-bar{
  height: 10px;
  border-radius: 999px;
  background: #e5f0ec;
  overflow: hidden;
}
.report-bar i{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
.report-note{
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.update-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.update-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(20,184,166,.08);
  border: 1px solid rgba(20,184,166,.16);
  color: var(--primary-3);
  font-size: 13px;
  font-weight: 700;
}
.faq-section{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,248,.92));
}
.accordion{
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: rgba(216,230,225,.95);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(20,184,166,.14);
  --bs-accordion-active-bg: rgba(20,184,166,.06);
  --bs-accordion-active-color: var(--primary-3);
}
.accordion-item{
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.accordion-button{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  padding: 18px 20px;
}
.accordion-button:not(.collapsed){
  color: var(--primary-3);
  background: rgba(20,184,166,.06);
  box-shadow: none;
}
.accordion-body{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  padding: 0 20px 18px 20px;
}
.accordion-button::after{
  filter: hue-rotate(130deg) saturate(1.2);
}
.cta-band{
  padding-top: 18px;
}
.cta-shell{
  padding: 28px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.96), rgba(20,184,166,.92)),
    linear-gradient(180deg, rgba(15,118,110,.96), rgba(11,94,85,.98));
  color: #fff;
  box-shadow: 0 24px 48px rgba(15,118,110,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.cta-shell .section-kicker{
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.cta-shell .section-title,
.cta-shell .section-desc{
  color: #fff;
}
.cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.cta-actions .btn{
  min-height: 46px;
  padding-inline: 18px;
}
.cta-shell .btn-soft{
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.16);
}
.cta-shell .btn-soft:hover{
  background: #fff;
}
footer{
  margin-top: 10px;
  padding: 42px 0 28px;
  color: #d5e3df;
  background: linear-gradient(180deg, #111827, #0f172a);
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-shell{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: start;
}
.footer-brand .brand-name{
  color: #fff;
}
.footer-brand .brand-sub{
  color: #8ea39d;
}
.footer-brand p{
  margin: 16px 0 14px;
  color: #b6c7c2;
  max-width: 620px;
}
.copyright{
  color: #8ea39d;
  font-size: 13px;
}
.footer-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  justify-items: start;
  padding-top: 8px;
}
.footer-links a{
  color: #d6e3df;
  font-weight: 700;
  font-size: 14px;
}
.footer-links a:hover{
  color: #fff;
}
.footer-links a::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-2), #76f1cf);
  vertical-align: middle;
}
.navbar-collapse{
  flex-grow: 1;
}
@media (max-width: 1199.98px){
  .nav-search{
    min-width: 250px;
  }
  .hero-copy h1{
    font-size: 46px;
  }
}
@media (max-width: 991.98px){
  .navbar-collapse{
    padding: 16px 0 8px;
  }
  .navbar-collapse .nav-actions,
  .navbar-collapse .nav-search{
    width: 100%;
  }
  .nav-actions{
    flex-wrap: wrap;
  }
  .nav-actions .btn{
    flex: 1 1 180px;
  }
  .nav-search{
    margin-top: 14px;
    min-width: 0;
    width: 100%;
  }
  .hero-grid,
  .signal-grid,
  .footer-shell,
  .filter-row{
    grid-template-columns: 1fr;
  }
  .hero-copy h1{
    font-size: 42px;
  }
  .section-title{
    font-size: 30px;
  }
  .step-grid{
    grid-template-columns: 1fr;
  }
  .metric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px){
  section{
    padding: 58px 0;
  }
  .hero-section{
    padding-top: 24px;
  }
  .flash-strip{
    padding: 14px 16px;
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-copy h1{
    font-size: 36px;
  }
  .hero-copy .lead{
    font-size: 16px;
  }
  .hero-meta{
    grid-template-columns: 1fr;
  }
  .lane-grid{
    grid-template-columns: 1fr;
  }
  .sort-wrap{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .sort-select{
    width: 100%;
  }
  .metric-grid{
    grid-template-columns: 1fr;
  }
  .cta-shell{
    padding: 22px;
    border-radius: 24px;
  }
  .footer-links{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px){
  .nav-shell{
    min-height: 78px;
  }
  .brand-name{
    font-size: 17px;
  }
  .brand-sub{
    white-space: normal;
  }
  .hero-copy h1{
    font-size: 32px;
  }
  .section-title{
    font-size: 26px;
  }
  .entry-title{
    font-size: 19px;
  }
  .filter-shell,
  .entry-card,
  .step-card,
  .report-card,
  .metric-card{
    border-radius: 18px;
  }
  .hero-actions .btn,
  .cta-actions .btn,
  .entry-actions .btn{
    width: 100%;
    justify-content: center;
  }
  .hero-actions,
  .cta-actions,
  .entry-actions{
    display: grid;
    gap: 10px;
  }
  .nav-actions .btn{
    width: 100%;
    justify-content: center;
  }
  .accordion-button{
    font-size: 15px;
    padding: 16px 18px;
  }
  .accordion-body{
    padding: 0 18px 16px 18px;
  }
}