/* roulang page: index */
:root{
      --primary:#16A34A;
      --primary-dark:#0F7A37;
      --accent:#22C55E;
      --mint:#DDFBEA;
      --mint-soft:#F0FFF6;
      --ink:#17211B;
      --deep:#123326;
      --muted:#66756C;
      --line:#DCE8E1;
      --soft:#F6F8F7;
      --white:#FFFFFF;
      --warning:#FFF8E6;
      --radius-sm:14px;
      --radius-md:20px;
      --radius-lg:28px;
      --radius-xl:34px;
      --shadow:0 16px 40px rgba(18,51,38,.08);
      --shadow-strong:0 22px 60px rgba(18,51,38,.14);
      --focus:0 0 0 .24rem rgba(34,197,94,.22);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(34,197,94,.12), transparent 30%),
        linear-gradient(180deg,#FFFFFF 0%,#F8FBF9 52%,#FFFFFF 100%);
      line-height:1.75;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--primary-dark)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:var(--mint);color:var(--deep)}
    .site-shell{overflow:hidden}
    .container{max-width:1180px}
    .section{padding:78px 0}
    .section-tight{padding:56px 0}
    .section-head{max-width:760px;margin-bottom:30px}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border:1px solid rgba(22,163,74,.18);
      background:var(--mint-soft);
      color:var(--primary-dark);
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      margin-bottom:14px;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(34,197,94,.15);
    }
    h1,h2,h3,h4{color:var(--deep);font-weight:800;letter-spacing:-.02em}
    h1{font-size:clamp(2rem,4vw,2.75rem);line-height:1.18;margin:0 0 18px}
    h2{font-size:clamp(1.7rem,3vw,2.15rem);line-height:1.25;margin:0 0 14px}
    h3{font-size:1.18rem;margin:0 0 10px}
    p{margin:0;color:var(--muted)}
    .btn{
      border-radius:16px;
      padding:12px 20px;
      font-weight:800;
      border:0;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
    }
    .btn:focus-visible,.nav-link:focus-visible,.form-control:focus{box-shadow:var(--focus);outline:0}
    .btn-primary-green{
      background:linear-gradient(135deg,var(--primary),var(--accent));
      color:#fff;
      box-shadow:0 12px 28px rgba(22,163,74,.24);
    }
    .btn-primary-green:hover{
      color:#fff;
      background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      transform:translateY(-3px);
      box-shadow:0 18px 38px rgba(22,163,74,.28);
    }
    .btn-soft-green{
      background:var(--mint-soft);
      color:var(--primary-dark);
      border:1px solid rgba(22,163,74,.18);
    }
    .btn-soft-green:hover{
      background:var(--mint);
      transform:translateY(-2px);
      color:var(--primary-dark);
    }
    .pill-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 11px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      white-space:nowrap;
    }
    .pill-badge.success{background:var(--mint);border-color:rgba(22,163,74,.2);color:var(--primary-dark)}
    .site-header{
      position:fixed;
      top:18px;
      left:0;
      right:0;
      z-index:1000;
      pointer-events:none;
    }
    .nav-capsule{
      pointer-events:auto;
      border:1px solid rgba(220,232,225,.78);
      background:rgba(255,255,255,.86);
      backdrop-filter:blur(18px);
      border-radius:999px;
      box-shadow:0 14px 36px rgba(18,51,38,.08);
      padding:9px 10px 9px 16px;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--deep);
      font-weight:900;
      letter-spacing:-.03em;
      max-width:330px;
    }
    .brand-mark{
      width:34px;
      height:34px;
      border-radius:13px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      box-shadow:0 10px 22px rgba(22,163,74,.22);
      flex:0 0 auto;
    }
    .brand-text{
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      font-size:15px;
    }
    .navbar-toggler{
      border:0;
      border-radius:14px;
      background:var(--mint-soft);
      padding:9px 11px;
    }
    .navbar-toggler:focus{box-shadow:var(--focus)}
    .nav-menu{gap:6px}
    .nav-link{
      color:var(--muted);
      font-size:14px;
      font-weight:800;
      border-radius:999px;
      padding:9px 14px!important;
      position:relative;
    }
    .nav-link:hover{background:var(--mint-soft);color:var(--primary-dark)}
    .nav-link.active{
      color:var(--primary-dark);
      background:var(--mint);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:4px;
      width:16px;
      height:3px;
      border-radius:99px;
      background:var(--primary);
    }
    .nav-cta{padding:9px 16px;font-size:14px;border-radius:999px}
    .hero{
      padding:132px 0 70px;
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(18,51,38,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,51,38,.045) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
      pointer-events:none;
    }
    .hero-board{
      position:relative;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg,rgba(240,255,246,.96),rgba(255,255,255,.98) 55%,rgba(221,251,234,.88));
      border:1px solid rgba(22,163,74,.16);
      box-shadow:var(--shadow-strong);
      padding:30px;
      overflow:hidden;
    }
    .hero-board::after{
      content:"";
      position:absolute;
      right:-90px;
      top:-110px;
      width:270px;
      height:270px;
      border-radius:50%;
      background:rgba(34,197,94,.16);
      filter:blur(4px);
    }
    .hero-content{position:relative;z-index:2}
    .age-strip{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(22,163,74,.14);
      color:var(--deep);
      font-size:13px;
      font-weight:700;
      margin:18px 0 24px;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
    .hero-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .coupon-wall{
      position:relative;
      z-index:2;
      min-height:430px;
      display:grid;
      align-items:center;
      gap:16px;
    }
    .coupon-main{
      position:relative;
      border-radius:30px;
      padding:28px;
      color:var(--deep);
      background:
        radial-gradient(circle at 18% 22%, rgba(34,197,94,.18), transparent 28%),
        linear-gradient(135deg,#fff,#EFFFF5);
      border:1px solid rgba(22,163,74,.22);
      box-shadow:0 24px 52px rgba(18,51,38,.13);
      overflow:hidden;
    }
    .coupon-main::before,.coupon-main::after{
      content:"";
      position:absolute;
      top:50%;
      width:28px;
      height:28px;
      border-radius:50%;
      background:#F8FBF9;
      border:1px solid rgba(22,163,74,.16);
      transform:translateY(-50%);
    }
    .coupon-main::before{left:-14px}
    .coupon-main::after{right:-14px}
    .coupon-label{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      font-size:13px;
      font-weight:800;
      color:var(--primary-dark);
      margin-bottom:18px;
    }
    .coupon-value{
      font-size:2.35rem;
      line-height:1.1;
      font-weight:950;
      letter-spacing:-.05em;
      color:var(--deep);
      margin-bottom:10px;
    }
    .coupon-main p{font-size:15px;color:#405247}
    .coupon-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .mini-coupon,.status-panel{
      border-radius:22px;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(220,232,225,.86);
      padding:16px;
      box-shadow:var(--shadow);
    }
    .mini-coupon strong,.status-panel strong{display:block;color:var(--deep);font-size:15px;margin-bottom:4px}
    .mini-coupon span,.status-panel span{font-size:13px;color:var(--muted)}
    .toolbar{
      display:flex;
      gap:7px;
      margin-bottom:14px;
    }
    .toolbar i{
      width:9px;
      height:9px;
      border-radius:50%;
      background:#BED8C8;
    }
    .check-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:11px 0;
      border-top:1px solid rgba(220,232,225,.75);
      font-size:14px;
      color:var(--muted);
    }
    .check-row:first-of-type{border-top:0}
    .check-icon{
      width:24px;
      height:24px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:var(--mint);
      color:var(--primary-dark);
      font-weight:900;
      flex:0 0 auto;
    }
    .commission-strip{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:18px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .commission-item{
      padding:16px;
      border-radius:22px;
      background:var(--soft);
      border:1px solid transparent;
      transition:.22s ease;
    }
    .commission-item:hover{
      transform:translateY(-3px);
      border-color:rgba(22,163,74,.2);
      background:#fff;
      box-shadow:var(--shadow);
    }
    .commission-item b{display:block;font-size:1.35rem;color:var(--primary-dark);line-height:1.2}
    .commission-item span{font-size:13px;color:var(--muted)}
    .benefit-wrap{
      overflow-x:auto;
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow);
    }
    .benefit-table{
      min-width:820px;
      margin:0;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
    }
    .benefit-table th,.benefit-table td{
      padding:18px;
      vertical-align:middle;
      border-bottom:1px solid var(--line);
      color:var(--muted);
      font-size:15px;
    }
    .benefit-table th{
      color:var(--deep);
      background:var(--soft);
      font-weight:900;
    }
    .benefit-table tr:last-child td{border-bottom:0}
    .benefit-table .recommended{
      background:linear-gradient(180deg,var(--mint-soft),#fff);
      box-shadow:inset 3px 0 0 var(--primary), inset -3px 0 0 rgba(22,163,74,.1);
    }
    .table-tip{
      font-size:13px;
      color:var(--muted);
      margin-top:12px;
    }
    .level-ladder{
      position:relative;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      align-items:start;
    }
    .level-card{
      position:relative;
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      transition:.22s ease;
    }
    .level-card:nth-child(2){margin-top:28px}
    .level-card:nth-child(3){margin-top:56px}
    .level-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}
    .level-no{
      display:inline-grid;
      place-items:center;
      width:46px;
      height:46px;
      border-radius:17px;
      background:var(--mint);
      color:var(--primary-dark);
      font-weight:950;
      margin-bottom:18px;
    }
    .materials-section{
      background:linear-gradient(180deg,var(--soft),#fff);
      border-top:1px solid rgba(220,232,225,.72);
      border-bottom:1px solid rgba(220,232,225,.72);
    }
    .material-stage{
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:18px;
    }
    .preview-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr;
      gap:16px;
    }
    .preview-card{
      position:relative;
      min-height:190px;
      border-radius:24px;
      padding:20px;
      overflow:hidden;
      background:
        radial-gradient(circle at 80% 10%, rgba(34,197,94,.18), transparent 32%),
        linear-gradient(135deg,#fff,var(--mint-soft));
      border:1px solid rgba(22,163,74,.15);
      transition:.22s ease;
    }
    .preview-card.large{grid-row:span 2;min-height:398px}
    .preview-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .blur-art{
      position:absolute;
      right:18px;
      bottom:18px;
      width:130px;
      height:78px;
      border-radius:24px;
      background:linear-gradient(135deg,rgba(22,163,74,.22),rgba(221,251,234,.7));
      filter:blur(.2px);
      opacity:.9;
    }
    .progress{
      height:9px;
      background:#EAF3EE;
      border-radius:999px;
      overflow:hidden;
      margin-top:16px;
    }
    .progress-bar{background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px}
    .material-list{
      display:grid;
      gap:13px;
    }
    .material-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:15px;
      border-radius:20px;
      background:#fff;
      border:1px solid var(--line);
      transition:.22s ease;
    }
    .material-row:hover{
      transform:translateX(4px);
      border-color:rgba(22,163,74,.25);
      box-shadow:var(--shadow);
    }
    .material-row p{font-size:14px}
    .news-card{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:20px;
      height:100%;
    }
    .news-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
    .news-list a{
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:14px 0;
      border-bottom:1px dashed var(--line);
      color:var(--deep);
      font-weight:800;
    }
    .news-list li:last-child a{border-bottom:0}
    .news-list small{color:var(--muted);font-weight:700;white-space:nowrap}
    .recommend-box{
      border-radius:24px;
      background:linear-gradient(135deg,var(--deep),#1D4D38);
      color:#fff;
      padding:24px;
      height:100%;
      position:relative;
      overflow:hidden;
    }
    .recommend-box::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-72px;
      bottom:-72px;
      border-radius:50%;
      background:rgba(34,197,94,.22);
    }
    .recommend-box h3,.recommend-box p{color:#fff}
    .recommend-box p{opacity:.78}
    .security-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .security-card{
      padding:20px;
      border-radius:24px;
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow);
      transition:.22s ease;
    }
    .security-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong)}
    .icon-circle{
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:14px;
      background:var(--mint);
      color:var(--primary-dark);
      font-size:21px;
      font-weight:900;
    }
    .catalog-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .catalog-card{
      padding:22px;
      border-radius:26px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      transition:.22s ease;
    }
    .catalog-card:hover{transform:translateY(-4px);border-color:rgba(22,163,74,.28);box-shadow:var(--shadow-strong)}
    .catalog-meta{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      margin-top:18px;
      padding-top:16px;
      border-top:1px solid var(--line);
    }
    .faq-wrap .accordion-item{
      border:1px solid var(--line);
      border-radius:22px!important;
      overflow:hidden;
      margin-bottom:12px;
      box-shadow:0 12px 28px rgba(18,51,38,.05);
    }
    .faq-wrap .accordion-button{
      color:var(--deep);
      font-weight:900;
      padding:18px 20px;
      background:#fff;
      box-shadow:none;
    }
    .faq-wrap .accordion-button:not(.collapsed){
      background:var(--mint-soft);
      color:var(--primary-dark);
      box-shadow:inset 0 -1px 0 rgba(22,163,74,.12);
    }
    .faq-wrap .accordion-button:focus{box-shadow:var(--focus);border-color:rgba(22,163,74,.2)}
    .faq-wrap .accordion-body{color:var(--muted);padding:18px 20px 22px}
    .join-panel{
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 10% 10%, rgba(34,197,94,.18), transparent 28%),
        linear-gradient(135deg,var(--mint-soft),#fff 60%,var(--mint));
      border:1px solid rgba(22,163,74,.18);
      box-shadow:var(--shadow-strong);
      padding:34px;
      position:relative;
      overflow:hidden;
    }
    .join-panel::after{
      content:"";
      position:absolute;
      right:-70px;
      top:-70px;
      width:210px;
      height:210px;
      border-radius:50%;
      background:rgba(34,197,94,.14);
    }
    .join-form{
      position:relative;
      z-index:2;
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(220,232,225,.88);
    }
    .form-control{
      border-radius:16px;
      border:1px solid var(--line);
      min-height:50px;
      color:var(--deep);
    }
    .form-control:focus{border-color:rgba(22,163,74,.58)}
    .trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .site-footer{
      padding:44px 0 32px;
      background:#10251B;
      color:rgba(255,255,255,.78);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      color:#fff;
      font-weight:950;
      margin-bottom:12px;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    .footer-links a{
      color:rgba(255,255,255,.76);
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
    }
    .footer-links a:hover{color:#fff;background:rgba(34,197,94,.2)}
    .copyright{
      margin-top:22px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.1);
      font-size:13px;
      color:rgba(255,255,255,.58);
    }
    .modal-content{
      border:0;
      border-radius:28px;
      box-shadow:var(--shadow-strong);
    }
    .modal-header,.modal-footer{border-color:var(--line)}
    @media (max-width:1199px){
      .commission-strip{grid-template-columns:repeat(2,1fr)}
      .preview-grid{grid-template-columns:1fr 1fr}
      .preview-card.large{grid-row:auto;grid-column:span 2;min-height:250px}
      .security-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:991px){
      .site-header{top:10px}
      .nav-capsule{border-radius:26px;padding:10px 12px}
      .navbar-collapse{
        margin-top:12px;
        padding:12px;
        border-radius:22px;
        background:rgba(255,255,255,.96);
        border:1px solid var(--line);
      }
      .nav-menu{align-items:stretch!important}
      .nav-link{padding:11px 13px!important}
      .nav-cta{width:100%;margin-top:8px}
      .hero{padding-top:108px}
      .coupon-wall{min-height:auto;margin-top:28px}
      .level-ladder{grid-template-columns:1fr}
      .level-card:nth-child(2),.level-card:nth-child(3){margin-top:0}
      .catalog-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start;margin-top:18px}
    }
    @media (max-width:767px){
      .section{padding:58px 0}
      .section-tight{padding:42px 0}
      .hero-board{padding:22px;border-radius:28px}
      .hero-actions .btn{width:100%}
      .coupon-grid{grid-template-columns:1fr}
      .commission-strip{grid-template-columns:1fr}
      .preview-grid{grid-template-columns:1fr}
      .preview-card.large{grid-column:auto}
      .security-grid{grid-template-columns:1fr}
      .join-panel{padding:24px}
      .news-list a{display:block}
      .news-list small{display:block;margin-top:4px}
    }
    @media (max-width:575px){
      .brand-text{max-width:190px;font-size:14px}
      .hero{padding-top:96px}
      .coupon-value{font-size:1.9rem}
      .pill-badge{font-size:12px}
      .section-head{margin-bottom:22px}
      .benefit-table{min-width:760px}
    }

