body{
    margin: 0;
    font-family: "ElMessiri", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Kufi Arabic", Arial, sans-serif;
    background:
            radial-gradient(900px 600px at 20% 10%, rgba(201,173,167,0.55), transparent 60%),
            radial-gradient(900px 600px at 80% 30%, rgba(154,140,152,0.45), transparent 55%),
            radial-gradient(900px 700px at 50% 100%, rgba(74,78,105,0.22), transparent 55%),
            linear-gradient(160deg, var(--off), rgba(242,233,228,0.85));
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--dark);
}

.wrap{
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* بطاقات يسار + نص يمين (مثل الصورة) */
    gap: 18px;
    align-items: stretch;
}
@media (max-width: 860px){
    .wrap{ grid-template-columns: 1fr; }
}

.hero{
    background: rgba(242,233,228,0.55);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px;
    overflow: hidden;
    position: relative;
    isolation: isolate; /* ممتاز عشان الطبقات تكون واضحة */
}

.blob{
    position: absolute;
    z-index: 0;  /* الخلفيات ورا */
    inset: auto auto -140px -160px;
    width: 420px; height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(201,173,167,0.7), rgba(154,140,152,0.35), transparent 62%);
    filter: blur(4px);
    transform: rotate(12deg);
    pointer-events: none;
}
.blob2{
    position: absolute;
    inset: -160px -190px auto auto;
    width: 420px; height: 420px;
    background: radial-gradient(circle at 50% 40%, rgba(74,78,105,0.28), rgba(34,34,59,0.12), transparent 65%);
    filter: blur(4px);
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;  /* الخلفيات ورا */
}

/* شعار + جملة */
.logo{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-direction: row-reverse; /* الصورة يسار */
    z-index: 9999;      /* فوق الجميع */
    position: relative; /* أو absolute إذا تبغاه بمكان ثابت */
}

.logo img{
    width: 88px;
    height: 88px;
    object-fit: contain;

    /* تثبيت الشفافية (عشان ما يطلع باهت) */
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;

    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    display: block;
}

.logo .tagline{
    font-weight: 900;
    font-size: 16px;
    line-height: 1.4;

    /* اللون المطلوب */
    color: #4A4E69;

    /* يمين شوي */
    padding-right: 14px;
    text-align: right;
    z-index: 9999;      /* فوق الجميع */
    position: relative; /* أو absolute إذا تبغاه بمكان ثابت */
}

/* نصوص يمين في المنتصف */
.title, .subtitle, .note{
    text-align: center;
}

.title{
    margin: 14px 0 10px;
    font-size: clamp(16px, 2.0vw, 26px);
    z-index: 9999;      /* فوق الجميع */
    position: relative; /* أو absolute إذا تبغاه بمكان ثابت */
    line-height: 1.15;
    letter-spacing: -0.4px;
    font-weight: 900;

    /* اللون المطلوب */
    color: #4A4E69;

    white-space: nowrap;
}
.heart{
    font-size: 0.78em;
    margin-inline-start: 6px;
}
@media (max-width: 380px){
    .title{ white-space: normal; }
}

.subtitle{
    margin: 0 0 16px;
    font-size: clamp(14px, 1.7vw, 18px);
    line-height: 1.9;
    font-weight: 100;
    z-index: 9999;      /* فوق الجميع */
    position: relative; /* أو absolute إذا تبغاه بمكان ثابت */
    /* لون واحد أخف من فوق */
    color: #4A4E69;
}

.note{
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.9;
    font-weight: 100;
    z-index: 9999;      /* فوق الجميع */
    position: relative; /* أو absolute إذا تبغاه بمكان ثابت */
    /* نفس لون الشرح (أخف من فوق) */
    color: #4A4E69;
}

.panel{
    background: rgba(242,233,228,0.65);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    display: grid;
    gap: 12px;
}

.grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.store{
    border-radius: 16px;
    border: 1px solid rgba(34,34,59,0.12);
    background: rgba(255,255,255,0.55);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.store:hover{
    transform: translateY(-1px);
    border-color: rgba(34,34,59,0.20);
    background: rgba(255,255,255,0.70);
}
.store.active{
    border-color: rgba(34,34,59,0.35);
    box-shadow: 0 10px 30px rgba(34,34,59,0.16);
    background: rgba(255,255,255,0.82);
}

.left{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* مربع أيقونة موحد */
.icon{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(34,34,59,0.06);
    border: 1px solid rgba(34,34,59,0.10);
    flex: 0 0 auto;
}

/* توحيد حجم الأيقونات */
.icon img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

/* لو SVG عنده فراغ داخلي ويطلع أصغر/أكبر، عدلي scale هنا */
.store--ios .icon img{ transform: scale(1.00); }
.store--android .icon img{ transform: scale(1.00); }
.store--wa .icon img{ transform: scale(1.00); }

.meta{
    min-width: 0;
}
.meta .name{
    font-weight: 900;
    font-size: 15px;
    margin: 0 0 3px;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meta .desc{
    margin: 0;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.7;
    font-weight: 600;
}

.btn{
    appearance: none;
    border: 0;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    background: var(--dark);
    color: var(--off);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    transition: transform .12s ease, opacity .12s ease;
    white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); opacity: .95; }
.btn.secondary{ background: #22223B; }