:root {
      --neon: #00ff66;
      --neon-dim: rgba(0, 255, 102, 0.45);
      --neon-hot: #c8ff00;
      --void: #030806;
      --panel: rgba(4, 18, 10, 0.82);
      --panel-2: rgba(8, 28, 16, 0.92);
      --text: #c8f0d4;
      --muted: rgba(180, 220, 190, 0.55);
      --border-glow: 0 0 12px rgba(0, 255, 102, 0.35), 0 0 28px rgba(0, 255, 80, 0.12);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: "JetBrains Mono", "Share Tech Mono", ui-monospace, monospace;
      color: var(--text);
      background: var(--void);
      overflow-x: hidden;
      min-height: 100vh;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: "Share Tech Mono", "JetBrains Mono", monospace;
      color: #e8ffe8;
      letter-spacing: 0.02em;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    #matrix-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.42;
    }
    #scanlines {
      position: fixed;
      inset: 0;
      z-index: 9000;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.18) 1px,
        transparent 1px,
        transparent 3px
      );
      mix-blend-mode: multiply;
      opacity: 0.35;
      animation: flicker 6s infinite;
    }
    #vignette {
      position: fixed;
      inset: 0;
      z-index: 8999;
      pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
    }
    @keyframes flicker {
      0%, 100% { opacity: 0.32; }
      48% { opacity: 0.38; }
      50% { opacity: 0.28; }
      52% { opacity: 0.36; }
    }
    @keyframes neon-pulse {
      0%, 100% { box-shadow: 0 0 8px var(--neon-dim), 0 0 20px rgba(0, 255, 100, 0.15); }
      50% { box-shadow: 0 0 16px rgba(0, 255, 120, 0.55), 0 0 36px rgba(0, 255, 80, 0.25); }
    }
    @keyframes border-flow {
      0% { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }
    @keyframes glitch-skew {
      0%, 90%, 100% { transform: translate(0); text-shadow: 0 0 12px rgba(0, 255, 100, 0.45); }
      91% { transform: skew(-0.6deg, 0.2deg) translate(-1px, 0); text-shadow: 2px 0 #0f0, -2px 0 #0a0; }
      93% { transform: skew(0.4deg, -0.1deg) translate(1px, 0); }
    }
    /* Hero title: sweeping neon green ↔ red glow */
    @keyframes hero-title-neon-pass {
      0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 14px rgba(0, 255, 120, 0.85)) drop-shadow(0 0 28px rgba(0, 255, 80, 0.35));
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 18px rgba(255, 45, 80, 0.9)) drop-shadow(0 0 36px rgba(255, 30, 60, 0.4));
      }
      100% {
        background-position: 200% 50%;
        filter: drop-shadow(0 0 14px rgba(0, 255, 120, 0.85)) drop-shadow(0 0 28px rgba(0, 255, 80, 0.35));
      }
    }
    @keyframes float-glow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    .site {
      position: relative;
      z-index: 2;
    }

    /* “Hacker” treatment for photos: CRT scan, chromatic edge, matrix tint, noise grid */
    .media-hacker {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .media-hacker > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: grayscale(0.45) contrast(1.45) brightness(0.68) sepia(0.42) hue-rotate(92deg) saturate(2) invert(0.03);
      transform: translateZ(0);
      animation: hacker-glitch 10s steps(1, end) infinite;
    }
    .media-hacker:hover > img {
      filter: grayscale(0.35) contrast(1.5) brightness(0.74) sepia(0.38) hue-rotate(95deg) saturate(2.1) invert(0.02);
    }
    @keyframes hacker-glitch {
      0%, 94%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
      95% { clip-path: inset(12% 0 8% 0); transform: translate(-2px, 1px); filter: grayscale(0.4) contrast(1.6) brightness(0.75) sepia(0.45) hue-rotate(100deg) saturate(2.2); }
      96% { clip-path: inset(0 3% 0 0); transform: translate(3px, -1px); }
    }
    .media-hacker::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 255, 120, 0.04) 1px, rgba(0, 255, 120, 0.04) 2px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, rgba(0, 255, 80, 0.07) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.45) 100%);
      mix-blend-mode: overlay;
      opacity: 0.95;
    }
    .media-hacker::after {
      content: "";
      position: absolute;
      left: -2px;
      right: -2px;
      top: -40%;
      height: 38%;
      z-index: 5;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 255, 160, 0.28) 42%,
        rgba(0, 255, 100, 0.06) 58%,
        transparent 100%
      );
      animation: hacker-crt-scan 4.5s cubic-bezier(0.35, 0, 0.15, 1) infinite;
      box-shadow:
        inset 3px 0 0 rgba(255, 0, 180, 0.12),
        inset -3px 0 0 rgba(0, 255, 255, 0.1);
    }
    @keyframes hacker-crt-scan {
      0% { transform: translateY(-120%); opacity: 0.85; }
      40% { opacity: 1; }
      100% { transform: translateY(320%); opacity: 0.4; }
    }
    .hero-img-wrap.media-hacker::before {
      background:
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 100, 0.05) 2px, rgba(0, 255, 100, 0.05) 4px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 2px),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 255, 100, 0.12), transparent 55%);
    }

    .glitch-text {
      animation: glitch-skew 4.5s infinite;
    }
    .hero h1.hero-title-neon {
      animation: hero-title-neon-pass 4.2s ease-in-out infinite;
      background-image: linear-gradient(
        100deg,
        #00ff88 0%,
        #c8ff00 18%,
        #00ff66 32%,
        #ff3355 52%,
        #ff2244 58%,
        #00ff99 78%,
        #c8ff00 100%
      );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: #e8ffe8;
      -webkit-text-fill-color: transparent;
    }
    .hero h1.hero-title-neon span {
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    @supports not (-webkit-background-clip: text) {
      .hero h1.hero-title-neon {
        color: #00ff66;
        -webkit-text-fill-color: #00ff66;
        animation: hero-title-neon-pass 4.2s ease-in-out infinite;
      }
      .hero h1.hero-title-neon span {
        -webkit-text-fill-color: var(--neon-hot);
        color: var(--neon-hot);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero h1.hero-title-neon {
        animation: none;
        background: none;
        color: #f0fff4;
        -webkit-text-fill-color: #f0fff4;
        filter: none;
      }
      .hero h1.hero-title-neon span {
        color: var(--neon-hot);
        -webkit-text-fill-color: var(--neon-hot);
      }
    }

    .tbar {
      background: linear-gradient(90deg, #020806, #0a1a10);
      padding: 8px 0;
      font-size: 11px;
      border-bottom: 1px solid rgba(0, 255, 100, 0.25);
      box-shadow: 0 0 20px rgba(0, 255, 80, 0.08);
    }
    .tbar-in {
      max-width: 1290px;
      margin: 0 auto;
      padding: 0 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      color: var(--muted);
    }
    .tbar-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 14px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.04em;
    }
    .tbar-left .tbar-tag {
      color: var(--neon-hot);
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.14em;
    }
    .tbar-num {
      color: #f0fff4;
      font-size: 15px;
      font-weight: 800;
      text-decoration: none;
      text-shadow: 0 0 14px rgba(0, 255, 100, 0.45);
      font-family: "JetBrains Mono", "Share Tech Mono", ui-monospace, monospace;
    }
    .tbar-num:hover {
      color: var(--neon);
    }
    .tbar-wa-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 6px;
      background: linear-gradient(135deg, #003818, #006628);
      color: #e8ffe8 !important;
      border: 1px solid rgba(0, 255, 100, 0.45);
      text-decoration: none;
      font-size: 11px;
      font-weight: 700;
      box-shadow: 0 0 14px rgba(0, 255, 100, 0.2);
    }
    .tbar-wa-link:hover {
      filter: brightness(1.08);
    }
    .tbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #google_translate_element {
      min-height: 28px;
    }
    #google_translate_element .goog-te-gadget {
      font-family: inherit !important;
      color: var(--muted) !important;
    }
    #google_translate_element .goog-te-gadget-simple {
      border: none !important;
      background: transparent !important;
    }
    #google_translate_element .goog-te-combo {
      background: rgba(0, 40, 20, 0.6) !important;
      border: 1px solid rgba(0, 255, 100, 0.35) !important;
      color: var(--neon) !important;
      padding: 4px 10px !important;
      border-radius: 4px !important;
      font-size: 11px !important;
      font-family: inherit !important;
      cursor: pointer !important;
      max-width: 200px;
    }
    .goog-te-banner-frame,
    iframe.goog-te-banner-frame {
      display: none !important;
    }
    .goog-tooltip,
    .goog-tooltip:hover {
      display: none !important;
    }
    body {
      top: 0 !important;
    }
    .tbar select {
      background: rgba(0, 40, 20, 0.6);
      border: 1px solid rgba(0, 255, 100, 0.35);
      color: var(--neon);
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
    }

    header {
      background: rgba(2, 10, 6, 0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0, 255, 100, 0.35);
      box-shadow: var(--border-glow);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .hdr {
      max-width: 1290px;
      margin: 0 auto;
      padding: 0 30px;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 17px;
      color: #e8ffe8;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .logo-ic {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, #003310, #00aa44);
      border: 1px solid rgba(0, 255, 100, 0.6);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      box-shadow: 0 0 18px rgba(0, 255, 100, 0.35);
      animation: neon-pulse 3s ease-in-out infinite;
    }
    nav ul { list-style: none; display: flex; align-items: center; flex-wrap: wrap; }
    nav ul li a {
      display: block;
      padding: 8px 14px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: 0.12em;
      transition: color 0.2s, text-shadow 0.2s;
      cursor: pointer;
    }
    nav ul li a:hover,
    nav ul li a.active {
      color: var(--neon);
      text-shadow: 0 0 10px rgba(0, 255, 100, 0.6);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.2s;
      font-family: inherit;
    }
    .btn-blue {
      background: linear-gradient(135deg, #003818, #006628);
      color: #e8ffe8;
      border-color: rgba(0, 255, 100, 0.55);
      box-shadow: 0 0 16px rgba(0, 255, 100, 0.25);
    }
    .btn-blue:hover {
      background: linear-gradient(135deg, #004d22, #008838);
      transform: translateY(-1px);
      box-shadow: 0 0 24px rgba(0, 255, 100, 0.45);
    }
    .btn-green {
      background: linear-gradient(135deg, var(--neon-hot), #6aff00);
      color: #031105;
      font-weight: 800;
      border-radius: 30px;
      padding: 12px 28px;
      border: 1px solid rgba(200, 255, 0, 0.6);
      box-shadow: 0 0 22px rgba(200, 255, 0, 0.35);
      animation: neon-pulse 2.8s ease-in-out infinite;
    }
    .btn-green:hover {
      filter: brightness(1.08);
      transform: translateY(-2px);
    }
    a.btn,
    a.logo,
    a.compare-btn {
      text-decoration: none;
      box-sizing: border-box;
    }
    a.compare-btn {
      text-align: center;
    }
    .hamburger { display: none; font-size: 22px; cursor: pointer; color: var(--neon); }

    .page { display: none; }
    .page.active { display: block; }

    /* HERO */
    .hero {
      background: transparent;
      position: relative;
      overflow: hidden;
      padding: 72px 0 0;
      min-height: 88vh;
      display: flex;
      align-items: flex-start;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 80, 40, 0.35) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-in {
      max-width: 1290px;
      margin: 0 auto;
      padding: 0 30px;
      position: relative;
      z-index: 1;
      width: 100%;
    }
    .hero-top { text-align: center; padding-bottom: 56px; }
    .hero h1 {
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.12;
      color: #f0fff4;
      margin-bottom: 18px;
      font-weight: 800;
    }
    .hero h1:not(.hero-title-neon) span {
      color: var(--neon-hot);
      text-shadow: 0 0 20px rgba(200, 255, 0, 0.55);
    }
    .hero-sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; max-width: 720px; margin-left: auto; margin-right: auto; }
    .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .hero-bottom {
      display: grid;
      grid-template-columns: 260px 1fr 260px;
      gap: 20px;
      align-items: end;
    }
    .hero-left, .hero-right { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }

    .hc {
      background: var(--panel);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 14px;
      padding: 16px 18px;
      color: var(--text);
      backdrop-filter: blur(8px);
      box-shadow: var(--border-glow);
      animation: neon-pulse 4s ease-in-out infinite;
    }
    .hc-yellow {
      background: linear-gradient(135deg, #1a3d0a, #0d2810);
      border: 1px solid rgba(200, 255, 0, 0.55);
      color: #e8ffe8;
    }
    .hc-white {
      background: rgba(6, 22, 14, 0.95);
      border: 1px solid rgba(0, 255, 100, 0.3);
      color: var(--text);
    }
    .hc-row { display: flex; align-items: center; gap: 10px; }
    .hc-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0, 255, 100, 0.12);
      border: 1px solid rgba(0, 255, 100, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--neon);
    }
    .hc-pill {
      background: rgba(0, 0, 0, 0.45);
      border-radius: 20px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border: 1px solid rgba(0, 255, 100, 0.25);
    }
    .hc-pill .star { color: var(--neon-hot); }
    .hc-rate {
      font-size: 28px;
      font-weight: 800;
      font-family: "Share Tech Mono", monospace;
      color: var(--neon);
      text-shadow: 0 0 14px rgba(0, 255, 100, 0.45);
    }
    .now-badge {
      background: var(--neon);
      color: #031105;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .hero-center { position: relative; display: flex; justify-content: center; align-items: flex-end; }
    .hero-img-wrap {
      width: 320px;
      height: 360px;
      position: relative;
      border-radius: 20px 20px 0 0;
      overflow: hidden;
      border: 1px solid rgba(0, 255, 100, 0.45);
      box-shadow: 0 0 30px rgba(0, 255, 100, 0.2);
    }
    .hero-img-wrap.media-hacker > img {
      object-position: top center;
    }
    /* Smaller cards: less aggressive glitch; activate on hover for readability */
    .blog-img.media-hacker > img {
      animation: none;
      filter: grayscale(0.4) contrast(1.32) brightness(0.74) sepia(0.38) hue-rotate(90deg) saturate(1.75);
    }
    .blog-card:hover .blog-img.media-hacker > img {
      animation: hacker-glitch 14s steps(1, end) infinite;
    }
    .hero-name-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 8;
      background: rgba(0, 0, 0, 0.65);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 8px;
      padding: 8px 12px;
      backdrop-filter: blur(8px);
    }
    .hero-name-tag .nm { font-weight: 700; font-size: 13px; color: #fff; }
    .hero-name-tag .rl { font-size: 11px; color: var(--muted); }
    .raises-card {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(3, 14, 8, 0.95);
      border: 1px solid rgba(0, 255, 100, 0.4);
      border-radius: 12px;
      padding: 14px 20px;
      text-align: center;
      min-width: 160px;
      z-index: 10;
      backdrop-filter: blur(10px);
      box-shadow: var(--border-glow);
    }
    .raises-lbl { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
    .raises-sub { font-size: 10px; color: rgba(180, 220, 190, 0.35); }
    .compare-btn {
      background: var(--neon);
      color: #031105;
      border: none;
      border-radius: 20px;
      padding: 6px 18px;
      font-weight: 700;
      font-size: 11px;
      cursor: pointer;
      margin-top: 10px;
      display: block;
      width: 100%;
      font-family: inherit;
    }
    .pct-big {
      font-size: 26px;
      font-weight: 800;
      font-family: "Share Tech Mono", monospace;
      color: var(--neon-hot);
    }
    .bar-wrap { margin: 6px 0; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
    .bar-fill { height: 100%; background: linear-gradient(90deg, var(--neon), var(--neon-hot)); border-radius: 2px; width: 75%; box-shadow: 0 0 10px rgba(0, 255, 100, 0.5); }
    .bar-lbs { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
    .ai-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
    .ai-row i { color: var(--neon); font-size: 12px; }
    .net {
      display: inline-block;
      background: rgba(0, 40, 22, 0.8);
      color: var(--neon);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid rgba(0, 255, 100, 0.4);
    }

    /* SECTIONS */
    .sec { padding: 72px 0; position: relative; }
    .sec-in { max-width: 1290px; margin: 0 auto; padding: 0 30px; }
    .sec-lbl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--neon);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin-bottom: 12px;
    }
    .sec-title {
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 14px;
      text-shadow: 0 0 18px rgba(0, 255, 100, 0.25);
    }
    .sec-sub { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 640px; }
    .sec-hdr { text-align: center; margin-bottom: 48px; }
    .sec-hdr .sec-sub { margin: 0 auto; }
    .sec-hdr .sec-lbl { justify-content: center; }

    .bg-light {
      background: linear-gradient(180deg, rgba(4, 18, 10, 0.92), rgba(2, 10, 6, 0.98));
      border-top: 1px solid rgba(0, 255, 100, 0.12);
      border-bottom: 1px solid rgba(0, 255, 100, 0.12);
    }
    .bg-dark {
      background: linear-gradient(135deg, #020806, #061a0e 50%, #020806);
      border-top: 1px solid rgba(0, 255, 100, 0.2);
      border-bottom: 1px solid rgba(0, 255, 100, 0.2);
    }
    .bg-green-dark {
      background: linear-gradient(135deg, #010804, #082212);
    }

    /* ABOUT */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
    .about-img {
      border-radius: 16px;
      overflow: hidden;
      height: 400px;
      border: 1px solid rgba(0, 255, 100, 0.35);
      box-shadow: var(--border-glow);
      position: relative;
    }
    .feat-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
    .feat-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      background: rgba(0, 24, 12, 0.55);
      border-radius: 12px;
      border: 1px solid rgba(0, 255, 100, 0.25);
      border-left: 3px solid var(--neon);
      transition: box-shadow 0.25s;
    }
    .feat-item:hover { box-shadow: 0 0 20px rgba(0, 255, 100, 0.15); }
    .feat-ic {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(0, 255, 100, 0.12);
      border: 1px solid rgba(0, 255, 100, 0.35);
      color: var(--neon);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    .feat-item h5 { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #e8ffe8; }
    .feat-item p { font-size: 12px; color: var(--muted); line-height: 1.55; }

    /* FEATURES */
    .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feat-card {
      background: var(--panel);
      border: 1px solid rgba(0, 255, 100, 0.3);
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }
    .feat-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 16px;
      padding: 1px;
      background: linear-gradient(120deg, rgba(0, 255, 100, 0.1), rgba(200, 255, 0, 0.35), rgba(0, 255, 100, 0.1));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: border-flow 8s linear infinite;
      opacity: 0.7;
      pointer-events: none;
    }
    .feat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 28px rgba(0, 255, 100, 0.2);
    }
    .feat-card .ic {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(0, 255, 100, 0.1);
      border: 1px solid rgba(0, 255, 100, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--neon);
      margin-bottom: 14px;
      animation: float-glow 3s ease-in-out infinite;
    }
    .feat-card h4 { font-size: 14px; font-weight: 700; color: #f0fff4; margin-bottom: 8px; }
    .feat-card p { font-size: 12px; color: var(--muted); line-height: 1.6; }

    /* Key features at a glance (home, above FAQ) */
    .glance-lead {
      max-width: 920px;
      margin: 0 auto 20px;
      font-size: 14px;
      line-height: 1.78;
      color: var(--muted);
      text-align: center;
    }
    .glance-note {
      max-width: 860px;
      margin: 0 auto 28px;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(180, 220, 190, 0.5);
      text-align: center;
    }
    .glance-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
    }

    /* Who benefits (home) */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 22px;
    }
    .benefit-card {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .benefit-card:hover {
      border-color: rgba(0, 255, 100, 0.48);
      box-shadow: 0 0 22px rgba(0, 255, 100, 0.12);
    }
    .benefit-card-img {
      height: 170px;
      position: relative;
    }
    .benefit-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .benefit-card-body { padding: 18px 18px 20px; }
    .benefit-card-body h4 {
      font-size: 15px;
      font-weight: 700;
      color: #f0fff4;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .benefit-card-body h4 .bc-ic {
      color: var(--neon);
      font-size: 14px;
      opacity: 0.95;
    }
    .benefit-card-body p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
      margin: 0;
    }
    .bg-dark .sec-title { color: #f0fff4; }
    .bg-dark .sec-sub { color: var(--muted); }
    .bg-dark .sec-lbl { color: var(--neon); }

    /* STEPS */
    .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .step-card { text-align: center; }
    .step-num {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #00ff88, #004422);
      color: #031105;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      border: 2px solid rgba(0, 255, 100, 0.6);
      box-shadow: 0 0 18px rgba(0, 255, 100, 0.35);
      font-family: "Share Tech Mono", monospace;
    }
    .step-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: #e8ffe8; }
    .step-card p { font-size: 12px; color: var(--muted); line-height: 1.55; }

    /* SERVICES */
    .srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .srv-card {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 16px;
      padding: 22px;
      display: flex;
      gap: 16px;
      transition: all 0.3s;
    }
    .srv-card:hover {
      border-color: rgba(0, 255, 100, 0.55);
      box-shadow: 0 0 24px rgba(0, 255, 100, 0.12);
      transform: translateY(-2px);
    }
    .srv-ic {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(0, 80, 40, 0.9), rgba(0, 40, 20, 0.9));
      border: 1px solid rgba(0, 255, 100, 0.45);
      color: var(--neon);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .srv-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #f0fff4; }
    .srv-card p { font-size: 12px; color: var(--muted); line-height: 1.6; }

    /* PRICING */
    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .price-card {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 18px;
      padding: 28px 22px;
      position: relative;
      transition: all 0.3s;
    }
    .price-card:hover {
      border-color: rgba(0, 255, 100, 0.65);
      box-shadow: 0 0 28px rgba(0, 255, 100, 0.18);
    }
    .price-card.pop {
      background: linear-gradient(160deg, #003818 0%, #001a0c 100%);
      border-color: rgba(0, 255, 100, 0.75);
      transform: scale(1.03);
      box-shadow: 0 0 40px rgba(0, 255, 100, 0.25);
    }
    .price-card.pop * { color: #e8ffe8 !important; }
    .price-card.pop .p-badge { background: rgba(0, 255, 100, 0.15); border: 1px solid rgba(0, 255, 100, 0.35); }
    .price-card.pop .f-item { border-color: rgba(0, 255, 100, 0.22); }
    .price-card.pop .wt-btn {
      background: rgba(0, 0, 0, 0.35);
      border-color: rgba(0, 255, 100, 0.4);
      color: var(--neon) !important;
    }
    .price-card.pop .waddr { background: rgba(0, 0, 0, 0.35); color: var(--neon) !important; }
    .price-card.pop .wa-box { background: rgba(0, 10, 5, 0.6); }
    .pop-tag {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--neon-hot);
      color: #031105;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 12px;
      border-radius: 20px;
      white-space: nowrap;
      box-shadow: 0 0 14px rgba(200, 255, 0, 0.45);
    }
    .p-badge {
      display: inline-block;
      background: rgba(0, 40, 22, 0.85);
      color: var(--neon);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 11px;
      border-radius: 20px;
      text-transform: uppercase;
      margin-bottom: 14px;
      border: 1px solid rgba(0, 255, 100, 0.35);
    }
    .p-price {
      font-size: 38px;
      font-weight: 800;
      color: #f0fff4;
      font-family: "Share Tech Mono", monospace;
      text-shadow: 0 0 16px rgba(0, 255, 100, 0.35);
    }
    .p-period { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
    .f-list { list-style: none; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
    .f-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 255, 100, 0.15);
      color: var(--text);
    }
    .f-item:last-child { border-bottom: none; }
    .f-item i { color: var(--neon); font-size: 11px; flex-shrink: 0; }
    .wt-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: rgba(0, 40, 22, 0.55);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--neon);
      margin-top: 14px;
      transition: all 0.2s;
      font-family: inherit;
    }
    .wt-btn:hover { background: rgba(0, 60, 30, 0.65); }
    .wa-box { display: none; margin-top: 10px; padding: 12px; background: rgba(0, 16, 8, 0.9); border-radius: 8px; border: 1px solid rgba(0, 255, 100, 0.2); }
    .wa-box.open { display: block; }
    .wa-item { margin-bottom: 8px; }
    .wa-name { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
    .waddr {
      display: block;
      width: 100%;
      text-align: left;
      font-size: 10px;
      font-family: inherit;
      color: var(--neon);
      background: rgba(0, 40, 22, 0.6);
      padding: 5px 8px;
      border-radius: 4px;
      border: 1px solid rgba(0, 255, 100, 0.25);
      cursor: pointer;
      word-break: break-all;
    }
    .copy-hint { font-size: 9px; color: rgba(0, 255, 100, 0.45); margin-top: 2px; }

    /* TESTIMONIALS */
    .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .testi-card {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 16px;
      padding: 22px;
      transition: all 0.3s;
    }
    .testi-card:hover { border-color: rgba(0, 255, 100, 0.55); box-shadow: 0 0 22px rgba(0, 255, 100, 0.12); }
    .stars { font-size: 16px; color: var(--neon-hot); margin-bottom: 12px; text-shadow: 0 0 8px rgba(200, 255, 0, 0.35); }
    .testi-card p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; font-style: italic; }
    .reviewer { display: flex; align-items: center; gap: 12px; }
    .rav-ic {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #003818, #00aa44);
      border: 1px solid rgba(0, 255, 100, 0.45);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
      box-shadow: 0 0 12px rgba(0, 255, 100, 0.25);
    }
    .rev-name { font-weight: 700; font-size: 13px; color: #e8ffe8; }
    .rev-role { font-size: 11px; color: var(--muted); }

    /* STATS */
    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .stat-card {
      text-align: center;
      padding: 26px 16px;
      background: rgba(0, 24, 12, 0.55);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 14px;
      box-shadow: var(--border-glow);
    }
    .stat-num {
      font-size: 38px;
      font-weight: 800;
      color: var(--neon-hot);
      font-family: "Share Tech Mono", monospace;
      line-height: 1;
      text-shadow: 0 0 18px rgba(200, 255, 0, 0.45);
    }
    .stat-lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }

    /* P2P */
    .p2p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
    .p2p-img {
      border-radius: 16px;
      overflow: hidden;
      height: 420px;
      border: 1px solid rgba(0, 255, 100, 0.35);
      position: relative;
      box-shadow: var(--border-glow);
    }
    .feature-box {
      background: rgba(0, 24, 12, 0.55);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 14px;
      border-left: 4px solid var(--neon);
      border: 1px solid rgba(0, 255, 100, 0.22);
      border-left: 4px solid var(--neon-hot);
    }
    .feature-box h5 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: #f0fff4; }
    .feature-box p { font-size: 12px; color: var(--muted); line-height: 1.55; }

    /* WALLETS */
    .wallet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .wallet-item {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 14px;
      padding: 18px;
      text-align: center;
      transition: all 0.2s;
    }
    .wallet-item:hover {
      border-color: rgba(0, 255, 100, 0.55);
      box-shadow: 0 0 18px rgba(0, 255, 100, 0.15);
    }
    .wallet-item i { font-size: 26px; color: var(--neon); margin-bottom: 8px; filter: drop-shadow(0 0 6px rgba(0, 255, 100, 0.45)); }
    .wallet-item span { display: block; font-size: 12px; font-weight: 600; color: #e8ffe8; }

    /* FAQ */
    .faq-list { display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 12px;
      overflow: hidden;
      animation: neon-pulse 5s ease-in-out infinite;
    }
    .faq-q {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      cursor: pointer;
      font-weight: 700;
      font-size: 14px;
      transition: background 0.2s;
      color: #e8ffe8;
    }
    .faq-q:hover { background: rgba(0, 40, 22, 0.45); }
    .faq-a { padding: 0 20px 16px; font-size: 13px; color: var(--muted); line-height: 1.65; display: none; }
    .faq-a.open { display: block; }
    .faq-q i { color: var(--neon); transition: transform 0.2s; }
    .faq-q.active i { transform: rotate(45deg); }

    /* Long-form SEO sections (About, Services, Pricing, Contact) */
    .seo-copy { font-size: 13px; color: var(--muted); line-height: 1.78; }
    .seo-copy > h3 { font-size: 18px; color: #e8ffe8; margin: 0 0 12px; letter-spacing: 0.02em; font-family: "Share Tech Mono", "JetBrains Mono", monospace; }
    .seo-copy > h4 { font-size: 15px; color: #c8f5d4; margin: 16px 0 8px; }
    .seo-copy p { margin: 0 0 14px; }
    .seo-copy ul { margin: 0 0 14px 18px; line-height: 1.65; font-size: 13px; }
    .seo-copy li { margin-bottom: 6px; }
    .seo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
    .seo-split .about-img { min-height: 200px; }
    .seo-stack { max-width: 920px; margin: 0 auto; }
    @media (max-width: 920px) {
      .seo-split { grid-template-columns: 1fr; }
    }

    /* BLOG */
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .blog-card {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
    }
    .blog-card:hover {
      box-shadow: 0 0 28px rgba(0, 255, 100, 0.15);
      transform: translateY(-4px);
      border-color: rgba(0, 255, 100, 0.5);
    }
    .blog-img.media-hacker {
      position: relative;
      height: 170px;
      overflow: hidden;
      border-bottom: 1px solid rgba(0, 255, 100, 0.2);
      background: linear-gradient(145deg, #020806, #0a1e12);
    }
    /* Blog card thumbs: lighter “hacker” filter so per-post SVG art stays readable */
    .blog-img.media-hacker > img {
      filter: grayscale(0.12) contrast(1.12) brightness(0.88) sepia(0.25) hue-rotate(88deg) saturate(1.45) invert(0.02);
      animation: none;
    }
    .blog-card:hover .blog-img.media-hacker > img {
      transform: scale(1.06);
      transition: transform 0.45s ease;
    }
    .blog-tag-wrap { position: absolute; top: 12px; left: 12px; z-index: 8; }
    .btag {
      background: rgba(0, 60, 30, 0.95);
      color: var(--neon);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      border: 1px solid rgba(0, 255, 100, 0.4);
    }
    .blog-body { padding: 18px; }
    .blog-date { font-size: 10px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
    .blog-body h4 { font-size: 15px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; color: #f0fff4; }
    .blog-body p { font-size: 12px; color: var(--muted); line-height: 1.55; }
    .read-more { color: var(--neon); font-size: 12px; font-weight: 700; margin-top: 10px; display: flex; align-items: center; gap: 6px; }

    /* ARTICLE */
    #artView { display: none; padding: 50px 0; }
    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(0, 24, 12, 0.7);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 20px;
      color: var(--neon);
      font-family: inherit;
    }
    .back-btn:hover { background: rgba(0, 40, 22, 0.85); }
    .art-hero.media-hacker {
      width: 100%;
      height: min(42vw, 320px);
      min-height: 220px;
      border-radius: 14px;
      margin-bottom: 24px;
      border: 1px solid rgba(0, 255, 100, 0.4);
      box-shadow: var(--border-glow);
    }
    .art-hero.media-hacker > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(0.12) contrast(1.12) brightness(0.88) sepia(0.25) hue-rotate(88deg) saturate(1.45) invert(0.02);
      animation: none;
    }
    .art-body h2 { font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: #f0fff4; }
    .art-body p { font-size: 14px; line-height: 1.85; color: var(--muted); margin-bottom: 14px; }
    .art-body a { color: var(--neon); text-decoration: underline; }
    .art-body h3 { font-size: 18px; font-weight: 700; margin: 20px 0 10px; color: #e8ffe8; }
    .art-body .art-figure {
      margin: 22px 0;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(0, 255, 100, 0.28);
      background: rgba(0, 24, 12, 0.45);
      box-shadow: var(--border-glow);
    }
    .art-body .art-figure-img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1200 / 630;
      object-fit: cover;
      vertical-align: middle;
    }
    .art-body .art-figure-cap {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      padding: 12px 14px 14px;
      margin: 0;
    }
    .highlight {
      background: rgba(0, 60, 30, 0.45);
      border-left: 4px solid var(--neon);
      padding: 14px 18px;
      border-radius: 0 10px 10px 0;
      margin: 18px 0;
      font-size: 13px;
      line-height: 1.65;
      border: 1px solid rgba(0, 255, 100, 0.22);
    }

    /* CONTACT */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
    .cinfo { display: flex; flex-direction: column; gap: 14px; }
    .ci {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px;
      background: rgba(0, 24, 12, 0.55);
      border-radius: 14px;
      border: 1px solid rgba(0, 255, 100, 0.22);
    }
    .ci-ic {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(0, 255, 100, 0.12);
      border: 1px solid rgba(0, 255, 100, 0.35);
      color: var(--neon);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
    }
    .ci h5 { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: #e8ffe8; }
    .ci p { font-size: 12px; color: var(--muted); }
    .contact-form {
      background: var(--panel-2);
      border: 1px solid rgba(0, 255, 100, 0.35);
      border-radius: 18px;
      padding: 30px;
      box-shadow: var(--border-glow);
    }
    .fg { margin-bottom: 16px; }
    .fg label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #e8ffe8; }
    .fg input,
    .fg select,
    .fg textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit;
      color: #e8ffe8;
      background: rgba(0, 12, 6, 0.85);
      outline: none;
      transition: border 0.2s, box-shadow 0.2s;
    }
    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: rgba(0, 255, 100, 0.65);
      box-shadow: 0 0 12px rgba(0, 255, 100, 0.15);
    }
    .fg textarea { height: 100px; resize: vertical; }
    .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    /* FOOTER */
    footer { background: #010604; border-top: 1px solid rgba(0, 255, 100, 0.25); }
    .foot-main { padding: 52px 0; }
    .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
    .foot-brand .logo { color: #f0fff4; }
    .foot-brand p { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.65; }
    .foot-col h5 {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(0, 255, 100, 0.55);
      margin-bottom: 14px;
    }
    .foot-col ul { list-style: none; }
    .foot-col ul li { margin-bottom: 8px; }
    .foot-col ul li a { font-size: 12px; color: var(--muted); cursor: pointer; transition: color 0.2s; }
    .foot-col ul li a:hover { color: var(--neon); text-shadow: 0 0 8px rgba(0, 255, 100, 0.35); }
    .socials { display: flex; gap: 10px; }
    .soc-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(0, 40, 22, 0.55);
      border: 1px solid rgba(0, 255, 100, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
      transition: all 0.2s;
    }
    .soc-btn:hover {
      background: rgba(0, 255, 100, 0.15);
      color: var(--neon);
      box-shadow: 0 0 14px rgba(0, 255, 100, 0.25);
    }
    .foot-btm { border-top: 1px solid rgba(0, 255, 100, 0.1); padding: 18px 0; }
    .foot-btm-in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: rgba(180, 220, 190, 0.35);
      flex-wrap: wrap;
      gap: 10px;
    }

    .wa-float {
      position: fixed;
      bottom: 26px;
      right: 26px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #25d366, #0a5c2e);
      border: 2px solid rgba(0, 255, 100, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      box-shadow: 0 0 28px rgba(0, 255, 100, 0.45);
      z-index: 9999;
      transition: transform 0.2s;
      animation: float-glow 2.5s ease-in-out infinite;
    }
    .wa-float:hover { transform: scale(1.08); }

    .toast {
      position: fixed;
      bottom: 96px;
      right: 26px;
      background: rgba(0, 24, 12, 0.95);
      border: 1px solid rgba(0, 255, 100, 0.45);
      color: var(--neon);
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 9999;
      pointer-events: none;
      box-shadow: var(--border-glow);
    }
    .toast.show { opacity: 1; }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.85); }
    }
    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--neon);
      display: inline-block;
      animation: pulse-dot 1.4s infinite;
      box-shadow: 0 0 8px var(--neon);
    }

    @media (max-width: 1024px) {
      .hero-bottom { grid-template-columns: 1fr; }
      .hero-left,
      .hero-right { display: none; }
      .hero-center { justify-content: center; padding-bottom: 36px; }
      .about-grid,
      .contact-grid,
      .p2p-grid { grid-template-columns: 1fr; }
      .feat-grid,
      .steps-grid { grid-template-columns: 1fr 1fr; }
      .price-grid,
      .testi-grid,
      .blog-grid { grid-template-columns: 1fr 1fr; }
      .stats-row,
      .wallet-grid { grid-template-columns: repeat(2, 1fr); }
      .foot-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: rgba(2, 10, 6, 0.97);
        border-bottom: 1px solid rgba(0, 255, 100, 0.3);
        padding: 12px 0;
        z-index: 999;
      }
      nav.open { display: block; }
      nav ul { flex-direction: column; }
      nav ul li a { padding: 12px 28px; border-bottom: 1px solid rgba(0, 255, 100, 0.08); }
      .hamburger { display: block; }
      .feat-grid,
      .steps-grid,
      .price-grid,
      .testi-grid,
      .blog-grid { grid-template-columns: 1fr; }
      .stats-row,
      .wallet-grid,
      .srv-grid { grid-template-columns: 1fr 1fr; }
      .frow { grid-template-columns: 1fr; }
      .foot-grid { grid-template-columns: 1fr; }
      .hdr .btn { display: none; }
    }

    /* ========== LIVE TRANSACTIONS (pricing page) ========== */
    .live-tx-block {
      margin-top: 48px;
      padding-top: 40px;
      border-top: 1px solid rgba(0, 255, 100, 0.14);
    }
    .live-tx-hdr {
      margin-bottom: 22px;
    }
    .live-tx-eyebrow {
      display: inline-flex !important;
      align-items: center;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 11px !important;
      color: var(--muted) !important;
    }
    .live-tx-eyebrow .live-dot {
      flex-shrink: 0;
    }
    .live-tx-disclaimer {
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-size: 11px !important;
      line-height: 1.65 !important;
      color: var(--muted) !important;
      max-width: 52rem;
    }
    .live-tx-wrap {
      border: 1px solid rgba(0, 243, 255, 0.12);
      border-radius: 12px;
      background: rgba(2, 12, 8, 0.72);
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(0, 255, 160, 0.06),
        0 16px 48px rgba(0, 0, 0, 0.4);
    }
    .live-tx-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
    }
    .live-tx-wrap--pulse {
      animation: liveTxPanelGlow 4s ease-in-out infinite;
    }
    @keyframes liveTxPanelGlow {
      0%,
      100% {
        box-shadow:
          inset 0 1px 0 rgba(0, 255, 160, 0.06),
          0 16px 48px rgba(0, 0, 0, 0.4);
      }
      50% {
        box-shadow:
          inset 0 1px 0 rgba(0, 255, 160, 0.12),
          0 16px 52px rgba(0, 255, 100, 0.08);
      }
    }
    .live-tx-table tbody tr.live-tx-row--enter {
      animation: liveTxRowEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .live-tx-table tbody tr.live-tx-row--enter td {
      animation: liveTxCellFlash 0.7s ease-out forwards;
    }
    @keyframes liveTxRowEnter {
      from {
        opacity: 0;
        transform: translateY(-14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes liveTxCellFlash {
      0% {
        background: rgba(0, 255, 100, 0.14);
      }
      100% {
        background: transparent;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .live-tx-wrap--pulse,
      .live-tx-table tbody tr.live-tx-row--enter,
      .live-tx-table tbody tr.live-tx-row--enter td {
        animation: none !important;
      }
    }
    .live-tx-table {
      width: 100%;
      min-width: 520px;
      border-collapse: collapse;
      font-family: "JetBrains Mono", "Share Tech Mono", ui-monospace, monospace;
      font-size: 13px;
    }
    .live-tx-table th {
      text-align: left;
      padding: 14px 16px;
      color: #5effc4;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-size: 11px;
      border-bottom: 1px solid rgba(0, 255, 180, 0.18);
      background: rgba(0, 28, 16, 0.65);
      text-shadow: 0 0 12px rgba(0, 255, 140, 0.25);
    }
    .live-tx-table td {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      color: var(--text);
    }
    .live-tx-table tbody tr:hover td {
      background: rgba(0, 255, 100, 0.05);
    }
    .live-tx-table tbody tr:last-child td {
      border-bottom: none;
    }
    .live-tx-table code {
      font-family: inherit;
      font-size: 12px;
      color: rgba(190, 255, 220, 0.95);
      background: rgba(0, 0, 0, 0.25);
      padding: 2px 6px;
      border-radius: 4px;
    }
    .live-tx-table td:last-child {
      color: rgba(180, 220, 190, 0.55);
      font-size: 12px;
    }
    @media (max-width: 768px) {
      .live-tx-table th,
      .live-tx-table td {
        padding: 10px 12px;
        font-size: 12px;
      }
    }

    /* ========== PAYMENT PAGE (TRC20) — matches site neon / hacker theme ========== */
    #page-payment {
      --pay-neon: var(--neon);
      --pay-neon-hot: var(--neon-hot);
      --pay-neon-dim: var(--neon-dim);
      --pay-card: var(--panel-2);
      --pay-border: rgba(0, 255, 102, 0.28);
      --pay-text: var(--text);
      --pay-muted: var(--muted);
      --pay-accent-ok: #7dffb0;
      --primary-light: rgba(200, 255, 220, 0.92);
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10050;
      font-family: "JetBrains Mono", "Share Tech Mono", ui-monospace, monospace;
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 100vh;
      color: var(--text);
      background: radial-gradient(ellipse 120% 100% at 50% 40%, #06180e 0%, #040f0a 48%, var(--void) 100%);
    }
    #page-payment.page.active {
      display: block;
    }
    #page-payment #cryptoCanvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    #page-payment .payment-inner {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px 16px 48px;
    }
    body.payment-mode #matrix-bg,
    body.payment-mode #vignette,
    body.payment-mode #scanlines {
      display: none !important;
    }
    body.payment-mode .tbar,
    body.payment-mode header,
    body.payment-mode footer,
    body.payment-mode .wa-float {
      display: none !important;
    }
    body.payment-mode .site {
      min-height: 0;
    }
    body.payment-mode {
      overflow-x: hidden;
      overflow-y: hidden;
      background: radial-gradient(ellipse 120% 100% at 50% 40%, #06180e 0%, #040f0a 48%, var(--void) 100%);
    }

    #page-payment .form-card {
      width: 100%;
      max-width: 520px;
      background: var(--pay-card);
      border: 1px solid var(--pay-border);
      border-radius: 16px;
      padding: 28px 24px 32px;
      box-shadow:
        0 0 0 1px rgba(0, 255, 100, 0.12),
        inset 0 1px 0 rgba(0, 255, 160, 0.06),
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 50px rgba(0, 255, 100, 0.14);
      backdrop-filter: blur(12px);
    }
    #page-payment .btn-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: var(--pay-muted);
      font-size: 13px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    #page-payment .btn-back:hover {
      background: rgba(0, 255, 100, 0.1);
      color: var(--pay-text);
      border-color: rgba(0, 255, 100, 0.35);
    }
    #page-payment .header .badge {
      display: inline-block;
      background: rgba(0, 255, 100, 0.12);
      color: var(--pay-neon);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 6px 12px;
      border-radius: 6px;
      margin-bottom: 14px;
      border: 1px solid rgba(0, 255, 100, 0.35);
    }
    #page-payment .header h1 {
      font-family: "Share Tech Mono", "JetBrains Mono", monospace;
      font-size: clamp(1.15rem, 4vw, 1.45rem);
      font-weight: 800;
      line-height: 1.35;
      color: var(--pay-neon);
      margin-bottom: 12px;
      text-shadow: 0 0 28px rgba(0, 255, 100, 0.35);
    }
    #page-payment .header .sub {
      color: var(--pay-muted);
      font-size: 14px;
      line-height: 1.55;
      margin-bottom: 8px;
    }
    #page-payment #paymentForm label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--pay-text);
      margin: 18px 0 8px;
    }
    #page-payment #paymentForm .row {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }
    #page-payment #paymentForm input[type="text"],
    #page-payment #paymentForm input[type="email"],
    #page-payment #paymentForm input[type="number"] {
      width: 100%;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.35);
      color: var(--pay-text);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    #page-payment #paymentForm input:focus {
      border-color: rgba(0, 255, 100, 0.5);
      box-shadow: 0 0 0 3px rgba(0, 255, 100, 0.12);
    }
    #page-payment #paymentForm input.error {
      border-color: #ff4444;
    }
    #page-payment #copyText {
      font-family: ui-monospace, monospace;
      font-size: 12px;
    }
    #page-payment .btn-copy {
      flex-shrink: 0;
      padding: 0 16px;
      background: rgba(38, 42, 54, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #f0f2f5;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    }
    #page-payment .btn-copy:hover {
      background: rgba(48, 52, 66, 1);
      border-color: rgba(0, 255, 100, 0.4);
      color: #fff;
    }
    #page-payment .note {
      font-size: 12px;
      color: var(--pay-muted);
      margin-top: 8px;
      line-height: 1.45;
    }
    #page-payment .note.error-message {
      color: #ff6b6b;
      display: none;
      margin-top: 6px;
    }
    #page-payment .btn-primary {
      width: 100%;
      padding: 14px 20px;
      margin-top: 8px;
      background: linear-gradient(135deg, var(--pay-neon-hot), #6aff00);
      border: 1px solid rgba(0, 255, 100, 0.45);
      border-radius: 10px;
      color: #031105;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(0, 255, 100, 0.28);
      transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
    }
    #page-payment .btn-primary:hover:not(:disabled) {
      filter: brightness(1.08);
      box-shadow: 0 10px 36px rgba(0, 255, 100, 0.4);
    }
    #page-payment .btn-primary:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }
    #page-payment .btn-secondary {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--pay-text);
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
    }

    #page-payment .modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10100;
      background: rgba(0, 0, 0, 0.72);
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(6px);
    }
    #page-payment .modal.open {
      display: flex;
    }
    #page-payment .modal-content {
      background: linear-gradient(165deg, rgba(8, 28, 16, 0.98), rgba(4, 14, 10, 0.99));
      border: 1px solid rgba(0, 255, 100, 0.28);
      border-radius: 16px;
      max-width: 440px;
      width: 100%;
      max-height: 90vh;
      overflow: auto;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
      animation: modal-in 0.35s ease;
    }
    @keyframes modal-in {
      from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    #page-payment .modal-header {
      position: relative;
      padding: 22px 24px 12px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    #page-payment .modal-header h2 {
      font-family: "Share Tech Mono", "JetBrains Mono", monospace;
      font-size: 1.25rem;
      color: var(--pay-text);
      margin-top: 12px;
    }
    #page-payment .success-icon {
      font-size: 48px;
      color: var(--pay-neon);
      filter: drop-shadow(0 0 12px rgba(0, 255, 100, 0.45));
    }
    #page-payment .error-icon {
      font-size: 48px;
      color: #ffb020;
    }
    #page-payment .close-modal {
      position: absolute;
      top: 12px;
      right: 14px;
      background: none;
      border: none;
      color: var(--pay-muted);
      font-size: 26px;
      cursor: pointer;
      line-height: 1;
    }
    #page-payment .modal-body {
      padding: 16px 22px 20px;
    }
    #page-payment .detail-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 13px;
    }
    #page-payment .detail-item .label {
      color: var(--pay-muted);
    }
    #page-payment .detail-item .value {
      color: var(--pay-text);
      font-weight: 600;
      text-align: right;
      word-break: break-all;
    }
    #page-payment .loading-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      overflow: hidden;
      margin: 16px 0 10px;
    }
    #page-payment .loading-progress {
      height: 100%;
      width: 35%;
      background: linear-gradient(90deg, var(--pay-neon), var(--pay-neon-hot));
      border-radius: 4px;
      animation: loading-animation 2s ease-in-out infinite;
    }
    @keyframes loading-animation {
      0% {
        transform: translateX(-30%);
        width: 40%;
      }
      50% {
        width: 55%;
      }
      100% {
        transform: translateX(220%);
        width: 40%;
      }
    }
    #page-payment .processing-text {
      text-align: center;
      color: var(--pay-muted);
      font-size: 13px;
    }
    #page-payment .next-steps {
      margin-top: 16px;
      padding: 14px;
      background: rgba(0, 255, 100, 0.06);
      border-radius: 10px;
      border-left: 3px solid var(--pay-neon);
    }
    #page-payment .next-steps h4 {
      font-size: 12px;
      color: var(--pay-neon);
      margin-bottom: 10px;
      font-family: "Share Tech Mono", "JetBrains Mono", monospace;
    }
    #page-payment .next-steps ul {
      margin: 0;
      padding-left: 18px;
      color: var(--pay-muted);
      font-size: 13px;
      line-height: 1.6;
    }
    #page-payment .modal-footer {
      display: flex;
      gap: 10px;
      padding: 16px 22px 22px;
      flex-wrap: wrap;
      justify-content: center;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    #page-payment .modal-footer .btn-primary {
      width: auto;
      min-width: 140px;
      margin-top: 0;
    }

    .copy-indicator {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10200;
      background: rgba(4, 18, 10, 0.95);
      border: 1px solid rgba(0, 255, 100, 0.45);
      color: var(--neon);
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      animation: copy-pop 0.35s ease;
    }
    @keyframes copy-pop {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }
    @keyframes pay-shake {
      0%,
      100% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-5px);
      }
      75% {
        transform: translateX(5px);
      }
    }
    #page-payment .form-card.shake {
      animation: pay-shake 0.4s ease;
    }
    #page-payment .error-suggestions h4 {
      font-size: 13px;
      color: var(--pay-muted);
      margin-bottom: 8px;
    }
    #page-payment .error-suggestions ul {
      margin: 0;
      padding-left: 18px;
      color: var(--pay-muted);
      font-size: 13px;
      line-height: 1.55;
    }