:root{
  /* A képen lévő “meleg, ködös bézs” közelítése */
  --bg0:#f7f2ec;
  --bg1:#efe6dc;
  --ink:#2f2c28;
  --muted:rgba(47,44,40,.72);
  --line:rgba(47,44,40,.14);

  --btn:#6a6158;
  --btn2:#5f574f;

  --paper:rgba(255,255,255,.55);
  --paper2:rgba(255,255,255,.30);

  --shadow:0 18px 48px rgba(0,0,0,.10);
  --shadowSoft:0 12px 26px rgba(0,0,0,.08);

  --rBtn:4px;
  --rCard:20px;
  --rBig:12px;

  --serif:"Playfair Display", serif;
  --serifBody:"EB Garamond", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* brand */
  --brand:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container:980px;

  --headerH: 0px; /* JS frissíti */
}

/* === Responsive AVIF image sources (SAFE VERSION) === */

:root{
  /* default (desktop) */
  --bg-below-hero: url("assets/img/background_height_1920.avif");
  --bg-header:     url("assets/img/header_background_1920.avif");
  --bg-hero:       url("assets/img/hero_background_1920.avif");
  --bg-btn:        url("assets/img/btn_background_1x.avif");
}

/* --- smaller screens --- */
@media (max-width: 720px){
  :root{
    --bg-below-hero: url("assets/img/background_height_mobil.avif");
    --bg-hero:       url("assets/img/hero_background_1920.avif");
  }
  
}

/* --- large screens --- */
@media (min-width: 1400px){
  :root{
    --bg-below-hero: url("assets/img/background_height_2560.avif");
    --bg-hero:       url("assets/img/hero_background_2560.avif");
  }
}

/* --- 4K-ish screens --- */
@media (min-width: 2200px){
  :root{
    --bg-below-hero: url("assets/img/background_height_3840.avif");
    --bg-header:     url("assets/img/header_background_3840.avif");
  }
}

/* Retina gomb háttér (csak 2x DPR esetén) */
@media (min-resolution: 2dppx){
  :root{
    --bg-btn: url("assets/img/btn_background_2x.avif");
  }
}


*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--ink);
  min-height: 100%;
  background: linear-gradient(180deg, var(--bg0), var(--bg1), var(--bg0));
}

.below-hero{
  position: relative;
  padding: 34px 0 72px;
  padding-bottom: 0;
  background:
    var(--bg-below-hero),
    radial-gradient(1000px 520px at 70% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 20% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(247,242,236,.25) 0%, rgba(239,230,220,.12) 50%, rgba(247,242,236,.22) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: cover, auto, auto, auto;
  background-position: center bottom, center, center, center;
}

.container{
  width:min(var(--container), calc(100% - 44px));
  margin:0 auto;
}

.center{text-align:center;}
.maxw{max-width:720px;margin-left:auto;margin-right:auto;}

.h1,.h2,.h3{font-family:var(--serif); margin:0; color:rgba(47,44,40,.92);}
.h1{
  font-weight:500;
  font-size:clamp(36px, 4.6vw, 56px);
  letter-spacing:.2px;
  line-height:1.06;
}
.h2{
  font-weight:500;
  font-size:clamp(28px, 3.1vw, 40px);
  letter-spacing:.2px;
  line-height:1.14;
}
.h3{
  font-weight:500;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.2;
}

.p{
  margin:14px auto 0;
  font-family:var(--serifBody);
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}

/* NEW: kiemelt kulcsmondat */
.p-strong{
  color: rgba(47,44,40,.86);
  font-weight: 500;
  white-space: nowrap;
}

.header{
  position:sticky; top:0; z-index:50;
  background:
    var(--bg-header),
    radial-gradient(1000px 520px at 70% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 20% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(247,242,236,.25) 0%, rgba(239,230,220,.12) 50%, rgba(247,242,236,.22) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: cover, auto, auto, auto;
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.16));
}

.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}

.brand-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  opacity: .78;
}

.brand-text{
  font-family: 'Manrope', sans-serif;
  font-weight: 500;      /* ez a sweet spot */
  font-size:18px;
  letter-spacing:0.02em;
  color:rgba(47,44,40,.90);
}

