/* roulang page: index */
:root{
      --bg:#f4f8fc;
      --panel:#ffffff;
      --panel-soft:#edf4fb;
      --line:#d7e1ec;
      --line-strong:#b9cada;
      --text:#14314a;
      --muted:#5f7387;
      --primary:#1f6feb;
      --primary-strong:#1557c0;
      --accent:#0ea5c0;
      --good:#2f855a;
      --warn:#b7791f;
      --shadow:0 10px 28px rgba(18,40,72,.08);
      --shadow-strong:0 14px 36px rgba(18,40,72,.12);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: PingFang SC, HarmonyOS Sans, Source Han Sans SC, Microsoft YaHei, sans-serif;
      background:
        linear-gradient(180deg, #f7fbff 0%, #f4f8fc 100%);
      color:var(--text);
      letter-spacing:0;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(31,111,235,.16)}
    .page-shell{min-height:100vh}
    .container{
      width:min(1320px, calc(100% - 2rem));
      margin-inline:auto;
    }
    @media (min-width: 640px){
      .container{width:min(1320px, calc(100% - 2.5rem));}
    }
    @media (min-width: 1024px){
      .container{width:min(1320px, calc(100% - 3rem));}
    }
    .topbar{
      background:rgba(255,255,255,.92);
      backdrop-filter:saturate(150%) blur(6px);
      border-bottom:1px solid var(--line);
      position:sticky;
      top:0;
      z-index:50;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      color:var(--ink);
      letter-spacing:0;
    }
    .brand-dot{
      width:12px;height:12px;border-radius:999px;background:var(--primary);
      box-shadow:0 0 0 4px rgba(31,111,235,.12);
      flex:none;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .85rem;
      border:1px solid transparent;
      border-radius:8px;
      color:#35546f;
      transition:all .18s ease;
      white-space:nowrap;
    }
    .nav-link:hover,.nav-link:focus-visible{
      background:#fff;
      border-color:var(--line);
      color:var(--primary-strong);
      box-shadow:0 8px 20px rgba(18,40,72,.06);
      outline:none;
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:rgba(31,111,235,.08);
      color:var(--primary-strong);
      border-color:rgba(31,111,235,.22);
    }
    .stepbar{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.75rem;
      align-items:stretch;
      position:relative;
    }
    .stepbar::before{
      content:'';
      position:absolute;
      left:1rem;
      right:1rem;
      top:50%;
      height:1px;
      background:linear-gradient(90deg, rgba(31,111,235,.18), rgba(14,165,192,.18));
      transform:translateY(-50%);
      pointer-events:none;
    }
    .step-link{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.85rem .95rem;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:8px;
      box-shadow:0 4px 14px rgba(18,40,72,.05);
      color:#38546b;
      transition:all .18s ease;
    }
    .step-link:hover,.step-link:focus-visible{
      border-color:rgba(31,111,235,.26);
      box-shadow:var(--shadow);
      transform:translateY(-1px);
      outline:none;
    }
    .step-dot{
      width:1.1rem;height:1.1rem;border-radius:999px;
      border:2px solid rgba(31,111,235,.34);
      background:#fff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--primary);
      font-size:.72rem;
      flex:none;
    }
    .step-link.is-current{
      border-color:rgba(31,111,235,.34);
      background:linear-gradient(180deg, rgba(31,111,235,.08), rgba(31,111,235,.04));
    }
    .step-link.is-current .step-dot{
      background:var(--primary);
      border-color:var(--primary);
      color:#fff;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.3rem .65rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:600;
      border:1px solid var(--line);
      background:#fff;
      color:#46617a;
    }
    .badge.soft{
      background:var(--panel-soft);
      border-color:rgba(31,111,235,.14);
      color:var(--primary-strong);
    }
    .badge.good{
      background:rgba(47,133,90,.08);
      border-color:rgba(47,133,90,.14);
      color:var(--good);
    }
    .badge.warn{
      background:rgba(183,121,31,.08);
      border-color:rgba(183,121,31,.15);
      color:var(--warn);
    }
    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:8px;
      box-shadow:var(--shadow);
      transition:all .18s ease;
    }
    .panel:hover{
      box-shadow:var(--shadow-strong);
      border-color:rgba(31,111,235,.16);
    }
    .title-hero{
      color:var(--ink);
      line-height:1.1;
      letter-spacing:0;
    }
    .subtle{
      color:var(--muted);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:8px;
      padding:.82rem 1.05rem;
      font-weight:700;
      transition:all .18s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn:focus-visible,.field:focus-visible,summary:focus-visible{
      outline:2px solid rgba(31,111,235,.28);
      outline-offset:2px;
    }
    .btn-primary{
      background:linear-gradient(180deg, var(--primary), var(--primary-strong));
      color:#fff;
      box-shadow:0 10px 22px rgba(31,111,235,.18);
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(31,111,235,.22)}
    .btn-secondary{
      background:#fff;
      border-color:var(--line);
      color:#35546f;
    }
    .btn-secondary:hover{transform:translateY(-1px);border-color:#b8cadb;box-shadow:0 10px 22px rgba(18,40,72,.08)}
    .btn-ghost{
      background:rgba(31,111,235,.08);
      border-color:rgba(31,111,235,.14);
      color:var(--primary-strong);
    }
    .btn-ghost:hover{transform:translateY(-1px);background:rgba(31,111,235,.11)}
    .stat-card{
      background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border:1px solid var(--line);
      border-radius:8px;
      padding:1rem;
      box-shadow:0 6px 18px rgba(18,40,72,.05);
    }
    .stat-value{
      font-size:1.65rem;
      font-weight:800;
      color:var(--ink);
      line-height:1.05;
      letter-spacing:0;
    }
    .metric{
      position:relative;
      overflow:hidden;
    }
    .metric::after{
      content:'';
      position:absolute;
      right:-18px;
      top:-18px;
      width:72px;
      height:72px;
      border-radius:999px;
      background:rgba(31,111,235,.07);
    }
    .metric .trend{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      font-size:.82rem;
      color:var(--good);
      font-weight:700;
    }
    .strip{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      padding:.38rem .7rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#47647d;
      font-size:.86rem;
    }
    .chip.soft{background:var(--panel-soft);border-color:rgba(31,111,235,.12);color:var(--primary-strong)}
    .section{
      padding:2rem 0;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-title{
      font-size:1.35rem;
      font-weight:800;
      color:var(--ink);
      letter-spacing:0;
    }
    .section-desc{
      color:var(--muted);
      max-width:58rem;
      font-size:.98rem;
    }
    .grid-tight{
      display:grid;
      gap:1rem;
    }
    .cover{
      aspect-ratio:16/9;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.7);
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 20%, rgba(31,111,235,.18) 0 24%, transparent 26%),
        radial-gradient(circle at 84% 28%, rgba(14,165,192,.18) 0 18%, transparent 20%),
        linear-gradient(135deg, #edf5ff 0%, #dcecff 55%, #eef7ff 100%);
      position:relative;
    }
    .cover::before,
    .cover::after{
      content:'';
      position:absolute;
      inset:auto;
      border-radius:999px;
      background:rgba(255,255,255,.44);
    }
    .cover::before{
      width:64%;
      height:34%;
      left:10%;
      top:16%;
      box-shadow:
        0 44px 0 rgba(255,255,255,.24),
        0 88px 0 rgba(255,255,255,.18);
    }
    .cover::after{
      width:26%;
      height:54%;
      right:10%;
      bottom:12%;
      background:linear-gradient(180deg, rgba(31,111,235,.16), rgba(255,255,255,.12));
      box-shadow:0 0 0 1px rgba(31,111,235,.06) inset;
    }
    .cover.alt{
      background:
        linear-gradient(135deg, #f2f7fc 0%, #e3eef9 58%, #f5fbff 100%);
    }
    .cover.alt::before{
      background:rgba(31,111,235,.16);
      width:48%;
      left:14%;
      top:18%;
    }
    .cover.alt::after{
      background:rgba(14,165,192,.18);
      right:14%;
      bottom:14%;
      width:34%;
    }
    .cover.deep{
      background:
        linear-gradient(135deg, #eef6ff 0%, #dfeefe 60%, #f8fbff 100%);
    }
    .cover.deep::before{
      background:rgba(31,111,235,.12);
      width:56%;
      height:28%;
      left:12%;
      top:22%;
    }
    .cover.deep::after{
      background:rgba(47,133,90,.12);
      right:12%;
      bottom:12%;
      width:22%;
    }
    .list-dot{
      width:.5rem;height:.5rem;border-radius:999px;background:var(--primary);
      flex:none;margin-top:.55rem;
      box-shadow:0 0 0 4px rgba(31,111,235,.1);
    }
    .compare-bar{
      height:10px;
      border-radius:999px;
      background:#edf3fa;
      overflow:hidden;
      border:1px solid #dbe5ef;
    }
    .compare-bar > span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary), var(--accent));
    }
    .bubble{
      position:relative;
      padding:1rem 1rem 1rem 1rem;
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      box-shadow:var(--shadow);
    }
    .bubble::before{
      content:'';
      position:absolute;
      left:1.2rem;
      top:-7px;
      width:12px;height:12px;
      background:#fff;
      border-left:1px solid var(--line);
      border-top:1px solid var(--line);
      transform:rotate(45deg);
    }
    details{
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      box-shadow:0 6px 18px rgba(18,40,72,.05);
      overflow:hidden;
      transition:all .18s ease;
    }
    details[open]{
      border-color:rgba(31,111,235,.22);
      box-shadow:var(--shadow);
    }
    summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.05rem;
      font-weight:700;
      color:var(--ink);
    }
    summary::-webkit-details-marker{display:none}
    .toggle{
      flex:none;
      width:1.7rem;height:1.7rem;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:var(--panel-soft);
      color:var(--primary-strong);
      font-weight:800;
      border:1px solid rgba(31,111,235,.12);
    }
    details[open] .toggle{
      background:rgba(31,111,235,.11);
      border-color:rgba(31,111,235,.22);
    }
    details[open] .toggle::after{
      content:'−';
    }
    .toggle::after{
      content:'+';
      font-size:1rem;
      line-height:1;
    }
    .faq-body{
      padding:0 1.05rem 1rem 1.05rem;
      color:var(--muted);
    }
    .field{
      width:100%;
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      color:var(--ink);
      padding:.85rem .95rem;
      transition:all .18s ease;
      box-shadow:0 4px 14px rgba(18,40,72,.03);
    }
    .field:hover{border-color:#bdd0e1}
    .field::placeholder{color:#8aa0b4}
    .field:focus{
      border-color:rgba(31,111,235,.35);
      box-shadow:0 0 0 4px rgba(31,111,235,.08);
      outline:none;
    }
    .note-line{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
      justify-content:space-between;
      color:var(--muted);
      font-size:.92rem;
    }
    .footer{
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.72);
    }
    .foot-link{
      color:#46617a;
      transition:color .18s ease;
    }
    .foot-link:hover,.foot-link:focus-visible{
      color:var(--primary-strong);
      outline:none;
    }
    .page-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(31,111,235,.15), transparent);
    }
    .kbd{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:1.55rem;
      padding:0 .35rem;
      height:1.55rem;
      border-radius:6px;
      border:1px solid var(--line);
      background:#fff;
      color:#577087;
      font-size:.8rem;
      font-weight:700;
    }
    @media (max-width: 1023px){
      .stepbar::before{display:none}
    }
    @media (max-width: 767px){
      .section{padding:1.55rem 0}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
    }

