/* roulang page: index */
:root{
      --primary:#0c6b4f;
      --primary-dark:#074736;
      --primary-soft:#e6f5ef;
      --accent:#ffb23f;
      --accent-2:#ef5b45;
      --ink:#10201b;
      --muted:#66736e;
      --weak:#8a9691;
      --line:#dfe8e3;
      --bg:#f6faf8;
      --card:#ffffff;
      --dark:#0b1714;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:30px;
      --shadow:0 18px 45px rgba(14,55,44,.12);
      --shadow-soft:0 10px 28px rgba(14,55,44,.08);
      --container:1180px;
      --speed:.22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 8%,rgba(255,178,63,.18),transparent 28%),
        radial-gradient(circle at 92% 12%,rgba(12,107,79,.12),transparent 26%),
        var(--bg);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:color var(--speed),background var(--speed),border var(--speed),transform var(--speed)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    input,textarea{outline:none}
    input:focus,textarea:focus,a:focus,button:focus{outline:3px solid rgba(255,178,63,.45);outline-offset:3px}
    .site-container{max-width:var(--container);margin:0 auto;padding:0 22px}
    .topbar{
      background:rgba(246,250,248,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(223,232,227,.85);
      position:sticky;top:0;z-index:50;
    }
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{
      display:flex;align-items:center;gap:12px;font-weight:900;font-size:22px;letter-spacing:.5px;color:var(--primary-dark);white-space:nowrap;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:15px;
      background:linear-gradient(135deg,var(--primary),#19a172);
      box-shadow:0 10px 24px rgba(12,107,79,.25);
      display:grid;place-items:center;color:#fff;font-weight:900;
    }
    .nav-links{display:flex;align-items:center;gap:4px;min-width:0}
    .nav-links a{
      padding:10px 12px;border-radius:999px;color:#41504b;font-size:14px;font-weight:700;white-space:nowrap;
    }
    .nav-links a:hover,.nav-links a.active{background:var(--primary-soft);color:var(--primary-dark)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-search{
      width:150px;height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 14px;color:var(--ink);
      box-shadow:0 8px 18px rgba(14,55,44,.04);
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:44px;padding:12px 18px;border-radius:999px;border:1px solid transparent;
      font-weight:850;cursor:pointer;transition:transform var(--speed),box-shadow var(--speed),background var(--speed),border var(--speed);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:0 14px 30px rgba(12,107,79,.24)}
    .btn-primary:hover{background:var(--primary-dark);color:#fff}
    .btn-accent{background:var(--accent);color:#3a2507;box-shadow:0 14px 28px rgba(255,178,63,.25)}
    .btn-ghost{background:#fff;color:var(--primary-dark);border-color:var(--line)}
    .btn-ghost:hover{border-color:rgba(12,107,79,.35);box-shadow:var(--shadow-soft)}
    .mobile-toggle{display:none;border:0;background:#fff;border-radius:12px;width:42px;height:42px;color:var(--primary-dark);box-shadow:var(--shadow-soft)}
    .section{padding:78px 0}
    .section.compact{padding:54px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:30px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-weight:850;font-size:13px;margin-bottom:14px}
    h1,h2,h3,h4{line-height:1.18;margin:0;color:var(--ink);font-weight:950}
    h1{font-size:clamp(38px,5vw,66px);letter-spacing:-1.8px}
    h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.8px}
    h3{font-size:22px}
    p{margin:0;color:var(--muted)}
    .lead{font-size:18px;color:#34433d;max-width:760px}
    .hero{padding:34px 0 76px}
    .bento{
      display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:auto auto;gap:18px;
    }
    .hero-main{
      min-height:470px;border-radius:var(--radius-lg);padding:48px;
      background:
        linear-gradient(120deg,rgba(7,71,54,.92),rgba(12,107,79,.76)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow);
      display:flex;flex-direction:column;justify-content:space-between;
    }
    .hero-main:after{
      content:"";position:absolute;right:-90px;bottom:-120px;width:360px;height:360px;border-radius:50%;
      background:rgba(255,178,63,.18);border:1px solid rgba(255,255,255,.18);
    }
    .hero-main h1,.hero-main p{color:#fff;position:relative;z-index:1}
    .hero-main .lead{color:rgba(255,255,255,.88);margin-top:18px;max-width:720px}
    .hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative;z-index:1}
    .tag{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:750;font-size:13px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;position:relative;z-index:1}
    .mini-card,.cta-strip{
      border-radius:var(--radius);background:rgba(255,255,255,.9);border:1px solid rgba(223,232,227,.9);
      padding:24px;box-shadow:var(--shadow-soft);overflow:hidden;position:relative;
    }
    .mini-card.dark{background:var(--dark);color:#fff}
    .mini-card.dark h3,.mini-card.dark p{color:#fff}
    .mini-card p{margin-top:8px;font-size:14px}
    .score-pulse{display:flex;align-items:center;gap:10px;margin-top:18px}
    .dot{width:10px;height:10px;border-radius:50%;background:#33d38b;box-shadow:0 0 0 8px rgba(51,211,139,.13)}
    .big-num{font-size:38px;font-weight:950;color:var(--primary-dark);line-height:1;margin-top:16px}
    .cta-strip{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(90deg,#fff,#fff7e9)}
    .cta-strip strong{font-size:20px;color:var(--ink)}
    .coupon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .coupon{
      background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow-soft);
      min-height:210px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
    }
    .coupon:before,.coupon:after{content:"";position:absolute;top:88px;width:22px;height:22px;background:var(--bg);border:1px solid var(--line);border-radius:50%}
    .coupon:before{left:-11px}.coupon:after{right:-11px}
    .coupon:hover,.card:hover,.topic-card:hover,.news-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .coupon,.card,.topic-card,.news-item{transition:transform var(--speed),box-shadow var(--speed),border var(--speed)}
    .coupon .coupon-title{font-weight:950;font-size:20px;color:var(--primary-dark)}
    .coupon .coupon-desc{font-size:14px;margin-top:8px}
    .coupon-code{display:inline-flex;align-self:flex-start;margin-top:18px;padding:8px 12px;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font-weight:900;font-size:13px}
    .rules-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
    .rule-panel{
      border-radius:var(--radius-lg);padding:32px;background:var(--dark);color:#fff;min-height:360px;position:relative;overflow:hidden;
    }
    .rule-panel p,.rule-panel h2{color:#fff}
    .rule-panel img{position:absolute;right:-30px;bottom:-20px;width:270px;border-radius:28px;opacity:.5}
    .rule-list{display:grid;gap:14px}
    .rule-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow-soft)}
    .rule-no{flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:var(--accent);display:grid;place-items:center;font-weight:950;color:#3a2507}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
    .news-list{display:grid;gap:14px}
    .news-item{
      background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;
    }
    .news-date{font-weight:900;color:var(--primary);font-size:14px}
    .news-item h3{font-size:19px;margin-bottom:4px}
    .news-item p{font-size:14px}
    .readmore{font-weight:900;color:var(--primary-dark);white-space:nowrap}
    .recommend{
      border-radius:var(--radius-lg);padding:26px;background:linear-gradient(145deg,#fff,#eaf7f1);border:1px solid var(--line);box-shadow:var(--shadow-soft);
    }
    .recommend img{border-radius:20px;margin:16px 0}
    .cta-wide{
      background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:34px;color:#fff;padding:44px;
      display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden;
    }
    .cta-wide h2,.cta-wide p{color:#fff}
    .lead-form{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:20px;backdrop-filter:blur(12px)}
    .lead-form label{color:#fff;font-weight:800;font-size:14px;margin-bottom:6px}
    .lead-form input,.lead-form textarea{
      width:100%;border:0;border-radius:14px;margin-bottom:12px;padding:13px 14px;background:#fff;color:var(--ink);
    }
    .privacy-note{font-size:12px;color:rgba(255,255,255,.78);margin-top:10px}
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow-soft);
    }
    .icon{
      width:48px;height:48px;border-radius:16px;background:var(--primary-soft);color:var(--primary-dark);display:grid;place-items:center;font-weight:950;margin-bottom:16px;
    }
    .topic-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
    .topic-card{
      background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);
    }
    .topic-card img{height:105px;width:100%;object-fit:cover}
    .topic-card a{display:block;padding:14px;font-weight:950;color:var(--primary-dark)}
    .topic-card span{display:block;color:var(--muted);font-weight:500;font-size:13px;margin-top:4px}
    .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .stat{border-radius:24px;background:#fff;border:1px solid var(--line);padding:24px;text-align:center;box-shadow:var(--shadow-soft)}
    .stat strong{display:block;font-size:38px;line-height:1;color:var(--primary-dark);font-weight:950}
    .stat span{color:var(--muted);font-weight:750}
    .stage{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;
      background:#fff;border:1px solid var(--line);border-radius:34px;padding:28px;box-shadow:var(--shadow-soft);
    }
    .device{
      border-radius:30px;background:#0f211c;padding:18px;box-shadow:0 22px 50px rgba(10,30,24,.22);
    }
    .device-screen{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
    .stage-list{display:grid;gap:12px;margin-top:20px}
    .stage-list li{list-style:none;background:var(--primary-soft);border-radius:16px;padding:13px 15px;color:var(--primary-dark);font-weight:800}
    .battle{
      background:linear-gradient(135deg,#fff4df,#ffffff 55%,#e7f6ef);border:1px solid var(--line);border-radius:34px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;box-shadow:var(--shadow-soft);
    }
    .battle-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:850;color:var(--primary-dark)}
    .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .quote{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow-soft)}
    .quote p{color:#3d4c46}
    .quote strong{display:block;margin-top:16px;color:var(--primary-dark)}
    .faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-soft)}
    .faq-item h3{font-size:18px;margin-bottom:8px}
    .brand-story{
      display:grid;grid-template-columns:1fr .85fr;gap:26px;align-items:center;
    }
    .story-text{background:#fff;border:1px solid var(--line);border-radius:30px;padding:32px;box-shadow:var(--shadow-soft)}
    .story-img img{border-radius:30px;box-shadow:var(--shadow)}
    .footer{
      background:#081511;color:#dbe7e2;padding:54px 0 28px;margin-top:0;
    }
    .footer-grid{display:grid;grid-template-columns:1.2fr 1.8fr;gap:34px;margin-bottom:30px}
    .footer .brand{color:#fff;margin-bottom:14px}
    .footer p{color:#aebbb6}
    .footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .footer-links h4{color:#fff;font-size:16px;margin-bottom:10px}
    .footer-links a{display:block;color:#aebbb6;margin:7px 0;font-size:14px}
    .footer-links a:hover{color:#fff}
    .copyright{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;color:#aebbb6;font-size:13px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
    .copyright a{color:#dbe7e2}
    @media (max-width:1100px){
      .nav-links{position:absolute;left:22px;right:22px;top:76px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:12px;display:none;flex-wrap:wrap}
      .nav-links.open{display:flex}
      .mobile-toggle{display:inline-grid;place-items:center}
      .nav-search{display:none}
      .bento,.news-layout,.rules-wrap,.cta-wide,.stage,.battle,.brand-story,.footer-grid{grid-template-columns:1fr}
      .cta-strip{grid-column:auto}
      .coupon-grid{grid-template-columns:repeat(2,1fr)}
      .topic-grid{grid-template-columns:repeat(4,1fr)}
    }
    @media (max-width:768px){
      .section{padding:56px 0}
      .hero-main{padding:32px;min-height:430px}
      .section-head{display:block}
      .features,.reviews,.faq,.stats-strip{grid-template-columns:1fr}
      .news-item{grid-template-columns:1fr;gap:6px}
      .topic-grid{grid-template-columns:repeat(2,1fr)}
      .footer-links{grid-template-columns:repeat(2,1fr)}
      .cta-wide{padding:28px}
      .nav-actions .btn{display:none}
    }
    @media (max-width:520px){
      .site-container{padding:0 16px}
      .nav-wrap{height:68px}
      .nav-links{top:68px}
      .brand{font-size:19px}
      .brand-mark{width:38px;height:38px}
      .coupon-grid{grid-template-columns:1fr}
      .hero-actions{flex-direction:column;align-items:stretch}
      .btn{width:100%}
      .cta-strip{align-items:flex-start;flex-direction:column}
      .hero-main{padding:26px;border-radius:24px}
      .mini-card,.coupon,.card,.quote,.faq-item{border-radius:20px}
      .footer-links{grid-template-columns:1fr}
    }

/* roulang page: category2 */
:root{
      --primary:#0f6b57;
      --primary-strong:#0a4f42;
      --primary-soft:#e7f6f1;
      --secondary:#ffb84d;
      --secondary-strong:#f29b18;
      --ink:#10221f;
      --muted:#63736f;
      --weak:#8a9b96;
      --line:#dce8e4;
      --bg:#f6faf8;
      --card:#ffffff;
      --dark:#0b1b18;
      --dark-soft:#12342d;
      --danger:#e65b48;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:30px;
      --shadow-sm:0 10px 24px rgba(16,34,31,.08);
      --shadow:0 18px 48px rgba(16,34,31,.12);
      --shadow-strong:0 24px 70px rgba(16,34,31,.18);
      --container:1180px;
      --space:clamp(56px,7vw,96px);
      --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(255,184,77,.18), transparent 28%),
        radial-gradient(circle at 92% 16%, rgba(15,107,87,.16), transparent 30%),
        var(--bg);
      line-height:1.72;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border .2s ease,transform .2s ease,box-shadow .2s ease}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    input,textarea,select{outline:none}
    input:focus,textarea:focus,select:focus,a:focus-visible,button:focus-visible{
      outline:3px solid rgba(255,184,77,.45);
      outline-offset:3px;
    }
    .site-container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
    .section{padding:var(--space) 0}
    .section-tight{padding:54px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;
      background:var(--primary-soft);color:var(--primary-strong);
      font-size:13px;font-weight:800;letter-spacing:.03em;
    }
    .eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(255,184,77,.18)}
    h1,h2,h3,h4,p{margin-top:0}
    h1{font-size:clamp(36px,5.2vw,70px);line-height:1.04;letter-spacing:-.055em;margin-bottom:20px}
    h2{font-size:clamp(28px,3.4vw,46px);line-height:1.14;letter-spacing:-.035em;margin-bottom:16px}
    h3{font-size:22px;line-height:1.35;margin-bottom:10px}
    h4{font-size:16px;margin-bottom:12px}
    p{color:var(--muted);font-size:16px}
    .lead-text{font-size:18px;color:#3d514c;max-width:760px}
    .topbar{
      position:sticky;top:0;z-index:1000;
      background:rgba(246,250,248,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(220,232,228,.82);
      box-shadow:0 8px 28px rgba(16,34,31,.05);
    }
    .nav-wrap{min-height:78px;display:flex;align-items:center;gap:18px}
    .brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:20px;white-space:nowrap}
    .brand:hover{color:var(--primary)}
    .brand-mark{
      width:38px;height:38px;border-radius:14px;
      display:inline-grid;place-items:center;
      color:#fff;background:linear-gradient(135deg,var(--primary),#18a37f);
      box-shadow:0 12px 26px rgba(15,107,87,.24);
      font-weight:900;
    }
    .mobile-toggle{
      display:none;margin-left:auto;border:0;background:var(--card);color:var(--primary);
      width:42px;height:42px;border-radius:14px;box-shadow:var(--shadow-sm);cursor:pointer;
    }
    .nav-links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
    .nav-links a{
      padding:10px 11px;border-radius:999px;font-size:14px;font-weight:700;color:#435651;white-space:nowrap;
    }
    .nav-links a:hover{background:#edf6f3;color:var(--primary);transform:translateY(-1px)}
    .nav-links a.active{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(15,107,87,.22)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-search{
      width:132px;border:1px solid var(--line);border-radius:999px;background:#fff;
      padding:10px 14px;font-size:14px;color:var(--ink);box-shadow:0 8px 18px rgba(16,34,31,.04);
    }
    .nav-search::placeholder{color:#94a39f}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      border-radius:999px;border:1px solid transparent;padding:12px 18px;
      font-weight:900;line-height:1.1;cursor:pointer;white-space:nowrap;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border .22s ease,color .22s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--secondary);color:#241700;box-shadow:0 14px 30px rgba(242,155,24,.24)}
    .btn-primary:hover{background:#ffc76e;color:#241700;box-shadow:0 18px 36px rgba(242,155,24,.32)}
    .btn-dark{background:var(--primary);color:#fff;box-shadow:0 14px 30px rgba(15,107,87,.26)}
    .btn-dark:hover{background:var(--primary-strong);color:#fff}
    .btn-ghost{background:#fff;color:var(--primary);border-color:var(--line)}
    .btn-ghost:hover{border-color:rgba(15,107,87,.35);box-shadow:var(--shadow-sm);color:var(--primary-strong)}
    .btn-wide{padding-left:24px;padding-right:24px}
    .hero{
      position:relative;
      padding:74px 0 56px;
      overflow:hidden;
      background:
        linear-gradient(110deg,rgba(11,27,24,.90),rgba(11,27,24,.68) 48%,rgba(15,107,87,.34)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      color:#fff;
      border-bottom-left-radius:42px;
      border-bottom-right-radius:42px;
    }
    .hero:after{
      content:"";position:absolute;inset:auto -8% -22% auto;width:420px;height:420px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,184,77,.32),transparent 68%);
      pointer-events:none;
    }
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:42px;align-items:center}
    .hero p{color:rgba(255,255,255,.80)}
    .hero .eyebrow{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
    .hero .eyebrow:before{background:var(--secondary)}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 22px}
    .group-strip{
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:18px;padding:12px 14px;width:max-content;max-width:100%;
      backdrop-filter:blur(10px);
    }
    .avatars{display:flex}
    .avatar{
      width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
      background:linear-gradient(135deg,#fff,#dff8f1);color:var(--primary);font-size:12px;font-weight:900;border:2px solid rgba(255,255,255,.65);margin-left:-7px;
    }
    .avatar:first-child{margin-left:0}
    .group-strip strong{color:#fff}
    .hero-panel{
      background:rgba(255,255,255,.94);color:var(--ink);
      border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-lg);
      box-shadow:var(--shadow-strong);padding:24px;
    }
    .hero-panel p{color:var(--muted)}
    .score-card{
      border-radius:24px;background:linear-gradient(180deg,#f8fffc,#fff);
      border:1px solid var(--line);padding:18px;margin-bottom:14px;
    }
    .match-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .team{font-weight:900;color:var(--ink)}
    .score{font-size:28px;font-weight:950;color:var(--primary)}
    .status{display:inline-flex;padding:5px 10px;border-radius:999px;background:#fff3dd;color:#7a4a00;font-weight:800;font-size:12px}
    .metric-bars{display:grid;gap:12px;margin-top:18px}
    .bar-line{display:grid;grid-template-columns:72px 1fr 42px;gap:10px;align-items:center;font-size:13px;color:var(--muted);font-weight:700}
    .bar-track{height:9px;border-radius:999px;background:#e9f2ef;overflow:hidden}
    .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#26b88f)}
    .mini-note{display:flex;gap:10px;align-items:flex-start;background:#f7fbf9;border:1px solid var(--line);border-radius:18px;padding:14px}
    .mini-note b{color:var(--ink)}
    .section-head{display:grid;grid-template-columns:minmax(0,.72fr) minmax(280px,.28fr);gap:28px;align-items:end;margin-bottom:30px}
    .section-head p{margin-bottom:0}
    .hint-box{
      border-radius:var(--radius);background:#fff;border:1px solid var(--line);
      padding:18px;box-shadow:var(--shadow-sm);
    }
    .question-layout{display:grid;grid-template-columns:360px 1fr;gap:24px}
    .question-card{
      background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:24px;box-shadow:var(--shadow-sm);
    }
    .question-card.large{background:linear-gradient(180deg,#fff,#f1faf6)}
    .question-list{display:grid;gap:14px}
    .question-item{
      display:flex;gap:12px;align-items:flex-start;padding:17px;border:1px solid var(--line);
      border-radius:18px;background:#fff;transition:transform .2s ease,box-shadow .2s ease,border .2s ease;
    }
    .question-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:rgba(15,107,87,.25)}
    .q-icon{
      flex:0 0 34px;width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:950;
    }
    .solution-row{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:stretch}
    .media-card{
      position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:420px;
      box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);
    }
    .media-card img{width:100%;height:100%;object-fit:cover}
    .media-caption{
      position:absolute;left:18px;right:18px;bottom:18px;
      padding:18px;border-radius:22px;background:rgba(11,27,24,.82);
      color:#fff;backdrop-filter:blur(12px);
    }
    .media-caption p{color:rgba(255,255,255,.78);margin-bottom:0}
    .solution-stack{display:grid;gap:14px}
    .solution-card{
      display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
      padding:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);
    }
    .solution-card:hover{transform:translateX(4px);box-shadow:var(--shadow)}
    .solution-icon{
      width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--primary-soft),#fff5e6);
      display:grid;place-items:center;color:var(--primary);font-size:24px;font-weight:950;
    }
    .tag{
      display:inline-flex;align-items:center;gap:6px;border-radius:999px;
      padding:6px 10px;background:#f2f7f5;border:1px solid var(--line);
      color:#51635f;font-size:12px;font-weight:800;
    }
    .data-band{
      background:linear-gradient(135deg,var(--dark),var(--dark-soft));
      color:#fff;border-radius:34px;padding:34px;overflow:hidden;position:relative;
    }
    .data-band:before{
      content:"";position:absolute;right:-90px;top:-120px;width:320px;height:320px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,184,77,.22),transparent 70%);
    }
    .data-band p{color:rgba(255,255,255,.72)}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;position:relative;z-index:1}
    .stat{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:22px;padding:20px;backdrop-filter:blur(12px);
    }
    .stat strong{display:block;font-size:34px;line-height:1;color:#fff;margin-bottom:8px;letter-spacing:-.03em}
    .stat span{color:rgba(255,255,255,.72);font-size:14px}
    .scenario-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:start}
    .scenario-list{display:grid;gap:14px}
    .scenario-item{
      background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;
      display:grid;grid-template-columns:auto 1fr;gap:14px;box-shadow:var(--shadow-sm);
    }
    .number{
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
      background:var(--primary);color:#fff;font-weight:950;
    }
    .side-panel{
      position:sticky;top:104px;background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);
    }
    .side-panel img{border-radius:22px;margin-bottom:18px;aspect-ratio:16/10;object-fit:cover;width:100%}
    .check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
    .check-list li{display:flex;gap:10px;color:#536762}
    .check-list li:before{content:"✓";flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:950;font-size:12px;margin-top:2px}
    .flow{
      display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:step;
    }
    .flow-card{
      counter-increment:step;background:#fff;border:1px solid var(--line);
      border-radius:22px;padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
    }
    .flow-card:before{
      content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:12px;
      background:var(--secondary);color:#2d1a00;font-weight:950;margin-bottom:14px;
    }
    .comparison{
      display:grid;grid-template-columns:1fr 1fr;gap:20px;
      background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
      padding:20px;box-shadow:var(--shadow-sm);
    }
    .compare-col{border-radius:24px;padding:22px;background:#f8fbfa}
    .compare-col.featured{background:linear-gradient(180deg,var(--primary-soft),#fff7ea);border:1px solid rgba(15,107,87,.18)}
    .compare-col h3{display:flex;align-items:center;gap:10px}
    .lead-panel{
      display:grid;grid-template-columns:.92fr 1.08fr;gap:26px;align-items:stretch;
      background:linear-gradient(135deg,#fff,var(--primary-soft));
      border:1px solid var(--line);border-radius:34px;padding:26px;box-shadow:var(--shadow);
    }
    .lead-copy{padding:14px}
    .lead-form{
      background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow-sm);
    }
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:7px;margin-bottom:14px}
    .field.full{grid-column:1/-1}
    .field label{font-size:14px;font-weight:900;color:#344843}
    .field input,.field select,.field textarea{
      width:100%;border:1px solid var(--line);border-radius:16px;background:#fbfdfc;
      padding:13px 14px;color:var(--ink);transition:border .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .field textarea{min-height:104px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(15,107,87,.45);box-shadow:0 0 0 4px rgba(15,107,87,.08);background:#fff}
    .privacy{
      display:flex;gap:12px;align-items:flex-start;background:#f6faf8;border:1px dashed rgba(15,107,87,.28);
      border-radius:18px;padding:14px;margin:12px 0 16px;color:#566a65;font-size:14px;
    }
    .privacy strong{color:var(--primary)}
    .faq-shell{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
    .faq-list{display:grid;gap:12px}
    .faq-item{
      background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow-sm);
    }
    .faq-item summary{cursor:pointer;font-weight:950;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:18px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:0 0 26px}
    .faq-item[open] summary:after{content:"−";background:var(--primary);color:#fff}
    .faq-item p{margin:12px 0 0}
    .cta{
      position:relative;overflow:hidden;border-radius:38px;
      padding:42px;background:
        linear-gradient(110deg,rgba(15,107,87,.96),rgba(10,79,66,.92)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      color:#fff;
    }
    .cta:after{content:"";position:absolute;right:-70px;bottom:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,184,77,.32),transparent 70%);border-radius:50%}
    .cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
    .cta p{color:rgba(255,255,255,.78);margin-bottom:0}
    .footer{background:var(--dark);color:#fff;padding:58px 0 26px;margin-top:70px}
    .footer .brand{color:#fff;margin-bottom:14px}
    .footer p{color:rgba(255,255,255,.68);max-width:380px}
    .footer-grid{display:grid;grid-template-columns:1fr 2fr;gap:42px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
    .footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .footer h4{color:#fff;font-size:15px;margin-bottom:14px}
    .footer a{display:block;color:rgba(255,255,255,.66);font-size:14px;margin:8px 0}
    .footer a:hover{color:var(--secondary);transform:translateX(2px)}
    .copyright{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;padding-top:22px;color:rgba(255,255,255,.58);font-size:13px}
    .copyright a{display:inline;color:rgba(255,255,255,.72)}
    .copyright a:hover{color:var(--secondary);transform:none}
    @media (max-width:1100px){
      .nav-wrap{flex-wrap:wrap;padding:14px 0}
      .mobile-toggle{display:grid;place-items:center}
      .nav-links{
        order:5;display:none;flex-basis:100%;justify-content:flex-start;overflow:auto;
        padding:8px 0 4px;scrollbar-width:none;
      }
      .nav-links.open{display:flex}
      .nav-actions{margin-left:auto}
      .hero-grid,.question-layout,.solution-row,.scenario-wrap,.lead-panel,.faq-shell{grid-template-columns:1fr}
      .side-panel{position:relative;top:auto}
      .flow{grid-template-columns:repeat(3,1fr)}
      .stats-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,var(--container))}
      .hero{padding:54px 0 42px;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
      .hero-grid{gap:24px}
      .hero-panel{padding:18px;border-radius:24px}
      .section-head{grid-template-columns:1fr}
      .nav-actions{width:100%;justify-content:space-between}
      .nav-search{flex:1;width:auto}
      .solution-card{grid-template-columns:48px 1fr}
      .solution-card .tag{grid-column:2}
      .flow{grid-template-columns:1fr}
      .comparison{grid-template-columns:1fr}
      .form-grid{grid-template-columns:1fr}
      .stats-grid{grid-template-columns:1fr 1fr}
      .footer-links{grid-template-columns:repeat(2,1fr)}
      .cta-grid{grid-template-columns:1fr}
    }
    @media (max-width:520px){
      h1{font-size:36px}
      h2{font-size:28px}
      .nav-wrap{gap:10px}
      .brand{font-size:18px}
      .brand-mark{width:34px;height:34px;border-radius:12px}
      .nav-links{gap:6px}
      .nav-links a{font-size:13px;padding:9px 10px}
      .hero-actions,.group-strip{width:100%}
      .hero-actions .btn{width:100%}
      .match-row{align-items:flex-start}
      .score{font-size:24px}
      .bar-line{grid-template-columns:60px 1fr 36px}
      .section{padding:54px 0}
      .data-band,.lead-panel,.cta{border-radius:26px;padding:22px}
      .stats-grid{grid-template-columns:1fr}
      .footer-links{grid-template-columns:1fr}
      .copyright{display:grid;gap:8px}
    }

/* roulang page: category3 */
:root{
      --color-bg:#f7f4ef;
      --color-bg-2:#fffaf2;
      --color-surface:#ffffff;
      --color-ink:#201b16;
      --color-muted:#70685f;
      --color-soft:#9b8f83;
      --color-primary:#e85d2a;
      --color-primary-dark:#b83d18;
      --color-secondary:#20242c;
      --color-accent:#f6b73c;
      --color-green:#0d8a6a;
      --color-line:rgba(32,27,22,.12);
      --shadow-sm:0 8px 22px rgba(61,45,31,.08);
      --shadow-md:0 18px 45px rgba(61,45,31,.14);
      --shadow-lg:0 30px 80px rgba(32,27,22,.18);
      --radius-sm:12px;
      --radius-md:20px;
      --radius-lg:32px;
      --radius-xl:42px;
      --container:1180px;
      --ease:all .22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--color-ink);
      background:
        radial-gradient(circle at 12% 8%, rgba(246,183,60,.18), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(232,93,42,.13), transparent 32%),
        linear-gradient(180deg,var(--color-bg),#fff 46%,var(--color-bg-2));
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--color-primary)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(232,93,42,.18)}
    .site-container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,250,242,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(32,27,22,.08);
      box-shadow:0 10px 30px rgba(32,27,22,.04);
    }
    .nav-wrap{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      font-size:20px;
      letter-spacing:.02em;
      color:var(--color-ink);
      white-space:nowrap;
    }
    .brand-mark{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
      box-shadow:0 10px 24px rgba(232,93,42,.26);
      transform:rotate(-6deg);
    }
    .mobile-toggle{
      display:none;
      width:42px;
      height:42px;
      border:1px solid var(--color-line);
      border-radius:14px;
      background:#fff;
      color:var(--color-ink);
      box-shadow:var(--shadow-sm);
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:4px;
      padding:6px;
      border-radius:999px;
      background:rgba(255,255,255,.68);
      border:1px solid rgba(32,27,22,.08);
    }
    .nav-links a{
      padding:9px 12px;
      border-radius:999px;
      color:#524a42;
      font-size:14px;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
    }
    .nav-links a:hover{
      background:rgba(232,93,42,.08);
      color:var(--color-primary-dark);
    }
    .nav-links a.active{
      background:var(--color-secondary);
      color:#fff;
      box-shadow:0 12px 24px rgba(32,36,44,.18);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nav-search{
      width:128px;
      height:42px;
      border:1px solid rgba(32,27,22,.12);
      border-radius:999px;
      background:#fff;
      padding:0 15px;
      color:var(--color-ink);
      outline:none;
      transition:var(--ease);
    }
    .nav-search:focus{
      width:160px;
      border-color:rgba(232,93,42,.52);
      box-shadow:0 0 0 4px rgba(232,93,42,.12);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      line-height:1.1;
      transition:var(--ease);
      box-shadow:none;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--color-primary),#ff7f45);
      color:#fff!important;
      box-shadow:0 14px 30px rgba(232,93,42,.26);
    }
    .btn-primary:hover,.btn-primary:focus{
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(232,93,42,.34);
      color:#fff!important;
    }
    .btn-dark{
      background:var(--color-secondary);
      color:#fff!important;
      box-shadow:0 16px 32px rgba(32,36,44,.2);
    }
    .btn-dark:hover{transform:translateY(-2px);color:#fff!important}
    .btn-ghost{
      background:rgba(255,255,255,.72);
      border-color:rgba(32,27,22,.14);
      color:var(--color-ink);
    }
    .btn-ghost:hover{
      background:#fff;
      transform:translateY(-2px);
      box-shadow:var(--shadow-sm);
    }
    .page-hero{
      position:relative;
      padding:86px 0 74px;
      overflow:hidden;
    }
    .page-hero:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(247,244,239,.96) 0%,rgba(247,244,239,.72) 46%,rgba(247,244,239,.2) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      opacity:.92;
      z-index:-2;
    }
    .page-hero:after{
      content:"";
      position:absolute;
      right:-180px;
      bottom:-220px;
      width:520px;
      height:520px;
      border-radius:50%;
      background:rgba(232,93,42,.12);
      z-index:-1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:5fr 7fr;
      align-items:center;
      gap:48px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      border:1px solid rgba(232,93,42,.18);
      background:rgba(255,255,255,.76);
      color:var(--color-primary-dark);
      font-weight:900;
      font-size:13px;
      box-shadow:var(--shadow-sm);
    }
    h1,h2,h3,h4,p{margin-top:0}
    h1{
      margin:20px 0 18px;
      font-size:clamp(38px,5vw,68px);
      line-height:1.04;
      letter-spacing:-.055em;
      font-weight:950;
    }
    .hero-sub{
      font-size:18px;
      color:#574f47;
      max-width:590px;
      margin-bottom:28px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:30px;
    }
    .kpi-strip{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      max-width:560px;
    }
    .kpi{
      padding:16px;
      border:1px solid rgba(32,27,22,.1);
      background:rgba(255,255,255,.72);
      border-radius:20px;
      box-shadow:var(--shadow-sm);
    }
    .kpi strong{
      display:block;
      font-size:28px;
      line-height:1.1;
      color:var(--color-primary-dark);
      letter-spacing:-.03em;
    }
    .kpi span{font-size:13px;color:var(--color-muted);font-weight:700}
    .dp-cover{
      position:relative;
      min-height:540px;
      transform:rotate(-2.5deg) translateY(12px);
      border-radius:44px;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      border:10px solid rgba(255,255,255,.62);
      background:#ddd;
    }
    .dp-cover img{
      width:100%;
      height:540px;
      object-fit:cover;
      transform:scale(1.04) rotate(2.5deg);
    }
    .cover-panel{
      position:absolute;
      left:28px;
      bottom:28px;
      right:28px;
      padding:20px;
      border-radius:26px;
      background:rgba(32,36,44,.82);
      color:#fff;
      backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.18);
    }
    .cover-panel small{color:#ffd58f;font-weight:900}
    .cover-panel h3{margin:6px 0 8px;font-size:24px}
    .cover-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .tag,.badge{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      line-height:1;
    }
    .tag{background:rgba(255,255,255,.16);color:#fff}
    .badge{background:rgba(232,93,42,.1);color:var(--color-primary-dark)}
    main{position:relative}
    .section{padding:76px 0}
    .section.tight{padding:56px 0}
    .section-head{
      display:grid;
      grid-template-columns:minmax(0, .78fr) minmax(260px, .42fr);
      gap:34px;
      align-items:end;
      margin-bottom:34px;
    }
    .section-kicker{
      color:var(--color-primary-dark);
      font-weight:950;
      letter-spacing:.08em;
      font-size:13px;
      margin-bottom:10px;
    }
    .section-title{
      font-size:clamp(28px,3vw,44px);
      line-height:1.12;
      letter-spacing:-.04em;
      font-weight:950;
      margin-bottom:0;
    }
    .section-desc{
      color:var(--color-muted);
      margin-bottom:0;
      font-size:16px;
    }
    .pain-layout{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:24px;
      align-items:stretch;
    }
    .pain-card{
      padding:30px;
      border-radius:30px;
      background:#fff;
      border:1px solid rgba(32,27,22,.09);
      box-shadow:var(--shadow-md);
    }
    .pain-card.dark{
      background:var(--color-secondary);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .pain-card.dark:after{
      content:"";
      position:absolute;
      width:220px;height:220px;border-radius:50%;
      background:rgba(246,183,60,.18);
      right:-70px;top:-80px;
    }
    .pain-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
    .pain-list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      color:#5d544c;
      padding:15px;
      border-radius:18px;
      background:rgba(247,244,239,.75);
    }
    .pain-card.dark .pain-list li{
      background:rgba(255,255,255,.1);
      color:rgba(255,255,255,.86);
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      flex:0 0 auto;
      margin-top:8px;
      background:var(--color-primary);
      box-shadow:0 0 0 5px rgba(232,93,42,.12);
    }
    .solution-wrap{
      display:grid;
      grid-template-columns:.76fr 1.24fr;
      gap:26px;
      align-items:start;
    }
    .sticky-note{
      position:sticky;
      top:104px;
      padding:28px;
      border-radius:32px;
      color:#fff;
      background:
        linear-gradient(160deg,rgba(32,36,44,.95),rgba(69,47,37,.92)),
        url('/assets/images/coverpic/cover-4.webp') center/cover;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
    }
    .sticky-note p{color:rgba(255,255,255,.78)}
    .solution-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
    }
    .info-card{
      padding:24px;
      border-radius:28px;
      background:#fff;
      border:1px solid rgba(32,27,22,.09);
      box-shadow:var(--shadow-sm);
      transition:var(--ease);
    }
    .info-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow-md);
      border-color:rgba(232,93,42,.22);
    }
    .icon-bubble{
      width:46px;height:46px;border-radius:17px;
      display:grid;place-items:center;
      margin-bottom:16px;
      background:rgba(232,93,42,.11);
      color:var(--color-primary-dark);
      font-weight:950;
      font-size:20px;
    }
    .info-card h3{font-size:21px;margin-bottom:8px;letter-spacing:-.02em}
    .info-card p{color:var(--color-muted);margin-bottom:0}
    .stat-band{
      border-radius:38px;
      padding:34px;
      color:#fff;
      background:
        linear-gradient(135deg,rgba(232,93,42,.92),rgba(246,183,60,.84)),
        url('/assets/images/backpic/back-3.webp') center/cover;
      box-shadow:var(--shadow-lg);
      overflow:hidden;
    }
    .stat-row{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .stat-item{
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(12px);
    }
    .stat-item strong{
      display:block;
      font-size:38px;
      line-height:1;
      letter-spacing:-.04em;
    }
    .stat-item span{display:block;margin-top:9px;color:rgba(255,255,255,.88);font-weight:800}
    .timeline{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      counter-reset:step;
    }
    .step-card{
      position:relative;
      padding:26px;
      border-radius:28px;
      background:#fff;
      border:1px solid rgba(32,27,22,.09);
      box-shadow:var(--shadow-sm);
      min-height:220px;
    }
    .step-card:before{
      counter-increment:step;
      content:"0" counter(step);
      display:inline-flex;
      width:44px;height:44px;
      align-items:center;justify-content:center;
      border-radius:16px;
      background:var(--color-secondary);
      color:#fff;
      font-weight:950;
      margin-bottom:20px;
    }
    .step-card h3{font-size:20px;margin-bottom:8px}
    .step-card p{color:var(--color-muted);margin-bottom:0}
    .split-feature{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:28px;
      align-items:center;
    }
    .feature-image{
      border-radius:36px;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      transform:rotate(1.2deg);
      border:9px solid #fff;
    }
    .feature-image img{height:440px;width:100%;object-fit:cover}
    .feature-list{
      display:grid;
      gap:14px;
      margin-top:24px;
    }
    .feature-line{
      display:flex;
      gap:14px;
      padding:17px;
      border-radius:20px;
      border:1px solid rgba(32,27,22,.08);
      background:rgba(255,255,255,.78);
    }
    .check{
      width:26px;height:26px;border-radius:50%;
      display:grid;place-items:center;
      flex:0 0 auto;
      background:rgba(13,138,106,.12);
      color:var(--color-green);
      font-weight:950;
    }
    .lead-panel{
      position:relative;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:28px;
      padding:34px;
      border-radius:40px;
      background:#fff;
      border:1px solid rgba(32,27,22,.09);
      box-shadow:var(--shadow-lg);
      overflow:hidden;
    }
    .lead-panel:before{
      content:"";
      position:absolute;
      left:-80px;top:-80px;
      width:240px;height:240px;border-radius:50%;
      background:rgba(232,93,42,.1);
    }
    .lead-copy{position:relative}
    .lead-form{
      position:relative;
      display:grid;
      gap:14px;
      padding:24px;
      border-radius:28px;
      background:linear-gradient(180deg,#fffaf2,#fff);
      border:1px solid rgba(32,27,22,.08);
    }
    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    label{
      display:grid;
      gap:7px;
      font-weight:850;
      color:#3a332d;
      font-size:14px;
    }
    input,select,textarea{
      width:100%;
      border:1px solid rgba(32,27,22,.13);
      border-radius:16px;
      background:#fff;
      color:var(--color-ink);
      padding:13px 14px;
      outline:none;
      transition:var(--ease);
      box-shadow:none;
    }
    textarea{min-height:112px;resize:vertical}
    input:focus,select:focus,textarea:focus{
      border-color:rgba(232,93,42,.55);
      box-shadow:0 0 0 4px rgba(232,93,42,.12);
    }
    .privacy-box{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:16px;
      border-radius:18px;
      background:rgba(13,138,106,.08);
      border:1px solid rgba(13,138,106,.14);
      color:#31564b;
      font-size:14px;
    }
    .scenario-grid{
      display:grid;
      grid-template-columns:1fr 1.35fr;
      gap:24px;
      align-items:stretch;
    }
    .scenario-menu{
      display:grid;
      gap:12px;
    }
    .scenario-menu a{
      padding:18px;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(32,27,22,.09);
      box-shadow:var(--shadow-sm);
      font-weight:900;
    }
    .scenario-menu a:hover{
      background:var(--color-secondary);
      color:#fff;
      transform:translateX(4px);
    }
    .scenario-main{
      padding:34px;
      border-radius:34px;
      color:#fff;
      background:
        linear-gradient(135deg,rgba(32,36,44,.88),rgba(32,36,44,.62)),
        url('/assets/images/coverpic/cover-8.webp') center/cover;
      box-shadow:var(--shadow-lg);
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      min-height:410px;
    }
    .scenario-main p{color:rgba(255,255,255,.82)}
    .faq-wrap{
      display:grid;
      grid-template-columns:.7fr 1.3fr;
      gap:28px;
      align-items:start;
    }
    .accordion{
      background:transparent;
      margin:0;
    }
    .accordion-item{
      margin-bottom:12px;
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(32,27,22,.09);
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .accordion-title{
      border:0!important;
      padding:20px 24px;
      font-size:17px;
      font-weight:950;
      color:var(--color-ink);
    }
    .accordion-title:hover,.accordion-title:focus{
      background:rgba(232,93,42,.06);
      color:var(--color-primary-dark);
    }
    .accordion-title:before{right:22px}
    .accordion-content{
      border:0!important;
      padding:0 24px 22px;
      color:var(--color-muted);
      background:#fff;
    }
    .cta{
      padding:48px;
      border-radius:44px;
      background:
        linear-gradient(135deg,rgba(32,36,44,.95),rgba(69,47,37,.92)),
        url('/assets/images/backpic/back-1.webp') center/cover;
      color:#fff;
      box-shadow:var(--shadow-lg);
      display:grid;
      grid-template-columns:1fr auto;
      gap:24px;
      align-items:center;
      overflow:hidden;
    }
    .cta h2{font-size:clamp(30px,3.5vw,48px);line-height:1.08;margin-bottom:12px;letter-spacing:-.04em}
    .cta p{color:rgba(255,255,255,.78);margin-bottom:0;max-width:720px}
    .footer{
      padding:64px 0 28px;
      background:#17191f;
      color:#fff;
      margin-top:78px;
    }
    .footer .brand{color:#fff;margin-bottom:18px}
    .footer p{color:rgba(255,255,255,.68);max-width:360px;margin-bottom:0}
    .footer-grid{
      display:grid;
      grid-template-columns:.9fr 1.6fr;
      gap:44px;
      padding-bottom:38px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-links{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:22px;
    }
    .footer h4{
      font-size:15px;
      margin-bottom:14px;
      color:#fff;
      font-weight:950;
    }
    .footer-links a{
      display:block;
      color:rgba(255,255,255,.64);
      margin:9px 0;
      font-size:14px;
    }
    .footer-links a:hover{color:#ffd58f;transform:translateX(3px)}
    .copyright{
      padding-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
      color:rgba(255,255,255,.56);
      font-size:13px;
    }
    .copyright a{color:rgba(255,255,255,.7)}
    .copyright a:hover{color:#ffd58f}
    .reveal{
      border:0;
      border-radius:30px;
      padding:0;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      background:#fff;
    }
    .modal-content{padding:30px}
    .close-button{
      color:var(--color-ink);
      right:18px;
      top:12px;
    }
    @media (max-width:1100px){
      .nav-wrap{flex-wrap:wrap;padding:14px 0}
      .nav-links{order:3;width:100%;overflow-x:auto;justify-content:flex-start;border-radius:20px}
      .nav-actions{margin-left:auto}
      .hero-grid,.solution-wrap,.split-feature,.lead-panel,.scenario-grid,.faq-wrap{grid-template-columns:1fr}
      .sticky-note{position:relative;top:auto}
      .dp-cover{min-height:430px}
      .dp-cover img{height:430px}
      .stat-row,.timeline{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,var(--container))}
      .mobile-toggle{display:grid;place-items:center}
      .nav-links{
        display:none;
        width:100%;
        padding:10px;
        border-radius:22px;
        background:#fff;
        box-shadow:var(--shadow-md);
      }
      .nav-links.open{display:grid;grid-template-columns:repeat(2,1fr)}
      .nav-links a{padding:13px 12px;text-align:center}
      .nav-actions{width:100%;justify-content:space-between}
      .nav-search{width:calc(100% - 150px)}
      .nav-search:focus{width:calc(100% - 150px)}
      .page-hero{padding:56px 0 54px}
      .hero-grid{gap:28px}
      .dp-cover{transform:none;border-radius:30px;border-width:6px;min-height:auto}
      .dp-cover img{height:330px;transform:scale(1.02)}
      .cover-panel{left:14px;right:14px;bottom:14px;padding:16px;border-radius:20px}
      .kpi-strip,.solution-grid,.form-row,.section-head{grid-template-columns:1fr}
      .section{padding:56px 0}
      .pain-layout{grid-template-columns:1fr}
      .stat-row,.timeline{grid-template-columns:1fr}
      .cta{grid-template-columns:1fr;padding:32px;border-radius:32px}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:520px){
      h1{font-size:38px}
      .hero-actions .btn,.cta .btn{width:100%}
      .nav-links.open{grid-template-columns:1fr}
      .nav-actions{display:none}
      .section-title{font-size:28px}
      .pain-card,.lead-panel,.stat-band{padding:22px;border-radius:26px}
      .feature-image img{height:300px}
      .scenario-main{min-height:320px}
      .footer-links{grid-template-columns:1fr}
    }

/* roulang page: category1 */
:root {
      --color-primary: #12b981;
      --color-primary-dark: #059669;
      --color-secondary: #ffb020;
      --color-ink: #0f172a;
      --color-text: #273449;
      --color-muted: #64748b;
      --color-soft: #eefbf6;
      --color-bg: #f6f8fb;
      --color-card: #ffffff;
      --color-border: rgba(15, 23, 42, .10);
      --color-danger: #ef4444;
      --color-night: #08111f;
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --shadow-sm: 0 10px 28px rgba(15, 23, 42, .08);
      --shadow-md: 0 18px 54px rgba(15, 23, 42, .13);
      --shadow-glow: 0 22px 70px rgba(18, 185, 129, .26);
      --container: 1180px;
      --ease: all .24s ease;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      color: var(--color-text);
      background:
        radial-gradient(circle at 8% 8%, rgba(18, 185, 129, .12), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(255, 176, 32, .13), transparent 26%),
        var(--color-bg);
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--ease);
    }

    a:hover { color: var(--color-primary-dark); }

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

    button, input, textarea, select {
      font: inherit;
    }

    input, textarea, select {
      outline: none;
    }

    input:focus, textarea:focus, select:focus, button:focus, a:focus {
      outline: 3px solid rgba(18, 185, 129, .28);
      outline-offset: 3px;
    }

    .site-container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .88);
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 8px 30px rgba(15, 23, 42, .05);
      backdrop-filter: blur(18px);
    }

    .nav-wrap {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      font-weight: 900;
      color: var(--color-ink);
      letter-spacing: -.02em;
      font-size: 20px;
    }

    .brand:hover { color: var(--color-ink); transform: translateY(-1px); }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #062015;
      background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
      box-shadow: 0 12px 30px rgba(18, 185, 129, .28);
      font-weight: 900;
    }

    .mobile-toggle {
      display: none;
      margin-left: auto;
      border: 0;
      border-radius: 12px;
      width: 42px;
      height: 42px;
      color: var(--color-ink);
      background: var(--color-soft);
      cursor: pointer;
      transition: var(--ease);
    }

    .mobile-toggle:hover { background: rgba(18, 185, 129, .18); }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }

    .nav-links a {
      padding: 9px 12px;
      border-radius: 999px;
      color: #435166;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .nav-links a:hover {
      background: rgba(18, 185, 129, .10);
      color: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    .nav-links a.active {
      color: #07351f;
      background: linear-gradient(135deg, rgba(18, 185, 129, .18), rgba(255, 176, 32, .18));
      box-shadow: inset 0 0 0 1px rgba(18, 185, 129, .18);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .nav-search {
      width: 136px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      padding: 0 14px;
      color: var(--color-text);
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    .nav-search::placeholder { color: #94a3b8; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      font-weight: 800;
      line-height: 1;
      transition: var(--ease);
      white-space: nowrap;
    }

    .btn-primary {
      color: #061b13;
      background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
      box-shadow: 0 12px 30px rgba(18, 185, 129, .28);
    }

    .btn-primary:hover {
      color: #061b13;
      transform: translateY(-2px);
      box-shadow: var(--shadow-glow);
    }

    .btn-ghost {
      color: var(--color-ink);
      background: rgba(255,255,255,.74);
      border-color: rgba(15, 23, 42, .12);
    }

    .btn-ghost:hover {
      color: var(--color-primary-dark);
      border-color: rgba(18,185,129,.35);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .btn-dark {
      background: #0f172a;
      color: #fff;
      box-shadow: 0 14px 34px rgba(15,23,42,.22);
    }

    .btn-dark:hover {
      color: #fff;
      background: #111827;
      transform: translateY(-2px);
    }

    .section {
      padding: 82px 0;
      position: relative;
    }

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #075e38;
      background: rgba(18, 185, 129, .12);
      border: 1px solid rgba(18, 185, 129, .18);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 6px rgba(18,185,129,.14);
    }

    h1, h2, h3, h4 {
      color: var(--color-ink);
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -.035em;
      margin-top: 0;
    }

    h1 {
      font-size: clamp(38px, 5vw, 68px);
      margin-bottom: 20px;
    }

    h2 {
      font-size: clamp(28px, 3.2vw, 44px);
      margin-bottom: 16px;
    }

    h3 {
      font-size: 22px;
      margin-bottom: 10px;
    }

    p {
      margin-top: 0;
      color: var(--color-muted);
    }

    .lead {
      font-size: 18px;
      color: #475569;
      max-width: 780px;
    }

    .hero-live {
      padding: 62px 0 72px;
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 460px;
      gap: 34px;
      align-items: center;
    }

    .hero-copy {
      padding: 36px 0;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin: 28px 0 26px;
    }

    .quick-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 8px 12px;
      color: #334155;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(15,23,42,.09);
      font-size: 13px;
      font-weight: 800;
    }

    .tag strong { color: var(--color-primary-dark); }

    .live-cover-card {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 568px;
      background: #0f172a;
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(255,255,255,.16);
      isolation: isolate;
    }

    .live-cover-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(180deg, rgba(8,17,31,.12), rgba(8,17,31,.86)),
        url("/assets/images/coverpic/cover-1.webp");
      background-size: cover;
      background-position: center;
      z-index: -2;
    }

    .live-cover-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 74% 22%, rgba(255,176,32,.32), transparent 28%),
                  radial-gradient(circle at 18% 70%, rgba(18,185,129,.34), transparent 30%);
      z-index: -1;
    }

    .cover-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
    }

    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      background: rgba(239, 68, 68, .92);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 900;
      font-size: 13px;
      box-shadow: 0 12px 30px rgba(239,68,68,.25);
    }

    .pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      animation: pulse 1.2s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(.82); opacity: .72; }
      50% { transform: scale(1.2); opacity: 1; }
    }

    .cover-channel {
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 800;
    }

    .cover-body {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
    }

    .match-title {
      color: #fff;
      font-size: 26px;
      margin-bottom: 10px;
    }

    .match-title span {
      color: var(--color-secondary);
    }

    .match-meta {
      color: rgba(255,255,255,.75);
      margin-bottom: 18px;
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 16px 0 20px;
    }

    .countdown-item {
      border-radius: 18px;
      padding: 14px 10px;
      text-align: center;
      background: rgba(255,255,255,.13);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(12px);
    }

    .countdown-item b {
      display: block;
      color: #fff;
      font-size: 25px;
      line-height: 1;
    }

    .countdown-item span {
      display: block;
      margin-top: 6px;
      color: rgba(255,255,255,.68);
      font-size: 12px;
      font-weight: 700;
    }

    .reminder-box {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 12px;
      border-radius: 20px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.17);
      backdrop-filter: blur(12px);
    }

    .reminder-box input {
      height: 46px;
      border: 0;
      border-radius: 999px;
      padding: 0 16px;
      background: rgba(255,255,255,.92);
      color: var(--color-ink);
    }

    .pain-strip {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      align-items: stretch;
    }

    .question-panel {
      border-radius: var(--radius-lg);
      padding: 34px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(8,17,31,.92), rgba(10,34,28,.9)),
        url("/assets/images/backpic/back-2.webp");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .question-panel h2, .question-panel p { color: #fff; }
    .question-panel p { color: rgba(255,255,255,.76); }

    .question-list {
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .question-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.13);
      color: rgba(255,255,255,.88);
      font-weight: 700;
    }

    .question-list li::before {
      content: "？";
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-secondary);
      color: #1f1600;
      font-weight: 900;
    }

    .side-note {
      border-radius: var(--radius-lg);
      background: #fff;
      padding: 30px;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
    }

    .mini-score-list {
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .mini-score-list li {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 14px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid rgba(15,23,42,.08);
    }

    .status {
      display: inline-flex;
      justify-content: center;
      min-width: 54px;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 900;
      color: #065f46;
      background: rgba(18,185,129,.14);
    }

    .status.hot {
      color: #991b1b;
      background: rgba(239,68,68,.13);
    }

    .split-head {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 28px;
      align-items: end;
      margin-bottom: 32px;
    }

    .muted-box {
      padding: 22px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.7);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
    }

    .solution-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .solution-card {
      position: relative;
      padding: 26px;
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--ease);
    }

    .solution-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      border-color: rgba(18,185,129,.25);
    }

    .solution-card::after {
      content: "";
      position: absolute;
      right: -40px;
      top: -40px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(18,185,129,.08);
    }

    .icon-bubble {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: #052e20;
      background: linear-gradient(135deg, rgba(255,176,32,.86), rgba(18,185,129,.88));
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 12px 24px rgba(18,185,129,.18);
    }

    .feature-row {
      display: grid;
      grid-template-columns: 430px 1fr;
      gap: 34px;
      align-items: center;
    }

    .image-card {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(255,255,255,.55);
      min-height: 420px;
    }

    .image-card img {
      width: 100%;
      height: 420px;
      object-fit: cover;
    }

    .image-card .overlay {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 20px;
      padding: 18px;
      border-radius: 20px;
      color: #fff;
      background: rgba(8,17,31,.78);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,.14);
    }

    .overlay strong {
      display: block;
      font-size: 24px;
      line-height: 1.1;
      color: var(--color-secondary);
    }

    .timeline {
      display: grid;
      gap: 14px;
      margin: 24px 0 0;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 16px;
      padding: 18px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: 0 8px 20px rgba(15,23,42,.05);
    }

    .timeline-time {
      color: var(--color-primary-dark);
      font-weight: 900;
    }

    .timeline-item h3 {
      font-size: 18px;
      margin-bottom: 4px;
    }

    .data-zone {
      border-radius: 34px;
      padding: 42px;
      background: var(--color-night);
      color: #fff;
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow-md);
    }

    .data-zone::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 16% 12%, rgba(18,185,129,.28), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(255,176,32,.22), transparent 30%);
      pointer-events: none;
    }

    .data-zone > * { position: relative; }
    .data-zone h2, .data-zone h3 { color: #fff; }
    .data-zone p { color: rgba(255,255,255,.72); }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 28px;
    }

    .stat-card {
      padding: 22px;
      border-radius: 22px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
    }

    .stat-card strong {
      display: block;
      color: var(--color-secondary);
      font-size: 34px;
      line-height: 1;
      letter-spacing: -.04em;
      margin-bottom: 8px;
    }

    .scene-layout {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 22px;
      align-items: start;
    }

    .scene-card {
      padding: 26px;
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      transition: var(--ease);
    }

    .scene-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

    .scene-card.large {
      min-height: 100%;
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.96)),
        url("/assets/images/coverpic/cover-5.webp");
      background-size: cover;
      background-position: center;
    }

    .scene-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .check-list {
      padding: 0;
      margin: 18px 0 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .check-list li {
      position: relative;
      padding-left: 28px;
      color: #475569;
      font-weight: 650;
    }

    .check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 1px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #052e20;
      background: rgba(18,185,129,.22);
      font-size: 12px;
      font-weight: 900;
    }

    .process-band {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }

    .step-card {
      padding: 22px;
      border-radius: 24px;
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }

    .step-num {
      display: inline-flex;
      width: 36px;
      height: 36px;
      border-radius: 14px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: #062015;
      background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
      font-weight: 900;
    }

    .step-card h3 { font-size: 18px; }

    .lead-panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 26px;
      align-items: stretch;
      border-radius: 34px;
      padding: 30px;
      background: linear-gradient(135deg, rgba(18,185,129,.12), rgba(255,176,32,.12));
      border: 1px solid rgba(18,185,129,.16);
      box-shadow: var(--shadow-sm);
    }

    .form-card {
      background: #fff;
      border-radius: 28px;
      padding: 26px;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .field {
      display: grid;
      gap: 7px;
      margin-bottom: 14px;
    }

    .field.full { grid-column: 1 / -1; }

    .field label {
      font-size: 13px;
      font-weight: 900;
      color: var(--color-ink);
    }

    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid rgba(15,23,42,.12);
      border-radius: 16px;
      background: #f8fafc;
      color: var(--color-ink);
      padding: 12px 14px;
      transition: var(--ease);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }

    .field textarea {
      min-height: 108px;
      resize: vertical;
    }

    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: rgba(18,185,129,.55);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(18,185,129,.10);
      outline: none;
    }

    .privacy-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px;
      margin: 12px 0 18px;
      border-radius: 18px;
      color: #475569;
      background: #f8fafc;
      border: 1px solid rgba(15,23,42,.08);
      font-size: 13px;
    }

    .privacy-note input {
      margin-top: 6px;
      accent-color: var(--color-primary);
    }

    .proof-list {
      display: grid;
      gap: 14px;
      margin-top: 26px;
    }

    .proof-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(15,23,42,.08);
    }

    .proof-item b {
      flex: 0 0 38px;
      height: 38px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #052e20;
      background: rgba(18,185,129,.18);
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }

    .compare-card {
      padding: 28px;
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
    }

    .compare-card.highlight {
      border-color: rgba(18,185,129,.28);
      background: linear-gradient(180deg, #fff, #f1fff9);
    }

    .compare-card ul {
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .compare-card li {
      padding: 12px 14px;
      border-radius: 16px;
      background: #f8fafc;
      color: #475569;
      font-weight: 650;
    }

    .compare-card.highlight li {
      background: rgba(18,185,129,.10);
      color: #164e36;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 30px;
      align-items: start;
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border-radius: 22px;
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      padding: 20px 22px;
      border: 0;
      background: transparent;
      color: var(--color-ink);
      font-weight: 900;
      text-align: left;
      cursor: pointer;
    }

    .faq-question span:last-child {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #064e3b;
      background: rgba(18,185,129,.14);
      transition: var(--ease);
      flex: 0 0 auto;
    }

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

    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-question span:last-child { transform: rotate(45deg); background: rgba(255,176,32,.22); }

    .cta {
      padding: 58px 0;
    }

    .cta-box {
      position: relative;
      border-radius: 36px;
      padding: 42px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(8,17,31,.92), rgba(6,44,32,.9)),
        url("/assets/images/backpic/back-3.webp");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow-md);
      color: #fff;
    }

    .cta-box h2, .cta-box p { color: #fff; }
    .cta-box p { color: rgba(255,255,255,.74); max-width: 740px; }

    .cta-row {
      display: flex;
      justify-content: space-between;
      gap: 22px;
      align-items: end;
      position: relative;
    }

    .cta-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .footer {
      padding: 56px 0 28px;
      color: rgba(255,255,255,.78);
      background: #07111f;
    }

    .footer .brand { color: #fff; margin-bottom: 16px; }
    .footer p { color: rgba(255,255,255,.64); max-width: 360px; }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .footer-links h4 {
      color: #fff;
      font-size: 15px;
      margin-bottom: 14px;
      letter-spacing: 0;
    }

    .footer-links a {
      display: block;
      color: rgba(255,255,255,.62);
      margin: 8px 0;
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--color-secondary);
      transform: translateX(3px);
    }

    .copyright {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      padding-top: 22px;
      font-size: 13px;
      color: rgba(255,255,255,.56);
    }

    .copyright a { color: rgba(255,255,255,.72); }
    .copyright a:hover { color: var(--color-secondary); }

    .reveal {
      border-radius: 28px;
      padding: 30px;
      border: 1px solid rgba(18,185,129,.18);
      box-shadow: var(--shadow-md);
    }

    .modal-close-button {
      color: var(--color-ink);
      font-size: 30px;
      cursor: pointer;
    }

    @media (max-width: 1120px) {
      .nav-wrap { flex-wrap: wrap; padding: 12px 0; }
      .nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .hero-grid, .feature-row, .lead-panel, .faq-layout {
        grid-template-columns: 1fr;
      }
      .live-cover-card { min-height: 500px; }
      .stats-grid, .process-band { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .site-container { width: min(100% - 28px, var(--container)); }
      .topbar { position: sticky; }
      .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        overflow: visible;
        padding: 8px 0 12px;
      }
      .nav-links.open { display: flex; }
      .nav-links a { width: 100%; border-radius: 14px; }
      .nav-actions { width: 100%; justify-content: space-between; }
      .nav-search { flex: 1; width: auto; }
      .hero-live { padding: 38px 0 54px; }
      .hero-copy { padding: 10px 0; }
      .pain-strip, .split-head, .scene-layout, .compare-grid {
        grid-template-columns: 1fr;
      }
      .solution-grid, .scene-list, .form-grid {
        grid-template-columns: 1fr;
      }
      .section { padding: 58px 0; }
      .question-panel, .data-zone, .cta-box, .lead-panel { padding: 24px; border-radius: 26px; }
      .countdown { grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .countdown-item { padding: 11px 6px; border-radius: 14px; }
      .countdown-item b { font-size: 20px; }
      .reminder-box { grid-template-columns: 1fr; }
      .footer-links { grid-template-columns: repeat(2, 1fr); }
      .cta-row { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 520px) {
      .brand { font-size: 18px; }
      .brand-mark { width: 34px; height: 34px; border-radius: 12px; }
      h1 { font-size: 36px; }
      h2 { font-size: 28px; }
      .live-cover-card { min-height: 470px; border-radius: 24px; }
      .cover-top, .cover-body { left: 16px; right: 16px; }
      .cover-top { padding: 16px; }
      .match-title { font-size: 22px; }
      .stats-grid, .process-band { grid-template-columns: 1fr; }
      .timeline-item { grid-template-columns: 1fr; gap: 4px; }
      .footer-links { grid-template-columns: 1fr; }
      .btn { width: 100%; }
      .hero-actions, .cta-actions { width: 100%; }
      .nav-actions .btn { width: auto; }
    }

/* roulang page: category5 */
:root{
      --ink:#172433;
      --muted:#617083;
      --paper:#ffffff;
      --mist:#f4f7f6;
      --mint:#e3f4ee;
      --line:#dce5e2;
      --green:#0d7c62;
      --green-dark:#075743;
      --lime:#d9f047;
      --orange:#f48a3d;
      --navy:#102a3b;
      --shadow:0 16px 42px rgba(17,42,50,.10);
      --shadow-sm:0 8px 22px rgba(17,42,50,.08);
      --radius:18px;
      --radius-sm:12px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
    img{display:block;max-width:100%;height:auto}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(217,240,71,.9);outline-offset:3px}
    .site-container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(220,229,226,.9);backdrop-filter:blur(14px)}
    .nav-wrap{min-height:78px;display:flex;align-items:center;gap:20px}
    .brand{display:inline-flex;align-items:center;flex:0 0 auto;gap:9px;color:var(--navy);font-size:20px;font-weight:800;letter-spacing:.02em}
    .brand-mark{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:var(--green);color:#fff;font-size:18px;font-weight:900;box-shadow:0 6px 14px rgba(13,124,98,.22)}
    .nav-links{display:flex;align-items:center;justify-content:center;gap:3px;flex:1;white-space:nowrap}
    .nav-links a{position:relative;padding:9px 8px;border-radius:8px;color:#4d5a68;font-size:13px;font-weight:700}
    .nav-links a:hover{color:var(--green);background:var(--mint)}
    .nav-links a.active{color:var(--green-dark);background:#e4f5ee}
    .nav-links a.active:after{position:absolute;right:11px;bottom:3px;left:11px;height:2px;border-radius:5px;background:var(--green);content:""}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-search{width:115px;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc;color:var(--ink);font-size:13px;transition:border .2s ease,box-shadow .2s ease,width .2s ease}
    .nav-search:focus{width:145px;border-color:var(--green);box-shadow:0 0 0 3px rgba(13,124,98,.12);outline:0}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:800;line-height:1;white-space:nowrap}
    .btn-primary{background:var(--green);color:#fff;box-shadow:0 9px 18px rgba(13,124,98,.18)}
    .btn-primary:hover{background:var(--green-dark);color:#fff;transform:translateY(-2px);box-shadow:0 13px 24px rgba(13,124,98,.28)}
    .btn-light{border-color:#cadbd5;background:#fff;color:var(--green-dark)}
    .btn-light:hover{border-color:var(--green);background:var(--mint);color:var(--green-dark);transform:translateY(-2px)}
    .btn-dark{background:var(--navy);color:#fff}
    .btn-dark:hover{background:#071e2c;color:#fff;transform:translateY(-2px)}
    .mobile-toggle{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--green-dark);font-size:20px}
    .crumb-bar{border-bottom:1px solid var(--line);background:#fbfdfc}
    .breadcrumbs{display:flex;align-items:center;gap:9px;min-height:43px;color:#74808d;font-size:13px}
    .breadcrumbs a:hover{color:var(--green)}
    .crumb-sep{color:#b0babd}
    .page-banner{position:relative;overflow:hidden;min-height:270px;background:#dfeee9 url("/assets/images/backpic/back-2.webp") center/cover no-repeat}
    .page-banner:before{position:absolute;inset:0;background:linear-gradient(90deg,rgba(234,247,241,.96) 0%,rgba(234,247,241,.87) 51%,rgba(234,247,241,.26) 100%);content:""}
    .banner-inner{position:relative;display:flex;align-items:center;min-height:270px}
    .banner-copy{max-width:700px;padding:40px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:15px;color:var(--green-dark);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{width:26px;height:2px;background:var(--green);content:""}
    h1,h2,h3,h4,p{margin-top:0}
    h1{margin-bottom:13px;color:var(--navy);font-size:clamp(32px,4vw,51px);line-height:1.18;letter-spacing:-.04em;font-weight:900}
    .banner-copy p{max-width:630px;margin:0;color:#405a5c;font-size:17px;line-height:1.9}
    main{overflow:hidden}
    .section{padding:76px 0}
    .section-soft{background:var(--mist)}
    .section-deep{background:var(--navy);color:#eff8f5}
    .section-head{margin-bottom:30px}
    .section-head .kicker{margin-bottom:8px;color:var(--green);font-size:13px;font-weight:900;letter-spacing:.08em}
    .section-head h2{margin-bottom:10px;color:var(--navy);font-size:clamp(25px,3vw,36px);line-height:1.25;font-weight:900;letter-spacing:-.03em}
    .section-head p{max-width:690px;margin:0;color:var(--muted);font-size:16px}
    .question-strip{margin-top:-1px;padding:28px 0;background:var(--navy);color:#fff}
    .question-grid{display:grid;grid-template-columns:minmax(260px,1.15fr) repeat(3,minmax(150px,.75fr));gap:18px;align-items:stretch}
    .question-intro{padding:6px 20px 6px 0}
    .question-intro h2{margin:0 0 7px;color:#fff;font-size:24px;line-height:1.35;font-weight:900}
    .question-intro p{margin:0;color:#b9cfca;font-size:14px;line-height:1.75}
    .question-card{padding:17px 18px;border:1px solid rgba(202,230,219,.18);border-radius:var(--radius-sm);background:rgba(255,255,255,.06)}
    .question-card strong{display:block;margin-bottom:4px;color:var(--lime);font-size:15px}
    .question-card span{color:#c4d4d2;font-size:13px;line-height:1.6}
    .analysis-layout{display:grid;grid-template-columns:.94fr 1.06fr;gap:55px;align-items:center}
    .feature-image{position:relative}
    .feature-image img{width:100%;height:450px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
    .image-note{position:absolute;right:-18px;bottom:22px;width:204px;padding:18px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm)}
    .image-note b{display:block;color:var(--green-dark);font-size:22px;line-height:1.2}
    .image-note span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.55}
    .copy-block h2{margin-bottom:15px;color:var(--navy);font-size:clamp(26px,3vw,37px);line-height:1.28;font-weight:900;letter-spacing:-.03em}
    .copy-block>p{color:var(--muted);font-size:16px}
    .check-list{display:grid;gap:13px;margin:25px 0 28px;padding:0;list-style:none}
    .check-list li{position:relative;padding:13px 15px 13px 48px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#3d4c5b;font-size:14px}
    .check-list li:before{position:absolute;top:15px;left:15px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--mint);color:var(--green);font-size:13px;font-weight:900;content:"✓"}
    .solution-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
    .solution-card{min-height:250px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 6px 18px rgba(18,48,51,.035);transition:transform .25s ease,box-shadow .25s ease,border .25s ease}
    .solution-card:hover{border-color:#9ccbbd;transform:translateY(-5px);box-shadow:var(--shadow)}
    .solution-card.featured{background:var(--green);border-color:var(--green);color:#fff}
    .card-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;border-radius:13px;background:var(--mint);color:var(--green-dark);font-size:21px;font-weight:900}
    .featured .card-icon{background:rgba(255,255,255,.16);color:var(--lime)}
    .solution-card h3{margin-bottom:10px;color:var(--navy);font-size:21px;line-height:1.35;font-weight:900}
    .solution-card p{margin-bottom:15px;color:var(--muted);font-size:14px;line-height:1.75}
    .featured h3,.featured p{color:#fff}
    .card-link{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:14px;font-weight:800}
    .featured .card-link{color:var(--lime)}
    .card-link:hover{gap:11px}
    .data-band{padding:62px 0;background:#edf6f2}
    .data-grid{display:grid;grid-template-columns:1.1fr repeat(3,.63fr);gap:1px;border:1px solid #cae0d7;border-radius:var(--radius);overflow:hidden;background:#cae0d7}
    .data-intro,.metric{min-height:175px;padding:27px;background:#f8fdfb}
    .data-intro{background:var(--green-dark);color:#fff}
    .data-intro h2{margin-bottom:10px;color:#fff;font-size:27px;line-height:1.3;font-weight:900}
    .data-intro p{margin:0;color:#c8e5dc;font-size:14px;line-height:1.75}
    .metric b{display:block;margin-bottom:7px;color:var(--green-dark);font-size:36px;line-height:1;font-weight:900}
    .metric span{color:#536470;font-size:14px;font-weight:700}
    .metric small{display:block;margin-top:8px;color:#81908e;font-size:12px;line-height:1.55}
    .scene-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:start}
    .scene-aside{position:sticky;top:105px;padding:29px;border-radius:var(--radius);background:var(--navy);color:#fff}
    .scene-aside h2{margin-bottom:13px;color:#fff;font-size:30px;line-height:1.3;font-weight:900}
    .scene-aside p{margin-bottom:21px;color:#c8d8d5;font-size:14px}
    .scene-list{display:grid;gap:13px}
    .scene-row{display:grid;grid-template-columns:50px 1fr;gap:18px;align-items:center;padding:21px 24px;border-bottom:1px solid var(--line);background:#fff;transition:background .2s ease,transform .2s ease}
    .scene-row:first-child{border-radius:14px 14px 0 0}
    .scene-row:last-child{border-bottom:0;border-radius:0 0 14px 14px}
    .scene-row:hover{background:#f1faf6;transform:translateX(5px)}
    .scene-num{color:#9ec9bb;font-size:22px;font-weight:900}
    .scene-row h3{margin-bottom:4px;color:var(--navy);font-size:18px;font-weight:900}
    .scene-row p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
    .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .process-item{position:relative;padding:24px 20px 18px;border-top:2px solid #b8dcd0}
    .process-item:after{position:absolute;top:-5px;right:-10px;width:18px;height:8px;border-radius:10px;background:var(--green);content:""}
    .process-item:last-child:after{display:none}
    .step{display:inline-block;margin-bottom:14px;color:var(--green);font-size:13px;font-weight:900;letter-spacing:.08em}
    .process-item h3{margin-bottom:9px;color:var(--navy);font-size:18px;font-weight:900}
    .process-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
    .report-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
    .report-copy{padding:46px;background:#f5faf8}
    .report-copy h2{margin-bottom:14px;color:var(--navy);font-size:31px;line-height:1.32;font-weight:900}
    .report-copy>p{color:var(--muted)}
    .insight-list{margin:24px 0 28px;padding:0;list-style:none}
    .insight-list li{display:flex;gap:12px;align-items:flex-start;margin:13px 0;color:#445463;font-size:14px}
    .insight-dot{flex:0 0 auto;width:9px;height:9px;margin-top:8px;border-radius:50%;background:var(--orange)}
    .report-visual{position:relative;min-height:380px;background:url("/assets/images/coverpic/cover-8.webp") center/cover no-repeat}
    .report-visual:before{position:absolute;inset:0;background:linear-gradient(150deg,rgba(7,45,43,.25),rgba(7,45,43,.78));content:""}
    .scoreboard{position:absolute;right:28px;bottom:27px;left:28px;padding:22px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(8,34,37,.76);backdrop-filter:blur(8px);color:#fff}
    .scoreboard-top{display:flex;justify-content:space-between;gap:15px;margin-bottom:17px;color:#c3d8d2;font-size:12px}
    .teams{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .teams strong{font-size:16px}
    .versus{display:grid;place-items:center;width:44px;height:34px;border-radius:8px;background:var(--lime);color:#17382f;font-size:12px;font-weight:900}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .news-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
    .news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .news-card img{width:100%;height:170px;object-fit:cover}
    .news-body{padding:21px}
    .news-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:11px;color:#82918e;font-size:12px}
    .news-body h3{margin-bottom:10px;color:var(--navy);font-size:18px;line-height:1.45;font-weight:900}
    .news-body p{margin-bottom:16px;color:var(--muted);font-size:13px;line-height:1.72}
    .faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px}
    .faq-intro h2{margin-bottom:13px;color:#fff;font-size:34px;line-height:1.28;font-weight:900}
    .faq-intro p{color:#b7cfca}
    .faq-intro .btn{margin-top:15px}
    .faq-list{display:grid;gap:11px}
    details{border:1px solid rgba(202,230,219,.22);border-radius:12px;background:rgba(255,255,255,.055);transition:background .2s ease}
    details[open]{background:rgba(255,255,255,.10)}
    summary{position:relative;padding:17px 50px 17px 19px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;list-style:none}
    summary::-webkit-details-marker{display:none}
    summary:after{position:absolute;top:14px;right:18px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(217,240,71,.14);color:var(--lime);font-size:19px;line-height:1;content:"+"}
    details[open] summary:after{content:"−"}
    details p{margin:0;padding:0 19px 18px;color:#c5d7d3;font-size:14px;line-height:1.8}
    .lead-section{padding:72px 0;background:#edf7f3}
    .lead-box{display:grid;grid-template-columns:1fr .95fr;gap:38px;padding:43px 48px;border-radius:var(--radius);background:var(--green);box-shadow:0 18px 40px rgba(13,124,98,.18)}
    .lead-copy h2{margin-bottom:12px;color:#fff;font-size:32px;line-height:1.3;font-weight:900}
    .lead-copy p{margin:0;color:#d5f0e7;font-size:15px}
    .privacy-note{display:flex;align-items:flex-start;gap:8px;margin-top:20px;color:#c2e9db;font-size:12px;line-height:1.65}
    .privacy-note i{display:grid;place-items:center;flex:0 0 auto;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.19);font-style:normal;font-size:11px}
    .lead-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-self:center}
    .lead-form input{width:100%;height:47px;padding:0 14px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:#fff;color:var(--ink);font-size:14px}
    .lead-form input::placeholder{color:#87928f}
    .lead-form .btn{min-height:47px;background:var(--lime);color:#17382f}
    .lead-form .btn:hover{background:#eefb8e;transform:translateY(-2px)}
    .form-feedback{grid-column:1/-1;min-height:18px;margin:1px 0 0;color:#d5f0e7;font-size:12px}
    .footer{padding:58px 0 0;background:#102a3b;color:#c7d7d4}
    .footer-grid{display:grid;grid-template-columns:1.3fr 2.2fr;gap:70px;padding-bottom:43px}
    .footer .brand{color:#fff}
    .footer .brand-mark{background:var(--lime);color:#17382f}
    .footer p{max-width:380px;margin:17px 0 0;color:#adc3bf;font-size:14px;line-height:1.8}
    .footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
    .footer-links h4{margin:3px 0 13px;color:#fff;font-size:14px;font-weight:800}
    .footer-links a{display:block;margin:8px 0;color:#afc5c0;font-size:13px}
    .footer-links a:hover{color:var(--lime);transform:translateX(3px)}
    .copyright{display:flex;flex-wrap:wrap;gap:8px 23px;padding:18px 0;border-top:1px solid rgba(202,230,219,.14);color:#8ea6a1;font-size:12px}
    .copyright a:hover{color:var(--lime)}
    @media (max-width:1100px){
      .nav-links{gap:0}.nav-links a{padding:9px 6px;font-size:12px}.nav-search{display:none}
      .analysis-layout{gap:35px}.solution-grid{grid-template-columns:1fr 1fr}.solution-card.featured{grid-column:span 2}
      .footer-grid{gap:40px}
    }
    @media (max-width:850px){
      .nav-wrap{min-height:68px;flex-wrap:wrap}.mobile-toggle{display:block}.nav-actions{margin-left:auto;margin-right:50px}.nav-actions .btn{min-height:39px;padding:0 13px;font-size:13px}
      .nav-links{display:none;order:4;flex-basis:100%;padding:3px 0 13px;justify-content:flex-start;overflow-x:auto}.nav-links.open{display:flex}.nav-links a{font-size:13px}
      .page-banner,.banner-inner{min-height:238px}.question-grid{grid-template-columns:1fr 1fr}.question-intro{grid-column:1/-1;padding-right:0}
      .analysis-layout,.scene-wrap,.faq-layout,.lead-box{grid-template-columns:1fr}.feature-image img{height:350px}.scene-aside{position:static}.data-grid{grid-template-columns:1fr 1fr}.data-intro{grid-column:1/-1}.process-grid{grid-template-columns:1fr 1fr}.report-panel{grid-template-columns:1fr}.report-visual{min-height:315px}.footer-grid{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(4,1fr)}
    }
    @media (max-width:560px){
      .site-container{width:min(calc(100% - 32px),var(--container))}.brand{font-size:18px}.brand-mark{width:30px;height:30px}.nav-actions{margin-right:0}.nav-actions .btn{padding:0 11px}
      .breadcrumbs{overflow:hidden;white-space:nowrap}.page-banner,.banner-inner{min-height:254px}.banner-copy{padding:28px 0}.banner-copy p{font-size:15px}.section{padding:54px 0}
      .question-grid,.solution-grid,.data-grid,.process-grid,.news-grid{grid-template-columns:1fr}.solution-card.featured{grid-column:auto}.question-card{padding:14px}.feature-image img{height:275px}.image-note{right:10px;bottom:12px;width:165px;padding:13px}
      .metric{min-height:136px}.scene-row{grid-template-columns:39px 1fr;padding:18px 15px}.scene-row:hover{transform:none}.report-copy{padding:30px 23px}.scoreboard{right:15px;bottom:15px;left:15px;padding:16px}.teams strong{font-size:14px}
      .lead-box{gap:24px;padding:30px 22px}.lead-copy h2{font-size:27px}.lead-form{grid-template-columns:1fr}.lead-form .btn{width:100%}.footer{padding-top:44px}.footer-links{grid-template-columns:1fr 1fr;gap:20px}.copyright{display:grid;gap:7px}.faq-intro h2{font-size:29px}
    }

/* roulang page: category7 */
:root{
      --primary:#18b47b;
      --primary-dark:#0b8f62;
      --primary-soft:#e8fbf3;
      --accent:#ffb020;
      --accent-soft:#fff3d8;
      --ink:#15211d;
      --muted:#62736d;
      --light:#f7fbf9;
      --card:#ffffff;
      --line:#dce9e4;
      --dark:#10251e;
      --dark-2:#17342b;
      --danger:#ff5b62;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:32px;
      --shadow:0 18px 50px rgba(16,37,30,.12);
      --shadow-soft:0 12px 34px rgba(16,37,30,.08);
      --container:1180px;
      --transition:.22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#f8fffc 0%,#f4faf7 44%,#ffffff 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    input,textarea{outline:none}
    .site-container{
      width:min(calc(100% - 32px),var(--container));
      margin:0 auto;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(255,255,255,.88);
      border-bottom:1px solid rgba(220,233,228,.9);
      backdrop-filter:blur(18px);
      box-shadow:0 8px 26px rgba(16,37,30,.05);
    }
    .nav-wrap{
      min-height:78px;
      display:flex;
      align-items:center;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--ink);
      white-space:nowrap;
      font-size:20px;
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--primary),#0d6b59);
      box-shadow:0 10px 26px rgba(24,180,123,.28);
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
    }
    .nav-links a{
      padding:10px 12px;
      border-radius:999px;
      color:#3d5049;
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
    }
    .nav-links a:hover{
      color:var(--primary-dark);
      background:var(--primary-soft);
      transform:translateY(-1px);
    }
    .nav-links a.active{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 10px 22px rgba(24,180,123,.24);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nav-search{
      width:138px;
      height:42px;
      border:1px solid var(--line);
      border-radius:999px;
      padding:0 16px;
      background:#fff;
      color:var(--ink);
      box-shadow:0 4px 12px rgba(16,37,30,.04) inset;
    }
    .nav-search:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(24,180,123,.12);
    }
    .mobile-toggle{
      display:none;
      width:42px;
      height:42px;
      border:0;
      border-radius:14px;
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-weight:900;
      cursor:pointer;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      cursor:pointer;
      transition:var(--transition);
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      color:#fff;
      box-shadow:0 14px 28px rgba(24,180,123,.25);
    }
    .btn-primary:hover,.btn-primary:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 34px rgba(24,180,123,.34);
    }
    .btn-secondary{
      background:#fff;
      color:var(--primary-dark);
      border-color:var(--line);
      box-shadow:var(--shadow-soft);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      color:var(--primary-dark);
      transform:translateY(-2px);
      border-color:rgba(24,180,123,.45);
    }
    .btn-warning{
      background:linear-gradient(135deg,#ffc04d,var(--accent));
      color:#3b2600;
      box-shadow:0 14px 28px rgba(255,176,32,.28);
    }
    .btn-warning:hover{
      color:#3b2600;
      transform:translateY(-2px) scale(1.01);
    }
    .hero{
      position:relative;
      padding:74px 0 48px;
      overflow:hidden;
      background:
        radial-gradient(circle at 12% 20%,rgba(255,176,32,.22),transparent 26%),
        radial-gradient(circle at 90% 10%,rgba(24,180,123,.18),transparent 30%),
        linear-gradient(180deg,#f9fffc 0%,#eefaf5 100%);
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:linear-gradient(rgba(16,37,30,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,37,30,.04) 1px,transparent 1px);
      background-size:38px 38px;
      mask-image:linear-gradient(180deg,#000,transparent 82%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);
      align-items:center;
      gap:42px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid rgba(24,180,123,.25);
      border-radius:999px;
      background:rgba(255,255,255,.76);
      color:var(--primary-dark);
      font-size:14px;
      font-weight:800;
      box-shadow:0 8px 18px rgba(16,37,30,.06);
    }
    .hero h1{
      margin:20px 0 16px;
      font-size:clamp(34px,5vw,64px);
      line-height:1.08;
      letter-spacing:-.05em;
      color:var(--dark);
      font-weight:950;
    }
    .hero h1 span{color:var(--primary-dark)}
    .hero-sub{
      max-width:720px;
      margin:0 0 26px;
      color:#4d6059;
      font-size:18px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
      margin-bottom:28px;
    }
    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      color:var(--muted);
      font-size:14px;
    }
    .mini-tag,.badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      font-size:13px;
      font-weight:800;
      background:#fff;
      border:1px solid var(--line);
      color:#3b5149;
    }
    .coupon-wall{
      position:relative;
      padding:22px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.76);
      border:1px solid rgba(255,255,255,.82);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }
    .coupon-wall:before{
      content:"";
      position:absolute;
      right:-30px;
      top:-26px;
      width:120px;
      height:120px;
      border-radius:38px;
      background:rgba(255,176,32,.2);
      transform:rotate(18deg);
    }
    .main-coupon{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      background:
        linear-gradient(135deg,rgba(16,37,30,.88),rgba(13,107,89,.9)),
        url('/assets/images/backpic/back-2.webp') center/cover;
      color:#fff;
      padding:28px;
      min-height:280px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .main-coupon:after{
      content:"";
      position:absolute;
      width:140px;
      height:140px;
      border-radius:50%;
      right:-55px;
      top:58px;
      background:#fff;
      opacity:.14;
      box-shadow:-310px 0 0 rgba(255,255,255,.12);
    }
    .coupon-top{
      position:relative;
      display:flex;
      justify-content:space-between;
      gap:16px;
      z-index:1;
    }
    .coupon-title{
      font-size:18px;
      font-weight:900;
      margin:0 0 10px;
    }
    .coupon-value{
      font-size:54px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
      color:#ffe08a;
      margin:6px 0;
    }
    .coupon-desc{
      color:rgba(255,255,255,.82);
      margin:0;
      max-width:320px;
    }
    .coupon-code{
      align-self:flex-start;
      padding:9px 12px;
      border:1px dashed rgba(255,255,255,.6);
      border-radius:14px;
      background:rgba(255,255,255,.1);
      font-weight:900;
      white-space:nowrap;
    }
    .coupon-bottom{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-top:24px;
    }
    .small-coupons{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:14px;
    }
    .small-coupon{
      padding:16px;
      border-radius:20px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(16,37,30,.07);
    }
    .small-coupon strong{
      display:block;
      font-size:18px;
      color:var(--dark);
      margin-bottom:4px;
    }
    .small-coupon span{
      color:var(--muted);
      font-size:13px;
    }
    main{overflow:hidden}
    .section{
      padding:76px 0;
    }
    .section-tight{padding:54px 0}
    .section-head{
      max-width:760px;
      margin-bottom:32px;
    }
    .section-head.wide{max-width:960px}
    .section-kicker{
      color:var(--primary-dark);
      font-weight:900;
      letter-spacing:.08em;
      font-size:13px;
      margin-bottom:10px;
    }
    .section-title{
      margin:0 0 12px;
      font-size:clamp(28px,3.6vw,44px);
      line-height:1.18;
      letter-spacing:-.04em;
      font-weight:950;
      color:var(--dark);
    }
    .section-desc{
      margin:0;
      color:var(--muted);
      font-size:17px;
    }
    .pain-layout{
      display:grid;
      grid-template-columns:.86fr 1.14fr;
      gap:26px;
      align-items:stretch;
    }
    .question-panel{
      border-radius:var(--radius-lg);
      background:var(--dark);
      color:#fff;
      padding:34px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .question-panel:after{
      content:"?";
      position:absolute;
      right:24px;
      bottom:-54px;
      font-size:190px;
      line-height:1;
      font-weight:950;
      color:rgba(255,255,255,.06);
    }
    .question-panel h2{
      font-size:34px;
      line-height:1.2;
      margin:0 0 18px;
      font-weight:950;
      color:#fff;
    }
    .question-panel p{color:rgba(255,255,255,.78);margin:0 0 18px}
    .question-list{
      display:grid;
      gap:14px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .question-list li{
      position:relative;
      padding:14px 14px 14px 42px;
      border:1px solid rgba(255,255,255,.13);
      border-radius:16px;
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.9);
    }
    .question-list li:before{
      content:"";
      position:absolute;
      left:16px;
      top:20px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
    }
    .answer-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .answer-card,.service-card,.data-card,.flow-card,.faq-item,.privacy-card,.form-card,.quote-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      transition:var(--transition);
    }
    .answer-card{
      padding:22px;
      min-height:170px;
    }
    .answer-card:hover,.service-card:hover,.flow-card:hover,.data-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
      border-color:rgba(24,180,123,.32);
    }
    .icon-bubble{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-size:22px;
      margin-bottom:14px;
    }
    .answer-card h3,.service-card h3,.flow-card h3{
      margin:0 0 8px;
      font-size:20px;
      font-weight:950;
      color:var(--dark);
    }
    .answer-card p,.service-card p,.flow-card p{margin:0;color:var(--muted)}
    .split{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:34px;
      align-items:center;
    }
    .image-card{
      position:relative;
      border-radius:var(--radius-lg);
      overflow:hidden;
      min-height:460px;
      box-shadow:var(--shadow);
      background:#ddd;
    }
    .image-card img{
      width:100%;
      height:100%;
      min-height:460px;
      object-fit:cover;
    }
    .image-overlay{
      position:absolute;
      left:20px;
      right:20px;
      bottom:20px;
      padding:20px;
      border-radius:22px;
      color:#fff;
      background:rgba(16,37,30,.72);
      backdrop-filter:blur(10px);
    }
    .image-overlay strong{
      display:block;
      font-size:22px;
      margin-bottom:6px;
    }
    .feature-stack{
      display:grid;
      gap:14px;
    }
    .feature-line{
      display:flex;
      gap:14px;
      padding:18px;
      border-radius:18px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(16,37,30,.06);
    }
    .feature-num{
      flex:0 0 34px;
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:var(--accent-soft);
      color:#8c5a00;
      font-weight:950;
    }
    .feature-line h3{
      margin:0 0 4px;
      font-size:18px;
      font-weight:950;
    }
    .feature-line p{margin:0;color:var(--muted)}
    .solution-band{
      background:linear-gradient(135deg,#10251e,#17342b);
      color:#fff;
      position:relative;
    }
    .solution-band:before{
      content:"";
      position:absolute;
      inset:0;
      background:url('/assets/images/backpic/back-3.webp') center/cover;
      opacity:.12;
    }
    .solution-band .site-container{position:relative}
    .solution-band .section-title{color:#fff}
    .solution-band .section-desc{color:rgba(255,255,255,.72)}
    .service-row{
      display:grid;
      grid-template-columns:1.1fr .9fr 1fr;
      gap:18px;
    }
    .service-card{
      padding:26px;
      background:rgba(255,255,255,.94);
    }
    .service-card.featured{
      background:linear-gradient(180deg,#ffffff,#f1fbf7);
      border-color:rgba(255,176,32,.5);
      transform:translateY(-14px);
    }
    .service-card .badge{
      background:var(--accent-soft);
      color:#7b5100;
      border-color:#ffe0a3;
      margin-bottom:14px;
    }
    .service-list{
      margin:16px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .service-list li{
      padding-left:24px;
      position:relative;
      color:#42564f;
      font-weight:650;
    }
    .service-list li:before{
      content:"✓";
      position:absolute;
      left:0;
      color:var(--primary-dark);
      font-weight:950;
    }
    .stats-wrap{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:24px;
      align-items:stretch;
    }
    .stats-intro{
      border-radius:var(--radius-lg);
      background:linear-gradient(135deg,var(--primary-soft),#fff);
      padding:30px;
      border:1px solid var(--line);
    }
    .stats-intro h2{
      margin:0 0 12px;
      font-size:34px;
      line-height:1.18;
      font-weight:950;
    }
    .stats-intro p{color:var(--muted);margin:0 0 18px}
    .data-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .data-card{
      padding:24px;
    }
    .data-value{
      display:block;
      font-size:40px;
      line-height:1;
      font-weight:950;
      color:var(--primary-dark);
      letter-spacing:-.04em;
      margin-bottom:10px;
    }
    .data-card p{margin:0;color:var(--muted)}
    .flow-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      counter-reset:step;
    }
    .flow-card{
      position:relative;
      padding:24px;
      overflow:hidden;
    }
    .flow-card:before{
      counter-increment:step;
      content:"0" counter(step);
      position:absolute;
      right:18px;
      top:8px;
      color:rgba(24,180,123,.14);
      font-size:58px;
      font-weight:950;
      line-height:1;
    }
    .lead-zone{
      background:
        radial-gradient(circle at 85% 18%,rgba(255,176,32,.18),transparent 24%),
        linear-gradient(180deg,#fff,#f3fbf7);
    }
    .lead-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:26px;
      align-items:start;
    }
    .lead-copy{
      position:sticky;
      top:104px;
      padding:30px;
      border-radius:var(--radius-lg);
      background:var(--dark);
      color:#fff;
      box-shadow:var(--shadow);
    }
    .lead-copy h2{
      color:#fff;
      margin:0 0 12px;
      font-size:36px;
      line-height:1.2;
      font-weight:950;
    }
    .lead-copy p{color:rgba(255,255,255,.74);margin:0 0 16px}
    .lead-copy .mini-tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
    .form-card{
      padding:28px;
    }
    .form-card h3{
      margin:0 0 8px;
      font-size:26px;
      font-weight:950;
    }
    .form-card .hint{
      margin:0 0 22px;
      color:var(--muted);
    }
    .field-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .field{
      display:grid;
      gap:8px;
      margin-bottom:14px;
    }
    .field.full{grid-column:1/-1}
    .field label{
      font-size:14px;
      color:#3f514b;
      font-weight:850;
    }
    .field input,.field select,.field textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fbfefd;
      min-height:48px;
      padding:12px 14px;
      color:var(--ink);
      transition:var(--transition);
      resize:vertical;
    }
    .field textarea{min-height:112px}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(24,180,123,.12);
      background:#fff;
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:14px;
      margin-top:6px;
    }
    .form-safe{
      color:var(--muted);
      font-size:13px;
    }
    .scenario-grid{
      display:grid;
      grid-template-columns:1fr 1.2fr;
      gap:18px;
    }
    .quote-card{
      padding:26px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:260px;
    }
    .quote-card.large{
      background:linear-gradient(135deg,#fff,var(--primary-soft));
    }
    .quote-card blockquote{
      margin:0;
      font-size:22px;
      line-height:1.5;
      font-weight:900;
      color:var(--dark);
    }
    .quote-card p{margin:16px 0 0;color:var(--muted)}
    .scenario-list{
      display:grid;
      gap:14px;
    }
    .scenario-item{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:16px;
      align-items:center;
      padding:14px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 10px 24px rgba(16,37,30,.06);
    }
    .scenario-item img{
      width:120px;
      height:92px;
      object-fit:cover;
      border-radius:16px;
    }
    .scenario-item h3{margin:0 0 4px;font-size:18px;font-weight:950}
    .scenario-item p{margin:0;color:var(--muted)}
    .privacy-wrap{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .privacy-card{
      padding:24px;
      background:linear-gradient(180deg,#fff,#fbfefd);
    }
    .privacy-card h3{
      margin:0 0 8px;
      font-size:20px;
      font-weight:950;
    }
    .privacy-card p{margin:0;color:var(--muted)}
    .faq-layout{
      display:grid;
      grid-template-columns:.72fr 1.28fr;
      gap:28px;
      align-items:start;
    }
    .faq-aside{
      padding:28px;
      border-radius:var(--radius-lg);
      background:var(--primary-soft);
      border:1px solid rgba(24,180,123,.18);
    }
    .faq-aside h2{
      margin:0 0 10px;
      font-size:32px;
      font-weight:950;
      line-height:1.2;
    }
    .faq-aside p{margin:0;color:var(--muted)}
    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      padding:0;
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      font-weight:950;
      color:var(--dark);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"+";
      width:28px;
      height:28px;
      border-radius:50%;
      background:var(--primary-soft);
      color:var(--primary-dark);
      display:grid;
      place-items:center;
      flex:0 0 28px;
      transition:var(--transition);
    }
    .faq-item[open] summary:after{
      content:"−";
      background:var(--primary);
      color:#fff;
    }
    .faq-item div{
      padding:0 22px 20px;
      color:var(--muted);
    }
    .cta{
      padding:80px 0;
      background:linear-gradient(135deg,#10251e,#0d6b59);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .cta:before{
      content:"";
      position:absolute;
      inset:0;
      background:url('/assets/images/backpic/back-1.webp') center/cover;
      opacity:.16;
    }
    .cta-card{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto;
      gap:28px;
      align-items:center;
      padding:38px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.09);
      backdrop-filter:blur(12px);
      box-shadow:0 24px 60px rgba(0,0,0,.16);
    }
    .cta h2{
      margin:0 0 10px;
      color:#fff;
      font-size:clamp(30px,4vw,48px);
      line-height:1.16;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .cta p{margin:0;color:rgba(255,255,255,.76);max-width:760px}
    .footer{
      background:#0d1f19;
      color:rgba(255,255,255,.78);
      padding:58px 0 26px;
    }
    .footer .brand{color:#fff;margin-bottom:18px}
    .footer p{margin:0;max-width:380px;color:rgba(255,255,255,.64)}
    .footer-grid{
      display:grid;
      grid-template-columns:.9fr 1.7fr;
      gap:44px;
      padding-bottom:34px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-links{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:22px;
    }
    .footer-links h4{
      color:#fff;
      font-size:15px;
      margin:0 0 14px;
      font-weight:950;
    }
    .footer-links a{
      display:block;
      margin:9px 0;
      color:rgba(255,255,255,.65);
      font-size:14px;
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(3px);
    }
    .copyright{
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
      align-items:center;
      justify-content:space-between;
      padding-top:22px;
      color:rgba(255,255,255,.58);
      font-size:13px;
    }
    .copyright a{color:rgba(255,255,255,.78)}
    .copyright a:hover{color:#fff}
    .reveal{
      border:0;
      border-radius:24px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .close-button{
      color:var(--muted);
    }
    @media (max-width:1024px){
      .nav-wrap{flex-wrap:wrap;padding:12px 0}
      .mobile-toggle{display:grid;margin-left:auto}
      .nav-links{
        order:3;
        flex-basis:100%;
        display:none;
        justify-content:flex-start;
        overflow-x:auto;
        padding:8px 0;
      }
      .nav-links.open{display:flex}
      .nav-actions{margin-left:auto}
      .hero-grid,.pain-layout,.split,.stats-wrap,.lead-grid,.scenario-grid,.faq-layout,.footer-grid{
        grid-template-columns:1fr;
      }
      .lead-copy{position:static}
      .service-row,.flow-strip,.privacy-wrap{
        grid-template-columns:repeat(2,1fr);
      }
      .service-card.featured{transform:none}
      .cta-card{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .nav-actions{width:100%;justify-content:space-between}
      .nav-search{flex:1;width:auto}
      .hero{padding:48px 0 34px}
      .coupon-bottom,.coupon-top{flex-direction:column;align-items:flex-start}
      .small-coupons,.answer-grid,.data-grid,.service-row,.flow-strip,.privacy-wrap,.field-grid,.footer-links{
        grid-template-columns:1fr;
      }
      .section{padding:56px 0}
      .section-tight{padding:42px 0}
      .question-panel,.form-card,.lead-copy,.cta-card{padding:24px}
      .image-card,.image-card img{min-height:340px}
      .scenario-item{grid-template-columns:92px 1fr}
      .scenario-item img{width:92px;height:82px}
      .footer-grid{gap:28px}
      .copyright{display:grid}
    }
    @media (max-width:520px){
      .site-container{width:min(calc(100% - 22px),var(--container))}
      .brand{font-size:18px}
      .brand-mark{width:36px;height:36px;border-radius:12px}
      .nav-links a{font-size:13px;padding:9px 10px}
      .hero h1{font-size:36px}
      .hero-sub,.section-desc{font-size:16px}
      .coupon-value{font-size:42px}
      .main-coupon{padding:22px}
      .btn{width:100%}
      .hero-actions .btn,.form-actions .btn{width:100%}
      .question-panel h2,.lead-copy h2,.stats-intro h2{font-size:28px}
      .scenario-item{grid-template-columns:1fr}
      .scenario-item img{width:100%;height:150px}
    }

/* roulang page: category6 */
:root{
      --bg:#08111f;
      --bg-soft:#0d1728;
      --panel:#101b2d;
      --panel-2:#132238;
      --card:#122033;
      --line:rgba(255,255,255,.09);
      --text:#ecf4ff;
      --muted:#9db0ca;
      --muted-2:#7f92ad;
      --accent:#39d7b8;
      --accent-2:#f2b84b;
      --accent-3:#6bc2ff;
      --danger:#ff7a6b;
      --ok:#86efac;
      --shadow:0 18px 60px rgba(0,0,0,.28);
      --shadow-soft:0 10px 26px rgba(3,10,24,.18);
      --radius:24px;
      --radius-sm:16px;
      --radius-xs:12px;
      --space:24px;
      --space-lg:40px;
      --container:1180px;
      --header-h:80px;
      --transition:.25s ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(57,215,184,.14), transparent 25%),
        radial-gradient(circle at top right, rgba(242,184,75,.10), transparent 22%),
        linear-gradient(180deg, #09111f 0%, #0b1424 46%, #09111a 100%);
      color:var(--text);
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block;border:0}
    a{color:inherit;text-decoration:none;transition:color var(--transition),background var(--transition),border-color var(--transition),transform var(--transition),opacity var(--transition)}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(57,215,184,.25);color:#fff}
    :focus{outline:none}
    :focus-visible{outline:3px solid rgba(57,215,184,.38);outline-offset:2px}
    .site-container,.grid-container.site-container{max-width:var(--container);width:calc(100% - 32px);margin:0 auto}
    .topbar{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(6,11,20,.72);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.07);
      box-shadow:0 8px 30px rgba(0,0,0,.16);
    }
    .nav-wrap{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      gap:18px;
      padding:12px 0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      color:#fff;
      letter-spacing:.3px;
      white-space:nowrap;
      flex:0 0 auto;
    }
    .brand:hover{transform:translateY(-1px)}
    .brand-mark{
      width:42px;height:42px;
      display:grid;place-items:center;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(57,215,184,.95), rgba(107,194,255,.92));
      color:#04101a;
      font-weight:900;
      box-shadow:0 14px 34px rgba(57,215,184,.24);
    }
    .brand span:last-child{font-size:1.08rem}
    .mobile-toggle{
      display:none;
      margin-left:auto;
      width:46px;height:46px;
      border:1px solid rgba(255,255,255,.11);
      border-radius:14px;
      background:rgba(255,255,255,.03);
      color:#fff;
      font-size:1.2rem;
      cursor:pointer;
      transition:background var(--transition),transform var(--transition),border-color var(--transition);
    }
    .mobile-toggle:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .nav-links{
      display:flex;
      align-items:center;
      gap:6px;
      margin-left:8px;
      flex:1 1 auto;
      overflow:auto;
      scrollbar-width:none;
    }
    .nav-links::-webkit-scrollbar{display:none}
    .nav-links a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 15px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      font-size:.95rem;
      white-space:nowrap;
      background:transparent;
    }
    .nav-links a:hover{
      color:#fff;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }
    .nav-links a.active{
      color:#0b1521;
      background:linear-gradient(135deg, var(--accent), #86efac);
      border-color:transparent;
      box-shadow:0 10px 24px rgba(57,215,184,.20);
      font-weight:700;
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex:0 0 auto;
    }
    .nav-search{
      width:200px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.04);
      color:#fff;
      padding:0 14px;
      transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
    }
    .nav-search::placeholder{color:var(--muted-2)}
    .nav-search:focus{
      border-color:rgba(57,215,184,.42);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 4px rgba(57,215,184,.12);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:700;
      letter-spacing:.2px;
      cursor:pointer;
      transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      background:linear-gradient(135deg, var(--accent), #7be3ff);
      color:#07121f;
      box-shadow:0 12px 28px rgba(57,215,184,.22);
    }
    .btn-primary:hover{box-shadow:0 16px 34px rgba(57,215,184,.28)}
    .btn-ghost{
      background:rgba(255,255,255,.04);
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
    .btn-soft{
      background:rgba(57,215,184,.12);
      color:#dcfff6;
      border-color:rgba(57,215,184,.18);
    }
    .btn-soft:hover{background:rgba(57,215,184,.18)}
    .hero{
      position:relative;
      overflow:hidden;
      min-height:calc(100vh - var(--header-h));
      padding:42px 0 30px;
      background:
        linear-gradient(180deg, rgba(6,11,20,.44), rgba(6,11,20,.72)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 25% 15%, rgba(57,215,184,.18), transparent 22%),
        radial-gradient(circle at 78% 28%, rgba(242,184,75,.16), transparent 24%),
        linear-gradient(180deg, rgba(3,9,18,.25), rgba(3,9,18,.55));
      pointer-events:none;
    }
    .hero .site-container{
      position:relative;
      z-index:1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
      gap:28px;
      align-items:center;
      min-height:calc(100vh - var(--header-h) - 72px);
    }
    .hero-copy{
      padding:18px 0;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.12);
      color:#e7f4ff;
      font-size:.92rem;
      letter-spacing:.2px;
      backdrop-filter:blur(10px);
    }
    .kicker i{
      display:inline-block;
      width:9px;height:9px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(57,215,184,.12);
    }
    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(2.2rem, 4.8vw, 4.8rem);
      line-height:1.06;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .hero-lead{
      max-width:42rem;
      margin:0;
      font-size:1.04rem;
      color:#d6e3f4;
      line-height:1.9;
      text-shadow:0 2px 20px rgba(0,0,0,.12);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:22px;
    }
    .hero-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:#eff7ff;
      font-size:.92rem;
    }
    .hero-panel{
      align-self:stretch;
      background:linear-gradient(180deg, rgba(14,24,41,.86), rgba(10,18,32,.92));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
      border-radius:28px;
      overflow:hidden;
      backdrop-filter:blur(14px);
    }
    .panel-top{
      padding:20px 20px 16px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    }
    .panel-top h2{
      margin:8px 0 8px;
      font-size:1.35rem;
      line-height:1.3;
    }
    .panel-top p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .countdown{
      padding:18px 20px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
    }
    .countdown-label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
      color:#dfe9f8;
      font-weight:700;
      font-size:.96rem;
    }
    .countdown-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
    }
    .countdown-item{
      padding:14px 10px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      text-align:center;
    }
    .countdown-item strong{
      display:block;
      font-size:1.5rem;
      line-height:1.1;
      color:#fff;
      letter-spacing:.03em;
    }
    .countdown-item span{
      display:block;
      margin-top:6px;
      color:var(--muted);
      font-size:.82rem;
    }
    .lead-form{
      padding:18px 20px 20px;
    }
    .lead-form .form-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .lead-form .form-title strong{
      font-size:1.02rem;
    }
    .lead-form .form-title em{
      font-style:normal;
      color:var(--accent);
      font-size:.9rem;
    }
    .field{
      margin-bottom:12px;
    }
    .field label{
      display:block;
      margin-bottom:8px;
      color:#dbe8f8;
      font-size:.9rem;
    }
    .field input,.field select,.field textarea{
      width:100%;
      min-height:46px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:#fff;
      padding:12px 14px;
      transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
    }
    .field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:rgba(57,215,184,.45);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 4px rgba(57,215,184,.11);
    }
    .lead-inline{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .form-note{
      margin-top:12px;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.75;
    }
    .hero-strip{
      margin-top:22px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .strip-card{
      padding:14px 16px;
      border-radius:18px;
      background:rgba(6,12,22,.42);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
    }
    .strip-card strong{
      display:block;
      font-size:1rem;
      color:#fff;
      margin-bottom:6px;
    }
    .strip-card span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.65;
    }
    main{position:relative}
    .section{
      padding:72px 0;
    }
    .section:first-of-type{padding-top:58px}
    .section-head{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:26px;
    }
    .section-title{
      max-width:760px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent);
      font-size:.9rem;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    .eyebrow::before{
      content:"";
      width:18px;height:2px;
      background:linear-gradient(90deg, var(--accent), transparent);
      border-radius:999px;
    }
    .section-title h2{
      margin:0 0 10px;
      font-size:clamp(1.6rem, 3vw, 2.4rem);
      line-height:1.18;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      line-height:1.9;
      max-width:68rem;
    }
    .section-action{display:flex;align-items:center;gap:10px}
    .card-panel{
      background:linear-gradient(180deg, rgba(18,32,51,.94), rgba(15,26,43,.94));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .glass-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .problem-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .problem-card{
      padding:22px;
      min-height:190px;
      transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    }
    .problem-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 34px rgba(0,0,0,.22);
      border-color:rgba(57,215,184,.22);
    }
    .problem-icon{
      width:44px;height:44px;
      display:grid;place-items:center;
      border-radius:14px;
      background:rgba(57,215,184,.12);
      color:var(--accent);
      font-weight:900;
      margin-bottom:14px;
    }
    .problem-card h3{
      margin:0 0 8px;
      font-size:1.12rem;
    }
    .problem-card p{
      margin:0;
      color:var(--muted);
      line-height:1.85;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .feature-card{
      display:flex;
      flex-direction:column;
      min-height:100%;
      overflow:hidden;
    }
    .feature-card img{
      width:100%;
      aspect-ratio:16/10;
      object-fit:cover;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .feature-content{
      padding:18px 18px 20px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:12px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      color:#dfe9f8;
      border:1px solid rgba(255,255,255,.08);
      font-size:.8rem;
    }
    .feature-content h3{
      margin:0 0 10px;
      font-size:1.18rem;
      line-height:1.42;
    }
    .feature-content p{
      margin:0;
      color:var(--muted);
      line-height:1.85;
    }
    .feature-list{
      list-style:none;
      margin:16px 0 0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding-left:20px;
      margin-top:10px;
      color:#dce7f6;
      line-height:1.7;
    }
    .feature-list li::before{
      content:"";
      position:absolute;
      left:0;top:.72em;
      width:8px;height:8px;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 4px rgba(242,184,75,.12);
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .stat-card{
      padding:20px 18px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
    }
    .stat-card:hover{
      transform:translateY(-3px);
      border-color:rgba(107,194,255,.22);
      box-shadow:0 18px 34px rgba(0,0,0,.18);
    }
    .stat-card strong{
      display:block;
      font-size:2rem;
      line-height:1;
      color:#fff;
      margin-bottom:8px;
      letter-spacing:-.03em;
    }
    .stat-card span{
      display:block;
      color:var(--muted);
      line-height:1.7;
      font-size:.93rem;
    }
    .news-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .news-card{
      display:flex;
      flex-direction:column;
      padding:20px;
      min-height:100%;
      position:relative;
      overflow:hidden;
    }
    .news-card::after{
      content:"";
      position:absolute;
      right:-30px;
      top:-30px;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,215,184,.18), transparent 68%);
      pointer-events:none;
    }
    .news-date{
      display:inline-flex;
      align-items:center;
      width:max-content;
      padding:7px 11px;
      border-radius:999px;
      background:rgba(242,184,75,.12);
      color:#ffd995;
      border:1px solid rgba(242,184,75,.16);
      font-size:.82rem;
      margin-bottom:14px;
    }
    .news-card h3{
      margin:0 0 10px;
      font-size:1.13rem;
      line-height:1.5;
    }
    .news-card p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.85;
      flex:1 1 auto;
    }
    .news-card .btn{
      align-self:flex-start;
    }
    .split-panel{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:18px;
      align-items:stretch;
    }
    .story-image{
      position:relative;
      min-height:420px;
      border-radius:28px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(4,10,18,.12), rgba(4,10,18,.75)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
    }
    .story-image .story-badge{
      position:absolute;
      left:18px;
      top:18px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border-radius:999px;
      background:rgba(8,17,31,.70);
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(10px);
    }
    .story-image .story-info{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      padding:18px;
      border-radius:22px;
      background:rgba(8,15,26,.70);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(10px);
    }
    .story-image .story-info strong{
      display:block;
      font-size:1.2rem;
      margin-bottom:6px;
    }
    .story-image .story-info span{
      color:#dbe7f7;
      line-height:1.8;
    }
    .story-copy{
      padding:4px 4px 4px 8px;
    }
    .story-copy .panel-body{
      height:100%;
      padding:26px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(20,33,53,.96), rgba(14,25,42,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
    }
    .story-copy p{
      color:#d8e4f4;
      line-height:2;
      margin:0 0 18px;
      font-size:1rem;
    }
    .check-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:12px;
    }
    .check-list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      color:#e8f1fb;
      line-height:1.75;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
    }
    .check-list li i{
      width:24px;height:24px;
      flex:0 0 24px;
      border-radius:50%;
      background:rgba(57,215,184,.18);
      color:var(--accent);
      display:grid;
      place-items:center;
      font-style:normal;
      font-weight:900;
      margin-top:2px;
    }
    .form-section{
      position:relative;
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    .form-card,.info-card{
      padding:26px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(18,31,50,.96), rgba(13,24,40,.96));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:var(--shadow-soft);
    }
    .form-card h3,.info-card h3{
      margin:0 0 10px;
      font-size:1.3rem;
      line-height:1.35;
    }
    .form-card p,.info-card p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.85;
    }
    .form-grid .lead-form{
      padding:0;
    }
    .form-grid .lead-form .field input,
    .form-grid .lead-form .field select{
      background:rgba(255,255,255,.05);
    }
    .form-grid .lead-form .btn{
      width:100%;
      margin-top:4px;
    }
    .mini-list{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .mini-item{
      padding:14px 15px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
    }
    .mini-item strong{
      display:block;
      margin-bottom:6px;
      font-size:.98rem;
      color:#fff;
    }
    .mini-item span{
      display:block;
      color:var(--muted);
      line-height:1.75;
      font-size:.92rem;
    }
    .faq-wrap{
      display:grid;
      gap:12px;
    }
    details.faq-item{
      border-radius:20px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    details.faq-item[open]{border-color:rgba(57,215,184,.20)}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      color:#fff;
      font-weight:700;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:28px;height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(57,215,184,.12);
      color:var(--accent);
      flex:0 0 28px;
      transition:transform var(--transition),background var(--transition);
    }
    details[open] summary::after{
      content:"–";
      transform:rotate(0deg);
      background:rgba(242,184,75,.14);
      color:#ffd995;
    }
    .faq-item .faq-content{
      padding:0 20px 18px;
      color:var(--muted);
      line-height:1.9;
    }
    .cta-band{
      padding:18px;
      border-radius:28px;
      background:
        linear-gradient(135deg, rgba(57,215,184,.16), rgba(107,194,255,.12)),
        linear-gradient(180deg, rgba(20,33,53,.96), rgba(13,24,40,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
    }
    .cta-band-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 18px 18px 22px;
      border-radius:22px;
      background:rgba(8,15,26,.36);
      border:1px solid rgba(255,255,255,.06);
    }
    .cta-band h3{
      margin:0 0 8px;
      font-size:1.4rem;
    }
    .cta-band p{
      margin:0;
      color:#d8e4f4;
      line-height:1.8;
      max-width:60rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      flex:0 0 auto;
    }
    .footer{
      margin-top:26px;
      padding:56px 0 26px;
      background:linear-gradient(180deg, rgba(7,12,21,.82), rgba(5,8,15,.98));
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 1.8fr;
      gap:28px;
      align-items:start;
    }
    .footer .brand{margin-bottom:14px}
    .footer p{
      margin:0;
      color:var(--muted);
      line-height:1.9;
      max-width:30rem;
    }
    .footer-links{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .footer-links h4{
      margin:0 0 12px;
      font-size:1rem;
      color:#fff;
    }
    .footer-links a{
      display:block;
      padding:6px 0;
      color:var(--muted);
      line-height:1.7;
    }
    .footer-links a:hover{color:#fff;transform:translateX(2px)}
    .copyright{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px 16px;
      padding-top:20px;
      margin-top:20px;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      font-size:.9rem;
      line-height:1.8;
    }
    .copyright a{color:#dfe9f8}
    .copyright a:hover{color:var(--accent)}
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
      margin:18px 0;
    }
    .section-note{
      color:var(--muted);
      font-size:.94rem;
      margin-top:10px;
    }
    .subtle-box{
      padding:18px;
      border-radius:20px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
    }
    .center-line{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-top:14px;
      color:var(--muted);
      font-size:.9rem;
    }
    .center-line strong{color:#fff}
    .mobile-only{display:none}
    @media (max-width: 1090px){
      .hero-grid,.split-panel,.form-grid,.footer-grid{grid-template-columns:1fr}
      .hero{min-height:auto;padding-top:34px}
      .hero-grid{min-height:auto;padding-bottom:8px}
      .story-image{min-height:360px}
      .nav-actions{display:none}
      .nav-links{margin-left:0}
      .problem-grid,.feature-grid,.stats-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
      .footer-links{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 768px){
      .nav-wrap{
        flex-wrap:wrap;
        align-items:center;
      }
      .mobile-toggle{display:inline-grid;place-items:center}
      .nav-links{
        display:none;
        width:100%;
        order:3;
        flex-wrap:wrap;
        padding:12px 0 4px;
      }
      .nav-links.open{display:flex}
      .nav-links a{flex:1 1 auto; justify-content:flex-start}
      .hero h1{font-size:clamp(2rem, 8vw, 3.2rem)}
      .hero-lead{font-size:.98rem}
      .hero-strip,.countdown-grid,.lead-inline,.cta-band-inner{grid-template-columns:1fr}
      .problem-grid,.feature-grid,.stats-grid,.news-grid{grid-template-columns:1fr}
      .section{padding:56px 0}
      .panel-top h2,.form-card h3,.info-card h3,.cta-band h3{font-size:1.18rem}
      .section-head{align-items:flex-start}
      .cta-band-inner{padding:18px}
      .copyright{flex-direction:column}
    }
    @media (max-width: 520px){
      .site-container,.grid-container.site-container{width:calc(100% - 24px)}
      .nav-search{width:100%}
      .lead-inline{grid-template-columns:1fr}
      .hero-panel,.story-image,.story-copy .panel-body,.form-card,.info-card,.cta-band{border-radius:22px}
      .problem-card,.news-card,.stat-card{padding:18px}
      .story-image .story-info{left:12px;right:12px;bottom:12px;padding:15px}
      .hero-actions,.cta-actions{width:100%}
      .btn{width:auto;flex:1 1 160px}
      .hero-strip{grid-template-columns:1fr}
      .section-head{margin-bottom:20px}
      .footer-links{grid-template-columns:1fr}
    }

/* roulang page: category4 */
:root{
    --bg:#07111f;
    --bg-2:#0b1628;
    --surface:#0f1b2f;
    --surface-2:#13233b;
    --surface-3:#182c49;
    --card:rgba(15,27,47,.82);
    --card-strong:rgba(10,20,35,.92);
    --text:#edf5ff;
    --muted:#9cb0cc;
    --muted-2:#7e94b1;
    --primary:#18c57a;
    --primary-2:#31d0ff;
    --warning:#ffd166;
    --line:rgba(156,176,204,.18);
    --line-2:rgba(24,197,122,.28);
    --shadow:0 20px 45px rgba(0,0,0,.32);
    --shadow-soft:0 12px 26px rgba(0,0,0,.22);
    --radius:22px;
    --radius-sm:14px;
    --radius-xs:10px;
    --gap:24px;
    --container:1200px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background:
      radial-gradient(1200px 800px at 10% -10%, rgba(49,208,255,.12), transparent 45%),
      radial-gradient(900px 700px at 90% 10%, rgba(24,197,122,.12), transparent 40%),
      linear-gradient(180deg, #06101d 0%, #081220 35%, #07111f 100%);
    color:var(--text);
    line-height:1.75;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }
  a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease, transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  }
  img{
    max-width:100%;
    display:block;
    border:0;
  }
  button,input,select,textarea{
    font:inherit;
    outline:none;
  }
  ::selection{
    background:rgba(24,197,122,.25);
    color:#fff;
  }
  .site-container{
    width:min(var(--container), calc(100% - 32px));
    margin:0 auto;
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(16px);
    background:rgba(6,14,26,.72);
    border-bottom:1px solid rgba(156,176,204,.12);
  }
  .nav-wrap{
    display:flex;
    align-items:center;
    gap:18px;
    min-height:76px;
    padding:12px 0;
  }
  .brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    letter-spacing:.04em;
    white-space:nowrap;
    color:var(--text);
  }
  .brand:hover{color:#fff; transform:translateY(-1px)}
  .brand-mark{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#07111f;
    font-weight:900;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 14px 30px rgba(24,197,122,.25);
  }
  .brand span:last-child{
    font-size:1.02rem;
  }
  .mobile-toggle{
    display:none;
    margin-left:auto;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:1.1rem;
    cursor:pointer;
  }
  .mobile-toggle:hover,
  .mobile-toggle:focus{
    border-color:rgba(24,197,122,.45);
    background:rgba(24,197,122,.12);
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    margin-left:10px;
    overflow:auto;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    color:var(--muted);
    border:1px solid transparent;
    white-space:nowrap;
  }
  .nav-links a:hover,
  .nav-links a:focus{
    color:#fff;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
    transform:translateY(-1px);
  }
  .nav-links a.active{
    color:#07111f;
    background:linear-gradient(135deg, var(--primary), #79f7c2);
    border-color:transparent;
    box-shadow:0 12px 24px rgba(24,197,122,.24);
    font-weight:700;
  }
  .nav-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
  }
  .nav-search{
    width:200px;
    height:44px;
    border-radius:999px;
    padding:0 16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    color:var(--text);
  }
  .nav-search::placeholder{color:var(--muted-2)}
  .nav-search:focus{
    border-color:rgba(49,208,255,.5);
    box-shadow:0 0 0 4px rgba(49,208,255,.12);
    background:rgba(255,255,255,.07);
  }
  .btn,
  .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    border-radius:999px;
    min-height:46px;
    padding:0 18px;
    font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
    text-decoration:none;
  }
  .btn:hover,
  .button:hover,
  .btn:focus,
  .button:focus{
    transform:translateY(-1px);
  }
  .btn:active,
  .button:active{
    transform:translateY(0);
  }
  .btn-primary{
    color:#07111f;
    background:linear-gradient(135deg, var(--primary), #7df5c5);
    box-shadow:0 16px 30px rgba(24,197,122,.24);
  }
  .btn-primary:hover{box-shadow:0 20px 40px rgba(24,197,122,.28)}
  .btn-secondary{
    color:var(--text);
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
  }
  .btn-secondary:hover{
    border-color:rgba(49,208,255,.35);
    background:rgba(49,208,255,.08);
  }
  .btn-ghost{
    color:var(--text);
    background:transparent;
    border:1px solid rgba(255,255,255,.12);
  }
  .btn-ghost:hover{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.22);
  }
  .hero{
    position:relative;
    overflow:hidden;
    padding:34px 0 24px;
  }
  .hero-shell{
    position:relative;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:
      linear-gradient(180deg, rgba(4,11,20,.22), rgba(4,11,20,.72)),
      url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  }
  .hero-shell::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(800px 420px at 15% 18%, rgba(24,197,122,.32), transparent 60%),
      radial-gradient(580px 380px at 86% 20%, rgba(49,208,255,.18), transparent 55%),
      linear-gradient(180deg, rgba(7,17,31,.06), rgba(7,17,31,.56));
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    display:grid;
    grid-template-columns: 1.25fr .95fr;
    gap:28px;
    align-items:stretch;
    padding:32px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#d8ffe8;
    background:rgba(24,197,122,.14);
    border:1px solid rgba(24,197,122,.22);
    border-radius:999px;
    padding:8px 14px;
    font-size:.92rem;
    font-weight:700;
    letter-spacing:.02em;
  }
  .eyebrow::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 4px rgba(24,197,122,.18);
  }
  .hero h1{
    margin:18px 0 16px;
    font-size:clamp(2rem, 3.8vw, 4.1rem);
    line-height:1.06;
    letter-spacing:-.03em;
  }
  .hero p.lead{
    margin:0;
    max-width:46rem;
    color:#d1deef;
    font-size:1.03rem;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:24px 0 20px;
  }
  .hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
  }
  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
    color:#dce8f7;
    font-size:.92rem;
  }
  .tag strong{
    color:#fff;
  }
  .hero-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(9,17,30,.82), rgba(10,20,35,.95));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow-soft);
  }
  .hero-card .mini-cover{
    overflow:hidden;
    border-radius:18px;
    min-height:170px;
    background:#102238;
    border:1px solid rgba(255,255,255,.08);
  }
  .hero-card .mini-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .hero-card .mini-copy h3{
    margin:0 0 8px;
    font-size:1.18rem;
  }
  .hero-card .mini-copy p{
    margin:0;
    color:var(--muted);
    font-size:.96rem;
  }
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .hero-stat{
    padding:14px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
  }
  .hero-stat b{
    display:block;
    font-size:1.15rem;
    color:#fff;
    margin-bottom:4px;
  }
  .hero-stat span{
    color:var(--muted);
    font-size:.88rem;
  }
  .lead-form{
    padding:18px;
    border-radius:22px;
    background:rgba(6,14,26,.72);
    border:1px solid rgba(255,255,255,.09);
  }
  .lead-form h3{
    margin:0 0 6px;
    font-size:1.05rem;
  }
  .lead-form p{
    margin:0 0 14px;
    color:var(--muted);
    font-size:.94rem;
  }
  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .form-field.full{
    grid-column:1 / -1;
  }
  .form-field label{
    color:#d5e0ef;
    font-size:.9rem;
    font-weight:600;
  }
  .form-field input,
  .form-field select,
  .form-field textarea{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:12px 14px;
    min-height:46px;
  }
  .form-field textarea{
    min-height:92px;
    resize:vertical;
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus{
    border-color:rgba(24,197,122,.55);
    box-shadow:0 0 0 4px rgba(24,197,122,.12);
  }
  .form-note{
    color:var(--muted-2);
    font-size:.86rem;
    margin-top:8px;
  }
  .form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
  }
  .section{
    padding:24px 0;
  }
  .section-band{
    margin-top:24px;
    padding:28px 0;
  }
  .section-panel{
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(13,22,38,.86), rgba(8,15,27,.96));
    box-shadow:var(--shadow-soft);
    overflow:hidden;
  }
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
  }
  .section-title{
    margin:0;
    font-size:clamp(1.5rem, 2vw, 2.3rem);
    line-height:1.18;
    letter-spacing:-.02em;
  }
  .section-subtitle{
    margin:8px 0 0;
    color:var(--muted);
    max-width:66rem;
  }
  .section-link{
    color:#c6f9e0;
    font-weight:700;
  }
  .section-link:hover{color:#fff}
  .pain-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .info-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    height:100%;
  }
  .info-card:hover{
    transform:translateY(-3px);
    border-color:rgba(24,197,122,.24);
    box-shadow:0 18px 30px rgba(0,0,0,.24);
  }
  .info-card h3{
    margin:0 0 10px;
    font-size:1.12rem;
  }
  .info-card p{
    margin:0;
    color:var(--muted);
  }
  .info-card .mini-line{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:#defbea;
    font-weight:700;
    font-size:.9rem;
  }
  .info-card .mini-line::before{
    content:"";
    width:32px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), transparent);
  }
  .grid-two{
    display:grid;
    grid-template-columns: 1.02fr .98fr;
    gap:18px;
    align-items:stretch;
  }
  .showcase{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
  }
  .showcase-photo{
    border-radius:26px;
    overflow:hidden;
    min-height:100%;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    position:relative;
  }
  .showcase-photo img{
    width:100%;
    height:100%;
    min-height:380px;
    object-fit:cover;
    transform:scale(1.02);
  }
  .showcase-photo .caption{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(6,14,26,.76);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    color:#fff;
  }
  .showcase-photo .caption strong{
    display:block;
    font-size:1rem;
    margin-bottom:4px;
  }
  .showcase-photo .caption span{
    color:#d5e0ef;
    font-size:.92rem;
  }
  .feature-stack{
    display:grid;
    gap:14px;
  }
  .feature-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
  }
  .feature-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#07111f;
    font-weight:900;
    background:linear-gradient(135deg, #7df5c5, #31d0ff);
    box-shadow:0 10px 22px rgba(49,208,255,.18);
  }
  .feature-item h4{
    margin:0 0 4px;
    font-size:1rem;
  }
  .feature-item p{
    margin:0;
    color:var(--muted);
    font-size:.95rem;
  }
  .metric-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }
  .metric{
    padding:18px 16px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.08);
    text-align:left;
  }
  .metric strong{
    display:block;
    font-size:1.55rem;
    line-height:1;
    margin-bottom:8px;
    color:#fff;
  }
  .metric span{
    color:var(--muted);
    font-size:.92rem;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .cover-card{
    overflow:hidden;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    height:100%;
  }
  .cover-card .media{
    position:relative;
    aspect-ratio: 16 / 9;
    overflow:hidden;
  }
  .cover-card .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
  }
  .cover-card:hover .media img{
    transform:scale(1.06);
  }
  .cover-card .content{
    padding:18px;
  }
  .cover-card .meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted-2);
    font-size:.88rem;
    margin-bottom:8px;
  }
  .cover-card h3{
    margin:0 0 10px;
    font-size:1.12rem;
  }
  .cover-card p{
    margin:0 0 16px;
    color:var(--muted);
  }
  .article-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .news-card{
    padding:20px;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    display:flex;
    flex-direction:column;
    min-height:100%;
  }
  .news-card time{
    color:#a8b8d1;
    font-size:.88rem;
    margin-bottom:10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .news-card time::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 4px rgba(24,197,122,.15);
  }
  .news-card h3{
    margin:0 0 10px;
    font-size:1.08rem;
    line-height:1.45;
  }
  .news-card p{
    margin:0 0 16px;
    color:var(--muted);
    flex:1;
  }
  .news-card .btn{
    align-self:flex-start;
  }
  .story-panel{
    padding:28px;
    border-radius:28px;
    background:
      linear-gradient(135deg, rgba(24,197,122,.14), rgba(49,208,255,.09)),
      url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow);
    overflow:hidden;
    position:relative;
  }
  .story-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,17,31,.46), rgba(7,17,31,.82));
    pointer-events:none;
  }
  .story-panel > *{
    position:relative;
    z-index:1;
  }
  .story-copy{
    max-width:44rem;
  }
  .story-copy h2{
    margin:0 0 12px;
    font-size:clamp(1.45rem, 2vw, 2.2rem);
  }
  .story-copy p{
    margin:0;
    color:#d8e5f5;
    font-size:1rem;
  }
  .story-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:22px;
  }
  .story-tile{
    padding:18px;
    border-radius:20px;
    background:rgba(7,17,31,.56);
    border:1px solid rgba(255,255,255,.08);
    color:#eaf2ff;
  }
  .story-tile strong{
    display:block;
    margin-bottom:8px;
    font-size:1.1rem;
  }
  .story-tile span{
    color:#c7d7ea;
    font-size:.92rem;
  }
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  .process-step{
    position:relative;
    padding:20px;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    min-height:100%;
  }
  .process-step .num{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#07111f;
    font-weight:900;
    background:linear-gradient(135deg, var(--primary-2), #82f9c5);
    margin-bottom:14px;
  }
  .process-step h3{
    margin:0 0 10px;
    font-size:1.08rem;
  }
  .process-step p{
    margin:0;
    color:var(--muted);
  }
  .faq-wrap{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:18px;
    align-items:start;
  }
  .faq-list{
    display:grid;
    gap:12px;
  }
  .faq-item{
    border-radius:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-weight:700;
    color:#fff;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"+";
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:1rem;
    transition:transform .2s ease, background .2s ease;
  }
  .faq-item[open] summary{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .faq-item[open] summary::after{
    content:"−";
    background:rgba(24,197,122,.18);
    color:#d8ffe8;
  }
  .faq-answer{
    padding:16px 20px 18px;
    color:var(--muted);
  }
  .faq-side{
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(16,29,48,.96), rgba(8,15,27,.96));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
  }
  .faq-side .side-image{
    aspect-ratio: 4 / 3;
    overflow:hidden;
  }
  .faq-side .side-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .faq-side .side-body{
    padding:18px;
  }
  .faq-side h3{
    margin:0 0 10px;
    font-size:1.1rem;
  }
  .faq-side p{
    margin:0;
    color:var(--muted);
  }
  .cta{
    padding:0 0 26px;
  }
  .cta-box{
    padding:28px;
    border-radius:28px;
    background:
      linear-gradient(135deg, rgba(24,197,122,.16), rgba(49,208,255,.12)),
      linear-gradient(180deg, rgba(14,25,42,.92), rgba(7,17,31,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .cta-box h2{
    margin:0 0 10px;
    font-size:clamp(1.4rem, 2vw, 2.1rem);
  }
  .cta-box p{
    margin:0;
    color:#d8e5f5;
    max-width:52rem;
  }
  .cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:flex-end;
  }
  .footer{
    margin-top:14px;
    padding:28px 0 18px;
    background:linear-gradient(180deg, rgba(7,14,26,.62), rgba(6,12,22,.98));
    border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1.7fr;
    gap:26px;
    align-items:start;
  }
  .footer p{
    color:var(--muted);
    margin:16px 0 0;
  }
  .footer-links{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  .footer-links h4{
    margin:0 0 14px;
    color:#fff;
    font-size:1rem;
  }
  .footer-links a{
    display:block;
    color:var(--muted);
    margin-bottom:10px;
  }
  .footer-links a:hover{color:#fff}
  .copyright{
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    justify-content:space-between;
    padding-top:18px;
    margin-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--muted-2);
    font-size:.92rem;
  }
  .copyright a{
    color:#cfe8ff;
  }
  .copyright a:hover{color:#fff}
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(3,8,16,.72);
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    z-index:90;
  }
  .modal-overlay.show{display:flex}
  .modal-card{
    width:min(520px, 100%);
    border-radius:26px;
    background:linear-gradient(180deg, rgba(18,31,52,.98), rgba(9,17,30,.98));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    padding:24px;
  }
  .modal-card h3{
    margin:0 0 10px;
    font-size:1.35rem;
  }
  .modal-card p{
    margin:0 0 16px;
    color:var(--muted);
  }
  .modal-close{
    margin-left:auto;
  }

  @media (max-width: 1120px){
    .hero-inner{grid-template-columns:1fr}
    .showcase{grid-template-columns:1fr}
    .faq-wrap{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-links{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 980px){
    .nav-wrap{position:relative; flex-wrap:wrap}
    .nav-links{
      order:4;
      display:none;
      width:100%;
      margin:8px 0 0;
      padding:10px 0 2px;
      flex-wrap:wrap;
      background:transparent;
    }
    .nav-links.open{display:flex}
    .nav-actions{
      margin-left:auto;
      width:100%;
      order:3;
      justify-content:flex-end;
    }
    .nav-search{flex:1; min-width:0}
    .mobile-toggle{display:inline-grid; place-items:center}
    .pain-grid,
    .feature-grid,
    .article-list,
    .process-grid,
    .metric-strip,
    .story-grid{
      grid-template-columns:repeat(2,1fr);
    }
    .hero-stats{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width: 768px){
    .site-container{width:min(var(--container), calc(100% - 24px))}
    .hero{padding:18px 0 18px}
    .hero-inner{padding:18px}
    .hero h1{font-size:clamp(1.9rem, 9vw, 2.9rem)}
    .hero-actions,
    .form-actions,
    .cta-box,
    .section-head{
      flex-direction:column;
      align-items:flex-start;
    }
    .hero-stats,
    .pain-grid,
    .feature-grid,
    .article-list,
    .process-grid,
    .metric-strip,
    .story-grid,
    .footer-links,
    .form-grid{
      grid-template-columns:1fr;
    }
    .nav-actions{
      justify-content:stretch;
    }
    .nav-search{
      width:100%;
    }
    .cta-actions{
      justify-content:flex-start;
    }
    .showcase-photo img{min-height:260px}
    .hero-card .mini-cover{min-height:140px}
  }
  @media (max-width: 520px){
    .nav-wrap{min-height:auto}
    .brand span:last-child{font-size:.98rem}
    .brand-mark{width:38px; height:38px; border-radius:12px}
    .hero-shell{border-radius:24px}
    .hero-inner,
    .cta-box,
    .story-panel,
    .section-panel{
      border-radius:24px;
    }
    .info-card,
    .cover-card,
    .news-card,
    .process-step,
    .faq-item,
    .hero-card,
    .lead-form{
      border-radius:20px;
    }
    .footer{
      padding-bottom:26px;
    }
    .copyright{
      gap:8px 14px;
    }
  }

  .focus-ring:focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible{
    outline:2px solid rgba(49,208,255,.85);
    outline-offset:3px;
  }