/* Hyper Sonic Egypt v7.4 — mobile conversion + security-ready UI */

/* Keep the visual first on phones so the value proposition is understood instantly. */
@media (max-width:760px){
  :root{--hs-nav-height:68px;--hs-mobile-gutter:15px}
  :where(.hero,.support-hero){
    padding-top:calc(var(--hs-nav-height) + env(safe-area-inset-top,0px) + 10px)!important;
    padding-bottom:34px!important;
  }
  :where(.hero__inner,.hero-inner,.hero-grid,.support-grid,.hero .inner,.hs-k-hero__grid){
    gap:14px!important;
  }
  :where(.hero__content,.hero__inner>div:first-child,.hero-inner>div:first-child,.hero-grid>div:first-child,.support-grid>div:first-child,.hero .inner>div:first-child,.hs-k-hero__grid>div:first-child){
    order:2!important;
  }
  :where(.hero__visual,.hero-media,.hero-image,.visual,.hero-stack,.support-console,.touch-stage,.solution-hero__media,.interactive-media,.hs-k-orbit,.hs-k-hero__grid>div:last-child){
    order:1!important;
  }

  /* Compact visual above the title: strong, fast and never pushes the CTA too far down. */
  :where(.hero__visual,.hero-media,.visual,.touch-stage,.solution-hero__media,.interactive-media){
    width:100%!important;
    max-width:430px!important;
    margin:0 auto 2px!important;
  }
  :where(.hero-media,.hero-image,.visual,.touch-stage,.solution-hero__media,.interactive-media){
    aspect-ratio:16/8.5!important;
    max-height:205px!important;
    min-height:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 16px 42px rgba(0,0,0,.26)!important;
  }
  :where(.hero-media img,.hero-image img,.visual img,.touch-stage img,.solution-hero__media img,.interactive-media img){
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  .visual__panel,.hero-badge,.hero-note,.media-note{font-size:.7rem!important;padding:9px 11px!important}

  :where(.hero h1,.support-hero h1,.hs-k-hero h1){
    font-size:clamp(2rem,9.2vw,2.55rem)!important;
    line-height:1.08!important;
    margin:0 0 11px!important;
    text-wrap:balance!important;
  }
  html[dir=rtl] :where(.hero h1,.support-hero h1,.hs-k-hero h1){line-height:1.25!important}
  :where(.hero p,.support-hero p,.hero .lead,.hs-k-lead){
    font-size:.93rem!important;line-height:1.56!important;max-width:38ch!important;margin-inline:auto!important;
  }
  :where(.hero__tag,.tag,.eyebrow,.badge,.kicker,.solution-label,.support-tag,.hs-k-eyebrow){
    margin-bottom:10px!important;font-size:.64rem!important;padding:6px 11px!important;
  }
  :where(.chips,.solution-pill-row){margin-top:11px!important;margin-bottom:0!important}
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions){
    margin-top:15px!important;gap:9px!important;
  }
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions) :where(.btn,a.btn,.hs-btn,.hs-k-btn){
    min-height:48px!important;border-radius:13px!important;font-size:.9rem!important;
  }
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions) :where(.btn--ghost,.ghost,a:not(.btn--primary):not(.primary):not(.hs-k-btn--primary)){
    min-height:46px!important;
  }

  /* Home visual is a lightweight SVG and sits above the title without dominating the first screen. */
  .hs-page-home .hero{padding-top:calc(var(--hs-nav-height) + env(safe-area-inset-top,0px) + 7px)!important;padding-bottom:27px!important}
  .hs-page-home .hero__inner{gap:7px!important}
  .hs-page-home .hero__visual{
    order:1!important;height:156px!important;max-width:295px!important;margin:0 auto -2px!important;
    overflow:hidden!important;mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
  }
  .hs-page-home .hero__content{order:2!important}
  .hs-page-home .hero__svg{width:292px!important;height:204px!important;max-height:none!important;transform:translateY(-25px) scale(1.02)!important}
  .hs-page-home .hero__title{font-size:clamp(2rem,9.5vw,2.48rem)!important;margin-bottom:10px!important}
  .hs-page-home .hero__subtitle{font-size:.91rem!important;line-height:1.52!important;max-width:35ch!important}
  .hs-page-home .hero__actions{margin-top:14px!important}

  /* Complex decorative heroes remain readable and compact. */
  .hero-stack{order:1!important;min-height:196px!important;max-height:210px!important;overflow:hidden!important}
  .hero-stack .hero-card{max-width:74%!important}
  .support-console{order:1!important;max-height:218px!important;overflow:auto!important;padding:11px!important}
  .support-console .console-item{padding:8px!important}
  .support-console .console-item:nth-child(n+4){display:none!important}
  .hs-k-hero{padding:calc(var(--hs-nav-height) + 16px) 15px 42px!important}
  .hs-k-orbit{width:min(250px,76vw)!important;aspect-ratio:16/7.5!important;border-radius:20px!important;margin-inline:auto!important}
  .hs-k-orbit__core{width:84px!important;height:58px!important;border-radius:17px!important;font-size:1rem!important}

  /* Stable fixed controls respect safe areas and never cover copy. */
  .hs-floating-dock{inset-inline-end:max(9px,env(safe-area-inset-right,0px))!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
  .hs-float-btn{width:40px!important;height:40px!important;min-width:40px!important}
}

