/* ============================================================
   Légkondiszerelés — Liquid Glass design rendszer
   Apple-féle áttetsző üveg (glassmorphism) · minimalista · prémium
   ============================================================ */

:root {
  /* Szöveg */
  --ink: #0a1f3c;
  --ink-2: #12294a;
  --slate: #46586e;
  --mist: #6a7d92;

  /* Akcentek — mélykék / jégkék (klímás, hűvös) */
  --teal: #1f5fa8;       /* fő akcent: mélykék */
  --teal-dark: #123f78;  /* sötét navy — szöveg akcent */
  --sky: #3b86cf;        /* világosabb jégkék — átmenetek */
  --amber: #1d5aa0;      /* CTA (kék, nem narancs) */
  --amber-dark: #123f78;
  --gold: #f5b301;       /* csillagok maradnak aranyszínűek */

  /* ÜVEG tokenek */
  --glass:        rgba(255, 255, 255, 0.45);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --glass-soft:   rgba(255, 255, 255, 0.28);
  --glass-line:   rgba(255, 255, 255, 0.55);
  --glass-hair:   rgba(255, 255, 255, 0.35);
  --glass-dark:   rgba(10, 26, 52, 0.62);
  --blur: 20px;

  /* Fények és árnyékok (üveg mélység) */
  --hi: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-sm: 0 4px 20px rgba(13, 27, 42, 0.08);
  --shadow: 0 14px 44px rgba(13, 27, 42, 0.14);
  --shadow-lg: 0 30px 80px rgba(13, 27, 42, 0.22);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 30px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  /* Aurora háttér — ez világít át az üvegen */
  background:
    radial-gradient(1100px 760px at 8% -5%, #d8e9ff 0%, transparent 55%),
    radial-gradient(1000px 720px at 96% 4%, #cfe2fb 0%, transparent 55%),
    radial-gradient(1200px 900px at 50% 108%, #dbe8fb 0%, transparent 55%),
    linear-gradient(180deg, #eef5fb 0%, #eaf2f9 100%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; }

/* Lebegő fény-buborékok a háttérben (mélység) */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(60px); opacity: .5; pointer-events: none;
}
body::before { width: 420px; height: 420px; top: 12%; left: -80px; background: radial-gradient(circle, #9fc7f2, transparent 70%); }
body::after  { width: 460px; height: 460px; bottom: 6%; right: -100px; background: radial-gradient(circle, #aecbf0, transparent 70%); }

/* ---------- Üveg-alap ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow), var(--hi);
}

/* ---------- Tipográfia ---------- */
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { color: var(--slate); }
.accent { color: var(--teal-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-dark);
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-hair);
  padding: 8px 16px; border-radius: 100px; margin-bottom: 22px;
  box-shadow: var(--hi);
}
.eyebrow.amber { color: var(--amber-dark); }

.lead { font-size: 1.18rem; color: var(--slate); max-width: 620px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head p { font-size: 1.12rem; margin-top: 14px; }

/* ---------- Gombok (üveg pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 800; font-size: 1rem;
  padding: 15px 27px; border-radius: 100px; border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;
  white-space: nowrap; position: relative;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: linear-gradient(180deg, #4f97d8, var(--amber));
  color: #fff; border-color: rgba(255,255,255,.35);
  box-shadow: 0 10px 26px rgba(31,95,168,.4), var(--hi);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(31,95,168,.5), var(--hi); }
.btn-dark {
  background: var(--glass-dark); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255,255,255,.18); box-shadow: var(--shadow), var(--hi);
}
.btn-dark:hover { transform: translateY(-3px); background: rgba(15,27,42,.68); }
.btn-ghost {
  background: rgba(255,255,255,.32); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--glass-line); box-shadow: var(--hi);
}
.btn-ghost:hover { background: rgba(255,255,255,.5); transform: translateY(-3px); }
.btn-outline {
  background: rgba(255,255,255,.3); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--glass-line);
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-3px); background: rgba(255,255,255,.5); }
.btn-sm { padding: 11px 21px; font-size: 0.92rem; }

/* ---------- Felső infósáv ---------- */
.topbar {
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  color: #d6e2f0; font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; color: #cddcec; }
.tb-item svg { width: 15px; height: 15px; }
.tb-stars { color: var(--gold); letter-spacing: 1px; }
.tb-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }
.tb-right a { transition: color .2s; }
.tb-right a:hover { color: #fff; }
.tb-book {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  padding: 5px 14px; border-radius: 100px;
}
.tb-book svg { width: 15px; height: 15px; }
.tb-book:hover { background: rgba(255,255,255,.22); }

/* ---------- Logó jel ---------- */
.logo-svg { width: 44px; height: 44px; display: block; flex: none; }
.logo-svg-dark { display: none; }
html.dark .logo-svg { display: none; }
html.dark .logo-svg-dark { display: block; }
.footer .logo-svg { width: 42px; height: 42px; }

/* ---------- Fő fejléc (üveg sáv) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 14px 0; transition: padding .3s;
}
.site-header.scrolled { padding: 8px 0; }
/* Lebegő üveg-kapszula menü */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1340px; height: 64px; padding: 0 14px 0 20px;
  border-radius: 100px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 14px 40px -16px rgba(10,31,60,.42), var(--hi);
  transition: box-shadow .3s, background .3s, height .3s;
}
.site-header.scrolled .nav {
  height: 58px; background: rgba(255,255,255,0.72);
  box-shadow: 0 16px 46px -14px rgba(10,31,60,.5), var(--hi);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.16rem; letter-spacing: -0.02em; flex: none; }
.brand .logo-mark {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, var(--teal), var(--sky));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px rgba(31,95,168,.45), var(--hi);
}
.brand .logo-mark svg { width: 23px; height: 23px; }
.brand small { display: block; font-size: .68rem; font-weight: 600; color: var(--mist); letter-spacing: .02em; }

/* Menü konténer (desktop: sima; mobil: fiók) */
.nav-menu { display: flex; align-items: center; margin-left: auto; }
.nav-close, .nav-menu-foot { display: none; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .93rem; color: var(--ink-2);
  padding: 9px 13px; border-radius: 100px; transition: background .2s, color .2s;
}
.nav-links > li > a:hover { background: rgba(31,95,168,.08); }
.nav-links > li > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); opacity: 0;
}
.nav-links > li > a:hover { color: var(--teal-dark); }
.nav-links > li > a.active { color: var(--teal-dark); }
.nav-links > li > a.active::after,
.nav-links > li:hover > a::after { transform: scaleX(1); opacity: 1; }
.nav-links .chev { width: 15px; height: 15px; transition: transform .28s var(--ease); }
.has-drop:hover .chev { transform: rotate(180deg); }

/* Mega legördülő */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 340px; padding: 12px; display: grid; gap: 6px;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: var(--shadow-lg), var(--hi);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 120;
}
.mega::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 14px; }
.has-drop:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; transition: background .2s, transform .2s; }
.mega-item:hover { background: rgba(255,255,255,.55); transform: translateX(2px); }
.mega-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(31,95,168,.14); color: var(--teal-dark); border: 1px solid var(--glass-hair); box-shadow: var(--hi); }
.mega-ico.sky { background: rgba(59,134,207,.16); color: var(--sky); }
.mega-ico svg { width: 22px; height: 22px; }
.mega-txt b { display: block; font-size: .96rem; color: var(--ink); }
.mega-txt small { color: var(--mist); font-size: .82rem; }

.nav-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-phone { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.nav-phone svg { width: 18px; height: 18px; color: var(--teal); }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.4px; background: var(--ink); border-radius: 2px; margin: 5px 0; transition: .3s; }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(10,26,52,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 150;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
/* Háttér-görgetés letiltása nyitott menünél (iOS-biztos: a body fix pozícióban,
   a görgetési offsetet a JS a --nav-scroll top-ból állítja vissza záráskor). */
body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Nyitott menünél a lebegő gyorsgombok és az alsó mobil-sáv ne lógjanak a menü fölé. */
body.nav-open .fab-cluster,
body.nav-open .mobile-bar,
body.nav-open .cookie-bar { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
/* A teljes képernyős menü a .site-header-en belül van (z-index:100 sticky =
   stacking-context), ami bezárná a rétegződését. Nyitáskor a headert a topbar
   és minden más fölé emeljük, hogy a menü mindent lefedjen. */
body.nav-open .site-header { z-index: 500; }
/* GYÖKÉROK: a görgetett header/nav backdrop-filter-e (és bármely transform/filter)
   containing block-ká válik a position:fixed menühöz, ezért az eltolódik (nem a
   viewporthoz igazodik → a teteje lelóg, felül átdereng a topbar). Nyitáskor
   semlegesítjük, így a teljes képernyős menü pontosan a viewportot fedi. */
body.nav-open .site-header,
body.nav-open .site-header .nav {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: none !important; filter: none !important;
}

/* Szűk desktopon rejtsük a telefont, hogy a kapszula ne szoruljon */
@media (max-width: 1260px) { .nav-phone { display: none; } }

/* ---------- Fejléc mobil menü (≤ 1160px) — TELJES KÉPERNYŐS, tömör overlay ----------
   Újratervezve: a menü az egész viewportot lefedi, átlátszatlan háttérrel. Nincs
   részleges drawer, backdrop-filter vagy áttetszőség, ezért minden böngészőben
   (Brave/iOS is) egyformán, tisztán jelenik meg. A position:fixed !important a
   .site-header .nav > * { position:relative } magasabb specifikusságát üti. */
@media (max-width: 1160px) {
  .nav-phone, .nav-cta-btn { display: none !important; }
  .burger { display: block; }

  .nav-menu {
    position: fixed !important; inset: 0; margin: 0;
    width: 100%; height: 100dvh; z-index: 200;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 80px 24px calc(28px + env(safe-area-inset-bottom));
    background: #eef3fa; color: var(--ink);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .26s ease, visibility 0s .26s;
  }
  body.nav-open .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .26s ease, visibility 0s 0s;
  }

  .nav-close {
    display: grid; place-items: center; position: fixed; top: 18px; right: 18px;
    width: 46px; height: 46px; border-radius: 14px;
    background: #fff; border: 1px solid var(--glass-hair); color: var(--ink);
    box-shadow: 0 6px 18px rgba(10,26,52,.12); cursor: pointer; z-index: 201;
  }
  .nav-close svg { width: 22px; height: 22px; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin: 0; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    display: flex; align-items: center; padding: 16px 18px;
    font-size: 1.16rem; font-weight: 600; border-radius: 14px; color: var(--ink);
  }
  .nav-links > li > a::after { display: none; }
  .nav-links > li > a:hover, .nav-links > li > a.active { background: rgba(31,95,168,.10); }

  .drop-toggle .chev { margin-left: auto; }
  .mega {
    position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
    background: transparent; border: none; box-shadow: none; padding: 2px 0 6px 12px;
    display: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .has-drop.open .mega { display: grid; }
  .has-drop.open .chev { transform: rotate(180deg); }
  /* Sticky-hover kioltása: a desktop .has-drop:hover .mega { transform: translateX(-50%) }
     mobilon tapintáskor bekapcsolt és 176px-szel balra tolta (szétdobta) az almenüt.
     Mobilon a mega mindig statikus, transform nélkül, a menün belül balra igazítva. */
  .has-drop:hover .mega { position: static; transform: none; opacity: 1; visibility: visible; }
  .mega-item { padding: 12px; }
  .mega-ico { width: 38px; height: 38px; }

  .nav-menu-foot { display: flex; gap: 12px; margin-top: auto; padding-top: 26px; }
  .nav-menu-foot .btn { flex: 1; justify-content: center; }
}

/* ---------- Hero (világos aurora + üveg kártya) ---------- */
.hero {
  position: relative; overflow: hidden; padding: 96px 0 108px;
  background:
    radial-gradient(760px 520px at 82% -12%, #bcd8fb 0%, transparent 58%),
    radial-gradient(680px 500px at 6% 14%, #cbe2fb 0%, transparent 58%),
    radial-gradient(760px 560px at 58% 118%, #d3e2f7 0%, transparent 58%),
    linear-gradient(135deg, #eef7fc, #f6fbff);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px 260px at 90% 20%, rgba(255,255,255,.5), transparent 60%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero h1 { color: var(--ink); }
.hero h1 .grad { background: linear-gradient(120deg, var(--teal), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--slate); margin: 22px 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

/* Látványosabb hero gombok */
.hero-actions .btn {
  padding: 16px 26px; font-size: 1.02rem; border-radius: 16px;
  overflow: hidden; position: relative;
}
.hero-actions .btn svg { width: 20px; height: 20px; }
/* Fény-csóva átsuhanás hoverre */
.hero-actions .btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.hero-actions .btn:hover::after { left: 130%; }

/* Elsődleges — erősebb gradiens + lüktető ragyogás */
.hero-actions .btn-primary {
  background: linear-gradient(135deg, #3b86cf 0%, #1f5fa8 55%, #123f78 100%);
  box-shadow: 0 14px 32px rgba(31,95,168,.5), 0 0 0 1px rgba(255,255,255,.25) inset, var(--hi);
  animation: heroPulse 2.8s ease-in-out infinite;
}
.hero-actions .btn-primary:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 44px rgba(31,95,168,.62), var(--hi); }
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(31,95,168,.5), 0 0 0 1px rgba(255,255,255,.25) inset, var(--hi); }
  50%      { box-shadow: 0 14px 40px rgba(59,134,207,.75), 0 0 0 1px rgba(255,255,255,.25) inset, var(--hi); }
}
@media (prefers-reduced-motion: reduce) { .hero-actions .btn-primary { animation: none; } }

/* Másodlagos gombok — határozottabb üveg, színes ikon, hover kitöltés */
.hero-actions .btn-ghost {
  background: rgba(255,255,255,.55);
  border: 1.5px solid rgba(31,95,168,.28);
  color: var(--ink); font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(10,31,60,.28), var(--hi);
}
.hero-actions .btn-ghost svg { color: var(--teal); transition: color .25s; }
.hero-actions .btn-ghost:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(59,134,207,.16), rgba(31,95,168,.1));
  border-color: var(--teal);
  box-shadow: 0 16px 34px -10px rgba(31,95,168,.4), var(--hi);
}
html.dark .hero-actions .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(127,178,234,.35); color: #eaf2ff; }
html.dark .hero-actions .btn-ghost svg { color: #7fb2ea; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.hero-trust .stat b { font-size: 1.5rem; font-weight: 800; display: block; color: var(--ink); }
.hero-trust .stat span { font-size: .84rem; color: var(--mist); }
.hero-divider { width: 1px; height: 40px; background: rgba(13,27,42,.12); }

.hero-visual { position: relative; }
.hero-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-lg), var(--hi);
}
.hero-rating { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--glass-hair); margin-bottom: 22px; }
.hero-rating .score { font-size: 2.6rem; font-weight: 800; color: var(--ink); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; }
.hero-rating small { color: var(--mist); }
.hero-list { list-style: none; display: grid; gap: 14px; }
.hero-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.hero-list .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(31,95,168,.16); display: grid; place-items: center; color: var(--teal-dark); box-shadow: var(--hi); }
.hero-list .ck svg { width: 14px; height: 14px; }

/* ---------- Badges (üveg sáv) ---------- */
.badges { padding: 22px 0; }
.badges .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px;
  background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 20px 26px;
  box-shadow: var(--shadow-sm), var(--hi); max-width: calc(var(--maxw) - 48px);
}
.badge-item { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; color: var(--ink-2); }
.badge-item svg { width: 20px; height: 20px; color: var(--teal); }

/* ---------- Szekció ritmus ---------- */
.pad { padding: 96px 0; }
.pad-sm { padding: 72px 0; }
.bg-cloud { background: rgba(255,255,255,0.18); }

/* ---------- Üveg kártyák ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 34px;
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow), var(--hi); background: var(--glass-strong); }
.card .ico {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px;
  background: rgba(31,95,168,.14); color: var(--teal-dark); border: 1px solid var(--glass-hair); box-shadow: var(--hi);
}
.card .ico.amber { background: rgba(31,95,168,.16); color: var(--amber-dark); }
.card .ico.sky { background: rgba(47,155,216,.16); color: var(--sky); }
.card .ico svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .98rem; }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 800; color: var(--teal-dark); }
.card .more svg { width: 16px; height: 16px; transition: transform .25s; }
.card:hover .more svg { transform: translateX(4px); }

/* ---------- Feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.rev .split-media { order: 2; }
.split-media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow), var(--hi);
  aspect-ratio: 4/3; background: rgba(255,255,255,.25);
  border: 1px solid var(--glass-line);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-list { list-style: none; display: grid; gap: 18px; margin-top: 26px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .ck { flex: none; width: 28px; height: 28px; border-radius: 9px; background: rgba(31,95,168,.16); color: var(--teal-dark); display: grid; place-items: center; border: 1px solid var(--glass-hair); box-shadow: var(--hi); }
.feature-list .ck svg { width: 16px; height: 16px; }
.feature-list b { display: block; color: var(--ink); }
.feature-list span { font-size: .95rem; color: var(--slate); }

/* ---------- Számok sáv (színes üveg) ---------- */
.stats-band {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radius-lg); padding: 48px;
  background: linear-gradient(135deg, rgba(18,52,99,.92), rgba(31,95,168,.82));
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,.35); box-shadow: var(--shadow-lg), var(--hi);
}
.stats-band::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 200px at 20% -20%, rgba(255,255,255,.35), transparent 60%); pointer-events:none; }
.stats-band .grid-4 { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stats-band b { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; display: block; }
.stats-band span { color: rgba(255,255,255,.9); font-weight: 600; font-size: .95rem; }

/* ---------- Ár kártyák (üveg) ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.price-card {
  position: relative; border-radius: var(--radius); padding: 36px 32px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow), var(--hi); background: var(--glass-strong); }
.price-card.featured { border: 1.5px solid rgba(31,95,168,.7); background: var(--glass-strong); box-shadow: 0 20px 50px rgba(31,95,168,.22), var(--hi); }
.price-card .tag { position: absolute; top: 18px; right: 20px; left: auto; background: linear-gradient(180deg,#18bcc0,var(--teal)); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: 100px; box-shadow: 0 8px 18px rgba(31,95,168,.4), var(--hi); z-index: 2; }
.price-card h3 { font-size: 1.15rem; color: var(--slate); font-weight: 700; }
.price-card .amount { font-size: 2.6rem; font-weight: 800; color: var(--ink); margin: 10px 0 4px; letter-spacing: -0.03em; }
.price-card .amount small { font-size: 1rem; color: var(--mist); font-weight: 700; }
.price-card ul { list-style: none; display: grid; gap: 12px; margin: 22px 0 28px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--slate); }
.price-card li svg { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: 3px; }
.price-card .btn { width: 100%; }

/* ---------- Vélemények (üveg) ---------- */
.review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 44px; }
.review-head .big { font-size: 3rem; font-weight: 800; color: var(--ink); }
.reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.review {
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .3s var(--ease), background .3s;
}
.review:hover { transform: translateY(-4px); background: var(--glass-strong); }
.review .stars { font-size: .95rem; }
.review p { color: var(--ink-2); font-size: 1rem; }
.review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; box-shadow: var(--hi); }
.review .who b { display: block; font-size: .95rem; color: var(--ink); }
.review .who span { font-size: .82rem; color: var(--mist); }

