/* Slider fills viewport minus header dynamically */
.slider-area { flex: 0 0 auto; height: calc(100vh - var(--header-height)); position: relative; overflow: hidden; }

/* Smooth image transitions */
.slide-img { transition: transform 0.8s ease, opacity 0.8s ease; }

/* Rectangular numeric dot */
.rect-dot { height: 4px; min-width: 48px; background: rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.9); cursor:pointer; }
.rect-dot.active { background: #ec1c24; color: black; }

.slider-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; padding: 0; background: none; border: none; opacity: 0; transition: opacity 0.3s; cursor: pointer; }
.slider-button svg { width: 2.5rem; height: 2.5rem; color: white; }
.slider-area:hover .slider-button { opacity: 1; }

/* Small responsive adjustments */
@media (min-width: 768px) {
  .rect-dot { height: 3px; min-width: 64px; }
}

/* Wrapper for particles */
.particle-container {
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
  z-index: 20; 
}

/* UPDATED PARTICLE STYLE */
.lens-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(100, 200, 255, 0.9) 30%, 
    rgba(0, 100, 255, 0) 70%
  );
  box-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
  mix-blend-mode: screen; 
  pointer-events: none;
  will-change: transform, opacity;
}

.text-with-symbol {
  font-size: 4.5rem;
}

.stat-item > svg { height: 120px; }


#core { height: 100vh; height: 100svh; background: #f3f7fb; overflow: hidden; position: relative; }
#cards { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.card { position: absolute; border-radius: 1rem; color: white; padding: 1rem; box-shadow: 0 10px 20px rgba(0,0,0,0.15); display: flex; align-items: flex-end; overflow: hidden; opacity: 1; 
  /* --- ADD THESE LINES FOR SAFARI --- */
  -webkit-backface-visibility: hidden; /* Fixes flickering */
  backface-visibility: hidden;
  transform: translateZ(0);            /* Force GPU acceleration */
  will-change: transform, height;      /* Tell browser these will animate */
  /* ---------------------------------- */
}
.card .svg-wrap {
  width: 65%;     /* SVG scales with card size */
  height: auto;
}
.card svg {
  width: 100%;
  height: auto;
}

.services-list > li svg { width: 32px; transition: all 0.3s ease; }
.gear-rotate {
  transition: transform 0.6s ease;
}
.service-card:hover .gear-rotate {
  animation: spinGear 4s linear infinite;
}
@keyframes spinGear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.service-card:hover h3 {
  filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.3));
}
/* ---------------------------------------------------- */
/* SERVICE LIST EXPANSION LOGIC                         */
/* ---------------------------------------------------- */

/* 1. Default State: Collapsed */
.level-2-info {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0.6;
}

/* 2. Hover State: Expanded */
/* When hovering the LI (.group), expand the info div */
.services-list > li:hover .level-2-info,
.services-list > li.active .level-2-info {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 0.5rem; /* Add breathing room when open */
}

/* 3. Highlight the SVG/Text on hover */
.services-list > li:hover svg,
.services-list > li.active svg {
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.5));
}