/* ============================================================
   meloim.hu — kezdőlap 2026 (hx- névtér, önálló)
   Friss 2026 redesign: aurora háttér, üveg-hatás, modern kártyák
   ============================================================ */
.hx, .hx *, .hx *::before, .hx *::after { box-sizing:border-box; }

.hx {
    /* brand */
    --hx-brand:#fb6515; --hx-brand-2:#ff8636; --hx-brand-ink:#bf440a;
    --hx-brand-soft:rgba(251,101,21,.10);
    --hx-grad:linear-gradient(135deg,#fb6515 0%,#ff8330 100%);
    /* ink / text */
    --hx-ink:#10151c; --hx-ink-2:#48535f; --hx-muted:#828d9b;
    /* lines */
    --hx-line:rgba(16,21,28,.08); --hx-line-2:rgba(16,21,28,.05);
    /* surfaces */
    --hx-bg:#f6f4ef; --hx-bg-2:#efeae1;
    --hx-surface:#ffffff; --hx-surface-2:#faf8f3;
    --hx-glass:rgba(255,255,255,.72);
    /* dark */
    --hx-ink-dark:#0c1016; --hx-ink-dark-2:#141a22;
    /* status */
    --hx-ok:#0fae78; --hx-ok-bg:#e8f8f1; --hx-ok-line:#bce9d7;
    --hx-star:#f6a823;
    /* radius */
    --hx-r1:12px; --hx-r2:18px; --hx-r3:24px; --hx-r4:30px; --hx-r5:40px;
    /* shadows (lágy, többrétegű) */
    --hx-sh1:0 1px 2px rgba(16,21,28,.04), 0 2px 8px rgba(16,21,28,.04);
    --hx-sh2:0 6px 16px rgba(16,21,28,.06), 0 18px 44px rgba(16,21,28,.08);
    --hx-sh3:0 30px 80px rgba(16,21,28,.18);
    --hx-glow:0 18px 40px rgba(255,106,26,.30);
    --hx-maxw:1200px;
}

body.hx {
    margin:0; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    color:var(--hx-ink); background:var(--hx-bg); line-height:1.6; overflow-x:hidden;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.hx img { display:block; max-width:100%; }
.hx a { color:inherit; text-decoration:none; }
.hx-display { font-family:'Sora',ui-sans-serif,system-ui,sans-serif; letter-spacing:-.025em; }
.hx-wrap { width:min(var(--hx-maxw), calc(100% - 44px)); margin:0 auto; }

/* eyebrow / badge */
.hx-eyebrow { display:inline-flex; align-items:center; gap:9px; background:var(--hx-glass);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--hx-line); border-radius:99px; padding:8px 16px; font-size:.8rem;
    font-weight:700; color:var(--hx-ink-2); box-shadow:var(--hx-sh1); }
.hx-eyebrow b { color:var(--hx-brand-ink); font-weight:800; }
.hx-eyebrow .hx-dot { width:7px; height:7px; border-radius:50%; background:var(--hx-brand);
    box-shadow:0 0 0 4px var(--hx-brand-soft); }

/* section heads */
.hx-kicker { display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--hx-brand-ink); margin:0 0 12px; padding:5px 12px; border-radius:99px;
    background:var(--hx-brand-soft); }
.hx-h2 { font-size:clamp(1.85rem,3.6vw,2.75rem); font-weight:800; line-height:1.08; color:var(--hx-ink); margin:0 0 14px; text-wrap:balance; }
.hx-intro { color:var(--hx-ink-2); font-size:1.05rem; max-width:62ch; margin:0; }

/* buttons */
.hx-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 24px;
    border-radius:14px; font-weight:700; font-size:.98rem; cursor:pointer; border:1px solid transparent;
    font-family:inherit; transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s, border-color .2s; }
