@import url("../public-page.css");

/* Download page: aligned with Server Info visual language and 1366px canvas. */
body.public-page-body-download {
    --si-blue: #65c9ff;
    --si-blue-strong: #2389d4;
    --si-gold: #f1c97c;
    --si-panel: rgba(7, 17, 33, .84);
    --si-panel-soft: rgba(13, 31, 55, .68);
}

.download-section {
    width: 100%;
    margin: 0 auto;
    padding: 24px 0 48px;
    color: #eaf1ff;
}

.download-shell {
    display: grid;
    gap: 22px;
    width: 100%;
}

.download-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 18px 14px;
    text-align: center;
}

.download-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--si-gold);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.download-hero__eyebrow span {
    width: 46px;
    height: 1px;
    background: var(--si-gold);
}

.download-hero h1 {
    margin: 14px 0;
    color: #f1e5cb;
    font: 700 clamp(2.2rem, 5vw, 4rem)/1.02 var(--font-head);
    text-shadow: 0 5px 25px rgba(0, 0, 0, .72);
}

.download-hero h1 em {
    color: var(--si-gold);
    font-style: normal;
}

.download-hero p {
    max-width: 680px;
    margin: 0 auto;
    color: #c8d5e9;
    font-size: 1rem;
    line-height: 1.8;
}

.download-panel {
    position: relative;
    width: 100%;
    padding: 28px;
    border: 1px solid rgba(101, 201, 255, .17);
    border-top: 2px solid var(--si-gold);
    background: linear-gradient(145deg, rgba(8, 21, 40, .88), rgba(4, 11, 23, .82));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .25);
}

.download-package-intro,
.download-page__section-head {
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(241, 201, 124, .24);
}

.download-package-intro__topline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.download-package-intro__index,
.download-page__section-index {
    color: var(--si-gold);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.download-package-intro__rule {
    width: 42px;
    height: 1px;
    background: rgba(241, 201, 124, .6);
}

.download-package-intro__hint {
    color: #8fa8c7;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.download-package-intro__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
    align-items: end;
    gap: 24px;
}

.download-package-intro h2,
.download-page__section-copy h2 {
    margin: 6px 0 0;
    color: #f4ead4;
    font: 600 clamp(1.55rem, 3vw, 2.35rem)/1.1 var(--font-head);
    text-shadow: 0 3px 16px rgba(0, 0, 0, .55);
}

.download-package-intro p,
.download-page__section-copy p {
    max-width: 62ch;
    margin: 0;
    color: #afc1d8;
    font-size: .92rem;
    line-height: 1.7;
}

.download-page__link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.download-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 14px;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(101, 201, 255, .2);
    border-top: 2px solid var(--download-card-accent, var(--si-blue));
    background: linear-gradient(145deg, var(--si-panel-soft), rgba(5, 13, 27, .84));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
    transition: transform .2s ease, border-color .2s ease;
}

.download-card:hover {
    transform: translateY(-3px);
    border-color: var(--si-gold);
}

.download-card--recommended { --download-card-accent: var(--si-gold); }
.download-card--full { --download-card-accent: var(--si-blue); }

.download-card__head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 14px;
}

.download-card__icon,
.download-security-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: var(--download-card-accent, var(--si-gold));
    border: 1px solid currentColor;
    background: rgba(4, 12, 25, .74);
}

.download-card__icon .ui-icon,
.download-security-card__icon .ui-icon {
    width: 20px;
    height: 20px;
}

.download-card__title {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.download-card__package-type {
    color: #8fa8c7;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.download-card__eyebrow {
    color: var(--download-card-accent, var(--si-gold));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.download-card__title h3 {
    margin: 4px 0 0;
    color: #f4ead4;
    font: 600 1.25rem/1.25 var(--font-head);
}

.download-card__package-use {
    color: #91a8c4;
    font-size: .8rem;
}

.download-card__description {
    margin: 0;
    color: #c6d6eb;
    font-size: .9rem;
    line-height: 1.65;
}

.download-card__note {
    display: inline-flex;
    padding: 7px 11px;
    color: #dce7f7;
    border: 1px solid rgba(101, 201, 255, .2);
    border-left: 2px solid var(--download-card-accent, var(--si-gold));
    background: rgba(4, 12, 25, .74);
    font-size: .75rem;
}

.download-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.download-card__actions .btn {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 0;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.download-card__actions .btn-primary {
    color: #071321;
    border: 1px solid #ffe2a5;
    background: linear-gradient(135deg, var(--si-gold), #ffe8b2);
    box-shadow: 0 8px 22px rgba(241, 201, 124, .18);
}

.download-card__actions .btn-ghost {
    color: #d9e6f5;
    border: 1px solid rgba(101, 201, 255, .24);
    background: rgba(4, 12, 25, .78);
}

.download-card__actions .btn-ghost:hover {
    border-color: var(--si-blue);
    color: var(--si-gold);
}

.download-card__actions .ui-icon {
    width: 16px;
    height: 16px;
}

.download-page__section-copy {
    display: grid;
    gap: 8px;
}

.download-flow {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 20px;
}

.download-launch-preview {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(101, 201, 255, .2);
    background: rgba(4, 12, 25, .76);
}

.download-launch-preview__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid rgba(101, 201, 255, .16);
}

.download-launch-preview__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-launch-preview__caption {
    padding: 20px;
}

.download-launch-preview__caption strong {
    color: #f4ead4;
    font: 600 1.08rem/1.3 var(--font-head);
}

.download-launch-preview__caption p {
    margin: 8px 0 0;
    color: #aebed5;
    font-size: .88rem;
    line-height: 1.65;
}

.download-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px;
    border: 1px solid rgba(101, 201, 255, .17);
    border-left: 2px solid var(--si-blue);
    background: rgba(4, 12, 25, .74);
}

.download-step__index {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--si-gold);
    border: 1px solid rgba(241, 201, 124, .45);
    background: rgba(2, 9, 20, .65);
    font: 700 .82rem/1 var(--font-head);
}

.download-step__copy strong {
    color: #f4ead4;
    font: 600 .98rem/1.35 var(--font-head);
}

.download-step__copy p {
    margin: 6px 0 0;
    color: #aebed5;
    font-size: .84rem;
    line-height: 1.55;
}

.download-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.download-security-card {
    display: flex;
    min-width: 0;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(101, 201, 255, .17);
    border-left: 2px solid var(--si-gold);
    background: rgba(4, 12, 25, .74);
}

.download-security-card__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    color: var(--si-blue);
}

.download-security-card__copy {
    min-width: 0;
}

.download-security-card__copy strong {
    color: #f4ead4;
    font: 600 .95rem/1.35 var(--font-head);
}

.download-security-card__copy p {
    margin: 6px 0 0;
    color: #aebed5;
    font-size: .82rem;
    line-height: 1.55;
}

.download-page__footer-note {
    margin-top: 18px;
    padding: 13px 16px;
    border-left: 2px solid var(--si-gold);
    background: rgba(241, 201, 124, .06);
    color: #dce7f7;
    font-size: .82rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .download-flow { grid-template-columns: 1fr; }
    .download-package-intro__body { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
    .download-section { padding: 14px 0 34px; }
    .download-hero { padding: 26px 0 8px; }
    .download-hero__eyebrow { font-size: .64rem; letter-spacing: .14em; }
    .download-hero__eyebrow span { width: 24px; }
    .download-hero h1 { font-size: 2rem; }
    .download-panel { padding: 20px 16px; }
    .download-page__link-grid,
    .download-security-grid { grid-template-columns: 1fr; }
}