@media (max-width:390px){
  .hs-page-home .hero__visual{height:142px!important;max-width:272px!important}
  .hs-page-home .hero__svg{width:274px!important;height:194px!important;transform:translateY(-27px) scale(1.01)!important}
  .hs-page-home .hero__title{font-size:1.95rem!important}
  :where(.hero-media,.hero-image,.visual,.touch-stage,.solution-hero__media,.interactive-media){max-height:184px!important}
}

/* Tablet: visual first, then concise centered copy. */
@media (min-width:761px) and (max-width:1024px){
  :where(.hero__inner,.hero-inner,.hero-grid,.support-grid,.hs-k-hero__grid){display:flex!important;flex-direction:column!important;gap:24px!important}
  :where(.hero__inner>div:first-child,.hero-inner>div:first-child,.hero-grid>div:first-child,.support-grid>div:first-child,.hs-k-hero__grid>div:first-child){order:2!important}
  :where(.hero__visual,.hero-media,.hero-image,.visual,.hero-stack,.support-console,.touch-stage,.solution-hero__media,.interactive-media,.hs-k-orbit){order:1!important}
  :where(.hero-media,.hero-image,.visual,.touch-stage,.solution-hero__media,.interactive-media){max-height:360px!important;overflow:hidden!important}
}

/* Prevent layout shifts from late image decoding. */
img{height:auto}
picture{display:block}

/* v7.1 — compact premium floating actions */
.hs-floating-dock{
  width:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  pointer-events:none!important;
}
.hs-floating-dock .hs-float-btn{
  pointer-events:auto!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  padding:0!important;
  border-radius:50%!important;
}
.hs-floating-dock .hs-float-btn--wa{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  border:1px solid rgba(255,255,255,.38)!important;
  background:#25d366!important;
  box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 4px rgba(37,211,102,.12)!important;
}
.hs-floating-dock .hs-float-btn--wa svg{
  width:25px!important;
  height:25px!important;
  fill:#fff!important;
}
.hs-floating-dock .hs-float-btn--top{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(8,13,24,.92)!important;
}
@media(max-width:640px){
  .hs-floating-dock{
    right:14px!important;
    left:auto!important;
    bottom:18px!important;
    gap:9px!important;
  }
  html[dir="rtl"] .hs-floating-dock{
    right:auto!important;
    left:14px!important;
  }
  .hs-floating-dock .hs-float-btn--wa{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
  }
  .hs-floating-dock .hs-float-btn--top{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    max-width:36px!important;
  }
}