/* roulang page: category1 */
:root {
      --green: #16A34A;
      --green-dark: #0E7A36;
      --green-soft: #DDFBEA;
      --green-pale: #F0FFF6;
      --mint: #22C55E;
      --ink: #17211B;
      --deep: #123326;
      --muted: #65726B;
      --weak: #8B9890;
      --line: #DCE8E0;
      --bg: #F6F8F7;
      --white: #FFFFFF;
      --warning: #FFF7E6;
      --radius-sm: 14px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --radius-xl: 34px;
      --shadow: 0 16px 40px rgba(18, 51, 38, .08);
      --shadow-hover: 0 22px 54px rgba(18, 51, 38, .13);
      --ring: 0 0 0 .25rem rgba(34, 197, 94, .18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      color: var(--ink);
      line-height: 1.75;
      background:
        radial-gradient(circle at 12% 8%, rgba(34, 197, 94, .12), transparent 32%),
        linear-gradient(180deg, #F9FFFB 0%, #FFFFFF 36%, #F6F8F7 100%);
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }

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

    button,
    input {
      font: inherit;
    }

    ::selection {
      background: rgba(34, 197, 94, .18);
      color: var(--deep);
    }

    .container {
      max-width: 1180px;
    }

    .site-header {
      position: sticky;
      top: 14px;
      z-index: 50;
      padding: 12px 0;
    }

    .nav-capsule {
      border: 1px solid rgba(22, 163, 74, .16);
      border-radius: 999px;
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 14px 36px rgba(18, 51, 38, .08);
      backdrop-filter: blur(18px);
      padding: 9px 10px 9px 18px;
    }

    .navbar {
      padding: 0;
    }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-weight: 800;
      color: var(--deep);
      letter-spacing: -.02em;
    }

    .brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: var(--white);
      font-weight: 900;
      background: linear-gradient(135deg, var(--green), var(--mint));
      box-shadow: 0 10px 26px rgba(22, 163, 74, .28);
    }

    .brand-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .navbar-toggler {
      border: 0;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: var(--green-pale);
    }

    .navbar-toggler:focus {
      box-shadow: var(--ring);
    }

    .navbar-toggler-icon {
      width: 1.25em;
      height: 1.25em;
      background-image: none;
      position: relative;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
      content: "";
      position: absolute;
      left: 2px;
      right: 2px;
      height: 2px;
      border-radius: 999px;
      background: var(--deep);
    }

    .navbar-toggler-icon::before {
      top: 5px;
      box-shadow: 0 6px 0 var(--deep);
    }

    .navbar-toggler-icon::after {
      top: 17px;
    }

    .nav-menu {
      gap: 4px;
    }

    .nav-link {
      position: relative;
      border-radius: 999px;
      padding: 10px 15px !important;
      color: var(--muted);
      font-size: 15px;
      font-weight: 700;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--green-dark);
      background: var(--green-pale);
    }

    .nav-link.active {
      color: var(--green-dark) !important;
      background: var(--green-soft);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 14px;
      bottom: 7px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--green);
    }

    .btn {
      border-radius: 16px;
      padding: 12px 18px;
      font-weight: 800;
      border-width: 1px;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .btn-primary-green {
      color: var(--white);
      background: linear-gradient(135deg, var(--green), var(--mint));
      border-color: transparent;
      box-shadow: 0 12px 28px rgba(22, 163, 74, .24);
    }

    .btn-primary-green:hover,
    .btn-primary-green:focus {
      color: var(--white);
      background: linear-gradient(135deg, var(--green-dark), var(--green));
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(22, 163, 74, .32);
    }

    .btn-outline-green {
      color: var(--green-dark);
      background: var(--white);
      border-color: rgba(22, 163, 74, .28);
    }

    .btn-outline-green:hover,
    .btn-outline-green:focus {
      color: var(--green-dark);
      background: var(--green-pale);
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .nav-cta {
      padding: 10px 16px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .hero {
      padding: 58px 0 54px;
      position: relative;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(22, 163, 74, .18);
      border-radius: 999px;
      padding: 7px 12px;
      color: var(--green-dark);
      background: rgba(221, 251, 234, .72);
      font-size: 13px;
      font-weight: 800;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
    }

    h1,
    h2,
    h3 {
      color: var(--deep);
      line-height: 1.22;
      letter-spacing: -.035em;
    }

    h1 {
      margin: 20px 0 18px;
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 900;
    }

    h2 {
      margin: 0;
      font-size: clamp(26px, 3vw, 32px);
      font-weight: 900;
    }

    h3 {
      font-size: 20px;
      font-weight: 850;
    }

    .lead {
      color: var(--muted);
      font-size: 17px;
      max-width: 680px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .notice-strip {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-top: 22px;
      border: 1px solid rgba(22, 163, 74, .16);
      border-radius: 18px;
      padding: 12px 14px;
      color: var(--muted);
      background: rgba(255, 255, 255, .72);
      font-size: 14px;
    }

    .notice-strip strong {
      color: var(--deep);
    }

    .stage-panel {
      position: relative;
      border: 1px solid rgba(22, 163, 74, .18);
      border-radius: var(--radius-xl);
      padding: 18px;
      background: var(--white);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .stage-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(22, 163, 74, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 163, 74, .05) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
      pointer-events: none;
    }

    .panel-inner {
      position: relative;
      border-radius: 26px;
      background: linear-gradient(180deg, #FFFFFF 0%, #F7FFF9 100%);
      border: 1px solid var(--line);
      padding: 18px;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .dots {
      display: inline-flex;
      gap: 6px;
    }

    .dots i {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #BDEECD;
    }

    .dots i:nth-child(2) {
      background: #8DE6AD;
    }

    .dots i:nth-child(3) {
      background: var(--green);
    }

    .status-badge,
    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 6px 10px;
      color: var(--green-dark);
      background: var(--green-soft);
      font-size: 12px;
      font-weight: 900;
    }

    .option-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 16px;
      background: rgba(255, 255, 255, .9);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .option-card:hover {
      transform: translateY(-3px);
      border-color: rgba(22, 163, 74, .34);
      box-shadow: var(--shadow);
    }

    .option-card.recommended {
      border-color: rgba(22, 163, 74, .55);
      background: linear-gradient(180deg, #F0FFF6 0%, #FFFFFF 100%);
      box-shadow: 0 16px 36px rgba(22, 163, 74, .14);
    }

    .option-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .option-title {
      font-weight: 900;
      color: var(--deep);
    }

    .price-line {
      display: flex;
      align-items: end;
      gap: 6px;
      color: var(--green-dark);
      font-weight: 900;
      margin: 8px 0 12px;
    }

    .price-line span {
      font-size: 28px;
      line-height: 1;
    }

    .check-list {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: 14px;
    }

    .check-list li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .check-list li::before {
      content: "✓";
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: var(--white);
      background: var(--green);
      font-size: 12px;
      font-weight: 900;
      margin-top: 2px;
    }

    .section {
      padding: 58px 0;
    }

    .section-title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }

    .section-title p {
      margin: 10px 0 0;
      max-width: 680px;
      color: var(--muted);
    }

    .filter-box {
      border: 1px solid rgba(22, 163, 74, .16);
      border-radius: var(--radius-lg);
      padding: 18px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .filter-row {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .chip-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .chip {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--muted);
      background: #fff;
      font-size: 14px;
      font-weight: 800;
      cursor: default;
    }

    .chip.active {
      color: var(--green-dark);
      border-color: rgba(22, 163, 74, .32);
      background: var(--green-soft);
    }

    .search-field {
      min-width: 240px;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 11px 14px;
      color: var(--deep);
      background: #fff;
      outline: none;
      transition: box-shadow .2s ease, border-color .2s ease;
    }

    .search-field:focus {
      border-color: rgba(22, 163, 74, .58);
      box-shadow: var(--ring);
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .entry-card {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 16px;
      border: 1px solid rgba(22, 163, 74, .15);
      border-radius: 24px;
      padding: 16px;
      background: var(--white);
      box-shadow: 0 10px 28px rgba(18, 51, 38, .06);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .entry-card:hover {
      transform: translateY(-3px);
      border-color: rgba(22, 163, 74, .34);
      box-shadow: var(--shadow-hover);
    }

    .abstract-cover {
      position: relative;
      min-height: 112px;
      border-radius: 20px;
      background:
        radial-gradient(circle at 30% 25%, rgba(34, 197, 94, .48), transparent 28%),
        radial-gradient(circle at 72% 74%, rgba(221, 251, 234, .9), transparent 32%),
        linear-gradient(145deg, #E9FFF2, #FFFFFF);
      overflow: hidden;
    }

    .abstract-cover::after {
      content: "锁";
      position: absolute;
      inset: auto 12px 12px auto;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--green-dark);
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(22, 163, 74, .2);
      font-size: 14px;
      font-weight: 900;
    }

    .entry-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .entry-card h3 {
      margin: 0 0 8px;
    }

    .entry-card p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .progress-line {
      height: 8px;
      border-radius: 999px;
      background: #EAF2ED;
      overflow: hidden;
      margin: 12px 0 10px;
    }

    .progress-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--mint));
    }

    .card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
    }

    .time-note {
      color: var(--weak);
      font-size: 13px;
      font-weight: 700;
    }

    .compare-wrap {
      overflow-x: auto;
      border: 1px solid rgba(22, 163, 74, .16);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .compare-table {
      min-width: 720px;
      margin: 0;
      border-collapse: separate;
      border-spacing: 0;
    }

    .compare-table th,
    .compare-table td {
      padding: 18px 20px;
      vertical-align: middle;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }

    .compare-table th {
      color: var(--deep);
      font-weight: 900;
      background: #FBFFFC;
    }

    .compare-table tr:last-child td {
      border-bottom: 0;
    }

    .compare-table .rec {
      background: var(--green-pale);
      color: var(--green-dark);
      font-weight: 900;
    }

    .level-stack {
      display: grid;
      gap: 16px;
    }

    .level-item {
      display: grid;
      grid-template-columns: 78px 1fr auto;
      gap: 18px;
      align-items: center;
      border: 1px solid rgba(22, 163, 74, .16);
      border-radius: 24px;
      padding: 18px;
      background: var(--white);
      box-shadow: 0 10px 26px rgba(18, 51, 38, .05);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .level-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .level-no {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--green-dark);
      background: var(--green-soft);
      font-weight: 950;
      font-size: 20px;
    }

    .level-item p {
      margin: 5px 0 0;
      color: var(--muted);
    }

    .side-panel {
      position: sticky;
      top: 112px;
      border: 1px solid rgba(22, 163, 74, .18);
      border-radius: var(--radius-lg);
      padding: 20px;
      background: linear-gradient(180deg, #FFFFFF, #F4FFF8);
      box-shadow: var(--shadow);
    }

    .side-panel h3 {
      margin-bottom: 12px;
    }

    .side-panel p {
      color: var(--muted);
      margin-bottom: 16px;
    }

    .metric-row {
      display: grid;
      gap: 10px;
      margin: 18px 0;
    }

    .metric {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 11px 12px;
      background: rgba(255, 255, 255, .75);
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .metric strong {
      color: var(--green-dark);
    }

    .faq .accordion {
      display: grid;
      gap: 12px;
    }

    .faq .accordion-item {
      border: 1px solid rgba(22, 163, 74, .18);
      border-radius: 20px !important;
      overflow: hidden;
      background: var(--white);
      box-shadow: 0 8px 24px rgba(18, 51, 38, .05);
    }

    .faq .accordion-button {
      padding: 18px 20px;
      color: var(--deep);
      background: var(--white);
      font-weight: 900;
      border: 0;
      box-shadow: none;
    }

    .faq .accordion-button:not(.collapsed) {
      color: var(--green-dark);
      background: var(--green-pale);
      box-shadow: inset 0 -1px 0 rgba(22, 163, 74, .12);
    }

    .faq .accordion-button:focus {
      box-shadow: var(--ring);
    }

    .faq .accordion-button::after {
      border-radius: 999px;
      background-color: var(--green-soft);
      background-position: center;
      padding: 12px;
    }

    .faq .accordion-body {
      color: var(--muted);
      padding: 18px 20px 22px;
    }

    .join-panel {
      border: 1px solid rgba(22, 163, 74, .2);
      border-radius: 32px;
      padding: 28px;
      background:
        radial-gradient(circle at 85% 10%, rgba(34, 197, 94, .18), transparent 30%),
        linear-gradient(135deg, #F0FFF6, #FFFFFF);
      box-shadow: var(--shadow);
    }

    .join-panel p {
      color: var(--muted);
    }

    .join-form {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }

    .join-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 13px 15px;
      outline: none;
      background: var(--white);
      color: var(--deep);
      transition: box-shadow .2s ease, border-color .2s ease;
    }

    .join-form input:focus {
      border-color: rgba(22, 163, 74, .55);
      box-shadow: var(--ring);
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .site-footer {
      padding: 44px 0 28px;
      background: var(--deep);
      color: rgba(255, 255, 255, .78);
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: var(--white);
      font-size: 20px;
      font-weight: 900;
    }

    .site-footer p {
      max-width: 620px;
      margin: 0;
      color: rgba(255, 255, 255, .72);
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
    }

    .footer-links a {
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 999px;
      padding: 9px 12px;
      color: rgba(255, 255, 255, .82);
      font-weight: 700;
      font-size: 14px;
    }

    .footer-links a:hover,
    .footer-links a:focus {
      color: var(--white);
      background: rgba(255, 255, 255, .09);
      border-color: rgba(255, 255, 255, .22);
    }

    .copyright {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .58);
      font-size: 13px;
    }

    @media (max-width: 991.98px) {
      .site-header {
        top: 8px;
      }

      .nav-capsule {
        border-radius: 26px;
      }

      .navbar-collapse {
        margin-top: 14px;
        padding: 10px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(22, 163, 74, .12);
      }

      .nav-menu {
        align-items: stretch !important;
      }

      .nav-cta {
        margin-top: 10px;
        width: 100%;
      }

      .hero {
        padding-top: 38px;
      }

      .entry-grid {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
      }

      .section-title {
        align-items: flex-start;
        flex-direction: column;
      }

      .level-item {
        grid-template-columns: 64px 1fr;
      }

      .level-item .mini-badge {
        grid-column: 2;
        width: fit-content;
      }

      .footer-links {
        justify-content: flex-start;
        margin-top: 22px;
      }
    }

    @media (max-width: 767.98px) {
      body {
        line-height: 1.7;
      }

      .brand-text {
        max-width: 190px;
      }

      .hero {
        padding-bottom: 36px;
      }

      .section {
        padding: 42px 0;
      }

      .filter-row {
        align-items: stretch;
      }

      .chip-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .chip {
        white-space: nowrap;
      }

      .search-field {
        width: 100%;
        min-width: 0;
      }

      .entry-card {
        grid-template-columns: 1fr;
      }

      .abstract-cover {
        min-height: 126px;
      }

      .join-form {
        flex-direction: column;
      }

      .join-form .btn {
        width: 100%;
      }
    }

    @media (max-width: 575.98px) {
      .nav-capsule {
        padding-left: 12px;
      }

      .brand-mark {
        width: 30px;
        height: 30px;
      }

      .brand-text {
        max-width: 160px;
        font-size: 15px;
      }

      .hero-actions .btn,
      .card-actions .btn {
        width: 100%;
      }

      .card-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .option-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .panel-inner,
      .stage-panel,
      .filter-box,
      .join-panel {
        padding: 16px;
        border-radius: 24px;
      }

      .level-item {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category2 */
:root{
  --bg:#f6f8f7;
  --surface:#ffffff;
  --surface-soft:#f1faf4;
  --surface-ghost:#f7fbf8;
  --text:#17211b;
  --muted:#5b6b63;
  --line:#dfe9e2;
  --line-strong:#c8ddd0;
  --green:#16a34a;
  --green-2:#18b26b;
  --green-3:#22c55e;
  --green-soft:#ddfbea;
  --green-soft-2:#ecfdf3;
  --deep:#123326;
  --shadow:0 16px 40px rgba(18,51,38,.08);
  --shadow-strong:0 18px 54px rgba(18,51,38,.12);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --transition:all .25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(34,197,94,.08), transparent 20%),
    radial-gradient(circle at 88% 14%, rgba(24,178,107,.08), transparent 18%),
    linear-gradient(180deg,#fff 0%, #fbfdfb 24%, var(--bg) 100%);
  line-height:1.8;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;transition:var(--transition)}
a:hover{color:var(--green)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(34,197,94,.22);color:var(--deep)}
.container{max-width:1180px}
.section-block{padding:78px 0}
.section-soft{
  background:linear-gradient(180deg, rgba(221,251,234,.42), rgba(255,255,255,.88));
}
.section-title{
  max-width:760px;
  margin:0 auto 30px;
}
.section-title.left{margin-left:0}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--deep);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.2px;
}
.kicker::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
}
h1,h2,h3,h4,h5{line-height:1.25;margin:0}
h1{font-size:clamp(2.1rem,4vw,3.6rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,2.4vw,2.4rem);font-weight:800}
h3{font-size:1.18rem;font-weight:800}
p{margin:0;color:var(--muted);font-size:1rem}
.lead-copy{font-size:1.08rem;line-height:1.85;color:#3c4d45}
.small-copy{font-size:.92rem;line-height:1.75;color:#66766f}
.site-header{
  position:sticky;
  top:14px;
  z-index:1030;
  padding:0 0 10px;
}
.navbar{padding:0}
.nav-capsule{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  border:1px solid rgba(223,233,226,.88);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  box-shadow:0 8px 28px rgba(18,51,38,.06);
}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.03rem;
  font-weight:800;
  color:var(--deep);
  white-space:nowrap;
}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 10px 24px rgba(22,163,74,.24);
  flex:0 0 auto;
  font-size:1rem;
}
.brand-text{letter-spacing:.2px}
.navbar-collapse{
  flex-grow:0;
}
.nav-menu{
  gap:10px;
}
.nav-menu .nav-link{
  padding:10px 15px;
  border-radius:999px;
  color:var(--muted);
  font-weight:700;
  transition:var(--transition);
}
.nav-menu .nav-link:hover,
.nav-menu .nav-link:focus{
  color:var(--deep);
  background:rgba(221,251,234,.8);
}
.nav-menu .nav-link.active{
  color:var(--deep);
  background:var(--green-soft);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.16);
}
.nav-cta{
  margin-left:14px;
}
.btn{
  border-radius:16px;
  padding:12px 18px;
  font-weight:800;
  letter-spacing:.1px;
  transition:var(--transition);
  border:1px solid transparent;
}
.btn:focus,
.nav-link:focus,
.form-control:focus,
.accordion-button:focus{
  box-shadow:0 0 0 .22rem rgba(34,197,94,.18);
  border-color:rgba(22,163,74,.34);
}
.btn-primary-green{
  color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  border-color:rgba(22,163,74,.2);
  box-shadow:0 10px 24px rgba(22,163,74,.22);
}
.btn-primary-green:hover,
.btn-primary-green:focus{
  color:#fff;
  background:linear-gradient(135deg,#139242,#159a63);
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(22,163,74,.28);
}
.btn-secondary-green{
  color:var(--deep);
  background:#fff;
  border-color:var(--line-strong);
  box-shadow:0 8px 20px rgba(18,51,38,.06);
}
.btn-secondary-green:hover,
.btn-secondary-green:focus{
  color:var(--deep);
  background:var(--green-soft-2);
  border-color:#bfe7cc;
  transform:translateY(-2px);
}
.hero-wrap{
  padding:34px 0 24px;
}
.hero-panel{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(223,233,226,.9);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,251,248,.92)),
    linear-gradient(180deg, rgba(221,251,234,.25), rgba(255,255,255,0));
  box-shadow:var(--shadow);
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:auto -24px -24px auto;
  width:180px;height:180px;
  background:radial-gradient(circle, rgba(22,163,74,.13), transparent 66%);
  pointer-events:none;
}
.hero-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:#405248;
  font-size:.92rem;
  font-weight:700;
}
.tag-chip.success{
  background:var(--green-soft);
  border-color:rgba(22,163,74,.12);
}
.tag-chip.dark{
  background:#eef6f0;
}
.hero-copy{
  max-width:650px;
}
.hero-copy h1{
  margin-bottom:14px;
}
.hero-copy p{
  max-width:620px;
  margin-bottom:22px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.notice-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(221,251,234,.9), rgba(247,251,248,.98));
  color:#28503a;
  border:1px solid rgba(22,163,74,.14);
  font-size:.92rem;
}
.notice-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
  flex:0 0 auto;
}
.hero-stage{
  position:relative;
  min-height:100%;
  padding:18px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,#fff, #f5fbf7);
  border:1px solid rgba(200,221,208,.88);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-stage .window-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.window-bar span{
  width:11px;height:11px;border-radius:50%;
  background:#d9e7de;
}
.window-bar span:nth-child(1){background:#f4a7ab}
.window-bar span:nth-child(2){background:#ffd27c}
.window-bar span:nth-child(3){background:#8dd6a0}
.stage-card{
  border-radius:24px;
  border:1px solid rgba(191,231,204,.95);
  background:linear-gradient(180deg,#fff, #f5fbf7);
  box-shadow:0 12px 28px rgba(18,51,38,.06);
  padding:18px;
}
.stage-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.stage-title{
  font-size:1.06rem;
  font-weight:800;
  color:var(--deep);
}
.stage-sub{
  font-size:.9rem;
  color:var(--muted);
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--deep);
  font-size:.86rem;
  font-weight:800;
  white-space:nowrap;
}
.status-badge .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.metric-card{
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}
.metric-label{
  font-size:.84rem;
  color:var(--muted);
  margin-bottom:6px;
}
.metric-value{
  font-weight:800;
  color:var(--deep);
  font-size:1.02rem;
}
.progress-wrap{
  margin:16px 0 18px;
}
.progress{
  height:10px;
  border-radius:999px;
  background:#e9f3ee;
}
.progress-bar{
  background:linear-gradient(90deg,var(--green),var(--green-3));
  border-radius:999px;
}
.progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:var(--muted);
  margin-top:8px;
}
.check-list{
  display:grid;
  gap:10px;
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(247,251,248,.92);
  border:1px solid rgba(223,233,226,.92);
}
.check-icon{
  width:22px;height:22px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green);
  font-size:.9rem;
  font-weight:900;
  flex:0 0 auto;
  margin-top:1px;
}
.check-row strong{
  display:block;
  color:var(--deep);
  font-size:.96rem;
}
.check-row span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}
.floating-note{
  position:absolute;
  right:18px;
  bottom:18px;
  max-width:220px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(191,231,204,.95);
  box-shadow:0 14px 28px rgba(18,51,38,.08);
}
.floating-note small{
  display:block;
  color:var(--muted);
  line-height:1.6;
}
.floating-note strong{
  color:var(--deep);
  display:block;
  margin-bottom:6px;
}
.section-heading{
  margin-bottom:24px;
}
.section-heading .lead-copy{
  margin-top:10px;
  max-width:820px;
}
.step-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.step-card{
  position:relative;
  padding:22px 20px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(223,233,226,.92);
  box-shadow:0 10px 24px rgba(18,51,38,.05);
  min-height:100%;
}
.step-card::after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:10px;height:10px;border-radius:50%;
  background:var(--green-3);
  box-shadow:0 0 0 8px rgba(34,197,94,.08);
}
.step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:16px;
  background:linear-gradient(135deg, var(--green-soft), #effbf2);
  color:var(--green);
  font-size:1.05rem;
  font-weight:900;
  margin-bottom:14px;
}
.step-card h3{
  margin-bottom:10px;
}
.step-card p{
  font-size:.95rem;
}
.preview-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
}
.preview-matrix{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.preview-card{
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(223,233,226,.92);
  background:#fff;
  box-shadow:0 12px 28px rgba(18,51,38,.06);
  transition:var(--transition);
}
.preview-card:hover,
.step-card:hover,
.table-shell:hover,
.cta-panel:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-strong);
}
.preview-cover{
  height:118px;
  background:
    linear-gradient(135deg, rgba(22,163,74,.95), rgba(17,132,78,.76)),
    radial-gradient(circle at 22% 25%, rgba(255,255,255,.38), transparent 24%),
    radial-gradient(circle at 80% 34%, rgba(255,255,255,.18), transparent 28%);
  position:relative;
}
.preview-cover::before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:20px;
}
.preview-body{
  padding:18px;
}
.preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.preview-title{
  font-weight:800;
  color:var(--deep);
}
.preview-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--deep);
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}
.preview-body p{
  font-size:.93rem;
  margin-bottom:14px;
}
.preview-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--muted);
  margin-bottom:12px;
}
.preview-bar{
  height:9px;
  border-radius:999px;
  background:#e9f3ee;
  overflow:hidden;
}
.preview-bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--green),var(--green-3));
}
.side-panel{
  display:grid;
  gap:16px;
}
.side-card{
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff, #f6fbf7);
  border:1px solid rgba(223,233,226,.92);
  box-shadow:0 10px 24px rgba(18,51,38,.05);
}
.side-card .stat-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(223,233,226,.8);
}
.side-card .stat-line:last-child{border-bottom:0;padding-bottom:0}
.side-card .stat-line:first-of-type{padding-top:6px}
.side-label{
  color:var(--muted);
  font-size:.92rem;
}
.side-value{
  color:var(--deep);
  font-weight:800;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(237,253,242,.96);
  border:1px solid rgba(22,163,74,.12);
  color:var(--deep);
  font-size:.87rem;
  font-weight:800;
}
.status-pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
}
.side-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.side-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:.94rem;
}
.side-list .mini-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--green-3);
  margin-top:7px;
  flex:0 0 auto;
}
.table-shell{
  padding:22px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(223,233,226,.94);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.table-responsive{border-radius:22px}
.table{
  margin-bottom:0;
  color:var(--text);
}
.table thead th{
  background:#f4fbf6;
  color:var(--deep);
  border-bottom:1px solid var(--line);
  font-weight:800;
  padding:18px 16px;
  vertical-align:middle;
}
.table tbody td{
  padding:18px 16px;
  vertical-align:middle;
  border-color:rgba(223,233,226,.9);
  background:#fff;
}
.table tbody tr:hover td{background:#fafdfb}
.table .recommend{
  position:relative;
  background:linear-gradient(180deg,#f4fff7,#effdf4);
}
.table .recommend::before{
  content:"推荐";
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:.78rem;
  font-weight:800;
}
.check-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font-weight:900;
}
.minus-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:#f1f5f3;
  color:#8ea095;
  font-weight:900;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--deep);
  font-size:.8rem;
  font-weight:800;
}
.accordion-shell{
  border-radius:26px;
  border:1px solid rgba(223,233,226,.94);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.accordion-item{
  border:0;
  border-bottom:1px solid rgba(223,233,226,.92);
}
.accordion-item:last-child{border-bottom:0}
.accordion-button{
  padding:20px 22px;
  font-weight:800;
  color:var(--deep);
  background:#fff;
  box-shadow:none;
}
.accordion-button:not(.collapsed){
  color:var(--deep);
  background:linear-gradient(180deg,#f3fbf5,#fff);
}
.accordion-button::after{
  width:1rem;height:1rem;
  background-size:1rem;
}
.accordion-body{
  padding:0 22px 20px;
  color:var(--muted);
}
.cta-panel{
  position:relative;
  padding:28px;
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(221,251,234,.92), rgba(245,251,247,.96));
  border:1px solid rgba(22,163,74,.12);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.cta-panel::before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-84px;top:-92px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(22,163,74,.18), transparent 68%);
}
.cta-panel::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  left:-66px;bottom:-100px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,197,94,.11), transparent 66%);
}
.cta-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
  align-items:start;
}
.form-panel{
  padding:20px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(223,233,226,.9);
  box-shadow:0 10px 24px rgba(18,51,38,.05);
}
.form-label{
  font-weight:800;
  color:var(--deep);
  margin-bottom:8px;
}
.form-control{
  min-height:52px;
  border-radius:16px;
  border:1px solid var(--line-strong);
  padding:12px 14px;
  background:#fff;
}
.form-control::placeholder{color:#98a69f}
.form-hint{
  font-size:.88rem;
  color:var(--muted);
  margin-top:10px;
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(223,233,226,.92);
  color:var(--deep);
  font-size:.88rem;
  font-weight:800;
}
.trust-badge .mini{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
}
.site-footer{
  margin-top:36px;
  padding:34px 0 22px;
  background:#f8fbf9;
  border-top:1px solid rgba(223,233,226,.92);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--deep);
  font-size:1.03rem;
  font-weight:800;
  margin-bottom:12px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 18px;
  margin-top:4px;
}
.footer-links a{
  color:#516158;
  font-weight:700;
}
.footer-links a:hover{color:var(--green)}
.copyright{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(223,233,226,.92);
  color:#6a766f;
  font-size:.92rem;
  line-height:1.8;
}
.mobile-only{display:none}
.modal-content{
  border:1px solid rgba(223,233,226,.94);
  border-radius:28px;
  box-shadow:var(--shadow-strong);
}
.modal-header{
  border-bottom:1px solid rgba(223,233,226,.9);
  padding:18px 22px;
}
.modal-body{
  padding:20px 22px 22px;
}
.modal-footer{
  border-top:1px solid rgba(223,233,226,.9);
  padding:16px 22px 20px;
}
@media (max-width: 1199.98px){
  .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
}
@media (max-width: 991.98px){
  .nav-capsule{
    border-radius:28px;
    align-items:flex-start;
    padding:14px;
  }
  .navbar-collapse{
    width:100%;
    margin-top:14px;
  }
  .nav-menu{
    align-items:stretch!important;
    gap:8px;
    padding-bottom:10px;
  }
  .nav-menu .nav-link{
    display:block;
    width:100%;
    text-align:center;
  }
  .nav-cta{
    width:100%;
    margin:12px 0 0;
  }
  .hero-wrap{padding-top:22px}
  .hero-panel{padding:22px}
  .metric-grid{grid-template-columns:1fr}
}
@media (max-width: 767.98px){
  .site-header{top:0;padding-top:0}
  .container{padding-left:16px;padding-right:16px}
  .section-block{padding:56px 0}
  .hero-copy h1{font-size:clamp(1.9rem, 8vw, 2.8rem)}
  .lead-copy{font-size:1rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .notice-bar{align-items:flex-start}
  .step-grid,
  .preview-matrix{grid-template-columns:1fr}
  .table-shell{padding:16px}
  .accordion-button,
  .accordion-body{padding-left:16px;padding-right:16px}
  .footer-links{justify-content:flex-start}
}
@media (max-width: 575.98px){
  .nav-capsule{padding:12px}
  .navbar-brand{font-size:.98rem}
  .brand-mark{width:30px;height:30px;border-radius:10px}
  .section-block{padding:46px 0}
  .hero-panel,
  .stage-card,
  .side-card,
  .cta-panel,
  .form-panel{
    border-radius:24px;
  }
  .hero-stage{padding:14px}
  .floating-note{
    position:static;
    max-width:none;
    margin-top:14px;
  }
  .table-responsive{
    margin:0 -16px;
    padding:0 16px;
  }
}