/* coversurface – nyilvános kezdőoldal.
   Fehér tér, coversurface-vörös akcentus, üveglapok a fotó fölött. */

.lp { --lp-max: 1200px; }
.lp__wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--s-6); }

/* --- Ráúszó fejléc ---------------------------------------------------- */
.lp__header {
  position: sticky; top: 0; z-index: var(--z-header);
  border-radius: 0; border-width: 0 0 1px 0;
}
.lp__headerIn {
  max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--s-6);
  height: 68px; display: flex; align-items: center; gap: var(--s-6);
}
.lp__nav { display: flex; gap: var(--s-5); margin-left: auto; }
.lp__nav a { font-weight: 550; color: var(--c-ink-2); }
.lp__nav a:hover { color: var(--c-ink); }
.lp__headerBtns { display: flex; gap: var(--s-3); }

/* --- Hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute; inset: -4% -2%;
  background: url("/static/img/hero-varos.svg") center/cover no-repeat;
  filter: blur(2px) saturate(112%);
  transform: scale(1.04);
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.78) 70%, var(--c-bg));
}
.hero__in {
  position: relative;
  max-width: var(--lp-max); margin: 0 auto; padding: var(--s-9) var(--s-6) 88px;
  display: grid; grid-template-columns: 1fr 400px; gap: var(--s-8); align-items: center;
}
.hero__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.hero__title span { color: var(--c-red); }
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-md); color: var(--c-ink-2); max-width: 46ch; }
.hero__btns { margin-top: var(--s-7); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.btn--lg { height: 48px; padding: 0 var(--s-6); font-size: var(--fs-md); }

/* --- Élő számlálósáv -------------------------------------------------- */
.counters {
  position: relative; margin: -44px auto 0; max-width: var(--lp-max);
  padding: var(--s-5) var(--s-6); border-radius: var(--r-card);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  z-index: 2;
}
.counter__num { font-size: var(--fs-num); font-weight: 750; letter-spacing: -0.02em; }
.counter__label { font-size: var(--fs-xs); color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .1em; }
.counter--live .counter__num { color: var(--c-red); }

/* --- Idézetsáv -------------------------------------------------------- */
.quoteband { text-align: center; padding: var(--s-9) var(--s-6); }
.quoteband__q { font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; color: var(--c-red); letter-spacing: -0.02em; }
.quoteband__c { margin-top: var(--s-3); font-size: 11px; letter-spacing: .34em; color: var(--c-ink-2); }

/* --- Szakaszok -------------------------------------------------------- */
.section { padding: var(--s-8) 0; }
.section__head { max-width: 640px; margin-bottom: var(--s-7); }
.section__kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--c-red); font-weight: 650; }
.section__title { margin-top: var(--s-2); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.section__lead { margin-top: var(--s-3); color: var(--c-ink-2); font-size: var(--fs-md); }

.cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cap__item { padding: var(--s-6); border-radius: var(--r-card); }
.cap__icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--c-red-soft); color: var(--c-red); margin-bottom: var(--s-4);
}
.cap__icon .icon { width: 22px; height: 22px; }
.cap__name { font-size: var(--fs-md); font-weight: 650; }
.cap__text { margin-top: var(--s-2); color: var(--c-ink-2); }

.menus { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3); }
.menus__item {
  display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-2); border-radius: var(--r-inner);
  background: var(--glass-inner); border: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  text-align: center; font-size: var(--fs-xs); font-weight: 600;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.menus__item:hover { border-color: var(--c-red); transform: translateY(-2px); }
.menus__item .icon { color: var(--c-red); }
.menus__sub { display: block; font-weight: 450; color: var(--c-ink-2); font-size: 11px; }

.preview { position: relative; padding: var(--s-8) 0 var(--s-9); }
.preview__frame {
  padding: var(--s-4); border-radius: 22px; overflow: hidden;
  transform: perspective(1600px) rotateX(3deg);
}
.preview__frame img { border-radius: var(--r-inner); display: block; }

.privacy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.switches { display: grid; gap: var(--s-3); }
.switchrow {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-inner);
  background: var(--glass-inner); border: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.switchrow__label { flex: 1; font-weight: 550; }
.switch {
  width: 42px; height: 24px; border-radius: var(--r-pill); flex: none;
  background: var(--c-line); position: relative; transition: background var(--t-base);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--t-base);
}
.switch[data-on="1"] { background: var(--c-red); }
.switch[data-on="1"]::after { transform: translateX(18px); }

.cta {
  margin: var(--s-9) 0 0; padding: var(--s-9) var(--s-6);
  background: var(--c-red); color: #fff; text-align: center;
}
.cta h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; }
.cta p { margin-top: var(--s-3); opacity: .9; }
.cta .btn--ghost { background: #fff; color: var(--c-red); border-color: #fff; margin-top: var(--s-6); }

.lpfoot { padding: var(--s-8) 0 var(--s-9); border-top: 1px solid var(--c-line); }
.lpfoot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); }
.lpfoot__col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--c-ink-2); margin-bottom: var(--s-3); }
.lpfoot__col a { display: block; padding: 3px 0; color: var(--c-ink-2); }
.lpfoot__col a:hover { color: var(--c-ink); }

/* --- Töréspontok ------------------------------------------------------ */
@media (max-width: 1023px) {
  .hero__in { grid-template-columns: 1fr; padding-bottom: 72px; }
  .counters { grid-template-columns: repeat(2, 1fr); }
  .cap { grid-template-columns: 1fr 1fr; }
  .menus { grid-template-columns: repeat(4, 1fr); }
  .privacy { grid-template-columns: 1fr; }
  .lpfoot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .lp__nav { display: none; }
  .cap { grid-template-columns: 1fr; }
  .menus { grid-template-columns: repeat(2, 1fr); }
  .preview__frame { transform: none; }
  .lpfoot__grid { grid-template-columns: 1fr; }
}