/* ==================== DOWNLOAD PAGE ==================== */

.dl{position:relative;min-height:100vh;padding:130px 0 80px;overflow:hidden}

/* Background layers */
.dl-bg{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%,rgba(108,99,255,.1),transparent 60%),
    radial-gradient(ellipse 40% 50% at 20% 80%,rgba(52,211,153,.04),transparent 50%),
    radial-gradient(ellipse 40% 50% at 80% 70%,rgba(168,85,247,.05),transparent 50%)}

/* Concentric rings */
.dl-ring{position:absolute;border-radius:50%;border:1px solid rgba(108,99,255,.05);pointer-events:none}
.dl-ring--1{width:700px;height:700px;left:50%;top:40%;transform:translate(-50%,-50%)}
.dl-ring--2{width:500px;height:500px;left:50%;top:40%;transform:translate(-50%,-50%);border-style:dashed;border-color:rgba(108,99,255,.04)}

/* Grid lines */
.dl-grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.03;
  background-image:
    linear-gradient(rgba(108,99,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,99,255,.5) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 10%,transparent 60%);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 45%,#000 10%,transparent 60%)}

/* Deco images */
.dl-deco-hex{width:200px;left:-30px;top:20%;opacity:.5}
.dl-deco-circuit{width:280px;right:-40px;bottom:15%;opacity:.4}
.dl-deco-cross-1{width:18px;left:12%;top:25%;opacity:.35}
.dl-deco-cross-2{width:14px;right:15%;top:35%;opacity:.25}
.dl-deco-cross-3{width:16px;left:30%;bottom:20%;opacity:.3}

/* Inner */
.dl-inner{position:relative;max-width:var(--max-w);margin:0 auto;padding:0 var(--px);display:flex;flex-direction:column;align-items:center;text-align:center}

/* Tabs at top */
.dl-tabs{display:flex;gap:6px;margin-bottom:40px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px}
.dl-tab{padding:12px 32px;border-radius:14px;border:none;background:transparent;color:var(--text2);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s}
.dl-tab:hover{color:#fff;background:rgba(255,255,255,.03)}
.dl-tab--active{background:var(--accent);color:#fff;box-shadow:0 4px 20px var(--accent-glow)}

/* Title */
.dl-title{font-size:52px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:-.5px}
.dl-subtitle{font-size:17px;color:var(--text2);margin-bottom:28px}

/* Store buttons */
.dl-stores{margin-bottom:48px}
.dl-stores-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.dl-store-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:#fff;font-size:14px;font-weight:700;transition:.2s}
.dl-store-btn:hover{border-color:rgba(108,99,255,.3);background:rgba(108,99,255,.08)}
.dl-store-btn--active{background:var(--accent);border-color:var(--accent)}
.dl-store-btn img,.dl-store-btn svg{flex-shrink:0}

/* Image area */
.dl-image-wrap{position:relative;width:100%;display:flex;justify-content:center}
.dl-image-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,99,255,.12),transparent 55%);pointer-events:none}
.dl-image{position:relative;z-index:1;width:100%;display:flex;justify-content:center;align-items:center;height:500px}
.dl-img{max-width:700px;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 24px 80px rgba(108,99,255,.12)) drop-shadow(0 8px 32px rgba(0,0,0,.4));
  transition:.3s}
.dl-img.dl-img--desktop{max-width:1000px}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
  .dl{padding:100px 0 40px}
  .dl-title{font-size:30px}
  .dl-subtitle{font-size:14px}
  .dl-image{height:auto}
  .dl-tabs{padding:4px}
  .dl-tab{padding:10px 20px;font-size:13px}
  .dl-store-btn{padding:10px 16px;font-size:13px}
  .dl-ring--1{width:400px;height:400px}
  .dl-ring--2{width:280px;height:280px}
  .dl-deco-hex,.dl-deco-circuit{display:none}
}

@media(max-width:480px){
  .dl-title{font-size:24px}
  .dl-tab{padding:8px 16px;font-size:12px}
}