/* Homepage band pointing at DoD Games, Dave's games studio side (/dodgames/).
   Its own small file so the shared style.css version does not change for every page.
   It wears the homepage's own palette: the featured-card tint of the pricing section, the
   gradient hairline border, the kicker pill and a primary-button pill, with one playful touch
   (a faint pixel grid that fades in from the right) so it still reads as the games door. */
.dod-band{padding-top:0}
.dod-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  max-width:980px;margin:0 auto;padding:1.9rem 2.1rem;border-radius:20px;
  text-decoration:none;color:var(--text);
  background:
    linear-gradient(170deg,rgba(99,102,241,.16),rgba(34,211,238,.07)) padding-box,
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(140deg,rgba(129,140,248,.7),rgba(34,211,238,.32) 48%,rgba(148,163,255,.08)) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 50px rgba(99,102,241,.18);
  /* .reveal fades it in with opacity/transform; the hover lift uses translate so the two never fight */
  transition:opacity .7s ease,transform .7s ease,translate .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
/* pixel grid, strongest behind the game icons, gone by the middle of the card */
.dod-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(143,216,255,.16) 1.2px,transparent 1.6px) 0 0/12px 12px;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%);
          mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%);
}
/* soft glow behind the mark, like the hero aurora */
.dod-card::after{
  content:"";position:absolute;z-index:-1;left:-60px;top:50%;width:260px;height:260px;margin-top:-130px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(129,140,248,.26),transparent 70%);pointer-events:none;
}
.dod-card:hover{translate:0 -4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 60px rgba(99,102,241,.28)}
.dod-card:focus-visible{outline:3px solid #8fd8ff;outline-offset:4px}
.dod-card .dod-mark{width:96px;height:auto;filter:drop-shadow(0 12px 22px rgba(99,102,241,.35))}
.dod-card .kicker{margin-bottom:.7rem}
.dod-card h2{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.02em;margin:0 0 .5rem}
.dod-card p{color:var(--muted);margin:0 0 1.1rem;line-height:1.7;font-size:.98rem;max-width:34rem}
/* reads as the homepage's primary button; the whole card is the link */
.dod-card .dod-link{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1.2rem;border-radius:999px;background:var(--grad);color:#04101f;
  font-weight:700;font-size:.93rem;box-shadow:0 8px 30px rgba(99,102,241,.35);
}
.dod-card .dod-link::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,.61,.36,1);
}
.dod-card:hover .dod-link::after{left:150%}
.dod-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,56px);gap:12px}
.dod-icons li{transition:translate .28s cubic-bezier(.22,.61,.36,1)}
.dod-icons img{
  display:block;width:56px;height:56px;border-radius:14px;
  box-shadow:0 0 0 1px rgba(148,163,255,.28),0 10px 24px rgba(2,4,14,.55);
}
.dod-card:hover .dod-icons li{translate:0 -3px}
.dod-card:hover .dod-icons li:nth-child(2){transition-delay:.05s}
.dod-card:hover .dod-icons li:nth-child(3){transition-delay:.1s}
@media(max-width:760px){
  .dod-card{grid-template-columns:1fr;gap:1.1rem;padding:1.5rem 1.4rem}
  .dod-card .dod-mark{width:72px}
  .dod-card::before{-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 45%);mask-image:linear-gradient(0deg,#000 0%,transparent 45%)}
  .dod-icons{grid-template-columns:repeat(3,52px);gap:10px}
  .dod-icons img{width:52px;height:52px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  .dod-card,.dod-icons li{transition:none}
  .dod-card:hover,.dod-card:hover .dod-icons li{translate:none}
  .dod-card .dod-link::after{display:none}
}