/* W3Hints Animated Cards — IBM-inspired four-card layout */
.whac-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.whac-card{
  --whac-border:#c6c6c6;
  --whac-accent:#0f62fe;
  --whac-speed:2.2s;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:16px;
  border:1px solid var(--whac-border);
  border-radius:4px;
  background:#fff;
  box-sizing:border-box;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease, border-color .2s ease;
}
.whac-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(from 0deg, transparent 0deg 280deg, var(--whac-accent) 310deg, #78a9ff 330deg, transparent 360deg);
  opacity:0;
  animation:whac-border-run var(--whac-speed) linear infinite;
  transition:opacity .18s ease;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.whac-card:hover::before,.whac-card:focus-within::before{opacity:1}
.whac-card:hover,.whac-card:focus-within{
  border-color:var(--whac-accent);
  box-shadow:0 4px 18px rgba(15,98,254,.10);
}
@keyframes whac-border-run{to{transform:rotate(360deg)}}
.whac-card-main{display:flex;align-items:flex-start;gap:16px;flex:1}
.whac-image{
  flex:0 0 98px;
  width:98px;
  height:98px;
  overflow:hidden;
  background:#f4f4f4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.whac-image img{display:block;width:100%;height:100%;object-fit:cover}
.whac-image-placeholder{color:#8d8d8d;font-size:10px;letter-spacing:.08em}
.whac-copy{min-width:0;display:flex;flex-direction:column;gap:8px}
.whac-title{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.35;
  font-weight:400;
  color:#525252;
}
.whac-description{
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.35;
  color:#262626;
}
.whac-footer{margin-top:28px;padding-left:114px}
.whac-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  color:#0f62fe;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.35;
  text-decoration:none!important;
  transition:color .2s ease;
}
.whac-link:hover{color:#0043ce}
.whac-arrow{font-size:25px;line-height:1;transition:transform .2s ease}
.whac-link:hover .whac-arrow{transform:translateX(4px)}
.whac-link-static{cursor:default}
@media(max-width:1100px){
  .whac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .whac-grid{grid-template-columns:1fr}
  .whac-card-main{gap:12px}
  .whac-image{flex-basis:84px;width:84px;height:84px}
  .whac-footer{padding-left:96px}
}
@media(prefers-reduced-motion:reduce){
  .whac-card::before{animation:none}
  .whac-card,.whac-arrow{transition:none}
}