/*
  Cyber Executive V22 — premium hero fidelity pass.
  Goals: sharper portrait, stronger cyber globe, closer parity with the approved reference,
  cleaner mobile composition, and zero white-card identity treatment.
*/
:root{
  --v22-cyan:#21e7ff;
  --v22-cyan-soft:#7ef6ff;
  --v22-green:#86ff4f;
  --v22-panel:rgba(2,14,24,.80);
  --v22-line:rgba(48,226,255,.22);
  --v22-x:0;
  --v22-y:0;
}

/* ---------- HOME / DESKTOP HERO ---------- */
body[data-page="home"] .hero-v22{
  min-height:calc(100svh - 1px)!important;
  padding:86px 0 18px!important;
  background:
    radial-gradient(940px 760px at 69% 42%,rgba(0,184,239,.15),transparent 64%),
    radial-gradient(520px 420px at 95% 8%,rgba(0,110,255,.08),transparent 72%),
    linear-gradient(112deg,#010508 0%,#020a11 43%,#03101a 72%,#01070b 100%)!important;
}
body[data-page="home"] .hero-v22:before{
  background:
    linear-gradient(rgba(30,226,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,226,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 66% 44%,rgba(30,226,255,.07),transparent 39%)!important;
  background-size:44px 44px,44px 44px,auto!important;
}
body[data-page="home"] .hero-v22 .hero-grid{
  width:min(1540px,calc(100% - 68px))!important;
  grid-template-columns:minmax(520px,.94fr) minmax(720px,1.12fr)!important;
  gap:10px!important;
  align-items:center!important;
}
body[data-page="home"] .hero-v22 .hero-copy{
  max-width:700px!important;
  padding-left:2px!important;
}
body[data-page="home"] .hero-v22 .status-pill{
  border-color:rgba(32,232,255,.28)!important;
  box-shadow:0 0 0 1px rgba(32,232,255,.035) inset,0 0 30px rgba(32,232,255,.035),0 14px 42px rgba(0,0,0,.26)!important;
}
body[data-page="home"] .hero-v22 .v19-nameblock>strong{
  font-size:clamp(70px,5.2vw,108px)!important;
  line-height:.86!important;
  letter-spacing:-.055em!important;
}
body[data-page="home"] .hero-v22 .v19-name-first{
  color:#f3f7f9!important;
  text-shadow:0 10px 34px rgba(0,0,0,.42),0 0 24px rgba(255,255,255,.025)!important;
}
body[data-page="home"] .hero-v22 .v19-name-last{
  background:linear-gradient(180deg,#7df7ff 0%,#23e8ff 42%,#09b9d4 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:drop-shadow(0 0 18px rgba(32,232,255,.10))!important;
}
body[data-page="home"] .hero-v22 .v19-role-stack{
  border-left-color:var(--v22-cyan)!important;
  gap:5px!important;
}
body[data-page="home"] .hero-v22 .v19-role-stack span{
  color:#d4e4ea!important;
  font-size:clamp(15px,1.05vw,22px)!important;
  letter-spacing:.10em!important;
}
body[data-page="home"] .hero-v22 .hero-copy>h1{
  margin-top:24px!important;
  max-width:670px!important;
  font-size:clamp(34px,2.55vw,50px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}
body[data-page="home"] .hero-v22 .hero-lead{
  max-width:650px!important;
  font-size:15px!important;
  line-height:1.75!important;
  color:#a9bec8!important;
}
body[data-page="home"] .hero-v22 .hero-actions{gap:10px!important}
body[data-page="home"] .hero-v22 .hero-actions .btn{
  min-height:50px!important;
  border-radius:7px!important;
  letter-spacing:.06em!important;
  box-shadow:0 16px 36px rgba(0,0,0,.20),inset 0 0 20px rgba(32,232,255,.018)!important;
}
body[data-page="home"] .hero-v22 .metric-row{
  gap:10px!important;
  margin-top:18px!important;
}
body[data-page="home"] .hero-v22 .metric-row>div{
  min-height:102px!important;
  border-color:rgba(32,232,255,.22)!important;
  background:linear-gradient(150deg,rgba(4,21,34,.90),rgba(2,11,18,.78))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.20),inset 0 0 28px rgba(32,232,255,.018)!important;
}

/* High-fidelity art stage: replaces the lower-quality cutout stack visually. */
.hero-v22 .v19-stage{
  min-height:748px!important;
  overflow:visible!important;
  perspective:1400px!important;
}
.hero-v22 .v19-scene{
  inset:0!important;
  overflow:visible!important;
  transform-style:preserve-3d!important;
}
.hero-v22 .v21-cyber-globe,
.hero-v22 .v19-orbit,
.hero-v22 .v19-portrait-shell{display:none!important}

.hero-v22 .v22-art-shell{
  position:absolute;
  z-index:4;
  left:2%;
  top:0;
  width:76%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  transform-style:preserve-3d;
  transform:translate3d(calc(var(--v22-x)*-5px),calc(var(--v22-y)*-4px),42px);
  transition:transform .20s ease-out;
}
.hero-v22 .v22-art-shell:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:7% 2% 3% 6%;
  border-radius:50%;
  background:
    radial-gradient(circle at 52% 45%,rgba(34,228,255,.17),transparent 54%),
    radial-gradient(circle at 56% 52%,rgba(16,94,255,.08),transparent 65%);
  filter:blur(16px);
}
.hero-v22 .v22-art-shell:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:76%;
  aspect-ratio:1;
  left:15%;
  top:7%;
  border-radius:50%;
  border:1px solid rgba(32,232,255,.13);
  box-shadow:0 0 0 22px rgba(32,232,255,.012),0 0 0 58px rgba(32,232,255,.007),0 0 90px rgba(32,232,255,.06);
  animation:v22HaloPulse 5.4s ease-in-out infinite;
}
.hero-v22 .v22-art-shell picture{display:block;width:100%;height:100%}
.hero-v22 .v22-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  border:0;
  background:transparent;
  image-rendering:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.78) 4%,#000 10%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.78) 4%,#000 10%,#000 100%);
  filter:saturate(1.02) contrast(1.035) brightness(1.015) drop-shadow(0 28px 45px rgba(0,0,0,.43));
  transform:translate3d(1.5%,0,40px) scale(1.11);
  transform-origin:58% 88%;
}
.hero-v22 .v22-art-hud{
  position:absolute;
  z-index:6;
  pointer-events:none;
  border:1px solid rgba(32,232,255,.16);
  opacity:.62;
}
.hero-v22 .v22-art-hud--a{
  width:110px;height:110px;border-radius:50%;right:12%;top:9%;
  border-style:dashed;
  animation:v22Spin 18s linear infinite;
}
.hero-v22 .v22-art-hud--b{
  width:72px;height:72px;border-radius:50%;left:18%;bottom:11%;
  box-shadow:0 0 24px rgba(32,232,255,.06);
  animation:v22SpinReverse 13s linear infinite;
}
.hero-v22 .v22-art-scan{
  position:absolute;z-index:7;left:12%;right:9%;top:17%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(32,232,255,.05),rgba(32,232,255,.52),rgba(140,255,85,.18),transparent);
  box-shadow:0 0 14px rgba(32,232,255,.24);
  animation:v22Scan 6.2s ease-in-out infinite;
  opacity:.58;
}

