/*
  Cyber Executive V20 — Hero identity integration + responsive refinement.
  Purpose: remove the white portrait card treatment and integrate the real portrait
  directly into the cyber composition while preserving existing content/SEO/URLs.
*/
:root{
  --v20-cyan:#20e8ff;
  --v20-cyan-soft:rgba(32,232,255,.22);
  --v20-green:#8cff55;
  --v20-panel:rgba(3,18,30,.76);
}

/* --- Home hero: stronger reference-style composition --- */
body[data-page="home"] .hero.hero-v19{
  min-height:calc(100svh - 4px)!important;
  padding-top:102px!important;
  background:
    radial-gradient(900px 700px at 67% 43%,rgba(0,173,236,.15),transparent 66%),
    radial-gradient(540px 520px at 90% 56%,rgba(31,231,255,.07),transparent 73%),
    linear-gradient(108deg,#01060a 0%,#03101a 51%,#020911 100%)!important;
}
body[data-page="home"] .hero-v19 .hero-grid{
  width:min(1580px,calc(100% - 64px))!important;
  grid-template-columns:minmax(500px,.91fr) minmax(660px,1.24fr)!important;
  gap:18px!important;
  align-items:center!important;
}
body[data-page="home"] .hero-v19 .hero-copy{padding-top:0!important}
body[data-page="home"] .hero-v19 .hero-copy>h1{max-width:690px!important}

/* --- Desktop identity stage --- */
.v19-stage{
  min-height:700px!important;
  overflow:visible!important;
}
.v19-scene{
  inset:-2% 0 0!important;
  overflow:visible;
}
.v19-scene:before{
  left:5%!important;
  top:5%!important;
  width:76%!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(5,47,69,.28) 0 31%,rgba(0,176,225,.16) 44%,rgba(0,176,225,.045) 57%,transparent 72%)!important;
  box-shadow:0 0 100px rgba(31,231,255,.05);
}
.v19-network{
  left:0!important;
  top:5%!important;
  width:87%!important;
  height:88%!important;
  opacity:.7!important;
  mask-image:radial-gradient(circle at 48% 46%,#000 0 58%,transparent 80%)!important;
}
.v19-orbit{
  left:0!important;
  top:0!important;
  width:79%!important;
  opacity:.88;
  border-color:rgba(31,231,255,.23)!important;
  box-shadow:inset 0 0 90px rgba(31,231,255,.04),0 0 76px rgba(31,231,255,.05)!important;
}

/* Remove the V19 white card completely. */
.v19-portrait-shell{
  left:5%!important;
  top:1%!important;
  width:72%!important;
  height:98%!important;
  z-index:5!important;
}
.v19-portrait-shell:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:91%;
  aspect-ratio:1;
  left:-3%;
  top:2%;
  border-radius:50%;
  border:1px solid rgba(31,231,255,.18);
  background:
    radial-gradient(circle at 50% 52%,rgba(3,37,55,.22),rgba(3,18,30,.11) 55%,transparent 72%),
    url('/assets/world-map.svg') center/142% auto no-repeat;
  opacity:.58;
  filter:drop-shadow(0 0 28px rgba(31,231,255,.08));
  mask-image:radial-gradient(circle,#000 0 63%,rgba(0,0,0,.55) 68%,transparent 75%);
}
.v19-portrait-shell:after{
  content:"";
  position:absolute;
  z-index:-2;
  left:3%;
  right:-3%;
  bottom:1%;
  height:22%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(32,232,255,.22),rgba(32,232,255,.055) 39%,transparent 72%);
  filter:blur(13px);
  transform:perspective(600px) rotateX(69deg);
}
.v19-portrait-frame{
  inset:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.v19-portrait-frame:before{
  content:""!important;
  position:absolute!important;
  inset:6% 0 2% 1%!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:46% 46% 18% 18% / 28% 28% 12% 12%!important;
  background:
    radial-gradient(circle at 58% 32%,rgba(53,234,255,.19),transparent 44%),
    linear-gradient(90deg,rgba(31,231,255,.04),transparent 22% 78%,rgba(130,255,79,.025))!important;
  box-shadow:inset 0 0 70px rgba(31,231,255,.035),0 0 70px rgba(31,231,255,.045)!important;
  mix-blend-mode:normal!important;
}
.v19-portrait-frame:after{
  content:""!important;
  position:absolute!important;
  left:7%!important;
  right:1%!important;
  bottom:-2%!important;
  height:26%!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(to top,#020911 0,rgba(2,9,17,.8) 19%,rgba(2,9,17,.24) 56%,transparent 100%)!important;
  filter:none!important;
}
.v19-stage .v19-portrait{
  position:absolute!important;
  left:-2%!important;
  bottom:-1%!important;
  width:102%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  background:transparent!important;
  opacity:1!important;
  filter:
    saturate(.95)
    contrast(1.035)
    brightness(.98)
    drop-shadow(-1px 0 1px rgba(183,250,255,.85))
    drop-shadow(0 0 18px rgba(31,231,255,.18))
    drop-shadow(0 26px 42px rgba(0,0,0,.48))!important;
  transform:translateZ(50px) scale(1.02)!important;
}
.v19-scene:hover .v19-portrait{
  transform:translateZ(50px) scale(1.035)!important;
  filter:
    saturate(.99)
    contrast(1.045)
    brightness(1)
    drop-shadow(-1px 0 1px rgba(183,250,255,.92))
    drop-shadow(0 0 24px rgba(31,231,255,.23))
    drop-shadow(0 28px 44px rgba(0,0,0,.5))!important;
}
.v19-portrait-rim{
  inset:5% 0 3% 0!important;
  border-radius:46% 46% 16% 16% / 24% 24% 10% 10%!important;
  box-shadow:
    inset 14px 0 28px rgba(31,231,255,.055),
    inset -10px 0 26px rgba(130,255,79,.018),
    0 0 44px rgba(31,231,255,.025)!important;
}

/* Arrange HUD like the approved visual reference. */
.v19-logo-orb{
  left:0!important;
  top:9%!important;
  width:92px!important;
  opacity:.88;
}
.v19-proof-cluster{
  right:0!important;
  top:13%!important;
  width:218px!important;
  gap:10px!important;
}
.v19-proof{
  min-height:74px!important;
  background:linear-gradient(120deg,rgba(4,18,30,.92),rgba(3,17,28,.72))!important;
  border-color:rgba(31,231,255,.27)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.25),inset 0 0 28px rgba(31,231,255,.018),0 0 26px rgba(31,231,255,.025)!important;
}
.v19-proof.green{border-color:rgba(130,255,79,.38)!important}
.v19-brand-note{
  right:0!important;
  top:69%!important;
  width:218px!important;
  background:linear-gradient(135deg,rgba(4,18,30,.9),rgba(3,12,20,.75))!important;
}
.v19-side-words{right:1%!important;bottom:4%!important}

/* --- Arabic home uses the same real portrait treatment --- */
html[dir="rtl"] body[data-page="home"] .page-hero .v19-stage{
  min-height:610px!important;
}
html[dir="rtl"] body[data-page="home"] .page-hero .v19-portrait-shell{
  left:7%!important;
  width:72%!important;
}

/* --- Mobile: same identity, no white rectangle, portrait stays above fold --- */
@media(max-width:760px){
  body[data-page="home"] .hero.hero-v19{padding-top:78px!important}
  body[data-page="home"] .hero-v19 .hero-grid{width:min(100% - 22px,620px)!important}
  body[data-page="home"] .v19-mobile-identity{
    height:306px!important;
    margin:17px 0 15px!important;
    border:1px solid rgba(31,231,255,.13)!important;
    border-radius:12px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 72% 42%,rgba(31,231,255,.17),transparent 42%),
      linear-gradient(145deg,rgba(3,18,29,.94),rgba(2,8,14,.98))!important;
  }
  body[data-page="home"] .v19-mobile-identity:after{
    content:"";
    position:absolute;
    z-index:0;
    right:2%;
    top:6%;
    width:72%;
    aspect-ratio:1;
    border-radius:50%;
    background:url('/assets/world-map.svg') center/155% auto no-repeat;
    opacity:.24;
    mask-image:radial-gradient(circle,#000 0 62%,transparent 74%);
  }
  .v19-mobile-orbit{
    z-index:1!important;
    right:-2%!important;
    top:3%!important;
    width:73%!important;
    opacity:.84;
  }
  .v19-mobile-portrait{
    z-index:3!important;
    right:-4%!important;
    top:10px!important;
    width:72%!important;
    height:292px!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    clip-path:none!important;
    box-shadow:none!important;
  }
  .v19-mobile-portrait:after{
    content:"";
    position:absolute;
    z-index:4;
    left:4%;right:0;bottom:-1%;height:20%;
    background:linear-gradient(to top,#020911,rgba(2,9,17,.42),transparent);
    pointer-events:none;
  }
  .v19-mobile-portrait img,
  .v19-mobile-identity .v19-mobile-portrait img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    background:transparent!important;
    filter:
      saturate(.96)
      contrast(1.035)
      drop-shadow(-1px 0 1px rgba(191,250,255,.8))
      drop-shadow(0 0 15px rgba(31,231,255,.17))
      drop-shadow(0 18px 26px rgba(0,0,0,.38))!important;
  }
  .v19-mobile-badge{
    z-index:6!important;
    left:12px!important;
    bottom:18px!important;
    width:37%!important;
    background:rgba(3,17,28,.88)!important;
  }
  html[dir="rtl"] .v19-mobile-badge{left:auto!important;right:12px!important}
}

@media(max-width:430px){
  body[data-page="home"] .v19-mobile-identity{height:288px!important}
  .v19-mobile-portrait{height:276px!important;width:74%!important;right:-6%!important}
  .v19-mobile-badge{width:39%!important}
}

/* Reduced-motion stays explicit for the additional composition. */
@media(prefers-reduced-motion:reduce){
  .v19-stage .v19-portrait,.v19-mobile-portrait img{transition:none!important}
}