/* ═══════════════════════════════════════
           Download page – all additions
        ═══════════════════════════════════════ */

        .dl-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 3.5rem 1.5rem 4rem;
            position: relative;
            z-index: 5;
            gap: 2.5rem;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }

        /* ── Hero card ── */
        .dl-hero {
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 22px;
            box-shadow: 0 24px 64px rgba(0,0,0,0.5);
            padding: 3.5rem 3rem;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: center;
            animation: card-in 0.75s cubic-bezier(0.22,1,0.36,1) both;
            overflow: hidden;
            position: relative;
        }
        @keyframes card-in {
            from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Subtle mauve glow top-right */
        .dl-hero::before {
            content: '';
            position: absolute;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(224, 175, 104,0.08) 0%, transparent 70%);
            top: -120px; right: -120px;
            pointer-events: none;
        }

        .dl-hero-left { position: relative; z-index: 2; }

        .dl-eyebrow {
            font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--mauve); margin-bottom: 0.5rem;
        }

        .dl-title {
            font-size: 2.6rem; font-weight: 900; line-height: 1.05;
            color: var(--text); margin-bottom: 0.6rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }
        .dl-title span { color: var(--mauve); }

        .dl-subtitle {
            font-size: 0.92rem; color: var(--subtext0);
            line-height: 1.6; margin-bottom: 2rem; max-width: 440px;
        }

        /* Meta chips row */
        .dl-chips {
            display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem;
        }
        .dl-chip {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.07em; padding: 5px 12px; border-radius: 20px;
        }
        .dl-chip--version  { background: rgba(224, 175, 104,0.1); color: var(--mauve);  border: 1px solid rgba(224, 175, 104,0.25); }
        .dl-chip--size     { background: rgba(104, 147, 186,0.1); color: var(--blue);   border: 1px solid rgba(104, 147, 186,0.25); }
        .dl-chip--updated  { background: rgba(166,227,161,0.1); color: var(--green);  border: 1px solid rgba(166,227,161,0.25); }
        .dl-chip--windows  { background: rgba(148,226,213,0.1); color: var(--teal);   border: 1px solid rgba(148,226,213,0.25); }

        /* Big download button */
        .dl-btn {
            display: inline-flex; align-items: center; gap: 18px;
            text-decoration: none;
            background: linear-gradient(
                90deg,
                color-mix(in srgb, var(--mauve) 58%, var(--base)),
                color-mix(in srgb, var(--blue) 62%, var(--base))
            );
            color: var(--text);
            padding: 18px 36px; border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
            box-shadow: 0 6px 32px rgba(0, 0, 0, 0.35);
            transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
            position: relative; overflow: hidden;
        }
        .dl-btn::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }
        .dl-btn:hover::after { transform: translateX(100%); }
        .dl-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
            filter: brightness(1.12);
        }
        .dl-btn:active { transform: translateY(0); }

        .dl-btn-icon {
            width: 48px; height: 48px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 12px;
        }
        .dl-btn-icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; }

        .dl-btn-text { display: flex; flex-direction: column; align-items: flex-start; }
        .dl-btn-small { font-size: 0.72rem; font-weight: 700; color: color-mix(in srgb, var(--text) 72%, transparent); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1; }
        .dl-btn-big   { font-size: 1.45rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; }

        /* Hero right — decorative pulse ring */
        .dl-hero-right {
            position: relative; z-index: 2;
            display: flex; align-items: center; justify-content: center;
        }
        .dl-pulse-ring {
            position: relative; width: 160px; height: 160px;
        }
        .dl-pulse-ring::before,
        .dl-pulse-ring::after {
            content: '';
            position: absolute; inset: 0; border-radius: 50%;
            border: 1px solid rgba(224, 175, 104,0.2);
            animation: ring-expand 3s ease-out infinite;
        }
        .dl-pulse-ring::after { animation-delay: 1.5s; }
        @keyframes ring-expand {
            0%   { transform: scale(0.7); opacity: 0.8; }
            100% { transform: scale(1.6); opacity: 0; }
        }
        .dl-pulse-logo {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .dl-pulse-logo img {
            width: 110px; animation: logo-glow 3s ease-in-out infinite;
        }

        /* ── Divider ── */
        .dl-section-divider {
            width: 100%; height: 1px;
            background: linear-gradient(90deg, transparent, var(--surface1), var(--mauve), var(--surface1), transparent);
            opacity: 0.35;
        }

        /* ── How to install steps ── */
        .dl-steps-card {
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
            padding: 2.5rem;
            animation: card-in 0.75s cubic-bezier(0.22,1,0.36,1) 0.1s both;
        }

        .dl-card-title {
            font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--mauve);
            margin-bottom: 1.6rem; display: flex; align-items: center; gap: 10px;
        }
        .dl-card-title::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(90deg, var(--surface0), transparent);
        }

        .dl-steps {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
        }
        .dl-step {
            display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
            padding: 1.2rem; border-radius: 12px;
            background: rgba(18, 10, 40,0.4);
            border: 1px solid var(--surface0);
            transition: border-color 0.25s, transform 0.25s;
        }
        .dl-step:hover { border-color: var(--surface1); transform: translateY(-3px); }

        .dl-step-num {
            width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 900;
        }
        .dl-step:nth-child(1) .dl-step-num { background: rgba(224, 175, 104,0.12); color: var(--mauve); border: 1px solid rgba(224, 175, 104,0.25); }
        .dl-step:nth-child(2) .dl-step-num { background: rgba(104, 147, 186,0.12); color: var(--blue);  border: 1px solid rgba(104, 147, 186,0.25); }
        .dl-step:nth-child(3) .dl-step-num { background: rgba(166,227,161,0.12); color: var(--green); border: 1px solid rgba(166,227,161,0.25); }
        .dl-step:nth-child(4) .dl-step-num { background: rgba(249,226,175,0.10); color: var(--yellow);border: 1px solid rgba(249,226,175,0.25); }

        .dl-step-icon { color: var(--subtext0); }
        .dl-step-icon svg { width: 22px; height: 22px; }

        .dl-step h3 { font-size: 0.85rem; font-weight: 800; color: var(--text); margin: 0; }
        .dl-step p  { font-size: 0.76rem; color: var(--subtext0); line-height: 1.5; margin: 0; }

        /* ── System Requirements ── */
        .dl-sysreq-card {
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
            padding: 2.5rem;
            animation: card-in 0.75s cubic-bezier(0.22,1,0.36,1) 0.2s both;
        }

        .dl-sysreq-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
        }
        .dl-req {
            padding: 1.2rem; border-radius: 12px;
            background: rgba(18, 10, 40,0.4);
            border: 1px solid var(--surface0);
            transition: border-color 0.2s;
        }
        .dl-req:hover { border-color: var(--surface1); }

        .dl-req-icon {
            width: 34px; height: 34px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 0.75rem;
        }
        .dl-req:nth-child(1) .dl-req-icon { background: rgba(148,226,213,0.1); color: var(--teal);   border: 1px solid rgba(148,226,213,0.2); }
        .dl-req:nth-child(2) .dl-req-icon { background: rgba(104, 147, 186,0.1); color: var(--blue);   border: 1px solid rgba(104, 147, 186,0.2); }
        .dl-req:nth-child(3) .dl-req-icon { background: rgba(224, 175, 104,0.1); color: var(--mauve);  border: 1px solid rgba(224, 175, 104,0.2); }
        .dl-req:nth-child(4) .dl-req-icon { background: rgba(249,226,175,0.1); color: var(--yellow); border: 1px solid rgba(249,226,175,0.2); }
        .dl-req-icon svg { width: 16px; height: 16px; }

        .dl-req h4 {
            font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.1em; color: var(--subtext0); margin-bottom: 0.3rem;
        }
        .dl-req p { font-size: 0.85rem; font-weight: 700; color: var(--text); line-height: 1.4; }

        /* ── Responsive ── */
        @media (max-width: 900px) {
            .dl-hero { grid-template-columns: 1fr; }
            .dl-hero-right { display: none; }
            .dl-steps    { grid-template-columns: repeat(2, 1fr); }
            .dl-sysreq-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 550px) {
            .dl-title { font-size: 1.9rem; }
            .dl-btn { padding: 15px 22px; }
            .dl-btn-big { font-size: 1.15rem; }
            .dl-steps { grid-template-columns: 1fr; }
            .dl-sysreq-grid { grid-template-columns: 1fr 1fr; }
            .dl-wrap { padding: 2rem 1rem 3rem; }
        }