* { box-sizing: border-box; }
    body { font-family: 'DM Sans', sans-serif; }
    h1, h2, h3, .font-display { font-family: 'Syne', sans-serif; }

    /* ── Fade-up base ── */
    .fade-up {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
    }
    .fade-up.show { opacity: 1; transform: translateY(0); }

    /* ── Hero text reveal ── */
    .hero-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(60px) rotateX(-20deg);
      transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
    }
    .hero-word.show { opacity: 1; transform: translateY(0) rotateX(0); }

    /* ── Magnetic card tilt ── */
    .card-3d {
      transform-style: preserve-3d;
      transition: transform 0.1s ease;
      will-change: transform;
    }

    /* ── Glowing border pulse ── */
    @keyframes border-glow {
      0%, 100% { box-shadow: 0 0 0px 0px rgba(99,102,241,0); }
      50% { box-shadow: 0 0 28px 6px rgba(99,102,241,0.45); }
    }
    .glow-pulse { animation: border-glow 3s ease-in-out infinite; }

    /* ── Floating ── */
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(-3deg); }
      50% { transform: translateY(-18px) rotate(-1deg); }
    }
    .floating { animation: float 5s ease-in-out infinite; }

    /* ── Shimmer on card ── */
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .shimmer-text {
      background: linear-gradient(90deg, #a5b4fc, #818cf8, #e0e7ff, #818cf8, #a5b4fc);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shimmer 4s linear infinite;
    }

    /* ── NFC card visual ── */
    .nfc-card {
      width: 340px;
      height: 210px;
      border-radius: 20px;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
      border: 1px solid rgba(165,180,252,0.3);
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) inset;
    }
    .nfc-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 60% 40%, rgba(165,180,252,0.15) 0%, transparent 60%);
      pointer-events: none;
    }
    .nfc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
      border-radius: 20px;
    }

    /* ── QR sparkle ── */
    @keyframes qr-pulse {
      0%,100% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    .qr-pulse { animation: qr-pulse 2.5s ease-in-out infinite; }

    /* ── Feature card hover ── */
    .feat-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .feat-card .feat-img {
      transition: transform 0.5s cubic-bezier(.16,1,.3,1), filter 0.5s ease;
    }
    .feat-card .feat-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15,15,30,0.97) 0%, rgba(15,15,30,0.6) 60%, transparent 100%);
      opacity: 0;
      transition: opacity 0.45s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem;
    }
    .feat-card:hover .feat-overlay,
    .feat-card.mobile-show .feat-overlay { opacity: 1; }
    .feat-card:hover .feat-img { transform: scale(1.08); filter: brightness(0.6); }
    .feat-card.mobile-show .feat-img { filter: brightness(0.6); }

    .feat-overlay-content {
      transform: translateY(20px);
      transition: transform 0.45s cubic-bezier(.16,1,.3,1);
      opacity: 0;
      transition: transform 0.45s cubic-bezier(.16,1,.3,1), opacity 0.45s ease;
    }
    .feat-card:hover .feat-overlay-content,
    .feat-card.mobile-show .feat-overlay-content {
      transform: translateY(0);
      opacity: 1;
    }

    /* ── Stagger delays ── */
    .delay-100 { transition-delay: 0.1s; }
    .delay-200 { transition-delay: 0.2s; }
    .delay-300 { transition-delay: 0.3s; }
    .delay-400 { transition-delay: 0.4s; }
    .delay-500 { transition-delay: 0.5s; }

    /* ── Particle dots ── */
    .dot {
      position: absolute;
      border-radius: 50%;
      background: rgba(99,102,241,0.4);
      animation: dot-float linear infinite;
    }
    @keyframes dot-float {
      0% { transform: translateY(0) translateX(0); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
    }

    /* ── Scroll indicator ── */
    @keyframes scroll-bounce {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50% { transform: translateY(8px); opacity: 0.4; }
    }
    .scroll-bounce { animation: scroll-bounce 1.6s ease-in-out infinite; }

    /* ── Wave divider ── */
    .wave-top { margin-top: -2px; }

    /* ── Stats counter ── */
    @keyframes count-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── Big number accent ── */
    .stat-num {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 800;
      background: linear-gradient(135deg, #a5b4fc, #818cf8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ── NFC tap ring animation ── */
    @keyframes tap-ring {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(2.4); opacity: 0; }
    }
    .tap-ring {
      position: absolute;
      border: 2px solid rgba(165,180,252,0.6);
      border-radius: 50%;
      animation: tap-ring 1.8s ease-out infinite;
    }

    /* ── CTA button ── */
    .btn-primary {
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    .btn-primary:hover::before { transform: translateX(100%); }

    /* noise grain overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.4;
    }