/* platform.css - page-specific styles for platform.html */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0A1224;
}

::-webkit-scrollbar-thumb {
  background: #394156;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1E5FFF;
}

/* Stat card badges */
.badge-green {
  color: #0BDA62;
  background-color: rgba(11, 218, 98, 0.10);
}

.badge-red {
  color: #FA6538;
  background-color: rgba(250, 101, 56, 0.10);
}

/* Platform hero - responsive background images */
.platform-hero {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/hero/platform-2560.webp');
}

@media (max-width: 1536px) {
  .platform-hero {
    background-image: url('../images/hero/platform-1920.webp');
  }
}

@media (max-width: 1024px) {
  .platform-hero {
    background-image: url('../images/hero/platform-1280.webp');
  }
}

/* Built to Last - keep hover lift but remove hover glow (01-04) */
#built-to-last .card-glow:hover {
  box-shadow: none !important;
  border-color: rgba(57, 65, 86, 0.40) !important;
}

/* Built to Last - preserve border colour only (no glow) */
.built-no-border.card-glow:hover {
  border-color: rgba(57, 65, 86, 0.40) !important;
}

/* What We Build - keep icon blue on hover, suppress glow */
.card-glow.built-no-border:hover .icon-glow {
  color: #1E5FFF !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Headings - subtle hover emphasis (used where applied in markup) */
.heading-glow:hover h3,
.heading-glow:hover .glow-heading {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.60);
}

/* How We Deliver It - aqua by default, white on hover (no glow) */
.deliver-card h3.deliver-heading,
.deliver-card .deliver-bullet,
.deliver-card .deliver-result-text {
  color: #2EE6D6 !important;
  transition: color 200ms ease;
}

/* Results label stays white */
.deliver-card .deliver-result-label {
  color: #FFFFFF !important;
  transition: none;
  text-shadow: none !important;
}

.deliver-card:hover h3.deliver-heading,
.deliver-card:hover .deliver-bullet,
.deliver-card:hover .deliver-result-text {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

.deliver-card {
  transition: background-color 200ms ease;
}

.deliver-card:hover {
  background-color: rgba(0, 0, 0, 0.22);
}

/* Works With What You Have - hover glow + lift */
.integration-card {
  transition:
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.integration-card:hover {
  background-color: rgba(22, 30, 46, 0.85) !important;
  border-color: rgba(30, 95, 255, 0.28) !important;
  box-shadow: 0 0 22px rgba(30, 95, 255, 0.14);
  transform: translateY(-2px);
}

/* Works With What You Have - subtle floating icon animation */
.integration-card .material-symbols-outlined {
  display: inline-block;
  will-change: transform;
  animation: integrationIconFloat 3.6s ease-in-out infinite;
}

.integration-card:nth-child(1) .material-symbols-outlined { animation-delay: 0s; }
.integration-card:nth-child(2) .material-symbols-outlined { animation-delay: 0.35s; }
.integration-card:nth-child(3) .material-symbols-outlined { animation-delay: 0.7s; }
.integration-card:nth-child(4) .material-symbols-outlined { animation-delay: 1.05s; }

@keyframes integrationIconFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Hero secondary button */
.btn-hero-outline {
  border: 1.5px solid #394156;
  background: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.btn-hero-outline:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.50);
}

/* Closing CTA button */
.btn-cta-scale {
  transition: transform 200ms ease;
}

.btn-cta-scale:hover {
  transform: scale(1.05);
}

/* Where to Begin button */
.btn-ops-audit {
  background-color: #1E5FFF;
  transition: background-color 300ms ease, transform 300ms ease;
}

.btn-ops-audit:hover {
  background-color: #4AA3FF;
  transform: scale(1.03);
}

/* Eyebrow - consistent visual height across sections */
.eyebrow {
  display: inline-block;
  line-height: 1;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .integration-card .material-symbols-outlined {
    animation: none !important;
  }
}