/* ==========================================================================
   NEW APPLICATIONS SECTION - Professional Card Grid Design
   ========================================================================== */
.applications-section-new {
  padding: 2rem 4rem;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
}

/* Architectural Building Wireframe Background - Darker Professional Style */
.applications-section-new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'%3E%3Cg fill='none' stroke='%234a5568' stroke-width='1' opacity='1'%3E%3C!-- Far left small building --%3E%3Crect x='-30' y='380' width='100' height='220' /%3E%3Cline x1='-30' y1='420' x2='70' y2='420' /%3E%3Cline x1='-30' y1='460' x2='70' y2='460' /%3E%3Cline x1='-30' y1='500' x2='70' y2='500' /%3E%3Cline x1='-30' y1='540' x2='70' y2='540' /%3E%3Cline x1='20' y1='380' x2='20' y2='600' /%3E%3C!-- Left tall building --%3E%3Crect x='90' y='120' width='160' height='480' /%3E%3Cline x1='90' y1='160' x2='250' y2='160' /%3E%3Cline x1='90' y1='200' x2='250' y2='200' /%3E%3Cline x1='90' y1='240' x2='250' y2='240' /%3E%3Cline x1='90' y1='280' x2='250' y2='280' /%3E%3Cline x1='90' y1='320' x2='250' y2='320' /%3E%3Cline x1='90' y1='360' x2='250' y2='360' /%3E%3Cline x1='90' y1='400' x2='250' y2='400' /%3E%3Cline x1='90' y1='440' x2='250' y2='440' /%3E%3Cline x1='90' y1='480' x2='250' y2='480' /%3E%3Cline x1='90' y1='520' x2='250' y2='520' /%3E%3Cline x1='90' y1='560' x2='250' y2='560' /%3E%3Cline x1='130' y1='120' x2='130' y2='600' /%3E%3Cline x1='170' y1='120' x2='170' y2='600' /%3E%3Cline x1='210' y1='120' x2='210' y2='600' /%3E%3C!-- Center-left medium building --%3E%3Crect x='280' y='250' width='140' height='350' /%3E%3Cline x1='280' y1='290' x2='420' y2='290' /%3E%3Cline x1='280' y1='330' x2='420' y2='330' /%3E%3Cline x1='280' y1='370' x2='420' y2='370' /%3E%3Cline x1='280' y1='410' x2='420' y2='410' /%3E%3Cline x1='280' y1='450' x2='420' y2='450' /%3E%3Cline x1='280' y1='490' x2='420' y2='490' /%3E%3Cline x1='280' y1='530' x2='420' y2='530' /%3E%3Cline x1='280' y1='570' x2='420' y2='570' /%3E%3Cline x1='315' y1='250' x2='315' y2='600' /%3E%3Cline x1='350' y1='250' x2='350' y2='600' /%3E%3Cline x1='385' y1='250' x2='385' y2='600' /%3E%3C!-- Center tall tower --%3E%3Crect x='450' y='80' width='120' height='520' /%3E%3Cline x1='450' y1='120' x2='570' y2='120' /%3E%3Cline x1='450' y1='160' x2='570' y2='160' /%3E%3Cline x1='450' y1='200' x2='570' y2='200' /%3E%3Cline x1='450' y1='240' x2='570' y2='240' /%3E%3Cline x1='450' y1='280' x2='570' y2='280' /%3E%3Cline x1='450' y1='320' x2='570' y2='320' /%3E%3Cline x1='450' y1='360' x2='570' y2='360' /%3E%3Cline x1='450' y1='400' x2='570' y2='400' /%3E%3Cline x1='450' y1='440' x2='570' y2='440' /%3E%3Cline x1='450' y1='480' x2='570' y2='480' /%3E%3Cline x1='450' y1='520' x2='570' y2='520' /%3E%3Cline x1='450' y1='560' x2='570' y2='560' /%3E%3Cline x1='490' y1='80' x2='490' y2='600' /%3E%3Cline x1='530' y1='80' x2='530' y2='600' /%3E%3C!-- Center-right building --%3E%3Crect x='600' y='200' width='150' height='400' /%3E%3Cline x1='600' y1='240' x2='750' y2='240' /%3E%3Cline x1='600' y1='280' x2='750' y2='280' /%3E%3Cline x1='600' y1='320' x2='750' y2='320' /%3E%3Cline x1='600' y1='360' x2='750' y2='360' /%3E%3Cline x1='600' y1='400' x2='750' y2='400' /%3E%3Cline x1='600' y1='440' x2='750' y2='440' /%3E%3Cline x1='600' y1='480' x2='750' y2='480' /%3E%3Cline x1='600' y1='520' x2='750' y2='520' /%3E%3Cline x1='600' y1='560' x2='750' y2='560' /%3E%3Cline x1='637' y1='200' x2='637' y2='600' /%3E%3Cline x1='675' y1='200' x2='675' y2='600' /%3E%3Cline x1='712' y1='200' x2='712' y2='600' /%3E%3C!-- Right tall building --%3E%3Crect x='780' y='150' width='140' height='450' /%3E%3Cline x1='780' y1='190' x2='920' y2='190' /%3E%3Cline x1='780' y1='230' x2='920' y2='230' /%3E%3Cline x1='780' y1='270' x2='920' y2='270' /%3E%3Cline x1='780' y1='310' x2='920' y2='310' /%3E%3Cline x1='780' y1='350' x2='920' y2='350' /%3E%3Cline x1='780' y1='390' x2='920' y2='390' /%3E%3Cline x1='780' y1='430' x2='920' y2='430' /%3E%3Cline x1='780' y1='470' x2='920' y2='470' /%3E%3Cline x1='780' y1='510' x2='920' y2='510' /%3E%3Cline x1='780' y1='550' x2='920' y2='550' /%3E%3Cline x1='815' y1='150' x2='815' y2='600' /%3E%3Cline x1='850' y1='150' x2='850' y2='600' /%3E%3Cline x1='885' y1='150' x2='885' y2='600' /%3E%3C!-- Far right medium building --%3E%3Crect x='950' y='280' width='130' height='320' /%3E%3Cline x1='950' y1='320' x2='1080' y2='320' /%3E%3Cline x1='950' y1='360' x2='1080' y2='360' /%3E%3Cline x1='950' y1='400' x2='1080' y2='400' /%3E%3Cline x1='950' y1='440' x2='1080' y2='440' /%3E%3Cline x1='950' y1='480' x2='1080' y2='480' /%3E%3Cline x1='950' y1='520' x2='1080' y2='520' /%3E%3Cline x1='950' y1='560' x2='1080' y2='560' /%3E%3Cline x1='993' y1='280' x2='993' y2='600' /%3E%3Cline x1='1036' y1='280' x2='1036' y2='600' /%3E%3C!-- Far right small building --%3E%3Crect x='1100' y='350' width='100' height='250' /%3E%3Cline x1='1100' y1='390' x2='1200' y2='390' /%3E%3Cline x1='1100' y1='430' x2='1200' y2='430' /%3E%3Cline x1='1100' y1='470' x2='1200' y2='470' /%3E%3Cline x1='1100' y1='510' x2='1200' y2='510' /%3E%3Cline x1='1100' y1='550' x2='1200' y2='550' /%3E%3Cline x1='1150' y1='350' x2='1150' y2='600' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
  opacity: 0.15;
  z-index: 0;
}

