/* roulang page: index */
:root{
      --bg:#07070A;
      --bg-2:#0B0D12;
      --panel:#111118;
      --panel-2:#151522;
      --text:#F8FAFC;
      --muted:#CBD5E1;
      --weak:#A1A1AA;
      --line:rgba(139,92,246,.28);
      --line-2:rgba(34,211,238,.28);
      --purple:#8B5CF6;
      --pink:#D946EF;
      --cyan:#22D3EE;
      --mint:#2DD4BF;
      --amber:#F59E0B;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 0 50px rgba(139,92,246,.13), inset 0 1px 0 rgba(255,255,255,.04);
      --shadow-cyan:0 0 45px rgba(34,211,238,.12);
      --container:1220px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 14% 8%, rgba(139,92,246,.22), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(34,211,238,.16), transparent 32%),
        linear-gradient(180deg,#07070A 0%,#0B0D12 44%,#07070A 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.36;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2),transparent);
      z-index:-2;
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:linear-gradient(120deg, transparent 0%, rgba(34,211,238,.08) 45%, transparent 55%);
      transform:translateX(-120%);
      animation:scan 9s linear infinite;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img,svg{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(139,92,246,.55);color:#fff}
    .site-container{width:min(100% - 40px,var(--container));margin-inline:auto}
    .section{padding:94px 0}
    .section-tight{padding:62px 0}
    .gradient-text{
      background:linear-gradient(95deg,#fff 0%,#c4b5fd 42%,#67e8f9 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .neon-line{height:1px;background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:30px;
      padding:5px 12px;
      border:1px solid rgba(34,211,238,.24);
      border-radius:999px;
      color:#dffcff;
      background:rgba(34,211,238,.075);
      font-size:13px;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .badge:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 16px var(--cyan);
    }
    .badge.purple{border-color:rgba(139,92,246,.28);background:rgba(139,92,246,.1)}
    .badge.purple:before{background:var(--purple);box-shadow:0 0 16px var(--purple)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:800;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      border:1px solid transparent;
      outline:none;
      user-select:none;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(100deg,var(--purple),var(--pink) 48%,var(--cyan));
      box-shadow:0 0 34px rgba(139,92,246,.28),0 0 24px rgba(34,211,238,.13);
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 45px rgba(139,92,246,.38),0 0 30px rgba(34,211,238,.18)}
    .btn-secondary{
      color:#eef2ff;
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.14);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .btn-secondary:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08)}
    .btn:focus-visible,a:focus-visible,input:focus-visible{
      outline:2px solid var(--cyan);
      outline-offset:3px;
      box-shadow:0 0 0 5px rgba(34,211,238,.14);
    }
    .card{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
    }
    .card:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:radial-gradient(circle at 18% 12%, rgba(139,92,246,.2), transparent 34%),
                 radial-gradient(circle at 86% 88%, rgba(34,211,238,.13), transparent 34%);
      opacity:.65;
      pointer-events:none;
      transition:opacity .24s ease;
    }
    .card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.42);
      box-shadow:0 0 58px rgba(139,92,246,.18),0 0 34px rgba(34,211,238,.12);
    }
    .card:hover:before{opacity:1}
    .card-content{position:relative;z-index:1}
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(7,7,10,.88);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar:after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-1px;height:1px;
      background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
      opacity:.85;
    }
    .nav-wrap{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .logo-mark{
      width:40px;height:40px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(34,211,238,.14));
      border:1px solid rgba(34,211,238,.34);
      box-shadow:0 0 28px rgba(139,92,246,.2);
      flex:none;
    }
    .logo-text{
      font-size:15px;
      line-height:1.18;
      max-width:260px;
    }
    .desktop-nav{display:flex;align-items:center;gap:8px}
    .nav-link{
      position:relative;
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
      transition:color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover{color:#fff;background:rgba(255,255,255,.055)}
    .nav-link.active{
      color:#fff;
      background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(34,211,238,.11));
      box-shadow:0 0 24px rgba(139,92,246,.16);
    }
    .menu-btn{
      display:none;
      width:46px;height:46px;
      border-radius:15px;
      border:1px solid rgba(34,211,238,.28);
      background:rgba(255,255,255,.035);
      color:#fff;
    }
    .mobile-panel{
      display:none;
      border-top:1px solid rgba(255,255,255,.08);
      padding:14px 0 20px;
    }
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{display:flex;margin:6px 0;padding:13px 14px}
    .hero{
      padding:34px 0 92px;
      position:relative;
    }
    .countdown-shell{
      border:1px solid rgba(139,92,246,.36);
      border-radius:24px;
      padding:14px;
      background:linear-gradient(90deg,rgba(139,92,246,.12),rgba(34,211,238,.06),rgba(217,70,239,.09));
      box-shadow:0 0 44px rgba(139,92,246,.12);
    }
    .countdown-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      border-radius:18px;
      background:rgba(7,7,10,.72);
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
    }
    .time-grid{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:10px}
    .time-box{
      min-width:64px;
      text-align:center;
      border-radius:14px;
      padding:8px 10px;
      background:rgba(0,0,0,.28);
      border:1px solid rgba(34,211,238,.24);
      box-shadow:inset 0 0 18px rgba(34,211,238,.045);
    }
    .time-num{
      display:block;
      font-variant-numeric:tabular-nums;
      font-size:24px;
      line-height:1.1;
      font-weight:900;
      color:#fff;
      text-shadow:0 0 16px rgba(34,211,238,.45);
    }
    .time-label{font-size:12px;color:var(--weak)}
    .hero-title{
      font-size:clamp(2.55rem,7vw,4.7rem);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:950;
    }
    .icon-matrix{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .matrix-item{
      min-height:118px;
      border-radius:22px;
      padding:16px;
      border:1px solid rgba(255,255,255,.1);
      background:
        linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.016)),
        radial-gradient(circle at 20% 0%,rgba(139,92,246,.18),transparent 40%);
      transition:.22s ease;
    }
    .matrix-item:hover{transform:translateY(-4px) scale(1.015);border-color:rgba(34,211,238,.38)}
    .matrix-icon{
      width:38px;height:38px;border-radius:14px;
      display:grid;place-items:center;
      color:#fff;
      background:rgba(139,92,246,.18);
      border:1px solid rgba(139,92,246,.28);
      margin-bottom:16px;
      box-shadow:0 0 24px rgba(139,92,246,.15);
    }
    .status-strip{
      height:8px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.08);
    }
    .status-strip span{
      display:block;
      height:100%;
      width:76%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--purple),var(--cyan));
      animation:pulseLine 2.6s ease-in-out infinite;
    }
    .topic-pill{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:16px 18px;
      min-height:66px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.032);
      transition:.22s ease;
    }
    .topic-pill:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.42);background:rgba(139,92,246,.07)}
    .asym-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:22px;
    }
    .small-card-grid{display:grid;grid-template-columns:1fr;gap:16px}
    .feature-big{min-height:410px;padding:30px}
    .feature-small{padding:22px}
    .poster-wall{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-auto-rows:112px;
      gap:16px;
    }
    .wall-tile{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      padding:20px;
      border:1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(135deg,rgba(139,92,246,.14),rgba(34,211,238,.06)),
        rgba(255,255,255,.025);
      transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
    }
    .wall-tile:after{
      content:"";
      position:absolute;
      inset:0;
      background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.035) 12px);
      opacity:.38;
      transform:translateY(-16px);
      transition:transform .28s ease;
      pointer-events:none;
    }
    .wall-tile:hover{transform:scale(1.018);border-color:rgba(34,211,238,.42);box-shadow:var(--shadow-cyan)}
    .wall-tile:hover:after{transform:translateY(0)}
    .tile-lg{grid-column:span 6;grid-row:span 2}
    .tile-md{grid-column:span 3;grid-row:span 2}
    .tile-wide{grid-column:span 6;grid-row:span 1}
    .tile-sm{grid-column:span 3;grid-row:span 1}
    .news-layout{
      display:grid;
      grid-template-columns:1fr 360px;
      gap:22px;
    }
    .news-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding:20px 0;
      border-bottom:1px solid rgba(255,255,255,.09);
    }
    .news-item:last-child{border-bottom:0}
    .news-item a:hover{color:#67e8f9}
    .compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .plan{
      padding:24px;
      min-height:310px;
    }
    .plan.recommend{
      border-color:rgba(34,211,238,.48);
      background:linear-gradient(180deg,rgba(34,211,238,.095),rgba(139,92,246,.055));
      transform:translateY(-10px);
    }
    .faq-wrap{
      display:grid;
      grid-template-columns:320px 1fr;
      gap:26px;
      align-items:start;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.09);
      border-radius:20px;
      background:rgba(255,255,255,.028);
      overflow:hidden;
      margin-bottom:12px;
      transition:.22s ease;
    }
    .faq-item.active{border-color:rgba(34,211,238,.42);box-shadow:0 0 34px rgba(34,211,238,.08)}
    .faq-q{
      width:100%;
      min-height:58px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      text-align:left;
      padding:17px 18px;
      color:#fff;
      background:transparent;
      border:0;
      font-weight:850;
    }
    .faq-a{
      max-height:0;
      opacity:0;
      overflow:hidden;
      transition:max-height .28s ease,opacity .2s ease;
    }
    .faq-a p{padding:0 18px 18px;color:var(--muted);font-size:15px}
    .faq-item.active .faq-a{max-height:180px;opacity:1}
    .faq-item .arrow{transition:transform .22s ease;color:var(--cyan)}
    .faq-item.active .arrow{transform:rotate(45deg)}
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      padding:42px;
      border:1px solid rgba(34,211,238,.28);
      background:
        radial-gradient(circle at 20% 20%,rgba(139,92,246,.25),transparent 34%),
        radial-gradient(circle at 90% 70%,rgba(34,211,238,.16),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
      box-shadow:0 0 70px rgba(139,92,246,.18);
    }
    .input{
      width:100%;
      min-height:52px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(0,0,0,.28);
      color:#fff;
      padding:0 18px;
      outline:none;
      transition:.2s ease;
    }
    .input::placeholder{color:#71717A}
    .input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 5px rgba(34,211,238,.12)}
    .footer{
      background:#050507;
      border-top:1px solid rgba(255,255,255,.08);
      position:relative;
    }
    .footer:before{
      content:"";
      position:absolute;
      left:0;right:0;top:0;height:1px;
      background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    }
    .footer-link{color:var(--weak);transition:.2s ease}
    .footer-link:hover{color:#fff}
    @keyframes scan{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
    @keyframes pulseLine{0%,100%{filter:brightness(1);width:70%}50%{filter:brightness(1.35);width:82%}}
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }
    @media (max-width:1024px){
      .section{padding:78px 0}
      .desktop-nav,.nav-cta{display:none}
      .menu-btn{display:grid;place-items:center}
      .icon-matrix{grid-template-columns:repeat(2,1fr)}
      .asym-grid,.news-layout,.faq-wrap{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .plan.recommend{transform:none}
      .poster-wall{grid-template-columns:repeat(6,1fr)}
      .tile-lg,.tile-wide{grid-column:span 6}
      .tile-md,.tile-sm{grid-column:span 3}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 32px,var(--container))}
      .nav-wrap{min-height:68px}
      .logo-text{font-size:13px;max-width:210px}
      .hero{padding:24px 0 72px}
      .countdown-inner{flex-direction:column;align-items:stretch}
      .time-grid{grid-template-columns:repeat(4,1fr)}
      .time-box{min-width:0;padding:7px 6px}
      .time-num{font-size:20px}
      .feature-big{min-height:auto;padding:24px}
      .poster-wall{grid-template-columns:1fr;grid-auto-rows:auto}
      .tile-lg,.tile-wide,.tile-md,.tile-sm{grid-column:auto;grid-row:auto;min-height:150px}
      .news-item{display:block}
      .cta-panel{padding:28px 20px;border-radius:26px}
    }
    @media (max-width:520px){
      .section{padding:64px 0}
      .hero-title{font-size:2.45rem}
      .icon-matrix{grid-template-columns:1fr}
      .time-grid{gap:7px}
      .btn{width:100%}
      .topic-pill{align-items:flex-start;flex-direction:column}
    }

