/* roulang page: index */
:root{
      --bg:#090b10;
      --bg-2:#0c1017;
      --panel:#111620;
      --panel-2:#151b27;
      --panel-3:#0f131d;
      --text:#f4f6fb;
      --muted:#a8b0bf;
      --soft:#7d8798;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.13);
      --accent:#ff8a3d;
      --accent-2:#ff5a76;
      --accent-3:#d93e7a;
      --accent-soft:rgba(255,138,61,.14);
      --shadow:0 18px 50px rgba(0,0,0,.36);
      --shadow-2:0 8px 24px rgba(0,0,0,.22);
      --radius-xl:24px;
      --radius-lg:20px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1380px;
      --space:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,138,61,.18), transparent 22%),
        radial-gradient(circle at 82% 12%, rgba(217,62,122,.12), transparent 24%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 18%),
        linear-gradient(180deg, #07090e 0%, #090b10 42%, #07090e 100%);
      overflow-x:hidden;
      line-height:1.75;
      letter-spacing:.01em;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 10%, transparent 90%, rgba(255,255,255,.02)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 30%);
      opacity:.75;
      z-index:0;
    }

    ::selection{
      background:rgba(255,138,61,.28);
      color:#fff;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,summary{font:inherit}
    button,input,textarea{
      border:none;
      outline:none;
    }
    button{cursor:pointer}
    input,textarea{
      background:transparent;
      color:var(--text);
    }

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(18px);
      background:rgba(7,9,14,.72);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 30px rgba(0,0,0,.18);
    }
    .site-header.is-scrolled{
      background:rgba(7,9,14,.84);
      border-bottom-color:rgba(255,255,255,.11);
    }

    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      min-height:78px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex:0 0 auto;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:16px;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.45), transparent 24%),
        linear-gradient(145deg, rgba(255,138,61,1), rgba(255,90,118,1));
      box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 26px rgba(255,138,61,.18);
      position:relative;
      overflow:hidden;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.28);
      box-shadow:inset 0 0 18px rgba(255,255,255,.08);
    }
    .brand strong{
      display:block;
      font-size:1rem;
      line-height:1.2;
      letter-spacing:.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand small{
      display:block;
      margin-top:2px;
      font-size:.78rem;
      color:var(--muted);
      line-height:1.2;
    }

    .site-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex:1 1 auto;
      min-width:0;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:10px 15px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
      white-space:nowrap;
    }
    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-link.active{
      color:var(--text);
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.09);
      box-shadow:0 0 0 1px rgba(255,138,61,.12);
      transform:translateY(-1px);
    }

    .header-tools{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }

    .header-search{
      display:flex;
      align-items:center;
      min-width:310px;
      padding:6px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      box-shadow:var(--shadow-2);
    }
    .header-search input{
      flex:1 1 auto;
      min-width:0;
      padding:9px 12px;
      font-size:.95rem;
      color:var(--text);
    }
    .header-search input::placeholder,
    textarea::placeholder{
      color:#7e8798;
    }
    .header-search button{
      flex:0 0 auto;
      padding:11px 15px;
      border-radius:999px;
      color:#fff;
      font-weight:700;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 20px rgba(255,90,118,.16);
      transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }
    .header-search button:hover,
    .header-search button:focus-visible{
      filter:brightness(1.06);
      transform:translateY(-1px);
      box-shadow:0 12px 22px rgba(255,90,118,.22);
    }

    .tool-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      white-space:nowrap;
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .tool-link:hover,
    .tool-link:focus-visible{
      transform:translateY(-1px);
      background:rgba(255,255,255,.06);
      border-color:rgba(255,138,61,.35);
    }

    .menu-toggle{
      display:none;
      position:relative;
      width:46px;
      height:46px;
      border-radius:14px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      box-shadow:var(--shadow-2);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(255,138,61,.35);
      background:rgba(255,255,255,.06);
    }
    .menu-toggle span{
      position:absolute;
      left:50%;
      width:18px;
      height:2px;
      border-radius:999px;
      background:var(--text);
      transform:translateX(-50%);
      transition:transform .25s ease, opacity .2s ease, top .25s ease;
    }
    .menu-toggle span:nth-child(1){top:15px}
    .menu-toggle span:nth-child(2){top:22px}
    .menu-toggle span:nth-child(3){top:29px}
    body.nav-open .menu-toggle span:nth-child(1){top:22px;transform:translateX(-50%) rotate(45deg)}
    body.nav-open .menu-toggle span:nth-child(2){opacity:0}
    body.nav-open .menu-toggle span:nth-child(3){top:22px;transform:translateX(-50%) rotate(-45deg)}

    .mobile-panel{
      display:none;
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(9,11,16,.98), rgba(9,11,16,.93));
      box-shadow:0 16px 40px rgba(0,0,0,.25);
      overflow:hidden;
      max-height:0;
      opacity:0;
      transition:max-height .3s ease, opacity .3s ease;
    }
    body.nav-open .mobile-panel{
      max-height:360px;
      opacity:1;
    }
    .mobile-panel .container{
      padding:14px 0 18px;
    }
    .panel-nav{
      display:grid;
      gap:8px;
      margin-top:14px;
    }
    .panel-nav .nav-link{
      justify-content:flex-start;
      width:100%;
      background:rgba(255,255,255,.03);
    }
    .mobile-search{
      min-width:0;
      width:100%;
    }

    .hero{
      padding:34px 0 18px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.18fr .82fr;
      gap:22px;
      align-items:stretch;
    }
    .hero-copy,
    .hero-panel,
    .feature-card,
    .stat-card,
    .entry-card,
    .path-card,
    .faq-item,
    .contact-card,
    .news-card,
    .empty-state,
    .status-card,
    .form-card{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(17,22,32,.96), rgba(12,16,23,.94));
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
    }
    .hero-copy{
      position:relative;
      overflow:hidden;
      padding:32px;
    }
    .hero-copy::before{
      content:"";
      position:absolute;
      inset:auto -8% -24% auto;
      width:320px;
      height:320px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,138,61,.17), transparent 62%);
      filter:blur(12px);
      pointer-events:none;
    }
    .hero-copy::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,138,61,.35), transparent);
      opacity:.8;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:7px 12px;
      border-radius:999px;
      color:#ffd7bf;
      background:rgba(255,138,61,.12);
      border:1px solid rgba(255,138,61,.22);
      font-size:.84rem;
      letter-spacing:.04em;
    }
    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(2.6rem, 5.6vw, 5rem);
      line-height:1.02;
      letter-spacing:-.05em;
    }
    .lead{
      margin:0;
      max-width:60ch;
      font-size:1.04rem;
      color:var(--muted);
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-2px);
    }
    .btn:active{
      transform:translateY(0);
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 14px 28px rgba(255,90,118,.18);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 16px 32px rgba(255,90,118,.24);
    }
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      border-color:rgba(255,138,61,.36);
      background:rgba(255,255,255,.07);
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:42px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
    }
    .meta-pill strong{
      color:#fff;
      font-size:1.05em;
    }
    .hero-pills{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      list-style:none;
      padding:0;
      margin:18px 0 0;
    }
    .hero-pills li,
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:36px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:#d7dde8;
      font-size:.88rem;
    }

    .hero-panel{
      position:relative;
      overflow:hidden;
      padding:22px;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:-20% -10% auto auto;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,90,118,.16), transparent 66%);
      filter:blur(8px);
      pointer-events:none;
    }
    .matrix{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    .mini-card{
      position:relative;
      min-height:176px;
      padding:18px 18px 16px;
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.1);
      box-shadow:0 16px 32px rgba(0,0,0,.28);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      isolation:isolate;
    }
    .mini-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 22%),
        radial-gradient(circle at 82% 28%, rgba(255,255,255,.1), transparent 20%);
      opacity:.72;
      z-index:0;
      pointer-events:none;
    }
    .mini-card:hover{
      transform:translateY(-4px) scale(1.02);
      box-shadow:0 22px 40px rgba(0,0,0,.32);
      border-color:rgba(255,138,61,.28);
    }
    .mini-card .badge{
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      width:max-content;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(10,12,18,.35);
      color:#fff1e5;
      border:1px solid rgba(255,255,255,.16);
      font-size:.76rem;
      letter-spacing:.06em;
    }
    .mini-card strong,
    .mini-card p,
    .mini-link{
      position:relative;
      z-index:1;
    }
    .mini-card strong{
      display:block;
      margin-top:14px;
      font-size:1.08rem;
      line-height:1.35;
    }
    .mini-card p{
      margin:8px 0 0;
      color:rgba(255,255,255,.84);
      font-size:.9rem;
      line-height:1.55;
    }
    .mini-link{
      display:inline-flex;
      margin-top:14px;
      color:#fff;
      font-weight:700;
      font-size:.92rem;
    }
    .mini-link::after{
      content:"→";
      margin-left:8px;
      transition:transform .2s ease;
    }
    .mini-card:hover .mini-link::after{
      transform:translateX(3px);
    }
    .mini-1{background:linear-gradient(145deg, #ff8a3d 0%, #3a2117 44%, #120f16 100%)}
    .mini-2{background:linear-gradient(145deg, #ff5a76 0%, #351722 44%, #120f16 100%)}
    .mini-3{background:linear-gradient(145deg, #7c4dff 0%, #221a3b 44%, #10131b 100%)}
    .mini-4{background:linear-gradient(145deg, #0fa3b1 0%, #16323b 44%, #10131b 100%)}

    .status-card{
      margin-top:14px;
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .status-top{
      display:flex;
      align-items:center;
      gap:10px;
      color:#ffe2cb;
      font-weight:700;
    }
    .status-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 7px rgba(255,138,61,.12);
      flex:0 0 auto;
    }
    .skeleton-lines{
      display:grid;
      gap:10px;
      margin:14px 0 10px;
    }
    .skeleton-lines span{
      display:block;
      height:12px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.05) 100%);
      background-size:220% 100%;
      animation:shimmer 2.1s linear infinite;
    }
    .skeleton-lines span:nth-child(2){width:86%}
    .skeleton-lines span:nth-child(3){width:72%}
    .status-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .tag{
      color:#ffe7d7;
      border-color:rgba(255,255,255,.08);
    }

    .section{
      padding:84px 0 0;
      position:relative;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:24px;
    }
    .section-head .copy{
      max-width:74ch;
    }
    .section-head h2{
      margin:8px 0 0;
      font-size:clamp(1.6rem, 2.6vw, 2.7rem);
      line-height:1.14;
      letter-spacing:-.03em;
    }
    .section-head p{
      margin:10px 0 0;
      color:var(--muted);
      max-width:70ch;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .feature-card{
      position:relative;
      padding:22px;
      min-height:168px;
      overflow:hidden;
      transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
    }
    .feature-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,138,61,.22);
      box-shadow:0 22px 40px rgba(0,0,0,.26);
    }
    .feature-card .icon{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,138,61,.11);
      border:1px solid rgba(255,138,61,.18);
      color:#ffd3b3;
      font-weight:800;
      margin-bottom:16px;
    }
    .feature-card h3{
      margin:0 0 10px;
      font-size:1.06rem;
      line-height:1.3;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }
    .mini-link-text{
      display:inline-flex;
      align-items:center;
      margin-top:16px;
      color:#ffd7bf;
      font-weight:700;
      font-size:.92rem;
    }
    .mini-link-text::after{
      content:"→";
      margin-left:8px;
      transition:transform .2s ease;
    }
    .feature-card:hover .mini-link-text::after{transform:translateX(3px)}

    .stat-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .stat-card{
      padding:24px 22px;
      transition:transform .22s ease, border-color .22s ease;
    }
    .stat-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,138,61,.18);
    }
    .stat-card .num{
      font-size:clamp(2rem, 4vw, 3rem);
      line-height:1;
      font-weight:800;
      margin-bottom:8px;
      background:linear-gradient(135deg, #fff, #ffd1b2 48%, #ff8a3d);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .stat-card .label{
      color:#ffd8bf;
      font-size:.92rem;
      margin-bottom:8px;
      font-weight:700;
    }
    .stat-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }

    .entrance-layout{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 320px;
      gap:20px;
      align-items:start;
    }
    .rail{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:minmax(260px, 1fr);
      gap:16px;
      overflow-x:auto;
      padding-bottom:10px;
      scroll-snap-type:x mandatory;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,255,255,.18) transparent;
    }
    .rail::-webkit-scrollbar{height:8px}
    .rail::-webkit-scrollbar-track{background:transparent}
    .rail::-webkit-scrollbar-thumb{
      background:rgba(255,255,255,.16);
      border-radius:999px;
    }

    .entry-card{
      position:relative;
      min-height:360px;
      overflow:hidden;
      scroll-snap-align:start;
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .entry-card:hover{
      transform:translateY(-4px) scale(1.01);
      border-color:rgba(255,138,61,.2);
      box-shadow:0 24px 44px rgba(0,0,0,.3);
    }
    .entry-card.is-hidden{
      display:none !important;
    }
    .entry-link{
      position:absolute;
      inset:0;
      z-index:1;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:20px;
      color:inherit;
    }
    .entry-cover{
      position:absolute;
      inset:0;
      z-index:0;
      background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.2), transparent 20%),
        radial-gradient(circle at 78% 24%, rgba(255,255,255,.08), transparent 20%);
      transform:scale(1);
      transition:transform .45s ease, filter .45s ease;
    }
    .entry-card:hover .entry-cover{
      transform:scale(1.05);
      filter:saturate(1.08);
    }
    .entry-cover::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:62%;
      background:linear-gradient(180deg, transparent, rgba(4,5,9,.68) 40%, rgba(4,5,9,.94));
    }
    .entry-a{background:linear-gradient(145deg, #ff8a3d 0%, #351c14 42%, #0f121a 100%)}
    .entry-b{background:linear-gradient(145deg, #ff5a76 0%, #321722 42%, #0f121a 100%)}
    .entry-c{background:linear-gradient(145deg, #6c63ff 0%, #1f2140 42%, #0f121a 100%)}
    .entry-d{background:linear-gradient(145deg, #0ea5a4 0%, #173639 42%, #0f121a 100%)}
    .entry-e{background:linear-gradient(145deg, #f59e0b 0%, #382213 42%, #0f121a 100%)}
    .entry-f{background:linear-gradient(145deg, #be185d 0%, #341620 42%, #0f121a 100%)}

    .entry-card .badge{
      display:inline-flex;
      width:max-content;
      min-height:30px;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(10,12,18,.35);
      border:1px solid rgba(255,255,255,.14);
      color:#fff0e5;
      font-size:.77rem;
      letter-spacing:.05em;
      position:relative;
      z-index:1;
    }
    .entry-card h3{
      margin:14px 0 8px;
      position:relative;
      z-index:1;
      font-size:1.14rem;
      line-height:1.35;
    }
    .entry-card p{
      margin:0;
      position:relative;
      z-index:1;
      color:rgba(255,255,255,.84);
      line-height:1.65;
      font-size:.93rem;
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      position:relative;
      z-index:1;
      margin-top:14px;
    }
    .entry-meta .chip{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      color:#ffe1cd;
      font-size:.77rem;
    }
    .entry-cta{
      display:inline-flex;
      align-items:center;
      margin-top:15px;
      position:relative;
      z-index:1;
      color:#fff;
      font-weight:800;
      letter-spacing:.01em;
    }
    .entry-cta::after{
      content:"→";
      margin-left:8px;
      transition:transform .2s ease;
    }
    .entry-card:hover .entry-cta::after{
      transform:translateX(3px);
    }
    .fav-btn{
      position:absolute;
      top:14px;
      right:14px;
      z-index:2;
      min-height:34px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(8,10,15,.56);
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      backdrop-filter:blur(10px);
      transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }
    .fav-btn:hover,
    .fav-btn:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(255,138,61,.28);
      background:rgba(10,12,18,.76);
    }
    .fav-btn.is-fav{
      color:#fff3eb;
      background:rgba(255,138,61,.16);
      border-color:rgba(255,138,61,.42);
    }

    .news-card{
      padding:20px;
      position:sticky;
      top:96px;
    }
    .news-card h3{
      margin:10px 0 14px;
      font-size:1.1rem;
      line-height:1.3;
    }
    .news-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .news-list li{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      padding-bottom:12px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .news-list li:last-child{padding-bottom:0;border-bottom:none}
    .news-list a{
      color:var(--text);
      line-height:1.6;
      transition:color .2s ease;
    }
    .news-list a:hover,
    .news-list a:focus-visible{
      color:#ffd6be;
    }
    .news-list span{
      color:var(--muted);
      font-size:.84rem;
      white-space:nowrap;
      flex:0 0 auto;
      margin-top:2px;
    }
    .news-note{
      margin:16px 0 0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.75;
    }

    .path-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .path-card{
      padding:22px;
      position:relative;
      overflow:hidden;
      transition:transform .24s ease, border-color .24s ease;
    }
    .path-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,138,61,.18);
    }
    .path-step{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,138,61,.12);
      border:1px solid rgba(255,138,61,.18);
      color:#ffd7bf;
      font-size:.77rem;
      letter-spacing:.06em;
      font-weight:700;
    }
    .path-card h3{
      margin:12px 0 10px;
      font-size:1.08rem;
      line-height:1.35;
    }
    .path-card ul{
      margin:0 0 18px 18px;
      padding:0;
      color:var(--muted);
      display:grid;
      gap:8px;
    }
    .path-card .btn{
      width:100%;
    }

    .faq-wrap{
      display:grid;
      gap:12px;
    }
    .faq-item{
      overflow:hidden;
      transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .faq-item[open]{
      border-color:rgba(255,138,61,.18);
      box-shadow:0 18px 42px rgba(0,0,0,.3);
    }
    .faq-item summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:20px 22px;
      font-weight:800;
      cursor:pointer;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary .mark{
      display:grid;
      place-items:center;
      width:30px;
      height:30px;
      border-radius:999px;
      flex:0 0 auto;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      color:#ffd4bc;
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .faq-item[open] summary .mark{
      transform:rotate(45deg);
      background:rgba(255,138,61,.12);
      border-color:rgba(255,138,61,.2);
    }
    .answer{
      padding:0 22px 22px;
      color:var(--muted);
      line-height:1.85;
      max-width:88ch;
    }

    .contact-grid{
      display:grid;
      grid-template-columns:1.04fr .96fr;
      gap:16px;
      align-items:start;
    }
    .form-card{
      padding:24px;
    }
    .form-row{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    .field{
      display:grid;
      gap:8px;
      margin-bottom:14px;
    }
    .field label{
      color:#d8deea;
      font-size:.92rem;
      font-weight:700;
    }
    .field input,
    .field textarea{
      width:100%;
      min-height:48px;
      padding:14px 15px;
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:var(--text);
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
    }
    .field textarea{
      min-height:160px;
      resize:vertical;
    }
    .field input:hover,
    .field textarea:hover{
      border-color:rgba(255,138,61,.18);
    }
    .field input:focus-visible,
    .field textarea:focus-visible{
      border-color:rgba(255,138,61,.35);
      box-shadow:0 0 0 3px rgba(255,138,61,.12);
      background:rgba(255,255,255,.055);
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-top:6px;
    }
    .form-hint{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.7;
      margin-top:10px;
    }

    .contact-card{
      padding:24px;
      display:grid;
      gap:16px;
    }
    .contact-card .box{
      padding:18px;
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
    }
    .contact-card h3{
      margin:0 0 10px;
      font-size:1.08rem;
    }
    .contact-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }
    .contact-card ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      display:grid;
      gap:10px;
      line-height:1.75;
    }
    .contact-cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .empty-state{
      display:none;
      padding:26px;
      margin-top:16px;
      text-align:center;
      border-style:dashed;
      border-color:rgba(255,255,255,.14);
      background:rgba(255,255,255,.03);
    }
    .empty-state.show{
      display:grid;
      gap:10px;
      place-items:center;
      min-height:220px;
    }
    .empty-state h3{
      margin:0;
      font-size:1.12rem;
    }
    .empty-state p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      max-width:44ch;
    }

    .footer{
      margin-top:72px;
      padding:34px 0 40px;
      border-top:1px solid rgba(255,255,255,.08);
      background:rgba(7,9,14,.62);
    }
    .footer-grid{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
    }
    .footer-brand{
      margin-bottom:12px;
    }
    .footer p{
      margin:0 0 10px;
      color:var(--muted);
      max-width:58ch;
      line-height:1.8;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .footer-links a{
      display:inline-flex;
      align-items:center;
      min-height:40px;
      padding:9px 12px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:var(--text);
      border-color:rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      transform:translateY(-1px);
    }
    .copyright{
      color:var(--soft);
      font-size:.92rem;
      line-height:1.7;
    }

    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.is-visible{
      opacity:1;
      transform:translateY(0);
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:24px;
      transform:translate(-50%, 18px);
      opacity:0;
      pointer-events:none;
      z-index:70;
      padding:14px 18px;
      border-radius:999px;
      background:rgba(15,18,26,.92);
      color:#fff;
      border:1px solid rgba(255,255,255,.1);
      box-shadow:0 16px 40px rgba(0,0,0,.35);
      transition:opacity .25s ease, transform .25s ease;
    }
    .toast.show{
      opacity:1;
      transform:translate(-50%, 0);
    }

    .search-hidden{
      display:none !important;
    }

    @keyframes shimmer{
      0%{background-position:220% 0}
      100%{background-position:-220% 0}
    }

    @media (max-width: 1240px){
      .hero-grid,
      .contact-grid,
      .entrance-layout{
        grid-template-columns:1fr;
      }
      .news-card{
        position:relative;
        top:auto;
      }
      .feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .stat-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .path-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px){
      .site-nav,
      .header-search,
      .tool-link{
        display:none;
      }
      .menu-toggle{
        display:inline-grid;
        place-items:center;
      }
      .mobile-panel{
        display:block;
      }
      .section{
        padding-top:64px;
      }
      .section-head{
        display:block;
      }
      .section-head .copy{
        max-width:none;
      }
      .matrix{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .hero-copy{
        padding:26px;
      }
      .hero h1{
        margin-top:14px;
      }
      .hero-actions .btn{
        flex:1 1 auto;
      }
      .hero-pills{
        gap:8px;
      }
    }

    @media (max-width: 760px){
      .container{
        width:min(var(--container), calc(100% - 24px));
      }
      .feature-grid,
      .stat-grid,
      .path-grid,
      .form-row{
        grid-template-columns:1fr;
      }
      .hero{
        padding-top:24px;
      }
      .hero-copy,
      .hero-panel,
      .feature-card,
      .stat-card,
      .path-card,
      .contact-card,
      .form-card,
      .news-card{
        border-radius:20px;
      }
      .hero-actions .btn,
      .form-actions .btn{
        width:100%;
      }
      .matrix{
        grid-template-columns:1fr;
      }
      .rail{
        grid-auto-columns:86%;
      }
      .news-list li{
        flex-direction:column;
        align-items:flex-start;
      }
      .news-list span{
        margin-top:0;
      }
    }

    @media (max-width: 520px){
      .header-inner{
        min-height:72px;
      }
      .brand strong{
        max-width:190px;
      }
      .hero-copy{
        padding:22px;
      }
      .hero h1{
        font-size:clamp(2.1rem, 11vw, 3.1rem);
      }
      .lead,
      .section-head p,
      .answer,
      .contact-card p,
      .contact-card ul,
      .news-note,
      .feature-card p,
      .stat-card p,
      .path-card ul{
        font-size:.95rem;
      }
      .empty-state{
        padding:22px 16px;
      }
      .footer-grid{
        gap:14px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation:none !important;
        transition:none !important;
      }
    }

/* roulang page: category2 */
:root{
                --bg:#0c0d10;
                --bg-2:#12141a;
                --panel:#171922;
                --panel-2:#1d2029;
                --line:rgba(255,255,255,.08);
                --line-strong:rgba(255,255,255,.14);
                --text:#f5f7fb;
                --muted:#a9afbd;
                --soft:#7f8697;
                --accent:#ff8a3d;
                --accent-2:#ff4d6d;
                --accent-3:#f8c56a;
                --shadow:0 18px 50px rgba(0,0,0,.35);
                --shadow-soft:0 10px 30px rgba(0,0,0,.22);
                --radius:22px;
                --radius-lg:28px;
                --container:1280px;
                --space:24px;
                --space-lg:40px;
                --space-xl:72px;
            }
            *{box-sizing:border-box}
            html{scroll-behavior:smooth}
            body{
                margin:0;
                background:
                    radial-gradient(circle at 20% 0%, rgba(255,138,61,.13), transparent 26%),
                    radial-gradient(circle at 90% 10%, rgba(255,77,109,.10), transparent 22%),
                    linear-gradient(180deg, #0b0c10 0%, #10131a 42%, #0b0c10 100%);
                color:var(--text);
                font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
                line-height:1.7;
                text-rendering:optimizeLegibility;
                -webkit-font-smoothing:antialiased;
            }
            img{max-width:100%;display:block}
            a{color:inherit;text-decoration:none}
            button,input,textarea{font:inherit}
            ::selection{background:rgba(255,138,61,.28)}
            .container{
                width:min(100% - 32px, var(--container));
                margin:0 auto;
            }
            .site-header{
                position:sticky;
                top:0;
                z-index:1000;
                backdrop-filter: blur(18px);
                background:rgba(11,12,16,.78);
                border-bottom:1px solid rgba(255,255,255,.07);
                box-shadow:0 8px 24px rgba(0,0,0,.15);
            }
            .header-row{
                display:flex;
                align-items:center;
                gap:18px;
                padding:16px 0 12px;
            }
            .brand{
                display:flex;
                align-items:center;
                gap:12px;
                min-width:260px;
            }
            .brand-mark{
                width:42px;height:42px;border-radius:14px;
                display:grid;place-items:center;
                background:linear-gradient(135deg, var(--accent), var(--accent-2));
                color:#fff;font-weight:900;font-size:20px;
                box-shadow:0 10px 24px rgba(255,77,109,.24);
            }
            .brand-text{display:flex;flex-direction:column;line-height:1.18}
            .brand-text strong{font-size:17px;letter-spacing:.4px}
            .brand-text small{color:var(--muted);font-size:12px;margin-top:4px}
            .header-actions{
                margin-left:auto;
                display:flex;
                gap:10px;
                flex-wrap:wrap;
                align-items:center;
            }
            .tool-btn{
                border:1px solid var(--line);
                background:rgba(255,255,255,.04);
                color:var(--text);
                padding:11px 14px;
                border-radius:999px;
                display:inline-flex;
                align-items:center;
                gap:8px;
                cursor:pointer;
                transition:.22s ease;
            }
            .tool-btn:hover,.tool-btn:focus{
                transform:translateY(-1px);
                border-color:rgba(255,138,61,.44);
                box-shadow:0 0 0 4px rgba(255,138,61,.08);
                outline:none;
            }
            .site-nav{
                display:flex;
                gap:8px;
                overflow-x:auto;
                padding:0 0 14px;
                scrollbar-width:none;
            }
            .site-nav::-webkit-scrollbar{display:none}
            .nav-link{
                flex:0 0 auto;
                padding:10px 16px;
                border-radius:999px;
                color:var(--muted);
                border:1px solid transparent;
                background:transparent;
                transition:.2s ease;
                white-space:nowrap;
                font-size:14px;
            }
            .nav-link:hover,.nav-link:focus{
                color:var(--text);
                background:rgba(255,255,255,.05);
                border-color:var(--line);
                outline:none;
            }
            .nav-link.active{
                color:#14151b;
                background:linear-gradient(135deg, #ffd08a 0%, #ff9f5c 45%, #ff6c7d 100%);
                box-shadow:0 8px 20px rgba(255,138,61,.22);
            }
            main{padding-bottom:48px}
            .hero{
                padding:34px 0 28px;
            }
            .hero-shell{
                position:relative;
                overflow:hidden;
                border-radius:var(--radius-lg);
                background:
                    linear-gradient(135deg, rgba(255,138,61,.12), rgba(255,77,109,.08) 38%, rgba(255,255,255,.02) 100%),
                    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
                border:1px solid rgba(255,255,255,.08);
                box-shadow:var(--shadow);
                padding:34px;
            }
            .hero-shell:before{
                content:"";
                position:absolute;
                inset:-20% auto auto -10%;
                width:260px;height:260px;border-radius:50%;
                background:radial-gradient(circle, rgba(255,138,61,.18), transparent 70%);
                filter:blur(8px);
                pointer-events:none;
            }
            .hero-shell:after{
                content:"";
                position:absolute;
                right:-60px;top:20px;
                width:180px;height:180px;border-radius:34px;
                background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
                transform:rotate(16deg);
                pointer-events:none;
            }
            .hero-grid{
                position:relative;
                display:grid;
                grid-template-columns: 1.2fr .9fr;
                gap:24px;
                align-items:stretch;
            }
            .eyebrow{
                display:inline-flex;
                align-items:center;
                gap:8px;
                padding:7px 12px;
                border-radius:999px;
                background:rgba(255,255,255,.06);
                border:1px solid rgba(255,255,255,.08);
                color:#ffd7ad;
                font-size:13px;
                margin-bottom:16px;
            }
            .hero h1{
                margin:0;
                font-size:clamp(30px, 4vw, 56px);
                line-height:1.08;
                letter-spacing:-.6px;
            }
            .hero p.lead{
                margin:18px 0 0;
                color:var(--muted);
                font-size:17px;
                max-width:700px;
            }
            .hero-actions{
                display:flex;
                gap:12px;
                flex-wrap:wrap;
                margin-top:24px;
            }
            .btn{
                border:0;
                border-radius:16px;
                padding:13px 18px;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                gap:8px;
                cursor:pointer;
                transition:.22s ease;
                font-weight:700;
                min-height:48px;
            }
            .btn-primary{
                background:linear-gradient(135deg, var(--accent), var(--accent-2));
                color:#fff;
                box-shadow:0 14px 26px rgba(255,77,109,.18);
            }
            .btn-primary:hover,.btn-primary:focus{
                transform:translateY(-2px);
                box-shadow:0 18px 36px rgba(255,77,109,.24);
                outline:none;
            }
            .btn-secondary{
                background:rgba(255,255,255,.04);
                color:var(--text);
                border:1px solid rgba(255,255,255,.10);
            }
            .btn-secondary:hover,.btn-secondary:focus{
                transform:translateY(-2px);
                border-color:rgba(255,138,61,.42);
                box-shadow:0 0 0 4px rgba(255,138,61,.08);
                outline:none;
            }
            .chip-row{
                display:flex;
                flex-wrap:wrap;
                gap:10px;
                margin-top:24px;
            }
            .chip{
                padding:9px 13px;
                border-radius:999px;
                background:rgba(255,255,255,.05);
                border:1px solid rgba(255,255,255,.08);
                color:var(--muted);
                font-size:13px;
                cursor:pointer;
                transition:.2s ease;
                user-select:none;
            }
            .chip:hover,.chip:focus,.chip.active{
                color:#fff;
                background:rgba(255,138,61,.16);
                border-color:rgba(255,138,61,.42);
                transform:translateY(-1px);
                outline:none;
            }
            .hero-panel{
                display:grid;
                gap:14px;
            }
            .matrix{
                display:grid;
                grid-template-columns:repeat(2, minmax(0,1fr));
                gap:12px;
            }
            .matrix-card,.notice-card,.feature-card,.stat-card,.path-card,.spot-card,.side-card,.faq-item,.form-card{
                border-radius:var(--radius);
                background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
                border:1px solid rgba(255,255,255,.08);
                box-shadow:var(--shadow-soft);
            }
            .matrix-card{
                padding:16px;
                min-height:126px;
                display:flex;
                flex-direction:column;
                justify-content:space-between;
            }
            .matrix-card span{
                color:var(--soft);
                font-size:12px;
            }
            .matrix-card strong{
                font-size:16px;
                line-height:1.3;
            }
            .matrix-card em{
                font-style:normal;
                color:#ffd59f;
                font-size:13px;
            }
            .notice-card{
                padding:18px;
                background:
                    linear-gradient(135deg, rgba(255,138,61,.15), rgba(255,77,109,.08)),
                    rgba(255,255,255,.03);
            }
            .notice-card .label{
                display:inline-block;
                font-size:12px;
                color:#ffd9b4;
                margin-bottom:10px;
            }
            .notice-card strong{
                display:block;
                font-size:18px;
                margin-bottom:8px;
            }
            .notice-card p{
                margin:0;
                color:var(--muted);
                font-size:14px;
            }
            .section{
                padding:22px 0 0;
            }
            .section + .section{margin-top:20px}
            .section-head{
                display:flex;
                align-items:flex-end;
                justify-content:space-between;
                gap:14px;
                margin-bottom:18px;
            }
            .section-head h2{
                margin:0;
                font-size:24px;
                line-height:1.2;
            }
            .section-head p{
                margin:0;
                color:var(--muted);
                max-width:680px;
                font-size:14px;
            }
            .feature-grid{
                display:grid;
                grid-template-columns:repeat(5, minmax(0,1fr));
                gap:14px;
            }
            .feature-card{
                padding:18px;
                min-height:142px;
                transition:.22s ease;
            }
            .feature-card:hover,.feature-card:focus-within,
            .spot-card:hover,.path-card:hover,.stat-card:hover,.side-card:hover,.form-card:hover{
                transform:translateY(-4px);
                border-color:rgba(255,138,61,.28);
                box-shadow:0 18px 44px rgba(0,0,0,.28);
            }
            .feature-icon{
                width:42px;height:42px;border-radius:14px;
                display:grid;place-items:center;
                background:rgba(255,138,61,.12);
                color:#ffd09f;
                font-size:18px;
                margin-bottom:12px;
            }
            .feature-card h3{
                margin:0 0 6px;
                font-size:16px;
            }
            .feature-card p{
                margin:0;
                color:var(--muted);
                font-size:14px;
            }
            .feature-card a{
                display:inline-flex;
                margin-top:12px;
                font-size:13px;
                color:#ffd19a;
            }
            .stats{
                display:grid;
                grid-template-columns:repeat(4, minmax(0,1fr));
                gap:14px;
            }
            .stat-card{
                padding:18px 18px 16px;
            }
            .stat-card .num{
                display:block;
                font-size:34px;
                line-height:1;
                font-weight:900;
                letter-spacing:-.8px;
                color:#fff;
                margin-bottom:10px;
            }
            .stat-card .label{
                font-size:15px;
                font-weight:700;
                margin-bottom:6px;
            }
            .stat-card .desc{
                color:var(--muted);
                font-size:13px;
            }
            .content-layout{
                display:grid;
                grid-template-columns:minmax(0,1.45fr) 320px;
                gap:18px;
                align-items:start;
            }
            .filter-bar{
                display:flex;
                align-items:center;
                gap:10px;
                flex-wrap:wrap;
                margin-bottom:18px;
                padding:16px;
                border-radius:var(--radius);
                background:rgba(255,255,255,.03);
                border:1px solid rgba(255,255,255,.08);
            }
            .filter-bar .hint{
                color:var(--muted);
                font-size:14px;
                margin-right:6px;
            }
            .filter-pill{
                border:1px solid rgba(255,255,255,.10);
                background:rgba(255,255,255,.04);
                color:var(--text);
                padding:9px 14px;
                border-radius:999px;
                cursor:pointer;
                transition:.2s ease;
            }
            .filter-pill.active,.filter-pill:hover,.filter-pill:focus{
                background:linear-gradient(135deg, rgba(255,138,61,.20), rgba(255,77,109,.18));
                border-color:rgba(255,138,61,.40);
                outline:none;
                transform:translateY(-1px);
            }
            .entry-grid{
                display:grid;
                grid-template-columns:repeat(3, minmax(0,1fr));
                gap:14px;
            }
            .entry-card{
                position:relative;
                overflow:hidden;
                min-height:256px;
                border-radius:24px;
                border:1px solid rgba(255,255,255,.08);
                background:
                    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05)),
                    linear-gradient(140deg, rgba(28,31,40,.98), rgba(17,19,25,.96));
                box-shadow:var(--shadow-soft);
                transition:.24s ease;
            }
            .entry-card:hover{
                transform:translateY(-4px) scale(1.02);
                border-color:rgba(255,138,61,.30);
                box-shadow:0 22px 50px rgba(0,0,0,.34);
            }
            .entry-cover{
                height:144px;
                background:
                    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2)),
                    radial-gradient(circle at 30% 30%, rgba(255,138,61,.28), transparent 34%),
                    radial-gradient(circle at 80% 20%, rgba(255,77,109,.22), transparent 24%),
                    linear-gradient(135deg, #282b35 0%, #13161d 100%);
                border-bottom:1px solid rgba(255,255,255,.06);
            }
            .entry-body{
                padding:16px;
            }
            .entry-top{
                display:flex;
                justify-content:space-between;
                gap:10px;
                align-items:flex-start;
            }
            .entry-title{
                margin:0;
                font-size:17px;
                line-height:1.35;
            }
            .badge{
                display:inline-flex;
                align-items:center;
                gap:6px;
                font-size:12px;
                padding:6px 10px;
                border-radius:999px;
                background:rgba(255,138,61,.12);
                color:#ffd7ad;
                border:1px solid rgba(255,138,61,.24);
                white-space:nowrap;
            }
            .entry-desc{
                margin:10px 0 0;
                color:var(--muted);
                font-size:14px;
                min-height:42px;
            }
            .entry-meta{
                display:flex;
                flex-wrap:wrap;
                gap:8px;
                margin-top:12px;
            }
            .meta-tag{
                font-size:12px;
                padding:6px 9px;
                border-radius:999px;
                background:rgba(255,255,255,.05);
                color:#d4d8e1;
                border:1px solid rgba(255,255,255,.08);
            }
            .entry-footer{
                display:flex;
                justify-content:space-between;
                align-items:center;
                gap:12px;
                margin-top:16px;
            }
            .state-dot{
                width:9px;height:9px;border-radius:50%;
                background:#3ad29f;
                box-shadow:0 0 0 4px rgba(58,210,159,.10);
                display:inline-block;
                margin-right:8px;
            }
            .link-btn{
                display:inline-flex;
                align-items:center;
                gap:6px;
                color:#ffd19d;
                font-weight:700;
                font-size:14px;
            }
            .sidebar{
                position:sticky;
                top:132px;
                display:grid;
                gap:14px;
            }
            .side-card{
                padding:18px;
            }
            .side-card h3{
                margin:0 0 10px;
                font-size:17px;
            }
            .side-card p{
                margin:0;
                color:var(--muted);
                font-size:14px;
            }
            .side-list{
                list-style:none;
                margin:14px 0 0;
                padding:0;
                display:grid;
                gap:10px;
            }
            .side-list li{
                display:flex;
                justify-content:space-between;
                gap:10px;
                padding:11px 12px;
                border-radius:16px;
                background:rgba(255,255,255,.04);
                border:1px solid rgba(255,255,255,.08);
            }
            .side-list b{font-size:14px}
            .side-list span{color:var(--muted);font-size:12px}
            .spot-track{
                display:grid;
                grid-template-columns:repeat(6, minmax(220px,1fr));
                gap:14px;
                overflow-x:auto;
                padding-bottom:6px;
                scrollbar-width:thin;
                scrollbar-color:rgba(255,138,61,.34) transparent;
            }
            .spot-track::-webkit-scrollbar{height:8px}
            .spot-track::-webkit-scrollbar-thumb{background:rgba(255,138,61,.34);border-radius:999px}
            .spot-card{
                min-width:220px;
                overflow:hidden;
                border-radius:24px;
                background:
                    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05)),
                    linear-gradient(140deg, rgba(30,33,42,.98), rgba(17,19,25,.96));
                border:1px solid rgba(255,255,255,.08);
                transition:.22s ease;
            }
            .spot-art{
                height:160px;
                background:
                    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.36)),
                    radial-gradient(circle at 25% 22%, rgba(255,138,61,.28), transparent 28%),
                    radial-gradient(circle at 82% 18%, rgba(255,77,109,.18), transparent 20%),
                    linear-gradient(135deg, #2a2e38 0%, #11131a 100%);
            }
            .spot-body{
                padding:16px;
            }
            .spot-body .tag{
                display:inline-flex;
                padding:5px 10px;
                border-radius:999px;
                background:rgba(255,138,61,.12);
                color:#ffd2a3;
                font-size:12px;
                margin-bottom:10px;
            }
            .spot-body h3{
                margin:0 0 8px;
                font-size:16px;
            }
            .spot-body p{
                margin:0;
                color:var(--muted);
                font-size:13px;
                min-height:40px;
            }
            .path-grid{
                display:grid;
                grid-template-columns:repeat(4, minmax(0,1fr));
                gap:14px;
            }
            .path-card{
                padding:18px;
                position:relative;
                overflow:hidden;
            }
            .path-card:before{
                content:"";
                position:absolute;
                inset:auto -10px -18px auto;
                width:82px;height:82px;border-radius:28px;
                background:rgba(255,138,61,.09);
                transform:rotate(18deg);
            }
            .path-card h3{
                margin:0 0 8px;
                font-size:17px;
            }
            .path-card p{
                margin:0 0 12px;
                color:var(--muted);
                font-size:14px;
            }
            .step-list{
                margin:0 0 16px;
                padding:0;
                list-style:none;
                display:grid;
                gap:8px;
            }
            .step-list li{
                display:flex;
                gap:10px;
                align-items:flex-start;
                color:#d7dbe4;
                font-size:13px;
            }
            .step-list li:before{
                content:"";
                width:8px;height:8px;
                margin-top:8px;
                border-radius:50%;
                background:linear-gradient(135deg, var(--accent), var(--accent-2));
                flex:0 0 auto;
            }
            .faq-wrap{
                display:grid;
                gap:12px;
            }
            .faq-item{
                overflow:hidden;
            }
            .faq-q{
                width:100%;
                border:0;
                background:transparent;
                color:var(--text);
                padding:18px 18px;
                text-align:left;
                display:flex;
                justify-content:space-between;
                gap:16px;
                align-items:center;
                cursor:pointer;
            }
            .faq-q strong{
                font-size:16px;
                line-height:1.45;
            }
            .faq-icon{
                width:30px;height:30px;border-radius:50%;
                display:grid;place-items:center;
                background:rgba(255,255,255,.05);
                flex:0 0 auto;
                transition:.22s ease;
            }
            .faq-item.open .faq-icon{
                transform:rotate(45deg);
                background:rgba(255,138,61,.15);
                color:#ffd09f;
            }
            .faq-a{
                max-height:0;
                overflow:hidden;
                transition:max-height .28s ease;
                border-top:1px solid rgba(255,255,255,.08);
            }
            .faq-a p{
                margin:0;
                padding:16px 18px 18px;
                color:var(--muted);
                font-size:14px;
            }
            .faq-item.open .faq-a{max-height:220px}
            .contact-grid{
                display:grid;
                grid-template-columns:1.1fr .9fr;
                gap:16px;
            }
            .form-card{
                padding:20px;
            }
            .field-grid{
                display:grid;
                grid-template-columns:repeat(3, minmax(0,1fr));
                gap:12px;
                margin-top:14px;
            }
            .field{
                display:flex;
                flex-direction:column;
                gap:8px;
            }
            .field label{
                font-size:13px;
                color:#d8dce6;
            }
            .field input,.field textarea{
                width:100%;
                border-radius:16px;
                border:1px solid rgba(255,255,255,.10);
                background:rgba(255,255,255,.04);
                color:var(--text);
                padding:13px 14px;
                outline:none;
                transition:.2s ease;
            }
            .field input:focus,.field textarea:focus{
                border-color:rgba(255,138,61,.45);
                box-shadow:0 0 0 4px rgba(255,138,61,.08);
            }
            .field textarea{
                min-height:118px;
                resize:vertical;
            }
            .field.span-3{grid-column:1 / -1}
            .form-actions{
                display:flex;
                gap:12px;
                flex-wrap:wrap;
                margin-top:16px;
            }
            .contact-note{
                display:grid;
                gap:14px;
            }
            .contact-box{
                padding:20px;
            }
            .contact-box h3{
                margin:0 0 10px;
                font-size:18px;
            }
            .contact-box p{
                margin:0;
                color:var(--muted);
                font-size:14px;
            }
            .contact-points{
                margin:14px 0 0;
                padding:0;
                list-style:none;
                display:grid;
                gap:10px;
            }
            .contact-points li{
                padding:12px 14px;
                border-radius:16px;
                background:rgba(255,255,255,.04);
                border:1px solid rgba(255,255,255,.08);
                color:#dfe3eb;
                font-size:14px;
            }
            .breadcrumb{
                padding:10px 0 0;
                color:var(--soft);
                font-size:13px;
            }
            .breadcrumb a{color:#d0d5df}
            .breadcrumb span{margin:0 6px;color:var(--soft)}
            .pagination{
                display:flex;
                flex-wrap:wrap;
                gap:10px;
                margin-top:16px;
            }
            .page-btn{
                min-width:42px;
                height:42px;
                display:grid;
                place-items:center;
                border-radius:14px;
                border:1px solid rgba(255,255,255,.10);
                background:rgba(255,255,255,.04);
                color:var(--text);
            }
            .page-btn.active,.page-btn:hover{
                background:linear-gradient(135deg, rgba(255,138,61,.18), rgba(255,77,109,.16));
                border-color:rgba(255,138,61,.38);
            }
            .footer{
                border-top:1px solid rgba(255,255,255,.08);
                padding:28px 0 36px;
                background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.03));
            }
            .footer-grid{
                display:grid;
                grid-template-columns:1.3fr .7fr;
                gap:18px;
                align-items:start;
            }
            .footer .brand{min-width:0;margin-bottom:12px}
            .footer p{margin:10px 0 0;color:var(--muted)}
            .copyright{color:#d6dae3}
            .footer-links{
                display:flex;
                flex-wrap:wrap;
                justify-content:flex-end;
                gap:10px;
            }
            .footer-links a{
                padding:10px 14px;
                border-radius:999px;
                background:rgba(255,255,255,.04);
                border:1px solid rgba(255,255,255,.08);
                color:#dbe0ea;
                transition:.2s ease;
            }
            .footer-links a:hover{
                transform:translateY(-1px);
                border-color:rgba(255,138,61,.32);
            }
            .section-title{
                display:flex;
                align-items:center;
                gap:10px;
                margin-bottom:16px;
            }
            .section-title::before{
                content:"";
                width:10px;height:10px;border-radius:50%;
                background:linear-gradient(135deg, var(--accent), var(--accent-2));
                box-shadow:0 0 0 6px rgba(255,138,61,.08);
            }
            .muted{color:var(--muted)}
            .sr-only{
                position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
            }
            @media (max-width: 1180px){
                .feature-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
                .content-layout{grid-template-columns:1fr}
                .sidebar{position:static}
                .entry-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
                .path-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
                .contact-grid{grid-template-columns:1fr}
            }
            @media (max-width: 860px){
                .hero-grid{grid-template-columns:1fr}
                .matrix{grid-template-columns:1fr 1fr}
                .stats{grid-template-columns:repeat(2, minmax(0,1fr))}
                .footer-grid{grid-template-columns:1fr}
                .footer-links{justify-content:flex-start}
                .field-grid{grid-template-columns:1fr}
                .field.span-3{grid-column:auto}
            }
            @media (max-width: 640px){
                .container{width:min(100% - 20px, var(--container))}
                .header-row{flex-wrap:wrap}
                .brand{min-width:0}
                .header-actions{width:100%;margin-left:0}
                .tool-btn{flex:1 1 140px;justify-content:center}
                .hero-shell{padding:20px}
                .hero h1{font-size:28px}
                .hero p.lead{font-size:15px}
                .feature-grid,.stats,.entry-grid,.path-grid{grid-template-columns:1fr}
                .entry-card{min-height:auto}
                .matrix{grid-template-columns:1fr}
                .section-head{flex-direction:column;align-items:flex-start}
                .spot-track{grid-template-columns:repeat(6, minmax(190px, 1fr))}
                .filter-bar{padding:14px}
                .filter-pill{padding:8px 12px}
                .faq-q strong{font-size:15px}
            }

/* roulang page: category1 */
:root{
      --bg:#0b0f14;
      --bg-2:#0f1520;
      --panel:#111824;
      --panel-2:#151e2c;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.14);
      --text:#f4f7fb;
      --muted:#96a1b2;
      --soft:#c7cfdb;
      --accent:#ff9f43;
      --accent-2:#ff5d6c;
      --accent-3:#c45cff;
      --accent-soft:rgba(255,159,67,.16);
      --success:#4fe3b2;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --shadow-soft:0 12px 30px rgba(0,0,0,.22);
      --radius-xl:26px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1280px;
      --gutter:24px;
      --section-gap:88px;
      --speed:.24s;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
      background:
        radial-gradient(900px 500px at 15% -5%, rgba(255,159,67,.16), transparent 60%),
        radial-gradient(700px 500px at 90% 0%, rgba(196,92,255,.14), transparent 55%),
        radial-gradient(900px 600px at 50% 100%, rgba(255,93,108,.10), transparent 60%),
        linear-gradient(180deg, #090d12 0%, #0b0f14 38%, #0a0d12 100%);
      color:var(--text);
      line-height:1.65;
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
    }
    body::before{
      background:
        linear-gradient(transparent 0 0),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
      background-size:100% 100%, 26px 26px;
      opacity:.3;
      mix-blend-mode:screen;
    }
    body::after{
      background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 14%, transparent 86%, rgba(255,255,255,.03));
      opacity:.2;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(255,159,67,.3);color:#fff}
    :focus-visible{outline:3px solid rgba(255,159,67,.65);outline-offset:3px}

    .container{
      width:min(var(--container), calc(100% - 2 * var(--gutter)));
      margin:0 auto;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      backdrop-filter:saturate(1.1) blur(18px);
      background:linear-gradient(180deg, rgba(8,12,18,.92), rgba(8,12,18,.72));
      border-bottom:1px solid rgba(255,255,255,.06);
      box-shadow:0 8px 30px rgba(0,0,0,.18);
    }
    .header-inner{
      display:flex;
      align-items:center;
      gap:18px;
      padding:14px 0;
      flex-wrap:wrap;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      margin-right:8px;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:900;
      color:#fff;
      background:
        linear-gradient(145deg, rgba(255,159,67,1), rgba(255,93,108,1));
      box-shadow:0 10px 26px rgba(255,112,82,.24);
      position:relative;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      border:1px solid rgba(255,255,255,.15);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .brand-text strong{
      font-size:1.06rem;
      line-height:1.1;
      letter-spacing:.2px;
    }
    .brand-text small{
      color:var(--muted);
      font-size:.82rem;
    }

    .nav-toggle{
      display:none;
      margin-left:auto;
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      align-items:center;
      justify-content:center;
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
    }
    .nav-toggle:hover{
      transform:translateY(-1px);
      border-color:rgba(255,159,67,.36);
      background:rgba(255,159,67,.08);
    }
    .nav-toggle i,
    .nav-toggle i::before,
    .nav-toggle i::after{
      content:"";
      display:block;
      width:18px;
      height:2px;
      border-radius:999px;
      background:currentColor;
      position:relative;
    }
    .nav-toggle i::before{position:absolute;left:0;top:-6px}
    .nav-toggle i::after{position:absolute;left:0;top:6px}

    .site-nav{
      display:flex;
      align-items:center;
      gap:8px;
      flex:1 1 auto;
      min-width:0;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .site-nav::-webkit-scrollbar{display:none}
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      color:var(--soft);
      font-size:.95rem;
      white-space:nowrap;
      border:1px solid transparent;
      transition:transform var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
    .nav-link:hover{
      transform:translateY(-1px);
      color:#fff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.06);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, rgba(255,159,67,.18), rgba(255,93,108,.14));
      border-color:rgba(255,159,67,.22);
      box-shadow:0 10px 24px rgba(255,127,75,.1);
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
    }

    .btn,
    .ghost-btn,
    .primary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:700;
      letter-spacing:.2px;
      transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease);
      user-select:none;
    }
    .primary-btn,
    .btn-primary{
      color:#160b05;
      background:linear-gradient(135deg, #ffc96a, #ff8d5b);
      box-shadow:0 18px 34px rgba(255,145,73,.22);
    }
    .primary-btn:hover,
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 42px rgba(255,145,73,.28);
    }
    .ghost-btn,
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:var(--line);
    }
    .ghost-btn:hover,
    .btn-secondary:hover{
      transform:translateY(-2px);
      border-color:rgba(255,159,67,.24);
      background:rgba(255,159,67,.08);
    }
    .btn-small{
      min-height:38px;
      padding:0 14px;
      border-radius:12px;
      font-size:.92rem;
    }

    .page-main{padding-bottom:30px}

    .hero{
      position:relative;
      padding:34px 0 28px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      border-radius:32px;
      background:
        linear-gradient(180deg, rgba(18,25,36,.92), rgba(12,17,25,.94)),
        radial-gradient(1200px 500px at 20% 0%, rgba(255,159,67,.18), transparent 50%),
        radial-gradient(700px 420px at 100% 8%, rgba(255,93,108,.12), transparent 55%);
      box-shadow:var(--shadow);
    }
    .hero-shell::before,
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto;
      pointer-events:none;
    }
    .hero-shell::before{
      width:520px;
      height:520px;
      top:-240px;
      right:-120px;
      background:radial-gradient(circle, rgba(255,159,67,.16), transparent 65%);
      filter:blur(10px);
    }
    .hero-shell::after{
      inset:0;
      background:
        linear-gradient(120deg, rgba(255,255,255,.05) 0, transparent 18%, transparent 82%, rgba(255,255,255,.03) 100%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.03) 100%);
      opacity:.7;
      mix-blend-mode:screen;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.2fr .9fr;
      gap:26px;
      padding:34px;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:18px;
      padding:10px 6px 10px 2px;
    }
    .eyebrow{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .eyebrow span,
    .chip,
    .tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      color:var(--soft);
      font-size:.86rem;
      letter-spacing:.2px;
    }
    .eyebrow span:first-child{
      color:#ffd7ad;
      border-color:rgba(255,159,67,.22);
      background:rgba(255,159,67,.1);
    }
    .hero h1{
      margin:0;
      font-size:clamp(2rem, 4.4vw, 4.2rem);
      line-height:1.08;
      letter-spacing:-.03em;
      max-width:12ch;
    }
    .hero-desc{
      margin:0;
      max-width:58ch;
      color:#d6deea;
      font-size:1.02rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }
    .hero-note{
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.92rem;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:2px;
    }
    .hero-tags .chip{
      background:rgba(255,255,255,.025);
      color:#dce4ef;
      border-color:rgba(255,255,255,.08);
    }
    .hero-tags .chip.is-hot{
      color:#1c0d07;
      background:linear-gradient(135deg, rgba(255,201,106,1), rgba(255,141,91,1));
      border-color:transparent;
      font-weight:800;
    }

    .hero-panel{
      display:grid;
      gap:14px;
      align-content:start;
    }
    .search-box,
    .glass-card,
    .panel,
    .feature-card,
    .stat-card,
    .entry-card,
    .path-card,
    .side-card,
    .contact-card,
    .faq-item,
    .form-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow:var(--shadow-soft);
    }
    .search-box{
      padding:16px;
      background:linear-gradient(180deg, rgba(17,24,36,.95), rgba(13,18,26,.92));
    }
    .search-box form{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
    }
    .search-box input,
    .contact-form input,
    .contact-form textarea{
      width:100%;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-radius:14px;
      padding:13px 14px;
      outline:none;
      transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
    }
    .search-box input::placeholder,
    .contact-form input::placeholder,
    .contact-form textarea::placeholder{color:#7f8998}
    .search-box input:focus,
    .contact-form input:focus,
    .contact-form textarea:focus{
      border-color:rgba(255,159,67,.34);
      box-shadow:0 0 0 4px rgba(255,159,67,.08);
      background:rgba(255,255,255,.045);
    }
    .search-hint{
      margin-top:10px;
      color:var(--muted);
      font-size:.88rem;
    }

    .matrix{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .matrix-tile{
      padding:16px;
      min-height:128px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
        linear-gradient(135deg, rgba(255,159,67,.12), rgba(255,93,108,.08));
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
    .matrix-tile:hover{
      transform:translateY(-3px) scale(1.02);
      border-color:rgba(255,159,67,.26);
      box-shadow:0 18px 34px rgba(0,0,0,.25);
    }
    .matrix-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }
    .matrix-title{
      font-size:1rem;
      font-weight:800;
      margin:0;
    }
    .matrix-value{
      color:#ffd4a0;
      font-weight:900;
      font-size:1.45rem;
    }
    .matrix-desc{
      margin:0;
      color:#d2dbea;
      font-size:.9rem;
    }
    .matrix-tile.is-accent{
      background:
        linear-gradient(180deg, rgba(255,159,67,.2), rgba(255,255,255,.03)),
        linear-gradient(135deg, rgba(255,159,67,.18), rgba(255,93,108,.11));
    }

    .update-card{
      padding:16px 18px;
      background:
        linear-gradient(180deg, rgba(12,17,24,.98), rgba(14,19,28,.94));
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
    }
    .update-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .update-title{
      margin:0;
      font-size:1rem;
      font-weight:800;
    }
    .status-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 4px rgba(79,227,178,.12);
      flex:0 0 auto;
    }
    .update-list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .update-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#d6deea;
      font-size:.94rem;
    }
    .update-list b{
      color:#fff;
    }
    .bullet{
      width:8px;
      height:8px;
      border-radius:999px;
      margin-top:.55em;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      flex:0 0 auto;
      box-shadow:0 0 0 4px rgba(255,159,67,.12);
    }

    .section{
      padding:var(--section-gap) 0 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:24px;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.5rem, 2vw, 2.1rem);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .section-head p{
      margin:0;
      max-width:60ch;
      color:var(--muted);
      font-size:.96rem;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:18px;
    }
    .feature-card{
      padding:22px;
      background:
        linear-gradient(180deg, rgba(21,30,44,.95), rgba(16,22,33,.96));
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
    .feature-card:hover,
    .panel:hover,
    .entry-card:hover,
    .path-card:hover,
    .stat-card:hover,
    .contact-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,159,67,.22);
      box-shadow:0 22px 42px rgba(0,0,0,.3);
    }
    .feature-icon,
    .card-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#1b1108;
      font-weight:900;
      background:linear-gradient(135deg, rgba(255,201,106,1), rgba(255,141,91,1));
      box-shadow:0 16px 28px rgba(255,145,73,.18);
      margin-bottom:14px;
      flex:0 0 auto;
    }
    .feature-card h3,
    .stat-card h3,
    .entry-card h3,
    .path-card h3,
    .side-card h3,
    .contact-card h3{
      margin:0 0 8px;
      font-size:1.05rem;
      line-height:1.3;
    }
    .feature-card p,
    .entry-card p,
    .path-card p,
    .side-card p,
    .contact-card p,
    .stat-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }
    .feature-foot{
      margin-top:14px;
      display:flex;
      justify-content:flex-start;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:#ffd7ad;
      font-weight:700;
      font-size:.92rem;
    }

    .stats-band{
      padding:24px 0 0;
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .stat-card{
      padding:22px;
      background:linear-gradient(180deg, rgba(17,24,36,.95), rgba(12,17,25,.94));
    }
    .stat-value{
      display:block;
      font-size:2rem;
      font-weight:900;
      line-height:1;
      letter-spacing:-.04em;
      margin-bottom:8px;
      color:#fff;
    }
    .stat-label{
      color:#f1cfa8;
      font-weight:700;
      font-size:.9rem;
      margin-bottom:6px;
    }

    .entrance-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.5fr) 360px;
      gap:18px;
      align-items:start;
    }
    .track-wrap{
      overflow:hidden;
      border-radius:28px;
    }
    .entry-track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:minmax(250px, 1fr);
      gap:16px;
      overflow-x:auto;
      padding-bottom:8px;
      scroll-snap-type:x mandatory;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,159,67,.35) transparent;
    }
    .entry-track::-webkit-scrollbar{height:8px}
    .entry-track::-webkit-scrollbar-thumb{
      background:linear-gradient(90deg, rgba(255,159,67,.42), rgba(255,93,108,.44));
      border-radius:999px;
    }
    .entry-track::-webkit-scrollbar-track{background:transparent}
    .entry-card{
      min-width:250px;
      scroll-snap-align:start;
      display:flex;
      flex-direction:column;
      min-height:340px;
      background:
        linear-gradient(180deg, rgba(21,30,44,.98), rgba(13,18,27,.98));
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
    .entry-cover{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
      background:
        radial-gradient(500px 200px at 70% 10%, rgba(255,159,67,.22), transparent 54%),
        linear-gradient(145deg, rgba(37,44,61,1), rgba(16,21,31,1));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .entry-cover::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent 0 58%, rgba(8,11,16,.68) 100%),
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.08), transparent 14%),
        radial-gradient(circle at 78% 38%, rgba(255,93,108,.13), transparent 16%);
      transition:transform var(--speed) var(--ease);
    }
    .entry-card:hover .entry-cover::before{
      transform:scale(1.04);
    }
    .entry-cover .cover-badge{
      position:absolute;
      left:14px;
      top:14px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(7,10,15,.56);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      font-size:.8rem;
      backdrop-filter:blur(10px);
    }
    .entry-cover .cover-score{
      position:absolute;
      right:14px;
      top:14px;
      font-weight:900;
      color:#ffd6a9;
      font-size:1.2rem;
      text-shadow:0 8px 18px rgba(0,0,0,.3);
    }
    .entry-body{
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:18px;
      flex:1 1 auto;
    }
    .entry-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      min-height:30px;
      padding:0 10px;
      font-size:.8rem;
      background:rgba(255,255,255,.03);
    }
    .entry-card p{
      flex:1 1 auto;
    }
    .card-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:auto;
    }
    .meta{
      color:var(--muted);
      font-size:.86rem;
    }

    .entry-sidebar{
      position:sticky;
      top:96px;
      display:grid;
      gap:16px;
    }
    .side-card{
      padding:20px;
      background:linear-gradient(180deg, rgba(17,24,36,.96), rgba(12,17,25,.94));
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .tag-cloud a{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      color:#dce5f0;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
    }
    .tag-cloud a:hover{
      transform:translateY(-2px);
      border-color:rgba(255,159,67,.28);
      background:rgba(255,159,67,.08);
    }
    .mini-list{
      margin:14px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:12px;
    }
    .mini-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#d5deea;
      font-size:.93rem;
    }
    .mini-list .bullet{margin-top:.5em}
    .side-links{
      display:grid;
      gap:10px;
      margin-top:14px;
    }
    .side-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-height:46px;
      padding:0 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#eef3fb;
      transition:transform var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
    }
    .side-links a:hover{
      transform:translateY(-2px);
      border-color:rgba(255,159,67,.24);
      background:rgba(255,159,67,.08);
    }

    .path-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .path-card{
      padding:22px;
      background:
        linear-gradient(180deg, rgba(20,28,41,.96), rgba(13,18,27,.96));
    }
    .path-num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;
      height:34px;
      border-radius:12px;
      margin-bottom:14px;
      background:rgba(255,159,67,.12);
      color:#ffd3a2;
      border:1px solid rgba(255,159,67,.2);
      font-weight:800;
    }
    .path-card ul{
      margin:14px 0 16px;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .path-card li{
      display:flex;
      gap:10px;
      color:#d6deea;
      font-size:.92rem;
    }
    .path-card li .bullet{margin-top:.5em}

    .faq-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .faq-item{
      background:linear-gradient(180deg, rgba(17,24,36,.96), rgba(12,17,25,.95));
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:18px 20px;
      font-weight:700;
      color:#eef3fb;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#fff;
      flex:0 0 auto;
      transition:transform var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease);
    }
    .faq-item[open] summary{
      border-bottom:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.015);
    }
    .faq-item[open] summary::after{
      content:"–";
      background:rgba(255,159,67,.14);
      color:#ffd7ad;
    }
    .faq-item .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
      font-size:.94rem;
    }

    .contact-grid{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap:18px;
      align-items:start;
    }
    .contact-copy{
      display:grid;
      gap:16px;
    }
    .contact-card{
      padding:22px;
      background:linear-gradient(180deg, rgba(17,24,36,.96), rgba(12,17,25,.94));
    }
    .contact-card strong{
      display:block;
      margin-bottom:8px;
      font-size:1.02rem;
    }
    .contact-card .mini-list{margin-top:12px}
    .form-card{
      padding:22px;
      background:linear-gradient(180deg, rgba(17,24,36,.96), rgba(12,17,25,.95));
    }
    .contact-form{
      display:grid;
      gap:14px;
    }
    .field-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .field label{
      display:block;
      margin:0 0 8px;
      color:#dbe4f0;
      font-weight:700;
      font-size:.93rem;
    }
    .contact-form textarea{
      min-height:132px;
      resize:vertical;
    }
    .submit-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }
    .form-note{
      color:var(--muted);
      font-size:.88rem;
    }

    .footer{
      margin-top:var(--section-gap);
      padding:30px 0 38px;
      border-top:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(10,14,20,.08), rgba(8,11,16,.45));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      margin-bottom:14px;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .footer p{
      margin:0 0 10px;
      color:var(--muted);
      font-size:.94rem;
    }
    .copyright{
      color:#c8d1de;
      font-size:.9rem;
    }
    .footer-links{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px 12px;
      justify-items:start;
    }
    .footer-links a{
      color:#dce5f0;
      padding:4px 0;
      transition:color var(--speed) var(--ease), transform var(--speed) var(--ease);
    }
    .footer-links a:hover{
      color:#ffd7ad;
      transform:translateX(2px);
    }

    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:200;
      min-width:240px;
      max-width:min(92vw, 340px);
      padding:14px 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(14,19,28,.96);
      box-shadow:var(--shadow);
      color:#eef3fb;
      transform:translateY(16px);
      opacity:0;
      pointer-events:none;
      transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
    }
    .toast.show{
      opacity:1;
      transform:translateY(0);
    }
    .toast strong{
      display:block;
      margin-bottom:4px;
      color:#ffd7ad;
    }

    .hidden{display:none !important}

    @media (max-width: 1199px){
      .hero-grid,
      .contact-grid,
      .entrance-layout{
        grid-template-columns:1fr;
      }
      .entry-sidebar{
        position:static;
      }
      .path-grid,
      .feature-grid,
      .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .faq-grid{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 1023px){
      .nav-toggle{display:inline-flex}
      .header-actions{
        width:100%;
        order:5;
        display:none;
        padding-top:2px;
      }
      body.nav-open .header-actions{
        display:flex;
        flex-wrap:wrap;
      }
      .hero{
        padding-top:22px;
      }
      .hero-shell{
        border-radius:28px;
      }
      .hero-grid{
        padding:22px;
      }
      .section{padding-top:72px}
    }

    @media (max-width: 767px){
      :root{
        --gutter:16px;
        --section-gap:56px;
      }
      .brand-text strong{font-size:.98rem}
      .brand-text small{font-size:.76rem}
      .site-nav{
        width:100%;
        padding-top:8px;
        order:4;
      }
      .header-inner{
        gap:10px;
      }
      .hero h1{
        max-width:none;
      }
      .hero-desc{font-size:.98rem}
      .hero-actions .btn,
      .header-actions .btn,
      .header-actions .ghost-btn,
      .header-actions .primary-btn{
        width:100%;
      }
      .hero-actions{display:grid}
      .feature-grid,
      .stats-grid,
      .path-grid{
        grid-template-columns:1fr;
      }
      .matrix{
        grid-template-columns:1fr;
      }
      .field-row{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .footer-links{
        grid-template-columns:1fr 1fr;
      }
      .entry-card{
        min-width:84vw;
      }
    }

    @media (max-width: 520px){
      .container{width:min(var(--container), calc(100% - 1.25rem))}
      .hero-shell{border-radius:24px}
      .hero-grid{padding:18px}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .search-box form{
        grid-template-columns:1fr;
      }
      .search-box .btn{
        width:100%;
      }
      .entry-card{
        min-width:88vw;
      }
      .footer-links{
        grid-template-columns:1fr;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation:none !important;
        transition:none !important;
      }
    }