@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Fira+Mono:wght@400;500&family=Space+Mono:wght@400;700&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');

/* =========================
   RESET
========================= */

.premium-header *,
.premium-header *::before,
.premium-header *::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   BODY SPACING
========================= */

body{
  padding-top:120px;
  background:#050505;
	 position:relative;
  z-index:1;
}

/* =========================
   HEADER
========================= */

.premium-header{

  position:fixed;

  top:16px;

  left:0;

  width:100%;

  z-index:9999;

  padding:0 24px;
}

.premium-header .header-actions{

  flex-shrink:0;
}

/* =========================
   CONTAINER
========================= */

.premium-header .custom-container{

  width:100%;

  max-width:1700px;

  margin:auto;
}

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

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

/* =========================
   PREMIUM GLASS NAVBAR
========================= */

.premium-header .navbar{

  position:relative;

  height:70px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding:0 28px;

  border-radius:2px;

  overflow:visible;

  isolation:isolate;

  border:1px solid rgba(255,255,255,0.10);

  background:rgba(0, 0, 0, 0.20);

  backdrop-filter:
  blur(32px)
  saturate(180%);

  -webkit-backdrop-filter:
  blur(32px)
  saturate(180%);

  box-shadow:

  0 10px 40px rgba(0,0,0,0.35),

  inset 0 1px 0 rgba(255,255,255,0.05),

  inset 0 -1px 0 rgba(255,255,255,0.03);

  transition:0.4s ease;
}




/* =========================
   LOGO
========================= */

.premium-header .logo{

  display:flex;

  align-items:center;

  gap:14px;

  text-decoration:none;

  z-index:20;
	
 flex-shrink:0;
}
.premium-header .logo-icon{

  width:100px;

  height:100px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;
}

.premium-header .logo-icon img{

  width:100px;

  height:100px;

  object-fit:contain;

  display:block;
}

.premium-header .logo span{

  color:white;

  font-size:clamp(24px, 2vw, 34px);

  font-family:'Oswald',sans-serif;

  font-weight:600;

  letter-spacing:-0.5px;

  text-transform:uppercase;

  line-height:1;

  white-space:nowrap;
}

/* =========================
   NAV WRAPPER
========================= */

/* =========================
   NAV WRAPPER
========================= */

.premium-header .nav-wrapper{

  flex:1;

  display:flex;

  justify-content:center;

  min-width:0;
}

/* =========================
   MENU
========================= */

/* =========================
   MENU
========================= */

.premium-header .nav-links{

  display:flex !important;

  align-items:center;

  justify-content:center;

  flex-wrap:nowrap;

  gap:clamp(20px, 2vw, 46px);

  list-style:none !important;

  margin:0 !important;

  padding:0 !important;
}

.premium-header .nav-links li{

  list-style:none !important;
}

.premium-header .nav-links li::before{
  display:none !important;
}

.premium-header .nav-links a{

  position:relative;

  display:flex;

  align-items:center;

  text-decoration:none;

  color:#cfcfcf;

  font-size:clamp(16px, 1vw, 20px);
	
 text-transform:uppercase;
 
  font-family:'Oswald',sans-serif;

  font-weight:500;

  letter-spacing:0.3px;

  transition:0.35s ease;

  white-space:nowrap;
}

.premium-header .nav-links a::after{

  content:"";

  position:absolute;

  bottom:-8px;

  left:0;

  width:0;

  height:2px;

  background:#FF1E00;

  border-radius:20px;

  transition:0.35s ease;
}

.premium-header .nav-links a:hover{

  color:white;
}

.premium-header .nav-links a:hover::after{

  width:100%;
}

/* =========================
   DITTO STYLE CTA
========================= */

.premium-header .cta-btn{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  text-decoration:none;

  flex-shrink:0;
}

/* =========================
   INNER
========================= */

.premium-header .cta-inner{

  position:relative;

  display:flex;

  align-items:center;

  gap:12px;

  background:#FF1E00;

  padding:8px 12px 8px 12px;

  min-height:44px;

  border-radius:2px;

  overflow:hidden;

  transition:
  transform 0.3s cubic-bezier(.22,.61,.36,1),
  box-shadow 0.3s ease;

}

