.dots-bg {
      position: relative;
      overflow: visible;
    }
    .dots-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-color: transparent;
      background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px) !important;
      background-size: 18px 18px;
      z-index: 0;
      mix-blend-mode: normal;
    }
    .dots-bg > * { position: relative; z-index: 1; }
    :root {
      --accent1: #7C54F2;
      --accent2: #B139D7;
      --glass: rgba(255,255,255,0.04);
      --glass-strong: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.08);
    }
    html,body {
      height:100%;
      background-color:#0b0b10;
      font-family:'Poppins', Arial, sans-serif;
      color:#e6e6ea;
    }
    .logo-gradient {
      background:linear-gradient(90deg,var(--accent1),var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .btn-main {
      background: linear-gradient(90deg,var(--accent1),var(--accent2));
      padding: .62rem .9rem; border-radius: .6rem; font-weight:600; color:white; display:inline-flex; gap:.6rem; align-items:center;
      box-shadow: 0 6px 30px rgba(124,84,242,0.18);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn-main:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 40px rgba(124,84,242,0.26); }
    .btn-ghost {
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.6rem 0.9rem;
      border-radius: 0.6rem;
      color: #eee;
      background: rgba(24, 24, 27, 0.55);
      backdrop-filter: blur(6px);
      box-shadow: 0 2px 16px 0 rgba(24,24,27,0.2);
      font-weight: 600;
      transition: background 0.18s, box-shadow 0.18s;
    }
    .btn-ghost:hover { transform: translateY(-3px) scale(1.01); }
    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.012));
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(8px) saturate(110%);
      -webkit-backdrop-filter: blur(8px) saturate(110%);
      box-shadow: 0 6px 30px rgba(11,8,20,0.6);
      border-radius: 16px;
    }
    .glass-hover-glow:hover { box-shadow: 0 10px 40px rgba(124,84,242,0.18), 0 0 40px rgba(177,57,215,0.06); transform: translateY(-6px) scale(1.01); }
    .animated-gradient {
      background: linear-gradient(90deg, rgba(124,84,242,0.12), rgba(177,57,215,0.08));
      background-size: 300% 300%;
      animation: gradientShift 6s ease infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50% }
      50% { background-position: 100% 50% }
      100% { background-position: 0% 50% }
    }
    .card-hover {position:relative;overflow:hidden;transition: border 0.4s, box-shadow 0.4s;}
    .card-hover .card-bg {position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 0.4s;z-index:0;filter: brightness(0.27) blur(1px);}
    .card-hover:hover .card-bg { opacity: 1;}
    .card-hover:hover { border-color: #b366ff; box-shadow: 0 0 20px 5px #b366ff;}
    .card-content {position:relative;z-index:1;}
    .text-muted { color:#bfc0d6; }
    .badge { font-weight:700; padding:.2rem .5rem; border-radius:.5rem; font-size:.8rem; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; display:inline-block; }
    .stat-num { font-weight:800; font-size:2.1rem; letter-spacing:-0.02em; }
    .faq-toggle { cursor: pointer; user-select: none; transition: color 0.5s;}


    .xthomas {
  background-image: linear-gradient(90deg, hsl(210, 98%, 50%) 0%, hsl(220, 90%, 55%) 20%, hsl(225, 85%, 60%) 40%, hsl(230, 80%, 65%) 60%, hsl(220, 90%, 55%) 80%, hsl(210, 98%, 50%) 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 300% auto;
        animation: textgradient 20s 
linear infinite;
}