/* roulang page: index */
:root{
      --bg:#08070c;
      --bg-2:#110d16;
      --panel:#17141d;
      --panel-2:#211622;
      --panel-3:#141016;
      --text:#f4f1f7;
      --muted:#b9b2c3;
      --subtle:#8d859b;
      --line:rgba(255,255,255,.12);
      --hot:#ff2f86;
      --orange:#ff8a1f;
      --violet:#8f4dff;
      --green:#c8ff3d;
      --cyan:#46f4ff;
      --radius:28px;
      --radius-sm:18px;
      --shadow:0 24px 80px rgba(255,47,134,.18);
      --shadow-soft:0 18px 60px rgba(0,0,0,.36);
      --max:1220px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 16% 8%, rgba(255,47,134,.22), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(143,77,255,.2), transparent 28%),
        radial-gradient(circle at 65% 78%, rgba(255,138,31,.12), transparent 30%),
        linear-gradient(180deg,#08070c 0%,#100b13 46%,#07060a 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:54px 54px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    .site-container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
    .skip-link{position:absolute;left:-999px;top:10px;background:#fff;color:#000;padding:10px 14px;border-radius:12px;z-index:999}
    .skip-link:focus{left:12px}
    .site-header{
      position:sticky;top:0;z-index:80;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(8,7,12,.72);
      backdrop-filter:blur(18px);
      transition:background .25s ease, box-shadow .25s ease;
    }
    .site-header.scrolled{background:rgba(8,7,12,.94);box-shadow:0 18px 50px rgba(0,0,0,.42)}
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
    .brand-mark{
      width:42px;height:42px;border-radius:15px;
      background:linear-gradient(135deg,var(--hot),var(--orange));
      position:relative;box-shadow:0 0 34px rgba(255,47,134,.42);
    }
    .brand-mark::before,.brand-mark::after{content:"";position:absolute;border-radius:10px;background:rgba(255,255,255,.28)}
    .brand-mark::before{width:22px;height:12px;left:10px;top:9px;transform:skewX(-18deg)}
    .brand-mark::after{width:16px;height:16px;right:8px;bottom:8px;background:rgba(200,255,61,.9)}
    .brand-name{font-weight:900;letter-spacing:-.03em;font-size:18px}
    .desktop-nav{display:flex;align-items:center;gap:4px}
    .nav-link{
      position:relative;
      padding:10px 12px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
      transition:.2s ease;
    }
    .nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.08)}
    .nav-link.active::after{
      content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
      width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green);
    }
    .nav-actions{display:flex;align-items:center;gap:10px}
    .mega{position:relative}
    .mega-btn{
      display:flex;align-items:center;gap:8px;
      color:#fff;background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;padding:10px 14px;font-size:14px;font-weight:800;
      transition:.2s ease;
    }
    .mega-btn:hover,.mega.open .mega-btn{border-color:rgba(255,47,134,.55);background:rgba(255,47,134,.14)}
    .mega-panel{
      position:absolute;right:0;top:calc(100% + 14px);
      width:min(860px,calc(100vw - 40px));
      background:linear-gradient(145deg,rgba(23,20,29,.98),rgba(34,17,30,.98));
      border:1px solid rgba(255,255,255,.12);
      border-radius:26px;padding:18px;
      box-shadow:var(--shadow-soft);
      opacity:0;visibility:hidden;transform:translateY(10px);
      transition:.22s ease;
    }
    .mega:hover .mega-panel,.mega.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
    .mega-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px}
    .mega-card{
      min-height:132px;padding:18px;border-radius:20px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.1);
      transition:.2s ease;
    }
    .mega-card:hover{transform:translateY(-3px);border-color:rgba(200,255,61,.55);background:rgba(255,255,255,.08)}
    .mega-card strong{display:block;font-size:16px;margin-bottom:8px}
    .mega-card span{display:block;color:var(--muted);font-size:13px;line-height:1.65}
    .mobile-toggle{display:none;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff}
    .mobile-menu{
      display:none;
      position:fixed;inset:76px 12px auto 12px;
      background:rgba(17,13,22,.98);
      border:1px solid rgba(255,255,255,.12);
      border-radius:24px;padding:16px;z-index:90;box-shadow:var(--shadow-soft)
    }
    .mobile-menu.open{display:block}
    .mobile-menu a{display:block;padding:13px 14px;border-radius:16px;color:var(--muted);font-weight:800}
    .mobile-menu a:hover,.mobile-menu a.active{background:rgba(255,47,134,.12);color:#fff}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      border-radius:999px;padding:12px 18px;
      font-weight:900;letter-spacing:-.01em;
      transition:transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
      outline:none;
    }
    .btn:focus-visible,.nav-link:focus-visible,.faq-q:focus-visible{box-shadow:0 0 0 4px rgba(200,255,61,.28)}
    .btn-primary{
      color:#fff;background:linear-gradient(135deg,var(--hot),var(--orange));
      box-shadow:0 14px 34px rgba(255,47,134,.28);
    }
    .btn-primary:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.08)}
    .btn-secondary{
      color:#fff;background:rgba(255,255,255,.06);
      border:1px solid rgba(255,47,134,.48);
    }
    .btn-secondary:hover{background:rgba(255,47,134,.15);transform:translateY(-2px)}
    .btn-ghost{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
    .btn-ghost:hover{border-color:rgba(200,255,61,.55);background:rgba(200,255,61,.1)}
    .section{padding:92px 0;position:relative}
    .section-title{font-size:clamp(28px,4vw,42px);line-height:1.15;font-weight:900;letter-spacing:-.045em;margin:0}
    .section-desc{color:var(--muted);font-size:17px;line-height:1.85;margin-top:14px;max-width:760px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;
      background:rgba(255,47,134,.12);border:1px solid rgba(255,47,134,.35);
      color:#ffd8e8;font-weight:900;font-size:13px;
    }
    .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
    .hero{
      padding:70px 0 82px;
      min-height:calc(100vh - 76px);
      display:flex;align-items:center;
    }
    .hero-stage{
      position:relative;
      border-radius:36px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(115deg,rgba(255,47,134,.18),transparent 38%),
        linear-gradient(145deg,rgba(32,18,33,.95),rgba(10,8,14,.95));
      box-shadow:var(--shadow);
      padding:34px;
      isolation:isolate;
    }
    .hero-stage::before{
      content:"";
      position:absolute;inset:-2px;
      background:linear-gradient(120deg,transparent 0 10%,rgba(255,47,134,.3) 10% 12%,transparent 12% 62%,rgba(200,255,61,.22) 62% 64%,transparent 64%);
      opacity:.7;z-index:-1;
    }
    .hero-top{
      display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:stretch;
    }
    .hero-copy{padding:34px 18px 20px}
    h1{
      font-size:clamp(34px,6vw,64px);
      line-height:1.08;
      font-weight:950;
      letter-spacing:-.065em;
      margin:18px 0 18px;
      max-width:900px;
    }
    .hero-desc{font-size:18px;color:#ded8e6;max-width:850px;line-height:1.85;margin:0 0 26px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
    .hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;max-width:760px}
    .metric{
      border-radius:20px;padding:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
    }
    .metric b{display:block;font-size:24px;line-height:1;color:#fff}
    .metric span{display:block;color:var(--muted);font-size:13px;margin-top:7px}
    .recommend-card{
      position:relative;padding:22px;border-radius:30px;
      background:linear-gradient(180deg,rgba(255,47,134,.26),rgba(255,255,255,.06));
      border:1px solid rgba(255,47,134,.46);
      box-shadow:0 24px 54px rgba(255,47,134,.2);
      overflow:hidden;
    }
    .recommend-card::after{
      content:"";
      position:absolute;right:-42px;top:-42px;width:140px;height:140px;border-radius:50%;
      background:rgba(200,255,61,.22);filter:blur(8px)
    }
    .rec-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--green);color:#111;font-weight:950;font-size:12px}
    .recommend-card h2{font-size:26px;line-height:1.18;margin:16px 0 10px;font-weight:950;letter-spacing:-.04em}
    .recommend-card p{color:#efeaf5;font-size:15px}
    .rec-list{display:grid;gap:10px;margin:20px 0}
    .rec-list li{list-style:none;display:flex;gap:10px;color:#f3edf7;font-size:14px}
    .rec-list li::before{content:"✓";color:var(--green);font-weight:900}
    .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 13px;border-radius:999px;
      color:#f3edf7;background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);
      font-weight:800;font-size:13px;
      transition:.2s ease;
    }
    .chip:hover{transform:translateY(-2px);border-color:rgba(200,255,61,.5);background:rgba(200,255,61,.09)}
    .band{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-block:1px solid rgba(255,255,255,.08)}
    .comparison-wrap{
      margin-top:32px;
      display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start;
    }
    .compare-table{
      width:100%;
      border-collapse:separate;border-spacing:0;
      overflow:hidden;border-radius:26px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(17,13,22,.72);
    }
    .compare-table th,.compare-table td{padding:18px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
    .compare-table th{color:#fff;background:rgba(255,47,134,.14);font-size:14px}
    .compare-table td{color:var(--muted);font-size:14px}
    .compare-table tr:last-child td{border-bottom:0}
    .highlight-col{color:#fff!important;background:rgba(200,255,61,.055)}
    .side-stack{display:grid;gap:14px}
    .mini-card,.content-card,.tier-card,.step-card,.proof-card{
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
      border:1px solid rgba(255,255,255,.11);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease,border-color .22s ease,background .22s ease;
    }
    .mini-card:hover,.content-card:hover,.tier-card:hover,.step-card:hover,.proof-card:hover{
      transform:translateY(-5px);
      border-color:rgba(255,47,134,.46);
      background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
    }
    .mini-card{padding:22px}
    .mini-card strong{font-size:20px;display:block;margin-bottom:8px}
    .mini-card p{color:var(--muted);font-size:14px;margin:0}
    .feature-flow{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:start;margin-top:34px}
    .vertical-title{position:sticky;top:104px}
    .card-flow{columns:2 280px;column-gap:18px}
    .content-card{break-inside:avoid;padding:22px;margin:0 0 18px;min-height:210px}
    .content-card.tall{min-height:280px}
    .card-icon{
      width:48px;height:48px;border-radius:17px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,rgba(255,47,134,.9),rgba(143,77,255,.9));
      box-shadow:0 14px 30px rgba(143,77,255,.24);
      font-weight:950;
    }
    .content-card h3,.tier-card h3,.step-card h3,.proof-card h3{font-size:20px;line-height:1.25;margin:16px 0 10px;font-weight:950;letter-spacing:-.03em}
    .content-card p,.tier-card p,.step-card p,.proof-card p{color:var(--muted);font-size:15px;margin:0}
    .tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,138,31,.15);border:1px solid rgba(255,138,31,.36);color:#ffd8b2;font-size:12px;font-weight:900}
    .demo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}
    .step-card{padding:24px;position:relative;overflow:hidden}
    .step-no{font-size:44px;line-height:1;font-weight:950;color:rgba(255,255,255,.12);position:absolute;right:18px;top:16px}
    .proof-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:34px}
    .info-list{
      border-radius:30px;background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.11);overflow:hidden
    }
    .info-item{
      display:grid;grid-template-columns:130px 1fr auto;gap:16px;align-items:center;
      padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08);
      transition:.2s ease;
    }
    .info-item:last-child{border-bottom:0}
    .info-item:hover{background:rgba(255,47,134,.08)}
    .info-item time{color:var(--green);font-weight:950;font-size:13px}
    .info-item a{font-weight:900;color:#fff}
    .info-item p{margin:3px 0 0;color:var(--muted);font-size:14px}
    .arrow{color:var(--subtle);font-weight:950}
    .proof-card{padding:24px}
    .proof-card.accent{background:linear-gradient(135deg,rgba(255,47,134,.22),rgba(200,255,61,.08))}
    .tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
    .tier-card{padding:26px;position:relative}
    .tier-card.recommended{border-color:rgba(200,255,61,.55);transform:translateY(-10px);box-shadow:0 26px 80px rgba(200,255,61,.12)}
    .tier-card .price{font-size:34px;font-weight:950;letter-spacing:-.04em;margin:18px 0;color:#fff}
    .tier-card .price span{font-size:14px;color:var(--muted);font-weight:700}
    .check-list{display:grid;gap:12px;margin:20px 0 24px;padding:0}
    .check-list li{list-style:none;display:flex;gap:10px;color:#dcd5e5;font-size:14px}
    .check-list li::before{content:"●";font-size:10px;color:var(--hot);margin-top:4px}
    .cta-panel{
      border-radius:36px;padding:38px;
      background:
        linear-gradient(115deg,rgba(255,47,134,.24),transparent 36%),
        linear-gradient(135deg,rgba(143,77,255,.22),rgba(255,138,31,.15));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
      display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
    }
    .cta-panel h2{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:0;font-weight:950;letter-spacing:-.05em}
    .cta-panel p{color:#eee7f4;max-width:720px;margin:14px 0 0}
    .faq-wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;margin-top:34px}
    .faq-list{display:grid;gap:12px}
    .faq-item{
      border-radius:22px;background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.1);overflow:hidden;
      transition:.2s ease;
    }
    .faq-item.active{border-color:rgba(255,47,134,.5);background:rgba(255,47,134,.08)}
    .faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:19px 20px;background:transparent;color:#fff;text-align:left;font-weight:950;
    }
    .faq-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);transition:.2s ease;flex:0 0 auto}
    .faq-item.active .faq-icon{transform:rotate(45deg);background:var(--hot)}
    .faq-a{display:none;padding:0 20px 20px;color:var(--muted);font-size:15px}
    .faq-item.active .faq-a{display:block}
    .floating-cta{
      position:fixed;right:22px;bottom:22px;z-index:70;
      display:flex;align-items:center;gap:10px;
      padding:10px;border-radius:999px;
      background:rgba(17,13,22,.92);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 18px 60px rgba(0,0,0,.42);
      backdrop-filter:blur(14px);
    }
    .floating-cta span{color:var(--muted);font-size:13px;font-weight:800;padding-left:8px}
    .mobile-cta{display:none}
    .site-footer{
      padding:54px 0 30px;
      background:#060509;
      border-top:1px solid rgba(255,255,255,.09);
    }
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:26px}
    .footer-title{font-size:20px;font-weight:950;margin-bottom:12px}
    .footer-text{color:var(--muted);font-size:14px;max-width:520px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:var(--muted);font-size:14px;transition:.2s ease}
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .copyright{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);color:var(--subtle);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
    @media (max-width:1024px){
      .desktop-nav,.nav-actions .mega{display:none}
      .mobile-toggle{display:grid;place-items:center}
      .hero-top,.comparison-wrap,.feature-flow,.proof-layout,.faq-wrap,.cta-panel{grid-template-columns:1fr}
      .vertical-title{position:static}
      .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .tier-grid{grid-template-columns:1fr}
      .tier-card.recommended{transform:none}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,var(--max))}
      .nav-wrap{height:68px}
      .mobile-menu{inset:68px 10px auto 10px}
      .brand-name{font-size:15px}
      .hero{padding:34px 0 62px;min-height:auto}
      .hero-stage{padding:20px;border-radius:28px}
      .hero-copy{padding:16px 2px}
      .hero-metrics{grid-template-columns:1fr}
      .recommend-card{border-radius:24px}
      .section{padding:66px 0}
      .demo-grid{grid-template-columns:1fr}
      .info-item{grid-template-columns:1fr;gap:4px}
      .card-flow{columns:1}
      .footer-grid{grid-template-columns:1fr}
      .floating-cta{display:none}
      .mobile-cta{
        display:grid;grid-template-columns:1fr 1fr;gap:10px;
        position:fixed;left:0;right:0;bottom:0;z-index:75;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(8,7,12,.96);border-top:1px solid rgba(255,255,255,.1);
        backdrop-filter:blur(16px);
      }
      .mobile-cta .btn{padding:11px 12px;font-size:14px}
    }
    @media (max-width:520px){
      h1{font-size:35px}
      .section-title{font-size:29px}
      .hero-actions,.chip-row{align-items:stretch}
      .hero-actions .btn{width:100%}
      .chip{width:100%;justify-content:center}
      .compare-table th,.compare-table td{padding:13px;font-size:13px}
      .cta-panel{padding:24px;border-radius:28px}
    }