/* roulang page: category1 */
:root{
      --bg: #f5f8fc;
      --bg-soft: #f9fbff;
      --card: #ffffff;
      --line: #d9e3f0;
      --line-strong: #c9d7ea;
      --text: #17324d;
      --muted: #64809a;
      --brand: #2f7ef7;
      --brand-2: #4fb2e8;
      --accent: #0ea5a8;
      --shadow: 0 12px 28px rgba(31, 71, 141, .08);
      --shadow-2: 0 14px 36px rgba(31, 71, 141, .12);
      --r: 10px;
      --r-sm: 8px;
      --space: 24px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(79,178,232,.12), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(47,126,247,.10), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f5f8fc 42%, #f4f7fb 100%);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
      line-height:1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a{ color: inherit; text-decoration: none; }
    img, svg{ display:block; max-width:100%; }
    button, input, select, textarea{
      font: inherit;
    }

    ::selection{ background: rgba(47,126,247,.16); color: var(--text); }

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

    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(245, 248, 252, .88);
      border-bottom: 1px solid rgba(217,227,240,.82);
    }

    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight: 800;
      letter-spacing: .01em;
      color: #17324d;
      line-height: 1;
    }
    .brand-dot{
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 0 0 4px rgba(47,126,247,.10);
      flex: 0 0 auto;
    }

    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 40px;
      padding: .55rem .95rem;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #355572;
      background: transparent;
      transition: .2s ease;
      font-size: .95rem;
      font-weight: 600;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color: var(--brand);
      background: #eef5ff;
      border-color: #d7e7ff;
      outline: none;
      transform: translateY(-1px);
    }
    .nav-link.active{
      color: #0f3b77;
      background: linear-gradient(180deg, #eff6ff 0%, #e6f0ff 100%);
      border-color: #cfe0ff;
      box-shadow: 0 8px 20px rgba(47,126,247,.08);
    }

    .stepbar{
      display:flex;
      gap: .65rem;
      overflow-x:auto;
      padding-bottom: .2rem;
      scrollbar-width: thin;
    }
    .stepbar::-webkit-scrollbar{ height: 8px; }
    .stepbar::-webkit-scrollbar-thumb{ background: #d5e1f1; border-radius: 999px; }
    .step-link{
      display:flex;
      align-items:center;
      gap: .75rem;
      min-width: 168px;
      padding: .8rem .95rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,.9);
      box-shadow: 0 8px 22px rgba(31,71,141,.04);
      transition: .2s ease;
    }
    .step-link:hover,
    .step-link:focus-visible{
      border-color: #b9cdf0;
      box-shadow: var(--shadow);
      transform: translateY(-1px);
      outline: none;
    }
    .step-link.is-current{
      background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
      border-color: #b9d0f7;
      box-shadow: 0 12px 24px rgba(47,126,247,.10);
    }
    .step-dot{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), #5fa7ff);
      color: white;
      font-weight: 700;
      font-size: .95rem;
      flex: 0 0 auto;
      box-shadow: 0 10px 18px rgba(47,126,247,.18);
    }

    .panel{
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(217,227,240,.95);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    .panel-strong{
      background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,252,255,.98) 100%);
      border: 1px solid rgba(207,222,242,.92);
      border-radius: 12px;
      box-shadow: var(--shadow-2);
    }

    .section{
      padding: 1.5rem 0;
    }

    .section-title{
      font-size: clamp(1.35rem, 1.15rem + .8vw, 2rem);
      line-height: 1.2;
      font-weight: 800;
      color: #17324d;
      margin: 0;
    }
    .section-desc{
      margin-top: .55rem;
      color: var(--muted);
      font-size: .98rem;
    }

    .hero-wrap{
      position: relative;
      overflow: hidden;
      padding: 1.35rem;
    }
    .hero-wrap::before{
      content:"";
      position:absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(47,126,247,.04) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(180deg, rgba(47,126,247,.04) 1px, transparent 1px) 0 0 / 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 78%);
      pointer-events:none;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding: .42rem .8rem;
      border-radius: 999px;
      background: #edf5ff;
      border: 1px solid #d9e7fb;
      color: #2762bf;
      font-size: .88rem;
      font-weight: 700;
    }
    .eyebrow .chip{
      width: .5rem;
      height: .5rem;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(14,165,168,.12);
    }

    .hero-title{
      font-size: clamp(2rem, 1.3rem + 2.2vw, 3.55rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -.01em;
      margin: .85rem 0 0;
      color: #12263d;
    }
    .hero-sub{
      margin-top: .9rem;
      color: #58718a;
      max-width: 56rem;
      font-size: 1.02rem;
    }

    .btn-primary,
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height: 46px;
      padding: .72rem 1.15rem;
      border-radius: 9px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: .2s ease;
      cursor: pointer;
      user-select:none;
    }
    .btn-primary{
      color: #fff;
      background: linear-gradient(135deg, var(--brand) 0%, #4a97ff 100%);
      box-shadow: 0 12px 24px rgba(47,126,247,.18);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      transform: translateY(-1px);
      box-shadow: 0 16px 28px rgba(47,126,247,.22);
      outline: none;
    }
    .btn-secondary{
      color: #28507b;
      background: #f5f9ff;
      border-color: #d7e4f4;
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      border-color: #bfd1ec;
      background: #edf5ff;
      transform: translateY(-1px);
      outline: none;
    }

    .mini-stats{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: .8rem;
    }
    .stat-card{
      padding: .95rem 1rem;
      border-radius: 10px;
      border: 1px solid #d9e3f0;
      background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
      box-shadow: 0 10px 18px rgba(31,71,141,.05);
    }
    .stat-k{
      display:block;
      font-size: 1.25rem;
      font-weight: 900;
      color: #143a68;
      line-height: 1.1;
    }
    .stat-l{
      display:block;
      margin-top: .22rem;
      color: var(--muted);
      font-size: .85rem;
    }

    .hero-stage{
      position: relative;
      padding: 1rem;
      border-radius: 12px;
      border: 1px solid #cfe0f7;
      background:
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: var(--shadow-2);
    }
    .hero-stage::after{
      content:"";
      position:absolute;
      inset: 14px;
      border-radius: 10px;
      border: 1px dashed rgba(79,178,232,.28);
      pointer-events:none;
    }

    .stage-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .8rem;
      margin-bottom: .85rem;
    }
    .stage-title{
      font-weight: 800;
      color: #123053;
      font-size: .98rem;
    }
    .stage-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding: .36rem .65rem;
      border-radius: 999px;
      background: #edf8f7;
      color: #177a7d;
      border: 1px solid #cfeeee;
      font-size: .82rem;
      font-weight: 700;
    }
    .stage-grid{
      display:grid;
      gap: .75rem;
    }
    .stage-item{
      padding: .8rem .85rem;
      border-radius: 10px;
      border: 1px solid #dce7f4;
      background: #fff;
      transition: .2s ease;
    }
    .stage-item:hover{
      box-shadow: 0 12px 24px rgba(31,71,141,.08);
      transform: translateY(-1px);
    }
    .stage-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .75rem;
      margin-bottom: .45rem;
    }
    .stage-name{
      font-weight: 700;
      color: #17324d;
      font-size: .94rem;
    }
    .stage-meta{
      color: var(--muted);
      font-size: .8rem;
      white-space: nowrap;
    }
    .bar{
      height: 8px;
      border-radius: 999px;
      background: #e8eff8;
      overflow:hidden;
    }
    .bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background: linear-gradient(90deg, #2f7ef7, #5eb1ff);
    }

    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap: .55rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding: .35rem .68rem;
      border-radius: 999px;
      background: #f4f8fd;
      border: 1px solid #d9e4f2;
      color: #43627f;
      font-size: .85rem;
      font-weight: 600;
    }
    .tag.is-hot{
      background: #edf8ff;
      border-color: #d5eaff;
      color: #1d67c8;
    }
    .tag.is-accent{
      background: #edfdfc;
      border-color: #d1f3ef;
      color: #14787a;
    }

    .module-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
    .info-card{
      padding: 1rem;
      border-radius: 12px;
      border: 1px solid #d9e3f0;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: 0 10px 22px rgba(31,71,141,.06);
      transition: .2s ease;
      height: 100%;
    }
    .info-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
      border-color: #c5d7ee;
    }
    .info-ico{
      width: 42px;
      height: 42px;
      display:grid;
      place-items:center;
      border-radius: 10px;
      background: linear-gradient(135deg, #edf5ff, #f6fbff);
      color: var(--brand);
      font-weight: 900;
      border: 1px solid #d8e6f7;
      margin-bottom: .8rem;
    }
    .info-title{
      font-size: 1.02rem;
      font-weight: 800;
      color: #17324d;
      margin: 0 0 .45rem;
    }
    .info-text{
      color: var(--muted);
      font-size: .92rem;
      margin: 0;
    }
    .info-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .8rem;
      margin-top: .95rem;
      color: #4d6a86;
      font-size: .84rem;
    }

    .compare-shell{
      display:grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 1rem;
      align-items:start;
    }
    .compare-box{
      padding: 1rem;
      border-radius: 12px;
      border: 1px solid #d9e3f0;
      background: #fff;
      box-shadow: 0 10px 24px rgba(31,71,141,.06);
    }
    .compare-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: .8rem;
      margin-bottom: .85rem;
    }
    .compare-name{
      font-size: 1.05rem;
      font-weight: 800;
      color: #17324d;
    }
    .compare-badge{
      padding: .3rem .6rem;
      border-radius: 999px;
      border: 1px solid #d8e5f5;
      color: #43627f;
      background: #f7fbff;
      font-size: .82rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .compare-list{
      display:grid;
      gap: .78rem;
    }
    .compare-item{
      padding: .8rem .85rem;
      border-radius: 10px;
      border: 1px solid #e2eaf5;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }
    .compare-item-top{
      display:flex;
      justify-content:space-between;
      gap: .8rem;
      margin-bottom: .45rem;
      font-size: .92rem;
      font-weight: 700;
      color: #17324d;
    }
    .score{
      color: #1f67c8;
      font-weight: 800;
    }

    .table-lite{
      width:100%;
      border-collapse: collapse;
      overflow:hidden;
      border-radius: 10px;
      border: 1px solid #d9e3f0;
      margin-top: .8rem;
    }
    .table-lite th,
    .table-lite td{
      padding: .8rem .85rem;
      border-bottom: 1px solid #e6edf6;
      text-align:left;
      font-size: .92rem;
      vertical-align: top;
    }
    .table-lite th{
      background: #f7fbff;
      color: #355572;
      font-weight: 800;
      width: 32%;
    }
    .table-lite td{
      color: #44637f;
    }

    .faq-list{
      display:grid;
      gap: .8rem;
    }
    .faq-item{
      border-radius: 12px;
      border: 1px solid #dbe5f2;
      background: #fff;
      box-shadow: 0 10px 20px rgba(31,71,141,.05);
      overflow:hidden;
      transition: .2s ease;
    }
    .faq-item.is-open{
      border-color: #bfd4f1;
      box-shadow: 0 14px 28px rgba(47,126,247,.08);
    }
    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: 1rem 1.05rem;
      background: transparent;
      border:0;
      color:#17324d;
      cursor:pointer;
      text-align:left;
      font-weight: 800;
    }
    .faq-q:hover,
    .faq-q:focus-visible{
      outline:none;
      background: #f7fbff;
    }
    .faq-mark{
      flex:0 0 auto;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 999px;
      display:grid;
      place-items:center;
      background: #edf5ff;
      color: #1f67c8;
      border: 1px solid #d8e7fb;
      font-size: 1rem;
      transition: .2s ease;
    }
    .faq-item.is-open .faq-mark{
      background: #eaf7f6;
      color: #157a7b;
      border-color: #d3eeec;
      transform: rotate(180deg);
    }
    .faq-a{
      display:none;
      padding: 0 1.05rem 1rem;
      color: var(--muted);
      font-size: .95rem;
    }
    .faq-item.is-open .faq-a{ display:block; }

    .form-shell{
      padding: 1.1rem;
      border-radius: 12px;
      border: 1px solid #d9e3f0;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: var(--shadow);
    }
    .field{
      display:grid;
      gap: .45rem;
    }
    .label{
      font-size: .88rem;
      font-weight: 700;
      color: #345571;
    }
    .input, .select{
      width:100%;
      min-height: 46px;
      padding: .72rem .92rem;
      border-radius: 9px;
      border: 1px solid #d7e1ee;
      background: #fff;
      color: #17324d;
      outline: none;
      transition: .2s ease;
    }
    .input:focus,
    .select:focus{
      border-color: #9dbef1;
      box-shadow: 0 0 0 4px rgba(47,126,247,.10);
    }
    .form-note{
      color: var(--muted);
      font-size: .88rem;
    }
    .result-box{
      padding: .85rem .95rem;
      border-radius: 10px;
      border: 1px dashed #cfe0f7;
      background: #f8fbff;
      color: #496885;
      font-size: .92rem;
      min-height: 52px;
    }

    .foot-link{
      color: #55718b;
      transition: .2s ease;
    }
    .foot-link:hover,
    .foot-link:focus-visible{
      color: var(--brand);
      outline:none;
    }

    .footer{
      border-top: 1px solid rgba(217,227,240,.9);
      background: rgba(255,255,255,.66);
    }

    .top-note{
      display:flex;
      align-items:center;
      gap:.5rem;
      color:#647f98;
      font-size:.86rem;
    }

    .anchor-space{
      scroll-margin-top: 120px;
    }

    @media (max-width: 1200px){
      .module-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mini-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .compare-shell{ grid-template-columns: 1fr; }
    }

    @media (max-width: 760px){
      .container{ width:min(100% - 20px, 1320px); }
      .hero-wrap{ padding: 1rem; }
      .module-grid{ grid-template-columns: 1fr; }
      .mini-stats{ grid-template-columns: 1fr 1fr; }
      .step-link{ min-width: 150px; }
      .section{ padding: 1.1rem 0; }
      .faq-q{ padding: .95rem 1rem; }
    }

    @media (max-width: 520px){
      .mini-stats{ grid-template-columns: 1fr; }
      .nav-link{ padding: .5rem .8rem; }
      .btn-primary, .btn-secondary{ width: 100%; }
    }