/* ================================
   HERO (Enhanced + Scoped only to .xyz-hero)
   ✅ No CTA overflow
   ✅ Smooth premium animations
   ✅ Responsive + professional
   ✅ Does not affect other sections
================================ */

/* ✅ IMPORTANT: stops overflow issues caused by global box-sizing */
.xyz-hero,
.xyz-hero *{
  box-sizing: border-box;
}

.xyz-hero{
  --xyz-yellow:#ffb400;
  --xyz-white:#ffffff;
  --xyz-muted:rgba(255,255,255,0.82);
  --xyz-overlay:rgba(7,10,18,0.74);
  --xyz-overlay2:rgba(7,10,18,0.52);
  --xyz-radius:18px;
  --xyz-speed:220ms;
  --xyz-red:#e40000;
  --xyz-shadow:0 20px 60px rgba(0,0,0,0.28);

  position: relative;
  min-height: clamp(420px, 62vh, 640px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* ===== Decorative ambient glow ===== */
.xyz-hero::before,
.xyz-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  z-index:1;
  opacity:.28;
  animation:xyzFloatOrb 8s ease-in-out infinite;
}
.xyz-hero::before{
  width:280px;
  height:280px;
  left:-90px;
  top:8%;
  background:rgba(255,180,0,0.22);
}
.xyz-hero::after{
  width:340px;
  height:340px;
  right:-120px;
  bottom:-40px;
  background:rgba(255,255,255,0.10);
  animation-delay: -4s;
}

@keyframes xyzFloatOrb{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  50%{ transform:translateY(-14px) translateX(10px) scale(1.04); }
}

/* ===== Background slider ===== */
.xyz-hero .xyz-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.xyz-hero .xyz-hero__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.10);
  opacity:0;
  animation:xyzHeroSlide 18s infinite;
  will-change:opacity,transform;
}

.xyz-hero .xyz-hero__slide--1{
  background-image:url("https://i.pinimg.com/1200x/e1/94/3e/e1943e20b449965602b0dfd42c2156fe.jpg");
  animation-delay:0s;
}
.xyz-hero .xyz-hero__slide--2{
  background-image:url("https://i.pinimg.com/1200x/b5/41/81/b5418109bb806704cde7b72146147974.jpg");
  animation-delay:6s;
}
.xyz-hero .xyz-hero__slide--3{
  background-image:url("https://i.pinimg.com/736x/de/16/2a/de162a26c2e93f9914a4bcd16505bd8f.jpg");
  animation-delay:12s;
}

@keyframes xyzHeroSlide{
  0%{opacity:0;transform:scale(1.10)}
  8%{opacity:1;transform:scale(1.05)}
  30%{opacity:1;transform:scale(1.00)}
  40%{opacity:0;transform:scale(1.03)}
  100%{opacity:0;transform:scale(1.10)}
}

/* ===== Overlay ===== */
.xyz-hero .xyz-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 600px at 20% 40%, var(--xyz-overlay2), transparent 55%),
    linear-gradient(90deg, var(--xyz-overlay) 0%, rgba(7,10,18,0.55) 55%, rgba(7,10,18,0.25) 100%);
}

/* ===== Container ===== */
.xyz-hero .xyz-hero__container{
  position:relative;
  z-index:2;
  width:min(1200px, 92%);
  margin-inline:auto;
  padding:clamp(26px,4vw,52px) 0;
}

.xyz-hero .xyz-hero__content{
  max-width:880px;
  animation:xyzHeroContentIn 1s ease both;
}

