/* ---------- betűtípusok (önhosztolva) ----------
   Anton / Manrope / Space Grotesk. Korábban a Google Fontsról töltődtek
   (fonts.googleapis.com + fonts.gstatic.com), de minden ilyen kérésben elment
   a látogató IP-címe egy harmadik félhez — felesleges GDPR-kockázat egy ilyen
   kis oldalon. Mellékhatásként gyorsabb is: nincs külön DNS-feloldás és TLS
   kapcsolat egy idegen kiszolgálóhoz.

   FONTOS a magyar szöveg miatt: az ő (U+0151) és az ű (U+0171) a LATIN-EXT
   részhalmazban van, nem a latinban — a latin-ext fájlok tehát kötelezőek,
   nem hagyhatók el. A cyrillic / greek / vietnamese részhalmazokat
   szándékosan nem töltöttük le.

   A Manrope és a Space Grotesk VARIÁLIS betűtípus: családonként és
   részhalmazonként EGYETLEN fájl szolgálja ki az összes vastagságot (ezért
   font-weight:200 800, illetve 300 700). Ne tölts le külön fájlt 400/500/600
   stb. vastagsághoz — a Google is ugyanazt a fájlt adja vissza mindegyikre.
   (A styles.css két helyen font-weight:900-at kér; a variális tengely 800-nál
   véget ér, tehát ott 800-ra korlátozódik — ez így is volt a Google Fonts-os
   változatban.)

   font-display:swap: a szöveg azonnal látszik a rendszer-betűvel, és a saját
   betű megérkezésekor cserélődik le, tehát a betöltés sosem blokkolja az
   olvasást.

   Frissítés/bővítés: kérd le a Google Fonts css2 végpontját variális
   tartománnyal (pl. ...family=Manrope:wght@200..800), és a latin +
   latin-ext blokkok woff2 fájljait mentsd a fonts/ mappába
   <család>-<részhalmaz>.woff2 néven. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-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:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-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;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/space-grotesk-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:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/space-grotesk-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;}

/* ---------- tokens ---------- */
:root{
  --bg:#FAF6EC;
  --surface:#FFFFFF;
  --surface-2:#F1E9D6;
  --surface-3:#E9DEC4;
  --ink:#16130E;
  --ink-soft:#5B5546;
  --ink-faint:#6E6656; /* darkened from #8A8371 — the original failed 4.5:1 AA against every light-theme background it's actually used on (eyebrows, form notes, legal "last updated" lines); this clears AA against --bg/--surface/--surface-2 with margin */
  --accent:#F6C500;
  --accent-2:#FFDD4A;
  --accent-ink:#16130E;
  --line:#E2D6B8;
  --line-strong:#CBBB8F;
  --line-input:#8C7D57; /* form-field borders need real (≥3:1) WCAG 1.4.11 contrast, unlike --line-strong's decorative-divider uses elsewhere — see .field input etc. below */
  --shadow: 0 20px 50px -20px rgba(22,19,14,.35);
  --radius-lg: 28px;
  --radius-md: 18px;
  --maxw: 1220px;
  color-scheme: light;
  --ondark:#F7F3E8;
  --ondark-ink:#16130E;
  --ondark-soft: rgba(247,243,232,.72);
  --ondark-faint: rgba(247,243,232,.55);
  --scrollbar-thumb:#B8890A;
  /* constant near-black shades (deliberately don't flip with the theme,
     same convention as --ondark/--accent-ink) — --deep for flat "always
     dark" bands (footer, .band-dark), --photo-backdrop for the base color
     behind the repeated hero-photo sections */
  --deep:#0B0B0C;
  --photo-backdrop:#111012;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#111012;
    --surface:#18171A;
    --surface-2:#201F22;
    --surface-3:#28262A;
    --ink:#F7F3E8;
    --ink-soft:#C6BFAE;
    --ink-faint:#8D8779;
    --accent:#F6C500;
    --accent-2:#FFDD4A;
    --accent-ink:#111012;
    --line:#312F32;
    --line-strong:#403D41;
    --line-input:#757075;
    --shadow: 0 24px 60px -20px rgba(0,0,0,.6);
    --scrollbar-thumb:#F6C500;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111012;
  --surface:#18171A;
  --surface-2:#201F22;
  --surface-3:#28262A;
  --ink:#F7F3E8;
  --ink-soft:#C6BFAE;
  --ink-faint:#8D8779;
  --accent:#F6C500;
  --accent-2:#FFDD4A;
  --accent-ink:#111012;
  --line:#312F32;
  --line-strong:#403D41;
  --line-input:#757075;
  --shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  --scrollbar-thumb:#F6C500;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;}
a,button{-webkit-tap-highlight-color:transparent;}
*::-webkit-scrollbar{width:6px;height:6px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:999px;}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-2);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;}
.display{font-family:'Anton',system-ui,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;}
.num{font-family:'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow-plain{
  font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
/* a single outline color can't clear WCAG 1.4.11's 3:1 against every
   surface this can land on (light bg, dark bg, the always-dark footer/
   photo-backdrop bands, an accent-colored button) — var(--accent) alone
   only cleared it against dark surfaces. Stacking a light ring (var(
   --ondark), constant near-white) with a dark ring (var(--deep), constant
   near-black) guarantees at least one of the two is visible against any
   real background on this site. */
:focus-visible{outline:2px solid var(--ondark);outline-offset:2px;box-shadow:0 0 0 5px var(--deep);}
.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;}

.wave-divider{line-height:0;}
.wave-divider svg{display:block;width:100%;height:64px;}
@media (min-width:960px){.wave-divider svg{height:96px;}}

.wave-hasznalat-folyamat{background:var(--bg);}
.wave-hasznalat-folyamat path{fill:var(--surface-2);}

.wave-gyik-footer{background:var(--surface-2);}
.wave-gyik-footer path{fill:var(--ink);}
:root[data-theme="dark"] .wave-gyik-footer path{fill:var(--deep);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wave-gyik-footer path{fill:var(--deep);}}

/* same footer-transition wave as .wave-gyik-footer above, reused on the legal
   pages (impresszum/ászf/adatvédelem) right before their footer — those pages
   have no --surface-2 band above the footer like the GYIK section does, just
   plain page background, so the wave's own backdrop uses --bg instead */
.wave-legal-footer{background:var(--bg);}
.wave-legal-footer path{fill:var(--ink);}
:root[data-theme="dark"] .wave-legal-footer path{fill:var(--deep);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wave-legal-footer path{fill:var(--deep);}}

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  html{scroll-behavior:smooth;}
}

/* header.site is position:fixed and sits on top of normal page flow (see
   below) — without JS the header never gains its opaque .scrolled state,
   so this banner needs its own top clearance or the fixed header's nav
   links/buttons would visually collide with (and intercept clicks on)
   the banner's text underneath */
.noscript-banner{margin-top:80px;background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line);padding:14px 20px;text-align:center;font-size:.92rem;line-height:1.5;}
.noscript-banner a{color:inherit;text-decoration:underline;}

/* ---------- nav ---------- */
header.site{
  --header-progress:0;
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .35s ease;
}
/* background fades in continuously as --header-progress goes 0→1 while
   scrolling through the hero (see scripts.js), instead of snapping on
   with the .scrolled class — keeps the header legible against the hero
   photo the whole way down, not just once past it */
header.site::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:var(--header-progress);
}
header.site.scrolled{
  border-bottom:1px solid var(--line);
}
/* the mobile nav panel opens UNDER the header (z-index 49 < 50) with its own
   near-opaque light-cream background — if it's opened while still at the
   hero top (--header-progress still 0, header fully transparent), the logo
   text (var(--ondark), meant for the dark hero photo) renders on top of the
   panel's light backdrop instead and goes invisible. Forcing the header
   opaque + ink-colored while the panel is open (menu-open, set in
   scripts.js) fixes this regardless of scroll position. */