.brand-text-bold {
  font-weight: 700;
}

.text-bold {
  font-weight: 500;
}

.nav{display:flex;align-items:center;gap:10px;}
.nav-menu{
  display:flex; gap:18px; list-style:none;
  margin:0; padding:0;
}
.nav-link{
  font:500 13px/1 var(--sans);
  color:rgba(47,44,40,.70);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  transition:background .15s ease, transform .15s ease;
}
.nav-link:hover{background:rgba(255,255,255,.45); transform:translateY(-1px);}

.nav-toggle{
  display:none;
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}
.burger{
  display:block; width:18px;height:2px;margin:0 auto;
  background:rgba(47,44,40,.65);
  position:relative;
}
.burger::before,.burger::after{
  content:""; position:absolute; left:0; width:18px;height:2px;
  background:rgba(47,44,40,.65);
}
.burger::before{top:-6px;}
.burger::after{top:6px;}

.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background-color: transparent;
}

.hero-bg{
  position:absolute; inset:0;
  background-image: var(--bg-hero);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;
  transform: scale(1.05);
  filter:saturate(.98) contrast(.98);
  opacity:.95;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 70% 30%, rgba(255,255,255,.70), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(247,242,236,.55), rgba(247,242,236,.14) 55%, rgba(247,242,236,.30));
  mix-blend-mode: screen;
  opacity:.95;
}

.hero-inner{
  position:relative;
  padding: 68px 0 58px;
}

.hero-lead{
  margin:14px 0 8px;
  font-family:var(--serifBody);
  font-size:20px;
  line-height:1.55;
  color:rgba(47,44,40,.70);
}

/* NEW: halk pontosító sor */
.hero-sub{
  margin: 0 0 18px;
  font-family: var(--serifBody);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(47,44,40,.62);
}

/* NEW: CTA blokk (gomb + link) */
.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  margin-top: 1rem;
}

.btn{
  border: none;
  border-radius:var(--rBtn);
  padding:12px 18px;
  font:500 14px/1 var(--sans);
  cursor:pointer;
  box-shadow: var(--shadowSoft);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  letter-spacing: 0.015em;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  color: rgba(255,255,255,.92);
  margin-bottom: 0;
  background-image: var(--bg-btn);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent; /* fallback */
  border-radius:var(--rBtn);
  opacity: .96;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
}

.cta-link{
  font: 600 14px/1 var(--sans);
  color: rgba(47,44,40,.68);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,44,40,.22);
  padding-bottom: 2px;
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
  letter-spacing: 0.02em;
}
.cta-link:hover{
  color: rgba(47,44,40,.82);
  border-color: rgba(47,44,40,.35);
  transform: translateY(-1px);
}

.section{
  padding: 34px 0 72px;
}

.price{
  margin-top: 5rem;
}
.price-line{
  font-family:var(--serif);
  font-size:clamp(26px, 2.6vw, 34px);
  color:rgba(47,44,40,.88);
  margin: 0 0 6px;
}
.price-sub{
  font-family:var(--serifBody);
  font-size:18px;
  color:rgba(47,44,40,.62);
}

/* NEW: rövid ár-igazolás */
.price-note{
  margin: 12px auto 0;
  max-width: 760px;
  font-family: var(--serifBody);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(47,44,40,.66);
}

/* Package card */
.package{
  margin: 22px auto 0;
  margin-top: 4vh;
  margin-bottom: 12rem;
  max-width: 900px;
}

.card-float{
  display: none;
}
.package-inner{
  min-height: 50vh;
  border-radius: var(--rBig);
  border: 1px solid var(--line);
  background:
    url("assets/img/div_background_1x.avif"),
    radial-gradient(1000px 520px at 70% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 20% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(247,242,236,.25) 0%, rgba(239,230,220,.12) 50%, rgba(247,242,236,.22) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: cover, auto, auto, auto;
  background-position: center bottom, center, center, center;
  box-shadow: var(--shadow);
  padding: 26px 26px 18px;
}
.package-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:center;
}

