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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {

  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: #000;

  color: white;
}

body {
  position: relative;
}

body.menu-open {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {

  border: none;

  background: none;

  color: inherit;

  font: inherit;

  cursor: pointer;
}

/* =========================
   BACKGROUND SLIDESHOW
========================== */

.background-slideshow {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  z-index: 0;
}

.background-slideshow img {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity 1.8s ease-in-out;

  will-change: opacity;

  filter: brightness(0.88);

  transform: scale(1.02);
}

.background-slideshow img.active {
  opacity: 1;
}

/* =========================
   OVERLAY
========================== */

.overlay {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.52),
      rgba(0,0,0,0.30),
      rgba(0,0,0,0.65)
    );

  z-index: 1;
}

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

header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background: rgba(8,8,8,0.82);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.navbar {

  max-width: 1450px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    1.1rem
    2.5rem;
}

.logo {

  font-size: 1.2rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}

/* =========================
   DESKTOP NAVIGATION
========================== */

.nav-links {

  display: flex;
  align-items: center;

  gap: 2.2rem;
}

.nav-links li {
  position: relative;
}

.nav-links a,
.dropdown-toggle {

  font-size: 0.9rem;

  font-weight: 300;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  opacity: 0.92;

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

.nav-links a:hover,
.dropdown-toggle:hover {

  opacity: 1;
}

/* =========================
   DROPDOWN
========================== */

.dropdown-menu {

  position: absolute;

  top: calc(100% + 1rem);
  left: 0;

  min-width: 240px;

  display: flex;
  flex-direction: column;

  background: rgba(12,12,12,0.98);

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

  backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.dropdown-menu a {

  padding:
    1rem
    1.2rem;

  font-size: 0.88rem;

  border-bottom:
    1px solid rgba(255,255,255,0.04);
}

.dropdown-menu a:hover {

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

.dropdown.active .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

/* =========================
   HAMBURGER
========================== */

.hamburger {

  display: none;

  flex-direction: column;
  justify-content: center;

  gap: 6px;

  width: 32px;
  height: 32px;

  background: transparent;

  border: none;

  cursor: pointer;

  z-index: 1001;
}

.hamburger span {

  display: block;

  width: 28px;
  height: 2px;

  background: white;

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

/* ACTIVE STATE */

.hamburger.active span:nth-child(1) {

  transform:
    translateY(8px)
    rotate(45deg);
}

.hamburger.active span:nth-child(2) {

  opacity: 0;
}

.hamburger.active span:nth-child(3) {

  transform:
    translateY(-8px)
    rotate(-45deg);
}

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

.mobile-menu {

  display: flex;
  flex-direction: column;

  gap: 1rem;

  overflow: hidden;

  max-height: 0;

  opacity: 0;

  padding: 0;

  background: rgba(8,8,8,0.98);

  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    padding 0.3s ease;
}

.mobile-menu.active {

  max-height: 100vh;

  opacity: 1;

  padding:
    1rem
    2rem
    2rem;
}

.mobile-menu a,
.mobile-dropdown-toggle {

  padding: 0.5rem 0;

  font-size: 0.95rem;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.mobile-submenu {

  display: none;

  flex-direction: column;

  gap: 0.5rem;

  margin-top: 0.7rem;

  padding-left: 1rem;

  border-left:
    1px solid rgba(255,255,255,0.15);
}

.mobile-submenu.active {
  display: flex;
}

/* =========================
   HERO
========================== */

.hero {

  position: relative;

  z-index: 10;

  min-height: 100vh;

  display: flex;
  align-items: center;

  padding:
    0
    8%;
}

.hero-content {

  max-width: 780px;

  animation:
    fadeUp
    1.2s ease forwards;

  opacity: 0;

  transform: translateY(30px);
}

.hero h1 {

  font-size:
    clamp(3rem, 7vw, 6.2rem);

  line-height: 1.02;

  letter-spacing: 3px;

  text-transform: uppercase;

  margin-bottom: 1.7rem;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.95),
    0 4px 18px rgba(0,0,0,0.85),
    0 0 30px rgba(0,0,0,0.6);
}

.hero p {

  font-size: 1.12rem;

  line-height: 1.9;

  color: #d5d5d5;

  max-width: 720px;

  margin-bottom: 2.2rem;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.95),
    0 3px 14px rgba(0,0,0,0.85);
}

.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;
}

.btn {

  padding:
    1rem
    1.9rem;

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

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

  backdrop-filter: blur(6px);

  letter-spacing: 1px;

  text-transform: uppercase;

  font-size: 0.9rem;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.btn:hover {

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

  border-color:
    rgba(255,255,255,0.45);

  transform: translateY(-2px);
}

/* =========================
   SCROLL INDICATOR
========================== */

.scroll-indicator {

  position: absolute;

  bottom: 2rem;
  left: 8%;

  z-index: 20;

  font-size: 0.82rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  opacity: 0.7;

  animation:
    float 2.2s ease-in-out infinite;
}

/* =========================
   SECTION PREVIEW
========================== */

.section-preview {

  position: relative;

  z-index: 10;

  padding:
    7rem
    8%;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.82)
    );

  backdrop-filter: blur(4px);
}

.section-preview h2 {

  font-size: 2.3rem;

  letter-spacing: 1px;

  margin-bottom: 1.2rem;
}

.section-preview p {

  max-width: 900px;

  line-height: 1.9;

  color: #cfcfcf;

  font-size: 1.05rem;
}

/* =========================
   FOOTER
========================== */

footer {

  position: relative;

  z-index: 10;

  padding:
    2rem
    8%;

  background:
    rgba(8,8,8,0.96);

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

  color: #888;

  font-size: 0.9rem;
}

/* =========================
   ANIMATIONS
========================== */

@keyframes fadeUp {

  to {

    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes float {

  50% {

    transform: translateY(8px);
  }
}

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

@media (max-width: 980px) {

  .nav-links {

    display: none;
  }

  .hamburger {

    display: flex;
  }

  .hero {

    padding-top: 7rem;
  }

  .hero h1 {

    font-size: 3.2rem;
  }

  .hero p {

    font-size: 1rem;
  }

  .section-preview {

    padding:
      5rem
      8%;
  }
}

@media (max-width: 640px) {

  .navbar {

    padding:
      1rem
      1.4rem;
  }

  .hero {

    padding:
      7rem
      7%
      4rem;
  }

  .hero-buttons {

    flex-direction: column;

    align-items: flex-start;
  }

  .btn {

    width: 100%;

    max-width: 280px;
  }

  .scroll-indicator {

    left: 7%;
  }
}