/* =========================================================
   hero-variants.css
   أنماط الهيروز 2 و 3 و 4 — تُضاف بعد style.css
   الألوان تأتي من متغيّرات :root الموجودة أصلاً (تُحقن من قاعدة البيانات)
   الهيرو 1 يستخدم أنماط style.css الحالية
   ========================================================= */

/* أداة مساعدة لتغطية الصور داخل الإطارات */
.hv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* ============ الهيرو 2 — Centered Spotlight ============ */
.heroV2 {
    position: relative;
    overflow: hidden;
    padding: 60px 0 0;
    color: #fff;
    background: linear-gradient(135deg,var(--teal-deep) 0%,var(--teal-dark) 55%,var(--teal) 100%);
    isolation: isolate
}

    .heroV2::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(ellipse at 20% 15%,rgba(201,169,97,.20),transparent 55%),radial-gradient(ellipse at 82% 78%,rgba(255,255,255,.06),transparent 52%), radial-gradient(circle,rgba(255,255,255,.05) 1.4px,transparent 1.4px);
        background-size: auto,auto,30px 30px
    }

    .heroV2 .v2-head {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 2
    }

    .heroV2 .v2-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 20px;
        background: rgba(201,169,97,.16);
        border: 1px solid rgba(201,169,97,.45);
        border-radius: 50px;
        color: var(--gold-light);
        font-weight: 700;
        font-size: .8rem;
        margin-bottom: 18px;
        backdrop-filter: blur(12px)
    }

        .heroV2 .v2-badge i {
            color: var(--gold)
        }

    .heroV2 .v2-title {
        font-size: clamp(1.6rem,3.4vw,2.5rem);
        font-weight: 800;
        line-height: 1.25;
        margin-bottom: 14px;
        text-shadow: 0 2px 20px rgba(0,0,0,.22)
    }

    .heroV2 .v2-desc {
        font-size: clamp(.95rem,1.2vw,1.05rem);
        color: rgba(255,255,255,.85);
        line-height: 1.85;
        max-width: 540px;
        margin: 0 auto 22px
    }

    .heroV2 .v2-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 34px
    }

    .heroV2 .v2-showcase {
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        padding-bottom: 44px;
        z-index: 2
    }

    .heroV2 .v2-img {
        position: relative;
        border-radius: var(--radius-lg,28px);
        overflow: hidden;
        aspect-ratio: 16/6;
        border: 5px solid rgba(255,255,255,.9);
        box-shadow: var(--shadow-xl,0 30px 80px rgba(0,0,0,.18))
    }

        .heroV2 .v2-img::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,rgba(14,68,80,.45),transparent 55%)
        }

    .heroV2 .v2-stats {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(4,1fr);
        width: min(760px,92%);
        background: rgba(14,68,80,.72);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: var(--radius-md,18px);
        backdrop-filter: blur(14px);
        box-shadow: var(--shadow-lg,0 20px 60px rgba(0,0,0,.13));
        overflow: hidden
    }

    .heroV2 .v2-stat {
        padding: 16px 10px;
        text-align: center;
        position: relative
    }

        .heroV2 .v2-stat:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 0;
            top: 24%;
            height: 52%;
            width: 1px;
            background: linear-gradient(to bottom,transparent,rgba(201,169,97,.5),transparent)
        }

        .heroV2 .v2-stat strong {
            display: block;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--gold-light);
            line-height: 1;
            margin-bottom: 4px
        }

        .heroV2 .v2-stat span {
            font-size: .75rem;
            color: rgba(255,255,255,.75);
            font-weight: 600
        }

    .heroV2 .v2-wave {
        display: block;
        line-height: 0
    }

        .heroV2 .v2-wave svg {
            width: 100%;
            height: 70px;
            display: block
        }

