/* =======================================================================
   Sunrise landing (hirdetési forgalomra optimalizált kezdőlap)
   Fekete / fehér / világosszürke alap, a sárga kizárólag CTA és aktív
   állapot. A konténer a meglévő rács ritmusát követi: 1400px tartalom-
   oszlop + 80px kávé, plusz a szakaszok 80px belső behúzása.
   ======================================================================= */

:root {
  --lp-yellow: #fdce1f;
  --lp-yellow-dark: #eec111;
  --lp-on-yellow: #181818;
  /* Slate neutrals rather than pure black and grey: the half-step off
     neutral is what makes the reference read calm. */
  --lp-ink: #20262b;
  --lp-muted: #6d747a;
  --lp-line: #dedfdb;
  --lp-surface: #f4f4f2;
  --lp-radius: 10px;
  --lp-radius-btn: 999px;
}

.lp-container {
  max-width: var(--page-max, 1560px);
  margin: 0 auto;
  /* One shared gutter variable drives the header, the sections and the
     footer, so they cannot drift apart again. */
  padding: 0 var(--page-gutter, 160px);
}

.lp-section { padding: 112px 0; }
@media screen and (max-width: 991px) { .lp-section { padding: 80px 0; } }
@media screen and (max-width: 767px) { .lp-section { padding: 56px 0; } }

.lp-section--surface { background: var(--lp-surface); }
.lp-section--ink { background: var(--lp-ink); color: #fff; }

/* ---------- Typography ---------- */
.lp-eyebrow {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lp-muted);
  margin: 0 0 14px;
}
.lp-section--ink .lp-eyebrow { color: rgba(255,255,255,.65); }

.lp-h2 {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 20ch;
  color: var(--lp-ink);
}

.lp-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-muted);
  max-width: 68ch;
  margin: 0;
}
.lp-section--ink .lp-lead { color: rgba(255,255,255,.78); }

.lp-head { margin-bottom: 52px; }
@media screen and (max-width: 767px) { .lp-head { margin-bottom: 32px; } }

/* ---------- Buttons ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--lp-radius-btn);
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.lp-btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }
.lp-btn:active { transform: translateY(1px); }

.lp-btn--primary { background: var(--lp-yellow); color: var(--lp-on-yellow); }
.lp-btn--primary:hover { background: var(--lp-yellow-dark); }

/* A soft filled pill, not a hard outline: on the light sections the ring
   read heavier than the yellow primary next to it. */
.lp-btn--ghost {
  background: rgba(32, 38, 43, 0.06);
  color: var(--lp-ink);
  border-color: transparent;
}

.lp-btn--ghost:hover {
  background: rgba(32, 38, 43, 0.12);
  color: var(--lp-ink);
  border-color: transparent;
}

/* On a dark ground the same pill flips to a light translucent fill. */
.lp-section--ink .lp-btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lp-section--ink .lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-color: transparent;
}

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Top info bar ---------- */

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  background: #0d0d0d url('../images/hero-landing.webp') center/cover no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: min(760px, 100vh);
  padding: 104px 0 44px;
}

.lp-hero > .lp-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* margin: 0 auto on a flex item cancels the stretch, which let the whole
     text column shrink to its widest child and drift to the middle. */
  width: 100%;
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* AA contrast for white text over the photo */
  /* A wash, not a scrim: the right of the photograph stays readable while
     the type side keeps its contrast. */
  background: linear-gradient(97deg, rgba(24,32,38,.94) 0%, rgba(28,38,45,.82) 38%, rgba(42,54,62,.40) 68%, rgba(56,70,78,.16) 100%);
}
.lp-hero > * { position: relative; }
@media screen and (max-width: 991px) { .lp-hero { padding: 112px 0 36px; min-height: 0; } }
@media screen and (max-width: 767px) {
  .lp-hero { padding: 104px 0 32px; background-image: url('../images/hero-landing-900.webp'); }
  /* Text spans the full width on phones, so the overlay has to be even. */
  .lp-hero::before { background: rgba(12,12,12,.84); }
}

/* The text block centres in the space above the proof row: one auto
   margin here, one on the proof row, so the free space splits evenly. */
