/* ==========================================================================
   Hero. The stage is the physics world. On wide screens it fills the hero and the
   pile settles at the bottom, below the text; on phones the stage is its own band
   under the buttons (chips are clipped to it), so nothing can ever cover the copy.
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--line);min-height:clamp(560px,82svh,760px);display:flex;flex-direction:column;isolation:isolate;margin-bottom:var(--s16)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 85% 0%,color-mix(in srgb,var(--pink-bright) 16%,transparent),transparent 70%),radial-gradient(55% 50% at 5% 10%,color-mix(in srgb,var(--violet-bright) 16%,transparent),transparent 70%)}
.hero-stage{position:absolute;inset:0;z-index:0;touch-action:pan-y;cursor:default;-webkit-user-select:none;user-select:none}
.hero-stage.can-grab{cursor:grab}.hero-stage.grabbing{cursor:grabbing}
.hero-text{position:relative;z-index:1;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px) 0;max-width:1060px;pointer-events:none}
.hero-text a,.hero-text .btn{pointer-events:auto}
.hero-h{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;line-height:1.1;letter-spacing:-.035em;margin:14px 0 20px;text-wrap:balance}
html[lang=ar] .hero-h{line-height:1.35;letter-spacing:0}
.hero-h .hl1{display:inline}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.hero-sub{font-size:clamp(1rem,.9rem + .5vw,1.25rem);color:var(--text-2);max-width:56ch;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-hint{margin-top:18px;font-size:var(--fs-sm);color:var(--muted)}
.hchip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:.55em 1em .55em .6em;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 6px 18px rgba(13,13,16,.1);font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;color:var(--text);will-change:transform;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hchip.in{opacity:1}
.hchip-ic{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;color:#fff;flex:none}
.hchip-ic .ic{width:1.05em;height:1.05em}
.hchip.c1 .hchip-ic{background:var(--c1)}.hchip.c2 .hchip-ic{background:#c4630f}.hchip.c3 .hchip-ic{background:#14707d}.hchip.c4 .hchip-ic{background:#b72a8a}.hchip.c5 .hchip-ic{background:#5a7a14}.hchip.c6 .hchip-ic{background:#8a5a44}
/* hero always fits inside the viewport under the 92px header */
.hero{height:clamp(480px,calc(100svh - 112px),720px);min-height:0}
.hero-text{padding-top:clamp(28px,4.5svh,64px)}
.hero-h{font-size:clamp(2.25rem,min(1.2rem + 5vw,9.5svh + .5rem),4.9rem);margin:10px 0 14px}
.hero-sub{font-size:clamp(.95rem,.85rem + .4vw,1.2rem)}
@media (min-width:640px){.hero{padding-bottom:0}}
@media (max-width:639px){
  .hero{height:auto;min-height:calc(100svh - 112px);max-height:none}
  .hero-stage{position:relative;inset:auto;flex:1 1 auto;height:auto;min-height:190px;margin-top:16px;overflow:hidden;order:2;border-top:1px dashed var(--line-strong)}
  .hero-text{padding-bottom:0}
  .hero-h{font-size:clamp(2.1rem,10.5vw,3rem)}
  .hero-sub{margin-bottom:0}
}
@media (min-width:640px) and (max-width:1023px){.hero-text{max-width:100%}}
@media (prefers-reduced-motion:reduce){.hchip{transition:none}}

