body { font-family: 'Manrope', sans-serif; color: #334155; background-color: #FFFFFF; overflow-x: hidden; }
  .bg-grid-pattern {
    background-size: 32px 32px;
    background-image: 
      linear-gradient(to right, rgba(13, 43, 78, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(13, 43, 78, 0.04) 1px, transparent 1px);
  }
  .btn-gradient {
    background: linear-gradient(135deg, #1E88E5 0%, #0D6ED8 100%);
    transition: all 0.25s ease;
  }
  .btn-gradient:hover { box-shadow: 0 8px 20px rgba(30, 136, 229, 0.35); transform: translateY(-2px); }
  @keyframes floatMockup { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } }
  .floating-mockup { animation: floatMockup 5.5s ease-in-out infinite; will-change: transform; }
  @keyframes pulseTeal { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 196, 182, 0.4); } 50% { box-shadow: 0 0 0 7px rgba(46, 196, 182, 0); } }
  .pulse-glow-teal { animation: pulseTeal 2.4s infinite; }
  @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2); } 50% { box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.3); } }
  .deal-badge-glow { animation: badgeGlow 3s infinite ease-in-out; }
  .interactive-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-image 0.15s ease; }
  .interactive-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -6px rgba(13, 43, 78, 0.12); }
  @keyframes dotBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-3.5px); } }
  .typing-dot { display: inline-block; width: 3.5px; height: 3.5px; border-radius: 50%; background-color: currentColor; animation: dotBounce 1.2s infinite ease-in-out both; }
  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
  .typing-dot:nth-child(2) { animation-delay: -0.16s; }

  /* Infinite Smooth Marquee Styles */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 26s linear infinite;
  }
  .marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
  }
  .marquee-mask {
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }
  /* Kinetic typography (Hero h1) */
  @keyframes kineticReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .kinetic-word { display: inline-block; opacity: 0; animation: kineticReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; will-change: transform, opacity; }

  /* Scroll-driven parallax for decorative blur blobs */
  .parallax-blob { will-change: transform; }

  /* Cursor spotlight on interactive cards — a background-image layer, so it can
     never sit above a card's own content or interfere with absolutely
     positioned decorative elements inside flagship cards. */
  .interactive-card {
    --x: 50%;
    --y: 50%;
    --spotlight: rgba(30, 136, 229, 0);
    background-image: radial-gradient(360px circle at var(--x) var(--y), var(--spotlight), transparent 70%);
    background-repeat: no-repeat;
  }
  .interactive-card:hover { --spotlight: rgba(30, 136, 229, 0.10); }

  @media (prefers-reduced-motion: reduce) {
    .floating-mockup, .pulse-glow-teal, .deal-badge-glow, .typing-dot { animation: none !important; }
    .marquee-track { animation: none !important; transform: none !important; }
    .interactive-card:hover { transform: none !important; }
    .kinetic-word { opacity: 1 !important; animation: none !important; transform: none !important; }
    .parallax-blob { transform: none !important; }
    .interactive-card:hover { --spotlight: rgba(30, 136, 229, 0) !important; }
  }