.lp-hero__inner {
  max-width: 760px;
  margin-top: auto;
}
.lp-hero__eyebrow {
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 20px;
}
/* One size, one weight, two tones. The hierarchy is carried by colour. */
.lp-hero__title {
  font-size: clamp(29px, 3.9vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0 0 22px;
  color: #fff;
}

.lp-hero__dim { color: rgba(255, 255, 255, .62); }

@media screen and (max-width: 767px) {
  .lp-hero__title br { display: none; }
  .lp-hero__dim::before { content: " "; }
}
.lp-hero__sub {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .70);
  margin: 0 0 36px;
  max-width: 44ch;
}
.lp-hero__micro { margin: 22px 0 0; font-size: 13px; color: rgba(255,255,255,.7); }
.lp-hero__badges { display: flex; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.lp-hero__badges img { display: block; }

/* ---------- Trust bar ---------- */
.lp-trust { border-bottom: 1px solid var(--lp-line); background: #fff; }
.lp-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--lp-line);
  border-left: 1px solid var(--lp-line);
  border-right: 1px solid var(--lp-line);
}
.lp-trust__item { background: #fff; padding: 24px 20px; text-align: center; }
.lp-trust__value { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.lp-trust__label { font-size: 13px; color: var(--lp-muted); margin: 0; line-height: 1.45; }

/* ---------- Card grids ---------- */
.lp-grid { display: grid; gap: 20px; }
.lp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.lp-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 28px;
}
.lp-section--surface .lp-card { background: #fff; }
.lp-card__title { font-size: 16px; font-weight: 500; margin: 0 0 10px; line-height: 1.35; }
.lp-card__text { font-size: 14px; line-height: 1.6; color: var(--lp-muted); margin: 0; }

/* ---------- Process steps ---------- */
.lp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--lp-yellow);
  color: var(--lp-on-yellow);
  font-weight: 500;
  margin-bottom: 16px;
}

/* ---------- Products ---------- */
.lp-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 24px;
}
.lp-product__title { font-size: 17px; font-weight: 500; margin: 0; }
.lp-product__text { font-size: 14px; line-height: 1.55; color: var(--lp-muted); margin: 0; flex: 1; }
.lp-product__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lp-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-link:hover { color: var(--lp-muted); }

/* ---------- Catalogs (compact, secondary) ---------- */
.lp-catalogs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp-catalog {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 10px 16px;
  font-size: 14px;
  color: var(--lp-ink);
  text-decoration: none;
  background: #fff;
}
.lp-catalog:hover { border-color: var(--lp-ink); }

/* ---------- Reviews ---------- */
.lp-review-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 28px;
  background: #fff;
}

/* ---------- FAQ ---------- */
.lp-faq { max-width: 860px; }
.lp-faq__item { border-bottom: 1px solid var(--lp-line); }
.lp-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0;
  padding: 22px 0;
  font-size: 17px; font-weight: 500; line-height: 1.4;
  text-align: left;
  color: var(--lp-ink);
  cursor: pointer;
  min-height: 44px;
}
.lp-faq__q:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.lp-faq__icon { flex: none; width: 20px; height: 20px; position: relative; }
.lp-faq__icon::before,
.lp-faq__icon::after {
  content: ''; position: absolute; background: var(--lp-ink);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.lp-faq__icon::before { width: 14px; height: 2px; }
.lp-faq__icon::after { width: 2px; height: 14px; }
.lp-faq__q[aria-expanded="true"] .lp-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.lp-faq__a { display: none; padding: 0 0 22px; }
.lp-faq__a[data-open="true"] { display: block; }
.lp-faq__a p { font-size: 15px; line-height: 1.7; color: var(--lp-muted); margin: 0 0 10px; max-width: 760px; }
.lp-faq__a p:last-child { margin-bottom: 0; }

/* ---------- Final CTA ---------- */
.lp-final__inner { max-width: 760px; }

/* ---------- Mobile sticky CTA ---------- */
.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--lp-line);
}
.lp-sticky .lp-btn { flex: 1; min-height: 48px; padding: 12px 16px; font-size: 14px; }
.lp-sticky__call {
  flex: none; width: 52px; padding: 0;
  border: 2px solid var(--lp-ink); border-radius: var(--lp-radius);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lp-ink); text-decoration: none;
}
@media screen and (max-width: 1279px) {
  .lp-sticky[data-visible="true"] { display: flex; }
  body { padding-bottom: 0; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-faq__icon::before, .lp-faq__icon::after { transition: none !important; }
}

/* =======================================================================
   Header stack: the info bar sits above the fixed navbar and slides away
   on scroll, the navbar then takes the very top.
   ======================================================================= */

/* No info bar above it any more, so the header owns the top. */
.navbar {
  top: 0;
  padding: 18px 0;
}

@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none !important; }
}

