/* roulang page: index */
:root{
      --bg-0:#06111f;
      --bg-1:#071827;
      --bg-2:#0b1f36;
      --line:rgba(125,211,252,.18);
      --line-strong:rgba(103,232,249,.36);
      --text:#e5f2ff;
      --muted:rgba(216,232,248,.72);
      --soft:rgba(255,255,255,.06);
      --soft-2:rgba(255,255,255,.09);
      --glow:#38bdf8;
      --glow-2:#22d3ee;
      --violet:#8b5cf6;
      --radius-xl:28px;
      --radius-lg:20px;
      --shadow:0 18px 60px rgba(2,10,22,.45);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 15%, rgba(56,189,248,.14), transparent 24%),
        radial-gradient(circle at 85% 10%, rgba(139,92,246,.14), transparent 20%),
        radial-gradient(circle at 85% 78%, rgba(34,211,238,.11), transparent 22%),
        linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, #05101b 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.35;
      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:88px 88px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.22), transparent);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(56,189,248,.25);color:#fff}
    .container{
      width:min(100%, 1200px);
      margin:0 auto;
      padding-left:20px;
      padding-right:20px;
    }
    @media (min-width:768px){
      .container{padding-left:32px;padding-right:32px}
    }
    @media (min-width:1280px){
      .container{padding-left:48px;padding-right:48px}
    }
    .glass-card{
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .glass-card:hover{
      border-color:var(--line-strong);
      box-shadow:0 22px 68px rgba(8,16,31,.55), 0 0 0 1px rgba(56,189,248,.08) inset;
    }
    .glow-button{
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg, #1d4ed8 0%, #0891b2 48%, #22d3ee 100%);
      color:#fff;
      box-shadow:0 12px 32px rgba(14,116,144,.35), 0 0 28px rgba(56,189,248,.18);
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .glow-button::after{
      content:"";
      position:absolute;
      inset:-40% auto -40% -30%;
      width:30%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      transform:skewX(-22deg);
      transition:left .45s ease;
      left:-40%;
    }
    .glow-button:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 40px rgba(14,116,144,.45), 0 0 34px rgba(56,189,248,.22);
      filter:saturate(1.08);
    }
    .glow-button:hover::after{left:120%}
    .ghost-button{
      border:1px solid rgba(125,211,252,.22);
      background:rgba(255,255,255,.04);
      transition:all .22s ease;
    }
    .ghost-button:hover{
      border-color:rgba(103,232,249,.5);
      background:rgba(8,24,39,.72);
      box-shadow:0 0 0 1px rgba(56,189,248,.08) inset;
      transform:translateY(-1px);
    }
    .nav-scrolled{
      background:rgba(6,17,31,.92) !important;
      border-color:rgba(125,211,252,.22) !important;
      box-shadow:0 16px 44px rgba(0,0,0,.35);
    }
    .section-gap{padding-top:78px;padding-bottom:78px}
    @media (min-width:1024px){
      .section-gap{padding-top:108px;padding-bottom:108px}
    }
    .noise-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.13;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.5' d='M2 1h1v1H2zM18 9h1v1h-1zM33 16h1v1h-1zM47 26h1v1h-1zM61 34h1v1h-1zM76 41h1v1h-1zM90 53h1v1h-1zM108 62h1v1h-1zM121 73h1v1h-1zM137 81h1v1h-1zM148 95h1v1h-1zM12 28h1v1h-1zM25 45h1v1h-1zM39 61h1v1h-1zM54 79h1v1h-1zM69 97h1v1h-1zM86 114h1v1h-1zM103 132h1v1h-1zM120 148h1v1h-1zM146 142h1v1h-1zM153 118h1v1h-1zM8 138h1v1H8zM31 123h1v1h-1zM46 145h1v1h-1zM64 149h1v1h-1zM82 139h1v1h-1zM100 150h1v1h-1zM118 138h1v1h-1zM137 153h1v1h-1zM155 154h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
    }
    .wave-line{
      position:absolute;
      inset:auto 0 0 0;
      height:160px;
      opacity:.35;
      background:
        radial-gradient(circle at 20% 70%, rgba(56,189,248,.35), transparent 18%),
        radial-gradient(circle at 50% 55%, rgba(34,211,238,.24), transparent 16%),
        radial-gradient(circle at 80% 66%, rgba(139,92,246,.18), transparent 18%),
        linear-gradient(90deg, transparent 0%, rgba(125,211,252,.12) 20%, rgba(56,189,248,.22) 50%, rgba(125,211,252,.12) 80%, transparent 100%);
      filter:blur(10px);
      transform:skewY(-4deg);
      pointer-events:none;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(125,211,252,.18);
      background:rgba(255,255,255,.05);
      color:rgba(226,244,255,.92);
      border-radius:999px;
      padding:.45rem .8rem;
      font-size:.82rem;
      line-height:1;
      white-space:nowrap;
    }
    .badge::before{
      content:"";
      width:.45rem;height:.45rem;border-radius:999px;
      background:linear-gradient(180deg, #67e8f9, #3b82f6);
      box-shadow:0 0 18px rgba(56,189,248,.55);
      flex:none;
    }
    .metric-number{
      background:linear-gradient(135deg,#e0f2fe 0%, #67e8f9 40%, #60a5fa 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow:0 0 22px rgba(56,189,248,.15);
    }
    .mini-spectrum{
      display:flex;
      gap:3px;
      align-items:end;
      height:18px;
    }
    .mini-spectrum span{
      width:3px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(103,232,249,.95), rgba(37,99,235,.35));
      animation: pulse 1.6s ease-in-out infinite;
      box-shadow:0 0 16px rgba(56,189,248,.15);
    }
    .mini-spectrum span:nth-child(2){height:70%;animation-delay:.15s}
    .mini-spectrum span:nth-child(3){height:90%;animation-delay:.35s}
    .mini-spectrum span:nth-child(4){height:45%;animation-delay:.2s}
    .mini-spectrum span:nth-child(5){height:80%;animation-delay:.5s}
    @keyframes pulse{
      0%,100%{transform:scaleY(.78);opacity:.55}
      50%{transform:scaleY(1.08);opacity:1}
    }
    .accordion-item[open] .accordion-arrow{transform:rotate(180deg)}
    .input-dark{
      width:100%;
      background:rgba(6,17,31,.72);
      border:1px solid rgba(125,211,252,.18);
      color:var(--text);
      border-radius:16px;
      padding:.95rem 1rem;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-dark::placeholder{color:rgba(216,232,248,.42)}
    .input-dark:focus{
      border-color:rgba(56,189,248,.55);
      box-shadow:0 0 0 4px rgba(56,189,248,.12);
      background:rgba(6,17,31,.86);
    }
    .topbar{
      transition:all .24s ease;
    }
    .menu-panel{
      display:none;
    }
    .menu-panel.open{
      display:block;
    }
    .card-link{
      color:#bfe8ff;
      transition:color .2s ease, opacity .2s ease;
    }
    .card-link:hover{color:#ffffff}
    .tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:.3rem .65rem;
      font-size:.77rem;
      color:rgba(234,244,255,.9);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(125,211,252,.14);
    }
    .progress-bar{
      background:linear-gradient(90deg, #0f172a, rgba(15,118,110,.18));
      border:1px solid rgba(125,211,252,.12);
      border-radius:999px;
      overflow:hidden;
    }
    .progress-fill{
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, #2563eb, #0ea5e9, #22d3ee);
      box-shadow:0 0 20px rgba(34,211,238,.3);
    }
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(56,189,248,.3);
    }
    .divider-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(125,211,252,.24), transparent);
    }