header.site.scrolled::before,
header.site.menu-open::before{opacity:1;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;}
.logo{display:flex;align-items:center;gap:12px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.15rem;line-height:1;letter-spacing:-.005em;color:var(--ondark);transition:color .35s ease;}
header.site.scrolled .logo,
header.site.menu-open .logo{color:var(--ink);}
.logo .mark{
  position:relative;overflow:hidden;
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(155deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #000 22%) 100%);
  color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -9px 14px -9px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.logo .mark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
}
.logo:hover .mark{transform:translateY(-1px) scale(1.03);box-shadow:0 7px 16px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -9px 14px -9px rgba(0,0,0,.25);}
.logo .mark svg{position:relative;width:20px;height:20px;stroke-width:2.3;}
.logo small{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.6rem;line-height:1.3;letter-spacing:.15em;color:rgba(247,243,232,.6);text-transform:uppercase;margin-top:4px;transition:color .35s ease;}
header.site.scrolled .logo small,
header.site.menu-open .logo small{color:var(--ink-faint);}
.nav-links{display:none;gap:6px;font-weight:700;font-size:.92rem;}
.nav-links a{
  position:relative;display:flex;align-items:center;gap:7px;
  padding:9px 6px;text-decoration:none;color:rgba(247,243,232,.8);
  transition:color .2s ease;
}
.nav-links a svg{width:16px;height:16px;flex-shrink:0;opacity:.7;transition:opacity .2s ease;}
.nav-links a::after{
  content:"";position:absolute;left:6px;right:6px;bottom:3px;height:1.5px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{color:var(--ondark);}
.nav-links a:hover svg{opacity:1;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--ondark);}
.nav-links a.active svg{opacity:1;}
.nav-links a.active::after{transform:scaleX(1);}
header.site.scrolled .nav-links a{color:var(--ink-soft);}
header.site.scrolled .nav-links a:hover,
header.site.scrolled .nav-links a.active{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:10px;}
.menu-toggle{
  position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,243,232,.3);
  background:rgba(15,14,11,.4);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background-color .35s ease,border-color .35s ease;
}
header.site.scrolled .menu-toggle,
header.site.menu-open .menu-toggle{background:var(--surface);border-color:var(--line-strong);}
.menu-toggle .burger-line{
  position:absolute;left:11px;width:18px;height:2px;border-radius:2px;
  background:var(--ondark);
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .32s cubic-bezier(.4,0,.2,1), background-color .35s ease;
}
header.site.scrolled .menu-toggle .burger-line,
header.site.menu-open .menu-toggle .burger-line{background:var(--ink);}
.menu-toggle .burger-line:nth-child(1){top:14px;}
.menu-toggle .burger-line:nth-child(2){top:19px;}
.menu-toggle .burger-line:nth-child(3){top:24px;}
.menu-toggle[aria-expanded="true"] .burger-line:nth-child(1){top:19px;transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .burger-line:nth-child(2){opacity:0;transform:scaleX(0);}
.menu-toggle[aria-expanded="true"] .burger-line:nth-child(3){top:19px;transform:rotate(-45deg);}
@media (min-width:960px){.menu-toggle{display:none;}}
.mobile-nav-panel{
  position:fixed;top:0;left:0;right:0;z-index:49;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:84px 20px 22px;
  display:flex;flex-direction:column;gap:4px;
  /* content-driven height has no cap — on a short viewport (phone in
     landscape, a foldable/split-screen view) the nav links + theme toggle
     can exceed the screen height; without a scrollable cap the overflowing
     bottom (where the dark-mode toggle lives) is simply unreachable */
  max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .25s ease, opacity .25s ease, visibility .25s;
}
.mobile-nav-panel.open{transform:translateY(0);opacity:1;visibility:visible;}
.mobile-nav-panel a{
  display:flex;align-items:center;gap:12px;
  padding:14px 12px;border-radius:12px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:1.02rem;
}
.mobile-nav-panel a svg{width:19px;height:19px;color:var(--ink-faint);flex-shrink:0;}
.mobile-nav-panel a.active{color:var(--accent-ink);background:var(--accent);}
.mobile-nav-panel a.active svg{color:var(--accent-ink);}
@media (min-width:960px){.mobile-nav-panel{display:none;}}
.theme-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,243,232,.3);
  background:rgba(15,14,11,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ondark);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .2s ease, border-color .2s ease, background-color .35s ease, color .35s ease;
}
header.site.scrolled .theme-btn{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
header.site.scrolled .theme-btn:hover{border-color:var(--accent);}
.theme-btn:hover{transform:translateY(-2px);border-color:var(--accent);}
.theme-btn svg{width:18px;height:18px;}
.theme-btn .moon{display:none;}
:root[data-theme="dark"] .theme-btn .sun{display:none;}
:root[data-theme="dark"] .theme-btn .moon{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none;}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block;}
}
/* on mobile the theme toggle lives inside the hamburger panel instead of the
   header row (see .mobile-theme-row below) so the header stays uncluttered */
@media (max-width:959px){
  .theme-btn{display:none;}
}
.mobile-theme-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;padding:16px 12px 6px;
  border-top:1px solid var(--line);
}
.mobile-theme-row-label{
  display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:1.02rem;color:var(--ink);
}
.mobile-theme-row-label svg{width:19px;height:19px;color:var(--ink-faint);flex-shrink:0;}
.theme-switch{padding:0;border:none;background:none;cursor:pointer;flex-shrink:0;}
.theme-switch-track{
  position:relative;display:block;
  width:52px;height:30px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  transition:background-color .3s ease, border-color .3s ease;
}
.theme-switch-thumb{
  position:absolute;top:3px;left:4px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #000 22%) 100%);
  box-shadow:0 2px 6px -1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.theme-switch-thumb svg{width:13px;height:13px;color:var(--accent-ink);}
.theme-switch-thumb .moon{display:none;}
:root[data-theme="dark"] .theme-switch-thumb{transform:translateX(20px);}
:root[data-theme="dark"] .theme-switch-thumb .sun{display:none;}
:root[data-theme="dark"] .theme-switch-thumb .moon{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-switch-thumb{transform:translateX(20px);}
  :root:not([data-theme="light"]) .theme-switch-thumb .sun{display:none;}
  :root:not([data-theme="light"]) .theme-switch-thumb .moon{display:block;}
}
@media (min-width:960px){.mobile-theme-row{display:none;}}
.nav-call{
  display:none;align-items:center;gap:8px;font-weight:800;font-size:.92rem;
  background:rgba(15,14,11,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ondark);border:1px solid rgba(247,243,232,.3);
  padding:10px 16px;border-radius:999px;text-decoration:none;
  white-space:nowrap;transition:background-color .35s ease, color .35s ease, border-color .35s ease, opacity .3s ease, transform .3s ease;
}
header.site.scrolled .nav-call{background:var(--ink);color:var(--bg);border-color:transparent;}
.nav-call svg{width:16px;height:16px;}
/* .nav-book is a <button> on index.html (no default underline) but an <a>
   on the legal pages (see impresszum.html etc.) — anchors get the browser's
   default underline unless explicitly reset, which none of the rules below
   do, so the legal pages' "Foglalás" link showed an unwanted underline */
.nav-book{display:none;text-decoration:none;}

/* on the legal pages (impresszum/ászf/adatvédelem — see the `legal-dark-header`
   class added to <header> there) the header should keep looking like its own
   un-scrolled state at all times, instead of flipping to the normal opaque
   light .scrolled look once the visitor scrolls past the short .legal-hero —
   explicit client request, since these pages are mostly plain text below a
   short hero band, so the header spends most of the reading time "scrolled".
   Re-applying the SAME always-dark constant tokens the un-scrolled state
   already uses, just for the .scrolled/.menu-open rules above, achieves this
   without touching those rules themselves (still needed for index.html/
   404.html, where the header should keep flipping normally). .nav-call is
   deliberately not overridden here — its scrolled rule already resolves to a
   dark pill/light text via its own inverted var(--ink)/var(--bg) usage. */
header.site.legal-dark-header.scrolled{border-bottom-color:transparent;}
header.site.legal-dark-header.scrolled::before,
header.site.legal-dark-header.menu-open::before{
  background:color-mix(in srgb, var(--photo-backdrop) 86%, transparent);
}
header.site.legal-dark-header.scrolled .logo,
header.site.legal-dark-header.menu-open .logo{color:var(--ondark);}
header.site.legal-dark-header.scrolled .logo small,
header.site.legal-dark-header.menu-open .logo small{color:rgba(247,243,232,.6);}
header.site.legal-dark-header.scrolled .nav-links a{color:rgba(247,243,232,.8);}
header.site.legal-dark-header.scrolled .nav-links a:hover,
header.site.legal-dark-header.scrolled .nav-links a.active{color:var(--ondark);}
header.site.legal-dark-header.scrolled .menu-toggle,
header.site.legal-dark-header.menu-open .menu-toggle{
  background:rgba(15,14,11,.4);border-color:rgba(247,243,232,.3);
}
header.site.legal-dark-header.scrolled .menu-toggle .burger-line,
header.site.legal-dark-header.menu-open .menu-toggle .burger-line{background:var(--ondark);}
header.site.legal-dark-header.scrolled .theme-btn{
  background:rgba(15,14,11,.4);color:var(--ondark);border-color:rgba(247,243,232,.3);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 26px;border-radius:999px;font-weight:800;font-size:.98rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex-shrink:0;}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 30px -12px rgba(246,197,0,.55);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(246,197,0,.65);}
