/* BlondApex Vendégházaknak: weboldal. A tokenek a BlondApex Vendégházaknak Design System tokens.json-jából.
   Elrendezés: menta hero (DeltaCut) → menta probléma → navy rendszer → fehér lépések → menta kalkulátor →
   fehér árak → menta történet → fehér GYIK → navy kapcsolat. */

@font-face{font-family:"Quicksand";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/quicksand-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/quicksand-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green-900:#1f5c3d;--green-800:#26744c;--green-700:#2e8a5b;--green-600:#379f68;--green-500:#43b277;
  --green-300:#8fd3b0;--green-100:#d6f2e3;--green-50:#f0fff4;
  --navy-900:#12171f;--navy-800:#1a202c;--navy-700:#242b38;--navy-600:#2f3741;--navy-500:#3d4654;
  --grey-600:#4a5568;--grey-500:#68727b;--grey-400:#9aa3ab;--grey-300:#cbd3d8;--grey-200:#e4eae7;--grey-100:#f2f5f3;
  --white:#fff;--red-700:#cb0000;--red-600:#e53e3e;--red-300:#f4a3a3;--red-100:#fde8e8;--amber-500:#dd9b26;

  --surface-page:var(--green-50);--surface-page-alt:var(--white);--surface-card:var(--white);--surface-sunken:var(--grey-100);
  --surface-accent-soft:var(--green-100);--surface-emph:var(--navy-800);--surface-emph-card:var(--navy-600);
  --surface-danger-soft:var(--red-100);
  --text-heading:var(--navy-800);--text-body:var(--grey-600);--text-muted:var(--grey-500);
  --text-on-emph:var(--green-50);--text-on-emph-muted:var(--grey-300);--text-on-emph-accent:var(--green-300);
  --text-link:var(--green-800);--text-danger:var(--red-700);
  --primary:var(--green-800);--on-primary:var(--white);--accent-graphic:var(--green-600);
  --outline:var(--grey-500);--border-subtle:var(--grey-200);--focus:var(--navy-800);--focus-on-emph:var(--green-300);
  --emph-btn:var(--green-300);--on-emph-btn:var(--navy-900);
  --logo-vh:url(../img/logo/vh-on-light.svg);--logo-wm:url(../img/logo/wm-on-light.svg);

  --font-sans:"Quicksand","Segoe UI",system-ui,-apple-system,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:28px;--radius-xxl:48px;--radius-full:999px;
  --elev-1:0 1px 2px rgba(18,23,31,.08),0 1px 3px rgba(18,23,31,.10);
  --elev-2:0 2px 6px rgba(18,23,31,.10),0 4px 12px rgba(18,23,31,.10);
  --elev-3:0 6px 12px rgba(18,23,31,.12),0 12px 28px rgba(18,23,31,.14);
  --state-hover:.08;--state-focus:.10;--state-pressed:.12;--state-disabled:.38;
  --dur-fast-spatial:350ms;--dur-default-spatial:500ms;--dur-fast-effects:150ms;--dur-default-effects:220ms;
  --spring-fast-spatial:linear(0,.033,.119,.236,.369,.504,.634,.75,.849,.931,.993,1.039,1.07,1.087,1.094,1.093,1.087,1.077,1.064,1.052,1.039,1.028,1.018,1.009,1.003,.998,.994,.992,.991,.991,.991,.992,.993,.995,.996,.997,1);
  --spring-fast-effects:linear(0,.159,.414,.627,.775,.869,.925,.958,.977,.987,.993,.996,1);
  --gutter-l:max(16px,env(safe-area-inset-left,0px));--gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface-page:var(--navy-800);--surface-page-alt:var(--navy-900);--surface-card:var(--navy-700);--surface-sunken:var(--navy-900);
    --surface-accent-soft:var(--green-900);--surface-emph:var(--green-900);--surface-emph-card:var(--green-800);--surface-danger-soft:var(--navy-700);
    --text-heading:var(--green-50);--text-body:var(--grey-300);--text-muted:var(--grey-400);
    --text-on-emph-muted:var(--green-100);--text-link:var(--green-300);--text-danger:var(--red-300);
    --primary:var(--green-500);--on-primary:var(--navy-900);--accent-graphic:var(--green-500);
    --outline:var(--grey-400);--border-subtle:var(--navy-500);--focus:var(--green-300);
    --logo-vh:url(../img/logo/vh-primary.svg);--logo-wm:url(../img/logo/wm-mono-mint.svg);color-scheme:dark}
}
:root[data-theme="dark"]{
  --surface-page:var(--navy-800);--surface-page-alt:var(--navy-900);--surface-card:var(--navy-700);--surface-sunken:var(--navy-900);
  --surface-accent-soft:var(--green-900);--surface-emph:var(--green-900);--surface-emph-card:var(--green-800);--surface-danger-soft:var(--navy-700);
  --text-heading:var(--green-50);--text-body:var(--grey-300);--text-muted:var(--grey-400);
  --text-on-emph-muted:var(--green-100);--text-link:var(--green-300);--text-danger:var(--red-300);
  --primary:var(--green-500);--on-primary:var(--navy-900);--accent-graphic:var(--green-500);
  --outline:var(--grey-400);--border-subtle:var(--navy-500);--focus:var(--green-300);
  --logo-vh:url(../img/logo/vh-primary.svg);--logo-wm:url(../img/logo/wm-mono-mint.svg);color-scheme:dark}

