/* ============================================================
   SMARTSOLVEN — világos, letisztult, prémium
   ------------------------------------------------------------
   A sötét-neon változat effektrétege (egyedi kurzor, szemcse,
   3D dőlés, fényfolt, kipinnelt görgetés, bevezető animáció)
   szándékosan NINCS benne. Ami mozgás maradt, az halk beúszás
   vagy jelentést hordoz — a tervező tényleg felépít valamit.

   A szín itt is jelent valamit, de négy NEON helyett négy
   visszafogott árnyalat: zöld, agyag, pala, okker.
   ============================================================ */

:root {
  --paper:   #FAF9F6;
  --paper-2: #F4F2EC;
  --card:    #FFFFFF;

  --ink:   #14171D;
  --ink-2: #4B5361;
  --ink-3: #878E9B;

  --line:   #E4E0D7;
  --line-2: #EFEDE6;

  --acc:      #2F5D50;
  --acc-2:    #23463C;
  --acc-soft: #ECF1EF;

  /* Területszínek — mindegyik megáll törtfehéren, egyik sem világít. */
  --h-green: #2F5D50;
  --h-clay:  #A4553A;
  --h-slate: #3C5A7A;
  --h-ochre: #856425;

  --hue: var(--acc);

  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r:    10px;
  --r-sm:  7px;
  --r-lg: 14px;

  --sh-1: 0 1px 2px rgba(20,23,29,.04), 0 1px 3px rgba(20,23,29,.03);
  --sh-2: 0 4px 14px -6px rgba(20,23,29,.10), 0 1px 3px rgba(20,23,29,.04);
  --sh-3: 0 20px 50px -24px rgba(20,23,29,.20), 0 2px 8px rgba(20,23,29,.04);

  --pad: clamp(1.25rem, 4vw, 2.25rem);
  --sec: clamp(4.25rem, 8vw, 7.5rem);
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

/* A hidden attribútum a komponensek display: flex/grid-je miatt
   egyébként nem érvényesülne — ez a szabály nem elhagyható. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-2); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--ff-mono); font-variant-ligatures: none; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--acc); color: #fff; padding: 12px 18px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0; }
.skip:focus { left: 0; top: 0; }

/* ── Tipográfia ─────────────────────────────────────────────
   Fraunces opsz tengellyel: nagy méretben szűkebb, kis méretben
   nyitottabb rajzolat. SOFT/WONK nullán — nem akarunk játékos
   hatást, csak jó szerkesztett szöveget. */

.h1, .h2, .h3, h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -.018em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.35rem, 5.4vw, 4.15rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  line-height: 1.04;
  letter-spacing: -.028em;
}
.h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  letter-spacing: -.022em;
}
.h3 { font-size: 1.16rem; letter-spacing: -.012em; }

/* A kiemelt tagmondat: nem gradiens, nem világít — csak halkabb.
   Ettől a címsor két hangon szól, de nem kiabál. */
.h1 em, .h2 em { font-style: normal; color: var(--ink-3); }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 1.1rem 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .95rem;
}

/* ── Ikonok ─────────────────────────────────────────────── */
.ic { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }

/* ── Gombok ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: .93rem;
  font-weight: 550;
  letter-spacing: -.005em;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn .ic { width: 17px; height: 17px; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; color: #fff; transform: translateY(-1px); box-shadow: var(--sh-2); }

.btn-accent { background: var(--acc); color: #fff; }
.btn-accent:hover { background: var(--acc-2); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-2); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--card); border-color: var(--ink-3); color: var(--ink); }

.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 550; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .18s ease, gap .18s ease;
}
.link-arrow:hover { border-color: var(--ink); gap: .7rem; color: var(--ink); }
.link-arrow .ic { width: 16px; height: 16px; }

/* ── Fejléc ─────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .nav { backdrop-filter: saturate(1.4) blur(12px); }
}
.nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); min-width: 0; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 28px; height: 28px; flex: none; color: var(--ink); }
.logo-word {
  font-family: var(--ff-display);
  font-size: 1.24rem; font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30;
  letter-spacing: -.028em; white-space: nowrap;
}
/* A wordmark két hangja: a „Smart" halkabb jelző, a „Solven" a név. */
.logo-word i, .logo-word em { font-style: normal; }
.logo-word i { color: var(--ink-3); font-weight: 500; }
.logo-word em { color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: .1rem; }
.nav-links a {
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .89rem; color: var(--ink-2); font-weight: 500;
  transition: color .16s ease, background-color .16s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(20,23,29,.04); }
.nav-links .nav-cta {
  margin-left: .55rem; padding: .55rem 1.05rem;
  background: var(--ink); color: var(--paper);
}
.nav-links .nav-cta:hover { background: #000; color: #fff; }

.nav-toggle, .mm-close {
  display: none; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); width: 42px; height: 42px; border-radius: var(--r-sm);
  cursor: pointer; align-items: center; justify-content: center;
}
.mm-close { display: inline-flex; }

/* ── Mobil menü ─────────────────────────────────────────── */

.mobile-menu {
  position: fixed; inset: 0; z-index: 120; background: var(--paper);
  display: flex; flex-direction: column; padding: 1.15rem var(--pad) 2rem;
  transform: translateY(-100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  visibility: hidden; overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; }
.mm-top { display: flex; align-items: center; justify-content: space-between; height: 72px; margin-bottom: 1rem; }
.mm-links { display: flex; flex-direction: column; }
.mm-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--ff-display); font-size: 1.35rem; font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30;
  letter-spacing: -.02em; color: var(--ink);
}
.mm-links a .ic { width: 18px; height: 18px; color: var(--ink-3); }
.mm-cta { margin-top: auto; padding-top: 1.75rem; }
.mm-cta a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper); font-weight: 550;
}

/* ── Szekciók ───────────────────────────────────────────── */

.section { padding: var(--sec) 0; position: relative; }
.section--tint { background: var(--paper-2); }
.section--line { border-top: 1px solid var(--line); }

