/* Homepage hero corrections from the approved three-screen reference. */

/* Keep the existing header design, but retain it while the page scrolls. */
.top{position:fixed;top:0;left:0;right:0;width:auto;z-index:80}
body:not(.home-page){padding-top:86px}

/* Use the approved technical anchor artwork instead of CSS-drawn placeholders. */
.home-page .blueprint{
  display:block;background:url('../media/alareen-anchor-blueprint-v6.png') center/contain no-repeat;
  color:transparent;opacity:.12!important;filter:saturate(.55) contrast(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 82%,transparent 100%);
  pointer-events:none
}
.home-page .blueprint:before,.home-page .blueprint:after,.home-page .blueprint>span{display:none!important}

/* The curve follows one continuous asymmetric ellipse, including its gold trace. */
.home-page .hero-media{
  overflow:hidden;border-radius:0!important;
  -webkit-clip-path:ellipse(112% 78% at 100% 33%);
  clip-path:ellipse(112% 78% at 100% 33%);
  box-shadow:none!important;filter:drop-shadow(-1.5px 0 0 #cf9e45)
}
.home-page .hero-media:before{box-shadow:none!important}
.home-page .hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}

/* Both stock cards share the same glass, dimensions and vertical alignment. */
.home-page .stock-cards{align-items:stretch}
.home-page .stock-cards>div{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:66px;border-radius:9px;color:#2a251d;
  background:linear-gradient(118deg,#f8e9cbe8 0,#dfbd83e8 55%,#cfa35be8 100%);
  border:1px solid #ba8432;box-shadow:0 8px 22px #3d290f20,inset 0 1px #fff9;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.home-page .stock-cards strong{line-height:1.05}
.home-page .stock-cards span{line-height:1.2}

@media (min-width:981px){
  .home-page .top{position:fixed;top:18px;left:4%;right:4%}
  .home-page .blueprint{left:2.8%;top:54px;width:34%;height:555px}
  .home-page .hero{min-height:640px;grid-template-columns:36% 64%;padding:0 0 72px}
  .home-page .hero-media{align-self:start;height:630px;margin:0}
  .home-page .stock-cards{left:12%;bottom:40px;gap:14px}
  .home-page .stock-cards>div{width:190px;min-width:190px;padding:10px 13px}
}

@media (min-width:601px) and (max-width:980px){
  body:not(.home-page){padding-top:72px}
  .home-page .top{position:fixed;top:14px;left:22px;right:22px}
  .home-page .blueprint{left:1%;top:78px;width:42%;height:455px;opacity:.115!important}
  .home-page .hero{min-height:600px;grid-template-columns:42% 58%;padding:88px 0 64px}
  .home-page .hero-media{
    height:470px;-webkit-clip-path:ellipse(116% 80% at 100% 35%);clip-path:ellipse(116% 80% at 100% 35%)
  }
  .home-page .stock-cards{left:8%;right:5%;bottom:25px;gap:8px}
  .home-page .stock-cards>div{width:auto;min-width:0;flex:1;height:58px;padding:7px 5px}
}

@media (max-width:600px){
  body:not(.home-page){padding-top:62px}
  .top,.home-page .top{position:fixed;top:8px;left:10px;right:10px}
  .home-page .blueprint{
    left:2%;top:68px;width:96%;height:305px;opacity:.105!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 80%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 80%,transparent)
  }
  .home-page .hero-media{
    width:100%;height:300px;margin:0;
    -webkit-clip-path:ellipse(122% 82% at 100% 36%);clip-path:ellipse(122% 82% at 100% 36%)
  }
  .home-page .hero-media video{object-position:58% center}
  .home-page .stock-cards{left:14px;right:14px;bottom:12px;gap:8px}
  .home-page .stock-cards>div{width:auto;min-width:0;flex:1;height:55px;padding:6px 4px}
}

@media (prefers-reduced-motion:reduce){.home-page .blueprint{animation:none!important}}