/* ---------- Alap ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:500 17px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--text-link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.emph :focus-visible{outline-color:var(--focus-on-emph)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:50;padding:12px 20px;border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);font-weight:700;text-decoration:none}
.skip:focus{top:var(--space-3)}
.ic{width:1.25em;height:1.25em;fill:currentColor;flex:none;vertical-align:middle}
/* Témafüggő képek (nappali/éjszakai hero, világos/sötét demo screenshot) */
:root .th-dark{display:none}
:root[data-theme="dark"] .th-light{display:none}:root[data-theme="dark"] .th-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .th-light{display:none}:root:not([data-theme="light"]) .th-dark{display:block}}
/* Kijelölés és görgetősáv */
::selection{background:var(--green-300);color:var(--navy-900)}
:root{--scroll-thumb:var(--green-600);--scroll-thumb-hover:var(--green-700);--scroll-track:var(--surface-page)}
:root[data-theme="dark"]{--scroll-thumb:var(--green-800);--scroll-thumb-hover:var(--green-700)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--scroll-thumb:var(--green-800);--scroll-thumb-hover:var(--green-700)}}
html{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--scroll-track)}
  ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--radius-full);border:3px solid var(--scroll-track)}
  ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
}
.wrap{width:100%;max-width:calc(1140px + var(--gutter-l) + var(--gutter-r));margin-inline:auto;padding-inline:var(--gutter-l) var(--gutter-r)}

/* ---------- Szerepek ---------- */
.emph{background:var(--surface-emph);color:var(--text-on-emph);
  --text-heading:var(--text-on-emph);--text-body:var(--text-on-emph-muted);--text-muted:var(--text-on-emph-muted);
  --text-link:var(--text-on-emph-accent);--surface-card:var(--surface-emph-card);--primary:var(--emph-btn);--on-primary:var(--on-emph-btn);
  --focus:var(--focus-on-emph);--outline:var(--text-on-emph-muted);--accent-graphic:var(--green-300);--border-subtle:var(--surface-emph-card);
  --logo-vh:url(../img/logo/vh-primary.svg);--logo-wm:url(../img/logo/wm-mono-mint.svg)}
