/* UpGo · weboldal design rendszer (a Foglaló stílusában) */
@font-face { font-family: "InterVar"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "InterVar"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --font: "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f6f5f9;
  --surface: #ffffff;
  --surface-2: #fbfafd;
  --surface-3: #f1eff6;
  --border: rgba(20,14,40,.08);
  --border-strong: rgba(20,14,40,.15);
  --text: #0f0c18;
  --text-2: #3d3950;
  --muted: #6e6a80;
  --brand: #7c3aed;
  --brand-2: #db2777;
  --brand-strong: #6d28d9;
  --brand-soft: rgba(124,58,237,.09);
  --brand-text: #6d28d9;
  --ring: rgba(124,58,237,.3);
  --ok: #0f9960; --ok-soft: rgba(16,185,129,.12);
  --err: #dc2626; --err-soft: rgba(239,68,68,.1);
  --grad: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #db2777 100%);
  --grad-text: linear-gradient(100deg, #7c3aed 10%, #c026d3 55%, #db2777 90%);
  --shadow-sm: 0 1px 2px rgba(20,14,40,.05);
  --shadow: 0 1px 2px rgba(20,14,40,.04), 0 8px 24px -8px rgba(20,14,40,.1);
  --shadow-lg: 0 2px 6px rgba(20,14,40,.05), 0 30px 60px -20px rgba(40,20,90,.25);
  --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --wrap: 1180px;
  --font-head: var(--font);
  --on-grad: #fff;
  --hero-base: #1a0d30;
  --hero-bg: radial-gradient(900px 520px at 8% 0%, rgba(167,139,250,.75) 0%, transparent 60%), radial-gradient(760px 620px at 100% 100%, rgba(236,72,153,.7) 0%, transparent 55%), radial-gradient(800px 600px at 85% 0%, rgba(99,102,241,.8) 0%, transparent 60%), #1a0d30;
  --panel-bg: radial-gradient(500px 300px at 0% 0%, rgba(167,139,250,.65), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(236,72,153,.55), transparent 60%), #1a0d30;
  --stage-bg: radial-gradient(600px 300px at 20% 0%, rgba(167,139,250,.35), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(236,72,153,.28), transparent 60%), var(--surface-3);
  --hero-em: linear-gradient(100deg, #ddd6fe 0%, #f5d0fe 50%, #fbcfe8 100%);
  --glow-a: rgba(124,58,237,.7); --glow-b: rgba(124,58,237,.85);
  --on-dark-accent: #e9d5ff; --tick: #86efac;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09080d; --surface: #111018; --surface-2: #14131c; --surface-3: #1b1a25;
    --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.14);
    --text: #f4f3f8; --text-2: #cfccdc; --muted: #8f8ba3;
    --brand: #8b5cf6; --brand-strong: #7c3aed; --brand-soft: rgba(139,92,246,.14); --brand-text: #b69cff; --ring: rgba(139,92,246,.45);
    --ok: #34d399; --ok-soft: rgba(52,211,153,.13); --err: #f87171; --err-soft: rgba(248,113,113,.12);
    --grad-text: linear-gradient(100deg, #b69cff 10%, #e879f9 55%, #f472b6 90%);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09080d; --surface: #111018; --surface-2: #14131c; --surface-3: #1b1a25;
  --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.14);
  --text: #f4f3f8; --text-2: #cfccdc; --muted: #8f8ba3;
  --brand: #8b5cf6; --brand-strong: #7c3aed; --brand-soft: rgba(139,92,246,.14); --brand-text: #b69cff; --ring: rgba(139,92,246,.45);
  --ok: #34d399; --ok-soft: rgba(52,211,153,.13); --err: #f87171; --err-soft: rgba(248,113,113,.12);
  --grad-text: linear-gradient(100deg, #b69cff 10%, #e879f9 55%, #f472b6 90%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* ===== "Zöld" arculat (az eredeti upgo.hu színei, Space Grotesk + Plus Jakarta Sans) ===== */
@font-face { font-family: "SpaceGroteskVar"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "SpaceGroteskVar"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JakartaVar"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JakartaVar"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Zöld kiemelés, semleges (fehér / fekete) háttér, az első új dizájn szerkezetével */
:root[data-brand="green"] {
  --brand: #079c72; --brand-2: #3ee6b0; --brand-strong: #067a59; --brand-soft: rgba(10,176,129,.1); --brand-text: #05835f; --ring: rgba(10,176,129,.3);
  --grad: linear-gradient(135deg, #0AB081 0%, #3ee6b0 100%);
  --grad-text: linear-gradient(100deg, #05835f 0%, #0AB081 55%, #12b886 100%);
  --on-grad: #03140e;
  --hero-base: #07080a;
  --hero-bg: radial-gradient(900px 560px at 6% 0%, rgba(62,230,176,.34) 0%, transparent 60%), radial-gradient(760px 620px at 100% 100%, rgba(10,176,129,.42) 0%, transparent 55%), radial-gradient(700px 520px at 88% 0%, rgba(143,245,210,.16) 0%, transparent 60%), #07080a;
  --panel-bg: radial-gradient(500px 300px at 0% 0%, rgba(62,230,176,.3), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(10,176,129,.4), transparent 60%), #07080a;
  --stage-bg: radial-gradient(600px 300px at 20% 0%, rgba(62,230,176,.22), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(10,176,129,.16), transparent 60%), var(--surface-3);
  --hero-em: linear-gradient(120deg, #0AB081, #3ee6b0 40%, #8ff5d2 70%, #3ee6b0);
  --glow-a: rgba(10,176,129,.5); --glow-b: rgba(10,176,129,.7);
  --on-dark-accent: #8ff5d2; --tick: #3ee6b0;
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="green"]:not([data-theme="light"]) {
    --brand: #0AB081; --brand-soft: rgba(10,176,129,.14); --brand-text: #3ee6b0; --ring: rgba(10,176,129,.45);
    --grad-text: linear-gradient(100deg, #3ee6b0 0%, #8ff5d2 50%, #0AB081 100%);
  }
}
:root[data-brand="green"][data-theme="dark"] {
  --brand: #0AB081; --brand-soft: rgba(10,176,129,.14); --brand-text: #3ee6b0; --ring: rgba(10,176,129,.45);
  --grad-text: linear-gradient(100deg, #3ee6b0 0%, #8ff5d2 50%, #0AB081 100%);
}
[data-brand="green"] .hero h1 em { background-size: 200% auto; animation: shine 7s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
[data-brand="green"] .btn-primary { font-weight: 700; }
/* A régi logó: Up + Go + világító pont */
.wm { font-family: "SpaceGroteskVar", var(--font-head); font-weight: 700; font-size: 25px; letter-spacing: -.03em; display: inline-flex; align-items: baseline; line-height: 1; }
.wm .up { color: var(--text); } .wm .go { color: #0AB081; }
.wm .dot { width: .3em; height: .3em; border-radius: 50%; background: #0AB081; margin-left: .13em; align-self: flex-end; margin-bottom: .13em; box-shadow: 0 0 12px #0AB081; }
.hero .wm .up, .about-card .wm .up { color: #eef4fa; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text); text-decoration: none; }
h1, h2, h3, h4, .price b, .stat b, .mprice, .nf b, .kpi b { font-family: var(--font-head); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; line-height: 1.1; font-weight: 680; }
p { margin: 0; }
.ic { flex: none; display: block; }
::selection { background: rgba(139,92,246,.25); }
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: block; } :root[data-theme="dark"] .only-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: block; } :root:not([data-theme="light"]) .only-light { display: none; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Gombok ---------- */
.btn { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 18px; border-radius: 12px;
  font: 600 15px/1 var(--font); letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { --h: 52px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-primary { color: var(--on-grad); background: var(--grad); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -8px var(--glow-a); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 30px -8px var(--glow-b); transform: translateY(-1px); }
.btn-ghost { color: var(--text); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.btn-glass { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.18); }
.btn-white { color: #1a0b33; background: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.btn-white:hover { transform: translateY(-1px); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- Navigáció ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--border); }
.nav-in { height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; font-size: 19px; letter-spacing: -.03em; color: var(--text); }
.brand svg { flex: none; }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; font-weight: 520; }
.nav-links a:hover { color: var(--text); background: var(--surface-3); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 7px 11px; }
.new { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; border-radius: 6px; color: var(--on-grad); background: var(--grad); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; }
.mnav { border-top: 1px solid var(--border); background: var(--bg); padding: 12px 0 22px; }
.mnav .wrap { display: flex; flex-direction: column; gap: 2px; }
.mnav a:not(.btn) { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; font-size: 17px; font-weight: 560; color: var(--text); border-bottom: 1px solid var(--border); }
.mnav .btn { margin-top: 16px; }
@media (max-width: 960px) { .nav-links { display: none; } .menu-toggle { display: grid; } }
@media (max-width: 520px) { .hide-sm { display: none; } }

/* ---------- Szekciók ---------- */
section { position: relative; }
.sec { padding: 110px 0; }
.sec-tight { padding: 70px 0; }
.sec-head { max-width: 720px; margin: 0 auto 56px; }
.sec-head.center { text-align: center; }
.sec-head.left { margin-left: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 50px); }
.sec-head p { margin-top: 18px; font-size: 18px; color: var(--muted); line-height: 1.6; }
.alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- Hero ---------- */
.hero-shell { padding: 14px 14px 0; }
.hero { position: relative; overflow: hidden; border-radius: 32px; color: #fff; isolation: isolate;
  background: var(--hero-bg); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; background: linear-gradient(180deg, transparent, rgba(12,6,24,.55)); }
.hero-in { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; padding-top: 96px; padding-bottom: 104px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 550; }
.pill .live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.hero h1 { font-size: clamp(42px, 6.2vw, 76px); letter-spacing: -.045em; line-height: 1.02; margin: 24px 0 22px; font-weight: 720; }
.hero h1 em { font-style: normal; background: var(--hero-em); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px; color: rgba(255,255,255,.78); font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust .ic { color: var(--tick); }

/* Hero vizuál: böngésző + telefon + lebegő kártyák */
.hero-vis { position: relative; height: 540px; perspective: 1400px; }
.hv-browser { position: absolute; right: 0; top: 20px; width: 92%; transform: rotateY(-9deg) rotateX(4deg); transform-origin: right center; }
.hv-phone { position: absolute; left: 0; bottom: 0; width: 210px; transform: rotateY(8deg) rotateX(3deg); }
.bframe { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 40px 80px -24px rgba(10,4,30,.75), 0 0 0 1px rgba(0,0,0,.04); }
.bbar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f3f2f7; border-bottom: 1px solid #e7e5ee; }
.bbar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d6e2; }
.bbar i:nth-child(1) { background: #ff6159; } .bbar i:nth-child(2) { background: #ffbd2e; } .bbar i:nth-child(3) { background: #28c941; }
.bbar span { margin-left: 10px; flex: 1; max-width: 280px; height: 22px; border-radius: 7px; background: #fff; border: 1px solid #e7e5ee; font-size: 11.5px; color: #75718a; display: flex; align-items: center; padding: 0 10px; }
.bframe img { width: 100%; }
.phone { position: relative; margin: 0; padding: 9px; border-radius: 38px; background: #0d0a14; box-shadow: 0 0 0 1.5px rgba(255,255,255,.14) inset, 0 40px 80px -20px rgba(10,4,30,.8); }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: #0d0a14; z-index: 2; }
.phone img { border-radius: 30px; width: 100%; }
.fcard { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; color: var(--text); background: rgba(255,255,255,.94); box-shadow: 0 20px 40px -12px rgba(10,4,30,.5); font-size: 13px; line-height: 1.35; backdrop-filter: blur(12px); animation: float 6s ease-in-out infinite; }
.fcard b { display: block; font-size: 13.5px; color: #0f0c18; } .fcard small { color: #6e6a80; }
.fcard .fi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--grad); flex: none; }
.fcard .fi.g { background: linear-gradient(135deg, #34d399, #059669); }
.fc1 { right: -8px; top: -6px; animation-delay: -2s; } .fc2 { right: 40px; bottom: 34px; } .fc3 { left: 150px; top: 70px; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 1040px) { .hero-in { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 40px; } .hero-vis { height: 460px; max-width: 620px; } }
@media (max-width: 640px) { .hero-shell { padding: 8px 8px 0; } .hero { border-radius: 24px; } .hero .lead { font-size: 17px; } .hero-vis { height: 360px; } .hv-phone { width: 150px; } .fc3 { display: none; } .fc1 { top: -16px; } .fcard { font-size: 12px; padding: 10px 12px 10px 10px; } .fcard .fi { width: 32px; height: 32px; } }

/* Belső oldalak hero */
.phero { padding: 88px 0 80px; }
.phero .hero-in { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; text-align: center; }
.phero h1 { margin: 22px auto 20px; max-width: 900px; font-size: clamp(38px, 5.4vw, 64px); }
.phero .lead { margin: 0 auto; max-width: 640px; }
.phero .hero-actions, .phero .trust { justify-content: center; }
.crumbs { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; color: rgba(255,255,255,.7); }
.crumbs a { color: rgba(255,255,255,.85); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 26px 0; border-bottom: 1px solid var(--border); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: marq 38s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 620; letter-spacing: -.02em; color: var(--muted); white-space: nowrap; }
.marquee span .ic { color: var(--brand); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Kártyák ---------- */
.grid { display: grid; gap: 18px; }
.g-3 { grid-template-columns: repeat(3, 1fr); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-3, .g-2, .g-4 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.feat { padding: 28px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.feat h3 { font-size: 19px; margin: 20px 0 10px; letter-spacing: -.02em; }
.feat p { color: var(--muted); font-size: 15.5px; }
.fic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--brand-text); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.feat.big { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; overflow: hidden; }
@media (max-width: 980px) { .feat.big { grid-column: span 2; } }
@media (max-width: 640px) { .feat.big { grid-column: auto; grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.stat { padding: 30px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.stat b { display: block; font-size: 44px; letter-spacing: -.045em; font-weight: 720; line-height: 1; }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Demó ---------- */
.demo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.demo > *, .contact > *, .about > *, .ref > * { min-width: 0; }
.demo-copy h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 18px; }
.demo-copy > p { color: var(--muted); font-size: 17.5px; }
.ticks { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.ticks li .ic { margin-top: 3px; color: var(--ok); }
.demo-stage { position: relative; padding: 28px; border-radius: var(--r-xl); background: var(--stage-bg); border: 1px solid var(--border); }
.demo-stage .hint { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.demo-widget { max-width: 560px; margin: 0 auto; }
.demo-img { max-width: 420px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
@media (max-width: 980px) { .demo { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 520px) { .demo-stage { padding: 12px; } }

/* ---------- Folyamat ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.step { position: relative; padding: 28px; }
.step .num { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--brand-text); }
.step h3 { font-size: 18.5px; margin: 14px 0 10px; }
.step p { color: var(--muted); font-size: 15px; }
.step::after { content: ""; position: absolute; top: 38px; right: -14px; width: 10px; height: 10px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }
.step:last-child::after { display: none; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.guarantees { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.guarantees span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; font-weight: 550; }
.guarantees .ic { color: var(--ok); }

/* ---------- Csomagok ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; }
.plan h3 { font-size: 20px; }
.plan .for { color: var(--muted); font-size: 15px; margin-top: 8px; min-height: 48px; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 4px; }
.price b { font-size: 46px; font-weight: 740; letter-spacing: -.05em; line-height: 1; }
.price span { color: var(--muted); font-size: 15px; font-weight: 550; }
.price-note { color: var(--muted); font-size: 13.5px; }
.plan ul { list-style: none; padding: 22px 0 0; margin: 22px 0 26px; border-top: 1px solid var(--border); display: grid; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 15px; color: var(--text-2); }
.plan li .ic { color: var(--brand-text); margin-top: 3px; }
.plan li.plus { font-weight: 620; color: var(--text); }
.plan.hot { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 60px -28px var(--glow-a); transform: translateY(-8px); }
.badge-top { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
/* árkártyák: egyforma szerkezet, a fejléc, az ár és a havidíjas sor egy vonalban mindhárom kártyán */
.plan .plan-head { display: flex; flex-direction: column; }
.plan-tag { align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-soft); }
.plan .for { min-height: 46px; line-height: 1.55; }
.plan-price { margin-top: 18px; padding: 18px 18px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.plan-price .price { margin: 0 0 6px; }
.plan-price .price-note { margin-bottom: 14px; }
.plan-price .sub-alt { margin: 0; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.plan-price .sub-alt:hover { border-color: var(--brand); transform: translateY(-1px); }
.plan-price .sub-alt > .ic:last-child { opacity: .7; }
.plan ul { margin-top: 22px; align-content: start; }
.plan li { line-height: 1.45; }
.plan li .ic { flex: none; }
.plan.hot .plan-price { background: linear-gradient(160deg, var(--brand-soft), transparent 70%), var(--surface-2); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.plan.hot .price b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.hot .plan-tag { color: var(--on-grad); background: var(--grad); }
.badge-top { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.plan .btn-block { justify-content: center; }
.plan-free { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.plan-free .ic { color: var(--brand-text); }
.plan-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.plan-trust > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.plan-trust > div > .ic { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: var(--brand-text); background: var(--brand-soft); box-sizing: border-box; }
.plan-trust b { display: block; font-size: 14.5px; color: var(--text); }
.plan-trust span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
@media (max-width: 980px) { .plan-trust { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .plan .for { min-height: 0; } }
.small-print { text-align: center; color: var(--muted); font-size: 14px; margin-top: 26px; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .plan.hot { transform: none; } .plan .for { min-height: 0; } }

.maint { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; margin-top: 56px; }
.maint-l { padding: 40px; color: #fff; background: var(--panel-bg); }
.maint-l .eyebrow { color: var(--on-dark-accent); } .maint-l .eyebrow::before { background: var(--on-dark-accent); }
.maint-l h3 { font-size: 30px; line-height: 1.15; }
.maint-l .mprice { margin: 22px 0 6px; font-size: 40px; font-weight: 740; letter-spacing: -.045em; }
.maint-l .mprice small { font-size: 16px; font-weight: 550; opacity: .8; letter-spacing: 0; }
.maint-l p.sub { opacity: .8; font-size: 15px; }
.maint-l ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 10px; }
.maint-l li { display: flex; gap: 10px; font-size: 15px; } .maint-l li .ic { color: var(--tick); margin-top: 3px; }
.maint-r { padding: 40px; }
.maint-r h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; margin-bottom: 18px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 0 12px; }
.cmp td { padding: 14px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.cmp td:nth-child(2), .cmp td:nth-child(3), .cmp th:nth-child(2), .cmp th:nth-child(3) { text-align: right; padding-left: 12px; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 650; }
.tag.no { color: var(--err); background: var(--err-soft); } .tag.yes { color: var(--ok); background: var(--ok-soft); } .tag.mid { color: var(--text-2); background: var(--surface-3); }
@media (max-width: 900px) { .maint { grid-template-columns: 1fr; } .maint-l, .maint-r { padding: 30px 24px; } }

/* Csomag összehasonlító táblázat */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.ftable { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.ftable th, .ftable td { padding: 15px 20px; border-bottom: 1px solid var(--border); text-align: center; }
.ftable th:first-child, .ftable td:first-child { text-align: left; }
.ftable thead th { font-size: 15px; background: var(--surface-2); position: sticky; top: 0; }
.ftable thead th small { display: block; color: var(--muted); font-weight: 550; font-size: 13px; margin-top: 2px; }
.ftable tbody tr:last-child td { border-bottom: 0; }
.ftable .ic { margin: 0 auto; }
.ftable .y { color: var(--ok); } .ftable .n { color: var(--border-strong); }
.ftable .grp td { background: var(--surface-2); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 20px; }

/* ---------- Referenciák ---------- */
.ref { display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; }
.ref-vis { position: relative; padding: 36px 36px 0; background: radial-gradient(500px 300px at 30% 0%, rgba(210,160,110,.35), transparent 60%), var(--surface-3); display: flex; align-items: flex-end; justify-content: center; min-height: 360px; }
.ref-vis .bframe img { aspect-ratio: 4/3; object-fit: cover; object-position: top left; }
.ref-vis .bframe { width: 86%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--shadow-lg); border-color: var(--border); }
.ref-vis .phone { position: absolute; right: 22px; bottom: 22px; width: 150px; padding: 6px; border-radius: 28px; }
.ref-vis .phone::before { top: 11px; width: 46px; height: 13px; margin-left: -23px; }
.ref-vis .phone img { border-radius: 22px; }
.ref-body { padding: 40px; display: flex; flex-direction: column; }
.ref-body .kind { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); }
.ref-body h3, .ref-body .ref-h { font-size: 30px; margin: 12px 0 14px; }
.ref-body p { color: var(--muted); font-size: 15.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.chips span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 560; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); }
.ref-body .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .ref { grid-template-columns: 1fr; } .ref-body { padding: 28px 24px; } .ref-vis { padding: 24px 20px 0; min-height: 260px; } }
@media (max-width: 520px) { .ref-vis .phone { width: 110px; right: 12px; bottom: 12px; } }

/* ---------- Rólam ---------- */
.about { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.about-card { position: relative; aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
  background: var(--panel-bg); box-shadow: var(--shadow-lg); }
.about-card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.about-card .mono { position: absolute; top: 28px; left: 28px; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 28px; font-weight: 720; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.about-card b { font-size: 24px; letter-spacing: -.03em; position: relative; } .about-card span { opacity: .8; font-size: 15px; position: relative; }
.about-copy h2 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 22px; }
.about-copy p { color: var(--text-2); font-size: 17px; margin-bottom: 16px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 32px; } .about-card { max-width: 340px; aspect-ratio: 16/11; } }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 72px 40px; text-align: center; color: #fff; isolation: isolate;
  background: var(--hero-bg); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse, #000 10%, transparent 70%); }
.cta h2 { font-size: clamp(30px, 4.4vw, 50px); max-width: 760px; margin: 0 auto 18px; }
.cta p { font-size: 18px; opacity: .85; max-width: 560px; margin: 0 auto 32px; }
.cta .hero-actions { justify-content: center; margin-top: 0; }
@media (max-width: 560px) { .cta { padding: 52px 22px; } }

/* ---------- GYIK ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); transition: transform .25s, background .2s; flex: none; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--brand-soft); color: var(--brand-text); }
.faq-a { padding: 0 22px 22px; color: var(--muted); font-size: 16px; }

/* ---------- Űrlap ---------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.contact-info h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 18px; }
.contact-info > p { color: var(--muted); font-size: 17px; }
.clist { display: grid; gap: 12px; margin: 30px 0; }
.clist a, .clist div { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.clist a:hover { border-color: var(--brand); }
.clist .fic { width: 42px; height: 42px; }
.clist b { display: block; font-size: 15.5px; } .clist small { color: var(--muted); font-size: 13.5px; }
.next-steps { display: grid; gap: 16px; margin-top: 8px; }
.next-steps div { display: flex; gap: 14px; }
.next-steps b.n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; }
.next-steps p { color: var(--text-2); font-size: 15px; } .next-steps p strong { display: block; color: var(--text); }
.form-card { padding: 32px; }
.qform { display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { display: grid; gap: 7px; }
.f > span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.f input, .f textarea { width: 100%; font: 15.5px/1.4 var(--font); color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s, background .15s; }
.f textarea { resize: vertical; min-height: 110px; }
.f input::placeholder, .f textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); background: var(--surface); }
.f.has-err input, .f.has-err textarea { border-color: var(--err); }
.f > .f-err { color: var(--err); font-size: 13px; font-weight: 550; }
.pkg-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; padding: 9px 14px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 14px; font-weight: 550; color: var(--text-2); transition: all .15s; }
.pick:hover span { border-color: var(--brand); }
.pick input:checked + span { color: var(--brand-text); border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--ring); }
.pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.chk b { display: block; font-size: 15px; } .chk small { color: var(--muted); font-size: 13.5px; }
.chk:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.f-note { color: var(--muted); font-size: 13px; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 14px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 550; }
.alert.err { color: var(--err); background: var(--err-soft); }
.success { text-align: center; padding: 48px 32px; }
.success .big-ic { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 18px 40px -14px rgba(5,150,105,.7); }
.success h3 { font-size: 28px; margin-bottom: 12px; } .success p { color: var(--muted); font-size: 16.5px; max-width: 440px; margin: 0 auto; }
@media (max-width: 980px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } .form-card { padding: 22px 18px; } }

/* ---------- Termékoldal (időpontfoglaló) ---------- */
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--border); margin: 0 auto 26px; }
.tabs button { font: 600 14px var(--font); padding: 9px 16px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tabpanes { position: relative; }
.tabpane { display: none; } .tabpane.on { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.center { text-align: center; }
.pricebox { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.pricebox .maint-l { display: flex; flex-direction: column; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #e9e3ff; background: #140b26; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px 20px; overflow-x: auto; white-space: pre; }
.code .t { color: #f9a8d4; } .code .a { color: #c4b5fd; } .code .s { color: #86efac; }
.embed-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pricebox { grid-template-columns: 1fr; } .embed-steps { grid-template-columns: 1fr; } }

/* ---------- Jogi oldalak ---------- */
.prose { max-width: 760px; margin: 0 auto; font-size: 16.5px; color: var(--text-2); }
.prose h2 { font-size: 22px; color: var(--text); margin: 36px 0 12px; letter-spacing: -.02em; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose dl { display: grid; grid-template-columns: 220px 1fr; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.prose dt, .prose dd { margin: 0; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.prose dt { font-weight: 600; color: var(--text); background: var(--surface-2); }
.prose dl > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 600px) { .prose dl { grid-template-columns: 1fr; } .prose dt { border-bottom: 0; padding-bottom: 4px; } .prose dd { padding-top: 0; background: var(--surface-2); } }

/* ---------- Lábléc ---------- */
.foot { padding: 72px 0 36px; border-top: 1px solid var(--border); background: var(--surface-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand p { color: var(--muted); font-size: 15px; margin: 16px 0 20px; max-width: 300px; }
.foot h4, .foot .foot-h { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; margin-bottom: 16px; }
.foot-grid > div:not(.foot-brand) { display: flex; flex-direction: column; gap: 10px; }
.foot-grid a:not(.btn):not(.brand), .foot-grid span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.foot-grid a:not(.btn):not(.brand):hover { color: var(--brand-text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.foot-bottom nav { display: flex; gap: 20px; } .foot-bottom a { color: var(--muted); } .foot-bottom a:hover { color: var(--text); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- Animáció ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .marquee-track, .fcard, .pill .live { animation: none; } html { scroll-behavior: auto; } }

/* 404 */
.nf { text-align: center; padding: 60px 0; }
.nf b { display: block; font-size: 120px; line-height: 1; font-weight: 760; letter-spacing: -.06em; }

/* Telefonos app bemutató: zárolt képernyő értesítésekkel */
.lock { max-width: 360px; margin: 0 auto; padding: 10px; border-radius: 48px; background: #0d0a14; box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, var(--shadow-lg); }
.lock-screen { position: relative; min-height: 560px; border-radius: 40px; padding: 70px 14px 24px; overflow: hidden; color: #fff;
  background: radial-gradient(420px 360px at 20% 10%, rgba(167,139,250,.9), transparent 60%), radial-gradient(420px 420px at 100% 100%, rgba(236,72,153,.8), transparent 60%), #1a0d30; }
[data-brand="green"] .lock-screen { background: radial-gradient(420px 360px at 20% 10%, rgba(62,230,176,.4), transparent 60%), radial-gradient(420px 420px at 100% 100%, rgba(10,176,129,.55), transparent 60%), #07080a; }
.lock-screen::before { content: ""; position: absolute; top: 14px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #0d0a14; }
.lock-time { text-align: center; margin-bottom: 34px; }
.lock-time small { display: block; font-size: 15px; font-weight: 550; opacity: .85; }
.lock-time b { display: block; font-size: 76px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-family: var(--font); }
.notif { display: flex; gap: 11px; padding: 12px 13px; margin-bottom: 9px; border-radius: 20px; background: rgba(245,245,250,.78); color: #111; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: ndrop .8s cubic-bezier(.2,.8,.2,1) both; }
.notif:nth-child(3) { animation-delay: .15s; } .notif:nth-child(4) { animation-delay: .3s; }
.notif.dim { opacity: .85; }
.n-ic img { border-radius: 9px; display: block; }
.notif > div { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.n-top { display: flex; justify-content: space-between; font-size: 12.5px; color: #555; margin-bottom: 2px; } .n-top b { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 11.5px; }
.n-title { display: block; font-size: 14px; color: #111; }
.notif span:not(.n-ic) { color: #333; }
@keyframes ndrop { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .notif { animation: none; } }

/* ---------- Chat asszisztens ---------- */
.chatw { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chatw-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--on-grad); background: var(--grad); box-shadow: 0 14px 34px -10px var(--glow-a), 0 0 0 1px rgba(255,255,255,.15) inset; transition: transform .2s; }
.chatw-fab:hover { transform: translateY(-2px) scale(1.03); }
.chatw-fab .i-close, .chatw.open .chatw-fab .i-open { display: none; } .chatw.open .chatw-fab .i-close { display: block; }
.cw-panel { display: none; width: min(370px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform-origin: bottom right; }
.chatw.open .cw-panel { display: flex; animation: cwin .25s cubic-bezier(.2,.8,.2,1); }
@keyframes cwin { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.cw-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px; color: #fff; background: var(--hero-bg); }
.cw-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--on-grad); background: var(--grad); flex: none; }
.cw-head b { display: block; font-size: 15.5px; } .cw-head small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .8; }
.cw-head small i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.cw-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cw-b { align-self: flex-start; max-width: 92%; padding: 11px 14px; border-radius: 16px 16px 16px 5px; background: var(--surface-3); font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.cw-b.cw-me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.cw-opts { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; margin-top: 2px; }
.cw-o { font: 600 13.5px var(--font); text-align: right; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none !important; }
.cw-o:hover { border-color: var(--brand); color: var(--brand-text); }
.cw-o.cw-hl { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.cw-form { display: grid; gap: 8px; }
.cw-form input, .cw-form textarea { width: 100%; font: 14.5px var(--font); color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 11px; padding: 10px 12px; resize: vertical; }
.cw-form input:focus, .cw-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.cw-form .cw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.cw-form small { color: var(--muted); font-size: 11.5px; } .cw-err { color: var(--err); font-size: 13px; margin: 0; }
@media (max-width: 520px) { .chatw { right: 14px; bottom: 14px; } .chatw-fab { width: 54px; height: 54px; } }
.lang-btn { font: 700 12.5px var(--font); letter-spacing: .04em; text-decoration: none !important; }

/* WhatsApp gomb */
.wa-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; box-shadow: 0 14px 30px -10px rgba(37,211,102,.7), 0 0 0 1px rgba(255,255,255,.18) inset; transition: transform .2s; text-decoration: none !important; }
.wa-fab svg { stroke-width: 1.7; }
.wa-fab:hover { transform: translateY(-2px) scale(1.03); }
.wa-tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 13px var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.18)); opacity: 0; pointer-events: none; transition: opacity .2s; }
.wa-fab:hover .wa-tip { opacity: 1; }
.chatw.open .wa-fab { display: none; }
.cw-o.cw-wa { border-color: #25d366; }
.cw-o.cw-wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
@media (max-width: 560px) { .wa-fab { width: 52px; height: 52px; } .wa-tip { display: none; } }
.fic.fic-wa { color: #fff; background: #25d366; }

/* ===== Foglaló kattintható demó ===== */
.bd { --bd-a: #0AB081; --bd-soft: color-mix(in srgb, var(--bd-a) 12%, #fff); --bd-ink: #14161c; --bd-mut: #6b7080; --bd-line: #e8e9ee; --bd-bg: #f5f6f8; padding: 18px; }
.bd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.bd-seg button { position: relative; font: 600 13.5px var(--font); padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.bd-seg button.on { background: var(--text); color: var(--bg); }
.bd-seg button.dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--surface); animation: bdpulse 1.4s infinite; }
.bd-colors { display: flex; gap: 7px; align-items: center; }
.bd-colors button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; transition: box-shadow .15s, transform .15s; }
.bd-colors button:hover { transform: scale(1.1); }
.bd-colors button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.bd-screen { position: relative; }
.bd-guest, .bd-owner { display: none; }
.bd[data-view="guest"] .bd-guest, .bd[data-view="owner"] .bd-owner { display: block; animation: bdin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes bdin { from { opacity: 0; transform: translateY(6px); } }
@keyframes bdpulse { 50% { transform: scale(1.35); } }
.bd-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* vendég widget (a szalon oldala: mindig világos) */
.bd-w { display: flex; flex-direction: column; height: 600px; border-radius: 20px; overflow: hidden; background: #fff; color: var(--bd-ink); box-shadow: 0 2px 6px rgba(15,20,30,.06), 0 30px 60px -24px rgba(15,20,30,.35); color-scheme: light; }
.bd-wh { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--bd-line); }
.bd-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 700 18px var(--font); color: #fff; background: var(--bd-a); flex: none; transition: background .3s; }
.bd-wt { min-width: 0; flex: 1; } .bd-wt b { display: block; font-size: 15px; line-height: 1.2; }
.bd-wt small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--bd-mut); }
.bd-langs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bd-bg); }
.bd-langs button { font: 700 11px var(--font); padding: 5px 7px; border: 0; border-radius: 7px; background: none; color: var(--bd-mut); cursor: pointer; }
.bd-langs button.on { background: #fff; color: var(--bd-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 16px; }
.bd-steps button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; font: 600 11.5px var(--font); color: #a2a6b3; padding: 0; cursor: default; position: relative; }
.bd-steps button::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--bd-line); z-index: 0; }
.bd-steps button:first-child::before { display: none; }
.bd-steps button.past::before, .bd-steps button.cur::before { background: var(--bd-a); }
.bd-steps i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: #fff; border: 2px solid var(--bd-line); color: #a2a6b3; transition: all .25s; }
.bd-steps i svg { width: 14px; height: 14px; }
.bd-steps .cur { color: var(--bd-ink); } .bd-steps .cur i { border-color: var(--bd-a); color: var(--bd-a); box-shadow: 0 0 0 4px var(--bd-soft); }
.bd-steps .past { color: var(--bd-ink); cursor: pointer; } .bd-steps .past i { background: var(--bd-a); border-color: var(--bd-a); color: #fff; }
.bd-body { flex: 1; overflow-y: auto; padding: 6px 16px 16px; scrollbar-width: thin; }
.bd-body h4, .bd-body .bd-h { font-size: 19px; letter-spacing: -.02em; margin: 6px 0 12px; }
.bd-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.bd-tabs button { font: 600 13px var(--font); padding: 7px 14px; border-radius: 99px; border: 1px solid var(--bd-line); background: #fff; color: var(--bd-mut); cursor: pointer; white-space: nowrap; }
.bd-tabs button.on { background: var(--bd-ink); border-color: var(--bd-ink); color: #fff; }
.bd-list { display: grid; gap: 8px; }
.bd-svc, .bd-staff { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--bd-line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.bd-svc:hover, .bd-staff:hover { border-color: color-mix(in srgb, var(--bd-a) 55%, #fff); transform: translateY(-1px); }
.bd-svc.on, .bd-staff.on { border-color: var(--bd-a); background: var(--bd-soft); }
.bd-svc > span, .bd-staff > span:not(.bd-av) { flex: 1; min-width: 0; }
.bd-svc b, .bd-staff b { display: block; font-size: 14.5px; }
.bd-svc small, .bd-staff small { display: block; font-size: 12.5px; color: var(--bd-mut); line-height: 1.35; }
.bd-svc em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--bd-mut); margin-top: 4px; }
.bd-svc strong { font-size: 14.5px; white-space: nowrap; }
.bd-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--font); color: #fff; background: var(--c); flex: none; }
.bd-av-any { background: var(--bd-bg); color: var(--bd-mut); }
.bd-pill { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 99px; background: var(--bd-bg); color: var(--bd-mut); white-space: nowrap; }
.bd-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.bd-days::-webkit-scrollbar { display: none; }
.bd-days button { flex: none; width: 50px; padding: 8px 0 7px; border-radius: 13px; border: 1.5px solid var(--bd-line); background: #fff; color: var(--bd-ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bd-days small { font-size: 11px; color: var(--bd-mut); text-transform: capitalize; }
.bd-days b { font-size: 17px; line-height: 1.2; }
.bd-days i { width: 5px; height: 5px; border-radius: 50%; background: var(--bd-a); }
.bd-days .off i { background: transparent; }
.bd-days .off:not(:disabled) b { color: var(--bd-mut); }
.bd-days button:disabled { opacity: .4; cursor: not-allowed; background: var(--bd-bg); }
.bd-days button.on { background: var(--bd-a); border-color: var(--bd-a); color: #fff; } .bd-days .on small { color: rgba(255,255,255,.85); } .bd-days .on i { background: #fff; }
.bd-daylabel { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin: 12px 0 4px; text-transform: none; }
.bd-daylabel::first-letter { text-transform: uppercase; }
.bd-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bd-mut); margin: 12px 0 7px; }
.bd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; }
.bd-slots button { font: 600 14px var(--font); padding: 10px 0; border-radius: 11px; border: 1.5px solid var(--bd-line); background: #fff; color: var(--bd-ink); cursor: pointer; transition: all .15s; }
.bd-slots button:hover { border-color: var(--bd-a); color: var(--bd-a); }
.bd-slots button.on { background: var(--bd-a); border-color: var(--bd-a); color: #fff; }
.bd-empty { margin-top: 12px; padding: 18px; border-radius: 14px; background: var(--bd-bg); color: var(--bd-mut); font-size: 14px; text-align: center; }
.bd-sum { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: var(--bd-soft); border: 1px solid color-mix(in srgb, var(--bd-a) 25%, #fff); margin-bottom: 14px; }
.bd-sum small { display: block; font-size: 12.5px; color: var(--bd-mut); font-weight: 600; }
.bd-sum b { display: block; font-size: 14.5px; } .bd-sum b::first-letter { text-transform: uppercase; }
.bd-sum span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--bd-mut); margin-top: 2px; }
.bd-sum strong { white-space: nowrap; font-size: 15px; }
.bd-form { display: grid; gap: 10px; }
.bd-form label span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.bd-form input, .bd-form textarea { width: 100%; font: 15px var(--font); color: var(--bd-ink); background: #fff; border: 1.5px solid var(--bd-line); border-radius: 11px; padding: 10px 12px; resize: none; }
.bd-form input:focus, .bd-form textarea:focus { outline: none; border-color: var(--bd-a); box-shadow: 0 0 0 3px var(--bd-soft); }
.bd-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-err { font-size: 13px; font-weight: 600; color: #dc2626; background: #fef2f2; padding: 8px 12px; border-radius: 10px; }
.bd-small { display: block; text-align: center; font-size: 11.5px; color: var(--bd-mut); }
.bd-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--bd-line); background: #fff; }
.bd-mini { min-width: 0; text-align: right; } .bd-mini b, .bd-mini small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-mini b { font-size: 13px; } .bd-mini small { font-size: 12px; color: var(--bd-mut); }
.bd-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14.5px var(--font); height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--bd-a); color: #fff; cursor: pointer; transition: filter .15s, transform .15s, background .3s; box-shadow: 0 8px 20px -10px var(--bd-a); }
.bd-cta:hover { filter: brightness(1.08); } .bd-cta:active { transform: translateY(1px); }
.bd-cta:disabled { background: #d9dbe2; box-shadow: none; cursor: not-allowed; }
.bd-form .bd-cta { width: 100%; height: 48px; margin-top: 4px; }
.bd-back { display: inline-flex; align-items: center; gap: 2px; font: 600 14px var(--font); border: 0; background: none; color: var(--bd-mut); cursor: pointer; padding: 8px 4px; }
.bd-back:hover { color: var(--bd-ink); }
.bd-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 14px var(--font); height: 42px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--bd-line); background: #fff; color: var(--bd-ink); cursor: pointer; }
.bd-ghost:hover { border-color: var(--bd-a); color: var(--bd-a); }
.bd-done { flex: 1; overflow-y: auto; padding: 26px 20px 20px; text-align: center; }
.bd-ok { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--bd-a); box-shadow: 0 0 0 10px var(--bd-soft); animation: bdpop .5s cubic-bezier(.2,1.4,.4,1); }
.bd-ok svg { width: 34px; height: 34px; }
@keyframes bdpop { from { transform: scale(.3); opacity: 0; } }
.bd-done h4, .bd-done .bd-h { font-size: 22px; margin-bottom: 6px; } .bd-done > p { font-size: 14px; color: var(--bd-mut); max-width: 340px; margin: 0 auto; }
.bd-done dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; text-align: left; margin: 18px 0; padding: 14px 16px; border-radius: 14px; background: var(--bd-bg); font-size: 13.5px; }
.bd-done dt { color: var(--bd-mut); } .bd-done dd { margin: 0; text-align: right; font-weight: 600; } .bd-done dd::first-letter { text-transform: uppercase; }
.bd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bd-acts .bd-cta { grid-column: 1 / -1; height: 48px; }

/* tulajdonos nézet (admin: mindig sötét) */
.bd-o { height: 600px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #0d0f13; color: #e9ebf0; padding: 14px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); color-scheme: dark; }
.bd-push { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); margin-bottom: 12px; animation: bdin .4s cubic-bezier(.2,.8,.2,1); }
.bd-push div { flex: 1; min-width: 0; } .bd-push b { display: block; font-size: 13.5px; } .bd-push span { display: block; font-size: 12.5px; color: #b6bac6; line-height: 1.4; }
.bd-push small { font-size: 11.5px; color: #8b90a0; }
.bd-pi { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--bd-a); }
.bd-oh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.bd-oh small { display: block; font-size: 11.5px; color: #8b90a0; font-weight: 600; } .bd-oh b { display: block; font-size: 15.5px; } .bd-oh b::first-letter { text-transform: uppercase; }
.bd-onav { display: flex; gap: 6px; } .bd-onav button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e9ebf0; cursor: pointer; }
.bd-onav button:hover { background: rgba(255,255,255,.12); }
.bd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.bd-kpis div { padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.bd-kpis b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-kpis small { font-size: 11.5px; color: #8b90a0; }
.bd-cal { flex: 1; min-height: 0; overflow-y: auto; border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.bd-ch { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 44px repeat(3, 1fr); background: #15181e; border-bottom: 1px solid rgba(255,255,255,.07); }
.bd-ch span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; font-size: 12.5px; font-weight: 600; }
.bd-ch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bd-cg { position: relative; display: grid; grid-template-columns: 44px repeat(3, 1fr); margin: 8px 0; }
.bd-times { position: relative; } .bd-times span { position: absolute; right: 8px; font-size: 10.5px; color: #7b8090; transform: translateY(-6px); }
.bd-times span:first-child { transform: none; }
.bd-col { position: relative; border-left: 1px solid rgba(255,255,255,.06); }
.bd-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.05); }
.bd-ev { position: absolute; left: 3px; right: 3px; overflow: hidden; padding: 4px 6px; border-radius: 7px; font-size: 11px; line-height: 1.25; background: color-mix(in srgb, var(--c) 22%, #0d0f13); border-left: 3px solid var(--c); }
.bd-ev b { display: block; font-size: 10.5px; color: #c9ccd6; } .bd-ev span { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ev small { display: block; font-size: 10px; color: #a3a7b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-new { background: var(--c); color: #fff; box-shadow: 0 0 0 2px #fff, 0 10px 24px -6px var(--c); z-index: 2; animation: bdnew 1.6s ease-in-out 3; }
.bd-new b, .bd-new small { color: rgba(255,255,255,.9); }
.bd-new em { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 5px; background: #fff; color: #0d0f13; }
@keyframes bdnew { 50% { box-shadow: 0 0 0 4px #fff, 0 10px 30px -2px var(--c); } }
.bd-oclosed { flex: 1; display: grid; place-items: center; color: #8b90a0; border-radius: 13px; background: rgba(255,255,255,.03); }
.bd-ohint { font-size: 12.5px; color: #8b90a0; text-align: center; margin-top: 10px; }

.bd-toast { position: absolute; left: 50%; top: 76px; z-index: 20; width: min(360px, calc(100% - 24px)); display: flex; gap: 11px; align-items: center; padding: 11px 14px; border-radius: 16px; background: rgba(13,15,19,.92); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 20px 50px -12px rgba(0,0,0,.55); cursor: pointer; transform: translate(-50%, -16px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.bd-toast.in { transform: translate(-50%, 0); opacity: 1; }
.bd-toast b { display: block; font-size: 13.5px; } .bd-toast span:not(.bd-pi) { display: block; font-size: 12.5px; color: #c3c7d2; }
.bd-toast > div { min-width: 0; }

@media (max-width: 520px) {
  .bd { padding: 10px; }
  .bd-w, .bd-o { height: 580px; }
  .bd-bar { justify-content: center; }
  .bd-steps span { font-size: 10.5px; }
  .bd-2 { grid-template-columns: 1fr; }
  .bd-kpis b { font-size: 13.5px; white-space: normal; } .bd-kpis div { padding: 9px 10px; }
  .bd-ghost { font-size: 13px; padding: 0 10px; }
  .bd-nav { padding: 10px 12px; } .bd-cta { padding: 0 14px; }
}
.bd-toast[hidden] { display: none; }

/* Jogi dokumentumok */
.legal-toc { display: grid; gap: 4px; padding: 16px 18px; margin: 18px 0 8px; border-radius: 14px; background: var(--surface-3); font-size: 14.5px; }
.legal-toc a { color: var(--text-2); text-decoration: none; } .legal-toc a:hover { color: var(--brand-text); }
.legal-note { padding: 12px 16px; border-radius: 12px; background: var(--brand-soft); }
.prose h2[id] { scroll-margin-top: 90px; }
@media print { .nav, .foot, .chatw, .wa-fab, .legal-print, .legal-toc, .skip { display: none !important; } body { background: #fff; color: #000; } .sec { padding: 0; } }

.sub-alt { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; padding: 8px 11px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 13.5px; text-decoration: none !important; }
.sub-alt > span { flex: 1; min-width: 0; line-height: 1.35; }
.sub-alt b { font-weight: 700; }
.subplans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.subplan { padding: 22px; } .subplan h3 { font-size: 18px; margin-bottom: 4px; } .subplan .mprice { font-size: 30px; margin: 10px 0 2px; } .subplan .mprice small { font-size: 15px; color: var(--muted); font-weight: 500; }
.subplan .setup { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.subplan ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 14.5px; } .subplan li { display: flex; gap: 8px; } .subplan li .ic { color: var(--ok); margin-top: 3px; }
.subterms { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .subplans { grid-template-columns: 1fr; } }
.subplan .eyebrow { display: block; margin-bottom: 4px; }
.hot-sub { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent), var(--shadow); }
.subplans-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .subplans-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .subplans-4 { grid-template-columns: 1fr; } }

.monthly { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.mcard { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; padding: 20px; color: var(--text); text-decoration: none !important; transition: transform .2s, border-color .2s; }
.mcard:hover { transform: translateY(-2px); border-color: var(--brand); }
.mcard h3 { font-size: 16.5px; margin-bottom: 4px; } .mcard p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.mcard b { grid-column: 1 / -1; font-size: 22px; letter-spacing: -.02em; } .mcard b small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
@media (max-width: 900px) { .monthly { grid-template-columns: 1fr; } }

.tiers { display: grid; gap: 8px; margin-top: 18px; }
.tiers > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 13px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.tiers b { display: block; font-size: 14.5px; } .tiers small { display: block; font-size: 12.5px; opacity: .75; line-height: 1.4; }
.tiers strong { white-space: nowrap; font-size: 15px; }

/* Weboldal + foglaló csomag */
.bundle-head { max-width: 640px; margin: 42px 0 18px; } .bundle-head h3 { font-size: 24px; letter-spacing: -.03em; margin: 6px 0 6px; } .bundle-head p { color: var(--muted); margin: 0; }
.bundles { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (max-width: 900px) { .bundles { grid-template-columns: 1fr; } }
.subplan.bundle { position: relative; display: flex; flex-direction: column; } .subplan.bundle .btn { margin-top: auto; }
.subplan.bundle .setup s { opacity: .75; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); font-size: 14px; font-weight: 550; text-decoration: none; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--brand); color: var(--brand-text, var(--brand)); }
#csomagok, #elofizetes, #csomag-foglalo, #havidijas, #cegprofil, #kampany { scroll-margin-top: 90px; }
.phero .jump { justify-content: center; }
/* Karbantartás: Alap és Plusz */
.mtiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 6px; }
.mtier { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.mtier.hot { background: rgba(62,230,176,.12); border-color: rgba(62,230,176,.45); }
.mtier small { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; opacity: .8; }
.mtier b { display: block; font-size: 30px; font-weight: 760; letter-spacing: -.045em; line-height: 1.15; margin-top: 4px; }
.mtier span { font-size: 13px; opacity: .7; }
.maint-l .mlabel { margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.maint-l .mlabel + ul { margin: 10px 0 0; }
.maint-l .hero-actions { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 420px) { .mtier b { font-size: 24px; } }

/* ---------- Foglaló csomagok (Alap / Prémium / Szalon) ---------- */
.bplans { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 18px; align-items: stretch; margin-top: 8px; }
.bplans .plan .btn { justify-content: center; }
.bplans .plan ul { align-content: start; }
.bplans .plan.hot { transform: translateY(-14px); }
.bplans .badge-top { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bplans .plan .price-note { min-height: 20px; }
.bplans .plan.hot .price b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bplans li.pf span { display: flex; flex-direction: column; gap: 1px; }
.bplans li.pf b { font-weight: 640; color: var(--text); font-size: 15px; }
.bplans li.pf small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.bplans .plan.hot li .ic { color: var(--brand); }
.bplans .roi { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--text-2); font-size: 14px; line-height: 1.5; }
.bplans .roi .ic { color: var(--brand-text); margin-top: 2px; flex: none; }
.bplans .roi b { color: var(--text); }
.bcalc { display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; margin-top: 26px; }
.bc-l { padding: 26px 30px; display: grid; gap: 14px; }
.bc-l h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.bc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15.5px; font-weight: 560; cursor: pointer; }
.bc-row small { display: block; font-weight: 450; color: var(--muted); font-size: 13px; margin-top: 2px; }
.bc-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border); }
.bc-step button { width: 34px; height: 34px; border: 0; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); }
.bc-step output { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-sw input { position: absolute; opacity: 0; pointer-events: none; }
.bc-sw i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; transition: background .2s; }
.bc-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.bc-sw input:checked + i { background: var(--grad); border-color: transparent; }
.bc-sw input:checked + i::after { transform: translateX(18px); }
.bc-sw input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.bc-r { padding: 26px 30px; color: #fff; background: var(--panel-bg); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bc-plan { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-accent); }
.bc-total { font-family: var(--font-head); font-size: 40px; font-weight: 740; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bc-total span { font-size: 16px; font-weight: 550; opacity: .8; letter-spacing: 0; margin-left: 4px; }
.bc-note { font-size: 13.5px; opacity: .75; }
@media (max-width: 980px) { .bplans { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .bplans .plan.hot { transform: none; order: -1; } .bcalc { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (max-width: 520px) { .bc-l, .bc-r { padding: 22px 20px; } .bc-total { font-size: 34px; } }

/* ---------- Vélemények ---------- */
.rv { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch; }
.rv-main { position: relative; margin: 0; padding: 40px 40px 34px; overflow: hidden; display: flex; flex-direction: column; }
.rv-main::before { content: "\201D"; position: absolute; right: 26px; top: -30px; font: 700 220px/1 Georgia, serif; color: var(--brand); opacity: .09; pointer-events: none; }
.rv-stars { display: flex; gap: 3px; color: #f5b400; margin-bottom: 18px; }
.rv-q { font-size: 23px; line-height: 1.5; letter-spacing: -.015em; font-weight: 560; color: var(--text); margin: 0; flex: 1; }
.rv-who { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.rv-av { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 750; color: var(--on-grad); background: var(--grad); flex: none; }
.rv-who b { display: block; font-size: 16px; } .rv-who small { color: var(--muted); font-size: 14px; }
.rv-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 620; color: var(--brand-text); background: var(--brand-soft); white-space: nowrap; }
.rv-box { padding: 30px 30px 28px; display: flex; flex-direction: column; }
.rv-box h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; margin: 0 0 18px; }
.rv-why { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 13px; flex: 1; align-content: start; }
.rv-why li { display: flex; gap: 10px; font-size: 15.5px; color: var(--text-2); } .rv-why .ic { color: var(--ok); margin-top: 3px; flex: none; }
.rv-box .btn { justify-content: center; }
@media (max-width: 900px) { .rv { grid-template-columns: 1fr; } .rv-main { padding: 30px 24px 26px; } .rv-q { font-size: 19px; } .rv-tag { margin-left: 0; } .rv-who { flex-wrap: wrap; } .rv-box { padding: 26px 24px; } }

/* ---------- Szakmák: menü, főoldali blokk, aloldalak ---------- */
.nav-dd { position: relative; display: flex; }
.nav-dd > a svg { margin-left: 2px; opacity: .6; transition: transform .2s; }
.nav-dd:hover > a svg, .nav-dd:focus-within > a svg { transform: rotate(180deg); }
.nav-ddm { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; }
.nav-ddm::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-dd:hover .nav-ddm, .nav-dd:focus-within .nav-ddm { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-links .nav-ddm a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; white-space: normal; }
.nav-ddm .fic { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.nav-ddm b { display: block; font-size: 14.5px; color: var(--text); } .nav-ddm small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; font-weight: 450; }
.szk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.szk-c { display: flex; gap: 14px; padding: 22px; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.szk-c:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: var(--shadow); }
.szk-c h3 { font-size: 17px; margin: 0 0 4px; } .szk-c p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.szk-c .go { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 650; color: var(--brand-text); }
@media (max-width: 980px) { .szk { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .szk { grid-template-columns: 1fr; } }
.sz-top { padding: 22px 0 10px; }
.sz-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; padding: 56px 52px; border-radius: 32px; color: #fff; background: var(--panel-bg); overflow: hidden; }
.sz-copy h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.045em; margin: 14px 0 16px; }
.sz-copy .lead { font-size: 18px; opacity: .82; line-height: 1.6; margin: 0; }
.sz-copy .eyebrow { color: var(--on-dark-accent); } .sz-copy .eyebrow::before { background: var(--on-dark-accent); }
.sz-copy ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.sz-copy li { display: flex; gap: 10px; font-size: 16px; } .sz-copy li .ic { color: var(--tick); margin-top: 3px; flex: none; }
.sz-small { font-size: 13.5px; opacity: .65; margin: 14px 0 0; }
.sz-vis { position: relative; }
.sz-vis .bframe { box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.sz-tag { position: absolute; left: 18px; bottom: -14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.sz-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sz-pain { padding: 24px; display: grid; gap: 14px; align-content: start; }
.sz-pain p { display: flex; gap: 10px; margin: 0; line-height: 1.55; }
.sz-pain .ic { flex: none; margin-top: 4px; }
.sz-p { color: var(--muted); font-size: 15px; } .sz-p .ic { color: var(--err); }
.sz-f { padding-top: 14px; border-top: 1px solid var(--border); font-size: 15.5px; font-weight: 520; color: var(--text); } .sz-f .ic { color: var(--ok); }
.sz-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.sz-ref { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.sz-refv { position: relative; padding-right: 60px; }
.sz-refv .phone { position: absolute; right: 0; bottom: -20px; width: 150px; }
.sz-more { padding-top: 40px; }
.sz-moreh { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; margin: 0 0 16px; }
.sz-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sz-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 14.5px; font-weight: 560; }
.sz-links a:hover { border-color: var(--brand); color: var(--brand-text); }
@media (max-width: 1000px) { .sz-hero { grid-template-columns: 1fr; padding: 36px 26px 44px; } .sz-pains { grid-template-columns: 1fr; } .sz-ref { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sz-prices { grid-template-columns: 1fr; } .sz-top { padding: 8px 0 0; } .sz-hero { border-radius: 24px; } .sz-refv .phone { width: 110px; } .sz-copy .hero-actions .btn { width: 100%; justify-content: center; } }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.sz-copy, .sz-vis { min-width: 0; }
@media (max-width: 700px) { .sz-copy .hero-actions .btn { white-space: normal; text-align: center; height: auto; min-height: 52px; padding-top: 12px; padding-bottom: 12px; } }
.foot-bottom nav { flex-wrap: wrap; } @media (max-width: 640px) { .foot-bottom { flex-wrap: wrap; } .foot-bottom nav { gap: 8px 14px; } }
.sz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sz-step { position: relative; padding: 26px; }
.sz-step .num { position: absolute; right: 22px; top: 18px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.sz-step h3 { font-size: 17px; margin: 14px 0 6px; } .sz-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sz-dep { margin-top: 18px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 30px 32px; }
.sz-dep h3 { font-size: 18px; margin: 0 0 14px; }
.sz-dep ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .sz-dep li { display: flex; gap: 10px; color: var(--text-2); font-size: 15.5px; } .sz-dep li .ic { color: var(--ok); margin-top: 3px; flex: none; }
.sz-depc p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) { .sz-steps { grid-template-columns: 1fr; } .sz-dep { grid-template-columns: 1fr; padding: 26px 22px; } .sz-depc .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 52px; } }
.sz-pb .maint-l h3 { margin: 6px 0 14px; }
.sz-pb .maint-l p.sub { margin: 0; line-height: 1.6; }
.sz-tiers > div { justify-content: flex-start; gap: 13px; padding: 13px 15px; }
.sz-tiers > div > span:nth-child(2) { flex: 1; }
.sz-ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.1); color: var(--on-dark-accent); }
.sz-tiers strong { font-size: 13px; opacity: .5; letter-spacing: .06em; }
.sz-pb .maint-r { display: flex; flex-direction: column; }
.sz-promise { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 26px; }
.sz-promise span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--brand-text); background: var(--brand-soft); }
@media (max-width: 900px) { .sz-pb .maint-l .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 52px; } }
.sz-quote { margin: 26px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.sz-quote .rv-stars { margin: 0 0 8px; }
.sz-quote blockquote { margin: 0; font-size: 15.5px; font-weight: 560; line-height: 1.5; color: var(--text); }
.sz-quote figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* Social média oldal */
.so-hv { min-height: 520px; display: grid; place-items: center; }
.so-phone { position: relative; z-index: 2; width: min(270px, 62%); }
.so-phone video, .so-phone .vp { display: block; width: 100%; aspect-ratio: 9/16; border-radius: 30px; background: #111; }
.so-fl { position: absolute; width: 44%; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.so-fl1 { left: 0; top: 8%; transform: rotate(-7deg); }
.so-fl2 { right: 0; bottom: 10%; transform: rotate(6deg); }
.so-hv .sz-tag { left: 50%; transform: translateX(-50%); bottom: -14px; z-index: 3; white-space: nowrap; }
.so-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.so-gi { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.so-gimg { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface-2); }
.so-gimg img, .so-gimg video { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.so-gimg .vs-track img { flex: 0 0 100%; }
.so-greel .so-gimg { isolation: isolate; }
.so-greel .so-gimg::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--poster) center / cover; filter: blur(22px) saturate(1.3) brightness(.7); }
.so-greel .vp, .so-greel video { background: transparent !important; }
.so-greel .so-gimg video { object-fit: contain; }
.so-gimg > span { z-index: 2; pointer-events: none; position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: #fff; background: rgba(10,8,16,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.so-gi figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); }
.so-gi figcaption b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 2px; }
.so-portal { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.so-pc h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 12px 0 14px; }
.so-pc .lead { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }
.so-pv { display: grid; place-items: center; }
.so-pv .phone { width: min(300px, 80%); }
.so-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 8px auto 0; align-items: stretch; }
.so-plans .plan .btn { justify-content: center; }
.so-plans .badge-top { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.so-plans .plan.hot .price b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.so-combo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 26px auto 0; max-width: 860px; text-align: center; color: var(--muted); font-size: 15px; }
.so-combo a { color: var(--brand-text); font-weight: 650; }
.so-home { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 44px; }
.so-home h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.035em; margin: 12px 0 12px; }
.so-home p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 0 0 22px; }
.so-home .hero-actions { margin: 0; }
.so-fan { position: relative; height: 330px; }
.so-fan img { position: absolute; top: 50%; left: 50%; width: 46%; border-radius: 16px; box-shadow: 0 26px 50px -24px rgba(10,4,30,.6); }
.so-fan img:nth-child(1) { transform: translate(-105%, -46%) rotate(-8deg); }
.so-fan img:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.so-fan img:nth-child(3) { transform: translate(5%, -46%) rotate(8deg); }
@media (max-width: 1000px) { .so-gal { grid-template-columns: repeat(2, 1fr); } .so-portal { grid-template-columns: 1fr; } .so-home { grid-template-columns: 1fr; padding: 30px 24px; } .so-hv { min-height: 460px; margin-top: 10px; } }
@media (max-width: 700px) { .so-plans { grid-template-columns: 1fr; } .so-plans .plan.hot { transform: none; } .so-pc .btn, .so-home .btn { width: 100%; justify-content: center; } .so-fan { height: 250px; } .so-hv { min-height: 400px; } }
@media (max-width: 420px) { .so-gal { gap: 12px; } .so-gi figcaption { font-size: 13px; } }
.nav-links > a, .nav-links > .nav-dd > a { white-space: nowrap; }
@media (max-width: 1400px) { .nav-links { gap: 2px; margin-left: 4px; } .nav-links > a, .nav-links > .nav-dd > a { padding: 8px 9px; font-size: 14px; } .nav-links a[aria-current="page"] { padding: 7px 8px; } }
@media (max-width: 1360px) { .nav-links > a:last-child { display: none; } }
@media (max-width: 1260px) { .nav-links > a[href$="#szolgaltatasok"] { display: none; } }
@media (max-width: 1080px) { .nav-links > a[href$="/referenciak"], .nav-links > a[href$="/en/references"] { display: none; } }

/* Miért UpGo: képes, színes bento rács (a régi egyforma kártyák helyett) */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bt { position: relative; overflow: hidden; border-radius: 28px; padding: 32px; color: #fff; min-height: 380px; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 30px 60px -36px rgba(15, 10, 40, .55); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.bt:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -36px rgba(15, 10, 40, .7); }
.bt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 0% 0%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.bt-tx { position: relative; z-index: 2; max-width: 420px; }
.bt-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bt h3 { font-size: 23px; letter-spacing: -.025em; margin: 18px 0 8px; color: #fff; }
.bt p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.82); }
.bt-design { grid-column: span 4; min-height: 440px; background: radial-gradient(600px 400px at 100% 100%, rgba(236,72,153,.55), transparent 60%), radial-gradient(500px 360px at 20% 0%, rgba(139,92,246,.6), transparent 60%), linear-gradient(140deg, #1b1240, #2e1065 55%, #4a0f4f); }
.bt-speed { grid-column: span 2; background: radial-gradient(300px 220px at 100% 0%, rgba(255,214,102,.55), transparent 65%), linear-gradient(150deg, #ff8a00, #ff4d4d 60%, #e11d74); }
.bt-mobile { grid-column: span 2; background: radial-gradient(320px 260px at 100% 100%, rgba(125,211,252,.5), transparent 60%), linear-gradient(160deg, #0ea5e9, #2563eb 55%, #1e1b6b); }
.bt-google { grid-column: span 2; background: radial-gradient(320px 240px at 0% 100%, rgba(167,243,208,.45), transparent 60%), linear-gradient(160deg, #10b981, #047857 60%, #064e3b); }
.bt-book { grid-column: span 2; background: radial-gradient(300px 240px at 100% 0%, rgba(253,186,116,.5), transparent 60%), linear-gradient(160deg, #f472b6, #db2777 55%, #831843); }
.bt-care { grid-column: span 3; min-height: 320px; background: radial-gradient(420px 300px at 100% 100%, rgba(16,185,129,.35), transparent 60%), linear-gradient(160deg, #111827, #0b1220); border: 1px solid rgba(255,255,255,.06); }
.bt-stats { grid-column: span 3; min-height: 320px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; align-items: end; gap: 18px; background: radial-gradient(400px 300px at 0% 0%, rgba(255,255,255,.22), transparent 60%), var(--grad); }
.bt-stats > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.28); }
.bt-stats b { font-size: clamp(34px, 3.4vw, 50px); font-weight: 760; letter-spacing: -.05em; line-height: 1; }
.bt-stats span { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.85); }

/* dizájn: három böngészőablak legyezőben */
.bt-collage { position: absolute; right: -40px; bottom: -40px; width: 64%; height: 82%; pointer-events: none; }
.bt-win { position: absolute; margin: 0; width: 62%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bt-win .bbar { height: 24px; padding: 0 9px; gap: 5px; } .bt-win .bbar i { width: 7px; height: 7px; } .bt-win .bbar span { font-size: 10px; }
.bt-win img { display: block; width: 100%; height: auto; }
.bt-win:nth-child(1) { left: 0; bottom: 18%; transform: rotate(-8deg); z-index: 1; }
.bt-win:nth-child(2) { left: 22%; bottom: 30%; transform: rotate(-1deg); z-index: 3; }
.bt-win:nth-child(3) { left: 42%; bottom: 6%; transform: rotate(7deg); z-index: 2; }
.bt-design:hover .bt-win:nth-child(1) { transform: rotate(-11deg) translate(-10px, -6px); }
.bt-design:hover .bt-win:nth-child(3) { transform: rotate(10deg) translate(10px, -4px); }

/* sebesség: mérőóra */
.bt-gauge { position: relative; margin: auto auto 0; width: 180px; height: 180px; display: grid; place-items: center; }
.bt-gauge svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bt-gauge circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.bt-gauge .g-bg { stroke: rgba(255,255,255,.22); }
.bt-gauge .g-fg { stroke: #fff; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(.2,.7,.2,1) .2s; }
.bt-speed.in .g-fg, .no-js .g-fg { stroke-dasharray: 94 100; }
.bt-gauge div { text-align: center; } .bt-gauge b { display: block; font-size: 34px; letter-spacing: -.04em; line-height: 1; } .bt-gauge small { font-size: 12.5px; opacity: .85; }

/* mobil: telefon kilóg alul */
.bt-phone { width: 190px; margin: 26px auto -150px; transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bt-phone img { display: block; }
.bt-mobile:hover .bt-phone { transform: rotate(0deg) translateY(-12px); }

/* google: keresési találat */
.bt-serp { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.bt-serp .sq { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; color: #3c4043; font-size: 13.5px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.bt-serp .sr { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: grid; gap: 2px; font-size: 12.5px; }
.bt-serp .sr.top { background: #fff; color: #202124; box-shadow: 0 16px 30px -14px rgba(0,0,0,.45); }
.bt-serp .sr small { color: inherit; opacity: .65; font-size: 11.5px; } .bt-serp .sr.top b { color: #1a0dab; font-size: 14.5px; }
.bt-serp .sr .st { color: #f59e0b; font-size: 12px; } .bt-serp .sr .st em { color: #5f6368; font-style: normal; margin-left: 4px; }
.bt-serp .sr i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; color: #188038; font-size: 12px; }
.bt-serp .sr:not(.top) { opacity: .7; }

/* foglalás: mini naptár */
.bt-cal { margin-top: auto; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; gap: 10px; }
.bt-cal .cd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bt-cal .cd span { display: grid; place-items: center; gap: 2px; padding: 7px 0; border-radius: 10px; font-size: 11px; background: rgba(255,255,255,.1); }
.bt-cal .cd b { font-size: 15px; } .bt-cal .cd .on { background: #fff; color: #be185d; }
.bt-cal .ct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bt-cal .ct span { padding: 7px 0; text-align: center; border-radius: 9px; font-size: 12.5px; font-weight: 650; background: rgba(255,255,255,.16); }
.bt-cal .ct .off { opacity: .4; text-decoration: line-through; } .bt-cal .ct .on { background: #fff; color: #be185d; }
.bt-cal .cok { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 8px 10px; border-radius: 10px; background: rgba(16,185,129,.9); }

/* karbantartás: pipák + elérhetőség sáv */
.bt-checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 2; }
.bt-checks li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.bt-checks .ic { color: #34d399; flex: none; }
.js .bt-care .bt-checks li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease var(--d), transform .5s ease var(--d); }
.js .bt-care.in .bt-checks li { opacity: 1; transform: none; }
.bt-up { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; }
.bt-up i { height: 26px; border-radius: 3px; background: linear-gradient(#34d399, #059669); opacity: .85; }
.bt-up i:nth-child(7n+3) { height: 20px; } .bt-up i:nth-child(5n+1) { height: 23px; }

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bt-design, .bt-care, .bt-stats { grid-column: span 2; }
  .bt-speed, .bt-mobile, .bt-google, .bt-book { grid-column: span 1; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bt, .bt-design, .bt-speed, .bt-mobile, .bt-google, .bt-book, .bt-care, .bt-stats { grid-column: auto; }
  .bt { padding: 26px 22px; min-height: 0; border-radius: 24px; }
  .bt-design { min-height: 470px; }
  .bt-collage { width: 112%; height: 56%; right: -20%; bottom: -24px; }
  .bt-gauge { margin-top: 26px; width: 160px; height: 160px; }
  .bt-mobile { max-height: 520px; }
  .bt-stats { grid-template-columns: 1fr; gap: 16px; }
  .bt-checks { grid-template-columns: 1fr; }
}
.bento .bt.reveal.in:hover { transform: translateY(-4px); }

.bt-stats .bt-sh { grid-column: 1 / -1; align-self: start; display: flex; flex-direction: row; justify-content: flex-start; gap: 14px; align-items: center; height: auto; padding: 0; border: 0; }
.bt-stats .bt-sh h3 { margin: 0; font-size: 21px; } .bt-stats .bt-sh p { font-size: 14.5px; }
.bt-stats .bt-sh .bt-ic { flex: none; }
@media (max-width: 720px) { .bt-stats .bt-sh { align-items: flex-start; } }
@media (max-width: 1080px) { .bt-stats, .bt-care { min-height: 0; } .bt-stats { gap: 22px; } }

/* ===== Csomagok oldal: prémium blokkos kinézet ===== */
.pk-top { padding: 22px 0 0; }
.pk-t { position: relative; overflow: hidden; border-radius: 28px; padding: 32px; isolation: isolate; }
.pk-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.pk-t h3, .pk-t .pk-h { font-size: 23px; letter-spacing: -.025em; line-height: 1.2; margin: 16px 0 8px; }
.pk-hero { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.pk-main { grid-row: span 2; padding: 48px; color: #fff; background: var(--panel-bg); display: flex; flex-direction: column; }
.pk-main .crumbs { color: rgba(255,255,255,.65); } .pk-main .crumbs a { color: rgba(255,255,255,.85); }
.pk-main h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.05em; margin: 18px 0 16px; color: #fff; }
.pk-main h1 em { font-style: normal; background: linear-gradient(100deg, var(--on-dark-accent), #fff 50%, var(--on-dark-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-main .lead { font-size: 18.5px; color: rgba(255,255,255,.8); max-width: 580px; margin: 0; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; }
.pk-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.pk-chips .ic { color: var(--tick); }
.pk-jump { margin-top: 30px; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); align-self: flex-start; }
.pk-jump a { padding: 11px 16px; border-radius: 13px; font-weight: 650; font-size: 14.5px; color: rgba(255,255,255,.8); }
.pk-jump a.on, .pk-jump a:hover { background: #fff; color: #0b0b10; }
.pk-mini { color: #fff; min-height: 250px; background: radial-gradient(300px 220px at 100% 0%, rgba(255,255,255,.25), transparent 60%), linear-gradient(150deg, #a78bfa, #6d28d9 60%, #3b0764); transition: transform .3s; }
.pk-mini:hover { transform: translateY(-3px); }
.pk-mini p, .pk-day small { color: rgba(255,255,255,.85); margin: 0; max-width: 230px; font-size: 15px; }
.pk-mini .bt-win { position: absolute; width: 52%; right: -5%; bottom: -60px; transform: rotate(-5deg); }
.pk-day { color: #fff; min-height: 250px; display: flex; flex-direction: column; background: radial-gradient(260px 200px at 100% 0%, rgba(255,214,102,.6), transparent 60%), linear-gradient(150deg, #ff8a00, #ff4d4d 60%, #e11d74); }
.pk-big { display: block; margin-top: auto; font-size: clamp(54px, 6vw, 76px); font-weight: 800; letter-spacing: -.06em; line-height: .95; }
.pk-day small { max-width: none; margin-top: 8px; }
.pk-cup { position: absolute; right: 26px; top: 28px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.2); }

/* árkártyák */
.pk-tiers { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px; align-items: stretch; margin-top: 8px; }
.pk-tier { position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform .3s, box-shadow .3s; }
.pk-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pk-top-img { position: relative; height: 170px; overflow: hidden; }
.pk-top-img .bt-win { position: absolute; width: 86%; left: 7%; top: 34px; transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pk-tier:hover .pk-top-img .bt-win { transform: rotate(0deg) translateY(-8px); }
.pk-c1 .pk-top-img { background: linear-gradient(150deg, #38bdf8, #1d4ed8); } .pk-c3 .pk-top-img { background: linear-gradient(150deg, #fb923c, #c2410c); }
.pk-c2 .pk-top-img { background: radial-gradient(400px 260px at 30% 0%, rgba(255,255,255,.35), transparent 60%), var(--grad); }
.pk-rib { position: absolute; left: 20px; top: 18px; z-index: 3; display: inline-flex; gap: 5px; align-items: center; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; background: #fff; color: #0b0b10; box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); }
.pk-bd { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.pk-bd h3 { font-size: 22px; letter-spacing: -.03em; margin: 0; }
.pk-for { color: var(--muted); font-size: 14.5px; margin: 6px 0 0; min-height: 44px; }
.pk-pr { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; } .pk-pr b { font-size: 56px; font-weight: 780; letter-spacing: -.055em; line-height: 1; } .pk-pr span { color: var(--muted); font-weight: 600; }
.pk-alt { font-size: 14px; color: var(--muted); margin-top: 6px; } .pk-alt b { color: var(--text); }
.pk-val { align-self: flex-start; margin-top: 14px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--brand-soft); color: var(--brand-text); }
.pk-bd ul { list-style: none; padding: 20px 0 0; margin: 20px 0 26px; border-top: 1px solid var(--border); display: grid; gap: 11px; }
.pk-bd li { display: flex; gap: 10px; font-size: 15px; color: var(--text-2); } .pk-bd li .ic { color: var(--brand-text); flex: none; margin-top: 2px; } .pk-bd li.pl { color: var(--text); font-weight: 650; }
.pk-bd .btn { margin-top: auto; justify-content: center; }
.pk-tier.hot { border: 1.5px solid color-mix(in srgb, var(--brand) 65%, transparent); transform: translateY(-16px); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 8%, transparent), 0 50px 100px -40px var(--glow-a); background: radial-gradient(500px 400px at 50% 0%, var(--brand-soft), transparent 60%), var(--surface); }
.pk-tier.hot:hover { transform: translateY(-20px); }
.pk-note { display: flex; gap: 10px; align-items: flex-start; justify-content: center; max-width: 900px; margin: 26px auto 0; color: var(--muted); font-size: 14.5px; text-align: left; }
.pk-note .ic { color: var(--brand-text); flex: none; margin-top: 2px; } .pk-note a { color: var(--brand-text); }

/* megtérülés + havidíj */
.pk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pk-roi, .pk-own { color: #fff; }
.pk-roi .eyebrow, .pk-own .eyebrow, .pk-bi .eyebrow, .pk-plus .eyebrow { color: rgba(255,255,255,.85); } .pk-roi .eyebrow::before, .pk-own .eyebrow::before, .pk-bi .eyebrow::before, .pk-plus .eyebrow::before { background: currentColor; }
.pk-roi h3, .pk-own h3 { font-size: 30px; max-width: 460px; }
.pk-roi > p, .pk-own > p { color: rgba(255,255,255,.8); margin: 0; }
.pk-roi { background: radial-gradient(500px 400px at 100% 100%, rgba(253,186,116,.35), transparent 60%), linear-gradient(160deg, #24170a, #3d2006); }
.pk-ex { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fde68a; letter-spacing: .05em; vertical-align: middle; }
.pk-calc { margin-top: 26px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.pk-pick { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0,0,0,.25); margin-bottom: 18px; }
.pk-pick button { flex: 1; padding: 10px 8px; border: 0; border-radius: 10px; background: transparent; color: #e7d9c6; font: 650 14px/1 inherit; font-family: inherit; cursor: pointer; }
.pk-pick button.on { background: #fff; color: #3d2006; }
.pk-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: #e7d9c6; } .pk-row b { color: #fff; }
.pk-calc input[type=range] { --p: 16%; width: 100%; margin: 14px 0 20px; height: 10px; border-radius: 99px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, #fbbf24, #f97316) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.14); cursor: pointer; }
.pk-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.pk-calc input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; }
.pk-res { display: flex; align-items: flex-end; gap: 16px; } .pk-res b { font-size: 84px; font-weight: 800; letter-spacing: -.06em; line-height: .85; background: linear-gradient(120deg, #fde68a, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; } .pk-res span { font-size: 15.5px; color: #e7d9c6; padding-bottom: 6px; }
.pk-own { background: radial-gradient(500px 400px at 0% 100%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 60%), linear-gradient(160deg, #10141c, #0a0d12); border: 1px solid rgba(255,255,255,.06); }
.pk-tl { position: relative; margin-top: 24px; display: grid; gap: 14px; }
.pk-tl::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--tick), transparent); }
.pk-tl div { position: relative; display: flex; gap: 14px; align-items: center; } .pk-tl i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; font-size: 13px; color: var(--tick); background: #0f1a17; border: 1px solid color-mix(in srgb, var(--tick) 40%, transparent); z-index: 1; }
.pk-tl div:last-child i { background: var(--grad); color: #fff; border: 0; }
.pk-tl span { font-size: 14px; color: rgba(255,255,255,.7); } .pk-tl b { display: block; font-size: 15.5px; color: #fff; }
.pk-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.pk-sub { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: background .2s; } .pk-sub:hover { background: rgba(255,255,255,.12); }
.pk-sub small { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); } .pk-sub b { display: block; font-size: 26px; letter-spacing: -.04em; margin: 2px 0; } .pk-sub em { font-style: normal; font-size: 13px; font-weight: 600; opacity: .75; letter-spacing: 0; } .pk-sub span { font-size: 12.5px; color: rgba(255,255,255,.65); }
.pk-terms { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 14px 0 0; } .pk-terms a { color: rgba(255,255,255,.8); }

/* csomag foglalóval */
.pk-bund { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: 18px; }
.pk-bi { color: #fff; min-height: 380px; background: radial-gradient(300px 240px at 100% 0%, rgba(253,186,116,.45), transparent 60%), linear-gradient(150deg, #f472b6, #be185d 60%, #831843); }
.pk-bi h3 { font-size: 28px; max-width: 320px; } .pk-bi p { color: rgba(255,255,255,.85); max-width: 280px; margin: 0; }
.pk-bi .phone { position: absolute; width: 160px; right: 22px; bottom: -120px; transform: rotate(6deg); }
.pk-bc { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
.pk-bc h3 { margin-top: 0; font-size: 19px; } .pk-bc s { margin-top: 10px; color: var(--muted); font-size: 15px; }
.pk-bp b { font-size: 50px; font-weight: 780; letter-spacing: -.05em; line-height: 1.05; } .pk-bp span { color: var(--muted); font-weight: 600; }
.pk-save { align-self: flex-start; margin-top: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 750; background: rgba(236,72,153,.12); color: #db2777; }
.pk-bc ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 9px; } .pk-bc li { display: flex; gap: 9px; font-size: 14px; color: var(--text-2); } .pk-bc li .ic { color: #ec4899; flex: none; margin-top: 2px; }
.pk-bc .btn { margin-top: auto; justify-content: center; }
.pk-bc.hot { border-color: rgba(236,72,153,.55); box-shadow: 0 40px 80px -40px rgba(219,39,119,.55); }

/* összehasonlító táblázat kiemelt oszloppal */
.pk-table { border-radius: 28px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.pk-table .ftable th.hot, .pk-table .ftable td.hot { background: var(--brand-soft); }

/* karbantartás */
.pk-mt { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; }
.pk-vs { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); }
.pk-vs h3 { margin-top: 0; } .pk-vs ul { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 12px; }
.pk-vs li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.pk-vs li i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.pk-vs.bad li i { background: rgba(239,68,68,.12); color: #ef4444; } .pk-vs.good li i { background: var(--brand-soft); color: var(--brand-text); }
.pk-vs.bad { background: linear-gradient(160deg, rgba(239,68,68,.07), transparent 60%), var(--surface); }
.pk-vs.good { background: linear-gradient(160deg, var(--brand-soft), transparent 60%), var(--surface); }
.pk-err { margin-top: auto; border-radius: 16px; overflow: hidden; background: #fff; color: #333; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.06); }
.pk-err .bbar { height: 24px; } .pk-err > div:last-child { padding: 18px; text-align: center; } .pk-err b { display: block; color: #b91c1c; font-size: 16px; } .pk-err span { font-size: 12px; color: #777; }
.pk-up { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.pk-up small { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 650; color: var(--brand-text); } .pk-up div { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin-top: 12px; } .pk-up i { height: 28px; border-radius: 3px; background: linear-gradient(#34d399, #059669); }
.pk-plus { color: #fff; display: flex; flex-direction: column; background: radial-gradient(400px 300px at 100% 0%, rgba(255,255,255,.28), transparent 60%), var(--grad); }
.pk-plus h3 { margin-top: 12px; } .pk-plus > p { color: rgba(255,255,255,.88); margin: 0; }
.pk-rep { margin: 20px 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.95); color: #0b1a14; box-shadow: 0 20px 40px -20px rgba(0,0,0,.45); }
.pk-rep small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #5b6b64; } .pk-rep div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pk-rep span { padding: 10px; border-radius: 12px; background: #f1f5f4; font-size: 11.5px; color: #4b5d56; } .pk-rep span b { display: block; font-size: 22px; letter-spacing: -.03em; color: #0b1a14; }
.pk-plus .pk-bp { margin-top: auto; } .pk-plus .pk-bp span { color: rgba(255,255,255,.85); }
.pk-or { font-size: 13px; color: rgba(255,255,255,.85); }
.pk-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn.pk-dark { background: #0b0b10; color: #fff; border: 0; } .btn.pk-dark:hover { background: #1b1b22; }
.btn.pk-light { background: rgba(255,255,255,.18); color: inherit; border: 1px solid rgba(255,255,255,.3); }

/* kiegészítők */
.pk-adds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pk-ad { color: #fff; display: flex; flex-direction: column; min-height: 420px; }
.pk-ad h3 { font-size: 21px; } .pk-ad > p { color: rgba(255,255,255,.85); margin: 0; font-size: 14.5px; }
.pk-a1 { background: linear-gradient(160deg, #2dd4bf, #0f766e); } .pk-a2 { background: linear-gradient(160deg, #60a5fa, #1d4ed8); } .pk-a3 { background: linear-gradient(160deg, #fbbf24, #b45309); } .pk-a4 { background: linear-gradient(160deg, #f472b6, #9d174d); }
.pk-mini-l { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }
.pk-mini-l li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.14); font-size: 13px; } .pk-mini-l b { white-space: nowrap; }
.pk-ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; } .pk-ticks li { display: flex; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.92); } .pk-ticks .ic { flex: none; margin-top: 2px; }
.pk-ap { margin-top: auto; padding-top: 16px; } .pk-ap b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; } .pk-ap span { font-size: 14px; opacity: .85; }
.pk-more { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: #fff; }
.pk-a1 .pk-more { margin-top: auto; padding-top: 16px; }
.pk-fan { position: relative; height: 130px; margin-top: 14px; }
.pk-fan img { position: absolute; width: 104px; border-radius: 12px; box-shadow: 0 18px 30px -14px rgba(0,0,0,.6); }
.pk-fan img:first-child { left: 8px; top: 8px; transform: rotate(-8deg); } .pk-fan img:last-child { left: 96px; top: 0; transform: rotate(6deg); }

/* garanciák, vélemény, felhívás */
.pk-gar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pk-g { background: var(--surface); border: 1px solid var(--border); padding: 28px; }
.pk-g .pk-ic { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand-text); }
.pk-g h3 { font-size: 19px; } .pk-g p { color: var(--muted); font-size: 14.5px; margin: 0; }
.pk-fin { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; margin-top: 18px; }
.pk-q { margin: 0; color: #1c1003; background: linear-gradient(160deg, #fde68a, #f59e0b 60%, #d97706); }
.pk-stars { font-size: 22px; letter-spacing: 3px; color: #7c2d12; } .pk-q blockquote { margin: 14px 0 22px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.4; }
.pk-q figcaption { display: flex; gap: 12px; align-items: center; } .pk-q figcaption i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #1c1003; color: #fde68a; } .pk-q figcaption small { display: block; opacity: .75; }
.pk-cta { padding: 48px; color: #fff; background: radial-gradient(500px 400px at 100% 0%, rgba(255,255,255,.3), transparent 60%), var(--grad); }
.pk-cta h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.045em; color: #fff; margin: 0; }
.pk-cta p { font-size: 17px; color: rgba(255,255,255,.88); margin: 14px 0 0; max-width: 540px; }
.pk-sc { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 14px; font-weight: 650; } .pk-sc span { display: inline-flex; gap: 6px; align-items: center; }

@media (max-width: 1080px) {
  .pk-hero { grid-template-columns: 1fr 1fr; } .pk-main { grid-column: 1 / -1; grid-row: auto; }
  .pk-tiers { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } .pk-tier.hot, .pk-tier.hot:hover { transform: none; }
  .pk-two, .pk-fin { grid-template-columns: 1fr; }
  .pk-bund { grid-template-columns: 1fr 1fr; } .pk-bi { grid-column: 1 / -1; min-height: 300px; }
  .pk-mt { grid-template-columns: 1fr 1fr; } .pk-plus { grid-column: 1 / -1; }
  .pk-adds, .pk-gar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .pk-top { padding-top: 8px; }
  .pk-t { padding: 26px 22px; border-radius: 24px; } .pk-main { padding: 30px 22px; }
  .pk-hero, .pk-bund, .pk-mt, .pk-adds, .pk-gar { grid-template-columns: 1fr; }
  .pk-jump a { padding: 9px 12px; font-size: 13.5px; }
  .pk-mini { min-height: 260px; } .pk-mini .bt-win { width: 64%; bottom: -40px; }
  .pk-subs { grid-template-columns: 1fr; }
  .pk-res b { font-size: 66px; }
  .pk-cta { padding: 30px 22px; } .pk-acts .btn { width: 100%; justify-content: center; white-space: normal; height: auto; min-height: 52px; }
  .pk-ad { min-height: 0; } .pk-bi .phone { width: 130px; bottom: -150px; } .pk-bi p { max-width: 190px; }
}
.pk-table { overflow-x: auto; }
@media (max-width: 680px) { .pk-mini { min-height: 280px; } .pk-mini p { max-width: 62%; } .pk-mini .bt-win { width: 56%; bottom: -70px; right: -8%; } .pk-bi { min-height: 340px; } }

/* ===== Időpontfoglaló oldal (fg-*) ===== */
.fg-sec { padding-top: 70px; padding-bottom: 0; }
.fg-hero { display: grid; grid-template-columns: 1.32fr .78fr; gap: 18px; }
.fg-main { min-height: 0; grid-row: auto; }
.fg-main h1 { font-size: clamp(38px, 4.4vw, 60px); max-width: 640px; } .fg-main h1 em { white-space: nowrap; }
.fg-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg-main .pk-acts { margin-top: auto; padding-top: 30px; }
.btn.fg-try { background: #fff; color: #0b0b10; border: 0; } .btn.fg-try:hover { background: #eef2f0; }
.btn.fg-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); } .btn.fg-ghost:hover { background: rgba(255,255,255,.14); }
.fg-phone { grid-column: 2; grid-row: 1 / span 2; min-height: 600px; padding: 0; background: radial-gradient(500px 400px at 50% 100%, rgba(236,72,153,.55), transparent 60%), linear-gradient(160deg, #2a0d2e, #4c0f3a); }
.fg-phone .phone { position: absolute; width: 270px; left: 50%; margin-left: -135px; top: max(84px, calc(50% - 240px)); transform: rotate(-3deg); animation: fgFloat 7s ease-in-out infinite; }
.fg-nc { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.96); color: #111; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); text-align: left; }
.fg-na { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #04120c; background: linear-gradient(135deg, #34e3a8, #67e8f9); }
.fg-nc b { display: block; font-size: 13.5px; line-height: 1.25; color: #111; } .fg-nc span { font-size: 12px; color: #555; } .fg-nc em { margin-left: auto; font-style: normal; font-size: 11px; color: #888; align-self: flex-start; white-space: nowrap; }
.fg-phone .fg-nc { position: absolute; width: min(290px, 86%); z-index: 3; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
.fg-phone.in .fg-nc, .no-js .fg-phone .fg-nc { opacity: 1; transform: none; }
.fg-phone .n1 { left: 18px; top: 24px; transition-delay: .35s; } .fg-phone .n2 { right: 16px; bottom: 132px; transition-delay: .9s; } .fg-phone .n3 { left: 22px; bottom: 32px; transition-delay: 1.45s; }
.fg-price { color: #fff; min-height: 240px; display: flex; flex-direction: column; background: radial-gradient(260px 200px at 100% 0%, rgba(255,214,102,.6), transparent 60%), linear-gradient(150deg, #ff8a00, #ff4d4d 60%, #e11d74); transition: transform .3s; }
.fg-price:hover { transform: translateY(-3px); }
.fg-from { margin-top: auto; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fg-price .pk-big { margin-top: 4px; font-size: clamp(40px, 3.6vw, 54px); }
.fg-price small { color: rgba(255,255,255,.9); font-size: 14px; margin-top: 8px; }
.fg-free { color: #fff; min-height: 240px; display: flex; flex-direction: column; background: radial-gradient(260px 200px at 0% 100%, rgba(125,211,252,.5), transparent 60%), linear-gradient(150deg, #38bdf8, #1d4ed8 60%, #1e1b6b); }
.fg-free h3 { margin-top: 16px; } .fg-free ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 9px; } .fg-free li { display: flex; gap: 8px; font-size: 14.5px; font-weight: 600; } .fg-free li .ic { flex: none; margin-top: 2px; }
@keyframes fgFloat { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } }

/* veszteség számoló */
.fg-loss { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.fg-calc { color: #fff; background: radial-gradient(600px 400px at 0% 100%, rgba(248,113,113,.3), transparent 60%), linear-gradient(160deg, #1f0d10, #120709); border: 1px solid rgba(248,113,113,.18); }
.fg-calc .eyebrow { color: #fca5a5; } .fg-calc .eyebrow::before { background: currentColor; }
.fg-calc h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 10px; color: #fff; max-width: 520px; } .fg-calc > p { color: #e8cfd1; margin: 0; max-width: 520px; }
.fg-sl .pk-row { color: #e8cfd1; }
.fg-sl input[type=range] { background: linear-gradient(90deg, #fb7185, #ef4444) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.14); }
.fg-sl input[type=range]:last-child { margin-bottom: 4px; }
.fg-res { display: flex; flex-direction: column; background: linear-gradient(160deg, #12151a, #0b0c0f); border: 1px solid rgba(255,255,255,.07); color: #fff; }
.fg-lost { padding: 22px; border-radius: 22px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); }
.fg-lost small, .fg-win small { font-weight: 800; letter-spacing: .06em; font-size: 12px; } .fg-lost small { color: #fca5a5; }
.fg-lost b { display: block; font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.06em; color: #f87171; line-height: 1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.fg-lost span { color: #e8cfd1; font-size: 14px; }
.fg-vs { text-align: center; color: rgba(255,255,255,.5); font-weight: 800; margin: 14px 0; letter-spacing: .1em; font-size: 12px; }
.fg-win { margin-top: auto; padding: 22px; border-radius: 22px; color: #04120c; background: radial-gradient(300px 200px at 100% 0%, rgba(255,255,255,.3), transparent 60%), linear-gradient(140deg, #34e3a8, #059669); }
.fg-win b { display: block; font-size: clamp(36px, 4vw, 50px); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 8px 0 6px; } .fg-win span { font-size: 14.5px; font-weight: 600; opacity: .85; }

/* egy nap */
.fg-day { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg-dy { color: #fff; background: linear-gradient(160deg, #15171c, #0d0f13); border: 1px solid rgba(255,255,255,.07); }
.fg-dy.good { background: radial-gradient(500px 300px at 100% 0%, rgba(52,227,168,.18), transparent 60%), linear-gradient(160deg, #0c1f19, #08130f); border-color: rgba(52,227,168,.25); }
.fg-dy h3 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fff; } .fg-dy h3 span { font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 8px; letter-spacing: .05em; }
.fg-dy.bad h3 span { background: rgba(239,68,68,.15); color: #fca5a5; } .fg-dy.good h3 span { background: rgba(52,227,168,.15); color: #34e3a8; }
.fg-tl { display: grid; gap: 10px; margin-top: 18px; }
.fg-tl div { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: 14.5px; color: #d0d4da; opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; }
.fg-dy.in .fg-tl div, .no-js .fg-tl div { opacity: 1; transform: none; }
.fg-tl div:nth-child(2) { transition-delay: .12s; } .fg-tl div:nth-child(3) { transition-delay: .24s; } .fg-tl div:nth-child(4) { transition-delay: .36s; }
.fg-tl b { font-variant-numeric: tabular-nums; color: #fff; }
.fg-dy.bad .fg-tl div { border-left: 3px solid #ef4444; } .fg-dy.good .fg-tl div { border-left: 3px solid #34e3a8; }

/* funkciók bento */
.fg-fb { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.fg-fb .pk-t { color: #fff; min-height: 300px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; box-shadow: 0 30px 60px -36px rgba(15,10,40,.55); }
.fg-fb .pk-t:hover { transform: translateY(-4px); }
.fg-fb .pk-t p { color: rgba(255,255,255,.82); margin: 0; font-size: 15px; }
.fg-fb .pk-t h3, .fg-fb .pk-t .pk-h { color: #fff; }
.fg-app { grid-column: span 2; grid-row: span 2; background: radial-gradient(400px 300px at 50% 100%, rgba(52,227,168,.45), transparent 60%), linear-gradient(160deg, #0e2a22, #062018); }
.fg-lock { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }
.fg-time { text-align: center; font-size: 58px; font-weight: 300; letter-spacing: -.04em; color: #e9fff7; line-height: 1; } .fg-date { text-align: center; font-size: 14px; color: #a7f3d0; margin-bottom: 10px; }
.fg-app { display: flex; flex-direction: column; }
.fg-3 { grid-column: span 2; background: linear-gradient(160deg, #a78bfa, #6d28d9 60%, #3b0764); }
.fg-steps { display: flex; gap: 8px; margin-top: auto; padding-top: 20px; } .fg-steps span { flex: 1; padding: 13px 8px; border-radius: 14px; background: rgba(255,255,255,.14); text-align: center; font-size: 12.5px; font-weight: 650; } .fg-steps b { display: block; font-size: 22px; } .fg-steps .on { background: #fff; color: #4c1d95; }
.fg-3, .fg-staff, .fg-rem, .fg-sync, .fg-lang { display: flex; flex-direction: column; }
.fg-staff { grid-column: span 2; background: linear-gradient(160deg, #fb923c, #c2410c); }
.fg-av { display: flex; margin-top: auto; padding-top: 20px; } .fg-av span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 3px solid #c2410c; margin-right: -10px; transition: transform .3s; } .fg-staff:hover .fg-av span { margin-right: 4px; }
.fg-av span:nth-child(1) { background: #fde68a; color: #7c2d12; } .fg-av span:nth-child(2) { background: #fbcfe8; color: #831843; } .fg-av span:nth-child(3) { background: #bfdbfe; color: #1e3a8a; } .fg-av span:nth-child(4) { background: rgba(255,255,255,.22); color: #fff; font-size: 13px; }
.fg-rem { grid-column: span 2; background: linear-gradient(160deg, #38bdf8, #1d4ed8); }
.fg-mail { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: #fff; color: #333; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); font-size: 13px; transform: rotate(-2deg); transition: transform .4s; } .fg-rem:hover .fg-mail { transform: rotate(0); }
.fg-mail small { color: #888; font-size: 11.5px; } .fg-mail b { display: block; font-size: 14.5px; margin: 2px 0 4px; color: #111; } .fg-mail span { display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 9px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: 12px; }
.fg-sync { grid-column: span 2; background: linear-gradient(160deg, #1f2937, #0f172a); border: 1px solid rgba(255,255,255,.07); }
.fg-cal { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 44px 1fr; gap: 6px 10px; font-size: 12.5px; } .fg-cal > span { color: rgba(255,255,255,.55); padding-top: 8px; } .fg-cal div { padding: 8px 10px; border-radius: 10px; font-weight: 650; }
.fg-cal .c1 { background: rgba(52,227,168,.18); color: #a7f3d0; border-left: 3px solid #34e3a8; } .fg-cal .c2 { background: rgba(167,139,250,.18); color: #ddd6fe; border-left: 3px solid #a78bfa; } .fg-cal .c3 { background: rgba(251,146,60,.18); color: #fed7aa; border-left: 3px solid #fb923c; }
.fg-lang { grid-column: span 2; background: linear-gradient(160deg, #f472b6, #be185d); }
.fg-flags { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; } .fg-flags span { flex: 1; padding: 14px 0; border-radius: 16px; text-align: center; font-weight: 800; font-size: 20px; background: rgba(255,255,255,.16); } .fg-flags .on { background: #fff; color: #be185d; } .fg-flags small { display: block; font-size: 11px; font-weight: 600; opacity: .8; }
.fg-stats { grid-column: span 2; min-height: 400px !important; background: linear-gradient(160deg, #10b981, #047857 60%, #064e3b); }
.fg-brand { grid-column: span 2; min-height: 400px !important; background: radial-gradient(400px 300px at 100% 100%, rgba(253,186,116,.45), transparent 60%), linear-gradient(160deg, #24170a, #3d2006); }
.fg-stats .bt-win, .fg-brand .bt-win { width: 74%; right: -8%; bottom: -70px; }
.fg-stats .bt-win { transform: rotate(-3deg); } .fg-brand .bt-win { transform: rotate(3deg); }
.fg-stats:hover .bt-win, .fg-brand:hover .bt-win { transform: rotate(0) translateY(-8px); }
.fg-sw { display: flex; gap: 10px; margin-top: 20px; } .fg-sw span { width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(255,255,255,.3); } .fg-sw .on { outline: 3px solid #fff; outline-offset: 3px; }
.fg-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.fg-mini .pk-t { padding: 24px; display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); }
.fg-mini .pk-ic { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand-text); }
.fg-mini h3 { margin: 0 0 4px; font-size: 18px; } .fg-mini p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* élő demó */
@property --fg-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fg-demo { position: relative; overflow: hidden; margin-top: 90px; padding: 100px 0; color: #fff; background: #06080c; isolation: isolate; }
.fg-demo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); }
.fg-aur { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.fg-aur i { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(90px); opacity: .5; animation: fgAur 16s ease-in-out infinite alternate; }
.fg-aur i:nth-child(1) { background: #10b981; left: -160px; top: -120px; }
.fg-aur i:nth-child(2) { background: #8b5cf6; right: -180px; top: 30%; animation-delay: -5s; }
.fg-aur i:nth-child(3) { background: #ec4899; left: 30%; bottom: -260px; opacity: .35; animation-delay: -10s; }
@keyframes fgAur { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(80px, 60px) scale(1.15); } }
.fg-dhead { text-align: center; max-width: 760px; margin: 0 auto 50px; }
.fg-live { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: rgba(52,227,168,.12); color: #a7f3d0; border: 1px solid rgba(52,227,168,.28); }
.fg-live i { width: 8px; height: 8px; border-radius: 50%; background: #34e3a8; box-shadow: 0 0 0 0 rgba(52,227,168,.6); animation: fgPulse 1.8s infinite; }
@keyframes fgPulse { 0% { box-shadow: 0 0 0 0 rgba(52,227,168,.6); } 100% { box-shadow: 0 0 0 12px rgba(52,227,168,0); } }
.fg-dhead h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.05em; margin: 20px 0 16px; color: #fff; }
.fg-dhead h2 em { font-style: normal; background: linear-gradient(100deg, #34e3a8, #67e8f9 40%, #c4b5fd 70%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fg-dhead p { font-size: 18px; color: rgba(255,255,255,.72); margin: 0; }
.fg-dgrid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: center; }
.fg-dgrid > * { min-width: 0; }
.fg-dsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: none; }
.fg-dsteps li { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .3s, border-color .3s, transform .3s; }
.fg-dsteps li:hover { background: rgba(255,255,255,.07); border-color: rgba(52,227,168,.35); transform: translateX(4px); }
.fg-dsteps i { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #04120c; background: linear-gradient(135deg, #34e3a8, #67e8f9); box-shadow: 0 10px 24px -10px rgba(52,227,168,.8); }
.fg-dsteps li:nth-child(2) i { background: linear-gradient(135deg, #a78bfa, #67e8f9); } .fg-dsteps li:nth-child(3) i { background: linear-gradient(135deg, #f9a8d4, #a78bfa); } .fg-dsteps li:nth-child(4) i { background: linear-gradient(135deg, #fde68a, #f472b6); }
.fg-dsteps b { display: block; font-size: 15.5px; color: #fff; } .fg-dsteps span { font-size: 13.5px; color: rgba(255,255,255,.62); }
.fg-dsteps .fg-dnote { background: none; border: 0; padding: 4px 6px; gap: 10px; color: rgba(255,255,255,.55); font-size: 13px; } .fg-dsteps .fg-dnote:hover { transform: none; } .fg-dnote .ic { color: #34e3a8; flex: none; }
.fg-frame { position: relative; padding: 2px; border-radius: 30px; background: conic-gradient(from var(--fg-ang), #34e3a8, #67e8f9, #a78bfa, #f472b6, #fbbf24, #34e3a8); animation: fgSpin 8s linear infinite; box-shadow: 0 60px 120px -40px rgba(16,185,129,.55), 0 0 0 1px rgba(255,255,255,.04); }
.fg-frame::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: inherit; filter: blur(30px); opacity: .45; }
.fg-frame::after { content: ""; position: absolute; inset: 2px; border-radius: 28px; pointer-events: none; z-index: 4; background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(255,255,255,.09), transparent 60%); }
@keyframes fgSpin { to { --fg-ang: 360deg; } }
.fg-chrome { position: relative; border-radius: 28px; overflow: hidden; background: #0f1218; }
.fg-chrome .bbar { height: 40px; background: #161a22; border-bottom: 1px solid rgba(255,255,255,.06); padding: 0 16px; } .fg-chrome .bbar span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.6); max-width: 320px; }
.fg-chrome .demo-stage { border: 0; border-radius: 0; background: radial-gradient(600px 300px at 20% 0%, rgba(52,227,168,.18), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(167,139,250,.2), transparent 60%), #10141b; padding: 26px; }
.fg-chrome .demo-stage .hint { color: rgba(255,255,255,.6); }
.fg-badge { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #111; background: #fff; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7); animation: fgBob 5s ease-in-out infinite; white-space: nowrap; }
.fg-badge .ic { color: #059669; }
.fg-badge.b1 { right: 36px; top: -18px; } .fg-badge.b2 { left: -30px; bottom: 70px; animation-delay: -2.5s; } .fg-badge.b2 .ic { color: #db2777; }
@keyframes fgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* admin */
.fg-adm { display: grid; grid-template-columns: .8fr 1.4fr; gap: 18px; }
.fg-atxt { color: #fff; display: flex; flex-direction: column; background: radial-gradient(400px 300px at 0% 100%, rgba(103,232,249,.18), transparent 60%), linear-gradient(160deg, #111a2e, #0b1120); border: 1px solid rgba(255,255,255,.07); }
.fg-atxt .eyebrow { color: #67e8f9; } .fg-atxt .eyebrow::before { background: currentColor; }
.fg-atxt h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.06; letter-spacing: -.045em; margin: 0; color: #fff; }
.fg-atxt ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; } .fg-atxt li { display: flex; gap: 10px; color: #cfd4dc; font-size: 15.5px; } .fg-atxt li .ic { color: #34e3a8; flex: none; margin-top: 2px; }
.fg-avis { padding: 26px 26px 0; background: radial-gradient(500px 400px at 50% 100%, rgba(103,232,249,.32), transparent 60%), linear-gradient(160deg, #0b2530, #071820); display: flex; flex-direction: column; align-items: center; }
.fg-tabs { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); margin-bottom: 22px; max-width: 100%; overflow-x: auto; }
.fg-tabs button { color: rgba(255,255,255,.7); white-space: nowrap; } .fg-tabs button[aria-selected="true"] { background: #fff; color: #0b0b10; }
.fg-avis .tabpanes { width: 100%; }
.fg-shot { margin: 0 0 -6px; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -10px 60px -20px rgba(0,0,0,.6); }
.fg-shot img { display: block; width: 100%; height: auto; }

/* beépítés */
.fg-emb { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 18px; }
.fg-est { min-height: 250px; display: flex; flex-direction: column; color: #fff; transition: transform .3s; } .fg-est:hover { transform: translateY(-4px); }
.fg-n { font-size: 72px; font-weight: 800; letter-spacing: -.07em; line-height: .8; }
.fg-est h3 { margin-top: auto; color: inherit; } .fg-est p { margin: 0; font-size: 14.5px; }
.fg-est.e1 { background: linear-gradient(160deg, #34e3a8, #047857); color: #04120c; } .fg-est.e1 p { color: rgba(4,18,12,.75); }
.fg-est.e2 { background: linear-gradient(160deg, #a78bfa, #5b21b6); } .fg-est.e2 p { color: rgba(255,255,255,.82); }
.fg-est.e3 { background: linear-gradient(160deg, #fbbf24, #d97706); color: #1c1003; } .fg-est.e3 p { color: rgba(28,16,3,.75); }
.fg-code { background: #0b0d12; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; padding-top: 56px; }
.fg-code code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.75; color: #9aa0ab; word-break: break-all; }
.fg-code .t { color: #93c5fd; } .fg-code .a { color: #f472b6; } .fg-code .s { color: #34e3a8; }
.fg-cp { position: absolute; left: 22px; top: 20px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.08); color: #fff; }
.fg-cta { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) { .fg-frame, .fg-aur i, .fg-badge, .fg-phone .phone, .fg-live i { animation: none; } }
@media (max-width: 1080px) {
  .fg-hero { grid-template-columns: 1fr; } .fg-phone { grid-column: auto; grid-row: auto; }
  .fg-loss, .fg-adm { grid-template-columns: 1fr; }
  .fg-fb { grid-template-columns: repeat(2, 1fr); } .fg-fb > .pk-t { grid-column: span 1; } .fg-app { grid-row: span 2; }
  .fg-dgrid { grid-template-columns: 1fr; gap: 30px; } .fg-dsteps { grid-template-columns: 1fr 1fr; } .fg-dsteps .fg-dnote { grid-column: 1 / -1; }
  .fg-emb { grid-template-columns: repeat(3, 1fr); } .fg-code { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .fg-sec { padding-top: 54px; }
  .fg-day, .fg-mini, .fg-emb, .fg-fb { grid-template-columns: 1fr; } .fg-sub { grid-template-columns: 1fr; }
  .fg-phone { grid-row: auto; min-height: 560px; } .fg-phone .phone { width: 220px; margin-left: -110px; top: 80px; }
  .fg-fb > .pk-t, .fg-app { grid-row: auto; min-height: 0; }
  .fg-fb .fg-stats, .fg-fb .fg-brand { min-height: 400px !important; } .fg-stats .bt-win, .fg-brand .bt-win { width: 76%; bottom: -50px; }
  .fg-demo { margin-top: 60px; padding: 64px 0; } .fg-dsteps { grid-template-columns: 1fr; }
  .fg-badge { display: none; } .fg-chrome .demo-stage { padding: 10px; } .fg-frame { border-radius: 24px; } .fg-chrome { border-radius: 22px; }
  .fg-est { min-height: 200px; } .fg-n { font-size: 56px; }
  .fg-avis { padding: 20px 16px 0; } .fg-tabs { justify-content: flex-start; }
  .fg-main .pk-acts .btn { width: 100%; justify-content: center; }
}
#ar .pk-bund { margin-top: 44px; }
/* Színes változat az árkártyákhoz (.plans.pc): kártyánként saját színátmenet az ár dobozán, a pipákon és a gombon */
.plans.pc .plan:nth-child(1) { --pc-a: #0ea5e9; --pc-b: #14b8a6; }
.plans.pc .plan:nth-child(2) { --pc-a: #10b981; --pc-b: #34e0a1; }
.plans.pc .plan:nth-child(3) { --pc-a: #8b5cf6; --pc-b: #ec4899; }
.plans.pc .plan { overflow: hidden; }
.plans.pc .plan::before { content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 240px; border-top-right-radius: inherit; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pc-a) 26%, transparent), transparent 70%); pointer-events: none; } /* a fény a kártyán belül marad, nem lóg ki */
.plans.pc .plan.hot { overflow: visible; overflow-x: clip; } /* a fenti címke kilóghat, oldalra semmi */
.plans.pc .plan-tag { color: #fff; background: linear-gradient(120deg, var(--pc-a), var(--pc-b)); }
.plans.pc .plan-price { position: relative; overflow: hidden; border: 0; color: #fff; background: linear-gradient(135deg, var(--pc-a), var(--pc-b)); box-shadow: 0 22px 40px -22px var(--pc-a); }
.plans.pc .plan-price::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
.plans.pc .plan-price .price b { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.plans.pc .plan-price .price span, .plans.pc .plan-price .price-note { color: rgba(255,255,255,.85); }
.plans.pc .plan-price .sub-alt { position: relative; z-index: 1; color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.22); }
.plans.pc .plan-price .sub-alt:hover { border-color: #fff; }
.plans.pc .plan li .ic { color: var(--pc-a); }
.plans.pc .plan li.plus .ic { color: var(--pc-b); }
.plans.pc .plan .btn-ghost { border-color: color-mix(in srgb, var(--pc-a) 55%, transparent); }
.plans.pc .plan .btn-ghost:hover { background: linear-gradient(120deg, var(--pc-a), var(--pc-b)); color: #fff; border-color: transparent; }
.plans.pc .plan .btn-primary { background: linear-gradient(120deg, var(--pc-a), var(--pc-b)); }
.plans.pc .plan-free .ic { color: var(--pc-a); }
.plans.pc + .plan-trust > div:nth-child(1) > .ic { color: #fff; background: linear-gradient(135deg, #0ea5e9, #14b8a6); }
.plans.pc + .plan-trust > div:nth-child(2) > .ic { color: #fff; background: linear-gradient(135deg, #10b981, #34e0a1); }
.plans.pc + .plan-trust > div:nth-child(3) > .ic { color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
/* Hosszú gombfelirat (pl. németül) telefonon se tolja szét az oldalt: törhet több sorba */
@media (max-width: 560px) { .btn-block, .btn-lg { white-space: normal; text-align: center; height: auto; min-height: var(--h, 52px); padding-top: 10px; padding-bottom: 10px; line-height: 1.25; } }
html { overflow-x: clip; }

/* Sima görgetés (Lenis) és GSAP animációk (assets/motion.js) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.gs .reveal:not(.in) { transition: none; }
.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad, linear-gradient(90deg, #7c3aed, #ec4899)); pointer-events: none; }