/* v8.3.2 — global mobile hero overflow and control sizing fixes */
@media (max-width:760px){
  /* Every hero child must be allowed to shrink inside the viewport. */
  :where(.hero,.support-hero,.solution-hero,.hs-k-hero),
  :where(.hero__inner,.hero-inner,.hero-grid,.support-grid,.solution-hero__inner,.hero .inner,.hs-k-hero__grid),
  :where(.hero__content,.hero__inner>div:first-child,.hero-inner>div:first-child,.hero-grid>div:first-child,.support-grid>div:first-child,.solution-hero__inner>div:first-child,.hero .inner>div:first-child,.hs-k-hero__grid>div:first-child){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Prevent bilingual titles and gradient lines from becoming wider than the phone. */
  :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:clamp(1.85rem,8.35vw,2.38rem)!important;
    line-height:1.13!important;
    letter-spacing:-.025em!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:pretty!important;
  }
  html[dir="rtl"] :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1){
    font-size:clamp(1.9rem,8.7vw,2.42rem)!important;
    line-height:1.32!important;
    letter-spacing:0!important;
  }
  :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1) :where(.gradient,span){
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1) br + .gradient{
    display:block!important;
  }

  /* Keep the feature pills inside the page and make horizontal scrolling intentional. */
  :where(.chips,.solution-pill-row){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:14px 0 0!important;
    padding:3px 1px 7px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-padding-inline:1px!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html[dir="rtl"] :where(.chips,.solution-pill-row){direction:rtl!important}
  :where(.chip,.solution-pill){
    flex:0 0 auto!important;
    max-width:none!important;
    white-space:nowrap!important;
  }

  /* Mobile CTAs remain prominent without becoming an oversized edge-to-edge bar. */
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions){
    width:100%!important;
    max-width:380px!important;
    margin:16px auto 0!important;
    justify-items:center!important;
  }
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions) :where(.btn,a.btn,.hs-btn,.hs-k-btn){
    width:min(100%,360px)!important;
    max-width:360px!important;
    min-width:0!important;
    min-height:47px!important;
    padding:11px 18px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.25!important;
  }

  /* The project image remains unchanged; only its container is constrained safely. */
  :where(.hero-media,.hero-image,.visual,.touch-stage,.solution-hero__media,.interactive-media){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width:360px){
  :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1){font-size:1.82rem!important}
  html[dir="rtl"] :where(.hero h1,.support-hero h1,.solution-hero h1,.hero__title,.hs-k-hero h1){font-size:1.86rem!important}
  :where(.hero__actions,.hero__buttons,.hero-actions,.hs-k-actions) :where(.btn,a.btn,.hs-btn,.hs-k-btn){width:100%!important}
}

/* =========================================================
   Hyper Sonic v9 visual preview — restrained technology layer
   Keeps the approved hologram fan artwork unchanged.
   ========================================================= */
:root {
  --hs-v9-navy: rgba(7, 12, 29, .82);
  --hs-v9-cyan: 0, 212, 255;
  --hs-v9-blue: 27, 108, 255;
  --hs-v9-violet: 126, 87, 255;
}

.hs-site-nav,
.nav {
  background:
    linear-gradient(180deg, rgba(7, 12, 29, .88), rgba(7, 10, 24, .68));
  border-bottom: 1px solid rgba(var(--hs-v9-cyan), .08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.hs-site-nav::after,
.nav::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hs-v9-blue), .42), rgba(var(--hs-v9-cyan), .58), transparent);
  opacity: .72;
  pointer-events: none;
}

.hs-main-nav > a,
.hs-solutions-trigger,
.nav__links a {
  border-radius: 10px;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

.hs-main-nav > a:hover,
.hs-solutions-trigger:hover,
.nav__links a:hover {
  background: rgba(255, 255, 255, .035);
  transform: translateY(-1px);
}

.hs-nav-cta,
.btn--primary {
  box-shadow: 0 8px 28px rgba(var(--hs-v9-blue), .24), inset 0 1px 0 rgba(255,255,255,.18);
}

.hs-language-toggle {
  border: 1px solid rgba(var(--hs-v9-cyan), .18);
  background: rgba(var(--hs-v9-cyan), .045);
}

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 48%, rgba(var(--hs-v9-blue), .09), transparent 30%),
    radial-gradient(circle at 35% 38%, rgba(var(--hs-v9-violet), .055), transparent 34%);
}

.hs-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hs-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--hs-v9-cyan), .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--hs-v9-cyan), .027) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at 65% 50%, #000 0%, transparent 69%);
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, #000 0%, transparent 69%);
  opacity: .7;
}

.hs-hero-orbit {
  position: absolute;
  left: 72%;
  top: 51%;
  border: 1px solid rgba(var(--hs-v9-cyan), .11);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 70px rgba(var(--hs-v9-blue), .06);
}

.hs-hero-orbit--one { width: min(43vw, 620px); aspect-ratio: 1; }
.hs-hero-orbit--two { width: min(31vw, 450px); aspect-ratio: 1; border-color: rgba(var(--hs-v9-violet), .10); }

.hs-hero-orbit::before,
.hs-hero-orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--hs-v9-cyan), .72);
  box-shadow: 0 0 14px rgba(var(--hs-v9-cyan), .65);
}
.hs-hero-orbit::before { top: 10%; left: 22%; }
.hs-hero-orbit::after { right: 8%; bottom: 31%; }

.hs-hero-beam {
  position: absolute;
  width: 42%;
  height: 170%;
  right: 7%;
  top: -38%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(var(--hs-v9-cyan), .025), transparent);
  filter: blur(2px);
}

