/* roulang page: index */
:root{
      --primary:#1769ff;
      --primary-dark:#0f47bd;
      --primary-soft:#eaf2ff;
      --secondary:#00b8d9;
      --accent:#ff7a2f;
      --accent-dark:#e35f16;
      --success:#18a058;
      --warning:#ffb020;
      --ink:#102033;
      --muted:#66758a;
      --light:#f6f9ff;
      --white:#ffffff;
      --line:#dbe6f5;
      --line-strong:#c7d6eb;
      --shadow-sm:0 8px 22px rgba(16,32,51,.08);
      --shadow-md:0 16px 45px rgba(23,105,255,.14);
      --shadow-lg:0 24px 70px rgba(16,32,51,.16);
      --radius-sm:12px;
      --radius-md:18px;
      --radius-lg:28px;
      --radius-xl:36px;
      --container:1180px;
      --nav-h:72px;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      padding-bottom:84px;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#f8fbff 0%,#ffffff 36%,#f5f8ff 100%);
      line-height:1.72;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;}
    a:hover{color:var(--primary);}
    img{max-width:100%;height:auto;display:block;}
    button,input,select,textarea{font:inherit;}
    ::selection{background:rgba(23,105,255,.18);color:var(--ink);}

    .container-rl{
      width:min(var(--container),calc(100% - 32px));
      margin-inline:auto;
    }
    .section{
      padding:86px 0;
      position:relative;
    }
    .section-tight{padding:64px 0;}
    .band-blue{
      background:linear-gradient(135deg,#f0f6ff 0%,#ffffff 46%,#eef9ff 100%);
      border-top:1px solid rgba(199,214,235,.55);
      border-bottom:1px solid rgba(199,214,235,.55);
    }
    .band-white{
      background:rgba(255,255,255,.82);
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-size:14px;
      font-weight:700;
      letter-spacing:.02em;
      border:1px solid rgba(23,105,255,.14);
    }
    .section-title{
      margin:16px 0 12px;
      font-weight:900;
      letter-spacing:-.04em;
      font-size:clamp(28px,4vw,46px);
      line-height:1.18;
      color:var(--ink);
    }
    .section-desc{
      max-width:760px;
      margin:0;
      color:var(--muted);
      font-size:17px;
    }
    .text-gradient{
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(16px);
           border-bottom:1px solid rgba(219,230,245,.78);
      box-shadow:0 10px 28px rgba(16,32,51,.06);
    }
    .brand-row{
      min-height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:900;
      letter-spacing:-.03em;
      color:var(--ink);
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:19px;
      font-weight:900;
      background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
      box-shadow:0 12px 26px rgba(23,105,255,.24);
      flex:0 0 auto;
    }
    .brand-name{
      font-size:20px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .mini-search{
      width:290px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:9px 13px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--muted);
      box-shadow:var(--shadow-sm);
    }
    .mini-search input{
      border:0;
      outline:0;
      width:100%;
      color:var(--ink);
      background:transparent;
      font-size:14px;
    }
    .mini-search input::placeholder{color:#8a98aa;}
    .mini-search:focus-within{
      border-color:rgba(23,105,255,.45);
      box-shadow:0 0 0 4px rgba(23,105,255,.12),var(--shadow-sm);
    }
    .chip-nav-wrap{
      border-top:1px solid rgba(219,230,245,.62);
      background:rgba(248,251,255,.7);
    }
    .chip-nav{
      display:flex;
      gap:10px;
      overflow-x:auto;
      scrollbar-width:none;
      padding:12px 0;
      scroll-snap-type:x proximity;
    }
    .chip-nav::-webkit-scrollbar{display:none;}
    .nav-chip{
      flex:0 0 auto;
      scroll-snap-align:start;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#536276;
      font-size:14px;
      font-weight:800;
      box-shadow:0 6px 16px rgba(16,32,51,.04);
    }
    .nav-chip:hover{
      color:var(--primary);
      border-color:rgba(23,105,255,.35);
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(23,105,255,.10);
    }
    .nav-chip.active{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      border-color:transparent;
      box-shadow:0 12px 24px rgba(23,105,255,.22);
    }

    .btn-rl{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:46px;
      padding:12px 19px;
      border:0;
      border-radius:999px;
      font-weight:900;
      line-height:1;
      cursor:pointer;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
      white-space:nowrap;
    }
    .btn-rl:focus-visible,
    .nav-chip:focus-visible,
    .footer-link:focus-visible,
    .article-link:focus-visible{
      outline:3px solid rgba(23,105,255,.26);
      outline-offset:3px;
    }
    .btn-primary-rl{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-dark));
      box-shadow:0 14px 30px rgba(23,105,255,.28);
    }
    .btn-primary-rl:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 42px rgba(23,105,255,.36);
    }
    .btn-accent-rl{
      color:#fff;
      background:linear-gradient(135deg,var(--accent),#ff4d55);
      box-shadow:0 14px 30px rgba(255,122,47,.28);
    }
    .btn-accent-rl:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 42px rgba(255,122,47,.36);
    }
    .btn-ghost-rl{
      background:#fff;
      color:var(--primary-dark);
      border:1px solid rgba(23,105,255,.24);
      box-shadow:var(--shadow-sm);
    }
    .btn-ghost-rl:hover{
      background:var(--primary-soft);
      color:var(--primary-dark);
      transform:translateY(-2px);
      border-color:rgba(23,105,255,.38);
    }
    .badge-rl{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:7px 10px;
      background:#fff;
      color:var(--primary-dark);
      border:1px solid rgba(23,105,255,.16);
      font-size:13px;
      font-weight:800;
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:78px 0 72px;
      background:
        radial-gradient(circle at 14% 16%,rgba(0,184,217,.20) 0,transparent 28%),
        radial-gradient(circle at 84% 12%,rgba(23,105,255,.18) 0,transparent 30%),
        linear-gradient(135deg,#ffffff 0%,#f2f7ff 54%,#e9f6ff 100%);
    }
    .hero::after{
      content:"";
      position:absolute;
      left:-5%;
      right:-5%;
      bottom:-74px;
      height:142px;
      transform:skewY(-3deg);
      background:#fff;
      box-shadow:0 -20px 60px rgba(23,105,255,.05);
    }
    .hero-inner{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:38px;
      align-items:center;
    }
    .hero-panel{
      max-width:760px;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:9px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(255,122,47,.22);
      color:#b84b0b;
      font-weight:900;
      box-shadow:0 12px 28px rgba(255,122,47,.10);
      margin-bottom:18px;
    }
    .hero-kicker .dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(255,122,47,.16);
    }
    h1.hero-title{
      margin:0;
      font-size:clamp(36px,6vw,66px);
      line-height:1.05;
      letter-spacing:-.065em;
      font-weight:950;
      color:var(--ink);
    }
    .hero-lead{
      max-width:680px;
      margin:22px 0 0;
      font-size:18px;
      color:#4d5d72;
      line-height:1.82;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:13px;
      margin-top:28px;
    }
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:28px;
      max-width:720px;
    }
    .metric{
      padding:16px 16px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.84);
      border:1px solid rgba(219,230,245,.85);
      box-shadow:var(--shadow-sm);
    }
    .metric strong{
      display:block;
      font-size:24px;
      line-height:1.1;
      color:var(--primary-dark);
      font-weight:950;
    }
    .metric span{
      display:block;
      margin-top:6px;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .promo-stage{
      position:relative;
      min-height:430px;
      border-radius:var(--radius-xl);
      padding:24px;
      background:
        linear-gradient(135deg,rgba(23,105,255,.95),rgba(0,184,217,.86)),
        linear-gradient(0deg,#fff,#fff);
      box-shadow:var(--shadow-lg);
      color:#fff;
      overflow:hidden;
    }
    .promo-stage::before{
      content:"";
      position:absolute;
      width:320px;
      height:320px;
      right:-96px;
      top:-82px;
      border-radius:50%;
      background:rgba(255,255,255,.16);
    }
    .promo-stage::after{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      left:-80px;
      bottom:-80px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
    }
    .burst{
      position:absolute;
      right:22px;
      top:20px;
      width:110px;
      height:110px;
      display:grid;
      place-items:center;
      text-align:center;
      padding:12px;
      color:#fff;
      font-weight:950;
      line-height:1.18;
      background:linear-gradient(135deg,var(--accent),#ff3d68);
      clip-path:polygon(50% 0%,61% 20%,82% 10%,80% 34%,100% 46%,79% 58%,90% 82%,64% 80%,50% 100%,37% 79%,12% 88%,20% 62%,0 50%,20% 38%,10% 14%,36% 20%);
      filter:drop-shadow(0 16px 26px rgba(255,77,85,.34));
      transform:rotate(8deg);
      z-index:2;
      font-size:15px;
    }
    .stage-content{
      position:relative;
      z-index:1;
      display:grid;
      height:100%;
      gap:18px;
    }
    .stage-title{
      max-width:360px;
      font-size:30px;
      line-height:1.22;
      font-weight:950;
      letter-spacing:-.04em;
      margin:52px 0 0;
    }
    .stage-note{
      max-width:410px;
      color:rgba(255,255,255,.86);
      margin:0;
      font-weight:600;
    }
    .stage-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      align-self:end;
    }
    .stage-card{
      min-height:98px;
      padding:16px;
      border-radius:22px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(10px);
    }
    .stage-card b{
      display:block;
      font-size:18px;
      margin-bottom:6px;
    }
    .stage-card span{
      color:rgba(255,255,255,.82);
      font-size:13px;
      line-height:1.55;
    }

    .feature-layout{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:28px;
      align-items:start;
      margin-top:34px;
    }
    .feature-intro{
      position:sticky;
      top:150px;
      padding:28px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-md);
    }
    .feature-intro p{color:var(--muted);margin:12px 0 0;}
    .feature-list{
      display:grid;
      gap:16px;
    }
    .feature-card{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:16px;
      padding:22px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .feature-card:hover{
      transform:translateY(-4px);
      border-color:rgba(23,105,255,.25);
      box-shadow:var(--shadow-md);
    }
    .icon-box{
      width:50px;
      height:50px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:950;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      box-shadow:0 12px 24px rgba(23,105,255,.20);
    }
    .feature-card h3,
    .scenario-card h3,
    .plan-card h3,
    .proof-card h3{
      margin:0 0 7px;
      font-weight:900;
      letter-spacing:-.03em;
      font-size:20px;
    }
    .feature-card p,
    .scenario-card p,
    .proof-card p{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }

    .triple-row{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr;
      gap:18px;
      margin-top:34px;
    }
    .selling-card{
      position:relative;
      overflow:hidden;
      padding:26px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      min-height:218px;
    }
    .selling-card:first-child{
      background:linear-gradient(135deg,#0f47bd,#1769ff 58%,#00b8d9);
      color:#fff;
      box-shadow:var(--shadow-lg);
    }
    .selling-card:first-child p{color:rgba(255,255,255,.82);}
    .selling-card .num{
      position:absolute;
      right:20px;
      top:12px;
      font-size:54px;
      font-weight:950;
      color:rgba(23,105,255,.10);
      line-height:1;
    }
    .selling-card:first-child .num{color:rgba(255,255,255,.16);}
    .selling-card h3{
      position:relative;
      margin:0 0 14px;
      font-weight:950;
      letter-spacing:-.04em;
      font-size:24px;
    }
    .selling-card p{
      position:relative;
      margin:0;
      color:var(--muted);
    }
    .selling-card ul{
      position:relative;
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:grid;
      gap:9px;
    }
    .selling-card li{
      display:flex;
      gap:9px;
      align-items:flex-start;
      font-size:14px;
      font-weight:700;
    }
    .selling-card li::before{
      content:"✓";
      width:21px;
      height:21px;
      border-radius:50%;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      background:rgba(24,160,88,.12);
      color:var(--success);
      font-size:12px;
      margin-top:1px;
    }
    .selling-card:first-child li::before{
      background:rgba(255,255,255,.18);
      color:#fff;
    }

    .scenario-wrap{
      margin-top:34px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      align-items:stretch;
    }
    .scenario-card{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .scenario-top{
      min-height:170px;
      padding:22px;
      background:
        linear-gradient(135deg,rgba(23,105,255,.12),rgba(0,184,217,.08)),
        repeating-linear-gradient(135deg,rgba(23,105,255,.08) 0 1px,transparent 1px 14px);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
    }
    .scenario-tag{
      padding:7px 10px;
      border-radius:999px;
      background:#fff;
      color:var(--primary-dark);
      font-size:13px;
      font-weight:900;
      box-shadow:var(--shadow-sm);
    }
    .scenario-body{padding:24px;}
    .step-list{
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:grid;
      gap:12px;
    }
    .step-list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      color:#526074;
      font-size:15px;
    }
    .step-list i{
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-style:normal;
      font-weight:950;
      font-size:13px;
    }

    .proof-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      margin-top:34px;
    }
    .proof-card{
      padding:22px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
    }
    .proof-card strong{
      display:block;
      font-size:34px;
      font-weight:950;
      letter-spacing:-.05em;
      color:var(--primary-dark);
      line-height:1.05;
      margin-bottom:10px;
    }
    .quote-wall{
      margin-top:18px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .quote{
      padding:22px;
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,#fff,#f8fbff);
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
    }
    .quote p{margin:0;color:#415169;}
    .quote footer{
      margin-top:14px;
      color:var(--primary-dark);
      font-weight:900;
      font-size:14px;
    }

    .plan-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      margin-top:34px;
    }
    .plan-card{
      position:relative;
      padding:26px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      display:flex;
      flex-direction:column;
      min-height:410px;
    }
    .plan-card.recommended{
      border-color:rgba(23,105,255,.34);
      box-shadow:var(--shadow-lg);
      transform:translateY(-8px);
    }
    .recommend-badge{
      position:absolute;
      top:16px;
      right:16px;
      padding:7px 10px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--accent),#ff4d55);
      color:#fff;
      font-size:12px;
      font-weight:950;
    }
    .plan-price{
      margin:12px 0 4px;
      display:flex;
      align-items:baseline;
      gap:6px;
    }
    .plan-price b{
      font-size:34px;
      font-weight:950;
      color:var(--primary-dark);
      letter-spacing:-.05em;
    }
    .plan-price span{color:var(--muted);font-weight:700;}
    .plan-card p{color:var(--muted);margin:0 0 18px;}
    .plan-card ul{
      list-style:none;
      padding:0;
      margin:0 0 22px;
      display:grid;
      gap:10px;
      flex:1;
    }
    .plan-card li{
      display:flex;
      gap:9px;
      color:#4f5e72;
      font-size:15px;
    }
    .plan-card li::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--secondary);
      margin-top:10px;
      flex:0 0 auto;
    }

    .ladder{
      margin-top:34px;
      padding:28px;
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-md);
    }
    .progress-rl{
      height:12px;
      border-radius:999px;
      overflow:hidden;
      background:#e8eef8;
      margin:8px 0 28px;
    }
    .progress-rl span{
      display:block;
      height:100%;
      width:68%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
      box-shadow:0 8px 18px rgba(23,105,255,.22);
    }
    .ladder-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .ladder-item{
      padding:18px;
      border-radius:20px;
      background:#f8fbff;
      border:1px solid var(--line);
    }
    .ladder-item.active{
      background:linear-gradient(135deg,#eef5ff,#fff7f1);
      border-color:rgba(255,122,47,.35);
    }
    .ladder-item b{
      display:block;
      font-size:19px;
      color:var(--ink);
      margin-bottom:6px;
    }
    .ladder-item span{color:var(--muted);font-size:14px;}

    .article-shell{
      margin-top:34px;
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:24px;
      align-items:start;
    }
    .article-list{
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .article-link{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:18px 20px;
      border-bottom:1px solid var(--line);
      color:var(--ink);
    }
    .article-link:last-child{border-bottom:0;}
    .article-link:hover{
      background:#f7fbff;
      color:var(--primary-dark);
    }
    .article-date{
      width:58px;
      height:58px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:var(--primary-soft);
      color:var(--primary-dark);
      font-weight:950;
      line-height:1.1;
      text-align:center;
      font-size:13px;
    }
    .article-title{
      margin:0 0 5px;
      font-size:18px;
      font-weight:900;
      letter-spacing:-.03em;
    }
    .article-summary{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }
    .article-arrow{
      color:#9aabc0;
      font-weight:950;
      font-size:20px;
    }
    .recommend-panel{
      padding:24px;
      border-radius:var(--radius-lg);
      background:linear-gradient(135deg,#102033,#1b3f76);
      color:#fff;
      box-shadow:var(--shadow-lg);
    }
    .recommend-panel h3{
      margin:0 0 12px;
      font-weight:950;
      letter-spacing:-.04em;
      font-size:26px;
    }
    .recommend-panel p{color:rgba(255,255,255,.76);margin:0 0 18px;}
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }
    .tag-cloud span{
      padding:8px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.16);
      color:rgba(255,255,255,.9);
      font-size:13px;
      font-weight:800;
    }

    .faq-grid{
      margin-top:34px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .faq-item{
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
    }
    .faq-item h3{
      margin:0 0 10px;
      font-size:19px;
      font-weight:950;
      letter-spacing:-.03em;
    }
    .faq-item p{margin:0;color:var(--muted);font-size:15px;}

    .cta-section{
      padding:70px 0;
      background:
        radial-gradient(circle at 18% 20%,rgba(255,122,47,.20),transparent 25%),
        linear-gradient(135deg,#0f47bd,#1769ff 60%,#00b8d9);
      color:#fff;
      overflow:hidden;
      position:relative;
    }
    .cta-section::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg,transparent 0 58%,rgba(255,255,255,.12) 58% 72%,transparent 72%);
    }
    .cta-box{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr auto;
      gap:28px;
      align-items:center;
    }
    .cta-box h2{
      margin:0 0 10px;
      font-size:clamp(30px,4vw,48px);
      line-height:1.15;
      font-weight:950;
      letter-spacing:-.05em;
    }
    .cta-box p{
      margin:0;
      max-width:760px;
      color:rgba(255,255,255,.82);
      font-size:17px;
    }

    .site-footer{
      background:#0b1728;
      color:#cbd7e8;
      padding:54px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:28px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:16px;
      color:#fff;
      font-weight:950;
      font-size:21px;
      letter-spacing:-.03em;
    }
    .footer-brand .brand-mark{width:40px;height:40px;}
    .footer-text{
      max-width:680px;
      color:#9fb0c8;
      margin:0;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-link{
      display:inline-flex;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      color:#d7e2f1;
      font-weight:800;
      font-size:14px;
    }
    .footer-link:hover{background:rgba(255,255,255,.10);color:#fff;}
    .copyright{
      margin-top:34px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.10);
      color:#7f91aa;
      font-size:14px;
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }

    .sticky-cta{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:16px;
      z-index:1200;
      width:min(980px,calc(100% - 28px));
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:12px 14px 12px 20px;
      border-radius:999px;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(219,230,245,.9);
      box-shadow:0 22px 60px rgba(16,32,51,.20);
      backdrop-filter:blur(16px);
    }
    .sticky-cta strong{
      color:var(--ink);
      font-weight:950;
      letter-spacing:-.02em;
    }
    .sticky-cta span{
      color:var(--muted);
      font-size:14px;
      margin-left:8px;
    }

    @media (max-width:1024px){
      :root{--container:920px;}
      .hero-inner,
      .feature-layout,
      .article-shell,
      .cta-box{
        grid-template-columns:1fr;
      }
      .feature-intro{position:relative;top:auto;}
      .promo-stage{min-height:390px;}
      .triple-row{grid-template-columns:1fr 1fr;}
      .triple-row .selling-card:first-child{grid-column:1 / -1;}
      .proof-grid,.ladder-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
      .plan-grid{grid-template-columns:1fr;max-width:720px;}
      .plan-card.recommended{transform:none;}
      .footer-grid{grid-template-columns:1fr;}
      .footer-links{justify-content:flex-start;}
    }
    @media (max-width:768px){
      body{padding-bottom:104px;}
      .section{padding:66px 0;}
      .brand-row{
        min-height:auto;
        padding:13px 0;
        align-items:flex-start;
      }
      .header-actions{
        flex-direction:column;
        align-items:flex-end;
        gap:8px;
      }
      .mini-search{display:none;}
      .brand-name{font-size:18px;max-width:58vw;}
      .hero{padding:52px 0 58px;}
      .hero-metrics,
      .stage-grid,
      .scenario-wrap,
      .quote-wall,
      .faq-grid{
        grid-template-columns:1fr;
      }
      .promo-stage{min-height:430px;border-radius:28px;}
      .proof-grid,.ladder-grid{grid-template-columns:1fr;}
      .article-link{grid-template-columns:auto 1fr;}
      .article-arrow{display:none;}
      .cta-box{gap:20px;}
      .sticky-cta{
        border-radius:26px;
        align-items:stretch;
        flex-direction:column;
        padding:14px;
      }
      .sticky-cta span{display:block;margin-left:0;margin-top:2px;}
      .sticky-cta .btn-rl{width:100%;}
    }
    @media (max-width:520px){
      .container-rl{width:min(100% - 22px,var(--container));}
      .brand-mark{width:38px;height:38px;border-radius:14px;}
      .header-actions .btn-rl{min-height:40px;padding:10px 12px;font-size:13px;}
      .nav-chip{padding:8px 12px;font-size:13px;}
      h1.hero-title{font-size:36px;}
      .hero-lead{font-size:16px;}
      .hero-actions .btn-rl{width:100%;}
      .metric{padding:14px;}
      .stage-title{font-size:25px;margin-top:78px;}
      .burst{width:96px;height:96px;font-size:13px;}
      .section-title{font-size:28px;}
      .feature-card{grid-template-columns:1fr;padding:20px;}
      .triple-row{grid-template-columns:1fr;}
      .selling-card{min-height:auto;}
      .scenario-top{min-height:140px;}
      .ladder{padding:20px;}
      .article-date{width:48px;height:48px;border-radius:15px;}
      .article-title{font-size:16px;}
      .footer-links{gap:8px;}
      .copyright{display:block;}
      .copyright span{display:block;margin-top:8px;}
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}