/* miniature real components */
.hchip.hm{display:block;padding:0;gap:0;border:0;background:none;box-shadow:none;border-radius:0;font-size:14px;line-height:1.25;color:var(--text)}
.hm>div{display:flex;align-items:center;gap:.55em;background:var(--surface);border:1px solid var(--line-strong);border-radius:.7em;box-shadow:0 6px 18px rgba(13,13,16,.1);padding:.6em .85em;white-space:nowrap}
.hm .ic{width:1.1em;height:1.1em;flex:none}
.hm small{font-size:.78em;color:var(--text-2);font-weight:500}
.hm b{font-weight:700}
.m-kpi{flex-direction:column;align-items:flex-start!important;gap:.15em!important;padding:.7em 1em!important;min-width:8.5em}
.m-kpi b{font-size:1.55em;line-height:1.1;letter-spacing:-.02em}.m-kpi .up{font-style:normal;font-size:.8em;font-weight:600;color:#17703f;background:#e3f5ea;border-radius:99px;padding:.1em .55em;display:inline-flex;gap:.2em;align-items:center}
.m-in{min-width:11em;color:var(--text-2);font-weight:500}.m-in .ic{color:var(--text-2)}
.m-pg i,.m-pg b{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em;font-style:normal;font-weight:600;color:var(--text-2)}.m-pg b{background:var(--text);color:#fff}
.m-pg{padding:.35em!important;gap:.15em!important}
.hm .m-btn{font-weight:600;border-radius:99px;padding:.65em 1.15em}.hm .m-btn.p{background:var(--grad);color:#fff;border-color:transparent}
.m-seg{padding:.25em!important;gap:.2em!important;border-radius:99px!important}.m-seg b,.m-seg span{padding:.35em .9em;border-radius:99px;font-weight:600}.m-seg b{background:var(--accent-soft,#ece9fb);color:var(--c1,#5b45d6)}.m-seg span{color:var(--text-2)}
.m-tip{flex-direction:column;align-items:flex-start!important;gap:0!important;background:#16141f!important;color:#fff;border-color:#16141f!important;padding:.55em .9em!important}.m-tip small{color:#bdb8d4}.m-tip b{font-size:1.2em}
.m-av{padding:.4em .6em!important;gap:0!important}.m-av i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;font-style:normal;font-size:.8em;font-weight:700;color:#fff;border:2px solid var(--surface);margin-inline-end:-.5em;background:var(--c1,#5b45d6)}.m-av i:nth-child(2){background:#c4630f}.m-av i:nth-child(3){background:#14707d}.m-av i:nth-child(4){background:#e8e5f0;color:var(--text-2)}
.m-al{background:#fff6e0!important;border-color:#f0cf7a!important;color:#6b4a00;font-weight:600}.m-al .ic{color:#b87500}
.m-bd{font-weight:600;font-size:.9em;border-radius:99px!important;padding:.35em .9em!important;gap:.45em!important}.m-bd u{width:.55em;height:.55em;border-radius:50%;background:currentColor;display:block}.m-bd.ok{color:#17703f;background:#e3f5ea!important;border-color:#bfe5cc!important}.m-bd.wa{color:#8a5a00;background:#fff1d0!important;border-color:#efd08a!important}
.m-toast{background:#16141f!important;color:#fff;border-color:#16141f!important;font-weight:600}.m-toast .ic{color:#6ee7a0}
.m-tabs{padding:.35em .5em!important;gap:.9em!important;font-weight:600}.m-tabs b{border-bottom:2px solid var(--c1,#5b45d6);padding:.2em .1em;color:var(--c1,#5b45d6)}.m-tabs span{color:var(--text-2);padding:.2em .1em}
.m-bars svg{width:4.6em;height:2.8em;fill:var(--c1,#5b45d6)}.m-bars{padding:.6em .8em!important}
.m-spark{flex-direction:column;align-items:flex-start!important;gap:.2em!important}.m-spark svg{width:6.2em;height:1.9em;stroke:var(--c1,#5b45d6)}
.m-donut{padding:.55em .9em!important}.m-donut svg{width:2.8em;height:2.8em}.m-donut circle{stroke:var(--c1,#5b45d6)}.m-donut circle.t{stroke:#e8e5f0}.m-donut b{font-size:1.1em}
.m-sw{font-weight:600;gap:.7em!important}.m-sw u{width:2.3em;height:1.3em;border-radius:99px;background:var(--c1,#5b45d6);position:relative;display:block}.m-sw u::after{content:"";position:absolute;inset:.15em .15em .15em auto;width:1em;border-radius:50%;background:#fff}
.m-bc{color:var(--text-2);gap:.5em!important;font-weight:500}.m-bc b{color:var(--text)}
.m-chip{border-radius:99px!important;font-weight:600;padding:.4em .6em .4em 1em!important;background:var(--accent-soft,#ece9fb)!important;border-color:transparent!important;color:var(--c1,#5b45d6)}
.m-bell{position:relative;padding:.7em!important;border-radius:50%!important}.m-bell u{position:absolute;top:-.35em;inset-inline-end:-.35em;min-width:1.5em;height:1.5em;border-radius:99px;background:#c8321f;color:#fff;font-size:.75em;font-weight:700;display:grid;place-items:center;text-decoration:none}
.m-prog{flex-direction:column;align-items:stretch!important;gap:.4em!important;min-width:9em}.m-prog i{display:block;height:.5em;border-radius:99px;background:#e8e5f0;overflow:hidden}.m-prog i b{display:block;height:100%;width:72%;background:var(--grad)}