/* Arsenal Hextech. Append after landing.css; all selectors are section-scoped. */
.hx-arsenal {
  --ars-cyan: #6ce7f2;
  --ars-gold: #dfba71;
  --ars-ink: #f1f5fb;
  --ars-muted: #adbbcd;
  position: relative;
  isolation: isolate;
}
.hx-arsenal::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 6% 42%, rgba(28, 164, 189, .055), transparent 46%), radial-gradient(ellipse at 97% 66%, rgba(195, 150, 62, .045), transparent 42%);
}
.hx-arsenal__header { margin-bottom: 42px; }
.hx-arsenal .hx-arsenal__intro { max-width: 710px; margin: 22px auto 0; }
.hx-arsenal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.hx-arsenal-card {
  --ars-accent: var(--ars-cyan);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 27px 0;
  overflow: hidden;
  color: var(--ars-ink);
  background: linear-gradient(145deg, rgba(16, 29, 40, .91), rgba(8, 14, 22, .96) 65%);
  border: 1px solid rgba(145, 181, 203, .16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(211, 233, 244, .035), 0 10px 30px rgba(0, 0, 0, .11);
  transition: opacity .55s ease, transform .55s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.hx-arsenal-card--draft,
.hx-arsenal-card--review,
.hx-arsenal-card--memory { --ars-accent: var(--ars-gold); }
.hx-arsenal-card::before {
  position: absolute;
  top: -1px;
  right: 27px;
  left: 27px;
  height: 1px;
  content: "";
  opacity: .52;
  background: linear-gradient(90deg, transparent, var(--ars-accent), transparent);
  transition: opacity .3s ease;
}
.hx-arsenal-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 105px;
  content: "";
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(131, 180, 195, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(131, 180, 195, .22) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(225deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
}
.hx-arsenal-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.hx-arsenal-card__icon {
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 62px;
  color: var(--ars-accent);
  transition: transform .35s ease, filter .35s ease;
}
.hx-arsenal-card__icon svg { display: block; width: 58px; height: 58px; overflow: visible; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.hx-arsenal-card .hx-arsenal-icon__frame { opacity: .4; }
.hx-arsenal-card .hx-arsenal-icon__detail { opacity: .65; }
.hx-arsenal-card .hx-arsenal-icon__accent { color: var(--ars-gold); stroke: currentColor; fill: rgba(222, 184, 109, .10); }
.hx-arsenal-card--draft .hx-arsenal-icon__accent,
.hx-arsenal-card--review .hx-arsenal-icon__accent,
.hx-arsenal-card--memory .hx-arsenal-icon__accent { color: var(--ars-cyan); fill: rgba(108, 231, 242, .08); }
.hx-arsenal-card .hx-arsenal-icon__node { fill: var(--ars-accent); stroke: none; }
.hx-arsenal-card__index {
  padding-top: 9px;
  color: #a5b3c3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: .065em;
  text-align: right;
}
.hx-arsenal-card__index span { display: inline-block; margin: 0 4px; color: var(--ars-accent); opacity: .7; }
.hx-arsenal-card__title { margin: 0 0 13px; color: var(--ars-ink); font-family: inherit; font-size: clamp(21px, 1.8vw, 25px); font-weight: 650; line-height: 1.22; letter-spacing: -.025em; }
.hx-arsenal-card__text { margin: 0 0 25px; color: var(--ars-muted); font-size: 14px; font-weight: 400; line-height: 1.75; text-wrap: pretty; }
.hx-arsenal-card__signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 51px;
  margin-top: auto;
  color: #a5b6c7;
  border-top: 1px solid rgba(147, 179, 199, .12);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
}
.hx-arsenal-card__signal svg { flex: 0 1 110px; width: 110px; min-width: 56px; height: 25px; overflow: visible; stroke: var(--ars-accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hx-arsenal-card__signal > span:last-child { white-space: nowrap; }
.hx-arsenal-card .hx-arsenal-signal__gold { stroke: var(--ars-gold); fill: rgba(223, 186, 113, .18); }
.hx-arsenal-card .hx-arsenal-signal__baseline { stroke: rgba(145, 181, 203, .2); }
.hx-arsenal-card__topics { justify-content: flex-start; gap: 12px; }
.hx-arsenal-card__topics > span { font-size: 9px; letter-spacing: .09em; }
.hx-arsenal-card__topics > i { width: 3px; height: 3px; background: var(--ars-accent); transform: rotate(45deg); opacity: .55; }
.hx-arsenal-card__context { gap: 9px; }
.hx-arsenal-card__context > i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(108, 231, 242, .42), rgba(108, 231, 242, .1)); }
.hx-arsenal-card__context-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ars-cyan); box-shadow: 0 0 0 4px rgba(108, 231, 242, .06); }
.hx-arsenal-card__voice { gap: 15px; }
.hx-arsenal-card__voice > span:first-child { color: var(--ars-cyan); }
.hx-arsenal-card__voice > span:last-child { color: var(--ars-gold); }
.hx-arsenal-card__wave { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; height: 26px; }
.hx-arsenal-card__wave i { width: 2px; height: 8px; border-radius: 2px; background: var(--ars-cyan); opacity: .65; transform-origin: center; }
.hx-arsenal-card__wave i:nth-child(3n + 2) { height: 16px; }
.hx-arsenal-card__wave i:nth-child(3n) { height: 23px; }
.hx-arsenal-card__wave i:nth-child(n + 9) { background: var(--ars-gold); }
.hx-arsenal-card__memory-path { position: relative; flex: 0 1 86px; display: flex; justify-content: space-between; gap: 12px; }
.hx-arsenal-card__memory-path::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(223, 186, 113, .2), var(--ars-gold)); }
.hx-arsenal-card__memory-path i { position: relative; width: 7px; height: 7px; border: 1px solid var(--ars-gold); border-radius: 50%; background: #0b131d; }
.hx-arsenal-card__memory-path i:first-child { opacity: .4; }
.hx-arsenal-card__memory-path i:nth-child(2) { opacity: .6; }
.hx-arsenal-card__memory-path i:nth-child(3) { opacity: .8; }
.hx-arsenal-card__memory-path i:last-child { background: var(--ars-gold); box-shadow: 0 0 0 3px rgba(223, 186, 113, .07); }

/* The cards are informational, not controls. Animation is a short hover detail. */
@media (hover: hover) and (pointer: fine) {
  .hx-arsenal-card:hover { border-color: rgba(108, 231, 242, .36); box-shadow: inset 0 1px 0 rgba(211, 233, 244, .04), 0 12px 34px rgba(0, 0, 0, .22); }
  .hx-arsenal-card--draft:hover,
  .hx-arsenal-card--review:hover,
  .hx-arsenal-card--memory:hover { border-color: rgba(223, 186, 113, .36); }
  .hx-arsenal-card:hover::before { opacity: 1; }
  .hx-arsenal-card:hover .hx-arsenal-card__icon { transform: translateY(-2px); filter: drop-shadow(0 0 9px rgba(108, 231, 242, .14)); }
  .hx-arsenal-card:hover .hx-arsenal-icon__route,
  .hx-arsenal-card:hover .hx-arsenal-signal__route { animation: hx-arsenal-trace .9s ease both; }
  .hx-arsenal-card--live:hover .hx-arsenal-icon__ring { animation: hx-arsenal-ring 1.2s ease both; transform-origin: 32px 32px; }
  .hx-arsenal-card--voice:hover .hx-arsenal-card__wave i { animation: hx-arsenal-voice .55s ease-in-out 3 alternate; }
  .hx-arsenal-card--voice:hover .hx-arsenal-card__wave i:nth-child(2n) { animation-delay: .08s; }
  .hx-arsenal-card--voice:hover .hx-arsenal-card__wave i:nth-child(3n) { animation-delay: .16s; }
  .hx-arsenal-card--memory:hover .hx-arsenal-card__memory-path i { animation: hx-arsenal-memory .8s ease both; }
  .hx-arsenal-card--memory:hover .hx-arsenal-card__memory-path i:nth-child(2) { animation-delay: .12s; }
  .hx-arsenal-card--memory:hover .hx-arsenal-card__memory-path i:nth-child(3) { animation-delay: .24s; }
  .hx-arsenal-card--memory:hover .hx-arsenal-card__memory-path i:nth-child(4) { animation-delay: .36s; }
}
@keyframes hx-arsenal-trace { from { stroke-dasharray: 160; stroke-dashoffset: 160; } to { stroke-dasharray: 160; stroke-dashoffset: 0; } }
@keyframes hx-arsenal-ring { 0% { opacity: 1; transform: scale(.94); } 50% { opacity: .35; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hx-arsenal-voice { from { transform: scaleY(.45); opacity: .45; } to { transform: scaleY(1); opacity: .9; } }
@keyframes hx-arsenal-memory { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.45); box-shadow: 0 0 8px rgba(223, 186, 113, .45); } }
@media (max-width: 1060px) {
  .hx-arsenal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-arsenal-card__index { font-size: 9px; }
  .hx-arsenal-card__signal { font-size: 9px; }
  .hx-arsenal-card__signal svg { flex-basis: 116px; }
}
@media (max-width: 640px) {
  .hx-arsenal__header { margin-bottom: 30px; }
  .hx-arsenal .hx-arsenal__intro { margin-top: 18px; }
  .hx-arsenal__grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .hx-arsenal-card { padding: 24px 24px 0; }
  .hx-arsenal-card__top { margin-bottom: 19px; }
  .hx-arsenal-card__title { font-size: 25px; }
  .hx-arsenal-card__text { margin-bottom: 23px; font-size: 15px; }
  .hx-arsenal-card__signal { min-height: 51px; }
}
@media (max-width: 359px) {
  .hx-arsenal-card { padding-inline: 19px; }
  .hx-arsenal-card__index { font-size: 8px; }
  .hx-arsenal-card__signal { font-size: 8px; gap: 7px; }
  .hx-arsenal-card__topics { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-arsenal *, .hx-arsenal *::before, .hx-arsenal *::after { animation: none !important; transition: none !important; }
  .hx-arsenal .hx-reveal { opacity: 1 !important; transform: none !important; }
  .hx-arsenal-card:hover .hx-arsenal-card__icon { transform: none; }
}