.sec-head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .lead { margin-left: auto; margin-right: auto; }

/* Szekciószám — ettől lesz „szerkesztett" a lap, nem díszes. */
.sec-num {
  display: block; font-family: var(--ff-mono); font-size: .7rem;
  letter-spacing: .16em; color: var(--ink-3); margin-bottom: .8rem;
}

/* ── Beúszás ────────────────────────────────────────────── */

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ── Hero ───────────────────────────────────────────────── */

.hero { padding: clamp(3.25rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-copy { min-width: 0; }
.hero .h1 { margin-bottom: 0; }
.hero .lead { margin-top: 1.35rem; }

.hero-facts {
  list-style: none; margin: 2.1rem 0 0; padding: 1.35rem 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem;
}
.hero-facts li { display: flex; align-items: flex-start; gap: .55rem; font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.hero-facts .ic { width: 17px; height: 17px; color: var(--acc); margin-top: .12rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }

/* A hero látványa: nyugodt termékkártya, nem animált vászon. */
.hero-visual { min-width: 0; position: relative; }
.hero-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.hero-card-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); background: #FCFBF9;
}
.hero-card-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.hero-card-bar b { margin-left: .5rem; font-family: var(--ff-mono); font-size: .72rem; font-weight: 400; color: var(--ink-3); }
.hero-card-body { padding: 1.15rem; display: flex; flex-direction: column; gap: .8rem; }

.hero-cap {
  margin: .95rem 0 0; font-family: var(--ff-mono); font-size: .71rem;
  letter-spacing: .09em; color: var(--ink-3); text-align: center;
}

/* ── Élő tervező ────────────────────────────────────────── */

.bp {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.bp-left, .bp-right { min-width: 0; }
.bp-right { display: flex; flex-direction: column; gap: 1rem; }

.bp-in {
  position: relative; min-width: 0;
  padding: 1.1rem 1.2rem 1rem;
  border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bp-in:focus-within { border-color: var(--acc); box-shadow: var(--sh-2); }
.bp-in-l { display: block; font-size: .705rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; }

.bp-input {
  width: 100%; min-width: 0; resize: vertical;
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--ff-body); font-size: 1rem; line-height: 1.6;
  padding: 0; outline: none;
}
.bp-input::placeholder { color: var(--ink-3); }

.bp-in-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line-2); }
.bp-status { font-size: .73rem; color: var(--ink-3); }
.bp-clear { background: none; border: 0; color: var(--ink-3); font-size: .78rem; cursor: pointer; padding: 0; }
.bp-clear:hover { color: var(--ink); }

.bp-samples { margin-top: 1.25rem; }
.bp-samples-l { display: block; font-size: .705rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem; }
.bp-samples-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.bp-sample {
  padding: .45rem .85rem; border-radius: 99px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .82rem;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.bp-sample:hover { border-color: var(--ink-3); color: var(--ink); }

.bp-found { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; min-height: 86px; align-content: flex-start; }
.bp-empty { margin: 0; font-size: .84rem; color: var(--ink-3); max-width: 46ch; }

.bp-hit {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem; border-radius: 99px;
  background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  color: var(--acc); font-size: .82rem; font-weight: 500;
  animation: bpPop .32s cubic-bezier(.2,.8,.3,1) both;
}
.bp-hit .ic { width: 15px; height: 15px; }
.bp-hit .bp-why { font-style: normal; font-family: var(--ff-mono); font-size: .68rem; color: var(--ink-3); }
@keyframes bpPop { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } }

.bp-screen {
  min-width: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--sh-3);
}
.bp-screen-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line-2); background: #FCFBF9; }
.bp-screen-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.bp-screen-bar b { margin-left: .5rem; font-size: .71rem; font-weight: 400; color: var(--ink-3); }

.bp-est {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.15rem 1.25rem; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.bp-est-fig { display: flex; flex-direction: column; gap: .1rem; min-width: 190px; }
.bp-est-act { display: flex; flex-direction: column; gap: .5rem; min-width: 220px; flex: 1; }

.bp-note { display: flex; align-items: flex-start; gap: .65rem; margin: 1.75rem auto 0; max-width: 760px; font-size: .82rem; color: var(--ink-3); }
.bp-note .ic { width: 16px; height: 16px; color: var(--acc); margin-top: .18rem; }

/* ── Képesség-böngésző ──────────────────────────────────── */

.explorer {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden; box-shadow: var(--sh-1);
}
.ex-nav { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #FCFBF9; padding: .5rem; }
.ex-rail { position: absolute; left: .5rem; top: 0; width: 2px; }
.ex-rail i {
  position: absolute; left: 0; top: 0; width: 2px; display: block;
  background: var(--acc); border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), height .3s ease;
}
.ex-tab {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .85rem; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--ink-2); font-size: .9rem; font-weight: 500;
  border-radius: var(--r-sm);
  transition: color .16s ease, background-color .16s ease;
}
.ex-tab:hover { color: var(--ink); background: rgba(20,23,29,.035); }
.ex-tab.on { color: var(--ink); background: var(--card); font-weight: 600; box-shadow: var(--sh-1); }
.ex-tab-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; color: var(--ink-3); background: rgba(20,23,29,.04); transition: color .16s ease, background-color .16s ease; }
.ex-tab.on .ex-tab-ic { color: #fff; background: var(--hue); }
.ex-tab .ic { width: 17px; height: 17px; }

.ex-panes { position: relative; min-width: 0; }
.ex-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); height: 100%; }
.ex-pane.on { animation: exIn .3s ease both; }
@keyframes exIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ex-body { min-width: 0; }
.ex-body h3 { font-size: 1.4rem; margin-bottom: .6rem; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30; }
.ex-body p { color: var(--ink-2); font-size: .95rem; margin: 0 0 1.25rem; }
.ex-mods { display: flex; flex-wrap: wrap; gap: .4rem; }
.ex-mod {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-2);
}
.ex-mod .ic { width: 13px; height: 13px; color: var(--hue); }
.ex-mock { min-width: 0; display: flex; align-items: center; }
.ex-note { margin: 1.5rem auto 0; max-width: 720px; text-align: center; font-size: .87rem; color: var(--ink-3); }

