/* ═══════════════════════════════════════════════════════════
   IS7NOW.FUN — Download page
   ═══════════════════════════════════════════════════════════ */

.dl-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
.dl-hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); }
.dl-hero__title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.9; text-transform: uppercase; margin: var(--space-4) 0; }
.dl-hero__desc { color: var(--color-text-secondary); font-size: var(--text-lg); max-width: 520px; margin-bottom: var(--space-8); }
.dl-hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.dl-hero__specs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-10); }
.dl-spec { }
.dl-spec__value { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ivory); line-height: 1; }
.dl-spec__label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }
.dl-hero__visual { position: relative; display: flex; justify-content: center; }
.dl-hero__visual::before { content: ''; position: absolute; inset: 8%; background: radial-gradient(circle, rgba(255,23,68,0.30), transparent 65%); filter: blur(30px); z-index: 0; }
.dl-hero__visual img { position: relative; z-index: 1; max-width: 320px; clip-path: var(--chamfer-card); border: 1px solid var(--color-border-plasma); animation: float-y 6s ease-in-out infinite; }
@media (min-width: 900px) { .dl-hero { grid-template-columns: 1.1fr 0.9fr; } }

/* ── Steps ── */
.dl-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); counter-reset: step; }
@media (min-width: 640px) { .dl-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dl-steps { grid-template-columns: repeat(4, 1fr); } }
.dl-step { padding: var(--space-6); position: relative; }
.dl-step__num {
  font-family: var(--font-display); font-size: var(--text-5xl); line-height: 1;
  color: var(--color-accent); opacity: 0.9; margin-bottom: var(--space-3);
}
.dl-step__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.dl-step__desc { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── Screenshot gallery ── */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shot { aspect-ratio: 9/16; overflow: hidden; clip-path: var(--chamfer-card); border: 1px solid var(--color-border); background: var(--color-surface-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.shot:hover img { transform: scale(1.06); }

/* ── Requirements table ── */
.req-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.req-table th, .req-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.req-table th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); font-size: var(--text-xs); width: 40%; }
.req-table td { color: var(--color-text-secondary); }
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: none; }

/* ── Safety note ── */
.safety { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-accent-subtle); border: 1px solid var(--color-border-plasma); border-radius: var(--radius-md); padding: var(--space-6); }
.safety__icon { font-size: var(--text-3xl); color: var(--color-accent); flex-shrink: 0; }
.safety h3 { font-family: var(--font-ui); font-weight: 700; margin-bottom: var(--space-2); }
.safety p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.7; }