/* KAYAN - seamless hero to intro transition (isolated stylesheet) */
:root{
  --kayan-blend-bg:#090b0e;
  --kayan-blend-gold:rgba(201,169,106,.18);
}

/* Let the bottom of the hero dissolve into the next section instead of ending abruptly. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  z-index:1;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  left:0;
  right:0;
  bottom:-2px;
  height:clamp(150px,20vw,270px);
  background:linear-gradient(
    to bottom,
    rgba(9,11,14,0) 0%,
    rgba(9,11,14,.12) 22%,
    rgba(9,11,14,.48) 55%,
    rgba(9,11,14,.86) 82%,
    var(--kayan-blend-bg) 100%
  );
}

/* The intro overlaps the hero fade and uses a soft gold atmospheric glow. */
.intro{
  position:relative;
  z-index:2;
  width:100% !important;
  max-width:none !important;
  margin:clamp(-115px,-8vw,-70px) 0 0 !important;
  padding:clamp(5px,17vw,25px) 5% clamp(5px,8vw,0px) !important;
  overflow:hidden;
  background:
    radial-gradient(ellipse 48% 42% at 50% 0%, var(--kayan-blend-gold) 0%, rgba(201,169,106,.055) 38%, transparent 78%),
    linear-gradient(180deg, rgba(9,11,14,0) 0%, rgba(9,11,14,.94) 25%, var(--kayan-blend-bg) 62%);
  border:0;
  text-align:center;
}
.intro::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(620px,72%);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,106,.5),transparent);
  opacity:.75;
}
.intro::after{
  content:"";
  position:absolute;
  width:min(720px,90vw);
  height:220px;
  top:-150px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(201,169,106,.07);
  filter:blur(65px);
  pointer-events:none;
}
.intro > *{
  position:relative;
  z-index:1;
}
.intro .eyebrow{
  text-shadow:0 0 18px rgba(201,169,106,.22);
}
.intro h2{
  text-shadow:0 2px 22px rgba(201,169,106,.12);
}
.intro .gold-line{
  background:linear-gradient(90deg,transparent,#c9a96a,transparent);
  width:110px;
  height:2px;
}
.intro p{
  color:#c6c0b4;
}

@media(max-width:760px){
  .hero::before{
    height:150px;
  }
  .intro{
    margin-top:-65px !important;
    padding:115px 6% 65px !important;
    background:
      radial-gradient(ellipse 75% 35% at 50% 0%, rgba(201,169,106,.12) 0%, transparent 78%),
      linear-gradient(180deg, rgba(9,11,14,0) 0%, rgba(9,11,14,.96) 30%, var(--kayan-blend-bg) 68%);
  }
  .intro::before{width:62%}
}