.hs-hero-glow {
  position: absolute;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hs-v9-cyan), .10), rgba(var(--hs-v9-blue), .035) 40%, transparent 68%);
  filter: blur(10px);
}

.hero__visual {
  filter: drop-shadow(0 28px 60px rgba(var(--hs-v9-blue), .12));
}

.hero__visual::before {
  border-color: rgba(var(--hs-v9-cyan), .12) !important;
  box-shadow: 0 0 70px rgba(var(--hs-v9-cyan), .055) !important;
}

.hero__tag {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(var(--hs-v9-cyan), .04);
}

@media (prefers-reduced-motion: no-preference) {
  .hs-hero-orbit--one { animation: hsV9Orbit 32s linear infinite; }
  .hs-hero-orbit--two { animation: hsV9OrbitReverse 46s linear infinite; }
  .hs-hero-beam { animation: hsV9Beam 11s ease-in-out infinite; }
  .hs-hero-glow { animation: hsV9Glow 7s ease-in-out infinite; }
}

@keyframes hsV9Orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes hsV9OrbitReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes hsV9Beam {
  0%, 100% { opacity: .28; transform: rotate(16deg) translateX(-2%); }
  50% { opacity: .62; transform: rotate(16deg) translateX(5%); }
}
@keyframes hsV9Glow {
  0%, 100% { opacity: .72; transform: translateY(-50%) scale(.98); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.025); }
}

@media (max-width: 900px) {
  .hs-site-nav, .nav { background: rgba(7, 12, 29, .92); }
  .hs-hero-orbit { left: 50%; top: 34%; opacity: .55; }
  .hs-hero-orbit--one { width: min(88vw, 500px); }
  .hs-hero-orbit--two { width: min(64vw, 370px); }
  .hs-hero-glow { width: 92vw; right: 4%; top: 34%; opacity: .75; }
  .hs-hero-grid { background-size: 44px 44px; opacity: .42; }
}

@media (max-width: 600px) {
  .hs-hero-beam { display: none; }
  .hs-hero-orbit { opacity: .32; }
  .hs-site-nav::after, .nav::after { left: 16%; right: 16%; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-hero-orbit, .hs-hero-beam, .hs-hero-glow { animation: none !important; }
}


/* v8.4.2 — Hero refinement: preserve hologram fan, remove circular frames */
.hs-hero-orbit,.hero__svg .orbit-1,.hero__svg .orbit-2,.hero__svg .outer-ring{display:none!important}
.hero__visual::before{display:none!important}
.hero__svg .hs-fan-soft-glow{opacity:.42}
.hs-hero-glow{width:min(35vw,500px);opacity:.48;filter:blur(24px)}
.hs-hero-grid{opacity:.38;background-size:64px 64px}
.hs-hero-beam{opacity:.36}
@media(max-width:900px){.hs-hero-glow{width:68vw;right:8%;opacity:.38}.hs-hero-grid{opacity:.25}}

/* v9.3.0 Launch Candidate — compact mobile use cases and visual rhythm */
.use-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
.use-grid .use-card{
  min-height:116px!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  position:relative!important;
  overflow:hidden!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.use-grid .use-card::before{
  content:"↗";
  position:absolute;
  inset-inline-end:14px;
  top:12px;
  color:var(--cyan,#45dfff);
  font-weight:900;
  opacity:.75;
}
.use-grid .use-card h3{
  margin:0!important;
  max-width:86%!important;
  font-size:1rem!important;
  line-height:1.45!important;
}
.use-grid .use-card p{display:none!important}
.use-grid .use-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(69,223,255,.38)!important;
  background:linear-gradient(145deg,rgba(12,47,80,.72),rgba(22,18,58,.78))!important;
}
@media(max-width:900px){
  .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
}
@media(max-width:560px){
  .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .use-grid .use-card{min-height:94px!important;padding:14px!important;border-radius:16px!important}
  .use-grid .use-card h3{font-size:.9rem!important;line-height:1.4!important}
  .use-grid .use-card::before{top:10px;inset-inline-end:11px;font-size:.85rem}
}

/* Break long text runs on solution pages without heavy animation */
.section__header{max-width:820px}
.section__desc{max-width:720px}
.solution-pill-row{gap:.5rem!important}
@media(max-width:560px){
  .section{padding-block:3.4rem!important}
  .section__header{margin-bottom:1.8rem!important}
  .section__title{line-height:1.25!important;text-wrap:balance!important}
  .section__desc{line-height:1.8!important}
}