/* ---------- Anchor targets clear the fixed header ---------- */
section[id],
#referenciak,
#ajanlatkeres,
#konfigurator {
  scroll-margin-top: 110px;
}

/* The browser's own smooth scroll stretches its duration with distance,
   which crawled on a page this tall. landing.js animates it instead. */
html { scroll-behavior: auto; }

/* ---------- Google reviews ---------- */
.lp-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.lp-review {
  margin: 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-review__stars {
  color: var(--lp-yellow);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

.lp-review__star--off { color: var(--lp-line); }

.lp-review__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-ink);
  /* Long reviews are trimmed so the cards stay on one grid row. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-review__by {
  margin-top: auto;
  font-size: 13px;
  color: var(--lp-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.lp-review__by a {
  color: var(--lp-ink);
  text-decoration: none;
}

.lp-review__by a:hover { text-decoration: underline; }

.lp-review__when::before {
  content: "·";
  margin-right: 8px;
}

/* ---------- Proof row in the foot of the hero ---------- */
/* Packed to the left at their own width, with a hairline between, rather
   than stretched across the column. */
.lp-hero__proof {
  margin-top: auto;
  padding-top: 56px;
  display: flex;
  flex-wrap: wrap;
}

.lp-proof { padding-right: 28px; }

.lp-proof + .lp-proof {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.lp-proof__value {
  margin: 0 0 3px;
  font-size: 16px;
  color: #fff;
}

.lp-proof__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .70);
}

@media screen and (max-width: 991px) {
  .lp-hero__proof { padding-top: 44px; row-gap: 20px; }
  .lp-proof { padding-right: 20px; }
  .lp-proof + .lp-proof { padding-left: 20px; }
}

@media screen and (max-width: 560px) {
  .lp-hero__proof { display: grid; grid-template-columns: 1fr; row-gap: 16px; }
  .lp-proof,
  .lp-proof + .lp-proof {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
}

/* Body copy takes the slate ink too, so the page reads as one tonal
   family. The yellow and the ink on it stay exactly as specified. */
body,
body .body {
  color: var(--lp-ink);
}

/* ---------- Supporting copy sits one step lighter than the UI ----------
   The labels people act on (buttons, nav, card titles, figures) stay at
   400; the prose around them drops to 300. */
.lp-hero__eyebrow,
.lp-hero__sub,
.lp-proof__label,
.lp-eyebrow,
.lp-lead,
.lp-card__text,
.lp-product__text,
.lp-faq__a p,
.lp-review__text,
.lp-review__by,
.lp-hero__micro {
  font-weight: 300;
}

/* ---------- Hero secondary action: frosted, not outlined ----------
   Same treatment as the header pill, so the two read as one family. */
.lp-hero .lp-btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lp-hero .lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: transparent;
  color: #fff;
}

/* =======================================================================
   The same language, carried through the rest of the page
   Softer surfaces, one ink, pill controls, and the two blocks kept from
   the old template brought onto the same type scale.
   ======================================================================= */

/* ---------- Surfaces ---------- */
.lp-card,
.lp-product,
.lp-review,
.lp-review-box {
  border-radius: 18px;
  border-color: rgba(32, 38, 43, 0.08);
  color: var(--lp-ink);
}

.lp-catalog {
  border-radius: 999px;
  border-color: rgba(32, 38, 43, 0.12);
  font-weight: 400;
}

.lp-catalog:hover {
  border-color: rgba(32, 38, 43, 0.35);
  background: rgba(32, 38, 43, 0.03);
}

