/* roulang page: index */
:root{
      --bg:#0b0b12;
      --bg2:#10101b;
      --panel:#131320;
      --panel2:#18182a;
      --line:rgba(255,255,255,.10);
      --line2:rgba(255,79,216,.28);
      --text:#f5f6fb;
      --mute:#a9acc4;
      --pink:#ff4fd8;
      --cyan:#52e6d8;
      --yellow:#ffe36f;
      --green:#62f4b7;
      --radius:22px;
      --shadow:0 18px 60px rgba(0,0,0,.34);
      --shadow2:0 20px 50px rgba(255,79,216,.10);
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(255,79,216,.12), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(82,230,216,.11), transparent 22%),
        radial-gradient(circle at 50% 0%, rgba(255,227,111,.05), transparent 18%),
        linear-gradient(180deg, #090910 0%, #0c0c14 22%, #0b0b12 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 92%);
      opacity:.12;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(255,79,216,.35);color:#fff}
    .container{
      width:min(1180px, calc(100% - 32px));
      margin:0 auto;
    }
    .glass{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter: blur(14px);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      border-radius:999px;
      padding:.4rem .75rem;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#edf0ff;
      font-size:.84rem;
      transition:all .25s var(--ease);
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:rgba(255,79,216,.34);
      box-shadow:0 0 0 1px rgba(255,79,216,.12), 0 10px 24px rgba(0,0,0,.18);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.42rem .72rem;
      border-radius:999px;
      font-size:.83rem;
      letter-spacing:.02em;
      border:1px solid rgba(255,227,111,.25);
      background:linear-gradient(90deg, rgba(255,227,111,.16), rgba(255,79,216,.16));
      color:#fff7cf;
      box-shadow:0 0 0 1px rgba(255,255,255,.04);
    }
    .dot{
      width:.6rem;height:.6rem;border-radius:999px;display:inline-block;
      background:linear-gradient(135deg, var(--pink), var(--cyan));
      box-shadow:0 0 0 4px rgba(255,79,216,.12);
    }
    .nav-shell{
      position:sticky;top:0;z-index:50;
      transition:background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }
    .nav-shell.scrolled .nav-inner{
      background:rgba(12,12,20,.80);
      border-color:rgba(255,255,255,.12);
      box-shadow:0 14px 36px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }
    .nav-inner{
      margin:14px auto 0;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,16,.55);
      box-shadow:0 10px 30px rgba(0,0,0,.20);
      backdrop-filter: blur(14px);
    }
    .nav-link{
      position:relative;
      color:#d7daee;
      transition:all .25s var(--ease);
    }
    .nav-link:hover{color:#fff;transform:translateY(-1px)}
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, rgba(255,79,216,.16), rgba(82,230,216,.12));
      border-color:rgba(255,79,216,.28);
      box-shadow:0 0 0 1px rgba(255,79,216,.10);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      inset:auto 16px -8px 16px;
      height:2px;
      background:linear-gradient(90deg, var(--pink), var(--cyan));
      border-radius:999px;
    }
    .hero-frame{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 18% 18%, rgba(255,79,216,.16), transparent 30%),
        radial-gradient(circle at 80% 14%, rgba(82,230,216,.14), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:var(--shadow), var(--shadow2);
    }
    .hero-frame::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:linear-gradient(135deg, rgba(255,79,216,.22), transparent 32%, rgba(82,230,216,.18) 68%, transparent 82%);
      opacity:.7;
      pointer-events:none;
      mask:linear-gradient(180deg, rgba(0,0,0,.8), transparent 100%);
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.45rem .78rem;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#eef1ff;
      font-size:.86rem;
    }
    .title{
      letter-spacing:-.04em;
      line-height:1.04;
    }
    .lead{
      color:var(--mute);
      font-size:1.02rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.88rem 1.18rem;
      border-radius:16px;
      border:1px solid transparent;
      transition:all .25s var(--ease);
      font-weight:700;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      color:#0d0d14;
      background:linear-gradient(135deg, #ffe36f 0%, #ff7df0 46%, #65f0d9 100%);
      box-shadow:0 16px 32px rgba(255,79,216,.24);
    }
    .btn-primary:hover{
      box-shadow:0 20px 38px rgba(255,79,216,.28), 0 0 0 1px rgba(255,255,255,.16) inset;
    }
    .btn-secondary{
      color:#eef0ff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.10);
    }
    .btn-secondary:hover{
      border-color:rgba(82,230,216,.30);
      box-shadow:0 0 0 1px rgba(82,230,216,.12);
    }
    .section{
      padding:72px 0;
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
    }
    .section-title{
      font-size:clamp(1.35rem, 2vw, 1.95rem);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.15;
    }
    .section-desc{
      max-width:720px;
      color:var(--mute);
      font-size:.98rem;
    }
    .card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
        linear-gradient(180deg, rgba(19,19,32,.94), rgba(14,14,22,.94));
      box-shadow:0 16px 40px rgba(0,0,0,.24);
      transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,79,216,.28);
      box-shadow:0 18px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(255,79,216,.10);
    }
    .card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 24%, transparent 76%, rgba(82,230,216,.06));
      pointer-events:none;
      opacity:.7;
    }
    .mini-cover{
      aspect-ratio:16/9;
      border-radius:18px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,79,216,.28), transparent 30%),
        radial-gradient(circle at 72% 32%, rgba(82,230,216,.24), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      position:relative;
    }
    .mini-cover::before{
      content:"";
      position:absolute;
      inset:18% 20%;
      border-radius:24px;
      border:1px dashed rgba(255,255,255,.20);
      background:linear-gradient(135deg, rgba(255,255,255,.03), transparent);
    }
    .mini-cover::after{
      content:"";
      position:absolute;
      width:82px;height:82px;
      right:12px;bottom:12px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(255,227,111,.95), rgba(255,227,111,.10) 60%, transparent 65%);
      filter:blur(1px);
      opacity:.85;
    }
    .meta{
      color:#a9acc4;
      font-size:.84rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.34rem;
      padding:.28rem .58rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#dfe3ff;
      font-size:.78rem;
    }
    .tag.pink{border-color:rgba(255,79,216,.24);background:rgba(255,79,216,.10)}
    .tag.cyan{border-color:rgba(82,230,216,.24);background:rgba(82,230,216,.10)}
    .tag.yellow{border-color:rgba(255,227,111,.22);background:rgba(255,227,111,.10);color:#fff5bf}
    .stat-pill{
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.86rem 1rem;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
    }
    .stat-pill strong{font-size:1.02rem}
    .bar{
      width:100%;
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .bar > span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--pink), var(--cyan));
      box-shadow:0 0 24px rgba(255,79,216,.34);
    }
    .faq details{
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      overflow:hidden;
    }
    .faq details[open]{
      border-color:rgba(82,230,216,.24);
      box-shadow:0 0 0 1px rgba(82,230,216,.08);
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 20px;
      font-weight:700;
      color:#f5f6fb;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{
      content:"+";
      width:32px;height:32px;
      flex:0 0 32px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      transition:transform .25s var(--ease), background .25s var(--ease);
    }
    .faq details[open] summary::after{
      content:"–";
      transform:rotate(0deg);
      background:linear-gradient(135deg, rgba(255,79,216,.18), rgba(82,230,216,.14));
    }
    .faq .answer{
      padding:0 20px 18px;
      color:var(--mute);
    }
    .footer-link{
      color:#cfd4eb;
      transition:color .22s var(--ease);
    }
    .footer-link:hover{color:#fff}
    .soft-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    }
    .mobile-menu{
      display:none;
    }
    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:80;
      opacity:0;
      transform:translateY(18px);
      pointer-events:none;
      transition:all .28s var(--ease);
    }
    .toast.show{
      opacity:1;
      transform:translateY(0);
    }
    .toast-box{
      max-width:320px;
      padding:14px 16px;
      border-radius:18px;
      background:rgba(12,12,20,.92);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
      backdrop-filter:blur(16px);
    }
    @media (max-width: 1024px){
      .section{padding:62px 0}
    }
    @media (max-width: 768px){
      .nav-desktop{display:none}
      .mobile-menu{display:flex}
      .hero-frame{border-radius:24px}
      .section{padding:52px 0}
    }
    @media (max-width: 520px){
      .container{width:min(100% - 20px, 1180px)}
      .title{line-height:1.08}
      .btn{width:100%}
      .section-head{align-items:start}
      .faq summary{padding:16px}
      .faq .answer{padding:0 16px 16px}
    }

