/* roulang page: index */
:root{
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --ink:#17233d;
      --muted:#64748b;
      --surface:#ffffff;
      --page:#f8fafc;
      --line:#dbe5f1;
      --soft:#eff6ff;
      --accent:#f59e0b;
      --success:#159570;
      --radius:16px;
      --shadow:0 14px 34px rgba(37, 70, 125, .09);
      --shadow-hover:0 20px 42px rgba(37, 70, 125, .15);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--page);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.75}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    :focus-visible{outline:3px solid rgba(37,99,235,.3);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 3px 18px rgba(30,64,110,.05);position:sticky;top:0;z-index:20}
    .nav-wrap{min-height:76px;display:flex;align-items:center;gap:26px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:0;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:15px}
    .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
    .nav-link{padding:9px 13px;border-radius:10px;color:#52627d;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:var(--primary);background:var(--soft)}
    .nav-tools{display:flex;gap:10px;align-items:center}
    .search{width:190px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;padding:0 11px;gap:7px}
    .search input{width:100%;border:0;outline:0;font-size:13px;color:var(--ink);background:transparent}
    .search svg{color:#94a3b8;flex:none}
    .btn{border:1px solid transparent;border-radius:11px;padding:10px 17px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 16px rgba(37,99,235,.18)}
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .btn-light{background:#fff;border-color:#cbd9eb;color:var(--primary)}
    .btn-light:hover{border-color:var(--primary);background:var(--soft)}
    .menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;color:var(--ink)}
    .hero{padding:76px 0 46px;background:#f5f9ff;border-bottom:1px solid #e3edf8}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
    .eyebrow,.section-kicker{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.08em;text-transform:uppercase}
    h1,h2,h3{margin:0;line-height:1.2;letter-spacing:0}
    h1{font-size:clamp(36px,5vw,58px);max-width:650px;font-weight:800}
    h2{font-size:32px;font-weight:800}
    h3{font-size:19px}
    .hero-copy{font-size:17px;color:#52627d;max-width:650px;margin:22px 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .notice{margin-top:25px;color:#718096;font-size:12px;display:flex;gap:8px;align-items:flex-start}
    .visual-stage{min-height:350px;border:1px solid #cfe0f4;border-radius:22px;background:#fff;box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden}
    .stage-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7eef8;padding-bottom:16px}
    .stage-title{font-weight:800;font-size:15px}
    .status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;background:#ecfdf5;color:var(--success);font-size:12px;font-weight:700}
    .status i{width:7px;height:7px;background:#22b37f;border-radius:50%}
    .stage-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:18px}
    .stage-tile{border:1px solid var(--line);border-radius:13px;min-height:120px;padding:14px;background:#f8fbff}
    .stage-tile.large{grid-row:span 2;min-height:252px;background:#eaf3ff;position:relative}
    .stage-tile.large:after{content:"";position:absolute;left:15px;right:15px;bottom:18px;height:7px;border-radius:9px;background:#bfdbfe;box-shadow:60px 0 0 #60a5fa}
    .tile-label{font-size:11px;color:#6b7d99}
    .tile-number{font-size:25px;font-weight:800;margin-top:9px}
    .stage-foot{display:flex;gap:7px;margin-top:15px;flex-wrap:wrap}
    .tag{font-size:11px;padding:4px 9px;border:1px solid #cbdcf1;border-radius:7px;color:#547093;background:#fff}
    section{padding:92px 0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}
    .section-head p{color:var(--muted);max-width:620px;margin:10px 0 0;font-size:15px}
    .metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:14px}
    .metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;box-shadow:0 8px 22px rgba(30,64,110,.05)}
    .metric-label{color:var(--muted);font-size:13px}.metric-value{font-size:28px;font-weight:800;margin:8px 0 4px}.metric-note{color:#73839a;font-size:12px}.metric-note strong{color:var(--success)}
    .matrix{display:grid;grid-template-columns:1.05fr .95fr 1fr;grid-template-rows:auto auto;gap:16px}
    .feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:.25s}
    .feature-card:hover,.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .feature-card.tall{grid-row:span 2;background:#f1f7ff}
    .card-index{color:var(--primary);font-size:12px;font-weight:800;margin-bottom:20px}
    .feature-card p,.content-card p{color:var(--muted);font-size:14px;margin:12px 0 20px}
    .card-link{color:var(--primary);font-size:13px;font-weight:800}
    .card-link:hover{text-decoration:underline}
    .content-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:20px}
    .content-list{display:grid;gap:12px}
    .content-card{display:grid;grid-template-columns:150px 1fr;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;transition:.25s}
    .thumb{aspect-ratio:16/9;border-radius:10px;background:#dbeafe;position:relative;overflow:hidden}
    .thumb:before{content:"";position:absolute;inset:18px 24px;border:1px solid #93c5fd;border-radius:8px}
    .content-card h3{font-size:17px}.meta{display:flex;justify-content:space-between;gap:10px;color:#8090a5;font-size:12px}.mini-tag{color:var(--primary);background:var(--soft);padding:3px 8px;border-radius:6px}
    .side-panel{background:#17233d;color:#fff;border-radius:16px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
    .side-panel p{color:#c3d0e5;font-size:14px}.side-panel .tag{background:transparent;color:#c8d9f0;border-color:#526783}
    .compare{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
    .compare-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid #edf2f7;font-size:14px}.compare-row:last-child{border-bottom:0}.compare-head{color:var(--muted);font-size:12px}.check{color:var(--success);font-weight:800}.bar{height:8px;background:#e8eef7;border-radius:8px;overflow:hidden}.bar span{display:block;height:100%;background:#60a5fa;border-radius:8px}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:54px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--primary);font-size:20px}details[open] summary:after{content:"−"}details p{color:var(--muted);font-size:14px;margin:12px 28px 0 0}
    .form-band{background:#eef5ff;padding:66px 0}.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}.form-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:700}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:0;color:var(--ink);background:#fff}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}.agree{font-size:12px;color:var(--muted);display:flex;gap:7px;margin:15px 0}.footer{border-top:1px solid var(--line);background:#fff;padding:42px 0 25px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}.footer h3{font-size:14px;margin-bottom:12px}.footer p,.footer a{font-size:13px;color:var(--muted)}.footer a:hover{color:var(--primary);text-decoration:underline}.footer-links{display:grid;gap:7px}.copyright{border-top:1px solid #edf2f7;margin-top:30px;padding-top:18px;font-size:12px;color:#8391a5}
    .modal{display:none;position:fixed;inset:0;background:rgba(23,35,61,.46);z-index:50;place-items:center;padding:20px}.modal.show{display:grid}.modal-box{max-width:470px;background:#fff;border-radius:18px;padding:30px;box-shadow:0 24px 70px rgba(18,35,66,.25)}.modal-box p{color:var(--muted);font-size:14px}.modal-actions{display:flex;gap:10px;margin-top:22px}
    @media(max-width:1024px){.hero-grid{gap:35px}.nav-links{gap:0}.search{width:150px}.matrix{grid-template-columns:1fr 1fr}.feature-card.tall{grid-row:auto}.content-layout,.faq-layout,.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:768px){.container{width:min(100% - 30px,620px)}.nav-wrap{min-height:66px}.brand{font-size:15px}.brand-mark{width:30px;height:30px}.nav-links,.nav-tools .search{display:none}.nav-tools{margin-left:auto}.menu-btn{display:block}.hero{padding:52px 0 35px}.hero-grid{grid-template-columns:1fr}.visual-stage{min-height:300px}.metrics{grid-template-columns:1fr 1fr;overflow:visible}.section-head{display:block}section{padding:64px 0}.matrix{grid-template-columns:1fr}.content-card{grid-template-columns:120px 1fr}.compare{padding:18px}.compare-row{grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:12px}.field-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
    @media(max-width:520px){h2{font-size:27px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.metrics{grid-template-columns:1fr}.content-card{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.stage-grid{grid-template-columns:1fr 1fr}.stage-tile.large{grid-row:span 2}.modal-actions{flex-direction:column}}

/* roulang page: category1 */
:root{
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --ink:#17233d;
      --muted:#64748b;
      --surface:#ffffff;
      --page:#f8fafc;
      --line:#dbe5f1;
      --soft:#eff6ff;
      --accent:#f59e0b;
      --success:#159570;
      --radius:16px;
      --shadow:0 14px 34px rgba(37,70,125,.09);
      --shadow-hover:0 20px 42px rgba(37,70,125,.15);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--page);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.75}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 3px 18px rgba(30,64,110,.05);position:sticky;top:0;z-index:20}
    .nav-wrap{min-height:76px;display:flex;align-items:center;gap:22px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:15px}
    .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
    .nav-link{padding:9px 13px;border-radius:10px;color:#52627d;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:var(--primary);background:var(--soft)}
    .nav-tools{display:flex;gap:10px;align-items:center}
    .search{width:170px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;padding:0 11px;gap:7px}
    .search input{width:100%;border:0;outline:0;font-size:13px;color:var(--ink);background:transparent}
    .search svg{color:#94a3b8;flex:none}
    .btn{border:1px solid transparent;border-radius:11px;padding:10px 17px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 16px rgba(37,99,235,.18)}
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .btn-light{background:#fff;border-color:#cbd9eb;color:var(--primary)}
    .btn-light:hover{border-color:var(--primary);background:var(--soft)}
    .menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;color:var(--ink)}
    .page-hero{padding:54px 0 42px;background:#f5f9ff;border-bottom:1px solid #e3edf8}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
    .eyebrow,.section-kicker{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.08em}
    h1{font-size:clamp(36px,4.5vw,54px);line-height:1.18;letter-spacing:0;font-weight:800;margin:13px 0}
    h2{font-size:30px;line-height:1.3;margin:0;font-weight:800}
    h3{font-size:19px;line-height:1.4;margin:0;font-weight:800}
    .hero-copy{font-size:16px;color:#52627d;max-width:650px;margin:18px 0 25px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-panel{background:#fff;border:1px solid #cfe0f4;border-radius:22px;padding:21px;box-shadow:var(--shadow)}
    .panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7eef8;padding-bottom:15px}
    .panel-title{font-size:15px;font-weight:800}
    .status{font-size:11px;color:var(--success);background:#eaf8f2;border-radius:7px;padding:4px 8px;font-weight:700}
    .topic-matrix{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:17px}
    .topic-block{min-height:116px;padding:17px;border:1px solid var(--line);border-radius:13px;background:#f8fbff}
    .topic-block.featured{grid-row:span 2;min-height:244px;background:#eaf3ff;border-color:#c4dbfa}
    .topic-block strong{display:block;font-size:16px;margin:9px 0 4px}
    .topic-block small{color:var(--muted);font-size:12px}
    .progress{height:7px;border-radius:8px;background:#dbeafe;margin-top:26px;overflow:hidden}
    .progress span{display:block;width:72%;height:100%;background:#60a5fa;border-radius:8px}
    section{padding:78px 0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:27px}
    .section-head p{color:var(--muted);max-width:620px;margin:9px 0 0;font-size:15px}
    .breadcrumb{display:flex;gap:8px;align-items:center;color:#7b8ba2;font-size:13px;margin-bottom:20px}
    .breadcrumb a:hover{color:var(--primary);text-decoration:underline}
    .filter-bar{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 22px rgba(37,70,125,.05)}
    .filter-input,.filter-select{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff;color:var(--ink);outline:0}
    .filter-input{flex:1;min-width:210px}
    .filter-input:focus,.filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}
    .filter-chip{border:1px solid #cbdcf1;border-radius:9px;padding:8px 12px;background:#fff;color:#547093;font-size:13px}
    .filter-chip:hover,.filter-chip.active{border-color:var(--primary);color:var(--primary);background:var(--soft)}
    .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin-top:28px}
    .content-list{display:grid;gap:15px}
    .content-card{display:grid;grid-template-columns:184px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:var(--shadow);transition:.25s}
    .content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .thumb{min-height:145px;border-radius:11px;background:#eaf3ff;position:relative;overflow:hidden;border:1px solid #d4e4f7}
    .thumb:before{content:"";position:absolute;inset:18px;border:1px solid #b8d2f5;border-radius:8px}
    .thumb:after{content:"";position:absolute;left:30px;right:30px;bottom:30px;height:7px;border-radius:8px;background:#93c5fd;box-shadow:0 -18px 0 #bfdbfe}
    .card-top,.card-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center}
    .card-top{margin-bottom:10px}
    .card-summary{color:var(--muted);font-size:14px;margin:9px 0 15px}
    .tag{font-size:11px;padding:4px 9px;border:1px solid #cbdcf1;border-radius:7px;color:#547093;background:#fff}
    .tag.primary{color:var(--primary);background:var(--soft);border-color:#bfdbfe}
    .meta{color:#8090a5;font-size:12px}
    .side-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;box-shadow:var(--shadow);margin-bottom:15px}
    .side-card.blue{background:#edf5ff;border-color:#cfe0f4}
    .side-card p{color:var(--muted);font-size:13px;margin:10px 0 17px}
    .side-list{display:grid;gap:11px}
    .side-list li{display:flex;gap:8px;color:#52627d;font-size:13px}
    .side-list li:before{content:"✓";color:var(--success);font-weight:800}
    .pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:31px}
    .page-btn{min-width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#52627d;font-size:13px}
    .page-btn:hover,.page-btn.current{background:var(--primary);color:#fff;border-color:var(--primary)}
    .faq-band{background:#fff;border-top:1px solid #edf2f7}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:55px}
    .faq-list{border-top:1px solid var(--line)}
    details{border-bottom:1px solid var(--line);padding:18px 0}
    summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:15px}
    summary:after{content:"+";color:var(--primary);font-size:21px;line-height:1}
    details[open] summary:after{content:"−"}
    details p{color:var(--muted);font-size:14px;margin:11px 30px 0 0}
    .notice{background:#fff8e8;border:1px solid #f5ddb0;border-radius:13px;padding:16px;color:#795b22;font-size:13px}
    .cta-band{background:#eef5ff;border-top:1px solid #dbeafe}
    .cta-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
    .form-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:27px;box-shadow:var(--shadow)}
    .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:6px;margin-bottom:14px}
    .field label{font-size:13px;font-weight:700}
    .field input,.field select,.field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:0;color:var(--ink);background:#fff}
    .field textarea{min-height:92px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}
    .checkline{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12px;margin:3px 0 16px}
    .footer{border-top:1px solid var(--line);background:#fff;padding:42px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
    .footer h3{font-size:14px;margin:0 0 12px}
    .footer p,.footer a{font-size:13px;color:var(--muted)}
    .footer-links{display:grid;gap:7px}
    .footer a:hover{color:var(--primary);text-decoration:underline}
    .copyright{border-top:1px solid #edf2f7;margin-top:30px;padding-top:18px;font-size:12px;color:#8391a5}
    .mobile-nav{display:none}
    :focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
    @media(max-width:1024px){
      .hero-grid,.cta-grid{grid-template-columns:1fr 1fr;gap:28px}
      .content-layout{grid-template-columns:1fr}
      .side-card-wrap{display:grid;grid-template-columns:1fr 1fr;gap:15px}
      .side-card{margin:0}
    }
    @media(max-width:768px){
      .nav-wrap{min-height:68px}
      .brand{font-size:15px}
      .brand-mark{width:31px;height:31px}
      .nav-links,.nav-tools .search,.nav-tools .btn{display:none}
      .menu-btn{display:block}
      .mobile-nav.open{display:grid;padding:10px 0 16px;border-top:1px solid var(--line)}
      .mobile-nav .nav-link{display:block}
      .hero-grid,.faq-layout,.cta-grid{grid-template-columns:1fr}
      .page-hero{padding:40px 0 34px}
      section{padding:56px 0}
      .section-head{display:block}
      .section-head .btn{margin-top:16px}
      .footer-grid{grid-template-columns:1fr 1fr}
      .side-card-wrap{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .container{width:min(100% - 28px,1180px)}
      h1{font-size:35px}
      h2{font-size:26px}
      .content-card{grid-template-columns:1fr}
      .thumb{min-height:130px}
      .field-grid{grid-template-columns:1fr}
      .hero-actions .btn{width:100%}
      .footer-grid{grid-template-columns:1fr}
      .filter-bar{align-items:stretch}
      .filter-input,.filter-select,.filter-chip,.filter-bar .btn{width:100%}
    }

/* roulang page: category2 */
:root{
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --ink:#17233d;
      --muted:#64748b;
      --surface:#ffffff;
      --page:#f8fafc;
      --line:#dbe5f1;
      --soft:#eff6ff;
      --accent:#f59e0b;
      --success:#159570;
      --radius:16px;
      --shadow:0 14px 34px rgba(37,70,125,.09);
      --shadow-hover:0 20px 42px rgba(37,70,125,.15);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--page);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.75}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 3px 18px rgba(30,64,110,.05);position:sticky;top:0;z-index:20}
    .nav-wrap{min-height:76px;display:flex;align-items:center;gap:24px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:15px}
    .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
    .nav-link{padding:9px 13px;border-radius:10px;color:#52627d;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:var(--primary);background:var(--soft)}
    .nav-tools{display:flex;gap:10px;align-items:center}
    .search{width:165px;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;padding:0 11px;gap:7px}
    .search input{width:100%;border:0;outline:0;font-size:13px;color:var(--ink);background:transparent}
    .search svg{color:#94a3b8;flex:none}
    .btn{border:1px solid transparent;border-radius:11px;padding:10px 17px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 16px rgba(37,99,235,.18)}
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
    .btn-light{background:#fff;border-color:#cbd9eb;color:var(--primary)}
    .btn-light:hover{border-color:var(--primary);background:var(--soft)}
    .menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;color:var(--ink)}
    .page-hero{padding:54px 0 58px;background:#f5f9ff;border-bottom:1px solid #e3edf8}
    .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
    .eyebrow,.section-kicker{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.08em}
    h1{font-size:clamp(36px,4vw,54px);line-height:1.18;letter-spacing:0;margin:13px 0 18px;font-weight:800}
    h2{font-size:clamp(27px,3vw,36px);line-height:1.25;margin:0;font-weight:800}
    h3{margin:0;font-size:18px;line-height:1.45}
    .hero-copy{font-size:16px;color:#52627d;max-width:650px;margin:0 0 25px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-panel{background:#fff;border:1px solid #cfe0f4;border-radius:22px;padding:22px;box-shadow:var(--shadow)}
    .panel-head,.result-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .panel-title{font-weight:800;font-size:15px}
    .status{font-size:11px;color:var(--success);background:#eaf8f2;padding:4px 9px;border-radius:7px;font-weight:700}
    .panel-search{margin:20px 0 16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#94a3b8;display:flex;gap:10px;align-items:center}
    .panel-rows{display:grid;gap:10px}
    .panel-row{display:grid;grid-template-columns:88px 1fr 58px;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
    .bar{height:8px;border-radius:10px;background:#e7effa;overflow:hidden}
    .bar i{display:block;height:100%;border-radius:10px;background:#60a5fa}
    .notice{margin-top:18px;color:#6b7d95;font-size:12px}
    section{padding:82px 0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}
    .section-head p{color:var(--muted);max-width:620px;margin:10px 0 0;font-size:15px}
    .feature-strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
    .feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.25s}
    .feature-card:hover,.result-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .thumb{height:132px;border-radius:12px;background:#eaf3ff;border:1px solid #cfe0f4;position:relative;overflow:hidden}
    .thumb:before{content:"";position:absolute;left:18px;right:18px;top:26px;height:48px;border-radius:8px;background:#bfdbfe}
    .thumb:after{content:"";position:absolute;left:28px;right:54px;bottom:23px;height:7px;border-radius:8px;background:#60a5fa;box-shadow:35px 0 0 #93c5fd}
    .card-meta{display:flex;justify-content:space-between;gap:8px;margin:15px 0 8px;color:#8291a5;font-size:12px}
    .tag{font-size:11px;padding:4px 9px;border:1px solid #cbdcf1;border-radius:7px;color:#547093;background:#fff}
    .feature-card p,.result-card p{color:var(--muted);font-size:13px;margin:9px 0 14px}
    .card-link{color:var(--primary);font-size:13px;font-weight:800}
    .card-link:hover{text-decoration:underline}
    .filter-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .filter-row{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:12px;align-items:center}
    .control{height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 13px;color:var(--ink);outline:0;width:100%}
    .control:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}
    .result-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:28px}
    .result-list{display:grid;gap:14px}
    .result-card{display:grid;grid-template-columns:170px 1fr;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 8px 22px rgba(37,70,125,.05);transition:.25s}
    .result-card .thumb{height:120px}
    .tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
    .mini-tag{color:var(--primary);background:var(--soft);padding:3px 8px;border-radius:6px;font-size:11px}
    .side-card{background:#17233d;color:#fff;border-radius:18px;padding:25px;box-shadow:var(--shadow)}
    .side-card p{color:#b9c9df;font-size:13px}
    .side-card .tag{background:transparent;color:#c8d9f0;border-color:#526783}
    .matrix{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
    .matrix-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
    .matrix-item strong{display:block;font-size:25px;color:var(--primary);margin:10px 0 4px}
    .matrix-item p{font-size:13px;color:var(--muted);margin:0}
    .compare{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:var(--shadow)}
    .compare-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid #edf2f7;font-size:14px}
    .compare-row:last-child{border-bottom:0}
    .compare-label{font-weight:700}
    .compare-good{color:var(--success);font-weight:700}
    .compare-muted{color:#94a3b8}
    .faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:55px}
    .faq-list{border-top:1px solid var(--line)}
    details{border-bottom:1px solid var(--line);background:#fff}
    summary{list-style:none;padding:17px 4px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;gap:18px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"＋";color:var(--primary);font-size:20px;line-height:1}
    details[open] summary:after{content:"−"}
    details p{margin:0;padding:0 30px 18px 4px;color:var(--muted);font-size:14px}
    .cta-band{background:#eef5ff;padding:66px 0}
    .cta-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
    .form-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:27px;box-shadow:var(--shadow)}
    .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:6px}
    .field.full{grid-column:1/-1}
    .field label{font-size:13px;font-weight:700}
    .field input,.field select,.field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:0;color:var(--ink);background:#fff;width:100%}
    .field textarea{min-height:90px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}
    .check{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin:15px 0}
    .check input{margin-top:5px;accent-color:var(--primary)}
    .footer{border-top:1px solid var(--line);background:#fff;padding:42px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
    .footer h3{font-size:14px;margin:0 0 12px}
    .footer p,.footer a{font-size:13px;color:var(--muted)}
    .footer a:hover{color:var(--primary);text-decoration:underline}
    .footer-links{display:grid;gap:7px}
    .copyright{border-top:1px solid #edf2f7;margin-top:30px;padding-top:18px;font-size:12px;color:#8391a5}
    .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(23,35,61,.42);z-index:50;place-items:center;padding:20px}
    .modal-backdrop.show{display:grid}
    .modal{background:#fff;border-radius:18px;padding:28px;max-width:430px;box-shadow:0 25px 70px rgba(23,35,61,.22)}
    .modal p{font-size:14px;color:var(--muted)}
    @media(max-width:1024px){
      .hero-grid,.result-layout,.cta-grid{grid-template-columns:1fr 1fr;gap:28px}
      .feature-strip{grid-template-columns:1fr 1fr}
      .feature-card:first-child{grid-column:1/-1}
      .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
    }
    @media(max-width:768px){
      .container{width:min(100% - 32px,600px)}
      .nav-wrap{min-height:68px}
      .brand{font-size:15px}
      .brand-mark{width:30px;height:30px}
      .nav-tools .search,.nav-tools .btn{display:none}
      .menu-btn{display:block}
      .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px;box-shadow:0 12px 22px rgba(30,64,110,.08);flex-direction:column;align-items:stretch}
      .nav-links.open{display:flex}
      .nav-link{display:block}
      .hero-grid,.result-layout,.cta-grid,.faq-layout{grid-template-columns:1fr}
      .page-hero{padding:42px 0}
      section{padding:60px 0}
      .filter-row{grid-template-columns:1fr 1fr}
      .filter-row .btn{grid-column:1/-1}
      .matrix{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:520px){
      .feature-strip,.matrix,.field-grid{grid-template-columns:1fr}
      .feature-card:first-child{grid-column:auto}
      .result-card{grid-template-columns:1fr}
      .result-card .thumb{height:150px}
      .filter-row{grid-template-columns:1fr}
      .compare{overflow-x:auto}
      .compare-row{min-width:520px}
      .footer-grid{grid-template-columns:1fr}
      h1{font-size:36px}
    }