/* Branding Variables */
:root {
    --beckon-red: #ef4444;       /* Vibrant Red-500 */
    --beckon-charcoal: #000000;  /* Deep Slate-900 */
    --beckon-silver: #f8fafc;    /* Light Slate-50 */
    --beckon-grey: #64748b;      /* Medium Slate-500 */
    --accent-blue: #3b82f6;      /* Professional Blue */
}

/* Typography & Base */
body { 
    font-family: 'Outfit', sans-serif; 
    background-color: white; 
}

.tech-font { 
    font-family: 'Space Grotesk', sans-serif; 
}

/* Custom Utility Classes */
.bg-red-brand { background-color: var(--beckon-red); }
.text-red-brand { color: var(--beckon-red); }
.bg-charcoal { background-color: var(--beckon-charcoal); }

/* Decorative Elements */
.red-glow { 
    box-shadow: 0 0 40px -10px rgba(239, 68, 68, 0.2); 
}

.accent-red {
    color: var(--beckon-red);
}

/* Animations */
@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

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

/* clientele slide */

@layer utilities {
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }

  @keyframes marquee2 {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
  }

  .animate-marquee {
    animation: marquee 25s linear infinite;
  }

  .animate-marquee2 {
    animation: marquee2 25s linear infinite;
  }
}

/* Form Focus States */
.red-border-focus:focus { 
    border-color: var(--beckon-red); 
    outline: none;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); 
}

/* Add to your style.css */
.group:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

h2 {
    letter-spacing: -0.05em;
}