:root{
  --bg:#0E1014; --surface:#141823;
  --text:#F5F7FB; --muted:#A9B3C7;
  --primary:#E8B76B;         /* arany */
  --accent:#2BA1F3;          /* barber pole kék */
  --danger:#E04F4F;          /* barber pole piros */
}

*{ box-sizing:border-box }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text) }
a{ color:var(--accent); text-decoration:none }

/* nav */
.site-header{ position: sticky; top:0; z-index: 50; backdrop-filter: blur(10px); background: rgba(10,12,18,.7); border-bottom:1px solid rgba(255,255,255,.08) }
.nav{ max-width:1100px; margin:0 auto; height:64px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:900; letter-spacing:.3px; background: linear-gradient(90deg,var(--primary),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; gap:.6rem; align-items:center }
.nav-link{ padding:.5rem .8rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#EAF2FF; font-weight:600 }
.nav-link:hover{ border-color:var(--primary) }
.book-btn{ background: linear-gradient(135deg, var(--primary), #ffdca1); color:#1a1205; font-weight:800 }

.nav-toggle{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ width:18px; height:2px; border-radius:999px; background:#EAF2FF; display:block; }
@media (max-width:820px){
  .nav-toggle{ display:inline-flex }
  .nav-links{ position:fixed; top:64px; left:0; right:0; bottom:0; padding:2rem 1rem; background:rgba(10,12,18,.95); backdrop-filter: blur(8px); display:flex; flex-direction:column; gap:.8rem; transform:translateY(-100%); opacity:0; pointer-events:none; transition:.25s }
  .nav-open .nav-links{ transform:translateY(0); opacity:1; pointer-events:auto }
  .nav-link, .book-btn{ width:min(640px,92vw); text-align:center; font-size:1.1rem; padding:.9rem 1rem }
}

/* hero */
.hero{
  min-height: 64svh;
  display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(10,12,18,.35), rgba(10,12,18,.9)),
    url("../images/hero.jpg") center/cover no-repeat;
  text-align:center; padding:3.5rem 1rem 2rem;
}
.eyebrow{
  display:inline-block; padding:.28rem .7rem; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--danger));
  font-weight:700; color:#001015; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;
}
.hero h1{ font-size: clamp(2rem, 1.2rem + 3vw, 3rem); margin:.6rem 0 .4rem }
.hero .lead{ max-width:60ch; margin: 0 auto; color:#EAFBFF; opacity:.96 }
.hero-ctas{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1rem }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.1rem; border-radius:999px; font-weight:700; border:1px solid transparent; cursor:pointer }
.btn-primary{ background: linear-gradient(135deg, var(--primary), #ffdca1); color:#1a1205 }
.btn-ghost{ background: rgba(255,255,255,.08); color:#EAF2FF; border-color: rgba(255,255,255,.12) }
.btn:hover{ transform: translateY(-1px) }

/* layout */
.container{ max-width:1100px; margin:0 auto; padding:0 12px }
.section{ padding: 2.2rem 0 }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem }
.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr } }

/* cards */
.card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden }
.card-img{ width:100%; height:200px; object-fit:cover; display:block }
.card-body{ padding: .9rem 1rem }

/* pricing */
.price-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:1rem; text-align:center }
.price-card .price{ font-size:1.6rem; font-weight:900; color:var(--primary); margin:.2rem 0 .6rem }
.price-card.popular{ border-color:var(--primary); box-shadow: 0 10px 24px rgba(232,183,107,.2) }

/* CTA */
.cta{ padding: 2rem 0 }
.cta-inner{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; text-align:center; padding:1.2rem }

/* footer */
.site-footer{ border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 0; background: rgba(10,12,18,.7) }
.footer-inner{ display:flex; gap:.6rem; justify-content:space-between; align-items:center; flex-wrap:wrap }
.footer-inner a{ color:var(--primary); text-decoration:none }

/* booking modal (UI only) */
.booking-modal{ border:none; padding:0; background: transparent }
.booking-modal::backdrop{ background: rgba(0,0,0,.6) }
.booking-card{
  width:min(720px, 92vw);
  margin: 10svh auto 0;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding: 1rem;
}
.booking-card h3{ margin:.2rem 0 1rem }
.booking-card label{ display:grid; gap:.25rem; font-size:.95rem }
.booking-card input, .booking-card select{
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color:#fff; padding:.7rem .8rem
}
.modal-actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem }
/* --- Mobile hamburger: látható háttér + erősebb pillák --- */
@media (max-width: 820px){
  /* a teljes overlay kapjon sötét, nem átlátszó hátteret és magas z-indexet */
  .nav-links{
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    z-index: 200;
    padding: 2rem 1rem;
    display: flex; flex-direction: column; gap: .9rem;

    background: #0A0C12;                 /* <<< fix sötét háttér */
    /* ha szeretnél pici üveg-hatást: */
    /* background: rgba(10,12,18,.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); */

    transform: translateY(-100%);
    opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  .nav-open .nav-links{ transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-open{ overflow: hidden; }         /* ne scrollozzon a háttér */

  /* nagy, kontrasztos gombok – NEM átlátszó alap */
  .nav-link,
  .book-btn{
    width: min(640px, 92vw);
    text-align: center;
    font-size: 1.1rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: #141823;                 /* <<< opa­que sötét */
    border: 1px solid rgba(255,255,255,.14);
    color: #F5F7FB;
    box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 0 transparent;
  }
  .nav-link:hover{ border-color: var(--primary); }

  /* kiemelt „Időpontfoglalás” marad arany, de kap egy finom külső árnyékot */
  .book-btn{
    background: linear-gradient(135deg, var(--primary), #ffdca1);
    color: #1a1205;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(232,183,107,.28);
  }

  /* hamburger gomb is legyen sötét, nem áttetsző */
  .nav-toggle{
    display: inline-flex;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: #0A0C12;                 /* <<< fix háttér */
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    align-items: center; justify-content: center; gap: 6px;
  }
  .nav-toggle span{
    width: 20px; height: 2.5px; border-radius: 999px; background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* X animáció nyitáskor (ha a body kap nav-open-t a JS-ből) */
  .nav-open .nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}