/* 
  GainSkills & Techademy Partnership Landing Page Design System
  Premium B2B Enterprise SaaS Styling
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  --primary-blue: #E31E24;
  --secondary-blue: #C1121F;
  --light-blue: #FEE2E2;
  --extra-light-blue: #FEF2F2;
  --navy: #0F172A;
  --neutral-gray: #64748B;
  --bg-light: #F8FAFC;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Mona Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--navy);
  background-color: #ffffff;
  overflow-x: hidden;
}

/* Custom Scrollbar for premium SaaS feel */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-gray);
}

/* Reveal on Scroll styling (Hooked to float-effects.js) */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Float Animation for abstract graphics */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

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

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

/* Soft mesh background gradient circles */
.mesh-bg {
  position: relative;
  background-color: #ffffff;
  overflow-x: hidden;
}

.mesh-bg::before {
  content: '';
  position: absolute;
  top: 0;
  right: -5%;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 226, 226, 0.5) 0%, rgba(254, 242, 242, 0.1) 70%, transparent 100%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.mesh-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 226, 226, 0.6) 0%, rgba(254, 242, 242, 0.15) 75%, transparent 100%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

/* Text Gradients */
.text-gradient {
  background: linear-gradient(135deg, var(--navy) 30%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Interactive Mockup UI Styles */
.mockup-glow {
  box-shadow: 0 20px 40px -15px rgba(227, 30, 36, 0.08), 0 0 0 1px rgba(227, 30, 36, 0.04);
}

.mockup-stat-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mockup-stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px -10px rgba(227, 30, 36, 0.12);
}

/* Partner logos slide effect (if needed for marquee) */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Agenda Timeline Connecting Line styling */
.timeline-dot {
  position: relative;
  z-index: 2;
}

.timeline-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: var(--light-blue);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.6;
}

/* Floating Particle Blobs styles */
.blob {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

        label.error {
            display: block;
            margin-top: 0.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #dc2626;
        }
/* Form floating states and focus custom triggers */
.custom-input {
  transition: all 0.2s ease-in-out;
}

.custom-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1);
}

/* WhatsApp Widget styles */
.whatsapp-widget {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.whatsapp-widget:hover {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 10px 15px rgba(34, 197, 94, 0.3));
}

/* CSS Grid layout helper for clean B2B SaaS spacing */
.grid-editorial {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
}

@media (max-width: 991px) {
  .grid-editorial {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}