/* ── Vázlat-építőkockák (mk-*) ───────────────────────────
   Ugyanaz a néhány kocka rakja ki minden felület vázlatát — épp ez a
   mondandó, ezért nincs itt képernyőfotó. Világosra hangolva: a sötét
   változat ragyogásai (box-shadow a --hue színnel) kimaradtak, mert
   törtfehéren piszkos foltnak látszanának. */

.mk-frame {
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .85rem; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.mk-frame > * { flex: none; }

.mk-toolbar { display: flex; align-items: center; gap: .4rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-2); }
.mk-pill { height: 8px; width: 34px; border-radius: 99px; background: var(--line); }
.mk-pill.w-l { width: 54px; background: color-mix(in srgb, var(--hue) 32%, var(--line)); }
.mk-pill.w-s { width: 22px; }
.mk-btn { margin-left: auto; height: 16px; width: 40px; border-radius: 5px; background: color-mix(in srgb, var(--hue) 45%, transparent); }

.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.mk-stat { padding: .5rem .55rem; border-radius: 7px; background: var(--paper); display: flex; flex-direction: column; gap: .35rem; }
.mk-stat i { height: 5px; width: 60%; border-radius: 99px; background: var(--line); }
.mk-stat b { height: 11px; width: 70%; border-radius: 4px; background: var(--hue); opacity: .7; }
.mk-stat b.w-s { width: 45%; }
.mk-stat b.w-l { width: 90%; }

.mk-table { display: flex; flex-direction: column; gap: .3rem; }
.mk-tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr .7fr; gap: .45rem; padding: .38rem .3rem; border-radius: 5px; }
.mk-tr span { height: 6px; border-radius: 99px; background: var(--line); }
.mk-tr.mk-th span { background: color-mix(in srgb, var(--hue) 35%, var(--line)); }
.mk-tr:not(.mk-th):nth-child(even) { background: var(--paper); }

.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mk-cal span { aspect-ratio: 1; border-radius: 4px; background: var(--paper); }
.mk-cal span.dim { background: var(--paper-2); }
.mk-cal span.on { background: var(--hue); opacity: .82; }

.mk-list { display: flex; flex-direction: column; gap: .35rem; }
.mk-li { display: flex; align-items: center; gap: .5rem; padding: .42rem .5rem; border-radius: 6px; background: var(--paper); }
.mk-li i { width: 6px; height: 6px; border-radius: 50%; background: var(--hue); flex: none; }
.mk-li span { flex: 1; height: 6px; border-radius: 99px; background: var(--line); }
.mk-li b { width: 26px; height: 6px; border-radius: 99px; background: var(--line-2); }

.mk-chart { display: flex; align-items: flex-end; gap: .35rem; height: 74px; padding-top: .3rem; }
.mk-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 72%, transparent), color-mix(in srgb, var(--hue) 14%, transparent)); }

.mk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.mk-card { padding: .55rem; border-radius: 7px; background: var(--paper); display: flex; flex-direction: column; gap: .3rem; }
.mk-card i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--hue) 42%, transparent); margin-bottom: .15rem; }
.mk-card span { height: 5px; border-radius: 99px; background: var(--line); }
.mk-card span.w-s { width: 55%; }

.mk-form { display: flex; flex-direction: column; gap: .4rem; }
.mk-field { height: 22px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-2); }
.mk-submit { height: 22px; width: 78px; border-radius: 6px; background: var(--hue); opacity: .8; }

/* ── Demó-kártyák ───────────────────────────────────────── */

.demos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.demo-card {
  display: flex; flex-direction: column; gap: .35rem; min-width: 0;
  padding: 1.35rem 1.25rem 1.2rem;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
  color: var(--ink); box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.demo-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--ink-3); color: var(--ink); }
.demo-kind {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: .2rem .55rem; border-radius: 4px; margin-bottom: .45rem;
  font-size: .655rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hue); background: color-mix(in srgb, var(--hue) 9%, transparent);
}
.demo-card h3 { font-size: 1.06rem; }
.demo-card p { margin: 0; font-size: .845rem; color: var(--ink-2); line-height: 1.5; flex: 1; }
.demo-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .85rem; font-size: .82rem; font-weight: 550; color: var(--ink); }
.demo-go .ic { width: 15px; height: 15px; transition: transform .2s ease; }
.demo-card:hover .demo-go .ic { transform: translateX(3px); }
.demos-note { margin: 1.75rem 0 0; text-align: center; }

/* ── Folyamat ───────────────────────────────────────────── */

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.flow-step {
  min-width: 0; padding: 1.5rem 1.35rem 1.35rem;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.flow-num { display: block; font-size: .78rem; color: var(--ink-3); margin-bottom: 1.6rem; letter-spacing: .06em; }
.flow-step h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.flow-step p { margin: 0; font-size: .855rem; color: var(--ink-2); line-height: 1.55; flex: 1; }
.flow-meta { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line-2); font-size: .72rem; color: var(--ink-3); letter-spacing: .05em; }

/* ── Árak ───────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.tier--hot { border-color: var(--ink); box-shadow: var(--sh-2); }
.tier-flag {
  position: absolute; top: -.65rem; left: 1.5rem;
  padding: .2rem .6rem; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-size: .655rem; letter-spacing: .09em; text-transform: uppercase;
}
.tier-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); margin-bottom: 1rem; color: var(--hue); background: color-mix(in srgb, var(--hue) 9%, transparent); }
.tier h3 { font-size: 1.24rem; }
.tier-sub { margin: .35rem 0 1.15rem; font-size: .87rem; color: var(--ink-2); }
.tier-price { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-2); }
.tier-price span { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.tier-price b { font-family: var(--ff-display); font-size: 1.65rem; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30; letter-spacing: -.02em; }
.tier-eta { display: flex; align-items: center; gap: .45rem; padding: .8rem 0; font-size: .83rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.tier-eta .ic { width: 16px; height: 16px; color: var(--hue); }
.tier-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.tier-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .855rem; color: var(--ink-2); line-height: 1.5; }
.tier-list .ic { width: 15px; height: 15px; color: var(--hue); margin-top: .2rem; }
.tiers-note { display: flex; align-items: flex-start; gap: .65rem; margin: 1.75rem auto 0; max-width: 760px; font-size: .83rem; color: var(--ink-3); }
.tiers-note .ic { width: 16px; height: 16px; color: var(--acc); margin-top: .18rem; }
.tiers-note b { color: var(--ink-2); }

/* ── Összeállító ────────────────────────────────────────── */