/* ---------- Folyamat lépések (üveg) ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.step {
  padding: 28px; border-radius: var(--radius); position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
}
.step .num { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--teal), var(--sky)); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 18px; box-shadow: 0 8px 18px rgba(31,95,168,.35), var(--hi); }
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: .94rem; }

/* ---------- CTA sáv (sötét üveg) ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radius-lg); padding: 64px; text-align: center;
  background:
    radial-gradient(700px 340px at 80% 10%, rgba(31,95,168,.45), transparent 60%),
    var(--glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.2); box-shadow: var(--shadow-lg), var(--hi);
}
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(400px 200px at 15% 95%, rgba(150,190,240,.35), transparent 60%); pointer-events:none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d8e4ee; max-width: 560px; margin: 14px auto 30px; font-size: 1.1rem; }
.cta-band .eyebrow { background: rgba(255,255,255,.14); color: #bfeeee; border-color: rgba(255,255,255,.2); }
.cta-band .eyebrow.amber { color: #ffd9b3; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- FAQ (üveg) ---------- */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  border-radius: var(--radius-sm); overflow: hidden; transition: box-shadow .3s, background .3s;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
}
.faq-item[open] { background: var(--glass-strong); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 24px; font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(31,95,168,.16); color: var(--teal-dark); display: grid; place-items: center; font-size: 1.2rem; transition: transform .3s, background .3s, color .3s; border: 1px solid var(--glass-hair); }
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--teal); color: #fff; }
.faq-item .a { padding: 0 24px 24px; color: var(--slate); }