/* .btn-primary's own decorative box-shadow has the same (0,1,0) specificity
   as the global :focus-visible rule and comes later in the file, so on
   equal specificity it silently wins the box-shadow property — dropping
   the double-ring's --deep fallback exactly where it matters most (this
   button sits directly on light theme's own --bg on 404.html and in the
   mobile/tablet booking modal, where the remaining --ondark-only outline
   is nearly invisible). The extra class in this selector raises specificity
   above both, so the ring reliably wins back. */
.btn-primary:focus-visible{box-shadow:0 0 0 5px var(--deep);}
.btn-ghost{background:transparent;border-color:currentColor;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-3px);}
.btn-block{width:100%;}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:clip;
  height:100svh;
  color:var(--ondark);
  background:var(--photo-backdrop);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 38%;}
.hero-scrim{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(9,9,10,.7) 0%, rgba(9,9,10,.28) 30%, rgba(9,9,10,.4) 58%, rgba(9,9,10,.7) 100%);
}
@media (min-width:960px){
  .hero-scrim{
    background:
      linear-gradient(100deg, rgba(9,9,10,.93) 0%, rgba(9,9,10,.8) 30%, rgba(9,9,10,.42) 52%, rgba(9,9,10,.08) 74%, rgba(9,9,10,.02) 88%),
      linear-gradient(to top, rgba(9,9,10,.6) 0%, transparent 22%);
  }
}
.hero-inner{
  position:relative;z-index:1;width:100%;
  padding:clamp(64px,10svh,96px) 24px 20px;
}
@media (min-width:960px){
  .hero-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;}
}
.hero-copy{max-width:700px;}
.hero h1{font-size:clamp(1.8rem, 2.4vw + 3.4svh, 4.6rem);line-height:1.18;color:var(--ondark);}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-sub{
  margin-top:clamp(14px,1.8svh,24px);max-width:44ch;
  padding-left:16px;border-left:3px solid var(--accent);
  font-size:clamp(1rem,.5vw + .6svh,1.15rem);line-height:1.6;font-weight:500;
  color:rgba(247,243,232,.88);
}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(14px,2.4svh,28px);
}
.hero-trust li{
  display:flex;align-items:center;gap:8px;
  background:rgba(15,14,11,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(247,243,232,.22);border-radius:999px;
  padding:9px 15px;
  font-size:.84rem;font-weight:700;color:rgba(247,243,232,.9);white-space:nowrap;
}
.hero-trust svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;}

/* price, "painted" accent block behind the amount instead of a card —
   desktop only, per the user's explicit call to drop the hero's right side on mobile */
.hero-price{display:none;}
@media (min-width:960px){
  .hero-price{
    display:flex;flex-direction:column;gap:8px;flex-shrink:0;
    align-items:flex-end;text-align:right;
  }
  .hero-price-badge{
    display:flex;align-items:center;gap:8px;margin-bottom:2px;
    background:rgba(15,14,11,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(247,243,232,.22);border-radius:999px;
    padding:8px 14px;
    font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(247,243,232,.85);white-space:nowrap;
  }
  .hero-price-badge svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}
  .hero-price .tag{font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,243,232,.6);}
  .hero-price .price-line{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap;}
  .hero-price .amount{
    display:inline-block;font-size:clamp(2rem,1.6vw + 1.8svh,3.1rem);font-weight:700;line-height:1.3;
    background:var(--accent);color:var(--accent-ink);
    padding:2px 10px;border-radius:5px;transform:rotate(-1.2deg);
  }
  .hero-price .unit{font-size:.98rem;font-weight:700;color:rgba(247,243,232,.75);}
}

/* ---------- section basics ---------- */
section{padding:88px 0;scroll-margin-top:16px;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow-plain{display:block;margin-bottom:14px;}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem);}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;max-width:56ch;}
.band-light{background:var(--bg);}
.band-surface{background:var(--surface-2);}
.band-dark{background:var(--ink);color:var(--ondark);}
:root[data-theme="dark"] .band-dark{background:var(--deep);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band-dark{background:var(--deep);}}
.band-dark .section-head p{color:rgba(247,243,232,.7);}
.band-dark .eyebrow-plain{color:rgba(247,243,232,.5);}

/* uses grid */
.uses-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.use-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 22px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.use-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent);}
.use-card .ic{
  width:52px;height:52px;border-radius:14px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.use-card .ic svg{width:26px;height:26px;}
.use-card h3{font-size:1.05rem;font-weight:800;}
.use-card p{margin-top:8px;font-size:.9rem;color:var(--ink-soft);}

.spec-strip-title{margin-top:32px;margin-bottom:12px;font-size:.98rem;font-weight:800;color:var(--ink);}
.spec-strip{display:grid;grid-template-columns:1fr;gap:12px;}
.spec-item{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 18px;
}
.spec-item .ic{
  width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.spec-item .ic svg{width:20px;height:20px;}
.spec-item b{display:block;font-size:1rem;font-weight:800;}
.spec-item span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px;}

/* process */
.process-wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.steps{display:flex;flex-direction:column;gap:28px;}
.step{display:flex;gap:18px;}
.step .n{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;
  width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step h3{font-size:1.15rem;font-weight:800;}
.step p{margin-top:6px;color:var(--ink-soft);max-width:44ch;}
.process-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.process-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.process-photo .cap{
  position:absolute;left:18px;bottom:18px;background:rgba(22,19,14,.82);color:#fff;
  padding:10px 16px;border-radius:999px;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.process-photo .cap svg{width:15px;height:15px;color:var(--accent);}

/* pricing */
.price-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.price-card{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:34px 28px;position:relative;transition:transform .22s ease, box-shadow .22s ease;
}
:root[data-theme="dark"] .price-card:not(.featured), .band-dark .price-card:not(.featured){background:#1D1C1E;border-color:#333136;}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.price-card.featured{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.price-card .plan-name{font-weight:800;font-size:.98rem;letter-spacing:.02em;}
.price-card .plan-note{margin-top:4px;font-size:.82rem;color:var(--ondark-faint);}
.price-card.featured .plan-note{color:rgba(22,19,14,.65);}
.price-card .price{margin-top:22px;display:flex;align-items:flex-end;gap:8px;}
.price-card .price b{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;line-height:1;}
.price-card .price span{font-size:1rem;font-weight:700;padding-bottom:.35rem;color:var(--ondark-faint);}
.price-card.featured .price span{color:rgba(22,19,14,.7);}
.price-card .desc{margin-top:14px;font-size:.9rem;color:var(--ondark-soft);}
.price-card.featured .desc{color:rgba(22,19,14,.78);}

/* hívás gomb az árkártyákon — a foglalás telefonon történik, ezért minden
   árkártyán ott a hívás lehetősége, közvetlenül az ár mellett. A kártyák
   sötét sávban (.band-dark) állnak, ezért a nem-kiemelt kártyákon világos,
   körvonalas gomb kell; a kiemelt (sárga) kártyán sötét gomb ad kontrasztot. */
.price-card .plan-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:20px;padding:12px 18px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:.94rem;font-family:inherit;cursor:pointer;
  background:transparent;color:var(--ondark);border:1.5px solid rgba(247,243,232,.35);
  transition:background-color .2s ease, border-color .2s ease, transform .18s ease;
}
.price-card .plan-cta:hover{background:rgba(247,243,232,.1);border-color:var(--ondark);transform:translateY(-1px);}
.price-card.featured .plan-cta{background:var(--accent-ink);color:var(--accent);border-color:transparent;}
.price-card.featured .plan-cta:hover{background:#000;transform:translateY(-1px);}
.price-card .plan-cta svg{width:16px;height:16px;flex-shrink:0;}
.price-card .pick{
  position:absolute;top:-14px;right:24px;background:var(--ondark-ink);color:var(--accent);
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
}
.gift-strip{
  margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--radius-md);
  padding:20px 24px;
}
:root[data-theme="dark"] .gift-strip, .band-dark .gift-strip{background:#1D1C1E;border-color:#3a373b;}
.gift-strip img{width:74px;height:74px;object-fit:cover;border-radius:14px;flex-shrink:0;}
.gift-strip .gift-tag{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
  background:var(--accent);color:var(--ondark-ink);
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px 5px 10px;border-radius:999px;
}
.gift-strip .gift-tag svg{width:14px;height:14px;}
.gift-strip strong{display:block;font-size:1.02rem;}
.gift-strip p{margin-top:4px;font-size:.88rem;color:var(--ink-soft);}
.band-dark .gift-strip p{color:rgba(247,243,232,.65);}

/* benefits marquee */
.benefits-strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.benefits-track{display:flex;gap:0;width:max-content;animation:scrollx 32s linear infinite;}
@media (prefers-reduced-motion: reduce){.benefits-track{animation:none;}}
.benefits-strip:hover .benefits-track{animation-play-state:paused;}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.benefit-item{display:flex;align-items:center;gap:10px;padding:22px 34px;font-weight:800;font-size:.98rem;white-space:nowrap;}
.benefit-item svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}

/* booking */
.booking-form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--shadow);
}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.03em;margin-bottom:5px;color:var(--ink-soft);}
.field input,.field select,.field textarea,.custom-select-trigger,.flatpickr-alt-field{
  width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line-input);
  background:var(--bg);color:var(--ink);font:inherit;font-weight:600;transition:border-color .18s ease;
}
/* the native <input type=date> drew its own calendar glyph for free; once
   Flatpickr hides that input and shows a plain text altInput instead, that
   glyph is gone, so a matching one is redrawn here as a background-image
   (swapped for a light-stroke version in the desktop glass variant below) */
