/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body { 
  background: #fff9f0; 
  color: #1e293b; 
  min-height: 100vh; 
}

/* HEADER */
.header{
  height: 70px;
  background: #fdf6eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 25px;
  position: sticky;
  top: 0;
  z-index: 1000;

  border-bottom: 1px solid #f1e5d6;
}

.logo{ 
  font-weight: bold; 
  font-size: 1.1em;
  letter-spacing: 2px;
  color: #ab8d3f;
  margin-right: auto;
}

.nav{
  display:flex;
  gap: 25px;
  align-items:center;
  z-index: 1100;
}

.nav a{
  text-decoration:none;
  color:#ab8d3f;
  transition: .2s;
  font-weight: bold;
}

.nav a:hover{ 
  opacity:.7;
  color: #c48a3a
}

/* BURGER */
.burger{
  display:none;            /* samo na mobilnom */
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 8px;
}

.burger span{
  width: 26px;
  height: 3px;
  background: #4b3621;
  display:block;
  transition: .25s;
  border-radius: 999px;
}

/* HERO */
.hero{
  height: 70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 40px;
}

.hero-content h1{ font-size: 42px; margin-bottom: 15px; }
.hero-content p{ font-size: 1.05em; opacity:.85; margin-bottom: 20px; }

.cta-btn{
  padding: 18px 28px;
  border:none;
  background:#22c55e;
  color:black;
  font-weight:bold;
  font-size: 1em;
  cursor:pointer;
  border-radius: 20px;
}

/* FEATURES */
.features{
  max-width: 1100px;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  padding: 60px 20px;
}

.card{
  background:#061022;
  color: #ab8d3f;
  padding: 30px;
  border-radius: 20px;
  text-align:center;
  font-weight: bold;
}

/* FOOTER */
.footer{
  text-align:center;
  padding: 25px;
  background:#061022;
  color:#ab8d3f;
  border-top:1px solid #f1e5d6;
}


/* MOBILE */
@media (max-width: 800px){
  .burger{ display:flex; }

  /* sakrij linkove dok je mobile */
  .nav{
    position: absolute;
    top: 70px;
    right: 16px;
    width: min(260px, calc(100vw - 32px));
    background: #061022;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* closed state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: .4s;
  }

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

  .nav a:hover{
    background: rgba(255,255,255,.06);
    opacity: 1;
  }

  .nav.open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* burger -> X kad je active */
  .burger.active span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .burger.active span:nth-child(2){
    opacity: 0;
  }
  .burger.active span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .features{ grid-template-columns: 1fr; }
  .hero-content h1{ font-size: 30px; }

    /* BLUR OVERLAY */
    .menu-overlay{
    position: fixed;
    left: 0;
    right: 0;
    top: 70px;                 
    height: calc(100vh - 70px);

    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.08);

    opacity: 0;
    pointer-events: none;
    transition: .45s;

    z-index: 900;             
  }

  .menu-overlay.active{
    opacity: 1;
    pointer-events: auto;
  }

  /* Zakljucava scroll kada je meni otvoren */
  body.no-scroll{
    overflow: hidden;
  }


}