/* roulang page: index */
:root{
            --ink:#111217;
            --ink-soft:#1b1c24;
            --paper:#f7f6f2;
            --paper-2:#eeece7;
            --card:#ffffff;
            --text:#17181d;
            --muted:#70717a;
            --line:#deddd7;
            --purple:#a76cff;
            --cyan:#62f5dc;
            --coral:#ff806f;
            --shadow:0 20px 60px rgba(20,20,30,.09);
            --dark-shadow:0 22px 65px rgba(0,0,0,.28);
            --radius:26px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--paper);
            color:var(--text);
            font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;
            line-height:1.8;
            -webkit-font-smoothing:antialiased;
        }
        a{text-decoration:none;color:inherit}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:50;
            background:rgba(17,18,23,.92);
            backdrop-filter:blur(18px);
            box-shadow:0 8px 28px rgba(0,0,0,.16);
        }
        .site-header:after{
            content:"";display:block;height:2px;
            background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
            opacity:.85
        }
        .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:26px}
        .brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
        .brand-mark{
            width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
            color:var(--ink);font-size:14px;font-weight:900;
            background:linear-gradient(135deg,var(--cyan),var(--purple));
            box-shadow:0 0 24px rgba(98,245,220,.3)
        }
        .brand-name{font-size:17px}
        .nav-links{display:flex;align-items:center;gap:7px}
        .nav-links a{
            position:relative;color:#bdbdc7;padding:10px 14px;border-radius:12px;
            font-size:14px;transition:.25s ease
        }
        .nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.07)}
        .nav-links a.active:after{
            content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
            border-radius:3px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)
        }
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;gap:9px;
            border:0;border-radius:999px;padding:13px 20px;font-weight:700;
            color:#111217;background:linear-gradient(100deg,var(--cyan),#b6ffe9);
            box-shadow:0 10px 24px rgba(98,245,220,.18);transition:.25s ease
        }
        .nav-action:hover,.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(98,245,220,.3)}
        .menu-toggle{display:none;background:transparent;border:1px solid #454651;color:#fff;border-radius:12px;padding:9px 12px}
        .hero{
            min-height:650px;position:relative;display:flex;align-items:center;overflow:hidden;
            color:#fff;background:
            radial-gradient(circle at 74% 30%,rgba(167,108,255,.3),transparent 28%),
            radial-gradient(circle at 18% 86%,rgba(98,245,220,.16),transparent 26%),
            var(--ink)
        }
        .hero:before{
            content:"";position:absolute;inset:0;opacity:.2;
            background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
            background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 85%)
        }
        .hero-inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;padding:88px 0}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:13px;font-weight:800;letter-spacing:.1em}
        .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px var(--coral)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(42px,6vw,76px);line-height:1.12;letter-spacing:-.065em;margin:18px 0 24px;max-width:680px}
        .hero-copy{font-size:17px;color:#c8c8d0;max-width:610px;line-height:1.9}
        .hero-buttons{display:flex;flex-wrap:wrap;gap:13px;margin:32px 0 26px}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            border:1px solid #545563;color:#fff;border-radius:999px;padding:12px 19px;
            transition:.25s ease
        }
        .btn-secondary:hover{border-color:var(--cyan);background:rgba(98,245,220,.09);transform:translateY(-2px)}
        .trust-row{display:flex;flex-wrap:wrap;gap:18px;color:#9495a1;font-size:13px}
        .trust-row span{display:flex;align-items:center;gap:7px}
        .trust-row b{color:var(--cyan);font-size:17px}
        .workbench{position:relative;min-height:420px;border:1px solid rgba(255,255,255,.16);border-radius:32px;padding:20px;background:rgba(255,255,255,.055);box-shadow:var(--dark-shadow);transform:rotate(1deg)}
        .workbench-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);padding:8px 4px 17px}
        .dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:#666873}.dots i:first-child{background:var(--coral)}.dots i:nth-child(2){background:#f3ce70}.dots i:last-child{background:var(--cyan)}
        .status{font-size:11px;color:var(--cyan);letter-spacing:.08em}
        .panel-title{font-size:16px;font-weight:800;margin:22px 0 4px}.panel-sub{font-size:12px;color:#9697a4}
        .entry-card{margin-top:20px;padding:18px;border-radius:20px;background:#24252e;border:1px solid rgba(98,245,220,.28)}
        .entry-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;font-size:13px}
        .online{color:var(--cyan);font-size:12px}.online:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:6px;box-shadow:0 0 10px var(--cyan)}
        .progress{height:6px;border-radius:5px;background:#3b3c46;overflow:hidden}.progress span{display:block;width:78%;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:5px}
        .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
        .check{padding:15px;border-radius:16px;background:rgba(255,255,255,.06);color:#bfc0c8;font-size:12px}
        .check strong{display:block;color:#fff;font-size:14px;margin-bottom:3px}.check em{color:var(--cyan);font-style:normal}
        .section{padding:104px 0}.section.alt{background:var(--paper-2)}
        .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}
        .section-kicker{color:#8b55d8;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
        h2{font-size:clamp(29px,4vw,47px);line-height:1.2;letter-spacing:-.05em;margin:10px 0 0}
        .section-intro{max-width:520px;color:var(--muted);font-size:15px}
        .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .screen-card{min-height:290px;background:var(--ink-soft);color:#fff;border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;border:1px solid #30313b;transition:.3s ease}
        .screen-card:hover{transform:translateY(-7px);border-color:rgba(98,245,220,.55);box-shadow:var(--dark-shadow)}
        .screen-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;bottom:-90px;background:rgba(167,108,255,.25);filter:blur(2px)}
        .screen-tag{display:inline-flex;border:1px solid rgba(98,245,220,.45);color:var(--cyan);font-size:11px;padding:4px 9px;border-radius:99px}
        .screen-card h3{font-size:22px;margin:46px 0 9px}.screen-card p{font-size:13px;color:#a9aab5;max-width:230px}
        .screen-lines{position:absolute;right:22px;top:88px;width:88px}.screen-lines span{display:block;height:7px;background:#454650;margin:11px 0;border-radius:5px}.screen-lines span:nth-child(2){width:68px;background:var(--purple)}.screen-lines span:nth-child(3){width:48px;background:var(--cyan)}
        .requirements{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
        .matrix{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .req-card,.info-card,.quote{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;transition:.25s ease}
        .req-card:hover,.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c9b0ed}
        .req-card h3{font-size:17px;margin:16px 0 5px}.req-card p{font-size:13px;color:var(--muted);margin-bottom:13px}
        .req-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f0e8ff;color:#8b55d8;font-weight:900}
        .badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#e8faf6;color:#178878;font-size:11px;font-weight:700}
        .info-card{background:var(--ink);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:space-between}
        .info-card h3{font-size:25px;line-height:1.35}.info-card p{font-size:14px;color:#a9aab5}.info-list{list-style:none;padding:0;margin:22px 0}.info-list li{padding:13px 0;border-bottom:1px solid #30313a;color:#d5d5dc;font-size:13px}.info-list li:before{content:"✓";color:var(--cyan);margin-right:10px}
        .notice{margin-top:20px;padding:16px 18px;border-left:3px solid var(--coral);background:#fff5f2;color:#65636a;font-size:13px;border-radius:0 14px 14px 0}
        .quotes{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:17px;align-items:start}.quote.large{padding:32px;min-height:228px}.quote p{font-size:16px;line-height:1.8}.quote.small{min-height:175px}.quote.small p{font-size:14px}.quote-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ece4fb;color:#8051c9;font-weight:800}
        .download-zone{background:#e6e2dc;padding:34px;border-radius:32px;display:grid;grid-template-columns:1fr 1.25fr;gap:30px;align-items:center}
        .download-zone h2{font-size:34px}.download-zone p{color:var(--muted);font-size:14px}.download-bar{background:var(--ink);padding:25px;border-radius:23px;display:flex;flex-wrap:wrap;gap:11px;align-items:center}.download-bar .btn-secondary{font-size:13px;padding:10px 15px}.download-note{width:100%;color:#858691;font-size:11px}
        .faq-wrap{max-width:850px;margin:0 auto}.faq-item{border-bottom:1px solid var(--line)}.faq-q{width:100%;padding:22px 0;background:none;border:0;display:flex;justify-content:space-between;text-align:left;font-weight:800;color:var(--text);font-size:16px}.faq-q span{color:#9a62db;font-size:24px;transition:.25s}.faq-a{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:max-height .35s ease}.faq-item.open .faq-a{max-height:150px}.faq-item.open .faq-q span{transform:rotate(45deg)}
        .footer{background:var(--ink);color:#fff;padding:58px 0 25px;border-top:2px solid rgba(167,108,255,.55)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:42px}.footer p{color:#999aa5;font-size:13px;max-width:330px}.footer h3{font-size:14px;margin-bottom:16px}.footer-links{display:flex;flex-direction:column;gap:9px;color:#a7a8b2;font-size:13px}.footer-links a:hover{color:var(--cyan)}.copyright{border-top:1px solid #30313a;padding-top:20px;color:#71727d;font-size:12px;display:flex;justify-content:space-between;gap:20px}
        :focus-visible{outline:3px solid rgba(98,245,220,.7);outline-offset:3px}
        @media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:45px}.hero{min-height:auto}.workbench{max-width:650px}.requirements{grid-template-columns:1fr}.download-zone{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.nav-action{display:none}.menu-toggle{display:block}}
        @media(max-width:650px){.container{width:min(100% - 28px,1180px)}.nav-wrap{height:68px}.brand-name{font-size:14px}.hero-inner{padding:68px 0}.hero-copy{font-size:15px}.hero-buttons{flex-direction:column;align-items:stretch}.btn-primary,.btn-secondary{text-align:center}.section{padding:70px 0}.section-head{display:block;margin-bottom:28px}.section-intro{margin-top:15px}.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.screen-card{min-width:82%;scroll-snap-align:start}.matrix{grid-template-columns:1fr}.quotes{grid-template-columns:1fr}.quote.large{min-height:0}.download-zone{padding:24px}.download-zone h2{font-size:29px}.download-bar{align-items:stretch;flex-direction:column}.download-bar .btn-secondary{width:100%}.footer-grid{grid-template-columns:1fr;gap:30px}.copyright{display:block}.copyright span{display:block;margin-top:8px}h1{font-size:43px}.workbench{padding:14px}.check-grid{gap:7px}.check{padding:12px}}

/* roulang page: category2 */
:root{
      --ink:#0c0c11;
      --panel:#15151d;
      --panel-2:#1d1b28;
      --paper:#f8f5ef;
      --paper-soft:#efede6;
      --text:#17171d;
      --muted:#696876;
      --line:rgba(23,23,29,.12);
      --violet:#a855f7;
      --cyan:#22d3ee;
      --coral:#ff7a66;
      --green:#49d58c;
      --radius:26px;
      --radius-sm:16px;
      --shadow:0 24px 70px rgba(16,15,22,.14);
      --shadow-dark:0 22px 60px rgba(0,0,0,.34);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 14% 8%, rgba(168,85,247,.10), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(34,211,238,.10), transparent 26%),
        linear-gradient(180deg,#fbf8f1 0%,#f3f0e9 44%,#fbf8f1 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(12,12,17,.94);
      color:#fff;
      backdrop-filter:blur(18px);
      box-shadow:0 12px 40px rgba(0,0,0,.22);
    }
    .site-header::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
      opacity:.95;
    }
    .nav-wrap{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      letter-spacing:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      flex:0 0 42px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#08080d;
      background:linear-gradient(135deg,var(--cyan),#f9fbff 42%,var(--violet));
      box-shadow:0 0 24px rgba(34,211,238,.36);
      font-size:17px;
      line-height:1;
    }
    .brand-name{
      font-size:17px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      border-radius:999px;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 16px;
      border-radius:999px;
      color:rgba(255,255,255,.74);
      font-size:14px;
      transition:.25s ease;
      white-space:nowrap;
    }
    .nav-links a:hover{
      color:#fff;
      background:rgba(255,255,255,.08);
    }
    .nav-links a.active{
      color:#fff;
      background:linear-gradient(135deg,rgba(168,85,247,.26),rgba(34,211,238,.18));
      box-shadow:0 0 24px rgba(168,85,247,.22), inset 0 0 0 1px rgba(255,255,255,.10);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      color:#08080d;
      font-weight:700;
      font-size:14px;
      background:linear-gradient(135deg,var(--cyan),#fff 52%,var(--coral));
      box-shadow:0 0 26px rgba(34,211,238,.22);
      transition:.25s ease;
      white-space:nowrap;
    }
    .nav-cta:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(34,211,238,.28)}
    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background:rgba(255,255,255,.06);
      color:#fff;
    }
    .menu-toggle span{
      display:block;
      width:20px;
      height:2px;
      margin:5px auto;
      background:currentColor;
      border-radius:4px;
      transition:.2s ease;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:50px;
      padding:0 22px;
      border-radius:999px;
      font-weight:800;
      transition:.25s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{
      color:#07070b;
      background:linear-gradient(135deg,var(--cyan),#fdfdf7 50%,var(--coral));
      box-shadow:0 18px 44px rgba(34,211,238,.22);
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 58px rgba(255,122,102,.24)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
    }
    .btn-secondary:hover{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.10)}
    .btn-light{
      color:var(--text);
      border-color:rgba(23,23,29,.12);
      background:#fffdf8;
      box-shadow:0 12px 28px rgba(16,15,22,.08);
    }
    .btn-light:hover{transform:translateY(-2px);border-color:rgba(168,85,247,.34);box-shadow:0 18px 44px rgba(16,15,22,.12)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:30px;
      padding:0 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
    }
    .badge::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 14px var(--cyan);
    }
    .section{padding:92px 0}
    .section-tight{padding:70px 0}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:14px;
      color:#6b36c9;
      font-size:14px;
      font-weight:800;
    }
    .section-kicker::before{
      content:"";
      width:28px;
      height:2px;
      border-radius:99px;
      background:linear-gradient(90deg,var(--violet),var(--cyan));
    }
    .section-title{
      max-width:760px;
      margin:0;
      font-size:clamp(30px,4vw,48px);
      line-height:1.22;
      font-weight:900;
      letter-spacing:0;
    }
    .section-desc{
      max-width:760px;
      margin:18px 0 0;
      color:var(--muted);
      font-size:16px;
    }
    .hero{
      position:relative;
      padding:84px 0 58px;
      color:#fff;
      background:
        linear-gradient(115deg,rgba(12,12,17,.98),rgba(24,22,34,.96)),
        repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 78px);
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(110deg,rgba(168,85,247,.22),transparent 28%),
        radial-gradient(circle at 74% 26%,rgba(34,211,238,.22),transparent 26%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:5fr 7fr;
      gap:52px;
      align-items:center;
    }
    .hero h1{
      margin:18px 0 18px;
      font-size:clamp(40px,5vw,70px);
      line-height:1.08;
      font-weight:950;
      letter-spacing:0;
    }
    .hero p{
      margin:0;
      color:rgba(255,255,255,.76);
      font-size:17px;
      line-height:1.9;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:32px;
    }
    .kpi-row{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:34px;
    }
    .kpi{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
    }
    .kpi strong{display:block;color:#fff;font-size:22px;line-height:1.2}
    .kpi span{display:block;margin-top:5px;color:rgba(255,255,255,.62);font-size:13px}
    .dp-cover{
      position:relative;
      min-height:520px;
      border-radius:34px;
      transform:rotate(-2deg) translateY(12px);
      background:
        linear-gradient(135deg,rgba(34,211,238,.20),transparent 32%),
        linear-gradient(160deg,#191923,#111119 55%,#242033);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:var(--shadow-dark),0 0 0 1px rgba(34,211,238,.12);
      overflow:hidden;
    }
    .dp-cover::before{
      content:"";
      position:absolute;
      inset:28px;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:54px 54px;
      opacity:.55;
    }
    .status-board{
      position:absolute;
      inset:38px;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      grid-template-rows:auto 1fr auto;
      gap:18px;
      transform:rotate(2deg);
    }
    .screen-card{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(12,12,17,.72);
      box-shadow:0 18px 40px rgba(0,0,0,.22);
      padding:22px;
      backdrop-filter:blur(10px);
    }
    .screen-card.wide{grid-column:1 / -1}
    .mini-title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:16px;
      color:#fff;
      font-weight:800;
    }
    .signal{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--cyan);
      font-size:12px;
      font-weight:800;
    }
    .signal::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--green);
      box-shadow:0 0 12px var(--green);
    }
    .check-line{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.74);
      font-size:14px;
    }
    .check-line b{color:#fff}
    .meter{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
      margin:13px 0;
    }
    .meter i{
      display:block;
      height:100%;
      width:78%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--violet),var(--cyan));
      box-shadow:0 0 16px rgba(34,211,238,.45);
    }
    .floating-tag{
      position:absolute;
      right:28px;
      top:32px;
      z-index:2;
      transform:rotate(4deg);
      padding:12px 16px;
      border-radius:999px;
      color:#07070b;
      font-weight:900;
      background:linear-gradient(135deg,var(--cyan),#fff);
      box-shadow:0 18px 36px rgba(34,211,238,.24);
    }
    .timeline-wrap{
      position:relative;
      margin-top:46px;
    }
    .timeline-wrap::before{
      content:"";
      position:absolute;
      left:50%;
      top:8px;
      bottom:8px;
      width:2px;
      transform:translateX(-50%);
      background:linear-gradient(180deg,var(--violet),var(--cyan),var(--coral));
      opacity:.5;
    }
    .step{
      position:relative;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:42px;
      align-items:center;
      margin:0 0 38px;
    }
    .step:nth-child(even) .step-card{grid-column:2}
    .step:nth-child(even) .step-note{grid-column:1;grid-row:1}
    .step-dot{
      position:absolute;
      left:50%;
      top:34px;
      width:22px;
      height:22px;
      transform:translateX(-50%);
      border-radius:999px;
      background:#fff;
      border:6px solid var(--cyan);
      box-shadow:0 0 0 8px rgba(34,211,238,.12),0 0 26px rgba(34,211,238,.38);
      z-index:2;
    }
    .step-card,.compare-card,.tip-card,.faq-item{
      border:1px solid var(--line);
      background:rgba(255,253,248,.86);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition:.25s ease;
    }
    .step-card{
      padding:30px;
    }
    .step-card:hover,.compare-card:hover,.tip-card:hover{
      transform:translateY(-4px);
      border-color:rgba(168,85,247,.25);
      box-shadow:0 30px 76px rgba(16,15,22,.16);
    }
    .step-num{
      display:inline-grid;
      place-items:center;
      width:42px;
      height:42px;
      border-radius:14px;
      color:#07070b;
      font-weight:950;
      background:linear-gradient(135deg,var(--cyan),#fff,var(--coral));
      margin-bottom:18px;
    }
    .step-card h2,.compare-card h3,.tip-card h3{
      margin:0;
      font-size:24px;
      line-height:1.35;
      font-weight:900;
    }
    .step-card p,.compare-card p,.tip-card p{
      margin:12px 0 0;
      color:var(--muted);
      font-size:15px;
    }
    .step-note{
      padding:22px;
      border-radius:22px;
      background:rgba(12,12,17,.88);
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 20px 54px rgba(0,0,0,.18);
    }
    .step-note span{
      display:inline-flex;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(34,211,238,.12);
      color:var(--cyan);
      font-size:12px;
      font-weight:800;
    }
    .step-note p{margin:12px 0 0;color:rgba(255,255,255,.72);font-size:14px}
    .compare-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      margin-top:36px;
    }
    .compare-card{
      padding:28px;
      overflow:hidden;
    }
    .compare-card.dark{
      color:#fff;
      background:
        linear-gradient(135deg,rgba(168,85,247,.20),transparent 38%),
        linear-gradient(160deg,#15151d,#0c0c11);
      border-color:rgba(255,255,255,.10);
    }
    .compare-card.dark p{color:rgba(255,255,255,.72)}
    .feature-list{
      display:grid;
      gap:12px;
      margin:22px 0 0;
      padding:0;
      list-style:none;
    }
    .feature-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:inherit;
      font-size:15px;
    }
    .feature-list li::before{
      content:"";
      flex:0 0 9px;
      width:9px;
      height:9px;
      margin-top:10px;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 12px rgba(34,211,238,.55);
    }
    .tips-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:24px;
      margin-top:36px;
      align-items:start;
    }
    .tip-card{padding:28px}
    .tip-stack{display:grid;gap:18px}
    .notice-bar{
      display:flex;
      gap:16px;
      align-items:flex-start;
      margin-top:28px;
      padding:22px;
      border-radius:22px;
      color:#fff;
      background:linear-gradient(135deg,#111119,#211d31);
      border:1px solid rgba(255,255,255,.10);
    }
    .notice-icon{
      flex:0 0 44px;
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#07070b;
      font-weight:950;
      background:linear-gradient(135deg,var(--coral),#fff);
    }
    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      padding:34px;
      background:
        linear-gradient(135deg,rgba(34,211,238,.18),transparent 30%),
        linear-gradient(160deg,#111119,#1d1b28);
      color:#fff;
      box-shadow:var(--shadow-dark);
      border:1px solid rgba(255,255,255,.10);
    }
    .cta-band::after{
      content:"";
      position:absolute;
      left:34px;
      right:34px;
      bottom:0;
      height:2px;
      background:linear-gradient(90deg,var(--violet),var(--cyan),var(--coral));
      opacity:.75;
    }
    .cta-grid{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto;
      gap:26px;
      align-items:center;
    }
    .cta-band h2{
      margin:0;
      font-size:clamp(28px,4vw,44px);
      line-height:1.22;
      font-weight:950;
    }
    .cta-band p{margin:14px 0 0;color:rgba(255,255,255,.72)}
    .cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
    .faq-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:36px;
      margin-top:40px;
      align-items:start;
    }
    .faq-list{display:grid;gap:14px}
    .faq-item{
      overflow:hidden;
      background:#fffdf8;
    }
    .faq-q{
      width:100%;
      min-height:62px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      padding:20px 22px;
      border:0;
      background:transparent;
      color:var(--text);
      text-align:left;
      font-weight:900;
    }
    .faq-q:focus-visible,.btn:focus-visible,.nav-links a:focus-visible,.nav-cta:focus-visible,.menu-toggle:focus-visible{
      outline:3px solid rgba(34,211,238,.42);
      outline-offset:3px;
    }
    .faq-q i{
      flex:0 0 28px;
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:rgba(168,85,247,.10);
      color:#6b36c9;
      font-style:normal;
      transition:.25s ease;
    }
    .faq-a{
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease;
    }
    .faq-a p{
      margin:0;
      padding:0 22px 22px;
      color:var(--muted);
      font-size:15px;
    }
    .faq-item.open .faq-a{max-height:220px}
    .faq-item.open .faq-q i{transform:rotate(45deg);background:rgba(34,211,238,.14);color:#078399}
    .footer{
      margin-top:90px;
      padding:62px 0 28px;
      background:#0c0c11;
      color:rgba(255,255,255,.72);
      border-top:1px solid rgba(255,255,255,.08);
      position:relative;
    }
    .footer::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .75fr .75fr;
      gap:44px;
    }
    .footer h3{
      margin:0 0 16px;
      color:#fff;
      font-size:16px;
      font-weight:900;
    }
    .footer p{color:rgba(255,255,255,.66)}
    .footer-links{display:grid;gap:10px}
    .footer-links a{
      color:rgba(255,255,255,.66);
      transition:.2s ease;
    }
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:18px;
      margin-top:46px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.50);
      font-size:13px;
    }
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr;gap:38px}
      .dp-cover{min-height:460px;transform:none}
      .status-board{transform:none}
      .timeline-wrap::before{left:22px}
      .step,.step:nth-child(even){
        grid-template-columns:1fr;
        gap:18px;
        padding-left:56px;
      }
      .step:nth-child(even) .step-card,.step:nth-child(even) .step-note{grid-column:auto;grid-row:auto}
      .step-dot{left:22px}
      .tips-grid,.faq-grid{grid-template-columns:1fr}
      .cta-grid{grid-template-columns:1fr}
      .cta-actions{justify-content:flex-start}
    }
    @media (max-width:820px){
      .container{width:min(100% - 28px,var(--container))}
      .nav-wrap{min-height:70px}
      .menu-toggle{display:block}
      .nav-links{
        position:absolute;
        left:14px;
        right:14px;
        top:78px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:14px;
        border-radius:22px;
        background:rgba(12,12,17,.98);
        box-shadow:0 22px 60px rgba(0,0,0,.32);
      }
      .site-header.menu-open .nav-links{display:flex}
      .nav-links a{justify-content:flex-start;min-height:46px}
      .nav-cta{display:none}
      .brand-name{max-width:210px}
      .hero{padding:56px 0 42px}
      .section{padding:64px 0}
      .section-tight{padding:54px 0}
      .kpi-row{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr;gap:30px}
      .copyright{flex-direction:column}
    }
    @media (max-width:520px){
      .hero h1{font-size:38px}
      .hero-actions,.cta-actions{flex-direction:column}
      .btn{width:100%;white-space:normal;text-align:center}
      .dp-cover{min-height:650px;border-radius:26px}
      .status-board{
        inset:22px;
        grid-template-columns:1fr;
        grid-template-rows:auto;
      }
      .screen-card.wide{grid-column:auto}
      .floating-tag{right:16px;top:16px;font-size:13px;padding:9px 12px}
      .step{padding-left:44px}
      .step-card,.compare-card,.tip-card{padding:22px;border-radius:22px}
      .cta-band{padding:24px;border-radius:26px}
      .notice-bar{flex-direction:column}
    }

/* roulang page: category1 */
:root {
      --ink: #111114;
      --ink-soft: #1d1d22;
      --panel: #18181e;
      --panel-2: #22222a;
      --paper: #faf7f0;
      --paper-2: #f1eee6;
      --mist: #e7e2d8;
      --text: #202025;
      --muted: #696973;
      --muted-2: #a6a3ad;
      --line: rgba(17, 17, 20, .12);
      --cyan: #20e6d1;
      --purple: #9b5cff;
      --coral: #ff7a66;
      --radius: 24px;
      --radius-sm: 16px;
      --shadow: 0 24px 70px rgba(24, 24, 30, .12);
      --shadow-dark: 0 24px 80px rgba(0, 0, 0, .35);
      --container: 1200px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(155, 92, 255, .08), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(32, 230, 209, .07), transparent 30%),
        linear-gradient(180deg, #fbf8f2 0%, #f4f0e8 48%, #fbf8f2 100%);
      line-height: 1.8;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button, input {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
      background: none;
    }

    :focus-visible {
      outline: 3px solid rgba(32, 230, 209, .65);
      outline-offset: 4px;
      border-radius: 14px;
    }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(17, 17, 20, .92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    }

    .site-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);
      opacity: .86;
    }

    .nav-wrap {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: #fff;
      font-weight: 800;
      letter-spacing: 0;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111114;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      box-shadow: 0 0 28px rgba(32, 230, 209, .32);
      flex: 0 0 auto;
      font-weight: 900;
    }

    .brand-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 17px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-left: auto;
    }

    .nav-links a {
      position: relative;
      color: rgba(255, 255, 255, .74);
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .nav-links a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
      transform: translateY(-1px);
    }

    .nav-links a.active {
      color: #fff;
      background: rgba(155, 92, 255, .16);
      box-shadow: inset 0 0 0 1px rgba(155, 92, 255, .34), 0 0 22px rgba(155, 92, 255, .18);
    }

    .nav-links a.active::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 5px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--purple), var(--cyan));
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      color: #111114;
      font-weight: 800;
      font-size: 14px;
      background: linear-gradient(135deg, var(--cyan), #f8ff7a);
      box-shadow: 0 14px 34px rgba(32, 230, 209, .18);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
      box-shadow: 0 18px 42px rgba(32, 230, 209, .28);
    }

    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 16px;
      color: #fff;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      margin: 5px auto;
      background: #fff;
      border-radius: 999px;
      transition: transform .2s ease, opacity .2s ease;
    }

    .mobile-panel {
      display: none;
      padding: 0 0 18px;
    }

    .section {
      padding: 88px 0;
    }

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 13px;
      border-radius: 999px;
      color: #2a292f;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: 0 10px 30px rgba(17, 17, 20, .06);
      font-size: 13px;
      font-weight: 800;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 16px rgba(32, 230, 209, .8);
    }

    .hero {
      position: relative;
      min-height: 620px;
      display: flex;
      align-items: center;
      padding: 70px 0 76px;
      color: #fff;
      background:
        linear-gradient(115deg, rgba(17, 17, 20, .94), rgba(17, 17, 20, .78)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%2322222a'/%3E%3Cstop offset='1' stop-color='%23111114'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(/%23g)'/%3E%3Cg opacity='.22' fill='none' stroke='%2320e6d1' stroke-width='2'%3E%3Cpath d='M160 160h360v170H160zM1050 120h310v120h-310zM780 340h520v230H780zM240 560h390v140H240z'/%3E%3Cpath d='M520 245h220M925 455h-170M630 630h210M1360 180h90'/%3E%3C/g%3E%3Cg opacity='.18' fill='none' stroke='%239b5cff' stroke-width='3'%3E%3Cpath d='M0 760C260 670 400 840 650 735s370-245 650-170 360-30 520-110'/%3E%3Cpath d='M0 235C250 120 460 230 650 190s330-170 570-80 300 45 380-20'/%3E%3C/g%3E%3Cg opacity='.28'%3E%3Ccircle cx='290' cy='245' r='8' fill='%2320e6d1'/%3E%3Ccircle cx='1130' cy='450' r='8' fill='%23ff7a66'/%3E%3Ccircle cx='900' cy='630' r='7' fill='%239b5cff'/%3E%3C/g%3E%3C/svg%3E") center/cover;
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 120px;
      background: linear-gradient(180deg, transparent, #fbf8f2);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 420px;
      gap: 46px;
      align-items: center;
    }

    .hero h1 {
      margin: 22px 0 18px;
      font-size: clamp(38px, 5.4vw, 68px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 900;
      max-width: 820px;
    }

    .hero p {
      max-width: 720px;
      color: rgba(255, 255, 255, .76);
      font-size: 18px;
      line-height: 1.9;
    }

    .hero-actions, .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 50px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 850;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      white-space: nowrap;
    }

    .btn-primary {
      color: #111114;
      background: linear-gradient(135deg, var(--cyan), #fff06a);
      box-shadow: 0 18px 42px rgba(32, 230, 209, .22);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 58px rgba(32, 230, 209, .32);
    }

    .btn-secondary {
      color: #fff;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .18);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: rgba(32, 230, 209, .55);
      background: rgba(32, 230, 209, .08);
    }

    .btn-light {
      color: #17171c;
      background: #fff;
      border: 1px solid rgba(17, 17, 20, .09);
      box-shadow: 0 14px 34px rgba(17, 17, 20, .08);
    }

    .btn-light:hover {
      transform: translateY(-2px);
      border-color: rgba(155, 92, 255, .28);
      box-shadow: 0 18px 42px rgba(17, 17, 20, .12);
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .hero-tags span, .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      color: rgba(255, 255, 255, .86);
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .choice-panel {
      border-radius: 30px;
      background: rgba(24, 24, 30, .78);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--shadow-dark);
      padding: 18px;
      backdrop-filter: blur(18px);
    }

    .choice-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 8px 18px;
      color: rgba(255, 255, 255, .74);
      font-size: 13px;
    }

    .choice-card {
      position: relative;
      padding: 22px;
      border-radius: 24px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .13);
      margin-bottom: 14px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .choice-card:hover {
      transform: translateY(-3px);
      border-color: rgba(32, 230, 209, .42);
      background: rgba(255, 255, 255, .1);
    }

    .choice-card.recommended {
      background:
        linear-gradient(135deg, rgba(155, 92, 255, .22), rgba(32, 230, 209, .12)),
        rgba(255, 255, 255, .08);
      border-color: rgba(32, 230, 209, .44);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 34px rgba(32, 230, 209, .12);
    }

    .choice-card h2, .choice-card h3 {
      margin: 0 0 8px;
      font-size: 18px;
      color: #fff;
      font-weight: 900;
    }

    .choice-card p {
      margin: 0;
      color: rgba(255, 255, 255, .68);
      font-size: 14px;
      line-height: 1.7;
    }

    .recommend-label {
      position: absolute;
      top: -12px;
      right: 18px;
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      color: #111114;
      background: var(--cyan);
      font-size: 12px;
      font-weight: 900;
    }

    .status-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      margin-top: 16px;
      color: rgba(255, 255, 255, .76);
      font-size: 13px;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(32, 230, 209, .85);
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
      gap: 34px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section-heading h2 {
      margin: 14px 0 0;
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-heading p {
      color: var(--muted);
      margin: 0;
      font-size: 16px;
    }

    .filter-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 26px;
      align-items: start;
    }

    .filter-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
    }

    .filter-tab {
      min-height: 42px;
      padding: 0 15px;
      border-radius: 999px;
      color: var(--text);
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(17, 17, 20, .09);
      font-weight: 800;
      font-size: 14px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .filter-tab:hover, .filter-tab.active {
      transform: translateY(-1px);
      background: #fff;
      border-color: rgba(155, 92, 255, .32);
      box-shadow: 0 12px 28px rgba(155, 92, 255, .1);
    }

    .entry-list {
      display: grid;
      gap: 16px;
    }

    .entry-card {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 24px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: 0 18px 46px rgba(17, 17, 20, .07);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .entry-card:hover {
      transform: translateY(-3px);
      border-color: rgba(32, 230, 209, .32);
      box-shadow: 0 24px 62px rgba(17, 17, 20, .11);
    }

    .entry-index {
      width: 58px;
      height: 58px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111114;
      font-size: 18px;
      font-weight: 950;
      background: linear-gradient(135deg, rgba(32, 230, 209, .95), rgba(155, 92, 255, .72));
      box-shadow: 0 16px 30px rgba(32, 230, 209, .14);
    }

    .entry-card h3 {
      margin: 0 0 8px;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.35;
    }

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

    .meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .meta-line span {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      color: #3f3d47;
      background: rgba(17, 17, 20, .05);
      font-size: 12px;
      font-weight: 800;
    }

    .side-card {
      position: sticky;
      top: 102px;
      padding: 24px;
      border-radius: 28px;
      color: #fff;
      background:
        linear-gradient(145deg, rgba(32, 230, 209, .08), rgba(155, 92, 255, .16)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: var(--shadow-dark);
    }

    .side-card h2, .side-card h3 {
      margin: 0 0 14px;
      font-size: 22px;
      font-weight: 900;
    }

    .side-card p {
      margin: 0 0 18px;
      color: rgba(255, 255, 255, .7);
      font-size: 14px;
    }

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

    .check-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
    }

    .check-list li::before {
      content: "";
      width: 9px;
      height: 9px;
      margin-top: 9px;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 14px rgba(32, 230, 209, .8);
      flex: 0 0 auto;
    }

    .matrix {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 24px;
      align-items: stretch;
    }

    .dark-board {
      padding: 30px;
      border-radius: 30px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(255, 122, 102, .09), rgba(32, 230, 209, .08)),
        var(--ink);
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: var(--shadow-dark);
    }

    .board-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }

    .mini-card {
      padding: 18px;
      border-radius: 20px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
    }

    .mini-card strong {
      display: block;
      margin-bottom: 6px;
      color: #fff;
      font-size: 16px;
    }

    .mini-card span {
      color: rgba(255, 255, 255, .66);
      font-size: 13px;
    }

    .light-card {
      padding: 28px;
      border-radius: 28px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: var(--shadow);
    }

    .light-card h3 {
      margin: 0 0 14px;
      font-size: 24px;
      font-weight: 900;
    }

    .light-card p {
      color: var(--muted);
      margin: 0;
    }

    .notice-strip {
      margin-top: 20px;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(255, 122, 102, .1);
      border: 1px solid rgba(255, 122, 102, .2);
      color: #6d342c;
      font-size: 14px;
      font-weight: 700;
    }

    .steps-ribbon {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .step-tile {
      min-height: 188px;
      padding: 22px;
      border-radius: 26px;
      background: #fff;
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: 0 18px 46px rgba(17, 17, 20, .07);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .step-tile:hover {
      transform: translateY(-3px);
      border-color: rgba(155, 92, 255, .26);
      box-shadow: 0 24px 58px rgba(17, 17, 20, .11);
    }

    .step-tile .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      color: #111114;
      background: rgba(32, 230, 209, .72);
      font-weight: 950;
      margin-bottom: 16px;
    }

    .step-tile h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 900;
    }

    .step-tile p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .feedback-wall {
      display: grid;
      grid-template-columns: 1fr 1.08fr .92fr;
      gap: 16px;
      align-items: start;
    }

    .feedback-card {
      padding: 22px;
      border-radius: 26px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: 0 18px 46px rgba(17, 17, 20, .07);
    }

    .feedback-card.dark {
      color: #fff;
      background:
        linear-gradient(145deg, rgba(155, 92, 255, .18), rgba(32, 230, 209, .08)),
        var(--panel);
      border-color: rgba(255, 255, 255, .1);
      transform: translateY(24px);
    }

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

    .feedback-card.dark p {
      color: rgba(255, 255, 255, .72);
    }

    .user-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111114;
      font-weight: 950;
      background: linear-gradient(135deg, var(--cyan), var(--coral));
    }

    .user-row strong {
      display: block;
      line-height: 1.2;
      font-weight: 900;
    }

    .user-row span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .feedback-card.dark .user-row span {
      color: rgba(255, 255, 255, .58);
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 38px;
      border-radius: 34px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(32, 230, 209, .16), rgba(155, 92, 255, .2)),
        var(--ink);
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: var(--shadow-dark);
    }

    .cta-panel::before {
      content: "";
      position: absolute;
      left: 38px;
      right: 38px;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--cyan), var(--coral));
      opacity: .9;
    }

    .cta-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 30px;
      align-items: center;
    }

    .cta-panel h2 {
      margin: 10px 0 12px;
      font-size: clamp(28px, 3.4vw, 46px);
      line-height: 1.18;
      font-weight: 950;
    }

    .cta-panel p {
      margin: 0;
      color: rgba(255, 255, 255, .72);
      max-width: 760px;
    }

    .qr-visual {
      padding: 18px;
      border-radius: 28px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .qr-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      aspect-ratio: 1;
    }

    .qr-grid span {
      border-radius: 6px;
      background: rgba(255, 255, 255, .14);
    }

    .qr-grid span:nth-child(3n), .qr-grid span:nth-child(4n+1) {
      background: var(--cyan);
      box-shadow: 0 0 12px rgba(32, 230, 209, .4);
    }

    .qr-note {
      margin-top: 12px;
      color: rgba(255, 255, 255, .62);
      font-size: 13px;
      text-align: center;
    }

    .faq-list {
      display: grid;
      gap: 14px;
      max-width: 960px;
      margin: 0 auto;
    }

    .faq-item {
      border-radius: 22px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(17, 17, 20, .08);
      box-shadow: 0 16px 42px rgba(17, 17, 20, .06);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 22px;
      color: var(--text);
      text-align: left;
      font-weight: 900;
    }

    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(32, 230, 209, .18);
      color: #177f76;
      flex: 0 0 auto;
      transition: transform .22s ease, background .22s ease;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
    }

    .faq-answer p {
      margin: 0;
      padding: 0 22px 20px;
      color: var(--muted);
      font-size: 15px;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: rgba(155, 92, 255, .18);
      color: #6c41c7;
    }

    .footer {
      padding: 64px 0 28px;
      color: rgba(255, 255, 255, .72);
      background: var(--ink);
      border-top: 1px solid rgba(255, 255, 255, .08);
      position: relative;
    }

    .footer::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footer h3 {
      color: #fff;
      font-size: 16px;
      margin: 0 0 14px;
      font-weight: 900;
    }

    .footer p {
      max-width: 460px;
      margin: 0;
      color: rgba(255, 255, 255, .62);
      font-size: 14px;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: rgba(255, 255, 255, .66);
      font-size: 14px;
      transition: color .2s ease, transform .2s ease;
    }

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

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .48);
      font-size: 13px;
    }

    @media (max-width: 1024px) {
      .nav-cta {
        display: none;
      }

      .hero-grid, .filter-shell, .matrix, .cta-grid {
        grid-template-columns: 1fr;
      }

      .side-card {
        position: relative;
        top: auto;
      }

      .steps-ribbon {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .feedback-wall {
        grid-template-columns: 1fr 1fr;
      }

      .feedback-card.dark {
        transform: none;
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100% - 28px, var(--container));
      }

      .nav-wrap {
        height: 70px;
      }

      .nav-links {
        display: none;
      }

      .menu-toggle {
        display: inline-block;
      }

      .mobile-panel.open {
        display: block;
      }

      .mobile-panel .nav-links {
        display: grid;
        gap: 8px;
        padding: 10px 0 0;
      }

      .mobile-panel .nav-links a {
        min-height: 46px;
        display: flex;
        align-items: center;
      }

      .hero {
        min-height: auto;
        padding: 46px 0 70px;
      }

      .hero h1 {
        font-size: 40px;
      }

      .hero p {
        font-size: 16px;
      }

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

      .section-heading {
        grid-template-columns: 1fr;
        gap: 14px;
      }

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

      .entry-card .btn {
        grid-column: 1 / -1;
        width: 100%;
      }

      .entry-index {
        width: 48px;
        height: 48px;
        border-radius: 17px;
      }

      .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
      }

      .filter-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }

      .board-grid, .steps-ribbon, .feedback-wall, .footer-grid {
        grid-template-columns: 1fr;
      }

      .feedback-card.dark {
        transform: none;
      }

      .copyright {
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .brand-name {
        max-width: 210px;
        font-size: 15px;
      }

      .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
      }

      .hero-actions, .cta-actions {
        flex-direction: column;
      }

      .btn {
        width: 100%;
        white-space: normal;
        text-align: center;
      }

      .hero h1 {
        font-size: 34px;
      }

      .choice-panel, .cta-panel {
        border-radius: 26px;
        padding: 16px;
      }

      .light-card, .dark-board, .side-card {
        padding: 22px;
      }

      .entry-card {
        padding: 20px;
        gap: 14px;
      }

      .cta-panel::before {
        left: 20px;
        right: 20px;
      }
    }