/* -------------------------------------------------
   Reset & osnovna tipografija
   ------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #222;
}

/* -------------------------------------------------
   Layout helpers
   ------------------------------------------------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* -------------------------------------------------
   Header / navigation
   ------------------------------------------------- */
.header {
  background:#fff; border-bottom:1px solid #e5e5e5; position:sticky; top:0; z-index:1000;
}
.nav { display:flex; align-items:center; justify-content:space-between; height:4rem; }
.nav__brand { display:flex; align-items:center; text-decoration:none; }
.nav__logo { height:28px; width:auto; }
.nav__title { margin-left:.5rem; font-weight:600; color:#e60000; }
.nav__toggle { font-size:1.5rem; background:none; border:none; cursor:pointer; display:none; }
.nav__list { display:flex; gap:1.5rem; }
.nav__link { text-decoration:none; color:#555; font-weight:500; }
.nav__link:hover,
.nav__link.active { color:#e60000; }

/* Mobile menu */
@media (max-width:768px){
  .nav__toggle{display:block;}
  .nav__list{
    flex-direction:column; position:absolute; top:4rem; left:0; right:0;
    background:#fff; border-top:1px solid #e5e5e5; display:none;
  }
  .nav__list.show{display:flex;}
}

/* -------------------------------------------------
   Hero
   ------------------------------------------------- */
.hero{
  position:relative; height:80vh; min-height:500px;
  background:url('assets/img/hero.jpg') center/cover no-repeat;
  color:#fff; display:flex; align-items:center;
}
.hero__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.hero__content{ position:relative; text-align:center; max-width:800px; margin:auto; }
.hero__title{ font-size:clamp(2rem,5vw,3.5rem); font-weight:700; margin-bottom:.5rem; }
.hero__subtitle{ font-size:1.125rem; margin-bottom:1.5rem; }

/* -------------------------------------------------
   Sections
   ------------------------------------------------- */
.section{ padding:4rem 0; }
.section--light{ background:#f9f9f9; }
.section__title{ text-align:center; font-size:2rem; margin-bottom:2rem; }

/* -------------------------------------------------
   Cards (features & pricing)
   ------------------------------------------------- */
.card, .price-card{
  background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:1.5rem;
  text-align:center; transition:box-shadow .2s;
}
.card:hover, .price-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.card__title, .price-card__title{
  font-size:1.25rem; margin-bottom:.5rem; color:#e60000;
}
.price-card__price{
  font-size:1.75rem; font-weight:600; margin:1rem 0;
}
.price-card__list{ list-style:none; margin-bottom:1.5rem; }
.price-card__list li{ margin:.3rem 0; }
.price-card--featured{
  border:2px solid #e60000;
}

/* -------------------------------------------------
   Buttons
   ------------------------------------------------- */
.btn{
  display:inline-block; padding:.75rem 1.5rem; border-radius:4px;
  font-weight:600; cursor:pointer; border:none; text-decoration:none;
}
.btn--primary{ background:#e60000; color:#fff; }
.btn--primary:hover{ background:#c10000; }
.btn--outline{
  background:transparent; border:2px solid #e60000; color:#e60000;
}
.btn--outline:hover{
  background:#e6000010;
}

/* -------------------------------------------------
   FAQ (details/summary)
   ------------------------------------------------- */
.faq{ margin-bottom:1rem; }
.faq__summary{
  cursor:pointer; padding:.75rem; background:#fff;
  border:1px solid #e5e5e5; border-radius:4px; font-weight:500;
}
.faq__content{
  padding:.75rem; background:#f9f9f9; border-left:2px solid #e60000;
}

/* -------------------------------------------------
   Contact form
   ------------------------------------------------- */
.contact-form{
  display:grid; gap:1rem; max-width:500px; margin:auto;
}
.form__label{ display:flex; flex-direction:column; font-weight:500; }
.form__input,
.form__textarea{
  margin-top:.4rem; padding:.5rem; border:1px solid #ccc; border-radius:4px;
}
.form__input:focus,
.form__textarea:focus{
  outline:none; border-color:#e60000;
}

/* -------------------------------------------------
   Footer
   ------------------------------------------------- */
.footer{
  background:#222; color:#bbb; padding:1.5rem 0; font-size:.9rem;
  text-align:center;
}
.footer__links a{
  color:#bbb; margin:0 .5rem; text-decoration:none;
}
.footer__links a:hover{ color:#fff; }

/* -------------------------------------------------
   Utility helpers
   ------------------------------------------------- */
.text-center{ text-align:center; }