.flatpickr-alt-field{
  cursor:pointer!important;padding-right:42px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'%3E%3C/rect%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'%3E%3C/path%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:18px 18px!important;
  /* !important here isn't fighting our own cascade (nothing else in this
     stylesheet sets these properties for this element) — some other,
     unidentified higher-priority source (reproduced identically on the
     local dev server and the isolated published Artifact, so it isn't
     browser-extension noise either) was overriding a plain-specificity
     background-image/padding-right on this specific text input; forcing
     these few decorative properties is the confirmed, minimal fix */
}
.field input:focus,.field select:focus,.field textarea:focus,.custom-select-trigger:focus-visible,.flatpickr-alt-field:focus{
  /* var(--accent) alone only clears 3:1 against a dark background — true
     here at every OTHER place this rule applies (dark theme's own --bg, and
     the always-dark glass/photo-backdrop modal restored below at ≥960px),
     but not against light theme's own light --bg, so this base rule (which
     also covers the light-theme mobile/tablet modal) uses --ink-soft, a
     token already guaranteed high-contrast against its own theme's --bg */
  outline:none;border-color:var(--ink-soft);box-shadow:0 0 0 4px rgba(246,197,0,.14);
}
.field select option{background:var(--surface);color:var(--ink);}

/* custom "Bérlés típusa" dropdown — a native <select>'s open popup can't be
   restyled cross-browser (no control over its corner radius or the gap to
   the trigger), so this is a hand-built button+listbox (WAI-ARIA "listbox
   button" pattern) with a real hidden <select> kept in sync underneath for
   unchanged <form> submission (see the .custom-select-native rule below and
   the matching IIFE in scripts.js). */
.custom-select{position:relative;}
.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left;}
.custom-select-arrow{width:16px;height:16px;flex-shrink:0;color:var(--ink-faint);transition:transform .2s ease;}
.custom-select-trigger[aria-expanded="true"] .custom-select-arrow{transform:rotate(180deg);}
.custom-select-list{
  position:absolute;bottom:100%;top:auto;left:0;right:0;z-index:20;
  margin:0 0 8px;padding:6px;list-style:none;
  max-height:240px;overflow-y:auto;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.custom-select-list.open{opacity:1;visibility:visible;transform:translateY(0);}
.custom-select-list li{
  padding:10px 12px;border-radius:9px;font-weight:600;font-size:.94rem;color:var(--ink);
  cursor:pointer;transition:background-color .15s ease, color .15s ease;
}
.custom-select-list li:not([aria-selected="true"]):hover,
.custom-select-list li:not([aria-selected="true"]):focus-visible{background:var(--surface-2);outline:none;}
.custom-select-list li[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);font-weight:800;}
.custom-select-list li[aria-selected="true"]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-3px;}
.custom-select-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Flatpickr theme — repaints the plugin's default classes with our own
   design tokens (flatpickr@4.6.13, self-hosted in vendor/ — see index.html)
   instead of its default light-blue look, so the calendar reads as part of
   this site rather than a bolted-on widget. Covers both themes since --surface/--ink/
   --line/--accent already flip with data-theme. */
.flatpickr-calendar{
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:16px;
  box-shadow:var(--shadow);font-family:'Manrope',sans-serif;
}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{display:none;}
.flatpickr-months{padding:14px 14px 4px;}
.flatpickr-months .flatpickr-month{color:var(--ink);fill:var(--ink);height:34px;}
.flatpickr-current-month{font-size:1rem;padding:0;}
.flatpickr-current-month .cur-month{font-weight:800;color:var(--ink);}
.flatpickr-current-month span.cur-month:hover{background:var(--surface-2);}
.flatpickr-current-month .numInputWrapper{color:var(--ink);}
.flatpickr-current-month .numInputWrapper:hover{background:var(--surface-2);}
.flatpickr-current-month input.cur-year{font-weight:800;color:var(--ink);background:transparent;}
/* vendor CSS ships .flatpickr-current-month input.cur-year:focus{outline:0}
   at high enough specificity to beat the global :focus-visible outline —
   without this, tabbing to the year field shows no focus indicator at all.
   var(--accent) here would only clear WCAG 1.4.11's 3:1 against the always-
   dark glass calendar (restored below at ≥960px) — this base rule also
   covers the standalone/mobile calendar on var(--surface), where var(--ink)
   is the token guaranteed to contrast against that. */
.flatpickr-current-month input.cur-year:focus-visible{outline:3px solid var(--ink);outline-offset:1px;}
.flatpickr-current-month .numInputWrapper span{border-color:var(--line-strong);}
.flatpickr-current-month .numInputWrapper span:hover{background:var(--surface-2);}
.flatpickr-current-month .numInputWrapper span:active{background:var(--line-strong);}
.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:var(--ink-faint);}
.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:var(--ink-faint);}
.flatpickr-weekdays{background:transparent;}
span.flatpickr-weekday{background:transparent;color:var(--ink-faint);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{
  color:var(--ink-faint);fill:var(--ink-faint);top:16px;
}
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:var(--accent);fill:var(--accent);}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--accent);}
.flatpickr-day{color:var(--ink);border-radius:9px;font-weight:600;}
.flatpickr-day.today{border-color:var(--accent);}
.flatpickr-day:hover,.flatpickr-day:focus{background:var(--surface-2);border-color:var(--surface-2);}
/* flatpickr's own vendor CSS ships .flatpickr-day.today:hover and higher-
   specificity focus rules that otherwise beat the generic :hover/theme
   colors above on today's cell and on keyboard-focused selection */
.flatpickr-day.today:hover,
.flatpickr-day.today:focus{background:var(--surface-2);border-color:var(--accent);color:var(--ink);}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800;
}
/* vendor also groups prev/next-month padding-day hover/focus and a selected-
   padding-day combo into its own higher-or-equal-specificity rules — same
   "flatpickr's vendor CSS silently wins a state" pattern as .today above,
   just on cells that only appear once you're viewing a different month */
.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{
  background:var(--surface-2);border-color:var(--surface-2);
}
.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected.nextMonthDay{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--ink-faint);opacity:.5;}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--ink-faint);opacity:.35;cursor:not-allowed;}
.flatpickr-day.inRange{background:var(--surface-2);border-color:var(--surface-2);box-shadow:none;}