/* Keep the actual logo as a separate crisp interactive identity accent. */
.hero-v22 .v19-logo-orb{
  display:none!important;
  left:5%!important;
  top:12%!important;
  width:118px!important;
  z-index:9!important;
  padding:5px!important;
  background:radial-gradient(circle at 50% 48%,rgba(12,44,70,.88),rgba(2,10,18,.88))!important;
  border:1px solid rgba(32,232,255,.22)!important;
  box-shadow:0 0 0 7px rgba(32,232,255,.018),0 0 30px rgba(32,232,255,.11)!important;
}
.hero-v22 .v19-logo-orb img{filter:saturate(1.08) contrast(1.04) drop-shadow(0 0 10px rgba(32,232,255,.38))!important}

.hero-v22 .v19-proof-cluster{
  right:1.5%!important;
  top:12%!important;
  width:214px!important;
  gap:11px!important;
  z-index:10!important;
}
.hero-v22 .v19-proof{
  min-height:84px!important;
  border-color:rgba(32,232,255,.24)!important;
  background:linear-gradient(145deg,rgba(4,23,37,.89),rgba(2,12,20,.82))!important;
  box-shadow:0 14px 30px rgba(0,0,0,.24),inset 0 0 28px rgba(32,232,255,.018)!important;
  backdrop-filter:blur(14px)!important;
}
.hero-v22 .v19-proof.green{
  border-color:rgba(134,255,79,.38)!important;
  box-shadow:0 0 0 1px rgba(134,255,79,.02),0 0 22px rgba(134,255,79,.05),inset 3px 0 rgba(134,255,79,.30)!important;
}
.hero-v22 .v19-proof b{font-size:17px!important;letter-spacing:.02em!important}
.hero-v22 .v19-proof span{font-size:7px!important;letter-spacing:.06em!important;color:#9cb9c4!important}
.hero-v22 .v19-brand-note{
  right:1.5%!important;
  top:68%!important;
  width:214px!important;
  min-height:128px!important;
  border-color:rgba(32,232,255,.22)!important;
  background:linear-gradient(145deg,rgba(4,22,35,.90),rgba(2,11,18,.84))!important;
  box-shadow:0 16px 34px rgba(0,0,0,.25)!important;
}
.hero-v22 .v19-side-words{right:3%!important;bottom:4%!important;letter-spacing:.18em!important;color:#7faec1!important}

.hero-v22 .trust-strip{
  margin-top:0!important;
  border-color:rgba(32,232,255,.19)!important;
  background:rgba(1,9,15,.82)!important;
  box-shadow:0 -12px 38px rgba(0,0,0,.16),inset 0 0 30px rgba(32,232,255,.012)!important;
}
.hero-v22 .trust-chip{font-size:7px!important;letter-spacing:.08em!important}

/* ---------- MOBILE HERO ---------- */
@media(max-width:760px){
  body[data-page="home"] .hero-v22{
    min-height:auto!important;
    padding:78px 0 18px!important;
    overflow:hidden!important;
    background:
      radial-gradient(460px 380px at 72% 22%,rgba(0,183,238,.12),transparent 70%),
      linear-gradient(180deg,#01070b 0,#020b12 58%,#01070b 100%)!important;
  }
  body[data-page="home"] .hero-v22 .hero-grid{
    width:min(100% - 20px,620px)!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  body[data-page="home"] .hero-v22 .hero-copy{
    max-width:none!important;
    padding:0!important;
  }
  body[data-page="home"] .hero-v22 .status-pill{
    width:max-content!important;
    max-width:100%!important;
    font-size:6.5px!important;
    padding:8px 10px!important;
    margin-bottom:12px!important;
  }
  body[data-page="home"] .hero-v22 .v19-nameblock>strong{
    font-size:clamp(48px,16vw,70px)!important;
    line-height:.84!important;
    letter-spacing:-.05em!important;
  }
  body[data-page="home"] .hero-v22 .v19-role-stack span{
    font-size:clamp(11px,3.7vw,15px)!important;
    letter-spacing:.09em!important;
  }

  body[data-page="home"] .hero-v22 .v19-mobile-identity.v21-mobile-identity{
    position:relative!important;
    display:block!important;
    height:410px!important;
    margin:20px 0 18px!important;
    overflow:hidden!important;
    border-radius:18px!important;
    border:1px solid rgba(32,232,255,.22)!important;
    background:
      radial-gradient(circle at 64% 30%,rgba(32,232,255,.13),transparent 44%),
      linear-gradient(160deg,rgba(3,20,32,.96),rgba(2,10,17,.98))!important;
    box-shadow:0 24px 58px rgba(0,0,0,.36),inset 0 0 48px rgba(32,232,255,.018)!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-identity:before{
    content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    background:
      linear-gradient(rgba(32,232,255,.026) 1px,transparent 1px),
      linear-gradient(90deg,rgba(32,232,255,.026) 1px,transparent 1px),
      linear-gradient(to top,rgba(1,8,14,.72),transparent 28%);
    background-size:34px 34px,34px 34px,auto;
  }
  body[data-page="home"] .hero-v22 .v21-mobile-globe,
  body[data-page="home"] .hero-v22 .v19-mobile-orbit{display:none!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:2!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-portrait img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:56% 31%!important;
    border-radius:0!important;
    filter:saturate(1.02) contrast(1.03) brightness(1.01)!important;
    transform:scale(1.005)!important;
  }
  body[data-page="home"] .hero-v22 .v21-mobile-dragon{
    left:12px!important;top:12px!important;width:74px!important;height:74px!important;z-index:8!important;
    border:1px solid rgba(32,232,255,.28)!important;
    background:rgba(2,10,17,.86)!important;
    box-shadow:0 0 0 5px rgba(32,232,255,.018),0 0 28px rgba(32,232,255,.16)!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-badge{
    z-index:8!important;
    left:auto!important;right:12px!important;bottom:12px!important;
    width:auto!important;min-width:150px!important;
    padding:10px 12px!important;
    border-color:rgba(134,255,79,.28)!important;
    background:rgba(2,14,23,.86)!important;
    backdrop-filter:blur(12px)!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-badge b{font-size:13px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-badge span{font-size:5.8px!important;letter-spacing:.08em!important}

  body[data-page="home"] .hero-v22 .eyebrow{font-size:7px!important;line-height:1.6!important;letter-spacing:.09em!important}
  body[data-page="home"] .hero-v22 .hero-copy>h1{
    margin-top:10px!important;
    font-size:clamp(28px,8.6vw,40px)!important;
    line-height:1.05!important;
    max-width:none!important;
  }
  body[data-page="home"] .hero-v22 .hero-lead{font-size:13px!important;line-height:1.7!important;color:#a9bdc6!important}
  body[data-page="home"] .hero-v22 .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:14px!important;
  }
  body[data-page="home"] .hero-v22 .hero-actions .btn{
    min-height:48px!important;
    width:100%!important;
    justify-content:center!important;
    font-size:8px!important;
    padding-inline:9px!important;
  }
  body[data-page="home"] .hero-v22 .hero-actions .btn:first-child{grid-column:1/-1!important}
  body[data-page="home"] .hero-v22 .metric-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:12px!important;
  }
  body[data-page="home"] .hero-v22 .metric-row>div{
    min-width:0!important;
    min-height:84px!important;
    padding:10px 8px!important;
    border-radius:10px!important;
  }
  body[data-page="home"] .hero-v22 .metric-row strong{font-size:15px!important;white-space:nowrap!important}
  body[data-page="home"] .hero-v22 .metric-row span{font-size:5.3px!important;line-height:1.45!important;letter-spacing:.035em!important;overflow-wrap:anywhere!important}
  body[data-page="home"] .hero-v22>.hero-grid>.v19-stage{display:none!important}
  body[data-page="home"] .hero-v22 .trust-strip{
    margin-top:14px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  body[data-page="home"] .hero-v22 .trust-chip{
    min-height:36px!important;
    font-size:6px!important;
    line-height:1.25!important;
    display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  }
}

@media(max-width:430px){
  body[data-page="home"] .hero-v22 .hero-grid{width:calc(100% - 16px)!important}
  body[data-page="home"] .hero-v22 .v19-mobile-identity.v21-mobile-identity{height:388px!important;border-radius:16px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait img{object-position:57% 29%!important}
  body[data-page="home"] .hero-v22 .v21-mobile-dragon{width:68px!important;height:68px!important;left:10px!important;top:10px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-badge{right:10px!important;bottom:10px!important;min-width:138px!important}
}

@media(max-width:360px){
  body[data-page="home"] .hero-v22 .v19-mobile-identity.v21-mobile-identity{height:350px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait img{object-position:58% 28%!important}
  body[data-page="home"] .hero-v22 .metric-row{grid-template-columns:1fr!important}
  body[data-page="home"] .hero-v22 .metric-row>div{min-height:62px!important}
  body[data-page="home"] .hero-v22 .metric-row span{font-size:6.4px!important}
}

/* ---------- ARABIC HOME ---------- */
html[dir="rtl"] body[data-page="home"] .page-hero-v22{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(820px 620px at 29% 42%,rgba(0,183,238,.13),transparent 67%),
    linear-gradient(120deg,#01070b,#03101a 68%,#01070b)!important;
}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-stage{min-height:680px!important;overflow:visible!important}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-portrait-shell{display:none!important}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-shell{
  left:2%!important;right:auto!important;top:0!important;width:80%!important;height:100%!important;
}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art{
  object-fit:contain!important;object-position:center bottom!important;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.40) 10%,#000 20%,#000 100%)!important;
  mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.40) 10%,#000 20%,#000 100%)!important;
}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-logo-orb{display:none!important;right:4%!important;left:auto!important;top:12%!important}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof-cluster{left:0!important;right:auto!important;top:17%!important;width:204px!important}
html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-brand-note{left:0!important;right:auto!important;top:70%!important;width:204px!important}

@media(max-width:760px){
  html[dir="rtl"] body[data-page="home"] .page-hero-v22{padding-top:82px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .page-hero__grid{width:min(100% - 20px,620px)!important;grid-template-columns:1fr!important;gap:18px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-stage{
    min-height:430px!important;
    overflow:hidden!important;
    border:1px solid rgba(32,232,255,.20)!important;
    border-radius:18px!important;
    background:rgba(2,11,18,.94)!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-shell{inset:0!important;width:100%!important;height:100%!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:56% 30%!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-logo-orb{right:12px!important;top:12px!important;width:72px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof-cluster{
    left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;
    display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof{min-height:56px!important;padding:8px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof b{font-size:9px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof span{font-size:5.5px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-brand-note{display:none!important}
}

/* ---------- SITE-WIDE PREMIUM REFINEMENT ---------- */
@media(min-width:761px){
  .section-heading h2{letter-spacing:-.026em}
  .proof-card,.service-card,.insight-card,.social-node,.mission-slide,.seo-intent-card{
    border-color:rgba(32,232,255,.14)!important;
    box-shadow:0 18px 48px rgba(0,0,0,.12),inset 0 0 28px rgba(32,232,255,.012)!important;
  }
  .proof-card:hover,.service-card:hover,.insight-card:hover,.social-node:hover,.mission-slide:hover,.seo-intent-card:hover{
    border-color:rgba(32,232,255,.30)!important;
    box-shadow:0 24px 62px rgba(0,0,0,.18),0 0 28px rgba(32,232,255,.035)!important;
  }
}

/* ---------- MOTION ---------- */
@keyframes v22HaloPulse{0%,100%{opacity:.42;transform:scale(.992)}50%{opacity:.72;transform:scale(1.012)}}
@keyframes v22Spin{to{transform:rotate(360deg)}}
@keyframes v22SpinReverse{to{transform:rotate(-360deg)}}
@keyframes v22Scan{0%,100%{transform:translateY(0);opacity:.18}50%{transform:translateY(410px);opacity:.66}}

body.motion-off .hero-v22 .v22-art-shell,
body.motion-off .hero-v22 .v22-art-shell:after,
body.motion-off .hero-v22 .v22-art-hud,
body.motion-off .hero-v22 .v22-art-scan{animation:none!important;transition:none!important;transform:none!important}

@media(prefers-reduced-motion:reduce){
  .hero-v22 .v22-art-shell,
  .hero-v22 .v22-art-shell:after,
  .hero-v22 .v22-art-hud,
  .hero-v22 .v22-art-scan{animation:none!important;transition:none!important;transform:none!important}
}