@media(max-width:640px) {
    .heroV2 {
        padding: 44px 0 0
    }

        .heroV2 .v2-img {
            aspect-ratio: 16/11
        }

        .heroV2 .v2-stats {
            grid-template-columns: repeat(2,1fr);
            position: static;
            transform: none;
            width: 100%;
            margin-top: 14px
        }

        .heroV2 .v2-stat:nth-child(2)::after {
            display: none
        }

        .heroV2 .v2-showcase {
            padding-bottom: 20px
        }
}

/* ============ الهيرو 3 — Editorial Split (نسخة مطوّرة) ============ */
.heroV3 {
    position: relative;
    overflow: hidden;
    padding: 84px 0;
    isolation: isolate;
    background: radial-gradient(ellipse at 88% 8%,rgba(27,123,140,.10),transparent 46%), radial-gradient(ellipse at 4% 96%,rgba(201,169,97,.12),transparent 46%),var(--bg-light);
}

    .heroV3::before {
        content: '';
        position: absolute;
        top: -140px;
        left: -120px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(27,123,140,.10),transparent 70%);
        z-index: 0
    }

    .heroV3 .v3-row {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 2
    }

    .heroV3 .v3-text {
        position: relative;
        padding-right: 26px
    }

        .heroV3 .v3-text::before {
            content: '';
            position: absolute;
            right: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            border-radius: 4px;
            background: linear-gradient(to bottom,var(--gold),var(--teal));
            opacity: .85
        }

    .heroV3 .v3-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 18px;
        border-radius: 50px;
        background: #fff;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-md);
        color: var(--teal-dark);
        font-weight: 700;
        font-size: .8rem;
        margin-bottom: 20px
    }

        .heroV3 .v3-badge i {
            color: var(--gold)
        }

    .heroV3 .v3-title {
        font-size: clamp(2rem,4vw,3.2rem);
        font-weight: 900;
        line-height: 1.2;
        color: var(--dark);
        margin-bottom: 16px
    }

    .heroV3 .v3-desc {
        color: var(--gray-500);
        font-size: 1.08rem;
        line-height: 1.95;
        max-width: 520px;
        margin-bottom: 26px
    }

    .heroV3 .v3-features {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 30px
    }

    .heroV3 .v3-feat {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
        border-radius: var(--radius-md);
        background: rgba(255,255,255,.7);
        border: 1px solid var(--gray-200);
        backdrop-filter: blur(6px);
        box-shadow: var(--shadow-md);
        transition: .35s
    }

        .heroV3 .v3-feat:hover {
            transform: translateX(-6px);
            border-color: rgba(201,169,97,.5);
            box-shadow: var(--shadow-lg)
        }

        .heroV3 .v3-feat > i {
            width: 48px;
            height: 48px;
            flex: none;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-size: 1.15rem;
            color: #fff;
            background: linear-gradient(135deg,var(--teal),var(--teal-dark));
            box-shadow: 0 6px 16px rgba(27,123,140,.35)
        }

        .heroV3 .v3-feat:nth-child(2) > i {
            background: linear-gradient(135deg,var(--gold-light),var(--gold-dark));
            box-shadow: 0 6px 16px rgba(201,169,97,.4)
        }

        .heroV3 .v3-feat b {
            display: block;
            color: var(--dark);
            font-size: 1rem;
            margin-bottom: 2px
        }

        .heroV3 .v3-feat span {
            color: var(--gray-500);
            font-size: .9rem;
            line-height: 1.6
        }

    .heroV3 .v3-btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap
    }

        .heroV3 .v3-btns .btn-outline-custom {
            color: var(--teal-dark);
            border-color: rgba(19,72,80,.22);
            background: #fff
        }

            .heroV3 .v3-btns .btn-outline-custom:hover {
                background: var(--teal-dark);
                color: #fff
            }

    .heroV3 .v3-media {
        position: relative;
        padding: 20px 24px 34px 10px
    }

    .heroV3 .v3-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 4/4.5;
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 7px solid #fff;
        box-shadow: var(--shadow-xl);
        z-index: 2;
        transform: rotate(-2deg)
    }

    .heroV3 .v3-frame2 {
        position: absolute;
        left: -6px;
        bottom: -14px;
        width: 44%;
        aspect-ratio: 1/1;
        border-radius: 24px;
        overflow: hidden;
        border: 6px solid #fff;
        box-shadow: var(--shadow-lg);
        z-index: 3;
        transform: rotate(3deg)
    }

    .heroV3 .v3-dots {
        position: absolute;
        top: -6px;
        left: -18px;
        width: 120px;
        height: 120px;
        z-index: 1;
        background-image: radial-gradient(var(--gold) 2px,transparent 2px);
        background-size: 16px 16px;
        opacity: .5
    }

    .heroV3 .v3-ring {
        position: absolute;
        top: 34px;
        left: -30px;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        z-index: 4;
        background: conic-gradient(var(--gold) 0 78%,rgba(255,255,255,.6) 78% 100%);
        display: grid;
        place-items: center;
        box-shadow: var(--shadow-lg)
    }

        .heroV3 .v3-ring::before {
            content: '';
            position: absolute;
            inset: 8px;
            background: var(--teal-deep);
            border-radius: 50%
        }

        .heroV3 .v3-ring .rt {
            position: relative;
            z-index: 1;
            text-align: center;
            color: #fff;
            line-height: 1
        }

            .heroV3 .v3-ring .rt b {
                font-size: 1.3rem;
                font-weight: 800;
                color: var(--gold-light)
            }

            .heroV3 .v3-ring .rt span {
                font-size: .58rem;
                display: block;
                opacity: .85
            }

    .heroV3 .v3-float {
        position: absolute;
        right: -14px;
        top: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        z-index: 5;
        background: rgba(255,255,255,.94);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(8px)
    }

        .heroV3 .v3-float .ic {
            width: 44px;
            height: 44px;
            flex: none;
            border-radius: 12px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 1.1rem;
            background: linear-gradient(135deg,var(--gold-light),var(--gold-dark))
        }

        .heroV3 .v3-float b {
            display: block;
            color: var(--dark);
            font-size: 1rem;
            line-height: 1.2
        }

        .heroV3 .v3-float span {
            color: var(--gray-500);
            font-size: .76rem
        }

