/* Hero — Vertical slider with blue gradient */
.hero{
  min-height:100vh;background:linear-gradient(145deg,#021e50 0%,#03428e 40%,#0a1628 100%);
  position:relative;overflow:hidden;
  display:flex;align-items:center;padding:120px 0 80px;
}
.hero::before{
  content:'';position:absolute;top:-30%;right:-10%;width:800px;height:800px;
  background:radial-gradient(circle,rgba(37,103,232,.15) 0%,transparent 60%);
  border-radius:50%;pointer-events:none;
}

/* Hero slider */
.hero-slider{position:relative;width:100%;height:calc(100vh - 200px);overflow:hidden}
.hero-slides{height:100%}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.hero-slide.active{
  opacity:1;transform:translateY(0);pointer-events:auto;
}

/* Slide indicators */
.hero-dots{
  position:absolute;right:clamp(20px,4vw,60px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:20;
}
.hero-dot{
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,1);
  background:transparent;cursor:pointer;transition:.3s;padding:0;position:relative;
}
.hero-dot::before{content:'';position:absolute;inset:-8px;border-radius:50%}
.hero-dot:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.15)}
.hero-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(255,214,0,.4)}
.hero-dot.active:hover{background:var(--gold)}

/* Floating accent shapes */
.hero-shape{position:absolute;border-radius:var(--radius-lg);pointer-events:none;z-index:1}
.hero-shape-1{
  width:120px;height:120px;background:var(--gold);opacity:.9;
  top:12%;right:8%;border-radius:var(--radius-xl);
  animation:float1 8s ease-in-out infinite;
}
.hero-shape-2{
  width:80px;height:80px;background:var(--blue-light);opacity:.85;
  bottom:18%;right:4%;border-radius:16px;
  animation:float2 10s ease-in-out infinite;
}
.hero-shape-3{
  width:60px;height:60px;background:var(--gold);opacity:.3;
  top:35%;left:3%;border-radius:14px;
  animation:float3 12s ease-in-out infinite;
}
.hero-shape-4{
  width:40px;height:40px;background:var(--blue-light);opacity:.2;
  bottom:30%;left:8%;border-radius:10px;
  animation:float2 9s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(15px) rotate(-4deg)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-15px)}}

.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}

.hero-text{max-width:560px}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold-soft);border:1px solid rgba(255,180,0,.2);
  color:var(--gold);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  padding:8px 20px;border-radius:var(--radius-pill);margin-bottom:32px;
}
.hero-tag::before{content:'';width:6px;height:6px;background:var(--gold);border-radius:50%}
.hero h1{
  font-family:'Sora';font-size:clamp(2.4rem,5vw,4.8rem);font-weight:800;
  color:#fff;line-height:.96;letter-spacing:-.04em;margin-bottom:28px;
}
.hero h1 em{font-style:normal;position:relative;display:inline-block}
.hero h1 em::after{
  content:'';position:absolute;bottom:2px;left:-4px;right:-4px;height:40%;
  background:var(--gold);opacity:.25;border-radius:4px;z-index:-1;
}
.hero-sub{
  font-size:clamp(.95rem,1.2vw,1.1rem);color:#fff;
  line-height:1.75;max-width:420px;margin-bottom:40px;font-weight:300;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:0}

/* Hero image mosaic */
.hero-mosaic{position:relative;height:520px;width:100%}
.mosaic-img{
  position:absolute;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.mosaic-img:hover{transform:translateY(-8px) scale(1.02)!important}
.mosaic-img img{width:100%;height:100%;object-fit:cover}
.mosaic-img-1{
  width:260px;height:320px;border-radius:28px 28px 28px 60px;
  top:0;left:10%;z-index:3;
}
.mosaic-img-2{
  width:200px;height:240px;border-radius:20px;
  top:40px;right:0;z-index:2;
}
.mosaic-img-3{
  width:220px;height:180px;border-radius:60px 20px 20px 20px;
  bottom:20px;left:0;z-index:4;
}
.mosaic-img-4{
  width:160px;height:160px;border-radius:20px;
  bottom:0;right:15%;z-index:3;
}

@media(max-width:1024px){
  .hero-slide .wrap{grid-template-columns:1fr!important;text-align:center}
  .hero-text{max-width:100%;margin:0 auto}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-btns{justify-content:center}
  .hero-mosaic{display:none}
  .hero-dots{display:none}
}