/* roulang page: index */
:root{
      --bg-0:#06101f;
      --bg-1:#08182b;
      --bg-2:#0d2239;
      --nav:#050c18;
      --card:rgba(13,31,55,.68);
      --card-strong:rgba(17,42,73,.86);
      --line:rgba(126,216,255,.18);
      --line-strong:rgba(91,220,255,.42);
      --text:#eef7ff;
      --muted:#a9bdd0;
      --soft:#7890a7;
      --cyan:#4ee7ff;
      --blue:#4f8cff;
      --violet:#7a6cff;
      --amber:#ffbd69;
      --green:#5de2bd;
      --danger:#ff8a6b;
      --shadow:0 24px 80px rgba(0,0,0,.38);
      --glow:0 0 34px rgba(78,231,255,.20);
      --radius-sm:14px;
      --radius:22px;
      --radius-lg:30px;
      --side:104px;
      --container:1240px;
      --ease:all .24s ease;
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 15% 10%,rgba(78,231,255,.16),transparent 28%),
        radial-gradient(circle at 78% 14%,rgba(122,108,255,.14),transparent 32%),
        radial-gradient(circle at 55% 72%,rgba(93,226,189,.08),transparent 30%),
        linear-gradient(135deg,var(--bg-0),var(--bg-1) 48%,#071222);
      line-height:1.78;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:38px 38px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.08));
      z-index:-2;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--cyan)}
    img,svg{max-width:100%;height:auto}
    button,input{font-family:inherit}
    button,a,input{outline:none}
    a:focus-visible,button:focus-visible,input:focus-visible{
      outline:3px solid rgba(78,231,255,.55);
      outline-offset:3px;
    }
    p{margin:0 0 1rem;color:var(--muted)}
    h1,h2,h3,h4{color:var(--text);line-height:1.16;margin:0 0 1rem;font-weight:800;letter-spacing:-.03em}
    h1{font-size:clamp(2.2rem,5vw,3.75rem)}
    h2{font-size:clamp(1.8rem,3vw,2.55rem)}
    h3{font-size:clamp(1.22rem,2vw,1.55rem)}
    .page-shell{min-height:100vh}
    .main-wrap{
      margin-left:var(--side);
      min-height:100vh;
      position:relative;
    }
    .site-container{
      width:min(calc(100% - 48px),var(--container));
      margin:0 auto;
    }
    .section{padding:92px 0}
    .section-tight{padding:66px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:28px;
      margin-bottom:34px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--cyan);
      font-size:.86rem;
      font-weight:700;
      letter-spacing:.06em;
      margin-bottom:12px;
    }
    .section-kicker::before{
      content:"";
      width:22px;height:2px;border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),transparent);
    }
    .section-desc{
      max-width:660px;
      color:var(--muted);
      font-size:1.02rem;
    }

    .side-nav{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--side);
      height:100vh;
      z-index:50;
      background:linear-gradient(180deg,rgba(5,12,24,.96),rgba(5,15,30,.88));
      border-right:1px solid rgba(126,216,255,.16);
      box-shadow:14px 0 50px rgba(0,0,0,.24);
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:22px 14px;
      backdrop-filter:blur(18px);
    }
    .brand-mark{
      width:64px;height:64px;border-radius:22px;
      display:grid;place-items:center;
      background:
        radial-gradient(circle at 30% 18%,rgba(78,231,255,.45),transparent 38%),
        linear-gradient(145deg,rgba(28,70,112,.9),rgba(11,23,46,.92));
      border:1px solid rgba(126,216,255,.36);
      box-shadow:var(--glow);
      color:var(--text);
      font-weight:900;
      font-size:1.45rem;
      position:relative;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      width:22px;height:27px;
      border:2px solid rgba(238,247,255,.82);
      border-radius:9px 9px 12px 12px;
      transform:translateY(1px);
      clip-path:polygon(50% 0,100% 20%,100% 78%,50% 100%,0 78%,0 20%);
    }
    .brand-name{
      writing-mode:vertical-rl;
      margin-top:14px;
      font-size:.78rem;
      color:var(--muted);
      letter-spacing:.08em;
      line-height:1.4;
      max-height:188px;
      overflow:hidden;
    }
    .nav-stack{
      margin:auto 0;
      width:100%;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .nav-item{
      position:relative;
      min-height:62px;
      border-radius:20px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:4px;
      color:var(--muted);
      border:1px solid transparent;
      background:rgba(255,255,255,.02);
      cursor:pointer;
    }
    .nav-item .ico{font-size:1.18rem;line-height:1}
    .nav-item .txt{font-size:.76rem;font-weight:700;white-space:nowrap}
    .nav-item:hover{
      color:var(--text);
      border-color:rgba(78,231,255,.28);
      background:rgba(78,231,255,.08);
      transform:translateY(-2px);
    }
    .nav-item.active{
      color:var(--cyan);
      border-color:rgba(78,231,255,.42);
      background:linear-gradient(180deg,rgba(78,231,255,.13),rgba(122,108,255,.08));
      box-shadow:0 0 28px rgba(78,231,255,.12);
    }
    .nav-item.active::before{
      content:"";
      position:absolute;
      left:-15px;top:18px;bottom:18px;width:3px;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 16px var(--cyan);
    }
    .side-bottom{width:100%;display:grid;gap:10px}
    .member-pill{
      width:100%;
      min-height:48px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:var(--text);
      background:linear-gradient(135deg,rgba(78,231,255,.18),rgba(122,108,255,.16));
      border:1px solid rgba(126,216,255,.28);
      font-size:.82rem;
      font-weight:800;
    }
    .member-pill:hover{transform:translateY(-2px);box-shadow:var(--glow)}

    .mobile-top{
      display:none;
      position:sticky;
      top:0;
      z-index:60;
      height:68px;
      align-items:center;
      justify-content:space-between;
      padding:0 18px;
      background:rgba(5,12,24,.84);
      border-bottom:1px solid rgba(126,216,255,.16);
      backdrop-filter:blur(18px);
    }
    .mobile-logo{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      color:var(--text);
      max-width:calc(100% - 70px);
    }
    .mobile-logo .mini-shield{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,rgba(78,231,255,.34),rgba(122,108,255,.24));
      border:1px solid rgba(126,216,255,.32);
      display:grid;place-items:center;
      flex:0 0 auto;
    }
    .mobile-logo span:last-child{
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .menu-toggle{
      width:46px;height:46px;border-radius:16px;
      border:1px solid rgba(126,216,255,.22);
      color:var(--text);
      background:rgba(255,255,255,.04);
      cursor:pointer;
    }
    .mobile-panel{
      display:none;
      position:fixed;
      top:68px;left:12px;right:12px;
      z-index:59;
      padding:14px;
      border-radius:22px;
      background:rgba(8,20,38,.96);
      border:1px solid rgba(126,216,255,.22);
      box-shadow:var(--shadow);
      backdrop-filter:blur(20px);
    }
    .mobile-panel.open{display:block}
    .mobile-panel a{
      display:flex;align-items:center;justify-content:space-between;
      padding:14px 16px;
      border-radius:16px;
      color:var(--muted);
      font-weight:800;
    }
    .mobile-panel a.active,.mobile-panel a:hover{
      color:var(--cyan);
      background:rgba(78,231,255,.08);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:7px 12px;
      font-size:.82rem;
      font-weight:800;
      color:var(--cyan);
      background:rgba(78,231,255,.08);
      border:1px solid rgba(78,231,255,.24);
      white-space:nowrap;
    }
    .badge.amber{color:var(--amber);background:rgba(255,189,105,.08);border-color:rgba(255,189,105,.28)}
    .badge.green{color:var(--green);background:rgba(93,226,189,.08);border-color:rgba(93,226,189,.25)}
    .badge.member{color:#dcd8ff;background:linear-gradient(135deg,rgba(78,231,255,.08),rgba(122,108,255,.12));border-color:rgba(122,108,255,.34)}
    .btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:900;
      letter-spacing:.01em;
      cursor:pointer;
      transition:var(--ease);
      line-height:1;
    }
    .btn-primary{
      color:#04111f;
      background:linear-gradient(135deg,var(--cyan),var(--blue) 52%,var(--violet));
      box-shadow:0 14px 36px rgba(78,231,255,.24);
    }
    .btn-primary:hover{
      color:#04111f;
      transform:translateY(-2px);
      box-shadow:0 18px 48px rgba(78,231,255,.34);
      filter:brightness(1.06);
    }
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.045);
      border-color:rgba(126,216,255,.26);
    }
    .btn-secondary:hover{
      color:var(--cyan);
      border-color:rgba(78,231,255,.44);
      background:rgba(78,231,255,.08);
      transform:translateY(-2px);
    }
    .btn-locked{
      color:rgba(238,247,255,.72);
      background:rgba(255,255,255,.035);
      border-color:rgba(255,255,255,.12);
      cursor:not-allowed;
    }
    .glass-card{
      border-radius:var(--radius);
      background:var(--card);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      transition:var(--ease);
      position:relative;
      overflow:hidden;
    }
    .glass-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 36%,rgba(78,231,255,.035));
      pointer-events:none;
    }
    .glass-card:hover{
      transform:translateY(-4px);
      border-color:rgba(78,231,255,.34);
      box-shadow:var(--shadow),var(--glow);
    }

    .hero{
      padding:78px 0 70px;
      position:relative;
      overflow:hidden;
    }
    .hero::after{
      content:"";
      position:absolute;
      right:-140px;top:32px;
      width:460px;height:460px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(78,231,255,.14),transparent 64%);
      pointer-events:none;
    }
    .hero-copy{padding:34px 0}
    .hero-title strong{
      color:transparent;
      background:linear-gradient(135deg,#fff,var(--cyan) 54%,#bdb6ff);
      -webkit-background-clip:text;
      background-clip:text;
    }
    .hero-lead{
      font-size:1.12rem;
      color:#c5d7e8;
      max-width:720px;
      margin-bottom:28px;
    }
    .trust-strip{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:28px;
    }
    .trust-item{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(126,216,255,.16);
      color:var(--muted);
      font-size:.88rem;
      font-weight:700;
    }
    .dashboard{
      padding:24px;
      min-height:520px;
    }
    .dash-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
      position:relative;
      z-index:1;
    }
    .dash-title{font-weight:900;color:var(--text)}
    .signal{
      display:flex;gap:5px;align-items:end;height:22px;
    }
    .signal i{
      display:block;width:5px;border-radius:99px;background:var(--cyan);
      box-shadow:0 0 10px rgba(78,231,255,.45);
    }
    .signal i:nth-child(1){height:9px;opacity:.48}
    .signal i:nth-child(2){height:14px;opacity:.68}
    .signal i:nth-child(3){height:20px}
    .record-card,.timeline-card,.locked-card,.alert-card{
      position:relative;
      z-index:1;
      border-radius:20px;
      border:1px solid rgba(126,216,255,.17);
      background:rgba(4,14,28,.42);
      padding:18px;
      margin-bottom:14px;
    }
    .record-card h3{font-size:1.08rem;margin-bottom:8px}
    .anon-row{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:14px;
    }
    .avatar{
      width:42px;height:42px;border-radius:50%;
      background:linear-gradient(135deg,rgba(78,231,255,.24),rgba(122,108,255,.22));
      border:1px solid rgba(126,216,255,.24);
      display:grid;place-items:center;color:var(--cyan);
    }
    .bars{flex:1;display:grid;gap:8px}
    .bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
    .bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet))}
    .timeline{
      display:grid;
      gap:12px;
      margin-top:10px;
    }
    .time-step{
      display:grid;
      grid-template-columns:28px 1fr auto;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:.9rem;
    }
    .dot{
      width:12px;height:12px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 15px rgba(93,226,189,.38);
      justify-self:center;
      position:relative;
    }
    .dot.amber{background:var(--amber);box-shadow:0 0 15px rgba(255,189,105,.34)}
    .risk-line{
      height:8px;border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
      margin-top:10px;
    }
    .risk-line span{
      display:block;height:100%;width:64%;
      background:linear-gradient(90deg,var(--green),var(--amber));
      border-radius:999px;
    }
    .locked-card{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:center;
      background:
        linear-gradient(135deg,rgba(78,231,255,.06),rgba(122,108,255,.08)),
        rgba(4,14,28,.45);
    }
    .lock-symbol{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      background:rgba(78,231,255,.08);
      border:1px solid rgba(78,231,255,.24);
      color:var(--cyan);
      flex:0 0 auto;
    }
    .alert-card{
      border-color:rgba(255,189,105,.25);
      background:rgba(255,189,105,.055);
    }

    .compare-wrap{overflow:hidden}
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 10px;
      color:var(--text);
      margin:0;
    }
    .compare-table thead th{
      color:var(--muted);
      font-size:.92rem;
      font-weight:900;
      text-align:center;
      padding:14px 12px;
    }
    .compare-table thead th:first-child{text-align:left}
    .compare-table tbody tr{
      transition:var(--ease);
    }
    .compare-table tbody tr:hover{
      transform:translateY(-2px);
      filter:brightness(1.05);
    }
    .compare-table td{
      padding:18px 14px;
      background:rgba(13,31,55,.58);
      border-top:1px solid rgba(126,216,255,.12);
      border-bottom:1px solid rgba(126,216,255,.12);
      text-align:center;
      color:#dcecff;
    }
    .compare-table td:first-child{
      border-left:1px solid rgba(126,216,255,.12);
      border-radius:18px 0 0 18px;
      text-align:left;
      color:var(--text);
      font-weight:900;
    }
    .compare-table td:last-child{
      border-right:1px solid rgba(126,216,255,.12);
      border-radius:0 18px 18px 0;
    }
    .compare-table .featured{
      background:linear-gradient(180deg,rgba(78,231,255,.13),rgba(122,108,255,.09));
      border-color:rgba(78,231,255,.30);
      box-shadow:inset 0 0 22px rgba(78,231,255,.06);
    }
    .check{color:var(--green);font-weight:900}
    .partial{color:var(--amber);font-weight:900}
    .dash{color:var(--soft)}
    .mobile-compare{display:none;gap:16px}
    .plan-card{padding:22px}
    .plan-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .plan-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
    .plan-card li{
      display:flex;justify-content:space-between;gap:12px;
      color:var(--muted);
      border-top:1px solid rgba(126,216,255,.10);
      padding-top:10px;
    }
    .plan-card li strong{color:var(--text)}

    .tier-path{
      display:grid;
      grid-template-columns:minmax(250px,350px) 1fr;
      gap:24px;
      align-items:stretch;
    }
    .tier-steps{
      display:grid;
      gap:14px;
    }
    .tier-node{
      padding:18px;
      border-radius:22px;
      border:1px solid rgba(126,216,255,.16);
      background:rgba(255,255,255,.035);
      display:flex;
      gap:14px;
      align-items:flex-start;
      transition:var(--ease);
    }
    .tier-node:hover,.tier-node.active{
      border-color:rgba(78,231,255,.38);
      background:rgba(78,231,255,.07);
      transform:translateX(4px);
    }
    .tier-icon{
      width:44px;height:44px;border-radius:16px;
      display:grid;place-items:center;
      color:var(--cyan);
      background:rgba(78,231,255,.08);
      border:1px solid rgba(78,231,255,.23);
      flex:0 0 auto;
    }
    .tier-node h3{font-size:1.06rem;margin:0 0 4px}
    .tier-node p{font-size:.9rem;margin:0}
    .tier-panel{
      padding:28px;
      min-height:100%;
      display:grid;
      align-content:space-between;
      gap:24px;
    }
    .tier-panel-list{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin:22px 0;
    }
    .mini-benefit{
      padding:16px;
      border-radius:18px;
      background:rgba(4,14,28,.38);
      border:1px solid rgba(126,216,255,.12);
    }
    .mini-benefit strong{display:block;color:var(--text);margin-bottom:6px}
    .mini-benefit span{color:var(--muted);font-size:.9rem}

    .preview-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr;
      gap:18px;
    }
    .preview-card{
      min-height:245px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .preview-card.large{
      grid-row:span 2;
      min-height:510px;
    }
    .doc-lines{display:grid;gap:10px;margin:20px 0}
    .doc-lines i{
      height:10px;border-radius:999px;background:rgba(255,255,255,.10);
      display:block;overflow:hidden;
    }
    .doc-lines i:nth-child(1)::after,
    .doc-lines i:nth-child(3)::after{
      content:"";display:block;height:100%;width:62%;
      background:linear-gradient(90deg,rgba(78,231,255,.42),transparent);
      border-radius:inherit;
    }
    .preview-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .lock-overlay{
      margin-top:18px;
      padding:14px;
      border-radius:16px;
      background:linear-gradient(135deg,rgba(5,12,24,.78),rgba(12,28,52,.82));
      border:1px solid rgba(126,216,255,.16);
      color:var(--muted);
      font-size:.92rem;
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
    }

    .topic-grid{
      display:grid;
      grid-template-columns:1.25fr .9fr 1fr;
      gap:18px;
    }
    .topic-card{
      padding:24px;
      min-height:210px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .topic-card.wide{grid-column:span 2}
    .topic-card .topic-icon{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      color:var(--cyan);
      background:rgba(78,231,255,.08);
      border:1px solid rgba(78,231,255,.22);
      margin-bottom:18px;
      transition:var(--ease);
    }
    .topic-card:hover .topic-icon{
      box-shadow:0 0 22px rgba(78,231,255,.28);
      transform:rotate(-3deg) scale(1.04);
    }
    .topic-link{
      color:var(--cyan);
      font-weight:900;
      display:inline-flex;
      gap:8px;
      align-items:center;
      margin-top:8px;
    }

    .proof-band{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:18px;
    }
    .proof-item{
      padding:24px;
      border-radius:var(--radius);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(126,216,255,.14);
    }
    .proof-number{
      font-size:2.25rem;
      font-weight:900;
      color:transparent;
      background:linear-gradient(135deg,var(--cyan),#d9d5ff);
      -webkit-background-clip:text;
      background-clip:text;
      margin-bottom:8px;
    }

    .accordion{
      background:transparent;
      margin:0;
    }
    .accordion-item{
      margin-bottom:14px;
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(126,216,255,.16);
      background:rgba(13,31,55,.58);
      box-shadow:0 14px 40px rgba(0,0,0,.18);
    }
    .accordion-title{
      color:var(--text);
      font-weight:900;
      font-size:1rem;
      padding:18px 52px 18px 20px;
      border:0;
      background:transparent;
      position:relative;
    }
    .accordion-title:hover,.accordion-title:focus{
      color:var(--cyan);
      background:rgba(78,231,255,.055);
    }
    .accordion-title::before{
      color:var(--cyan);
      right:20px;
      margin-top:-.8rem;
      font-size:1.6rem;
    }
    .accordion-content{
      border:0;
      color:var(--muted);
      background:rgba(4,14,28,.24);
      padding:0 22px 20px;
      border-left:3px solid rgba(255,189,105,.58);
    }

    .cta-card{
      padding:38px;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 12% 20%,rgba(78,231,255,.18),transparent 34%),
        radial-gradient(circle at 88% 10%,rgba(122,108,255,.18),transparent 32%),
        rgba(13,31,55,.74);
      border:1px solid rgba(126,216,255,.26);
      box-shadow:var(--shadow),var(--glow);
      display:grid;
      grid-template-columns:1fr minmax(280px,390px);
      gap:30px;
      align-items:center;
      position:relative;
      overflow:hidden;
    }
    .cta-card::after{
      content:"";
      position:absolute;
      right:34px;bottom:-38px;
      width:220px;height:220px;
      border:1px solid rgba(78,231,255,.14);
      border-radius:38px;
      transform:rotate(18deg);
      pointer-events:none;
    }
    .目录-box{
      position:relative;
      z-index:1;
      padding:20px;
      border-radius:22px;
      background:rgba(4,14,28,.42);
      border:1px solid rgba(126,216,255,.16);
    }
    .目录-box ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .目录-box li{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      color:var(--muted);
      padding-bottom:12px;
      border-bottom:1px solid rgba(126,216,255,.10);
    }
    .目录-box li:last-child{border-bottom:0;padding-bottom:0}
    .目录-box strong{color:var(--text)}

    .site-footer{
      margin-left:var(--side);
      padding:46px 0 34px;
      background:rgba(3,8,16,.66);
      border-top:1px solid rgba(126,216,255,.14);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr;
      gap:28px;
      align-items:start;
    }
    .footer-brand{
      display:flex;gap:14px;align-items:flex-start;
    }
    .footer-symbol{
      width:48px;height:48px;border-radius:17px;
      display:grid;place-items:center;
      color:var(--cyan);
      background:rgba(78,231,255,.08);
      border:1px solid rgba(78,231,255,.24);
      flex:0 0 auto;
    }
    .footer-title{font-weight:900;font-size:1.05rem;margin-bottom:8px}
    .footer-links{display:grid;gap:10px}
    .footer-links a{
      color:var(--muted);
      font-weight:700;
      width:max-content;
    }
    .footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
    .disclaimer{
      padding:16px;
      border-radius:18px;
      color:#c0d3e4;
      background:rgba(255,189,105,.06);
      border:1px solid rgba(255,189,105,.18);
      font-size:.9rem;
    }
    .copyright{
      margin-top:28px;
      padding-top:22px;
      border-top:1px solid rgba(126,216,255,.10);
      color:var(--soft);
      font-size:.88rem;
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    @media (max-width:1199px){
      .site-container{width:min(calc(100% - 36px),var(--container))}
      .preview-grid{grid-template-columns:1fr 1fr}
      .preview-card.large{grid-row:auto;grid-column:span 2;min-height:360px}
      .topic-grid{grid-template-columns:1fr 1fr}
      .topic-card.wide{grid-column:span 1}
      .tier-panel-list{grid-template-columns:1fr}
    }
    @media (max-width:767px){
      .side-nav{display:none}
      .mobile-top{display:flex}
      .main-wrap,.site-footer{margin-left:0}
      .site-container{width:min(calc(100% - 28px),var(--container))}
      .hero{padding:42px 0 52px}
      .hero-copy{padding:8px 0 20px}
      .section{padding:62px 0}
      .section-tight{padding:48px 0}
      .section-head{display:block;margin-bottom:26px}
      .dashboard{min-height:auto;padding:18px}
      .compare-wrap{display:none}
      .mobile-compare{display:grid}
      .tier-path{grid-template-columns:1fr}
      .preview-grid,.topic-grid,.proof-band,.footer-grid,.cta-card{grid-template-columns:1fr}
      .preview-card.large{grid-column:auto;min-height:300px}
      .btn-row{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .trust-strip{display:grid;grid-template-columns:1fr}
      .cta-card{padding:26px}
      .footer-grid{gap:22px}
      .copyright{display:block}
    }
    @media (max-width:520px){
      h1{font-size:2.05rem}
      .record-card,.timeline-card,.locked-card,.alert-card{padding:14px}
      .time-step{grid-template-columns:22px 1fr;gap:8px}
      .time-step .badge{grid-column:2}
      .glass-card,.topic-card,.preview-card,.proof-item,.plan-card{border-radius:18px}
      .mobile-logo span:last-child{font-size:.92rem}
      .section-desc{font-size:.96rem}
    }

/* roulang page: category1 */
:root{
      --bg-0:#060b18;
      --bg-1:#0a1226;
      --bg-2:#0f1c36;
      --panel:rgba(14, 29, 55, .72);
      --panel-strong:rgba(17, 36, 68, .9);
      --panel-soft:rgba(255,255,255,.055);
      --line:rgba(151, 206, 255, .18);
      --line-strong:rgba(75, 214, 255, .48);
      --text:#eef7ff;
      --text-soft:#b8c9dc;
      --text-muted:#7f96ad;
      --cyan:#4bd6ff;
      --cyan-2:#6ce7d5;
      --blue:#3778ff;
      --violet:#8b6dff;
      --amber:#f2b95f;
      --green:#67d6a0;
      --danger:#ff8c73;
      --shadow:0 22px 70px rgba(0,0,0,.42);
      --glow:0 0 28px rgba(75,214,255,.22);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --side:104px;
      --ease:all .22s ease;
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:var(--font);
      line-height:1.78;
      background:
        radial-gradient(circle at 20% 10%, rgba(75,214,255,.12), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(139,109,255,.16), transparent 36%),
        radial-gradient(circle at 58% 92%, rgba(108,231,213,.10), transparent 36%),
        linear-gradient(145deg,var(--bg-0),var(--bg-1) 48%,#081327);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 82%);
      z-index:-2;
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.12;
      background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.08) 8px);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--cyan)}
    button,input{font:inherit}
    button{cursor:pointer}
    img,svg{max-width:100%;height:auto}
    ::selection{background:rgba(75,214,255,.28);color:#fff}

    .site-shell{min-height:100vh}
    .site-container{
      width:min(1220px, calc(100% - 64px));
      margin:0 auto;
    }
    .main-content{
      margin-left:var(--side);
      min-height:100vh;
      padding:36px 0 0;
    }
    .section{
      padding:68px 0;
      position:relative;
    }
    .section.compact{padding:46px 0}
    .section-title{
      margin:0 0 16px;
      font-size:clamp(28px, 4vw, 40px);
      line-height:1.18;
      font-weight:800;
      letter-spacing:-.03em;
    }
    .section-lead{
      margin:0;
      color:var(--text-soft);
      max-width:760px;
      font-size:17px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 12px;
      border:1px solid rgba(75,214,255,.28);
      border-radius:999px;
      color:#cbf5ff;
      background:rgba(75,214,255,.08);
      box-shadow:inset 0 0 22px rgba(75,214,255,.05);
      font-size:13px;
      font-weight:700;
      letter-spacing:.04em;
    }
    .eyebrow:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--green);
      box-shadow:0 0 16px rgba(103,214,160,.8);
    }

    .side-nav{
      position:fixed;
      top:0;
      left:0;
      z-index:80;
      width:var(--side);
      height:100vh;
      padding:22px 14px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:18px;
      background:linear-gradient(180deg, rgba(4,9,22,.96), rgba(8,16,33,.9));
      border-right:1px solid rgba(151,206,255,.16);
      box-shadow:14px 0 50px rgba(0,0,0,.32);
      backdrop-filter:blur(18px);
    }
    .brand-mark{
      width:54px;
      height:54px;
      border-radius:20px;
      position:relative;
      display:block;
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.32), transparent 20%),
        linear-gradient(135deg, rgba(75,214,255,.95), rgba(55,120,255,.76) 50%, rgba(139,109,255,.82));
      box-shadow:0 0 32px rgba(75,214,255,.28);
      outline:1px solid rgba(255,255,255,.24);
    }
    .brand-mark:before{
      content:"";
      position:absolute;
      inset:12px 15px;
      border:2px solid rgba(5,14,31,.72);
      border-top-width:4px;
      border-radius:9px 9px 12px 12px;
      clip-path:polygon(50% 0,100% 24%,88% 84%,50% 100%,12% 84%,0 24%);
      background:rgba(255,255,255,.1);
    }
    .brand-name{
      writing-mode:vertical-rl;
      text-orientation:mixed;
      font-size:12px;
      color:var(--text-muted);
      letter-spacing:.08em;
      max-height:180px;
      overflow:hidden;
    }
    .nav-stack{
      margin-top:12px;
      width:100%;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .nav-item{
      position:relative;
      min-height:58px;
      border-radius:18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      color:var(--text-muted);
      border:1px solid transparent;
      background:transparent;
    }
    .nav-item .ico{font-size:21px;line-height:1}
    .nav-item .txt{font-size:12px;font-weight:700}
    .nav-item:hover{
      color:var(--text);
      border-color:rgba(75,214,255,.26);
      background:rgba(75,214,255,.08);
      transform:translateY(-2px);
    }
    .nav-item.active{
      color:#eaffff;
      border-color:rgba(75,214,255,.45);
      background:linear-gradient(180deg, rgba(75,214,255,.18), rgba(55,120,255,.10));
      box-shadow:var(--glow);
    }
    .nav-item.active:before{
      content:"";
      position:absolute;
      left:-14px;
      top:16px;
      width:3px;
      height:26px;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 15px var(--cyan);
    }
    .side-bottom{
      margin-top:auto;
      width:100%;
      display:flex;
      justify-content:center;
    }
    .member-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:64px;
      min-height:38px;
      border-radius:999px;
      color:#06101f;
      font-weight:800;
      font-size:13px;
      background:linear-gradient(135deg,var(--cyan),var(--cyan-2));
      box-shadow:0 0 22px rgba(75,214,255,.22);
    }
    .member-pill:hover{color:#020816;transform:translateY(-2px);filter:brightness(1.07)}

    .mobile-top{
      display:none;
      position:sticky;
      top:0;
      z-index:90;
      min-height:68px;
      padding:10px 18px;
      background:rgba(5,12,28,.88);
      border-bottom:1px solid rgba(151,206,255,.16);
      backdrop-filter:blur(18px);
    }
    .mobile-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .mobile-brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:800;
      color:var(--text);
    }
    .mobile-brand .mini-symbol{
      flex:0 0 38px;
      width:38px;
      height:38px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet));
      box-shadow:0 0 20px rgba(75,214,255,.25);
    }
    .mobile-brand span{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:15px;
    }
    .menu-toggle{
      width:44px;
      height:44px;
      border:1px solid rgba(75,214,255,.25);
      border-radius:14px;
      background:rgba(255,255,255,.05);
      color:var(--text);
    }
    .mobile-menu{
      display:none;
      padding:12px 0 4px;
    }
    .mobile-menu.is-open{display:grid;gap:10px}
    .mobile-menu a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      min-height:48px;
      padding:0 14px;
      border-radius:16px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.09);
      color:var(--text-soft);
      font-weight:700;
    }
    .mobile-menu a.active{
      color:#eaffff;
      border-color:rgba(75,214,255,.42);
      background:rgba(75,214,255,.12);
    }

    .page-head{
      position:relative;
      padding:42px 0 34px;
    }
    .head-card{
      overflow:hidden;
      position:relative;
      border:1px solid rgba(151,206,255,.18);
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 82% 16%, rgba(75,214,255,.20), transparent 28%),
        radial-gradient(circle at 18% 88%, rgba(139,109,255,.16), transparent 32%),
        rgba(14,29,55,.70);
      box-shadow:var(--shadow);
      backdrop-filter:blur(20px);
      padding:34px;
    }
    .head-card:after{
      content:"";
      position:absolute;
      right:28px;
      top:28px;
      width:230px;
      height:150px;
      opacity:.16;
      border:1px solid rgba(255,255,255,.35);
      border-radius:22px;
      background:
        linear-gradient(90deg, transparent 0 18%, rgba(75,214,255,.55) 18% 19%, transparent 19%),
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
      background-size:100% 100%, 100% 28px;
      transform:rotate(-7deg);
    }
    h1{
      position:relative;
      z-index:1;
      max-width:820px;
      margin:18px 0 14px;
      font-size:clamp(32px, 5vw, 54px);
      line-height:1.14;
      font-weight:850;
      letter-spacing:-.045em;
    }
    .head-desc{
      position:relative;
      z-index:1;
      max-width:780px;
      margin:0;
      color:var(--text-soft);
      font-size:17px;
    }
    .head-tools{
      position:relative;
      z-index:2;
      margin-top:26px;
      display:grid;
      grid-template-columns:minmax(260px, 1fr) auto;
      gap:16px;
      align-items:center;
    }
    .search-wrap{
      position:relative;
    }
    .search-wrap:before{
      content:"⌕";
      position:absolute;
      left:18px;
      top:50%;
      transform:translateY(-50%);
      color:var(--cyan);
      z-index:1;
      font-size:18px;
    }
    .search-input{
      width:100%;
      height:54px;
      padding:0 18px 0 48px;
      border-radius:18px;
      color:var(--text);
      background:rgba(5,13,30,.62);
      border:1px solid rgba(151,206,255,.18);
      outline:none;
      box-shadow:inset 0 0 24px rgba(0,0,0,.18);
    }
    .search-input::placeholder{color:rgba(184,201,220,.66)}
    .search-input:focus{
      border-color:rgba(75,214,255,.62);
      box-shadow:0 0 0 4px rgba(75,214,255,.12), inset 0 0 24px rgba(0,0,0,.18);
    }
    .sort-select{
      height:54px;
      min-width:172px;
      padding:0 18px;
      border-radius:18px;
      color:var(--text);
      background-color:rgba(5,13,30,.62);
      border:1px solid rgba(151,206,255,.18);
      outline:none;
    }
    .sort-select:focus{
      border-color:rgba(75,214,255,.62);
      box-shadow:0 0 0 4px rgba(75,214,255,.12);
    }
    .chip-row{
      position:relative;
      z-index:2;
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      border:1px solid rgba(151,206,255,.18);
      color:var(--text-soft);
      background:rgba(255,255,255,.045);
      border-radius:999px;
      padding:8px 13px;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      transition:var(--ease);
    }
    .chip:hover,.chip:focus{
      color:var(--text);
      border-color:rgba(75,214,255,.45);
      background:rgba(75,214,255,.10);
      outline:none;
    }
    .chip.active{
      color:#eaffff;
      border-color:rgba(75,214,255,.55);
      background:linear-gradient(135deg, rgba(75,214,255,.18), rgba(139,109,255,.12));
      box-shadow:0 0 22px rgba(75,214,255,.12);
    }

    .content-layout{
      display:grid;
      grid-template-columns:270px minmax(0,1fr);
      gap:24px;
      align-items:start;
    }
    .glass-card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:var(--panel);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      transition:var(--ease);
    }
    .glass-card:hover{
      border-color:rgba(75,214,255,.34);
      box-shadow:var(--shadow), var(--glow);
      transform:translateY(-3px);
    }
    .filter-panel{
      position:sticky;
      top:28px;
      padding:22px;
    }
    .filter-title{
      margin:0 0 12px;
      font-size:16px;
      font-weight:850;
    }
    .filter-list{
      display:grid;
      gap:10px;
      margin:0 0 22px;
      padding:0;
      list-style:none;
    }
    .filter-list a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:11px 12px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      color:var(--text-soft);
      background:rgba(255,255,255,.035);
      font-size:14px;
      font-weight:700;
    }
    .filter-list a:hover,.filter-list a.active{
      color:var(--text);
      border-color:rgba(75,214,255,.36);
      background:rgba(75,214,255,.09);
    }
    .count{
      color:var(--text-muted);
      font-size:12px;
      font-weight:800;
    }
    .side-note{
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(242,185,95,.24);
      background:rgba(242,185,95,.07);
      color:#ffe3b0;
      font-size:13px;
      line-height:1.7;
    }

    .list-stack{
      display:grid;
      gap:18px;
    }
    .feature-card{
      position:relative;
      overflow:hidden;
      padding:28px;
      display:grid;
      grid-template-columns:1fr 230px;
      gap:24px;
      min-height:260px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(75,214,255,.28);
      background:
        radial-gradient(circle at 82% 18%, rgba(75,214,255,.18), transparent 28%),
        linear-gradient(135deg, rgba(14,29,55,.86), rgba(12,21,45,.72));
      box-shadow:var(--shadow), 0 0 34px rgba(75,214,255,.10);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      border-color:rgba(75,214,255,.5);
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:9px;
      margin-bottom:13px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:26px;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:850;
      line-height:1;
      border:1px solid rgba(151,206,255,.18);
      color:var(--text-soft);
      background:rgba(255,255,255,.045);
    }
    .badge.info{border-color:rgba(75,214,255,.35);color:#c8f5ff;background:rgba(75,214,255,.08)}
    .badge.warn{border-color:rgba(242,185,95,.42);color:#ffe0a3;background:rgba(242,185,95,.08)}
    .badge.safe{border-color:rgba(103,214,160,.36);color:#c9ffe3;background:rgba(103,214,160,.08)}
    .badge.member{
      border-color:rgba(139,109,255,.48);
      color:#ddd8ff;
      background:linear-gradient(135deg, rgba(55,120,255,.12), rgba(139,109,255,.14));
    }
    .card-title{
      margin:0 0 10px;
      font-size:clamp(22px, 3vw, 30px);
      line-height:1.26;
      font-weight:850;
      letter-spacing:-.025em;
    }
    .card-desc{
      margin:0 0 18px;
      color:var(--text-soft);
      font-size:16px;
      max-width:680px;
    }
    .card-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      color:var(--text-muted);
      font-size:13px;
      font-weight:700;
    }
    .btn-row{
      margin-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:850;
      line-height:1;
      transition:var(--ease);
      cursor:pointer;
    }
    .btn-primary{
      color:#04101f;
      background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet));
      box-shadow:0 12px 34px rgba(75,214,255,.24);
    }
    .btn-secondary{
      color:var(--text);
      border-color:rgba(151,206,255,.22);
      background:rgba(255,255,255,.055);
    }
    .btn:hover{
      transform:translateY(-2px);
      filter:brightness(1.08);
      color:var(--text);
      box-shadow:0 15px 40px rgba(75,214,255,.22);
    }
    .btn-primary:hover{color:#020916}
    .btn:focus,.nav-item:focus,.brand-mark:focus,.member-pill:focus,.footer-links a:focus{
      outline:3px solid rgba(75,214,255,.38);
      outline-offset:3px;
    }
    .visual-panel{
      position:relative;
      border-radius:22px;
      border:1px solid rgba(151,206,255,.16);
      background:rgba(5,13,30,.42);
      padding:18px;
      overflow:hidden;
    }
    .visual-panel:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size:26px 26px;
      opacity:.18;
    }
    .timeline-mini{
      position:relative;
      display:grid;
      gap:12px;
      z-index:1;
    }
    .timeline-mini span{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px;
      border-radius:14px;
      background:rgba(255,255,255,.06);
      color:var(--text-soft);
      font-size:13px;
      font-weight:700;
    }
    .timeline-mini span:before{
      content:"";
      width:9px;
      height:9px;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 14px rgba(75,214,255,.8);
    }
    .progress-wrap{
      position:relative;
      z-index:1;
      margin-top:16px;
    }
    .progress-label{
      display:flex;
      justify-content:space-between;
      color:var(--text-muted);
      font-size:12px;
      margin-bottom:8px;
      font-weight:800;
    }
    .progress-bar{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .progress-bar i{
      display:block;
      height:100%;
      width:72%;
      background:linear-gradient(90deg,var(--cyan),var(--green));
      border-radius:inherit;
      box-shadow:0 0 14px rgba(75,214,255,.5);
    }

    .resource-card{
      padding:22px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:20px;
      align-items:center;
    }
    .resource-card .card-title{
      font-size:21px;
      margin-bottom:8px;
    }
    .risk-meter{
      min-width:132px;
      padding:13px;
      border-radius:18px;
      border:1px solid rgba(151,206,255,.14);
      background:rgba(5,13,30,.36);
      text-align:center;
    }
    .risk-meter strong{
      display:block;
      margin-bottom:4px;
      font-size:20px;
      color:var(--amber);
    }
    .risk-meter span{
      color:var(--text-muted);
      font-size:12px;
      font-weight:800;
    }

    .member-strip{
      overflow:hidden;
      position:relative;
      padding:22px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(139,109,255,.34);
      background:
        radial-gradient(circle at 85% 50%, rgba(139,109,255,.25), transparent 24%),
        linear-gradient(135deg, rgba(55,120,255,.13), rgba(75,214,255,.08));
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .member-strip h2{
      margin:0 0 4px;
      font-size:22px;
      font-weight:850;
    }
    .member-strip p{
      margin:0;
      color:var(--text-soft);
      font-size:14px;
    }

    .step-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:26px;
    }
    .step-card{
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .step-no{
      display:inline-flex;
      width:36px;
      height:36px;
      align-items:center;
      justify-content:center;
      border-radius:13px;
      color:#04101f;
      background:linear-gradient(135deg,var(--cyan),var(--green));
      font-weight:900;
      margin-bottom:14px;
    }
    .step-card h3{
      margin:0 0 8px;
      font-size:18px;
      font-weight:850;
    }
    .step-card p{
      margin:0;
      color:var(--text-soft);
      font-size:14px;
      line-height:1.75;
    }

    .faq-wrap{
      margin-top:24px;
    }
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:12px;
      border:1px solid rgba(151,206,255,.16);
      border-radius:18px;
      overflow:hidden;
      background:rgba(14,29,55,.62);
      backdrop-filter:blur(16px);
    }
    .accordion-title{
      position:relative;
      display:block;
      padding:18px 54px 18px 22px;
      color:var(--text);
      border:none;
      font-size:16px;
      font-weight:850;
      background:rgba(255,255,255,.025);
    }
    .accordion-title:hover,.accordion-title:focus{
      background:rgba(75,214,255,.08);
      color:var(--text);
      outline:none;
    }
    .accordion-title:before{
      right:22px;
      color:var(--cyan);
      font-size:20px;
      margin-top:-12px;
    }
    .accordion-content{
      border:none;
      padding:0 22px 20px;
      background:transparent;
      color:var(--text-soft);
      font-size:15px;
      line-height:1.8;
    }
    .accordion-content p{
      margin:0;
      padding-left:14px;
      border-left:3px solid rgba(242,185,95,.55);
    }

    .cta-card{
      position:relative;
      overflow:hidden;
      padding:32px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(75,214,255,.30);
      background:
        radial-gradient(circle at 18% 20%, rgba(75,214,255,.18), transparent 30%),
        radial-gradient(circle at 88% 80%, rgba(139,109,255,.22), transparent 34%),
        rgba(14,29,55,.76);
      box-shadow:var(--shadow), var(--glow);
      display:grid;
      grid-template-columns:1fr auto;
      gap:24px;
      align-items:center;
    }
    .cta-card h2{
      margin:0 0 10px;
      font-size:clamp(26px, 4vw, 38px);
      line-height:1.18;
      font-weight:850;
      letter-spacing:-.03em;
    }
    .cta-card p{
      margin:0;
      color:var(--text-soft);
      max-width:720px;
    }

    .site-footer{
      margin-left:var(--side);
      padding:46px 0 28px;
      border-top:1px solid rgba(151,206,255,.14);
      background:linear-gradient(180deg, rgba(4,9,20,.30), rgba(3,8,18,.78));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .65fr 1fr;
      gap:28px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      gap:14px;
      align-items:flex-start;
    }
    .footer-symbol{
      flex:0 0 42px;
      width:42px;
      height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:16px;
      color:var(--cyan);
      border:1px solid rgba(75,214,255,.28);
      background:rgba(75,214,255,.08);
      box-shadow:0 0 18px rgba(75,214,255,.12);
      font-size:22px;
    }
    .footer-title{
      margin-bottom:8px;
      color:var(--text);
      font-weight:850;
    }
    .footer-brand p,.disclaimer{
      margin:0;
      color:var(--text-muted);
      font-size:14px;
      line-height:1.85;
    }
    .footer-links{
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:var(--text-soft);
      font-size:14px;
      font-weight:700;
    }
    .footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
    .disclaimer{
      padding:16px;
      border:1px solid rgba(242,185,95,.22);
      border-radius:18px;
      background:rgba(242,185,95,.06);
      color:#d8c8a6;
    }
    .copyright{
      margin-top:28px;
      padding-top:18px;
      border-top:1px solid rgba(151,206,255,.10);
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      color:var(--text-muted);
      font-size:13px;
    }

    @media (max-width:1199px){
      :root{--side:92px}
      .site-container{width:min(100% - 44px, 1060px)}
      .content-layout{grid-template-columns:240px minmax(0,1fr)}
      .feature-card{grid-template-columns:1fr}
      .visual-panel{max-width:520px}
      .step-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
      .disclaimer{grid-column:1/-1}
    }
    @media (max-width:767px){
      .side-nav{display:none}
      .mobile-top{display:block}
      .main-content,.site-footer{margin-left:0}
      .main-content{padding-top:0}
      .site-container{width:min(100% - 32px, 720px)}
      .page-head{padding:24px 0 24px}
      .head-card{padding:24px;border-radius:24px}
      .head-card:after{display:none}
      .head-tools{grid-template-columns:1fr}
      .sort-select{width:100%}
      .content-layout{grid-template-columns:1fr}
      .filter-panel{position:relative;top:auto;padding:18px}
      .filter-list{
        display:flex;
        overflow:auto;
        padding-bottom:2px;
        scrollbar-width:none;
      }
      .filter-list::-webkit-scrollbar{display:none}
      .filter-list li{flex:0 0 auto}
      .filter-list a{min-width:max-content}
      .resource-card{grid-template-columns:1fr}
      .risk-meter{text-align:left}
      .member-strip,.cta-card{display:grid;grid-template-columns:1fr}
      .step-grid{grid-template-columns:1fr}
      .section{padding:48px 0}
      .footer-grid{grid-template-columns:1fr}
      .copyright{display:grid}
      .btn{width:100%}
      .btn-row{display:grid}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 24px, 500px)}
      .head-card,.cta-card{padding:20px}
      h1{font-size:31px}
      .head-desc,.section-lead{font-size:15px}
      .chip-row{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}
      .chip{flex:0 0 auto}
      .feature-card{padding:20px}
      .glass-card{border-radius:20px}
      .card-meta{gap:8px}
    }