@media(max-width:900px) {
    .heroV3 .v3-row {
        grid-template-columns: 1fr;
        gap: 56px
    }

    .heroV3 .v3-text {
        padding-right: 20px
    }

    .heroV3 .v3-media {
        max-width: 460px;
        margin: 0 auto;
        padding: 24px 22px 44px
    }

    .heroV3 .v3-frame {
        transform: rotate(-1.5deg);
        aspect-ratio: 4/3.4
    }

    .heroV3 .v3-frame2 {
        width: 38%;
        left: 0;
        bottom: -16px
    }

    .heroV3 .v3-float {
        right: 4px;
        top: 8px
    }

    .heroV3 .v3-ring {
        left: 2px;
        top: -6px
    }
}

@media(max-width:560px) {
    .heroV3 .v3-media {
        max-width: 420px;
        padding: 20px 6px 30px
    }

    .heroV3 .v3-frame {
        aspect-ratio: 4/3.6;
        transform: none
    }

    .heroV3 .v3-frame2 {
        display: none
    }

    .heroV3 .v3-ring {
        display: none
    }

    .heroV3 .v3-dots {
        top: -10px;
        left: auto;
        right: -10px
    }

    .heroV3 .v3-float {
        right: auto;
        left: 8px;
        top: auto;
        bottom: 12px
    }

        .heroV3 .v3-float b {
            font-size: .92rem
        }
}