/* ---------- Kapcsolat (üveg) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info { display: grid; gap: 18px; align-content: start; }
.info-row {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius-sm);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .3s, background .3s;
}
.info-row:hover { transform: translateX(4px); background: var(--glass-strong); }
.info-row .ico { flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(31,95,168,.16); color: var(--teal-dark); display: grid; place-items: center; border: 1px solid var(--glass-hair); box-shadow: var(--hi); }
.info-row .ico svg { width: 22px; height: 22px; }
.info-row b { display: block; margin-bottom: 2px; color: var(--ink); }
.info-row span, .info-row a { color: var(--slate); font-size: .96rem; }
.form-card {
  border-radius: var(--radius); padding: 34px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow), var(--hi);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: 13px;
  font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mist); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); background: rgba(255,255,255,.7); box-shadow: 0 0 0 4px rgba(31,95,168,.14); }
.field textarea { resize: vertical; min-height: 120px; }

/* ---------- Footer (sötét üveg) ---------- */
.footer {
  color: #cdd9e4; padding: 68px 0 30px; margin-top: 40px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 46px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer a { display: block; color: #aebccb; padding: 6px 0; font-size: .95rem; transition: color .2s; }
.footer a:hover { color: #9fc7f2; }
.footer .brand { color: #fff; margin-bottom: 16px; }
.footer .brand small { color: #8ea0b1; }
.footer p { color: #9db0c0; font-size: .92rem; }
.footer .socials { display: flex; gap: 10px; margin-top: 18px; }
.footer .socials a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); }
.footer .socials a:hover { background: var(--teal); color: #fff; }
.footer .socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; color: #8ea0b1; }

/* ---------- Mobil hívás sáv ---------- */
.mobile-bar { display: none; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Aloldal hero (világos üveg) ---------- */
.page-hero {
  padding: 84px 0 72px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(680px 420px at 82% -20%, #bcd8fb 0%, transparent 60%),
    radial-gradient(620px 420px at 10% 10%, #cbe2fb 0%, transparent 60%),
    linear-gradient(135deg, #eef7fc, #f6fbff);
}
.page-hero h1 { color: var(--ink); margin-bottom: 14px; }
.page-hero p { color: var(--slate); max-width: 620px; margin: 0 auto; font-size: 1.12rem; }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: .86rem; color: var(--mist); margin-bottom: 22px; }
.crumbs a:hover { color: var(--teal-dark); }

/* ---------- Reszponzív ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .split.rev .split-media { order: 0; }
  .grid-3, .price-grid, .reviews { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats-band .grid-4 { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .price-grid, .reviews, .steps, .stats-band .grid-4, .footer .cols { grid-template-columns: 1fr; }
  .tb-hide-sm { display: none; }
  .topbar-in { justify-content: center; }
  .tb-right { gap: 10px; }
  .pad { padding: 64px 0; }
  .cta-band, .stats-band { padding: 40px 26px; }
  .hero { padding: 60px 0 76px; }
  .hero-trust { gap: 18px; }
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid var(--glass-line); box-shadow: 0 -6px 24px rgba(13,27,42,.1);
  }
  .mobile-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; font-weight: 800; font-size: .95rem; }
  .mobile-bar a.call { color: var(--teal-dark); }
  .mobile-bar a.book { background: linear-gradient(180deg,#4f97d8,var(--amber)); color: #fff; }
  .mobile-bar svg { width: 18px; height: 18px; }
  body { padding-bottom: 56px; }
  .footer { padding-bottom: 76px; }
}

/* ============================================================
   WOW réteg — mozgás és mikrointerakciók
   ============================================================ */

/* Animált aurora — a háttér-buborékok lassan úsznak */
body::before { animation: drift1 22s ease-in-out infinite alternate; }
body::after  { animation: drift2 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(70px, 50px) scale(1.18); } }
@keyframes drift2 { to { transform: translate(-60px, -34px) scale(1.12); } }

/* Cím-shimmer a heróban */
.hero h1 .grad {
  background: linear-gradient(110deg, var(--teal) 10%, var(--sky) 40%, #7cc7f5 55%, var(--teal) 90%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }

/* Gomb fénycsóva hoverre */
.btn { overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none; transition: left .6s var(--ease);
}
.btn:hover::after { left: 140%; }

/* Üvegkártya — az egeret követő fényfolt */
.card, .price-card { overflow: hidden; }
.card > *, .price-card > * { position: relative; z-index: 1; }
.card::before, .price-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  opacity: 0; transition: opacity .35s; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 60%);
}
.card:hover::before, .price-card:hover::before { opacity: 1; }

/* Logó — halk fénylés-áthúzás */
.logo-svg { position: relative; }
.brand .logo-svg::after { content: none; }

/* Hulló hópelyhek a heróban */
.snowfall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 2; }
.snowflake {
  position: absolute; top: -12px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff, rgba(255,255,255,.25));
  box-shadow: 0 0 6px rgba(255,255,255,.6);
  opacity: 0; will-change: transform; animation: snowfall linear infinite;
}
@keyframes snowfall {
  0%   { transform: translateY(-12px) translateX(0) rotate(0); opacity: 0; }
  10%  { opacity: .9; }
  100% { transform: translateY(105vh) translateX(var(--drift, 30px)) rotate(360deg); opacity: .15; }
}

/* Statisztika-számláló finom felúszása */
.stats-band b { transition: opacity .4s; }

/* Kevesebb mozgás, ha a felhasználó úgy kéri */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .hero h1 .grad, .snowflake, .btn::after { animation: none !important; }
  .snowfall { display: none; }
}

/* ============================================================
   SÖTÉT MÓD
   ============================================================ */
html.dark {
  --ink:#eef4fb; --ink-2:#d3e0ee; --slate:#a9bbce; --mist:#8497ab;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
  --glass-soft: rgba(255,255,255,0.04);
  --glass-line: rgba(255,255,255,0.14);
  --glass-hair: rgba(255,255,255,0.10);
  --glass-dark: rgba(4, 12, 26, 0.6);
  --hi: inset 0 1px 0 rgba(255,255,255,0.12);
  --shadow-sm: 0 4px 20px rgba(0,0,0,.3);
  --shadow: 0 14px 44px rgba(0,0,0,.45);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.55);
  color-scheme: dark;
}
html.dark body {
  background:
    radial-gradient(1100px 760px at 8% -5%, #123457 0%, transparent 55%),
    radial-gradient(1000px 720px at 96% 4%, #0d2a4e 0%, transparent 55%),
    radial-gradient(1200px 900px at 50% 108%, #141d40 0%, transparent 55%),
    linear-gradient(180deg, #081327 0%, #060f20 100%);
}
html.dark body::before { background: radial-gradient(circle, #1c4d7a, transparent 70%); opacity:.4; }
html.dark body::after  { background: radial-gradient(circle, #2a3f74, transparent 70%); opacity:.4; }
html.dark .site-header { background: transparent; }
html.dark .nav { background: rgba(14,26,46,.6); border-color: rgba(255,255,255,.1); box-shadow: 0 16px 46px -16px rgba(0,0,0,.6), var(--hi); }
html.dark .site-header.scrolled .nav { background: rgba(14,26,46,.82); }
html.dark .hero {
  background:
    radial-gradient(760px 520px at 82% -12%, #123a63 0%, transparent 58%),
    radial-gradient(680px 500px at 6% 14%, #0e2e54 0%, transparent 58%),
    radial-gradient(760px 560px at 58% 118%, #161f45 0%, transparent 58%),
    linear-gradient(135deg, #0a1730, #0b1a38);
}
html.dark .page-hero {
  background:
    radial-gradient(680px 420px at 82% -20%, #123a63 0%, transparent 60%),
    radial-gradient(620px 420px at 10% 10%, #0e2e54 0%, transparent 60%),
    linear-gradient(135deg, #0a1730, #0b1a38);
}
html.dark .hero-divider { background: rgba(255,255,255,.14); }
html.dark .nav-links > li > a:hover, html.dark .nav-links > li > a.active { background: rgba(255,255,255,.08); }
html.dark .field input, html.dark .field textarea, html.dark .field select { background: rgba(255,255,255,.06); color: var(--ink); }
html.dark .mega { background: rgba(14,26,46,.98); border-color: rgba(255,255,255,.1); }
html.dark .mega-item:hover { background: rgba(255,255,255,.08); }
html.dark .bg-cloud { background: rgba(255,255,255,.03); }
html.dark .eyebrow { background: rgba(255,255,255,.08); }
html.dark .card:hover::before, html.dark .price-card:hover::before {
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);
}
html.dark .pw-units { background: rgba(255,255,255,.06); }
html.dark .nav-menu { background: #0b1526 !important; }

/* Téma kapcsoló gomb */
.theme-toggle {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff;
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  transition: background .2s, transform .2s; flex: none;
}
.theme-toggle:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: block; } .theme-toggle .sun { display: none; }
html.dark .theme-toggle .moon { display: none; } html.dark .theme-toggle .sun { display: block; }

/* ============================================================
   ÉLŐ ÁRAZÓ KÁRTYA
   ============================================================ */
.pricebox {
  max-width: 560px; margin: 0 auto; text-align: center; padding: 34px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow), var(--hi);
}
.pw-live { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:16px; }
.pw-live .dot { width:8px; height:8px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 0 rgba(46,204,113,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 8px rgba(46,204,113,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0)} }
.pw-q { font-weight:800; font-size:1.05rem; margin-bottom:16px; color:var(--ink); }
.pw-units { display:inline-flex; gap:6px; background:rgba(255,255,255,.4); padding:6px; border-radius:100px; border:1px solid var(--glass-line); box-shadow:var(--hi); }
.pw-units button { padding:11px 26px; border:none; background:transparent; font-family:var(--font); font-weight:800; font-size:1rem; border-radius:100px; cursor:pointer; color:var(--slate); transition:.25s; }
.pw-units button.active { background:linear-gradient(180deg,#4f97d8,var(--amber)); color:#fff; box-shadow:0 8px 18px rgba(31,95,168,.35); }
.pw-price { font-size:3.2rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); margin:20px 0 2px; }
.pw-price small { font-size:1.1rem; color:var(--mist); font-weight:700; }
.pw-note { color:var(--mist); font-size:.92rem; margin-bottom:22px; }
.pw-note b { color:var(--teal-dark); }

/* ============================================================
   ELŐTTE – UTÁNA CSÚSZKA
   ============================================================ */
.ba {
  position: relative; max-width: 920px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow), var(--hi); aspect-ratio: 16/9; user-select: none; touch-action: none;
  border: 1px solid var(--glass-line); background: linear-gradient(135deg,#1f5fa8,#123f78);
}
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba .ba-after { clip-path: polygon(0 0, var(--pos,50%) 0, var(--pos,50%) 100%, 0 100%); }
.ba-label { position:absolute; top:16px; padding:6px 14px; border-radius:100px; font-weight:800; font-size:.78rem; letter-spacing:.06em; color:#fff; background:rgba(10,26,52,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); }
.ba-label.before { right:16px; } .ba-label.after { left:16px; background:rgba(31,95,168,.7); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 14px rgba(0,0,0,.5); }
.ba-grip { position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow); cursor:ew-resize; color:var(--teal-dark); }
.ba-grip svg { width:22px; height:22px; }

/* ============================================================
   GALÉRIA + LIGHTBOX
   ============================================================ */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery figure { position:relative; margin:0; border-radius:16px; overflow:hidden; cursor:pointer; aspect-ratio:1; border:1px solid var(--glass-line); box-shadow:var(--shadow-sm); }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:.78rem; font-weight:700; color:#fff; background:linear-gradient(transparent,rgba(10,26,52,.75)); pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
    .gallery figure:hover img { transform:scale(1.06); }
}
.lightbox { position:fixed; inset:0; background:rgba(6,12,26,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:300; padding:30px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92%; max-height:88%; border-radius:16px; box-shadow:var(--shadow-lg); }
.lb-close { position:absolute; top:22px; right:28px; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:1.4rem; cursor:pointer; display:grid; place-items:center; z-index:2; transition:background .15s; }
.lb-close:hover { background:rgba(255,255,255,.24); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:2rem; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; transition:background .15s, transform .15s; }
.lb-nav:hover { background:rgba(255,255,255,.26); }
.lb-prev { left:24px; }
.lb-next { right:24px; }
.lb-prev:active { transform:translateY(-50%) scale(.92); }
.lb-next:active { transform:translateY(-50%) scale(.92); }
@media (max-width:720px){ .gallery{grid-template-columns:repeat(2,1fr)} .ba{aspect-ratio:4/3} .lb-nav{width:44px;height:44px;font-size:1.6rem} .lb-prev{left:10px} .lb-next{right:10px} }

/* ============================================================
   KLÍMA KATALÓGUS
   ============================================================ */
.klima-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:40px; }
.klima-filter button {
  font-family:var(--font); font-weight:800; font-size:.92rem; padding:10px 20px; border-radius:100px; cursor:pointer;
  background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--glass-line); color:var(--slate); box-shadow:var(--hi); transition:.25s;
}
.klima-filter button:hover { color:var(--teal-dark); transform:translateY(-2px); }
.klima-filter button.active { background:linear-gradient(180deg,#4f97d8,var(--amber)); color:#fff; border-color:transparent; }

.klima-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.klima-card {
  display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(180%); backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--glass-line); box-shadow:var(--shadow-sm), var(--hi);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.klima-card:hover { transform:translateY(-6px); box-shadow:var(--shadow), var(--hi); }
/* Semleges világosszürke „fotó-keret" — a gyártói termékfotók #ececec háttere így beleolvad (fény- és sötét módban is). */
.klima-media { position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,#f2f2f2,#e6e6e6); display:grid; place-items:center; overflow:hidden; }
html.dark .klima-media { background:linear-gradient(135deg,#f2f2f2,#e6e6e6); }
.klima-media img { width:100%; height:100%; object-fit:contain; padding:14px; }
.klima-ph { color:var(--sky); opacity:.5; } .klima-ph svg { width:70px; height:70px; }
.klima-badge { position:absolute; top:14px; left:14px; background:linear-gradient(180deg,#f6a54e,#e07d2c); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.06em; padding:5px 12px; border-radius:100px; box-shadow:0 6px 14px rgba(224,125,44,.4); }
.klima-body { padding:24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.klima-marka { font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark); }
.klima-body h3 { font-size:1.15rem; }
.klima-spec { font-size:.9rem; color:var(--mist); }
.klima-tags { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.klima-tags span { font-size:.74rem; font-weight:700; color:var(--slate); background:rgba(31,95,168,.1); border:1px solid var(--glass-hair); padding:3px 9px; border-radius:8px; }
.klima-price { margin-top:auto; padding-top:12px; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.klima-price s { color:var(--mist); font-size:.95rem; }
.klima-price b { font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.klima-price b.ask { font-size:1.05rem; color:var(--teal-dark); }
.klima-price small { width:100%; color:var(--mist); font-size:.78rem; }
.klima-body .btn { margin-top:14px; width:100%; }
@media (max-width:980px){ .klima-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .klima-grid{grid-template-columns:1fr} }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-body { min-height:100vh; }
.admin-shell { max-width:1080px; margin:0 auto; padding:24px; }
.admin-top { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; margin-bottom:24px;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow-sm), var(--hi); }
.admin-brand { font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.admin-logo { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#2f6fbf,#0e315f); color:#cfe8ff; display:grid; place-items:center; box-shadow:var(--hi); }
.admin-top-actions { display:flex; gap:10px; align-items:center; }
.admin-flash { background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.4); color:#1e8b4e; font-weight:700; padding:12px 18px; border-radius:14px; margin-bottom:20px; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.admin-login { min-height:60vh; display:grid; place-items:center; } .admin-login .form-card { width:100%; max-width:400px; }
.admin-table-wrap { overflow-x:auto; background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow-sm), var(--hi); }
.admin-table { width:100%; border-collapse:collapse; min-width:720px; }
.admin-table th { text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mist); padding:14px 16px; border-bottom:1px solid var(--glass-line); }
.admin-table td { padding:14px 16px; border-bottom:1px solid var(--glass-hair); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-thumb { width:52px; height:40px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.5); display:grid; place-items:center; }
.admin-thumb.ph { color:var(--sky); font-size:1.1rem; }
.admin-marka { font-size:.74rem; font-weight:800; color:var(--teal-dark); background:rgba(31,95,168,.1); padding:3px 9px; border-radius:8px; }
.admin-yes { color:#1e8b4e; font-weight:700; }
.admin-actions { display:flex; gap:8px; white-space:nowrap; }
.admin-del { background:rgba(217,83,79,.12); color:#c9433d; border:1px solid rgba(217,83,79,.3); }
.admin-del:hover { background:rgba(217,83,79,.2); }
.admin-check { display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; }
.admin-check input { width:18px; height:18px; }
.field .err { color:#d9534f; font-size:.85rem; }

.klima-desc { font-size:.88rem; color:var(--slate); line-height:1.5; margin:2px 0; }

/* ============================================================
   TERMÉKOLDAL + KOSÁR
   ============================================================ */
.klima-actions { display:flex; gap:10px; margin-top:14px; }
.klima-actions form { flex:1 1 0; min-width:0; }
.klima-actions form .btn { width:100%; }
.klima-actions .btn-outline { flex:1 1 0; min-width:0; }
.klima-actions .btn-sm { padding:11px 12px; }
.klima-body h3 a { color:inherit; } .klima-body h3 a:hover { color:var(--teal-dark); }

/* Kosár ikon a fejlécben */
.nav-cart { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:var(--ink); border:1px solid var(--glass-line); background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--hi); transition:.2s; flex:none; }
.nav-cart:hover { color:var(--teal-dark); transform:translateY(-2px); }
.nav-cart svg { width:19px; height:19px; }
.nav-cart-badge { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:100px; background:linear-gradient(180deg,#f6a54e,#e07d2c); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; box-shadow:0 4px 10px rgba(224,125,44,.5); }
html.dark .nav-cart { background:rgba(255,255,255,.08); color:var(--ink); }

/* Villanó visszajelzés */
.cart-flash { background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.4); color:#1e8b4e; font-weight:700; padding:14px 18px; border-radius:14px; margin-bottom:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cart-flash a { color:var(--teal-dark); font-weight:800; }

/* Termékoldal */
.product { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.product-media { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,#f2f2f2,#e6e6e6); display:grid; place-items:center; aspect-ratio:1; border:1px solid var(--glass-line); box-shadow:var(--shadow), var(--hi); }
html.dark .product-media { background:linear-gradient(135deg,#f2f2f2,#e6e6e6); }
.product-media img { width:100%; height:100%; object-fit:contain; padding:26px; }
.product-info { padding-top:6px; }
.product-model { color:var(--mist); font-size:.95rem; margin-bottom:14px; }
.product-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding:14px 0; border-top:1px solid var(--glass-line); border-bottom:1px solid var(--glass-line); }
.product-price s { color:var(--mist); font-size:1.1rem; }
.product-price b { font-size:2.2rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.product-price b.ask { font-size:1.3rem; color:var(--teal-dark); }
.product-price small { width:100%; color:var(--mist); font-size:.82rem; }
.product-price .save { background:rgba(224,125,44,.14); color:var(--amber-dark); font-weight:800; font-size:.82rem; padding:3px 10px; border-radius:100px; }
.product-desc { color:var(--slate); margin:18px 0; line-height:1.6; }
.product-buy { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0; }
.qty-box { display:flex; align-items:center; border:1px solid var(--glass-line); border-radius:100px; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); overflow:hidden; }
.qty-btn { width:42px; height:46px; border:none; background:transparent; font-size:1.3rem; font-weight:800; color:var(--ink); cursor:pointer; }
.qty-btn:hover { color:var(--teal-dark); }
.qty-box input { width:46px; text-align:center; border:none; background:transparent; font-family:var(--font); font-weight:800; font-size:1.05rem; color:var(--ink); -moz-appearance:textfield; }
.qty-box input::-webkit-outer-spin-button, .qty-box input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.product-usp { list-style:none; display:grid; gap:10px; margin-top:20px; }
.product-usp li { display:flex; gap:10px; align-items:center; color:var(--slate); font-size:.95rem; }
.product-usp svg { flex:none; width:18px; height:18px; color:var(--teal); }

.product-specs { margin-top:52px; max-width:760px; }
.spec-table { width:100%; border-collapse:collapse; background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm), var(--hi); }
.spec-table th, .spec-table td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--glass-hair); font-size:.96rem; }
.spec-table th { width:220px; color:var(--mist); font-weight:700; }
.spec-table td { color:var(--ink); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom:none; }

/* Kosár oldal */
.cart-wrap { background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--radius); box-shadow:var(--shadow-sm), var(--hi); overflow:hidden; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table thead th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mist); padding:16px 18px; border-bottom:1px solid var(--glass-line); }
.cart-table td { padding:16px 18px; border-bottom:1px solid var(--glass-hair); vertical-align:middle; }
.cart-thumb { width:80px; } .cart-thumb img { width:64px; height:54px; object-fit:contain; border-radius:10px; background:rgba(255,255,255,.5); }
.cart-name { font-weight:800; color:var(--ink); } .cart-name:hover { color:var(--teal-dark); }
.cart-sub { font-size:.84rem; color:var(--mist); }
.cart-qty { width:64px; padding:8px 10px; border:1px solid var(--glass-line); border-radius:10px; background:rgba(255,255,255,.5); font-family:var(--font); font-weight:700; text-align:center; color:var(--ink); }
.cart-del { width:32px; height:32px; border-radius:9px; border:1px solid rgba(217,83,79,.3); background:rgba(217,83,79,.1); color:#c9433d; cursor:pointer; font-weight:800; }
.cart-del:hover { background:rgba(217,83,79,.2); }
.cart-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; flex-wrap:wrap; }
.cart-total { display:flex; align-items:baseline; gap:12px; }
.cart-total span { color:var(--slate); font-weight:700; }
.cart-total b { font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.cart-actions { display:flex; justify-content:space-between; gap:14px; margin-top:26px; flex-wrap:wrap; }

.product-thumbs { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.product-thumb { width:76px; height:76px; border-radius:14px; overflow:hidden; padding:0; cursor:pointer; background:linear-gradient(135deg,#f2f2f2,#e6e6e6); border:1px solid var(--glass-line); transition:border-color .15s, transform .15s, box-shadow .15s; }
.product-thumb img { width:100%; height:100%; object-fit:contain; padding:8px; }
.product-thumb:hover { transform:translateY(-2px); }
.product-thumb.is-active { border-color:var(--teal); box-shadow:0 0 0 2px rgba(20,148,148,.35); }

@media (max-width:820px){ .product { grid-template-columns:1fr; gap:28px; } }
@media (max-width:640px){
  .cart-table thead { display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display:block; width:100%; }
  .cart-table tr { padding:10px 0; border-bottom:1px solid var(--glass-line); }
  .cart-table td { border:none; padding:6px 18px; }
  .cart-table td[data-label]::before { content:attr(data-label) ": "; font-weight:700; color:var(--mist); }
  .cart-thumb { padding-top:14px; }
}

/* ============================================================
   PÉNZTÁR / MEGRENDELÉS
   ============================================================ */
.checkout { display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start; }
/* A jobb oszlop a sor teljes magasságáig érjen, hogy a sticky összegzésnek
   legyen hova tapadnia a hosszú űrlap görgetése közben (align-items:start miatt
   különben csak tartalom-magasságú lenne, és a sticky nem működne). */
.checkout-side { align-self:stretch; }
.err { color:#d9534f; font-size:.85rem; }
.pay-opt { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--glass-line); border-radius:14px; cursor:pointer; margin-bottom:12px; transition:.2s; background:rgba(255,255,255,.35); }
.pay-opt:hover { border-color:var(--teal); }
.pay-opt input { margin-top:4px; width:18px; height:18px; flex:none; }
.pay-opt:has(input:checked) { border-color:var(--teal); background:rgba(31,95,168,.08); box-shadow:var(--hi); }
.pay-body > b { display:block; font-size:1rem; }
.pay-body small { color:var(--slate); font-size:.9rem; }
.checkout-summary { position:sticky; top:96px; }
.sum-list { list-style:none; display:grid; gap:10px; margin-bottom:14px; }
.sum-list li { display:flex; justify-content:space-between; gap:12px; font-size:.95rem; color:var(--slate); }
.sum-list li b { color:var(--ink); white-space:nowrap; }
.sum-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--glass-line); margin-bottom:8px; }
.sum-total b { font-size:1.5rem; font-weight:800; color:var(--ink); }
.sum-note { color:var(--mist); font-size:.85rem; margin:8px 0 16px; }

/* Köszönőoldal + utalási tábla */
.thanks-head { text-align:center; }
.thanks-icon { width:64px; height:64px; margin:0 auto; border-radius:50%; background:linear-gradient(135deg,#2ecc71,#1e8b4e); color:#fff; font-size:2rem; display:grid; place-items:center; box-shadow:0 12px 30px rgba(46,204,113,.4); }
.pay-table { width:100%; border-collapse:collapse; }
.pay-table th, .pay-table td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--glass-hair); font-size:.96rem; }
.pay-table th { width:170px; color:var(--mist); font-weight:700; }
.pay-table tr:last-child th, .pay-table tr:last-child td { border-bottom:none; }

@media (max-width:900px){ .checkout { grid-template-columns:1fr; } .checkout-summary { position:static; } }

/* Admin navigáció + státusz címkék */
.admin-nav { display:flex; gap:6px; margin-left:8px; }
.admin-nav a { font-weight:800; font-size:.9rem; color:var(--slate); padding:8px 14px; border-radius:100px; transition:.2s; }
.admin-nav a:hover { color:var(--teal-dark); background:rgba(255,255,255,.5); }
.admin-nav a.active { background:linear-gradient(180deg,#4f97d8,var(--amber)); color:#fff; }
.st { display:inline-block; font-size:.76rem; font-weight:800; padding:4px 11px; border-radius:100px; }
.st-uj { background:rgba(31,95,168,.14); color:var(--teal-dark); }
.st-utalasra_var, .st-fizetesre_var { background:rgba(242,153,74,.16); color:var(--amber-dark); }
.st-fizetve, .st-teljesitve { background:rgba(46,204,113,.16); color:#1e8b4e; }
.st-megszakitva, .st-lejart, .st-sikertelen { background:rgba(217,83,79,.14); color:#c9433d; }
/* Lead (érdeklődő) státuszok */
.st-felhivva { background:rgba(242,153,74,.16); color:var(--amber-dark); }
.st-ajanlat_kikuldve { background:rgba(79,151,216,.16); color:var(--teal-dark); }
.st-valaszolva_email { background:rgba(155,89,182,.14); color:#7d3c98; }
.st-megnyert { background:rgba(46,204,113,.16); color:#1e8b4e; }
.st-elveszett { background:rgba(217,83,79,.14); color:#c9433d; }
/* Sidebar badge – új leadek száma */
.admin-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#fff; background:var(--amber); border-radius:100px; }
/* Lead-típus chip */
.lead-tipus { display:inline-block; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:100px; background:rgba(79,151,216,.12); color:var(--teal-dark); }
.lead-tipus.t-visszahivas { background:rgba(242,153,74,.14); color:var(--amber-dark); }
.lead-tipus.t-klimavalaszto { background:rgba(155,89,182,.14); color:#7d3c98; }
.lead-uzenet { white-space:pre-line; color:var(--slate); font-size:.86rem; margin:8px 0 0; background:#f6f9fd; border:1px solid rgba(31,95,168,.08); border-radius:10px; padding:10px 12px; max-height:260px; overflow-y:auto; line-height:1.5; }
/* Lead-inbox szűrő + kártyák */
.lead-filter { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.lead-filter-tab { display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:800; padding:7px 14px; border-radius:100px; background:#fff; color:var(--slate); border:1px solid rgba(31,95,168,.14); transition:.15s; }
.lead-filter-tab:hover { border-color:rgba(31,95,168,.4); color:var(--teal-dark); }
.lead-filter-tab.active { background:linear-gradient(135deg,#3b86cf,#1f5fa8); color:#fff; border-color:transparent; }
.lead-filter-tab span { font-size:.74rem; opacity:.85; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:100px; }
.lead-filter-tab.active span { background:rgba(255,255,255,.22); }
.lead-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:16px; margin-top:16px; }
/* auto-fit: kevés leadnél a kártya kitölti a helyet, nem marad mellette üres oszlop. */
.lead-card { background:#fff; border:1px solid rgba(31,95,168,.1); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; box-shadow:0 4px 16px -10px rgba(31,95,168,.25); container-type:inline-size; }
.lead-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lead-card-body { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
/* Ha a kártya elég széles, a kapcsolat/üzenet és az űrlap egymás mellé kerül.
   Konténer-lekérdezés, mert a kártya szélessége a rácstól függ, nem a képernyőtől. */
@container (min-width:620px){
  .lead-card-body { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; align-items:stretch; }
  .lead-form { border-top:none; border-left:1px dashed rgba(31,95,168,.16); padding-top:0; padding-left:22px; height:100%; }
}
.lead-contact { display:flex; flex-direction:column; gap:4px; }
.lead-nev { font-weight:800; font-size:1.02rem; color:var(--ink,#132a43); }
.lead-link { font-weight:700; font-size:.9rem; color:var(--teal-dark); width:fit-content; }
.lead-link:hover { text-decoration:underline; }
.lead-form { display:flex; flex-direction:column; gap:10px; border-top:1px dashed rgba(31,95,168,.16); padding-top:12px; }
.lead-field { display:flex; flex-direction:column; gap:4px; }
.lead-field span { font-size:.76rem; font-weight:800; color:var(--slate); text-transform:uppercase; letter-spacing:.03em; }
.lead-field select, .lead-field textarea { width:100%; padding:8px 10px; border:1px solid rgba(31,95,168,.2); border-radius:10px; font:inherit; font-size:.9rem; background:#fbfdff; }
.lead-field textarea { resize:vertical; }
.lead-form-actions { display:flex; justify-content:flex-end; }
.lead-card-foot { display:flex; justify-content:flex-end; margin-top:-4px; }
.lead-del { background:none; border:none; color:var(--mist); font-size:.8rem; font-weight:700; cursor:pointer; padding:0; }
.lead-del:hover { color:#c9433d; text-decoration:underline; }
@media (max-width:640px){ .admin-nav { width:100%; order:3; } }

/* ============================================================
   MUNKA-GALÉRIA (egységes 4:3, wáó hover)
   ============================================================ */
.galeria-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.galeria-item { position:relative; margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; cursor:pointer; border:1px solid var(--glass-line); box-shadow:var(--shadow-sm), var(--hi); }
.galeria-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ease); }
.galeria-item figcaption { position:absolute; left:0; right:0; bottom:0; padding:18px 14px 12px; color:#fff; background:linear-gradient(transparent, rgba(10,26,52,.82)); font-size:.86rem; pointer-events:none; opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.galeria-item figcaption b { display:block; font-weight:800; }
.galeria-item figcaption span { color:#cfe0f5; }
.galeria-shine { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.galeria-shine::before { content:""; position:absolute; top:-60%; left:-90%; width:45%; height:220%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform:rotate(18deg); transition:left .7s var(--ease); }
/* Hover-only wow-effekt csak egérrel rendelkező eszközön: érintőn az első koppintás
   egyből kattintást vált ki, nem "hover-t", így nem kell kétszer koppintani a nagyításhoz.
   A felirat érintőn végig rejtve marad (nincs mitől felfedődnie hover nélkül). */
@media (hover:hover) and (pointer:fine) {
    .galeria-item:hover img { transform:scale(1.08); }
    .galeria-item:hover figcaption { opacity:1; transform:none; }
    .galeria-item:hover .galeria-shine::before { left:150%; }
}
@media (max-width:520px){ .galeria-grid { grid-template-columns:1fr 1fr; gap:10px; } }

/* Admin galéria */
.admin-galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.admin-galeria-item { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--glass-line); box-shadow:var(--shadow-sm); }
.admin-galeria-item img { width:100%; height:100%; object-fit:cover; }
.admin-galeria-info { position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-size:.76rem; color:#fff; background:linear-gradient(transparent, rgba(10,26,52,.78)); }
.admin-galeria-info b { display:block; }
.admin-galeria-del { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:8px; background:rgba(217,83,79,.9); color:#fff; border:none; font-weight:800; cursor:pointer; }
.admin-galeria-del:hover { background:#c9433d; }

/* ── Hibaoldalak (404, 403, 419, 429, 500, 503) ────────────────── */
body.errpage {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 20px;
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #eaf3fd 0%, #dcecfb 45%, #cfe4fa 100%);
}
html.dark body.errpage {
    background: linear-gradient(160deg, #0a1524 0%, #0d1f38 55%, #0a1a30 100%);
}
.err-aurora {
    position: absolute; inset: -20% -10% auto -10%; height: 70vh;
    background:
        radial-gradient(45% 55% at 20% 20%, rgba(63,134,207,.45), transparent 70%),
        radial-gradient(40% 50% at 80% 10%, rgba(31,95,168,.40), transparent 70%),
        radial-gradient(35% 45% at 60% 40%, rgba(255,177,90,.20), transparent 70%);
    filter: blur(40px); pointer-events: none;
    animation: err-drift 16s ease-in-out infinite alternate;
}
@keyframes err-drift { from { transform: translate3d(-3%,0,0) scale(1); } to { transform: translate3d(4%,3%,0) scale(1.08); } }

.err-flakes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.err-flakes span {
    position: absolute; top: -8%;
    color: rgba(255,255,255,.85); font-size: 16px;
    animation: err-fall linear infinite;
    text-shadow: 0 2px 6px rgba(10,31,60,.15);
}
html.dark .err-flakes span { color: rgba(180,214,255,.55); }
.err-flakes span:nth-child(1){left:5%;font-size:14px;animation-duration:11s;animation-delay:0s}
.err-flakes span:nth-child(2){left:14%;font-size:20px;animation-duration:14s;animation-delay:2s}
.err-flakes span:nth-child(3){left:23%;font-size:12px;animation-duration:9s;animation-delay:1s}
.err-flakes span:nth-child(4){left:32%;font-size:18px;animation-duration:13s;animation-delay:4s}
.err-flakes span:nth-child(5){left:41%;font-size:15px;animation-duration:10s;animation-delay:.5s}
.err-flakes span:nth-child(6){left:50%;font-size:22px;animation-duration:16s;animation-delay:3s}
.err-flakes span:nth-child(7){left:59%;font-size:13px;animation-duration:8.5s;animation-delay:1.5s}
.err-flakes span:nth-child(8){left:67%;font-size:19px;animation-duration:12s;animation-delay:2.5s}
.err-flakes span:nth-child(9){left:75%;font-size:16px;animation-duration:11.5s;animation-delay:.8s}
.err-flakes span:nth-child(10){left:82%;font-size:12px;animation-duration:9.5s;animation-delay:3.5s}
.err-flakes span:nth-child(11){left:88%;font-size:20px;animation-duration:15s;animation-delay:1.2s}
.err-flakes span:nth-child(12){left:93%;font-size:14px;animation-duration:10.5s;animation-delay:4.5s}
.err-flakes span:nth-child(13){left:97%;font-size:17px;animation-duration:13.5s;animation-delay:2.2s}
.err-flakes span:nth-child(14){left:47%;font-size:11px;animation-duration:8s;animation-delay:5s}
@keyframes err-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(108vh) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .err-flakes span, .err-aurora { animation: none; }
}

.err-wrap { position: relative; z-index: 2; width: 100%; max-width: 620px; }
.err-card {
    text-align: center;
    padding: 48px 40px 40px;
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 30px 80px -30px rgba(10,31,60,.4);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}
html.dark .err-card {
    background: rgba(18,34,58,.55);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.err-brand {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 26px; text-decoration: none;
    color: var(--ink, #0a1f3c);
}
html.dark .err-brand { color: #eaf2ff; }
.err-brand .logo-svg { width: 46px; height: 46px; }
.err-brand span { display: flex; flex-direction: column; line-height: 1.1; font-weight: 800; font-size: 1.15rem; text-align: left; }
.err-brand small { font-weight: 600; font-size: .72rem; opacity: .7; }

.err-code {
    font-size: clamp(84px, 20vw, 148px);
    font-weight: 800; line-height: .9; letter-spacing: -.04em;
    background: linear-gradient(135deg, #3b86cf 0%, #1f5fa8 45%, #ffb15a 130%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 12px 26px rgba(31,95,168,.28));
}
.err-title {
    margin: 6px 0 12px;
    font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800;
    color: var(--ink, #0a1f3c);
}
html.dark .err-title { color: #f2f7ff; }
.err-msg {
    margin: 0 auto 30px; max-width: 460px;
    font-size: 1.02rem; line-height: 1.6;
    color: var(--muted, #4f6076);
}
html.dark .err-msg { color: #a9bcd6; }

.err-actions {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    margin-bottom: 26px;
}
.err-links {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    font-size: .9rem; font-weight: 700;
    padding-top: 20px; border-top: 1px solid rgba(10,31,60,.08);
}
html.dark .err-links { border-color: rgba(255,255,255,.08); }
.err-links a { color: var(--teal, #1f5fa8); text-decoration: none; }
.err-links a:hover { text-decoration: underline; }
.err-links span { opacity: .4; }
html.dark .err-links a { color: #7fb2ea; }

@media (max-width: 520px) {
    .err-card { padding: 36px 22px 30px; }
    .err-actions .btn { width: 100%; }
}

/* ── Galéria tömeges feltöltő (dropzone) ───────────────────────── */
.dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    padding: 38px 24px; margin-bottom: 16px;
    border: 2px dashed rgba(31,95,168,.35);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(59,134,207,.06), rgba(59,134,207,.02));
    color: var(--teal, #1f5fa8); cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s;
}
.dropzone:hover { border-color: rgba(31,95,168,.6); background: rgba(59,134,207,.08); }
.dropzone.is-over { border-color: #1f5fa8; background: rgba(59,134,207,.14); transform: scale(1.01); }
.dropzone b { font-size: 1rem; color: var(--ink, #0a1f3c); }
.dropzone span { font-size: .82rem; color: var(--mist, #7a8aa0); }

.dz-previews {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.dz-thumb { position: relative; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: #eef4fb; box-shadow: 0 6px 16px -8px rgba(10,31,60,.4); }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-thumb-rm {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    border: none; border-radius: 6px; cursor: pointer;
    background: rgba(217,83,79,.92); color: #fff; font-size: .7rem; font-weight: 800; line-height: 1;
}
.dz-thumb-rm:hover { background: #c9433d; }
.dz-thumb-size {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 3px 6px; font-size: .66rem; font-weight: 700; color: #fff;
    background: linear-gradient(0deg, rgba(10,31,60,.75), transparent);
}

.dz-progress { margin-bottom: 16px; }
.dz-bar { height: 10px; border-radius: 99px; background: rgba(31,95,168,.14); overflow: hidden; }
.dz-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3b86cf, #1f5fa8); transition: width .25s ease; }
.dz-progress-text { margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--teal, #1f5fa8); }

.dz-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dz-count { font-size: .85rem; font-weight: 700; color: var(--slate, #5a6b82); }

html.dark .dropzone { background: rgba(59,134,207,.08); border-color: rgba(127,178,234,.4); }
html.dark .dropzone b { color: #eaf2ff; }

/* ── Hívás gomb ikon a fejlécben ──────────────────────────────── */
.nav-cta-btn { display: inline-flex; align-items: center; gap: 8px; }
.nav-cta-btn svg { width: 16px; height: 16px; }

/* ── Mini-kosár (lenyíló a kosár ikonról) ─────────────────────── */
.nav-cart-wrap { position: relative; }
.mini-cart {
    position: absolute; top: calc(100% + 14px); right: 0;
    width: 330px; padding: 6px;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
    border: 1px solid var(--glass-line); border-radius: 18px;
    box-shadow: var(--shadow-lg), var(--hi);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 130;
}
/* Láthatatlan híd, hogy a rátét ne szakadjon meg a rés miatt */
.mini-cart::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 16px; }
.nav-cart-wrap:hover .mini-cart,
.nav-cart-wrap:focus-within .mini-cart { opacity: 1; visibility: visible; transform: translateY(0); }

.mini-cart-head { padding: 12px 14px 8px; font-weight: 800; font-size: .9rem; color: var(--ink); }
.mini-cart-items { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.mini-cart-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; transition: background .18s; }
.mini-cart-row:hover { background: rgba(31,95,168,.07); }
.mini-cart-row img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--glass-hair); flex: none; padding: 3px; }
.mc-noimg { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; background: rgba(31,95,168,.1); color: var(--teal); font-size: 1.2rem; flex: none; }
.mc-info { min-width: 0; }
.mc-info b { display: block; font-size: .86rem; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-info span { font-size: .8rem; color: var(--mist); }
.mini-cart-foot { padding: 10px 12px 12px; border-top: 1px solid var(--glass-hair); margin-top: 4px; }
.mc-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mc-total span { font-size: .86rem; color: var(--slate); font-weight: 700; }
.mc-total b { font-size: 1.12rem; color: var(--teal-dark); font-weight: 800; }
.mc-actions { display: flex; gap: 8px; }
.mc-actions .btn { flex: 1; justify-content: center; }

html.dark .mini-cart { background: rgba(14,26,46,.98); border-color: rgba(255,255,255,.1); }
html.dark .mini-cart-row:hover { background: rgba(255,255,255,.06); }
html.dark .mc-info b, html.dark .mini-cart-head { color: #eaf2ff; }
html.dark .mini-cart-row img { background: #0e1a2c; }

/* Mobilon (nincs hover) csak a kosár ikon visz a kosár oldalra */
@media (max-width: 1160px) { .mini-cart { display: none; } }

/* ── Áraink kártyák — klimatisztitas.eu stílus, az oldal színeivel ── */
.price-card h3 { color: var(--sky); }   /* kék kártyacím (oldal színe) */
/* a pipák maradnak az oldal kékjében (alap: var(--teal)) */

/* Kiemelt (népszerű) kártya — sötét, az oldal navy színeivel, fehér szöveg */
.price-card.featured {
  background: linear-gradient(180deg, var(--teal-dark) 0%, var(--ink) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 56px -18px rgba(10,31,60,.6), var(--hi);
  color: #fff;
}
.price-card.featured:hover {
  background: linear-gradient(180deg, #17457a 0%, #0c264a 100%);
  box-shadow: 0 32px 64px -18px rgba(10,31,60,.7), var(--hi);
}
.price-card.featured h3 { color: #9cc4f2; }
.price-card.featured .amount { color: #fff; }
.price-card.featured .amount small { color: #a9c4e6; }
.price-card.featured li { color: #d6e4f4; }
.price-card.featured li svg { color: #7fb2ea; }   /* világoskék pipa (oldal színe) */
.price-card.featured .tag {
  background: #fff; color: var(--ink);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.price-card.featured .btn-primary {
  background: #fff; color: var(--teal-dark); border-color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.price-card.featured .btn-primary:hover { background: #eaf3ff; transform: translateY(-3px); }

html.dark .price-card h3 { color: #7fb2ea; }

/* ── Klímaválasztó ─────────────────────────────────────────────── */
.kv-wrap { display: grid; grid-template-columns: 1.35fr .9fr; gap: 24px; align-items: start; }
.kv-room { margin-bottom: 18px; }
.kv-room-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.kv-name { flex: 1; font-weight: 700; font-size: 1.02rem; padding: 10px 14px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.5); color: var(--ink); font-family: var(--font); }
.kv-del { flex: none; width: 34px; height: 34px; border: none; border-radius: 10px; background: rgba(217,83,79,.12); color: #d9534f; font-weight: 800; cursor: pointer; transition: background .18s; }
.kv-del:hover { background: rgba(217,83,79,.22); }
.kv-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .9rem; color: var(--slate); cursor: pointer; }
.kv-check input { margin-top: 3px; flex: none; }

.kv-add-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.kv-add-row .btn-primary { margin-left: auto; }
.kv-disclaimer { margin-top: 18px; font-size: .85rem; color: var(--mist); line-height: 1.5; }

.kv-main { position: sticky; top: 100px; align-self: start; }
.kv-side { position: static; }
.kv-results h3 { margin-bottom: 14px; }
.kv-empty { color: var(--slate); font-size: .95rem; line-height: 1.6; }
.kv-warn { color: #b26a00; background: rgba(255,177,90,.14); border: 1px solid rgba(255,177,90,.3); padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.5; }

.kv-res-room { padding: 16px 0; border-top: 1px solid var(--glass-hair); }
.kv-res-room:first-of-type { border-top: none; padding-top: 4px; }
.kv-res-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kv-res-head h4 { font-size: 1.02rem; color: var(--ink); }
.kv-res-head small { color: var(--mist); font-weight: 600; }
.kv-rec-badge { flex: none; font-size: .8rem; font-weight: 700; color: var(--teal-dark); background: rgba(31,95,168,.12); border: 1px solid rgba(31,95,168,.2); padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.kv-rec-badge b { font-size: .92rem; }
.kv-igeny { list-style: none; display: grid; gap: 4px; margin: 0 0 14px; font-size: .9rem; color: var(--slate); }
.kv-igeny b { color: var(--ink); }

.kv-prods { display: grid; gap: 10px; }
.kv-prod { display: block; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(255,255,255,.45); transition: transform .18s, box-shadow .18s, border-color .18s; }
.kv-prod:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(31,95,168,.4); }
.kv-prod-link { display: block; color: inherit; }
.kv-prod-cart { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-hair); }
.kv-prod-cart .btn { width: 100%; justify-content: center; gap: 7px; }
.kv-prod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kv-prod-top b { color: var(--ink); font-size: .96rem; }
.kv-kw { flex: none; font-weight: 800; color: var(--teal-dark); font-size: .9rem; }
.kv-prod-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.kv-tag { font-size: .72rem; font-weight: 700; color: var(--teal-dark); background: rgba(31,95,168,.1); padding: 3px 9px; border-radius: 100px; }
.kv-prod-bottom { display: flex; align-items: center; justify-content: space-between; }
.kv-price { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.kv-more { font-size: .82rem; font-weight: 700; color: var(--teal); }

.kv-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--glass-hair); font-size: .92rem; color: var(--slate); }
.kv-total b { color: var(--teal-dark); }
.kv-cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.kv-cta .btn { flex: 1; justify-content: center; min-width: 140px; }

/* Ajánlatkérő blokk a találatoknál */
.kv-quote { margin-top: 18px; padding: 16px; border: 1px solid rgba(31,95,168,.22); border-radius: 16px; background: linear-gradient(180deg, rgba(79,151,216,.1), rgba(242,153,74,.07)); }
.kv-quote-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.kv-quote-head b { color: var(--ink); font-size: 1.02rem; }
.kv-quote-head span { color: var(--slate); font-size: .86rem; }
.kv-quote-fields { display: grid; gap: 8px; margin-bottom: 10px; }
.kv-quote-fields input { width: 100%; padding: 11px 14px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.75); font-family: var(--font); color: var(--ink); }
.kv-quote > .btn { width: 100%; justify-content: center; }
.kv-quote-done { color: #2f8f5b; font-weight: 700; font-size: .92rem; line-height: 1.5; }
html.dark .kv-quote { background: linear-gradient(180deg, rgba(79,151,216,.14), rgba(242,153,74,.08)); border-color: rgba(120,170,220,.3); }
html.dark .kv-quote-head b { color: #eaf2ff; }
html.dark .kv-quote-fields input { background: rgba(255,255,255,.08); color: #eaf2ff; }

html.dark .kv-name { background: rgba(255,255,255,.06); color: #eaf2ff; }
html.dark .kv-prod { background: rgba(255,255,255,.05); }
html.dark .kv-res-head h4 { color: #eaf2ff; }

@media (max-width: 900px) {
    .kv-wrap { grid-template-columns: 1fr; }
    .kv-main { position: static; }
    .kv-side { position: static; }
    .kv-add-row .btn-primary { margin-left: 0; width: 100%; }
}

/* ── Klímaválasztó — számítási módszer szekció ─────────────────── */
.kv-method { max-width: 860px; margin: 0 auto; display: grid; gap: 20px; }
.kv-formula {
    background: var(--glass-strong, rgba(255,255,255,.75));
    border: 1px solid var(--glass-line); border-radius: 16px;
    padding: 18px 20px; text-align: center;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.kv-formula-label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.kv-formula code {
    display: block; font-family: var(--font); font-weight: 700;
    font-size: 1rem; color: var(--ink); line-height: 1.7; word-spacing: 1px;
}
.kv-factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kv-factor {
    background: rgba(255,255,255,.5); border: 1px solid var(--glass-hair);
    border-radius: 14px; padding: 14px 16px;
}
.kv-factor b { display: block; color: var(--teal-dark); font-size: .92rem; margin-bottom: 4px; }
.kv-factor span { font-size: .88rem; color: var(--slate); line-height: 1.5; }
.kv-method-note { font-size: .92rem; color: var(--slate); line-height: 1.65; padding: 4px 4px 0; }
.kv-method-note b { color: var(--ink); }

html.dark .kv-formula code, html.dark .kv-factor b { color: #eaf2ff; }
html.dark .kv-factor { background: rgba(255,255,255,.05); }

@media (max-width: 640px) {
    .kv-factors { grid-template-columns: 1fr; }
    .kv-formula code { font-size: .9rem; }
}

/* ── Hero figyelemfelhívó megjegyzés ──────────────────────────── */
.hero-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 18px; max-width: 560px;
    font-size: .9rem; line-height: 1.55; color: var(--slate);
    background: rgba(31,95,168,.07); border: 1px solid rgba(31,95,168,.15);
    border-radius: 14px; padding: 12px 16px;
}
.hero-note svg { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: 2px; }
.hero-note b { color: var(--ink); }
.hero-note a { color: var(--teal); font-weight: 700; white-space: nowrap; }
.hero-note a:hover { text-decoration: underline; }
html.dark .hero-note { background: rgba(127,178,234,.1); border-color: rgba(127,178,234,.2); }
html.dark .hero-note b { color: #eaf2ff; }

/* ── Klímaválasztó — e-mail küldés az eredményről ─────────────── */
.kv-email { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-hair); }
.kv-email > label { display: block; font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.kv-email-row { display: flex; gap: 8px; }
.kv-email-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.6); font-family: var(--font); color: var(--ink); }
.kv-email-row .btn { flex: none; }
.kv-email-msg { margin-top: 8px; font-size: .85rem; font-weight: 700; min-height: 1em; }
.kv-email-msg.ok { color: #2f8f5b; }
.kv-email-msg.err { color: #d9534f; }
html.dark .kv-email > label { color: #eaf2ff; }
html.dark .kv-email-row input { background: rgba(255,255,255,.06); color: #eaf2ff; }

/* Klíma-árazó gombsor a heró alatt */
.pw-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pw-actions .btn { width: 100%; justify-content: center; }

/* Klíma-árazó a heró jobb oldalán — kompakt, felülre igazítva */
.hero-visual { align-self: start; }
.hero-pricebox { max-width: 380px; margin: 0 0 0 auto; width: 100%; padding: 20px; }
.hero-pricebox .pw-live { margin-bottom: 10px; font-size: .68rem; }
.hero-pricebox .pw-q { font-size: .9rem; margin-bottom: 10px; }
.hero-pricebox .pw-units button { padding: 8px 15px; font-size: .88rem; }
.hero-pricebox .pw-nev { font-size: .9rem; margin-top: 10px; }
.hero-pricebox .pw-price { font-size: 2rem; margin: 2px 0; }
.hero-pricebox .pw-note { font-size: .82rem; margin-bottom: 14px; }
.hero-pricebox .pw-actions { gap: 8px; }
.hero-pricebox .pw-actions .btn { padding: 11px 18px; font-size: .92rem; }

/* A másodlagos „Klímaválasztó" gomb legyen jól látható a fehér kártyán */
.hero-pricebox .pw-actions .btn-ghost {
  background: rgba(31,95,168,.08);
  border: 1.5px solid rgba(31,95,168,.35);
  color: var(--teal-dark); font-weight: 800;
}
.hero-pricebox .pw-actions .btn-ghost:hover {
  background: rgba(31,95,168,.15); border-color: var(--teal); transform: translateY(-2px);
}
html.dark .hero-pricebox .pw-actions .btn-ghost { background: rgba(127,178,234,.12); border-color: rgba(127,178,234,.4); color: #9cc4f2; }

/* Kiválasztott készülék neve az árazóban */
.pw-nev { font-weight: 800; font-size: 1rem; color: var(--teal-dark); margin-top: 14px; }
html.dark .pw-nev { color: #9cc4f2; }
.hero-pricebox .pw-price { margin-top: 4px; }

/* ── Heró árazó — klimatisztitas.eu stílus, oldal színeivel ───── */
.hero-visual { align-self: start; }
.hero-pricebox {
  position: relative;
  max-width: 400px; margin: 0 0 0 auto; width: 100%;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid var(--glass-line);
  border-radius: 22px; padding: 22px 22px 20px;
  box-shadow: 0 26px 60px -22px rgba(10,31,60,.42), var(--hi);
  text-align: left;
}
html.dark .hero-pricebox { background: rgba(14,26,46,.93); border-color: rgba(255,255,255,.1); }

.hp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hp-label { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.hp-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; color: #2f8f5b; }
.hp-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: pulse 1.8s infinite; }
.hp-q { font-weight: 800; font-size: .92rem; color: var(--ink); margin-bottom: 10px; }
html.dark .hp-q { color: #eaf2ff; }

.hp-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(31,95,168,.07); padding: 5px; border-radius: 14px; }
.hp-units button { padding: 9px 0; border: none; background: transparent; font-family: var(--font); font-weight: 800; font-size: .9rem; border-radius: 10px; cursor: pointer; color: var(--slate); transition: .2s; }
.hp-units button.active { background: linear-gradient(180deg,#3b86cf,#1f5fa8); color: #fff; box-shadow: 0 6px 14px rgba(31,95,168,.35); }
html.dark .hp-units { background: rgba(255,255,255,.06); }

.hp-nev { font-weight: 800; font-size: .92rem; color: var(--teal-dark); margin-top: 12px; }
html.dark .hp-nev { color: #9cc4f2; }
.hp-price { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 2px 0; }
html.dark .hp-price { color: #fff; }
.hp-price small { font-size: .9rem; color: var(--mist); font-weight: 700; }
.hp-note { font-size: .8rem; color: var(--slate); margin-bottom: 12px; }
.hp-div { height: 1px; background: var(--glass-hair); margin: 2px 0 12px; }
.hp-info { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--slate); margin-bottom: 14px; }
.hp-info b { color: var(--ink); }
html.dark .hp-info b { color: #eaf2ff; }
.hp-info .dot.green { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; flex: none; }
.hp-cta { width: 100%; justify-content: center; }
.hp-link { display: block; text-align: center; margin-top: 10px; font-size: .84rem; font-weight: 800; color: var(--teal); }
.hp-link:hover { text-decoration: underline; }

/* Lebegő jelvények a kártya körül */
.hp-badge {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--glass-line);
  border-radius: 12px; padding: 8px 12px;
  font-size: .74rem; color: var(--slate); font-weight: 700; line-height: 1.15;
  box-shadow: 0 14px 28px -10px rgba(10,31,60,.38);
}
.hp-badge b { display: block; font-size: .96rem; color: var(--ink); }
.hp-badge-tl { top: -16px; left: -16px; }
.hp-badge-br { bottom: -16px; right: -16px; background: #0a1a34; border-color: rgba(255,255,255,.1); color: #9db0c0; }
.hp-badge-br b { color: #fff; }
html.dark .hp-badge { background: #12223a; border-color: rgba(255,255,255,.1); color: #a9bcd6; }
html.dark .hp-badge b { color: #eaf2ff; }

@media (max-width: 980px) {
  .hero-pricebox { margin: 0 auto; }
  .hp-badge-tl { left: 8px; }
  .hp-badge-br { right: 8px; }
}

/* Lebegő jelvények animációja */
@keyframes hpFloatA { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(-1deg); } }
@keyframes hpFloatB { 0%,100% { transform: translateY(0) rotate(1.5deg); } 50% { transform: translateY(-11px) rotate(1.5deg); } }
.hp-badge-tl { animation: hpFloatA 4.5s ease-in-out infinite; }
.hp-badge-br { animation: hpFloatB 5.2s ease-in-out infinite; animation-delay: -1.5s; }
@media (prefers-reduced-motion: reduce) { .hp-badge-tl, .hp-badge-br { animation: none; } }

/* Jelvények ne takarják a szöveget: több hely a kártya tetején/alján */
.hero-pricebox { padding: 42px 22px 34px; }
.hp-badge-tl { top: -14px; left: -14px; }
.hp-badge-br { bottom: -14px; right: -14px; }
.hp-link { margin-bottom: 4px; }

/* ── Bemutatkozó kártya a kapcsolat oldalon ───────────────────── */
.person-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0; margin-bottom: 22px; overflow: hidden; position: relative;
    background: var(--glass-strong, rgba(255,255,255,.75));
    border: 1px solid var(--glass-line); border-radius: 22px;
    box-shadow: var(--shadow), var(--hi);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.person-card img {
    width: 100%; height: auto; display: block;
    border: none; border-radius: 0;
}
.person-card .person-tag {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #0a1f3c;
    font-size: .76rem; font-weight: 800; letter-spacing: .03em;
    padding: 7px 13px; border-radius: 100px;
    box-shadow: 0 6px 20px rgba(10,31,60,.5);
}
.person-txt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 3px; }
.person-txt b { font-size: 1.3rem; color: var(--ink); letter-spacing: -.01em; }
.person-txt span { font-size: .9rem; color: var(--teal-dark); font-weight: 700; }
.person-txt small { font-size: .94rem; color: var(--slate); font-style: italic; margin-top: 8px; line-height: 1.55; }
html.dark .person-txt b { color: #eaf2ff; }
html.dark .person-card .person-tag { background: rgba(18,34,58,.92); color: #9cc4f2; }

/* ── Kapcsolat — gyors elérés kártyák ─────────────────────────── */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.contact-card {
    display: flex; flex-direction: column; gap: 3px;
    padding: 20px; border-radius: 18px;
    background: var(--glass-strong, rgba(255,255,255,.72));
    border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow), var(--hi); border-color: rgba(31,95,168,.4); }
.cc-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px; background: rgba(31,95,168,.14); color: var(--teal-dark); border: 1px solid var(--glass-hair); }
.cc-ico.sky { background: rgba(59,134,207,.16); color: var(--sky); }
.cc-ico.amber { background: rgba(255,177,90,.18); color: #c9821f; }
.cc-ico svg { width: 22px; height: 22px; }
.contact-card b { font-size: 1.02rem; color: var(--ink); }
.contact-card > span { font-size: .92rem; color: var(--slate); font-weight: 600; }
.contact-card small { font-size: .8rem; color: var(--mist); margin-top: 2px; }
html.dark .contact-card b { color: #eaf2ff; }

/* Beágyazott térkép */
.contact-map { margin-top: 22px; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); }
.contact-map iframe { display: block; width: 100%; height: 260px; border: 0; }

@media (max-width: 900px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }

/* Bemutatkozó kártya — csillagos értékelés */
.person-rating { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--slate); font-weight: 700; margin-top: 4px; }
.person-rating .stars { color: var(--gold, #f6a54e); letter-spacing: 1px; }
.person-rating b { color: var(--ink); }
html.dark .person-rating b { color: #eaf2ff; }

/* Személykártya — F-gáz azonosító sor */
.person-fgaz { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-hair); font-size: .82rem; color: var(--mist); }
.person-fgaz b { color: var(--slate); font-weight: 700; }
html.dark .person-fgaz b { color: #a9bcd6; }

/* Kapcsolat — jobb oszlop: űrlap + alatta az adatok */
.contact-right { display: flex; flex-direction: column; gap: 22px; }
.contact-details { display: grid; gap: 14px; }

/* ── Wáó menü — extra csillogás ────────────────────────────────── */
.site-header .nav { position: relative; }
.site-header .nav > * { position: relative; z-index: 1; }
/* Lassan átsuhanó fény a kapszula üvegén */
.site-header .nav::after {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
    background-size: 220% 100%; background-position: 170% 0;
    animation: navSheen 8s ease-in-out infinite;
}
@keyframes navSheen { 0%, 58% { background-position: 170% 0; } 90%, 100% { background-position: -70% 0; } }
html.dark .site-header .nav::after { background: linear-gradient(105deg, transparent 40%, rgba(159,196,242,.16) 50%, transparent 60%); background-size: 220% 100%; }
@media (prefers-reduced-motion: reduce) { .site-header .nav::after { animation: none; opacity: 0; } }

/* Nav linkek — lágy gradiens pill hoverre / aktívra */
.nav-links > li > a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 100px;
    background: linear-gradient(135deg, rgba(59,134,207,.18), rgba(31,95,168,.12));
    opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-links > li > a:hover::before,
.nav-links > li > a.active::before { opacity: 1; transform: scale(1); }
.nav-links > li > a:hover { background: transparent; }

/* Logó — finom pörgetés hoverre */
.brand .logo-svg { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .logo-svg { transform: rotate(-12deg) scale(1.1); }

/* CTA hívás gomb — enyhe ragyogás-lüktetés a fejlécben */
.nav-cta-btn { position: relative; }
.nav-cta-btn::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
    background: linear-gradient(135deg, #4f97d8, var(--amber));
    filter: blur(9px); opacity: .0; transition: opacity .3s;
}
.nav-cta-btn:hover::after { opacity: .55; }

/* ── Jogi oldal (ÁSZF / Adatvédelem) ──────────────────────────── */
.legal { max-width: 880px; margin: 0 auto; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 18px 22px; margin-bottom: 26px; border-radius: 16px; background: var(--glass-strong, rgba(255,255,255,.7)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi); font-size: .9rem; color: var(--slate); }
.legal-meta b { color: var(--ink); }
.legal-toc { display: grid; gap: 6px; padding: 20px 22px; margin-bottom: 34px; border-radius: 16px; background: rgba(31,95,168,.06); border: 1px solid var(--glass-line); }
.legal-toc b { color: var(--ink); margin-bottom: 6px; }
.legal-toc a { color: var(--teal-dark); font-weight: 700; font-size: .95rem; }
.legal-toc a:hover { text-decoration: underline; }
.legal-block { margin-bottom: 34px; scroll-margin-top: 100px; }
.legal-block h2 { font-size: 1.4rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid rgba(31,95,168,.18); color: var(--ink); }
.legal-block h3 { font-size: 1.05rem; margin: 18px 0 8px; color: var(--teal-dark); }
.legal-block p { color: var(--slate); line-height: 1.7; margin-bottom: 12px; }
.legal-block ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; color: var(--slate); line-height: 1.6; }
.legal-block b { color: var(--ink); }
.legal-note { padding: 16px 20px; margin: 14px 0; border-radius: 14px; background: rgba(59,134,207,.08); border: 1px solid rgba(31,95,168,.2); }
.legal-note p { margin-bottom: 8px; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-disclaimer { margin-top: 20px; padding: 14px 18px; border-radius: 12px; background: rgba(255,177,90,.12); border: 1px solid rgba(255,177,90,.3); font-size: .88rem; color: var(--slate); }
html.dark .legal-meta b, html.dark .legal-toc b, html.dark .legal-block h2, html.dark .legal-block b { color: #eaf2ff; }

/* ── Süti értesítő sáv ────────────────────────────────────────── */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; padding: 0 16px 16px; }
.cookie-in {
    max-width: 1040px; margin: 0 auto;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
    padding: 18px 22px; border-radius: 18px;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-line);
    box-shadow: 0 20px 50px -14px rgba(10,31,60,.45);
}
.cookie-txt { flex: 1; min-width: 260px; }
.cookie-txt b { display: block; color: var(--ink); margin-bottom: 3px; }
.cookie-txt span { font-size: .88rem; color: var(--slate); line-height: 1.5; }
.cookie-txt a { color: var(--teal); font-weight: 700; }
.cookie-btns { display: flex; gap: 10px; flex: none; }
html.dark .cookie-in { background: rgba(14,26,46,.97); border-color: rgba(255,255,255,.1); }
html.dark .cookie-txt b { color: #eaf2ff; }
@media (max-width: 560px) { .cookie-btns { width: 100%; } .cookie-btns .btn { flex: 1; } }

/* ── Barion fizetési csík (logó + kártyák) ────────────────────── */
.barion-strip {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(10,31,60,.12);
    box-shadow: 0 6px 18px -8px rgba(10,31,60,.25);
    text-decoration: none;
}
.barion-strip .bs-lock { display: grid; place-items: center; color: #2f8f5b; }
.barion-strip .bs-lock svg { width: 17px; height: 17px; }
.barion-strip .bs-txt { font-size: .82rem; font-weight: 700; color: #46586e; }
.barion-strip .bs-barion { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: #0b0b5e; }
.barion-strip .bs-cards { display: inline-flex; gap: 6px; }
.barion-strip .bs-cards span {
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 6px;
    background: #f1f5fb; color: #1a2b45; border: 1px solid rgba(10,31,60,.1);
}
.barion-strip:hover { border-color: rgba(31,95,168,.4); }

.footer-barion { display: flex; justify-content: center; padding: 8px 0 22px; }

.pay-barion { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-hair); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pay-barion small { font-size: .82rem; color: var(--slate); line-height: 1.5; }
.pay-barion small b { color: var(--ink); }

/* ── Hivatalos Barion banner (világos/sötét) ──────────────────── */
.barion-official { display: inline-block; line-height: 0; }
.barion-official img { width: 280px; max-width: 100%; height: auto; }
.barion-official img.barion-img-light { display: block; }
.barion-official img.barion-img-dark { display: none; }
html.dark .barion-official img.barion-img-light { display: none; }
html.dark .barion-official img.barion-img-dark { display: block; }

/* ── Klarna ───────────────────────────────────────────────────── */
.klarna-badge {
    display: inline-flex; align-items: center;
    padding: 3px 11px; border-radius: 999px;
    background: #FFB3C7; color: #17120F;
    font-weight: 800; letter-spacing: -.01em; font-size: .92em;
    vertical-align: middle;
}

/* „Hamarosan" — nem választható, halványított fizetési opció */
.pay-opt.pay-soon { cursor: default; opacity: .72; background: rgba(255,255,255,.22); border-style: dashed; }
.pay-opt.pay-soon:hover { border-color: var(--glass-line); }
.pay-opt .soon-tag {
    flex: none; align-self: flex-start; margin-top: 2px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(31,95,168,.12); color: var(--teal);
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* ── Település-oldalak ────────────────────────────────────────── */
.telepules-lista { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 18px 22px; border-radius: 16px; background: rgba(31,95,168,.06); border: 1px solid var(--glass-line); font-size: .92rem; }
.telepules-lista b { color: var(--ink); margin-right: 4px; }
.telepules-lista a { color: var(--teal-dark); font-weight: 700; }
.telepules-lista a:hover { text-decoration: underline; }

/* Lábléc — területeink sor (inline pill-ek) */
.footer-towns { margin-top: 8px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-towns b { color: #cfe0f0; display: block; margin-bottom: 12px; font-size: .92rem; }
.footer-towns a {
    display: inline-block; color: #b8c8d8; font-size: .82rem; font-weight: 600;
    margin: 0 8px 8px 0; padding: 6px 13px; line-height: 1.3;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 100px;
    transition: background .18s, color .18s, transform .18s;
}
.footer-towns a:hover { color: #fff; background: rgba(255,255,255,.14); transform: translateY(-1px); }

/* ── Blog / Hasznos tudnivalók ────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.blog-card { border-radius: 20px; overflow: hidden; background: var(--glass-strong, rgba(255,255,255,.7)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi); transition: transform .22s, box-shadow .22s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow), var(--hi); }
.blog-card-in { display: block; padding: 24px; height: 100%; }
.blog-cat { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-dark); background: rgba(31,95,168,.1); padding: 4px 11px; border-radius: 100px; margin-bottom: 12px; }
.blog-card h2 { font-size: 1.18rem; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.blog-card p { font-size: .94rem; color: var(--slate); line-height: 1.55; margin-bottom: 14px; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--mist); font-weight: 600; }
.blog-more { color: var(--teal); font-weight: 800; margin-left: auto; }
html.dark .blog-card h2 { color: #eaf2ff; }

/* Cikk oldal */
.article { max-width: 760px; margin: 0 auto; }
.article h2 { font-size: 1.4rem; margin: 30px 0 12px; color: var(--ink); }
.article p { color: var(--slate); line-height: 1.75; margin-bottom: 14px; font-size: 1.02rem; }
.article ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; color: var(--slate); line-height: 1.6; }
.article a { color: var(--teal); font-weight: 700; }
.article a:hover { text-decoration: underline; }
.article b, .article strong { color: var(--ink); }
html.dark .article h2, html.dark .article b, html.dark .article strong { color: #eaf2ff; }
.article-cta { max-width: 760px; margin: 34px auto 0; display: flex; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--glass-hair); }
.article-more { max-width: 900px; margin: 44px auto 0; }
.article-more h3 { font-size: 1.2rem; margin-bottom: 18px; }

/* ── Klíma-összehasonlító táblázat ────────────────────────────── */
.cmp-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); background: var(--glass-strong, rgba(255,255,255,.7)); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 820px; font-size: .92rem; }
.cmp-table thead th { text-align: left; padding: 14px 16px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-dark); background: rgba(31,95,168,.08); border-bottom: 1px solid var(--glass-line); white-space: nowrap; }
.cmp-table td { padding: 14px 16px; border-bottom: 1px solid var(--glass-hair); color: var(--slate); vertical-align: middle; }
.cmp-table tbody tr:hover { background: rgba(31,95,168,.04); }
.cmp-nev b { display: block; color: var(--ink); font-size: .98rem; }
.cmp-nev small { color: var(--mist); font-size: .78rem; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-tags span { font-size: .72rem; font-weight: 700; color: var(--teal-dark); background: rgba(31,95,168,.1); padding: 3px 8px; border-radius: 6px; }
.cmp-ar s { display: block; color: var(--mist); font-size: .8rem; }
.cmp-ar b { color: var(--ink); font-size: 1rem; white-space: nowrap; }
html.dark .cmp-wrap { background: rgba(14,26,46,.6); }
html.dark .cmp-nev b, html.dark .cmp-ar b { color: #eaf2ff; }

/* ── Interaktív klíma-összehasonlító (2-3 kiválasztott) ────────── */
.cmp2-wrap { overflow-x: auto; }
.cmp2 { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; table-layout: fixed; }
.cmp2 th { width: 150px; text-align: left; padding: 14px 14px; font-size: .82rem; font-weight: 800; color: var(--teal-dark); vertical-align: middle; }
.cmp2 td { width: calc((100% - 150px) / 3); padding: 14px 12px; text-align: center; vertical-align: middle; color: var(--slate); background: var(--glass-strong, rgba(255,255,255,.7)); border-left: 1px solid var(--glass-hair); border-top: 1px solid var(--glass-hair); }
.cmp2 td.is-empty { background: rgba(10,31,60,.03); }
.cmp2-pickrow td, .cmp2-pickrow th { background: transparent !important; border: none; padding: 0 6px 12px; }
.cmp2-pick { width: 100%; padding: 10px 12px; border: 1px solid var(--glass-line); border-radius: 12px; background: #fff; font-family: var(--font); font-weight: 700; color: var(--ink); font-size: .86rem; cursor: pointer; }
.cmp2-kep td img { width: 100%; max-width: 130px; height: 92px; object-fit: contain; margin: 0 auto 8px; display: block; background: #fff; border-radius: 10px; padding: 4px; }
.cmp2-kep td b { display: block; font-size: .9rem; color: var(--ink); line-height: 1.25; }
.cmp2-kep td small { color: var(--mist); font-size: .74rem; }
.cmp2-ph { display: grid; place-items: center; height: 92px; font-size: 1.6rem; color: var(--teal); }
.cmp2-ar { color: var(--teal-dark); font-size: 1.12rem; white-space: nowrap; }
.cmp2-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cmp2-tags span { font-size: .7rem; font-weight: 700; color: var(--teal-dark); background: rgba(31,95,168,.1); padding: 3px 8px; border-radius: 6px; }
.cmp2-empty { color: var(--mist); }
.cmp2-actionrow td { padding-top: 16px; }
html.dark .cmp2 td { background: rgba(255,255,255,.05); }
html.dark .cmp2-kep td b { color: #eaf2ff; }
html.dark .cmp2-pick { background: #12223a; color: #eaf2ff; border-color: rgba(255,255,255,.15); }

/* ── Klíma-összehasonlító — kártyás választó ──────────────────── */
.cmp-bar { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin-bottom: 20px; border-radius: 100px; background: rgba(31,95,168,.09); border: 1px solid rgba(31,95,168,.18); font-size: .92rem; font-weight: 700; color: var(--teal-dark); }

.cmp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.cmp-pick-card {
    position: relative; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px 14px; border-radius: 16px;
    background: var(--glass-strong, rgba(255,255,255,.7)); border: 2px solid var(--glass-line);
    box-shadow: var(--shadow-sm), var(--hi); transition: transform .18s, border-color .18s, box-shadow .18s;
    font-family: var(--font);
}
.cmp-pick-card:hover { transform: translateY(-3px); border-color: rgba(31,95,168,.4); }
.cmp-pick-card.is-on { border-color: var(--teal); background: rgba(31,95,168,.08); }
.cpc-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--glass-line); background: #fff; transition: .18s; }
.cmp-pick-card.is-on .cpc-check { background: var(--teal); border-color: var(--teal); }
.cmp-pick-card.is-on .cpc-check::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 900; }
.cpc-media { width: 100%; height: 78px; display: grid; place-items: center; }
/* Fix méret (nem max-*), hogy a kép width/height attribútuma se a helyet, se az
   arányt ne tudja elrontani — a contain amúgy is középre igazít torzítás nélkül. */
.cpc-media img { width: 100%; height: 78px; object-fit: contain; }
.cpc-ph { font-size: 1.6rem; color: var(--teal); }
.cpc-nev { font-size: .88rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.cpc-sub { font-size: .78rem; color: var(--mist); font-weight: 600; }
html.dark .cpc-nev { color: #eaf2ff; }
html.dark .cpc-check { background: #12223a; }

.cmp-result { margin-top: 26px; }
.cmp-remove { display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 700; color: #d9534f; background: none; border: none; cursor: pointer; }
.cmp-remove:hover { text-decoration: underline; }

/* ── Admin irányítópult ───────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dash-kpi { padding: 20px; border-radius: 16px; background: var(--glass-strong, rgba(255,255,255,.7)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi); }
.dash-kpi .dk-ico { font-size: 1.5rem; }
.dash-kpi b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 8px 0 2px; }
.dash-kpi .dk-label { display: block; font-weight: 700; color: var(--teal-dark); font-size: .92rem; }
.dash-kpi small { color: var(--mist); font-size: .8rem; }

.ds-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ds-label { flex: 1; font-size: .9rem; color: var(--slate); font-weight: 600; }
.ds-bar { flex: 1.6; height: 9px; border-radius: 99px; background: rgba(31,95,168,.12); overflow: hidden; }
.ds-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#3b86cf,#1f5fa8); }
.ds-bar span.amber { background: linear-gradient(90deg,#ffc078,#e8892c); }
.ds-num { flex: none; min-width: 42px; text-align: right; color: var(--ink); font-size: .92rem; }

.dash-recent th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mist); padding: 8px 10px; }
.dash-recent td { padding: 10px; border-top: 1px solid var(--glass-hair); }
.dash-badge { display: inline-block; font-size: .76rem; font-weight: 800; padding: 4px 10px; border-radius: 100px; background: rgba(31,95,168,.12); color: var(--teal-dark); }
.dash-badge.st-fizetve, .dash-badge.st-teljesitve { background: rgba(47,143,91,.16); color: #2f8f5b; }
.dash-badge.st-megszakitva, .dash-badge.st-sikertelen, .dash-badge.st-lejart { background: rgba(217,83,79,.14); color: #d9534f; }
html.dark .dash-kpi b, html.dark .ds-num { color: #eaf2ff; }

@media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dash-kpis { grid-template-columns: 1fr; } }

/* ── Lebegő gyorsgombok (Viber + Visszahívás) ─────────────────── */
.fab-cluster { position: fixed; right: 20px; bottom: 22px; z-index: 350; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; box-shadow: 0 12px 28px -8px rgba(10,31,60,.55); transition: transform .2s, box-shadow .2s; font-family: var(--font); }
.fab:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -8px rgba(10,31,60,.6); }
.fab-viber { width: 54px; height: 54px; border-radius: 50%; justify-content: center; background: #7360f2; color: #fff; }
.fab-viber svg { width: 27px; height: 27px; }
.fab-callback { padding: 14px 20px; border-radius: 100px; background: linear-gradient(135deg,#3b86cf,#1f5fa8); color: #fff; font-weight: 800; font-size: .95rem; }
.fab-callback svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
    .fab-cluster { bottom: 80px; right: 14px; gap: 10px; }
    .fab-callback { width: 54px; height: 54px; border-radius: 50%; justify-content: center; padding: 0; }
    .fab-callback span { display: none; }
}

/* Visszahívás modal */
.cb-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,12,26,.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cb-modal[hidden] { display: none; }
.cb-card { position: relative; width: 100%; max-width: 430px; background: #fff; border-radius: 22px; padding: 30px 28px; box-shadow: 0 30px 80px -20px rgba(10,31,60,.6); }
.cb-card h3 { font-size: 1.35rem; margin-bottom: 6px; color: var(--ink); }
.cb-card > p { color: var(--slate); font-size: .95rem; margin-bottom: 18px; }
.cb-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(10,31,60,.06); color: var(--ink); font-size: 1rem; cursor: pointer; }
.cb-close:hover { background: rgba(10,31,60,.12); }
.cb-msg { margin-top: 12px; font-size: .88rem; font-weight: 700; text-align: center; min-height: 1em; }
.cb-msg.ok { color: #2f8f5b; }
.cb-msg.err { color: #d9534f; }
html.dark .cb-card { background: #12223a; }
html.dark .cb-card h3 { color: #eaf2ff; }
html.dark .cb-close { background: rgba(255,255,255,.08); color: #eaf2ff; }

/* ── Ajánlói program ──────────────────────────────────────────── */
.ref-hero { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.ref-card { flex: 1; min-width: 240px; max-width: 340px; text-align: center; padding: 34px 26px; border-radius: 22px; background: var(--glass-strong, rgba(255,255,255,.7)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm), var(--hi); }
.ref-card.featured { background: linear-gradient(180deg, var(--teal-dark), var(--ink)); border-color: rgba(255,255,255,.14); color: #fff; box-shadow: 0 26px 56px -18px rgba(10,31,60,.6), var(--hi); }
.ref-tag { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); background: rgba(31,95,168,.12); padding: 5px 13px; border-radius: 100px; margin-bottom: 14px; }
.ref-card.featured .ref-tag { background: rgba(255,255,255,.16); color: #fff; }
.ref-amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.ref-card.featured .ref-amt { color: #fff; }
.ref-card p { color: var(--slate); font-size: .95rem; margin-top: 6px; }
.ref-card.featured p { color: #cfe0f0; }
.ref-plus { font-size: 2rem; flex: none; }
.ref-share { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── Admin — sötét oldalsávos elrendezés ──────────────────────── */
.admin-body { min-height: 100vh; margin: 0; background: #eef3f9; }
.admin-body.has-sidebar { display: flex; }
html.dark .admin-body { background: #0a1524; }

.admin-sidebar {
    position: sticky; top: 0; align-self: flex-start;
    width: 252px; flex: none; height: 100vh; overflow-y: auto;
    background: #0c1a30; display: flex; flex-direction: column; padding: 22px 16px;
}
.admin-sidebar .admin-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 22px; text-decoration: none; font-size: 1rem; }
.admin-sidebar .admin-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg,#2f6fbf,#0e315f); color: #cfe8ff; display: grid; place-items: center; font-size: 1.1rem; box-shadow: var(--hi); flex: none; }
.admin-brand-txt { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; color: #fff; }
.admin-brand-txt small { font-weight: 600; font-size: .72rem; color: #7f93ad; margin-top: 2px; }

.admin-body.has-sidebar .admin-nav { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.admin-body.has-sidebar .admin-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px; font-size: .94rem; font-weight: 700;
    color: #aebdd0; background: transparent; transition: background .18s, color .18s;
}
.admin-body.has-sidebar .admin-nav a svg { width: 20px; height: 20px; flex: none; }
.admin-body.has-sidebar .admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-body.has-sidebar .admin-nav a.active { background: linear-gradient(135deg,#3b86cf,#1f5fa8); color: #fff; box-shadow: 0 8px 20px -6px rgba(31,95,168,.6); }

.admin-side-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-side-foot form { margin: 0; }
.admin-side-link, .admin-side-logout {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 11px 14px; border-radius: 12px; font-family: var(--font); font-size: .9rem; font-weight: 700;
    color: #aebdd0; background: transparent; border: none; cursor: pointer; text-decoration: none;
}
.admin-side-link svg, .admin-side-logout svg { width: 19px; height: 19px; flex: none; }
.admin-side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side-logout:hover { background: rgba(217,83,79,.16); color: #ff8a84; }

.admin-content { flex: 1; min-width: 0; }
.admin-body.has-sidebar .admin-main { max-width: 1120px; margin: 0 auto; padding: 32px 32px 60px; }
.admin-body:not(.has-sidebar) .admin-main { max-width: 460px; margin: 0 auto; padding: 60px 20px; }
.admin-body.has-sidebar .admin-flash { max-width: 1120px; margin: 22px auto -6px; }

@media (max-width: 880px) {
    .admin-body.has-sidebar { display: block; }
    .admin-sidebar { position: static; width: auto; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 12px 14px; }
    .admin-sidebar .admin-brand { padding: 0 10px 0 0; }
    .admin-body.has-sidebar .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-body.has-sidebar .admin-nav a { padding: 9px 12px; font-size: .88rem; }
    .admin-side-foot { margin: 0; padding: 0; border: none; flex-direction: row; margin-left: auto; }
    .admin-body.has-sidebar .admin-main { padding: 22px 16px 44px; }
}

/* ── Admin — rendelés tétel-szerkesztő ────────────────────────── */
.edit-tetelek { display: grid; gap: 8px; }
.edit-tetel { display: grid; grid-template-columns: 1fr 110px 70px; gap: 8px; }
.edit-tetel input { padding: 9px 12px; border: 1px solid var(--glass-line); border-radius: 10px; background: rgba(255,255,255,.6); font-family: var(--font); color: var(--ink); font-size: .9rem; }
.edit-tetel .et-ar, .edit-tetel .et-qty { text-align: right; }
html.dark .edit-tetel input { background: rgba(255,255,255,.06); color: #eaf2ff; }
@media (max-width: 520px) { .edit-tetel { grid-template-columns: 1fr; } }

/* ── Helyi SEO szöveg — olvasható, tagolt szövegblokk ─────────── */
.seo-copy { max-width: 800px; margin: 0 auto; }
.seo-copy h2 { text-align: center; margin-bottom: 30px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.seo-copy > p { font-size: 1.075rem; line-height: 1.85; color: var(--slate); margin: 0 0 22px; }
.seo-copy > p:last-child { margin-bottom: 0; }
.seo-copy strong { color: var(--teal-dark); font-weight: 700; }
.seo-copy a { color: var(--teal); font-weight: 600; border-bottom: 1px solid rgba(31,95,168,.28); transition: color .2s, border-color .2s; }
.seo-copy a:hover { color: var(--teal-dark); border-bottom-color: var(--teal); }
.seo-copy .seo-towns {
  margin-top: 30px;
  padding: 18px 22px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate);
}
.seo-copy .seo-towns strong { color: var(--ink); }

html.dark .seo-copy > p { color: #c3d2e8; }
html.dark .seo-copy strong { color: #eaf2ff; }
html.dark .seo-copy a { color: #7fb2ec; border-bottom-color: rgba(127,178,236,.35); }
html.dark .seo-copy a:hover { color: #a9cbf5; }
html.dark .seo-copy .seo-towns { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #c3d2e8; }
html.dark .seo-copy .seo-towns strong { color: #eaf2ff; }

@media (max-width: 640px) {
  .seo-copy h2 { text-align: left; margin-bottom: 22px; }
  .seo-copy > p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 18px; }
  .seo-copy .seo-towns { padding: 15px 17px; }
}