* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --gold: #FFB800;
      --gold-light: #FFD700;
      --gold-dark: #CC9200;
      --purple: #8B5CF6;
      --purple-dark: #6D28D9;
      --cyan: #06B6D4;
      --pink: #EC4899;
      --navy: #0F172A;
      --navy-light: #1E293B;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: #000000;
      color: #ffffff;
      overflow-x: hidden;
      line-height: 1.6;
    }

    .serif {
      font-family: 'Crimson Pro', serif;
    }

    /* Animated gradient mesh background */
    .mesh-gradient {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background:
        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 184, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        linear-gradient(to bottom, #000000, #0F172A);
      animation: meshMove 20s ease infinite;
      background-size: 200% 200%;
    }

    @keyframes meshMove {
      0%, 100% { background-position: 0% 0%; }
      25% { background-position: 100% 0%; }
      50% { background-position: 100% 100%; }
      75% { background-position: 0% 100%; }
    }

    /* Glassmorphism */
    .glass {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .glass-strong {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 3D Card Effect */
    .card-3d {
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
    }

    .card-3d:hover {
      transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
    }

    .card-3d::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, transparent 50%);
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.6s;
    }

    .card-3d:hover::before {
      opacity: 1;
    }

    /* Glow effects */
    .glow-gold {
      box-shadow:
        0 0 20px rgba(255, 184, 0, 0.2),
        0 0 60px rgba(255, 184, 0, 0.1);
    }

    .text-glow {
      text-shadow:
        0 0 30px rgba(255, 184, 0, 0.4),
        0 0 60px rgba(255, 184, 0, 0.2);
    }

    /* Smooth animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(60px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .animate-in {
      animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
      opacity: 0;
    }

    .scale-in {
      animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      opacity: 0;
    }

    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    .delay-6 { animation-delay: 0.6s; }

    /* Floating animation */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

    .float {
      animation: float 6s ease-in-out infinite;
    }

    /* Gradient text */
    .gradient-text {
      background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .gradient-text-rainbow {
      background: linear-gradient(90deg, var(--gold), var(--purple), var(--cyan), var(--pink), var(--gold));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: rainbowShift 3s linear infinite;
    }

    @keyframes rainbowShift {
      0% { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    /* Button styles */
    .btn-primary {
      position: relative;
      padding: 18px 48px;
      font-weight: 700;
      font-size: 16px;
      color: #000;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border: none;
      border-radius: 16px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 10px 40px rgba(255, 184, 0, 0.3);
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: left 0.6s;
    }

    .btn-primary:hover::before {
      left: 100%;
    }

    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 20px 60px rgba(255, 184, 0, 0.4);
    }

    .btn-secondary {
      padding: 18px 48px;
      font-weight: 600;
      font-size: 16px;
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.4s;
      backdrop-filter: blur(10px);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: var(--gold);
      transform: translateY(-2px);
    }

    /* Input styles */
    input[type="email"] {
      padding: 20px 24px;
      font-size: 16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      color: white;
      transition: all 0.3s;
      backdrop-filter: blur(10px);
    }

    input[type="email"]::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    input[type="email"]:focus {
      outline: none;
      border-color: var(--gold);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.1);
    }

    /* Bento grid */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }

    .bento-item-large {
      grid-column: span 8;
    }

    .bento-item-small {
      grid-column: span 4;
    }

    @media (max-width: 768px) {
      .bento-item-large,
      .bento-item-small {
        grid-column: span 12;
      }
    }

    /* Orbit animation for decorative elements */
    @keyframes orbit {
      0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
      100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
    }

    /* Particle effect */
    .particles {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, var(--gold), transparent);
      border-radius: 50%;
      opacity: 0.4;
    }

    /* Shimmer effect */
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }

    .shimmer {
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      background-size: 200% auto;
      animation: shimmer 3s linear infinite;
    }