/* =========================================================
   Professional isolated hero layer
   This file intentionally avoids the old .hero/.reveal rules.
   ========================================================= */

:root{ --header:54px; }

.header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header);
  z-index:100;
  background:transparent;
  border:0;
  backdrop-filter:none;
  box-shadow:none;
  transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.header.is-solid{
  background:rgba(255,253,248,.84);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 8px 28px rgba(0,0,0,.05);
}
.header .wrap{
  width:100%;
  max-width:none;
  padding-inline:max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  direction:ltr;
}
.brand{
  order:2;
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:0;
  color:#fff;
  font:800 11px/1 "Baloo Bhaijaan 2", system-ui, sans-serif;
  letter-spacing:.14em;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}
.brand-sketch{display:none!important;}
.header-nav{
  order:1;
  display:flex;
  align-items:center;
  gap:14px;
  direction:rtl;
}
.header-nav a{
  display:inline-flex!important;
  color:#fff;
  font-weight:800;
  font-size:14px;
  text-shadow:0 1px 10px rgba(0,0,0,.23);
  white-space:nowrap;
}
.header-nav a::after{background:#ffd65c;}
.lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:7px 13px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#171717;
  font:800 12px/1 "Baloo Bhaijaan 2", system-ui, sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  white-space:nowrap;
}
.header.is-solid .brand,
.header.is-solid .header-nav a{
  color:#171717;
  text-shadow:none;
}

.hero-pro{
  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#111;
}
.hero-pro-bg,
.hero-pro-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-pro-bg{z-index:0;}
.hero-pro-bg img{
  object-fit:cover;
  object-position:center center;
}
.hero-pro-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.11));
}