.field-row{display:grid;grid-template-columns:1fr;gap:18px;}
.booking-form-grid{display:flex;flex-direction:column;}
@media (min-width:860px){
  .booking-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:stretch;}
  .booking-form-col-msg{
    display:flex;flex-direction:column;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:20px;
  }
  .booking-form-col-msg .field:first-child{flex:1;display:flex;flex-direction:column;}
  .booking-form-col-msg .field:first-child textarea{flex:1;min-height:0;resize:none;}
}
.booking-form-col .field-row{grid-template-columns:1fr;}
.booking-form-col .field-row:not(:last-child){margin-bottom:18px;}
.form-note{margin-top:14px;font-size:.82rem;color:var(--ink-faint);text-align:center;}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.form-note a:hover{color:var(--accent);}
.form-success,.form-error{
  display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line-strong);font-size:.9rem;font-weight:700;align-items:center;gap:10px;
}
.form-success.show,.form-error.show{display:flex;}
.form-success svg,.form-error svg{width:20px;height:20px;flex-shrink:0;}
/* #2E9B4F only clears WCAG 1.4.11's 3:1 against dark theme's --surface-2 —
   in light theme it fails (~2.9:1), so light theme gets a darker green;
   dark theme keeps the original (already-passing) brighter one so its
   margin doesn't shrink for no reason */
.form-success svg{color:#237A3D;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .form-success svg{color:#2E9B4F;}}
:root[data-theme="dark"] .form-success svg{color:#2E9B4F;}
.form-error svg{color:#D64545;}
#bookingSubmit[disabled]{opacity:.6;cursor:not-allowed;}

/* footer */
footer{background:var(--ink);color:rgba(247,243,232,.66);padding:64px 0 28px;}
:root[data-theme="dark"] footer{background:var(--deep);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{background:var(--deep);}}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid rgba(247,243,232,.14);
}
.footer-logo{display:flex;align-items:center;gap:11px;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:-.005em;font-size:1.2rem;color:var(--ondark);}
.footer-logo .mark{
  position:relative;overflow:hidden;
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(155deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #000 22%) 100%);
  color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 3px 10px -3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 12px -8px rgba(0,0,0,.25);
}
.footer-logo .mark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 38%);
}
.footer-logo .mark svg{position:relative;width:20px;height:20px;stroke-width:2.3;}
.footer-tagline{margin-top:14px;font-size:.9rem;line-height:1.65;color:var(--ondark-faint);max-width:34ch;}
.footer-col-title{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,243,232,.55);margin-bottom:16px;
}
.footer-col{display:flex;flex-direction:column;}
.footer-col a{
  padding:7px 0;font-size:.92rem;font-weight:600;text-decoration:none;
  color:rgba(247,243,232,.78);transition:color .2s ease;
}
.footer-col a:hover{color:var(--accent);}
.footer-contact-link{display:flex;align-items:center;gap:10px;}
.footer-contact-link svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;}
.footer-contact-static{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 0;font-size:.92rem;font-weight:600;line-height:1.5;
  color:rgba(247,243,232,.78);
}
.footer-contact-static svg{width:16px;height:16px;margin-top:2px;color:var(--accent);flex-shrink:0;}
.footer-bottom{padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;font-size:.8rem;}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px;flex-shrink:0;}
.footer-legal a{font-weight:700;text-decoration:none;color:rgba(247,243,232,.66);}
.footer-legal a:hover{color:var(--accent);}
@media (min-width:640px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr;gap:24px;}
}

/* mobile sticky cta: a translucent dark glass bar (not tied to the site's
   light/dark theme) so it stays see-through yet always readable, whatever
   section happens to be scrolled underneath it */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(11,11,12,.42);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:none;
}
.mobile-cta .btn{flex:1;padding:14px 10px;font-size:.9rem;}
.mobile-cta .btn-ghost{border-color:var(--ondark-faint);color:var(--ondark);}
.mobile-cta .btn-ghost:hover{background:var(--ondark);color:var(--ondark-ink);}
/* clearance for the fixed cta bar lives on the footer itself (not on body)
   so the footer's own dark background fills that space, instead of the
   page's background color showing through behind the translucent bar */
@media (max-width:959px){
  footer{padding-bottom:110px;}
}

/* ---------- breakpoints ---------- */
@media (max-width:639px){
  .use-card,
  .price-card,
  .booking-form,
  .gift-strip{
    border-radius:0;
    box-shadow:none;
  }
  .use-card{
    background:transparent;border:none;padding:22px 0;
  }
  .use-card:not(:last-child){border-bottom:1px solid var(--line);}
  .use-card .ic{
    width:auto;height:auto;background:transparent;border-radius:0;color:var(--ink);
    margin-bottom:12px;
  }
  .use-card .ic svg{width:28px;height:28px;}
  :root[data-theme="dark"] .use-card .ic{color:var(--accent);}
  .price-card{border:none;padding:26px 0;}
  :root[data-theme="dark"] .price-card:not(.featured),
  .band-dark .price-card:not(.featured){background:transparent;}
  .price-card.featured{margin-left:-24px;margin-right:-24px;padding:26px 24px;}
  .booking-form{background:transparent;border:none;padding:0;}
  #arak{padding-bottom:0;}
  .gift-strip{
    margin-left:-24px;margin-right:-24px;border-radius:0;
    border-left:none;border-right:none;padding:22px 24px;
  }
  #gyik{padding-bottom:32px;}

  /* benefits marquee: still auto-scrolls, but pauses so a finger can drag it (see scripts.js) */
  .benefits-strip{
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
  .benefits-strip::-webkit-scrollbar{display:none;}
  .benefits-track{animation:none;}
}
@media (max-width:639px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .use-card .ic{color:var(--accent);}
}
@media (min-width:640px){
  .uses-grid{grid-template-columns:repeat(4,1fr);}
  .spec-strip-title{margin-top:36px;}
  .spec-strip{grid-template-columns:repeat(4,1fr);}
  .field-row{grid-template-columns:1fr 1fr;}
}
@media (min-width:860px){
  .price-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:960px){
  .mobile-cta{display:none;}
  .nav-links{display:flex;}
  .nav-call{display:inline-flex;}
  .process-wrap{grid-template-columns:.95fr 1.05fr;}
  /* .theme-btn switches to position:fixed below (pinned to the viewport's
     own right edge, not .wrap's), so it's removed from .nav's flex flow —
     .nav-right's actual last item, .nav-book, would otherwise reflow all
     the way to .wrap's own right edge and, at any width where .wrap hasn't
     yet reached its 1220px max-width and centered with real margins
     (roughly 960-1320px — an entirely ordinary laptop/windowed-browser
     range), physically collide with the fixed circle: overlapping visible
     text and, since .theme-btn sits on top (z-index:70 vs none), stealing
     part of the "Foglalás" button's click area. Reserving real space on
     .nav's own right padding (46px button width + 28px right offset + a
     comfortable gap) keeps .nav-book clear at every width; the extra
     padding is harmless once .wrap is wide enough to clear the button on
     its own. */
  .nav{padding-right:92px;}

  .nav-book{
    display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;
    background:var(--accent);color:var(--accent-ink);border:none;
    padding:10px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease, opacity .3s ease;
  }
  .nav-book:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(246,197,0,.6);}
  /* same box-shadow-vs-:focus-visible defeat as .btn-primary/.theme-btn
     above, but here the competing rule is :hover, not the element's own
     unconditional style — .nav-book:hover is (0,2,0), strictly higher than
     the GLOBAL :focus-visible rule's (0,1,0), so hovering alone always wins
     that fight regardless of source order. Tabbing to this button then
     resting the mouse over it (an ordinary sequence) would otherwise drop
     the --deep fallback ring on header.site.scrolled's light --bg, where
     the remaining --ondark-only outline is nearly invisible. The override
     below, .nav-book:focus-visible, is ALSO (0,2,0) — a tie with :hover,
     not a strict win — so it relies on appearing later in source order to
     win when both states apply at once; keep it after the :hover rule. */
  .nav-book:focus-visible{box-shadow:0 0 0 5px var(--deep);}
  .nav-book svg{width:16px;height:16px;}

  /* theme toggle: pinned at the header's own vertical band on the page's right
     edge, so it stays visually part of the header row at every scroll position
     instead of jumping to a mid-page floating spot */
  .theme-btn{
    position:fixed;top:14px;right:28px;z-index:70;
    width:46px;height:46px;
    background:var(--surface);border:1px solid var(--line);color:var(--ink);
    box-shadow:var(--shadow);backdrop-filter:none;
  }
  .theme-btn:hover{transform:translateY(-3px);border-color:var(--accent);}
  /* same box-shadow-vs-:focus-visible defeat as .btn-primary above — at this
     width .theme-btn sits on plain var(--surface) (white in light theme),
     where losing the double-ring's --deep fallback leaves only the
     near-white --ondark outline, effectively invisible */
  .theme-btn:focus-visible{box-shadow:0 0 0 5px var(--deep);}
}