.conf { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.conf-pick { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.conf-group { display: flex; flex-direction: column; gap: .8rem; }
.conf-label { font-size: .705rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.conf-bases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.conf-base {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: 1rem; cursor: pointer; text-align: left; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-2);
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.conf-base:hover { border-color: var(--ink-3); color: var(--ink); }
.conf-base.on { border-color: var(--hue); color: var(--ink); box-shadow: 0 0 0 1px var(--hue); }
.conf-base-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--hue); background: color-mix(in srgb, var(--hue) 9%, transparent); }
.conf-base b { font-size: .93rem; font-weight: 600; }
.conf-base small { font-size: .715rem; color: var(--ink-3); }

.conf-mods { display: flex; flex-wrap: wrap; gap: .45rem; }
.conf-mod {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .52rem .85rem; border-radius: 99px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  font-size: .845rem;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.conf-mod:hover { border-color: var(--ink-3); color: var(--ink); }
.conf-mod[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
.conf-mod .ic { width: 15px; height: 15px; }

.conf-out {
  position: sticky; top: 96px; min-width: 0;
  padding: 1.5rem; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.conf-figure { display: flex; flex-direction: column; gap: .15rem; margin: .6rem 0 1rem; }
.conf-price { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 30; letter-spacing: -.02em; color: var(--ink); }
.conf-weeks { font-size: .8rem; color: var(--ink-3); }
.conf-bar { height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-bottom: 1.1rem; }
.conf-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--acc); transition: width .4s cubic-bezier(.4,0,.2,1); }
.conf-list { list-style: none; margin: 0; padding: .35rem 0 1.1rem; display: flex; flex-direction: column; gap: .35rem; max-height: 190px; overflow-y: auto; }
.conf-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--ink-2); }
.conf-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; flex: none; margin-top: .55rem; background: var(--acc); }
.conf-empty { color: var(--ink-3); }
.conf-empty::before { background: var(--line) !important; }
.conf-note { margin: .8rem 0 0; font-size: .75rem; color: var(--ink-3); line-height: 1.5; }

/* ── GYIK ───────────────────────────────────────────────── */

.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  font-family: var(--ff-display); font-size: 1.06rem; font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
  letter-spacing: -.012em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { flex: none; color: var(--ink-3); transition: transform .25s ease, color .25s ease; }
.faq-plus .ic { width: 18px; height: 18px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); color: var(--ink); }
.faq-a { padding: 0 0 1.35rem; }
.faq-a p { margin: 0; color: var(--ink-2); font-size: .93rem; max-width: 68ch; }

/* ── Kapcsolat ──────────────────────────────────────────── */

.contact { background: var(--paper-2); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-points { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.contact-points li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-2); }
.contact-points .ic { width: 16px; height: 16px; color: var(--acc); }

.contact-methods { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.contact-methods a, .contact-methods span { display: inline-flex; align-items: center; gap: .5rem; font-size: .885rem; color: var(--ink-2); }
.contact-methods a:hover { color: var(--ink); }
.contact-methods .ic { width: 16px; height: 16px; color: var(--ink-3); }

.contact-card { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); min-width: 0; }