.hx-btn-primary { color:#fff; background:var(--hx-grad); box-shadow:var(--hx-glow); }
.hx-btn-primary:hover { transform:translateY(-2px); box-shadow:0 22px 48px rgba(255,106,26,.40); }
.hx-btn-ghost { background:var(--hx-surface); color:var(--hx-ink); border-color:var(--hx-line); box-shadow:var(--hx-sh1); }
.hx-btn-ghost:hover { border-color:var(--hx-brand); color:var(--hx-brand-ink); transform:translateY(-2px); }
.hx-btn-light { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.hx-btn-light:hover { background:rgba(255,255,255,.24); }

/* ---------- HERO ---------- */
.hx-hero { position:relative; padding:56px 0 40px; overflow:hidden; }
.hx-hero::before { content:''; position:absolute; inset:-30% -10% auto -10%; height:760px; z-index:0;
    background:
        radial-gradient(38% 50% at 12% 8%, rgba(251,101,21,.18), transparent 64%),
        radial-gradient(42% 54% at 88% 0%, rgba(255,134,54,.16), transparent 70%),
        radial-gradient(50% 60% at 60% 100%, rgba(120,160,255,.09), transparent 72%);
    filter:blur(12px); pointer-events:none; }
.hx-hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(16,21,28,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,21,28,.025) 1px,transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
    -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%); }
.hx-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:44px; align-items:center; }
.hx-hero-copy > .hx-eyebrow { margin-bottom:20px; }

.hx-seg { display:inline-flex; padding:5px; background:var(--hx-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--hx-line); border-radius:99px; box-shadow:var(--hx-sh1); margin-bottom:20px; }
.hx-seg button { appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit;
    font-weight:700; font-size:.86rem; color:var(--hx-ink-2); padding:10px 20px; border-radius:99px; transition:.25s; white-space:nowrap; }