.checklist{
  display:flex;
  justify-content:left;
  list-style:none;
  padding-left:0;
  margin-top:3.4vh;
  margin-left:5vh;
}
.checklist ul{
  list-style:none;
  margin: 8px 0 0;
  padding-left: 0;
  text-align:left;
  font-family: var(--serifBody);
  font-size: 18px;
  font-weight: 500;
  color: rgba(47,44,40,.72);
}
.checklist li{
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.48em;
  width: 14px;
  height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.9 8.4l2.8 2.9L13.2 3.7' fill='none' stroke='%236a6158' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .78;
  transform: translateY(-50%);
}

/* Divider */
.divider{
  width: 90%;
  height: 1px;
  margin: 28px auto;
  background: linear-gradient(
    to right,
    rgba(47,44,40,0),
    rgba(47,44,40,.1),
    rgba(47,44,40,0)
  );
}
.ref-divider{
  height: 2px;
}

/* Ref title row */
.ref{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 4vh;
}
.refs-title{
  margin: 0;
  width: 90rem;
  
}

/* --- Process 3-step --- */
.process{
  margin-top: 10px;
}

/* NEW: cím alatti rövid sor (A verzió) */
.process-kicker{
  margin: 8px auto 0;
  max-width: 720px;
  font-family: var(--serifBody);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(47,44,40,.62);
  margin-bottom: 2rem;
}

/* Grid: asztali 3 oszlop, egységes magasság */
.process-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
  align-items: stretch;
}

/* üveges kártya stílus */
.step{
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(1000px 520px at 70% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 20% 35%, rgba(255,255,255,.32), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  padding: 22px 22px 22px;
  text-align: left;
  overflow:hidden;
  position: relative;

  /* NEW: egységes sor-magasság (head | p1 | list | p2) */
  display: grid;
  grid-template-rows: auto 3.2em auto 3.2em;
  row-gap: 10px;
}

.step::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(420px 240px at 20% 15%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  opacity:.75;
}

.step-head{
  position: relative;
  display:flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0;
}

.step-num{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(47,44,40,.18);
  background: rgba(255,255,255,.50);
  display:grid;
  place-items:center;
  font: 600 14px/1 var(--sans);
  color: rgba(47,44,40,.72);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.step-title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: rgba(47,44,40,.86);
}

.step-text{
  position: relative;
  margin: 0;
  font-family: var(--serifBody);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(47,44,40,.70);
}

.step-list{
  position: relative;
  margin: 0;
  padding-left: 18px;
  font-family: var(--serifBody);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(47,44,40,.68);
}
.step-list li{
  margin: 6px 0;
}

/* NEW: finom fókusz a 2. lépésen (nem üt el) */
.step--focus{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

/* alul CTA */
.process-cta{
  margin-top: 58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}
.process-cta .btn-primary{
  padding: 13px 20px;
}
.process-hint{
  font-family: var(--serifBody);
  font-size: 14px;
  color: rgba(47,44,40,.60);
  margin-top: .2rem;
  opacity: .8;
  letter-spacing: 0.02em;
  max-width: 720px;
  text-align: center;
}

/* vignette */
.vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      120% 120% at 50% 50%,
      rgba(255,255,255,0) 55%,
      rgba(247,242,236,.35) 85%,
      rgba(247,242,236,.55) 100%
    );
}

.contact-strip {
  padding: 28px 0 10px;
}

.contact-strip__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.contact-strip__divider {
  width: min(860px, 92%);
  height: 1px;
  background: rgba(0,0,0,0.10);
  filter: blur(0.2px);
}

.contact-strip__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-strip__link {
  color: rgba(0,0,0,0.62);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color 160ms ease, opacity 160ms ease;
}

.contact-strip__link:hover {
  color: rgba(0,0,0,0.78);
}

.contact-strip__sep {
  color: rgba(0,0,0,0.30);
}

.contact-strip__note {
  font-size: 13px;
  color: rgba(0,0,0,0.45);
}

.footer-mark {
  display: flex;
  justify-content: center;
}

.footer-mark img {
  height: 66px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  filter: blur(1px);
}

/* A célpont szekciók ne csússzanak a sticky header alá */
#top,
#about,
#price,
#service,
#process{
  scroll-margin-top: calc(var(--headerH));
}