/* The avatar is placed inside a design grid, not with accumulated overrides. */
.hero-pro-layout{
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(24px, 1fr) minmax(240px, 430px) minmax(150px, 90px) minmax(620px, 760px) minmax(24px, 1fr);
  align-items:center;
  pointer-events:none;
}
.hero-pro-avatar{
  grid-column:2;
  justify-self:center;
  align-self:center;
  position:relative;
  width:clamp(260px, 20vw, 350px);
  aspect-ratio:1 / 1;
  pointer-events:auto;
  transform:translateY(4%);
}
.avatar-disc,
.avatar-clip{
  position:absolute;
  left:50%;
  bottom:0;
  width:88%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
}
.avatar-disc{
  z-index:1;
  background:linear-gradient(145deg,#f9d763 0%,#f0c94f 100%);
  box-shadow:0 22px 44px rgba(0,0,0,.16);
}
.avatar-clip{
  z-index:4;
  overflow:hidden;
}
.avatar-clip img{
  position:absolute;
  left:50%;
  bottom:-1%;
  width:88%;
  max-width:none;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  filter:drop-shadow(0 13px 18px rgba(0,0,0,.14));
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.hero-pro-avatar:hover .avatar-clip img{
  transform:translateX(-50%) translateY(-4px) scale(1.01);
}
.avatar-ring{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.ring-main{
  z-index:3;
  left:4%;
  bottom:2%;
  width:92%;
  aspect-ratio:1;
  border:4px solid rgba(255,255,255,.92);
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-23deg);
}
.ring-soft{
  z-index:3;
  left:12%;
  bottom:10%;
  width:76%;
  aspect-ratio:1;
  border:3px solid rgba(255,214,92,.7);
  border-left-color:transparent;
  border-top-color:transparent;
  transform:rotate(18deg);
}
.avatar-spark{
  position:absolute;
  z-index:5;
  display:block;
  background:#ffd65c;
  pointer-events:none;
}
.spark-one{
  left:9%;
  top:18%;
  width:13px;
  height:13px;
  border-radius:3px;
  transform:rotate(42deg);
}
.spark-two{
  right:14%;
  bottom:25%;
  width:8px;
  height:24px;
  border-radius:999px;
  transform:rotate(36deg);
}
.avatar-name{
  position:absolute;
  z-index:10;
  left:calc(100% - 22px);
  bottom:24%;
  padding:7px 12px 6px;
  border:1.5px solid rgba(23,23,23,.92);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  color:#171717;
  box-shadow:2px 3px 0 rgba(23,23,23,.92);
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.hero-pro-doodle{
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:.88;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.10));
}
.doodle-code-pro{width:62px;left:3.5%;top:18%;transform:rotate(-7deg);}
.doodle-star-pro{width:45px;left:5%;bottom:17%;transform:rotate(8deg);}
.doodle-sliders-pro{width:62px;right:3.4%;top:18%;transform:rotate(7deg);}
.doodle-loop-pro{width:74px;right:8%;bottom:7%;transform:rotate(5deg);}

/* Hide the old scroll cue completely. */
.hero-scroll-cue{display:none!important;}

@media (max-width: 1280px){
  .hero-pro-layout{
    grid-template-columns:minmax(24px, 1fr) minmax(230px, 360px) minmax(90px, 100px) minmax(520px, 650px) minmax(24px, 1fr);
  }
  .hero-pro-avatar{width:clamp(240px, 21vw, 310px);}
}

@media (max-width: 1050px){
  .hero-pro-layout{
    grid-template-columns:minmax(20px, .9fr) minmax(220px, 310px) minmax(40px, 70px) minmax(440px, 1.2fr) minmax(20px, .9fr);
  }
  .hero-pro-avatar{width:clamp(220px, 24vw, 285px);}
  .doodle-code-pro{width:56px;left:3%;top:14%;}
  .doodle-sliders-pro{width:56px;right:3%;top:15%;}
}

@media (max-width: 720px){
  :root{--header:50px;}
  .header .wrap{padding-inline:max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));}
  .brand{font-size:9px;letter-spacing:.12em;}
  .header-nav{gap:10px;}
  .header-nav a{font-size:12px;}
  .lang{min-width:62px;padding:6px 10px;font-size:10px;}

  .hero-pro-bg img{object-position:center center;}
  .hero-pro-layout{
    display:block;
    pointer-events:none;
  }
  .hero-pro-avatar{
    position:absolute;
    left:50%;
    bottom:8%;
    width:min(45vw, 220px);
    transform:translateX(-50%);
  }
  .avatar-disc,
  .avatar-clip{width:92%;}
  .avatar-clip img{width:89%;bottom:-1%;}
  .ring-main{border-width:3px;}
  .ring-soft{border-width:2px;}
  .avatar-name{
    left:calc(100% - 18px);
    bottom:23%;
    padding:6px 10px 5px;
    font-size:10px;
  }
  .doodle-code-pro{width:48px;left:5%;top:10%;}
  .doodle-star-pro{width:37px;left:6%;bottom:24%;}
  .doodle-sliders-pro{width:48px;right:5%;top:17%;}
  .doodle-loop-pro{width:56px;right:8%;bottom:4%;}
}

@media (max-width: 420px){
  .hero-pro-avatar{width:min(48vw, 190px);bottom:9%;}
  .avatar-name{left:calc(100% - 14px);font-size:9px;}
  .header-nav{gap:8px;}
  .lang{min-width:56px;padding-inline:8px;}
}