/* VERY SUBTLE SCALE */

.premium-header .cta-btn:hover .cta-inner{

  transform:scale(1.02);

 
}
/* =========================
   ICON
========================= */

.premium-header .cta-icon{

  position:relative;

  width:28px;

  height:28px;

  border-radius:2px;

  background:rgba(255,255,255,0.18);

  color:black;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  flex-shrink:0;
}

/* SLIDING BACKGROUND */

.premium-header .cta-icon::before{

  content:"";

  position:absolute;

  inset:0;

  background:#141414;

  transform:translateX(-100%);

  transition:
  transform 0.35s cubic-bezier(.22,.61,.36,1);
}

/* HOVER FILL */

.premium-header .cta-btn:hover .cta-icon::before{

  transform:translateX(0%);
}

/* ICON */

.premium-header .cta-icon i{

  position:relative;

  z-index:2;

  font-size:13px;

  transform:rotate(45deg);

  transition:
  color 0.35s ease;
}

/* ICON COLOR CHANGE */

.premium-header .cta-btn:hover .cta-icon i{

  color:white;
}

/* =========================
   TEXT
========================= */

.premium-header .cta-text{

  position:relative;

  z-index:2;

  color:#000;

  font-family:'Oswald',sans-serif;

  font-size:15px;

  font-weight:500;

  letter-spacing:0.4px;

  text-transform:uppercase;

  line-height:1;

  white-space:nowrap;
}


/* =========================
   MOBILE TOGGLE
========================= */

.premium-header .menu-toggle{

  width:48px;

  height:48px;

  border-radius:14px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.06);

  display:none;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  z-index:50;

  transition:0.3s ease;
}

.premium-header .menu-toggle:hover{

  background:rgba(255,255,255,0.08);
}

.premium-header .menu-toggle span{

  position:relative;

  width:20px;

  height:2px;

  background:white;

  border-radius:20px;

  transition:0.3s ease;
}

.premium-header .menu-toggle span::before,
.premium-header .menu-toggle span::after{

  content:"";

  position:absolute;

  left:0;

  width:20px;

  height:2px;

  background:white;

  border-radius:20px;

  transition:0.3s ease;
}

.premium-header .menu-toggle span::before{
  top:-6px;
}

.premium-header .menu-toggle span::after{
  top:6px;
}

/* ACTIVE TOGGLE */

.premium-header .menu-toggle.active span{
  background:transparent;
}

.premium-header .menu-toggle.active span::before{
  top:0;
  transform:rotate(45deg);
}

.premium-header .menu-toggle.active span::after{
  top:0;
  transform:rotate(-45deg);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

  .premium-header .nav-links{

    gap:28px;
  }

  .premium-header .nav-links a{

    font-size:14px;
  }

}

/* =========================
   TABLET + MOBILE
========================= */

/* =========================
   TABLET + MOBILE
========================= */

