/* ============ TOKENS ============ */
:root{
  --brand:hsl(22 70% 39%); --brand-hover:hsl(22 70% 32%); --brand-strong:hsl(22 78% 23%);
  --brand-soft:hsl(22 70% 94%); --brand-softer:hsl(22 60% 97%); --brand-border:hsl(22 60% 86%); --field-border:hsl(22 40% 58%);
  --ink:hsl(22 28% 13%); --ink-soft:hsl(22 14% 32%); --ink-muted:hsl(22 10% 42%);
  --surface:#ffffff; --bg:hsl(22 30% 99%); --dark:hsl(22 32% 10%); --dark2:hsl(22 30% 15%); --on-dark-soft:hsl(22 18% 78%);
  --hero-bg:hsl(22 30% 99%); --hero-ink:hsl(22 28% 13%); --hero-soft:hsl(22 14% 32%); --hero-border:hsl(22 60% 86%); --hero-card:#ffffff;
  --font-head:'Bodoni Moda',system-ui,-apple-system,sans-serif; --font-body:'Jost',system-ui,sans-serif;
  --radius:0px; --btn-radius:0px; --h-weight:800;
  /* Fluid type scale (Utopia-módszer, 360→1240px viewport) */
  --step--1:clamp(.875rem,.85rem + .11vw,.9375rem);
  --step-0:clamp(1rem,.97rem + .23vw,1.125rem);
  --step-1:clamp(1.17rem,1.11rem + .34vw,1.36rem);
  --step-2:clamp(1.38rem,1.27rem + .52vw,1.66rem);
  --step-3:clamp(1.62rem,1.45rem + .76vw,2.03rem);
  --step-4:clamp(1.91rem,1.66rem + 1.1vw,2.49rem);
  --step-5:clamp(2.24rem,1.89rem + 1.57vw,3.1rem);
  --step-6:clamp(2.6rem,2.1rem + 2.4vw,4rem);
  --space-s:clamp(1rem,.95rem + .5vw,1.25rem);
  --space-m:clamp(1.5rem,1.35rem + .8vw,2rem);
  --space-l:clamp(2.5rem,2.1rem + 1.8vw,3.75rem);
  --space-xl:clamp(2.75rem,2.3rem + 2vw,4.25rem);
  --shadow-s:0 1px 2px rgb(0 0 0 / .05),0 2px 8px rgb(0 0 0 / .04);
  --shadow-m:0 2px 6px rgb(0 0 0 / .05),0 12px 32px rgb(0 0 0 / .08);
  color-scheme: light;
}
/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--h-weight);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--step-6)}
h2{font-size:var(--step-4);margin-bottom:.5em}
h3{font-size:var(--step-1);line-height:1.3}
p{text-wrap:pretty}
a{color:var(--brand)}
/* Törzsszöveg-linkek: aláhúzás a szín MELLÉ (WCAG 1.4.1) — csak folyószövegben, nav/kártya/gomb nem */
.prose a,.faq-item .answer a,.agitation a,.audience-fit a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:from-font}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
/* Skip link (WCAG 2.4.1 Bypass Blocks): képernyőn kívül, :focus-ra láthatóvá válik */
.skip-link{position:absolute;left:1rem;top:.75rem;z-index:100;transform:translateY(-160%);background:var(--brand);color:#fff;padding:.65rem 1.1rem;border-radius:8px;font-weight:600;font-size:var(--step--1);text-decoration:none;box-shadow:var(--shadow-m);transition:transform .16s ease}
.skip-link:focus{transform:none}
.container{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:46rem}
section{padding-block:var(--space-xl)}
.section-head{max-width:46rem;margin-bottom:var(--space-l)}
.section-head p{font-size:var(--step-1);color:var(--ink-soft)}
.section-head.center{margin-inline:auto;text-align:center}
.faq-list,.guarantee .narrow{margin-inline:auto}
.kicker{display:inline-block;font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.75rem}
/* ============ GOMBOK ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.82em 1.55em;border-radius:var(--btn-radius);font-family:var(--font-body);font-size:var(--step-0);font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;min-height:44px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.btn-ghost:hover{opacity:1}
.btn-lg{padding:.92em 1.8em;font-size:var(--step-1)}
.microcopy{font-size:var(--step--1);color:var(--ink-muted);margin-top:.75rem}
/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-color:var(--brand-border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem}
.logo{font-family:var(--font-head);font-weight:var(--h-weight);font-size:var(--step-1);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-header .btn{padding:.38em .9em;min-height:32px;font-size:var(--step--1)}
/* ============ HERO ============ */
.hero{position:relative;background:var(--hero-bg);color:var(--hero-ink);overflow:clip;padding-block:var(--space-xl)}
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 22%,transparent),transparent 65%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:-30% auto auto -15%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%);pointer-events:none}
.hero .container{position:relative;display:grid;gap:var(--space-l);max-width:62rem;text-align:center;justify-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);font-weight:600;padding:.45em 1.1em;border-radius:999px;border:1px solid var(--hero-border);background:var(--hero-card);color:var(--hero-ink)}
.hero-badge svg{width:1.1em;height:1.1em;color:var(--brand)}
.hero p.sub{font-size:var(--step-2);line-height:1.4;color:var(--hero-soft);max-width:42rem;text-wrap:balance}
.hero p.body{font-size:var(--step-0);color:var(--hero-soft);max-width:38rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero .microcopy{color:var(--hero-soft);margin-top:-.5rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);justify-content:center;padding-top:var(--space-m);border-top:1px solid var(--hero-border);width:100%}
.hero-stats div{text-align:center}
.hero-stats strong{display:block;font-family:var(--font-head);font-size:var(--step-3);color:var(--hero-ink)}
.hero-stats span{font-size:var(--step--1);color:var(--hero-soft)}
/* hero képpel: kétoszlopos, balra zárt szöveg */
.hero .container.has-media{max-width:72rem;text-align:left;justify-items:start;grid-template-columns:1fr;align-items:center}
@media (min-width:56rem){.hero .container.has-media{grid-template-columns:1.1fr 1fr}}
.hero .has-media h1{font-size:var(--step-5)}
.hero .has-media .hero-ctas{justify-content:flex-start}
.hero .has-media .hero-stats{justify-content:flex-start}
.hero .has-media .hero-stats div{text-align:left}
.hero-media{width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-m)}
.hero-media img{width:100%;height:100%;object-fit:cover}
@media (min-width:56rem){.hero-media{grid-row:1/span 6;grid-column:2}}
/* ============ PROBLÉMA ============ */
.problem{background:var(--surface)}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-s)}
.pain-card{background:var(--bg);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m)}
.pain-card h3{margin-bottom:.5rem}
.pain-card p{color:var(--ink-soft);font-size:var(--step--1)}
.agitation{margin-top:var(--space-l);padding:var(--space-m);border-inline-start:4px solid var(--brand);background:var(--brand-softer);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--step-1);color:var(--ink-soft);max-width:46rem}
/* ============ MEGOLDÁS ============ */
.solution{background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-s);counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);box-shadow:var(--shadow-s)}
.step::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--font-head);font-weight:700;margin-bottom:1rem}
.step h3{margin-bottom:.5rem}
.step p{color:var(--ink-soft);font-size:var(--step--1)}
/* ============ ELŐNYÖK (bento) ============ */
.benefits{background:var(--surface)}
.bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-s)}
.bento-card{background:var(--bg);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);transition:transform .2s ease,box-shadow .2s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.bento-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}}
.bento-card .icon{display:inline-flex;width:2.75rem;height:2.75rem;padding:.6rem;border-radius:calc(var(--radius)/1.6);background:var(--brand-soft);color:var(--brand-strong);margin-bottom:1rem}
.bento-card .icon svg{width:100%;height:100%}
.bento-card .card-media{display:block;aspect-ratio:16/10;border-radius:calc(var(--radius)/1.6);overflow:hidden;margin-bottom:1rem;border:1px solid var(--brand-border)}
.bento-card .card-media img{width:100%;height:100%;object-fit:var(--card-fit,cover);object-position:top}
.bento-card h3{margin-bottom:.4rem}
.bento-card p{color:var(--ink-soft);font-size:var(--step--1)}
/* ============ BIZONYÍTÉK ============ */
.proof{background:var(--dark);color:#fff}
.proof .kicker{color:color-mix(in srgb,var(--brand) 55%,#fff)}
.proof .section-head p{color:var(--on-dark-soft)}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--space-s)}
.testimonial{background:var(--dark2);border:1px solid rgb(255 255 255 / .1);border-radius:var(--radius);padding:var(--space-m);display:flex;flex-direction:column;gap:1rem}
.testimonial .stars{display:flex;gap:.2rem;color:#fbbf24}
.testimonial .stars svg{width:1.1rem;height:1.1rem;fill:currentColor}
.testimonial blockquote{font-size:var(--step-0);line-height:1.55;flex:1}
.testimonial footer{font-size:var(--step--1);color:var(--on-dark-soft)}
.testimonial footer strong{color:#fff;display:block}
.proof-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,4rem);justify-content:center;margin-top:var(--space-l);padding-top:var(--space-l);border-top:1px solid rgb(255 255 255 / .12)}
.proof-stats strong{display:block;font-family:var(--font-head);font-size:var(--step-4);background:linear-gradient(100deg,#fff,color-mix(in srgb,var(--brand) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-stats span{font-size:var(--step--1);color:var(--on-dark-soft)}
.logo-row{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:center;margin-top:var(--space-l);opacity:.7}
.logo-row span{font-family:var(--font-head);font-weight:600;font-size:var(--step-0);letter-spacing:.03em}
/* ============ AJÁNLAT ============ */
.offer{background:var(--bg)}
.offer-grid{display:grid;gap:var(--space-l);align-items:start}
@media (min-width:56rem){.offer-grid{grid-template-columns:1.2fr 1fr}}
.includes{list-style:none;padding:0;display:grid;gap:.9rem;margin-top:var(--space-m)}
.includes li{display:flex;gap:.75rem;align-items:flex-start}
.includes li svg{width:1.4rem;height:1.4rem;flex-shrink:0;color:var(--brand);margin-top:.2rem}
.audience-fit{margin-top:var(--space-m);font-size:var(--step--1);color:var(--ink-soft);padding:var(--space-s);background:var(--brand-softer);border-radius:var(--radius)}
.offer-card{position:sticky;top:5.5rem;background:var(--surface);border:2px solid var(--brand);border-radius:var(--radius);padding:var(--space-m);box-shadow:var(--shadow-m);text-align:center}
.offer-card .price{font-family:var(--font-head);font-size:var(--step-3);margin-block:.5rem 1rem}
.offer-card .urgency{display:inline-block;font-size:var(--step--1);font-weight:600;color:var(--brand-strong);background:var(--brand-soft);padding:.4em 1em;border-radius:999px;margin-bottom:1rem}
.offer-card .btn{width:100%}
/* ============ TERMÉKEK (kiszerelés-rács) ============ */
.products{background:var(--surface)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:var(--space-s);align-items:stretch}
.product-card{position:relative;display:flex;flex-direction:column;gap:.45rem;background:var(--bg);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);transition:transform .2s ease,box-shadow .2s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}}
.product-card.featured{border-color:var(--brand);border-width:2px;box-shadow:var(--shadow-m)}
.product-card .pc-badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:var(--step--1);font-weight:700;letter-spacing:.02em;color:#fff;background:var(--brand);padding:.3em 1em;border-radius:999px}
.product-card h3{margin-top:.2rem}
.product-card .format{font-size:var(--step--1);color:var(--ink-muted);font-weight:600}
.product-card .desc{font-size:var(--step--1);color:var(--ink-soft);flex:1}
.product-card .prices{margin-top:.6rem;display:flex;flex-direction:column;gap:.15rem}
.product-card .price-consumer{font-size:var(--step--1);color:var(--ink-muted);text-decoration:line-through}
.product-card .price-member{font-family:var(--font-head);font-size:var(--step-2);color:var(--ink);line-height:1.1}
.product-card .price-member small{display:block;margin-top:.15rem;font-family:var(--font-body);font-size:var(--step--1);font-weight:600;color:var(--brand);letter-spacing:.02em}
.product-card .pv{font-size:var(--step--1);color:var(--ink-muted)}
.product-card .btn{margin-top:.8rem;width:100%}
.product-disclaimer{margin-top:var(--space-l);font-size:var(--step--1);color:var(--ink-muted);max-width:48rem;line-height:1.6}
/* ============ GARANCIA ============ */
.guarantee{background:var(--surface);padding-block:var(--space-l)}
.guarantee-box{display:flex;gap:var(--space-m);align-items:flex-start;background:var(--brand-softer);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m)}
.guarantee-box .icon{flex-shrink:0;width:3.25rem;height:3.25rem;padding:.7rem;border-radius:50%;background:var(--brand);color:#fff}
.guarantee-box .icon svg{width:100%;height:100%}
.guarantee-box p{color:var(--ink-soft)}
/* ============ GYIK ============ */
.faq{background:var(--bg)}
.faq-list{max-width:46rem;display:grid;gap:.75rem}
.faq-item{background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--radius);overflow:hidden}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem;font-weight:600;font-size:var(--step-0);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--brand);transition:rotate .2s ease;flex-shrink:0}
.faq-item[open] summary::after{rotate:45deg}
.faq-item .answer{padding:0 1.4rem 1.25rem;color:var(--ink-soft);font-size:var(--step--1);line-height:1.7}
/* ============ ZÁRÓ CTA ============ */
.final-cta{background:linear-gradient(135deg,var(--brand-strong),var(--brand));color:#fff;text-align:center}
.final-cta .container{max-width:46rem;display:grid;gap:var(--space-m);justify-items:center}
.final-cta p{font-size:var(--step-1);opacity:.92;text-wrap:balance}
.final-cta .btn-primary{background:#fff;color:var(--brand-strong)}
.final-cta .btn-primary:hover{background:var(--brand-softer)}
.final-cta .microcopy{color:#fff;opacity:.8}
.contact-line{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;font-size:var(--step--1);opacity:.9}
.contact-line a{color:#fff;font-weight:600}
/* ============ FOOTER ============ */
.site-footer{background:radial-gradient(100% 130% at 90% 0%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 55%),linear-gradient(180deg,var(--dark2),var(--dark) 72%);color:var(--on-dark-soft);padding-block:var(--space-l);font-size:var(--step--1)}
.site-footer .container{display:grid;gap:var(--space-s)}
.site-footer .logo{color:#fff}
.site-footer a{color:var(--on-dark-soft)}
.site-footer .legal{padding-top:var(--space-s);border-top:1px solid rgb(255 255 255 / .1);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
/* ============ STICKY MOBIL CTA ============ */
.sticky-cta{position:fixed;inset:auto 0 0;z-index:60;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--brand-border);transform:translateY(110%);transition:transform .25s ease}
.sticky-cta.visible{transform:none}
.sticky-cta .btn{width:100%}
@media (min-width:48rem){.sticky-cta{display:none}}
/* ============ REVEAL ANIMÁCIÓ ============ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;translate:0 24px}
  .reveal.in{opacity:1;translate:0 0;transition:opacity .6s ease,translate .6s ease}
  @supports (animation-timeline:view()){
    .reveal{opacity:1;translate:none;animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}
@media print{.site-header,.sticky-cta{display:none}}
/* ============ WEBOLDAL-KIEGÉSZÍTÉSEK ============ */
/* — navigáció — */
.site-header nav{display:flex;align-items:center;gap:1.5rem}
.nav-links{display:flex;gap:1.4rem;list-style:none;padding:0;margin:0}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:var(--step--1);font-weight:600;padding:.4rem 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current=page]{color:var(--brand);border-bottom-color:var(--brand)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;color:var(--ink)}
.nav-toggle svg{width:1.6rem;height:1.6rem}
/* mobil telefon-ikon (a hamburger előtt) — asztalon rejtve */
.nav-phone{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--brand);text-decoration:none}
.nav-phone svg{width:1.5rem;height:1.5rem}
@media (max-width:52rem){
  .nav-toggle{display:block}
  .nav-phone{display:inline-flex}
  .site-header nav{gap:.35rem}
  .site-header .btn{display:none}
  .nav-links{position:absolute;inset:100% 0 auto;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--brand-border);padding:.5rem 1.25rem 1rem;display:none;box-shadow:var(--shadow-m)}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:.7rem 0;font-size:var(--step-0)}
}
/* — oldal-hero (kisebb, aloldalakra) — */
/* — ajánlatkérő űrlap (quote_form blokk) — */
.page-hero .ph-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:56rem){.page-hero .ph-grid{grid-template-columns:1.15fr .85fr}}
.page-hero .ph-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--brand-border)}
/* prose listák: levegős tételek, márka-színű marker (ne folyjon egybe a felsorolás) */
.prose ul,.prose ol{margin-block:.75rem 1.5rem;padding-left:1.5rem;display:grid;gap:.65rem}
.prose li{padding-left:.3rem;line-height:1.6}
.prose li::marker{color:var(--brand);font-weight:700}
/* prose táblázatok: egységes formázás (keret, fejléc-sáv, zebra, mobil-görgetés) */
.prose table{width:100%;border-collapse:collapse;margin-block:1.5rem;font-size:.95rem;display:block;overflow-x:auto}
.prose table th,.prose table td{border:1px solid var(--brand-border);padding:.6em .85em;text-align:left;vertical-align:top;min-width:7rem}
.prose table th{background:var(--brand-soft);font-weight:700;color:var(--ink)}
.prose table tbody tr:nth-child(even){background:var(--bg)}
.prose table caption{caption-side:bottom;font-size:.85rem;color:var(--ink-muted);padding-top:.5rem;text-align:left}
.quote-form{display:grid;gap:var(--space-m);max-width:46rem;margin-inline:auto}
.quote-form fieldset{border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);display:grid;gap:.75rem;background:var(--surface)}
.quote-form legend{font-weight:700;padding-inline:.5em;font-family:var(--font-head)}
.quote-form label{font-size:var(--step--1);font-weight:600;display:block;margin-bottom:.3rem}
.quote-form .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.5rem .75rem}
.quote-form label.opt{display:flex;align-items:flex-start;gap:.55rem;font-weight:500;margin:0;padding:.6em .75em;border:1px solid var(--field-border);border-radius:calc(var(--radius)/1.6);cursor:pointer;background:var(--bg)}
.quote-form label.opt:has(:checked){border-color:var(--brand);background:var(--brand-soft)}
.quote-form label.opt input{margin-top:.2em;accent-color:var(--brand)}
.quote-form input[type=text],.quote-form input[type=email],.quote-form input[type=tel],.quote-form textarea{width:100%;padding:.7em .9em;border:1px solid var(--field-border);border-radius:calc(var(--radius)/1.6);font:inherit;background:var(--bg)}
.quote-form input:focus-visible,.quote-form textarea:focus-visible,.quote-form label.opt:focus-within{outline:2px solid var(--brand);outline-offset:2px}
/* többlépéses mód (site.js kapcsolja be): 1 kérdés/képernyő + endowed progress-sáv */
.quote-form.qf-js fieldset{display:none}
.quote-form.qf-js fieldset.active{display:grid}
.quote-form .qf-final{display:grid;gap:.9rem}
.quote-form.qf-js .qf-final{display:none}
.quote-form.qf-js .qf-final.active{display:grid}
.qf-progress{height:6px;border-radius:999px;background:var(--brand-soft);overflow:hidden}
.qf-progress span{display:block;height:100%;width:15%;background:var(--brand);border-radius:999px;transition:width .35s ease}
.qf-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.qf-nav .qf-back[hidden]{visibility:hidden;display:inline-flex}
.form-error{background:#fdecec;border:1px solid #e5b5b5;color:#8a1f2b;border-radius:calc(var(--radius)/1.6);padding:.8em 1em;font-weight:600}
.quote-form .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1);font-weight:400}
.quote-form .consent input{margin-top:.25em;accent-color:var(--brand)}
.quote-form .btn{justify-self:start}
.qf-grid2{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* — kép-logó + pecsét (opcionális, site.logo_image / site.stamp_image) — */
.logo{display:inline-flex;align-items:center;gap:.65rem}
.logo .logo-mark{height:2.4rem;width:auto;border-radius:50%}
.site-footer .logo .logo-mark{height:2rem}
/* wordmark akcent (site.logo_html): a szó egy része a márkaszínben */
.logo .wm-accent{color:var(--brand)}
.site-footer .logo .wm-accent{color:inherit}
/* KÉTOSZLOPOS HERO + elem-stack (hero.elements): a CTA a HAJTÁS FÖLÉ kerül (bal lead),
   a jobb oszlop kitölti a teret az elem-stackkel („minden jó szöveg elemekből áll"). */
.hero-split{display:grid;gap:2rem}
.hero-lead .hero-ctas{margin-top:1.6rem}
@media (min-width:64rem){
  .hero-split{grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .hero-split > *{min-width:0}
  .hero-lead h1{overflow-wrap:break-word}
  .hero-aside{align-self:center}
}
.hero-aside .body{margin:0 0 1.6rem}
.hero-elements{list-style:none;margin:0;padding:0;counter-reset:heroel;width:100%}
.hero-elements li{counter-increment:heroel;display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;row-gap:.2rem;align-items:baseline;padding:.9rem 0;border-top:1px solid var(--brand-border)}
.hero-elements li:last-child{border-bottom:1px solid var(--brand-border)}
.hero-elements li::before{content:counter(heroel,decimal-leading-zero);grid-row:span 2;font-family:var(--font-head);font-weight:700;color:var(--brand);font-size:1.6rem;line-height:1}
.hero-elements .he-label{font-weight:700;align-self:center}
.hero-elements .he-desc{grid-column:2;color:var(--ink-muted);font-size:.92rem;line-height:1.35}
.hero .container{position:relative}
.hero-stamp{position:absolute;right:.75rem;bottom:.5rem;width:clamp(5.25rem,8.5vw,7rem);aspect-ratio:1;border-radius:50%;object-fit:cover;transform:rotate(-9deg);box-shadow:0 6px 20px rgb(0 0 0/.22);background:#fff}
@media (max-width:820px){.hero-stamp{display:none}}
.page-hero{background:var(--hero-bg);color:var(--hero-ink);padding-block:var(--space-l);position:relative;overflow:clip}
.page-hero::before{content:"";position:absolute;inset:auto -10% -60% auto;width:45%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 16%,transparent),transparent 65%);pointer-events:none}
.page-hero .container{position:relative;display:grid;gap:var(--space-s);max-width:52rem}
.page-hero h1{font-size:var(--step-5)}
.page-hero p.sub{font-size:var(--step-1);color:var(--hero-soft);max-width:42rem}
.page-hero .hero-ctas{justify-content:flex-start}
.weight-primary .page-hero{min-height:clamp(360px,52vh,620px)}
.weight-primary main>section:not(.page-hero){padding-block:clamp(4.5rem,8vw,8rem)}
.weight-support .page-hero{min-height:auto;padding-block:var(--space-m)}
.weight-support main>section:not(.page-hero){padding-block:clamp(2.5rem,4vw,4rem)}
/* — SŰRŰ RITMUS (site.density:"compact") — a display-témák (statement, editorial) extrém
   whitespace-e nem minden ügyfélhez való: kis tartalmú névjegy-oldalon üresnek hat.
   Ez a kapcsoló a függőleges térközt felezi és a hero fix magasságát elengedi.
   ADDITÍV: density nélkül minden változatlan. — */
.density-compact .weight-primary .page-hero{min-height:auto;padding-block:clamp(2.5rem,4vw,4rem)}
.density-compact .weight-primary main>section:not(.page-hero){padding-block:clamp(2rem,3.2vw,3.25rem)}
.density-compact .weight-support main>section:not(.page-hero){padding-block:clamp(1.5rem,2.4vw,2.5rem)}
.density-compact .ti-grid{gap:var(--space-m)}
/* KÉP-PANEL (compact): a kis felbontású kép nem nőhet, ezért nem a képet nagyítjuk,
   hanem KERETET adunk neki — halvány, paddingolt panel, a kép középen. Így a média-
   oszlop kitölti a helyét anélkül, hogy a kép pixelesedne, és mindhárom könyvnél
   ugyanott áll (eddig balra zártan, egyenetlenül). */
.density-compact .ti-media{display:grid;place-items:center;margin-inline:auto;width:100%;
  aspect-ratio:auto;padding:clamp(.7rem,1.3vw,1.15rem);
  /* HALVÁNYABB, mint a záró CTA panelje: a borító kísérő elem, nem versenytárs.
     A --brand-soft már 8% akcentus; ez 3,5%, tehát épp csak elválik a laptól. */
  background:color-mix(in srgb,var(--brand) 3.5%,var(--bg));
  border:0;box-shadow:none}
.density-compact .ti-media img{width:auto;height:auto;max-width:var(--ti-imgmax,15rem);
  max-height:100%;object-fit:contain;box-shadow:0 3px 12px rgb(0 0 0 / .1)}
.density-compact .page-hero .container{gap:var(--space-xs,.75rem)}
/* A NYITÓLAPI hero külön osztály (.hero, nem .page-hero) és saját, nagyobb ritmusa van
   (render.php: padding-block:var(--space-xl)); a display-témák ráadásul 12rem-ig engedik
   a H1-et. Compact módban mindkettőt visszafogjuk. */
.density-compact .hero{padding-block:clamp(2.25rem,3.5vw,3.5rem)}
.density-compact .hero .container{gap:var(--space-m)}
.density-compact.ds-statement .hero h1,
.density-compact.ds-editorial .hero h1{font-size:clamp(2.5rem,1.2rem + 5vw,5.5rem)}
.density-compact .hero-ctas{margin-top:.25rem}
/* A szekciók alap-térköze a render.php-ből jön (section{padding-block:var(--space-xl)}),
   a weight-* osztályok csak SITE-módban, oldaltípus szerint kerülnek rá — a nyitólapon
   nincs is weight-osztály, ezért a fenti weight-es szabályok nem érik el. Ez a sor igen. */
/* TÖRZSSZÖVEG ÉS MÉRTÉK compact módban. A display-témák apró törzsszöveget adnak
   (--step-0 max 1.125rem = 18px), mert a látványt a hatalmas címekre bízzák. Kis
   tartalmú oldalon ez fordítva sül el: a szöveg elvész a fehérben. Itt a törzs egy
   fokozattal nagyobb, a mérték pedig szélesebb — így a bekezdés kitölti a sorát. */
.density-compact{--step--1:clamp(.95rem,.92rem + .12vw,1.02rem);
  --step-0:clamp(1.08rem,1.02rem + .3vw,1.24rem);
  --step-1:clamp(1.26rem,1.18rem + .4vw,1.5rem);
  --content:64rem}
/* A display-témák az alcímet apró FELIRATNAK szánják (.ds-statement .hero p.sub:.85rem,
   design.php:1035) — azonos fajsúlyon a forrás-sorrend döntene, ezért itt a téma-osztállyal
   együtt szelektálunk. Compact módban az alcím olvasható mondat, nem címke. */
.density-compact .hero p.sub,.density-compact .page-hero p.sub,
.density-compact.ds-statement .hero p.sub,.density-compact.ds-statement .page-hero p.sub,
.density-compact.ds-editorial .hero p.sub,.density-compact.ds-editorial .page-hero p.sub{
  font-size:var(--step-1);max-width:44rem;letter-spacing:0}
.density-compact .hero .body,.density-compact .hero p:not(.sub):not(.microcopy){font-size:var(--step-1)}
/* A záró CTA a kártya-rácsnál KESKENYEBB volt (a .cta-inner a --content olvasási
   mértékére volt fogva, a rács viszont a 72rem-es konténerre) — ezért nem végződtek
   egy vonalban. A split/boxed panel nem folyószöveg: kövesse a konténert. */
.density-compact .final-cta.cta-split .cta-inner,
.density-compact .final-cta.cta-boxed .cta-inner{max-width:none}
.density-compact main>section{padding-block:clamp(1.75rem,2.6vw,2.75rem)}
.density-compact main>section.hero{padding-block:clamp(2.25rem,3.5vw,3.5rem)}
/* CÍMSOR-HIERARCHIA. A display-témákban a szekció-h2 4.75rem-ig nő, az ALOLDALI h1 viszont
   csak --step-5 (~3rem) — vagyis a h2 NAGYOBB a lap saját címénél. Ez fordított rend:
   az olvasó nem látja, mi a lap és mi a szakasz. Compact módban a h1 lesz a domináns,
   a h2 alá kerül, a h3 pedig egyértelműen a h2 alá. */
.density-compact .page-hero h1{font-size:clamp(2.5rem,1.6rem + 3vw,4rem);line-height:1.04}
.density-compact.ds-statement h2,
.density-compact.ds-editorial h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.6rem);line-height:1.08}
.density-compact.ds-statement h3,
.density-compact.ds-editorial h3{font-size:clamp(1.15rem,1rem + .5vw,1.45rem)}
/* A hero sávja teljes szélességben viszi a saját hátterét (a --hero-bg-t a body inline
   stílusa is felülírhatja: site.hero_bg). */