/* ===== v2 stable hero refinements ===== */
.header-inner{position:relative;}
.brand{position:relative;order:2;margin-inline-start:auto;min-width:max-content;}
.brand span{display:inline-block;text-transform:uppercase;}
html[lang="ar"] .brand span{
  text-transform:none;
  color:#ffd65c;
  font-weight:800;
  font-size:16px;
  letter-spacing:0;
  -webkit-text-stroke:.7px rgba(23,23,23,.65);
  text-shadow:0 1px 6px rgba(0,0,0,.16);
}
html[lang="ar"] .header.is-solid .brand span{color:#f0c333;}

/* Upper doodles removed; keep only lower decorative accents */
.doodle-code-pro,
.doodle-sliders-pro{display:none !important;}
.doodle-star-pro{left:5.5%;bottom:17%;width:44px;transform:rotate(9deg);}
.doodle-loop-pro{right:7.5%;bottom:6%;width:70px;transform:rotate(4deg);}

.hero-pro-layout{display:block;pointer-events:none;}
.hero-pro-avatar{
  position:absolute;
  left:28%;
  top:70%;
  width:clamp(250px,17.5vw,315px);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.avatar-disc,
.avatar-clip{
  width:90%;
  bottom:0;
}
.avatar-disc{box-shadow:0 18px 34px rgba(0,0,0,.14);}
.avatar-clip img{width:86%;bottom:-1%;}
.ring-main{
  left:5%;
  bottom:0;
  width:90%;
  border-width:4px;
}
.ring-soft{
  left:13%;
  bottom:8%;
  width:74%;
  border-width:2.5px;
  opacity:.55;
}
.spark-one{left:10%;top:18%;}
.spark-two{right:15%;bottom:23%;}
.avatar-name{
  left:auto;
  right:7%;
  bottom:15%;
  z-index:12;
  padding:6px 11px 5px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
}

/* Slightly stronger desktop positioning to visually face the quote */
@media (min-width: 1440px){
  .hero-pro-avatar{left:27.5%;top:69%;width:320px;}
}
@media (max-width: 1280px){
  .hero-pro-avatar{left:27.5%;top:69.5%;width:clamp(235px,18vw,290px);}
}
@media (max-width: 1050px){
  .hero-pro-avatar{left:27%;top:69.5%;width:clamp(220px,21vw,265px);}
  .avatar-name{right:5%;bottom:14%;}
}
@media (max-width: 720px){
  .hero-pro-avatar{
    left:50%;
    top:auto;
    bottom:6.5%;
    width:min(42vw,198px);
    transform:translateX(-50%);
  }
  .avatar-disc,.avatar-clip{width:92%;}
  .avatar-clip img{width:86%;bottom:-1%;}
  .ring-main{left:4%;width:92%;bottom:0;border-width:3px;}
  .ring-soft{left:12%;width:76%;bottom:7%;border-width:2px;}
  .avatar-name{right:6%;bottom:15%;font-size:10px;padding:5px 9px 4px;}
  .doodle-star-pro{left:7%;bottom:21%;width:36px;}
  .doodle-loop-pro{right:9%;bottom:5%;width:52px;}
}
@media (max-width: 420px){
  .hero-pro-avatar{width:min(43vw,178px);bottom:7.5%;}
  .avatar-name{right:4%;bottom:15%;font-size:9px;}
  html[lang="ar"] .brand span{font-size:13px;}
}


/* ===== Image-coordinate anchored avatar v3 =====
   The avatar position is no longer guessed with viewport percentages.
   JS calculates the rendered background image rectangle after object-fit: cover,
   then maps the avatar to a fixed coordinate on the actual 1920x1080 / 1080x1920 artwork.
*/
.header .wrap{padding-inline:max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));}
.brand{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.25);}
html[lang="ar"] .brand span{
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  -webkit-text-stroke:0 transparent;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}
.header.is-solid .brand,
.header.is-solid .brand span,
.header.is-solid .header-nav a{color:#171717;text-shadow:none;-webkit-text-stroke:0 transparent;}

.hero-pro-layout{display:block;pointer-events:none;}
.hero-pro-avatar{
  position:absolute;
  left:var(--avatar-left, 28%);
  top:var(--avatar-top, 58%);
  width:var(--avatar-size, 260px);
  height:var(--avatar-size, 260px);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  will-change:left,top,width,height;
}
.avatar-disc,
.avatar-clip{
  left:50%;
  bottom:0;
  width:84%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
}
.avatar-disc{box-shadow:0 16px 30px rgba(0,0,0,.14);}
.avatar-clip{overflow:hidden;}
.avatar-clip img{width:83%;bottom:-1%;}
.ring-main{left:8%;bottom:0;width:84%;border-width:3.5px;}
.ring-soft{left:16%;bottom:8%;width:68%;border-width:2px;opacity:.52;}
.avatar-name{
  left:auto;
  right:7%;
  bottom:10%;
  transform:none;
  font-size:10.5px;
  padding:5px 10px 4px;
  border-radius:999px;
}
.spark-one{left:13%;top:20%;width:10px;height:10px;}
.spark-two{right:18%;bottom:18%;width:6px;height:18px;}
.doodle-code-pro,.doodle-sliders-pro{display:none!important;}
.doodle-star-pro{left:6%;bottom:17%;width:38px;opacity:.78;}
.doodle-loop-pro{right:8%;bottom:6%;width:58px;opacity:.78;}

@media(max-width:720px){
  html[lang="ar"] .brand span{font-size:13px;}
  .hero-pro-avatar{
    left:var(--avatar-left, 50%);
    top:var(--avatar-top, auto);
    width:var(--avatar-size, 220px);
    height:var(--avatar-size, 220px);
    transform:translate(-50%,-50%);
  }
  .avatar-disc,.avatar-clip{width:84%;}
  .avatar-clip img{width:83%;bottom:-1%;}
  .ring-main{left:8%;width:84%;border-width:3px;}
  .ring-soft{left:16%;width:68%;border-width:2px;}
  .avatar-name{right:7%;bottom:10%;font-size:9px;padding:4px 8px 3px;}
  .doodle-star-pro{left:7%;bottom:20%;width:32px;}
  .doodle-loop-pro{right:10%;bottom:5%;width:46px;}
}


/* ===== Final polished hero avatar v4 ===== */
html[lang="ar"] .brand span{
  color:#fff !important;
  font-size:15px !important;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}

.hero-pro-avatar{
  left:var(--avatar-left, 505px) !important;
  top:var(--avatar-top, 670px) !important;
  width:var(--avatar-size, 250px) !important;
  height:var(--avatar-size, 250px) !important;
  transform:translate(-50%,-50%) !important;
}
.hero-pro-avatar .avatar-disc{
  left:50% !important;
  bottom:8% !important;
  width:76% !important;
  aspect-ratio:1 !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#f6d45d 0%,#efc74a 100%) !important;
  box-shadow:0 16px 26px rgba(0,0,0,.12) !important;
}
.hero-pro-avatar .avatar-clip{
  left:50% !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.hero-pro-avatar .avatar-clip img{
  left:50% !important;
  bottom:4% !important;
  width:74% !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.14)) !important;
}
.hero-pro-avatar .ring-main{
  left:10% !important;
  bottom:6% !important;
  width:80% !important;
  border-width:3px !important;
  border-right-color:transparent !important;
  border-bottom-color:transparent !important;
}
.hero-pro-avatar .ring-soft{
  left:17% !important;
  bottom:14% !important;
  width:66% !important;
  border-width:2px !important;
  opacity:.45 !important;
}
.hero-pro-avatar .spark-one{left:16% !important;top:20% !important;width:10px !important;height:10px !important;}
.hero-pro-avatar .spark-two{right:18% !important;bottom:24% !important;width:6px !important;height:16px !important;}
.hero-pro-avatar .avatar-name{
  left:auto !important;
  right:12% !important;
  bottom:12% !important;
  padding:6px 10px 5px !important;
  border-radius:999px !important;
  background:rgba(20,20,20,.68) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 10px 16px rgba(0,0,0,.12) !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media (max-width: 720px){
  html[lang="ar"] .brand span{font-size:13px !important;}
  .hero-pro-avatar{
    left:var(--avatar-left, 540px) !important;
    top:var(--avatar-top, 1525px) !important;
    width:var(--avatar-size, 200px) !important;
    height:var(--avatar-size, 200px) !important;
  }
  .hero-pro-avatar .avatar-disc{width:76% !important;bottom:8% !important;}
  .hero-pro-avatar .avatar-clip img{width:75% !important;bottom:5% !important;}
  .hero-pro-avatar .ring-main{left:10% !important;bottom:6% !important;width:80% !important;}
  .hero-pro-avatar .ring-soft{left:17% !important;bottom:14% !important;width:66% !important;}
  .hero-pro-avatar .avatar-name{right:11% !important;bottom:11% !important;font-size:10px !important;}
}


/* ===== Final correction v3: clipped lower photo, correct circle, white tag, solid-header brand ===== */
html[lang="ar"] .brand span{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 10px rgba(0,0,0,.25) !important;
}
html[lang="ar"] .header.is-solid .brand span,
.header.is-solid .brand span{
  color:#171717 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

.hero-pro-avatar{
  left:var(--avatar-left, 520px) !important;
  top:var(--avatar-top, 520px) !important;
  width:var(--avatar-size, 300px) !important;
  height:var(--avatar-size, 300px) !important;
  transform:translate(-50%,-50%) !important;
}
.hero-pro-avatar .avatar-disc,
.hero-pro-avatar .avatar-clip{
  left:50% !important;
  bottom:0 !important;
  width:86% !important;
  aspect-ratio:1 !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
}
.hero-pro-avatar .avatar-disc{
  background:linear-gradient(145deg,#f8d765 0%,#efc84e 100%) !important;
  box-shadow:0 18px 30px rgba(0,0,0,.13) !important;
  z-index:1 !important;
}
.hero-pro-avatar .avatar-clip{
  overflow:hidden !important;
  z-index:4 !important;
}
.hero-pro-avatar .avatar-clip img{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:94% !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.13)) !important;
}
.hero-pro-avatar:hover .avatar-clip img{
  transform:translateX(-50%) translateY(-3px) scale(1.01) !important;
}
.hero-pro-avatar .ring-main{
  left:7% !important;
  bottom:0 !important;
  width:86% !important;
  border-width:3.5px !important;
  border-right-color:transparent !important;
  border-bottom-color:transparent !important;
}
.hero-pro-avatar .ring-soft{
  left:15% !important;
  bottom:8% !important;
  width:70% !important;
  border-width:2px !important;
  opacity:.5 !important;
}
.hero-pro-avatar .spark-one{left:12% !important;top:18% !important;width:11px !important;height:11px !important;}
.hero-pro-avatar .spark-two{display:none !important;}
.hero-pro-avatar .avatar-name{
  left:auto !important;
  right:8% !important;
  bottom:5% !important;
  z-index:12 !important;
  padding:6px 11px 5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  color:#171717 !important;
  border:1.5px solid rgba(23,23,23,.88) !important;
  box-shadow:2px 3px 0 rgba(23,23,23,.78) !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.doodle-code-pro,.doodle-sliders-pro{display:none!important;}
.doodle-star-pro{left:6%;bottom:17%;width:38px;opacity:.78;}
.doodle-loop-pro{right:8%;bottom:6%;width:58px;opacity:.78;}

@media(max-width:720px){
  html[lang="ar"] .brand span{font-size:13px !important;color:#fff !important;}
  html[lang="ar"] .header.is-solid .brand span{color:#171717 !important;}
  .hero-pro-avatar{
    left:var(--avatar-left, 540px) !important;
    top:var(--avatar-top, 1515px) !important;
    width:var(--avatar-size, 210px) !important;
    height:var(--avatar-size, 210px) !important;
  }
  .hero-pro-avatar .avatar-disc,
  .hero-pro-avatar .avatar-clip{width:86% !important;bottom:0 !important;}
  .hero-pro-avatar .avatar-clip img{width:94% !important;bottom:0 !important;}
  .hero-pro-avatar .ring-main{left:7% !important;width:86% !important;bottom:0 !important;border-width:3px !important;}
  .hero-pro-avatar .ring-soft{left:15% !important;width:70% !important;bottom:8% !important;border-width:2px !important;}
  .hero-pro-avatar .avatar-name{right:8% !important;bottom:5% !important;font-size:10px !important;padding:5px 9px 4px !important;}
  .doodle-star-pro{left:7%;bottom:20%;width:32px;}
  .doodle-loop-pro{right:10%;bottom:5%;width:46px;}
}


/* V6 performance test: remove live backdrop blur while preserving the solid-header look. */
.header.is-solid{
  background:rgba(255,253,248,.96);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 5px 18px rgba(0,0,0,.045);
}

/* Avatar is static after layout calculation; keeping four will-change properties
   permanently allocated an unnecessary compositor layer. */
.hero-pro-avatar{
  will-change:auto!important;
}