* { margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; }
body { background:#000; color:#fff; overflow-x:hidden;  padding-top: 70px;}

/* PRELOADER */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column}
.loader{border:4px solid #ffffff1a;border-top:4px solid #fff;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
#preloader p{margin-top:20px;opacity:.7;font-size:14px;letter-spacing:2px}

/* FADE */
.fade{opacity:0;transform:translateY(50px);transition:1s}
.fade.visible{opacity:1;transform:translateY(0)}

/* NAVBAR ------------------------------------------------------------------ */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  background:#00000066;
  backdrop-filter:blur(10px);

  border-bottom:1px solid #ffffff1a;
}

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 10%;
}

/* LOGO */
.logo svg{
  cursor:pointer;
  transition:transform .3s ease;
}
.logo svg:hover{
  transform:scale(1.1);
}

/* MENU */
.nav-menu{
  display:flex;
  gap:40px;
}

.nav-menu a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:2px;
  position:relative;
}

/* underline hover */
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0%;
  height:1px;
  background:#fff;
  transition:0.3s;
}

.nav-menu a:hover::after{
  width:100%;
}

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  transition: 0.3s;
}


.footer {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 60px 10%;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-block h3,
.footer-block h4 {
  margin-bottom: 15px;
}

.footer-block a {
  display: block;
  color: #fff;
  text-decoration: none;
  opacity: 0.7;
  margin-bottom: 8px;
}

.footer-block a:hover {
  opacity: 1;
}

.footer-bottom {
  margin-top: 40px;
  text-align: center;
  opacity: 0.5;
  font-size: 14px;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .nav-container {
        padding: 15px 5%;
    }

    .nav-menu {
        gap: 25px;
    }

    .nav-menu a {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .footer {
        padding: 40px 5%;
    }

    .footer-container {
        gap: 25px;
    }
}

/* Mobile (max-width 767px) */
@media (max-width: 767px) {
    body {
        padding-top: 60px;
    }

    .navbar {
        background: #000000cc;
        border-bottom: 1px solid #ffffff1a;
    }

    .nav-container {
        padding: 12px 4%;
        flex-direction: row;
        gap: 15px;
    }

    .logo svg {
        width: 140px;
        height: 20px;
    }

    .nav-menu {
        gap: 15px;
        order: 2;
        flex-direction: row;
        display: none;
        width: 100%;
        justify-content: center;
    }

    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: flex;
        order: 3;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 3px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .nav-menu a {
        font-size: 12px;
        letter-spacing: 1px;
        padding: 4px 0;
    }

    .footer {
        padding: 30px 4%;
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, auto));
        gap: 14px 20px;
        text-align: left;
        align-items: start;
    }

    .footer-block h3,
    .footer-block h4 {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 12px;
        margin-top: 20px;
    }
}

/* Small Mobile (max-width 480px) */
@media (max-width: 480px) {
    body {
        padding-top: 55px;
    }

    .nav-container {
        padding: 10px 3%;
    }

    .logo svg {
        width: 120px;
        height: 18px;
    }

    .nav-menu a {
        font-size: 11px;
        padding: 3px 0;
    }

    .footer {
        padding: 20px 5%;
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, auto));
        gap: 10px 16px;
        align-items: start;
        text-align: left;
    }

    .footer-block h3,
    .footer-block h4 {
        font-size: 14px;
    }

    .footer-bottom {
        font-size: 11px;
    }
}