body {
      background-color: #060608;
      color: #ededed;
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* Ambient noise & grid */
    .bg-grid {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    }

    /* Glass effect */
    .glass-card {
      background: rgba(18, 18, 22, 0.65);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .glass-card:hover {
      background: rgba(28, 28, 34, 0.85);
      border-color: rgba(255, 255, 255, 0.28);
      transform: translateY(-2px);
      box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.06);
    }

    .glass-card:active {
      transform: translateY(0px) scale(0.995);
    }

    /* Chrome metallic text reflection with delicate shimmer */
    .chrome-text {
      background: linear-gradient(
        110deg,
        #94A3B8 0%,
        #FFFFFF 20%,
        #E2E8F0 38%,
        #FFFFFF 50%,
        #94A3B8 62%,
        #CBD5E1 80%,
        #94A3B8 100%
      );
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shimmer 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }

    /* Subtle particle dot animation */
    .glow-sphere {
      position: fixed;
      border-radius: 9999px;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }

    .ambient-orb {
      will-change: transform, opacity;
      transform-origin: center;
    }

    .ambient-orb-left {
      animation: ambientDriftLeft 11s ease-in-out infinite;
    }

    .ambient-orb-right {
      animation: ambientDriftRight 13s ease-in-out infinite -4s;
    }

    @keyframes ambientDriftLeft {
      0%, 100% { opacity: .58; transform: translate3d(0, 0, 0) scale(.97); }
      50% { opacity: .86; transform: translate3d(9px, -10px, 0) scale(1.035); }
    }

    @keyframes ambientDriftRight {
      0%, 100% { opacity: .62; transform: translate3d(0, 0, 0) scale(1); }
      50% { opacity: .88; transform: translate3d(-11px, 8px, 0) scale(1.04); }
    }

    /* Background canvas */
    #particles-canvas {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }

    /* Avatar Ring Glow & Breathing Aura */
    .avatar-wrap {
      position: relative;
      transform-origin: center center;
      isolation: isolate;
      animation: avatarAura 4.5s ease-in-out infinite;
    }
    .avatar-wrap::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      padding: 2px;
      background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.1), rgba(255,255,255,0.6));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: spin 10s linear infinite;
    }

    .avatar-stage {
      display: grid;
      place-items: center;
    }

    .avatar-image {
      display: block;
      object-position: 50% 50%;
      transform-origin: 50% 50%;
    }

    .verified-badge {
      right: 0;
      bottom: 0;
      z-index: 3;
    }

    .telegram-stat-icon {
      display: block;
      width: 1rem;
      height: 1rem;
      flex: 0 0 1rem;
      filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45));
    }

    @media (min-width: 640px) {
      .verified-badge {
        right: 0.5rem;
        bottom: 0.25rem;
      }
    }

    @media (hover: none), (pointer: coarse) {
      .avatar-stage:hover .avatar-wrap,
      .avatar-stage:active .avatar-wrap {
        transform: none !important;
      }

      .avatar-stage:hover .avatar-image,
      .avatar-stage:active .avatar-image {
        transform: scale(1.1) !important;
      }
    }

    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

    /* Smooth organic floating / levitation animations */
    @keyframes floatY1 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }
    @keyframes floatY2 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }
    @keyframes floatY3 {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-4.5px); }
    }

    .levitate-1 {
      animation: floatY1 5.2s ease-in-out infinite;
    }
    .levitate-2 {
      animation: floatY2 4.8s ease-in-out infinite -1.2s;
    }
    .levitate-3 {
      animation: floatY3 5.6s ease-in-out infinite -2.4s;
    }
    .levitate-stat-1 {
      animation: floatY1 4.6s ease-in-out infinite -0.6s;
    }
    .levitate-stat-2 {
      animation: floatY2 5.0s ease-in-out infinite -2.1s;
    }
    .levitate-stat-3 {
      animation: floatY3 5.4s ease-in-out infinite -3.6s;
    }
    .levitate-link-1 {
      animation: floatY1 5.4s ease-in-out infinite -1.0s;
    }
    .levitate-link-2 {
      animation: floatY2 5.8s ease-in-out infinite -2.6s;
    }
    .levitate-link-3 {
      animation: floatY3 5.2s ease-in-out infinite -3.9s;
    }
    .levitate-link-4 {
      animation: floatY1 5.6s ease-in-out infinite -1.8s;
    }
    .levitate-link-5 {
      animation: floatY2 5.0s ease-in-out infinite -3.2s;
    }
    .levitate-btn {
      animation: floatY3 6.0s ease-in-out infinite -1.5s;
    }

    /* When hovering on levitating links, pause float to give crisp interactive feel */
    .glass-card:hover {
      animation-play-state: paused;
    }

    @media (prefers-reduced-motion: reduce) {
      .avatar-wrap::before, .avatar-wrap, .chrome-text,
      .levitate-1, .levitate-2, .levitate-3,
      .levitate-stat-1, .levitate-stat-2, .levitate-stat-3,
      .levitate-link-1, .levitate-link-2, .levitate-link-3, .levitate-link-4, .levitate-link-5,
      .levitate-btn, .ambient-orb {
        animation: none !important;
      }
    }
  

    .desktop-viewport { display: none; }

    @media (min-width: 1024px) {
      html, body { overflow: hidden; }
      body > :not(.desktop-viewport):not(script) { display: none !important; }
      .desktop-viewport {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        border: 0;
        background: #0b0c0e;
      }
    }