.download-page { background: #090b0a; }
.active-link { color: var(--text) !important; }
.active-link::after { left: 0 !important; right: 0 !important; }

.download-hero {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: 760px;
  margin: 0 auto;
  padding: 96px 0 90px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 90px;
}
.download-intro { position: relative; z-index: 3; }
.download-intro h1 { max-width: 700px; font-size: clamp(3.7rem, 6.6vw, 6.6rem); }
.download-intro h1 em { color: var(--green-bright); font-style: normal; }
.download-lead { max-width: 600px; margin: 1.7rem 0 0; color: var(--muted); font-size: 1.07rem; line-height: 1.72; }
.release-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.7rem; }
.release-chip { min-height: 34px; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(111,211,154,.18); border-radius: 999px; padding: .35rem .7rem; background: rgba(111,211,154,.07); color: var(--green); font-size: .7rem; }
.release-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(111,211,154,.08); animation: status-pulse 2.8s ease-in-out infinite; }
.muted-chip { border-color: var(--line); background: rgba(255,255,255,.025); color: #838d86; }
.download-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.download-main-button { min-width: 230px; }
.download-facts { display: flex; flex-wrap: wrap; gap: 1.15rem; margin-top: 1.5rem; color: #768078; font-size: .75rem; }
.download-facts i { margin-right: .3rem; color: var(--green); font-style: normal; }
.download-aura { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); animation: glow-breathe 10s ease-in-out infinite; }
.aura-one { top: 12%; right: 2%; width: 470px; height: 470px; background: rgba(63,146,96,.075); }
.aura-two { left: 4%; bottom: 4%; width: 240px; height: 240px; background: rgba(111,211,154,.025); animation-delay: -4s; }

.download-visual { --phone-x: 0px; --phone-y: 0px; position: relative; min-height: 570px; display: grid; place-items: center; perspective: 1200px; }
.android-phone { position: relative; z-index: 3; width: 285px; height: 565px; overflow: hidden; border: 7px solid #272c28; border-radius: 43px; padding: 13px; background: #070908; box-shadow: 0 45px 110px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.045); transform: translate3d(var(--phone-x), var(--phone-y), 0) rotate(3.5deg); transition: transform .25s ease-out; }
.phone-speaker { position: absolute; z-index: 6; left: 50%; top: 11px; width: 88px; height: 24px; border-radius: 99px; background: #050605; transform: translateX(-50%); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 31px; padding: 2.1rem .8rem .75rem; background: radial-gradient(circle at 80% 38%, rgba(65,132,90,.13), transparent 45%), #111512; }
.mobile-appbar { display: flex; align-items: center; gap: .55rem; padding: .65rem 0 .8rem; border-bottom: 1px solid var(--line); }
.mobile-appbar img { width: 31px; height: 31px; border-radius: 9px; }
.mobile-appbar div { display: flex; flex: 1; flex-direction: column; }
.mobile-appbar b { font-size: .68rem; }
.mobile-appbar small { color: var(--green); font-size: .48rem; }
.mobile-appbar > span { color: #687169; font-size: .58rem; }
.mobile-date { width: max-content; margin: .8rem auto; border-radius: 999px; padding: .24rem .5rem; background: rgba(255,255,255,.04); color: #717a74; font-size: .48rem; }
.mobile-bubble { position: relative; width: 80%; margin-bottom: .7rem; border-radius: 5px 11px 11px; padding: .62rem .6rem 1rem; background: #242a25; color: #d9dfda; font-size: .6rem; }
.mobile-bubble.mine { margin-left: auto; border-radius: 11px 5px 11px 11px; background: #28543b; }
.mobile-bubble time { position: absolute; right: .4rem; bottom: .24rem; color: rgba(255,255,255,.44); font-size: .42rem; }
.mobile-reaction { width: max-content; margin: -.9rem .35rem .7rem auto; border: 1px solid #33463a; border-radius: 999px; padding: .13rem .35rem; background: #172019; color: var(--green); font-size: .48rem; }
.mobile-voice { display: flex; align-items: center; gap: .45rem; width: 84%; border-radius: 5px 11px 11px; padding: .5rem; background: #242a25; }
.mobile-voice button { display: grid; place-items: center; width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--green); color: #102017; font-size: .5rem; }
.mobile-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 24px; }
.mobile-wave i { flex: 1; height: 30%; border-radius: 99px; background: #668371; animation: wave-pulse 2.7s ease-in-out infinite; }
.mobile-wave i:nth-child(2), .mobile-wave i:nth-child(6) { height: 55%; animation-delay: -.4s; }
.mobile-wave i:nth-child(3), .mobile-wave i:nth-child(5) { height: 85%; animation-delay: -.8s; }
.mobile-wave i:nth-child(4) { height: 100%; animation-delay: -1.2s; }
.mobile-voice small { color: #7b847e; font-size: .46rem; }
.mobile-composer { position: absolute; left: .7rem; right: .7rem; bottom: .7rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 11px; padding: .55rem; background: #191d1a; color: #667069; font-size: .55rem; }
.mobile-composer p { flex: 1; margin: 0; }
.mobile-composer b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--green); color: #102017; font-size: .5rem; }
.visual-ring { position: absolute; border: 1px solid rgba(111,211,154,.09); border-radius: 50%; animation: ring-turn 24s linear infinite; }
.ring-one { width: 530px; height: 530px; }
.ring-two { width: 410px; height: 410px; border-style: dashed; animation-direction: reverse; animation-duration: 32s; }
.version-float { position: absolute; z-index: 5; left: 4%; bottom: 55px; display: flex; align-items: center; gap: .65rem; border: 1px solid var(--line-strong); border-radius: 14px; padding: .75rem .9rem; background: rgba(23,28,24,.94); box-shadow: var(--shadow); backdrop-filter: blur(16px); animation: float 5s ease-in-out infinite; }
.version-float > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(111,211,154,.12); color: var(--green); }
.version-float div { display: flex; flex-direction: column; }
.version-float small { color: #7d8780; font-size: .55rem; }
.version-float b { font-size: .7rem; }
.android-float { position: absolute; z-index: 4; right: 8%; top: 80px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 15px; background: #1b211c; color: var(--green); font-weight: 800; box-shadow: var(--shadow); animation: float 5.5s -2s ease-in-out infinite; }

.release-strip { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.release-strip > div { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.2rem; border-right: 1px solid var(--line); }
.release-strip > div:last-child { border-right: 0; }
.release-strip > div > span { color: var(--green); font-size: .65rem; }
.release-strip p { display: flex; flex-direction: column; margin: 0; }
.release-strip b { font-size: .82rem; }
.release-strip small { color: #737d76; font-size: .65rem; }

.download-section-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 125px 0; }
.install-heading { max-width: 760px; margin-bottom: 3rem; }
.install-heading > p:last-child { max-width: 590px; margin-top: 1.2rem; color: var(--muted); line-height: 1.7; }
.install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.install-card { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 48%), var(--surface); transition: transform .35s ease, border-color .35s ease; }
.step-number { color: #626c65; font-size: .65rem; }
.step-art { height: 140px; margin: 1.6rem 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: #0d100e; }
.download-art { gap: .7rem; }
.download-art i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(111,211,154,.1); color: var(--green); font-style: normal; animation: download-nudge 2.8s ease-in-out infinite; }
.download-art b { color: #8c968f; font-size: .7rem; }
.permission-art { flex-direction: column; gap: .45rem; }
.permission-art i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #0c1a11; font-style: normal; }
.permission-art span { width: 52%; height: 5px; border-radius: 99px; background: #303631; }
.permission-art span:last-child { width: 34%; }
.open-art { gap: 1.1rem; }
.open-art img { width: 55px; height: 55px; border-radius: 16px; box-shadow: 0 0 35px rgba(111,211,154,.12); }
.open-art i { color: var(--green); font-style: normal; }
.install-card h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.install-card p { color: var(--muted); font-size: .85rem; line-height: 1.65; }

.release-section { padding-top: 30px; }
.release-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; border: 1px solid rgba(111,211,154,.14); border-radius: 22px; padding: 2.3rem; background: radial-gradient(circle at 18% 50%, rgba(62,142,94,.1), transparent 35%), var(--surface); }
.release-icon img { width: 82px; height: 82px; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.release-copy .eyebrow { margin-bottom: .7rem; }
.release-copy h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.release-copy > p:last-child { max-width: 580px; margin: .8rem 0 0; color: var(--muted); }
.release-side { min-width: 220px; text-align: right; }
.release-side .button { width: 100%; }
.release-side p { color: #69726c; font-size: .65rem; }
.release-side p a { color: var(--green); }

@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(111,211,154,.07); } 50% { box-shadow: 0 0 0 7px rgba(111,211,154,.01); } }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes download-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

@media (hover: hover) and (pointer: fine) {
  .install-card:hover { transform: translateY(-5px); border-color: rgba(111,211,154,.2); }
}

@media (max-width: 940px) {
  .download-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 74px; }
  .download-intro { text-align: center; }
  .download-intro .eyebrow, .download-actions, .download-facts, .release-meta { justify-content: center; }
  .download-lead { margin-left: auto; margin-right: auto; }
  .download-visual { width: min(650px, 100%); margin: auto; }
  .release-card { grid-template-columns: auto 1fr; }
  .release-side { grid-column: span 2; text-align: left; }
}

@media (max-width: 720px) {
  .download-hero { width: calc(100% - 28px); min-height: auto; padding: 60px 0 70px; }
  .download-intro h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .download-actions { flex-direction: column; }
  .download-actions .button { width: 100%; }
  .download-visual { min-height: 510px; }
  .android-phone { width: 245px; height: 490px; transform: none; }
  .visual-ring { display: none; }
  .version-float { left: 0; bottom: 12px; }
  .android-float { right: 1%; top: 60px; }
  .release-strip { width: calc(100% - 28px); grid-template-columns: 1fr; }
  .release-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .release-strip > div:last-child { border-bottom: 0; }
  .download-section-wrap { width: calc(100% - 28px); padding: 90px 0; }
  .install-grid { grid-template-columns: 1fr; }
  .install-card { min-height: 360px; }
  .release-card { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; }
  .release-icon { justify-self: center; }
  .release-side { grid-column: auto; min-width: 0; text-align: center; }
  .release-section { padding-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .android-phone { transform: none; }
}
