/* Homepage — AI Transformation Lab showcase (views/partials/home-ai-lab.php) */
.hl-lab{
  position:relative; overflow:hidden; padding:96px 0 88px;
  background:
    radial-gradient(640px 320px at 92% 8%, rgba(109,74,255,.10), transparent 70%),
    radial-gradient(560px 300px at 4% 92%, rgba(255,127,0,.10), transparent 70%),
    linear-gradient(180deg,#fff 0%, #fbf9ff 100%);
  border-top:1px solid #f0edf7;
}
.hl-head{ max-width:820px; margin:0 auto 48px; text-align:center; }
.hl-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:8px 16px; border-radius:50px;
  background:#f1edff; color:#5136d6; font:700 12px/1.2 'Plus Jakarta Sans','Plus Jakarta Sans Fallback',sans-serif;
  letter-spacing:.8px; text-transform:uppercase;
}
.hl-title{
  margin:0; color:#14161a; font:800 44px/1.12 'Plus Jakarta Sans','Plus Jakarta Sans Fallback',sans-serif; letter-spacing:-1px;
}
.hl-title span{
  display:block; background:linear-gradient(90deg,#ff7f00,#ff4f1f 50%,#6d4aff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hl-text{ margin:20px auto 0; max-width:700px; color:#5d6575; font:400 17px/1.75 'Inter','Inter Fallback',sans-serif; }

.hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.hl-card{
  position:relative; display:flex; flex-direction:column; gap:12px; height:100%; padding:28px 24px 24px;
  background:#fff; border:1px solid #ebe7f6; border-radius:22px; color:#14161a; text-decoration:none;
  box-shadow:0 18px 36px -28px rgba(20,22,26,.35);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hl-card::after{
  content:''; position:absolute; inset:-1px; border-radius:22px; padding:1.5px; pointer-events:none; opacity:0;
  background:linear-gradient(135deg,#ff7f00,#6d4aff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .3s ease;
}
.hl-card:hover, .hl-card:focus-visible{ transform:translateY(-6px); box-shadow:0 30px 50px -28px rgba(109,74,255,.45); border-color:transparent; color:#14161a; text-decoration:none; }
.hl-card:hover::after, .hl-card:focus-visible::after{ opacity:1; }
.hl-card:focus-visible{ outline:3px solid #ff7f00; outline-offset:3px; }
.hl-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hl-icon{
  width:54px; height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:16px;
  background:linear-gradient(135deg,#ff7f00,#ff5a1f 55%,#6d4aff); color:#fff; font-size:21px;
  box-shadow:0 14px 24px -14px rgba(255,90,31,.8);
}
.hl-status{
  padding:5px 10px; border-radius:50px; background:#fff4e5; border:1px dashed #f0b679; color:#8f4500;
  font:700 11px/1.3 'Inter','Inter Fallback',sans-serif; text-align:right;
}
.hl-card-title{ display:block; margin-top:6px; font:800 19px/1.3 'Plus Jakarta Sans','Plus Jakarta Sans Fallback',sans-serif; }
.hl-card-text{ display:block; flex-grow:1; color:#5d6575; font:400 14.5px/1.65 'Inter','Inter Fallback',sans-serif; }
.hl-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; color:#d96500; font:700 14px/1.2 'Inter','Inter Fallback',sans-serif; }
.hl-cta i{ transition:transform .25s ease; }
.hl-card:hover .hl-cta i{ transform:translateX(5px); }
.hl-note{ margin:34px 0 0; text-align:center; color:#5d6575; font:400 14px/1.6 'Inter','Inter Fallback',sans-serif; }
.hl-note i{ color:#6d4aff; margin-right:4px; }
.hl-note a{ color:#d96500; font-weight:700; text-decoration:underline; }

@media (max-width:1100px){ .hl-grid{ grid-template-columns:repeat(2,1fr); } .hl-title{ font-size:38px; } }
@media (max-width:640px){
  .hl-lab{ padding:64px 0 56px; }
  .hl-head{ margin-bottom:32px; }
  .hl-title{ font-size:29px; letter-spacing:-.5px; }
  .hl-text{ font-size:15.5px; }
  .hl-grid{ grid-template-columns:1fr; gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  .hl-card, .hl-card::after, .hl-cta i{ transition:none; }
  .hl-card:hover, .hl-card:focus-visible{ transform:none; }
}