/* roulang page: index */
:root{
      --bg:#f7fbff;
      --bg-soft:#eef5ff;
      --panel:#ffffff;
      --panel-strong:#f8fbff;
      --text:#10304f;
      --muted:#5f7894;
      --line:#d9e5f4;
      --primary:#6ea8fe;
      --primary-deep:#4d8ff7;
      --primary-soft:#e5f0ff;
      --accent:#8fb9ff;
      --shadow:0 18px 50px rgba(42, 81, 137, .10);
      --shadow-soft:0 10px 28px rgba(42, 81, 137, .08);
      --radius:22px;
      --radius-sm:16px;
      --radius-xs:12px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at top left, rgba(110,168,254,.11), transparent 26%),
        radial-gradient(circle at top right, rgba(143,185,255,.08), transparent 24%),
        linear-gradient(180deg, #f9fcff 0%, #f4f8fd 100%);
      color:var(--text);
      line-height:1.75;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(110,168,254,.24)}
    .container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
    .glass-nav{
      backdrop-filter:saturate(180%) blur(18px);
      background:rgba(255,255,255,.62);
      border:1px solid rgba(255,255,255,.55);
      box-shadow:0 10px 30px rgba(30,60,102,.10);
    }
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:50;
      transition:all .28s ease;
    }
    .site-header.is-scrolled .header-shell{
      background:rgba(255,255,255,.92);
      border-color:rgba(217,229,244,.9);
      box-shadow:0 12px 34px rgba(30,60,102,.12);
      backdrop-filter:blur(14px);
    }
    .header-shell{
      margin:16px auto 0;
      padding:14px 18px;
      border-radius:999px;
      transition:all .28s ease;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--text);
    }
    .brand-badge{
      width:36px;
      height:36px;
      border-radius:12px;
      background:linear-gradient(135deg, var(--primary) 0%, #d7e8ff 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
    }
    .nav-link{
      position:relative;
      color:var(--muted);
      padding:.45rem .7rem;
      border-radius:999px;
      transition:all .2s ease;
      white-space:nowrap;
    }
    .nav-link:hover,.nav-link:focus-visible{
      color:var(--text);
      background:rgba(110,168,254,.10);
      outline:none;
    }
    .nav-link.active{
      color:#1d4f8f;
      background:rgba(110,168,254,.16);
    }
    .primary-btn,.secondary-btn,.ghost-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:999px;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      will-change:transform;
    }
    .primary-btn{
      background:var(--primary-deep);
      color:#fff;
      box-shadow:0 12px 26px rgba(77,143,247,.22);
      border:1px solid rgba(77,143,247,.18);
    }
    .primary-btn:hover,.primary-btn:focus-visible{
      transform:translateY(-1px);
      background:#3d7fe9;
      outline:none;
    }
    .secondary-btn{
      background:rgba(255,255,255,.92);
      border:1px solid var(--line);
      color:var(--text);
    }
    .secondary-btn:hover,.secondary-btn:focus-visible{
      transform:translateY(-1px);
      border-color:#bfd3ee;
      box-shadow:var(--shadow-soft);
      outline:none;
    }
    .ghost-btn{
      background:transparent;
      border:1px solid rgba(110,168,254,.24);
      color:#2e5d95;
    }
    .ghost-btn:hover,.ghost-btn:focus-visible{
      background:rgba(110,168,254,.08);
      outline:none;
    }
    .hero{
      padding-top:120px;
      padding-bottom:42px;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(217,229,244,.9);
      box-shadow:var(--shadow);
      background:
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,250,255,.88)),
        linear-gradient(135deg, rgba(110,168,254,.06), rgba(255,255,255,0));
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:radial-gradient(circle at 18% 14%, rgba(110,168,254,.18), transparent 20%),
                 radial-gradient(circle at 85% 24%, rgba(143,185,255,.17), transparent 20%);
      pointer-events:none;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.4rem .8rem;
      border-radius:999px;
      background:rgba(110,168,254,.10);
      color:#2d5f96;
      font-weight:700;
      border:1px solid rgba(110,168,254,.16);
    }
    .section-title{
      font-size:clamp(1.55rem, 2vw, 2.15rem);
      line-height:1.2;
      letter-spacing:-.02em;
      color:var(--text);
      font-weight:800;
    }
    .section-desc{
      color:var(--muted);
      font-size:1rem;
      line-height:1.9;
    }
    .soft-card{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(217,229,244,.95);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .mini-card{
      border-radius:18px;
      border:1px solid rgba(217,229,244,.9);
      background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
      box-shadow:0 10px 20px rgba(44, 79, 132, .06);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .mini-card:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 28px rgba(44,79,132,.10);
      border-color:#c6daf5;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .62rem;
      border-radius:999px;
      background:var(--primary-soft);
      color:#2f5f97;
      font-size:.8rem;
      font-weight:700;
      border:1px solid rgba(110,168,254,.14);
    }
    .meta-dot{
      width:6px;
      height:6px;
      border-radius:999px;
      background:#7da8da;
      display:inline-block;
    }
    .content-card{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(217,229,244,.95);
      background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border-radius:24px;
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      height:100%;
    }
    .content-card:hover{
      transform:translateY(-3px);
      border-color:#bed3ee;
      box-shadow:0 18px 38px rgba(42,81,137,.12);
    }
    .content-card .thumb{
      background:
        linear-gradient(135deg, rgba(110,168,254,.16), rgba(255,255,255,0)),
        linear-gradient(180deg, #edf5ff, #f8fbff);
      border-bottom:1px solid rgba(217,229,244,.8);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.32rem .68rem;
      border-radius:999px;
      background:#f4f8ff;
      border:1px solid #d8e5f5;
      color:#4d6f93;
      font-size:.8rem;
      font-weight:700;
    }
    .divider{
      height:1px;
      background:linear-gradient(90deg, rgba(217,229,244,0), rgba(217,229,244,1), rgba(217,229,244,0));
    }
    .sticky-blur{
      backdrop-filter:blur(16px);
      background:rgba(255,255,255,.88);
      border:1px solid rgba(217,229,244,.9);
      box-shadow:0 12px 30px rgba(30,60,102,.08);
    }
    .faq-item{
      border:1px solid rgba(217,229,244,.92);
      background:rgba(255,255,255,.9);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 10px 20px rgba(42,81,137,.05);
    }
    .faq-item[open]{
      border-color:#bfd3ee;
      box-shadow:0 16px 30px rgba(42,81,137,.09);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      font-weight:700;
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary .icon{
      width:30px;
      height:30px;
      border-radius:999px;
      background:var(--primary-soft);
      display:grid;
      place-items:center;
      color:#33689b;
      flex:0 0 auto;
    }
    .faq-body{
      padding:0 1.1rem 1rem;
      color:var(--muted);
      line-height:1.9;
    }
    .footer-link{
      color:var(--muted);
      transition:color .2s ease;
    }
    .footer-link:hover,.footer-link:focus-visible{
      color:var(--text);
      outline:none;
    }
    .search-shell{
      display:flex;
      align-items:center;
      gap:.6rem;
      padding:.65rem .8rem;
      border-radius:999px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(217,229,244,.95);
      box-shadow:0 8px 20px rgba(42,81,137,.06);
    }
    .search-shell input{
      width:100%;
      border:none;
      outline:none;
      background:transparent;
      color:var(--text);
      min-width:0;
    }
    .search-shell input::placeholder{color:#8ba0b7}
    .floating-tag{
      position:absolute;
      top:16px;
      right:16px;
      z-index:2;
    }
    .mask-ring{
      position:absolute;
      inset:auto -30px -40px auto;
      width:160px;
      height:160px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(110,168,254,.24) 0%, rgba(110,168,254,.04) 55%, transparent 70%);
      filter:blur(2px);
      pointer-events:none;
    }
    .page-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .9rem;
      border-radius:999px;
      border:1px solid rgba(217,229,244,.9);
      background:#fff;
      color:#4b6888;
      font-weight:700;
      transition:all .2s ease;
    }
    .page-pill:hover{border-color:#bfd3ee; box-shadow:var(--shadow-soft); transform:translateY(-1px)}
    .reco-list a{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
      border-bottom:1px solid #e7eff8;
    }
    .reco-list a:last-child{border-bottom:none}
    .reco-list a:hover .title{color:#245b99}
    .title{transition:color .2s ease}
    .mobile-menu{
      display:none;
    }
    .desktop-nav{
      display:flex;
    }
    .mobile-drawer{
      display:none;
    }
    @media (max-width: 1024px){
      .hero{padding-top:108px}
    }
    @media (max-width: 768px){
      .header-shell{
        border-radius:26px;
        margin-top:10px;
        padding:12px 14px;
      }
      .desktop-nav{display:none}
      .mobile-menu{display:inline-flex}
      .hero{padding-top:92px}
      .mobile-drawer{
        display:none;
        margin-top:12px;
      }
      .mobile-drawer.open{display:block}
    }
    @media (max-width: 520px){
      .container{width:min(100% - 22px, 1180px)}
      .section-title{font-size:1.35rem}
      .section-desc{font-size:.98rem}
      .hero{padding-bottom:28px}
      .search-shell{padding:.58rem .7rem}
    }
    .focus-ring:focus-visible{
      outline:3px solid rgba(110,168,254,.28);
      outline-offset:2px;
    }

/* roulang page: category2 */
:root{
      --primary:#3b82f6;
      --primary-dark:#2563eb;
      --primary-soft:#eff6ff;
      --sky-soft:#f6faff;
      --surface:#ffffff;
      --surface-blue:#f8fbff;
      --text:#172033;
      --muted:#637189;
      --weak:#8a97aa;
      --border:#dbe7f5;
      --border-strong:#c7d9ee;
      --shadow-sm:0 10px 24px rgba(30,60,102,.07);
      --shadow-md:0 18px 46px rgba(30,60,102,.10);
      --shadow-lg:0 28px 70px rgba(30,60,102,.14);
      --radius:24px;
      --radius-lg:34px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 0%, rgba(59,130,246,.12), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(147,197,253,.18), transparent 34%),
        linear-gradient(180deg,#f8fbff 0%,#fff 42%,#f7fbff 100%);
      line-height:1.75;
      min-height:100vh;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(59,130,246,.18)}
    .container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
    .site-header{
      position:fixed;
      z-index:50;
      top:18px;
      left:0;
      right:0;
      transition:top .25s ease, transform .25s ease;
    }
    .header-shell{
      border:1px solid rgba(219,231,245,.78);
      border-radius:999px;
      padding:10px 12px 10px 16px;
      transition:background .25s ease, box-shadow .25s ease, border-color .25s ease, border-radius .25s ease;
    }
    .glass-nav{
      background:rgba(255,255,255,.68);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      box-shadow:0 18px 48px rgba(30,60,102,.10);
    }
    .site-header.is-solid{top:8px}
    .site-header.is-solid .header-shell{
      background:rgba(255,255,255,.96);
      border-color:var(--border);
      box-shadow:0 12px 34px rgba(30,60,102,.12);
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:-.02em;
      color:#13233a;
      white-space:nowrap;
    }
    .brand-badge{
      display:grid;
      place-items:center;
      width:38px;
      height:38px;
      border-radius:14px;
      color:white;
      font-weight:950;
      background:linear-gradient(135deg,#60a5fa,#2563eb);
      box-shadow:0 10px 24px rgba(37,99,235,.22);
    }
    .desktop-nav{display:flex}
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      color:#40516b;
      font-weight:750;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .nav-link:hover{background:rgba(59,130,246,.09);color:var(--primary-dark);transform:translateY(-1px)}
    .nav-link.active{background:#eaf3ff;color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(59,130,246,.14)}
    .primary-btn,.secondary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      font-weight:850;
      border:1px solid transparent;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
    }
    .primary-btn{background:var(--primary);color:white;box-shadow:0 14px 28px rgba(59,130,246,.22)}
    .primary-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 18px 38px rgba(37,99,235,.26)}
    .secondary-btn{background:#fff;color:#24558f;border-color:var(--border);box-shadow:var(--shadow-sm)}
    .secondary-btn:hover{background:var(--primary-soft);border-color:#bfdbfe;transform:translateY(-2px)}
    .focus-ring:focus-visible,.nav-link:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible,input:focus-visible,button:focus-visible{
      outline:3px solid rgba(59,130,246,.28);
      outline-offset:3px;
    }
    .mobile-menu{display:none}
    .mobile-drawer{display:none}
    .hero{
      padding:136px 0 54px;
      position:relative;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:430px;
      background:linear-gradient(180deg,rgba(239,246,255,.92),rgba(255,255,255,0));
      pointer-events:none;
      z-index:-1;
    }
    .section{padding:54px 0}
    .section-tight{padding:34px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:#2563eb;
      font-weight:850;
      box-shadow:var(--shadow-sm);
    }
    .hero-panel,.soft-card,.content-card,.side-card,.faq-card,.cta-panel{
      background:rgba(255,255,255,.88);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-md);
    }
    .hero-panel{
      padding:34px;
      overflow:hidden;
      position:relative;
    }
    .hero-panel:after{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:280px;
      height:280px;
      border-radius:999px;
      background:rgba(59,130,246,.10);
    }
    .filter-chip,.tag,.metric-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:#46617f;
      font-weight:800;
      transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
    }
    .filter-chip{padding:10px 15px}
    .filter-chip:hover,.filter-chip.active{background:#eaf3ff;border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px)}
    .tag{padding:5px 10px;font-size:.82rem;color:#356293;background:#f5f9ff}
    .metric-badge{padding:9px 12px;background:#f8fbff}
    .search-box{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .search-box input{
      width:100%;
      border:0;
      outline:0;
      color:var(--text);
      background:transparent;
      padding:8px 4px;
    }
    .content-card,.side-card,.soft-card,.faq-card{
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .content-card:hover,.side-card:hover,.soft-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-lg);
      border-color:#bfdbfe;
    }
    .content-card{
      padding:22px;
      border-radius:28px;
    }
    .side-card{
      padding:20px;
      border-radius:26px;
    }
    .rank-dot{
      display:grid;
      place-items:center;
      width:34px;
      height:34px;
      flex:0 0 auto;
      border-radius:13px;
      background:#eaf3ff;
      color:#1d4ed8;
      font-weight:950;
    }
    .score-bar{
      height:9px;
      overflow:hidden;
      border-radius:999px;
      background:#e8f1fb;
    }
    .score-bar span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#93c5fd,#2563eb);
    }
    .timeline-item{
      position:relative;
      padding-left:28px;
    }
    .timeline-item:before{
      content:"";
      position:absolute;
      left:7px;
      top:8px;
      width:10px;
      height:10px;
      border-radius:999px;
      background:#3b82f6;
      box-shadow:0 0 0 6px #eaf3ff;
    }
    .timeline-item:after{
      content:"";
      position:absolute;
      left:11px;
      top:26px;
      bottom:-18px;
      width:1px;
      background:#dbe7f5;
    }
    .timeline-item:last-child:after{display:none}
    .faq-card summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      font-weight:900;
      color:#172033;
    }
    .faq-card summary::-webkit-details-marker{display:none}
    .faq-card summary span:last-child{transition:transform .2s ease;color:#3b82f6}
    .faq-card[open] summary span:last-child{transform:rotate(45deg)}
    .cta-panel{
      position:relative;
      overflow:hidden;
      padding:36px;
      background:
        radial-gradient(circle at 10% 0%,rgba(147,197,253,.30),transparent 34%),
        linear-gradient(135deg,#ffffff,#eef6ff);
    }
    .cta-panel:after{
      content:"";
      position:absolute;
      right:-80px;
      bottom:-100px;
      width:260px;
      height:260px;
      border-radius:999px;
      background:rgba(59,130,246,.12);
    }
    .page-pill{
      display:flex;
      align-items:center;
      border-radius:18px;
      padding:12px 14px;
      background:#f8fbff;
      color:#2d4968;
      font-weight:850;
      border:1px solid var(--border);
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .page-pill:hover{background:#eaf3ff;color:#1d4ed8;transform:translateX(2px)}
    .page-pill.active{background:#eaf3ff;color:#1d4ed8;border-color:#bfdbfe}
    .footer-link{
      color:#43566f;
      transition:color .2s ease,transform .2s ease;
    }
    .footer-link:hover{color:#1d4ed8;transform:translateX(2px)}
    .divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
    @media (max-width:1024px){
      :root{--container:936px}
      .desktop-nav{gap:2px}
      .nav-link{padding:0 11px}
      .hero{padding-top:126px}
      .hero-panel{padding:28px}
    }
    @media (max-width:768px){
      .site-header{top:10px}
      .header-shell{border-radius:28px;padding:10px}
      .desktop-nav{display:none}
      .mobile-menu{display:inline-flex}
      .mobile-drawer.is-open{display:block}
      .hero{padding:112px 0 38px}
      .section{padding:38px 0}
      .section-tight{padding:24px 0}
      .hero-panel,.cta-panel{padding:24px;border-radius:28px}
      .search-box{border-radius:24px;align-items:stretch;flex-direction:column}
      .search-box .primary-btn{width:100%}
    }
    @media (max-width:520px){
      .container{width:min(100% - 22px,var(--container))}
      .brand-badge{width:34px;height:34px;border-radius:12px}
      .brand-mark{gap:8px}
      .hero-panel,.soft-card,.content-card,.side-card,.faq-card,.cta-panel{border-radius:22px}
      .content-card,.side-card{padding:18px}
      .filter-chip{padding:9px 12px;font-size:.92rem}
      .primary-btn,.secondary-btn{width:100%}
      .cta-panel{padding:22px}
    }

/* roulang page: category1 */
:root {
      --primary: #4f9df7;
      --primary-deep: #2f7edb;
      --primary-soft: #eaf4ff;
      --bg: #f7fbff;
      --surface: #ffffff;
      --surface-soft: #f2f7fd;
      --text: #172033;
      --muted: #66758b;
      --line: #dbe7f5;
      --blue-gray: #e8f0f8;
      --success: #20a67a;
      --warning: #f0a33a;
      --radius-sm: 14px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --shadow-sm: 0 10px 26px rgba(38, 73, 116, .07);
      --shadow-md: 0 18px 48px rgba(38, 73, 116, .10);
      --shadow-lg: 0 28px 70px rgba(38, 73, 116, .14);
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 0%, rgba(79, 157, 247, .16), transparent 34%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 42%, #f6faff 100%);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.7;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button, input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    input {
      outline: none;
    }

    .container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .site-header {
      position: fixed;
      inset: 18px 0 auto;
      z-index: 50;
      transition: all .28s ease;
    }

    .site-header.is-scrolled {
      inset: 0 0 auto;
      background: rgba(255, 255, 255, .88);
      border-bottom: 1px solid rgba(219, 231, 245, .92);
      backdrop-filter: blur(18px);
    }

    .site-header.is-scrolled .header-shell {
      margin-top: 8px;
      margin-bottom: 8px;
      box-shadow: 0 12px 30px rgba(38, 73, 116, .09);
      background: rgba(255, 255, 255, .96);
    }

    .header-shell {
      border-radius: 999px;
      padding: 10px 12px;
      transition: all .28s ease;
    }

    .glass-nav {
      border: 1px solid rgba(219, 231, 245, .82);
      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 50px rgba(38, 73, 116, .10);
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #142033;
      white-space: nowrap;
    }

    .brand-badge {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 15px;
      color: #fff;
      font-weight: 950;
      background: linear-gradient(135deg, var(--primary), #79b8ff);
      box-shadow: 0 12px 24px rgba(79, 157, 247, .26);
    }

    .desktop-nav {
      display: none;
    }

    @media (min-width: 768px) {
      .desktop-nav {
        display: flex;
      }
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 999px;
      color: #43536b;
      font-weight: 800;
      transition: all .22s ease;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--primary-deep);
      background: rgba(234, 244, 255, .95);
    }

    .primary-btn,
    .secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space: nowrap;
    }

    .primary-btn {
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #71b5ff);
      box-shadow: 0 14px 28px rgba(79, 157, 247, .24);
    }

    .primary-btn:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, var(--primary-deep), var(--primary));
      box-shadow: 0 18px 36px rgba(79, 157, 247, .30);
    }

    .secondary-btn {
      color: #24547d;
      background: rgba(255, 255, 255, .82);
      border-color: var(--line);
    }

    .secondary-btn:hover {
      transform: translateY(-2px);
      background: var(--primary-soft);
      border-color: rgba(79, 157, 247, .35);
    }

    .focus-ring:focus-visible,
    .nav-link:focus-visible,
    .primary-btn:focus-visible,
    .secondary-btn:focus-visible,
    .footer-link:focus-visible,
    .page-pill:focus-visible {
      outline: 3px solid rgba(79, 157, 247, .32);
      outline-offset: 3px;
    }

    .mobile-drawer {
      display: none;
    }

    .mobile-drawer.open {
      display: block;
    }

    .page-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 16px;
      padding: 12px 14px;
      background: #f7fbff;
      border: 1px solid var(--line);
      color: #30425d;
      font-weight: 850;
      transition: all .2s ease;
    }

    .page-pill:hover,
    .page-pill.active {
      background: var(--primary-soft);
      color: var(--primary-deep);
      transform: translateY(-1px);
    }

    .hero {
      position: relative;
      padding: 150px 0 76px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 84px auto auto 50%;
      width: min(560px, 70vw);
      height: min(560px, 70vw);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(79, 157, 247, .18), transparent 67%);
      transform: translateX(-5%);
      pointer-events: none;
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding: 48px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border: 1px solid rgba(79, 157, 247, .18);
      background: rgba(234, 244, 255, .76);
      color: var(--primary-deep);
      font-size: .86rem;
      font-weight: 950;
      letter-spacing: .04em;
      border-radius: 999px;
      padding: 8px 12px;
    }

    .hero-title {
      letter-spacing: -.055em;
      line-height: 1.08;
      font-weight: 950;
      color: #132033;
    }

    .hero-copy,
    .lead-copy {
      color: var(--muted);
      line-height: 1.95;
    }

    .card {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .88);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: rgba(79, 157, 247, .28);
    }

    .soft-panel {
      border: 1px solid rgba(219, 231, 245, .88);
      background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 250, 255, .92));
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    .filter-box {
      position: sticky;
      top: 108px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .88);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(12px);
    }

    .filter-chip,
    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: #53657d;
      font-size: .86rem;
      font-weight: 850;
      padding: 8px 11px;
      transition: all .18s ease;
    }

    .filter-chip:hover,
    .filter-chip.active {
      color: var(--primary-deep);
      border-color: rgba(79, 157, 247, .34);
      background: var(--primary-soft);
    }

    .tag {
      padding: 6px 10px;
      background: var(--surface-soft);
      font-size: .78rem;
    }

    .metric {
      border: 1px solid rgba(219, 231, 245, .92);
      border-radius: 22px;
      background: rgba(255, 255, 255, .78);
      padding: 16px;
    }

    .content-row {
      display: grid;
      gap: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .92);
      box-shadow: var(--shadow-sm);
      padding: 22px;
      transition: all .22s ease;
    }

    .content-row:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: rgba(79, 157, 247, .30);
    }

    .score-bar {
      overflow: hidden;
      height: 8px;
      border-radius: 999px;
      background: #edf4fb;
    }

    .score-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), #8ac3ff);
    }

    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(38, 73, 116, .05);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      color: #1a2a40;
      font-weight: 950;
      text-align: left;
      background: transparent;
      border: 0;
    }

    .faq-answer {
      display: none;
      padding: 0 22px 20px;
      color: var(--muted);
      line-height: 1.9;
    }

    .faq-item.open .faq-answer {
      display: block;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .faq-icon {
      transition: transform .2s ease;
      color: var(--primary-deep);
      font-size: 1.25rem;
      line-height: 1;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .42), transparent 30%),
        linear-gradient(135deg, #3e95f3, #7dbfff);
      color: #fff;
      box-shadow: var(--shadow-lg);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      inset: auto -80px -120px auto;
      width: 320px;
      height: 320px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .22);
    }

    .footer-link {
      color: var(--muted);
      font-weight: 800;
      transition: color .2s ease, transform .2s ease;
      width: fit-content;
    }

    .footer-link:hover {
      color: var(--primary-deep);
      transform: translateX(3px);
    }

    .search-wrap {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .92);
      border-radius: 22px;
      box-shadow: var(--shadow-sm);
    }

    .search-input {
      width: 100%;
      border: 0;
      background: transparent;
      color: var(--text);
      padding: 14px 16px;
    }

    .search-input::placeholder {
      color: #8a98ab;
    }

    .pagination a,
    .pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 42px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: #53657d;
      font-weight: 900;
      transition: all .2s ease;
    }

    .pagination a:hover,
    .pagination span.current {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(79, 157, 247, .22);
    }

    @media (max-width: 1024px) {
      :root {
        --container: 940px;
      }

      .hero {
        padding-top: 138px;
      }

      .filter-box {
        position: static;
      }
    }

    @media (max-width: 768px) {
      .site-header {
        inset: 10px 0 auto;
      }

      .header-shell {
        border-radius: 24px;
      }

      .hero {
        padding: 132px 0 52px;
      }

      .section {
        padding: 52px 0;
      }

      .section-tight {
        padding: 36px 0;
      }

      .hero-title {
        letter-spacing: -.035em;
      }

      .brand-badge {
        width: 38px;
        height: 38px;
        border-radius: 14px;
      }

      .content-row {
        padding: 18px;
      }
    }

    @media (max-width: 520px) {
      .container {
        width: min(100% - 22px, var(--container));
      }

      .hero {
        padding-top: 124px;
      }

      .header-shell {
        padding: 8px;
      }

      .brand-mark {
        gap: 8px;
      }

      .brand-badge {
        width: 34px;
        height: 34px;
        font-size: .9rem;
      }

      .primary-btn,
      .secondary-btn {
        width: 100%;
      }

      .mobile-menu {
        width: auto;
      }

      .cta-panel {
        border-radius: 26px;
      }
    }