@keyframes xyzHeroContentIn{
  0%{
    opacity:0;
    transform:translateY(26px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Title ===== */
.xyz-hero .xyz-hero__title{
  margin:0 0 14px;
  color:var(--xyz-white);
  font-weight:900;
  letter-spacing:-0.8px;
  line-height:1.08;
  font-size:clamp(30px,4.2vw,56px);
  animation:xyzHeroTextIn .8s ease both;
  animation-delay:.1s;
}

@keyframes xyzHeroTextIn{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Typing keyword ===== */
.xyz-hero .xyz-hero__typingWrap{
  display:inline-flex;
  align-items:baseline;
  margin-left:10px;
  position:relative;
}

.xyz-hero .xyz-hero__typing{
  color:var(--xyz-yellow);
  font-weight:900;
  white-space:nowrap;
  display:inline-block;
  min-width:1ch;
  text-shadow:0 0 16px rgba(255,180,0,0.22);
}

.xyz-hero .xyz-hero__caret{
  width:2px;
  height:1.05em;
  background:var(--xyz-yellow);
  display:inline-block;
  margin-left:6px;
  transform:translateY(2px);
  animation:xyzCaretBlink .9s step-end infinite;
  box-shadow:0 0 12px rgba(255,180,0,0.55);
}

@keyframes xyzCaretBlink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* underline highlight */
.xyz-hero .xyz-hero__hl2{
  color:var(--xyz-white);
  position:relative;
  display:inline-block;
}

.xyz-hero .xyz-hero__hl2::after{
  content:"";
  position:absolute;
  left:0;
  right:14%;
  bottom:-10px;
  height:6px;
  border-radius:999px;
  background:var(--xyz-yellow);
  transform:skewX(-14deg) scaleX(0);
  transform-origin:left center;
  opacity:.95;
  animation:xyzLineReveal .9s ease forwards;
  animation-delay:.8s;
  box-shadow:0 0 18px rgba(255,180,0,0.35);
}

@keyframes xyzLineReveal{
  to{ transform:skewX(-14deg) scaleX(1); }
}

/* ===== Subtitle ===== */
.xyz-hero .xyz-hero__subtitle{
  margin:0 0 18px;
  color:var(--xyz-muted);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.7;
  max-width:760px;
  animation:xyzHeroTextIn .8s ease both;
  animation-delay:.28s;
}

.xyz-hero .xyz-hero__brand{
  color:var(--xyz-yellow);
  font-weight:800;
  text-shadow:0 0 14px rgba(255,180,0,0.18);
}

/* ===== Bullet points ===== */
.xyz-hero .xyz-hero__points{
  margin:0 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.xyz-hero .xyz-hero__points li{
  color:var(--xyz-white);
  opacity:.94;
  font-weight:800;
  font-size:clamp(15px,1.25vw,18px);
  display:flex;
  gap:12px;
  align-items:flex-start;
  animation:xyzBulletIn .7s ease both;
}

.xyz-hero .xyz-hero__points li:nth-child(1){ animation-delay:.42s; }
.xyz-hero .xyz-hero__points li:nth-child(2){ animation-delay:.56s; }
.xyz-hero .xyz-hero__points li:nth-child(3){ animation-delay:.7s; }

@keyframes xyzBulletIn{
  from{
    opacity:0;
    transform:translateX(-14px);
  }
  to{
    opacity:.94;
    transform:translateX(0);
  }
}

.xyz-hero .xyz-hero__points li::before{
  content:"✦";
  flex:0 0 auto;
  color:var(--xyz-yellow);
  transform:translateY(1px);
  text-shadow:0 0 14px rgba(255,180,0,0.32);
}

/* ===============================
   CTA Buttons (NO OVERFLOW)
================================ */
.xyz-hero .xyz-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;
  max-width:100%;
  animation:xyzHeroTextIn .8s ease both;
  animation-delay:.82s;
}

.xyz-hero .xyz-hero__btn{
  position:relative;
  overflow:hidden;
  max-width:100%;
  flex:1 1 240px;
  min-width:0;
  text-decoration:none;
  border:0;
  cursor:pointer;
  padding:14px 18px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  white-space:nowrap;
  line-height:1;
  transition:
    transform var(--xyz-speed) ease,
    box-shadow var(--xyz-speed) ease,
    filter var(--xyz-speed) ease,
    background var(--xyz-speed) ease;
  user-select:none;
  isolation:isolate;
}

.xyz-hero .xyz-hero__btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  transform:skewX(-24deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 100%
  );
  transition:left .7s ease;
  z-index:0;
}

.xyz-hero .xyz-hero__btn:hover::before{
  left:130%;
}

.xyz-hero .xyz-hero__btn > *{
  position:relative;
  z-index:1;
}

.xyz-hero .xyz-hero__btnIco{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.18);
  flex:0 0 auto;
  transition:transform .25s ease, background .25s ease;
}

.xyz-hero .xyz-hero__btn:hover .xyz-hero__btnIco{
  transform:scale(1.08) rotate(-6deg);
}

.xyz-hero .xyz-hero__btn--primary{
  background:linear-gradient(135deg, #ff1a1a 0%, #d60000 100%);
  color:#fff;
  box-shadow:0 16px 34px rgba(228,0,0,0.28);
}

.xyz-hero .xyz-hero__btn--primary:hover{
  transform:translateY(-3px);
  filter:brightness(1.04);
  box-shadow:0 22px 46px rgba(228,0,0,0.36);
}

.xyz-hero .xyz-hero__btn--ghost{
  background:rgba(255,255,255,0.95);
  color:#111;
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
}

.xyz-hero .xyz-hero__btn--ghost:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

/* ===== subtle floating effect for content area ===== */
.xyz-hero .xyz-hero__content{
  animation:
    xyzHeroContentIn 1s ease both,
    xyzHeroFloat 5.5s ease-in-out 1.2s infinite;
}

@keyframes xyzHeroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* ===== Mobile polish ===== */
@media (max-width: 720px){
  .xyz-hero{
    min-height:auto;
    padding:26px 0 34px;
  }

  .xyz-hero::before,
  .xyz-hero::after{
    filter:blur(56px);
    opacity:.22;
  }

  .xyz-hero .xyz-hero__overlay{
    background:
      radial-gradient(900px 520px at 15% 35%, rgba(7,10,18,0.62), transparent 60%),
      linear-gradient(180deg, rgba(7,10,18,0.80) 0%, rgba(7,10,18,0.66) 60%, rgba(7,10,18,0.56) 100%);
  }

  .xyz-hero .xyz-hero__content{
    max-width:100%;
    padding:18px 16px;
    border-radius:18px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:var(--xyz-shadow);
    backdrop-filter: blur(10px);
    overflow:hidden;
  }

  .xyz-hero .xyz-hero__title{
    font-size:32px;
    line-height:1.12;
    letter-spacing:-0.25px;
    margin-bottom:12px;
  }

  .xyz-hero .xyz-hero__typingWrap{
    margin-left:6px;
  }

  .xyz-hero .xyz-hero__cta{
    flex-direction:column;
    gap:12px;
  }

  .xyz-hero .xyz-hero__btn{
    flex:1 1 auto;
    width:100%;
  }

  .xyz-hero .xyz-hero__slide{
    animation-duration:24s;
  }

  .xyz-hero .xyz-hero__slide--2{ animation-delay:8s; }
  .xyz-hero .xyz-hero__slide--3{ animation-delay:16s; }
}

/* extra small phones */
@media (max-width: 380px){
  .xyz-hero .xyz-hero__title{
    font-size:28px;
  }

  .xyz-hero .xyz-hero__content{
    padding:16px 14px;
  }

  .xyz-hero .xyz-hero__btn{
    padding:13px 16px;
    min-height:54px;
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .xyz-hero::before,
  .xyz-hero::after,
  .xyz-hero .xyz-hero__content,
  .xyz-hero .xyz-hero__title,
  .xyz-hero .xyz-hero__subtitle,
  .xyz-hero .xyz-hero__points li,
  .xyz-hero .xyz-hero__cta,
  .xyz-hero .xyz-hero__slide,
  .xyz-hero .xyz-hero__caret,
  .xyz-hero .xyz-hero__hl2::after{
    animation:none !important;
    transition:none !important;
  }

  .xyz-hero .xyz-hero__slide{
    opacity:1;
    transform:none;
  }

  .xyz-hero .xyz-hero__btn::before{
    display:none;
  }
}