:root[data-theme="dark"] .emph{--logo-vh:url(../img/logo/vh-mono-mint.svg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .emph{--logo-vh:url(../img/logo/vh-mono-mint.svg)}}
.section{padding-block:var(--space-9);background:var(--surface-page);color:var(--text-body)}
.section--alt{background:var(--surface-page-alt)}
.section--emph{background:var(--surface-emph)}
@media (max-width:720px){.section{padding-block:var(--space-8)}}

/* ---------- Tipográfia ---------- */
h1,h2,h3,p{margin:0}
.t-display{font:700 clamp(34px,4.4vw,56px)/1.12 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading);text-wrap:balance}
.t-h1{font:700 clamp(28px,3.2vw,40px)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading);text-wrap:balance}
.t-h2{font:700 clamp(26px,2.6vw,32px)/1.25 var(--font-sans);letter-spacing:-.005em;color:var(--text-heading);text-wrap:balance}
.t-h3{font:600 clamp(21px,2vw,24px)/1.3 var(--font-sans);color:var(--text-heading)}
.t-lead{font:400 clamp(18px,1.5vw,20px)/1.6 var(--font-sans);color:var(--text-body);max-width:64ch;text-wrap:pretty}
.prose{max-width:66ch;text-wrap:pretty}
.prose p+p{margin-top:var(--space-4)}
.caption{font:500 13px/1.45 var(--font-sans);color:var(--text-muted)}
.sh{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px}
.sh--center{margin-inline:auto;text-align:center;align-items:center}

/* ---------- Állapotréteg és gombok ---------- */
.sl{position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent}
.sl::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;z-index:-1;transition:opacity var(--dur-fast-effects) var(--spring-fast-effects)}
@media (hover:hover){.sl:hover::before{opacity:var(--state-hover)}}
.sl:focus-visible::before{opacity:var(--state-focus)}
.sl:active::before{opacity:var(--state-pressed)}
.btn{--h:48px;--r:24px;--rp:12px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--h);padding:10px 24px;border:0;border-radius:var(--r);font:700 16px/24px var(--font-sans);text-decoration:none;cursor:pointer;text-align:center;transition:border-radius var(--dur-fast-spatial) var(--spring-fast-spatial)}
.btn:active{border-radius:var(--rp)}
.btn--l{--h:56px;--r:28px;--rp:16px;padding-inline:28px;font-size:17px}
.btn--filled{background:var(--primary);color:var(--on-primary)}
.btn--outlined{background:transparent;color:var(--text-heading);box-shadow:inset 0 0 0 1.5px var(--outline)}
.btn--text{background:transparent;color:var(--text-link);padding-inline:12px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.btn[disabled]{opacity:var(--state-disabled);cursor:not-allowed}
.btn .ic{font-size:20px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center}

/* ---------- Logó ---------- */
.logo{display:block;background:var(--logo-vh) no-repeat left center/contain}
.logo--vh{aspect-ratio:6575/2002;height:60px}
.logo--wm{aspect-ratio:6575/1490;height:30px;background-image:var(--logo-wm)}

/* ---------- Fejléc: lebegő, homályosított "pill", sticky ---------- */
:root{--head-h:80px}
@media (max-width:480px){:root{--head-h:72px}}
html{scroll-padding-top:calc(var(--head-h) + 8px)}
.site-head{position:sticky;top:0;z-index:40;height:var(--head-h);padding:10px var(--gutter-r) 10px var(--gutter-l);pointer-events:none}
.site-head__in{pointer-events:auto;height:100%;max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 6px 0 20px;border-radius:var(--radius-full);
  background:color-mix(in srgb,var(--surface-page) 74%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border-subtle) 80%,transparent),var(--elev-1);
  transition:background-color var(--dur-default-effects) ease,box-shadow var(--dur-default-effects) ease}
