:root {
      --g:       #39ff14;
      --g2:      #00e676;
      --glow:    rgba(57,255,20,0.18);
      --glow-sm: rgba(57,255,20,0.08);
      --glow-lg: rgba(57,255,20,0.35);
      --bg:      #060a07;
      --bg2:     #040704;
      --surf:    rgba(255,255,255,0.028);
      --surf2:   rgba(57,255,20,0.035);
      --surf-h:  rgba(255,255,255,0.05);
      --bdr:     rgba(255,255,255,0.07);
      --bdr-g:   rgba(57,255,20,0.22);
      --bdr-g2:  rgba(57,255,20,0.4);
      --txt:     #eef6ef;
      --sub:     #6b8470;
      --sub2:    #8fa894;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; font-size:16px; }
    body { background:var(--bg); color:var(--txt); font-family:'DM Sans',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
    a { text-decoration:none; color:inherit; }
    img { display:block; }
    button { cursor:pointer; font-family:inherit; }

    /* Orbs */
    .orb { position:fixed; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:0; }
    .orb-1 { width:700px; height:700px; background:rgba(57,255,20,0.055); top:-280px; left:-220px; animation:d1 18s ease-in-out infinite; }
    .orb-2 { width:500px; height:500px; background:rgba(0,230,118,0.045); bottom:10%; right:-180px; animation:d2 22s ease-in-out infinite; }
    @keyframes d1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,30px);} }
    @keyframes d2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,-40px);} }

    /* NAV — same as main */
    nav {
      position:fixed; top:16px; left:50%; transform:translateX(-50%);
      width:calc(100% - 40px); max-width:1180px; z-index:900; height:62px;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 20px 0 16px;
      background:rgba(6,10,7,0.75); backdrop-filter:blur(32px) saturate(180%);
      -webkit-backdrop-filter:blur(32px) saturate(180%);
      border:1px solid var(--bdr); border-radius:18px;
      box-shadow:0 0 0 1px rgba(57,255,20,0.04),0 8px 40px rgba(0,0,0,0.4);
      transition:box-shadow 0.3s;
    }
    nav.scrolled { box-shadow:0 0 0 1px var(--bdr-g), 0 8px 40px rgba(0,0,0,0.5); }

    .logo { display:flex; align-items:center; gap:9px; font-family:'DM Sans',sans-serif; font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; white-space:nowrap; }
    .logo img { width:28px; height:28px; border-radius:6px; }
    .logo-green, .logo-g { color:var(--g); }
    .nav-center { display:flex; align-items:center; gap:4px; list-style:none; }
    .nav-center a { font-size:0.83rem; font-weight:500; color:var(--sub2); padding:6px 14px; border-radius:8px; transition:color 0.2s,background 0.2s; }
    .nav-center a:hover { color:var(--txt); background:var(--surf); }
    .nav-center a.active { color:var(--g); }
    .nav-right { display:flex; align-items:center; gap:10px; }
    .nav-cta { font-size:0.83rem; font-weight:700; padding:7px 15px; border-radius:9px; border:1px solid; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; }
    .nav-cta-discord { background:rgba(88,101,242,0.12); border-color:rgba(88,101,242,0.3); color:#7c8ef7; }
    .nav-cta-discord:hover { background:rgba(88,101,242,0.22); border-color:rgba(88,101,242,0.55); color:#a0aaff; }
    .nav-cta-telegram { background:rgba(0,136,204,0.12); border-color:rgba(0,136,204,0.3); color:#29aadf; }
    .nav-cta-telegram:hover { background:rgba(0,136,204,0.22); border-color:rgba(0,136,204,0.55); color:#5fc5f5; }
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
    .hamburger span { display:block; width:22px; height:2px; background:var(--sub2); border-radius:2px; transition:all 0.25s; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .mobile-menu { display:none; position:fixed; top:90px; left:20px; right:20px; background:rgba(6,10,7,0.97); backdrop-filter:blur(30px); border:1px solid var(--bdr-g); border-radius:18px; padding:20px; z-index:899; flex-direction:column; gap:4px; }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { font-size:0.9rem; font-weight:600; color:var(--sub2); padding:12px 16px; border-radius:10px; transition:all 0.2s; display:flex; align-items:center; gap:10px; }
    .mobile-menu a:hover { background:var(--surf2); color:var(--g); }
    .mobile-menu .m-cta { margin-top:8px; background:rgba(88,101,242,0.12); border:1px solid rgba(88,101,242,0.3); color:#7c8ef7; font-weight:700; justify-content:center; }
    .mobile-menu .m-cta:hover { background:rgba(88,101,242,0.22); border-color:rgba(88,101,242,0.55); color:#a0aaff; }
    .mobile-menu .m-cta-tg { margin-top:4px; background:rgba(0,136,204,0.12); color:#29aadf; border:1px solid rgba(0,136,204,0.3); }
    .mobile-menu .m-cta-tg:hover { background:rgba(0,136,204,0.22); border-color:rgba(0,136,204,0.55); color:#5fc5f5; }

    /* PAGE HEADER */
    .page-header {
      position:relative; z-index:1;
      padding: 140px 40px 80px;
      max-width:1200px; margin:0 auto;
      text-align:center;
    }
    .page-eyebrow {
      display:inline-flex; align-items:center; gap:8px;
      font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--g); margin-bottom:18px;
    }
    .page-eyebrow::before,.page-eyebrow::after { content:''; width:22px; height:2px; background:var(--g); border-radius:2px; }
    .page-header h1 {
      font-family:'DM Sans',sans-serif;
      font-size:clamp(2.2rem,4vw,3.5rem);
      font-weight:800; letter-spacing:-0.025em; line-height:1.1;
      margin-bottom:16px;
    }
    .page-header h1 .hl { color:var(--g); }
    .page-header p { font-size:1rem; color:var(--sub2); max-width:500px; margin:0 auto 40px; line-height:1.7; }

    /* AGGREGATE STATS */
    .agg-stats {
      display:flex; justify-content:center; gap:0;
      max-width:600px; margin:0 auto;
      background:var(--surf); border:1px solid var(--bdr);
      border-radius:16px; overflow:hidden;
    }
    .agg-stat {
      flex:1; padding:24px 20px; text-align:center;
      border-right:1px solid var(--bdr);
    }
    .agg-stat:last-child { border:none; }
    .agg-n { font-family:'DM Sans',sans-serif; font-size:1.7rem; font-weight:800; color:var(--g); }
    .agg-l { font-size:0.72rem; font-weight:600; color:var(--sub); text-transform:uppercase; letter-spacing:0.07em; margin-top:4px; }

    /* FILTER TABS */
    .filter-wrap {
      position:relative; z-index:1;
      max-width:1200px; margin:0 auto;
      padding:0 40px 40px;
      display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    }
    .filter-pill {
      padding:8px 20px; border-radius:100px;
      border:1px solid var(--bdr); background:transparent;
      color:var(--sub2); font-size:0.82rem; font-weight:600;
      transition:all 0.2s; font-family:'DM Sans',sans-serif;
      cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    }
    .filter-pill i { font-size:0.85em; }
    .filter-pill[onclick*="'all'"] i      { color:#f4c542; }
    .filter-pill[onclick*="'nitro'"] i    { color:#5865F2; }
    .filter-pill[onclick*="'boosts'"] i   { color:#ff7043; }
    .filter-pill[onclick*="'telegram'"] i { color:#0088cc; }
    .filter-pill[onclick*="'upgrades'"] i { color:#1ed760; }
    .filter-pill.active { background:var(--g); color:var(--bg); border-color:var(--g); box-shadow:0 0 16px var(--glow); font-weight:700; }
    .filter-pill.active i { color:var(--bg) !important; }
    .filter-pill:not(.active):hover { border-color:var(--bdr-g); color:var(--g); background:var(--surf2); }

    /* REVIEWS GRID */
    .reviews-section {
      position:relative; z-index:1;
      padding:0 40px 100px;
      max-width:1200px; margin:0 auto;
    }
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .reviews-grid.slide-in {
      animation: rv-slideIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reviews-grid.slide-out {
      animation: rv-slideOut 0.22s cubic-bezier(0.4, 0, 1, 1) both;
    }
    @keyframes rv-slideIn {
      from { opacity:0; transform:translateX(40px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes rv-slideOut {
      from { opacity:1; transform:translateX(0); }
      to   { opacity:0; transform:translateX(-30px); }
    }
    .review-card {
      background:var(--surf); border:1px solid var(--bdr); border-radius:14px;
      padding:22px;
      position:relative; overflow:visible;
      transition:border-color 0.25s, transform 0.25s;
      animation:fadeUp 0.4s ease both;
      display:flex; flex-direction:column;
      min-height: 160px;
    }
    @keyframes fadeUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
    .review-card:hover { border-color:var(--bdr-g); transform:translateY(-3px); }
    .review-card::after {
      content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,transparent,var(--g),transparent);
      opacity:0; transition:opacity 0.25s;
      border-radius:0 0 14px 14px;
      clip-path:inset(0 0 0 0 round 0 0 14px 14px);
    }
    .review-card:hover::after { opacity:1; }

    .rc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .rc-user { display:flex; align-items:center; gap:10px; }
    .rc-avatar {
      width:38px; height:38px; border-radius:50%;
      background:linear-gradient(135deg, rgba(57,255,20,0.2), rgba(0,230,118,0.1));
      border:1px solid var(--bdr-g);
      display:flex; align-items:center; justify-content:center;
      font-size:0.88rem; font-weight:800; color:var(--g);
      flex-shrink:0;
    }
    .rc-name { font-size:0.88rem; font-weight:700; }
    .rc-date { font-size:0.68rem; color:var(--sub); margin-top:1px; }
    .rc-stars { display:flex; gap:2px; }
    .rc-stars i { font-size:0.72rem; color:#fbbf24; }
    .rc-body { font-size:0.83rem; color:var(--sub2); line-height:1.75; flex:1;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .rc-footer-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:8px; }
    .rc-vouch-id { font-size:0.62rem; color:var(--sub); font-weight:600; }
    .rc-discord-link, .rc-tg-link { position:relative; font-size:0.75rem; margin-left:4px; transition:color 0.2s; cursor:pointer; }
    .rc-discord-link { color:rgba(114,137,218,0.7); }
    .rc-discord-link:hover { color:#7289da; }
    .rc-tg-link { color:rgba(41,170,223,0.7); }
    .rc-tg-link:hover { color:#29aadf; }

    /* Verified badge tooltip */
    .rc-discord-link::after, .rc-tg-link::after {
      content:attr(data-tooltip);
      position:absolute;
      bottom:calc(100% + 8px);
      left:50%;
      transform:translateX(-50%) translateY(4px);
      white-space:nowrap;
      font-size:0.62rem;
      font-weight:700;
      letter-spacing:0.03em;
      padding:6px 12px;
      border-radius:8px;
      pointer-events:none;
      opacity:0;
      transition:opacity 0.2s ease, transform 0.2s ease;
      z-index:20;
      box-shadow:0 4px 20px rgba(0,0,0,0.5);
    }
    .rc-discord-link::before, .rc-tg-link::before {
      content:'';
      position:absolute;
      bottom:calc(100% + 4px);
      left:50%;
      transform:translateX(-50%) translateY(4px);
      width:6px; height:6px;
      rotate:45deg;
      pointer-events:none;
      opacity:0;
      transition:opacity 0.2s ease, transform 0.2s ease;
      z-index:21;
    }
    .rc-discord-link::after {
      background:rgba(88,101,242,0.15);
      border:1px solid rgba(88,101,242,0.4);
      color:#a0aaff;
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }
    .rc-discord-link::before {
      background:rgba(88,101,242,0.15);
      border-bottom:1px solid rgba(88,101,242,0.4);
      border-right:1px solid rgba(88,101,242,0.4);
    }
    .rc-tg-link::after {
      background:rgba(0,136,204,0.15);
      border:1px solid rgba(0,136,204,0.4);
      color:#5fc5f5;
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }
    .rc-tg-link::before {
      background:rgba(0,136,204,0.15);
      border-bottom:1px solid rgba(0,136,204,0.4);
      border-right:1px solid rgba(0,136,204,0.4);
    }
    .rc-discord-link:hover::after, .rc-discord-link:hover::before,
    .rc-tg-link:hover::after, .rc-tg-link:hover::before,
    .rc-discord-link.tooltip-open::after, .rc-discord-link.tooltip-open::before,
    .rc-tg-link.tooltip-open::after, .rc-tg-link.tooltip-open::before {
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
    .rc-tag {
      display:inline-block;
      font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
      background:rgba(57,255,20,0.07); border:1px solid var(--bdr-g);
      color:var(--g); padding:3px 9px; border-radius:100px;
    }

    /* TRUSTPILOT CTA */
    .tp-cta-wrap {
      position:relative; z-index:1;
      padding:0 40px 96px;
      max-width:1200px; margin:0 auto;
    }
    .tp-cta {
      background:var(--surf2); border:1px solid var(--bdr-g);
      border-radius:20px; padding:52px 60px;
      display:flex; align-items:center; justify-content:space-between; gap:32px;
      position:relative; overflow:hidden;
    }
    .tp-cta::before {
      content:''; position:absolute; top:-60px; right:-60px;
      width:250px; height:250px;
      background:radial-gradient(circle,rgba(57,255,20,0.1) 0%,transparent 70%);
    }
    .tp-cta h2 { font-family:'DM Sans',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
    .tp-cta p { font-size:0.88rem; color:var(--sub2); max-width:420px; line-height:1.6; }
    .tp-btn {
      background:var(--g); color:var(--bg);
      padding:13px 28px; border-radius:11px; border:none;
      font-weight:800; font-size:0.9rem;
      display:inline-flex; align-items:center; gap:9px;
      box-shadow:0 0 24px var(--glow); transition:all 0.2s;
      white-space:nowrap; flex-shrink:0;
    }
    .tp-btn:hover { transform:translateY(-2px); box-shadow:0 4px 36px var(--glow-lg); }
    .tp-btn svg { width:18px; height:18px; fill:var(--bg); }

    /* FOOTER */
    footer { position:relative; z-index:1; background:var(--bg2); border-top:1px solid var(--bdr); padding:64px 40px 32px; }
    .foot-inner { max-width:1200px; margin:0 auto; }
    .foot-top { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:48px; margin-bottom:48px; }
    .foot-brand .logo { margin-bottom:14px; }
    .foot-brand p { font-size:0.8rem; color:var(--sub); line-height:1.75; max-width:270px; }
    .foot-soc { display:flex; gap:8px; margin-top:20px; }
    .soc-btn { width:36px; height:36px; border:1px solid var(--bdr); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--sub2); background:var(--surf); transition:all 0.2s; }
    .soc-btn:hover { border-color:var(--bdr-g2); color:var(--g); box-shadow:0 0 12px var(--glow-sm); }
    .foot-col h6 { font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.14em; color:var(--g); margin-bottom:18px; }
    .foot-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .foot-col ul a { font-size:0.82rem; color:var(--sub); transition:color 0.2s; }
    .foot-col ul a:hover { color:var(--txt); }
    .foot-bot { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--bdr); font-size:0.74rem; color:var(--sub); flex-wrap:wrap; gap:8px; }

    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:var(--bg2); }
    ::-webkit-scrollbar-thumb { background:rgba(57,255,20,0.25); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:rgba(57,255,20,0.45); }

    @media(max-width:900px) {
      .reviews-grid { grid-template-columns: repeat(2, 1fr); }
      .foot-top { grid-template-columns:1fr 1fr; }
      .tp-cta { flex-direction:column; align-items:flex-start; padding:36px; }
    }
    @media(max-width:640px) {
      .reviews-grid { grid-template-columns: 1fr; }
      .page-header { padding:120px 20px 60px; }
      .filter-wrap, .reviews-section, .tp-cta-wrap { padding-left:20px; padding-right:20px; }
      .nav-center { display:none; }
      .nav-tp { display:none; }
      .hamburger { display:flex; }
      footer { padding:48px 20px 28px; }
      .foot-top { grid-template-columns:1fr; }
      .agg-stats { flex-direction:column; }
      .agg-stat { border-right:none; border-bottom:1px solid var(--bdr); }
      .agg-stat:last-child { border:none; }
    }

    /* ════════════════════════════════════════════════
       FULL MOBILE OPTIMIZATION — reviews page
    ════════════════════════════════════════════════ */

    @media (max-width: 768px) {

      /* Nav */
      nav {
        top: 10px;
        width: calc(100% - 20px);
        padding: 0 14px 0 12px;
        height: 56px;
      }
      .nav-center { display: none; }
      .hamburger { display: flex; }
      .nav-cta { display: none; }
      .logo { font-size: 0.95rem; }
      .logo img { width: 24px; height: 24px; }
      .mobile-menu { top: 78px; left: 10px; right: 10px; }

      /* Page header */
      .page-header { padding: 96px 20px 56px; }
      .page-header h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
      .page-header p { font-size: 0.9rem; }

      /* Aggregate stats */
      .agg-stats { display: grid; grid-template-columns: repeat(3,1fr); }
      .agg-stat { padding: 18px 12px; }
      .agg-n { font-size: 1.35rem; }
      .agg-l { font-size: 0.65rem; }

      /* Filter pills */
      .filter-wrap { padding: 0 20px 28px; gap: 6px; }
      .filter-pill { padding: 7px 14px; font-size: 0.78rem; }

      /* Reviews grid */
      .reviews-section { padding: 0 20px 72px; }
      .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .review-card { padding: 18px; min-height: 140px; }
      .rc-avatar { width: 32px; height: 32px; font-size: 0.78rem; }
      .rc-name { font-size: 0.82rem; }
      .rc-body { font-size: 0.79rem; -webkit-line-clamp: 4; }

      /* Trustpilot CTA */
      .tp-cta-wrap { padding: 0 20px 72px; }
      .tp-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
        gap: 24px;
      }
      .tp-cta h2 { font-size: 1.3rem; }
      .tp-cta p { font-size: 0.84rem; }
      .tp-btn { width: 100%; justify-content: center; padding: 14px; }

      /* Footer */
      footer { padding: 48px 20px 28px; }
      .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
      .foot-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 480px) {
      .reviews-grid { grid-template-columns: 1fr; }
      .page-header { padding: 84px 16px 48px; }
      .filter-wrap { padding: 0 16px 24px; }
      .reviews-section { padding: 0 16px 60px; }
      .tp-cta-wrap { padding: 0 16px 60px; }
      .tp-cta { padding: 24px 20px; }
      .agg-stats { flex-direction: column; }
      .agg-stat { border-right: none; border-bottom: 1px solid var(--bdr); }
      .agg-stat:last-child { border: none; }
      .foot-top { grid-template-columns: 1fr; gap: 24px; }
      .foot-bot { flex-direction: column; align-items: flex-start; gap: 4px; }
    }

    @media (max-width: 360px) {
      nav { width: calc(100% - 12px); }
      .page-header { padding: 76px 12px 44px; }
      .filter-wrap, .reviews-section, .tp-cta-wrap { padding-left: 12px; padding-right: 12px; }
    }

    @media (hover: none) {
      .review-card:hover { transform: none; }
      .filter-pill { padding: 10px 16px; }
    }

    html, body { max-width: 100%; overflow-x: hidden; }

    /* ── SAFE AREA (iPhone notch / Dynamic Island) ── */
    @supports (padding: env(safe-area-inset-top)) {
      nav {
        top: calc(10px + env(safe-area-inset-top));
      }
      .mobile-menu {
        top: calc(78px + env(safe-area-inset-top));
      }
      footer {
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
      }
    }


    /* ─── SCROLL TO TOP ──────────────────────────── */
    #scrollTop {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 800;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      border: 1px solid var(--bdr-g);
      background: rgba(6,10,7,0.85);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      color: var(--g);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px rgba(57,255,20,0.06), 0 8px 28px rgba(0,0,0,0.45), 0 0 20px rgba(57,255,20,0.08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px) scale(0.9);
      transition:
        opacity 0.35s cubic-bezier(0.22,1,0.36,1),
        visibility 0.35s cubic-bezier(0.22,1,0.36,1),
        transform 0.35s cubic-bezier(0.22,1,0.36,1),
        border-color 0.2s,
        box-shadow 0.2s,
        background 0.2s;
      font-family: inherit;
    }
    #scrollTop svg {
      width: 18px;
      height: 18px;
      transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
      filter: drop-shadow(0 0 6px rgba(57,255,20,0.5));
    }
    #scrollTop.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    #scrollTop:hover {
      background: rgba(57,255,20,0.12);
      border-color: var(--bdr-g2);
      box-shadow: 0 0 0 1px rgba(57,255,20,0.15), 0 12px 36px rgba(0,0,0,0.5), 0 0 32px rgba(57,255,20,0.18);
      transform: translateY(-3px) scale(1);
    }
    #scrollTop:hover svg {
      transform: translateY(-2px);
      filter: drop-shadow(0 0 10px rgba(57,255,20,0.8));
    }
    #scrollTop:active {
      transform: translateY(0) scale(0.95);
      transition-duration: 0.1s;
    }
    #scrollTop::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 14px;
      background: conic-gradient(var(--g) var(--scroll-pct, 0%), transparent var(--scroll-pct, 0%));
      z-index: -1;
      opacity: 0.35;
      transition: opacity 0.2s;
    }
    #scrollTop.visible::before { opacity: 0.35; }
    #scrollTop:hover::before   { opacity: 0.6; }
    @media (max-width: 480px) {
      #scrollTop { bottom: 20px; right: 16px; width: 42px; height: 42px; border-radius: 11px; }
      #scrollTop svg { width: 16px; height: 16px; }
    }
    @supports (padding: env(safe-area-inset-bottom)) {
      #scrollTop { bottom: calc(28px + env(safe-area-inset-bottom)); }
      @media (max-width: 480px) {
        #scrollTop { bottom: calc(20px + env(safe-area-inset-bottom)); }
      }
    }