@media(max-width:991px){

  body{
    padding-top:100px;
  }

  /* HEADER */

  .premium-header{

    padding:0 16px;
  }

  /* NAVBAR */

  .premium-header .navbar{

    height:74px;

    border-radius:2px;

    padding:0 20px;
  }
	

  /* LOGO */

  .premium-header .logo{

    gap:12px;
  }

  .premium-header .logo span{

    font-size:24px;
  }

  .premium-header .logo-icon{

    width:70px;

    height:70px;
  }
	
	.premium-header .logo-icon img{

  width:70px;

  height:70px;
}

  /* CTA */

  .premium-header .cta-btn{

    display:none;
  }

  /* TOGGLE */

  .premium-header .menu-toggle{

    display:flex;

    width:46px;

    height:46px;

    border-radius:2px;
  }

	
  /* =========================
     MOBILE MENU WRAPPER
  ========================= */

  /* =========================
   MOBILE MENU WRAPPER
========================= */

.premium-header .nav-wrapper{

  position:absolute;

  top:86px;

  left:0;

  width:100%;

  padding:0 6px;

  display:block !important;

  flex:none !important;

  transform:translateY(-10px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
  opacity 0.3s ease,
  transform 0.3s ease;

  z-index:100;
}
	
.premium-header .nav-wrapper.active{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:translateY(0);
}
  /* =========================
     MOBILE MENU
  ========================= */

  .premium-header .nav-links{

    width:100%;

    background:
    linear-gradient(
      to bottom,
      rgba(20,20,20,0.98),
      rgba(10,10,10,0.98)
    );

    backdrop-filter:blur(24px);

    border-radius:2px;

    padding:38px 28px;

    flex-direction:column !important;

    align-items:flex-start;

    justify-content:flex-start;

    gap:10px;

    border:1px solid rgba(255,255,255,0.05);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.35);
  }

  /* MENU ITEMS */

  .premium-header .nav-links li{

    width:100%;
	padding:20px;
    list-style:none;
  }

  /* MENU LINKS */

  .premium-header .nav-links a{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    text-decoration:none;

    color:#e8e8e8;

    font-size:24px;

    font-family:'Oswald',sans-serif;

    font-weight:500;

    letter-spacing:0.5px;

    text-transform:uppercase;

    line-height:1.1;

    transition:0.35s ease;
  }

  .premium-header .nav-links a:hover{

    color:#FF1E00;
  }

  /* REMOVE DESKTOP UNDERLINE */

  .premium-header .nav-links a::after{

    display:none;
  }

}
/* =========================
   MOBILE
========================= */

@media(max-width:480px){

  body{
    padding-top:90px;
  }

  .premium-header .navbar{

    height:68px;

    padding:0 18px;

    border-radius:2px;
  }

  .premium-header .logo{

    gap:10px;
  }

  .premium-header .logo span{

    font-size:20px;
  }

  .premium-header .logo-icon{

    width:36px;

    height:36px;

    border-radius:0px;

    font-size:16px;
  }

}





/* =========================
   HERO AURORA
========================= */
.hero-aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: transparent;
}

/* =========================
   AURORA LAYER — radial glow source at top-center
========================= */
.aurora-layer {
  position: absolute;
  inset: -10px;
  opacity: 0.55;
  filter:
    blur(18px)
    saturate(180%)
    contrast(130%);
  mix-blend-mode: screen;

  /* Strong radial bloom at top-center, fades to dark edges */
  background-image:
    radial-gradient(
      ellipse 80% 60% at 50% -10%,
      #FF1E00 0%,
      #C41000 25%,
      #7A0000 50%,
      transparent 75%
    ),
    repeating-linear-gradient(
      100deg,
      #140000 0%,
      #140000 7%,
      transparent 10%,
      transparent 12%,
      #140000 16%
    ),
    repeating-linear-gradient(
      100deg,
      #2A0000 10%,
      #FF1E00 15%,
      #7A0000 20%,
      #FF3B1A 25%,
      #3A0000 30%
    );
  background-size:
    100% 100%,
    300% 200%,
    200% 100%;
  background-position:
    center top,
    50% 50%,
    50% 50%;
  animation: auroraFlow 80s linear infinite;

  /* Fade ribbon: strong at top, gone at bottom */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    transparent 100%
  );
}

/* =========================
   SECOND LAYER — subtle side sweep
========================= */
.aurora-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      ellipse 60% 40% at 50% 0%,
      #FF3B1A 0%,
      #8B0000 40%,
      transparent 70%
    ),
    repeating-linear-gradient(
      -100deg,
      #FF1E00 0%,
      #2A0000 8%,
      transparent 10%,
      transparent 14%,
      #7A0000 18%
    );
  background-size:
    100% 100%,
    200% 100%;
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: auroraFlowReverse 120s linear infinite;
}

/* =========================
   DARK FADE — vignette to blend into page
========================= */


/* =========================
   ANIMATION
========================= */
@keyframes auroraFlow {
  from { background-position: center top, 50% 50%, 50% 50%; }
  to   { background-position: center top, 350% 50%, 350% 50%; }
}
@keyframes auroraFlowReverse {
  from { background-position: 0% 50%, 0% 50%; }
  to   { background-position: 0% 50%, -200% 50%; }
}