/* roulang page: category1 */
:root {
      --bg: #07060a;
      --bg-2: #100b13;
      --panel: #15121a;
      --panel-2: #1d141f;
      --panel-3: #241723;
      --text: #f3f1f6;
      --muted: #b8b3c2;
      --soft: #898397;
      --line: rgba(255, 255, 255, .11);
      --primary: #ff2f7d;
      --primary-2: #ff7a1a;
      --accent: #b8ff2c;
      --cyan: #28f1ff;
      --radius: 26px;
      --radius-sm: 16px;
      --shadow: 0 24px 70px rgba(255, 47, 125, .16);
      --shadow-soft: 0 18px 60px rgba(0, 0, 0, .38);
      --container: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 16% 2%, rgba(255, 47, 125, .28), transparent 32rem),
        radial-gradient(circle at 88% 12%, rgba(184, 255, 44, .13), transparent 28rem),
        radial-gradient(circle at 56% 56%, rgba(255, 122, 26, .10), transparent 30rem),
        linear-gradient(180deg, #07060a 0%, #0b070d 42%, #07060a 100%);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; border: 0; }
    input { outline: none; }
    img { max-width: 100%; display: block; }
    :focus-visible { outline: 3px solid rgba(184, 255, 44, .8); outline-offset: 4px; }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(7, 6, 10, .72);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(18px);
      transition: background .25s ease, box-shadow .25s ease;
    }

    .site-header.is-scrolled {
      background: rgba(8, 6, 10, .95);
      box-shadow: 0 16px 42px rgba(0, 0, 0, .32);
    }

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      display: inline-block;
      border-radius: 15px;
      background:
        linear-gradient(135deg, var(--primary), var(--primary-2) 58%, var(--accent));
      position: relative;
      box-shadow: 0 0 28px rgba(255, 47, 125, .45);
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(7, 6, 10, .74);
    }

    .brand-mark::before {
      width: 18px;
      height: 8px;
      left: 8px;
      top: 11px;
      transform: rotate(-18deg);
    }

    .brand-mark::after {
      width: 8px;
      height: 18px;
      right: 9px;
      bottom: 8px;
      transform: rotate(18deg);
    }

    .brand-name {
      font-weight: 900;
      letter-spacing: -.04em;
      font-size: 18px;
      white-space: nowrap;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 999px;
      background: rgba(255, 255, 255, .035);
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .nav-link:hover {
      color: #fff;
      background: rgba(255, 47, 125, .12);
      transform: translateY(-1px);
    }

    .nav-link.active {
      color: #fff;
      background: linear-gradient(135deg, rgba(255, 47, 125, .32), rgba(255, 122, 26, .18));
    }

    .nav-link.active::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--accent);
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-50%);
      box-shadow: 0 0 14px rgba(184, 255, 44, .85);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 20px;
      border-radius: 999px;
      font-weight: 900;
      line-height: 1;
      transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease;
      white-space: nowrap;
    }

    .btn:hover { transform: translateY(-2px) scale(1.01); }
    .btn:active { transform: translateY(0) scale(.98); }

    .btn-primary {
      color: white;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 18px 34px rgba(255, 47, 125, .28);
    }

    .btn-primary:hover { filter: brightness(1.12); }

    .btn-secondary {
      color: #fff;
      border: 1px solid rgba(255, 47, 125, .48);
      background: rgba(255, 255, 255, .045);
    }

    .btn-secondary:hover {
      background: rgba(255, 47, 125, .14);
      border-color: rgba(255, 122, 26, .75);
    }

    .mega { position: relative; }

    .mega-btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 16px;
      border-radius: 999px;
      color: var(--text);
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .11);
      font-weight: 800;
      transition: background .2s ease, border-color .2s ease;
    }

    .mega-btn:hover,
    .mega.open .mega-btn {
      background: rgba(184, 255, 44, .10);
      border-color: rgba(184, 255, 44, .34);
    }

    .mega-panel {
      position: absolute;
      top: calc(100% + 16px);
      right: 0;
      width: min(830px, calc(100vw - 36px));
      padding: 18px;
      border-radius: 24px;
      background: rgba(19, 13, 22, .98);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--shadow-soft);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .mega:hover .mega-panel,
    .mega.open .mega-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .mega-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .mega-card {
      min-height: 132px;
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
      border: 1px solid rgba(255, 255, 255, .10);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .mega-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 47, 125, .52);
      background: rgba(255, 47, 125, .11);
    }

    .mega-card strong {
      display: block;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .mega-card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .mobile-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      color: white;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      font-size: 20px;
    }

    .mobile-menu {
      display: none;
      width: min(var(--container), calc(100% - 36px));
      margin: 0 auto 14px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(20, 13, 23, .96);
      border: 1px solid rgba(255, 255, 255, .10);
    }

    .mobile-menu a {
      display: flex;
      padding: 13px 14px;
      border-radius: 14px;
      color: var(--muted);
      font-weight: 800;
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
      color: #fff;
      background: rgba(255, 47, 125, .16);
    }

    main { min-height: 70vh; }

    .section {
      padding: 82px 0;
      position: relative;
    }

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

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 18px;
    }

    .breadcrumb a:hover { color: #fff; }

    .hero {
      padding: 72px 0 48px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 18px auto auto 50%;
      width: min(920px, 92vw);
      height: 420px;
      transform: translateX(-50%);
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(255, 47, 125, .25), transparent 62%),
        radial-gradient(circle at 78% 42%, rgba(184, 255, 44, .14), transparent 42%);
      filter: blur(6px);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255, 47, 125, .14);
      border: 1px solid rgba(255, 47, 125, .36);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 20px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 16px rgba(184, 255, 44, .9);
    }

    h1 {
      margin: 0;
      font-size: clamp(34px, 6vw, 62px);
      line-height: 1.1;
      letter-spacing: -.06em;
      font-weight: 900;
    }

    .gradient-text {
      background: linear-gradient(135deg, #fff 0%, #ffd5e4 38%, #ff7a1a 72%, #b8ff2c 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-summary {
      max-width: 780px;
      margin: 20px auto 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.85;
    }

    .search-panel {
      max-width: 850px;
      margin: 30px auto 0;
      padding: 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      box-shadow: var(--shadow);
    }

    .search-panel input {
      width: 100%;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      color: #fff;
      background: rgba(0, 0, 0, .24);
      border: 1px solid rgba(255, 255, 255, .09);
    }

    .search-panel input::placeholder { color: #8f8798; }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
    }

    .chip,
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 999px;
      color: #f7f2f7;
      background: rgba(255, 255, 255, .065);
      border: 1px solid rgba(255, 255, 255, .11);
      font-size: 13px;
      font-weight: 850;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .chip:hover {
      transform: translateY(-2px);
      background: rgba(255, 47, 125, .13);
      border-color: rgba(255, 47, 125, .42);
    }

    .chip.hot {
      color: #13090f;
      background: linear-gradient(135deg, var(--accent), #fff36e);
      border-color: transparent;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 34px;
      align-items: end;
      margin-bottom: 28px;
    }

    .section-kicker {
      display: inline-flex;
      margin-bottom: 12px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    h2 {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.15;
      letter-spacing: -.05em;
      font-weight: 900;
    }

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

    .content-layout {
      display: grid;
      grid-template-columns: 292px 1fr;
      gap: 24px;
      align-items: start;
    }

    .filter-card,
    .side-card,
    .info-card,
    .entry-card,
    .step-card,
    .faq-item,
    .cta-panel {
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .035));
      border: 1px solid rgba(255, 255, 255, .105);
      box-shadow: var(--shadow-soft);
    }

    .filter-card {
      position: sticky;
      top: 100px;
      padding: 20px;
    }

    .filter-title {
      font-size: 17px;
      font-weight: 900;
      margin-bottom: 14px;
    }

    .filter-list {
      display: grid;
      gap: 10px;
    }

    .filter-list a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 12px 13px;
      border-radius: 16px;
      color: var(--muted);
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      font-weight: 800;
      transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
    }

    .filter-list a:hover,
    .filter-list a.active {
      color: #fff;
      transform: translateX(3px);
      background: rgba(255, 47, 125, .13);
      border-color: rgba(255, 47, 125, .4);
    }

    .filter-list small {
      color: var(--accent);
      font-weight: 900;
    }

    .side-note {
      margin-top: 16px;
      padding: 16px;
      border-radius: 20px;
      background: rgba(184, 255, 44, .08);
      border: 1px solid rgba(184, 255, 44, .22);
      color: var(--muted);
      font-size: 14px;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .entry-card {
      position: relative;
      min-height: 268px;
      padding: 24px;
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .entry-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 47, 125, .52);
      background: linear-gradient(180deg, rgba(255, 47, 125, .13), rgba(255, 255, 255, .042));
    }

    .entry-card.featured {
      grid-column: 1 / -1;
      min-height: 220px;
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 22px;
      align-items: end;
      background:
        radial-gradient(circle at 78% 22%, rgba(255, 122, 26, .24), transparent 36%),
        linear-gradient(135deg, rgba(255, 47, 125, .17), rgba(255, 255, 255, .05));
    }

    .entry-card.tall { min-height: 330px; }
    .entry-card.compact { min-height: 228px; }

    .card-index {
      display: inline-flex;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: #14070d;
      background: linear-gradient(135deg, var(--accent), #fff36e);
      font-weight: 950;
      margin-bottom: 18px;
    }

    .entry-card h3,
    .info-card h3,
    .step-card h3,
    .side-card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.25;
      letter-spacing: -.03em;
      font-weight: 900;
    }

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

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 20px;
    }

    .mini-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      font-weight: 900;
      font-size: 14px;
    }

    .mini-link span {
      color: var(--accent);
      transition: transform .2s ease;
    }

    .mini-link:hover span { transform: translateX(3px); }

    .tag-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .badge.pink { background: rgba(255, 47, 125, .16); border-color: rgba(255, 47, 125, .38); }
    .badge.orange { background: rgba(255, 122, 26, .14); border-color: rgba(255, 122, 26, .35); }
    .badge.green { color: #101010; background: rgba(184, 255, 44, .88); border-color: transparent; }
    .badge.cyan { background: rgba(40, 241, 255, .10); border-color: rgba(40, 241, 255, .30); }

    .quick-strip {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 16px;
      margin-top: 18px;
    }

    .info-card {
      padding: 22px;
      transition: transform .2s ease, border-color .2s ease;
    }

    .info-card:hover {
      transform: translateY(-4px);
      border-color: rgba(184, 255, 44, .35);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      counter-reset: step;
    }

    .step-card {
      min-height: 238px;
      padding: 22px;
      position: relative;
      overflow: hidden;
    }

    .step-card::before {
      counter-increment: step;
      content: "0" counter(step);
      display: inline-flex;
      margin-bottom: 24px;
      color: rgba(255, 255, 255, .18);
      font-size: 50px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.08em;
    }

    .step-card::after {
      content: "";
      position: absolute;
      right: -42px;
      top: -42px;
      width: 126px;
      height: 126px;
      border-radius: 999px;
      background: rgba(255, 47, 125, .16);
    }

    .compare-wrap {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 18px;
    }

    .compare-card {
      padding: 24px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(255, 255, 255, .10);
    }

    .compare-card.highlight {
      background:
        radial-gradient(circle at 90% 0%, rgba(184, 255, 44, .16), transparent 42%),
        rgba(255, 47, 125, .10);
      border-color: rgba(255, 47, 125, .38);
    }

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

    .check-list li {
      display: flex;
      gap: 10px;
      color: var(--muted);
    }

    .check-list li::before {
      content: "✓";
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111;
      background: var(--accent);
      font-weight: 950;
      line-height: 1;
      margin-top: 2px;
    }

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

    .faq-item {
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
    }

    .faq-item.open {
      border-color: rgba(255, 47, 125, .48);
      background: rgba(255, 47, 125, .075);
    }

    .faq-question {
      width: 100%;
      min-height: 68px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 0 22px;
      color: #fff;
      background: transparent;
      text-align: left;
      font-weight: 900;
    }

    .faq-icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .08);
      transition: transform .2s ease, background .2s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: var(--primary);
    }

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

    .faq-item.open .faq-answer { display: block; }

    .cta-panel {
      padding: 34px;
      display: grid;
      grid-template-columns: 1.1fr auto;
      gap: 24px;
      align-items: center;
      background:
        radial-gradient(circle at 18% 20%, rgba(255, 47, 125, .22), transparent 36%),
        radial-gradient(circle at 90% 60%, rgba(184, 255, 44, .12), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
    }

    .cta-panel h2 { margin-bottom: 10px; }
    .cta-panel p { margin: 0; color: var(--muted); }

    .floating-cta {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 40;
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 24px;
      background: rgba(18, 12, 21, .92);
      border: 1px solid rgba(255, 255, 255, .13);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .floating-cta .btn {
      min-height: 40px;
      padding: 0 16px;
      font-size: 14px;
    }

    .mobile-cta {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 45;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: rgba(7, 6, 10, .94);
      border-top: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(16px);
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .site-footer {
      padding: 58px 0 32px;
      background:
        radial-gradient(circle at 12% 10%, rgba(255, 47, 125, .16), transparent 28%),
        #07060a;
      border-top: 1px solid rgba(255, 255, 255, .10);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr .7fr .7fr;
      gap: 34px;
    }

    .footer-text {
      max-width: 520px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .footer-title {
      margin-bottom: 14px;
      font-weight: 900;
      color: #fff;
    }

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

    .footer-links a {
      color: var(--muted);
      font-weight: 750;
      transition: color .2s ease, transform .2s ease;
    }

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

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, .09);
      color: var(--soft);
      font-size: 13px;
    }

    @media (max-width: 1120px) {
      .desktop-nav { display: none; }
      .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .mobile-menu.open { display: grid; }
      .mega-panel { right: -56px; }
      .content-layout { grid-template-columns: 1fr; }
      .filter-card {
        position: static;
        overflow-x: auto;
      }
      .filter-list {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .filter-list a { min-width: 172px; }
      .steps { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 860px) {
      .site-container { width: min(100% - 28px, var(--container)); }
      .nav-wrap { height: 68px; }
      .brand-name { font-size: 16px; max-width: 178px; overflow: hidden; text-overflow: ellipsis; }
      .mega { display: none; }
      .nav-actions .btn-primary { display: none; }
      .hero { padding: 54px 0 34px; }
      .search-panel {
        grid-template-columns: 1fr;
        border-radius: 28px;
      }
      .section { padding: 62px 0; }
      .section-head { grid-template-columns: 1fr; gap: 14px; }
      .entry-grid { grid-template-columns: 1fr; }
      .entry-card.featured { grid-template-columns: 1fr; }
      .quick-strip { grid-template-columns: 1fr; }
      .compare-wrap { grid-template-columns: 1fr; }
      .cta-panel { grid-template-columns: 1fr; padding: 26px; }
      .footer-grid { grid-template-columns: 1fr; }
      .copyright { flex-direction: column; }
      .floating-cta { display: none; }
      .mobile-cta { display: grid; }
      body { padding-bottom: 76px; }
    }

    @media (max-width: 520px) {
      h1 { font-size: 34px; }
      .hero-summary { font-size: 16px; }
      .chip-row {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
      }
      .chip { white-space: nowrap; }
      .entry-card,
      .filter-card,
      .info-card,
      .step-card,
      .compare-card {
        border-radius: 22px;
      }
      .steps { grid-template-columns: 1fr; }
      .btn { min-height: 42px; padding: 0 15px; }
      .mobile-cta .btn { font-size: 13px; padding: 0 12px; }
    }

/* roulang page: category2 */
:root {
      --bg: #08070b;
      --bg-soft: #111018;
      --panel: #17131d;
      --panel-2: #211520;
      --panel-3: #15151b;
      --text: #f4f2f7;
      --muted: #b9b4c4;
      --weak: #888394;
      --line: rgba(255, 255, 255, .12);
      --hot: #ff2f83;
      --orange: #ff7a1a;
      --violet: #9b5cff;
      --lime: #d7ff43;
      --cyan: #45f5ff;
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --shadow: 0 22px 70px rgba(255, 47, 131, .16);
      --shadow-soft: 0 18px 50px rgba(0, 0, 0, .34);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(255, 47, 131, .26), transparent 34%),
        radial-gradient(circle at 86% 16%, rgba(155, 92, 255, .22), transparent 30%),
        radial-gradient(circle at 50% 90%, rgba(255, 122, 26, .16), transparent 32%),
        var(--bg);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
      z-index: -1;
    }

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

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

    button, input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(215, 255, 67, .72);
      outline-offset: 4px;
      border-radius: 12px;
    }

    .site-container {
      width: min(1200px, calc(100% - 40px));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(8, 7, 11, .72);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(18px);
      transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .site-header.scrolled {
      background: rgba(8, 7, 11, .96);
      box-shadow: 0 18px 60px rgba(0,0,0,.36);
      border-color: rgba(255, 47, 131, .18);
    }

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
      font-weight: 900;
      letter-spacing: -.03em;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 28% 22%, #fff 0 7%, transparent 8%),
        linear-gradient(135deg, var(--hot), var(--orange) 48%, var(--lime));
      box-shadow: 0 0 32px rgba(255, 47, 131, .52);
      position: relative;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      right: -5px;
      bottom: -5px;
      width: 18px;
      height: 18px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--violet), var(--cyan));
      border: 2px solid var(--bg);
    }

    .brand-name {
      font-size: 18px;
      color: var(--text);
      white-space: nowrap;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
    }

    .nav-link {
      position: relative;
      padding: 9px 12px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: color .2s ease, background .2s ease, transform .2s ease;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff;
      background: rgba(255, 47, 131, .14);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 4px;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: var(--lime);
      box-shadow: 0 0 14px rgba(215,255,67,.75);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
    }

    .mega {
      position: relative;
    }

    .mega-btn,
    .mobile-toggle {
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
      background: rgba(255,255,255,.06);
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .mega-btn:hover,
    .mobile-toggle:hover,
    .mega.open .mega-btn {
      border-color: rgba(255, 47, 131, .5);
      background: rgba(255, 47, 131, .13);
      transform: translateY(-1px);
    }

    .mega-panel {
      position: absolute;
      top: calc(100% + 16px);
      right: 0;
      width: min(860px, calc(100vw - 40px));
      padding: 18px;
      border: 1px solid rgba(255, 47, 131, .22);
      border-radius: 28px;
      background: rgba(18, 14, 24, .98);
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    .mega:hover .mega-panel,
    .mega.open .mega-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .mega-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .mega-card {
      min-height: 132px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .mega-card:hover {
      transform: translateY(-4px);
      border-color: rgba(215,255,67,.5);
      background: linear-gradient(145deg, rgba(255,47,131,.18), rgba(155,92,255,.08));
    }

    .mega-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .mega-card span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .mobile-toggle {
      display: none;
      width: 44px;
      height: 44px;
      padding: 0;
      font-size: 22px;
      line-height: 1;
    }

    .mobile-menu {
      display: none;
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 14px 20px 22px;
      background: rgba(8, 7, 11, .98);
    }

    .mobile-menu a {
      display: block;
      padding: 13px 14px;
      border-radius: 16px;
      color: var(--muted);
      font-weight: 800;
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
      color: #fff;
      background: rgba(255, 47, 131, .14);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      padding: 12px 18px;
      border: 1px solid transparent;
      font-weight: 900;
      letter-spacing: -.01em;
      line-height: 1;
      transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px) scale(1.01);
    }

    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--hot), var(--orange));
      box-shadow: 0 12px 34px rgba(255, 47, 131, .32);
    }

    .btn-primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 16px 44px rgba(255, 47, 131, .45);
    }

    .btn-secondary {
      color: var(--text);
      border-color: rgba(255, 47, 131, .48);
      background: rgba(255, 47, 131, .08);
    }

    .btn-secondary:hover {
      background: rgba(255, 47, 131, .18);
      border-color: rgba(215,255,67,.5);
    }

    .btn-ghost {
      color: var(--text);
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.12);
    }

    .btn-ghost:hover {
      border-color: rgba(69,245,255,.45);
      background: rgba(69,245,255,.1);
    }

    .page-hero {
      position: relative;
      padding: 74px 0 38px;
      overflow: hidden;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 26px -6% auto auto;
      width: 420px;
      height: 420px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,47,131,.3), transparent 64%);
      filter: blur(6px);
      pointer-events: none;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      color: var(--weak);
      font-size: 14px;
      margin-bottom: 20px;
    }

    .breadcrumb a {
      color: var(--muted);
      transition: color .2s ease;
    }

    .breadcrumb a:hover {
      color: var(--lime);
    }

    .hero-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
      gap: 26px;
      align-items: stretch;
    }

    .hero-copy,
    .spotlight-card,
    .matrix-card,
    .note-card,
    .flow-card,
    .compare-wrap,
    .faq-item,
    .cta-panel {
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
      box-shadow: var(--shadow-soft);
    }

    .hero-copy {
      border-radius: 34px;
      padding: clamp(28px, 5vw, 54px);
      min-height: 430px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .hero-copy::after {
      content: "";
      position: absolute;
      right: -88px;
      bottom: -116px;
      width: 260px;
      height: 260px;
      border-radius: 52px;
      transform: rotate(16deg);
      background:
        linear-gradient(135deg, rgba(255,47,131,.52), rgba(155,92,255,.2)),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.08) 18px 19px);
      opacity: .72;
    }

    .eyebrow {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255,47,131,.14);
      border: 1px solid rgba(255,47,131,.32);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--lime);
      box-shadow: 0 0 16px rgba(215,255,67,.8);
    }

    h1 {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 780px;
      font-size: clamp(34px, 5.1vw, 62px);
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: -.06em;
    }

    .gradient-text {
      background: linear-gradient(135deg, #fff 10%, #ffd5e7 42%, var(--lime) 88%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-desc {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 17px;
    }

    .chip-row {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .chip,
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      color: var(--text);
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      font-size: 13px;
      font-weight: 850;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .chip:hover {
      transform: translateY(-2px);
      border-color: rgba(215,255,67,.44);
      background: rgba(215,255,67,.1);
    }

    .hero-actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .spotlight-card {
      position: relative;
      border-radius: 34px;
      padding: 24px;
      min-height: 430px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,47,131,.22), rgba(17,16,24,.55) 45%, rgba(255,122,26,.12)),
        var(--panel);
    }

    .spotlight-card::before {
      content: "";
      position: absolute;
      inset: 20px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.14);
      pointer-events: none;
    }

    .status-stack {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      margin-top: 12px;
    }

    .status-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.1);
    }

    .status-item strong {
      display: block;
      font-size: 17px;
      line-height: 1.35;
    }

    .status-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 3px;
    }

    .status-dot {
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      border-radius: 17px;
      display: grid;
      place-items: center;
      color: #0a0710;
      font-weight: 950;
      background: linear-gradient(135deg, var(--lime), var(--cyan));
      box-shadow: 0 0 28px rgba(215,255,67,.34);
    }

    .section {
      padding: 62px 0;
      position: relative;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: end;
      margin-bottom: 26px;
    }

    .section-kicker {
      color: var(--lime);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    h2 {
      margin: 0;
      font-size: clamp(28px, 3.6vw, 42px);
      line-height: 1.16;
      font-weight: 950;
      letter-spacing: -.045em;
    }

    .section-desc {
      max-width: 560px;
      color: var(--muted);
      font-size: 16px;
      margin: 0;
    }

    .entry-matrix {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
    }

    .matrix-card {
      border-radius: var(--radius-xl);
      padding: 24px;
      min-height: 270px;
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .matrix-card:hover,
    .note-card:hover,
    .flow-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,47,131,.42);
      background: linear-gradient(145deg, rgba(255,47,131,.13), rgba(255,255,255,.035));
    }

    .matrix-card.featured {
      grid-row: span 2;
      min-height: 558px;
      background:
        radial-gradient(circle at 82% 18%, rgba(215,255,67,.16), transparent 34%),
        linear-gradient(145deg, rgba(255,47,131,.16), rgba(255,255,255,.035));
    }

    .matrix-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 18px;
    }

    .card-icon {
      width: 52px;
      height: 52px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      color: #08070b;
      font-size: 24px;
      font-weight: 950;
      background: linear-gradient(135deg, var(--hot), var(--orange));
      box-shadow: 0 0 30px rgba(255,47,131,.3);
    }

    .matrix-card:nth-child(2) .card-icon {
      background: linear-gradient(135deg, var(--lime), var(--cyan));
    }

    .matrix-card:nth-child(3) .card-icon {
      background: linear-gradient(135deg, var(--violet), var(--hot));
      color: #fff;
    }

    .matrix-card h3,
    .note-card h3,
    .flow-card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 950;
      letter-spacing: -.03em;
    }

    .matrix-card p,
    .note-card p,
    .flow-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .entry-list {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .entry-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--muted);
      transition: border-color .2s ease, background .2s ease;
    }

    .entry-item:hover {
      background: rgba(255,47,131,.1);
      border-color: rgba(215,255,67,.34);
      color: #fff;
    }

    .entry-item b {
      color: #fff;
    }

    .note-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .note-card {
      border-radius: var(--radius-lg);
      padding: 22px;
      min-height: 230px;
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .note-card.tall {
      grid-column: span 2;
      min-height: 320px;
      background:
        linear-gradient(145deg, rgba(155,92,255,.18), rgba(255,255,255,.035));
    }

    .note-card.wide {
      grid-column: span 3;
      background:
        linear-gradient(145deg, rgba(255,122,26,.16), rgba(255,255,255,.035));
    }

    .label {
      display: inline-flex;
      align-items: center;
      margin-bottom: 14px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 950;
      color: #0a0710;
      background: var(--lime);
    }

    .label.pink {
      color: #fff;
      background: var(--hot);
    }

    .label.orange {
      color: #12070a;
      background: var(--orange);
    }

    .label.violet {
      color: #fff;
      background: var(--violet);
    }

    .flow-layout {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 18px;
      align-items: start;
    }

    .flow-card {
      border-radius: var(--radius-xl);
      padding: 26px;
    }

    .timeline {
      display: grid;
      gap: 14px;
    }

    .timeline-step {
      position: relative;
      padding: 18px 18px 18px 62px;
      border-radius: 22px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.08);
    }

    .timeline-step::before {
      content: attr(data-step);
      position: absolute;
      left: 16px;
      top: 18px;
      width: 32px;
      height: 32px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #08070b;
      font-weight: 950;
      background: linear-gradient(135deg, var(--lime), var(--cyan));
    }

    .timeline-step strong {
      display: block;
      margin-bottom: 4px;
      font-size: 17px;
      line-height: 1.35;
    }

    .timeline-step span {
      display: block;
      color: var(--muted);
      font-size: 14px;
    }

    .compare-wrap {
      border-radius: var(--radius-xl);
      overflow: hidden;
    }

    .compare-row {
      display: grid;
      grid-template-columns: .8fr 1fr 1fr;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .compare-row:last-child {
      border-bottom: 0;
    }

    .compare-cell {
      padding: 18px;
      color: var(--muted);
      border-right: 1px solid rgba(255,255,255,.08);
      min-height: 86px;
    }

    .compare-cell:last-child {
      border-right: 0;
    }

    .compare-head .compare-cell {
      color: #fff;
      font-weight: 950;
      background: rgba(255,47,131,.13);
    }

    .compare-cell strong {
      color: #fff;
      display: block;
      margin-bottom: 3px;
    }

    .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .plan-card {
      position: relative;
      min-height: 390px;
      display: flex;
      flex-direction: column;
      padding: 26px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.1);
      background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      box-shadow: var(--shadow-soft);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
      overflow: hidden;
    }

    .plan-card:hover {
      transform: translateY(-6px);
      border-color: rgba(215,255,67,.42);
      background: linear-gradient(160deg, rgba(255,47,131,.15), rgba(255,255,255,.03));
    }

    .plan-card.highlight {
      border-color: rgba(255,47,131,.42);
      box-shadow: var(--shadow);
    }

    .plan-card.highlight::before {
      content: "推荐";
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 6px 10px;
      border-radius: 999px;
      color: #08070b;
      background: var(--lime);
      font-size: 12px;
      font-weight: 950;
    }

    .plan-card h3 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 950;
    }

    .plan-note {
      color: var(--muted);
      margin: 0 0 18px;
      font-size: 15px;
    }

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

    .plan-list li {
      display: flex;
      gap: 10px;
      color: var(--muted);
      font-size: 15px;
    }

    .plan-list li::before {
      content: "•";
      color: var(--lime);
      font-size: 22px;
      line-height: 1;
    }

    .plan-card .btn {
      margin-top: auto;
    }

    .faq-wrap {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 22px;
      align-items: start;
    }

    .faq-list {
      display: grid;
      gap: 12px;
    }

    .faq-item {
      border-radius: 22px;
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
    }

    .faq-item.active {
      border-color: rgba(255,47,131,.5);
      background: rgba(255,47,131,.08);
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px;
      color: #fff;
      background: transparent;
      border: 0;
      text-align: left;
      font-weight: 950;
    }

    .faq-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #09070c;
      background: var(--lime);
      transition: transform .22s ease;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      background: var(--hot);
      color: #fff;
    }

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

    .faq-item.active .faq-answer {
      display: block;
    }

    .cta-panel {
      position: relative;
      border-radius: 36px;
      padding: clamp(28px, 5vw, 50px);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      background:
        radial-gradient(circle at 78% 20%, rgba(215,255,67,.18), transparent 34%),
        linear-gradient(135deg, rgba(255,47,131,.2), rgba(155,92,255,.08));
    }

    .cta-panel h2 {
      max-width: 720px;
    }

    .cta-panel p {
      max-width: 680px;
      color: var(--muted);
      margin: 14px 0 0;
    }

    .floating-cta {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 70;
      width: 250px;
      padding: 14px;
      border: 1px solid rgba(255,47,131,.34);
      border-radius: 24px;
      background: rgba(16, 13, 22, .94);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .floating-cta strong {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .floating-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .floating-actions .btn {
      padding: 10px 12px;
      font-size: 13px;
    }

    .mobile-cta-bar {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 75;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: rgba(8, 7, 11, .96);
      border-top: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 -16px 40px rgba(0,0,0,.38);
      gap: 10px;
    }

    .site-footer {
      margin-top: 68px;
      padding: 58px 0 30px;
      background:
        radial-gradient(circle at 12% 18%, rgba(255,47,131,.14), transparent 28%),
        #060509;
      border-top: 1px solid rgba(255,255,255,.1);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .8fr .8fr;
      gap: 36px;
      align-items: start;
    }

    .footer-text {
      max-width: 520px;
      color: var(--muted);
      margin: 0;
    }

    .footer-title {
      margin-bottom: 14px;
      color: #fff;
      font-weight: 950;
    }

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

    .footer-links a {
      color: var(--muted);
      transition: color .2s ease, transform .2s ease;
    }

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

    .copyright {
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: var(--weak);
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    @media (max-width: 1120px) {
      .desktop-nav {
        gap: 0;
      }

      .nav-link {
        padding-inline: 9px;
        font-size: 13px;
      }

      .mega-btn {
        display: none;
      }

      .hero-panel,
      .entry-matrix,
      .flow-layout,
      .faq-wrap,
      .cta-panel {
        grid-template-columns: 1fr;
      }

      .spotlight-card,
      .hero-copy {
        min-height: auto;
      }

      .note-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .note-card.tall,
      .note-card.wide {
        grid-column: span 1;
      }
    }

    @media (max-width: 900px) {
      .desktop-nav,
      .nav-actions .btn-primary {
        display: none;
      }

      .mobile-toggle {
        display: grid;
        place-items: center;
      }

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

      .nav-wrap {
        height: 68px;
      }

      .plans {
        grid-template-columns: 1fr;
      }

      .compare-row {
        grid-template-columns: 1fr;
      }

      .compare-cell {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
      }

      .compare-cell:last-child {
        border-bottom: 0;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .floating-cta {
        display: none;
      }

      .mobile-cta-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      body {
        padding-bottom: 78px;
      }
    }

    @media (max-width: 620px) {
      .site-container {
        width: min(100% - 28px, 1200px);
      }

      .page-hero {
        padding-top: 42px;
      }

      .hero-copy,
      .spotlight-card,
      .matrix-card,
      .note-card,
      .flow-card,
      .cta-panel,
      .plan-card {
        border-radius: 24px;
        padding: 22px;
      }

      h1 {
        font-size: 35px;
      }

      .section {
        padding: 44px 0;
      }

      .section-head {
        display: block;
      }

      .section-desc {
        margin-top: 10px;
      }

      .note-grid,
      .mega-grid {
        grid-template-columns: 1fr;
      }

      .brand-name {
        font-size: 16px;
        max-width: 218px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .hero-actions,
      .chip-row {
        flex-direction: column;
        align-items: stretch;
      }

      .btn,
      .chip {
        width: 100%;
      }

      .status-item {
        align-items: flex-start;
      }

      .copyright {
        display: grid;
      }
    }