/* Subtle grid overlay */
.applications-section-new::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Section Header */
.applications-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.applications-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--kms-primary-dark, var(--navy));
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
}

.applications-underline {
  width: 60px;
  height: 3px;
  background: var(--kms-yellow, var(--accent));
  margin: 0 auto 1rem;
}

.applications-subtitle {
  font-size: 1rem;
  color: #5a5a5a;
  margin: 0;
  font-style: italic;
}

/* Applications Grid - 4 columns */
.applications-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* Application Card - 3D Clean White Design with SVG Background */
.app-card-new {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: visible;
  cursor: pointer;
  min-height: 180px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border: 1px solid #e8e8e8;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 4px 20px rgba(0, 0, 0, 0.03);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Architectural blueprint SVG pattern on cards */
.app-card-new::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%231a1a2e' stroke-width='1.2'%3E%3C!-- Corner building structure --%3E%3Crect x='120' y='60' width='75' height='135' /%3E%3Cline x1='120' y1='85' x2='195' y2='85' /%3E%3Cline x1='120' y1='110' x2='195' y2='110' /%3E%3Cline x1='120' y1='135' x2='195' y2='135' /%3E%3Cline x1='120' y1='160' x2='195' y2='160' /%3E%3Cline x1='120' y1='185' x2='195' y2='185' /%3E%3Cline x1='145' y1='60' x2='145' y2='195' /%3E%3Cline x1='170' y1='60' x2='170' y2='195' /%3E%3C!-- Smaller adjacent structure --%3E%3Crect x='85' y='120' width='30' height='75' /%3E%3Cline x1='85' y1='145' x2='115' y2='145' /%3E%3Cline x1='85' y1='170' x2='115' y2='170' /%3E%3Cline x1='100' y1='120' x2='100' y2='195' /%3E%3C!-- Diagonal support beams --%3E%3Cline x1='120' y1='60' x2='85' y2='120' stroke-dasharray='4,3' /%3E%3Cline x1='195' y1='60' x2='200' y2='40' stroke-dasharray='4,3' /%3E%3C!-- Construction crane hint --%3E%3Cline x1='60' y1='195' x2='60' y2='140' /%3E%3Cline x1='60' y1='140' x2='85' y2='140' /%3E%3Cline x1='60' y1='145' x2='50' y2='145' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 140px 140px;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 0;
}