/* natív anchor ugrás is legyen smooth */
html{
  scroll-behavior: smooth;
}

/* header felett rétegzés */
#price,
#service,
#process,
.contact-strip,
.footer-mark{
  position: relative;
  z-index: 60; /* header 50 fölé */
}

/* divider réteg */
.divider{
  position: relative;
  z-index: 60;
}

/* Tablet & mobile */
@media (max-width: 920px){
  .package-grid{ grid-template-columns: 1fr; }

  /* process: 1 oszlopra */
  .process-grid{
    grid-template-columns: 1fr;
  }

  /* mobilon legyen természetesebb a kártya felosztása */
  .step{
    grid-template-rows: auto auto auto auto;
  }

  .step-text{
    font-size: 17px;
    line-height: 1.5;
  }
  .step-list{
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Mobil: brutál tiszta (kisebb tér + kompakt lista) */
@media (max-width: 520px){
  .process-kicker{ font-size: 16px; }

  .step{ padding: 18px 18px 18px; }
  .step-title{ font-size: 20px; }

  .step-list li{ margin: 5px 0; }
}


/* extra nagy kijelzőn */
@media (min-width: 1400px){
  .hero-bg{ transform: scale(1.10); }
}

@media (max-width: 720px){
  .below-hero{
    /* a fő textúra ismétlődjön */
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;

    /* ne cover: fix “tile” méret (szélességhez igazítva) */
    background-size: cover, auto, auto, auto;

    /* a tile induljon fentről, hogy szebb legyen a kezdés */
    background-position: center top, center, center, center;
  }
    .package{
      position: relative;
    }
    .package-inner{
    background:
      url("assets/img/mobil_package_1000.avif"),
      radial-gradient(1000px 520px at 70% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
      radial-gradient(900px 480px at 20% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 58%),
      linear-gradient(180deg, rgba(247,242,236,.25) 0%, rgba(239,230,220,.12) 50%, rgba(247,242,236,.22) 100%);
      background-size: cover;
      background-position: center;
      
    }

  :root{
    --headerH: 64px; /* mobil header magasság (állítsd ha más) */
    --bg-hero: url("assets/img/hero_background_960.avif");
  }

  .header{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;            /* biztosan minden fölé */
    transform: none !important; /* ha JS/CSS tologatná */
    opacity: 1 !important;
  }
  #top,
  #about,
  #price,
  #service,
  #process{
    scroll-margin-top: calc(var(--headerH) * 1.5);
  }

  body{
    padding-top: var(--headerH); /* ne takarja a tartalmat */
  }

  .price{
    margin-top: 0rem;
  }
  .mobil_div {
    margin-top: 3.4rem;
    margin-bottom: 2.4rem;
  }
  .package {
    margin-bottom: 8rem;
  }

  .nav-toggle{ display:inline-grid; place-items:center; }
  .nav-menu{
    display:none;
    position:absolute;
    right: 22px;
    top: 82px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(0,0,0,.10);
    flex-direction:column;
    gap: 8px;
    min-width: 190px;
    background-image: url("assets/img/menu_background_1x.avif");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .nav-menu.open{ display:flex; }

  .hero-cta{ align-items:flex-start; }
  .p-strong{ white-space: normal; } /* mobilon ne törjön furán */
  .checklist{ margin: 0; margin-bottom: 4rem;}

  .card-float{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%); /* fél magassággal lecsúszik */
    width: 16rem;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.24));
  }
  
  
}

@media (min-width: 721px) and (max-width: 1400px) {
  .package-inner{
    min-height: 21rem; 
    height: 21rem;
  }
  .header{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;            /* biztosan minden fölé */
    transform: none !important; /* ha JS/CSS tologatná */
    opacity: 1 !important;
  }
  body {
    margin-top: var(--headerH);
  }
}

@media (min-resolution: 2dppx) and (min-width: 721px){
:root{ --bg-btn: url("assets/img/btn_background_2x.avif"); }
}

@media (max-width: 720px){
.nav-menu{ background-image: none; }
.nav-menu.open{
background-image: url("assets/img/menu_background_1x.avif");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
}