.site-head.is-scrolled .site-head__in{background:color-mix(in srgb,var(--surface-page) 92%,transparent);box-shadow:inset 0 0 0 1px var(--border-subtle),var(--elev-2)}
.site-head__logo{display:block;border-radius:var(--radius-sm)}
.site-head .logo--vh{height:46px}
.site-nav{display:flex;align-items:center;gap:var(--space-1)}
.site-nav a:not(.btn){padding:10px 14px;border-radius:var(--radius-full);color:var(--text-heading);text-decoration:none;font-weight:600;transition:color var(--dur-default-effects) ease,background-color var(--dur-default-effects) ease}
@media (hover:hover){.site-nav a:not(.btn):hover{background:var(--surface-accent-soft);color:var(--text-link)}}
.site-nav a[aria-current="true"]{color:var(--text-link)}
.site-nav__links{display:none;align-items:center;gap:var(--space-1)}
@media (min-width:960px){.site-nav__links{display:flex}}
.site-nav .btn--filled{--h:44px;--r:22px;padding-inline:20px;margin-left:var(--space-1)}
.theme-toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 14px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-heading);font:600 16px/1 var(--font-sans);cursor:pointer}
.theme-toggle .ic{font-size:22px;animation:icon-in var(--dur-default-spatial) var(--spring-fast-spatial)}
@keyframes icon-in{from{transform:rotate(-100deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
.theme-toggle .ic--moon{display:inline}.theme-toggle .ic--sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic--moon{display:none}:root[data-theme="dark"] .theme-toggle .ic--sun{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .ic--moon{display:none}:root:not([data-theme="light"]) .theme-toggle .ic--sun{display:inline}}
.theme-toggle__txt{display:none}
@media (min-width:1100px){.theme-toggle__txt{display:inline}}
@media (max-width:480px){.site-head__in{padding-left:14px}.site-head .logo--vh{height:40px}.theme-toggle{padding:0 10px}.site-nav .btn--text{display:none}.site-nav .btn--filled{padding-inline:16px;font-size:15px}}

/* Témaváltás: kör alakú átúszás a gombtól (View Transitions), máshol színátmenet */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:theme-reveal 600ms cubic-bezier(.45,0,.3,1)}
/* témaváltáskor a hero betöltő animációja ne induljon újra */
.no-intro .hero__art img,.no-intro .hero__copy>*{animation:none}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0))}}
.vt-run *,.vt-run *::before,.vt-run *::after{transition:none!important}
.theme-fade,.theme-fade *,.theme-fade *::before,.theme-fade *::after{transition:background-color 400ms ease,color 400ms ease,border-color 400ms ease,fill 400ms ease,box-shadow 400ms ease!important}

