/* PAGE 03 canonical visual matching: hero and approved icon groups only. */
.ai-hero{
  height:326px;
  background:#02060b;
}
.ai-art{
  background:
    linear-gradient(90deg,#02060b 0%,rgba(2,6,11,.98) 38%,rgba(10,3,24,.58) 55%,rgba(25,4,48,.06) 79%),
    radial-gradient(circle at 76% 48%,rgba(170,43,255,.20),transparent 34%),
    url('assets/ai-hub-hero.jpg') right center/auto 100% no-repeat;
}

.feature-icon,.kpi-icon,.learn-icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.feature-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  color:#c13cff;
  filter:drop-shadow(0 0 5px rgba(193,60,255,.55));
}
.feature-nav article:nth-child(2) .feature-icon{color:#db4cff}
.feature-nav article:nth-child(3) .feature-icon{color:#a84dff}
.feature-nav article:nth-child(4) .feature-icon{color:#e14dff}
.feature-nav article:nth-child(5) .feature-icon{color:#9e51ff}
.feature-nav article:nth-child(6) .feature-icon{color:#cf45ff}

.kpi-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
}
.kpi-strip article:nth-child(1) .kpi-icon{color:#42c9ff;filter:drop-shadow(0 0 5px rgba(66,201,255,.45))}
.kpi-strip article:nth-child(2) .kpi-icon{color:#bc44ff;filter:drop-shadow(0 0 5px rgba(188,68,255,.45))}
.kpi-strip article:nth-child(3) .kpi-icon{color:#76dcff;filter:drop-shadow(0 0 5px rgba(118,220,255,.45))}
.kpi-strip article:nth-child(4) .kpi-icon{color:#b7e72d;filter:drop-shadow(0 0 5px rgba(183,231,45,.42))}

.learn-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  color:#c548ff;
  box-shadow:0 0 12px rgba(197,72,255,.18),inset 0 0 10px rgba(197,72,255,.10);
}
.learn-icon svg{width:27px;height:27px}
.learning article:nth-child(2) .learn-icon{color:#58cfff}
.learning article:nth-child(3) .learn-icon{color:#cf4cff}
.learning article:nth-child(4) .learn-icon{color:#a875ff}
.learning article:nth-child(5) .learn-icon{color:#ec51bd}

@media(max-width:600px){
  .ai-art{
    background:
      linear-gradient(180deg,rgba(2,6,11,.04) 0%,rgba(2,6,11,.14) 35%,#02060b 53%),
      radial-gradient(circle at 70% 22%,rgba(170,43,255,.18),transparent 34%),
      url('assets/ai-hub-hero.jpg') center top/auto 310px no-repeat;
  }
  .feature-icon{width:31px;height:31px;flex-basis:31px}
  .kpi-icon{width:38px;height:38px;flex-basis:38px}
  .learn-icon{width:40px;height:40px;flex-basis:40px}
}