.hx-seg button.is-on { background:var(--hx-grad); color:#fff; box-shadow:0 8px 18px rgba(255,106,26,.30); }

.hx-h1 { font-size:clamp(2.3rem,4.8vw,3.7rem); font-weight:800; line-height:1.02; margin:0 0 16px; color:var(--hx-ink); text-wrap:balance; }
.hx-h1 .hx-accent { position:relative; background:var(--hx-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hx-lead { font-size:1.12rem; color:var(--hx-ink-2); margin:0 0 24px; max-width:54ch; }

/* big search */
.hx-search { background:var(--hx-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--hx-line); border-radius:var(--hx-r3);
    padding:11px; box-shadow:var(--hx-sh2); display:grid; grid-template-columns:1.2fr 1fr auto; gap:9px; align-items:stretch; }
.hx-search .hx-field { display:flex; align-items:center; gap:10px; padding:6px 15px; border-radius:var(--hx-r2); background:var(--hx-surface); border:1px solid var(--hx-line-2); min-width:0; transition:border-color .2s, box-shadow .2s; }
.hx-search .hx-field:focus-within { border-color:var(--hx-brand); box-shadow:0 0 0 4px var(--hx-brand-soft); }
.hx-search .hx-field i { color:var(--hx-brand-ink); flex:0 0 auto; }
.hx-search input { border:0; background:transparent; outline:0; font-family:inherit; font-size:.98rem; color:var(--hx-ink); width:100%; padding:10px 0; }
.hx-search select { border:0; background:transparent; outline:0; font-family:inherit; font-size:.98rem; font-weight:600;
    color:var(--hx-ink); width:100%; padding:10px 0; cursor:pointer;
    appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.hx-search select::-ms-expand { display:none; }
.hx-field-select { position:relative; padding-right:38px; }
.hx-field-select .hx-field-caret { position:absolute; right:15px; top:50%; transform:translateY(-50%);
    color:var(--hx-muted); font-size:.72rem; pointer-events:none; }
.hx-search .hx-btn { white-space:nowrap; }
.hx-search-mini { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:16px; }
.hx-search-mini a { font-size:.88rem; font-weight:600; color:var(--hx-ink-2); display:inline-flex; align-items:center; gap:7px; transition:.18s; }
.hx-search-mini a i { color:var(--hx-brand-ink); }
.hx-search-mini a:hover { color:var(--hx-brand-ink); transform:translateX(2px); }

/* counters */
.hx-counters { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hx-counter { background:var(--hx-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--hx-line); border-radius:var(--hx-r2); padding:14px 20px; box-shadow:var(--hx-sh1); }
.hx-counter b { display:block; font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:800; color:var(--hx-ink); line-height:1; }
.hx-counter span { font-size:.78rem; font-weight:600; color:var(--hx-muted); }

/* hero visual + floating cards */
.hx-hero-visual { position:relative; }
.hx-hero-photo { border-radius:var(--hx-r4); overflow:hidden; box-shadow:var(--hx-sh3); border:1px solid var(--hx-line); aspect-ratio:4/3.4; background:var(--hx-surface-2); }
.hx-hero-photo::after { content:''; position:absolute; inset:0; border-radius:var(--hx-r4);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); pointer-events:none; }
.hx-hero-photo img { width:100%; height:100%; object-fit:cover; }
.hx-float { position:absolute; background:var(--hx-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.5); border-radius:18px; box-shadow:var(--hx-sh2); padding:13px 16px; display:flex; align-items:center; gap:12px; }
.hx-float i { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
    background:var(--hx-grad); color:#fff; box-shadow:0 6px 14px rgba(255,106,26,.28); }
.hx-float b { display:block; font-size:.85rem; font-weight:800; color:var(--hx-ink); line-height:1.2; }
.hx-float span { font-size:.74rem; color:var(--hx-muted); font-weight:600; }
.hx-float-1 { top:20px; left:-22px; animation:hx-bob 6s ease-in-out infinite; }
.hx-float-2 { bottom:70px; right:-18px; animation:hx-bob 6s ease-in-out infinite .9s; }
.hx-float-3 { bottom:-16px; left:34px; animation:hx-bob 6s ease-in-out infinite 1.8s; }
.hx-float-3 .hx-stars { color:var(--hx-star); font-size:.78rem; }
@keyframes hx-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ---------- SECTION SHELL ---------- */
.hx-section { position:relative; padding:64px 0; }
.hx-section-head { margin-bottom:34px; max-width:780px; }

/* ---------- FEATURED PROS ---------- */
.hx-pros-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:18px; overflow-x:auto;
    padding:6px 2px 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.hx-pro { scroll-snap-align:start; background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r3);
    padding:20px; box-shadow:var(--hx-sh1); transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
    display:flex; flex-direction:column; gap:13px; }
.hx-pro:hover { transform:translateY(-5px); box-shadow:var(--hx-sh2); border-color:rgba(255,106,26,.28); }
.hx-pro-top { display:flex; align-items:center; gap:14px; }
.hx-pro-av { width:60px; height:60px; border-radius:18px; object-fit:cover; flex:0 0 auto; background:linear-gradient(140deg,#fff1e0,#ffe2c2);
    display:grid; place-items:center; color:var(--hx-brand-ink); font-weight:800; font-family:'Sora',sans-serif; font-size:1.25rem; overflow:hidden; }
.hx-pro-av img { width:100%; height:100%; object-fit:cover; }
.hx-pro-name { font-weight:800; color:var(--hx-ink); font-size:1rem; display:flex; align-items:center; gap:6px; }
.hx-pro-name .hx-verify { color:var(--hx-ok); font-size:.82rem; }
.hx-pro-prof { font-size:.85rem; color:var(--hx-ink-2); font-weight:600; }
.hx-pro-meta { display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--hx-muted); font-weight:600; margin-top:auto; }
.hx-pro-meta i { color:var(--hx-brand-ink); }
.hx-pro-meta .hx-star { color:var(--hx-star); }
.hx-pro-cta { font-size:.85rem; font-weight:800; color:var(--hx-brand-ink); display:inline-flex; align-items:center; gap:6px; transition:gap .2s; }
.hx-pro:hover .hx-pro-cta { gap:10px; }

/* ---------- PATHS ---------- */
.hx-paths { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.hx-paths-3 { grid-template-columns:repeat(3,1fr); }
.hx-path { position:relative; overflow:hidden; border-radius:var(--hx-r4); padding:34px; border:1px solid var(--hx-line);
    background:var(--hx-surface); box-shadow:var(--hx-sh1); display:flex; flex-direction:column; gap:16px;
    transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s; }
.hx-path::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--hx-grad); opacity:0; transition:opacity .28s; }
.hx-path:hover { transform:translateY(-4px); box-shadow:var(--hx-sh2); border-color:rgba(255,106,26,.22); }
.hx-path:hover::before { opacity:1; }
.hx-path-ic { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:1.4rem;
    background:var(--hx-brand-soft); color:var(--hx-brand-ink); }
.hx-path h3 { font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:800; margin:0; color:var(--hx-ink); }
.hx-path p { color:var(--hx-ink-2); margin:0; font-size:.97rem; }
.hx-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hx-list li { display:flex; align-items:center; gap:11px; font-size:.93rem; color:var(--hx-ink-2); font-weight:600; }
.hx-list li i { color:var(--hx-ok); background:var(--hx-ok-bg); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; flex:0 0 auto; }
.hx-path .hx-btn { margin-top:auto; align-self:flex-start; }

/* ---------- BENTO BENEFITS ---------- */
.hx-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hx-tile { position:relative; background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r3); padding:26px;
    box-shadow:var(--hx-sh1); transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s; overflow:hidden; }
.hx-tile:hover { transform:translateY(-4px); box-shadow:var(--hx-sh2); }
.hx-tile i { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:1.1rem; margin-bottom:16px;
    background:var(--hx-brand-soft); color:var(--hx-brand-ink); }
.hx-tile h3 { font-size:1.06rem; font-weight:800; margin:0 0 6px; color:var(--hx-ink); }
.hx-tile p { margin:0; color:var(--hx-ink-2); font-size:.93rem; }
.hx-tile-feature { grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255,134,54,.10), transparent 60%),
        linear-gradient(165deg,#fff,#fff7f0); }
.hx-tile-feature i { width:54px; height:54px; font-size:1.25rem; background:var(--hx-grad); color:#fff; box-shadow:0 8px 18px rgba(255,106,26,.26); }
.hx-tile-wide { grid-column:span 2; }
.hx-mini-mock { margin-top:auto; padding-top:20px; }

/* product mock (CSS-rajzolt) */
.hx-mock { background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r2); box-shadow:var(--hx-sh2); overflow:hidden; }
.hx-mock-bar { display:flex; align-items:center; gap:6px; padding:12px 15px; border-bottom:1px solid var(--hx-line); background:var(--hx-surface-2); }
.hx-mock-bar span { width:9px; height:9px; border-radius:50%; background:var(--hx-line); }
.hx-mock-bar b { margin-left:8px; font-size:.74rem; font-weight:800; color:var(--hx-muted); }
.hx-mock-body { padding:16px; display:grid; gap:11px; }
.hx-mock-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hx-mock-row .k { height:9px; border-radius:5px; background:var(--hx-line-2); width:42%; }
.hx-mock-row .v { height:9px; border-radius:5px; background:rgba(255,106,26,.3); width:24%; }
.hx-mock-total { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:12px; border-top:1px dashed var(--hx-line); }
.hx-mock-total .lbl { font-size:.8rem; font-weight:800; color:var(--hx-muted); }
.hx-mock-total .amt { font-family:'Sora',sans-serif; font-size:1.2rem; font-weight:800; color:var(--hx-brand-ink); white-space:nowrap; }

/* olvasható dokumentum-mock */
.hx-doc { padding:16px 18px; display:grid; gap:8px; }
.hx-doc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.hx-doc-title { font-weight:800; font-size:.88rem; color:var(--hx-ink); line-height:1.3; min-width:0; }
.hx-doc-date { font-size:.74rem; color:var(--hx-muted); font-weight:700; white-space:nowrap; flex:0 0 auto; }
.hx-doc-pill { font-size:.68rem; font-weight:800; padding:3px 10px; border-radius:99px; white-space:nowrap; flex:0 0 auto; }
.hx-doc-pill.prog { background:var(--hx-ok-bg); color:var(--hx-ok); border:1px solid var(--hx-ok-line); }
.hx-doc-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:.82rem;
    padding:5px 0; border-bottom:1px dashed var(--hx-line-2); }
.hx-doc-row:last-of-type { border-bottom:0; }
.hx-doc-row .d { color:var(--hx-ink-2); font-weight:600; min-width:0; }
.hx-doc-row .p { color:var(--hx-ink); font-weight:800; white-space:nowrap; }
.hx-doc-meta { font-size:.8rem; color:var(--hx-muted); }
.hx-doc-meta b { color:var(--hx-ink); font-weight:700; }
.hx-doc-task { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--hx-ink-2); font-weight:600; padding:2px 0; }
.hx-doc-task i { font-size:.86rem; width:16px; text-align:center; }
.hx-doc-task i.done { color:var(--hx-ok); }
.hx-doc-task i.todo { color:var(--hx-line); }
.hx-doc-task.is-done { color:var(--hx-ink); }

