/* roulang page: index */
:root{
      --bg:#f5f7fb;
      --bg-soft:#eef3ff;
      --card:#ffffff;
      --text:#132238;
      --muted:#607089;
      --line:#d9e2f0;
      --primary:#5b67ff;
      --primary-2:#7a49ff;
      --accent:#00b8a9;
      --warm:#ffb020;
      --danger:#e85555;
      --shadow:0 18px 50px rgba(27, 46, 94, .10);
      --shadow-sm:0 10px 24px rgba(27, 46, 94, .08);
      --radius:22px;
      --radius-sm:16px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(91,103,255,.10), transparent 28%),
        radial-gradient(circle at top right, rgba(0,184,169,.10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fd 30%, #f5f7fb 100%);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(91,103,255,.18)}
    .site-wrap{min-height:100vh}
    .container-xl-custom{
      width:min(var(--container), calc(100% - 2rem));
      margin-inline:auto;
    }
    .topbar{
      background:rgba(255,255,255,.72);
      backdrop-filter: blur(12px);
      border-bottom:1px solid rgba(217,226,240,.75);
      position:sticky;
      top:0;
      z-index:1030;
    }
    .navbar{
      padding:.9rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--text);
      white-space:nowrap;
    }
    .brand-mark{
      width:44px;height:44px;border-radius:16px;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 12px 26px rgba(91,103,255,.24);
      display:grid;place-items:center;
      color:#fff;font-size:1.1rem;
    }
    .brand span{font-size:1.02rem}
    .navbar .nav-link{
      color:var(--muted);
      font-weight:600;
      padding:.7rem .95rem!important;
      border-radius:999px;
      transition:.2s ease;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link.active{
      color:var(--primary);
      background:rgba(91,103,255,.08);
    }
    .btn-cta{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      border:none;
      border-radius:999px;
      padding:.85rem 1.25rem;
      font-weight:700;
      box-shadow:0 14px 30px rgba(91,103,255,.22);
      transition:.2s ease;
      white-space:nowrap;
    }
    .btn-cta:hover,
    .btn-cta:focus{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 36px rgba(91,103,255,.28);
    }
    .btn-outline-soft{
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      border-radius:999px;
      padding:.82rem 1.15rem;
      font-weight:700;
      transition:.2s ease;
    }
    .btn-outline-soft:hover,
    .btn-outline-soft:focus{
      border-color:rgba(91,103,255,.35);
      color:var(--primary);
      box-shadow:0 12px 24px rgba(27, 46, 94, .08);
      transform:translateY(-1px);
    }
    .hero{
      padding:4.4rem 0 2rem;
    }
    .hero-panel{
      background:
        linear-gradient(135deg, rgba(91,103,255,.08), rgba(0,184,169,.08)),
        rgba(255,255,255,.8);
      border:1px solid rgba(217,226,240,.85);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:auto -8% -35% auto;
      width:260px;
      height:260px;
      background:radial-gradient(circle, rgba(122,73,255,.16), transparent 68%);
      pointer-events:none;
    }
    .hero-inner{
      padding:2rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background:rgba(91,103,255,.10);
      color:var(--primary);
      font-weight:700;
      font-size:.92rem;
      margin-bottom:1rem;
    }
    .hero h1{
      font-size:clamp(2rem, 4vw, 3.45rem);
      line-height:1.08;
      letter-spacing:-.04em;
      margin:0 0 1rem;
      font-weight:900;
    }
    .hero p.lead{
      color:var(--muted);
      font-size:1.05rem;
      line-height:1.8;
      margin-bottom:1.5rem;
      max-width:54ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.85rem;
      align-items:center;
      margin-bottom:1.4rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .8rem;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:.92rem;
      box-shadow:var(--shadow-sm);
    }
    .hero-card{
      height:100%;
      padding:1.15rem;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.96));
      border:1px solid rgba(217,226,240,.88);
      border-radius:26px;
      box-shadow:var(--shadow-sm);
      position:relative;
    }
    .cover-box{
      border-radius:22px;
      background:
        linear-gradient(135deg, rgba(91,103,255,.95), rgba(122,73,255,.92));
      color:#fff;
      min-height:250px;
      padding:1.2rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
    }
    .cover-box::after{
      content:"";
      position:absolute;
      inset:auto -18px -18px auto;
      width:140px;
      height:140px;
      background:rgba(255,255,255,.08);
      border-radius:50%;
    }
    .cover-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:1rem;
      position:relative;
      z-index:1;
    }
    .score{
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.2);
      color:#fff;
      padding:.35rem .65rem;
      border-radius:999px;
      font-size:.9rem;
      display:inline-flex;
      align-items:center;
      gap:.3rem;
    }
    .cover-title{
      font-size:1.35rem;
      font-weight:800;
      line-height:1.3;
      margin:0 0 .55rem;
      position:relative;
      z-index:1;
    }
    .cover-desc{
      position:relative;
      z-index:1;
      margin:0;
      color:rgba(255,255,255,.88);
      line-height:1.7;
      font-size:.98rem;
      max-width:28ch;
    }
    .mini-grid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:.85rem;
      margin-top:.9rem;
    }
    .mini-stat{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      padding:.95rem;
      box-shadow:var(--shadow-sm);
    }
    .mini-stat strong{
      display:block;
      font-size:1.2rem;
      color:var(--text);
    }
    .mini-stat span{
      display:block;
      color:var(--muted);
      font-size:.88rem;
      margin-top:.2rem;
    }
    .section{
      padding:1.2rem 0 2.2rem;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-title{
      margin:0;
      font-size:1.55rem;
      line-height:1.25;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .section-sub{
      margin:.4rem 0 0;
      color:var(--muted);
      line-height:1.7;
      max-width:64ch;
    }
    .glass-bar{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(217,226,240,.88);
      border-radius:24px;
      padding:1rem;
      box-shadow:var(--shadow-sm);
    }
    .feature-item{
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      padding:.5rem .2rem;
    }
    .feature-icon{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg, rgba(91,103,255,.14), rgba(0,184,169,.14));
      color:var(--primary);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:1.1rem;
    }
    .feature-item h3{
      margin:0 0 .25rem;
      font-size:1.03rem;
      font-weight:800;
    }
    .feature-item p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.95rem;
    }
    .content-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
    }
    .info-card{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(217,226,240,.9);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
      transition:.22s ease;
      height:100%;
    }
    .info-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .thumb{
      height:150px;
      background:
        linear-gradient(135deg, rgba(91,103,255,.94), rgba(0,184,169,.88));
      position:relative;
    }
    .thumb.alt{
      background:linear-gradient(135deg, rgba(255,176,32,.92), rgba(122,73,255,.86));
    }
    .thumb.red{
      background:linear-gradient(135deg, rgba(232,85,85,.90), rgba(91,103,255,.84));
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:18px;
      border:1px solid rgba(255,255,255,.2);
      border-radius:20px;
    }
    .card-body-custom{
      padding:1.1rem;
    }
    .card-body-custom h3{
      font-size:1.08rem;
      line-height:1.45;
      margin:0 0 .5rem;
      font-weight:800;
      min-height:3rem;
    }
    .card-body-custom p{
      color:var(--muted);
      line-height:1.75;
      margin:0 0 .9rem;
      min-height:5.1rem;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.95rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.28rem;
      padding:.33rem .55rem;
      font-size:.82rem;
      border-radius:999px;
      background:#f3f6ff;
      color:var(--primary);
      border:1px solid rgba(91,103,255,.12);
    }
    .meta-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.6rem;
      flex-wrap:wrap;
    }
    .meta{
      color:var(--muted);
      font-size:.9rem;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .link-btn{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:var(--primary);
      font-weight:800;
      padding:.25rem 0;
    }
    .link-btn:hover{color:var(--primary-2)}
    .stats-strip{
      background:linear-gradient(135deg, rgba(91,103,255,.10), rgba(0,184,169,.09));
      border:1px solid rgba(217,226,240,.85);
      border-radius:28px;
      padding:1rem;
      box-shadow:var(--shadow-sm);
    }
    .stat-box{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      padding:1rem;
      text-align:center;
      height:100%;
      box-shadow:var(--shadow-sm);
    }
    .stat-box strong{
      display:block;
      font-size:1.55rem;
      font-weight:900;
      margin-bottom:.2rem;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .stat-box span{
      color:var(--muted);
      font-size:.92rem;
    }
    .scroll-row{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding-bottom:.35rem;
      scroll-snap-type:x proximity;
    }
    .scroll-row::-webkit-scrollbar{height:10px}
    .scroll-row::-webkit-scrollbar-thumb{
      background:rgba(91,103,255,.25);
      border-radius:999px;
    }
    .review-card{
      min-width:min(360px, 88vw);
      scroll-snap-align:start;
      background:#fff;
      border:1px solid rgba(217,226,240,.9);
      border-radius:24px;
      box-shadow:var(--shadow-sm);
      padding:1.15rem;
    }
    .quote{
      font-size:1rem;
      line-height:1.8;
      color:var(--text);
      margin-bottom:1rem;
    }
    .reviewer{
      display:flex;
      align-items:center;
      gap:.8rem;
    }
    .avatar{
      width:46px;height:46px;border-radius:16px;
      background:linear-gradient(135deg, rgba(91,103,255,.18), rgba(0,184,169,.18));
      color:var(--primary);
      display:grid;place-items:center;
      font-weight:900;
      flex:0 0 auto;
    }
    .reviewer strong{display:block}
    .reviewer span{color:var(--muted);font-size:.9rem}
    .cta-block{
      background:linear-gradient(135deg, rgba(91,103,255,.95), rgba(122,73,255,.93));
      color:#fff;
      border-radius:30px;
      padding:1.6rem;
      box-shadow:0 24px 52px rgba(91,103,255,.23);
      position:relative;
      overflow:hidden;
    }
    .cta-block::after{
      content:"";
      position:absolute;
      inset:auto -20px -18px auto;
      width:180px;height:180px;
      border-radius:50%;
      background:rgba(255,255,255,.08);
    }
    .cta-block h2{
      margin:0 0 .55rem;
      font-size:1.65rem;
      font-weight:900;
      position:relative;
      z-index:1;
    }
    .cta-block p{
      margin:0 0 1rem;
      color:rgba(255,255,255,.9);
      line-height:1.8;
      max-width:60ch;
      position:relative;
      z-index:1;
    }
    .cta-block .btn-light{
      border-radius:999px;
      font-weight:800;
      padding:.82rem 1.1rem;
      position:relative;
      z-index:1;
    }
    .faq-wrap{
      background:#fff;
      border:1px solid rgba(217,226,240,.9);
      border-radius:28px;
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .accordion-item{
      border:none;
      border-bottom:1px solid rgba(217,226,240,.8);
    }
    .accordion-item:last-child{border-bottom:none}
    .accordion-button{
      background:#fff;
      color:var(--text);
      font-weight:800;
      padding:1.05rem 1.15rem;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      background:rgba(91,103,255,.06);
      color:var(--primary);
    }
    .accordion-button::after{
      background-size:1rem;
    }
    .accordion-body{
      color:var(--muted);
      line-height:1.8;
      padding:0 1.15rem 1.1rem;
    }
    footer{
      margin-top:2rem;
      background:#0f1728;
      color:#d9e3f7;
    }
    .footer-top{
      padding:2.2rem 0 1.4rem;
    }
    .footer-title{
      color:#fff;
      font-weight:900;
      margin:0 0 1rem;
      font-size:1.02rem;
    }
    .footer-text{
      color:#aab7d0;
      line-height:1.8;
      margin:0;
      font-size:.95rem;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.55rem;
    }
    .footer-links a{
      color:#c9d5eb;
      transition:.2s ease;
    }
    .footer-links a:hover{color:#fff}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      padding:1rem 0;
      color:#93a3bf;
      font-size:.92rem;
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      color:#e8eefc;
      margin-top:.9rem;
    }
    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 .22rem rgba(91,103,255,.22);
    }
    @media (max-width: 991.98px){
      .hero{padding-top:2.8rem}
      .content-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .section-head{align-items:flex-start; flex-direction:column}
    }
    @media (max-width: 767.98px){
      .navbar-collapse{
        padding-top:.8rem;
      }
      .navbar .nav-link{
        padding:.7rem 1rem!important;
      }
      .hero-inner{padding:1.25rem}
      .hero h1{font-size:2rem}
      .hero-actions .btn{width:100%}
      .content-grid{grid-template-columns:1fr}
      .mini-grid{grid-template-columns:1fr}
      .section{padding:1rem 0 1.8rem}
      .cta-block{padding:1.25rem}
    }
    @media (max-width: 575.98px){
      .container-xl-custom{width:min(var(--container), calc(100% - 1rem))}
      .brand span{font-size:.98rem}
      .hero-panel{border-radius:24px}
      .hero-inner{padding:1rem}
      .cover-box{min-height:220px}
      .review-card{min-width:82vw}
      .btn-cta,.btn-outline-soft{width:100%; justify-content:center}
    }

/* roulang page: category1 */
:root{
      --bg:#fff8f2;
      --bg-soft:#fff2e6;
      --surface:#ffffff;
      --surface-2:#fffaf5;
      --ink:#271b16;
      --muted:#75665e;
      --subtle:#9a877d;
      --primary:#e95f38;
      --primary-dark:#c84222;
      --primary-soft:#ffe2d6;
      --secondary:#204b45;
      --secondary-soft:#dff3ed;
      --warm:#ffb238;
      --danger:#d93636;
      --border:#f0d8c9;
      --border-strong:#e9bda7;
      --shadow-sm:0 10px 28px rgba(79,42,24,.08);
      --shadow-md:0 18px 45px rgba(79,42,24,.13);
      --shadow-lg:0 28px 70px rgba(79,42,24,.18);
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:30px;
      --container:1180px;
      --focus:0 0 0 .24rem rgba(233,95,56,.22);
    }
    *{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% 2%,rgba(255,178,56,.20),transparent 33%),
        radial-gradient(circle at 92% 4%,rgba(32,75,69,.14),transparent 30%),
        linear-gradient(180deg,#fffaf6 0%,var(--bg) 46%,#fff 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:var(--primary);color:#fff}
    .container-xl-custom{
      width:min(100% - 32px,var(--container));
      margin-inline:auto;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,250,246,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(240,216,201,.78);
      box-shadow:0 10px 30px rgba(79,42,24,.05);
    }
    .navbar{padding:14px 0}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--ink);
      white-space:nowrap;
    }
    .brand-mark{
      width:40px;
      height:40px;
      display:inline-grid;
      place-items:center;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--warm));
      box-shadow:0 12px 26px rgba(233,95,56,.28);
      flex:0 0 auto;
    }
    .brand-mark i{font-size:1.1rem}
    .navbar-toggler{
      border:1px solid var(--border);
      border-radius:14px;
      padding:8px 10px;
      background:#fff;
    }
    .navbar-toggler:focus{box-shadow:var(--focus)}
    .navbar-toggler-icon{
      width:1.2em;
      height:1.2em;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2839,27,22,.78%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .nav-link{
      color:var(--muted);
      font-weight:750;
      border-radius:999px;
      padding:9px 14px!important;
      position:relative;
    }
    .nav-link:hover,.nav-link:focus{
      color:var(--primary-dark);
      background:var(--primary-soft);
    }
    .nav-link.active{
      color:#fff!important;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 10px 22px rgba(233,95,56,.22);
    }
    .btn{
      border:0;
      border-radius:999px;
      font-weight:850;
      padding:11px 18px;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0) scale(.99)}
    .btn:focus-visible{box-shadow:var(--focus)!important}
    .btn-cta{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 16px 32px rgba(233,95,56,.28);
    }
    .btn-cta:hover{color:#fff;box-shadow:0 20px 42px rgba(233,95,56,.36)}
    .btn-outline-soft{
      color:var(--secondary);
      background:#fff;
      border:1px solid var(--border-strong);
      box-shadow:0 10px 24px rgba(79,42,24,.06);
    }
    .btn-outline-soft:hover{
      color:var(--primary-dark);
      background:var(--surface-2);
      border-color:var(--primary);
    }
    .btn-dark-soft{
      color:#fff;
      background:linear-gradient(135deg,var(--secondary),#14322e);
      box-shadow:0 16px 32px rgba(32,75,69,.22);
    }
    .btn-dark-soft:hover{color:#fff;box-shadow:0 22px 44px rgba(32,75,69,.28)}
    main{position:relative}
    .section{padding:86px 0}
    .section-tight{padding:62px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      background:var(--secondary-soft);
      color:var(--secondary);
      font-weight:850;
      font-size:.92rem;
      margin-bottom:18px;
    }
    .hero{
      padding:78px 0 58px;
      position:relative;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg,rgba(255,255,255,.62),transparent 55%),
        radial-gradient(circle at 78% 52%,rgba(233,95,56,.12),transparent 35%);
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.04fr .96fr;
      gap:42px;
      align-items:center;
    }
    h1{
      font-size:clamp(2.3rem,5vw,4.6rem);
      line-height:1.05;
      letter-spacing:-.055em;
      margin:0 0 20px;
      font-weight:950;
    }
    .hero-title-highlight{
      color:var(--primary-dark);
      position:relative;
      display:inline-block;
    }
    .hero-title-highlight:after{
      content:"";
      position:absolute;
      left:3px;
      right:3px;
      bottom:4px;
      height:12px;
      background:rgba(255,178,56,.32);
      z-index:-1;
      border-radius:999px;
    }
    .lead{
      font-size:1.12rem;
      color:var(--muted);
      max-width:670px;
      margin-bottom:28px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
      margin-bottom:26px;
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 11px;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--muted);
      background:rgba(255,255,255,.72);
      font-size:.92rem;
      font-weight:750;
    }
    .hero-panel{
      border:1px solid rgba(233,189,167,.88);
      background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,242,230,.86));
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-lg);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      border-radius:50%;
      right:-60px;
      top:-55px;
      background:rgba(255,178,56,.24);
    }
    .status-strip{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:15px;
      border-radius:22px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow-sm);
      margin-bottom:16px;
    }
    .pulse{
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--danger);
      box-shadow:0 0 0 0 rgba(217,54,54,.38);
      animation:pulse 1.8s infinite;
      flex:0 0 auto;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(217,54,54,.38)}
      70%{box-shadow:0 0 0 12px rgba(217,54,54,0)}
      100%{box-shadow:0 0 0 0 rgba(217,54,54,0)}
    }
    .panel-card{
      position:relative;
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:20px;
      margin-top:14px;
      box-shadow:var(--shadow-sm);
    }
    .risk-meter{
      height:12px;
      border-radius:999px;
      background:#f5e1d4;
      overflow:hidden;
      margin:14px 0 10px;
    }
    .risk-meter span{
      display:block;
      width:82%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--warm),var(--primary),var(--danger));
    }
    .check-list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .check-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:var(--muted);
    }
    .check-list i{color:var(--primary);margin-top:4px}
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:16px;
    }
    .metric{
      background:rgba(255,250,245,.92);
      border:1px solid var(--border);
      border-radius:20px;
      padding:16px;
      text-align:center;
    }
    .metric strong{
      display:block;
      font-size:1.6rem;
      line-height:1;
      color:var(--primary-dark);
      font-weight:950;
      margin-bottom:8px;
    }
    .metric span{font-size:.88rem;color:var(--muted);font-weight:700}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:22px;
      margin-bottom:28px;
    }
    .section-title{
      font-size:clamp(1.72rem,3vw,2.55rem);
      line-height:1.16;
      letter-spacing:-.035em;
      font-weight:950;
      margin:0;
    }
    .section-desc{
      color:var(--muted);
      margin:10px 0 0;
      max-width:700px;
    }
    .tag-bar{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding:14px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.76);
      border-radius:24px;
      box-shadow:var(--shadow-sm);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--secondary);
      font-weight:800;
      font-size:.92rem;
      white-space:nowrap;
    }
    .tag.hot{
      background:linear-gradient(135deg,var(--primary-soft),#fff);
      color:var(--primary-dark);
      border-color:#ffc7b1;
    }
    .card-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .info-card{
      position:relative;
      border:1px solid var(--border);
      background:rgba(255,255,255,.9);
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow-sm);
      overflow:hidden;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
      min-height:100%;
    }
    .info-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow-md);
      border-color:var(--border-strong);
    }
    .info-card .icon{
      width:48px;
      height:48px;
      border-radius:17px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--secondary),var(--primary));
      margin-bottom:18px;
      box-shadow:0 14px 26px rgba(32,75,69,.18);
    }
    .info-card h3{
      font-size:1.18rem;
      font-weight:900;
      margin:0 0 9px;
      letter-spacing:-.02em;
    }
    .info-card p{color:var(--muted);margin:0 0 16px}
    .card-footer-soft{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding-top:14px;
      border-top:1px dashed var(--border);
    }
    .small-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--primary-dark);
      font-weight:850;
    }
    .small-link:hover{gap:10px}
    .split-wrap{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:24px;
      align-items:stretch;
    }
    .dark-panel{
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 10% 20%,rgba(255,178,56,.22),transparent 32%),
        linear-gradient(135deg,#244f48,#102b27);
      color:#fff;
      padding:30px;
      box-shadow:var(--shadow-lg);
      min-height:100%;
    }
    .dark-panel p{color:rgba(255,255,255,.76)}
    .dark-panel .mini-badge{
      background:rgba(255,255,255,.12);
      border-color:rgba(255,255,255,.18);
      color:#fff;
    }
    .process-list{
      display:grid;
      gap:14px;
    }
    .process-item{
      display:grid;
      grid-template-columns:54px 1fr;
      gap:14px;
      padding:18px;
      border:1px solid var(--border);
      border-radius:22px;
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .step-no{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:950;
      background:linear-gradient(135deg,var(--primary),var(--warm));
    }
    .process-item h3{font-size:1.08rem;font-weight:900;margin:0 0 5px}
    .process-item p{color:var(--muted);margin:0}
    .alert-box{
      border:1px solid #ffc5bd;
      background:linear-gradient(135deg,#fff,#fff0ed);
      border-radius:var(--radius);
      padding:22px;
      display:flex;
      gap:16px;
      align-items:flex-start;
      box-shadow:var(--shadow-sm);
    }
    .alert-box i{
      width:42px;
      height:42px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:#fff;
      background:var(--danger);
      flex:0 0 auto;
    }
    .scenario-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:20px;
    }
    .scenario-large{
      min-height:360px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid var(--border);
      background:
        linear-gradient(135deg,rgba(39,27,22,.62),rgba(32,75,69,.58)),
        radial-gradient(circle at 30% 20%,rgba(255,178,56,.42),transparent 32%),
        linear-gradient(135deg,#6f3b25,#173b35);
      color:#fff;
      padding:32px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:var(--shadow-md);
    }
    .scenario-large p{color:rgba(255,255,255,.8)}
    .scenario-side{display:grid;gap:20px}
    .mini-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:20px;
      box-shadow:var(--shadow-sm);
    }
    .mini-card h3{font-weight:900;font-size:1.08rem;margin:0 0 8px}
    .mini-card p{color:var(--muted);margin:0}
    .faq-wrap{
      max-width:900px;
      margin-inline:auto;
    }
    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      border:1px solid var(--border)!important;
      border-radius:20px!important;
      overflow:hidden;
      box-shadow:var(--shadow-sm);
      background:#fff;
    }
    .accordion-button{
      font-weight:900;
      color:var(--ink);
      background:#fff;
      padding:20px 22px;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary-dark);
      background:#fff7f1;
    }
    .accordion-button:focus{box-shadow:var(--focus)!important}
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px;
    }
    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 12% 20%,rgba(255,178,56,.30),transparent 32%),
        linear-gradient(135deg,var(--primary),var(--primary-dark));
      color:#fff;
      padding:38px;
      box-shadow:var(--shadow-lg);
    }
    .cta-band:after{
      content:"";
      position:absolute;
      width:260px;
      height:260px;
      border:1px solid rgba(255,255,255,.24);
      border-radius:50%;
      right:-75px;
      bottom:-120px;
    }
    .cta-band p{color:rgba(255,255,255,.82);margin:0}
    .cta-band .btn-outline-soft{
      background:rgba(255,255,255,.14);
      color:#fff;
      border-color:rgba(255,255,255,.34);
      box-shadow:none;
    }
    .cta-band .btn-outline-soft:hover{background:#fff;color:var(--primary-dark)}
    .notice-line{
      display:flex;
      align-items:center;
      gap:12px;
      padding:16px 18px;
      border-radius:22px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow:var(--shadow-sm);
      color:var(--muted);
      font-weight:750;
    }
    .notice-line i{color:var(--primary);font-size:1.25rem}
    footer{
      color:#d9e8e4;
      background:
        radial-gradient(circle at 14% 8%,rgba(233,95,56,.24),transparent 32%),
        linear-gradient(135deg,#102b27,#071917);
      margin-top:40px;
    }
    .footer-top{padding:58px 0 44px}
    .footer-text{color:rgba(217,232,228,.74);margin:0;line-height:1.8}
    .footer-title{
      color:#fff;
      font-size:1rem;
      font-weight:900;
      margin:0 0 16px;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .footer-links a{color:rgba(217,232,228,.74)}
    .footer-links a:hover{color:#fff;padding-left:4px}
    .footer-badge{
      display:inline-flex;
      gap:8px;
      align-items:center;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      padding:9px 12px;
      border-radius:999px;
      margin-top:18px;
      font-weight:800;
    }
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.12);
      padding:18px 0;
      color:rgba(217,232,228,.62);
      font-size:.92rem;
    }
    @media (max-width: 991.98px){
      .navbar-collapse{
        margin-top:14px;
        padding:16px;
        border:1px solid var(--border);
        border-radius:24px;
        background:#fff;
        box-shadow:var(--shadow-md);
      }
      .nav-link{padding:11px 13px!important}
      .hero-grid,.split-wrap,.scenario-grid{grid-template-columns:1fr}
      .hero{padding:56px 0 44px}
      .section{padding:66px 0}
      .card-grid{grid-template-columns:repeat(2,1fr)}
      .section-head{align-items:flex-start;flex-direction:column}
    }
    @media (max-width: 767.98px){
      .container-xl-custom{width:min(100% - 24px,var(--container))}
      .brand span:last-child{max-width:230px;overflow:hidden;text-overflow:ellipsis}
      .hero-actions .btn,.cta-band .btn{width:100%}
      .metric-grid{grid-template-columns:1fr}
      .card-grid{grid-template-columns:1fr}
      .tag-bar{
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
      .tag{flex:0 0 auto}
      .process-item{grid-template-columns:46px 1fr}
      .step-no{width:46px;height:46px;border-radius:15px}
      .alert-box{flex-direction:column}
      .cta-band{padding:28px}
    }
    @media (max-width: 520px){
      h1{font-size:2.2rem}
      .lead{font-size:1rem}
      .status-strip{align-items:flex-start;flex-direction:column}
      .section{padding:54px 0}
      .section-tight{padding:46px 0}
      .hero-panel{padding:16px;border-radius:24px}
      .dark-panel,.scenario-large{padding:24px;border-radius:24px}
      .brand-mark{width:36px;height:36px;border-radius:13px}
    }

/* roulang page: category2 */
:root{
      --bg:#fff8f3;
      --bg-soft:#fff1e7;
      --surface:#ffffff;
      --surface-2:#fffaf6;
      --ink:#2b1f1a;
      --muted:#7b6760;
      --weak:#a28d84;
      --primary:#d45b2c;
      --primary-dark:#ad3f18;
      --primary-soft:#ffe2d4;
      --secondary:#355c55;
      --secondary-soft:#dff2ed;
      --warm:#ffc15a;
      --danger:#c83a35;
      --success:#20875b;
      --line:#ead8cf;
      --line-strong:#dfc0b2;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:30px;
      --shadow-sm:0 10px 28px rgba(61,38,25,.08);
      --shadow:0 20px 55px rgba(74,44,30,.13);
      --shadow-hover:0 26px 70px rgba(74,44,30,.2);
      --container:1180px;
      --ease:all .22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(circle at 10% 0%, rgba(255,193,90,.25), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(53,92,85,.16), transparent 28%),
        linear-gradient(180deg,var(--bg),#fff 46%,#fff8f3);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      line-height:1.72;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:var(--primary);color:#fff}
    .container-xl-custom{
      width:min(var(--container), calc(100% - 40px));
      margin-inline:auto;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,248,243,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(234,216,207,.82);
      box-shadow:0 8px 30px rgba(74,44,30,.05);
    }
    .navbar{padding:14px 0}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--ink);
      white-space:nowrap;
    }
    .brand:hover{color:var(--primary-dark)}
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--warm));
      box-shadow:0 12px 28px rgba(212,91,44,.28);
      flex:0 0 auto;
    }
    .navbar-toggler{
      border:1px solid var(--line);
      border-radius:14px;
      background:#fff;
      padding:8px 10px;
      box-shadow:var(--shadow-sm);
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(212,91,44,.18)}
    .navbar-nav .nav-link{
      color:var(--muted);
      font-weight:750;
      padding:10px 14px!important;
      border-radius:999px;
      position:relative;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus{
      color:var(--primary-dark);
      background:var(--primary-soft);
    }
    .navbar-nav .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 12px 26px rgba(212,91,44,.2);
    }
    .btn{
      border-radius:999px;
      font-weight:850;
      padding:11px 18px;
      border-width:1px;
      transition:var(--ease);
      line-height:1.25;
    }
    .btn:focus-visible,
    a:focus-visible,
    .form-control:focus{
      outline:0;
      box-shadow:0 0 0 4px rgba(212,91,44,.18)!important;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0) scale(.99)}
    .btn-cta{
      color:#fff!important;
      border-color:transparent!important;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 16px 34px rgba(212,91,44,.28);
    }
    .btn-cta:hover{
      color:#fff!important;
      box-shadow:0 20px 45px rgba(212,91,44,.36);
      filter:saturate(1.08);
    }
    .btn-outline-soft{
      color:var(--secondary)!important;
      background:#fff;
      border-color:var(--line)!important;
      box-shadow:0 10px 22px rgba(53,92,85,.08);
    }
    .btn-outline-soft:hover{
      background:var(--secondary-soft);
      border-color:rgba(53,92,85,.2)!important;
      color:var(--secondary)!important;
    }
    .hero{
      position:relative;
      padding:76px 0 42px;
      overflow:hidden;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:32px auto auto 50%;
      width:560px;
      height:560px;
      transform:translateX(-8%);
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,193,90,.22), transparent 67%);
      pointer-events:none;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      font-weight:850;
      font-size:.92rem;
    }
    .hero h1{
      margin:18px 0 18px;
      font-size:clamp(2rem, 4.5vw, 4.25rem);
      line-height:1.08;
      letter-spacing:-.055em;
      font-weight:950;
    }
    .lead{
      color:var(--muted);
      font-size:1.12rem;
      max-width:720px;
      margin:0;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .status-panel{
      position:relative;
      background:linear-gradient(145deg,#fff,#fff4ec);
      border:1px solid rgba(234,216,207,.9);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      padding:24px;
      overflow:hidden;
    }
    .status-panel:after{
      content:"";
      position:absolute;
      width:160px;
      height:160px;
      right:-45px;
      top:-45px;
      border-radius:50%;
      background:rgba(212,91,44,.12);
    }
    .risk-card{
      position:relative;
      border-radius:24px;
      padding:22px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      z-index:1;
    }
    .risk-meter{
      height:12px;
      border-radius:999px;
      background:#f3ded3;
      overflow:hidden;
      margin:18px 0 12px;
    }
    .risk-meter span{
      display:block;
      width:86%;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--warm),var(--primary),var(--danger));
    }
    .mini-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-top:14px;
    }
    .mini-stat{
      border-radius:18px;
      background:var(--surface-2);
      border:1px solid var(--line);
      padding:14px;
    }
    .mini-stat strong{
      display:block;
      font-size:1.35rem;
      line-height:1.1;
      font-weight:950;
      color:var(--secondary);
    }
    .mini-stat span{font-size:.88rem;color:var(--muted)}
    main{position:relative}
    .section{padding:64px 0}
    .section-tight{padding:42px 0}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:26px;
    }
    .section-title{
      margin:0;
      font-weight:950;
      letter-spacing:-.035em;
      font-size:clamp(1.62rem, 2.6vw, 2.65rem);
      line-height:1.18;
    }
    .section-desc{
      margin:10px 0 0;
      color:var(--muted);
      max-width:680px;
    }
    .badge-soft,
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:7px 10px;
      font-weight:800;
      font-size:.86rem;
      color:var(--secondary);
      background:var(--secondary-soft);
      border:1px solid rgba(53,92,85,.12);
    }
    .tag.orange{
      color:var(--primary-dark);
      background:var(--primary-soft);
      border-color:rgba(212,91,44,.15);
    }
    .tag.gray{
      color:var(--muted);
      background:#fff;
      border-color:var(--line);
    }
    .notice-strip{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:20px;
      border-radius:var(--radius-lg);
      padding:22px;
      background:linear-gradient(135deg,var(--secondary),#263f3a);
      color:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .notice-strip:before{
      content:"";
      position:absolute;
      width:280px;
      height:280px;
      border-radius:50%;
      right:-90px;
      bottom:-120px;
      background:rgba(255,193,90,.18);
    }
    .notice-strip h2{font-weight:950;letter-spacing:-.03em;margin:0 0 8px}
    .notice-strip p{color:rgba(255,255,255,.78);margin:0}
    .notice-list{
      position:relative;
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
      z-index:1;
    }
    .notice-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.14);
    }
    .mixed-layout{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) 360px;
      gap:24px;
      align-items:start;
    }
    .story-stack{
      display:grid;
      gap:18px;
    }
    .story-card{
      display:grid;
      grid-template-columns:210px minmax(0,1fr);
      gap:20px;
      align-items:stretch;
      border:1px solid var(--line);
      background:rgba(255,255,255,.82);
      border-radius:var(--radius-lg);
      padding:16px;
      box-shadow:var(--shadow-sm);
      transition:var(--ease);
      overflow:hidden;
    }
    .story-card:nth-child(even){grid-template-columns:minmax(0,1fr) 210px}
    .story-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:var(--line-strong);
    }
    .story-visual{
      min-height:190px;
      border-radius:24px;
      background:
        linear-gradient(135deg, rgba(212,91,44,.92), rgba(255,193,90,.86)),
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.55), transparent 34%);
      color:#fff;
      padding:18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
    }
    .story-visual.green{
      background:linear-gradient(135deg,rgba(53,92,85,.95),rgba(32,135,91,.78));
    }
    .story-visual.dark{
      background:linear-gradient(135deg,#2b1f1a,#7b3a24);
    }
    .story-visual:after{
      content:"";
      position:absolute;
      width:110px;
      height:110px;
      border-radius:36px;
      background:rgba(255,255,255,.16);
      right:-28px;
      bottom:-24px;
      transform:rotate(16deg);
    }
    .story-visual i{font-size:2rem;position:relative;z-index:1}
    .story-visual span{
      position:relative;
      z-index:1;
      font-weight:950;
      font-size:1.12rem;
    }
    .story-body{
      padding:8px 6px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-width:0;
    }
    .story-body h3{
      font-size:1.35rem;
      font-weight:950;
      letter-spacing:-.025em;
      margin:10px 0 8px;
    }
    .story-body p{
      color:var(--muted);
      margin:0 0 14px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:14px;
    }
    .sidebar{
      position:sticky;
      top:96px;
      display:grid;
      gap:16px;
    }
    .side-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:20px;
      box-shadow:var(--shadow-sm);
    }
    .side-card h3{
      font-size:1.08rem;
      font-weight:950;
      margin:0 0 12px;
      letter-spacing:-.02em;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
    }
    .check-list i{color:var(--success);margin-top:4px}
    .hot-tags{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }
    .form-control{
      min-height:48px;
      border-radius:999px;
      border:1px solid var(--line);
      padding:10px 16px;
      color:var(--ink);
      background:#fffaf7;
    }
    .form-control::placeholder{color:var(--weak)}
    .timeline{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .step-card{
      position:relative;
      padding:22px;
      border-radius:var(--radius);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      min-height:210px;
      transition:var(--ease);
    }
    .step-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow);
    }
    .step-num{
      width:44px;
      height:44px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:950;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--warm));
      margin-bottom:16px;
    }
    .step-card h3{
      font-size:1.12rem;
      font-weight:950;
      margin:0 0 8px;
    }
    .step-card p{margin:0;color:var(--muted);font-size:.96rem}
    .help-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .help-card{
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,#fff,#fff9f5);
      border:1px solid var(--line);
      padding:24px;
      box-shadow:var(--shadow-sm);
    }
    .help-card h3{
      font-weight:950;
      margin:0 0 10px;
      letter-spacing:-.02em;
    }
    .help-card p{color:var(--muted);margin:0 0 16px}
    .help-card .icon{
      width:48px;
      height:48px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      background:linear-gradient(135deg,var(--secondary),#4a877b);
      margin-bottom:16px;
    }
    .faq-wrap{
      max-width:920px;
      margin:0 auto;
    }
    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      border:1px solid var(--line)!important;
      border-radius:20px!important;
      overflow:hidden;
      background:#fff;
      box-shadow:var(--shadow-sm);
    }
    .accordion-button{
      font-weight:900;
      color:var(--ink);
      background:#fff;
      padding:18px 20px;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary-dark);
      background:var(--primary-soft);
    }
    .accordion-button:focus{box-shadow:0 0 0 4px rgba(212,91,44,.14)!important}
    .accordion-body{color:var(--muted);padding:18px 20px 22px}
    .cta-panel{
      border-radius:34px;
      padding:34px;
      background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg,var(--primary-dark),var(--primary));
      color:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .cta-panel:after{
      content:"";
      position:absolute;
      right:-70px;
      top:-70px;
      width:240px;
      height:240px;
      border-radius:50%;
      background:rgba(255,193,90,.24);
    }
    .cta-panel h2{font-weight:950;letter-spacing:-.035em;margin:0 0 10px}
    .cta-panel p{color:rgba(255,255,255,.82);margin:0;max-width:720px}
    .cta-panel .btn{
      background:#fff;
      color:var(--primary-dark)!important;
      border-color:#fff!important;
      box-shadow:0 16px 36px rgba(43,31,26,.18);
    }
    .cta-panel .btn:hover{background:#fff8f3}
    footer{
      margin-top:64px;
      background:#241a16;
      color:#fff;
    }
    .footer-top{padding:54px 0}
    .footer-text{
      color:rgba(255,255,255,.68);
      margin:0;
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      color:#fff;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      padding:8px 12px;
      font-weight:800;
      font-size:.9rem;
    }
    .footer-title{
      font-size:1rem;
      font-weight:950;
      margin:0 0 14px;
      color:#fff;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:rgba(255,255,255,.68);
    }
    .footer-links a:hover{
      color:#fff;
      padding-left:3px;
    }
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.1);
      padding:16px 0;
      color:rgba(255,255,255,.58);
      font-size:.9rem;
    }
    @media (max-width: 1199.98px){
      .mixed-layout{grid-template-columns:1fr}
      .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
      .timeline{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 991.98px){
      .navbar-collapse{
        margin-top:14px;
        padding:16px;
        border:1px solid var(--line);
        border-radius:24px;
        background:#fff;
        box-shadow:var(--shadow-sm);
      }
      .navbar-nav .nav-link{display:block}
      .hero{padding:54px 0 30px}
      .notice-strip{grid-template-columns:1fr}
      .story-card,
      .story-card:nth-child(even){grid-template-columns:1fr}
      .story-card:nth-child(even) .story-visual{order:0}
      .story-visual{min-height:160px}
      .section-head{display:block}
      .help-grid{grid-template-columns:1fr}
    }
    @media (max-width: 767.98px){
      .container-xl-custom{width:min(100% - 28px, var(--container))}
      .hero-actions .btn,
      .cta-panel .btn{width:100%;justify-content:center}
      .mini-grid{grid-template-columns:1fr}
      .sidebar{grid-template-columns:1fr}
      .timeline{grid-template-columns:1fr}
      .section{padding:46px 0}
      .section-tight{padding:34px 0}
      .cta-panel{padding:26px;border-radius:26px}
      .notice-strip{padding:18px;border-radius:26px}
      .brand span:last-child{max-width:220px;overflow:hidden;text-overflow:ellipsis}
    }
    @media (max-width: 520px){
      .hero h1{font-size:2.05rem}
      .lead{font-size:1rem}
      .story-card{padding:12px;border-radius:24px}
      .story-body h3{font-size:1.18rem}
      .side-card,.help-card,.step-card{padding:18px}
      .tag-row,.hot-tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
      .tag-row::-webkit-scrollbar,.hot-tags::-webkit-scrollbar{height:4px}
      .tag-row::-webkit-scrollbar-thumb,.hot-tags::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
    }