@media (min-width:768px){
  .section-head-photo{
    position:relative;overflow:hidden;border-radius:var(--radius-lg);
    max-width:none;padding:60px 48px;margin-bottom:52px;
    background-image:
      linear-gradient(180deg, rgba(9,9,10,.7) 0%, rgba(9,9,10,.48) 45%, rgba(9,9,10,.82) 100%),
      url("hero_bg.jpg");
    background-size:cover;background-position:60% 32%;
    background-attachment:fixed;
    box-shadow:0 26px 60px -24px rgba(0,0,0,.5);
  }
  .section-head-photo .eyebrow-plain{color:rgba(247,243,232,.6);}
  .section-head-photo h2{color:var(--ondark);}
  .section-head-photo p{color:rgba(247,243,232,.85);}
}

/* ---------- FAQ ---------- */
.faq-panel{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:14px 24px;
}
.faq-panel-icon{
  position:absolute;top:-36px;right:-36px;width:180px;height:180px;
  color:var(--accent);opacity:.07;pointer-events:none;
}
@media (min-width:860px){
  .faq-panel{max-width:760px;margin:0 auto;padding:16px 44px;}
}
@media (min-width:960px){
  /* same image + position + fixed attachment on the section AND the wave right
     below it, so the photo reads as one continuous plane across both instead
     of a flat color band where the wave meets the section */
  #gyik.band-surface,
  .wave-gyik-footer{
    background-color:var(--photo-backdrop);
    background-image:linear-gradient(rgba(11,11,12,.82),rgba(11,11,12,.82)), url("hero_bg.jpg");
    background-size:cover;background-position:60% 32%;background-repeat:no-repeat;
    background-attachment:fixed;
  }
  #gyik.band-surface{position:relative;}
}
@media (max-width:639px){
  .faq-panel{background:transparent;border:none;box-shadow:none;padding:0;}
  .faq-panel-icon{display:none;}
}
.faq-list{position:relative;display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 12px;margin:0 -12px;border-radius:10px;background:none;border:none;text-align:left;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1.02rem;color:var(--ink);
  transition:background-color .15s ease;
}
.faq-question:active{background:var(--surface-2);}
.faq-question .faq-icon{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .3s ease, border-color .2s ease, background-color .2s ease;
}
.faq-question .faq-icon svg{width:14px;height:14px;color:var(--ink);transition:transform .3s ease;}
.faq-item[data-open="true"] .faq-question .faq-icon{background:var(--accent);border-color:var(--accent);}
.faq-item[data-open="true"] .faq-question .faq-icon svg{transform:rotate(45deg);color:var(--accent-ink);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-answer-inner{padding:0 34px 22px 2px;color:var(--ink-soft);font-size:.96rem;max-width:66ch;}
@media (min-width:960px){
  /* faq panel turns into translucent glass over the section's photo background,
     so text/icon colors need to switch from theme tokens to constant on-dark ones */
  .faq-panel{
    background:rgba(15,14,17,.22);border-color:rgba(247,243,232,.16);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .faq-item{border-bottom-color:rgba(247,243,232,.16);}
  .faq-question{color:var(--ondark);}
  .faq-question:active{background:rgba(247,243,232,.08);}
  .faq-question .faq-icon{border-color:rgba(247,243,232,.35);color:var(--ondark);}
  .faq-question .faq-icon svg{color:var(--ondark);}
  .faq-answer-inner{color:var(--ondark-soft);}
}

/* ---------- cookie consent ---------- */
.cookie-banner{
  position:fixed;left:16px;right:16px;
  bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:70;margin:0 auto;max-width:520px;
  background:var(--ink);color:var(--ondark);
  border-radius:20px;padding:20px 22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  display:none;flex-direction:column;gap:14px;
  transform:translateY(16px);opacity:0;transition:transform .3s ease, opacity .3s ease;
}
:root[data-theme="dark"] .cookie-banner{background:#403D38;color:var(--ondark);}
:root[data-theme="dark"] .cookie-banner p{color:rgba(247,243,232,.78);}
:root[data-theme="dark"] .cookie-actions .btn-ghost{color:var(--ondark);}
:root[data-theme="dark"] .cookie-actions .btn-ghost:hover{background:var(--ondark);color:var(--ondark-ink);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cookie-banner{background:#403D38;color:var(--ondark);}
  :root:not([data-theme="light"]) .cookie-banner p{color:rgba(247,243,232,.78);}
  :root:not([data-theme="light"]) .cookie-actions .btn-ghost{color:var(--ondark);}
  :root:not([data-theme="light"]) .cookie-actions .btn-ghost:hover{background:var(--ondark);color:var(--ondark-ink);}
}
.cookie-banner.show{display:flex;}
.cookie-banner.show.in{transform:translateY(0);opacity:1;}
.cookie-banner p{font-size:.86rem;line-height:1.55;color:rgba(247,243,232,.82);}
.cookie-banner a{color:var(--accent);text-decoration:underline;}
.cookie-banner .cookie-icon{display:none;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.cookie-actions .btn{padding:11px 20px;font-size:.86rem;}
.cookie-actions .btn-ghost{color:var(--ondark);}
.cookie-actions .btn-ghost:hover{background:var(--ondark);color:var(--ondark-ink);}
@media (min-width:960px){
  .cookie-banner{
    left:50%;right:auto;bottom:24px;
    width:max-content;max-width:calc(100vw - 48px);
    flex-direction:row;align-items:center;gap:20px;padding:18px 24px;
    transform:translateX(-50%) translateY(16px);
  }
  .cookie-banner.show.in{transform:translateX(-50%) translateY(0);}
  .cookie-banner .cookie-icon{display:block;flex-shrink:0;width:30px;height:30px;color:var(--accent);}
  /* korábban white-space:nowrap volt itt (a sáv rövid, egysoros szövegéhez);
     a szöveg azóta hosszabb és pontosabb lett, ezért tördelhető, de kapott egy
     max-width-et, hogy a sáv ne nyúljon el a fél képernyőn */
  .cookie-banner p{flex:none;margin:0;max-width:56ch;}
  .cookie-actions{flex-shrink:0;flex-wrap:nowrap;}
}

/* ---------- booking modal ---------- */
html.modal-open,html.nav-panel-open{overflow:hidden;}
.booking-modal{position:fixed;inset:0;z-index:200;display:none;}
.booking-modal.show{display:block;}
.booking-modal-backdrop{
  position:absolute;inset:0;z-index:0;background:rgba(9,9,10,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease;
}
.booking-modal.show.in .booking-modal-backdrop{opacity:1;}
.booking-modal-panel{
  position:absolute;inset:0;z-index:1;
  background:var(--bg);
  overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .3s ease, transform .3s ease;
}
@media (min-width:960px){
  .booking-modal-panel{
    background-color:var(--photo-backdrop);
    background-image:linear-gradient(rgba(11,11,12,.9), rgba(11,11,12,.9)), url("hero_bg.jpg");
    background-size:cover;background-position:60% 32%;background-repeat:no-repeat;
  }
  .booking-modal-intro{color:rgba(247,243,232,.82);}
  /* The whole form card, not just the individual fields, is meant to be
     glass over the photo here — .booking-form previously kept its base
     opaque var(--surface) background at this width, which in dark theme
     happened to look right anyway (--surface is already dark there, so it
     blended with the photo by coincidence) but in light theme rendered as
     a stark opaque WHITE card sitting in front of the dark photo, with the
     "translucent" field inputs inside it just reading as plain grey boxes
     rather than glass. Making the card itself translucent fixes both: the
     photo genuinely shows through in every theme, not just apparently in
     one of them. Field labels also follow from this — they sit on this
     card, so they use the same light-on-photo treatment as everything else
     here rather than the normal (dark-theme-only-readable) var(--ink-soft). */
  .booking-form{
    background:rgba(24,23,26,.35);border-color:rgba(247,243,232,.16);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .field label{color:rgba(247,243,232,.65);}
  .form-note{color:rgba(247,243,232,.5);}
  .field input,.field select,.field textarea,.custom-select-trigger,.flatpickr-alt-field{
    background:rgba(17,16,18,.4);border-color:rgba(247,243,232,.22);color:var(--ondark);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  /* the base rule's :focus border-color is --ink-soft (needed for the
     light-theme mobile/tablet modal, see comment there) — --ink-soft
     resolves to a DARK color in light theme, which would blend into this
     always-dark photo backdrop, so restore the accent color here, where it
     already has plenty of contrast against the dark backdrop regardless of
     site theme */
  .field input:focus,.field select:focus,.field textarea:focus,.custom-select-trigger:focus-visible,.flatpickr-alt-field:focus{
    border-color:var(--accent);
  }
  .field input::placeholder,.field textarea::placeholder,.flatpickr-alt-field::placeholder{color:rgba(247,243,232,.4);}
  .flatpickr-alt-field{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F3E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'%3E%3C/rect%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'%3E%3C/path%3E%3C/svg%3E")!important;
  }
  .field select option{background:#1a1a1c;color:var(--ondark);}
  .custom-select-arrow{color:rgba(247,243,232,.5);}
  .custom-select-list,.flatpickr-calendar{
    background:rgba(24,23,26,.75);border-color:rgba(247,243,232,.22);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .custom-select-list li{color:var(--ondark);}
  .custom-select-list li:not([aria-selected="true"]):hover,
  .custom-select-list li:not([aria-selected="true"]):focus-visible{background:rgba(247,243,232,.1);}
  /* .cur-month's own color rule below never wins on its own: Flatpickr ships
     a higher-specificity ".flatpickr-current-month span.cur-month{color:
     inherit}" that beats it, so the text actually inherits its parent
     .flatpickr-month's color instead — recoloring that parent is what
     actually fixes it (confirmed by inspecting the live computed styles,
     not guessed). The prev/next month arrows separately never had a glass
     override at all and were stuck at the base (light-theme) ink-faint
     grey, which is dark and thus low-contrast on this backdrop too. */
  .flatpickr-months .flatpickr-month{color:var(--ondark);fill:var(--ondark);}
  .flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{
    color:rgba(247,243,232,.6);fill:rgba(247,243,232,.6);
  }
  .flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:var(--accent);fill:var(--accent);}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--accent);}
  .flatpickr-current-month .cur-month,.flatpickr-current-month input.cur-year,span.flatpickr-weekday,.flatpickr-day{color:var(--ondark);}
  /* the base rule's focus outline is var(--ink) (needed for the standalone/
     mobile calendar on var(--surface)) — in light theme that resolves to a
     dark color, which would blend into this always-dark glass calendar, so
     restore var(--accent) here where it already contrasts well */
  .flatpickr-current-month input.cur-year:focus-visible{outline-color:var(--accent);}
  .flatpickr-current-month span.cur-month:hover{background:rgba(247,243,232,.1);}
  .flatpickr-current-month .numInputWrapper:hover{background:rgba(247,243,232,.1);}
  .flatpickr-current-month .numInputWrapper span{border-color:rgba(247,243,232,.22);}
  .flatpickr-current-month .numInputWrapper span:hover{background:rgba(247,243,232,.1);}
  .flatpickr-current-month .numInputWrapper span:active{background:rgba(247,243,232,.2);}
  .flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(247,243,232,.5);}
  .flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(247,243,232,.5);}
  .flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--ondark);opacity:.4;}
  .flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--ondark);opacity:.3;}
  .flatpickr-day:hover,.flatpickr-day:focus{background:rgba(247,243,232,.1);border-color:rgba(247,243,232,.1);}
  .flatpickr-day.today:hover,
  .flatpickr-day.today:focus{background:rgba(247,243,232,.1);border-color:var(--accent);color:var(--ondark);}
  .flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,
  .flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{
    background:rgba(247,243,232,.1);border-color:rgba(247,243,232,.1);
  }
  .flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected.nextMonthDay{
    background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  }
  .booking-form-col-msg{
    background:rgba(32,31,34,.4);border-color:rgba(247,243,232,.18);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
}
.booking-modal.show.in .booking-modal-panel{opacity:1;transform:translateY(0);}
.booking-modal-scroll{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.booking-modal-scroll::-webkit-scrollbar{width:4px;}
.booking-modal-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 24px;background:var(--bg);border-bottom:1px solid var(--line);
}
.booking-modal-head-title{
  display:flex;align-items:center;gap:10px;
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  font-size:clamp(.95rem,2vw,1.2rem);color:var(--ink);
}
.booking-modal-head-title svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}
.booking-modal-body h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:16px;}
.booking-modal-close{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.booking-modal-close:hover{background:var(--ink);color:var(--bg);transform:rotate(90deg);}
.booking-modal-close svg{width:18px;height:18px;}
.booking-modal-body{padding:20px 24px 40px;display:flex;flex-direction:column;align-items:center;}
.booking-modal-intro{color:var(--ink-soft);margin-bottom:16px;max-width:960px;width:100%;white-space:normal;}
.booking-modal-body form.booking-form{max-width:1040px;width:100%;margin:0 auto;}

@media (min-width:640px){
  .booking-modal-head{padding:14px 40px;}
  .booking-modal-body{padding:24px 40px 56px;}
}
@media (min-width:1024px){
  .booking-modal-intro{white-space:nowrap;}
}

/* ---------- legal pages ---------- */
.legal-hero{
  padding:clamp(120px,20svh,160px) 0 40px;
  background-color:var(--photo-backdrop);
  background-image:linear-gradient(rgba(11,11,12,.82),rgba(11,11,12,.82)), url("hero_bg.jpg");
  background-size:cover;background-position:60% 32%;background-repeat:no-repeat;
  color:var(--ondark);
}
.legal-hero h1{font-size:clamp(2rem,4vw,3.2rem);color:var(--ondark);margin-top:16px;}
.legal-hero p{margin-top:14px;color:rgba(247,243,232,.75);font-size:.95rem;max-width:60ch;}
.legal-body{padding:64px 0 96px;}
.legal-content{max-width:72ch;}
.legal-content h2{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.01em;
  margin-top:44px;margin-bottom:14px;
  scroll-margin-top:calc(var(--legal-content-top,64px) + 16px);
}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-weight:800;font-size:1.05rem;margin-top:24px;margin-bottom:8px;color:var(--ink);}
.legal-content p{color:var(--ink-soft);margin-bottom:14px;line-height:1.7;}
.legal-content ul{margin:14px 0;padding-left:0;}
.legal-content li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--ink-soft);line-height:1.6;}
.legal-content li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--accent);}
.legal-content strong{color:var(--ink);}
.legal-content .placeholder{
  background:color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--ink);padding:1px 7px;border-radius:5px;font-weight:700;
  overflow-wrap:break-word;word-break:break-word;
}
.legal-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem;table-layout:fixed;}
.legal-content table th,.legal-content table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);
  overflow-wrap:break-word;word-break:break-word;
}
.legal-content table th{color:var(--ink);font-weight:800;width:34%;}
.legal-content table.data-table th{width:auto;}
.legal-back{
  display:flex;width:fit-content;align-items:center;gap:8px;margin-bottom:20px;
  font-weight:700;font-size:.88rem;color:rgba(247,243,232,.75);text-decoration:none;
}
.legal-back:hover{color:var(--ondark);}
.legal-back svg{width:16px;height:16px;}
.legal-toc-wrap{
  position:sticky;top:var(--legal-toc-top,64px);z-index:40;
  margin-top:0;margin-bottom:28px;background:var(--bg);
}
.legal-toc{
  display:flex;flex-wrap:nowrap;gap:10px;padding:16px 24px;
  overflow-x:auto;scroll-behavior:smooth;counter-reset:toc;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
}
.legal-toc::-webkit-scrollbar{display:none;}
.legal-toc a{
  counter-increment:toc;display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:9px 16px 9px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-size:.84rem;font-weight:700;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.legal-toc a::before{
  content:counter(toc);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:.7rem;font-weight:800;transition:background-color .2s ease, color .2s ease;
}
.legal-toc a:hover{border-color:var(--accent);color:var(--ink);}
.legal-toc a.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.legal-toc a.active::before{background:var(--accent-ink);color:var(--accent);}
.legal-updated{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-faint);}
.legal-layout{display:flex;flex-direction:column;}
.legal-layout .legal-toc-wrap{order:-1;}
@media (min-width:641px){
  .legal-toc{flex-wrap:wrap;overflow-x:visible;}
}
@media (min-width:960px){
  .legal-layout{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;}
  .legal-layout .legal-content{order:1;}
  .legal-layout .legal-toc-wrap{
    order:2;position:sticky;top:calc(var(--legal-toc-top,64px) + 24px);
    margin-top:0;margin-bottom:0;background:transparent;left:auto;right:auto;
  }
  .legal-layout .legal-toc{
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;
    padding:20px;overflow:visible;
    background:transparent;border:1px solid var(--line);border-radius:var(--radius-md);
  }
  .legal-layout .legal-toc a{
    white-space:normal;justify-content:flex-start;
    border-radius:10px;background:transparent;border:1px solid transparent;
    padding:9px 10px;
  }
  .legal-layout .legal-toc a:hover{background:var(--surface-2);border-color:transparent;}
  .legal-layout .legal-toc a.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
  .legal-layout .legal-toc a.active::before{background:var(--accent-ink);color:var(--accent);}
}

