/* roulang page: index */
:root{
      --bg: #f4f5f9;
      --bg-soft: #ffffff;
      --surface: rgba(255,255,255,.82);
      --surface-strong: #ffffff;
      --surface-dark: #12131b;
      --surface-dark-2: #171925;
      --text: #1c1d25;
      --muted: #666a78;
      --muted-2: #8b90a3;
      --line: rgba(24, 25, 34, .10);
      --line-strong: rgba(24, 25, 34, .16);
      --accent: #ff4d6d;
      --accent-2: #ff8a5b;
      --accent-3: #a855f7;
      --accent-soft: rgba(255,77,109,.12);
      --accent-soft-2: rgba(168,85,247,.12);
      --ok: #16a34a;
      --warn: #f59e0b;
      --shadow: 0 18px 50px rgba(28, 29, 37, .10);
      --shadow-strong: 0 24px 60px rgba(28, 29, 37, .16);
      --radius: 24px;
      --radius-sm: 18px;
      --radius-xs: 14px;
      --container: 1180px;
      --transition: all .24s ease;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 0%, rgba(255,77,109,.08), transparent 26%),
        radial-gradient(circle at 92% 10%, rgba(168,85,247,.06), transparent 20%),
        linear-gradient(180deg, #f6f7fb 0%, #f3f4f8 100%);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    button, input, textarea, select{
      font:inherit;
    }
    ::selection{ background: rgba(255,77,109,.18); color:#111; }

    .skip-link{
      position:absolute;
      left:-999px;
      top:12px;
      z-index:9999;
      padding:.75rem 1rem;
      border-radius:999px;
      background:#111;
      color:#fff;
      transition:var(--transition);
    }
    .skip-link:focus{ left:12px; }

    .container-narrow{
      max-width: var(--container);
    }

    .site-header{
      position: sticky;
      top:0;
      z-index:1030;
      backdrop-filter: blur(18px);
      background: rgba(247, 248, 251, .86);
      border-bottom: 1px solid rgba(24,25,34,.08);
      box-shadow: 0 10px 30px rgba(28,29,37,.04);
    }

    .header-inner{
      padding: .85rem 0 .7rem;
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap:1rem;
    }

    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.72rem;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--text);
      min-width: fit-content;
    }

    .brand-mark .mark-dot{
      width:14px;
      height:14px;
      border-radius:50%;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 0 0 6px rgba(255,77,109,.12);
      flex:0 0 auto;
    }

    .brand-mark .mark-name{
      font-size:1.05rem;
      line-height:1;
    }

    .search-wrap{
      flex:1;
      display:flex;
      align-items:center;
      gap:.7rem;
    }

    .search-box{
      position:relative;
      flex:1;
    }

    .search-box input{
      width:100%;
      border:1px solid rgba(24,25,34,.10);
      background: rgba(255,255,255,.95);
      border-radius:999px;
      padding:.85rem 1.2rem .85rem 3rem;
      color:var(--text);
      box-shadow: 0 10px 25px rgba(28,29,37,.05);
      transition: var(--transition);
    }
    .search-box input::placeholder{ color:#9196a7; }
    .search-box input:focus{
      outline:none;
      border-color: rgba(255,77,109,.38);
      box-shadow: 0 0 0 .2rem rgba(255,77,109,.12), 0 14px 28px rgba(28,29,37,.08);
    }
    .search-box .icon{
      position:absolute;
      left:1rem;
      top:50%;
      transform: translateY(-50%);
      color: var(--muted-2);
      font-size:1rem;
      pointer-events:none;
    }

    .nav-action{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:46px;
      height:46px;
      border:1px solid rgba(24,25,34,.10);
      background:#fff;
      border-radius:999px;
      color:var(--text);
      box-shadow: 0 10px 24px rgba(28,29,37,.06);
      transition:var(--transition);
    }
    .nav-action:hover,
    .nav-action:focus-visible{
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(28,29,37,.12);
      border-color: rgba(255,77,109,.24);
      color: var(--accent);
    }

    .channel-row{
      margin-top:.82rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding-top:.7rem;
      border-top:1px solid rgba(24,25,34,.08);
    }

    .channel-nav{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex-wrap:wrap;
    }

    .channel-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.56rem .95rem;
      border-radius:999px;
      background: rgba(255,255,255,.88);
      border:1px solid rgba(24,25,34,.08);
      color:var(--muted);
      font-size:.95rem;
      font-weight:600;
      transition:var(--transition);
      box-shadow: 0 8px 20px rgba(28,29,37,.04);
      white-space:nowrap;
    }
    .channel-link:hover,
    .channel-link:focus-visible{
      color: var(--accent);
      transform: translateY(-1px);
      border-color: rgba(255,77,109,.28);
      box-shadow: 0 12px 24px rgba(255,77,109,.10);
    }
    .channel-link.active{
      color:#fff;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      border-color: transparent;
      box-shadow: 0 14px 30px rgba(255,77,109,.22);
    }

    .tag-strip{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:nowrap;
      overflow:auto;
      scrollbar-width: none;
      padding-bottom:.15rem;
    }
    .tag-strip::-webkit-scrollbar{ display:none; }
    .hot-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.52rem .85rem;
      border-radius:999px;
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
      border:1px solid rgba(24,25,34,.08);
      color: var(--muted);
      font-size:.88rem;
      white-space:nowrap;
      transition: var(--transition);
    }
    .hot-tag:hover{
      color: var(--text);
      border-color: rgba(255,77,109,.24);
      box-shadow: 0 10px 20px rgba(28,29,37,.06);
      transform: translateY(-1px);
    }
    .hot-tag .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
      box-shadow: 0 0 0 4px rgba(255,77,109,.10);
    }

    .mobile-search{
      display:none;
      margin-top:.8rem;
    }
    .mobile-search .search-box input{ padding:.8rem 1rem .8rem 2.9rem; }

    .hero{
      position:relative;
      padding: 1.2rem 0 1rem;
      overflow:hidden;
    }
    .hero-shell{
      position:relative;
      border-radius: 32px;
      background:
        radial-gradient(circle at 15% 15%, rgba(255,77,109,.25), transparent 25%),
        radial-gradient(circle at 85% 18%, rgba(168,85,247,.24), transparent 22%),
        linear-gradient(180deg, #11131b 0%, #161823 50%, #0f1117 100%);
      color:#fff;
      box-shadow: 0 30px 70px rgba(13,14,20,.28);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.06);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(255,255,255,.04), transparent 35%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px);
      opacity:.35;
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      padding: 2rem 1.35rem 1.35rem;
    }
    .hero-copy{
      padding: .55rem .3rem 1rem 0;
    }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
      color:#ffd9e0;
      font-size:.9rem;
      font-weight:600;
      letter-spacing:.2px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .hero-badge .pulse{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#ffb0c0;
      box-shadow: 0 0 0 6px rgba(255,77,109,.16);
    }
    .hero h1{
      margin:1rem 0 .9rem;
      font-size: clamp(2.2rem, 5vw, 4.25rem);
      line-height:1.05;
      font-weight:800;
      letter-spacing: -.03em;
    }
    .hero-lead{
      max-width: 42rem;
      color: rgba(255,255,255,.82);
      font-size: 1.04rem;
      line-height:1.9;
      margin:0 0 1.3rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-bottom: 1.15rem;
    }
    .btn-accent,
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius: 999px;
      padding: .88rem 1.2rem;
      font-weight:700;
      border:1px solid transparent;
      transition: var(--transition);
      text-decoration:none;
      cursor:pointer;
      user-select:none;
    }
    .btn-accent{
      color:#fff;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 16px 30px rgba(255,77,109,.25);
    }
    .btn-accent:hover,
    .btn-accent:focus-visible{
      color:#fff;
      transform: translateY(-2px);
      box-shadow: 0 20px 36px rgba(255,77,109,.32);
    }
    .btn-ghost{
      color:#fff;
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.14);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      color:#fff;
      transform: translateY(-2px);
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.22);
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top:1rem;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.62rem .9rem;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.84);
      border:1px solid rgba(255,255,255,.12);
      font-size:.92rem;
      font-weight:600;
    }

    .hero-stage{
      position:relative;
      z-index:1;
      margin-left:auto;
      max-width: 520px;
    }
    .hero-frame{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: .9rem;
      align-items:stretch;
    }
    .poster-card,
    .stack-card,
    .detail-card{
      border-radius: 26px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 16px 30px rgba(0,0,0,.22);
      backdrop-filter: blur(12px);
      overflow:hidden;
    }
    .poster-card{
      min-height: 386px;
      padding:1.15rem;
      background:
        radial-gradient(circle at 10% 18%, rgba(255,77,109,.22), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(168,85,247,.22), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .poster-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
    }
    .poster-top .small-label{
      padding:.42rem .7rem;
      border-radius:999px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#ffd8e0;
      font-size:.8rem;
      font-weight:700;
      letter-spacing:.4px;
    }
    .heat-badge{
      padding:.38rem .72rem;
      border-radius:999px;
      background: linear-gradient(135deg, rgba(255,77,109,.92), rgba(255,138,91,.92));
      font-size:.82rem;
      font-weight:700;
      color:#fff;
      box-shadow: 0 12px 22px rgba(255,77,109,.18);
    }
    .poster-core{
      margin-top:.8rem;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      padding: 1rem;
    }
    .poster-core h2{
      font-size: 1.55rem;
      line-height:1.15;
      margin:0 0 .55rem;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .poster-core p{
      margin:0;
      color: rgba(255,255,255,.78);
      font-size:.95rem;
      line-height:1.75;
    }
    .poster-list{
      margin-top:1rem;
      display:grid;
      gap:.6rem;
    }
    .poster-item{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      padding:.8rem .85rem;
      border-radius: 18px;
      background: rgba(10,11,16,.24);
      border:1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.88);
      font-size:.93rem;
      line-height:1.6;
    }
    .poster-item .mini-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
      margin-top:.45rem;
      flex:0 0 auto;
      box-shadow: 0 0 0 5px rgba(255,77,109,.12);
    }

    .stack-card{
      min-height: 386px;
      padding: .9rem;
      display:grid;
      gap:.8rem;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    }
    .stack-card .mini-box{
      border-radius: 20px;
      padding: .9rem;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
    }
    .stack-card .mini-box strong{
      display:block;
      color:#fff;
      font-size:.95rem;
      margin-bottom:.35rem;
    }
    .stack-card .mini-box span{
      color: rgba(255,255,255,.76);
      font-size:.88rem;
      line-height:1.65;
    }
    .stack-card .mini-box .badge{
      margin-bottom:.55rem;
      border-radius:999px;
      padding:.42rem .7rem;
      background: rgba(255,255,255,.10);
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      font-weight:700;
      font-size:.76rem;
    }

    .section{
      padding: 4.6rem 0;
      position:relative;
    }
    .section.soft{
      background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.92));
      border-top:1px solid rgba(24,25,34,.05);
      border-bottom:1px solid rgba(24,25,34,.05);
    }
    .section.dark-band{
      background:
        radial-gradient(circle at 15% 10%, rgba(255,77,109,.08), transparent 20%),
        radial-gradient(circle at 82% 14%, rgba(168,85,247,.07), transparent 18%),
        linear-gradient(180deg, #f7f8fc 0%, #eef1f7 100%);
    }

    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.8rem;
    }
    .section-title{
      margin:0;
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      font-weight:800;
      letter-spacing:-.02em;
      line-height:1.1;
      color: var(--text);
    }
    .section-desc{
      margin:.55rem 0 0;
      max-width: 54rem;
      color: var(--muted);
      line-height:1.85;
      font-size: 1rem;
    }

    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .72rem;
      border-radius:999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.4px;
      text-transform:none;
      white-space:nowrap;
    }

    .panel-card{
      background: var(--surface-strong);
      border: 1px solid rgba(24,25,34,.09);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .panel-card.soft{
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    }
    .panel-card .panel-body{
      padding: 1.25rem;
    }

    .topic-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:1rem;
    }
    .topic-card{
      position:relative;
      padding: 1.3rem;
      border-radius: 26px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
      border: 1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: var(--transition);
      min-height: 240px;
    }
    .topic-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-strong);
      border-color: rgba(255,77,109,.18);
    }
    .topic-card::after{
      content:"";
      position:absolute;
      inset:auto -18% -30% auto;
      width:170px;
      height:170px;
      border-radius:50%;
      background: radial-gradient(circle, rgba(255,77,109,.12), transparent 68%);
      pointer-events:none;
    }
    .topic-chip{
      display:inline-flex;
      align-items:center;
      padding:.42rem .72rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:800;
      color: var(--accent);
      background: var(--accent-soft);
      border:1px solid rgba(255,77,109,.16);
    }
    .topic-card h3{
      margin:.9rem 0 .55rem;
      font-size:1.28rem;
      font-weight:800;
      line-height:1.25;
    }
    .topic-card p{
      color:var(--muted);
      line-height:1.8;
      margin:0;
      font-size:.98rem;
    }
    .topic-footer{
      margin-top:1rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      flex-wrap:wrap;
    }
    .topic-mini{
      color: var(--muted-2);
      font-size:.92rem;
    }
    .topic-btn{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.7rem 1rem;
      border-radius:999px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      color:#fff;
      font-weight:700;
      box-shadow: 0 14px 24px rgba(255,77,109,.20);
      transition: var(--transition);
    }
    .topic-btn:hover{
      color:#fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 30px rgba(255,77,109,.26);
    }

    .chips-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:1.15rem;
    }
    .chip{
      padding:.56rem .8rem;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      color:var(--muted);
      font-size:.9rem;
      font-weight:600;
      transition:var(--transition);
    }
    .chip:hover{
      transform: translateY(-1px);
      border-color: rgba(255,77,109,.22);
      color: var(--accent);
      box-shadow: 0 12px 20px rgba(28,29,37,.06);
    }

    .pain-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:1rem;
    }
    .pain-card{
      padding:1.15rem;
      border-radius: 24px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      transition: var(--transition);
      min-height: 180px;
    }
    .pain-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-strong);
    }
    .pain-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      margin-bottom:.9rem;
      background: linear-gradient(135deg, rgba(255,77,109,.12), rgba(168,85,247,.12));
      color: var(--accent);
      font-weight:900;
    }
    .pain-card h3{
      font-size:1.03rem;
      margin:0 0 .45rem;
      font-weight:800;
    }
    .pain-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.94rem;
    }

    .path-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:1rem;
      align-items:stretch;
    }
    .flow-card{
      padding:1.2rem;
      border-radius: 26px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      height:100%;
    }
    .flow-list{
      display:grid;
      gap:.9rem;
    }
    .flow-item{
      display:flex;
      gap:.95rem;
      align-items:flex-start;
      padding:.95rem;
      border-radius: 20px;
      background: linear-gradient(180deg, #fff, #fbfbfd);
      border:1px solid rgba(24,25,34,.07);
      transition: var(--transition);
    }
    .flow-item:hover{
      transform: translateY(-2px);
      border-color: rgba(255,77,109,.18);
      box-shadow: 0 12px 24px rgba(28,29,37,.06);
    }
    .flow-num{
      width:40px;
      height:40px;
      border-radius:12px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      color:#fff;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      font-weight:800;
      box-shadow: 0 10px 20px rgba(255,77,109,.18);
    }
    .flow-item h4{
      margin:0 0 .2rem;
      font-size:1rem;
      font-weight:800;
    }
    .flow-item p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.75;
    }

    .side-proof{
      padding:1.2rem;
      border-radius: 26px;
      background:
        radial-gradient(circle at 20% 15%, rgba(255,77,109,.11), transparent 22%),
        radial-gradient(circle at 80% 12%, rgba(168,85,247,.10), transparent 18%),
        linear-gradient(180deg, #141722 0%, #1a1d2a 100%);
      color:#fff;
      border:1px solid rgba(255,255,255,.06);
      box-shadow: 0 24px 52px rgba(13,14,20,.18);
      height:100%;
    }
    .side-proof h3{
      margin:0 0 .45rem;
      font-size:1.25rem;
      font-weight:800;
    }
    .side-proof p{
      color: rgba(255,255,255,.78);
      line-height:1.8;
      margin:0 0 1rem;
      font-size:.95rem;
    }
    .proof-bars{
      display:grid;
      gap:.75rem;
    }
    .proof-row{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:.8rem .9rem;
      border-radius:18px;
      background: rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
      font-size:.92rem;
    }
    .proof-row span:last-child{
      color:#ffd9e0;
      font-weight:800;
    }
    .proof-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .proof-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .72rem;
      border-radius:999px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;
      font-size:.85rem;
    }

    .updates-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:1rem;
      align-items:start;
    }
    .news-list{
      padding:1.1rem;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      border-radius: 26px;
      box-shadow: var(--shadow);
    }
    .news-list ul{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.85rem;
    }
    .news-item{
      display:flex;
      align-items:flex-start;
      gap:.85rem;
      padding:.88rem .85rem;
      border-radius: 18px;
      border:1px solid rgba(24,25,34,.07);
      transition:var(--transition);
      background: linear-gradient(180deg, #fff, #fcfcfe);
    }
    .news-item:hover{
      transform: translateY(-2px);
      border-color: rgba(255,77,109,.18);
      box-shadow: 0 12px 22px rgba(28,29,37,.06);
    }
    .news-item .news-index{
      width:38px;
      height:38px;
      border-radius:12px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      color: var(--accent);
      background: var(--accent-soft);
      font-weight:800;
    }
    .news-item a{
      font-weight:800;
      line-height:1.55;
      display:inline-block;
      margin-bottom:.2rem;
      transition:var(--transition);
    }
    .news-item a:hover{ color: var(--accent); }
    .news-meta{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .news-meta .badge-soft{
      display:inline-flex;
      align-items:center;
      margin-right:.45rem;
      padding:.22rem .55rem;
      border-radius:999px;
      background: rgba(255,77,109,.10);
      color: var(--accent);
      font-weight:700;
      font-size:.75rem;
      vertical-align:middle;
    }

    .update-side{
      display:grid;
      gap:1rem;
    }
    .side-card{
      padding:1.15rem;
      border-radius: 26px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
    }
    .side-card.dark{
      background:
        radial-gradient(circle at 20% 10%, rgba(255,77,109,.11), transparent 22%),
        linear-gradient(180deg, #141722 0%, #1c1f2d 100%);
      color:#fff;
      border-color: rgba(255,255,255,.06);
      box-shadow: 0 24px 52px rgba(13,14,20,.16);
    }
    .side-card h3{
      margin:0 0 .45rem;
      font-size:1.15rem;
      font-weight:800;
    }
    .side-card p{
      color:inherit;
      opacity:.82;
      line-height:1.8;
      margin:0 0 .95rem;
      font-size:.95rem;
    }
    .kpi-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.75rem;
    }
    .kpi{
      border-radius:18px;
      padding:.9rem .85rem;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }
    .kpi strong{
      display:block;
      font-size:1.25rem;
      color:#fff;
      line-height:1.1;
      margin-bottom:.25rem;
    }
    .kpi span{
      font-size:.82rem;
      color: rgba(255,255,255,.78);
    }
    .mini-list{
      display:grid;
      gap:.7rem;
      margin-top:.95rem;
    }
    .mini-list .line{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:.82rem .9rem;
      border-radius:16px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      font-size:.9rem;
    }
    .mini-list .line span:last-child{
      color:#ffd9e0;
      font-weight:700;
    }

    .proof-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:1rem;
    }
    .stat-card{
      padding:1.2rem;
      border-radius: 26px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      transition: var(--transition);
      min-height: 170px;
    }
    .stat-card:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-strong);
    }
    .stat-num{
      font-size:2rem;
      font-weight:900;
      line-height:1;
      letter-spacing:-.03em;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      margin-bottom:.6rem;
    }
    .stat-card h4{
      margin:0 0 .4rem;
      font-size:1.02rem;
      font-weight:800;
    }
    .stat-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.75;
    }

    .feature-wall{
      margin-top:1rem;
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:1rem;
    }
    .feature-card{
      padding:1.15rem;
      border-radius:24px;
      background:
        radial-gradient(circle at 10% 12%, rgba(255,77,109,.10), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #fefefe 100%);
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      min-height: 165px;
    }
    .feature-card .mini-badge{
      display:inline-flex;
      align-items:center;
      padding:.36rem .68rem;
      border-radius:999px;
      background: rgba(255,77,109,.10);
      color: var(--accent);
      font-size:.78rem;
      font-weight:800;
      margin-bottom:.7rem;
    }
    .feature-card h4{
      margin:0 0 .4rem;
      font-size:1rem;
      font-weight:800;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      line-height:1.72;
      font-size:.92rem;
    }

    .voices-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .voice-card{
      padding:1.2rem;
      border-radius: 26px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      box-shadow: var(--shadow);
      min-height: 220px;
      position:relative;
    }
    .voice-card::before{
      content:"“";
      position:absolute;
      right:1rem;
      top:.4rem;
      font-size:4rem;
      line-height:1;
      color: rgba(255,77,109,.10);
      font-weight:900;
      pointer-events:none;
    }
    .voice-head{
      display:flex;
      align-items:center;
      gap:.8rem;
      margin-bottom:1rem;
    }
    .avatar{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, rgba(255,77,109,.16), rgba(168,85,247,.16));
      color: var(--accent);
      font-weight:900;
      border:1px solid rgba(255,77,109,.12);
    }
    .voice-head strong{
      display:block;
      font-size:1rem;
      font-weight:800;
    }
    .voice-head span{
      color:var(--muted-2);
      font-size:.88rem;
    }
    .voice-card p{
      margin:0;
      color:var(--text);
      line-height:1.85;
      font-size:.97rem;
    }

    .faq-wrap{
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .accordion{
      --bs-accordion-border-color: transparent;
      --bs-accordion-btn-focus-box-shadow: none;
      --bs-accordion-active-bg: rgba(255,77,109,.06);
      --bs-accordion-active-color: var(--text);
      --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff4d6d'%3e%3cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    }
    .accordion-item{
      border:0;
      border-bottom:1px solid rgba(24,25,34,.08);
      background:transparent;
    }
    .accordion-item:last-child{ border-bottom:0; }
    .accordion-button{
      padding:1.1rem 1.25rem;
      font-weight:800;
      color:var(--text);
      background:#fff;
      box-shadow:none;
    }
    .accordion-button:not(.collapsed){
      color: var(--text);
      background: rgba(255,77,109,.05);
    }
    .accordion-button:focus{
      box-shadow:none;
      border-color:transparent;
    }
    .accordion-body{
      padding: 0 1.25rem 1.15rem;
      color: var(--muted);
      line-height:1.9;
    }

    .cta-section{
      padding: 4.4rem 0 4.8rem;
    }
    .cta-box{
      position:relative;
      overflow:hidden;
      border-radius: 32px;
      background:
        radial-gradient(circle at 15% 20%, rgba(255,77,109,.18), transparent 22%),
        radial-gradient(circle at 88% 20%, rgba(168,85,247,.15), transparent 20%),
        linear-gradient(135deg, #141722 0%, #1d2030 100%);
      color:#fff;
      border:1px solid rgba(255,255,255,.06);
      box-shadow: 0 28px 60px rgba(13,14,20,.20);
    }
    .cta-box::after{
      content:"";
      position:absolute;
      inset:auto -10% -30% auto;
      width:320px;
      height:320px;
      border-radius:50%;
      background: radial-gradient(circle, rgba(255,77,109,.18), transparent 65%);
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      padding:1.4rem;
    }
    .cta-copy{
      padding:.3rem 0;
    }
    .cta-copy h2{
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight:900;
      line-height:1.12;
      margin:0 0 .7rem;
      letter-spacing:-.03em;
    }
    .cta-copy p{
      margin:0;
      max-width: 48rem;
      color: rgba(255,255,255,.80);
      line-height:1.85;
    }
    .cta-form{
      margin-top:1.2rem;
      display:grid;
      grid-template-columns: 1fr auto auto;
      gap:.8rem;
      align-items:center;
    }
    .cta-input{
      width:100%;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color:#fff;
      padding:.95rem 1.1rem;
      outline:none;
      transition: var(--transition);
    }
    .cta-input::placeholder{
      color: rgba(255,255,255,.58);
    }
    .cta-input:focus{
      border-color: rgba(255,77,109,.45);
      box-shadow: 0 0 0 .2rem rgba(255,77,109,.16);
    }
    .cta-note{
      margin-top:.8rem;
      color: rgba(255,255,255,.66);
      font-size:.9rem;
    }

    .footer{
      padding: 2.2rem 0 2.8rem;
      color: var(--muted);
    }
    .footer-shell{
      border-top:1px solid rgba(24,25,34,.10);
      padding-top:1.5rem;
    }
    .footer-brand{
      font-size:1.05rem;
      font-weight:800;
      color: var(--text);
      margin-bottom:.7rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem 1rem;
    }
    .footer-links a{
      color: var(--muted);
      transition: var(--transition);
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color: var(--accent);
    }
    .footer-note{
      font-size:.92rem;
      color: var(--muted-2);
      line-height:1.8;
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .7rem;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(24,25,34,.09);
      color:var(--muted);
      font-size:.86rem;
      box-shadow: 0 10px 22px rgba(28,29,37,.05);
    }

    .btn-focus:focus-visible,
    .topic-btn:focus-visible,
    .channel-link:focus-visible,
    .chip:focus-visible,
    .hot-tag:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible{
      outline: none;
    }

    .mobile-only{ display:none; }

    @media (max-width: 991.98px){
      .channel-row{ display:none; }
      .mobile-search{ display:block; }
      .hero-inner{
        padding: 1.2rem 1rem 1rem;
      }
      .hero-frame{
        grid-template-columns: 1fr;
      }
      .poster-card,
      .stack-card{
        min-height:auto;
      }
      .topic-grid,
      .pain-grid,
      .updates-grid,
      .path-grid,
      .proof-grid,
      .feature-wall,
      .voices-grid{
        grid-template-columns: 1fr 1fr;
      }
      .cta-form{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 767.98px){
      .brand-row{
        gap:.75rem;
      }
      .brand-mark .mark-name{
        font-size: .98rem;
      }
      .search-wrap{
        display:none;
      }
      .hero h1{
        font-size: clamp(2rem, 12vw, 3rem);
      }
      .hero-lead{
        font-size: .98rem;
      }
      .section{
        padding: 3.5rem 0;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .topic-grid,
      .pain-grid,
      .updates-grid,
      .path-grid,
      .proof-grid,
      .feature-wall,
      .voices-grid{
        grid-template-columns: 1fr;
      }
      .kpi-grid{
        grid-template-columns: 1fr;
      }
      .hero-meta{
        gap:.55rem;
      }
      .cta-inner{
        padding:1.1rem;
      }
    }

    @media (max-width: 575.98px){
      .hero-shell{
        border-radius: 26px;
      }
      .hero-actions{
        gap:.6rem;
      }
      .btn-accent,
      .btn-ghost{
        width:100%;
        justify-content:center;
      }
      .poster-card,
      .stack-card,
      .topic-card,
      .pain-card,
      .flow-card,
      .news-list,
      .side-card,
      .stat-card,
      .feature-card,
      .voice-card,
      .faq-wrap{
        border-radius: 22px;
      }
      .topic-card,
      .pain-card,
      .stat-card,
      .feature-card,
      .voice-card{
        min-height:auto;
      }
      .footer-links{
        gap:.5rem .8rem;
      }
    }

/* roulang page: category2 */
:root{
      --bg:#0d1016;
      --bg-2:#121725;
      --panel:#151b27;
      --panel-2:#1a2232;
      --line:rgba(255,255,255,.09);
      --text:#f3f5fb;
      --muted:rgba(243,245,251,.72);
      --soft:rgba(243,245,251,.5);
      --accent:#ff4d7d;
      --accent-2:#ff8a3d;
      --accent-3:#8d5bff;
      --good:#38d39f;
      --warn:#ffcc66;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:18px;
      --radius-sm:14px;
      --shadow:0 18px 60px rgba(0,0,0,.32);
      --shadow-soft:0 12px 32px rgba(0,0,0,.22);
      --container:1180px;
      --gap:1.25rem;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(255,77,125,.18), transparent 26%),
        radial-gradient(circle at 85% 14%, rgba(141,91,255,.14), transparent 20%),
        radial-gradient(circle at 70% 82%, rgba(255,138,61,.12), transparent 24%),
        linear-gradient(180deg, #0b0e14 0%, #0d1016 42%, #0f1320 100%);
      color:var(--text);
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.24), transparent 78%);
      opacity:.24;
      z-index:0;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,77,125,.28);color:#fff}
    :focus-visible{outline:3px solid rgba(255,77,125,.34);outline-offset:2px}
    .container-narrow{max-width:var(--container)}
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter:blur(18px);
      background:linear-gradient(180deg, rgba(10,12,18,.92), rgba(10,12,18,.78));
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 28px rgba(0,0,0,.14);
    }
    .topbar{
      padding:.9rem 0 .65rem;
    }
    .brand-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .brand-link{
      display:inline-flex;
      align-items:center;
      gap:.8rem;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--text);
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(255,77,125,1), rgba(255,138,61,1));
      color:#fff;
      box-shadow:0 14px 28px rgba(255,77,125,.22);
      font-size:1rem;
      flex:0 0 auto;
    }
    .brand-text{
      font-size:1.08rem;
      line-height:1.1;
    }
    .brand-sub{
      display:block;
      font-weight:500;
      font-size:.78rem;
      color:var(--muted);
      margin-top:.16rem;
    }
    .brand-actions{
      display:flex;
      align-items:center;
      gap:.65rem;
    }
    .menu-btn{
      display:none;
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.1);
      color:var(--text);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:var(--shadow-soft);
    }
    .search-shell{
      margin-top:.9rem;
      display:flex;
      align-items:center;
      gap:.9rem;
      flex-wrap:wrap;
    }
    .search-box{
      flex:1 1 360px;
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.72rem .82rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .search-box i{color:var(--soft)}
    .search-input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--text);
      min-width:0;
    }
    .search-input::placeholder{color:rgba(243,245,251,.42)}
    .search-btn{
      border:0;
      border-radius:999px;
      padding:.72rem 1.1rem;
      background:linear-gradient(135deg, var(--accent), #ff6d59);
      color:#fff;
      font-weight:700;
      box-shadow:0 14px 28px rgba(255,77,125,.22);
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
      white-space:nowrap;
    }
    .search-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 36px rgba(255,77,125,.28);
      filter:brightness(1.02);
    }
    .search-btn:active{transform:translateY(0)}
    .trend-line{
      display:flex;
      align-items:center;
      gap:.55rem;
      color:var(--muted);
      font-size:.92rem;
      overflow:hidden;
      white-space:nowrap;
    }
    .trend-line span{
      color:#fff;
      opacity:.78;
      font-size:.84rem;
      padding:.32rem .68rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }
    .channel-bar{
      padding:0 0 .95rem;
    }
    .channel-nav{
      display:flex;
      align-items:center;
      gap:.6rem;
      overflow-x:auto;
      scrollbar-width:none;
      padding-bottom:.12rem;
    }
    .channel-nav::-webkit-scrollbar{display:none}
    .channel-link{
      flex:0 0 auto;
      padding:.68rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      color:rgba(243,245,251,.82);
      background:rgba(255,255,255,.03);
      font-weight:700;
      transition:transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
    }
    .channel-link:hover{
      transform:translateY(-1px);
      color:#fff;
      border-color:rgba(255,77,125,.3);
      background:rgba(255,77,125,.1);
      box-shadow:0 12px 24px rgba(0,0,0,.18);
    }
    .channel-link.active{
      color:#fff;
      border-color:rgba(255,77,125,.5);
      background:linear-gradient(135deg, rgba(255,77,125,.96), rgba(255,138,61,.92));
      box-shadow:0 16px 30px rgba(255,77,125,.22);
    }
    .chip-row{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex-wrap:wrap;
      margin-top:.9rem;
    }
    .chip-label{
      font-size:.82rem;
      color:var(--muted);
      margin-right:.15rem;
    }
    .trend-chip{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:rgba(243,245,251,.84);
      padding:.48rem .82rem;
      border-radius:999px;
      font-size:.88rem;
      transition:all .22s ease;
      cursor:pointer;
      user-select:none;
    }
    .trend-chip:hover,
    .trend-chip.active{
      color:#fff;
      border-color:rgba(255,77,125,.35);
      background:rgba(255,77,125,.14);
      transform:translateY(-1px);
    }
    .hero{
      position:relative;
      padding:2.35rem 0 1.4rem;
      z-index:1;
    }
    .hero-shell{
      position:relative;
      border:1px solid rgba(255,255,255,.09);
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,77,125,.14), transparent 36%),
        linear-gradient(225deg, rgba(141,91,255,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(circle at 15% 20%, rgba(255,77,125,.24), transparent 26%),
        radial-gradient(circle at 82% 24%, rgba(141,91,255,.16), transparent 22%),
        radial-gradient(circle at 75% 82%, rgba(255,138,61,.14), transparent 24%);
      opacity:.8;
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      padding:2rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.4rem .8rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:#fff;
      font-size:.84rem;
      letter-spacing:.2px;
      margin-bottom:1rem;
    }
    .eyebrow i{
      color:#ff96aa;
    }
    .hero-title{
      font-size:clamp(2rem, 4vw, 4rem);
      line-height:1.06;
      font-weight:800;
      letter-spacing:-.03em;
      margin:0 0 1rem;
      max-width:11ch;
    }
    .hero-sub{
      max-width:42rem;
      color:var(--muted);
      font-size:1.03rem;
      margin:0 0 1.35rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      align-items:center;
      margin-bottom:1.2rem;
    }
    .btn-soft,
    .btn-strong{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.88rem 1.15rem;
      border-radius:999px;
      font-weight:700;
      border:1px solid transparent;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
    }
    .btn-strong{
      background:linear-gradient(135deg, var(--accent), #ff7c4c);
      color:#fff;
      box-shadow:0 18px 36px rgba(255,77,125,.28);
    }
    .btn-soft{
      color:#fff;
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
    }
    .btn-soft:hover,
    .btn-strong:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 40px rgba(0,0,0,.2);
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .mini-badge{
      padding:.45rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      color:rgba(243,245,251,.86);
      font-size:.84rem;
    }
    .hero-panel{
      position:relative;
      padding:1.2rem;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(20,25,36,.92), rgba(20,25,36,.76));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      min-height:100%;
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.9rem;
    }
    .panel-head strong{
      font-size:1rem;
    }
    .panel-head small{
      color:var(--muted);
    }
    .panel-list{
      display:grid;
      gap:.75rem;
      margin:0;
      padding:0;
      list-style:none;
    }
    .panel-item{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
      padding:.78rem .82rem;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
    }
    .panel-step{
      width:30px;height:30px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,77,125,.96), rgba(255,138,61,.92));
      color:#fff;
      font-weight:800;
      flex:0 0 auto;
      font-size:.84rem;
    }
    .panel-item p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .section{
      position:relative;
      z-index:1;
      padding:1.1rem 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.4rem, 2.2vw, 2rem);
      font-weight:800;
      letter-spacing:-.02em;
    }
    .section-sub{
      margin:.45rem 0 0;
      color:var(--muted);
      max-width:56rem;
    }
    .section-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .75rem;
      border-radius:999px;
      background:rgba(255,77,125,.1);
      border:1px solid rgba(255,77,125,.2);
      color:#ffd7e1;
      font-size:.84rem;
      white-space:nowrap;
    }
    .pain-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:1rem;
    }
    .soft-card,
    .result-card,
    .proof-card,
    .quote-card,
    .cta-card,
    .browse-card{
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
    }
    .soft-card{
      padding:1.05rem;
      height:100%;
      transition:transform .22s ease, border-color .22s ease, background .22s ease;
    }
    .soft-card:hover,
    .result-card:hover,
    .quote-card:hover,
    .proof-card:hover,
    .cta-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,77,125,.22);
    }
    .soft-icon{
      width:46px;height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,77,125,.96), rgba(255,138,61,.9));
      color:#fff;
      margin-bottom:.9rem;
      box-shadow:0 14px 26px rgba(255,77,125,.2);
    }
    .soft-card h3{
      font-size:1.02rem;
      margin:0 0 .55rem;
      font-weight:800;
    }
    .soft-card p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.62;
    }
    .solution-wrap{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:1rem;
    }
    .browse-card{
      padding:1.15rem;
    }
    .browse-card h3{
      margin:0 0 .5rem;
      font-size:1.05rem;
      font-weight:800;
    }
    .browse-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .toolbar{
      margin-top:1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding:1rem;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg, rgba(18,23,37,.94), rgba(18,23,37,.78));
    }
    .filter-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .filter-tab{
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:rgba(243,245,251,.82);
      border-radius:999px;
      padding:.6rem .95rem;
      font-weight:700;
      transition:all .22s ease;
    }
    .filter-tab:hover,
    .filter-tab.active{
      background:linear-gradient(135deg, rgba(255,77,125,.95), rgba(255,138,61,.9));
      border-color:transparent;
      color:#fff;
      transform:translateY(-1px);
    }
    .toolbar-right{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .sort-select{
      min-width:180px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:var(--text);
      padding:.68rem 1rem;
      outline:none;
    }
    .sort-select option{color:#0f1117}
    .results-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0,1fr));
      gap:1rem;
      margin-top:1rem;
    }
    .result-card{
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:100%;
      transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }
    .result-card.lead{
      grid-column:span 6;
    }
    .result-card.regular{
      grid-column:span 3;
    }
    .card-media{
      position:relative;
      min-height:156px;
      padding:1rem;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      background:
        linear-gradient(135deg, rgba(255,77,125,.94), rgba(255,138,61,.58)),
        radial-gradient(circle at 85% 10%, rgba(255,255,255,.24), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.02));
    }
    .result-card:nth-child(2n) .card-media{
      background:
        linear-gradient(135deg, rgba(141,91,255,.95), rgba(255,77,125,.56)),
        radial-gradient(circle at 80% 12%, rgba(255,255,255,.24), transparent 22%);
    }
    .result-card:nth-child(3n) .card-media{
      background:
        linear-gradient(135deg, rgba(255,138,61,.96), rgba(255,77,125,.52)),
        radial-gradient(circle at 82% 12%, rgba(255,255,255,.24), transparent 22%);
    }
    .media-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.42rem .72rem;
      border-radius:999px;
      background:rgba(10,12,18,.22);
      border:1px solid rgba(255,255,255,.16);
      color:#fff;
      font-size:.82rem;
      font-weight:700;
      backdrop-filter:blur(8px);
    }
    .media-flag{
      padding:.4rem .6rem;
      border-radius:12px;
      background:rgba(10,12,18,.2);
      color:#fff;
      font-weight:800;
      font-size:.78rem;
      border:1px solid rgba(255,255,255,.14);
      align-self:flex-start;
    }
    .card-body{
      padding:1rem 1rem 1.05rem;
      display:flex;
      flex-direction:column;
      gap:.7rem;
      flex:1 1 auto;
    }
    .card-tags{
      display:flex;
      gap:.45rem;
      flex-wrap:wrap;
    }
    .tag{
      padding:.3rem .56rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.05);
      color:rgba(243,245,251,.78);
      font-size:.78rem;
    }
    .result-title{
      margin:0;
      font-size:1.02rem;
      font-weight:800;
      line-height:1.42;
      letter-spacing:-.01em;
    }
    .result-desc{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.68;
    }
    .card-actions{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding-top:.2rem;
    }
    .mini-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:#ffd6df;
      font-weight:700;
      font-size:.92rem;
    }
    .mini-link:hover{color:#fff}
    .result-note{
      color:var(--soft);
      font-size:.8rem;
    }
    .proof-wrap{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:1rem;
      align-items:stretch;
      margin-top:1rem;
    }
    .proof-card{
      padding:1.1rem;
    }
    .stat-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.85rem;
    }
    .stat-box{
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      padding:1rem;
    }
    .stat-num{
      font-size:1.65rem;
      font-weight:800;
      line-height:1;
      margin-bottom:.35rem;
      background:linear-gradient(135deg, #fff, #ffd6e2 55%, #ffc98a);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .stat-label{
      font-weight:700;
      margin-bottom:.2rem;
    }
    .stat-desc{
      margin:0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .proof-list{
      margin:1rem 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.72rem;
    }
    .proof-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      color:rgba(243,245,251,.86);
    }
    .proof-list i{
      color:#ff8a3d;
      margin-top:.22rem;
    }
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .quote-card{
      padding:1.05rem;
    }
    .quote-top{
      display:flex;
      align-items:center;
      gap:.75rem;
      margin-bottom:.8rem;
    }
    .avatar{
      width:44px;height:44px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,77,125,.95), rgba(255,138,61,.9));
      color:#fff;
      font-weight:800;
      box-shadow:0 12px 24px rgba(255,77,125,.2);
      flex:0 0 auto;
    }
    .quote-name{
      margin:0;
      font-weight:800;
    }
    .quote-meta{
      margin:0;
      color:var(--muted);
      font-size:.86rem;
    }
    .quote-card p{
      margin:0;
      color:rgba(243,245,251,.86);
      line-height:1.75;
      font-size:.95rem;
    }
    .accordion{
      display:grid;
      gap:.75rem;
    }
    .accordion-item{
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      box-shadow:var(--shadow-soft);
    }
    .accordion-button{
      background:transparent;
      color:var(--text);
      font-weight:700;
      padding:1rem 1.1rem;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:#fff;
      background:rgba(255,77,125,.1);
    }
    .accordion-button::after{
      filter:brightness(1.6);
    }
    .accordion-body{
      color:var(--muted);
      padding:0 1.1rem 1rem;
    }
    .cta-shell{
      padding:1rem 0 2rem;
    }
    .cta-card{
      position:relative;
      overflow:hidden;
      padding:1.35rem;
      background:
        linear-gradient(135deg, rgba(255,77,125,.18), rgba(141,91,255,.12)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }
    .cta-card::after{
      content:"";
      position:absolute;
      inset:auto -12% -30% auto;
      width:240px;
      height:240px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,61,.22), transparent 68%);
      pointer-events:none;
    }
    .cta-grid{
      position:relative;
      display:grid;
      grid-template-columns:1fr auto;
      gap:1rem;
      align-items:center;
    }
    .cta-title{
      margin:0 0 .5rem;
      font-size:1.5rem;
      font-weight:800;
    }
    .cta-text{
      margin:0;
      color:var(--muted);
      max-width:56rem;
    }
    .cta-form{
      display:flex;
      align-items:center;
      gap:.7rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .cta-input{
      min-width:min(360px, 100%);
      padding:.82rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
      color:var(--text);
      outline:none;
    }
    .cta-input::placeholder{color:rgba(243,245,251,.42)}
    .cta-helper{
      margin-top:.8rem;
      color:rgba(243,245,251,.62);
      font-size:.87rem;
    }
    .footer{
      position:relative;
      z-index:1;
      padding:1.2rem 0 2rem;
      margin-top:.4rem;
    }
    .footer-shell{
      padding:1.3rem 0 0;
      border-top:1px solid rgba(255,255,255,.09);
    }
    .footer-brand{
      font-weight:800;
      font-size:1.05rem;
      margin-bottom:.65rem;
    }
    .footer-note{
      color:var(--muted);
      line-height:1.8;
      font-size:.94rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem 1rem;
      align-items:center;
    }
    .footer-links a{
      color:rgba(243,245,251,.82);
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateY(-1px);
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.42rem .72rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
      color:#fff;
      font-size:.84rem;
    }
    .mobile-only{display:none}
    .offcanvas{
      background:linear-gradient(180deg, rgba(13,16,22,.98), rgba(16,20,29,.98));
      color:var(--text);
      border-left:1px solid rgba(255,255,255,.09);
    }
    .offcanvas-header{
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .offcanvas .btn-close{
      filter:invert(1) grayscale(100%) brightness(200%);
    }
    .offcanvas-body .channel-nav{
      display:grid;
      gap:.65rem;
      overflow:visible;
    }
    .offcanvas-body .channel-link{
      width:100%;
      text-align:center;
    }
    .offcanvas-body .chip-row{
      margin-top:1rem;
    }
    @media (max-width: 1199.98px){
      .pain-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .quote-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .proof-wrap,
      .solution-wrap,
      .cta-grid{grid-template-columns:1fr}
      .result-card.lead,
      .result-card.regular{grid-column:span 6}
    }
    @media (max-width: 991.98px){
      .menu-btn{display:inline-grid;place-items:center}
      .desktop-only{display:none}
      .mobile-only{display:inline-flex}
      .hero-inner{padding:1.4rem}
      .hero-title{max-width:100%}
      .hero-sub{max-width:100%}
      .results-grid{grid-template-columns:repeat(6, minmax(0,1fr))}
      .result-card.lead,
      .result-card.regular{grid-column:span 6}
      .search-box{flex:1 1 100%}
      .trend-line{flex-wrap:wrap;white-space:normal}
    }
    @media (max-width: 767.98px){
      .topbar{padding:.8rem 0 .55rem}
      .search-shell{gap:.7rem}
      .hero{padding:1.2rem 0 .9rem}
      .hero-shell{border-radius:24px}
      .hero-inner{padding:1.15rem}
      .section{padding:.9rem 0}
      .pain-grid,
      .quote-grid,
      .stat-grid{grid-template-columns:1fr}
      .results-grid{grid-template-columns:1fr}
      .result-card.lead,
      .result-card.regular{grid-column:span 1}
      .toolbar{padding:.9rem}
      .toolbar-right{width:100%;margin-left:0}
      .sort-select{width:100%}
      .cta-input{min-width:100%}
      .cta-card{padding:1.15rem}
      .cta-grid{gap:1.1rem}
    }
    @media (max-width: 575.98px){
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text{font-size:1rem}
      .brand-sub{font-size:.72rem}
      .hero-title{font-size:1.9rem}
      .section-title{font-size:1.3rem}
      .panel-item{padding:.72rem}
      .card-media{min-height:138px}
      .footer-links{gap:.6rem .9rem}
    }

/* roulang page: category1 */
:root{
      --bg:#0c0f14;
      --bg-soft:#11151d;
      --panel:#151b24;
      --panel-2:#1a2230;
      --card:#171d28;
      --card-2:#1f2735;
      --text:#f6f7fb;
      --muted:#a6afc3;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(255,255,255,.14);
      --accent:#ff4f7d;
      --accent-2:#ff8a3d;
      --accent-3:#a855f7;
      --good:#22c55e;
      --shadow:0 24px 60px rgba(0,0,0,.36);
      --shadow-soft:0 16px 40px rgba(0,0,0,.24);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:
        radial-gradient(circle at 10% 10%, rgba(255,79,125,.14), transparent 24%),
        radial-gradient(circle at 90% 12%, rgba(168,85,247,.11), transparent 20%),
        radial-gradient(circle at 78% 78%, rgba(255,138,61,.12), transparent 22%),
        linear-gradient(180deg, #0b0e13 0%, #0d1117 100%);
      color:var(--text);
      line-height:1.72;
      overflow-x:hidden;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:auto;
      pointer-events:none;
      z-index:-1;
    }
    body::before{
      top:8%;
      right:-8%;
      width:24rem;
      height:24rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,79,125,.12), transparent 62%);
      filter:blur(18px);
      opacity:.75;
    }
    body::after{
      left:-10%;
      bottom:-8%;
      width:28rem;
      height:28rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,61,.10), transparent 58%);
      filter:blur(22px);
      opacity:.8;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:transform .22s ease, opacity .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
    }
    a:hover{color:inherit}
    img{max-width:100%;display:block}
    button,input,textarea,select{
      font:inherit;
    }
    ::selection{
      background:rgba(255,79,125,.3);
      color:#fff;
    }
    .container-narrow{
      max-width:var(--container);
      padding-left:1.05rem;
      padding-right:1.05rem;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      background:rgba(11,14,19,.76);
      border-bottom:1px solid rgba(255,255,255,.06);
      box-shadow:0 12px 30px rgba(0,0,0,.18);
    }
    .brand-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.82rem 0;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.72rem;
      font-weight:800;
      font-size:1.08rem;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .brand-mark::before{
      content:"";
      width:12px;
      height:12px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 6px rgba(255,79,125,.12);
      flex:0 0 auto;
    }
    .brand-meta{
      color:var(--muted);
      font-size:.92rem;
      display:flex;
      gap:.7rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .brand-meta .dot{
      width:4px;
      height:4px;
      border-radius:50%;
      background:rgba(255,255,255,.38);
      display:inline-block;
    }
    .nav-wrap{
      padding:0 0 .9rem;
    }
    .nav-shell{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      align-items:center;
      justify-content:space-between;
    }
    .channel-nav{
      display:flex;
      gap:.55rem;
      flex-wrap:nowrap;
      overflow-x:auto;
      scrollbar-width:none;
      white-space:nowrap;
      padding-bottom:.12rem;
      max-width:100%;
    }
    .channel-nav::-webkit-scrollbar{display:none}
    .channel-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.72rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-weight:700;
      font-size:.95rem;
      line-height:1;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .channel-link:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
      box-shadow:0 12px 24px rgba(0,0,0,.16);
    }
    .channel-link.active{
      background:linear-gradient(135deg, rgba(255,79,125,.22), rgba(255,138,61,.16));
      border-color:rgba(255,79,125,.34);
      box-shadow:0 18px 30px rgba(255,79,125,.14);
      color:#fff;
    }
    .search-box{
      display:flex;
      align-items:center;
      gap:.45rem;
      min-width:min(100%, 360px);
      flex:1 1 280px;
      max-width:420px;
      margin-left:auto;
    }
    .search-box input{
      width:100%;
      height:48px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      color:var(--text);
      padding:0 1rem;
      outline:none;
      box-shadow:none;
      transition:border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .search-box input::placeholder{color:#8d96aa}
    .search-box input:focus{
      border-color:rgba(255,79,125,.52);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 .18rem rgba(255,79,125,.12);
    }
    .search-box button{
      height:48px;
      border:0;
      border-radius:999px;
      padding:0 1.05rem;
      color:#fff;
      font-weight:800;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 14px 26px rgba(255,79,125,.22);
      white-space:nowrap;
    }
    .search-box button:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 30px rgba(255,79,125,.28);
      filter:saturate(1.04);
    }
    .trend-bar{
      display:flex;
      align-items:center;
      gap:.55rem;
      overflow-x:auto;
      white-space:nowrap;
      padding:0 0 1rem;
      scrollbar-width:none;
    }
    .trend-bar::-webkit-scrollbar{display:none}
    .trend-label{
      display:inline-flex;
      align-items:center;
      padding:.4rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:#ffd8e3;
      font-size:.86rem;
      font-weight:700;
      letter-spacing:.04em;
      flex:0 0 auto;
    }
    .trend-chip{
      display:inline-flex;
      align-items:center;
      padding:.55rem .8rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:.92rem;
      flex:0 0 auto;
    }
    .trend-chip:hover{
      color:#fff;
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }
    .mobile-trigger{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:var(--text);
      padding:.63rem .9rem;
      font-weight:700;
      box-shadow:none;
    }
    .mobile-trigger:hover{
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
    }
    .mobile-trigger:focus{
      box-shadow:0 0 0 .18rem rgba(255,79,125,.12);
    }
    .mobile-trigger .bars{
      width:16px;
      height:12px;
      position:relative;
      display:inline-block;
    }
    .mobile-trigger .bars::before,
    .mobile-trigger .bars::after,
    .mobile-trigger .bars span{
      content:"";
      position:absolute;
      left:0;
      right:0;
      height:2px;
      border-radius:99px;
      background:currentColor;
    }
    .mobile-trigger .bars::before{top:0}
    .mobile-trigger .bars span{top:5px}
    .mobile-trigger .bars::after{bottom:0}
    main{
      padding-bottom:1.25rem;
    }
    .hero{
      padding:1.35rem 0 .6rem;
      scroll-margin-top:160px;
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
      color:var(--muted);
      font-size:.92rem;
      margin-bottom:1rem;
    }
    .crumbs a{
      color:#dfe5f3;
      opacity:.9;
    }
    .crumbs span{
      color:#7f8798;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
      gap:1.08rem;
      align-items:stretch;
    }
    .hero-copy,
    .hero-panel,
    .section-shell,
    .footer-shell,
    .cta-band,
    .offcanvas-panel{
      background:linear-gradient(180deg, rgba(23,29,40,.98), rgba(18,23,32,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
    }
    .hero-copy{
      padding:2rem;
      position:relative;
      overflow:hidden;
    }
    .hero-copy::before{
      content:"";
      position:absolute;
      inset:-24% auto auto -20%;
      width:280px;
      height:280px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,79,125,.22), transparent 64%);
      filter:blur(4px);
      pointer-events:none;
    }
    .hero-copy::after{
      content:"";
      position:absolute;
      inset:auto -12% -30% auto;
      width:320px;
      height:320px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,61,.16), transparent 62%);
      filter:blur(6px);
      pointer-events:none;
    }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.44rem .84rem;
      border-radius:999px;
      background:rgba(255,79,125,.12);
      border:1px solid rgba(255,79,125,.24);
      color:#ffd8e4;
      font-weight:700;
      font-size:.86rem;
      letter-spacing:.03em;
      margin-bottom:1rem;
      position:relative;
      z-index:1;
    }
    .hero-badge i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:inline-block;
      box-shadow:0 0 0 5px rgba(255,79,125,.12);
    }
    .hero h1{
      font-size:clamp(2.1rem,4vw,3.7rem);
      line-height:1.06;
      letter-spacing:-.02em;
      margin:0 0 1rem;
      font-weight:800;
      position:relative;
      z-index:1;
    }
    .hero-lead{
      color:#d7dceb;
      font-size:1.04rem;
      max-width:40rem;
      margin-bottom:1.3rem;
      position:relative;
      z-index:1;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      position:relative;
      z-index:1;
      margin-bottom:1.2rem;
    }
    .btn-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.84rem 1.2rem;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      box-shadow:none;
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease, border-color .22s ease;
    }
    .btn-primary-accent{
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      color:#fff;
      box-shadow:0 16px 28px rgba(255,79,125,.24);
    }
    .btn-primary-accent:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 34px rgba(255,79,125,.3);
      color:#fff;
    }
    .btn-soft{
      background:rgba(255,255,255,.04);
      color:var(--text);
      border-color:var(--line);
    }
    .btn-soft:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.07);
      color:#fff;
      box-shadow:0 14px 26px rgba(0,0,0,.18);
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-bottom:1.2rem;
      position:relative;
      z-index:1;
    }
    .point-chip{
      display:inline-flex;
      align-items:center;
      padding:.5rem .76rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:#e4e9f4;
      font-size:.92rem;
    }
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.72rem;
      position:relative;
      z-index:1;
    }
    .hero-stat{
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
      min-height:94px;
    }
    .hero-stat strong{
      display:block;
      font-size:1.45rem;
      line-height:1.05;
      margin-bottom:.28rem;
      font-weight:800;
      color:#fff;
    }
    .hero-stat span{
      color:var(--muted);
      font-size:.92rem;
    }
    .hero-panel{
      padding:1.2rem;
      overflow:hidden;
      position:relative;
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      margin-bottom:.85rem;
    }
    .panel-title{
      font-weight:800;
      font-size:1.08rem;
    }
    .panel-note{
      color:var(--muted);
      font-size:.92rem;
    }
    .compare-list{
      display:grid;
      gap:.82rem;
    }
    .compare-card{
      padding:1rem;
      border-radius:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      position:relative;
      overflow:hidden;
    }
    .compare-card::after{
      content:"";
      position:absolute;
      inset:auto -18% -30% auto;
      width:160px;
      height:160px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.06), transparent 68%);
      pointer-events:none;
    }
    .compare-card.featured{
      background:linear-gradient(135deg, rgba(255,79,125,.20), rgba(255,138,61,.12));
      border-color:rgba(255,79,125,.24);
      box-shadow:0 18px 32px rgba(255,79,125,.11);
      transform:translateY(-2px);
    }
    .compare-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.7rem;
      margin-bottom:.45rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      padding:.34rem .62rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.03em;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      flex:0 0 auto;
    }
    .pill.hot{
      background:rgba(255,79,125,.16);
      border-color:rgba(255,79,125,.22);
      color:#ffd7e1;
    }
    .pill.new{
      background:rgba(255,138,61,.16);
      border-color:rgba(255,138,61,.22);
      color:#ffe6cf;
    }
    .compare-card h3{
      font-size:1.06rem;
      margin:0 0 .3rem;
      font-weight:800;
    }
    .compare-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .compare-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.7rem;
    }
    .meta-chip{
      display:inline-flex;
      align-items:center;
      padding:.42rem .66rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:#dbe2f1;
      font-size:.84rem;
    }
    .section-block{
      padding:1rem 0 0;
      scroll-margin-top:160px;
    }
    .section-shell{
      padding:1.55rem;
      position:relative;
      overflow:hidden;
    }
    .section-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent 0%, transparent 70%, rgba(255,255,255,.02) 100%),
        radial-gradient(circle at 100% 0%, rgba(255,79,125,.06), transparent 34%);
      pointer-events:none;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
      position:relative;
      z-index:1;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color:#ffd4e0;
      font-size:.84rem;
      font-weight:800;
      letter-spacing:.08em;
      margin-bottom:.35rem;
      text-transform:none;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 5px rgba(255,79,125,.12);
      flex:0 0 auto;
    }
    .section-title{
      font-size:clamp(1.45rem,2.8vw,2.2rem);
      line-height:1.15;
      margin:0;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:.35rem 0 0;
      color:var(--muted);
      max-width:48rem;
      position:relative;
      z-index:1;
    }
    .tag-grid{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      position:relative;
      z-index:1;
    }
    .hot-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.65rem .92rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:#e4e9f4;
      font-weight:600;
      font-size:.92rem;
    }
    .hot-chip:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.07);
      color:#fff;
    }
    .sub-panel{
      padding:1rem;
      border-radius:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      height:100%;
      position:relative;
      z-index:1;
    }
    .sub-panel .label{
      display:inline-flex;
      padding:.35rem .62rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#ffd7e1;
      font-size:.82rem;
      font-weight:800;
      margin-bottom:.8rem;
    }
    .sub-panel h3{
      font-size:1.08rem;
      font-weight:800;
      margin:0 0 .4rem;
    }
    .sub-panel p{
      color:var(--muted);
      margin:0;
      font-size:.95rem;
    }
    .dual-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1rem;
      position:relative;
      z-index:1;
    }
    .need-card{
      padding:1.18rem;
      border-radius:22px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      height:100%;
    }
    .need-card .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2rem;
      height:2rem;
      border-radius:999px;
      margin-bottom:.75rem;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 12px 24px rgba(255,79,125,.18);
    }
    .need-card h3{
      font-size:1.05rem;
      margin:0 0 .35rem;
      font-weight:800;
    }
    .need-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .flow-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.9rem;
      position:relative;
      z-index:1;
    }
    .flow-card{
      padding:1.12rem;
      border-radius:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      min-height:100%;
    }
    .flow-step{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.33rem .6rem;
      border-radius:999px;
      background:rgba(255,79,125,.14);
      border:1px solid rgba(255,79,125,.2);
      color:#ffdbe4;
      font-weight:800;
      font-size:.82rem;
      margin-bottom:.75rem;
    }
    .flow-card h3{
      margin:0 0 .36rem;
      font-size:1.02rem;
      font-weight:800;
    }
    .flow-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .topic-grid{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
      gap:1rem;
      align-items:stretch;
      position:relative;
      z-index:1;
    }
    .feature-card{
      padding:1.3rem;
      min-height:100%;
      overflow:hidden;
      position:relative;
    }
    .feature-card .thumb{
      height:220px;
      border-radius:22px;
      background:
        linear-gradient(135deg, rgba(255,79,125,.88), rgba(255,138,61,.78)),
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);
      position:relative;
      margin-bottom:1rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 18px 36px rgba(0,0,0,.22);
      overflow:hidden;
    }
    .feature-card .thumb::before,
    .feature-card .thumb::after{
      content:"";
      position:absolute;
      inset:auto;
      border-radius:50%;
      pointer-events:none;
    }
    .feature-card .thumb::before{
      width:220px;
      height:220px;
      right:-50px;
      top:-40px;
      background:radial-gradient(circle, rgba(255,255,255,.28), transparent 62%);
      opacity:.42;
    }
    .feature-card .thumb::after{
      width:100%;
      height:100%;
      inset:0;
      background-image:
        linear-gradient(transparent 0, transparent 48%, rgba(255,255,255,.08) 49%, transparent 50%),
        linear-gradient(90deg, transparent 0, transparent 48%, rgba(255,255,255,.08) 49%, transparent 50%);
      background-size:56px 56px;
      opacity:.24;
      mix-blend-mode:screen;
    }
    .feature-badge{
      display:inline-flex;
      align-items:center;
      padding:.38rem .62rem;
      border-radius:999px;
      background:rgba(17,21,29,.38);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:.82rem;
      font-weight:800;
      margin-bottom:.7rem;
      backdrop-filter:blur(8px);
    }
    .feature-card h3{
      font-size:1.16rem;
      margin:0 0 .35rem;
      font-weight:800;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
    }
    .feature-list{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.9rem;
    }
    .feature-list .meta-chip{
      background:rgba(255,255,255,.04);
    }
    .topic-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.9rem;
    }
    .topic-card{
      padding:1rem;
      border-radius:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      display:flex;
      flex-direction:column;
      gap:.85rem;
      min-height:100%;
    }
    .mini-thumb{
      height:96px;
      border-radius:18px;
      background:linear-gradient(135deg, rgba(168,85,247,.58), rgba(255,79,125,.54));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
      position:relative;
      overflow:hidden;
    }
    .mini-thumb.alt{
      background:linear-gradient(135deg, rgba(255,138,61,.58), rgba(255,79,125,.46));
    }
    .mini-thumb.deep{
      background:linear-gradient(135deg, rgba(38,197,110,.38), rgba(255,79,125,.42));
    }
    .mini-thumb::after{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:14px;
      border:1px dashed rgba(255,255,255,.2);
      opacity:.55;
    }
    .topic-card h3{
      margin:0;
      font-size:1rem;
      font-weight:800;
    }
    .topic-card p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
    }
    .topic-card .footer-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
      justify-content:space-between;
      margin-top:auto;
    }
    .topic-card .footer-row .meta-chip{
      margin-top:0;
    }
    .proof-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.9rem;
      position:relative;
      z-index:1;
    }
    .proof-card{
      padding:1.12rem;
      border-radius:22px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      min-height:100%;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .proof-card strong{
      display:block;
      font-size:1.6rem;
      line-height:1;
      margin-bottom:.34rem;
      font-weight:800;
    }
    .proof-card span{
      color:var(--muted);
      font-size:.94rem;
    }
    .proof-note{
      margin-top:1rem;
      padding:1rem 1.05rem;
      border-radius:20px;
      background:rgba(255,255,255,.03);
      border:1px dashed rgba(255,255,255,.12);
      color:#e4e9f4;
      position:relative;
      z-index:1;
    }
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
      position:relative;
      z-index:1;
    }
    .quote-card{
      padding:1.18rem;
      border-radius:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      min-height:100%;
    }
    .avatar{
      width:46px;
      height:46px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;
      font-weight:800;
      margin-bottom:.85rem;
      box-shadow:0 16px 24px rgba(255,79,125,.18);
    }
    .quote-text{
      margin:0;
      color:#edf1f8;
      font-size:1rem;
    }
    .quote-name{
      margin-top:.9rem;
      font-weight:800;
    }
    .quote-role{
      color:var(--muted);
      font-size:.92rem;
    }
    .faq-accordion{
      position:relative;
      z-index:1;
    }
    .faq-accordion .accordion-item{
      background:transparent;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      margin-bottom:.85rem;
    }
    .faq-accordion .accordion-item:last-child{margin-bottom:0}
    .faq-accordion .accordion-button{
      background:rgba(255,255,255,.04);
      color:var(--text);
      font-weight:800;
      box-shadow:none;
      padding:1rem 1.05rem;
    }
    .faq-accordion .accordion-button:not(.collapsed){
      background:linear-gradient(135deg, rgba(255,79,125,.16), rgba(255,138,61,.12));
      color:#fff;
    }
    .faq-accordion .accordion-button:focus{
      box-shadow:0 0 0 .18rem rgba(255,79,125,.12);
    }
    .faq-accordion .accordion-button::after{
      filter:brightness(12) saturate(0);
    }
    .faq-accordion .accordion-body{
      background:rgba(255,255,255,.03);
      color:#dce2f0;
      padding:1rem 1.05rem 1.1rem;
    }
    .cta-band{
      padding:1.7rem;
      overflow:hidden;
      position:relative;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:-20% auto auto 60%;
      width:300px;
      height:300px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,79,125,.2), transparent 64%);
      pointer-events:none;
    }
    .cta-band::after{
      content:"";
      position:absolute;
      inset:auto -5% -45% auto;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,61,.16), transparent 62%);
      pointer-events:none;
    }
    .cta-grid{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
      gap:1rem;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .cta-title{
      margin:0 0 .45rem;
      font-size:clamp(1.4rem,2.8vw,2rem);
      line-height:1.14;
      font-weight:800;
    }
    .cta-text{
      margin:0;
      color:var(--muted);
      max-width:46rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      justify-content:flex-end;
    }
    .footer{
      padding:1rem 0 2rem;
    }
    .footer-shell{
      padding:1.55rem;
    }
    .footer-brand{
      font-size:1.16rem;
      font-weight:800;
      margin-bottom:.6rem;
    }
    .footer-note{
      color:var(--muted);
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem 1rem;
    }
    .footer-links a{
      color:#dfe5f3;
      opacity:.92;
      font-weight:600;
    }
    .footer-links a:hover{
      opacity:1;
      color:#fff;
      transform:translateY(-1px);
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      padding:.42rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:#ffd9e4;
      font-weight:700;
      font-size:.86rem;
    }
    .offcanvas{
      background:#0f131a;
      color:var(--text);
      border-left:1px solid rgba(255,255,255,.08);
    }
    .offcanvas-header{
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .offcanvas .search-box{
      max-width:100%;
      margin-left:0;
      margin-top:.85rem;
    }
    .offcanvas .channel-nav{
      display:grid;
      gap:.55rem;
      overflow:visible;
      white-space:normal;
      width:100%;
    }
    .offcanvas .channel-link{
      width:100%;
      justify-content:space-between;
    }
    .offcanvas .trend-bar{
      padding:0;
      margin-top:.9rem;
    }
    .offcanvas .trend-chip{
      border-color:rgba(255,255,255,.12);
    }
    .mini-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      margin:1rem 0;
    }
    .glow-line{
      position:absolute;
      inset:auto 0 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,79,125,.28), rgba(255,138,61,.28), transparent);
      opacity:.75;
    }
    .accordion-button::after{
      margin-left:auto;
    }
    .link-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.8rem;
    }
    .link-row .meta-chip{
      background:rgba(255,255,255,.05);
    }
    .badge-soft{
      display:inline-flex;
      align-items:center;
      padding:.34rem .58rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:#e8edf8;
      font-size:.82rem;
      font-weight:700;
    }
    .title-split{
      color:#fff;
    }
    .subtle-ring{
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .touchable{
      cursor:pointer;
    }
    .touchable:active{
      transform:translateY(0) scale(.99);
    }
    .focus-outline:focus-visible{
      outline:none;
      box-shadow:0 0 0 .22rem rgba(255,79,125,.18);
    }
    .muted-link{
      color:var(--muted);
    }
    .muted-link:hover{
      color:#fff;
    }
    .small-spot{
      display:flex;
      align-items:center;
      gap:.55rem;
      margin-top:.85rem;
      color:var(--muted);
      font-size:.92rem;
    }
    .small-spot .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--good);
      box-shadow:0 0 0 5px rgba(34,197,94,.12);
      flex:0 0 auto;
    }
    @media (max-width: 1199.98px){
      .topic-grid,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
    }
    @media (max-width: 991.98px){
      .brand-row{
        align-items:flex-start;
      }
      .brand-meta{
        display:none;
      }
      .nav-shell{
        gap:.9rem;
      }
      .search-box{
        max-width:100%;
        flex-basis:100%;
        margin-left:0;
      }
      .hero-grid,
      .dual-grid,
      .flow-grid,
      .proof-grid,
      .quote-grid{
        grid-template-columns:1fr 1fr;
      }
      .hero-copy,
      .hero-panel,
      .section-shell,
      .cta-band,
      .footer-shell{
        border-radius:24px;
      }
    }
    @media (max-width: 767.98px){
      .hero{
        padding-top:1rem;
      }
      .hero-copy,
      .hero-panel,
      .section-shell,
      .cta-band,
      .footer-shell{
        padding:1.15rem;
      }
      .hero-grid,
      .dual-grid,
      .flow-grid,
      .proof-grid,
      .quote-grid,
      .topic-list{
        grid-template-columns:1fr;
      }
      .hero h1{
        font-size:clamp(1.9rem,9vw,2.6rem);
      }
      .hero-stats{
        grid-template-columns:1fr 1fr;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .search-box{
        flex-direction:row;
      }
      .search-box button{
        min-width:86px;
      }
      .panel-head{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 575.98px){
      .brand-row{
        padding:.72rem 0;
      }
      .mobile-trigger{
        padding:.58rem .8rem;
      }
      .search-box{
        gap:.4rem;
      }
      .search-box input,
      .search-box button{
        height:44px;
      }
      .hero-stat{
        min-height:86px;
        padding:.86rem;
      }
      .hero-stat strong{
        font-size:1.28rem;
      }
      .hero-actions{
        gap:.65rem;
      }
      .btn-pill{
        width:100%;
        justify-content:center;
      }
      .hero-stats{
        grid-template-columns:1fr;
      }
      .footer-links{
        flex-direction:column;
        gap:.55rem;
      }
    }