/* ============ الهيرو 4 — Bento Modern ============ */
.heroV4 {
    position: relative;
    overflow: hidden;
    padding: 74px 0;
    background: radial-gradient(ellipse at 85% 10%,rgba(27,123,140,.10),transparent 45%), radial-gradient(ellipse at 5% 90%,rgba(201,169,97,.12),transparent 45%),var(--white,#fff);
    isolation: isolate
}

    .heroV4 .v4-row {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 50px;
        align-items: center
    }

    .heroV4 .v4-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 20px;
        border-radius: 50px;
        background: #fff;
        border: 1px solid var(--gray-200,#E5E7EB);
        box-shadow: var(--shadow-md,0 8px 30px rgba(0,0,0,.09));
        color: var(--teal-dark);
        font-weight: 700;
        font-size: .82rem;
        margin-bottom: 22px
    }

        .heroV4 .v4-badge i {
            color: var(--gold)
        }

    .heroV4 .v4-title {
        font-size: clamp(2rem,4.2vw,3.4rem);
        font-weight: 900;
        color: var(--dark,#1A1F25);
        line-height: 1.18;
        margin-bottom: 20px
    }

    .heroV4 .v4-desc {
        color: var(--gray-500,#6B7280);
        font-size: 1.08rem;
        line-height: 1.95;
        margin-bottom: 28px;
        max-width: 520px
    }

    .heroV4 .v4-btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 30px
    }

        .heroV4 .v4-btns .btn-outline-custom {
            color: var(--teal-dark);
            border-color: rgba(19,72,80,.22);
            background: #fff
        }

            .heroV4 .v4-btns .btn-outline-custom:hover {
                background: var(--teal-dark);
                color: #fff
            }

    .heroV4 .v4-trust {
        display: flex;
        align-items: center;
        gap: 22px;
        flex-wrap: wrap
    }

        .heroV4 .v4-trust .t {
            display: flex;
            flex-direction: column
        }

        .heroV4 .v4-trust b {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--teal-dark);
            line-height: 1
        }

        .heroV4 .v4-trust span {
            font-size: .78rem;
            color: var(--gray-500,#6B7280)
        }

        .heroV4 .v4-trust .sep {
            width: 1px;
            height: 34px;
            background: var(--gray-200,#E5E7EB)
        }

    .heroV4 .v4-media {
        position: relative
    }

    .heroV4 .v4-bento {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 16px;
        height: 440px
    }

        .heroV4 .v4-bento .cell {
            border-radius: var(--radius-lg,28px);
            overflow: hidden;
            box-shadow: var(--shadow-lg,0 20px 60px rgba(0,0,0,.13));
            position: relative
        }

            .heroV4 .v4-bento .cell.tall {
                grid-row: span 2
            }

    .heroV4 .v4-chip {
        position: absolute;
        top: 14px;
        right: 14px;
        padding: 6px 14px;
        border-radius: 50px;
        background: rgba(255,255,255,.9);
        color: var(--teal-dark);
        font-weight: 700;
        font-size: .74rem;
        backdrop-filter: blur(6px);
        z-index: 2
    }

    .heroV4 .v4-float2 {
        position: absolute;
        bottom: -18px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        background: linear-gradient(135deg,var(--teal-dark),var(--teal));
        color: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-lg,0 20px 60px rgba(0,0,0,.13));
        z-index: 3
    }

        .heroV4 .v4-float2 i {
            color: var(--gold-light);
            font-size: 1.2rem
        }

@media(max-width:860px) {
    .heroV4 .v4-row {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .heroV4 .v4-media {
        max-width: 480px;
        margin: 0 auto;
        width: 100%
    }
}

@media(max-width:480px) {
    .heroV4 .v4-bento {
        height: 340px;
        gap: 12px
    }
}

/* =========================================================
   تعويض ارتفاع الـ navbar الثابت (يعمل مع كل التولبارات)
   حتى لا يختفي جزء من الهيرو تحت الشريط العلوي
   ========================================================= */
.heroV2, .heroV3, .heroV4 {
    margin-top: 90px;
}

@media (max-width: 991.98px) {
    .heroV2, .heroV3, .heroV4 {
        margin-top: 78px;
    }
}