/* ===== Homepage hero + page-level styles ported from designs/home-option-a.html ===== */
/* --- block 1 (head <style>: hero-immersive dark bg, float-icons, particles, hero-image-wrap, bg-dark/orange sections) --- */
body {
      font-family: 'Inter', sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Space Grotesk', sans-serif;
    }

    /* ===== HERO — Full-width immersive with background image ===== */
    .hero-immersive {
      position: relative;
      overflow: hidden;
      min-height: 90vh;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* === HERO: PURE BLACK BACKGROUND === */
    .hero-immersive {
      background-color: #000000 !important;
    }
    /* Override the global .hero-fullwidth::before tinted overlay with full black */
    .hero-immersive::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #000000;
      z-index: 0;
      pointer-events: none;
    }
    /* Disable the orange grid overlay — we use .hero-cyber-bg for that instead */
    .hero-immersive::after { display: none !important; }
    /* Also nullify the orange-tinted .hero-video-overlay so background stays black */
    .hero-immersive .hero-video-overlay {
      background: transparent !important;
    }

    /* Floating animated icons */
    @keyframes floatUp {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
      50% { transform: translateY(-20px) rotate(5deg); opacity: 0.2; }
    }
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.08; }
      50% { transform: translateY(-10px) rotate(-3deg) scale(1.05); opacity: 0.15; }
    }
    @keyframes particleDrift {
      0% { transform: translateY(0) translateX(0); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.3; }
      100% { transform: translateY(-100px) translateX(30px); opacity: 0; }
    }
    .float-icon {
      position: absolute;
      color: rgba(254,94,4,0.12);
      pointer-events: none;
      z-index: 3;
    }
    .float-icon:nth-child(1) { top: 15%; right: 8%; animation: floatUp 8s ease-in-out infinite; }
    .float-icon:nth-child(2) { top: 60%; right: 15%; animation: floatSlow 10s ease-in-out infinite 1s; }
    .float-icon:nth-child(3) { top: 25%; left: 5%; animation: floatUp 9s ease-in-out infinite 2s; }
    .float-icon:nth-child(4) { bottom: 20%; left: 10%; animation: floatSlow 7s ease-in-out infinite 0.5s; }
    .float-icon:nth-child(5) { top: 40%; right: 35%; animation: floatUp 11s ease-in-out infinite 3s; }
    .float-icon:nth-child(6) { bottom: 35%; right: 5%; animation: floatSlow 8s ease-in-out infinite 1.5s; }

    .hero-particle {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(254,94,4,0.4);
      pointer-events: none;
      z-index: 3;
    }
    .hero-particle:nth-child(1) { top: 30%; left: 20%; animation: particleDrift 6s ease-in-out infinite; }
    .hero-particle:nth-child(2) { top: 50%; left: 60%; animation: particleDrift 8s ease-in-out infinite 2s; }
    .hero-particle:nth-child(3) { top: 70%; left: 40%; animation: particleDrift 7s ease-in-out infinite 4s; }
    .hero-particle:nth-child(4) { top: 20%; left: 75%; animation: particleDrift 9s ease-in-out infinite 1s; }
    .hero-particle:nth-child(5) { top: 80%; left: 85%; animation: particleDrift 5s ease-in-out infinite 3s; }

    /* Hero image glow effect */
    .hero-image-wrap {
      position: relative;
    }
    .hero-image-wrap::before {
      content: '';
      position: absolute;
      inset: -20px;
      border-radius: 24px;
      background: radial-gradient(circle, rgba(254,94,4,0.15) 0%, transparent 70%);
      filter: blur(20px);
      z-index: 0;
    }
    .hero-image-wrap img {
      position: relative;
      z-index: 1;
    }

    /* ===== Solutions on Orange ===== */
    .bg-orange-section {
      background: #FE5E04;
      background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .sol-card-dark {
      background: #1E1E1E;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 2rem 1.5rem;
      text-align: center;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      height: 100%;
    }
    .sol-card-dark:hover {
      border-color: rgba(255,255,255,0.25);
      background: #252525;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      transform: translateY(-4px);
    }
    .sol-card-dark .card-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(254,94,4,0.2), rgba(254,94,4,0.08));
      border: 2px solid rgba(254,94,4,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .sol-card-dark:hover .card-icon {
      background: linear-gradient(135deg, rgba(254,94,4,0.35), rgba(254,94,4,0.15));
      border-color: rgba(254,94,4,0.6);
      box-shadow: 0 0 20px rgba(254,94,4,0.3);
    }
    .sol-card-dark .card-icon i,
    .sol-card-dark .card-icon svg { color: #FE5E04 !important; stroke: #FE5E04 !important; }
    .sol-card-dark h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: white;
      line-height: 1.3;
      flex: 1;
      display: flex;
      align-items: center;
    }
    .sol-card-dark .card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: #FE5E04;
      border: 1px solid rgba(254,94,4,0.4);
      border-radius: 6px;
      padding: 0.35rem 0.85rem;
      transition: all 0.2s ease;
      margin-top: auto;
    }
    .sol-card-dark:hover .card-link {
      background: #FE5E04;
      color: white;
      border-color: #FE5E04;
    }

    /* ===== Services on Dark ===== */
    .bg-dark-section {
      background-color: #1E1E1E;
      background-image:
        linear-gradient(rgba(254,94,4,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(254,94,4,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .svc-card-orange {
      background: #FE5E04;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: 2rem 1.5rem;
      text-align: center;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      height: 100%;
    }
    .svc-card-orange:hover {
      background: #e55504;
      border-color: rgba(255,255,255,0.3);
      box-shadow: 0 8px 32px rgba(254,94,4,0.4);
      transform: translateY(-4px);
    }
    .svc-card-orange .card-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      border: 2px solid rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .svc-card-orange:hover .card-icon {
      background: rgba(255,255,255,0.3);
      border-color: rgba(255,255,255,0.5);
    }
    .svc-card-orange .card-icon i,
    .svc-card-orange .card-icon svg { color: white !important; stroke: white !important; }
    .svc-card-orange h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: white;
      line-height: 1.3;
      flex: 1;
      display: flex;
      align-items: center;
    }
    .svc-card-orange .card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: white;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 6px;
      padding: 0.35rem 0.85rem;
      transition: all 0.2s ease;
      margin-top: auto;
    }
    .svc-card-orange:hover .card-link {
      background: white;
      color: #FE5E04;
      border-color: white;
    }

    /* Differentiator card (Why O2Cyber) */
    .diff-card {
      transition: all 0.3s ease;
    }
    .diff-card:hover {
      background: rgba(254, 94, 4, 0.02);
    }

    /* Subtle pulse for CTA */
    @keyframes subtlePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(254, 94, 4, 0.4); }
      50% { box-shadow: 0 0 0 8px rgba(254, 94, 4, 0); }
    }
    .cta-pulse {
      animation: subtlePulse 3s ease-in-out infinite;
    }

    /* Mobile menu transition */
    #mobile-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    #mobile-menu.open {
      max-height: 600px;
    }

