/* ==========================================================================
   Página de Download — cards "Instalador oficial" e "Versão portátil (ZIP)".
   Escopo: body.zkk :is(.installer-card, .portable-card). Só anima com o tempo.
   ========================================================================== */
@property --dc-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body.zkk .installer-card { --ca: #b45cff; --cb: #ff4f9a; --cglow: 180, 92, 255; }
body.zkk .portable-card { --ca: #4fc3ff; --cb: #6f7bff; --cglow: 79, 195, 255; }

body.zkk :is(.installer-card, .portable-card) {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
  border: 0; border-radius: 30px;
  background: linear-gradient(165deg, rgba(27, 20, 44, .94), rgba(9, 7, 17, .96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(var(--cglow), .12), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}
/* borda em gradiente */
body.zkk :is(.installer-card, .portable-card)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; width: auto; height: auto; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(150deg, var(--ca), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .04) 62%, var(--cb));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9; transform: none; transition: opacity .4s ease;
}
/* o instalador recomendado ganha borda holográfica girando */
body.zkk .installer-card::before {
  background: conic-gradient(from var(--dc-ang), #ff7ad9, #7a8bff, #4fe3ff, #7dffb2, #ffe27a, #ff7ad9);
  animation: dc-spin 10s linear infinite; opacity: 1;
}
@keyframes dc-spin { to { --dc-ang: 360deg; } }
/* halo de cor no topo */
body.zkk :is(.installer-card, .portable-card)::after {
  content: ""; position: absolute; z-index: -1; top: -90px; right: -60px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--cglow), .3), transparent 65%); filter: blur(10px);
}
@media (hover: hover) {
  body.zkk :is(.installer-card, .portable-card):hover { transform: translate3d(0, -8px, 0); box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 80px rgba(var(--cglow), .3), inset 0 1px 0 rgba(255, 255, 255, .14); }
}

/* ícone */
body.zkk :is(.installer-card, .portable-card) .card-icon {
  display: grid; place-items: center; width: 88px; height: 88px; margin: 0 0 22px; padding: 0; border: 0; border-radius: 26px;
  background: linear-gradient(135deg, rgba(var(--cglow), .38), rgba(255, 255, 255, .06));
  box-shadow: 0 16px 40px rgba(var(--cglow), .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: dc-float 6s ease-in-out infinite;
}
body.zkk :is(.installer-card, .portable-card) .card-icon .icon-img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
@keyframes dc-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }

/* etiqueta + título + descrição */
body.zkk :is(.installer-card, .portable-card) .installer-eyebrow {
  align-self: flex-start; margin: 0 0 14px; padding: 7px 15px; border: 1px solid rgba(var(--cglow), .55); border-radius: 999px;
  background: rgba(var(--cglow), .14); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
}
body.zkk :is(.installer-card, .portable-card) .card-title {
  margin: 0 0 12px; color: #fff; font-family: var(--fx-display, "Unbounded", "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(21px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance;
}
body.zkk :is(.installer-card, .portable-card) .card-desc { margin: 0; color: #b9b3c9; font-size: 15px; line-height: 1.7; }

/* chips de especificação */
body.zkk :is(.installer-card, .portable-card) .installer-specs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 22px 0 20px; }
body.zkk :is(.installer-card, .portable-card) .installer-spec {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: #e4def2; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
body.zkk :is(.installer-card, .portable-card) .installer-spec strong { color: #fff; font-weight: 800; }
body.zkk :is(.installer-card, .portable-card) .installer-spec.recommended { border-color: rgba(70, 224, 140, .6); background: rgba(70, 224, 140, .14); color: #8cf0b9; box-shadow: 0 0 22px rgba(70, 224, 140, .22); }

/* lista de detalhes */
body.zkk :is(.installer-card, .portable-card) .installer-details {
  display: grid; gap: 4px; margin: 0 0 26px; padding: 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 22px; background: rgba(255, 255, 255, .03);
}
body.zkk :is(.installer-card, .portable-card) .installer-details p {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 14px; margin: 0; padding: 12px; border-radius: 16px; color: #b9b3c9; font-size: 13.5px; line-height: 1.6; text-align: left;
  transition: background-color .3s ease;
}
body.zkk :is(.installer-card, .portable-card) .installer-details p:hover { background: rgba(var(--cglow), .09); }
body.zkk :is(.installer-card, .portable-card) .installer-details p > span:first-child {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(var(--cglow), .18); font-size: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.zkk :is(.installer-card, .portable-card) .installer-details strong { color: #fff; font-weight: 700; }

/* botão principal (sempre no pé do card) */
body.zkk :is(.installer-card, .portable-card) .download-btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; margin-top: auto; padding: 0 24px; border: 0; border-radius: 20px; cursor: pointer;
  background: linear-gradient(125deg, var(--ca), var(--cb)); color: #fff; font: 800 15.5px/1 Inter, system-ui, sans-serif; letter-spacing: .01em;
  box-shadow: 0 18px 46px rgba(var(--cglow), .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, filter .3s ease;
}
body.zkk :is(.installer-card, .portable-card) .download-btn::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-22deg); animation: dc-shine 4.4s ease-in-out infinite; pointer-events: none; }
@keyframes dc-shine { 0%, 55% { left: -45%; } 100% { left: 130%; } }
body.zkk :is(.installer-card, .portable-card) .download-btn:hover:not(.disabled):not(:disabled) { transform: translate3d(0, -3px, 0) scale(1.02); box-shadow: 0 24px 60px rgba(var(--cglow), .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
body.zkk :is(.installer-card, .portable-card) .download-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* tema claro */
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) { background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(246, 240, 255, .96)); box-shadow: 0 26px 70px rgba(80, 40, 140, .22), inset 0 1px 0 #fff; }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .card-title,
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-details strong,
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-spec strong { color: #14101c; }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-eyebrow { color: #2b1457; }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .card-desc,
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-details p { color: #4a4453; }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-spec { color: #2b2338; background: rgba(20, 10, 30, .05); border-color: rgba(20, 10, 30, .14); }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-spec.recommended { color: #137a47; }
html[data-theme="light"] body.zkk :is(.installer-card, .portable-card) .installer-details { background: rgba(20, 10, 30, .03); border-color: rgba(20, 10, 30, .08); }

@media (max-width: 640px) {
  body.zkk :is(.installer-card, .portable-card) { border-radius: 24px; }
  body.zkk :is(.installer-card, .portable-card) .installer-spec { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  body.zkk .installer-card::before, body.zkk :is(.installer-card, .portable-card) .card-icon, body.zkk :is(.installer-card, .portable-card) .download-btn::after { animation: none !important; }
  body.zkk :is(.installer-card, .portable-card) { transition: none; }
}

/* Os dois cards principais ocupam a largura toda em duas colunas; os "em breve" ficam em três logo abaixo. */
@media (min-width: 981px) {
  body.zkk .download-grid:has(> .installer-card) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.zkk .download-grid:has(> .installer-card) > :is(.installer-card, .portable-card) { grid-column: span 3; }
  body.zkk .download-grid:has(> .installer-card) > .coming-soon { grid-column: span 2; }
}