/* roulang page: category2 */
:root{
    --bg:#06111f;
    --bg2:#08182a;
    --panel:rgba(255,255,255,.08);
    --panel-strong:rgba(255,255,255,.12);
    --border:rgba(125,211,252,.18);
    --border-strong:rgba(125,211,252,.34);
    --text:#e5eef9;
    --muted:rgba(226,232,240,.74);
    --muted-2:rgba(148,163,184,.85);
    --primary:#7dd3fc;
    --primary-2:#22d3ee;
    --primary-3:#60a5fa;
    --glow:0 0 24px rgba(34,211,238,.22), 0 0 48px rgba(96,165,250,.14);
    --shadow:0 18px 40px rgba(2,8,23,.36);
    --radius-xl:28px;
    --radius-lg:20px;
    --radius-md:14px;
  }
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at 15% 15%, rgba(34,211,238,.14), transparent 24%),
      radial-gradient(circle at 84% 10%, rgba(96,165,250,.16), transparent 26%),
      radial-gradient(circle at 80% 88%, rgba(34,211,238,.10), transparent 25%),
      linear-gradient(180deg, #06111f 0%, #071827 46%, #06111f 100%);
    min-height:100vh;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 100% 28px, 28px 100%;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.06));
    opacity:.22;
    z-index:-2;
  }
  ::selection{background:rgba(34,211,238,.28); color:#fff;}
  .container{
    width:min(calc(100% - 40px), 1280px);
    margin-inline:auto;
  }
  @media (min-width:768px){
    .container{width:min(calc(100% - 64px), 1280px);}
  }
  @media (min-width:1280px){
    .container{width:min(calc(100% - 96px), 1280px);}
  }
  .glass-card{
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .glass-card:hover{
    border-color:var(--border-strong);
    box-shadow: 0 18px 46px rgba(2,8,23,.42), var(--glow);
  }
  .glass-strong{
    background:linear-gradient(180deg, rgba(8,24,42,.88), rgba(8,24,42,.64));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:1px solid rgba(148,163,184,.22);
    box-shadow: var(--shadow);
  }
  .nav-scrolled{
    background:rgba(6,17,31,.84) !important;
    border-color:rgba(148,163,184,.18) !important;
    box-shadow:0 16px 36px rgba(2,8,23,.38);
  }
  .focus-ring:focus-visible,
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(34,211,238,.22), 0 0 0 1px rgba(125,211,252,.42) inset;
  }
  .glow-button{
    position:relative;
    background:linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #60a5fa 100%);
    box-shadow:0 10px 26px rgba(34,211,238,.18), 0 0 0 1px rgba(255,255,255,.06) inset;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }
  .glow-button:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 34px rgba(34,211,238,.26), 0 0 28px rgba(96,165,250,.18);
    filter:saturate(1.06);
  }
  .glow-button:active{transform:translateY(0px) scale(.99);}
  .ghost-button{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(125,211,252,.20);
    color:var(--text);
    transition:background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .ghost-button:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(125,211,252,.35);
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(125,211,252,.10) inset;
  }
  .section-gap{padding-top:88px;padding-bottom:88px;}
  @media (max-width:767px){ .section-gap{padding-top:64px;padding-bottom:64px;} }
  .noise-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.14;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 1px),
      radial-gradient(circle at 80% 30%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 1px),
      radial-gradient(circle at 40% 70%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 1px);
    background-size: 220px 220px, 260px 260px, 300px 300px;
    mix-blend-mode:screen;
  }
  .divider-line{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(125,211,252,.34), transparent);
  }
  .input-dark{
    width:100%;
    color:var(--text);
    background:rgba(4,12,22,.65);
    border:1px solid rgba(125,211,252,.18);
    border-radius:999px;
    padding:.85rem 1rem;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .input-dark::placeholder{color:rgba(148,163,184,.7);}
  .input-dark:focus{
    border-color:rgba(34,211,238,.45);
    box-shadow:0 0 0 3px rgba(34,211,238,.12);
    background:rgba(4,12,22,.82);
  }
  .label-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.45rem .82rem;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(125,211,252,.14);
    color:rgba(226,232,240,.90);
    font-size:.85rem;
    line-height:1;
    white-space:nowrap;
  }
  .label-chip.active{
    background:rgba(34,211,238,.12);
    border-color:rgba(34,211,238,.3);
    color:#eaffff;
    box-shadow:0 0 0 1px rgba(34,211,238,.12) inset;
  }
  .rank-track{
    height:7px;
    border-radius:999px;
    background:rgba(148,163,184,.16);
    overflow:hidden;
  }
  .rank-track > span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #22d3ee, #3b82f6, #60a5fa);
    box-shadow:0 0 18px rgba(34,211,238,.18);
  }
  details.faq-card[open]{
    border-color:rgba(34,211,238,.34);
    box-shadow:0 0 0 1px rgba(34,211,238,.09) inset, var(--shadow);
  }
  details.faq-card summary::-webkit-details-marker{display:none;}
  details.faq-card summary{
    list-style:none;
  }
  .chev{
    transition:transform .25s ease;
  }
  details[open] .chev{
    transform:rotate(180deg);
  }
  .mobile-menu{
    transform-origin:top;
    transition:opacity .22s ease, transform .22s ease, max-height .28s ease;
  }
  .mobile-menu[hidden]{
    display:block!important;
    opacity:0;
    transform:translateY(-8px) scale(.98);
    max-height:0;
    overflow:hidden;
    pointer-events:none;
  }
  .mobile-menu:not([hidden]){
    opacity:1;
    transform:translateY(0) scale(1);
    max-height:460px;
  }
  .soft-glow{
    filter:drop-shadow(0 0 18px rgba(34,211,238,.18));
  }
  .metric{
    position:relative;
    overflow:hidden;
  }
  .metric::after{
    content:"";
    position:absolute;
    inset:auto -18% -35% auto;
    width:120px;
    height:120px;
    background:radial-gradient(circle, rgba(34,211,238,.15), transparent 66%);
    pointer-events:none;
  }

