/* ShardKeep — download.css */

.dl-hero {
    padding-block: clamp(var(--sp-8), 9vw, var(--sp-9));
    text-align: center;
    position: relative;
}

.dl-hero__pkg {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: var(--sp-6) var(--sp-7);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(244,63,94,0.2), transparent 60%),
        rgba(14, 12, 36, 0.6);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
    margin-block: var(--sp-6) var(--sp-8);
    backdrop-filter: blur(8px);
    max-width: 520px;
    margin-inline: auto;
}

.dl-hero__version {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--rose-soft);
    letter-spacing: 0.08em;
}

.dl-hero__big-cta {
    font-size: var(--fs-lead) !important;
    padding: 1.1em 2.2em !important;
}

.dl-hero__meta {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ── Browser instructions ── */
.browsers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}
@media (max-width: 720px) {
    .browsers { grid-template-columns: 1fr; }
}
.browser {
    padding: var(--sp-5);
    background: rgba(14, 12, 36, 0.5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
}
.browser__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.browser__logo {
    width: 44px; height: 44px;
    border-radius: var(--r-2);
    background: rgba(139, 92, 246, 0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-1);
}
.browser__logo svg { width: 28px; height: 28px; }
.browser h3 { margin: 0; font-size: var(--fs-h4); }
.browser ol {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}
.browser ol li {
    padding-left: 2.4rem;
    position: relative;
    counter-increment: step;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.browser ol li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: white;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
    font-family: var(--font-display);
}
.browser code {
    font-family: var(--font-mono);
    background: rgba(139, 92, 246, 0.1);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.92em;
    color: var(--text-1);
}

/* ── Contact ── */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 880px) {
    .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
    padding: var(--sp-6);
    background: rgba(14, 12, 36, 0.5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    transition: border-color var(--dur-2), transform var(--dur-2);
}
.contact-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.contact-card__icon {
    width: 48px; height: 48px;
    border-radius: var(--r-2);
    background: var(--grad-brand);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-rose);
}
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card h3 { margin: 0; font-size: var(--fs-h4); }
.contact-card p { color: var(--text-3); font-size: var(--fs-sm); margin: 0; }