:root {
    --dl-ink: #07152d;
    --dl-muted: #61708a;
    --dl-blue: #2563eb;
    --dl-cyan: #38bdf8;
    --dl-line: #dbe4f0;
    --dl-soft: #f4f7fb;
}

body:has(.downloads-page) {
    background: #ffffff;
}

body:has(.downloads-page) main[role="main"] {
    padding-bottom: 0 !important;
}

.downloads-page {
    width: 100%;
    color: var(--dl-ink);
    overflow: hidden;
}

.downloads-hero {
    position: relative;
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    margin: 0 calc(50% - 50vw);
    padding: 76px max(5vw, calc((100vw - 1240px) / 2));
    color: #ffffff;
    background:
        linear-gradient(112deg, rgba(5, 18, 42, .98), rgba(10, 43, 91, .96) 58%, rgba(25, 75, 151, .94)),
        #081b3a;
    isolation: isolate;
}

.downloads-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to right, black, transparent 82%);
}

.downloads-hero__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(4px);
}

.downloads-hero__glow--one {
    width: 460px;
    height: 460px;
    top: -180px;
    right: 8%;
    background: rgba(37, 99, 235, .28);
}

.downloads-hero__glow--two {
    width: 300px;
    height: 300px;
    bottom: -120px;
    left: 32%;
    background: rgba(56, 189, 248, .12);
}

.downloads-hero__content { position: relative; z-index: 2; }

.downloads-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 54px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -.02em;
}

