:root {
  --ink: #14151a;
  --muted: #6b6f76;
  --line: #e4e2dd;
  --paper: #fbfaf8;
  --accent: #1f4f45;
  --warn: #a8492c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 680px; }
h1, h2, h3 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 400; letter-spacing: -0.01em; }
a { color: inherit; }

.top { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 20; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { font-family: Georgia, serif; font-size: 21px; text-decoration: none; letter-spacing: 0.02em; }
nav a { margin-left: 26px; text-decoration: none; color: var(--muted); font-size: 14px; }
nav a:hover { color: var(--ink); }

.hero { padding: 74px 0 60px; background: #fff; border-bottom: 1px solid var(--line); }
h1 { font-size: 46px; line-height: 1.12; margin: 0 0 18px; }
h1 em { font-style: italic; color: var(--accent); }
.lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 0 40px; }

.audit-card { border: 1px solid var(--line); background: var(--paper); padding: 30px; }
.audit-head h2 { font-size: 24px; margin: 0 0 8px; }
.audit-head p { color: var(--muted); margin: 0 0 20px; max-width: 640px; font-size: 15px; }
.audit-form { display: flex; gap: 10px; flex-wrap: wrap; }
.audit-form input {
  flex: 1 1 300px; padding: 13px 15px; border: 1px solid var(--line);
  background: #fff; font-size: 16px; font-family: inherit; color: var(--ink);
}
.audit-form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
button {
  padding: 13px 24px; border: 0; background: var(--ink); color: #fff;
  font-size: 15px; font-family: inherit; cursor: pointer; letter-spacing: 0.01em;
}
button:hover { background: var(--accent); }
button[disabled] { opacity: .55; cursor: default; }
.hint { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

.result { scroll-margin-top: 80px; margin-top: 30px; border: 1px solid var(--line); background: #fff; padding: 32px; }
.result h2 { font-size: 26px; margin: 0 0 4px; }
.result .meta { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.scoreline { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 26px; }
.dial { width: 128px; height: 128px; flex: 0 0 128px; position: relative; }
.dial svg { transform: rotate(-90deg); }
.dial .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial .num { font-family: Georgia, serif; font-size: 34px; line-height: 1; }
.dial .of { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.verdict { flex: 1 1 320px; }
.verdict p { margin: 0; font-size: 17px; }
.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 30px; margin-bottom: 26px; }
.bar-row .t { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.bar-row .t span:last-child { color: var(--muted); }
.track { height: 5px; background: var(--line); }
.fill { height: 5px; background: var(--accent); }
.fill.low { background: var(--warn); }

.finding { border-left: 2px solid var(--warn); padding: 4px 0 4px 16px; margin: 0 0 28px; color: var(--ink); font-size: 15px; }
.worst h3 { font-size: 18px; margin: 0 0 14px; }
.worst .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.item { border: 1px solid var(--line); }
.item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--paper); }
.item .b { padding: 12px 14px; }
.item .name { font-size: 14px; margin: 0 0 8px; word-break: break-word; }
.item .sc { font-size: 12px; color: var(--muted); }
.item ul { margin: 8px 0 0; padding-left: 16px; font-size: 13px; color: var(--warn); }
.cta-inline { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta-inline p { margin: 0; color: var(--muted); font-size: 15px; flex: 1 1 260px; }
.cta-inline a { text-decoration: none; }

.strip { padding: 62px 0; }
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; }
.cols3 h3 { font-size: 19px; margin: 0 0 8px; }
.cols3 p { margin: 0; color: var(--muted); font-size: 15px; }

.gallery { padding: 62px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gallery h2, .pricing h2, .contact h2 { font-size: 30px; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 32px; max-width: 640px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.pair { border: 1px solid var(--line); }
.pair .imgs { display: grid; grid-template-columns: 1fr 1fr; }
.pair img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pair .imgs div { position: relative; }
.pair .imgs span { position: absolute; left: 8px; bottom: 8px; background: rgba(20,21,26,.82); color: #fff; font-size: 11px; padding: 3px 8px; letter-spacing: .06em; text-transform: uppercase; }
.pair .cap { padding: 12px 14px; font-size: 14px; color: var(--muted); }

.pricing { padding: 62px 0; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.price { border: 1px solid var(--line); background: #fff; padding: 24px; }
.price.feature { border-color: var(--ink); }
.price h3 { margin: 0 0 12px; font-size: 17px; }
.price .amount { font-family: Georgia, serif; font-size: 27px; margin-bottom: 10px; }
.price p { margin: 0; color: var(--muted); font-size: 14px; }
.note { color: var(--muted); font-size: 14px; margin-top: 20px; }

.contact { scroll-margin-top: 70px; padding: 62px 0 74px; background: #fff; border-top: 1px solid var(--line); }
#leadForm label { display: block; margin-bottom: 16px; font-size: 14px; color: var(--muted); }
#leadForm input, #leadForm textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  border: 1px solid var(--line); font-size: 15px; font-family: inherit; color: var(--ink); background: var(--paper);
}
#leadForm textarea { resize: vertical; }

footer { padding: 30px 0 46px; }
footer p { color: var(--muted); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  h1 { font-size: 34px; }
  .hero { padding: 46px 0 40px; }
  .audit-card, .result { padding: 22px; }
}

/* Before/after slider + scene switcher (2026-08-14). The pair of static thumbnails it
   replaces asked the visitor to compare two pictures themselves; the slider makes the
   comparison the thing they do with their hand. */
.stilus-valto{display:flex;gap:8px;justify-content:center;margin:0 0 22px;flex-wrap:wrap}
.stilus-valto button{border:1px solid #ddd8cf;background:#fff;color:#4a4a4a;padding:8px 16px;
  border-radius:999px;font:inherit;font-size:14px;cursor:pointer;transition:all .15s}
.stilus-valto button:hover{border-color:#b9b2a6}
.stilus-valto button.aktiv{background:#14161a;color:#fff;border-color:#14161a}
.ba-doboz{display:flex;flex-direction:column;gap:10px}
.ba{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:1;
  background:#f4f2ee;touch-action:none;cursor:ew-resize;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The top layer is FULL width and clipped, not resized. Sizing it to a percentage
   scaled the image differently from the one underneath, so the two halves of the
   comparison were no longer the same crop -- a slider that lies about the difference
   it is demonstrating. */
.ba-felso{position:absolute;inset:0;width:100%;clip-path:inset(0 50% 0 0)}
.ba-fogo{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.ba-fogo::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.ba-fogo:focus{outline:2px solid #14161a;outline-offset:2px}

/* Mobile. The samples are the reason a visitor scrolls this far, and on a phone they were
   the reason the page fell apart: at 300px minimum column width plus the wrap padding, a
   narrow screen had nowhere to put them. One column below 700px, and a grid item that is
   allowed to shrink (min-width:0 -- the default `auto` refuses to go under its content). */
@media (max-width: 700px) {
  .gallery .grid { grid-template-columns: 1fr; gap: 20px; }
  .stilus-valto button { padding: 7px 13px; font-size: 13px; }
}
.gallery .grid > * { min-width: 0; }
.ba { max-width: 100%; }

/* The header on a phone. Five nav links plus the wordmark do not fit across 390px, and a
   fixed-height flex row does not wrap -- so the bar simply grew wider than the screen and
   took the whole layout with it. The English page has one link more than the Hungarian,
   which is why only that one was torn (measured 2026-08-14: layout viewport forced from
   390 to 461). */
@media (max-width: 700px) {
  .bar { height: auto; flex-wrap: wrap; gap: 6px 0; padding: 12px 0; }
  .bar nav { display: flex; flex-wrap: wrap; gap: 0 18px; width: 100%; }
  nav a { margin-left: 0; font-size: 13px; }
  .brand { font-size: 19px; }
  h1 { font-size: 30px; }
}

/* FAQ section */
.faq { padding: 56px 0; }
.faq h2 { margin-bottom: 24px; }
.faq details { border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
.faq details:first-of-type { border-top: 1px solid #e5e7eb; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 300; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: #4b5563; line-height: 1.65; }