/* --- block 3 (footer <style>: section-specific overrides) --- */
/* Sequential ORANGE-FILL animation: Assess -> Deploy -> Monitor -> repeat
             Each card holds the orange state for ~1.4s, then transitions out as the
             next card lights up. 6s total loop, 2s phase per card. */
          @keyframes approachOrangeFill {
            0%, 100% {
              background: #ffffff;
              border-color: rgba(0,0,0,0.06);
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              transform: translateY(0) scale(1);
            }
            5%, 28% {
              background: linear-gradient(135deg, #FE5E04 0%, #FF8A3D 100%);
              border-color: #FE5E04;
              box-shadow:
                0 24px 60px -10px rgba(254,94,4,0.55),
                0 0 0 6px rgba(254,94,4,0.15),
                inset 0 1px 0 rgba(255,255,255,0.3);
              transform: translateY(-10px) scale(1.04);
            }
            33% {
              background: #ffffff;
              border-color: rgba(0,0,0,0.06);
              box-shadow: 0 1px 2px rgba(0,0,0,0.04);
              transform: translateY(0) scale(1);
            }
          }

          /* Inner elements that flip to white-on-orange while the card is "active" */
          @keyframes approachIconFlip {
            0%, 100% {
              background: rgba(254,94,4,0.1);
              border-color: rgba(254,94,4,0.2);
            }
            5%, 28% {
              background: rgba(255,255,255,0.95);
              border-color: rgba(255,255,255,0.6);
            }
            33% {
              background: rgba(254,94,4,0.1);
              border-color: rgba(254,94,4,0.2);
            }
          }
          @keyframes approachIconColorFlip {
            0%, 100% { color: #FE5E04; }
            5%, 28% { color: #FE5E04; }
            33% { color: #FE5E04; }
          }
          @keyframes approachTitleFlip {
            0%, 100% { color: #1E1E1E; }
            5%, 28% { color: #ffffff; }
            33% { color: #1E1E1E; }
          }
          @keyframes approachDescFlip {
            0%, 100% { color: rgba(107,114,128,1); }
            5%, 28% { color: rgba(255,255,255,0.95); }
            33% { color: rgba(107,114,128,1); }
          }
          @keyframes approachNumberFlip {
            0%, 100% {
              background: #FE5E04;
              color: #ffffff;
              box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
              transform: scale(1);
            }
            5%, 28% {
              background: #ffffff;
              color: #FE5E04;
              box-shadow: 0 0 0 4px rgba(255,255,255,0.4), 0 8px 24px rgba(0,0,0,0.25);
              transform: scale(1.15);
            }
            33% {
              background: #FE5E04;
              color: #ffffff;
              box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
              transform: scale(1);
            }
          }

          .approach-card {
            border: 2px solid rgba(0,0,0,0.06);
            transition: none;
            animation: approachOrangeFill 6s ease-in-out infinite;
          }
          /* LEFT -> MIDDLE -> RIGHT sequential, 2s apart on a 6s loop */
          .approach-card-left   { animation-delay: 0s; }
          .approach-card-middle { animation-delay: 2s; }
          .approach-card-right  { animation-delay: 4s; }

          .approach-card .approach-icon-ring {
            animation: approachIconFlip 6s ease-in-out infinite;
          }
          .approach-card-left   .approach-icon-ring { animation-delay: 0s; }
          .approach-card-middle .approach-icon-ring { animation-delay: 2s; }
          .approach-card-right  .approach-icon-ring { animation-delay: 4s; }

          .approach-card h3 {
            animation: approachTitleFlip 6s ease-in-out infinite;
          }
          .approach-card-left   h3 { animation-delay: 0s; }
          .approach-card-middle h3 { animation-delay: 2s; }
          .approach-card-right  h3 { animation-delay: 4s; }

          .approach-card p {
            animation: approachDescFlip 6s ease-in-out infinite;
          }
          .approach-card-left   p { animation-delay: 0s; }
          .approach-card-middle p { animation-delay: 2s; }
          .approach-card-right  p { animation-delay: 4s; }

          .approach-card .approach-number {
            animation: approachNumberFlip 6s ease-in-out infinite;
          }
          .approach-card-left   .approach-number { animation-delay: 0s; }
          .approach-card-middle .approach-number { animation-delay: 2s; }
          .approach-card-right  .approach-number { animation-delay: 4s; }