/* ---------- Hero: teljes magasságú fotó a fejléc alatt ---------- */
.hero{position:relative;display:grid;max-width:1760px;margin-inline:auto;margin-top:calc(-1 * var(--head-h));background:var(--surface-page);isolation:isolate}
.hero__art{grid-area:1/1;position:relative;overflow:hidden}
.hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;max-width:none;animation:hero-zoom 1.8s cubic-bezier(.2,.7,.2,1) both}
.hero__copy{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.hero__copy .t-lead{max-width:34ch}
.hero__copy>*{animation:rise 800ms cubic-bezier(.2,.7,.2,1) both}
.hero__copy>:nth-child(2){animation-delay:120ms}.hero__copy>:nth-child(3){animation-delay:240ms}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Mobil/tablet: a fotó kitölti a képernyőt, a szöveg alul, sötét átmeneten; az alsó él a delta átlóját idézi */
@media (max-width:899.98px){
  .hero{min-height:min(92vh,800px);min-height:min(92svh,800px);background:var(--navy-900);clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),0 100%)}
  .hero__art{position:absolute;left:0;right:0;top:0;height:76%}
  .hero__art img{object-position:38% 50%}
  .hero__art::after{content:"";position:absolute;inset:-1px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--navy-900) 35%,transparent) 0,transparent 18%,transparent 48%,color-mix(in srgb,var(--navy-900) 70%,transparent) 76%,var(--navy-900) 100%)}
  .hero__copy{align-self:end;gap:var(--space-4);padding:calc(var(--head-h) + var(--space-6)) var(--gutter-r) calc(44px + var(--space-6)) var(--gutter-l);
    --text-heading:var(--green-50);--text-body:var(--green-100);--text-link:var(--green-300);--primary:var(--green-300);--on-primary:var(--navy-900);--focus:var(--green-300)}
  .hero__copy .t-display{text-shadow:0 2px 24px color-mix(in srgb,var(--navy-900) 50%,transparent)}
  .hero__copy .btn-row{gap:var(--space-2) var(--space-4)}
}
/* Asztali: a fotó a teljes hero magasságban, a delta átlóval levágva (#dc-h), a szöveg jobbra */
@media (min-width:900px){
  .hero{min-height:max(620px,min(100vh,900px));min-height:max(620px,min(100svh,900px))}
  .hero__art{position:absolute;inset:0;clip-path:url(#dc-h)}
  .hero__art img{width:58%;object-position:46% 62%}
  .hero__copy{align-self:center;padding:calc(var(--head-h) + var(--space-5)) max(24px,4%) var(--space-7) 59%}
}

/* ---------- Probléma ---------- */
.problem{display:grid;gap:var(--space-5) var(--space-8);grid-template-columns:minmax(0,1fr)}
.problem__text{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
@media (min-width:900px){.problem{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}}

/* ---------- Rendszer (navy sáv) ---------- */
.sys{display:grid;gap:var(--space-7) var(--space-8);grid-template-columns:minmax(0,1fr)}
.sys__rows{list-style:none;margin:0;padding:0;display:grid}
.sys__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-5);padding-block:var(--space-5);border-top:1px solid var(--border-subtle)}
.sys__row:last-child{border-bottom:1px solid var(--border-subtle)}
.sys__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--surface-emph);color:var(--green-300)}
.sys__ic .ic{font-size:28px}
.sys__row h3{margin-bottom:var(--space-1)}
@media (min-width:900px){.sys{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.waves{display:block;width:100%;height:clamp(90px,12vw,160px);margin-top:var(--space-8)}
.section--waves{padding-bottom:0}

/* ---------- Lépések ---------- */
.steps{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr);counter-reset:step}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-full);background:var(--surface-accent-soft);color:var(--text-heading);font:700 22px/1 var(--font-sans)}
.step h3{margin-bottom:var(--space-2)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}
  .step{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}

/* ---------- Kártyák, mezők ---------- */
.card{border-radius:var(--radius-xl);padding:var(--space-5);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--text-body)}
.card--elevated{box-shadow:var(--elev-1)}
.card--accent{background:var(--surface-accent-soft);box-shadow:none}
.card h3{margin-bottom:var(--space-3)}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.check li{display:flex;gap:10px;align-items:flex-start}
.check .ic{color:var(--accent-graphic);margin-top:3px;font-size:20px}
.tf{display:flex;flex-direction:column;gap:6px}
.tf label{font:600 15px/1.4 var(--font-sans);color:var(--text-heading)}
.tf__req{color:var(--text-danger)}
.tf input,.tf textarea{display:block;width:100%;min-height:52px;padding:14px 16px;border:0;border-radius:var(--radius-lg);background:var(--surface-card);color:var(--text-heading);font:500 17px/24px var(--font-sans);box-shadow:inset 0 0 0 1.5px var(--outline);outline:none;transition:box-shadow var(--dur-fast-effects) var(--spring-fast-effects)}
.tf textarea{resize:vertical;min-height:120px}
.tf input::placeholder,.tf textarea::placeholder{color:var(--text-muted);opacity:1}
.tf input:focus-visible,.tf textarea:focus-visible{box-shadow:inset 0 0 0 2.5px var(--focus)}
.tf__hint{margin:0;font:500 14px/1.45 var(--font-sans);color:var(--text-muted)}
.tf--error input{box-shadow:inset 0 0 0 2px var(--text-danger)}
.tf--error .tf__hint{color:var(--text-danger)}

