/* ==========================================================
   hero — كارد سحابة فوق صورة خلفية (hook + نقاط + CTA)
   ========================================================== */

:root {
    --ebmnt1-hero-min-height: 36rem;
    --ebmnt1-hero-background-overlay: linear-gradient(180deg, rgba(255, 243, 248, 0.55), rgba(255, 243, 248, 0.12) 45%, rgba(75, 63, 114, 0.22));
    --ebmnt1-hero-cloud-background: var(--ebmnt1-color-helper-pink-soft);
    --ebmnt1-hero-cloud-outline-color: var(--ebmnt1-color-white);
    --ebmnt1-hero-cloud-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-hero-badge-background: var(--ebmnt1-color-white);
    --ebmnt1-hero-badge-text-color: var(--ebmnt1-color-primary-dark);
    --ebmnt1-hero-badge-icon-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-title-line-one-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-hero-title-word-one-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-title-word-two-color: var(--ebmnt1-color-secondary);
    --ebmnt1-hero-title-word-three-color: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-hero-title-word-four-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-hero-subtitle-color: var(--ebmnt1-color-text);
    --ebmnt1-hero-point-text-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-hero-point-background: rgba(255, 255, 255, 0.75);
    --ebmnt1-hero-point-icon-color-one: var(--ebmnt1-color-primary);
    --ebmnt1-hero-point-icon-color-two: var(--ebmnt1-color-secondary);
    --ebmnt1-hero-point-icon-color-three: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-hero-deco-star-color: var(--ebmnt1-color-helper-yellow);
    --ebmnt1-hero-deco-heart-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-deco-sparkle-color: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-hero-font-size-badge: clamp(0.72rem, 0.66rem + 0.35vw, 0.95rem);
    --ebmnt1-hero-font-size-title-one: clamp(1.7rem, 1.2rem + 2.8vw, 3.2rem);
    --ebmnt1-hero-font-size-title-two: clamp(1.45rem, 1.05rem + 2.1vw, 2.7rem);
    --ebmnt1-hero-font-size-subtitle: clamp(0.88rem, 0.8rem + 0.45vw, 1.15rem);
    --ebmnt1-hero-font-size-point: clamp(0.72rem, 0.66rem + 0.35vw, 0.95rem);
}

.ebmnt1-hero-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ebmnt1-hero {
    position: relative;
    min-height: var(--ebmnt1-hero-min-height);
    justify-content: center;
    overflow: hidden;
    background-image: var(--ebmnt1-hero-background-overlay), url("../../images/general/hero.webp");
    background-size: cover, auto 150%;
    background-position: center, 50% 100%;
    background-repeat: no-repeat;
}

.ebmnt1-hero__inner {
    min-height: var(--ebmnt1-hero-min-height);
    position: relative;
}

/* ---------- السحابة ---------- */

.ebmnt1-hero__cloud {
    position: relative;
    width: min(100%, 46rem);
    margin-block: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: ebmnt1-hero-cloud-float 6s ease-in-out infinite;
}

.ebmnt1-hero__cloud-shape {
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    background-color: var(--ebmnt1-hero-cloud-background);
    filter:
        drop-shadow(3px 0 0 var(--ebmnt1-hero-cloud-outline-color))
        drop-shadow(-3px 0 0 var(--ebmnt1-hero-cloud-outline-color))
        drop-shadow(0 3px 0 var(--ebmnt1-hero-cloud-outline-color))
        drop-shadow(0 -3px 0 var(--ebmnt1-hero-cloud-outline-color))
        drop-shadow(0 1.4rem 1.2rem var(--ebmnt1-hero-cloud-shadow-color));
}

.ebmnt1-hero__cloud-bump {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--ebmnt1-hero-cloud-background);
}

.ebmnt1-hero__cloud-bump--top-start {
    width: 40%;
    right: 8%;
    top: 0;
    transform: translateY(-55%);
}

.ebmnt1-hero__cloud-bump--top-end {
    width: 46%;
    left: 6%;
    top: 0;
    transform: translateY(-62%);
}

.ebmnt1-hero__cloud-bump--bottom-start {
    width: 36%;
    right: 12%;
    bottom: 0;
    transform: translateY(52%);
}

