/* V13 — Software, AI and interaction polish */

.joy-tool-logo {
  display:inline-block;
  width:21px;
  height:21px;
  object-fit:contain;
  vertical-align:middle;
  flex-shrink:0;
  border-radius:4px;
}

.joy-tool-enhanced {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:
    border-color .24s ease,
    background-color .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}

.joy-tool-enhanced:hover,
.joy-ai-tool:hover {
  transform:translateY(-3px);
  border-color:rgba(255,150,25,.65) !important;
  box-shadow:0 6px 22px rgba(255,150,25,.12);
}

.joy-ai-section {
  padding:65px 22px 82px;
  background:transparent;
  color:#fff;
}

.joy-ai-inner {
  max-width:1080px;
  margin:0 auto;
  text-align:center;
}

.joy-ai-heading {
  font-size:clamp(28px,4vw,43px);
  font-weight:800;
  letter-spacing:-1px;
  margin:0 0 12px;
}

.joy-ai-heading span {
  color:#ff9619;
}

.joy-ai-description {
  color:#aaa;
  margin:0 auto 30px;
  max-width:560px;
  line-height:1.7;
  font-size:14px;
}

.joy-ai-grid {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:13px;
}

.joy-ai-tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:51px;
  padding:12px 17px;
  background:#252525;
  border:1px solid #454545;
  border-radius:11px;
  color:#f7f7f7;
  font:600 14px/1.2 inherit;
  text-decoration:none;
  transition:
    transform .26s cubic-bezier(.22,1,.36,1),
    border-color .26s ease,
    box-shadow .26s ease;
}

.joy-ai-tool .joy-tool-logo {
  width:24px;
  height:24px;
}

.joy-ripple-host {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.joy-click-ripple {
  position:absolute;
  left:0;
  top:0;
  width:26px;
  height:26px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(255,150,25,.38) 0%,
    rgba(255,150,25,.15) 42%,
    transparent 74%
  );
  transform:translate(-50%,-50%) scale(0);
  animation:joy-ripple-anim 560ms ease-out forwards;
  z-index:3;
}

@keyframes joy-ripple-anim {
  to {
    opacity:0;
    transform:translate(-50%,-50%) scale(9);
  }
}

@media(max-width:650px) {
  .joy-ai-section {
    padding:46px 16px 60px;
  }
  .joy-ai-grid {
    gap:9px;
  }
  .joy-ai-tool {
    min-height:46px;
    padding:10px 12px;
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .joy-click-ripple { display:none !important; }
  .joy-ai-tool,.joy-tool-enhanced {
    transition:none !important;
    transform:none !important;
  }
}