@media (max-width:640px){
  .legal-body{padding-top:28px;}
  .legal-content{max-width:100%;}
  .legal-content table{table-layout:auto;}
  .legal-content table, .legal-content tbody, .legal-content tr,
  .legal-content table th, .legal-content table td{display:block;width:auto;}
  .legal-content tr{padding:14px 0;border-bottom:1px solid var(--line);}
  .legal-content table th, .legal-content table td{border-bottom:none;padding:0;}
  .legal-content table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font-weight:700;margin-bottom:4px;}
  .legal-toc{gap:8px;}
  .legal-toc a{padding:8px 14px 8px 10px;font-size:.8rem;}

  .legal-content table.data-table thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .legal-content table.data-table tr{padding:12px 0;}
  .legal-content table.data-table td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:5px 0;text-align:right;
  }
  .legal-content table.data-table td::before{
    content:attr(data-label);flex-shrink:0;text-align:left;
    color:var(--ink-faint);font-weight:700;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.04em;
  }
}

/* ---------- 404 page ---------- */
.error-page{
  min-height:64svh;display:flex;align-items:center;
  padding:clamp(128px,22svh,168px) 0 80px;
}
.error-page-inner{max-width:520px;margin:0 auto;text-align:center;}
.error-page-code{
  font-size:clamp(2.6rem,6vw,3.8rem);color:var(--ink);
  margin-top:14px;margin-bottom:18px;text-wrap:balance;
}
.error-page-text{color:var(--ink-soft);font-size:1.02rem;line-height:1.65;margin-bottom:30px;}
.error-page-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.error-page-links{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin-top:36px;padding-top:28px;border-top:1px solid var(--line);
}
.error-page-links a{
  font-size:.86rem;font-weight:700;color:var(--ink-soft);text-decoration:none;
  transition:color .2s ease;
}
.error-page-links a:hover{color:var(--accent);}
@media (max-width:640px){
  .error-page-actions .btn{width:100%;justify-content:center;}
}

