/* =================================
KANZ COMPONENT SYSTEM
================================= */

/* BUTTON */

.kanz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

/* CARD */

.kanz-ui-card{

  background:
  linear-gradient(
  180deg,
  var(--kanz-navy-600),
  var(--kanz-navy-700)
  );

  border:1px solid var(--kanz-border-gold);

  border-radius:var(--kanz-radius-lg);

  box-shadow:var(--kanz-shadow-soft);

  padding:26px;

}

/* CARD HOVER */

.kanz-ui-card:hover{

  transform:translateY(-6px);

  box-shadow:
  0 28px 60px rgba(0,0,0,.40),
  0 0 30px var(--kanz-glow-gold),
  0 0 18px var(--kanz-glow-green);

}

/* SECTION HEADER */

.kanz-section-head{

text-align:center;
max-width:800px;
margin:auto;
margin-bottom:40px;

}

.kanz-section-head h2{

font-size:2rem;
color:var(--kanz-gold-400);
margin-bottom:10px;

}

.kanz-section-head p{

color:var(--kanz-text-soft);

}

/* VIDEO CARD */

.kanz-video-card{

overflow:hidden;
border-radius:var(--kanz-radius-md);

border:1px solid var(--kanz-border-gold);

background:var(--kanz-bg-card);

}

.kanz-video-card video{

width:100%;
display:block;

}

/* CTA */

.kanz-ui-cta{

padding:60px;

background:

radial-gradient(
circle at top left,
var(--kanz-glow-gold),
transparent
),

linear-gradient(
135deg,
var(--kanz-navy-800),
var(--kanz-navy-600)
);

border-radius:32px;

border:1px solid var(--kanz-border-gold);

text-align:center;

}

/* =================================
KANZ NAVBAR
================================= */

.kanz-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:
    linear-gradient(180deg, rgba(3,11,20,.90), rgba(5,17,29,.82));
  border-bottom:1px solid rgba(214,178,74,.14);
  box-shadow:
    0 10px 30px rgba(0,0,0,.20),
    0 1px 0 rgba(39,184,118,.05);
}

.kanz-header .kanz-container{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.kanz-logo{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  font-size:1.28rem;
  font-weight:900;
  color:var(--kanz-gold-400);
  letter-spacing:.2px;
}

.kanz-logo::before{
  content:"";
  width:46px;
  height:46px;
  border-radius:16px;
  flex-shrink:0;
  background:
    linear-gradient(
      145deg,
      #f9e39a 0%,
      var(--kanz-gold-400) 18%,
      var(--kanz-gold-500) 45%,
      var(--kanz-gold-600) 70%,
      var(--kanz-gold-700) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 12px 28px rgba(214,178,74,.20),
    0 0 24px rgba(39,184,118,.08);
}

.kanz-nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex:1;
}

.kanz-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.kanz-nav a{
  position:relative;
  color:rgba(245,247,250,.92);
  font-weight:700;
  font-size:.98rem;
  padding:8px 2px;
}

.kanz-nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-3px;
  width:0;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--kanz-gold-500), var(--kanz-green-400));
  transition:width .25s ease;
}

.kanz-nav a:hover{
  color:var(--kanz-gold-400);
  text-shadow:0 0 12px rgba(214,178,74,.14);
}

.kanz-nav a:hover::after,
.kanz-nav a.is-active::after{
  width:100%;
}

.kanz-nav a.is-active{
  color:var(--kanz-gold-400);
  text-shadow:0 0 12px rgba(214,178,74,.18);
}

.kanz-nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.kanz-nav-actions .kanz-btn-main,
.kanz-nav-actions .kanz-btn-outline{
  min-width:auto;
  min-height:48px;
  padding:0 20px;
  font-size:.95rem;
}

.kanz-menu-toggle{
  display:none;
  width:50px;
  height:50px;
  border-radius:16px;
  border:1px solid rgba(214,178,74,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(39,184,118,.04));
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.kanz-menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:99px;
  background:var(--kanz-gold-400);
  transition:.25s ease;
}

.kanz-menu-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.kanz-menu-toggle.is-open span:nth-child(2){
  opacity:0;
}

.kanz-menu-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px){
  .kanz-header .kanz-container{
    min-height:78px;
    gap:14px;
  }

  .kanz-menu-toggle{
    display:flex;
  }

  .kanz-nav-wrap{
    position:absolute;
    top:calc(100% + 10px);
    right:16px;
    left:16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding:20px 18px 18px;
    border-radius:24px;
    border:1px solid rgba(214,178,74,.18);
    background:
      radial-gradient(circle at top right, rgba(214,178,74,.14), transparent 24%),
      radial-gradient(circle at bottom left, rgba(39,184,118,.10), transparent 24%),
      linear-gradient(180deg, rgba(4,16,29,.98), rgba(7,24,42,.98));
    box-shadow:
      0 28px 60px rgba(0,0,0,.42),
      0 0 24px rgba(214,178,74,.08);
  }

  .kanz-nav-wrap.is-open{
    display:flex;
  }

  .kanz-nav{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .kanz-nav a{
    padding:12px 10px;
    border-radius:14px;
  }

  .kanz-nav a:hover,
  .kanz-nav a.is-active{
    background:rgba(255,255,255,.03);
  }

  .kanz-nav-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .kanz-nav-actions .kanz-btn-main,
  .kanz-nav-actions .kanz-btn-outline{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 640px){
  .kanz-logo{
    font-size:1.12rem;
  }

  .kanz-logo::before{
    width:40px;
    height:40px;
    border-radius:14px;
  }

  .kanz-nav-wrap{
    right:10px;
    left:10px;
    padding:16px;
    border-radius:20px;
  }
}