/* ===== Brand & alapok ===== */
:root{
  /* mediterrán paletta */
  --espresso:#2a1f18;
  --citrus:#ff8a00;
  --citrus-deep:#ff6a00;
  --foam:#fff3e6;
  --glass:rgba(20,22,26,.45);
  --text:#ffffff;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:url('orange.jpg') center/cover fixed no-repeat;
}
/* enyhe sötétítő a háttér felett */
body::before{ content:""; position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.45));
  pointer-events:none }

/* segéd */
.container{ width:min(1120px,92vw); margin-inline:auto }
a{ color:#ffd166; text-decoration:none }

/* ===== Topbar – üveges, modern ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--glass); backdrop-filter:blur(10px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px }
.brand{ display:flex; align-items:center; gap:10px; color:#fff }
.logo{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  font-weight:800; letter-spacing:.5px;
  background:linear-gradient(135deg, var(--citrus), var(--citrus-deep));
  color:#111; box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.brand-text{ font-weight:800 }
.nav{ display:flex; gap:14px; flex-wrap:wrap }
.nav a{ color:#fff; font-weight:600; opacity:.95 }
.nav .pill{
  padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg, var(--citrus), var(--citrus-deep));
  color:#111; font-weight:800
}

/* ===== Hero – középre, erős tipó ===== */
.hero{ min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding: clamp(16px,4vw,40px) 0 }
.hero-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; width:min(780px,92vw) }
.display{
  font-family:'Playfair Display', serif;
  margin:0; line-height:1.05; letter-spacing:.2px;
  font-size:clamp(30px,7.5vw,60px);
  text-shadow:0 2px 14px rgba(0,0,0,.35)
}
.lead{
  margin:0 0 10px; opacity:.95;
  font-size:clamp(16px,3.8vw,20px)
}

/* CTA gomb – citrus */
.big-button{
  background:linear-gradient(135deg, var(--citrus), var(--citrus-deep));
  color:#111; border:0; padding:16px 26px;
  font-weight:900; font-size:clamp(18px,5.5vw,32px); border-radius:16px;
  letter-spacing:.3px; box-shadow:0 14px 30px rgba(255,106,0,.35), 0 2px 6px rgba(0,0,0,.25);
  cursor:pointer; touch-action:manipulation; animation:pulse 1.8s ease-in-out infinite;
}
.big-button:hover{ filter:brightness(.95) }
.big-button:active{ transform:scale(.98) }
@media (prefers-reduced-motion: reduce){ .big-button{ animation:none } }
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

/* Gombbal nyíló kép */
.reveal{
  max-width:min(960px,92vw); margin:12px auto 0; border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.45); opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease
}
.reveal img{ display:block; width:100%; height:auto; border-radius:inherit }
.hidden{ display:none }
.reveal.show{ opacity:1; transform:none }

/* Szekciók */
.section{ padding:54px 0 }
.section.alt{ background:rgba(15,17,21,.55) }
.section .container h2{ margin:0 0 16px; font-size:clamp(22px,5.5vw,34px) }

/* Kártyarács (termékek) */
.grid{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:720px){ .grid{ grid-template-columns:repeat(3,1fr) } }
.card{
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px
}
.btn{
  background:linear-gradient(135deg, var(--citrus), var(--citrus-deep));
  color:#111; border:0; padding:10px 14px; border-radius:10px; font-weight:800
}

/* Galéria */
.masonry{ columns:2; column-gap:12px }
@media (min-width:900px){ .masonry{ columns:4 } }
.masonry img{ width:100%; margin:0 0 12px; border-radius:12px; display:block; break-inside:avoid }

/* Lábléc */
.footer{ padding:24px 16px; background:rgba(15,17,21,.6); border-top:1px solid rgba(255,255,255,.08) }
.footer .small{ font-size:.9rem; opacity:.9 }