/* =========================================================
   Bizmantra - Hero (intro, steps, background)
   assets/css/hero.css?v=1
   The enquiry form has its own file: enquiry-form.css?v=1
   ========================================================= */
.bmh {
    --h-base-1: #F8FAFF;
    --h-base-2: #E9F0FD;
    --h-glow-a: rgba(90,130,232,.28);
    --h-glow-b: rgba(154,205,79,.30);
    --h-dot: rgba(31,53,115,.16);
    --h-ring: rgba(58,95,199,.20);
    --h-glass: rgba(255,255,255,.72);
    --h-sub: #4F5D7A;
    --h-num: clamp(36px, 5.6vh, 44px);

    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(165deg, var(--h-base-1), var(--h-base-2));
    border-bottom: 1px solid var(--bm-line);
    color: var(--bm-text);
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmh {
    --h-base-1: #101A3A;
    --h-base-2: #0A1126;
    --h-glow-a: rgba(90,130,232,.32);
    --h-glow-b: rgba(154,205,79,.16);
    --h-dot: rgba(143,176,255,.20);
    --h-ring: rgba(143,176,255,.18);
    --h-glass: rgba(20,30,61,.62);
    --h-sub: #B4C1E0;
}

:where(.bmh) *, :where(.bmh) *::before, :where(.bmh) *::after { box-sizing: border-box; }
:where(.bmh) ul, :where(.bmh) ol { list-style: none; margin: 0; padding: 0; }
:where(.bmh) h1, :where(.bmh) p { margin: 0; }
:where(.bmh) a { color: inherit; text-decoration: none; }
:where(.bmh) svg { display: block; flex: none; }
.bmh :focus-visible { outline: 2px solid var(--bm-blue-d); outline-offset: 2px; border-radius: 8px; }

/* ---------------- BACKGROUND ---------------- */
.bmh__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bmh__glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.bmh__glow--a { width: 560px; height: 560px; right: -120px; top: -160px; background: var(--h-glow-a); }
.bmh__glow--b { width: 460px; height: 460px; left: -140px; bottom: -200px; background: var(--h-glow-b); }
.bmh__grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--h-dot) 1.2px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 70% 40%, #000 5%, transparent 72%);
            mask-image: radial-gradient(ellipse 75% 85% at 70% 40%, #000 5%, transparent 72%);
}
.bmh__rings { position: absolute; width: min(900px, 120vw); aspect-ratio: 1; right: -12%; top: 50%; transform: translateY(-50%); color: var(--h-ring); }

/* ---------------- LAYOUT ---------------- */
.bmh__container {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
    width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px;
    padding-block: clamp(24px, 4vh, 44px);
}

/* ---------------- LEFT ---------------- */
.bmh__copy { max-width: 640px; min-width: 0; }
.bmh__title {
    font-weight: 800; font-size: clamp(28px, min(3.6vw, 6.2vh), 50px); line-height: 1.08;
    letter-spacing: -.03em; color: var(--bm-head); text-wrap: balance;
}
.bmh__lead { margin-top: clamp(8px, 1.8vh, 16px); max-width: 58ch; font-size: clamp(14px, min(1.3vw, 2.3vh), 16px); line-height: 1.55; color: var(--h-sub); }

.bmh__steps { position: relative; display: grid; gap: 0; margin: clamp(14px, 3vh, 28px) 0 0; }
.bmh__steps li { position: relative; display: grid; grid-template-columns: var(--h-num) minmax(0, 1fr); gap: 16px; padding-bottom: clamp(8px, 1.8vh, 16px); }
.bmh__steps li:last-child { padding-bottom: 0; }
.bmh__steps li:not(:last-child)::before {
    content: ""; position: absolute; left: calc(var(--h-num) / 2 - 1px); top: calc(var(--h-num) + 3px); bottom: 3px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--bm-blue), var(--bm-green)); opacity: .45;
}
.bmh__num {
    display: grid; place-items: center; width: var(--h-num); height: var(--h-num); border-radius: 12px;
    background: var(--bm-bg); border: 1px solid var(--bm-line); color: var(--bm-blue-d);
    font-size: 16px; font-weight: 800; box-shadow: 0 10px 20px -12px rgba(31,53,115,.6);
}
.bmh__steps li:last-child .bmh__num { background: linear-gradient(135deg, #A8D75E, #86B83F); border-color: transparent; color: #17306B; }
.bmh__stepbody { display: block; padding-top: 1px; min-width: 0; }
.bmh__stepbody strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--bm-head); }
.bmh__stepbody span { display: block; margin-top: 2px; max-width: 54ch; font-size: 13.5px; line-height: 1.5; color: var(--h-sub); }