.ebmnt1-hero__cloud-bump--bottom-end {
    width: 42%;
    left: 12%;
    bottom: 0;
    transform: translateY(58%);
}

.ebmnt1-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    padding: clamp(2rem, 1.4rem + 3vw, 3.4rem) clamp(1rem, 0.6rem + 3vw, 3rem);
}

.ebmnt1-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 1em;
    border-radius: 999px;
    background-color: var(--ebmnt1-hero-badge-background);
    color: var(--ebmnt1-hero-badge-text-color);
    font-size: var(--ebmnt1-hero-font-size-badge);
    font-weight: 700;
    box-shadow: 0 0.25em 0 -0.05em var(--ebmnt1-hero-cloud-shadow-color);
}

.ebmnt1-hero__badge i {
    color: var(--ebmnt1-hero-badge-icon-color);
}

.ebmnt1-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    font-weight: 700;
}

.ebmnt1-hero__title-line-one {
    font-size: var(--ebmnt1-hero-font-size-title-one);
    color: var(--ebmnt1-hero-title-line-one-color);
    text-shadow: 0 0.06em 0 var(--ebmnt1-color-white);
}

.ebmnt1-hero__title-line-two {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25em;
    font-size: var(--ebmnt1-hero-font-size-title-two);
}

.ebmnt1-hero__title-word--one { color: var(--ebmnt1-hero-title-word-one-color); }
.ebmnt1-hero__title-word--two { color: var(--ebmnt1-hero-title-word-two-color); }
.ebmnt1-hero__title-word--three { color: var(--ebmnt1-hero-title-word-three-color); }
.ebmnt1-hero__title-word--four { color: var(--ebmnt1-hero-title-word-four-color); }

.ebmnt1-hero__title-word {
    display: inline-block;
    transition: transform 0.3s ease;
}

.ebmnt1-hero__title-word:hover {
    transform: translateY(-0.12em) rotate(-3deg);
}

.ebmnt1-hero__subtitle {
    max-width: 30rem;
    font-size: var(--ebmnt1-hero-font-size-subtitle);
    color: var(--ebmnt1-hero-subtitle-color);
}

.ebmnt1-hero__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.ebmnt1-hero__point {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.85em;
    border-radius: 999px;
    background-color: var(--ebmnt1-hero-point-background);
    color: var(--ebmnt1-hero-point-text-color);
    font-size: var(--ebmnt1-hero-font-size-point);
    font-weight: 600;
}

.ebmnt1-hero__point:nth-child(1) i { color: var(--ebmnt1-hero-point-icon-color-one); }
.ebmnt1-hero__point:nth-child(2) i { color: var(--ebmnt1-hero-point-icon-color-two); }
.ebmnt1-hero__point:nth-child(3) i { color: var(--ebmnt1-hero-point-icon-color-three); }

.ebmnt1-hero__actions {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.6em;
}

/* ---------- زينة عائمة ---------- */

.ebmnt1-hero__deco {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    font-size: clamp(1.2rem, 1rem + 1.4vw, 2.4rem);
    animation: ebmnt1-hero-deco-float 5s ease-in-out infinite;
}

.ebmnt1-hero__deco--star { color: var(--ebmnt1-hero-deco-star-color); }
.ebmnt1-hero__deco--heart { color: var(--ebmnt1-hero-deco-heart-color); }
.ebmnt1-hero__deco--sparkle { color: var(--ebmnt1-hero-deco-sparkle-color); }

.ebmnt1-hero__deco--one { top: 8%; right: 3%; animation-delay: 0s; }
.ebmnt1-hero__deco--two { top: 14%; left: 4%; animation-delay: -1.2s; }
.ebmnt1-hero__deco--three { bottom: 10%; right: 6%; animation-delay: -2.4s; }
.ebmnt1-hero__deco--four { bottom: 14%; left: 5%; animation-delay: -3.4s; }

@keyframes ebmnt1-hero-cloud-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.6rem); }
}

@keyframes ebmnt1-hero-deco-float {
    0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
    50% { transform: translateY(-0.9rem) rotate(10deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-hero__cloud,
    .ebmnt1-hero__deco {
        animation: none;
    }
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-hero-min-height: 40rem;
    }

    .ebmnt1-hero__cloud-shape {
        border-radius: 3.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-hero-min-height: 42rem;
    }
}