/* ---------- SHOWCASE ---------- */
.hx-showcase { display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; }
.hx-showcase-stage { position:relative; display:grid; gap:16px; }
.hx-showcase-stage .hx-mock { transform:rotate(-1.4deg); transition:transform .3s; }
.hx-showcase-stage .hx-mock:nth-child(2) { transform:rotate(1.6deg) translateX(18px); }
.hx-showcase-stage .hx-mock:hover { transform:rotate(0) scale(1.015); z-index:2; }
/* 3 kártyás változat: fejléc felül, kártyák teljes szélességben, rendezetten */
.hx-showcase:has(.hx-showcase-3) { grid-template-columns:1fr; gap:34px; align-items:stretch; }
.hx-showcase:has(.hx-showcase-3) .hx-section-head { max-width:780px; }
.hx-showcase-3 { grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.hx-showcase-3 .hx-mock { transform:none; }
.hx-showcase-3 .hx-mock:nth-child(2),
.hx-showcase-3 .hx-mock:nth-child(3) { transform:none; }
.hx-showcase-3 .hx-mock:hover { transform:translateY(-6px); box-shadow:var(--hx-sh3); z-index:2; }

/* ---------- HOW (dark) ---------- */
.hx-how { position:relative; overflow:hidden; background:
        radial-gradient(56% 80% at 88% 0%, rgba(251,101,21,.20), transparent 60%),
        radial-gradient(50% 70% at 6% 100%, rgba(120,160,255,.12), transparent 64%),
        var(--hx-ink-dark);
    color:#eef2f7; border-radius:var(--hx-r5); padding:54px clamp(22px,4vw,58px); }
.hx-how::before { content:''; position:absolute; inset:0; pointer-events:none;
    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:56px 56px; mask-image:radial-gradient(70% 60% at 80% 0%,#000,transparent 70%);
    -webkit-mask-image:radial-gradient(70% 60% at 80% 0%,#000,transparent 70%); }
.hx-how > * { position:relative; z-index:1; }
.hx-how .hx-kicker { color:var(--hx-brand-2); background:rgba(255,134,54,.14); }
.hx-how .hx-h2 { color:#fff; }
.hx-how .hx-intro { color:rgba(238,242,247,.74); }
.hx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
.hx-step { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--hx-r3); padding:26px;
    transition:transform .26s, background .26s; }
.hx-step:hover { transform:translateY(-4px); background:rgba(255,255,255,.08); }
.hx-step-n { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-family:'Sora',sans-serif;
    font-weight:800; font-size:1.1rem; background:var(--hx-grad); color:#fff; margin-bottom:16px; box-shadow:0 8px 18px rgba(255,106,26,.3); }
.hx-step h3 { margin:0 0 6px; font-size:1.08rem; font-weight:800; color:#fff; }
.hx-step p { margin:0; color:rgba(238,242,247,.72); font-size:.93rem; }

/* ---------- PROFESSIONS ---------- */
.hx-profs { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.hx-prof { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:24px 14px;
    background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r2); box-shadow:var(--hx-sh1);
    transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; font-weight:700; font-size:.9rem; color:var(--hx-ink); }
.hx-prof i { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; font-size:1.25rem;
    background:var(--hx-brand-soft); color:var(--hx-brand-ink); transition:.22s; }
.hx-prof:hover { transform:translateY(-4px); box-shadow:var(--hx-sh2); border-color:rgba(255,106,26,.4); }
.hx-prof:hover i { background:var(--hx-grad); color:#fff; transform:scale(1.06); }

/* ---------- TESTIMONIALS ---------- */
.hx-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hx-quote { position:relative; background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r3); padding:26px; box-shadow:var(--hx-sh1); display:flex; flex-direction:column; gap:14px; transition:transform .26s, box-shadow .26s; }
.hx-quote:hover { transform:translateY(-4px); box-shadow:var(--hx-sh2); }
.hx-quote-stars { color:var(--hx-star); font-size:.92rem; letter-spacing:1px; }
.hx-quote-text { color:var(--hx-ink); font-size:.97rem; line-height:1.65; margin:0; }
.hx-quote-foot { display:flex; align-items:center; gap:12px; margin-top:auto; }
.hx-quote-av { width:44px; height:44px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
    background:linear-gradient(140deg,#fff1e0,#ffe2c2); color:var(--hx-brand-ink); font-weight:800; font-family:'Sora',sans-serif; }
.hx-quote-who b { display:block; font-size:.88rem; font-weight:800; color:var(--hx-ink); }
.hx-quote-who span { font-size:.78rem; color:var(--hx-muted); font-weight:600; }

/* ---------- CTA BAND ---------- */
.hx-cta { position:relative; overflow:hidden; border-radius:var(--hx-r5); padding:54px clamp(22px,4vw,58px);
    background:
        radial-gradient(70% 130% at 0% 0%, rgba(255,138,48,.92), transparent 55%),
        var(--hx-grad);
    color:#fff; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.hx-cta::after { content:''; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
    background-size:48px 48px; mask-image:radial-gradient(70% 80% at 100% 0%,#000,transparent 70%);
    -webkit-mask-image:radial-gradient(70% 80% at 100% 0%,#000,transparent 70%); }
.hx-cta > * { position:relative; z-index:1; }
.hx-cta h2 { font-family:'Sora',sans-serif; font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; margin:0 0 8px; }
.hx-cta p { margin:0; color:rgba(255,255,255,.9); max-width:46ch; }
.hx-cta-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hx-cta .hx-btn-primary { background:#fff; color:var(--hx-brand-ink); box-shadow:0 14px 30px rgba(0,0,0,.2); }
.hx-cta .hx-btn-primary:hover { background:#fff; transform:translateY(-2px); }

/* ---------- FAQ ---------- */
.hx-faq { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.hx-faq details { background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r2); padding:4px 6px; box-shadow:var(--hx-sh1); transition:box-shadow .2s; }
.hx-faq details[open] { box-shadow:var(--hx-sh2); }
.hx-faq summary { list-style:none; cursor:pointer; padding:17px 18px; font-weight:800; color:var(--hx-ink); font-size:.97rem;
    display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hx-faq summary::-webkit-details-marker { display:none; }
.hx-faq summary::after { content:'\2b'; color:var(--hx-brand-ink); font-weight:800; font-size:1.1rem; transition:transform .25s; flex:0 0 auto; }
.hx-faq details[open] summary::after { transform:rotate(135deg); }
.hx-faq p { margin:0; padding:0 18px 18px; color:var(--hx-ink-2); font-size:.93rem; line-height:1.65; }

/* ---------- FOOTER ---------- */
.hx-foot { position:relative; background:var(--hx-ink-dark); color:rgba(238,242,247,.7); padding:56px 0 30px; margin-top:24px; }
.hx-foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.hx-foot-brand .hx-foot-logo { font-family:'Sora',sans-serif; font-weight:800; font-size:1.25rem; color:#fff; display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; }
.hx-foot-brand .hx-foot-logo span span { color:var(--hx-brand-2); }
.hx-foot-brand p { margin:0; font-size:.89rem; line-height:1.6; max-width:38ch; }
.hx-foot-col h3 { font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.hx-foot-col a { display:block; font-size:.9rem; padding:6px 0; color:rgba(238,242,247,.66); transition:.16s; }
.hx-foot-col a:hover { color:#fff; transform:translateX(3px); }
.hx-foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:34px; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:rgba(238,242,247,.5); }

/* ---------- AUDIENCE (nézet) VÁLTÁS ---------- */
/* alap = ügyfél nézet: a pro-only blokkok rejtve */
.hx [data-aud="pro"] { display:none; }
.hx.hx-aud-pro [data-aud="pro"] { display:block; }
.hx.hx-aud-pro [data-aud="client"] { display:none; }

/* ---------- ÖSSZEHASONLÍTÁS + MIÉRT KÁRTYÁK ---------- */
.hx-compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hx-compare-col { border-radius:var(--hx-r3); padding:26px 28px; border:1px solid var(--hx-line); box-shadow:var(--hx-sh1); }
.hx-compare-col.is-them { background:var(--hx-surface-2); }
.hx-compare-col.is-us { background:
        radial-gradient(120% 80% at 100% 0%, rgba(255,134,54,.10), transparent 60%),
        linear-gradient(165deg,#fff,#fff7f0); border-color:rgba(251,101,21,.28); }
.hx-compare-col h3 { display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-size:1.1rem; font-weight:800; margin:0 0 18px; color:var(--hx-ink); }
.hx-compare-col.is-them h3 i { color:var(--hx-muted); }
.hx-compare-col.is-us h3 i { color:var(--hx-ok); }
.hx-compare-list { list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.hx-compare-list li { display:flex; gap:11px; font-size:.93rem; line-height:1.5; color:var(--hx-ink-2); font-weight:500; }
.hx-compare-list li i { margin-top:3px; flex:0 0 auto; font-size:.82rem; width:18px; text-align:center; }
.hx-compare-list.is-them li { color:var(--hx-muted); }
.hx-compare-list.is-them li i { color:#c2502f; }
.hx-compare-list.is-us li i { color:var(--hx-ok); }
.hx-why-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.hx-why { background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:var(--hx-r3); padding:24px; box-shadow:var(--hx-sh1); transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s; }
.hx-why:hover { transform:translateY(-4px); box-shadow:var(--hx-sh2); }
.hx-why i { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:1.1rem; margin-bottom:14px; background:var(--hx-brand-soft); color:var(--hx-brand-ink); }
.hx-why h3 { font-size:1.04rem; font-weight:800; margin:0 0 6px; color:var(--hx-ink); }
.hx-why p { margin:0; color:var(--hx-ink-2); font-size:.92rem; }

/* ---------- REVEAL ---------- */
.hx-reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.hx-reveal.hx-in { opacity:1; transform:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px) {
    .hx-hero-grid { grid-template-columns:1fr; gap:30px; }
    .hx-hero-visual { order:-1; max-width:540px; }
    .hx-bento { grid-template-columns:repeat(2,1fr); }
    .hx-tile-feature, .hx-tile-wide { grid-column:span 2; grid-row:auto; }
    .hx-showcase { grid-template-columns:1fr; }
    .hx-steps { grid-template-columns:1fr; }
    .hx-profs { grid-template-columns:repeat(3,1fr); }
    .hx-quotes { grid-template-columns:1fr; }
    .hx-paths, .hx-paths-3 { grid-template-columns:1fr; }
    .hx-showcase-3 { grid-template-columns:1fr; }
    .hx-showcase-3 .hx-mock:nth-child(2) { transform:none; }
    .hx-compare { grid-template-columns:1fr; }
    .hx-why-cards { grid-template-columns:1fr; }
    .hx-foot-grid { grid-template-columns:1fr 1fr; }
    .hx-foot-brand { grid-column:1/-1; }
}
@media (max-width:640px) {
    .hx-wrap { width:calc(100% - 30px); }
    .hx-search { grid-template-columns:1fr; }
    .hx-section { padding:46px 0; }
    .hx-profs { grid-template-columns:repeat(2,1fr); }
    .hx-faq { grid-template-columns:1fr; }
    .hx-foot-grid { grid-template-columns:1fr; }
    .hx-float-1 { left:0; top:10px; }
    .hx-float-2 { right:0; }
    .hx-cta { flex-direction:column; align-items:flex-start; }
    .hx-counters { gap:12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-reveal { opacity:1 !important; transform:none !important; transition:none; }
    .hx-float-1, .hx-float-2, .hx-float-3 { animation:none; }
    .hx-tile:hover, .hx-pro:hover, .hx-prof:hover, .hx-path:hover, .hx-quote:hover, .hx-step:hover, .hx-btn-primary:hover, .hx-btn-ghost:hover { transform:none; }
}