/* On a tinted section the cards float on white; on a white section they
   take the tint instead, so neither reads as a hard box. */
.lp-section:not(.lp-section--surface) .lp-card,
.lp-section:not(.lp-section--surface) .lp-product,
.lp-section:not(.lp-section--surface) .lp-review,
.lp-section:not(.lp-section--surface) .lp-review-box {
  background: var(--lp-surface);
  border-color: transparent;
}

.lp-card__title,
.lp-product__title {
  color: var(--lp-ink);
  font-weight: 500;
}

/* ---------- FAQ ---------- */
.lp-faq__item {
  border-bottom-color: rgba(32, 38, 43, 0.1);
}

.lp-faq__q {
  font-weight: 400;
  font-size: 16px;
  color: var(--lp-ink);
}

.lp-faq__icon::before,
.lp-faq__icon::after {
  background: var(--lp-muted);
}

/* ---------- Headings kept from the old template ---------- */
#referenciak h2,
#referenciak .heading-3,
#ajanlatkeres h2,
#ajanlatkeres .heading-3,
#konfigurator .heading-11 {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--lp-ink);
}

#referenciak p,
#ajanlatkeres p,
#referenciak .paragraph,
#ajanlatkeres .paragraph {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--lp-muted);
}

/* ---------- The lead form ---------- */
#ajanlatkeres .form_input {
  border-radius: 14px;
  border: 1px solid rgba(32, 38, 43, 0.12);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 300;
  color: var(--lp-ink);
  padding: 14px 18px;
  min-height: 52px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ajanlatkeres .form_input.is-text-area {
  min-height: 140px;
  border-radius: 18px;
}

#ajanlatkeres .form_input::placeholder {
  color: var(--lp-muted);
  opacity: 1;
}

#ajanlatkeres .form_input:focus {
  border-color: var(--lp-ink);
  box-shadow: 0 0 0 3px rgba(32, 38, 43, 0.06);
  outline: none;
}

#ajanlatkeres .button.w-button,
#ajanlatkeres input[type="submit"] {
  border-radius: 999px;
  background-color: var(--lp-yellow);
  color: var(--lp-on-yellow);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  padding: 15px 28px;
  border: 0;
  min-height: 52px;
  transition: background-color 0.2s ease;
}

#ajanlatkeres .button.w-button:hover,
#ajanlatkeres input[type="submit"]:hover {
  background-color: var(--lp-yellow-dark);
  color: var(--lp-on-yellow);
}

/* ---------- Footer ---------- */
.footer,
.footer .credit-text,
.footer .link-text {
  color: var(--lp-ink);
  font-weight: 300;
}

.footer .credit-text.legals {
  font-weight: 400;
}

/* ---------- Two-column section head ----------
   The heading holds the left column; the explanation and the action sit
   together on the right, so the button belongs to a block instead of
   floating under the cards. */
@media screen and (min-width: 992px) {
  .lp-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
  }

  .lp-head--split .lp-eyebrow {
    grid-column: 1 / -1;
  }

  .lp-head--split .lp-h2 {
    margin-bottom: 0;
    max-width: none;
  }

  .lp-head--split .lp-lead {
    max-width: none;
    margin-top: 6px;
  }

  .lp-head--split .lp-actions {
    margin-top: 26px;
  }
}

@media screen and (max-width: 991px) {
  .lp-head--split .lp-actions {
    margin-top: 22px;
  }
}

/* The forced break in a section heading only helps while the line fits. */
@media screen and (max-width: 767px) {
  .lp-h2 br { display: none; }
}

/* An aside that carries only the action pushes it to the right edge of the
   content column, so the row reads as heading left, action right. Where a
   paragraph sits above it, the button keeps that paragraph's left edge. */
@media screen and (min-width: 992px) {
  .lp-head__aside > .lp-actions:only-child {
    justify-content: flex-end;
  }
}

/* The configurator head still carried the template's own label and lead
   sizes; both now match the sections around it. */
#konfigurator .konfigurator-head .subtitle {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lp-muted);
  margin-bottom: 14px;
}

#konfigurator .konfigurator-head .body-display {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--lp-muted);
  max-width: 68ch;
}