/* ---------- Kalkulátor ---------- */
.calc{display:grid;gap:var(--space-5);margin-top:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.calc{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.calc__fields{display:grid;gap:var(--space-5);margin-block:var(--space-5)}
.range{display:flex;flex-direction:column;gap:10px}
.range__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.range label{font:600 15px/1.4 var(--font-sans);color:var(--text-heading)}
.range output{font:700 20px/1.2 var(--font-sans);color:var(--text-heading);font-variant-numeric:tabular-nums}
.range input[type=range]{--_pct:50%;--_fill:var(--red-600);-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.range--good input[type=range]{--_fill:var(--accent-graphic)}
.range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--_fill) var(--_pct),var(--border-subtle) var(--_pct))}
.range input[type=range]::-moz-range-track{height:8px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--_fill) var(--_pct),var(--border-subtle) var(--_pct))}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--surface-card);box-shadow:0 0 0 2px var(--_fill),var(--elev-1)}
.range input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--surface-card);box-shadow:0 0 0 2px var(--_fill),var(--elev-1)}
.range input[type=range]:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--radius-sm)}
.range__ends{display:flex;justify-content:space-between;font:500 14px/1.4 var(--font-sans);color:var(--text-muted)}
.range__hint{font:500 14px/1.45 var(--font-sans);color:var(--text-muted)}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-block:12px;border-bottom:1px solid var(--border-subtle)}
.stat:last-of-type{border-bottom:0}
.stat__label{display:flex;flex-direction:column}
.stat__label small{font:500 14px/1.4 var(--font-sans);color:var(--text-muted)}
.stat__value{font:700 20px/1.3 var(--font-sans);color:var(--text-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat--danger .stat__value{color:var(--text-danger)}
.stat--accent .stat__value{color:var(--text-link)}
.results{display:grid;gap:var(--space-3);margin-top:var(--space-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:520px){.results{grid-template-columns:repeat(2,minmax(0,1fr))}}
.result{padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:6px;background:var(--surface-accent-soft);--_c:var(--text-link)}
.result--negative{background:var(--surface-danger-soft);--_c:var(--text-danger)}
.result__label{display:flex;align-items:center;gap:8px;font:700 15px/1.4 var(--font-sans);color:var(--_c)}
.result__value{font:700 clamp(28px,3vw,36px)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--_c);font-variant-numeric:tabular-nums;white-space:nowrap}
.result__foot{font:500 14px/1.45 var(--font-sans);color:var(--text-body)}
.breakeven{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}
.calc__more{margin-top:var(--space-5)}
.wins{display:grid;gap:var(--space-5);margin-top:var(--space-4);padding:0;list-style:none;grid-template-columns:minmax(0,1fr)}
.wins li{display:flex;flex-direction:column;gap:var(--space-2)}
.wins .ic{font-size:28px;color:var(--text-link)}
.wins strong{color:var(--text-heading);font-weight:700}
@media (min-width:760px){.wins{grid-template-columns:repeat(3,minmax(0,1fr))}}
.calc__foot{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;margin-top:var(--space-5)}

/* ---------- Árak ---------- */
.pricing{display:grid;gap:var(--space-5);margin-top:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.pricing{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.price__step{font:700 15px/1.4 var(--font-sans);color:var(--text-link);margin-bottom:var(--space-2)}
.price__amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-block:var(--space-2) var(--space-3);color:var(--text-heading)}
.price__amount s{flex-basis:100%;font:600 20px/1.2 var(--font-sans);color:var(--text-danger)}
.price__amount strong{font:700 clamp(34px,4vw,40px)/1.1 var(--font-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price__note{font:500 15px/1.5 var(--font-sans);color:var(--text-muted);margin-bottom:var(--space-4)}
.plans-wrap{overflow-x:auto}
.plans{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.plans th,.plans td{padding:14px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-subtle)}
.plans thead th{font:700 18px/1.3 var(--font-sans);color:var(--text-heading);border-bottom:2px solid var(--outline)}
.plans tbody th{font:500 16px/1.45 var(--font-sans);color:var(--text-body);width:44%}
.plans td{color:var(--text-heading);font-weight:700}
.plans td .ic{color:var(--accent-graphic);font-size:24px}
.plans td .ic--no{color:var(--text-muted)}
.plans td small{display:block;font:500 14px/1.4 var(--font-sans);color:var(--text-body)}
.plans .is-plus{background:var(--surface-accent-soft)}
.plans tbody tr:last-child th,.plans tbody tr:last-child td{border-bottom:0}
.price__foot{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
@media (max-width:520px){
  .plans,.plans thead,.plans tbody{display:block}
  .plans tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans thead td{display:none}
  .plans th,.plans td{padding:10px 12px}
  .plans thead th{border-bottom-width:2px}
  .plans tbody th{grid-column:1/-1;width:auto;padding:14px 0 4px;border-bottom:0;font-size:15px;color:var(--text-heading);font-weight:600}
  .plans tbody td{font-size:15px;white-space:normal}
  .plans tbody tr:last-child td{border-bottom:0}
  .plans thead th:first-of-type,.plans tbody td:not(.is-plus){padding-left:0}
}

/* ---------- Történet és bizonyíték ---------- */
.story{display:grid;gap:var(--space-7) var(--space-8);grid-template-columns:minmax(0,1fr)}
.story__photo{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;background:var(--surface-sunken)}
.story__photo img{display:block;width:100%;height:100%;object-fit:cover}
.story__text{display:flex;flex-direction:column;gap:var(--space-5)}
@media (min-width:900px){.story{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);align-items:center}.story__photo{order:2}}
.proof{display:grid;gap:var(--space-5);margin-top:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proof .card{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.proof__shot{display:block;width:100%;margin-bottom:var(--space-2)}
.proof__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:var(--radius-lg);outline:1px solid var(--border-subtle);outline-offset:-1px;box-shadow:var(--elev-1)}
.proof__url{font:700 22px/1.3 var(--font-sans);color:var(--text-heading);overflow-wrap:anywhere}

/* ---------- GYIK ---------- */
.faq{display:grid;margin-top:var(--space-7);max-width:840px}
.faq details{border-top:1px solid var(--border-subtle)}
.faq details:last-child{border-bottom:1px solid var(--border-subtle)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;cursor:pointer;list-style:none;font:700 19px/1.4 var(--font-sans);color:var(--text-heading);border-radius:var(--radius-sm);transition:color var(--dur-default-effects) ease}
@media (hover:hover){.faq summary:hover{color:var(--text-link)}}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{font-size:28px;color:var(--text-link);transition:transform var(--dur-default-effects) var(--spring-fast-effects)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details.is-closing summary .ic{transform:none}
.faq__a{max-width:66ch;overflow:hidden}
.faq__a::after{content:"";display:block;height:var(--space-5)}
.faq__a p+p{margin-top:var(--space-3)}

/* ---------- Kapcsolat és lábléc ---------- */
.contact{display:grid;gap:var(--space-7) var(--space-8);grid-template-columns:minmax(0,1fr);margin-top:var(--space-7)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.contact__list{display:grid;gap:var(--space-2);margin-top:var(--space-6)}
.contact-item{display:flex;align-items:center;gap:var(--space-3);padding:6px 10px 6px 6px;margin-left:-6px;border-radius:var(--radius-lg);color:var(--text-heading);text-decoration:none}
.contact-item__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-full);background:var(--surface-emph-card);color:var(--green-300);flex:none}
.contact-item__ic .ic{font-size:22px}
.contact-item__txt{display:flex;flex-direction:column;font:600 17px/1.35 var(--font-sans)}
.contact-item__txt small{font:500 14px/1.4 var(--font-sans);color:var(--text-muted)}
.form{display:grid;gap:var(--space-4)}
.form__hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form__status{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--surface-emph-card);color:var(--text-on-emph);font-weight:600}
.form__status[hidden]{display:none}
.form__note{font:500 14px/1.5 var(--font-sans);color:var(--text-muted)}
.form__note a{color:var(--text-link)}
.site-foot{padding-block:var(--space-6);border-top:1px solid var(--surface-emph-card)}
.site-foot__in{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;justify-content:space-between}
.site-foot__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.site-foot a{color:var(--text-link)}
.site-foot p{font:500 14px/1.5 var(--font-sans);color:var(--text-muted)}

/* ---------- Jogi oldalak ---------- */
.legal{padding-block:var(--space-8)}
.legal .wrap{max-width:calc(820px + var(--gutter-l) + var(--gutter-r))}
.legal h1{margin-bottom:var(--space-3)}
.legal h2{font:700 24px/1.3 var(--font-sans);color:var(--text-heading);margin:var(--space-7) 0 var(--space-3)}
.legal p,.legal li{max-width:70ch}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:var(--space-2)}
.legal p+p{margin-top:var(--space-3)}
.legal__draft{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--surface-danger-soft);color:var(--text-heading);margin-block:var(--space-5);font-weight:600}
.legal table{border-collapse:collapse;width:100%}
.legal td,.legal th{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.legal th{color:var(--text-heading);width:34%}
.ph{background:var(--surface-accent-soft);color:var(--text-heading);padding:0 6px;border-radius:var(--radius-xs);font-weight:700}
.plans td{white-space:nowrap}.plans td small{white-space:normal}

/* ---------- 404: lengő szobakulcs-tartó (az oldal egyetlen mozgó eleme; JS-sel csillapított inga, nélküle a CSS-animáció) ---------- */
.nf-page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.nf{flex:1;display:flex;flex-direction:column}
.nf>.section{flex:1;display:flex;align-items:center;padding-block:var(--space-7) var(--space-8)}
.nf__grid{display:grid;gap:var(--space-6);align-items:center;justify-items:center;text-align:center}
.nf__copy{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.nf__copy .t-lead{max-width:44ch}
.nf__path{font:inherit;font-weight:700;color:var(--text-heading);overflow-wrap:anywhere}
.nf__hint{max-width:44ch;padding-top:var(--space-5);border-top:1px solid var(--border-subtle);font-size:15px;color:var(--text-muted);text-wrap:pretty}
.nf__hint a{font-weight:700;text-underline-offset:.2em;overflow-wrap:anywhere}
.nf__art{width:min(150px,40vw)}
.nf__tag{display:block;width:100%;height:auto;overflow:visible}
.nf__ring{fill:none;stroke:var(--outline);stroke-width:7}
.nf__swing{transform-box:view-box;transform-origin:120px 46px;animation:nf-swing 4.2s cubic-bezier(.45,0,.55,1) .3s both;filter:drop-shadow(0 14px 20px rgba(18,23,31,.18))}
.nf__fob{fill:var(--primary)}
.nf__rim{fill:none;stroke:var(--on-primary);stroke-width:2.5;opacity:.28}
.nf__hole{fill:var(--surface-page)}
.nf__house{fill:var(--green-300)}
.nf__no{fill:var(--on-primary);font:700 80px/1 var(--font-sans);letter-spacing:-.02em}
:root[data-theme="dark"] .nf__house{fill:var(--navy-800)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nf__house{fill:var(--navy-800)}}
@keyframes nf-swing{0%{transform:rotate(-22deg)}22%{transform:rotate(14deg)}42%{transform:rotate(-8deg)}60%{transform:rotate(4.5deg)}76%{transform:rotate(-2deg)}90%{transform:rotate(.8deg)}100%{transform:none}}
.nf__swing.is-js{animation:none;will-change:transform}
.nf__art{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (min-width:900px){
  .nf__grid{grid-template-columns:auto minmax(0,600px);justify-content:center;gap:var(--space-8);justify-items:start;text-align:left}
  .nf__art{width:250px}
  .nf__copy{align-items:flex-start}
}
