/* =====================================================================
   Kzamiza — public homepage (extends /assets/blog/blog.css tokens)
   ===================================================================== */
.kb--home .kb-foot__cta { display: none; }
.kb--home .kb-foot { padding-top: 36px; }

/* ---------------- hero ---------------- */
.hm-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 36px 0 56px;
    background: radial-gradient(110% 120% at 100% 0%, #1a7ab5 0%, transparent 52%), linear-gradient(155deg, #071a30 0%, #0b2540 45%, #0d3a5e 100%); }
.hm-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hm-hero__bg i { position: absolute; border-radius: 50%; filter: blur(80px); animation: kb-float 16s ease-in-out infinite alternate; }
.hm-hero__bg i:nth-child(1) { width: 460px; height: 460px; left: -140px; top: -120px; background: #2eb6af; opacity: .45; }
.hm-hero__bg i:nth-child(2) { width: 360px; height: 360px; left: 30%; bottom: -220px; background: #fec73b; opacity: .22; animation-duration: 20s; }
.hm-hero__bg i:nth-child(3) { width: 300px; height: 300px; right: -80px; top: 30%; background: #6d5dfc; opacity: .25; animation-duration: 24s; }
.hm-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .1) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.hm-hero__in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .hm-hero { padding: 64px 0 88px; } .hm-hero__in { grid-template-columns: 1.15fr .85fr; gap: 48px; } }

.hm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .16); font-size: 14px; font-weight: 800; color: #d8ecff; }
.hm-hero h1 { margin: 0; font-size: clamp(32px, 7.6vw, 62px); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.hm-hero h1 .hm-brand { display: block; margin-bottom: 6px; font-size: .62em; color: #a9d8ff; }
.hm-hero h1 .hm-brand bdi { font-size: .82em; font-weight: 800; color: #7ee2dc; letter-spacing: .02em; }
.hm-hero h1 em { font-style: normal; background: linear-gradient(90deg, #fec73b, #ffe08a 55%, #7ee2dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-lead { max-width: 640px; margin: 18px 0 0; font-size: clamp(16px, 3.8vw, 19px); line-height: 1.95; color: #cfe0f2; }
.hm-lead strong { color: #fff; font-weight: 800; }
.hm-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hm-btn-ghost { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .24); color: #fff; }
.hm-btn-ghost:hover { background: rgb(255 255 255 / .16); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hm-chips li { padding: 7px 14px; border-radius: 12px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); font-size: 14px; font-weight: 700; color: #e2eefa; }

/* order-journey illustration */
.hm-visual { position: relative; height: 420px; max-width: 480px; width: 100%; margin-inline: auto; }
@media (min-width: 1024px) { .hm-visual { height: 470px; } }
.hm-orbit { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; border: 2px dashed rgb(255 255 255 / .16); animation: hm-spin 60s linear infinite; }
.hm-orbit::after { content: ''; position: absolute; inset: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .08); background: radial-gradient(circle, rgb(46 182 175 / .18), transparent 70%); }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgb(255 255 255 / .18), rgb(255 255 255 / .06)); border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 30px 60px -28px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: kb-bob 5s ease-in-out infinite; }
.hm-card b { display: block; font-size: 15px; font-weight: 900; }
.hm-card small { display: block; font-size: 12.5px; color: #cfe0f2; font-weight: 600; }
.hm-ic { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.hm-ic--teal { background: linear-gradient(135deg, #2eb6af, #0f5983); }
.hm-ic--gold { background: linear-gradient(135deg, #fec73b, #f5a524); }
.hm-ic--orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.hm-ic--violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.hm-card--main { left: 50%; top: 50%; width: 280px; max-width: none; margin: -92px 0 0 -140px; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; animation-delay: .2s; }
.hm-card__head { display: flex; align-items: center; gap: 10px; }
.hm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hm-steps span { padding: 6px 0; border-radius: 9px; background: rgb(255 255 255 / .08); text-align: center; font-size: 11.5px; font-weight: 800; color: #b8c8da; }
.hm-steps span.on { background: rgb(46 182 175 / .35); color: #fff; }
.hm-bars { display: grid; gap: 6px; }
.hm-bars i { height: 8px; border-radius: 6px; background: rgb(255 255 255 / .12); }
.hm-bars i:nth-child(1) { width: 90%; } .hm-bars i:nth-child(2) { width: 70%; } .hm-bars i:nth-child(3) { width: 45%; background: linear-gradient(90deg, #fec73b, transparent); }
.hm-card b, .hm-card small { white-space: nowrap; }
.hm-card--factory { left: 0; top: 6px; animation-delay: 2.6s; }
.hm-card--wallet { right: 0; top: 46px; animation-delay: 1s; }
.hm-card--ship { left: 10px; bottom: 6px; animation-delay: 1.8s; }

/* phones: tidy grid instead of floating cards (no overlaps on narrow screens) */
@media (max-width: 640px) {
    .hm-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; max-width: none; }
    .hm-orbit { display: none; }
    .hm-card { position: static; max-width: none; margin: 0 !important; animation: none; padding: 12px; gap: 10px; }
    .hm-card--main { grid-column: 1 / -1; order: -1; width: auto; }
    .hm-card--factory { order: 1; }
    .hm-card--wallet { order: 2; }
    .hm-card--ship { order: 3; grid-column: 1 / -1; }
    .hm-card b, .hm-card small { white-space: normal; }
    .hm-ic { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
}

/* ---------------- trust band ---------------- */
.hm-band { position: relative; z-index: 2; margin-top: -34px; }
.hm-band__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .hm-band__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-band__in > div { padding: 16px 18px; border-radius: 18px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-band b { display: block; font-size: clamp(20px, 4.6vw, 26px); font-weight: 900; color: var(--kb-primary); }
.hm-band span { font-size: 14px; font-weight: 700; color: var(--kb-muted); }
@media (prefers-color-scheme: dark) { .hm-band b { color: var(--kb-teal); } }

/* ---------------- sections ---------------- */
.hm-sections { display: flex; flex-direction: column; gap: 72px; padding-top: 64px; padding-bottom: 72px; }
.hm-kicker { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--kb-teal) 14%, transparent); color: var(--kb-primary); font-size: 13px; font-weight: 900; }
@media (prefers-color-scheme: dark) { .hm-kicker { color: var(--kb-teal); } }
.hm-head { max-width: 760px; margin-bottom: 26px; }
.hm-head h2, .hm-what h2 { margin: 0 0 10px; font-size: clamp(25px, 5.4vw, 38px); font-weight: 900; line-height: 1.35; }
.hm-head p { margin: 0; font-size: 17px; line-height: 1.9; color: var(--kb-ink-2); }
.hm-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; max-width: none; }
.hm-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 900; color: var(--kb-primary); }
.hm-link:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-color-scheme: dark) { .hm-link { color: var(--kb-teal); } }

/* what */
.hm-what { display: grid; gap: 28px; align-items: start; }
.hm-what { max-width: 900px; }
.hm-def { margin: 0 0 14px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--kb-gold) 14%, var(--kb-surface)), color-mix(in srgb, var(--kb-teal) 10%, var(--kb-surface))); border: 1px solid color-mix(in srgb, var(--kb-gold) 40%, transparent); font-size: 17.5px; line-height: 1.95; font-weight: 600; color: var(--kb-ink); }
.hm-what__text > p:not(.hm-def):not(.hm-kicker) { margin: 0; font-size: 16.5px; line-height: 1.95; color: var(--kb-ink-2); }
.hm-facts { margin: 0; padding: 6px; border-radius: 22px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 12px 16px; border-radius: 14px; }
.hm-facts > div:nth-child(odd) { background: var(--kb-surface-2); }
.hm-facts dt { font-size: 14px; font-weight: 800; color: var(--kb-muted); }
.hm-facts dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--kb-ink); }
.hm-facts dd a { color: var(--kb-primary); }
@media (max-width: 480px) { .hm-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* how */
.hm-flow { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 640px) { .hm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-flow li { position: relative; padding: 22px 20px 20px; border-radius: 20px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); transition: transform .2s ease, border-color .2s ease; }
.hm-flow li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kb-teal) 50%, var(--kb-line)); }
.hm-flow b { display: block; font-size: 18px; font-weight: 900; }
.hm-flow p { margin: 6px 0 0; color: var(--kb-ink-2); line-height: 1.85; }

/* products */
.hm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .hm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-tile { position: relative; overflow: hidden; padding: 22px 18px; border-radius: 22px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-tile::before { content: ''; position: absolute; width: 140px; height: 140px; top: -60px; left: -50px; border-radius: 50%; background: var(--t); opacity: .12; }
.hm-tile h3 { margin: 14px 0 4px; font-size: 19px; font-weight: 900; }
.hm-tile p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--kb-ink-2); }

/* commission */
.hm-split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .hm-split { grid-template-columns: .9fr 1.1fr; gap: 48px; } .hm-head--side { margin-bottom: 0; } }
.hm-duo { display: grid; gap: 14px; }
@media (min-width: 640px) { .hm-duo { grid-template-columns: 1fr 1fr; } }
.hm-plan { position: relative; padding: 26px 22px; border-radius: 24px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-plan--hot { color: #fff; border-color: transparent; background: radial-gradient(circle at 100% 0, rgb(254 199 59 / .35), transparent 50%), linear-gradient(150deg, var(--kb-navy), var(--kb-primary)); }
.hm-plan__tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--kb-surface-2); font-size: 12.5px; font-weight: 900; color: var(--kb-muted); }
.hm-plan--hot .hm-plan__tag { background: rgb(254 199 59 / .2); color: var(--kb-gold); }
.hm-plan h3 { margin: 12px 0 8px; font-size: 22px; font-weight: 900; }
.hm-plan p { margin: 0; line-height: 1.9; color: var(--kb-ink-2); }
.hm-plan--hot p { color: #d6e6f5; }

/* shipping */
.hm-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-logo { display: grid; place-items: center; height: 92px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-logo img { max-height: 40px; width: auto; object-fit: contain; }
.hm-logo__word { font-size: clamp(18px, 4vw, 26px); font-weight: 900; font-style: italic; letter-spacing: .02em; color: #e60012; direction: ltr; }
.hm-ticks { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .hm-ticks { grid-template-columns: repeat(3, 1fr); } }
.hm-ticks li { padding: 12px 14px; border-radius: 14px; background: var(--kb-surface-2); font-weight: 700; font-size: 15px; }

/* dashboard */
.hm-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .hm-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-features > div { padding: 18px 16px; border-radius: 18px; background: var(--kb-surface); border: 1px solid var(--kb-line); }
.hm-features b { display: block; margin-top: 8px; font-size: 16px; font-weight: 900; }
.hm-features p { margin: 4px 0 0; font-size: 14px; line-height: 1.75; color: var(--kb-ink-2); }
.hm-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 18px 20px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #6d28d9, #db2777); box-shadow: var(--kb-shadow-lg); }
.hm-soon__tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .2); font-weight: 900; font-size: 14px; }
.hm-soon__tag .ic { width: 18px; height: 18px; }
.hm-soon p { margin: 0; font-size: 16px; line-height: 1.8; }

/* who */
.hm-who { display: grid; gap: 14px; }
@media (min-width: 640px) { .hm-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-who > div { display: flex; flex-direction: column; gap: 4px; padding: 22px 18px; border-radius: 20px; background: var(--kb-surface); border: 1px solid var(--kb-line); box-shadow: var(--kb-shadow); }
.hm-who b { margin-top: 6px; font-size: 18px; font-weight: 900; }
.hm-who p { margin: 0; color: var(--kb-ink-2); line-height: 1.8; }
.hm-who a { margin-top: auto; padding-top: 10px; font-weight: 900; color: var(--kb-primary); }
@media (prefers-color-scheme: dark) { .hm-who a { color: var(--kb-teal); } }

/* faq */
.hm-faq .kb-faq { margin-top: 0; }
.hm-faq .kb-faq details { --c: var(--kb-primary); }

/* contact */
.hm-contact { display: grid; gap: 18px; align-items: center; padding: 28px 24px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 0 100%, rgb(46 182 175 / .5), transparent 50%), linear-gradient(150deg, var(--kb-navy), #123b63); box-shadow: var(--kb-shadow-lg); }
@media (min-width: 900px) { .hm-contact { grid-template-columns: 1fr auto; padding: 34px 40px; } }
.hm-contact h2 { margin: 0 0 6px; font-size: clamp(22px, 5vw, 30px); font-weight: 900; }
.hm-contact p { margin: 0; color: #cfe0f2; line-height: 1.85; }
.hm-contact__links { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 14px; background: #25d366; color: #fff; font-weight: 900; }
.hm-wa:hover { filter: brightness(1.06); }
.hm-pill { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 14px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); color: #fff; font-weight: 800; }

/* big marketer — full-width highlight in «مناسبة لمين؟» */
.hm-who > .hm-who__big { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; color: #fff; border-color: transparent;
    background: radial-gradient(circle at 0 100%, rgb(254 199 59 / .3), transparent 50%), linear-gradient(135deg, #0b2540, #0f5983 60%, #2eb6af); box-shadow: var(--kb-shadow-lg); }
.hm-who__big > div { flex: 1 1 320px; }
.hm-who__big b { display: block; margin: 0 0 4px; font-size: 21px; }
.hm-who__big p { color: #d6e6f5 !important; font-size: 16px; }
.hm-who__big a.kb-btn { margin-top: 0; padding-top: 0; color: #3b2500 !important; }

/* contact channels — icon buttons */
.hm-contact { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .hm-contact { grid-template-columns: minmax(0, 1fr) auto; } }
.hm-contact__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .hm-contact__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hm-contact__links { grid-template-columns: repeat(3, minmax(170px, 1fr)); } }
.hm-ch { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: 18px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hm-ch:hover { transform: translateY(-3px); background: rgb(255 255 255 / .14); border-color: color-mix(in srgb, var(--ch) 60%, transparent); box-shadow: 0 16px 30px -18px var(--ch); }
.hm-ch__ic { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--ch); box-shadow: 0 8px 18px -8px var(--ch); }
.hm-ch__ic svg { width: 22px; height: 22px; fill: #fff; }
.hm-ch__tx { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.hm-ch__tx b { font-size: 15px; font-weight: 900; white-space: nowrap; }
.hm-ch__tx small { font-size: 13px; font-weight: 700; color: #b8cde2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-ch--wa { --ch: #25d366; }
.hm-ch--fb { --ch: #1877f2; }
.hm-ch--in { --ch: #0a66c2; }
.hm-ch--qu { --ch: #b92b27; }
.hm-ch { min-width: 0; }
@media (max-width: 520px) {
    .hm-contact__links { grid-template-columns: 1fr; }
    .hm-ch__tx b, .hm-ch__tx small { white-space: normal; }
}

/* login icon (door + arrow), mirrored for RTL so the arrow points into the door */
.hm-login-ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.hm-nav-login { display: inline-flex !important; align-items: center; gap: 7px; }
.kb-nav__links .hm-nav-login { color: var(--kb-primary) !important; background: color-mix(in srgb, var(--kb-teal) 12%, transparent); }
.kb-nav__links .hm-nav-login:hover { background: color-mix(in srgb, var(--kb-teal) 22%, transparent); }
.hm-btn-ghost .hm-login-ic { width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 10px; background: rgb(255 255 255 / .14); }
.hm-btn-ghost:hover .hm-login-ic { background: linear-gradient(135deg, #2eb6af, #1a7ab5); }
@media (prefers-color-scheme: dark) { .kb-nav__links .hm-nav-login { color: var(--kb-teal) !important; } }
/* home top bar: one-line links; the blog search lives in the blog */
.kb--home .kb-nav__links a { white-space: nowrap; padding: 8px 10px; }
.kb--home .kb-nav__search { display: none; }

:is(.hm-flow li, .hm-tile, .hm-features > div, .hm-who > div, .hm-band__in > div):hover .ix { transform: translateY(-3px) rotate(-6deg) scale(1.05); }

/* chips inside the hero */
.hm-chips li { display: inline-flex; align-items: center; gap: 7px; }
.ic--chip { width: 17px; height: 17px; color: #7ee2dc; }

/* hero floating cards use the small tiles */
.hm-card .ix { box-shadow: 0 10px 20px -10px var(--b), inset 0 1px 0 rgb(255 255 255 / .35); }

/* trust band */
.hm-band__in > div { display: flex; align-items: center; gap: 14px; }
.hm-band__in > div p { margin: 0; }

/* journey steps: icon + numbered badge */
.hm-flow__ic { margin-bottom: 14px; overflow: visible; }
.hm-flow__ic::before, .hm-flow__ic::after { border-radius: inherit; }
.hm-flow__ic::after { display: none; }
.hm-flow__ic i { position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kb-surface); border: 2px solid var(--b); color: var(--b); font-style: normal; font-size: 12px; font-weight: 900; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .3); }

/* products / who / features spacing */
.hm-tile .ix, .hm-who .ix { margin-bottom: 4px; }
.hm-features .ix { margin-bottom: 4px; }
.hm-ticks li { display: flex; align-items: center; gap: 10px; }
.hm-who__big .ix { flex-shrink: 0; }

.hm-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-plan:hover .ix { transform: translateY(-3px) rotate(-6deg) scale(1.05); }
@media (max-width: 520px) {
    .hm-band__in > div { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .hm-band__in .ix { width: 40px; height: 40px; border-radius: 13px; }
    .hm-band__in .ix .ic { width: 20px; height: 20px; }
    .hm-band b { font-size: 20px; }
    .hm-band span { font-size: 13px; }
}

/* =====================================================================
   Hero product shot (real marketer dashboard)
   ===================================================================== */
.hm-shot { position: relative; width: 100%; max-width: 620px; margin-inline: auto; padding: 18px 0 28px; perspective: 1400px; }
.hm-shot__glow { position: absolute; inset: 8% 6%; border-radius: 40px; background: radial-gradient(circle at 50% 50%, rgb(46 182 175 / .55), rgb(109 93 252 / .35) 45%, transparent 72%); filter: blur(40px); }
.hm-shot__frame { position: relative; margin: 0; padding: 8px; border-radius: 26px; background: linear-gradient(145deg, rgb(255 255 255 / .28), rgb(255 255 255 / .06)); border: 1px solid rgb(255 255 255 / .24); box-shadow: 0 40px 80px -36px rgb(0 0 0 / .8); transform: rotateY(-8deg) rotateX(3deg); transform-origin: center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hm-shot:hover .hm-shot__frame { transform: rotateY(0) rotateX(0); }
.hm-shot__frame img { display: block; width: 100%; height: auto; border-radius: 19px; }
.hm-shot .hm-card { position: absolute; max-width: none; }
.hm-shot .hm-card--wallet { top: 0; right: -14px; left: auto; animation-delay: .6s; }
.hm-shot .hm-card--ship { bottom: 0; left: -10px; top: auto; animation-delay: 1.6s; }
@media (max-width: 1023px) {
    .hm-shot { max-width: 640px; padding: 8px 0 34px; }
    .hm-shot__frame { transform: none; }
}
@media (max-width: 640px) {
    .hm-shot { padding: 0 0 12px; }
    .hm-shot .hm-card { position: absolute; display: flex; animation: none; padding: 9px 11px; gap: 8px; }
    .hm-shot .hm-card b { font-size: 12.5px; white-space: nowrap; }
    .hm-shot .hm-card small { display: none; }
    .hm-shot .hm-card .ix { width: 32px; height: 32px; border-radius: 10px; }
    .hm-shot .hm-card .ix .ic { width: 17px; height: 17px; }
    .hm-shot .hm-card--wallet { top: -14px; right: -6px; }
    .hm-shot .hm-card--ship { bottom: -4px; left: -6px; }
}

/* =====================================================================
   «ميزا» AI assistant section
   ===================================================================== */
.hm-ai { position: relative; display: grid; gap: 28px; align-items: center; padding: 26px; border-radius: 32px; overflow: hidden; isolation: isolate;
    background: radial-gradient(circle at 100% 0%, rgb(167 139 250 / .35), transparent 50%), radial-gradient(circle at 0% 100%, rgb(244 114 182 / .18), transparent 45%), linear-gradient(160deg, #f6f3ff, #ffffff 60%, #f3efff); border: 1px solid #e9e2ff; box-shadow: 0 30px 60px -40px rgb(109 40 217 / .5); }
@media (min-width: 1024px) { .hm-ai { grid-template-columns: 1.05fr .95fr; gap: 44px; padding: 40px; } }
.hm-ai__media { margin: 0; }
.hm-ai__media img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -34px rgb(76 29 149 / .6); }
.hm-kicker--ai { display: inline-flex; align-items: center; gap: 6px; background: #ede9fe; color: #6d28d9; }
.hm-kicker--ai .ic--chip { color: #7c3aed; }
.hm-ai h2 { margin: 0 0 10px; font-size: clamp(25px, 5.4vw, 38px); font-weight: 900; line-height: 1.35; color: #1e1048; }
.hm-ai__lead { margin: 0 0 20px; font-size: 17px; line-height: 1.95; color: #4b4470; }
.hm-ai__grid { display: grid; gap: 10px; margin-bottom: 22px; }
@media (min-width: 560px) { .hm-ai__grid { grid-template-columns: 1fr 1fr; } }
.hm-ai__grid > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgb(255 255 255 / .8); border: 1px solid #ece6ff; box-shadow: 0 10px 24px -20px rgb(76 29 149 / .5); }
.hm-ai__grid p { margin: 0; line-height: 1.45; }
.hm-ai__grid b { display: block; font-size: 15px; font-weight: 900; color: #1e1048; }
.hm-ai__grid small { font-size: 13px; color: #6b6491; font-weight: 600; }
.hm-btn-ai { color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 16px 30px -14px rgb(124 58 237 / .8); }
.hm-btn-ai:hover { filter: brightness(1.06); }
@media (prefers-color-scheme: dark) {
    .hm-ai { background: radial-gradient(circle at 100% 0%, rgb(124 58 237 / .3), transparent 50%), linear-gradient(160deg, #151030, #0d1b2e); border-color: rgb(167 139 250 / .2); }
    .hm-ai h2, .hm-ai__grid b { color: #f3efff; }
    .hm-ai__lead, .hm-ai__grid small { color: #c4bce8; }
    .hm-ai__grid > div { background: rgb(255 255 255 / .05); border-color: rgb(167 139 250 / .18); }
    .hm-kicker--ai { background: rgb(124 58 237 / .2); color: #c4b5fd; }
}
/* hero shot: bigger, cards on the outer corners so they never cover the dashboard screen */
@media (min-width: 1024px) {
    .hm-hero__in { grid-template-columns: 1.02fr .98fr; }
    .hm-shot { max-width: 680px; }
    .hm-shot .hm-card--wallet { top: -6px; left: -22px; right: auto; }
    .hm-shot .hm-card--ship { bottom: -2px; right: -16px; left: auto; }
}
/* square promo artwork in the hero */
.hm-shot--square { max-width: 560px; padding: 10px 0 18px; }
.hm-shot--square .hm-shot__frame { padding: 7px; border-radius: 30px; transform: rotateY(-6deg) rotateX(2deg); }
.hm-shot--square .hm-shot__frame img { border-radius: 24px; aspect-ratio: 1 / 1; object-fit: cover; }
.hm-shot--square .hm-shot__glow { inset: 6%; background: radial-gradient(circle, rgb(167 139 250 / .6), rgb(46 182 175 / .35) 50%, transparent 72%); }
@media (max-width: 1023px) { .hm-shot--square { max-width: 520px; } .hm-shot--square .hm-shot__frame { transform: none; } }
.hm-shot__link { display: block; border-radius: 24px; } .hm-shot__link:focus-visible { outline-offset: 4px; }

/* =====================================================================
   Entry gate: login / join (before the hero)
   ===================================================================== */
.hm-gate { position: relative; overflow: hidden; isolation: isolate; padding: 22px 0; background: linear-gradient(155deg, #061527, #0a2340 60%, #0c3155); border-bottom: 1px solid rgb(255 255 255 / .08); }
.hm-gate__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hm-gate__bg i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hm-gate__bg i:nth-child(1) { width: 360px; height: 220px; right: 8%; top: -120px; background: #2eb6af; opacity: .35; }
.hm-gate__bg i:nth-child(2) { width: 320px; height: 220px; left: 10%; bottom: -140px; background: #fec73b; opacity: .22; }
.hm-gate__in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; }
.hm-door { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; color: #fff; overflow: hidden;
    background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)); border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 20px 40px -28px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .18); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, background-color .25s ease; }
.hm-door::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .12) 50%, transparent 70%); transform: translateX(120%); transition: transform .7s ease; pointer-events: none; }
.hm-door:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / .32); }
.hm-door:hover::after { transform: translateX(-120%); }
.hm-door--join { background: linear-gradient(135deg, #fec73b, #f5a524); color: #3b2500; border-color: transparent; box-shadow: 0 22px 40px -22px rgb(245 165 36 / .9); }
.hm-door--join .ix { --a: rgb(255 255 255 / .55); --b: rgb(255 255 255 / .2); --fg: #3b2500; box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.hm-door__tx { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.3; }
.hm-door__tx small { font-size: 13.5px; font-weight: 700; opacity: .8; }
.hm-door__tx b { font-size: clamp(17px, 2.4vw, 21px); font-weight: 900; white-space: nowrap; }
.hm-door__go { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: rgb(255 255 255 / .12); transition: transform .25s ease; }
.hm-door--join .hm-door__go { background: rgb(59 37 0 / .12); }
.hm-door__go .ic { width: 19px; height: 19px; stroke-width: 2.4; }
.hm-door:hover .hm-door__go { transform: translateX(-4px); }
@media (max-width: 560px) {
    .hm-gate { padding: 14px 0; }
    .hm-gate__in { gap: 10px; }
    .hm-door { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 20px; }
    .hm-door .ix--lg { width: 44px; height: 44px; border-radius: 14px; }
    .hm-door .ix--lg .ic { width: 22px; height: 22px; }
    .hm-door__go { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; }
}
/* hero now starts right after the gate */
.hm-hero { padding-top: 30px; }
@media (min-width: 1024px) { .hm-hero { padding-top: 48px; } }