.downloads-brand:hover { color: #ffffff; }
.downloads-brand img { width: 38px; height: 38px; object-fit: contain; }

.downloads-eyebrow,
.downloads-kicker {
    margin: 0;
    color: #60a5fa;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.downloads-eyebrow { display: flex; align-items: center; gap: 9px; color: #93c5fd; }
.downloads-eyebrow span { width: 24px; height: 2px; background: #38bdf8; }

.downloads-hero h1 {
    max-width: 720px;
    margin: 14px 0 22px;
    color: #ffffff;
    font-size: clamp(3rem, 5.2vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 900;
}

.downloads-hero h1 em { color: #7dd3fc; font-style: normal; }

.downloads-intro {
    max-width: 620px;
    margin: 0;
    color: #c8d8ef;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.75;
}

.downloads-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.downloads-btn,
.platform-action {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.downloads-btn:hover,
.platform-action:hover { transform: translateY(-2px); }
.downloads-btn--primary { color: #ffffff; background: linear-gradient(135deg, #2563eb, #0ea5e9); box-shadow: 0 14px 34px rgba(14, 165, 233, .2); }
.downloads-btn--primary:hover { color: #ffffff; box-shadow: 0 18px 40px rgba(14, 165, 233, .3); }
.downloads-btn--ghost { color: #ffffff; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); }
.downloads-btn--ghost:hover { color: #ffffff; background: rgba(255,255,255,.12); }

.downloads-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; color: #b8c9e1; font-size: .78rem; font-weight: 700; }
.downloads-trust i { display: inline-grid; width: 18px; height: 18px; place-items: center; margin-right: 4px; border-radius: 50%; color: #0b2f62; background: #7dd3fc; font-style: normal; font-size: .65rem; }

.downloads-hero__visual { position: relative; min-height: 500px; }
.device { position: absolute; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 40px 90px rgba(0,0,0,.36); }
.device--desktop { width: min(620px, 47vw); top: 40px; left: 0; padding: 9px; border-radius: 18px; background: #0e2448; transform: perspective(1100px) rotateY(-8deg) rotateX(2deg); }
.device__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.device__bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.32); }
.device__body { height: 335px; display: grid; grid-template-columns: 68px 1fr; overflow: hidden; border-radius: 10px; background: #f8fafc; }
.mock-sidebar { padding: 16px 13px; background: #071a36; }
.mock-sidebar img { width: 30px; height: 30px; margin: 0 auto 28px; object-fit: contain; }
.mock-sidebar i { display: block; width: 27px; height: 6px; margin: 18px auto; border-radius: 9px; background: rgba(147,197,253,.34); }
.mock-main { padding: 29px; }
.mock-title { width: 42%; height: 14px; border-radius: 8px; background: #b8c9df; }
.mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }
.mock-cards i { height: 74px; border: 1px solid #e1e8f2; border-radius: 10px; background: linear-gradient(135deg,#fff,#edf5ff); }
.mock-chart { position: relative; height: 145px; margin-top: 18px; overflow: hidden; border: 1px solid #e1e8f2; border-radius: 10px; background: repeating-linear-gradient(to bottom,#fff,#fff 35px,#e7edf5 36px); }
.mock-chart span { position: absolute; width: 130%; height: 100px; left: -8%; bottom: -54px; border: 5px solid #2563eb; border-radius: 50%; transform: rotate(-7deg); }
.device--phone { width: 180px; height: 360px; right: -12px; bottom: 0; z-index: 2; padding: 28px 16px; border-radius: 34px; background: linear-gradient(160deg,#f9fbff,#e9f2ff); color: #11264a; transform: rotate(5deg); }
.phone-speaker { position: absolute; width: 45px; height: 5px; top: 13px; left: 50%; border-radius: 9px; background: #a8b5c7; transform: translateX(-50%); }
.device--phone img { display: block; width: 42px; height: 42px; margin: 18px auto 8px; object-fit: contain; }
.device--phone strong { display: block; text-align: center; font-size: .76rem; }
.phone-stat { height: 75px; margin-top: 28px; border-radius: 12px; background: linear-gradient(135deg,#1d4ed8,#38bdf8); }
.phone-lines i { display: block; height: 34px; margin-top: 9px; border: 1px solid #d7e1ed; border-radius: 9px; background: #ffffff; }

.downloads-platforms { padding: 104px 0 114px; }
.downloads-section-heading { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.downloads-section-heading h2 { margin: 8px 0 12px; color: var(--dl-ink); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 900; }
.downloads-section-heading > p:last-child { margin: 0; color: var(--dl-muted); font-size: 1.05rem; }

.platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.platform-card { position: relative; min-height: 500px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--dl-line); border-radius: 22px; background: #ffffff; box-shadow: 0 16px 46px rgba(15,35,68,.07); overflow: hidden; }
.platform-card--featured { border: 2px solid #3b82f6; box-shadow: 0 22px 60px rgba(37,99,235,.14); }
.recommended-ribbon { position: absolute; top: 0; right: 0; padding: 8px 17px; border-radius: 0 20px 0 14px; color: #ffffff; background: #2563eb; font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.platform-card__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.platform-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; color: #ffffff; background: #10254a; font-weight: 900; font-size: 1.35rem; box-shadow: 0 12px 24px rgba(15,35,68,.14); }
.platform-icon--web { background: linear-gradient(135deg,#0891b2,#2563eb); font-size: 2.2rem; }
.platform-icon--windows { grid-template-columns: repeat(2,15px); grid-template-rows: repeat(2,15px); gap: 3px; background: linear-gradient(135deg,#1d4ed8,#38bdf8); }
.platform-icon--windows i { display: block; width: 15px; height: 15px; background: #fff; }
.platform-icon--android { color: #07351f; background: linear-gradient(135deg,#86efac,#22c55e); }
.platform-icon--apple { color: #fff; background: linear-gradient(135deg,#111827,#475569); font-size: 2rem; }
.availability { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.availability i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.availability--live,.availability--ready { color: #087443; background: #dcfce7; }
.availability--soon { color: #8a5a05; background: #fef3c7; }
.platform-label { margin: 0 0 4px; color: #2563eb; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.platform-card h3 { margin: 0 0 12px; color: var(--dl-ink); font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; }
.platform-card > p:not(.platform-label) { margin: 0; color: var(--dl-muted); line-height: 1.65; }
.platform-card ul { display: grid; gap: 9px; margin: 23px 0 28px; padding: 0; color: #34435d; list-style: none; }
.platform-card li::before { content: "\2713"; margin-right: 9px; color: #2563eb; font-weight: 900; }
.platform-action { width: 100%; margin-top: auto; }
.platform-action--dark { color: #ffffff; background: #091b38; }
.platform-action--dark:hover { color: #ffffff; background: #132f5d; }
.platform-action--blue { color: #ffffff; background: linear-gradient(135deg,#2563eb,#0ea5e9); box-shadow: 0 12px 26px rgba(37,99,235,.18); }
.platform-action--blue:hover { color: #ffffff; }
.platform-action--disabled { color: #7b879a; background: #edf1f6; cursor: default; }
.platform-action--disabled:hover { transform: none; }
.platform-card small { display: block; margin-top: 10px; color: #8995a8; text-align: center; font-size: .72rem; }

.downloads-flow { margin: 0 calc(50% - 50vw); padding: 94px max(5vw, calc((100vw - 1240px) / 2)); color: #ffffff; background: #07172f; }
.downloads-section-heading--light h2 { color: #ffffff; }
.flow-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.flow-step { min-height: 175px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.04); }
.flow-step > span { display: inline-block; margin-bottom: 27px; color: #60a5fa; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.flow-step h3 { margin: 0 0 7px; color: #ffffff; font-size: 1.15rem; font-weight: 900; }
.flow-step p { margin: 0; color: #aabbd3; font-size: .88rem; line-height: 1.55; }

.downloads-support { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 80px 0; padding: 44px; border: 1px solid #d8e3f1; border-radius: 22px; background: linear-gradient(135deg,#f8fbff,#edf5ff); }
.downloads-support h2 { margin: 6px 0 8px; color: var(--dl-ink); font-size: clamp(1.6rem,3vw,2.4rem); letter-spacing: -.035em; font-weight: 900; }
.downloads-support p:last-child { margin: 0; color: var(--dl-muted); }

@media (max-width: 990px) {
    .downloads-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 55px; }
    .downloads-brand { margin-bottom: 38px; }
    .downloads-hero__visual { min-height: 430px; max-width: 680px; width: 100%; margin: 0 auto; }
    .device--desktop { width: min(620px,88vw); }
    .flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .downloads-hero { padding: 36px 20px 64px; }
    .downloads-hero h1 { font-size: clamp(2.7rem,13vw,4rem); }
    .downloads-trust { display: grid; gap: 10px; }
    .downloads-hero__visual { min-height: 340px; }
    .device__body { height: 245px; grid-template-columns: 50px 1fr; }
    .mock-main { padding: 20px 14px; }
    .device--phone { width: 135px; height: 280px; right: 0; padding: 20px 10px; }
    .phone-stat { height: 55px; margin-top: 18px; }
    .phone-lines i { height: 26px; }
    .platform-grid,.flow-grid { grid-template-columns: 1fr; }
    .downloads-platforms { padding: 72px 0 80px; }
    .platform-card { min-height: 0; padding: 26px; }
    .downloads-support { align-items: stretch; flex-direction: column; margin: 54px 0; padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .downloads-btn,.platform-action { transition: none; }
}