/* roulang page: category1 */
:root{
      --bg:#070b16;
      --bg2:#0b1020;
      --panel:#0f1729;
      --panel2:#111b33;
      --line:rgba(255,255,255,.09);
      --line2:rgba(255,255,255,.14);
      --text:#f5f7ff;
      --muted:#a7b0cd;
      --soft:#7e89ab;
      --pink:#ff4db8;
      --pink2:#ff7cd5;
      --cyan:#4de7ff;
      --lime:#c7ff5c;
      --amber:#ffd36a;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --shadow2:0 12px 32px rgba(0,0,0,.24);
      --radius:22px;
      --radius2:28px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1000px 600px at 15% -10%, rgba(255,77,184,.18), transparent 58%),
        radial-gradient(860px 520px at 88% 8%, rgba(77,231,255,.15), transparent 55%),
        radial-gradient(720px 420px at 50% 110%, rgba(199,255,92,.08), transparent 55%),
        linear-gradient(180deg, #060913 0%, #0a1020 40%, #070b16 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height:1.65;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:-20% -10% auto -10%;
      height:34rem;
      pointer-events:none;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,77,184,.14), transparent 32%),
        radial-gradient(circle at 72% 30%, rgba(77,231,255,.12), transparent 28%),
        radial-gradient(circle at 50% 60%, rgba(255,211,106,.06), transparent 32%);
      filter: blur(18px);
      opacity:.7;
      z-index:-1;
    }
    body::after{
      content:"";
      position:fixed;
      inset:auto -10% -15% -10%;
      height:28rem;
      pointer-events:none;
      background: radial-gradient(circle, rgba(255,77,184,.08), transparent 65%);
      filter: blur(28px);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(255,77,184,.35);color:#fff}

    .container{
      width:min(100% - 1.25rem, 80rem);
      margin-inline:auto;
    }
    @media (min-width:640px){
      .container{width:min(100% - 2rem, 80rem);}
    }

    .nav-inner{
      position:sticky;
      top:0;
      z-index:60;
      backdrop-filter: blur(18px);
      background: linear-gradient(180deg, rgba(7,11,22,.88), rgba(7,11,22,.72));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-link{
      color:#bfd0f1;
      background:rgba(255,255,255,.03);
      border:1px solid transparent;
      transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
    }
    .nav-link:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
      box-shadow:0 10px 26px rgba(0,0,0,.22);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, rgba(255,77,184,.2), rgba(77,231,255,.14));
      border-color:rgba(255,255,255,.1);
      box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 34px rgba(255,77,184,.08);
    }
    .shadow-glow{
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 14px 36px rgba(255,77,184,.12),
        0 8px 18px rgba(77,231,255,.08);
    }
    .dot{
      width:.55rem;
      height:.55rem;
      border-radius:9999px;
      background:var(--lime);
      box-shadow:0 0 0 4px rgba(199,255,92,.12), 0 0 18px rgba(199,255,92,.4);
    }
    .soft-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:2.9rem;
      padding:.78rem 1.15rem;
      border-radius:1rem;
      border:1px solid transparent;
      transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
      will-change:transform;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,
    .nav-link:focus-visible,
    .footer-link:focus-visible,
    input:focus-visible,
    summary:focus-visible{
      outline:none;
      box-shadow:0 0 0 2px rgba(77,231,255,.35), 0 0 0 6px rgba(77,231,255,.12);
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--pink) 0%, #d946ef 45%, #8b5cf6 100%);
      box-shadow:0 16px 34px rgba(255,77,184,.18), 0 8px 22px rgba(139,92,246,.14);
    }
    .btn-primary:hover{
      box-shadow:0 18px 38px rgba(255,77,184,.28), 0 10px 26px rgba(77,231,255,.12);
      filter:saturate(1.04);
    }
    .btn-secondary{
      color:#ecf2ff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.09);
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.16);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:9999px;
      padding:.34rem .72rem;
      font-size:.78rem;
      line-height:1;
      color:#dfe6ff;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
    }
    .badge-pink{
      color:#ffd9ef;
      background:rgba(255,77,184,.12);
      border-color:rgba(255,77,184,.22);
    }
    .badge-cyan{
      color:#d6faff;
      background:rgba(77,231,255,.10);
      border-color:rgba(77,231,255,.18);
    }
    .badge-lime{
      color:#efffd1;
      background:rgba(199,255,92,.11);
      border-color:rgba(199,255,92,.18);
    }
    .panel{
      position:relative;
      border-radius:var(--radius2);
      background:linear-gradient(180deg, rgba(17,27,51,.94), rgba(10,16,32,.88));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 10% 0%, rgba(255,77,184,.12), transparent 22%),
        radial-gradient(circle at 100% 10%, rgba(77,231,255,.12), transparent 18%);
      pointer-events:none;
    }
    .panel-soft{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow2);
    }
    .hero-title{
      letter-spacing:-.04em;
      text-wrap:balance;
      line-height:1.04;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      color:#dfe7ff;
      font-size:.82rem;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .section-kicker::before{
      content:"";
      width:2.25rem;
      height:1px;
      background:linear-gradient(90deg, rgba(255,77,184,.95), rgba(77,231,255,.85));
      box-shadow:0 0 14px rgba(255,77,184,.35);
    }
    .section-title{
      font-size:clamp(1.55rem, 2vw, 2.15rem);
      line-height:1.18;
      letter-spacing:-.03em;
      font-weight:900;
      color:#f6f8ff;
      text-wrap:balance;
    }
    .section-desc{
      color:var(--muted);
      max-width:46rem;
    }
    .mini-label{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:9999px;
      font-size:.75rem;
      color:#d8def6;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .card{
      position:relative;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(17,27,51,.92), rgba(10,16,32,.92));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:0 16px 40px rgba(0,0,0,.26);
      transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,255,255,.14);
      box-shadow:0 18px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(255,77,184,.06) inset;
    }
    .card-cover{
      position:relative;
      min-height:8.6rem;
      background:
        radial-gradient(circle at 20% 25%, rgba(255,77,184,.55), transparent 24%),
        radial-gradient(circle at 78% 18%, rgba(77,231,255,.46), transparent 20%),
        linear-gradient(135deg, rgba(255,77,184,.18), rgba(77,231,255,.12) 52%, rgba(255,255,255,.03));
      border-bottom:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .card-cover::after{
      content:"";
      position:absolute;
      inset:-20% -8% auto auto;
      width:8rem;
      height:8rem;
      background:radial-gradient(circle, rgba(255,255,255,.24), transparent 68%);
      filter:blur(10px);
      opacity:.65;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.32rem .58rem;
      border-radius:9999px;
      font-size:.76rem;
      color:#d7def5;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.07);
    }
    .chip-pink{background:rgba(255,77,184,.12);border-color:rgba(255,77,184,.2);color:#ffd8ef}
    .chip-cyan{background:rgba(77,231,255,.1);border-color:rgba(77,231,255,.18);color:#dafbff}
    .chip-lime{background:rgba(199,255,92,.1);border-color:rgba(199,255,92,.18);color:#efffcb}
    .chip-amber{background:rgba(255,211,106,.1);border-color:rgba(255,211,106,.18);color:#fff1c6}
    .stat-card{
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      padding:1rem 1rem .95rem;
    }
    .progress{
      height:.6rem;
      border-radius:9999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .progress > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--pink), var(--cyan));
      box-shadow:0 0 18px rgba(255,77,184,.25);
    }
    .count-ring{
      --p:78%;
      width:11.5rem;
      aspect-ratio:1;
      border-radius:9999px;
      background:conic-gradient(from 180deg, rgba(255,77,184,.96) 0 var(--p), rgba(255,255,255,.08) var(--p) 100%);
      padding:1rem;
      box-shadow:0 18px 40px rgba(255,77,184,.14), 0 0 0 1px rgba(255,255,255,.06) inset;
    }
    .count-ring > div{
      width:100%;
      height:100%;
      border-radius:9999px;
      background:radial-gradient(circle at 30% 20%, rgba(255,77,184,.08), transparent 28%), linear-gradient(180deg, rgba(10,16,32,.98), rgba(8,12,24,.94));
      border:1px solid rgba(255,255,255,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .count-ring .num{
      font-size:2.2rem;
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
      background:linear-gradient(135deg, #fff, #ffe1f2 45%, #c8faff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .count-ring .unit{
      color:var(--muted);
      font-size:.78rem;
    }
    .ghost-line{
      border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
    }
    .footer-link{
      transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
    }
    .footer-link:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.14);
    }
    .faq-item{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      overflow:hidden;
      box-shadow:0 12px 30px rgba(0,0,0,.18);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
      color:#eff3ff;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item .faq-icon{
      width:1.85rem;
      height:1.85rem;
      border-radius:9999px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      transition:transform .24s var(--ease), background .24s var(--ease);
      flex:none;
    }
    .faq-item[open] .faq-icon{
      transform:rotate(45deg);
      background:rgba(255,77,184,.14);
    }
    .faq-body{
      padding:0 1.1rem 1rem;
      color:var(--muted);
    }
    .mobile-menu{display:inline-flex}
    @media (min-width:1024px){
      .mobile-menu{display:none !important;}
    }
    @media (max-width:1023px){
      .nav-desktop{display:none !important;}
    }
    @media (max-width:640px){
      .hero-title{line-height:1.06}
      .count-ring{width:9.75rem}
    }