.elementor-948407 .elementor-element.elementor-element-1380ae8{--display:flex;--padding-top:0px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-948407 .elementor-element.elementor-element-1380ae8:not(.elementor-motion-effects-element-type-background), .elementor-948407 .elementor-element.elementor-element-1380ae8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#070F23;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2d8361e */:root{
     --blue:#0066FF;
     --orange:#FF6A00;
     --bg1:#071025;
     --card:#071428;
     --muted:#9fb7d6;
     --glass: rgba(255,255,255,0.03);
     --radius:16px;
     --maxw:1100px;
}
 .sonics-landing{
    max-width:var(--maxw);
    margin:18px auto;
    padding:14px
}
/* container */
 .sonics-wrap{
    background:linear-gradient(180deg,var(--bg1),#07112a);
    border-radius:18px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.04);
    box-shadow:0 18px 60px rgba(2,6,23,0.6);
    overflow:hidden
}
/* hero layout - mobile first */
 .hero{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:stretch
}
/* image on top, large and dramatic */
 .hero .visual{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,0.6)
}
 .hero .visual img{
    width:100%;
    height:auto;
    display:block;
    transform-origin:center center;
    transition:transform .9s cubic-bezier(.2,.9,.3,1)
}
 .hero .visual:hover img{
    transform:scale(1.04) rotate(-0.5deg)
}
 .visual .badge{
    position:absolute;
    left:12px;
    top:12px;
    background:linear-gradient(90deg,var(--orange),#ff9a3c);
    color:#021224;
    padding:10px 12px;
    border-radius:10px;
    font-weight:900;
    box-shadow:0 6px 18px rgba(255,106,0,0.18)
}
 .visual .ribbon{
    position:absolute;
    right:12px;
    top:12px;
    background:linear-gradient(90deg,var(--blue),#2aa0ff);
    color:#021224;
    padding:8px 12px;
    border-radius:10px;
    font-weight:800
}
/* content box */
 .hero .content{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:18px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.02);
    display:flex;
    flex-direction:column;
    gap:12px
}
 .kicker{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--orange));
    color:#021224;
    font-weight:900;
    letter-spacing:.6px;
    align-self:flex-start
}
 .title{
    font-size:22px;
    font-weight:900;
    color:#ffffff;
    line-height:1.55
}
 .subtitle{
    font-size:15px;
    color:#e8f8ff;
    line-height:1.6
}
 .lead{
    font-size:16px;
    color:var(--muted)
}
/* dynamic stats row */
 .stats{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}
 .stat-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
    padding:10px 12px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:140px
}
 .stat-card b{
    font-size:18px;
    color:#fff
}
 .stat-muted{
    font-size:12px;
    color:var(--muted)
}
/* CTA big */
 .cta-row{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:6px
}
 .btn-primary{
     background:linear-gradient(180deg,var(--blue),#0050d1);
    color:white;
    padding:14px 18px;
    border-radius:12px;
    font-weight:900;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow:0 14px 40px rgba(0,102,255,0.18);
    transform:translateZ(0);
     animation:popIn .9s ease both;
}
 @keyframes popIn{
    0%{
        transform:translateY(8px) scale(.98);
        opacity:0
    }
    100%{
        transform:none;
        opacity:1
    }
}
 .btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    padding:12px 14px;
    border-radius:12px;
    color:var(--muted);
    font-weight:800;
    text-decoration:none
}
/* urgency band */
 .urgency{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:linear-gradient(90deg,#0b1229, rgba(255,255,255,0.01));
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.02);
    margin-top:8px
}
 .timer{
    font-weight:900;
    color:var(--orange);
    font-size:18px
}
 .mini-desc{
    font-size:13px;
    color:var(--muted)
}
/* promo gift area */
 .gift{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}
 .gift .input{
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    background:transparent;
    color:#fff;
    min-width:200px
}
 .surprise{
    background:linear-gradient(90deg,var(--orange),#ff9a3c);
    color:#021224;
    padding:10px 12px;
    border-radius:10px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(255,106,0,0.14)
}
 .confetti{
    pointer-events:none;
    position:absolute;
    inset:0;
    display:none
}
/* features table */
 .features{
    margin-top:10px;
    border-radius:10px;
    padding:12px;
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.02)
}
 .features table{
    width:100%;
    border-collapse:collapse;
    color:#dbeffd;
    font-size:14px
}
 .features th{
    text-align:right;
    padding:8px 10px;
    color:var(--muted);
    font-weight:800
}
 .features td{
    padding:8px 10px;
    border-top:1px dashed rgba(255,255,255,0.03)
}
/* FAQ */
 .faq{
    margin-top:12px
}
 .faq button{
    width:100%;
    text-align:right;
    background:transparent;
    border:0;
    padding:12px 8px;
    border-radius:10px;
    font-weight:800;
    color:#cfe9ff;
    display:flex;
    justify-content:space-between;
    align-items:center
}
 .faq .panel{
    padding:10px 12px;
    color:var(--muted);
    border-radius:10px;
    margin-top:8px;
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
    display:none
}



 
/* popup styles - short English comments */
 .sonics-discount-modal {
     display:none;
     position:fixed;
     inset:0;
     z-index:9999;
     direction:rtl;
     font-family:'Vazirmatn',sans-serif;
}
 .sdm-backdrop {
     position:fixed;
     inset:0;
     background:#ffffff44;
     z-index: -1;
}
 .sdm-panel {
     position:relative;
     max-width:420px;
     margin:6vh auto;
     background:#0b1220;
     color:#fff;
     border-radius:12px;
     padding:18px;
     box-shadow:0 10px 40px rgba(0,0,0,0.6);
     transform:translateY(0);
}
 .sdm-close {
     position:absolute;
     left:12px;
     top:12px;
     background:transparent;
     border:0;
     color:#fff;
     font-size:18px;
     cursor:pointer;
}
 .sdm-panel h2 {
     margin:0 0 8px;
     font-size:18px;
     color:#fff;
}
 .sdm-desc {
     margin:0 0 12px;
     color:#d0eaff;
     font-size:13px;
}
 .sdm-code {
     display:block;
     margin:10px 0;
     padding:14px;
     background:linear-gradient(90deg,#002bff1a,#ff8c0014);
     color:#e8faff;
     font-weight:800;
     letter-spacing:2px;
     text-align:center;
     font-size:20px;
     border-radius:8px;
}
 .sdm-actions {
     display:flex;
     gap:8px;
     justify-content:center;
     flex-wrap:wrap;
     margin-top:10px;
}
 .sdm-btn {
     background:#0066FF;
     color:#fff;
     border:0;
     padding:8px 12px;
     border-radius:8px;
     cursor:pointer;
     font-weight:700;
     text-decoration:none;
}
 .sdm-btn.sdm-link {
     background:#0b1220;
     border:1px solid rgba(255,255,255,0.08);
}
 .sdm-btn:active {
     transform:translateY(1px);
}
 .sdm-toast {
     display:none;
     position:absolute;
     bottom:10px;
     left:12px;
     background:#222;
     color:#fff;
     padding:6px 10px;
     border-radius:6px;
     font-size:13px;
}
.sdm-actions + * {
    text-align: center;
    margin-top: 16px;
    line-height: 0
}
 @media (max-width:520px){
     .sdm-panel{
         margin:10vh 12px;
    }
     .sdm-code{
         font-size:18px;
    }
}
 
 
@media (max-width:520px){ .sdm-panel{ margin:10vh 12px; } .sdm-code{ font-size:18px; } }
















/* responsive adjustments */
 @media(min-width:900px){
     .hero{
        flex-direction:row
    }
     .hero .visual{
        flex:0 0 48%
    }
     .hero .content{
        flex:0 0 52%
    }
}
/* small helpers */
 .muted{
    color:var(--muted)
}
 .tiny{
    font-size:12px;
    color:var(--muted)
}/* End custom CSS */