/* Rendszerbetűk és helyi kép: nincs külső betűkészlet vagy CDN. */
:root {
  color-scheme: light;
  --cream: #f8f4ec;
  --paper: #fcf9f3;
  --ink: #29231f;
  --muted: #675e56;
  --terracotta: #ac4326;
  --line: #dbd1c4;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--cream); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

.container { width: min(100%, 1312px); padding-inline: 32px; margin-inline: auto; }
p { margin: 0 0 18px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -1.2px; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 12px; background: var(--paper); }
.skip-link:focus { top: 12px; }
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 59px; height: 59px; border-radius: 50%; background: var(--terracotta); color: var(--paper); font: 36px/1 var(--serif); }
.brand-name { font: 48px/.95 var(--serif); letter-spacing: -2px; }
.brand-company { display: block; padding-top: 10px; font: 10px/1 system-ui, sans-serif; letter-spacing: 3px; }
nav { display: flex; align-items: center; gap: 36px; font-size: 14px; }
nav a { padding-block: 12px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.nav-demo { color: var(--terracotta); }
.hero { position: relative; isolation: isolate; }
.hero-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding-block: 54px 80px; min-height: 920px; }
/* A szöveg a panel mellé, a kép nyugodtabb részére kerül. */
.hero-copy { padding: 0; width: 100%; max-width: 520px; justify-self: end; text-align: right; }
.hero-copy .accent-rule { margin-left: auto; }
.hero-copy .disclosure { margin-left: auto; max-width: 440px; }
.eyebrow { margin-bottom: 18px; color: var(--terracotta); font-size: 11px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; }
h1 { font-size: clamp(64px, 6.2vw, 90px); line-height: .97; letter-spacing: -5px; }
.accent-rule { display: block; width: 48px; height: 2px; margin-block: 26px; background: var(--terracotta); }
.hero-subtitle { font: clamp(26px, 2.65vw, 38px)/1.15 var(--serif); letter-spacing: -.8px; }
.disclosure { max-width: 490px; font-size: 17px; line-height: 1.6; }
/* A kép dekoráció; minden felirat és tájékoztató valódi HTML. */
.hero-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #f8f4ecb3 0%, #f8f4ec59 42%, transparent 65%); pointer-events: none; }
.hero-scene :is(img, .hero-art) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.demo { align-self: start; margin-top: 22px; padding: 38px 40px; background: rgba(252,249,243,.98); border: 1px solid #fffaf3; border-radius: 12px; box-shadow: 0 16px 48px #49321e1a, 0 2px 8px #49321e0a; scroll-margin-top: 24px; }
.demo h2 { font-size: clamp(28px, 2.8vw, 39px); letter-spacing: -1.2px; max-width: 400px; }
/* A hangbemutató helyi hangfájlt használ, automatikus lejátszás nélkül. */
[hidden] { display: none !important; }
.demo-intro { margin: 20px 0 0; color: var(--muted); font-size: 15px; }
audio { display: block; width: 100%; max-width: 100%; }
.audio-status { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f4eee4; font-size: 14px; }
.demo-description { margin: 16px 0 22px; color: var(--muted); font-size: 13px; text-align: center; }
.transcript { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.transcript summary { padding: 16px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.transcript-content { padding: 4px 0 8px; font-size: 14px; }
.transcript-content strong { display: block; margin-bottom: 4px; color: var(--terracotta); }
.demo-contact { padding-top: 24px; }
.demo-contact h3 { margin-bottom: 12px; font-size: 26px; line-height: 1.2; letter-spacing: -.5px; }
.demo-contact p { font-size: 14px; color: var(--muted); }
.contact-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--terracotta); border-radius: 32px; color: #fff; background: var(--terracotta); font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; transition: background .15s; }
.contact-button:hover { background: #90371e; }
.contact-email { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.section { padding-block: 58px; }
.steps { background: var(--paper); border-block: 1px solid var(--line); }
.steps-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: start; }
.section-intro > p:last-child { margin-bottom: 0; color: var(--muted); }
.section-intro .accent-rule { margin-block: 22px; }
.step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-number { color: var(--terracotta); font: 28px/1 var(--serif); }
.step-list h3 { font-size: 22px; line-height: 1.2; margin: 16px 0 10px; }
.step-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.uses-layout, .privacy-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 100px; }
.uses h2 { margin-bottom: 22px; }
.use-list { list-style: none; margin: 0; padding: 0; }
.use-list li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.use-list li:first-child { padding-top: 0; }
.use-list span { display: block; margin-bottom: 5px; color: var(--ink); font: 25px/1.3 var(--serif); }
.privacy { border-top: 1px solid var(--line); }
.privacy-copy { font-size: 14px; }
.privacy-copy p:last-child { margin-bottom: 0; }
.draft { border-left: 2px solid var(--terracotta); padding-left: 16px; color: var(--muted); }
.footer { display: flex; align-items: center; gap: 36px; padding-block: 28px; border-top: 1px solid var(--line); font-size: 13px; }
.footer-brand { margin-right: auto; font: 34px/1 var(--serif); }
.footer-brand span { display: block; margin-top: 8px; font: 11px/1.4 system-ui, sans-serif; letter-spacing: 1px; }

/* Táblagépen és telefonon a kép nem kerül a hangbemutató mögé. */
@media (max-width: 1000px) {
  .container { padding-inline: 24px; }
  .hero-layout { grid-template-columns: 1fr; gap: 0; padding-block: 42px 44px; min-height: 0; }
  .hero-copy { padding: 0; max-width: 700px; justify-self: start; text-align: left; }
  .hero-copy .accent-rule, .hero-copy .disclosure { margin-left: 0; }
  .hero-copy .disclosure { max-width: none; }
  .hero-scene::after { display: none; }
  h1 { font-size: 78px; }
  .hero-subtitle { font-size: 33px; }
  .disclosure { max-width: none; }
  .hero-scene { position: relative; inset: auto; z-index: 0; height: 350px; margin-block: 18px 28px; border-radius: 10px; }
  .hero-scene :is(img, .hero-art) { position: absolute; width: 160%; max-width: none; height: auto; left: -7%; bottom: -8%; }
  .demo { margin: 0; width: 100%; }
  .demo h2 { max-width: 580px; }
  .steps-layout { grid-template-columns: 1fr; gap: 32px; }
  .uses-layout, .privacy-layout { gap: 40px; grid-template-columns: 1fr 1.3fr; }
}
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .header-inner { min-height: 90px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 43px; height: 43px; font-size: 28px; }
  .brand-name { font-size: 37px; }
  .brand-company { font-size: 8px; letter-spacing: 2px; padding-top: 8px; }
  nav { font-size: 13px; gap: 0; }
  nav a:first-child { display: none; }
  .hero-layout { padding-top: 32px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.6px; }
  h1 { font-size: clamp(58px, 14vw, 78px); letter-spacing: -3px; }
  .hero-subtitle { font-size: 29px; line-height: 1.2; }
  .desktop-break { display: none; }
  .accent-rule { margin-block: 22px; }
  .disclosure { font-size: 16px; }
  .hero-scene { height: 250px; margin-block: 8px 24px; }
  .demo { padding: 27px 20px; }
  .demo h2 { font-size: 31px; letter-spacing: -.8px; }
  .section { padding-block: 38px; }
  .step-list { grid-template-columns: 1fr; gap: 24px; }
  .step-list li { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; }
  .step-number { grid-row: span 2; padding-top: 2px; }
  .step-list h3 { margin: 0 0 8px; }
  .uses-layout, .privacy-layout { grid-template-columns: 1fr; gap: 28px; }
  .footer { flex-wrap: wrap; gap: 16px 28px; padding-block: 24px; }
  .footer-brand { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .contact-button { transition: none; } }


.lead-section { background: #f0e8dc; border-block: 1px solid var(--line); scroll-margin-top: 24px; }
.lead-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.lead-intro { padding-top: 26px; }
.lead-intro > p:not(.eyebrow) { color: var(--muted); max-width: 390px; }
.lead-card { background: var(--paper); border: 1px solid #fff; border-radius: 18px; padding: 34px; box-shadow: 0 14px 40px #49321e0b; }
.lead-card-heading { margin-bottom: 26px; }
.lead-card-heading h3 { font-size: 29px; line-height: 1.2; }
.lead-card-heading > span { display: block; font-size: 12px; color: var(--muted); margin-top: 9px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.form-field { min-width: 0; }
.form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.form-field label > span { font-size: 10px; font-weight: 400; color: var(--muted); display: block; }
.form-field input, .form-field textarea { display: block; width: 100%; min-width: 0; border: 1px solid #d7c8b6; border-radius: 8px; background: #fffdf9; color: var(--ink); padding: 12px 13px; font: 16px/1.5 system-ui,sans-serif; }
.form-field input { min-height: 50px; }
.form-field textarea { resize: vertical; min-height: 115px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #897c6f; font-size: 13px; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--terracotta); outline: 2px solid #ac432624; outline-offset: 2px; }
.field-help { font-size: 11px; color: var(--muted); margin: 10px 0 22px; }
.form-privacy { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 20px 0; }
.lead-submit { cursor: pointer; font: 600 15px/1.4 system-ui,sans-serif; gap: 16px; }
.lead-submit svg { width: 22px; height: 22px; }
.lead-submit:disabled { opacity: .65; cursor: wait; }
.contact-detail { display: flex; gap: 14px; align-items: center; margin: 30px 0; }
.contact-monogram { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--terracotta); border: 1px solid #cbb598; font: 29px Georgia,serif; flex-shrink: 0; }
.contact-detail strong { display: block; font-size: 13px; font-weight: 600; }
.contact-detail div > span { display: block; font-size: 12px; color: var(--muted); max-width: 260px; }
.direct-contact { font-size: 13px; }.direct-contact a { color: var(--ink); }
.lead-status { padding: 14px; border: 1px solid #d1a68e; border-radius: 8px; font-size: 13px; margin: 16px 0 0; background: #f7ede3; }
.lead-success { padding: 30px 0; text-align: center; }
.lead-success h3 { font-size: 30px; margin: 18px 0 12px; }
.lead-success p { color: var(--muted); }
.success-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #eee2d1; color: var(--terracotta); font-size: 27px; margin: auto; }
@media (max-width: 1000px) { .lead-layout { gap: 32px; grid-template-columns: 1fr; }.lead-intro { padding: 0; }.lead-intro > p:not(.eyebrow) { max-width: 620px; } }
@media (max-width: 600px) { .lead-card { padding: 25px 20px; }.field-grid { grid-template-columns: 1fr; gap: 16px; }.form-field label > span { display: inline; margin-left: 5px; }.lead-intro h2 { font-size: 34px; }.lead-card-heading h3 { font-size: 27px; } }

@media(min-width:601px){.field-grid label{min-height:38px}}

.brand-mark > svg { display: block; width: 100%; height: 100%; }

/* Percly dialogue mark: paired speech shapes, without a circular badge. */
.brand-mark { background: transparent; color: var(--terracotta); border-radius: 0; }

/* Keep the brand and Hungarian suffix on the same line. */
.brand-no-wrap { white-space: nowrap; }

.legal-back { padding-top: 32px; }
.legal-page h1 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.15; letter-spacing: -1.2px; }

/* Approved conversion layout and directional hero fade. */

.hero-copy { text-align:left; justify-self:start; max-width:610px; padding-top:24px; }
.hero-copy h1 {font-size:clamp(60px,5.3vw,78px);letter-spacing:-3.7px;line-height:1.02;} .hero-copy h1 em{font-style:normal;color:var(--terracotta)}
.hero-copy .accent-rule,.hero-copy .disclosure{margin-left:0}.hero-subtitle{font:20px/1.6 system-ui,sans-serif;letter-spacing:0;max-width:505px}.hero-copy .disclosure{font-size:15px;max-width:470px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}.hero-actions .contact-button{width:auto;padding-inline:26px}.listen-link{font-size:14px}.listen-link span{white-space:nowrap;color:var(--muted)}.hero-small{font-size:12px;color:var(--muted);margin-top:12px}
.header-cta{background:var(--terracotta);color:var(--paper);border-radius:30px;padding:12px 22px}.hero-scene::after{background:linear-gradient(to bottom,#f8f4eced 0%,#f8f4ecb0 47%,transparent 85%)}
.process-section{background:var(--paper)}.process-heading{max-width:690px;margin-bottom:42px}.process-heading h2{margin-bottom:18px}.process-heading>p:last-child{color:var(--muted)}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.process-list{list-style:none;margin:0;padding:0}.process-list li{display:flex;gap:24px;padding:24px 0;border-top:1px solid var(--line)}.process-list li>span{font:24px Georgia;color:var(--terracotta);padding-top:3px}.process-list h3{font-size:29px;margin-bottom:12px}.process-list p{color:var(--muted);max-width:450px;margin:0}
.summary-card{background:#f4ece0;border:1px solid #dfd1be;border-radius:18px;padding:30px;box-shadow:0 12px 28px #49321f08}.summary-top{display:flex;justify-content:space-between;gap:14px;align-items:start}.summary-top .eyebrow{font-size:9px;max-width:230px}.sample-tag{font-size:9px;letter-spacing:1.5px;border:1px solid #c9b69f;border-radius:20px;padding:3px 9px}.summary-card h3{font-size:32px}.summary-caption{font-size:12px;color:var(--muted);margin-top:6px}.summary-card dl{margin:24px 0}.summary-card dl>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.summary-card dt{color:var(--muted)}.summary-card dd{margin:0;text-align:right}.summary-next{background:var(--paper);padding:18px;border-radius:10px;border-left:3px solid var(--terracotta)}.summary-next span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--terracotta);margin-bottom:6px}.summary-next strong{font-weight:550}.summary-next p{margin:5px 0 0;font-size:13px}.sample-note{font-size:11px;color:var(--muted);margin:16px 0 0}.consultation-points{padding-left:20px;margin:24px 0}.consultation-points li{padding:5px 0}.response-note{font-size:14px;color:var(--muted)}
@media(max-width:1000px){.hero-copy{order:0;padding-top:0;margin-bottom:30px}.demo{order:1}.hero-scene{order:2;margin-top:28px}.process-grid{gap:32px}.hero-copy h1{font-size:72px}.hero-subtitle{max-width:640px}}
@media(max-width:600px){.hero-copy h1{font-size:51px;letter-spacing:-2.5px}.hero-subtitle{font-size:18px;line-height:1.55}.hero-actions{flex-direction:column;align-items:stretch;gap:15px}.listen-link{text-align:center}.hero-small{text-align:center}.hero-copy .disclosure{font-size:14px}.header-cta{font-size:12px;padding:10px 14px}nav a.header-cta{display:block}.process-grid{grid-template-columns:1fr;gap:24px}.process-list h3{font-size:25px}.summary-card{padding:22px}.summary-card dl>div{font-size:13px}.summary-card h3{font-size:29px}.process-heading{margin-bottom:24px}}

/* Directional fade: keep the image in the opening hero. */
@media(min-width:1001px){
 .hero-scene .hero-art{position:absolute;width:100%;height:auto;top:-120px;left:0;transform:none}
 .hero-scene::after{background:linear-gradient(180deg,rgba(248,244,236,.92) 0%,rgba(248,244,236,.78) 32%,rgba(248,244,236,.15) 69%,var(--cream) 100%),linear-gradient(90deg,rgba(248,244,236,.3),transparent 52%)}
}
@media(max-width:1000px){
 .hero-layout{position:relative;isolation:isolate}
 .hero-copy{position:relative;z-index:1}
 .hero-scene{position:absolute;inset:0 0 auto;height:680px;margin:0;border-radius:0;z-index:-1;pointer-events:none}
 .hero-scene .hero-art{width:1250px;height:auto;max-width:none;left:auto;right:-180px;top:-160px;bottom:auto}
 .hero-scene::after{display:block;background:linear-gradient(90deg,var(--cream) 0%,rgba(248,244,236,.94) 30%,rgba(248,244,236,.4) 80%),linear-gradient(180deg,rgba(248,244,236,.3) 45%,var(--cream) 100%)}
 .demo{position:relative;z-index:1}
}
@media(max-width:600px){
 .hero-scene{height:640px}
 .hero-scene .hero-art{width:1020px;left:-25px;right:auto;top:-80px}
 .hero-scene::after{background:linear-gradient(90deg,rgba(248,244,236,.98) 0%,rgba(248,244,236,.89) 40%,rgba(248,244,236,.46) 100%),linear-gradient(180deg,rgba(248,244,236,.65) 0%,transparent 45%,var(--cream) 98%)}
}