/* roulang page: index */
:root{
      --bg:#101014;
      --bg-2:#17171d;
      --panel:#1f1f27;
      --panel-2:#262630;
      --text:#f4f5f7;
      --muted:#a9abb6;
      --soft:#dfe1e8;
      --line:rgba(255,255,255,.12);
      --line-strong:rgba(38,242,218,.36);
      --cyan:#26f2da;
      --pink:#ff4fd8;
      --violet:#8f6bff;
      --orange:#ff9f43;
      --green:#7dff9b;
      --dark:#0b0b0f;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:28px;
      --shadow:0 18px 60px rgba(0,0,0,.32);
      --shadow-soft:0 12px 32px rgba(0,0,0,.22);
      --gradient:linear-gradient(135deg,var(--cyan),var(--pink) 58%,var(--orange));
      --gradient-soft:linear-gradient(135deg,rgba(38,242,218,.14),rgba(255,79,216,.12));
      --container:1180px;
      --ease:all .24s ease;
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      line-height:1.72;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 4%,rgba(38,242,218,.14),transparent 28%),
        radial-gradient(circle at 92% 12%,rgba(255,79,216,.14),transparent 30%),
        linear-gradient(180deg,#101014 0%,#141419 44%,#0e0e12 100%);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease);}
    a:hover,a:focus{color:var(--cyan);}
    img{max-width:100%;height:auto;display:block;}
    button,input{font:inherit;}
    button{cursor:pointer;border:0;}
    :focus-visible{outline:3px solid rgba(38,242,218,.45);outline-offset:3px;}
    .site-wrap{position:relative;min-height:100vh;}
    .container{width:min(calc(100% - 36px),var(--container));margin:0 auto;}
    .top-status{height:4px;background:var(--gradient);box-shadow:0 0 22px rgba(38,242,218,.35);}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(16,16,20,.86);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(18px);
    }
    .nav-shell{
      min-height:82px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:24px;
    }
    .nav-side{display:flex;align-items:center;gap:12px;}
    .nav-left{justify-content:flex-end;}
    .nav-right{justify-content:flex-start;}
    .nav-link{
      padding:10px 14px;
      border:1px solid transparent;
      border-radius:999px;
      color:var(--soft);
      font-weight:700;
      font-size:14px;
      letter-spacing:.02em;
    }
    .nav-link:hover,.nav-link.active{
      color:#fff;
      border-color:rgba(38,242,218,.28);
      background:rgba(255,255,255,.06);
      box-shadow:0 8px 24px rgba(38,242,218,.08);
    }
    .nav-cta{
      padding:11px 16px;
      border-radius:999px;
      background:var(--gradient);
      color:#101014;
      font-weight:900;
      box-shadow:0 10px 24px rgba(255,79,216,.2);
    }
    .nav-cta:hover{color:#101014;transform:translateY(-2px);box-shadow:0 16px 36px rgba(38,242,218,.22);}
    .brand{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:10px 18px;
      border-radius:999px;
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:inset 0 0 0 1px rgba(38,242,218,.06),var(--shadow-soft);
      white-space:nowrap;
    }
    .brand-mark{
      width:14px;height:14px;border-radius:50%;
      background:var(--gradient);
      box-shadow:0 0 18px rgba(38,242,218,.65);
    }
    .brand-text{font-size:17px;font-weight:950;letter-spacing:.01em;}
    .brand-mini{
      font-size:11px;
      font-weight:900;
      color:var(--cyan);
      padding:3px 7px;
      border-radius:999px;
      border:1px solid rgba(38,242,218,.3);
      background:rgba(38,242,218,.08);
    }
    .menu-toggle{display:none;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line);}
    .mobile-panel{display:none;border-top:1px solid var(--line);padding:0 0 16px;}
    .mobile-panel a{display:block;padding:13px 16px;border-radius:14px;margin-top:8px;background:rgba(255,255,255,.05);font-weight:800;}
    main{overflow:hidden;}
    section{padding:76px 0;position:relative;}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--cyan);
      font-weight:900;
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
    .section-kicker::before{content:"";width:24px;height:2px;background:var(--gradient);border-radius:99px;}
    .section-title{font-size:clamp(28px,4vw,46px);line-height:1.12;font-weight:950;margin:0 0 16px;letter-spacing:-.04em;}
    .section-desc{max-width:760px;color:var(--muted);font-size:17px;margin:0 0 30px;}
    .hero{padding:64px 0 70px;}
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(115deg,rgba(31,31,39,.98),rgba(18,18,23,.98) 46%,rgba(38,242,218,.08)),
        radial-gradient(circle at 75% 30%,rgba(255,79,216,.18),transparent 28%);
      box-shadow:var(--shadow);
      padding:42px;
    }
    .hero-panel::before{
      content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(90deg,rgba(0,0,0,.55),transparent 78%);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center;}
    .hero h1{font-size:clamp(38px,6vw,70px);line-height:.98;font-weight:1000;letter-spacing:-.06em;margin:10px 0 22px;}
    .text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
    .hero-intro{font-size:18px;color:#d7d9e2;max-width:660px;margin:0 0 26px;}
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 28px;}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:48px;padding:13px 20px;border-radius:999px;
      font-weight:950;letter-spacing:.01em;border:1px solid transparent;
      transition:var(--ease);line-height:1.1;
    }
    .btn-primary{background:var(--gradient);color:#0d0d12;box-shadow:0 14px 34px rgba(255,79,216,.18);}
    .btn-primary:hover{color:#0d0d12;transform:translateY(-3px);box-shadow:0 18px 44px rgba(38,242,218,.25);}
    .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#fff;}
    .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(38,242,218,.46);color:#fff;transform:translateY(-2px);}
    .metric-row{display:flex;flex-wrap:wrap;gap:12px;}
    .metric-pill{
      padding:10px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);color:var(--soft);font-size:13px;font-weight:800;
    }
    .metric-pill strong{color:#fff;margin-right:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}
    .dashboard{
      display:grid;grid-template-columns:1fr;gap:14px;
      padding:18px;border-radius:24px;background:rgba(10,10,14,.58);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:inset 0 0 0 1px rgba(38,242,218,.05);
    }
    .dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 2px 8px;border-bottom:1px solid var(--line);}
    .dash-title{font-weight:950;font-size:18px;}
    .live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:900;font-size:12px;}
    .live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);}
    .rank-item{
      display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
      padding:14px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
    }
    .rank-no{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:var(--gradient);color:#101014;font-weight:1000;}
    .rank-name{font-weight:900;margin-bottom:2px;}
    .rank-meta{font-size:12px;color:var(--muted);}
    .rank-score{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--cyan);font-weight:950;}
    .badge{
      display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
      font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--soft);
    }
    .badge.cyan{color:var(--cyan);border-color:rgba(38,242,218,.32);background:rgba(38,242,218,.08);}
    .badge.pink{color:#ffb5ef;border-color:rgba(255,79,216,.3);background:rgba(255,79,216,.08);}
    .badge.orange{color:#ffd3a1;border-color:rgba(255,159,67,.35);background:rgba(255,159,67,.08);}
    .stair-section{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));}
    .stair-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;}
    .stair-card,.compare-card,.info-card,.news-panel,.limited-panel,.faq-item,.cta-card{
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:var(--shadow-soft);
      transition:var(--ease);
    }
    .stair-card:hover,.compare-card:hover,.info-card:hover,.news-panel:hover{transform:translateY(-5px);border-color:rgba(38,242,218,.25);box-shadow:0 18px 42px rgba(0,0,0,.3);}
    .stair-card{padding:24px;}
    .progress-track{height:14px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin:20px 0 18px;}
    .progress-fill{height:100%;width:72%;background:var(--gradient);border-radius:999px;box-shadow:0 0 18px rgba(38,242,218,.38);}
    .stair-steps{display:grid;gap:12px;margin-top:18px;}
    .step-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);}
    .step-line strong{font-size:15px;}
    .step-line span{color:var(--muted);font-size:13px;text-align:right;}
    .deal-box{padding:24px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(38,242,218,.12),rgba(255,79,216,.1));border:1px solid rgba(38,242,218,.22);}
    .deal-price{font-size:46px;line-height:1;font-weight:1000;letter-spacing:-.06em;margin:10px 0;color:#fff;}
    .deal-price small{font-size:15px;color:var(--muted);font-weight:800;letter-spacing:0;}
    .check-list{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none;}
    .check-list li{display:flex;gap:10px;color:var(--soft);font-size:14px;}
    .check-list li::before{content:"✓";display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:rgba(125,255,155,.12);color:var(--green);font-weight:950;}
    .compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
    .compare-card{padding:24px;position:relative;overflow:hidden;}
    .compare-card.featured{border-color:rgba(255,79,216,.36);background:linear-gradient(180deg,rgba(255,79,216,.13),rgba(255,255,255,.04));}
    .compare-card h3{font-size:22px;font-weight:950;margin:10px 0 8px;}
    .compare-card p{color:var(--muted);margin:0 0 18px;min-height:58px;}
    .feature-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;}
    .feature-list li{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.12);font-size:14px;color:var(--soft);}
    .feature-list b{color:#fff;}
    .guarantee-strip{padding:26px;border-radius:var(--radius-lg);background:#f3f4f7;color:#121216;box-shadow:0 16px 36px rgba(0,0,0,.22);}
    .guarantee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
    .guarantee-item{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(16,16,20,.08);}
    .icon-dot{width:34px;height:34px;flex:0 0 34px;border-radius:13px;background:linear-gradient(135deg,var(--cyan),var(--pink));display:grid;place-items:center;color:#111;font-weight:1000;}
    .guarantee-item strong{display:block;font-weight:950;margin-bottom:4px;}
    .guarantee-item span{display:block;color:#5e606a;font-size:13px;line-height:1.5;}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:start;}
    .news-panel{padding:22px;}
    .news-list{display:grid;gap:12px;margin:0;padding:0;list-style:none;}
    .news-list a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
    .news-list a:hover{transform:translateX(4px);border-color:rgba(38,242,218,.26);background:rgba(38,242,218,.06);}
    .news-title{font-weight:900;color:#fff;}
    .news-desc{font-size:13px;color:var(--muted);margin-top:2px;}
    .news-tag{font-size:12px;color:var(--cyan);font-weight:900;white-space:nowrap;}
    .recommend-grid{display:grid;gap:12px;}
    .recommend-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);}
    .recommend-card strong{display:block;font-size:16px;margin:8px 0 6px;}
    .recommend-card p{margin:0;color:var(--muted);font-size:13px;}
    .limited-section{padding-top:34px;}
    .limited-panel{padding:34px;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(38,242,218,.11),rgba(255,79,216,.14) 58%,rgba(255,159,67,.08));}
    .limited-panel::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(2px);}
    .limited-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
    .timer-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
    .timer-box{min-width:76px;padding:12px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);text-align:center;}
    .timer-box b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:24px;line-height:1;color:#fff;}
    .timer-box span{font-size:12px;color:var(--muted);}
    .faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:start;}
    .faq-list{display:grid;gap:12px;}
    .faq-item{overflow:hidden;}
    .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;background:transparent;color:#fff;text-align:left;font-weight:950;}
    .faq-question span:first-child{display:flex;align-items:center;gap:10px;}
    .faq-num{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(38,242,218,.1);color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;}
    .faq-answer{display:none;padding:0 20px 20px 58px;color:var(--muted);}
    .faq-item.open{background:linear-gradient(135deg,rgba(38,242,218,.08),rgba(255,79,216,.06));border-color:rgba(38,242,218,.22);}
    .faq-item.open .faq-answer{display:block;}
    .faq-icon{transition:var(--ease);color:var(--cyan);}
    .faq-item.open .faq-icon{transform:rotate(45deg);}
    .cta-section{padding-top:26px;}
    .cta-card{padding:38px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#f2f3f6,#ffffff);color:#111217;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
    .cta-card h2{color:#111217;margin:0 0 12px;font-size:clamp(28px,4vw,44px);line-height:1.08;font-weight:1000;letter-spacing:-.04em;}
    .cta-card p{color:#5c5e68;margin:0;max-width:720px;}
    .cta-card .btn-ghost{color:#111217;border-color:rgba(17,18,23,.16);background:#fff;}
    .cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
    .site-footer{padding:58px 0 30px;border-top:1px solid var(--line);background:#0b0b0f;}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:32px;}
    .footer-brand{font-size:22px;font-weight:1000;margin-bottom:12px;}
    .footer-text{color:var(--muted);margin:0;max-width:520px;}
    .footer-title{font-weight:950;margin-bottom:12px;color:#fff;}
    .footer-links{display:grid;gap:9px;}
    .footer-links a{color:var(--muted);font-weight:700;}
    .footer-links a:hover{color:var(--cyan);transform:translateX(3px);}
    .copyright{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#838692;font-size:13px;}
    @media (max-width:1024px){
      .nav-shell{grid-template-columns:auto 1fr auto;min-height:74px;}
      .brand{justify-self:center;}
      .nav-side{display:none;}
      .menu-toggle{display:grid;place-items:center;}
      .mobile-panel.open{display:block;}
      .hero-content,.stair-grid,.news-layout,.faq-grid,.limited-content,.cta-card{grid-template-columns:1fr;}
      .compare-grid{grid-template-columns:1fr 1fr;}
      .guarantee-grid{grid-template-columns:1fr 1fr;}
      .cta-actions{justify-content:flex-start;}
    }
    @media (max-width:768px){
      .container{width:min(calc(100% - 28px),var(--container));}
      section{padding:54px 0;}
      .hero{padding:36px 0 52px;}
      .hero-panel{padding:26px;border-radius:24px;}
      .hero h1{font-size:clamp(34px,12vw,52px);}
      .hero-intro,.section-desc{font-size:16px;}
      .compare-grid,.guarantee-grid,.footer-grid{grid-template-columns:1fr;}
      .news-list a{grid-template-columns:1fr;gap:8px;}
      .faq-answer{padding-left:20px;}
      .brand-text{font-size:15px;max-width:200px;overflow:hidden;text-overflow:ellipsis;}
      .brand-mini{display:none;}
    }
    @media (max-width:520px){
      .hero-actions,.metric-row,.timer-row{display:grid;grid-template-columns:1fr;}
      .btn{width:100%;}
      .rank-item{grid-template-columns:auto 1fr;}
      .rank-score{grid-column:2;}
      .step-line{display:grid;gap:6px;}
      .step-line span{text-align:left;}
      .guarantee-strip{padding:18px;}
      .limited-panel,.cta-card{padding:24px;}
      .copyright{display:grid;}
    }

/* roulang page: category1 */
:root{
      --bg:#101113;
      --bg-2:#16181c;
      --panel:#1d2026;
      --panel-2:#232733;
      --soft:#f3f5f7;
      --text:#f7f8fb;
      --muted:#a8b0bd;
      --muted-2:#747d8c;
      --line:rgba(255,255,255,.12);
      --line-strong:rgba(78,246,255,.38);
      --cyan:#4ef6ff;
      --magenta:#ff4fd8;
      --violet:#9b6cff;
      --orange:#ff9f43;
      --green:#55ef9a;
      --danger:#ff5468;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:12px;
      --shadow:0 22px 60px rgba(0,0,0,.36);
      --shadow-soft:0 14px 38px rgba(0,0,0,.24);
      --grad:linear-gradient(135deg,var(--cyan) 0%,var(--violet) 48%,var(--magenta) 100%);
      --grad-warm:linear-gradient(135deg,var(--orange),var(--magenta));
      --focus:0 0 0 4px rgba(78,246,255,.18);
      --mono:"SFMono-Regular","Consolas","Liberation Mono",monospace;
      --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%,rgba(78,246,255,.16),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(255,79,216,.13),transparent 28%),
        linear-gradient(180deg,#0d0e10 0%,#15171b 48%,#0f1012 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 75%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:color .22s ease,background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
    a:hover,a:focus{color:var(--cyan)}
    button,input{font-family:inherit}
    button{cursor:pointer;border:0}
    img{max-width:100%;display:block}
    .container{
      width:min(1180px,calc(100% - 36px));
      margin:0 auto;
    }
    .section{padding:78px 0}
    .section-tight{padding:52px 0}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--cyan);
      background:rgba(78,246,255,.07);
      font-size:13px;
      font-weight:800;
      letter-spacing:.08em;
      margin-bottom:16px;
    }
    .section-kicker:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 16px rgba(78,246,255,.8);
    }
    .section-title{
      margin:0 0 14px;
      font-size:clamp(28px,4vw,46px);
      line-height:1.08;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .section-desc{
      max-width:760px;
      margin:0;
      color:var(--muted);
      font-size:17px;
    }
    .gradient-text{
      background:var(--grad);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(13,14,16,.82);
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--line);
    }
    .site-header:before{
      content:"";
      display:block;
      height:3px;
      background:var(--grad);
      opacity:.95;
    }
    .nav-shell{
      min-height:78px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:18px;
    }
    .nav-side{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nav-left{justify-content:flex-start}
    .nav-right{justify-content:flex-end}
    .nav-link{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      color:#d8dde7;
      font-size:14px;
      font-weight:800;
      border:1px solid transparent;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:var(--line);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#101113;
      background:var(--cyan);
      box-shadow:0 10px 24px rgba(78,246,255,.18);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:0 18px;
      border-radius:999px;
      color:#fff;
      font-size:14px;
      font-weight:900;
      background:var(--grad);
      box-shadow:0 12px 32px rgba(255,79,216,.22);
    }
    .nav-cta:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(78,246,255,.18),0 16px 38px rgba(255,79,216,.22);
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 16px;
      border:1px solid var(--line);
      border-radius:999px;
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      white-space:nowrap;
    }
    .brand:hover{color:#fff;border-color:var(--line-strong);transform:translateY(-1px)}
    .brand-mark{
      width:18px;
      height:18px;
      border-radius:6px;
      background:var(--grad);
      box-shadow:0 0 20px rgba(78,246,255,.45);
      position:relative;
    }
    .brand-mark:after{
      content:"";
      position:absolute;
      inset:5px;
      border-radius:3px;
      background:#101113;
      opacity:.72;
    }
    .brand-text{
      font-weight:950;
      letter-spacing:-.04em;
      color:#fff;
      font-size:16px;
    }
    .brand-mini{
      font-size:12px;
      font-weight:900;
      color:#101113;
      background:var(--orange);
      border-radius:999px;
      padding:3px 8px;
    }
    .menu-toggle{
      display:none;
      justify-self:end;
      width:44px;
      height:44px;
      border-radius:14px;
      background:rgba(255,255,255,.08);
      color:#fff;
      font-size:22px;
      border:1px solid var(--line);
    }
    .menu-toggle:hover,.menu-toggle:focus{
      border-color:var(--line-strong);
      box-shadow:var(--focus);
      outline:none;
    }
    .mobile-panel{
      display:none;
      padding:0 0 16px;
    }
    .mobile-panel a{
      display:flex;
      align-items:center;
      min-height:46px;
      padding:0 14px;
      margin:7px 0;
      border-radius:14px;
      color:#dbe0e9;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      font-weight:800;
    }
    .mobile-panel a.active{
      color:#101113;
      background:var(--cyan);
    }

    .hero{
      padding:82px 0 58px;
    }
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
        radial-gradient(circle at 18% 18%,rgba(78,246,255,.18),transparent 36%),
        radial-gradient(circle at 86% 22%,rgba(255,79,216,.15),transparent 34%);
      box-shadow:var(--shadow);
      padding:44px;
    }
    .hero-panel:after{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:300px;
      height:300px;
      border-radius:50%;
      border:1px solid rgba(78,246,255,.18);
      box-shadow:0 0 0 34px rgba(255,255,255,.018),0 0 0 72px rgba(255,255,255,.012);
      pointer-events:none;
    }
    .age-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      color:#fff;
      background:rgba(255,159,67,.13);
      border:1px solid rgba(255,159,67,.35);
      font-size:13px;
      font-weight:900;
      margin-bottom:18px;
    }
    .age-chip span{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--orange);
      box-shadow:0 0 18px rgba(255,159,67,.8);
    }
    .hero h1{
      margin:0 auto 18px;
      max-width:920px;
      text-align:center;
      font-size:clamp(38px,7vw,76px);
      line-height:.98;
      font-weight:1000;
      letter-spacing:-.07em;
    }
    .hero-sub{
      max-width:820px;
      margin:0 auto 30px;
      text-align:center;
      color:#c6cedb;
      font-size:18px;
    }
    .search-box{
      max-width:760px;
      margin:0 auto 18px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      border-radius:24px;
      background:rgba(10,11,13,.78);
      border:1px solid rgba(255,255,255,.13);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 42px rgba(0,0,0,.22);
      position:relative;
      z-index:2;
    }
    .search-box input{
      flex:1;
      min-width:0;
      height:52px;
      border:0;
      outline:none;
      color:#fff;
      background:transparent;
      padding:0 14px;
      font-weight:750;
    }
    .search-box input::placeholder{color:#858e9d}
    .search-box input:focus{box-shadow:none}
    .btn-primary,.btn-secondary,.btn-small{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border-radius:999px;
      font-weight:950;
      line-height:1;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
      white-space:nowrap;
    }
    .btn-primary{
      min-height:52px;
      padding:0 23px;
      color:#fff;
      background:var(--grad);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 18px 44px rgba(255,79,216,.22);
    }
    .btn-primary:hover,.btn-primary:focus{
      color:#fff;
      transform:translateY(-3px);
      box-shadow:0 22px 56px rgba(78,246,255,.18),0 18px 46px rgba(255,79,216,.25);
      outline:none;
    }
    .btn-secondary{
      min-height:52px;
      padding:0 22px;
      color:#e9eef8;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      color:#fff;
      border-color:var(--line-strong);
      background:rgba(78,246,255,.08);
      transform:translateY(-2px);
      outline:none;
    }
    .btn-small{
      min-height:42px;
      padding:0 16px;
      color:#0d0e10;
      background:var(--cyan);
      font-size:14px;
      border:1px solid rgba(78,246,255,.65);
    }
    .btn-small:hover,.btn-small:focus{
      color:#0d0e10;
      transform:translateY(-2px);
      box-shadow:0 12px 24px rgba(78,246,255,.22);
      outline:none;
    }
    .quick-links{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
      position:relative;
      z-index:2;
    }
    .quick-link{
      padding:9px 14px;
      border-radius:999px;
      color:#d9dfeb;
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
      font-size:14px;
      font-weight:850;
    }
    .quick-link:hover{
      color:#fff;
      border-color:rgba(78,246,255,.45);
      background:rgba(78,246,255,.08);
      transform:translateY(-2px);
    }
    .hero-stats{
      margin-top:34px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      position:relative;
      z-index:2;
    }
    .stat-tile{
      border:1px solid var(--line);
      border-radius:20px;
      padding:18px;
      background:rgba(10,11,13,.45);
    }
    .stat-value{
      font-family:var(--mono);
      font-size:30px;
      line-height:1;
      font-weight:900;
      color:#fff;
      letter-spacing:-.04em;
    }
    .stat-label{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      font-weight:800;
    }

    .filter-strip{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      padding:16px;
      border-radius:24px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
      margin-top:30px;
    }
    .filter-label{
      color:#fff;
      font-weight:950;
      margin-right:4px;
    }
    .filter-pill{
      display:inline-flex;
      align-items:center;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      color:#c9d0dc;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      font-size:14px;
      font-weight:850;
    }
    .filter-pill.active,.filter-pill:hover{
      color:#101113;
      background:var(--cyan);
      border-color:var(--cyan);
      transform:translateY(-1px);
    }

    .entry-grid{
      margin-top:24px;
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:18px;
    }
    .entry-card{
      grid-column:span 4;
      min-height:280px;
      display:flex;
      flex-direction:column;
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:
        linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),
        var(--panel);
      padding:24px;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .entry-card:before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:3px;
      background:var(--grad);
      opacity:.82;
    }
    .entry-card:hover{
      transform:translateY(-6px);
      border-color:rgba(78,246,255,.36);
      box-shadow:0 26px 58px rgba(0,0,0,.34);
    }
    .entry-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .code-badge{
      font-family:var(--mono);
      color:#101113;
      background:var(--cyan);
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:900;
      height:max-content;
    }
    .level-badge{
      color:#fff;
      background:rgba(255,79,216,.13);
      border:1px solid rgba(255,79,216,.28);
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:900;
      height:max-content;
    }
    .entry-card h3{
      margin:0 0 10px;
      font-size:22px;
      line-height:1.2;
      font-weight:950;
      letter-spacing:-.03em;
    }
    .entry-card p{
      margin:0 0 18px;
      color:var(--muted);
      font-size:15px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
      margin-bottom:18px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:5px 9px;
      color:#cfd6e2;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.1);
      font-size:12px;
      font-weight:850;
    }

    .matrix-wrap{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch;
    }
    .dark-card{
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:var(--shadow-soft);
      padding:28px;
    }
    .matrix-list{
      display:grid;
      gap:14px;
      margin-top:22px;
    }
    .matrix-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.045);
      border:1px solid var(--line);
    }
    .matrix-icon{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#101113;
      background:var(--grad);
      font-weight:1000;
      box-shadow:0 12px 24px rgba(78,246,255,.14);
    }
    .matrix-item strong{
      display:block;
      color:#fff;
      font-size:16px;
      line-height:1.25;
      margin-bottom:3px;
    }
    .matrix-item span{
      color:var(--muted);
      font-size:13px;
    }
    .matrix-score{
      font-family:var(--mono);
      color:var(--cyan);
      font-weight:900;
      font-size:18px;
    }
    .signal-card{
      border-radius:var(--radius-lg);
      border:1px solid rgba(78,246,255,.22);
      background:
        radial-gradient(circle at 20% 18%,rgba(78,246,255,.17),transparent 35%),
        radial-gradient(circle at 86% 82%,rgba(255,79,216,.14),transparent 38%),
        #171a20;
      padding:28px;
      box-shadow:var(--shadow-soft);
    }
    .signal-card h3{
      margin:0 0 14px;
      font-size:28px;
      line-height:1.12;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .signal-card p{color:#c2cad7;margin:0 0 24px}
    .signal-bars{display:grid;gap:12px}
    .signal-row{
      display:grid;
      grid-template-columns:90px 1fr 46px;
      gap:12px;
      align-items:center;
      color:#e8edf5;
      font-size:13px;
      font-weight:850;
    }
    .bar{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .bar span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:var(--grad);
    }

    .membership-band{
      border-radius:32px;
      overflow:hidden;
      border:1px solid var(--line);
      background:#f4f6f8;
      color:#121417;
      box-shadow:var(--shadow);
    }
    .membership-head{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:flex-end;
      padding:32px;
      background:
        radial-gradient(circle at 10% 12%,rgba(78,246,255,.2),transparent 30%),
        linear-gradient(135deg,#ffffff,#e9edf2);
    }
    .membership-head h2{
      margin:0 0 8px;
      font-size:clamp(26px,4vw,42px);
      line-height:1.1;
      font-weight:1000;
      letter-spacing:-.05em;
    }
    .membership-head p{
      margin:0;
      color:#5f6875;
      max-width:700px;
    }
    .discount-chip{
      background:#121417;
      color:#fff;
      border-radius:999px;
      padding:10px 14px;
      font-weight:950;
      white-space:nowrap;
    }
    .plan-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1px;
      background:#dce1e8;
    }
    .plan{
      background:#fff;
      padding:26px;
      min-height:245px;
      display:flex;
      flex-direction:column;
    }
    .plan.featured{
      background:#111318;
      color:#fff;
      position:relative;
    }
    .plan.featured:before{
      content:"优先";
      position:absolute;
      right:18px;
      top:18px;
      color:#101113;
      background:var(--cyan);
      border-radius:999px;
      padding:5px 10px;
      font-size:12px;
      font-weight:1000;
    }
    .plan h3{
      margin:0 0 8px;
      font-size:24px;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .plan p{
      color:#687281;
      margin:0 0 18px;
      font-size:14px;
    }
    .plan.featured p{color:#b7bfcc}
    .plan ul{
      list-style:none;
      padding:0;
      margin:0 0 22px;
      display:grid;
      gap:9px;
      color:#2d333b;
      font-size:14px;
      font-weight:750;
    }
    .plan.featured ul{color:#e7edf7}
    .plan li:before{
      content:"✓";
      margin-right:8px;
      color:var(--green);
      font-weight:1000;
    }
    .plan .btn-small{margin-top:auto;width:max-content}

    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:28px;
    }
    .step-card{
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .step-card:hover{
      transform:translateY(-5px);
      border-color:rgba(78,246,255,.32);
      background:rgba(255,255,255,.065);
    }
    .step-num{
      font-family:var(--mono);
      color:#101113;
      background:var(--grad);
      width:40px;
      height:40px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:1000;
      margin-bottom:16px;
    }
    .step-card h3{
      margin:0 0 8px;
      font-size:18px;
      font-weight:950;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .faq-layout{
      display:grid;
      grid-template-columns:.78fr 1.22fr;
      gap:24px;
      align-items:start;
    }
    .faq-note{
      position:sticky;
      top:110px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,159,67,.28);
      background:linear-gradient(180deg,rgba(255,159,67,.12),rgba(255,255,255,.035));
      padding:26px;
    }
    .faq-note h2{
      margin:0 0 12px;
      font-size:34px;
      line-height:1.08;
      font-weight:1000;
      letter-spacing:-.04em;
    }
    .faq-note p{margin:0;color:#c5ccd8}
    .accordion{
      background:transparent;
      border:0;
    }
    .accordion-item{
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:20px !important;
      background:rgba(255,255,255,.045);
      margin-bottom:12px;
    }
    .accordion-title{
      display:flex;
      align-items:center;
      gap:12px;
      border:0 !important;
      color:#fff !important;
      background:transparent !important;
      font-size:16px;
      font-weight:950;
      padding:20px 54px 20px 20px;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:rgba(78,246,255,.06) !important;
      outline:none;
    }
    .accordion-title:before{
      color:var(--cyan);
      font-size:20px;
      right:20px;
      margin-top:-10px;
    }
    .faq-index{
      flex:0 0 auto;
      width:30px;
      height:30px;
      border-radius:11px;
      display:grid;
      place-items:center;
      color:#101113;
      background:var(--cyan);
      font-family:var(--mono);
      font-size:12px;
      font-weight:1000;
    }
    .accordion-content{
      border:0 !important;
      color:#c6cedb;
      background:linear-gradient(180deg,rgba(78,246,255,.07),rgba(255,255,255,.025)) !important;
      padding:0 22px 22px 62px;
    }

    .cta-panel{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:24px;
      align-items:center;
      border-radius:32px;
      border:1px solid rgba(78,246,255,.24);
      padding:34px;
      background:
        radial-gradient(circle at 12% 20%,rgba(78,246,255,.18),transparent 34%),
        radial-gradient(circle at 84% 72%,rgba(255,79,216,.16),transparent 36%),
        linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
      box-shadow:var(--shadow);
    }
    .cta-panel h2{
      margin:0 0 12px;
      font-size:clamp(28px,4vw,48px);
      line-height:1.05;
      font-weight:1000;
      letter-spacing:-.05em;
    }
    .cta-panel p{
      margin:0;
      color:#c8d0dd;
      max-width:680px;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    .trust-row{
      margin-top:20px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .trust-badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 11px;
      border-radius:999px;
      color:#dce3ee;
      background:rgba(255,255,255,.055);
      border:1px solid var(--line);
      font-size:13px;
      font-weight:850;
    }
    .trust-badge:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 14px rgba(85,239,154,.65);
    }

    .site-footer{
      border-top:1px solid var(--line);
      background:#0b0c0e;
      padding:54px 0 26px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr 1fr 1fr;
      gap:34px;
    }
    .footer-brand{
      font-size:20px;
      font-weight:1000;
      color:#fff;
      letter-spacing:-.04em;
      margin-bottom:10px;
    }
    .footer-text{
      margin:0;
      color:var(--muted);
      max-width:520px;
      font-size:14px;
    }
    .footer-title{
      color:#fff;
      font-weight:950;
      margin-bottom:12px;
    }
    .footer-links{
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:#aeb6c4;
      font-size:14px;
      width:max-content;
    }
    .footer-links a:hover{
      color:var(--cyan);
      transform:translateX(3px);
    }
    .copyright{
      margin-top:34px;
      padding-top:20px;
      border-top:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:#788292;
      font-size:13px;
    }

    @media (max-width:1024px){
      .nav-shell{
        grid-template-columns:1fr auto;
      }
      .nav-side{display:none}
      .brand{justify-self:start}
      .menu-toggle{display:block}
      .mobile-panel.open{display:block}
      .hero-panel{padding:34px}
      .hero-stats{grid-template-columns:repeat(2,1fr)}
      .entry-card{grid-column:span 6}
      .matrix-wrap,.faq-layout,.cta-panel{grid-template-columns:1fr}
      .faq-note{position:static}
      .cta-actions{justify-content:flex-start}
      .steps{grid-template-columns:repeat(2,1fr)}
      .plan-grid{grid-template-columns:1fr}
      .membership-head{align-items:flex-start;flex-direction:column}
    }

    @media (max-width:768px){
      .container{width:min(100% - 24px,1180px)}
      .section{padding:58px 0}
      .section-tight{padding:42px 0}
      .brand{
        padding:9px 12px;
        max-width:calc(100vw - 92px);
      }
      .brand-text{
        max-width:190px;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .brand-mini{display:none}
      .hero{padding:46px 0 34px}
      .hero-panel{
        padding:26px 18px;
        border-radius:24px;
      }
      .hero h1{text-align:left}
      .hero-sub{text-align:left;font-size:16px}
      .search-box{
        flex-direction:column;
        align-items:stretch;
        border-radius:20px;
      }
      .search-box input{height:48px}
      .search-box .btn-primary{width:100%}
      .quick-links{justify-content:flex-start}
      .hero-stats{grid-template-columns:1fr}
      .entry-grid{grid-template-columns:1fr}
      .entry-card{grid-column:span 1;min-height:auto}
      .filter-strip{border-radius:20px;align-items:flex-start}
      .matrix-item{
        grid-template-columns:auto 1fr;
      }
      .matrix-score{
        grid-column:2;
      }
      .steps{grid-template-columns:1fr}
      .membership-head,.dark-card,.signal-card,.cta-panel{padding:22px}
      .footer-grid{grid-template-columns:1fr}
      .copyright{flex-direction:column}
      .accordion-content{padding:0 18px 20px 18px}
      .accordion-title{padding:18px 48px 18px 16px}
    }

    @media (max-width:520px){
      .stat-value{font-size:25px}
      .section-title{font-size:30px}
      .hero h1{font-size:38px}
      .btn-primary,.btn-secondary{width:100%}
      .cta-actions{width:100%}
      .quick-link,.filter-pill{font-size:13px}
    }

/* roulang page: category2 */
:root{--bg:#0b0f14;--bg2:#11161d;--panel:#131a23;--panel2:#171f2a;--text:#edf2f7;--muted:#9aa7b6;--soft:#c8d1dc;--line:rgba(255,255,255,.08);--brand1:#31e6d3;--brand2:#c15cff;--brand3:#ff8b4c;--accent:#75a7ff;--shadow:0 18px 40px rgba(0,0,0,.28);--shadow2:0 10px 24px rgba(0,0,0,.22);--radius:22px;--radius-sm:16px;--radius-xs:12px;--space:clamp(18px,2.2vw,28px);--space-lg:clamp(28px,4vw,54px);--container:1180px;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Inter","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,rgba(49,230,211,.14),transparent 25%),radial-gradient(circle at top right,rgba(193,92,255,.12),transparent 28%),linear-gradient(180deg,#091019 0%,#0b0f14 42%,#0d1218 100%);color:var(--text);line-height:1.7;overflow-x:hidden}a{color:inherit;text-decoration:none;transition:.22s ease}img{max-width:100%;display:block}button,input,textarea{font:inherit}::selection{background:rgba(49,230,211,.28);color:#fff}
.container{max-width:var(--container);padding-left:1rem;padding-right:1rem}.section{padding:var(--space-lg) 0}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border:1px solid rgba(49,230,211,.25);border-radius:999px;background:rgba(49,230,211,.08);color:#dffef8;font-size:.86rem;letter-spacing:.04em}.eyebrow::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 0 0 4px rgba(49,230,211,.12)}
.soft-title{font-size:clamp(1.7rem,3vw,2.65rem);line-height:1.08;font-weight:900;letter-spacing:-.03em;margin:0} .section-lead{margin:.8rem 0 0;color:var(--muted);max-width:72ch}.panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow2);backdrop-filter:blur(10px)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,12,18,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.site-header::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--brand1),var(--brand2),var(--brand3))}.nav-shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem 0}.nav-side{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}.brand{display:inline-flex;align-items:center;gap:.7rem;justify-self:center;padding:.2rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 10px 26px rgba(0,0,0,.15)}.brand-mark{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 0 0 6px rgba(49,230,211,.08),0 0 24px rgba(193,92,255,.22)}.brand-text{font-weight:900;letter-spacing:-.03em}.brand-mini{padding:.2rem .55rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--soft);font-size:.75rem}.nav-link,.nav-cta,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.5rem .95rem;border-radius:999px;border:1px solid transparent;font-weight:600;letter-spacing:.01em}.nav-link{color:var(--soft);background:transparent}.nav-link:hover,.nav-link:focus-visible{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.08)}.nav-link.active{background:rgba(49,230,211,.12);color:#eafffb;border-color:rgba(49,230,211,.22)}.nav-cta{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#081018;box-shadow:0 12px 28px rgba(49,230,211,.18)}.nav-cta:hover,.nav-cta:focus-visible{transform:translateY(-1px);filter:brightness(1.05)}.menu-toggle{display:none;background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.08)}.mobile-panel{display:none;padding:0 0 1rem}.mobile-panel a{display:block;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.06);color:var(--soft)}.mobile-panel a.active{color:#fff}.mobile-panel a:last-child{padding-bottom:0}
.hero-wrap{padding:clamp(1.2rem,3vw,2.5rem) 0 var(--space-lg)}.hero-shell{display:grid;grid-template-columns:1.15fr .95fr;gap:var(--space-lg);align-items:stretch}.hero-copy{padding:clamp(1.4rem,2.4vw,2.2rem);min-height:100%;display:flex;flex-direction:column;justify-content:center}.hero-copy h1{margin:1rem 0 .9rem;font-size:clamp(2.15rem,4.8vw,4.35rem);line-height:1.02;letter-spacing:-.04em;font-weight:900}.hero-copy p{margin:0;color:var(--muted);max-width:54ch;font-size:1.02rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}.btnx{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.8rem 1.15rem;border-radius:14px;border:1px solid transparent;font-weight:800;letter-spacing:.01em;cursor:pointer}.btn-primaryx{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#081018;box-shadow:0 14px 30px rgba(49,230,211,.16)}.btn-primaryx:hover,.btn-primaryx:focus-visible{transform:translateY(-2px);box-shadow:0 18px 36px rgba(49,230,211,.24)}.btn-outlinex{background:rgba(255,255,255,.03);color:#f3f7fb;border-color:rgba(255,255,255,.12)}.btn-outlinex:hover,.btn-outlinex:focus-visible{border-color:rgba(49,230,211,.32);color:#fff;transform:translateY(-2px)}
.hero-visual{padding:1rem}.visual-board{height:100%;display:grid;grid-template-rows:auto 1fr;gap:1rem;padding:1.2rem}.visual-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .75rem;border-radius:999px;background:rgba(49,230,211,.08);border:1px solid rgba(49,230,211,.18);color:#dbfffb;font-size:.85rem}.status-pill .dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--brand1);box-shadow:0 0 0 5px rgba(49,230,211,.12)}.mini-metric{display:flex;align-items:baseline;gap:.4rem}.mini-metric strong{font-size:1.45rem;line-height:1;font-weight:900}.mini-metric span{font-size:.84rem;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;height:100%}.preview-card{padding:1rem;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between;min-height:140px}.preview-card.big{grid-row:span 2;min-height:100%}.preview-card h3,.preview-card h4{margin:0;font-weight:800;line-height:1.15}.preview-card p{margin:.5rem 0 0;color:var(--muted);font-size:.94rem}.badge-row{display:flex;flex-wrap:wrap;gap:.45rem}.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .62rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#e7edf4;font-size:.78rem}.chip strong{color:#fff}
.stats-strip{margin-top:1rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stat-card{padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.stat-card .num{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--brand1),var(--brand2));-webkit-background-clip:text;color:transparent}.stat-card .lab{display:block;color:var(--muted);font-size:.86rem;margin-top:.15rem}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.feature-card{padding:1.1rem;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid var(--line);box-shadow:var(--shadow2);height:100%}.feature-card:hover{transform:translateY(-4px);border-color:rgba(49,230,211,.22)}.feature-card h3{margin:0 .0 .55rem;font-size:1.02rem}.feature-card p{margin:0;color:var(--muted);font-size:.95rem}.feature-card .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(49,230,211,.18),rgba(193,92,255,.16));border:1px solid rgba(255,255,255,.08);margin-bottom:.9rem}
.layout-two{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space);align-items:start}.table-panel{padding:1.15rem;overflow:hidden}.table-panel h2,.listing-panel h2,.faq-panel h2,.cta-panel h2{margin:0;font-size:1.5rem;line-height:1.15}.table-panel p.lead{margin:.55rem 0 1rem;color:var(--muted)}.compare-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px}.compare-table th,.compare-table td{padding:.95rem .85rem;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}.compare-table th{color:#eef4fb;font-size:.92rem;text-align:left;background:rgba(255,255,255,.03)}.compare-table td{color:var(--soft)}.compare-table tr:last-child td{border-bottom:none}.tag{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;background:rgba(49,230,211,.1);border:1px solid rgba(49,230,211,.15);color:#defcf7;font-size:.76rem;margin:.15rem .3rem .15rem 0}.check{color:#92ffea;font-weight:700}.dash{color:#7d8a98}
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.level-card{padding:1.1rem;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line)}.level-card h3{margin:.5rem 0 .4rem;font-size:1.04rem}.level-card p{margin:0;color:var(--muted)}.level-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.level-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:1rem}.level-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand1),var(--brand2),var(--brand3))}
.stack-panel{padding:1.15rem}.stack-panel .sub{margin:.5rem 0 0;color:var(--muted)}.stack-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.8rem}.stack-list li{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.stack-list .num{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(49,230,211,.18),rgba(193,92,255,.14));border:1px solid rgba(255,255,255,.08);font-weight:800;color:#effafe}.stack-list strong{display:block;margin-bottom:.1rem}.stack-list span{color:var(--muted);font-size:.92rem}
.matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.matrix-card{padding:1rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}.matrix-card h3{margin:0 0 .55rem}.matrix-card p{margin:0;color:var(--muted)}.matrix-lines{display:grid;gap:.6rem;margin-top:.9rem}.matrix-line{display:flex;justify-content:space-between;gap:1rem;padding:.65rem .75rem;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#dfe7ef;font-size:.94rem}.matrix-line b{color:#fff}
.faq-panel{padding:1.15rem}.accordion{margin-top:1rem;background:transparent;border:0}.accordion-item{margin-bottom:.8rem;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035)}.accordion-title{font-weight:800;color:#f4f8fb;background:transparent;padding:1rem 1.1rem}.accordion-title::before{color:#8df3e3;font-size:1.05rem}.accordion-content{color:var(--muted);padding:0 1.1rem 1rem;background:linear-gradient(180deg,rgba(49,230,211,.05),rgba(255,255,255,0))}.accordion-content p{margin:0}.cta-panel{padding:1.2rem}.cta-panel .cta-grid{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}.cta-panel .cta-copy p{margin:.6rem 0 0;color:var(--muted)}.cta-stack{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}.trust-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.trust{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#dce5ee;font-size:.82rem}
.search-bar{display:flex;gap:.65rem;padding:.85rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.search-bar input{flex:1;min-width:0;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(7,10,14,.56);color:#fff}.search-bar input::placeholder{color:#7e8a97}.search-bar input:focus{outline:none;border-color:rgba(49,230,211,.36);box-shadow:0 0 0 4px rgba(49,230,211,.08)}.search-bar .btnx{flex:none}
.site-footer{padding:var(--space-lg) 0 1.2rem;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.07);margin-top:var(--space-lg)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:1.2rem}.footer-brand{font-size:1.12rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.6rem}.footer-title{font-weight:800;margin-bottom:.65rem}.footer-text{margin:0;color:var(--muted);max-width:30ch}.footer-links{display:grid;gap:.55rem}.footer-links a{color:var(--soft)}.footer-links a:hover,.footer-links a:focus-visible{color:#fff}.copyright{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.9rem}
@media (max-width: 1024px){.hero-shell,.layout-two{grid-template-columns:1fr}.feature-grid,.level-grid,.matrix,.footer-grid,.stats-strip{grid-template-columns:repeat(2,1fr)}.preview-card.big{grid-row:auto;min-height:180px}.nav-shell{grid-template-columns:1fr auto}.nav-side,.nav-right{display:none}.menu-toggle{display:inline-flex;justify-self:end}.brand{justify-self:start}.mobile-panel.is-open{display:block}.hero-copy h1{max-width:12ch}}
@media (max-width: 768px){.feature-grid,.level-grid,.matrix,.footer-grid,.stats-strip,.preview-grid{grid-template-columns:1fr}.hero-copy,.hero-visual,.table-panel,.listing-panel,.faq-panel,.cta-panel,.stack-panel{padding:1rem}.hero-copy h1{font-size:clamp(2rem,9vw,3.1rem)}.soft-title{font-size:1.7rem}.cta-panel .cta-grid{grid-template-columns:1fr}.search-bar{flex-direction:column}.search-bar .btnx{width:100%}.copyright{flex-direction:column;align-items:flex-start}}
@media (max-width: 520px){.container{padding-left:.8rem;padding-right:.8rem}.brand-text{font-size:.96rem}.brand-mini{display:none}.hero-actions,.cta-stack{flex-direction:column}.btnx,.nav-cta,.nav-link{width:100%}.compare-table th,.compare-table td{padding:.8rem .65rem}.compare-table{display:block;overflow-x:auto}.status-pill{font-size:.8rem}.mini-metric strong{font-size:1.2rem}}