/* ---------- asztali "hívás" modal ----------
   Asztali gépen a tel: link haszontalan (nincs mivel tárcsázni), ezért
   ≥960px-en, egérrel/trackpaddel használt gépeken a telefonszám-hivatkozások
   nem navigálnak, hanem ezt a panelt nyitják meg: nagy, kimásolható szám,
   a legfontosabb tudnivalók és az árak. Mobilon/tableten a JS ki sem köti
   magát, a tel: link a natív hívást indítja — lásd scripts.js.
   A panel mindig a sötét fotós arculatot használja (--ondark/--accent/--deep,
   ugyanúgy konstansok, mint a .band-dark szekciókban), ezért itt szándékosan
   nincs világos/sötét témaváltás. */
.call-modal{position:fixed;inset:0;z-index:220;display:none;}
.call-modal.show{display:block;}
.call-modal-backdrop{
  position:absolute;inset:0;background:rgba(11,11,12,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
.call-modal.show.in .call-modal-backdrop{opacity:1;}
.call-modal-panel{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-46%) scale(.975);
  width:min(940px, calc(100vw - 56px));max-height:calc(100vh - 56px);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(247,243,232,.18);
  box-shadow:0 44px 100px -34px rgba(0,0,0,.85);
  background:
    linear-gradient(102deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.6) 48%, rgba(11,11,12,.9) 100%),
    url('hero_bg.jpg') 60% 32%/cover no-repeat,
    var(--photo-backdrop);
  color:var(--ondark);
  display:grid;grid-template-columns:1.06fr .94fr;
  opacity:0;transition:opacity .32s ease, transform .32s cubic-bezier(.22,.9,.28,1);
}
.call-modal.show.in .call-modal-panel{opacity:1;transform:translate(-50%,-50%) scale(1);}
.call-modal-close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,11,12,.6);border:1px solid rgba(247,243,232,.28);
  color:var(--ondark);cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .35s ease;
}
.call-modal-close:hover{background:var(--ondark);color:var(--deep);transform:rotate(90deg);}
.call-modal-close svg{width:18px;height:18px;}

.call-modal-media{padding:46px 34px 42px 44px;display:flex;flex-direction:column;gap:16px;}
.call-modal-eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.call-modal-media h2{font-size:clamp(1.65rem,2.4vw,2.15rem);line-height:1.08;margin:0;text-wrap:balance;}
.call-modal-media > p{margin:0;max-width:40ch;font-size:.95rem;line-height:1.6;color:rgba(247,243,232,.8);}
.call-modal-points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.call-modal-points li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:rgba(247,243,232,.92);}
.call-modal-points svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--accent);}

.call-modal-side{
  padding:46px 44px 42px 34px;display:flex;flex-direction:column;gap:12px;
  background:rgba(11,11,12,.58);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  border-left:1px solid rgba(247,243,232,.14);
}
.call-modal-label{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,243,232,.62);
}
.call-modal-number{
  font-weight:900;font-size:clamp(1.5rem,2.1vw,1.85rem);letter-spacing:-.015em;
  color:var(--ondark);text-decoration:none;font-variant-numeric:tabular-nums;
  /* kijelölhető marad: a szám kimásolása gomb nélkül is működjön */
  user-select:text;-webkit-user-select:text;
}
.call-modal-copy{
  align-self:flex-start;margin-top:2px;
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-weight:800;font-size:.88rem;line-height:1;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border:0;
  padding:12px 18px;border-radius:999px;
  transition:background-color .25s ease, transform .2s ease;
}
.call-modal-copy:hover{background:var(--accent-2);transform:translateY(-1px);}
.call-modal-copy svg{width:16px;height:16px;flex:0 0 16px;}
.call-modal-copy .ok{display:none;}
.call-modal-copy.copied .ok{display:block;}
.call-modal-copy.copied .cp{display:none;}
.call-modal-prices{
  margin-top:14px;display:flex;flex-direction:column;gap:1px;
  border-radius:16px;overflow:hidden;border:1px solid rgba(247,243,232,.16);
}
.call-modal-prices > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 15px;background:rgba(247,243,232,.07);
}
.call-modal-prices span{font-size:.84rem;color:rgba(247,243,232,.78);}
.call-modal-prices b{font-weight:900;font-size:.97rem;white-space:nowrap;font-variant-numeric:tabular-nums;}
.call-modal-fine{
  margin:auto 0 0;padding-top:14px;font-size:.78rem;line-height:1.5;
  color:rgba(247,243,232,.58);
}
@media (prefers-reduced-motion: reduce){
  .call-modal-backdrop,.call-modal-panel{transition:none;}
  .call-modal-panel{transform:translate(-50%,-50%);}
  .call-modal-close:hover{transform:none;}
  .call-modal-copy:hover{transform:none;}
}
/* a panel csak asztali szélességen jelenhet meg (a JS is ehhez köti magát);
   ha valaki nyitott állapotban szűkíti az ablakot, a JS zárja — ez csak
   a biztos háló */
@media (max-width:959px){.call-modal{display:none !important;}}

/* A modal nyitásakor a html overflow:hidden-t kap (lásd html.modal-open
   fentebb), amitől eltűnik a görgetősáv és az egész oldal — a fixed fejléc
   tartalmával együtt — oldalra ugrik pár pixelt. A scripts.js megméri a
   görgetősáv tényleges szélességét és --sbw-ként teszi ki a :root-ra; ezek a
   szabályok pontosan ennyivel kompenzálnak, így a nyitás nem mozdítja el a
   hátteret. (Az érték 0px, ha a böngésző overlay görgetősávot használ.) */
html.modal-open{padding-right:var(--sbw,0px);}
html.modal-open header.site{padding-right:var(--sbw,0px);}
html.modal-open .theme-btn{right:calc(28px + var(--sbw,0px));}