.bmh__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 2.8vh, 26px); }
.bmh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: clamp(42px, 6vh, 50px); padding: 10px 22px;
    border-radius: 10px; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s;
}
.bmh-btn svg { width: 17px; height: 17px; }
.bmh-btn__short { display: none; }
.bmh-btn--call { background: var(--bm-btn); color: #fff !important; box-shadow: 0 14px 26px -14px rgba(31,53,115,.8); }
.bmh-btn--call:hover { background: var(--bm-btn-h); transform: translateY(-1px); }
.bmh-btn--wa { background: var(--h-glass); border: 1px solid var(--bm-line); color: var(--bm-head) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bmh-btn--wa svg { color: var(--bm-wa); }
:root[data-theme="dark"] .bmh-btn--wa svg { color: #35C9B5; }
.bmh-btn--wa:hover { border-color: var(--bm-blue); transform: translateY(-1px); }
.bmh__note { margin-top: clamp(8px, 1.6vh, 14px); font-size: 12.5px; line-height: 1.55; color: var(--h-sub); }

/* ---------------- RIGHT: holder for the form component ---------------- */
.bmh__stage {
    position: relative; width: 100%; max-width: 480px; margin-inline: auto; min-width: 0;
    height: auto; align-self: center;
    background: none; box-shadow: none; border: 0;      /* holder is invisible */
}

/* ---------------- RESPONSIVE ---------------- */
/* tablet + phone: single column, centred intro */
@media (max-width: 1023px) {
    .bmh__copy { max-width: none; text-align: center; }
    .bmh__title { font-size: clamp(27px, 9.4vw, 38px); line-height: 1.14; margin-inline: auto; max-width: 20ch; }
    .bmh__lead { margin-inline: auto; margin-top: 12px; font-size: 15px; max-width: 52ch; }

    .bmh__steps {
        margin: 22px auto 0; max-width: 520px; text-align: left;
        padding: 18px 16px; border-radius: 16px;
        background: var(--h-glass); border: 1px solid var(--bm-line);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .bmh__steps li { gap: 14px; padding-bottom: 16px; }
    .bmh__steps li:last-child { padding-bottom: 0; }
    .bmh__actions { justify-content: center; margin-top: 20px; }
    .bmh__note { text-align: center; margin-top: 12px; }

    .bmh__stage { max-width: 560px; }
    .bmh__glow--a { width: 380px; height: 380px; }
    .bmh__container { padding-block: 28px 36px; }
}

@media (max-width: 599px) {
    .bmh__container { padding-inline: 16px; }
    .bmh__rings { right: -50%; top: 70%; }

    /* Call + WhatsApp: one row, icon with short label */
    .bmh__actions { flex-wrap: nowrap; gap: 10px; }
    .bmh-btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; gap: 8px; font-size: 14.5px; }
    .bmh-btn svg { width: 20px; height: 20px; }
    .bmh-btn__full { display: none; }
    .bmh-btn__short { display: inline; }
}

/* desktop: hero = first screen (viewport minus header), content centred */
@media (min-width: 1024px) {
    .bmh {
        min-height: calc(100vh - var(--bm-top-h, 34px) - var(--bm-main-h, 78px));
        min-height: calc(100svh - var(--bm-top-h, 34px) - var(--bm-main-h, 78px));
        display: flex; align-items: center;
    }
    .bmh__container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .bmh__stage { justify-self: end; margin-inline: 0; }
}
@media (max-height: 480px) and (orientation: landscape) and (min-width: 1024px) { .bmh__container { padding-block: 16px; } }

@media (prefers-reduced-motion: reduce) {
    .bmh * { transition-duration: .01ms !important; }
}
/* kill any leftover decoration around the form holder */
.bmh__stage,
.bmh__stage > .bmf {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
    padding: 0 !important;
}
.bmh__stage::before, .bmh__stage::after,
.bmf::before, .bmf::after {
    content: none !important;
    display: none !important;
}