.density-compact .hero{border-bottom:1px solid var(--hero-border)}
/* — FEJLÉC-TAGLINE (site.header_tagline): a név alatt, apró, ritkított — */
.logo{display:inline-grid;gap:.1rem;line-height:1.15}
.logo .logo-tagline{font-family:var(--font-body);font-size:.7rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
@media (max-width:32rem){.logo .logo-tagline{display:none}}
/* — KÖNYVES HERO-HÁTTÉR (site.hero_pattern:"paper") — CSS-ből, KÉP NÉLKÜL: nincs kitalált
   illusztráció és nincs plusz letöltés. Két réteg: (1) hajszálvékony, ferde vonalkák a jobb
   oldalon, amik lapélek/könyvgerincek ritmusát idézik, (2) egy nagyon halvány, meleg
   fény-folt. Mindkettő a --hero-ink-ből színez, tehát bármely paletta mellett működik. — */
.hero-paper .hero{position:relative;overflow:clip}
/* A display-témák a hero pszeudo-elemeit KIKAPCSOLJÁK (pl. design.php:1023
   `.ds-statement .hero::before{display:none}`), és az azonos fajsúly miatt a
   forrás-sorrend döntene. Ezért a mintának a téma-osztállyal EGYÜTT kell szelektálnia. */
.hero-paper.ds-statement .hero::before,.hero-paper.ds-statement .hero::after,
.hero-paper.ds-minimal .hero::before,.hero-paper.ds-minimal .hero::after,
.hero-paper.ds-corporate .hero::before,.hero-paper.ds-corporate .hero::after,
.hero-paper.ds-finura .hero::before,.hero-paper.ds-finura .hero::after{display:block}
/* A minta MAGA — a nyitólapi hero ::before-ján és az ALOLDALI page-hero ::after-jén
   ugyanaz (a page-hero ::before-ja már foglalt: az a sarok-fényfolt, site.php:113).
   Egy szabály, két hely — a mintázat nem csúszhat szét a lapok között. */
.hero-paper .hero::before,
.hero-paper .page-hero::after{content:"";position:absolute;inset:0 0 0 auto;width:min(58%,42rem);
  background:
    repeating-linear-gradient(99deg,
      color-mix(in srgb,var(--hero-ink) 34%,transparent) 0 1.5px,
      transparent 1.5px 11px),
    repeating-linear-gradient(99deg,
      color-mix(in srgb,var(--brand) 26%,transparent) 0 3px,
      transparent 3px 66px);
  -webkit-mask-image:linear-gradient(to left,#000 18%,transparent 96%);
  mask-image:linear-gradient(to left,#000 18%,transparent 96%);
  pointer-events:none}
/* Az aloldali sáv alacsonyabb, ezért ott a minta finomabb legyen: a cím ne küzdjön vele. */
.hero-paper .page-hero::after{width:min(48%,34rem);opacity:.72}
.hero-paper .page-hero>.container{position:relative;z-index:1}
.hero-paper .hero::after{content:"";position:absolute;inset:auto -6% -45% auto;
  width:min(34%,26rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 11%,transparent),transparent 68%);
  pointer-events:none}
.hero-paper .hero>.container{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.hero-paper .hero::before{transition:none}}
.type-pricing .pricing-grid,.type-portfolio .references-grid{margin-top:var(--space-m)}
/* — breadcrumb — */
.breadcrumb{font-size:var(--step--1);color:var(--hero-soft)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.breadcrumb li+li::before{content:"›";margin-inline-end:.4rem;opacity:.6}
.breadcrumb a{color:inherit}
/* E-E-A-T byline (blogbejegyzés dátum + szerző) */
.hero-byline{font-size:var(--step--1);color:var(--hero-soft);margin:.15rem 0 0;letter-spacing:.02em}
.hero-byline .by-author{font-weight:600;color:var(--ink)}
/* blogcikk-lista (posts): ikon/doboz nélküli editorial grid, hairline-tagolással */
.post-grid{list-style:none;margin:0;padding:0;display:grid;gap:2.2rem}
@media (min-width:52rem){.post-grid.post-cols-2{grid-template-columns:1fr 1fr;gap:3rem}.post-grid.post-cols-3{grid-template-columns:repeat(3,1fr)}}
.post-item a{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--brand-border);padding-top:1.1rem;transition:border-color .2s}
.post-date{display:block;font-size:var(--step--1);color:var(--ink-muted);letter-spacing:.04em;margin-bottom:.5rem}
.post-title{font-size:var(--step-2);margin:0 0 .55rem;line-height:1.15}
.post-excerpt{color:var(--ink-soft);margin:0 0 .95rem}
.post-more{color:var(--brand);font-weight:600;font-size:var(--step--1)}
.post-item a:hover .post-title{color:var(--brand)}
.post-item a:hover{border-top-color:var(--brand)}
/* — kártyák linkként — */
.bento-card a.card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;font-weight:600;font-size:var(--step--1);text-decoration:none}
.bento-card a.card-link::after{content:"→";transition:translate .15s}
.bento-card a.card-link:hover::after{translate:3px 0}
/* — text+image blokk — */
.ti-grid{display:grid;gap:var(--space-l);align-items:center}
@media (min-width:52rem){.ti-grid{grid-template-columns:1fr 1fr}.ti-grid.reverse>.ti-media{order:-1}}
.ti-media{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-m);background:var(--brand-soft)}
.ti-media img{width:100%;height:100%;object-fit:var(--ti-fit,cover)}
.ti-text p{color:var(--ink-soft);margin-top:.75rem}
/* — árazás — */
.pricing-grid{display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:stretch}
/* pontosan 4 csomag: 2×2 rács (a 16rem-es auto-fit széles kijelzőn 3+1 árva kártyát adna) */
.pricing-grid:has(> .tier:nth-child(4):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.tier{background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);display:flex;flex-direction:column;gap:.75rem}
.tier.featured{border:2px solid var(--brand);box-shadow:var(--shadow-m);position:relative}
.tier .tier-badge{position:absolute;top:-.85rem;left:50%;translate:-50% 0;background:var(--brand);color:#fff;font-size:.75rem;font-weight:700;padding:.25em 1em;border-radius:999px;white-space:nowrap}
.tier h3{font-size:var(--step-1)}
.tier .price{font-family:var(--font-head);font-size:var(--step-3);font-weight:var(--h-weight)}
.tier .price small{font-size:var(--step--1);font-family:var(--font-body);font-weight:400;color:var(--ink-muted)}
.tier p.desc{color:var(--ink-soft);font-size:var(--step--1)}
.tier ul{list-style:none;padding:0;display:grid;gap:.55rem;flex:1}
.tier li{display:flex;gap:.55rem;font-size:var(--step--1)}
.tier li svg{width:1.2rem;height:1.2rem;flex-shrink:0;color:var(--brand);margin-top:.15rem}
/* --ink-soft, nem --ink-muted: a muted a section-alt tinten 4.22:1 (WCAG 1.4.3 bukás) */
.pricing-note{margin-top:var(--space-m);font-size:var(--step--1);color:var(--ink-soft);max-width:46rem}
/* — referenciák — */
.ref-grid{display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.ref-card{background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
/* position:relative + abszolút img: a .ref-card flex-oszlopában a flex-item automatikus
   min-height-ja (a kép természetes magassága) felülbírálná a 16/10-et → álló screenshotoknál
   kártyánként eltérő képmagasság lenne. Így a doboz aránya mindig 16/10, a kép vágva tölt. */
.ref-card .ref-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand-soft),var(--brand-softer))}
.ref-card .ref-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ref-card .ref-body{padding:var(--space-m);display:flex;flex-direction:column;gap:.5rem;flex:1}
.ref-card .ref-cat{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.ref-card p{color:var(--ink-soft);font-size:var(--step--1)}
.ref-card .ref-result{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--brand-border);font-weight:600;font-size:var(--step--1);color:var(--ink)}
/* — kapcsolat — */
.contact-grid{display:grid;gap:var(--space-l)}
@media (min-width:52rem){.contact-grid{grid-template-columns:1fr 1.2fr}}
.contact-card{display:flex;gap:1rem;align-items:flex-start;padding:var(--space-s) 0;border-bottom:1px solid var(--brand-border)}
.contact-card .icon{flex-shrink:0;width:2.6rem;height:2.6rem;padding:.6rem;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong)}
.contact-card .icon svg{width:100%;height:100%}
.contact-card strong{display:block}
.contact-card a{color:var(--ink);font-weight:600;text-decoration:none}
.contact-card a:hover{color:var(--brand)}
.contact-grid.contact-prominent{grid-template-columns:1fr}
.contact-prominent>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-s)}
.contact-prominent .contact-intro{grid-column:1/-1;margin-bottom:.25rem}
.contact-prominent .contact-card{align-items:center;padding:var(--space-m);border:1px solid var(--brand-border);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow-s)}
.contact-prominent .contact-card .icon{width:3.5rem;height:3.5rem;padding:.8rem}
.contact-prominent .contact-card strong{font-size:var(--step-0);margin-bottom:.2rem}
.contact-prominent .contact-card a{font-size:var(--step-1);overflow-wrap:anywhere}
@media (max-width:52rem){.contact-prominent>div{grid-template-columns:1fr}}
.contact-form{background:var(--bg);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-m);display:grid;gap:1rem}
.contact-form label{font-size:var(--step--1);font-weight:600;display:block;margin-bottom:.35rem}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--field-border);border-radius:calc(var(--btn-radius)/1.2);font:inherit;background:var(--surface)}
.contact-form .consent input,.quote-form .consent input{width:auto;padding:0}
.contact-form textarea{min-height:7rem;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.contact-form .form-note{font-size:.78rem;color:var(--ink-muted)}
/* hCaptcha 2-Klick consent-gate: a widget csak explicit „laden" után jelenik meg */
.captcha-gate .h-captcha{display:none}
.captcha-gate.captcha-on .h-captcha{display:block;margin-top:.4rem}
.captcha-gate.captcha-on .captcha-note,.captcha-gate.captcha-on .captcha-load{display:none}
.captcha-note{font-size:.8rem;line-height:1.5;color:var(--ink-soft);margin:.25rem 0 .6rem;max-width:56ch}
.captcha-load{font-size:var(--step--1);padding:.5em 1.15em}
/* Consent-Banner (Google Ads, Consent Mode v2 Basic): a Google-címke CSAK „Elfogadom" után tölt.
   Sötét sáv + fehér szöveg (téma-független olvashatóság); a két gomb EGYENRANGÚ (EDPB: az elutasítás
   ne legyen nehezebb, mint az elfogadás). JS injektálja, ezért a statikus HTML-ben nincs. */
.cc-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1000;max-width:46rem;margin-inline:auto;
  background:#161310;color:#fff;border:1px solid rgb(255 255 255 / .18);border-radius:14px;
  box-shadow:0 14px 44px rgb(0 0 0 / .4);padding:1rem 1.15rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.cc-banner .cc-text{margin:0;font-size:var(--step--1);line-height:1.55;flex:1 1 22rem}
.cc-banner .cc-text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cc-banner .cc-actions{display:flex;gap:.6rem;flex:0 0 auto}
.cc-banner .cc-actions .btn{flex:0 0 auto;font-size:var(--step--1);padding:.55em 1.3em}
.cc-banner .cc-reject{background:#3a3630;color:#fff;border:1px solid rgb(255 255 255 / .3)}
.cc-banner .cc-reject:hover{background:#4a453d}
.footer-consent{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media (max-width:34rem){.cc-banner .cc-actions{width:100%}.cc-banner .cc-actions .btn{flex:1 1 0}}
@media (prefers-reduced-motion:no-preference){.cc-banner{animation:cc-in .3s ease}}
@keyframes cc-in{from{transform:translateY(1rem);opacity:0}to{transform:none;opacity:1}}
/* — footer bővítés — */
.site-footer .footer-grid{display:grid;gap:var(--space-m)}
@media (min-width:52rem){.site-footer .footer-grid{grid-template-columns:2fr 1fr 1fr}}
@media (min-width:52rem){.site-footer .footer-grid.has-links{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer h2{color:#fff;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.45rem}
.site-footer ul a{text-decoration:none}
.site-footer ul a:hover{color:#fff}
/* VILÁGOS lábléces témáknál a fenti #fff hover LÁTHATATLANNÁ teszi a linket (fehér a
   fehéren). Ezek a témák a láblécet --bg-re és --ink-soft szövegre állítják
   (design.php:980/1066/1152), tehát ott az akcentus a helyes hover-szín. */
.ds-statement .site-footer a:hover,.ds-statement .site-footer ul a:hover,
.ds-okopod .site-footer a:hover,.ds-okopod .site-footer ul a:hover,
.ds-wellness .site-footer a:hover,.ds-wellness .site-footer ul a:hover{color:var(--brand)}
/* — vegyes — */
.section-alt{background:var(--bg)}
.prose{max-width:46rem;color:var(--ink-soft)}
.prose h2,.prose h3{color:var(--ink);margin-top:1.2em}
/* bekezdés-ritmus: a globális margin-reset miatt enélkül sortörésnek tűnik a váltás */
.prose p{margin-block:0 1.05rem}
.prose h2{margin-bottom:.7rem}
.prose .kicker + h2{margin-top:.35rem}
.prose h3{margin-bottom:.5rem}
.prose p:last-child{margin-bottom:0}
/* ===== SHOWCASE: előtte/utána csúszka (before_after) ===== */
.before-after{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--radius,12px);--pos:50%;user-select:none;background:rgb(0 0 0 / .06)}
.before-after .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.before-after .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.before-after .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgb(0 0 0 / .25)}
.before-after .ba-line::after{content:"";position:absolute;top:50%;left:50%;width:2.3rem;height:2.3rem;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 2px 10px rgb(0 0 0 / .3)}
.before-after .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.before-after .ba-range:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.before-after .ba-tag{position:absolute;bottom:.7rem;padding:.25rem .6rem;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgb(0 0 0 / .7);border-radius:4px;pointer-events:none}
.before-after .ba-tag-b{left:.7rem}.before-after .ba-tag-a{right:.7rem}
/* ===== SHOWCASE: galéria + natív <dialog> lightbox (gallery) ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.75rem}
.gallery-item{display:block;overflow:hidden;border-radius:var(--radius,10px);aspect-ratio:4/3;background:rgb(0 0 0 / .06)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
dialog.lightbox{position:fixed;inset:0;margin:auto;max-width:min(92vw,1100px);max-height:92vh;padding:0;border:none;border-radius:10px;background:#111;color:#fff;overflow:visible}
dialog.lightbox::backdrop{background:rgb(0 0 0 / .82)}
dialog.lightbox .lb-img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;margin:auto}
dialog.lightbox .lb-cap{padding:.6rem .9rem;font-size:.85rem;color:#ddd}
dialog.lightbox .lb-close{position:absolute;top:-1rem;right:-1rem;width:2.4rem;height:2.4rem;border:none;border-radius:50%;background:#fff;color:#111;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgb(0 0 0 / .4)}
@media (prefers-reduced-motion: reduce){.gallery-item img{transition:none}.gallery-item:hover img{transform:none}}
/* ===== SHOWCASE: full-bleed fotó-hero + Ken Burns (hero.fullbleed) ===== */
.hero-fullbleed{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:min(88vh,760px);display:flex;align-items:center}
.hero-fullbleed .hero-bg{position:absolute;inset:0;z-index:-2}
.hero-fullbleed .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-fullbleed .kenburns{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:center}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16) translate(1.5%,-1.5%)}}
/* aloldal-hero: lassú DE jól látható drift (nagy zoom + pan; a szélek nem villannak ki) */
@keyframes kenburns-slow{from{transform:scale(1.08) translate(-2%,1.4%)}to{transform:scale(1.28) translate(2%,-1.8%)}}
.hero-fullbleed .hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(0 0 0 / .74) 0%,rgb(0 0 0 / .55) 48%,rgb(0 0 0 / .28) 100%)}
.hero-fullbleed .container{max-width:72rem}
.hero-fullbleed h1{max-width:20ch;color:#fff}
/* Specificitás: a lib/render.php-beli .hero p.sub (0,2,1) FELÜLÍRNÁ a sima .hero-fullbleed .sub
   (0,2,0) szabályt, és a fotó-hero alcíme világos témában a sötét --hero-soft színt kapná a
   sötét fotón (mért eset: dmpgarten kezdőoldal, corporate téma, 2026-07-26). Ugyanaz a hiba,
   mint a .page-hero-bg-nél. A qa-contrast nem fogja: token-párokat mér, nem kaszkádot. */
.hero.hero-fullbleed p.sub,.hero.hero-fullbleed .body{max-width:52ch;color:rgb(255 255 255 / .92)}
/* Ugyanez a microcopyra: a .hero .microcopy (0,2,0) a sötét --hero-soft színt adná a fotó fölé,
   és fotó-heróra nem volt felülírás. A CTA alatti mikroszöveg így világos témában eltűnt. */
.hero.hero-fullbleed .microcopy,.page-hero.page-hero-bg .microcopy{color:rgb(255 255 255 / .85)}
.hero-fullbleed .hero-stats{border-top:1px solid rgb(255 255 255 / .28)}
.hero-fullbleed .hero-stats strong{color:#fff}.hero-fullbleed .hero-stats span{color:rgb(255 255 255 / .8)}
.hero-fullbleed .btn-ghost{border-color:rgb(255 255 255 / .6);color:#fff;background:none}
.hero-fullbleed .btn-ghost:hover{background:rgb(255 255 255 / .12)}
@media (prefers-reduced-motion: reduce){.hero-fullbleed .kenburns{animation:none;transform:scale(1.04)}}
/* videó-hero: a klip a poszter-kép fölé úszik (JS kapcsolja be asztalon); mobil/reduced-motion → marad a kép */
.hero-fullbleed .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-fullbleed.video-on .hero-video{opacity:1}
/* videós heronál a poszter NE zoomoljon (a videó adja a mozgást) — így a poszter (a videó
   első kockája) pontosan egybeesik a videóval, nincs "két kép fedi egymást" ugrás betöltéskor */
.hero-fullbleed.has-video .kenburns{animation:none}
/* mobilon nincs videó → a poszter mégis kapjon Ken Burns-t (ott nincs ütközés) */
@media (max-width:52rem){.hero-fullbleed.has-video .kenburns{animation:kenburns 22s ease-in-out infinite alternate}}

/* ============ KOMPOZÍCIÓS RÉTEG (layout.php) — variánsok, szignatúra, sűrűség ============ */
/* A cél: NE a skin (szín/radius) hordozza a differenciálást, hanem az ELRENDEZÉS.
   Minden variáns pusztán osztály — a tartalom/DOM lényegében változatlan, a QA-kapuk élnek. */

/* — szekció-fejléc igazítás (head: center | left | split) — */
.section-head.sh-left{margin-inline:0;text-align:left;max-width:52rem}
.section-head.sh-left .kicker{border-top:2px solid var(--brand);padding-top:.6rem}
.section-head.sh-split{max-width:none;margin-inline:0;text-align:left;display:grid;gap:var(--space-s) var(--space-l);grid-template-columns:1fr}
.section-head.sh-split .kicker{border-top:2px solid var(--brand);padding-top:.6rem}
@media (min-width:52rem){
  .section-head.sh-split{grid-template-columns:1.05fr .95fr;align-items:end}
  .section-head.sh-split .sh-title{grid-column:1}
  .section-head.sh-split > p{grid-column:2;margin:0;align-self:end}
}

/* — referencia kép helyett TIPOGRÁFIAI csempe (ref-typo): domain a display-betűvel — */
.ref-media.ref-typo{background:var(--bg);display:flex;align-items:center;justify-content:flex-start;
  padding:var(--space-m);border-bottom:2px solid var(--brand)}
.ref-media.ref-typo span{font-family:var(--font-head);font-weight:var(--h-weight,700);font-size:var(--step-1);
  line-height:1.1;letter-spacing:-.01em;color:var(--ink);word-break:break-word}

/* — TIPOGRÁFIAI KIEMELÉS (pullquote): kép helyett a szó a látvány (Neue Grafik / svájci) — */
.pullquote .container{max-width:var(--content,58rem);margin-inline:auto;position:relative}
.pullquote .pq-index{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,10vw,7rem);
  line-height:.9;color:var(--brand);letter-spacing:-.03em;margin-bottom:.4rem}
.pullquote .pq-body{margin:0}
.pullquote .pq-body p{font-family:var(--font-head);font-weight:var(--h-weight,700);font-size:clamp(1.6rem,1rem + 2.6vw,3rem);
  line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:0}
.pullquote .pq-body cite{display:block;margin-top:1.1rem;font-style:normal;font-size:var(--step--1);
  color:var(--ink-muted);letter-spacing:.02em}
.head-left .pullquote .container,.head-split .pullquote .container{margin-inline:0}

/* — SZÖVEG ELŐTTE/UTÁNA (text_compare): két hasáb, hajszál-elválasztóval — */
.text-compare .tc-grid{display:grid;gap:var(--space-m);margin-top:var(--space-m)}
@media (min-width:52rem){.text-compare .tc-grid{grid-template-columns:1fr 1fr;gap:0}}
.text-compare .tc-col{margin:0;padding:var(--space-m) 0;border-top:2px solid var(--brand-border)}
@media (min-width:52rem){.text-compare .tc-col{padding:var(--space-m)}
  .text-compare .tc-before{border-right:1px solid var(--brand-border)}}
.text-compare .tc-col figcaption{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.7rem}
.text-compare .tc-before figcaption{color:var(--ink-muted)}
.text-compare .tc-after figcaption{color:var(--brand)}
.text-compare .tc-col p{margin:0;color:var(--ink-soft);font-size:var(--step-0);line-height:1.6}
.text-compare .tc-before p{color:var(--ink-muted)}
.text-compare .tc-after p{color:var(--ink)}

/* — text_image kép helyett tipográfiai panel (ti-pull): a media-oldal svájci kiemelés — */
.ti-media.ti-pull{background:none;box-shadow:none;aspect-ratio:auto;display:flex;flex-direction:column;
  justify-content:center;padding:var(--space-m);border-left:2px solid var(--brand)}
.ti-media.ti-pull p{font-family:var(--font-head);font-weight:var(--h-weight,700);font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);
  line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:0;text-wrap:balance}
.ti-media.ti-pull cite{display:block;margin-top:.9rem;font-style:normal;font-size:var(--step--1);color:var(--ink-muted)}

/* — hírlevél-feliratkozás (newsletter blokk): egy sorban e-mail + gomb, alatta consent — */
.newsletter .nl-text{max-width:var(--content,52rem);color:var(--ink-soft)}
.newsletter .nl-form{max-width:34rem;margin-top:var(--space-m)}
.newsletter .nl-row{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter .nl-row input{flex:1 1 16rem;min-height:44px;padding:.7rem .9rem;border:1px solid var(--field-border);
  border-radius:var(--btn-radius,6px);font:inherit;color:var(--ink);background:var(--surface)}
.newsletter .nl-row input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.newsletter .nl-row .btn{flex:0 0 auto}
.newsletter .consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:var(--step--1);color:var(--ink-soft)}
.newsletter .consent input{margin-top:.25rem;min-width:18px;min-height:18px}
.newsletter .form-note{margin-top:.7rem;font-size:var(--step--1);color:var(--ink-muted)}

/* — kártya-variáns: list (vízszintes sorok, hajszál-elválasztóval; keret/árnyék nélkül) —
     magas specificitás (.bento.bento-*), mert a téma-modul CSS a site_css UTÁN fűződik hozzá */
.bento.bento-list{grid-template-columns:1fr;gap:0}
.bento.bento-list .bento-card{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--space-m);align-items:start;align-content:start;
  background:none!important;border:0!important;border-top:1px solid var(--brand-border)!important;border-radius:0!important;box-shadow:none!important;padding:var(--space-m) 0}
.bento.bento-list .bento-card:last-child{border-bottom:1px solid var(--brand-border)!important}
.bento.bento-list .bento-card::before{display:none!important}
.bento.bento-list .bento-card .card-media{grid-row:1/9;width:9rem;aspect-ratio:4/3;margin:0}
.bento.bento-list .bento-card .icon{grid-row:1/9;margin:0}
.bento.bento-list .bento-card h3,.bento.bento-list .bento-card p,.bento.bento-list .bento-card .card-link{grid-column:2}
.bento.bento-list .bento-card:not(:has(.card-media,.icon)){grid-template-columns:1fr}
.bento.bento-list .bento-card:not(:has(.card-media,.icon)) h3,
.bento.bento-list .bento-card:not(:has(.card-media,.icon)) p,
.bento.bento-list .bento-card:not(:has(.card-media,.icon)) .card-link{grid-column:1}
@media (hover:hover){.bento.bento-list .bento-card:hover{transform:none!important;box-shadow:none!important}}

/* — kártya-variáns: numbered (nagy indexszám, doboz nélkül, editorial ritmus) — */
.bento.bento-numbered{counter-reset:bcard}
.bento.bento-numbered .bento-card{counter-increment:bcard;background:none!important;border:0!important;border-top:2px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important;padding:var(--space-s) 0}
.bento.bento-numbered .bento-card::before{content:counter(bcard,decimal-leading-zero);
  position:static!important;inset:auto!important;width:auto!important;height:auto!important;transform:none!important;background:none!important;
  display:block;font-family:var(--font-head);font-size:var(--step-3);font-weight:800;line-height:1;color:var(--brand);margin-bottom:.6rem}
.bento.bento-numbered .bento-card .card-media{aspect-ratio:3/2;margin-bottom:.8rem}
@media (hover:hover){.bento.bento-numbered .bento-card:hover{transform:none!important;box-shadow:none!important}}

/* — CTA-variánsok: band (full-bleed sáv) | split | inline | boxed —
     a .container normál 72rem (mint a többi szekció), a PANEL a .cta-inner a TARTALMI szélességen,
     balra igazítva → azonos szélesség/bal él a FAQ/intro/űrlappal. A band marad a gradiens-sáv. */
.final-cta .container{max-width:72rem;display:block}
.final-cta .cta-inner{max-width:var(--content);margin-inline:auto}
.head-left .final-cta .cta-inner,.head-split .final-cta .cta-inner{margin-inline:0 auto}
.final-cta .cta-copy > *:first-child{margin-top:0}
.final-cta.cta-band .cta-inner{max-width:46rem;margin-inline:auto!important;display:grid;gap:var(--space-m);justify-items:center;text-align:center}
.final-cta.cta-band .cta-actions{margin-top:var(--space-s)}
.final-cta.cta-split,.final-cta.cta-inline,.final-cta.cta-boxed{background:none!important;color:var(--ink)!important;
  /* A téma SÁVKÉNT tervezte a záró CTA-t (pl. .ds-statement .final-cta{border-top:2px
     solid var(--ink)}), és ez a blokk azt a sáv-stílust kapcsolja ki ezeknél a
     variánsoknál. A felső keret eddig kimaradt belőle: teljes szélességű vonal maradt
     egy olyan szekció fölött, aminek már nincs sávja — az inline variánsnál ráadásul a
     saját akcentus-vonalaival TORLÓDVA. */
  border-top:none!important}
/* a témák sötét-CTA-ra szánt világos szövegszínei (pl. editorial #f2efe9) NEM szivároghatnak
   a világos variánsokba — tint-a-tinten láthatatlan szöveg lenne (WCAG 1.4.3) */
.final-cta.cta-split h2,.final-cta.cta-inline h2,.final-cta.cta-boxed h2,
.final-cta.cta-split p,.final-cta.cta-inline p,.final-cta.cta-boxed p{color:var(--ink)!important}
/* microcopy: --ink-soft (nem --ink-muted), mert a záró-CTA meleg tint hátterén a muted <4.5:1 (WCAG 1.4.3) */
.final-cta.cta-split .microcopy,.final-cta.cta-inline .microcopy,.final-cta.cta-boxed .microcopy{color:var(--ink-soft)!important}
.final-cta.cta-split .btn-primary,.final-cta.cta-inline .btn-primary,.final-cta.cta-boxed .btn-primary{background:var(--brand);color:#fff}
.final-cta.cta-split .btn-primary:hover,.final-cta.cta-inline .btn-primary:hover,.final-cta.cta-boxed .btn-primary:hover{background:var(--brand-strong)}
/* split: kétoszlopos panel (bal: üzenet, jobb: gomb) */
.final-cta.cta-split .cta-inner{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:var(--space-l);
  background:var(--brand-soft);border:1px solid var(--brand-border);border-radius:var(--radius);padding:var(--space-l)}
.final-cta.cta-split .cta-actions{justify-self:end;text-align:right;display:grid;gap:.5rem}
/* inline: vékony sáv, felül-alul akcentus-vonal */
.final-cta.cta-inline .cta-inner{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:var(--space-m);
  border-top:2px solid var(--brand);border-bottom:2px solid var(--brand);padding-block:var(--space-m)}
.final-cta.cta-inline h2{font-size:var(--step-2)}
.final-cta.cta-inline .cta-actions{justify-self:end}
/* boxed: keretes kártya */
.final-cta.cta-boxed .cta-inner{display:grid;gap:var(--space-s);justify-items:center;text-align:center;
  background:var(--surface);border:2px solid var(--brand);border-radius:var(--radius);padding:var(--space-l);box-shadow:var(--shadow-m)}
@media (max-width:48rem){
  .final-cta.cta-split .cta-inner,.final-cta.cta-inline .cta-inner{grid-template-columns:1fr;text-align:left}
  .final-cta.cta-split .cta-actions,.final-cta.cta-inline .cta-actions{justify-self:start;text-align:left}
}

/* — SZIGNATÚRA: EGY visszatérő gesztus/oldal (sig-rule | sig-frame | sig-marquee) — */
/* rule: hajszál-akcentus a kickereken (editorial/technikás nyugalom) */
.sig-rule .section-head .kicker{border-top:2px solid var(--brand);padding-top:.55rem}
.sig-rule .final-cta.cta-inline .container{border-color:var(--brand)}
/* frame: finom belső keret a médián (meleg, kézműves gesztus) */
.sig-frame .ti-media,.sig-frame .bento-card .card-media,.sig-frame .ref-card .ref-media,.sig-frame .gallery-item,.sig-frame .page-hero .ph-media img{outline:1px solid var(--brand);outline-offset:-6px}
.sig-frame .hero-media{outline:1px solid rgb(255 255 255 / .55);outline-offset:-8px}
/* marquee: széles verzál overline kicker (magazin-lendület) */
.sig-marquee .kicker{display:block;width:100%;letter-spacing:.26em;font-size:.68rem;padding-bottom:.5rem;border-bottom:1px solid var(--brand-border);margin-bottom:1rem}

/* — SŰRŰSÉG (csak explicit design_intent.density) — */
.dens-airy section{padding-block:calc(var(--space-xl) * 1.35)}
.dens-tight section{padding-block:calc(var(--space-xl) * .72)}

/* ============ EGYSÉGES TARTALOM-SZÉLESSÉG + IGAZÍTÁS (2026-07-14) ============ */
/* A hero szövege, a szekció-fejlécek és az űrlapok EGY közös olvasási oszlopot kapnak,
   ugyanazzal a bal éllel — ne legyen 3 különböző szélesség/igazítás (hero kilóg balra,
   szekció 72rem középen, űrlap 46rem középen). A rácsok (kártya/galéria) a teljes .container-t
   tartják. Kompromisszum-szélesség (a user: "keskenyebb jobb, de itt kell a kompromisszum").
   !important, mert a téma-modul (.ds-*) literál szélességei a site_css UTÁN fűződnek hozzá. */
:root{--content:58rem}
/* full-bleed hero: a konténer a szekciók 72rem-es középre zárt sávjához igazodik, a SZÖVEG
   --content-re fogva → a hero és a szekciók tartalma egy bal élen kezdődik */
.hero-fullbleed .container{width:100%;max-width:72rem!important;margin-inline:auto!important;justify-items:start!important;text-align:left!important}
.hero-fullbleed h1,.hero-fullbleed .sub,.hero-fullbleed .body,.hero-fullbleed .hero-ctas,.hero-fullbleed .microcopy,.hero-fullbleed .hero-stats{max-width:var(--content);margin-inline:0}
/* szekció-fejléc (a split kivételével), prose, oldal-hero, űrlap: közös szélesség, balra */
.section-head:not(.sh-split){max-width:var(--content)!important}
.prose{max-width:var(--content)!important}
/* oldal-hero: a szekciók 72rem-es sávjához igazodik (bal él egy vonalban); a szöveget
   a kétoszlopos ph-grid, kép nélkül pedig a --content fogja */
.page-hero .container{max-width:72rem!important}
.page-hero:not(.has-media) h1,.page-hero:not(.has-media) .sub{max-width:var(--content)}
.quote-form{max-width:var(--content)!important;margin-inline:0!important}
/* bal/split kompozíciónál az intro/prose is BALRA igazodik (a középre zárt inline stílust felülírva),
   hogy a bekezdés bal éle egy vonalban legyen a fejlécekkel és a heróval */
/* A head-left/split a TARTALMAT igazítja balra, NEM a konténert: a .container adja a lap-margót,
   balra rántva a jobb oldal kiürül (2026-07-17-i bug: a checklist 72rem-es narrow konténere a lap
   bal szélére tapadt, jobbra ~40% üres). A .container.narrow ezért KIMARAD a szabályból. */
.head-left .prose,.head-split .prose{margin-inline:0!important}
.head-left .container.narrow,.head-split .container.narrow{margin-inline:auto!important}

/* ============ ALOLDAL-HERO HÁTTÉRKÉP + KEN BURNS (2026-07-14) ============ */
/* Az aloldalak heroja is full-bleed háttérkép (mint a nyitólap), kompaktabb magassággal,
   sötét overlay + világos szöveg, lassú Ken Burns mozgással (reduced-motion-biztos). */
.page-hero-bg{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#1b1a18;min-height:clamp(300px,42vh,460px);display:flex;align-items:center;padding-block:var(--space-l)}
.page-hero.page-hero-bg::before{display:none}
.page-hero-bg .hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero-bg .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero-bg .hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(0 0 0 / .74) 0%,rgb(0 0 0 / .55) 48%,rgb(0 0 0 / .28) 100%)}
.page-hero-bg .container{width:100%;max-width:72rem!important;margin-inline:auto;justify-items:start;text-align:left}
.page-hero-bg h1,.page-hero-bg .sub,.page-hero-bg .hero-ctas,.page-hero-bg .breadcrumb{max-width:var(--content)}
.page-hero-bg h1{color:#fff}
/* FONTOS a specificitás: a .page-hero p.sub (0,2,1) egyébként FELÜLÍRNÁ ezt a (0,2,0) szabályt,
   és a háttérképes hero alcíme világos témában a sötét --hero-soft színt kapná a sötét fotón
   (mért eset: dmpgarten, corporate téma, 2026-07-26 — a qa-contrast nem fogja, mert az
   token-párokat mér, nem kaszkád-feloldást). Ezért kell a .page-hero.page-hero-bg p.sub alak. */
.page-hero.page-hero-bg p.sub{color:rgb(255 255 255 / .92)}
.page-hero-bg .breadcrumb{color:rgb(255 255 255 / .82)}
.page-hero-bg .breadcrumb a{color:rgb(255 255 255 / .92)}
.page-hero-bg .btn-ghost{border-color:rgb(255 255 255 / .6);color:#fff;background:none}
.page-hero-bg .btn-ghost:hover{background:rgb(255 255 255 / .14)}

/* ============ FULL-WIDTH BLOKKOK (block.full) — edge-to-edge áttörés ============ */
/* .section-full: a szekció kitör a konténerből a teljes viewport-szélességre (a belső konténer
   megtartja a paddinget → kártyáknak, szövegnek levegő). .section-bleed: a média a szélig ér. */
.section-full{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.section-full > .container{max-width:none}
.section-bleed > .container{padding-inline:0}
.section-bleed .before-after{aspect-ratio:auto;min-height:clamp(340px,56vh,620px);border-radius:0}
.section-bleed .gallery{gap:2px;border-radius:0}
.section-bleed .gallery-item{border-radius:0}
.section-bleed .section-head{padding-inline:clamp(1.25rem,5vw,3rem)}
/* full-width kártyák: egy sorban 4 oszlop (4×1), lépcsőzött töréssel kisebb kijelzőn */
.section-full .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:64rem){.section-full .bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* kártyák rögzített oszlopszáma (a JSON cols szerint) — az auto-fit a konténer szélességéből
   esik ki (72rem → 4 oszlop), így 6 kártya 4+2-re törik; a cols:3 adja a 2×3-at.
   Csak ≥64rem-en él: kisebb kijelzőn marad az auto-fit egyoszlopos törése. */
@media (min-width:64rem){
.bento:not(.bento-list).cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento:not(.bento-list).cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento:not(.bento-list).cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* full-width galéria rácsa: rögzített oszlopszám (a JSON grid_cols szerint), nem auto-fit */
.section-full .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:48rem){.section-full .gallery.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:48rem){.section-full .gallery.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============ FINOM KÉP-MOZGÁS (professzionális, mérsékelt) ============ */
/* kártya- és referencia-képek lágy nagyítása hoverre — a galéria már kapja, kiterjesztjük */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bento-card .card-media img,.ref-card .ref-media img,.ti-media img{transition:transform .5s ease}
  .bento-card:hover .card-media img,.ref-card:hover .ref-media img{transform:scale(1.05)}
  .section-full .ti-grid:hover .ti-media img{transform:scale(1.03)}
}

/* ============ HÁTTÉRSZÍNES SÁV + CHECKLIST-KÉP + KONTAKT-INTRO (2026-07-14) ============ */
/* section-tint: full-width halvány sáv (a szekció maga teljes szélességű, a tartalom konténerben marad) */
.section-tint{background:var(--brand-soft)}
/* checklist kép mellett (2 oszlop: lista + kép) */
.check-split{display:grid;gap:var(--space-l);align-items:center}
@media (min-width:56rem){.check-split{grid-template-columns:1.05fr .95fr}}
.check-split .includes{margin-top:var(--space-s)}
.check-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-m)}
.check-media img{width:100%;height:100%;object-fit:cover;display:block}
/* kontakt: fejléc+intro a bal hasábban, kisebb méretben, az elérhetőségek fölött */
.contact-intro{margin-bottom:var(--space-m)}
.contact-intro h2{font-size:var(--step-2)}
.contact-intro p{color:var(--ink-soft);margin-top:.5rem;font-size:var(--step--1)}

/* számozott kártya KÉPPEL → a nagy indexszám NEM kell a kép fölé (user-kérés): a kép a fókusz */
.bento.bento-numbered .bento-card:has(.card-media)::before{display:none}
/* FAQ: a közös tartalmi szélességre fogva (ne legyen szélesebb, mint a törzs); bal-kompozíciónál balra */
.faq-list{max-width:var(--content)}
.head-left .faq-list,.head-split .faq-list{margin-inline:0}
/* — paletta: monokróm fehér/fekete, EGY akcentus (--brand) csak 1-2 ponton — */
.ds-statement{
  --bg:#ffffff;--surface:#ffffff;--ink:#0a0a0a;--ink-soft:#3d3d3d;--ink-muted:#6b6b6b;
  --brand-border:rgb(10 10 10 / .14);
  --brand-soft:color-mix(in srgb,var(--brand) 8%,#fff);
  --hero-bg:#ffffff;--hero-ink:#0a0a0a;--hero-soft:#6b6b6b;--hero-border:rgb(10 10 10 / .14);--hero-card:#ffffff;
  --dark:#0a0a0a;--dark2:#161616;
  background:var(--bg);color:var(--ink)}
.ds-statement body{background:var(--bg);color:var(--ink)}
/* extrém whitespace: a szekció-térköz kb. duplája a szokásosnak (motif 3, "a csend a keret") */
.ds-statement section{padding-block:clamp(6rem,4.5rem + 5vw,10rem)}
/* óriás display-tipó a hero-n (motif 1, szó szerinti spec) — SEMMI más szekció nem kap ekkora címet */
.ds-statement .hero h1{font-size:clamp(3rem,1.4rem + 10vw,12rem);font-weight:900;letter-spacing:-.045em;line-height:.94}
.ds-statement h1,.ds-statement h2,.ds-statement h3{letter-spacing:-.03em;font-weight:var(--h-weight);color:var(--ink)}
.ds-statement h2{font-size:clamp(2.25rem,1.5rem + 3.2vw,4.75rem);line-height:1.02}
/* a display-skála NEM vonatkozik a footerre (2026-07-24 palevi-fix): oszlopcím = címke, nem statement */
.ds-statement .site-footer h2{font-size:var(--step--1);line-height:1.2;letter-spacing:.06em}
/* EGYETLEN szín-kiemelés a címben (motif 2: "egy szó a címben") — SZÍN, nem méret/font */
.ds-statement .hs{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--brand)}
/* kicker: apró, tág tracking, MONOKRÓM marad (motif 2 tiltja a másodlagos színt) */
.ds-statement .kicker{color:var(--ink-muted);font-weight:600;letter-spacing:.24em;font-size:.72rem}
/* hero: tiszta fehér, bal-zárt aszimmetria ("Amit NEM veszünk át": a középre-zárás gyengébb) */
.ds-statement .hero{background:var(--hero-bg)}
.ds-statement .hero::before,.ds-statement .hero::after{display:none}
.ds-statement .hero .container{text-align:left;justify-items:start}
.ds-statement .hero-ctas,.ds-statement .hero-stats{justify-content:flex-start}
/* fotó-hátteres hero (fullbleed/page-hero-bg, 2026-07-24 palevi-fix): a téma tinta-színe NEM
   ütheti felül a világos betűt az overlay-en (olvashatóság), és fotón a display-méret mérsékelt —
   a 12rem-es óriás tipó a FEHÉR hero-ra való, nem képre */
.ds-statement .hero-fullbleed h1{color:#fff;font-size:clamp(2.75rem,1.5rem + 4.5vw,5.25rem)}
.ds-statement .page-hero-bg h1,.ds-statement .page-hero-bg h2{color:#fff}
.ds-statement .hero-fullbleed p.sub,.ds-statement .hero-fullbleed .body,.ds-statement .hero-fullbleed .microcopy{color:rgb(255 255 255 / .92)}
.ds-statement .hero-fullbleed .hero-badge{border-color:rgb(255 255 255 / .45);color:rgb(255 255 255 / .85)}
.ds-statement .hero-fullbleed .kicker{color:rgb(255 255 255 / .75)}
/* apró kísérő szöveg (motif 4: 0.75-0.85rem) — a méretugrás maga a kompozíció */
.ds-statement .hero p.sub{font-size:.85rem;letter-spacing:.01em;max-width:28rem;color:var(--hero-soft)}
.ds-statement .hero-badge{background:none;border-color:var(--brand-border);color:var(--ink-muted);font-size:.72rem}
/* AZ EGY HANGOS GESZTUS: vastag akcent-vonal a hero alatt (motif 6, "egyetlen vastag rule") */
.ds-statement .hero-ctas{position:relative;padding-top:1.75rem}
.ds-statement .hero-ctas::before{content:"";position:absolute;top:0;left:0;width:4.5rem;height:4px;background:var(--brand)}
/* gombok: NORMÁL méret (az "óriás CTA tilos" szabály) — kemény sarok, visszafogott felirat */
.ds-statement .btn{border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:600}
.ds-statement .btn-primary{background:var(--brand);color:#fff}
.ds-statement .btn-primary:hover{background:var(--ink)}
.ds-statement .btn-ghost{background:none;border:1px solid var(--ink);color:var(--ink);opacity:1}
.ds-statement .btn-ghost:hover{background:var(--ink);color:#fff}
/* kártyák: sík, hairline elválasztó, NINCS doboz/árnyék (motif 3, "a csend a keret") */
.ds-statement .bento-card,.ds-statement .step,.ds-statement .tier,.ds-statement .contact-card,
.ds-statement .faq-list details,.ds-statement .quote-form fieldset,.ds-statement .offer-card,.ds-statement .pain-card{
  background:none;border:none;border-top:1px solid var(--brand-border);border-radius:0;box-shadow:none;padding-block:2rem}
.ds-statement .bento-card:hover,.ds-statement .step:hover{transform:none;box-shadow:none}
.ds-statement .bento-card .icon{display:none}
.ds-statement .card-media,.ds-statement .hero-media,.ds-statement .media-frame{border-radius:0}
/* checklist: vonal-jelölő (NEM pipa-ikon, NEM gondolatjel-glyph — pozicionált csík) */
.ds-statement .includes li{position:relative;padding-left:1.4em}
.ds-statement .includes li svg{display:none}
.ds-statement .includes li::before{content:"";position:absolute;left:0;top:.65em;width:.85em;height:2px;background:var(--ink)}
/* proof/testimonial: a monokróm pár sötét fele (fekete sáv, fehér szöveg) */
.ds-statement .proof{background:var(--dark);color:#fff}
.ds-statement .testimonial{background:var(--dark2);border:1px solid rgb(255 255 255 / .12)}
/* záró CTA: nincs "óriás CTA-sáv" — visszafogott, világos, hairline-nal záródik (motif "Építőelemek") */
.ds-statement .final-cta{background:var(--bg);color:var(--ink);border-top:2px solid var(--ink)}
.ds-statement .final-cta h2{font-size:clamp(2rem,1.5rem + 2.5vw,3.75rem);color:var(--ink)}
.ds-statement .final-cta .btn-primary{background:var(--brand);color:#fff}
.ds-statement .final-cta .microcopy{color:var(--ink-muted)}
/* lábléc: monokróm, hairline felül, nincs gradiens */
.ds-statement .site-footer{background:var(--bg);color:var(--ink-soft);border-top:1px solid var(--brand-border)}
.ds-statement .site-footer h2,.ds-statement .site-footer h3,.ds-statement .site-footer strong{color:var(--ink)}
.ds-statement .site-footer a{color:var(--ink-soft)}
.ds-statement .reveal{transition:opacity .6s ease,translate .6s ease}