.cform { display: flex; flex-direction: column; gap: 1rem; }
.cform-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.field label { font-size: .78rem; font-weight: 550; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; min-width: 0; padding: .72rem .85rem;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-family: var(--ff-body); font-size: .93rem; line-height: 1.5;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--acc); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field .err, .field input.err, .field textarea.err { border-color: #B4462F; }

.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.consent input { margin-top: .22rem; width: 16px; height: 16px; accent-color: var(--acc); flex: none; }
.consent.err span { color: #B4462F; }

.cform-ok, .cform-err { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: .87rem; margin-bottom: 1.25rem; }
.cform-ok { background: var(--acc-soft); color: var(--acc-2); border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent); }
.cform-err { background: #FBEEEB; color: #8E3624; border: 1px solid #E8C4BB; }
.cform-ok .ic, .cform-err .ic { width: 17px; height: 17px; margin-top: .12rem; }

/* ── Lábléc ─────────────────────────────────────────────── */

.footer { background: var(--ink); color: #C8CCD4; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer .logo, .footer .logo:hover { color: #fff; }
.footer .logo-mark { color: #fff; }
.footer .logo-word i { color: #7E8695; }
.footer .logo-word em { color: #fff; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { min-width: 0; }
.footer-blurb { margin: 1.1rem 0 0; font-size: .875rem; color: #99A0AC; max-width: 42ch; line-height: 1.6; }
.footer-blurb strong { color: #E6E9EE; font-weight: 550; }
.footer-col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.footer-col h4 { font-family: var(--ff-mono); font-size: .69rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: #6E7684; margin-bottom: .4rem; }
.footer-col a { font-size: .875rem; color: #C8CCD4; }
.footer-col a:hover { color: #fff; }
.footer-bottom { padding-top: 1.5rem; }
.footer-bottom small { font-size: .78rem; color: #6E7684; }

/* ── Süti-sáv ───────────────────────────────────────────── */

.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 130;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-3);
}
.cookie p { margin: 0; flex: 1; min-width: 220px; font-size: .82rem; color: var(--ink-2); }
.cookie-actions { display: flex; align-items: center; gap: .5rem; }
.cookie-actions .btn { padding: .55rem 1rem; font-size: .84rem; }
.cookie-x { background: none; border: 0; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); }
.cookie-x:hover { color: var(--ink); background: rgba(20,23,29,.05); }

/* ── Jogi és GYIK oldalak ───────────────────────────────── */

.page { padding: clamp(3rem, 6vw, 5rem) 0 var(--sec); }
.page-narrow { max-width: 780px; }
.page h2 { font-size: 1.45rem; margin: 2.5rem 0 .75rem; }
.page h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.page p, .page li { color: var(--ink-2); font-size: .95rem; }
.page ul, .page ol { padding-left: 1.25rem; }
.page li { margin-bottom: .35rem; }

/* ── Reszponzív ─────────────────────────────────────────── */

@media (max-width: 1180px) {
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-visual { order: 2; }
  .bp { grid-template-columns: minmax(0, 1fr); }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .ex-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .ex-nav::-webkit-scrollbar { display: none; }
  .ex-rail { display: none; }
  .ex-tab { flex: none; white-space: nowrap; }
  .ex-pane { grid-template-columns: minmax(0, 1fr); }
  .ex-mock { display: none; }
  .conf { grid-template-columns: minmax(0, 1fr); }
  .conf-out { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-facts { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .demos { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .conf-bases { grid-template-columns: minmax(0, 1fr); }
  .cform-row { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .bp-est { flex-direction: column; align-items: stretch; }
  .bp-est-act, .bp-est-fig { min-width: 0; }
}

/* ── Csökkentett mozgás ─────────────────────────────────
   Itt eleve kevés a mozgás, de amit hagytunk, az is álljon le. */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   A GENERÁLT MINTAFELÜLET (.ap-*)
   Az élő tervező jobb oldali képernyője. Ez eleve világos volt:
   szándékosan úgy néz ki, ahogy a MEGRENDELŐ saját rendszere nézne
   ki — nem a SmartSolven arculata. Az akcentus a zöldre hangolva.
   ============================================================ */

.bp-app {
  --ap-acc: #2F5D50;
  --ap-ink: #12151B;
  --ap-mute: #626B7A;
  --ap-line: #E3E7ED;
  --ap-soft: #F5F7FA;
  display: flex; flex-direction: column;
  background: #fff; color: var(--ap-ink);
  font-family: var(--ff-body); font-size: 12.5px; line-height: 1.45;
  min-height: 330px;
}
.bp-app[data-base="webshop"] { --ap-acc: #C81E63; }
.bp-app[data-base="rendszer"] { --ap-acc: #6134C4; }

/* ⚠️ A hidden attribútumot a komponensek display: flex/grid-je felülírná
   (mini űrlap, portál-csempék tartalma, jóváhagyó gombsor). */
.bp-app [hidden] { display: none !important; }
.bp-app b, .bp-app strong { font-weight: 600; }
.bp-app button { font-family: inherit; font-size: inherit; cursor: pointer; }
.bp-app :focus-visible { outline: 2px solid var(--ap-acc); outline-offset: 2px; }

/* ── Fejléc és menü ─────────────────────────────────────── */

.ap-topbar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid var(--ap-line); }
.ap-logo { width: 16px; height: 16px; border-radius: 5px; background: var(--ap-acc); flex: none; }
.ap-brand { font-size: 13px; letter-spacing: -.01em; }
.ap-topbar .ap-live { margin-left: auto; background: var(--ap-soft); color: var(--ap-mute); }

.ap-tabs { display: flex; gap: .15rem; padding: 0 .5rem; border-bottom: 1px solid var(--ap-line); overflow-x: auto; scrollbar-width: none; }
.ap-tabs::-webkit-scrollbar { display: none; }
/* Jelzés, hogy a fülsáv oldalra görgethető, ha nem fér ki minden fül. */
.ap-tabs { mask-image: linear-gradient(90deg, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.ap-tab {
  position: relative; white-space: nowrap; padding: .55rem .6rem; border: 0; background: none;
  color: var(--ap-mute); font-size: 12px; font-weight: 500;
}
.ap-tab::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; background: var(--ap-acc); border-radius: 2px; opacity: 0; }
.ap-tab:hover { color: var(--ap-ink); }
.ap-tab.on { color: var(--ap-acc); }
.ap-tab.on::after { opacity: 1; }
.ap-tab.ap-in { animation: apIn .32s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes apIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ap-body { flex: 1; padding: .75rem .8rem; min-height: 258px; }
.ap-view { display: flex; flex-direction: column; gap: .6rem; animation: apView .3s ease both; }
@keyframes apView { from { opacity: 0; } to { opacity: 1; } }
.ap-view[hidden] { display: none; }

/* ── Közös elemek ───────────────────────────────────────── */

.ap-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ap-head > b { font-size: 12.5px; }
.ap-sub { font-size: 12px; color: var(--ap-mute); font-weight: 500; }
.ap-muted { color: var(--ap-mute); }
.ap-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.ap-row-sm { gap: .3rem; }

.ap-btn {
  padding: .42rem .7rem; border-radius: 7px; border: 1px solid var(--ap-line);
  background: #fff; color: var(--ap-ink); font-size: 12px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ap-btn:hover { border-color: var(--ap-acc); color: var(--ap-acc); }
.ap-btn-pri { background: var(--ap-acc); border-color: var(--ap-acc); color: #fff; }
.ap-btn-pri:hover { background: var(--ap-ink); border-color: var(--ap-ink); color: #fff; }
.ap-btn-sm { padding: .28rem .55rem; font-size: 11.5px; }
.ap-btn-wide { width: 100%; }
.ap-btn.ap-done { background: #10814B; border-color: #10814B; color: #fff; }

.ap-badge {
  display: inline-block; padding: .16rem .45rem; border-radius: 99px;
  background: var(--ap-soft); color: var(--ap-mute); font-size: 10.5px; font-weight: 500; white-space: nowrap;
}
.ap-badge.ap-ok { background: #E7F6EE; color: #10814B; }
.ap-badge.ap-wip { background: #FFF3DC; color: #9A6206; }
.ap-badge.ap-bad { background: #FDECEC; color: #B22B2B; }

.ap-note { margin: 0; font-size: 11.5px; color: var(--ap-mute); }
.ap-note.ap-note-ok { color: #10814B; }

.ap-seg { display: inline-flex; background: var(--ap-soft); border-radius: 7px; padding: 2px; }
.ap-seg button { border: 0; background: none; color: var(--ap-mute); padding: .28rem .55rem; border-radius: 5px; font-size: 11.5px; font-weight: 500; }
.ap-seg button.on { background: #fff; color: var(--ap-ink); box-shadow: 0 1px 3px rgba(16, 21, 27, .12); }
.ap-seg-sm button { padding: .2rem .45rem; font-size: 11px; }

.ap-tgl { width: 34px; height: 19px; border-radius: 99px; border: 0; background: #D3D8E0; padding: 2px; flex: none; transition: background .18s ease; }
.ap-tgl i { display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s ease; }
.ap-tgl.on { background: var(--ap-acc); }
.ap-tgl.on i { transform: translateX(15px); }

.ap-list { display: flex; flex-direction: column; gap: .3rem; }
.ap-li {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .6rem; border: 1px solid var(--ap-line); border-radius: 8px; background: #fff;
}
.ap-li > div { display: flex; flex-direction: column; min-width: 0; }
.ap-li b { font-size: 12px; }
.ap-li span { font-size: 11px; color: var(--ap-mute); }
.ap-li.sel, .ap-file.sel { border-color: var(--ap-acc); background: color-mix(in srgb, var(--ap-acc) 5%, #fff); }
.ap-file { cursor: pointer; }

.ap-tablewrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.ap-table th, .ap-table td { text-align: left; padding: .4rem .5rem; font-size: 11.5px; border-bottom: 1px solid var(--ap-line); white-space: nowrap; }
.ap-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-mute); font-weight: 500; }
.ap-table tbody tr { cursor: default; }
.ap-table tbody tr[data-act] { cursor: pointer; }
.ap-table tbody tr:hover { background: var(--ap-soft); }
.ap-table tbody tr.sel { background: color-mix(in srgb, var(--ap-acc) 8%, #fff); }
.ap-table tbody tr[hidden] { display: none; }

.ap-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ap-kpi { padding: .5rem .6rem; border-radius: 8px; background: var(--ap-soft); display: flex; flex-direction: column; }
.ap-kpi span { font-size: 10.5px; color: var(--ap-mute); }
.ap-kpi b { font-size: 15px; letter-spacing: -.02em; }
.ap-kpi em { font-style: normal; font-size: 10.5px; color: var(--ap-acc); }

.ap-chart { display: flex; align-items: flex-end; gap: .3rem; height: 84px; padding: .3rem .1rem 0; }
.ap-chart span { flex: 1; border-radius: 4px 4px 0 0; background: var(--ap-acc); opacity: .85; transition: height .45s cubic-bezier(.2, .7, .3, 1); }
.ap-chart span:last-child { opacity: 1; }

/* ── Foglalás ───────────────────────────────────────────── */

.ap-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ap-cal-h { text-align: center; font-size: 10px; color: var(--ap-mute); padding-bottom: 2px; }
.ap-day {
  border: 1px solid var(--ap-line); background: #fff; border-radius: 6px;
  padding: .3rem 0; font-size: 11px; color: var(--ap-ink);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ap-day:hover:not([disabled]) { border-color: var(--ap-acc); color: var(--ap-acc); }
.ap-day.full, .ap-day[disabled] { background: var(--ap-soft); color: #B6BDC8; cursor: not-allowed; }
.ap-day.sel { background: var(--ap-acc); border-color: var(--ap-acc); color: #fff; font-weight: 600; }
.ap-legend { display: inline-flex; align-items: center; gap: .35rem; font-size: 10.5px; color: var(--ap-mute); }
.ap-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.ap-dot-free { background: var(--ap-acc); }
.ap-dot-full { background: #D3D8E0; }

.ap-slots { display: flex; flex-wrap: wrap; gap: .3rem; }
.ap-slot { padding: .3rem .55rem; border-radius: 99px; border: 1px solid var(--ap-line); background: #fff; font-size: 11.5px; }
.ap-slot:hover { border-color: var(--ap-acc); color: var(--ap-acc); }
.ap-slot.on { background: var(--ap-acc); border-color: var(--ap-acc); color: #fff; }

/* ── Fizetés ────────────────────────────────────────────── */

.ap-sum { border: 1px solid var(--ap-line); border-radius: 8px; overflow: hidden; }
.ap-sum-row { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; font-size: 12px; }
.ap-sum-row + .ap-sum-row { border-top: 1px solid var(--ap-line); }
.ap-sum-row span { color: var(--ap-mute); }
.ap-sum-total { background: var(--ap-soft); }
.ap-sum-total b { color: var(--ap-acc); font-size: 13.5px; }

.ap-pays { display: flex; flex-wrap: wrap; gap: .3rem; }
.ap-pay { padding: .35rem .65rem; border-radius: 7px; border: 1px solid var(--ap-line); background: #fff; font-size: 11.5px; font-weight: 500; color: var(--ap-mute); }
.ap-pay:hover { border-color: var(--ap-acc); color: var(--ap-acc); }
.ap-pay.on { border-color: var(--ap-acc); background: color-mix(in srgb, var(--ap-acc) 8%, #fff); color: var(--ap-acc); }

/* ── Landing, webshop ───────────────────────────────────── */

.ap-lp { padding: .85rem .9rem; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--ap-acc) 10%, #fff), var(--ap-soft)); }
.ap-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-acc); font-weight: 600; }
.ap-lp h4 { margin: .25rem 0 .3rem; font-family: var(--ff-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.ap-lp p { margin: 0 0 .6rem; font-size: 11.5px; color: var(--ap-mute); }

.ap-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ap-card { padding: .55rem; border: 1px solid var(--ap-line); border-radius: 8px; display: flex; flex-direction: column; gap: .1rem; }
.ap-card i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--ap-acc) 22%, #fff); margin-bottom: .25rem; }
.ap-card b { font-size: 11.5px; }
.ap-card span { font-size: 10.5px; color: var(--ap-mute); }

.ap-form { border: 1px solid var(--ap-line); border-radius: 8px; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.ap-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ap-form label { display: flex; flex-direction: column; gap: .15rem; font-size: 10.5px; color: var(--ap-mute); }
.ap-form input { border: 1px solid var(--ap-line); border-radius: 6px; padding: .35rem .45rem; font-size: 11.5px; color: var(--ap-ink); font-family: inherit; background: #fff; }

.ap-prods { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ap-prod { border: 1px solid var(--ap-line); border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .1rem; }
.ap-prod i { display: block; height: 34px; border-radius: 6px; background: linear-gradient(140deg, color-mix(in srgb, var(--ap-acc) 18%, #fff), var(--ap-soft)); margin-bottom: .3rem; }
.ap-prod b { font-size: 11.5px; }
.ap-prod > span { font-size: 10.5px; color: var(--ap-mute); }
.ap-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .35rem; }
.ap-prod-foot em { font-style: normal; font-weight: 600; font-size: 12px; }
.ap-cart { font-size: 11.5px; color: var(--ap-mute); }
.ap-cart b { color: var(--ap-acc); }

/* ── Szűrők, portál, napló, mobil ───────────────────────── */

.ap-toolbar { display: flex; align-items: center; gap: .5rem; }
.ap-search { flex: 1; min-width: 0; border: 1px solid var(--ap-line); border-radius: 7px; padding: .38rem .55rem; font-size: 11.5px; font-family: inherit; color: var(--ap-ink); background: #fff; }
.ap-search:focus { outline: none; border-color: var(--ap-acc); }
.ap-count { font-size: 11px; color: var(--ap-mute); white-space: nowrap; }
.ap-count b { color: var(--ap-ink); }

.ap-filters { display: flex; flex-direction: column; gap: .45rem; }
.ap-filter { display: flex; align-items: center; gap: .5rem; }
.ap-filter > span { width: 62px; flex: none; font-size: 11px; color: var(--ap-mute); }
.ap-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ap-chip { padding: .22rem .5rem; border-radius: 99px; border: 1px solid var(--ap-line); background: #fff; font-size: 11px; color: var(--ap-mute); }
.ap-chip.on { border-color: var(--ap-acc); background: color-mix(in srgb, var(--ap-acc) 8%, #fff); color: var(--ap-acc); font-weight: 500; }
.ap-result { padding: .5rem .6rem; border-radius: 8px; background: var(--ap-soft); font-size: 11.5px; color: var(--ap-mute); }
.ap-result b { font-size: 14px; color: var(--ap-ink); margin-right: .2rem; }

.ap-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.ap-check { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border: 1px solid var(--ap-line); border-radius: 7px; background: #fff; font-size: 11.5px; color: var(--ap-mute); text-align: left; }
.ap-check i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid #C7CDD7; flex: none; position: relative; }
.ap-check.on { color: var(--ap-ink); border-color: color-mix(in srgb, var(--ap-acc) 45%, #fff); }
.ap-check.on i { background: var(--ap-acc); border-color: var(--ap-acc); }
.ap-check.on i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }

.ap-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ap-tile { padding: .5rem .55rem; border: 1px solid var(--ap-line); border-radius: 8px; background: #fff; font-size: 11.5px; color: var(--ap-mute); text-align: left; display: flex; flex-direction: column; }
.ap-tile b { font-size: 15px; color: var(--ap-ink); }
.ap-tile.on { border-color: var(--ap-acc); background: color-mix(in srgb, var(--ap-acc) 7%, #fff); color: var(--ap-acc); }
.ap-tile.on b { color: var(--ap-acc); }

.ap-time { list-style: none; margin: 0; padding: 0 0 0 .2rem; display: flex; flex-direction: column; gap: .5rem; }
.ap-time li { display: flex; gap: .55rem; font-size: 11.5px; position: relative; padding-left: .8rem; }
.ap-time li::before { content: ''; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 50%; background: var(--ap-acc); }
.ap-time li::after { content: ''; position: absolute; left: 2.5px; top: 1.1em; bottom: -.55rem; width: 1px; background: var(--ap-line); }
.ap-time li:last-child::after { display: none; }
.ap-time-h { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ap-mute); flex: none; }
.ap-time div { color: var(--ap-mute); }
.ap-time b { color: var(--ap-ink); }

.ap-view-mob { align-items: center; }
.ap-phone { width: 190px; border: 1px solid var(--ap-line); border-radius: 16px; padding: .5rem; background: var(--ap-soft); }
.ap-phone-top { display: flex; align-items: center; justify-content: space-between; padding: .1rem .25rem .45rem; font-size: 11.5px; }
.ap-phone-top span { font-size: 10.5px; color: #fff; background: var(--ap-acc); border-radius: 99px; padding: 0 .35rem; }
.ap-phone-list { display: flex; flex-direction: column; gap: .25rem; }
.ap-phone .ap-li { padding: .35rem .45rem; cursor: pointer; }
.ap-phone .ap-li b { font-size: 11px; }
.ap-phone .ap-li span { font-size: 10px; }

.ap-lang h4 { margin: 0 0 .25rem; }

@media (max-width: 560px) {
  .ap-kpis, .ap-cards3, .ap-tiles { grid-template-columns: 1fr 1fr; }
  .ap-kpi:last-child, .ap-card:last-child { grid-column: span 2; }
  .ap-prods, .ap-checks, .ap-fields { grid-template-columns: 1fr; }
  .ap-tiles .ap-tile:last-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-tab.ap-in, .ap-view { animation: none; }
  .ap-chart span { transition: none; }
}

/* ============================================================
   BELSŐ OLDALAK — /gyik, impresszum, adatvédelem, 404
   Ezek a studio layoutot használják, de saját osztályaik vannak.
   ============================================================ */

/* ── Oldalfejléc és morzsa ──────────────────────────────── */

.legal-hero {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.legal-hero h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 48;
  letter-spacing: -.026em; line-height: 1.06; margin: 0;
}
.legal-hero .lead { margin-top: 1rem; }

.crumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; font-size: .82rem; color: var(--ink-3); flex-wrap: wrap; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }
.crumb .ic { width: 13px; height: 13px; color: var(--ink-3); }
.crumb span { color: var(--ink-3); }

/* ── Jogi oldalak ───────────────────────────────────────── */

.legal { max-width: 800px; }
.legal h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.06rem; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { color: var(--ink-2); font-size: .945rem; }
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code {
  font-family: var(--ff-mono); font-size: .86em;
  padding: .1em .38em; border-radius: 4px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
}
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .9rem; }
.legal th, .legal td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 600; }
.legal td { color: var(--ink-2); }

.legal-note {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .95rem 1.1rem; margin: 0 0 2rem;
  border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--h-ochre) 30%, transparent);
  background: color-mix(in srgb, var(--h-ochre) 7%, transparent);
  font-size: .87rem; color: var(--ink-2);
}
.legal-note .ic { width: 17px; height: 17px; color: var(--h-ochre); margin-top: .18rem; flex: none; }

.legal-back { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal-back a { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 550; color: var(--ink); }
.legal-back a:hover { color: var(--acc); }
.legal-back .ic { width: 16px; height: 16px; transform: rotate(180deg); }

/* ── GYIK oldal ─────────────────────────────────────────── */

.qa-tldr {
  padding: 1.5rem 1.65rem; margin-bottom: 2.75rem;
  border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  border-left: 3px solid var(--acc);
}
.qa-tldr h2 { font-size: 1.1rem; margin: 0 0 .85rem; }
.qa-tldr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.qa-tldr li { font-size: .92rem; color: var(--ink-2); line-height: 1.55; padding-left: 1.1rem; position: relative; }
.qa-tldr li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.qa-tldr b { color: var(--ink); font-weight: 600; }

.qa-block { margin-bottom: 3rem; }
.qa-block > h2 {
  font-size: 1.5rem; margin: 0 0 1.35rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 36;
}
.qa-item { margin-bottom: 1.6rem; max-width: 78ch; }
.qa-item h3 { font-size: 1.06rem; margin: 0 0 .4rem; }
.qa-item p { margin: 0; color: var(--ink-2); font-size: .945rem; }
.qa-small { font-size: .82rem; color: var(--ink-3); margin: .9rem 0 0; }

.qa-table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.qa-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.qa-table thead th {
  text-align: left; padding: .8rem 1rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; font-family: var(--ff-mono);
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.qa-table tbody th {
  text-align: left; padding: .9rem 1rem; color: var(--ink);
  font-weight: 600; border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.qa-table tbody th small { display: block; margin-top: .2rem; font-weight: 400; font-size: .82rem; color: var(--ink-3); }
.qa-table td { padding: .9rem 1rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2); vertical-align: top; }
.qa-table tbody tr:last-child th, .qa-table tbody tr:last-child td { border-bottom: 0; }

.qa-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-top: 1rem;
  padding: 1.75rem 1.85rem; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.qa-cta h2 { font-size: 1.3rem; margin: 0 0 .35rem; }
.qa-cta p { margin: 0; font-size: .92rem; color: var(--ink-2); max-width: 56ch; }
.qa-cta-btns { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── 404 ────────────────────────────────────────────────── */

.err-page { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }
.err-grid { display: none; }   /* a sötét változat rácsa itt nem kell */
.err-inner { max-width: 700px; }
.err-inner .h1 { margin-bottom: 1.2rem; }
.err-inner .eyebrow { color: var(--acc); }
.err-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.err-more { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.err-more a { font-size: .88rem; color: var(--ink-2); }
.err-more a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .qa-cta { flex-direction: column; align-items: stretch; }
  .qa-cta-btns .btn { width: 100%; }

  /* Az ár-táblázat mobilon kártyákra bomlik: a HATÁRIDŐ oszlop —
     a legfontosabb adat — különben csak oldalra görgetve látszana. */
  .qa-table-wrap { overflow-x: visible; border: 0; background: none; }
  .qa-table, .qa-table tbody, .qa-table tr, .qa-table th, .qa-table td { display: block; width: 100%; }
  .qa-table thead { display: none; }
  .qa-table tbody tr {
    margin-bottom: .8rem; border-radius: var(--r); overflow: hidden;
    background: var(--card); border: 1px solid var(--line);
  }
  .qa-table tbody th { border-bottom: 1px solid var(--line-2); }
  .qa-table td { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
  .qa-table td::before {
    content: attr(data-l); flex: none;
    font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3);
  }
}

/* A jogi és GYIK oldalakon a fejléc-sáv után nem kell a teljes szekció-térköz:
   a sáv maga is ad levegőt, együtt már üres foltnak látszott. */
.legal-hero + .section { padding-top: clamp(2.25rem, 4.5vw, 3.25rem); }

/* ── A tervező üres állapota ─────────────────────────────
   Amíg nincs szöveg, a képernyő üres és kiírja, mi fog történni.
   Korábban kész oldal látszott itt, és emiatt tűnt működésképtelennek. */
.bp-idle { display: none; }
.bp-app.is-idle .ap-topbar { opacity: .45; }
.bp-app.is-idle .bp-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center;
  min-height: 260px; padding: 2rem 1.5rem;
}
.bp-idle-ic {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; margin-bottom: .35rem;
  color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent);
}
.bp-idle-ic .ic { width: 20px; height: 20px; }
.bp-idle b { font-size: .97rem; font-weight: 600; color: #12151B; }
.bp-idle span { font-size: .85rem; color: #626B7A; max-width: 34ch; line-height: 1.5; }