/* KAYAN hero layout - full image and upper-center content */
.hero{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  height:500px;
  min-height:0;
  max-height:none;
  overflow:hidden;
  background-color:#090b0e;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,10,.08) 0%,rgba(4,6,10,.02) 48%,rgba(4,6,10,.08) 100%);
}
.hero-shade{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(4,6,10,.12),rgba(4,6,10,.02),rgba(4,6,10,.12));
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(92%,900px);
  max-width:900px;
  margin:0 auto;
  padding:clamp(75px,3vw,185px) 0 0;
  text-align:center;
}
.hero-content .eyebrow{ 
   display: inline-block;
    margin-bottom: 3px;
    border: 1px solid;
    border-radius: 999px;
    padding: 6px 20px;
	}
.hero h1{
  position:relative;
  display:table;
  margin:18px auto 20px;
  line-height:1.22;
  color:#fff;
  background:linear-gradient(105deg,#fff 12%,#fff4d8 35%,#d9b56f 50%,#fff8e8 65%,#fff 88%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:kayanTitleShimmer 7s ease-in-out infinite, kayanTitleGlow 4s ease-in-out infinite;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.48));
}
.hero h1::before,
.hero h1::after{
  content:"";
  position:absolute;
  top:52%;
  width:clamp(28px,6vw,82px);
  height:1px;
  background:linear-gradient(90deg,transparent,#d8b36b);
  opacity:.9;
}
.hero h1::before{
  right:calc(100% + 22px);
  transform-origin:right center;
  animation:kayanOrnamentInRight 1.2s ease-out both;
}
.hero h1::after{
  left:calc(100% + 22px);
  transform:scaleX(-1);
  transform-origin:right center;
  animation:kayanOrnamentInLeft 1.2s ease-out both;
}
.hero p{max-width:720px;margin:0 auto 22px}
.hero-content .gold-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(225px,82vw);
  min-height:58px;
  margin:8px auto 0;
  padding:13px 25px;
  overflow:hidden;
  border:1px solid #f0d49b;
  border-radius:9px;
  background:linear-gradient(135deg,#8f692f 0%,#d5ad61 42%,#f3d99b 70%,#ad8544 100%);
  color:#171108;
  box-shadow:0 8px 26px rgba(0,0,0,.32),0 0 0 4px rgba(201,169,106,.10),inset 0 1px 0 rgba(255,255,255,.55);
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}
.hero-content .gold-btn::before{
  content:"";
  flex:0 0 22px;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171008' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 20l1.2-4.6A8.4 8.4 0 1 1 21 11.5Z'/%3E%3Cpath d='M8.5 8.2c.3-.5.6-.5.9-.5h.4c.2 0 .4.1.5.4l.7 1.6c.1.2.1.4-.1.6l-.6.7c-.2.2-.2.4-.1.6.5.8 1.2 1.5 2 2 .2.1.4.1.6-.1l.7-.7c.2-.2.4-.2.6-.1l1.6.7c.3.1.4.3.4.5 0 .3-.2 1-.7 1.4-.4.4-1.1.6-1.7.5-1-.2-2.2-.8-3.4-1.9-1.2-1.1-2-2.4-2.2-3.4-.1-.8.1-1.4.5-1.8Z'/%3E%3C/svg%3E");
}
.hero-content .gold-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-65%;
  width:38%;
  height:180%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:left .65s ease;
  pointer-events:none;
}
.hero-content .gold-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 5px rgba(201,169,106,.14),0 0 24px rgba(225,190,118,.25);
}
.hero-content .gold-btn:hover::after{left:130%}
@keyframes kayanTitleShimmer{
  0%,100%{background-position:100% center}
  50%{background-position:0% center}
}
@keyframes kayanTitleGlow{
  0%,100%{filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
  50%{filter:drop-shadow(0 3px 19px rgba(218,180,105,.24))}
}
@keyframes kayanOrnamentInRight{
  from{opacity:0;transform:scaleX(.15)}
  to{opacity:.9;transform:scaleX(1)}
}
@keyframes kayanOrnamentInLeft{
  from{opacity:0;transform:scaleX(-.15)}
  to{opacity:.9;transform:scaleX(-1)}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero h1::before,.hero h1::after{animation:none}
  .hero-content .gold-btn,.hero-content .gold-btn::after{transition:none}
}
@media(max-width:760px){
  .hero{
    height:390px;
    background-size:100% auto !important;
    background-position:center bottom !important;
  }
  .hero-content{
    width:92%;
    padding:24px 0 0;
  }
  .hero-content .eyebrow{font-size:8px;letter-spacing:1.4px}
  .hero h1{font-size:clamp(25px,6.8vw,34px);margin:8px auto 10px}
  .hero p{font-size:12px;line-height:1.65;margin-bottom:12px}
  .hero-content .gold-btn{width:min(205px,78vw);min-height:48px;padding:9px 18px;font-size:12px;gap:9px}
  .hero-content .gold-btn::before{width:19px;height:19px;flex-basis:19px}
  .hero h1::before,.hero h1::after{width:22px}
  .hero h1::before{right:calc(100% + 9px)}
  .hero h1::after{left:calc(100% + 9px)}
}
@media(max-width:420px){
  .hero{height:370px}
  .hero-content{padding-top:20px}
  .hero h1{font-size:25px}
  .hero p{font-size:11px}
  .hero h1::before,.hero h1::after{display:none}
}
