/* ============ DOWNLOAD SECTION — PREMIUM ============ */
.dl-section{
    position:relative;
    padding:56px 5%;
    margin-top:0;
    background:linear-gradient(160deg,#f6f9ff 0%,#eef3ff 45%,#f1f5ff 100%);
    overflow:hidden;
    isolation:isolate;
}
.dl-section::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        radial-gradient(circle at 18% 20%,rgba(59,114,245,.10) 0,transparent 38%),
        radial-gradient(circle at 82% 80%,rgba(245,166,35,.08) 0,transparent 40%);
    pointer-events:none;z-index:-1;
}
.dl-section::after{
    content:'';
    position:absolute;inset:0;
    background-image:radial-gradient(rgba(26,77,224,.07) 1px,transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 35%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 35%,transparent 100%);
    pointer-events:none;z-index:-1;
}
.dl-wrap{
    max-width:1200px;margin:0 auto;
    display:grid;grid-template-columns:1.05fr .95fr;gap:64px;
    align-items:center;position:relative;
}

/* ----- LEFT: content ----- */
.dl-left{position:relative}
.dl-chip{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
    border:1px solid rgba(26,77,224,.12);
    color:#1a4de0;font-size:.7rem;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;padding:7px 14px;border-radius:999px;
    box-shadow:0 4px 16px rgba(26,77,224,.08);margin-bottom:18px;
}
.dl-chip .dl-chip-dot{
    width:7px;height:7px;border-radius:50%;
    background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.55);
    animation:dlPulse 1.8s infinite;
}
@keyframes dlPulse{
    0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
    70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}
    100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.dl-title{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(1.9rem,3.2vw,2.6rem);
    font-weight:800;line-height:1.12;letter-spacing:-1.2px;
    color:#0a0f1e;margin-bottom:14px;
}
.dl-title .dl-accent{
    background:linear-gradient(135deg,#1a4de0 0%,#3b72f5 60%,#6097f8 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;position:relative;display:inline-block;
}
.dl-title .dl-accent::after{
    content:'';position:absolute;left:0;right:0;bottom:-4px;height:6px;
    background:linear-gradient(135deg,#f5a623 0%,#f7c355 100%);
    border-radius:6px;opacity:.35;
}
.dl-sub{
    font-size:.98rem;color:#475569;line-height:1.7;
    max-width:480px;margin-bottom:24px;
}

/* mini feature pills */
.dl-feats{
    display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;
}
.dl-feat{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
    border:1px solid rgba(15,23,42,.08);
    color:#1e2a45;font-size:.74rem;font-weight:600;
    padding:6px 11px;border-radius:999px;
    transition:all .25s ease;
}
.dl-feat:hover{
    transform:translateY(-2px);
    border-color:rgba(26,77,224,.25);
    box-shadow:0 4px 14px rgba(26,77,224,.10);
}
.dl-feat svg{width:13px;height:13px;flex-shrink:0}

/* ----- DOWNLOAD BUTTONS ----- */
.dl-stores{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:24px;
}
.dl-btn{
    display:inline-flex;align-items:center;gap:10px;
    background:#0a0f1e;color:#fff;
    padding:9px 16px 9px 13px;border-radius:12px;
    text-decoration:none;cursor:pointer;border:none;
    font-family:'DM Sans',sans-serif;
    transition:all .28s cubic-bezier(.4,0,.2,1);
    position:relative;overflow:hidden;
    box-shadow:0 4px 14px rgba(10,15,30,.18);
}
.dl-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 100%);
    transform:translateX(-100%);transition:transform .55s ease;
}
.dl-btn:hover::before{transform:translateX(100%)}
.dl-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(10,15,30,.28);
    color:#fff;
}
.dl-btn:active{transform:translateY(-1px)}
.dl-btn-ico{
    width:26px;height:26px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
}
.dl-btn-ico svg{width:100%;height:100%;display:block}
.dl-btn-text{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.dl-btn-top{font-size:.62rem;opacity:.78;font-weight:500;letter-spacing:.3px;text-transform:uppercase}
.dl-btn-bot{font-size:.92rem;font-weight:700;margin-top:1px;letter-spacing:-.2px}

/* light variant: keep gradient style for some */
.dl-btn-light{
    background:#fff;color:#0a0f1e;
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.dl-btn-light .dl-btn-ico{color:#0a0f1e}
.dl-btn-light:hover{
    color:#0a0f1e;
    border-color:rgba(26,77,224,.32);
    box-shadow:0 10px 28px rgba(26,77,224,.18);
}

/* trust strip */
.dl-trust{
    display:flex;align-items:center;gap:14px;
    padding-top:18px;border-top:1px dashed rgba(15,23,42,.10);
    flex-wrap:wrap;
}
.dl-trust-stars{display:inline-flex;gap:2px;color:#f5a623}
.dl-trust-stars svg{width:14px;height:14px}
.dl-trust-text{font-size:.78rem;color:#64748b;font-weight:500}
.dl-trust-text strong{color:#0a0f1e;font-weight:700}

/* ============ RIGHT: visual ============ */
.dl-right{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:480px;
}
.dl-blob{
    position:absolute;
    width:380px;height:380px;
    background:radial-gradient(circle at 30% 30%,rgba(59,114,245,.18) 0%,rgba(59,114,245,0) 70%);
    border-radius:50%;
    top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:0;
    animation:dlBlobDrift 12s ease-in-out infinite alternate;
}
.dl-blob-2{
    position:absolute;
    width:260px;height:260px;
    background:radial-gradient(circle at 60% 60%,rgba(245,166,35,.20) 0%,rgba(245,166,35,0) 70%);
    border-radius:50%;
    top:30%;right:8%;
    z-index:0;
    animation:dlBlobDrift 16s ease-in-out infinite alternate-reverse;
}
@keyframes dlBlobDrift{
    from{transform:translate(-50%,-50%) scale(1)}
    to{transform:translate(-46%,-54%) scale(1.12)}
}

/* phone mockup */
.dl-phone{
    position:relative;
    width:248px;height:506px;
    background:linear-gradient(160deg,#0a0f1e 0%,#1e2a45 100%);
    border-radius:36px;
    padding:8px;
    box-shadow:
        0 30px 80px rgba(10,15,30,.32),
        0 12px 30px rgba(26,77,224,.18),
        inset 0 0 0 1.5px rgba(255,255,255,.08);
    z-index:2;
    animation:dlPhoneFloat 6s ease-in-out infinite;
}
@keyframes dlPhoneFloat{
    0%,100%{transform:translateY(0) rotate(-2deg)}
    50%{transform:translateY(-10px) rotate(-2deg)}
}
.dl-phone::before{
    content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);
    width:74px;height:16px;background:#0a0f1e;border-radius:0 0 12px 12px;z-index:3;
}
.dl-phone-screen{
    width:100%;height:100%;
    background:#fff;
    border-radius:28px;
    overflow:hidden;position:relative;
}
.dl-phone-screen img{
    width:100%;height:100%;
    display:block;
    object-fit:cover;
    object-position:top center;
}
.dl-phone-glare{
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);
    pointer-events:none;
    border-radius:28px;
}
/* floating decorative chips */
.dl-float{
    position:absolute;background:#fff;
    border-radius:14px;padding:10px 12px;
    box-shadow:0 12px 32px rgba(15,23,42,.12);
    display:flex;align-items:center;gap:8px;
    z-index:3;font-family:'DM Sans',sans-serif;
    border:1px solid rgba(15,23,42,.05);
}
.dl-float-ico{
    width:32px;height:32px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dl-float-ico svg{width:16px;height:16px}
.dl-float-text{display:flex;flex-direction:column;line-height:1.1}
.dl-float-top{font-size:.58rem;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.dl-float-bot{font-size:.78rem;color:#0a0f1e;font-weight:800;margin-top:2px;font-family:'Plus Jakarta Sans',sans-serif}

.dl-float-1{
    top:8%;left:0%;
    animation:dlFloatA 5s ease-in-out infinite;
}
.dl-float-2{
    bottom:14%;right:0%;
    animation:dlFloatB 6s ease-in-out infinite;
}
.dl-float-3{
    top:42%;right:-4%;
    animation:dlFloatC 7s ease-in-out infinite;
}
@keyframes dlFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes dlFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes dlFloatC{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}

.dl-float-1 .dl-float-ico{background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);color:#15803d}
.dl-float-2 .dl-float-ico{background:linear-gradient(135deg,#dbe8fe 0%,#bfd3fe 100%);color:#1a4de0}
.dl-float-3 .dl-float-ico{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);color:#a16207}

/* small floating decorative svg dots */
.dl-decor{
    position:absolute;z-index:1;opacity:.6;
    animation:dlDecor 8s ease-in-out infinite;
}
.dl-decor-1{top:6%;right:24%;color:#1a4de0;animation-delay:-1s}
.dl-decor-2{bottom:8%;left:14%;color:#f5a623;animation-delay:-3s}
.dl-decor-3{top:50%;left:-2%;color:#10b981;animation-delay:-5s}
@keyframes dlDecor{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-12px) rotate(8deg)}
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
    .dl-wrap{grid-template-columns:1fr;gap:48px;text-align:center}
    .dl-left{display:flex;flex-direction:column;align-items:center}
    .dl-sub{margin-left:auto;margin-right:auto}
    .dl-stores,.dl-feats{justify-content:center}
    .dl-trust{justify-content:center}
    .dl-right{min-height:420px;order:-1}
}
@media (max-width: 560px){
    .dl-section{padding:40px 5%}
    .dl-phone{width:208px;height:420px}
    .dl-float{padding:8px 10px}
    .dl-float-ico{width:28px;height:28px}
    .dl-float-bot{font-size:.7rem}
    .dl-btn-bot{font-size:.85rem}
    .dl-btn{padding:8px 14px 8px 11px}
}

/* RTL adjustments */
[dir="rtl"] .dl-btn-text,
[dir="rtl"] .dl-float-text{text-align:right}
[dir="rtl"] .dl-route-col.dl-r{align-items:flex-start;text-align:left}

/* ============ INSTALL MODAL ============ */
.dl-modal{
    position:fixed;inset:0;z-index:10000;
    display:none;align-items:center;justify-content:center;
    padding:20px;
    font-family:'DM Sans',sans-serif;
}
.dl-modal.open{display:flex;animation:dlModalIn .25s ease}
@keyframes dlModalIn{from{opacity:0}to{opacity:1}}
.dl-modal-backdrop{
    position:absolute;inset:0;
    background:rgba(10,15,30,.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.dl-modal-card{
    position:relative;
    width:100%;max-width:440px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 30px 80px rgba(10,15,30,.32),0 12px 30px rgba(26,77,224,.18);
    padding:36px 32px 32px;
    text-align:center;
    animation:dlModalPop .35s cubic-bezier(.34,1.56,.64,1);
    overflow:hidden;
}
.dl-modal-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,#1a4de0,#3b72f5,#6097f8);
    border-radius:24px 24px 0 0;
}
@keyframes dlModalPop{
    from{opacity:0;transform:scale(.92) translateY(8px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.dl-modal-close{
    position:absolute;top:14px;right:14px;
    width:34px;height:34px;border-radius:50%;
    background:#f1f5ff;color:#475569;
    border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;
    transition:all .2s ease;
    z-index:2;
}
.dl-modal-close:hover{background:#e2e9ff;color:#0a0f1e;transform:rotate(90deg)}
.dl-modal-close svg{width:16px;height:16px}
.dl-modal-icon{
    width:80px;height:80px;border-radius:24px;
    margin:8px auto 22px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;position:relative;
    box-shadow:0 16px 40px rgba(26,77,224,.18);
}
.dl-modal-icon::before{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 60%);
}
.dl-modal-icon::after{
    content:'';position:absolute;inset:-2px;border-radius:inherit;
    background:inherit;filter:blur(20px);opacity:.4;z-index:-1;
}
.dl-modal-icon svg{width:38px;height:38px;position:relative;z-index:1}
.dl-modal-icon.ic-success{background:linear-gradient(135deg,#059669 0%,#10b981 60%,#34d399 100%);box-shadow:0 16px 40px rgba(16,185,129,.32)}
.dl-modal-icon.ic-success::after{background:linear-gradient(135deg,#10b981,#34d399)}
.dl-modal-icon.ic-apple{background:linear-gradient(135deg,#0a0f1e 0%,#1e2a45 100%);box-shadow:0 16px 40px rgba(10,15,30,.32)}
.dl-modal-icon.ic-apple::after{background:#0a0f1e}
.dl-modal-icon.ic-info{background:linear-gradient(135deg,#1a4de0 0%,#3b72f5 60%,#6097f8 100%)}
.dl-modal-icon.ic-info::after{background:linear-gradient(135deg,#1a4de0,#3b72f5)}
.dl-modal-icon.ic-update{background:linear-gradient(135deg,#f5a623 0%,#f7c355 60%,#fbd778 100%);box-shadow:0 16px 40px rgba(245,166,35,.32)}
.dl-modal-icon.ic-update::after{background:linear-gradient(135deg,#f5a623,#f7c355)}
.dl-modal-icon.ic-loading{background:linear-gradient(135deg,#1a4de0 0%,#3b72f5 100%)}
.dl-modal-icon.ic-loading svg{animation:dlSpin 1s linear infinite}
@keyframes dlSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.dl-modal-title{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:1.45rem;font-weight:800;
    color:#0a0f1e;letter-spacing:-.6px;
    margin-bottom:8px;
}
.dl-modal-sub{
    font-size:.95rem;color:#475569;line-height:1.6;
    margin-bottom:24px;max-width:340px;margin-left:auto;margin-right:auto;
}
.dl-modal-version{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Space Mono',monospace;
    font-size:.7rem;font-weight:700;letter-spacing:.4px;
    padding:4px 10px;border-radius:999px;
    background:rgba(16,185,129,.10);color:#047857;
    border:1px solid rgba(16,185,129,.20);
    margin-bottom:18px;
}
.dl-modal-version svg{width:10px;height:10px}
.dl-modal-steps{
    text-align:left;
    background:#f8faff;
    border:1px solid rgba(26,77,224,.10);
    border-radius:14px;
    padding:14px 16px;
    margin:0 auto 22px;
    max-width:340px;
    counter-reset:dlsteps;
}
.dl-modal-steps li{
    display:flex;align-items:center;gap:10px;
    font-size:.88rem;color:#1e2a45;font-weight:500;
    padding:7px 0;
    counter-increment:dlsteps;
}
.dl-modal-steps li::before{
    content:counter(dlsteps);
    width:22px;height:22px;border-radius:50%;
    background:linear-gradient(135deg,#1a4de0,#3b72f5);
    color:#fff;font-family:'Space Mono',monospace;
    font-size:.7rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.dl-modal-steps li svg{width:14px;height:14px;color:#1a4de0;flex-shrink:0}

.dl-modal-actions{
    display:flex;gap:10px;flex-wrap:wrap;
    justify-content:center;
}
.dl-modal-btn{
    flex:1;min-width:120px;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:12px 20px;border-radius:12px;
    font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;
    border:none;cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
}
.dl-modal-btn svg{width:15px;height:15px}
.dl-modal-btn-primary{
    background:linear-gradient(135deg,#1a4de0 0%,#3b72f5 100%);
    color:#fff;
    box-shadow:0 6px 18px rgba(26,77,224,.32);
}
.dl-modal-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(26,77,224,.42)}
.dl-modal-btn-secondary{
    background:#f1f5ff;color:#1a4de0;
    border:1px solid rgba(26,77,224,.12);
}
.dl-modal-btn-secondary:hover{background:#e2e9ff;border-color:rgba(26,77,224,.25)}

.dl-modal-view{display:none}
.dl-modal-view.active{display:block;animation:dlViewIn .3s ease}
@keyframes dlViewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:480px){
    .dl-modal-card{padding:30px 22px 24px;border-radius:20px}
    .dl-modal-icon{width:68px;height:68px;border-radius:20px}
    .dl-modal-icon svg{width:32px;height:32px}
    .dl-modal-title{font-size:1.25rem}
    .dl-modal-actions{flex-direction:column}
    .dl-modal-btn{width:100%}
}