/* roulang page: category1 */
:root{
      --bg:#07070A;
      --bg-2:#0B0D12;
      --panel:#111118;
      --panel-2:#151522;
      --text:#F8FAFC;
      --muted:#CBD5E1;
      --weak:#A1A1AA;
      --dim:#71717A;
      --purple:#8B5CF6;
      --pink:#D946EF;
      --cyan:#22D3EE;
      --mint:#2DD4BF;
      --amber:#F59E0B;
      --line:rgba(255,255,255,.1);
      --line-strong:rgba(34,211,238,.28);
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --shadow:0 0 46px rgba(139,92,246,.14);
      --shadow-cyan:0 0 42px rgba(34,211,238,.12);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 16% 0%,rgba(139,92,246,.25),transparent 32%),
        radial-gradient(circle at 86% 12%,rgba(34,211,238,.16),transparent 30%),
        linear-gradient(180deg,#07070A 0%,#0B0D12 42%,#07070A 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.35),rgba(0,0,0,.85));
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.18;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 4px);
      mix-blend-mode:screen;
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    input{outline:none}
    ::selection{background:rgba(34,211,238,.32);color:#fff}
    .site-container{
      width:min(100% - 40px,1220px);
      margin-inline:auto;
    }
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(7,7,10,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-1px;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
      opacity:.9;
    }
    .nav-wrap{
      height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:900;
      letter-spacing:-.03em;
      color:#fff;
    }
    .logo-mark{
      width:42px;
      height:42px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:15px;
      color:#fff;
      background:
        radial-gradient(circle at 20% 20%,rgba(34,211,238,.35),transparent 36%),
        linear-gradient(135deg,rgba(139,92,246,.32),rgba(217,70,239,.16));
      border:1px solid rgba(34,211,238,.28);
      box-shadow:0 0 28px rgba(139,92,246,.2);
    }
    .logo-text{
      max-width:360px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:16px;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(255,255,255,.03);
    }
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:9px 16px;
      border-radius:999px;
      color:var(--weak);
      font-size:14px;
      font-weight:800;
      transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(139,92,246,.12);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,rgba(139,92,246,.32),rgba(34,211,238,.14));
      box-shadow:0 0 24px rgba(139,92,246,.18), inset 0 0 0 1px rgba(34,211,238,.2);
    }
    .nav-cta{display:flex;align-items:center}
    .btn{
      min-height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:12px 19px;
      font-weight:900;
      font-size:14px;
      border:1px solid transparent;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
      user-select:none;
    }
    .btn-primary{
      color:#061016;
      background:linear-gradient(135deg,var(--cyan),var(--purple) 52%,var(--pink));
      box-shadow:0 0 28px rgba(34,211,238,.16),0 0 34px rgba(139,92,246,.2);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 0 34px rgba(34,211,238,.24),0 0 46px rgba(139,92,246,.3);
    }
    .btn-secondary{
      color:#fff;
      background:rgba(255,255,255,.035);
      border-color:rgba(34,211,238,.28);
      box-shadow:inset 0 0 0 1px rgba(139,92,246,.12);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      background:rgba(139,92,246,.13);
      border-color:rgba(34,211,238,.48);
      box-shadow:0 0 30px rgba(34,211,238,.12);
    }
    .menu-btn{
      display:none;
      width:46px;
      height:46px;
      border-radius:15px;
      border:1px solid rgba(34,211,238,.24);
      background:rgba(255,255,255,.035);
      color:#fff;
      align-items:center;
      justify-content:center;
      transition:.22s ease;
    }
    .menu-btn:hover,.menu-btn:focus-visible{
      border-color:rgba(34,211,238,.55);
      box-shadow:0 0 26px rgba(34,211,238,.14);
    }
    .mobile-panel{
      display:none;
      border-top:1px solid rgba(255,255,255,.08);
      background:#07070A;
      padding:14px 0 22px;
    }
    .mobile-panel.open{display:block}
    .mobile-panel .nav-link{
      width:100%;
      justify-content:flex-start;
      margin:6px 0;
      min-height:48px;
    }
    .section{
      padding:94px 0;
      position:relative;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      color:#D8F8FF;
      font-size:13px;
      font-weight:900;
      background:rgba(34,211,238,.08);
      border:1px solid rgba(34,211,238,.22);
      box-shadow:inset 0 0 20px rgba(34,211,238,.05);
    }
    .eyebrow:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--mint);
      box-shadow:0 0 14px var(--mint);
    }
    .page-hero{
      padding:72px 0 54px;
      overflow:hidden;
    }
    .hero-shell{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);
      gap:32px;
      align-items:stretch;
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      inset:-40px -80px;
      z-index:-1;
      background:
        linear-gradient(115deg,transparent 0 36%,rgba(34,211,238,.08) 36.4%,transparent 37.2% 100%),
        radial-gradient(circle at 62% 22%,rgba(217,70,239,.17),transparent 30%);
    }
    h1{
      margin:20px 0 18px;
      max-width:830px;
      font-size:clamp(34px,6vw,70px);
      line-height:1.04;
      letter-spacing:-.07em;
      font-weight:950;
    }
    .gradient-text{
      background:linear-gradient(90deg,#fff 0%,#BFF7FF 35%,#C4B5FD 62%,#F0ABFC 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-desc{
      max-width:680px;
      color:var(--muted);
      font-size:17px;
      line-height:1.9;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:12px;
      margin-top:28px;
    }
    .status-panel,.content-card,.rule-card,.cta-panel,.faq-item,.tag-rail,.index-panel{
      background:
        radial-gradient(circle at 20% 0%,rgba(139,92,246,.16),transparent 36%),
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.1);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }
    .status-panel{
      padding:24px;
      position:relative;
      overflow:hidden;
      min-height:100%;
    }
    .status-panel:after,.content-card:after,.cta-panel:after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.08) 42%,transparent 50% 100%);
      transform:translateX(-120%);
      animation:scan 5.6s ease-in-out infinite;
    }
    @keyframes scan{
      0%,45%{transform:translateX(-120%)}
      75%,100%{transform:translateX(120%)}
    }
    .panel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:22px;
    }
    .lights{display:flex;gap:7px}
    .lights span{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--dim);
    }
    .lights span:nth-child(1){background:var(--pink);box-shadow:0 0 14px var(--pink)}
    .lights span:nth-child(2){background:var(--amber);box-shadow:0 0 14px rgba(245,158,11,.8)}
    .lights span:nth-child(3){background:var(--mint);box-shadow:0 0 14px var(--mint)}
    .status-badge{
      color:#BFF7FF;
      font-size:12px;
      font-weight:900;
      border:1px solid rgba(34,211,238,.24);
      border-radius:999px;
      padding:5px 10px;
      background:rgba(34,211,238,.07);
    }
    .step-list{
      display:grid;
      gap:13px;
    }
    .step-row{
      display:grid;
      grid-template-columns:42px 1fr auto;
      gap:12px;
      align-items:center;
      padding:14px;
      border-radius:18px;
      background:rgba(7,7,10,.48);
      border:1px solid rgba(255,255,255,.08);
      transition:.22s ease;
    }
    .step-row:hover{
      transform:translateX(4px);
      border-color:rgba(34,211,238,.28);
      background:rgba(34,211,238,.055);
    }
    .step-no{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:950;
      background:linear-gradient(135deg,rgba(139,92,246,.62),rgba(34,211,238,.2));
      border:1px solid rgba(34,211,238,.22);
    }
    .step-title{font-weight:950}
    .step-text{color:var(--weak);font-size:13px;line-height:1.55}
    .step-state{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--mint);
      box-shadow:0 0 16px var(--mint);
    }
    .progress-wrap{
      margin-top:22px;
      padding:16px;
      border-radius:18px;
      background:rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.08);
    }
    .progress-line{
      height:9px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .progress-line span{
      display:block;
      width:76%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--purple),var(--cyan),var(--mint));
      animation:pulseLine 2.6s ease-in-out infinite;
    }
    @keyframes pulseLine{
      0%,100%{filter:saturate(1);opacity:.82}
      50%{filter:saturate(1.5);opacity:1}
    }
    .neon-line{
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(139,92,246,.75),rgba(34,211,238,.75),transparent);
    }
    .tag-rail{
      padding:18px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      border-radius:24px;
    }
    .tag,.mini-tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.11);
      color:var(--muted);
      background:rgba(255,255,255,.035);
      font-weight:850;
      transition:.22s ease;
      white-space:nowrap;
    }
    .tag{
      min-height:42px;
      padding:9px 15px;
      font-size:14px;
    }
    .mini-tag{
      min-height:28px;
      padding:4px 10px;
      font-size:12px;
    }
    .tag.active,.tag:hover,.mini-tag.active{
      color:#fff;
      border-color:rgba(34,211,238,.42);
      background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(34,211,238,.09));
      box-shadow:0 0 24px rgba(139,92,246,.12);
    }
    .section-head{
      display:grid;
      grid-template-columns:minmax(0,.8fr) minmax(280px,.42fr);
      gap:24px;
      align-items:end;
      margin-bottom:34px;
    }
    .section-title{
      margin:14px 0 0;
      font-size:clamp(28px,4vw,42px);
      line-height:1.18;
      letter-spacing:-.05em;
      font-weight:950;
    }
    .section-summary{
      color:var(--weak);
      font-size:15px;
      max-width:460px;
    }
    .timeline{
      display:grid;
      gap:18px;
      position:relative;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:23px;
      top:18px;
      bottom:18px;
      width:1px;
      background:linear-gradient(var(--purple),var(--cyan),transparent);
    }
    .content-card{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:48px minmax(0,1fr) minmax(220px,.32fr);
      gap:20px;
      padding:22px;
      transition:.22s ease;
    }
    .content-card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.32);
      box-shadow:0 0 42px rgba(34,211,238,.12),0 0 52px rgba(139,92,246,.15);
    }
    .node{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:17px;
      font-weight:950;
      color:#fff;
      background:linear-gradient(135deg,var(--purple),rgba(34,211,238,.32));
      border:1px solid rgba(34,211,238,.28);
      z-index:1;
    }
    .card-title{
      font-size:20px;
      line-height:1.35;
      font-weight:950;
      letter-spacing:-.03em;
      margin-bottom:8px;
    }
    .card-desc{
      color:var(--weak);
      font-size:15px;
      line-height:1.75;
    }
    .card-meta{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
      color:var(--dim);
      font-size:13px;
      text-align:right;
    }
    .rule-grid{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:22px;
      align-items:start;
    }
    .index-panel{
      padding:24px;
      position:sticky;
      top:100px;
    }
    .index-panel h3,.rule-card h3{font-size:20px;font-weight:950;margin-bottom:12px}
    .index-list{
      display:grid;
      gap:10px;
      margin-top:18px;
    }
    .index-list a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:46px;
      padding:10px 12px;
      border-radius:15px;
      color:var(--muted);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      transition:.22s ease;
      font-weight:850;
      font-size:14px;
    }
    .index-list a:hover{
      color:#fff;
      transform:translateX(4px);
      border-color:rgba(34,211,238,.32);
      background:rgba(34,211,238,.06);
    }
    .rule-stack{
      display:grid;
      gap:16px;
    }
    .rule-card{
      padding:23px;
      transition:.22s ease;
      border-radius:var(--radius-md);
    }
    .rule-card:hover{
      transform:translateY(-4px);
      border-color:rgba(217,70,239,.28);
      box-shadow:0 0 34px rgba(217,70,239,.12);
    }
    .check-list{
      display:grid;
      gap:12px;
      margin-top:16px;
    }
    .check-list li{
      display:flex;
      gap:10px;
      color:var(--muted);
      font-size:15px;
    }
    .check-list li:before{
      content:"";
      width:18px;
      height:18px;
      margin-top:5px;
      flex:0 0 auto;
      border-radius:6px;
      background:
        linear-gradient(135deg,rgba(34,211,238,.85),rgba(139,92,246,.75));
      box-shadow:0 0 14px rgba(34,211,238,.16);
    }
    .signal-wall{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:16px;
    }
    .signal-tile{
      min-height:156px;
      position:relative;
      overflow:hidden;
      padding:20px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.1);
      background:
        radial-gradient(circle at 80% 0%,rgba(34,211,238,.16),transparent 38%),
        linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      transition:.22s ease;
    }
    .signal-tile:hover{
      transform:scale(1.018);
      border-color:rgba(34,211,238,.33);
      box-shadow:var(--shadow-cyan);
    }
    .signal-tile:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.18;
      background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.06) 12px 13px,transparent 13px 24px);
    }
    .signal-tile > *{position:relative}
    .tile-lg{grid-column:span 6;min-height:230px}
    .tile-md{grid-column:span 3}
    .tile-wide{grid-column:span 6}
    .tile-sm{grid-column:span 3;min-height:128px}
    .tile-title{
      font-size:19px;
      font-weight:950;
      letter-spacing:-.03em;
      margin-top:12px;
    }
    .tile-text{
      margin-top:8px;
      color:var(--weak);
      font-size:14px;
      max-width:420px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      padding:42px;
      border-radius:32px;
    }
    .cta-panel:before{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      border:1px solid rgba(34,211,238,.16);
      border-radius:50%;
      right:-190px;
      top:-210px;
      box-shadow:0 0 80px rgba(139,92,246,.12);
    }
    .cta-inner{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,.92fr) minmax(320px,.58fr);
      gap:28px;
      align-items:center;
    }
    .cta-title{
      font-size:clamp(30px,4.2vw,48px);
      line-height:1.16;
      letter-spacing:-.05em;
      font-weight:950;
      margin:14px 0;
    }
    .remind-form{
      display:grid;
      gap:12px;
      padding:18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(7,7,10,.48);
    }
    .form-input{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.045);
      color:#fff;
      padding:0 15px;
      transition:.22s ease;
    }
    .form-input::placeholder{color:var(--dim)}
    .form-input:focus{
      border-color:rgba(34,211,238,.55);
      box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 24px rgba(139,92,246,.12);
    }
    .faq-grid{
      display:grid;
      grid-template-columns:.42fr .58fr;
      gap:24px;
      align-items:start;
    }
    .faq-note{
      padding:24px;
      border-radius:24px;
      background:linear-gradient(180deg,rgba(245,158,11,.09),rgba(255,255,255,.025));
      border:1px solid rgba(245,158,11,.18);
      color:var(--muted);
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      overflow:hidden;
      border-radius:20px;
      transition:.22s ease;
    }
    .faq-item.active{
      border-color:rgba(34,211,238,.32);
      box-shadow:0 0 36px rgba(34,211,238,.1);
    }
    .faq-question{
      width:100%;
      min-height:58px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:17px 18px;
      color:#fff;
      background:transparent;
      border:0;
      text-align:left;
      font-weight:950;
    }
    .faq-icon{
      width:28px;
      height:28px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:50%;
      border:1px solid rgba(34,211,238,.24);
      color:var(--cyan);
      transition:.22s ease;
    }
    .faq-item.active .faq-icon{transform:rotate(45deg);background:rgba(34,211,238,.1)}
    .faq-answer{
      max-height:0;
      opacity:0;
      overflow:hidden;
      transition:max-height .28s ease,opacity .28s ease;
    }
    .faq-answer p{
      padding:0 18px 18px;
      color:var(--weak);
      font-size:15px;
    }
    .faq-item.active .faq-answer{
      max-height:180px;
      opacity:1;
    }
    .footer{
      position:relative;
      background:#050507;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer:before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      right:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    }
    .footer-link{
      color:var(--weak);
      transition:.22s ease;
    }
    .footer-link:hover{
      color:#fff;
      transform:translateX(3px);
    }
    a:focus-visible,button:focus-visible,input:focus-visible{
      outline:2px solid rgba(34,211,238,.75);
      outline-offset:3px;
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }
    @media (max-width:1024px){
      .hero-shell,.section-head,.rule-grid,.cta-inner,.faq-grid{
        grid-template-columns:1fr;
      }
      .index-panel{position:relative;top:auto}
      .content-card{
        grid-template-columns:48px 1fr;
      }
      .card-meta{
        grid-column:2;
        align-items:flex-start;
        text-align:left;
      }
      .tile-lg,.tile-wide{grid-column:span 12}
      .tile-md,.tile-sm{grid-column:span 6}
    }
    @media (max-width:820px){
      .desktop-nav,.nav-cta{display:none}
      .menu-btn{display:flex}
      .logo-text{max-width:calc(100vw - 132px);font-size:14px}
      .nav-wrap{height:68px}
      .section{padding:72px 0}
      .page-hero{padding:52px 0 36px}
      h1{letter-spacing:-.055em}
      .hero-actions{align-items:stretch}
      .hero-actions .btn{width:100%}
      .signal-wall{grid-template-columns:1fr}
      .tile-lg,.tile-wide,.tile-md,.tile-sm{grid-column:auto}
      .cta-panel{padding:26px}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 28px,1220px)}
      .status-panel,.content-card,.rule-card,.index-panel,.cta-panel,.faq-note{border-radius:20px}
      .step-row{grid-template-columns:38px 1fr}
      .step-state{display:none}
      .step-no{width:38px;height:38px}
      .content-card{grid-template-columns:1fr;padding:18px}
      .node{width:42px;height:42px}
      .card-meta{grid-column:auto}
      .tag-rail{padding:14px}
      .tag{width:100%;justify-content:flex-start}
      .section-head{margin-bottom:24px}
      .remind-form{padding:14px}
    }