/* 3D depth shadow layer */
.app-card-new::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0) 40%);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.app-card-new:hover::after {
  opacity: 0.6;
}

.app-card-new:hover::before {
  opacity: 0.08;
}

.app-card-new:hover {
  transform: translateY(-12px) rotateX(8deg);
  box-shadow:
    0 25px 50px rgba(26, 26, 46, 0.18),
    0 15px 30px rgba(26, 26, 46, 0.12),
    0 5px 15px rgba(26, 26, 46, 0.08);
  border-color: var(--kms-yellow, var(--accent));
  z-index: 10;
}

.app-card-inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 180px;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  border-radius: 12px;
  overflow: hidden;
}

/* Icon - Subtle background circle with 3D effect */
.app-icon-new {
  width: 70px;
  height: 70px;
  margin-bottom: 1rem;
  color: var(--kms-primary-dark, var(--navy));
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
  border-radius: 50%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.app-icon-new svg {
  width: 100%;
  height: 100%;
}

.app-card-new:hover .app-icon-new {
  width: 50px;
  height: 50px;
  padding: 10px;
  margin-bottom: 0.75rem;
  transform: translateZ(20px);
  background: linear-gradient(135deg, var(--kms-yellow, var(--accent)) 0%, #e6b800 100%);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.35);
}

/* Title */
.app-title-new {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kms-primary-dark, var(--navy));
  margin: 0;
  margin-bottom: 0;
  line-height: 1.3;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.app-title-new a {
  color: inherit;
  text-decoration: none;
}

.app-title-new a:hover {
  color: var(--kms-yellow, var(--accent));
  text-decoration: underline;
}

.app-link-new:focus-visible {
  outline: 2px solid var(--kms-yellow, var(--accent));
  outline-offset: 3px;
  border-radius: 6px;
}

/* Description - Hidden by default, shown on hover */
.app-desc-new {
  font-size: 0.82rem;
  color: #5a6270;
  margin: 0;
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.app-card-new:hover .app-title-new {
  margin-bottom: 0.5rem;
  transform: translateZ(15px);
}

.app-card-new:hover .app-desc-new {
  opacity: 1;
  max-height: 100px;
  margin-top: 0;
  transform: translateZ(10px);
}

/* Responsive Styles */
@media (max-width: 1199.98px) {
  .applications-grid-new {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }

  .app-card-inner {
    padding: 1.5rem 1rem;
    min-height: 160px;
  }

  .app-icon-new {
    width: 50px;
    height: 50px;
  }

  .app-title-new {
    font-size: 1rem;
  }
}

@media (max-width: 991.98px) {
  .applications-grid-new {
    grid-template-columns: repeat(3, 1fr);
  }

  .applications-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 767.98px) {
  .applications-section-new {
    padding: 3rem 0;
  }

  .applications-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .app-card-inner {
    padding: 1.25rem 1rem;
    min-height: 150px;
  }

  .app-icon-new {
    width: 45px;
    height: 45px;
    margin-bottom: 0.75rem;
  }

  .app-title-new {
    font-size: 0.95rem;
  }

  .app-desc-new {
    font-size: 0.8rem;
  }

  .applications-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .applications-grid-new {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .app-card-inner {
    padding: 1rem 0.75rem;
    min-height: 140px;
  }

  .app-icon-new {
    width: 40px;
    height: 40px;
  }

  .app-title-new {
    font-size: 0.85rem;
  }
}