/* ===================================================================
   INFRALINE — Desktop one-pager
   Source of truth: Figma frame 122:1370 "Page/Home" (1440 × 4042)
   Coordinates below are taken directly from the Figma node bounds.
   =================================================================== */

/* ───── REAL FONTS (local woff2 files in /fonts) ───── */
/* Garet Book → body / nav / labels (Figma fontWeight 300) */
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Book.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
/* Garet Bold → card titles, About headings, "Bővebben" (Figma fontWeight 700) */
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* TAN - PEARL → Hero heading + "INFRALINE szemlélete" display headings */
@font-face {
  font-family: "TAN Pearl";
  src: url("fonts/TAN-Pearl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Playfair Display → "Melyik megoldás…" + "Segítünk megtalálni…" headings */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors (from Figma fills) */
  --cream:    #F8F6F2;
  --dark:     #5C5645;
  --brown:    #6A5943;
  --brown2:   #6F5141;   /* questionnaire / form */
  --white:    #FFFFFF;
  --bosch-red:#D83934;
  --card-olda:  #CBCDC2;
  --card-multi: #E7E1D3;
  --card-mobil: #DECECE;

  /* Type — real local fonts (system fallbacks only as a last resort) */
  --font-body:    "Garet", system-ui, sans-serif;        /* Garet Book / Bold */
  --font-display: "TAN Pearl", Georgia, serif;            /* TAN - PEARL */
  --font-serif:   "Playfair Display", Georgia, serif;     /* Playfair Display */

  --stage: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
  -webkit-font-smoothing: antialiased;
  min-width: var(--stage);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; }

/* The fixed-width desktop canvas, centered */
.stage {
  width: var(--stage);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* ───── Monochrome icon system (CSS mask → recolor via currentColor) ───── */
.i {
  display: inline-block;
  width: 24px; height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  flex: 0 0 auto;
}
.i-arrow    { --i: url(assets/arrow-card.svg); }
.i-arrow--back { transform: scaleX(-1); }
.i-edit     { --i: url(assets/ic-edit.svg); }
.i-box      { --i: url(assets/ic-box.svg); }
.i-settings { --i: url(assets/ic-settings.svg); }
.i-shield   { --i: url(assets/ic-shield.svg); }
.i-message  { --i: url(assets/ic-message.svg); }
.i-time     { --i: url(assets/ic-time.svg); }
.i-rocket   { --i: url(assets/ic-rocket.svg); }
.i-bullet   { --i: url(assets/ic-bullet.svg); width:13px; height:13px; }
.i-fb       { --i: url(assets/ic-facebook.svg); }
.i-ig       { --i: url(assets/ic-instagram.svg); }
.q-arrow    { --i: url(assets/q-arrow.svg); width:24px;height:24px; }

/* Logo as recolorable mask (brand brown in header, cream in footer) */
.logo-mask {
  display: inline-block;
  width: 136px; height: 137px;
  background-color: currentColor;
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
          mask: url(assets/logo.svg) center / contain no-repeat;
}
.logo-mask--brand { color: var(--brown); }
.logo-mask--cream { color: var(--cream); }

.eyebrow {
  font-size: 16px; font-weight: 300; line-height: 23.2px;
  letter-spacing: 0; color: var(--brown);
}

.anchor-alias { position: absolute; top: 0; }

/* ════════════════ HEADER (region 0–303) ════════════════ */
.header { height: 303px; position: relative; }
.header__logo  { position: absolute; left: 652px; top: 96px; }
.header__nav   { position: absolute; left: 504px; top: 265px; display: flex; gap: 29px; }
.header__link {
  font-size: 16px; font-weight: 300; line-height: 23.2px;
  letter-spacing: 0.32px; color: var(--brown); white-space: nowrap;
  transition: opacity .2s;
}
.header__link:hover { opacity: .6; }
.header__contact {
  position: absolute; left: 1161px; top: 265px;
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 300; letter-spacing: 0.3px; color: var(--brown);
}
.header__call { width: 22px; height: 22px; }

/* ════════════════ HERO (303–903) ════════════════ */
.hero { height: 600px; position: relative; }
.hero__left {
  position: absolute; inset: 0 720px 0 0;
  background: var(--dark);
}
.hero__eyebrow {
  position: absolute; left: 67px; top: 109px;
  font-size: 16px; font-weight: 300; line-height: 23.2px; color: var(--cream);
}
.hero__heading {
  position: absolute; left: 67px; top: 145px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 52px; line-height: 65px; color: var(--cream);
}
.hero__desc {
  position: absolute; left: 67px; top: 293px;
  font-size: 20px; font-weight: 300; line-height: 29px; color: var(--cream);
}
.hero__cta {
  position: absolute; left: 67px; top: 371px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream); color: var(--dark);
  padding: 8px 40px 8px 36px;
  font-size: 16px; font-weight: 300; line-height: 19px;
  transition: background .2s, color .2s;
}
.hero__cta .i-arrow { width: 24px; height: 24px; }
.hero__cta:hover { background: #ece8e0; }
.hero__signature {
  position: absolute; left: 67px; top: 534px;
  font-size: 16px; font-weight: 300; line-height: 19px; color: var(--cream);
}
.hero__image { position: absolute; right: 0; top: 0; width: 720px; height: 600px; overflow: hidden; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 39% 50%; }

/* ════════════════ PRODUCT CATEGORIES (948–1744) ════════════════ */
.products { height: 796px; margin-top: 45px; position: relative; }
.products__head { position: absolute; left: 260px; top: 0; width: 687px; }
.products__head .eyebrow { display: block; }
.products__title {
  margin-top: 8px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 36px; line-height: 48px; letter-spacing: 0.72px; color: var(--brown);
}
.products__desc {
  margin-top: 10px;
  font-size: 20px; font-weight: 300; line-height: 29px;
  letter-spacing: 0.4px; color: var(--brown);
}
.products__grid {
  position: absolute; left: 170px; top: 196px;
  display: flex; gap: 10px;
}
.pcard {
  position: relative;
  width: 360px; height: 600px;
  overflow: hidden;
}
.pcard--olda  { background: var(--card-olda); }
.pcard--multi { background: var(--card-multi); }
.pcard--mobil { background: var(--card-mobil); }
.pcard__head { position: absolute; left: 36px; top: 68px; }
.pcard__title {
  font-size: 20px; font-weight: 700; line-height: 29px;
  letter-spacing: 0.4px; color: var(--brown);
}
.pcard__sub {
  font-size: 20px; font-weight: 300; line-height: 29px;
  letter-spacing: 0.4px; color: var(--brown);
}
.pcard__img {
  position: absolute; left: 36px; top: 142px;
  width: 288px; height: 330px;
  background: var(--white); border: 1px solid var(--brown);
  overflow: hidden;
}
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__desc {
  position: absolute; right: 36px; top: 480px;
  font-size: 13px; font-weight: 300; line-height: 19px;
  color: var(--brown); text-align: right;
}
.pcard__cta {
  position: absolute; left: 40px; top: 552px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; line-height: 20px; color: var(--brown);
}
.pcard__cta .i-arrow { width: 24px; height: 24px; }
.pcard__cta:hover { opacity: .7; }

/* ════════════════ BOSCH PARTNERSHIP (1779–1974) ════════════════ */
.bosch { height: 195px; margin-top: 35px; position: relative; }
.bosch__head { position: absolute; left: 421px; top: 0; width: 849px; text-align: right; }
.bosch__heading {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px; height: 46px; margin-left: 331px; /* 752-421 */
  font-size: 32px; font-weight: 300; letter-spacing: 0.64px; color: var(--brown);
}
.bosch__logo { height: 28px; width: auto; }
.bosch__lead {
  margin-top: 8px;
  font-size: 20px; font-weight: 300; line-height: 28px; color: var(--brown);
}
.bosch__desc {
  margin-top: 13px;
  font-size: 20px; font-weight: 300; line-height: 28px; color: var(--brown);
}
.bosch__features { position: absolute; left: 0; top: 167px; width: 100%; height: 28px; }
.feat {
  position: absolute; top: 0; display: flex; align-items: center; gap: 18px;
  height: 28px; color: var(--brown);
}
.feat .i { width: 24px; height: 24px; }
.feat__label {
  font-size: 15px; font-weight: 300; line-height: 28px;
  letter-spacing: 0.3px; color: var(--brown); white-space: nowrap;
}

/* ════════════════ ABOUT / PHILOSOPHY (2019–2739) ════════════════ */
.about { height: 720px; margin-top: 45px; position: relative; background: var(--dark); }
.about__img {
  position: absolute; left: 16px; top: 17px;
  width: 555px; height: 420px; overflow: hidden;
}
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__values {
  position: absolute; right: 17px; top: 17px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.about__values span {
  font-size: 16px; font-weight: 300; line-height: 24px;
  letter-spacing: 0.32px; color: var(--white);
}
.about__content { position: absolute; left: 604px; top: 301px; width: 483px; }
.about__title {
  /* Figma per-character override: "INFRALINE" = Garet Bold, "szemlélete" = Garet Book */
  font-family: var(--font-body); font-weight: 300;
  font-size: 32px; line-height: 44px; letter-spacing: 0; color: var(--cream);
}
.about__title-bold { font-weight: 700; }
.about__desc {
  margin-top: 8px;
  font-size: 20px; font-weight: 300; line-height: 28px; color: var(--cream);
}
.about__grid {
  position: absolute; left: 17px; top: 451px;
  display: flex; gap: 14px;
}
.vcard {
  width: 270px; height: 269px;
  background: rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 30px;
  color: var(--cream); text-align: center;
}
.vcard .i { width: 24px; height: 24px; color: var(--cream); }
.vcard h3 {
  margin-top: 6px;
  font-size: 20px; font-weight: 700; line-height: 30px;
  letter-spacing: 0.4px; color: var(--white);
}
.vcard p {
  margin-top: 4px;
  font-size: 20px; font-weight: 300; line-height: 29px;
  letter-spacing: 0.4px; color: var(--cream);
}

/* ════════════════ RECOMMENDATION / QUESTIONNAIRE (2796–3499) ════════════════ */
.rec { min-height: 785px; margin-top: 57px; position: relative; padding-bottom: 0; }
.rec__brand { position: absolute; left: 17px; top: 0; bottom: 0; width: 463px; overflow: hidden; }
.rec__brandimg { width: 100%; height: 100%; object-fit: cover; }
.rec__brandtext { position: absolute; left: 300px; bottom: 18px; color: var(--cream); }
.rec__brandmsg { font-size: 15px; font-weight: 300; line-height: 21.75px; }
.rec__brandlogo { display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 13px; font-weight: 300; line-height: 18.85px; }
.rec__boschmini { height: 16px; width: auto; filter: brightness(0) invert(1); }

.rec__content { position: absolute; left: 521px; top: 45px; width: 677px; }
.rec__content .eyebrow { display: block; }
.rec__title {
  margin-top: 8px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 57.6px; letter-spacing: 0.48px; color: var(--brown);
  white-space: nowrap;  /* keep Figma's 2-line break; real Playfair is wider and must not wrap to a 3rd line */
}
.rec__desc {
  margin-top: 8px;
  font-size: 20px; font-weight: 300; line-height: 28px; color: var(--brown);
}

/* Questionnaire — Figma "Forms" card design (single card 542px) */
.quiz {
  position: absolute; left: 518px; top: 290px;
  width: 542px;
}
.quiz__progress {
  display: flex; gap: 8px; padding: 0 0 14px;
}
.quiz__progress .dot {
  width: 28px; height: 4px; border-radius: 2px; background: rgba(111,81,65,.25);
  transition: background .25s;
}
.quiz__progress .dot.is-active { background: var(--brown2); }

.step { display: none; }
.step.is-active { display: block; animation: qfade .28s ease; }
@keyframes qfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Card shell */
.qcard { width: 542px; background: var(--cream); }

/* Dark brown header */
.qcard__head {
  background: var(--brown2); color: var(--cream);
  min-height: 85px; padding: 20px 32px;
}
.qcard__title {
  font-size: 20px; font-weight: 300; line-height: 24px; letter-spacing: 0.4px;
}
.qcard__sub {
  font-size: 12px; font-weight: 300; line-height: 16px; margin-top: 10px;
}

/* Option rows */
.qopts { display: flex; flex-direction: column; }
.qopt {
  display: flex; align-items: center; gap: 45px;
  width: 100%; height: 56px; padding: 0 33px;
  border: 1px solid var(--brown2); border-top: none;
  background: transparent; cursor: pointer;
  font-family: var(--font-body); color: var(--brown2);
  transition: background .15s, color .15s;
}
.qopt__label {
  font-size: 20px; font-weight: 300; line-height: 24px; letter-spacing: -0.2px;
  text-align: left;
}
.qopt:hover { background: rgba(111,81,65,.07); }

/* Square checkbox selector (20×20, 5px radius, 1.5 stroke) */
.qbox {
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 1.5px solid var(--brown2); border-radius: 5px;
  position: relative; transition: background .15s, border-color .15s;
}
.qopt.is-selected .qbox { background: var(--brown2); }
.qopt.is-selected .qbox::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid var(--cream);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qopt.is-selected { background: rgba(111,81,65,.06); }

/* Contact fields (step 5) — same row aesthetic */
.qfields { display: flex; flex-direction: column; }
.qrow {
  display: flex; align-items: center;
  width: 100%; min-height: 56px; padding: 0 33px;
  border: 1px solid var(--brown2); border-top: none;
}
.qrow__label {
  font-size: 20px; font-weight: 300; line-height: 24px; letter-spacing: -0.2px;
  color: var(--brown2); white-space: nowrap; margin-right: 16px;
}
.qrow__input {
  flex: 1; min-width: 0; height: 54px;
  border: none; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 18px; color: var(--brown2);
}
.qrow__input::placeholder { color: rgba(111,81,65,.45); }
.qrow--gdpr {
  align-items: flex-start; gap: 14px; padding: 16px 33px; cursor: pointer;
}
.qgdpr { position: absolute; opacity: 0; width: 0; height: 0; }
.qrow--gdpr .qbox { margin-top: 1px; }
.qgdpr:checked + .qbox { background: var(--brown2); }
.qgdpr:checked + .qbox::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid var(--cream);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qgdpr:focus-visible + .qbox { outline: 2px solid var(--brown); outline-offset: 2px; }
.qrow__gdpr {
  font-size: 12px; font-weight: 300; line-height: 16px;
  letter-spacing: -0.12px; color: var(--brown2);
}

/* Bottom dark brown action bar */
.qbar {
  display: flex; align-items: center; gap: 50px;
  width: 100%; height: 67px; padding: 0 33px;
  background: var(--brown2); color: var(--cream);
  border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 20px; font-weight: 300; letter-spacing: -0.2px;
  transition: opacity .2s;
}
.qbar:hover { opacity: .92; }
.qbar .q-arrow { width: 24px; height: 24px; color: var(--cream); }
.qbar:disabled { opacity: .6; cursor: default; }

/* Subtle back link below the card */
.qback {
  margin-top: 14px; padding: 4px 2px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 300;
  letter-spacing: .3px; color: var(--brown2); transition: opacity .2s;
}
.qback:hover { opacity: .65; }

/* Thank-you */
.qthanks {
  padding: 22px 32px 28px; border: 1px solid var(--brown2); border-top: none;
  background: var(--cream);
  font-size: 18px; font-weight: 300; line-height: 28px; color: var(--brown2);
}

/* ════════════════ FOOTER (3537–4042) ════════════════ */
.footer {
  min-height: 505px; margin-top: 38px; background: var(--dark);
  display: flex; flex-direction: column; align-items: center;
  padding: 41px 0 30px;
}

/* Top block: centered logo + description + social */
.footer__top { display: flex; flex-direction: column; align-items: center; }
.footer__logo { display: inline-block; }
.footer__desc {
  margin-top: 16px; width: 406px;
  font-size: 15px; font-weight: 300; line-height: 21.75px;
  letter-spacing: 0.3px; color: var(--cream); text-align: center;
}
.footer__social { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
.footer__social a { color: var(--cream); transition: opacity .2s; }
.footer__social a:hover { opacity: .65; }
.footer__social .i { width: 22px; height: 22px; }

/* Link columns: clean centered horizontal row */
.footer__cols {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 42px; margin-top: 36px;
}
.fcol { display: flex; flex-direction: column; }
.fcol--contact { min-width: 320px; }
.fcol__title {
  font-size: 15px; font-weight: 300; line-height: 21.75px;
  letter-spacing: 0.3px; color: var(--white); margin-bottom: 16px;
  transition: opacity .2s;
}
a.fcol__title:hover { opacity: .65; }
.fcol ul { display: flex; flex-direction: column; gap: 8px; }
.fcol li {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 300; line-height: 21.75px;
  letter-spacing: 0.3px; color: var(--cream);
}
.fcol li .i { color: var(--cream); }
.fcol li a:hover { opacity: .7; }

/* Copyright on its own centered row at the bottom */
.footer__copy {
  margin-top: 36px; text-align: center;
  font-size: 15px; font-weight: 300; line-height: 21.75px;
  letter-spacing: 0.3px; color: var(--cream);
}

/* ===================================================================
   RESPONSIVE  —  desktop (≥1200) is the source of truth and is
   preserved exactly. Below 1440 the fixed stage is fit-scaled
   (JS sets .stage zoom for 1200–1439); ≤1199 reflows to an
   adaptive tablet/mobile layout.
   =================================================================== */

/* Hamburger + mobile menu are hidden on desktop */
.nav-toggle, .mobile-nav { display: none; }

/* Fit the fixed 1440 desktop into 1200–1439 viewports without h-scroll */
@media (max-width: 1439px) {
  html, body { overflow-x: hidden; }
  body { min-width: 0; }
}

/* ───────────────── TABLET + MOBILE (≤1199) ───────────────── */
@media (max-width: 1199px) {
  .stage { width: 100%; }

  /* anchor offsets so sticky header never covers section tops */
  .hero, .products, .about, .rec, .footer, .anchor-alias { scroll-margin-top: 84px; }

  /* ---- HEADER: sticky bar + hamburger ---- */
  .header {
    position: sticky; top: 0; z-index: 100;
    height: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; background: var(--cream);
    box-shadow: 0 1px 0 rgba(106,89,67,.14);
  }
  .header__logo { position: static; }
  .header .logo-mask { width: 54px; height: 54px; }
  .header__nav, .header__contact { display: none; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 46px; height: 46px; padding: 11px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle__bar {
    display: block; width: 24px; height: 2px; background: var(--brown);
    border-radius: 2px; transition: transform .25s, opacity .2s;
  }
  .header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .header.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 6px 24px 22px;
    background: var(--cream); border-top: 1px solid rgba(106,89,67,.12);
    box-shadow: 0 16px 28px rgba(0,0,0,.14);
  }
  .header.is-open .mobile-nav { display: flex; }
  .mobile-nav a {
    font-family: var(--font-body); font-size: 17px; font-weight: 300;
    letter-spacing: .3px; color: var(--brown);
    padding: 15px 4px; border-bottom: 1px solid rgba(106,89,67,.10);
  }
  .mobile-nav a:active { opacity: .6; }
  .mobile-nav__tel {
    display: flex; align-items: center; gap: 8px; color: var(--brown2);
  }
  .mobile-nav__tel img { width: 18px; height: 18px; }
  .mobile-nav__cta {
    margin-top: 14px; border-bottom: none !important;
    background: var(--brown2); color: var(--cream) !important;
    text-align: center; padding: 16px !important; font-size: 16px !important;
    letter-spacing: .4px;
  }

  /* ---- HERO: stacked ---- */
  .hero { height: auto; display: flex; flex-direction: column; }
  .hero__left {
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 44px 24px 48px;
  }
  .hero__eyebrow, .hero__heading, .hero__desc,
  .hero__cta, .hero__signature { position: static; left: auto; top: auto; right: auto; }
  .hero__heading { font-size: 44px; line-height: 1.13; margin-top: 14px; }
  .hero__desc { margin-top: 18px; }
  .hero__cta { margin-top: 26px; }
  .hero__signature { margin-top: 30px; }
  .hero__image { position: static; width: 100%; height: 340px; }

  /* ---- PRODUCTS ---- */
  .products { height: auto; margin-top: 0; padding: 52px 0 8px; }
  .products__head { position: static; width: auto; max-width: 760px; padding: 0 24px; }
  .products__grid {
    position: static; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 20px; padding: 30px 24px 0;
  }
  .pcard { flex: 1 1 320px; width: 100%; max-width: 420px; height: auto; }
  .pcard__head { position: static; padding: 28px 28px 0; }
  .pcard__img { position: static; width: auto; height: 240px; margin: 22px 28px 18px; }
  .pcard__desc { position: static; text-align: left; padding: 0 28px; top: auto; right: auto; }
  .pcard__cta { position: static; padding: 14px 28px 28px; left: auto; top: auto; }

  /* ---- BOSCH ---- */
  .bosch { height: auto; margin-top: 0; padding: 40px 0 44px; }
  .bosch__head { position: static; width: auto; text-align: center; padding: 0 24px; }
  /* height:auto so a wrapped "partnerként" grows the box instead of overlapping the lead text */
  .bosch__heading {
    margin-left: 0; justify-content: center; flex-wrap: wrap;
    height: auto; row-gap: 4px; line-height: 1.2;
  }
  .bosch__features {
    position: static; height: auto; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 16px 30px; padding: 28px 24px 0;
  }
  .feat { position: static; left: auto !important; }

  /* ---- ABOUT ---- */
  .about { height: auto; margin-top: 0; display: flex; flex-direction: column; }
  .about__img { position: static; width: 100%; height: 320px; order: 0; }
  .about__content {
    position: static; width: auto; order: 1; padding: 44px 24px 0; text-align: center;
  }
  .about__values {
    position: static; order: 2; flex-direction: row; justify-content: center;
    align-items: center; gap: 28px; margin-top: 22px;
  }
  .about__grid {
    position: static; order: 3; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 14px; padding: 32px 24px 48px;
  }
  .vcard { flex: 1 1 240px; width: auto; max-width: 320px; height: auto; min-height: 210px; padding: 30px 22px; }

  /* ---- RECOMMENDATION / QUESTIONNAIRE ---- */
  .rec { min-height: 0; height: auto; margin-top: 0; display: flex; flex-direction: column; }
  /* keep relative so the absolute brand-text stays pinned INSIDE this banner */
  .rec__brand { position: relative; width: 100%; height: 240px; }
  .rec__brandtext { left: 24px; right: auto; bottom: 16px; }
  .rec__content { position: static; width: auto; padding: 44px 24px 0; }
  .rec__title { white-space: normal; }
  .quiz {
    position: static; left: auto; top: auto;
    width: 100%; max-width: 560px; margin: 26px auto 0; padding: 0 24px 48px;
  }
  .qcard { width: 100%; }

  /* ---- FOOTER ---- */
  .footer__cols { flex-wrap: wrap; gap: 30px 48px; padding: 0 24px; }
  .fcol--contact { min-width: 0; }
  .footer__desc { width: auto; max-width: 90%; }
}

/* ───────────────── MOBILE (≤767) ───────────────── */
@media (max-width: 767px) {
  .hero__left { padding: 40px 20px 46px; }
  .hero__heading { font-size: 28px; line-height: 1.16; }
  .hero__desc { font-size: 18px; }
  .hero__image { height: 240px; }

  .products__title { font-size: 28px; line-height: 1.2; }
  .products__desc { font-size: 18px; }
  .pcard { flex: 1 1 100%; max-width: 440px; }

  .bosch__heading { font-size: 24px; }
  .bosch__lead, .bosch__desc { font-size: 17px; line-height: 26px; }

  .about__title { font-size: 28px; }
  .about__desc { font-size: 18px; }
  .vcard { flex: 1 1 100%; max-width: 400px; }

  .rec__title { font-size: 32px; line-height: 1.18; }
  .rec__desc { font-size: 18px; }
  .rec__brand { height: 200px; }

  /* Questionnaire: roomier taps, stacked contact fields */
  .qcard__title { font-size: 18px; }
  .qopt { gap: 20px; padding: 0 20px; height: 58px; }
  .qopt__label { font-size: 18px; }
  .qbar { gap: 22px; padding: 0 20px; font-size: 18px; }

  .qrow { flex-direction: column; align-items: stretch; padding: 12px 20px; }
  .qrow__label { margin: 0 0 6px; font-size: 16px; }
  .qrow__input {
    height: 46px; padding: 0 12px;
    border: 1px solid rgba(111,81,65,.4); border-radius: 4px;
    font-size: 16px;
  }
  .qrow--gdpr { flex-direction: row; align-items: flex-start; }

  /* Footer: single centered column */
  .footer__cols { flex-direction: column; align-items: center; text-align: center; gap: 26px; }
  .fcol { align-items: center; }
  .fcol li { justify-content: center; }
  .footer__desc { font-size: 14px; }
  .footer__copy { padding: 0 24px; }
}

/* ───────────────── SMALL PHONES (≤380) ───────────────── */
@media (max-width: 380px) {
  .hero__heading { font-size: 25px; }
  .products__title { font-size: 25px; }
  .rec__title { font-size: 28px; }
  .about__title { font-size: 25px; }
}