/* roulang page: category1 */
:root{
      --bg:#06111f;
      --bg2:#071827;
      --panel:rgba(255,255,255,.07);
      --panel-strong:rgba(255,255,255,.1);
      --line:rgba(125,211,252,.18);
      --line-strong:rgba(125,211,252,.32);
      --text:#eef6ff;
      --muted:rgba(226,236,248,.74);
      --muted-2:rgba(197,214,232,.58);
      --primary:#38bdf8;
      --primary-2:#22d3ee;
      --accent:#818cf8;
      --shadow:0 22px 70px rgba(2, 12, 27, .48);
      --shadow-soft:0 14px 40px rgba(14, 116, 144, .15);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:16px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
      background:
        radial-gradient(circle at 12% 14%, rgba(56,189,248,.16), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(129,140,248,.16), transparent 24%),
        radial-gradient(circle at 50% 82%, rgba(34,211,238,.10), transparent 30%),
        linear-gradient(180deg, #04101b 0%, #06111f 45%, #071827 100%);
      overflow-x:hidden;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.025) 0%, transparent 38%, rgba(255,255,255,.016) 63%, transparent 100%),
        radial-gradient(circle at 50% 0%, rgba(56,189,248,.10), transparent 35%);
      mix-blend-mode:screen;
      opacity:.95;
      z-index:-2;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(56,189,248,.28);color:#fff}

    .container{
      width:min(100%, 80rem);
      margin-inline:auto;
      padding-inline:1.25rem;
    }

    .section-gap{
      padding-top:clamp(3.75rem, 5vw, 6.5rem);
      padding-bottom:clamp(3.75rem, 5vw, 6.5rem);
    }

    .glass-card{
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.055));
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
    }
    .glass-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.11), transparent 25%);
      pointer-events:none;
      opacity:.55;
    }
    .glass-card:hover{
      transform:translateY(-2px);
      border-color:var(--line-strong);
      box-shadow:0 18px 54px rgba(8, 145, 178, .18), 0 18px 65px rgba(2, 12, 27, .36);
      background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.068));
    }

    .glass-surface{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    .glow-button{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      border:1px solid rgba(125,211,252,.34);
      background:linear-gradient(135deg, rgba(56,189,248,1) 0%, rgba(34,211,238,1) 54%, rgba(99,102,241,1) 100%);
      color:#fff;
      box-shadow:0 12px 28px rgba(8,145,178,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
      transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .glow-button::before{
      content:"";
      position:absolute;
      inset:-40% -35%;
      background:linear-gradient(90deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
      transform:translateX(-80%) rotate(10deg);
      transition:transform .45s ease;
      z-index:-1;
    }
    .glow-button:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 34px rgba(8,145,178,.34), 0 0 26px rgba(56,189,248,.18);
      filter:saturate(1.05);
    }
    .glow-button:hover::before{transform:translateX(65%) rotate(10deg)}

    .input-dark{
      width:100%;
      border-radius:9999px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(2, 12, 27, .42);
      color:#eff6ff;
      padding:.84rem 1rem .84rem 2.7rem;
      transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
      outline:none;
    }
    .input-dark::placeholder{color:rgba(226,232,240,.54)}
    .input-dark:focus{
      border-color:rgba(56,189,248,.5);
      box-shadow:0 0 0 3px rgba(56,189,248,.14), 0 0 22px rgba(56,189,248,.12);
      background:rgba(8, 20, 36, .68);
    }

    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(56,189,248,.28), 0 0 0 6px rgba(8,20,36,.4);
    }

    .topbar{
      transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .topbar .glass-card{
      background:rgba(8, 20, 36, .08);
      border-color:rgba(148,163,184,.12);
    }
    .topbar-scrolled .glass-card{
      background:rgba(7, 24, 39, .92);
      border-color:rgba(125,211,252,.24);
      box-shadow:0 18px 44px rgba(2, 12, 27, .5);
    }

    .noise-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:36px 36px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.16) 30%, transparent 100%);
      opacity:.22;
      mix-blend-mode:screen;
    }

    .divider-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(148,163,184,.18), rgba(56,189,248,.34), rgba(148,163,184,.18), transparent);
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      border-radius:9999px;
      border:1px solid rgba(125,211,252,.14);
      background:rgba(255,255,255,.06);
      color:rgba(226,232,240,.84);
      padding:.45rem .8rem;
      font-size:.875rem;
      line-height:1;
      transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .chip:hover{border-color:rgba(125,211,252,.34);background:rgba(255,255,255,.09);transform:translateY(-1px)}

    .chip-active{
      background:rgba(56,189,248,.14);
      border-color:rgba(56,189,248,.36);
      color:#eaffff;
      box-shadow:0 0 0 1px rgba(56,189,248,.06) inset;
    }

    .muted-text{color:var(--muted)}
    .muted-text-2{color:var(--muted-2)}
    .section-title{
      font-size:clamp(1.65rem, 2vw, 2.45rem);
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .hero-title{
      font-size:clamp(2.25rem, 4.2vw, 4.6rem);
      line-height:1.05;
      font-weight:800;
      letter-spacing:-.04em;
    }

    .badge-dot{
      width:.55rem;
      height:.55rem;
      border-radius:9999px;
      background:linear-gradient(135deg, #7dd3fc, #22d3ee);
      box-shadow:0 0 16px rgba(103,232,249,.72);
      flex:none;
    }

    .stat-ring{
      background:
        conic-gradient(from 180deg, rgba(56,189,248,.95), rgba(34,211,238,.72), rgba(99,102,241,.85), rgba(56,189,248,.95));
      box-shadow:0 0 34px rgba(56,189,248,.16);
    }

    .faq-answer{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .35s ease, opacity .28s ease;
    }
    .faq-item.open .faq-answer{
      max-height:260px;
      opacity:1;
    }
    .faq-item.open .faq-icon{
      transform:rotate(180deg);
    }
    .faq-icon{
      transition:transform .25s ease;
    }

    .scrollbar-thin::-webkit-scrollbar{height:10px;width:10px}
    .scrollbar-thin::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg, rgba(56,189,248,.45), rgba(99,102,241,.35));
      border-radius:9999px;
      border:2px solid rgba(4,16,27,.72);
    }
    .scrollbar-thin::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}

    @media (max-width: 1024px){
      .topbar .glass-card{border-radius:24px}
    }

    @media (max-width: 640px){
      .container{padding-inline:1rem}
      .section-gap{
        padding-top:3.5rem;
        padding-bottom:3.5rem;
      }
    }