/* Keretezett hero (v3, 2026-10-19) – template-parts/hero-v3.php. Csak a főoldalon töltődik be (conto_hero_v3()).
   Arculat: kobalt #2557E6, kiemelő sárga #FFEF89 csak aláhúzásként/háttérként kobalt szöveggel; zöld nincs.
   A kiemelés mindenhol ALÁHÚZÁS (sárga sáv a szöveg alatt) – a szöveg színe nem változik, minden betű olvasható. */
.hv3, .hv3-statement, .hv3-mask-band{
  --hv-cb:#2557E6; --hv-cbd:#1B43BD; --hv-cbdd:#122E86; --hv-cbl:#DDE6FF; --hv-hl:#FFEF89;
  --hv-ink:#0E1630; --hv-mut:#5B6478; --hv-frame:16px; --hv-r:30px; --hv-bg:#F3F5FB; --hv-notch:22px;
  --hv-serif:'Plus Jakarta Sans', system-ui, sans-serif; --hv-sans:'Inter', system-ui, sans-serif;
}

/* ── A fejléc ezen az oldalon csak a hero után jelenik meg (hero-v3.js: body.hv3-past) ── */
/* rejtve a billentyűzet se léphessen rá (visibility), a megjelenés animált */
body.hero-v3 .lp-header{ position:fixed; left:0; right:0; top:-120px; visibility:hidden; transition:top .25s ease, visibility 0s linear .25s; }
body.hero-v3.hv3-past .lp-header{ top:0; visibility:visible; transition:top .25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce){ body.hero-v3 .lp-header{ transition:none; } }

/* ── Keret ── */
.hv3{ padding:var(--hv-frame); }
.hv3-frame{
  position:relative; overflow:hidden; overflow:clip; isolation:isolate; border-radius:var(--hv-r); color:#fff;   /* clip: a fókusz se görgesse el a keretet */
  min-height:min(920px, calc(100vh - 2 * var(--hv-frame)));
  display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0, 1fr);
  /* papír-dombormű; balra enyhe kobalt sötétítés a fehér szöveg alá; alatta CSS-tartalék, ha a kép nem töltődne be */
  background:
    linear-gradient(90deg, rgba(18,46,134,.25) 0%, rgba(18,46,134,.12) 45%, rgba(18,46,134,0) 75%),
    linear-gradient(180deg, rgba(18,46,134,0) 55%, rgba(18,46,134,.30) 100%),
    url('../img/hero-papir.webp') center / cover no-repeat,
    linear-gradient(150deg, #2E62F0 0%, var(--hv-cb) 38%, var(--hv-cbd) 72%, var(--hv-cbdd) 100%);
}

/* ── Navigáció a heróban ── */
.hv3-nav{ position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:0 26px; }
.hv3-pills{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.hv3-pill{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; font:500 14px var(--hv-sans); color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.04); backdrop-filter:blur(6px); transition:background .2s, border-color .2s; }
.hv3-pill:hover, .hv3-pill:focus-visible{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); color:#fff; outline:none; }
.hv3-brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; font:800 19px var(--hv-serif); letter-spacing:-.02em; color:#fff; text-decoration:none; }
.hv3-mark{ width:34px; height:34px; border-radius:9px; background:var(--hv-cb); box-shadow:0 0 0 1.5px rgba(255,255,255,.55) inset;
  display:grid; place-items:center; color:var(--hv-hl); font:800 20px var(--hv-serif); }
/* „kivágás”: a logó a keret felső élébe vágott fülön ül, az oldal hátterének színében; a fül két oldalán
   homorú (befelé ívelő) lekerekítés köti össze a keret élével – ::before/::after negyedkör-maszkkal */
.hv3-brand{ position:relative; align-self:start; padding:18px 30px; color:var(--hv-ink); background:var(--hv-bg);
  border-radius:0 0 var(--hv-notch) var(--hv-notch); }
.hv3-brand::before, .hv3-brand::after{ content:''; position:absolute; top:0; width:var(--hv-notch); height:var(--hv-notch); pointer-events:none; }
.hv3-brand::before{ right:100%; background:radial-gradient(circle at 0 100%, transparent calc(var(--hv-notch) - .5px), var(--hv-bg) var(--hv-notch)); }
.hv3-brand::after{ left:100%; background:radial-gradient(circle at 100% 100%, transparent calc(var(--hv-notch) - .5px), var(--hv-bg) var(--hv-notch)); }
.hv3-brand:hover, .hv3-brand:focus-visible{ color:var(--hv-cb); }
.hv3-brand:focus-visible{ outline:2px solid var(--hv-cb); outline-offset:-6px; }
.hv3-brand .hv3-mark{ box-shadow:none; }
.hv3-nav-right{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }
/* a jobb felső sarok a kép legvilágosabb része – a körvonalas gomb itt kobalt alapot kap */
.hv3-login{ background:rgba(18,46,134,.55); border-color:rgba(255,255,255,.5); }
.hv3-login:hover, .hv3-login:focus-visible{ background:rgba(18,46,134,.75); }
.hv3-cta{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 6px 0 18px; border-radius:999px; text-decoration:none; white-space:nowrap;
  background:var(--hv-hl); color:var(--hv-cbdd); font:700 14.5px var(--hv-sans); box-shadow:0 8px 24px rgba(10,20,60,.25); transition:transform .2s; }
.hv3-cta:hover, .hv3-cta:focus-visible{ transform:translateY(-1px); color:var(--hv-cbdd); outline:2px solid #fff; outline-offset:2px; }
.hv3-arr{ width:32px; height:32px; border-radius:50%; background:var(--hv-cbdd); color:var(--hv-hl); display:grid; place-items:center; }
.hv3-lbl-short{ display:none; }
.hv3-menu-btn{ display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(18,46,134,.35); color:#fff; font-size:18px; cursor:pointer; }
.hv3-menu{ position:absolute; right:14px; top:64px; z-index:10; min-width:220px; display:grid; padding:8px; border-radius:18px; background:#fff; box-shadow:0 18px 40px rgba(8,18,60,.3); }
.hv3-menu[hidden]{ display:none; }
@media (min-width: 961px){ .hv3-menu{ display:none !important; } }   /* asztalon a pirula-menü látszik, a lenyíló sosem */
.hv3-menu a{ padding:12px 14px; border-radius:10px; color:var(--hv-ink); font:600 15px var(--hv-sans); text-decoration:none; }
.hv3-menu a:hover, .hv3-menu a:focus-visible{ background:var(--hv-cbl); outline:none; }

/* ── Tartalom ── */
.hv3-body{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(24px, 3vw, 56px); align-items:end;
  padding:clamp(28px, 4vw, 56px) clamp(26px, 4vw, 64px) clamp(28px, 6vw, 92px); }   /* alul hely a lebegő Segítség-gombnak */
.hv3-copy{ min-width:0; }
.hv3-eyebrow{ display:inline-flex; align-items:center; gap:8px; font:600 12.5px var(--hv-sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:18px; }
.hv3-eyebrow::before{ content:''; width:22px; height:2px; background:var(--hv-hl); border-radius:2px; }
.hv3 .hv3-title{ font-family:var(--hv-serif); font-weight:800; font-size:clamp(40px, 4.9vw, 82px); line-height:1.02; letter-spacing:-.045em; max-width:15ch; color:#fff; margin:0; }
/* aláhúzás: sárga sáv a betűk alatt, a szöveg fehér marad */
.hv3 .hv3-title em{ font-style:normal; color:#fff; padding:0 .04em;
  background:linear-gradient(transparent 86%, var(--hv-hl) 86%, var(--hv-hl) 96%, transparent 96%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hv3-sub{ margin:22px 0 0; max-width:46ch; font:400 clamp(15.5px, 1.15vw, 18px)/1.55 var(--hv-sans); color:rgba(255,255,255,.88); }
.hv3-sub strong{ color:#fff; }
.hv3-cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hv3-ghost{ display:inline-flex; align-items:center; height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.45); color:#fff; font:600 14.5px var(--hv-sans); text-decoration:none; }
.hv3-ghost:hover, .hv3-ghost:focus-visible{ background:rgba(255,255,255,.12); color:#fff; outline:none; }
.hv3-trust{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:22px 0 0; padding:0; list-style:none; font:400 13px var(--hv-sans); color:rgba(255,255,255,.8); }
.hv3-trust li::before{ content:'✓'; color:var(--hv-hl); margin-right:6px; font-weight:700; }

/* ── Termék: böngésző + telefon + lebegő kártyák ── */
.hv3-stage{ position:relative; align-self:stretch; min-height:520px; }
.hv3-browser{ position:absolute; right:-90px; bottom:-70px; width:min(700px, 112%); height:470px; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px rgba(8,18,60,.45), 0 0 0 1px rgba(255,255,255,.25); transform:perspective(1600px) rotateY(-9deg) rotateX(4deg); transform-origin:left bottom; }
.hv3-browser img{ display:block; width:100%; height:calc(100% - 30px); object-fit:cover; object-position:top left; }
.hv3-bar{ height:30px; background:#EEF1F8; display:flex; gap:6px; align-items:center; padding:0 12px; }
.hv3-bar i{ width:9px; height:9px; border-radius:50%; background:#C9D0DE; }
.hv3-phone{ position:absolute; right:clamp(8px, 3vw, 46px); bottom:-40px; width:128px; border-radius:26px; overflow:hidden; border:6px solid #0E1630; box-shadow:0 30px 60px rgba(8,18,60,.5); }
.hv3-phone img{ display:block; width:100%; height:auto; }
.hv3-floats{ display:contents; }
.hv3-float{ position:absolute; background:rgba(255,255,255,.96); color:var(--hv-ink); border-radius:16px; padding:14px 16px; box-shadow:0 18px 40px rgba(8,18,60,.28); font:400 13px/1.4 var(--hv-sans); animation:hv3-bob 6s ease-in-out infinite; }
.hv3-ft{ margin:0 0 8px; font:800 13px var(--hv-serif); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; color:var(--hv-ink); }
.hv3-tag{ font:700 11px var(--hv-sans); background:var(--hv-cbl); color:var(--hv-cbd); padding:2px 8px; border-radius:999px; }
.hv3-float ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.hv3-float li{ display:flex; justify-content:space-between; gap:14px; color:var(--hv-mut); }
.hv3-float li b{ color:var(--hv-ink); font-weight:600; }
.hv3-mut{ color:var(--hv-mut); }
.hv3-f1{ left:-8px; top:40px; width:250px; }
.hv3-f2{ left:-36px; bottom:46px; width:236px; animation-delay:-2s; }
.hv3-f3{ right:6%; top:0; width:230px; animation-delay:-4s; display:flex; gap:10px; align-items:flex-start; }
.hv3-f3 .hv3-ft{ margin-bottom:2px; }
.hv3-ico{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--hv-hl); color:var(--hv-cbdd); display:grid; place-items:center; font-weight:800; }
.hv3-prog{ height:8px; border-radius:99px; background:#E7EBF5; overflow:hidden; margin:8px 0 6px; }
.hv3-prog span{ display:block; height:100%; width:98%; background:var(--hv-cb); border-radius:99px; }
@keyframes hv3-bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ── Mondat aláhúzott kulcsszavakkal ── */
.hv3-statement{ max-width:1180px; margin:clamp(72px, 9vw, 140px) auto; padding:0 24px; text-align:center; }
.hv3-statement p{ margin:0; font:700 clamp(26px, 3.4vw, 50px)/1.28 var(--hv-serif); letter-spacing:-.03em; color:var(--hv-ink); }
.hv3-statement em{ font-style:normal; color:var(--hv-cb);
  background:linear-gradient(transparent 80%, var(--hv-hl) 80%, var(--hv-hl) 94%, transparent 94%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ── A „Conto” felirat a papírhullám-képpel kitöltve ── */
.hv3-mask-band{ padding:0 var(--hv-frame) clamp(32px, 4vw, 64px); }
.hv3-mask-word{
  font:800 clamp(64px, 16.2vw, 320px)/.8 var(--hv-serif); letter-spacing:-.06em; text-align:center; padding:.06em 0 .1em; white-space:nowrap;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:
    linear-gradient(90deg, rgba(18,46,134,0) 50%, rgba(18,46,134,.38) 100%),
    url('../img/felirat-papir.webp'),
    linear-gradient(120deg, var(--hv-cbdd), var(--hv-cb) 45%, #4C7BFF 70%, var(--hv-cbd));
  background-size:100% 100%, 115% auto, 100% 100%; background-position:0 0, 0% 40%, 0 0;
  animation:hv3-pan 24s ease-in-out infinite alternate;
}
@keyframes hv3-pan{ from{ background-size:100% 100%, 115% auto, 100% 100%; background-position:0 0, 0% 40%, 0 0; } to{ background-size:100% 100%, 130% auto, 100% 100%; background-position:0 0, 100% 60%, 0 0; } }
@media (prefers-reduced-motion: reduce){ .hv3-float, .hv3-mask-word{ animation:none; } }
/* telefonon a „Conto CRM” két sorba kerül, hogy a betűk elég nagyok maradjanak a képhez */
@media (max-width: 640px){ .hv3-mask-word{ font-size:31vw; line-height:.84; white-space:normal; } .hv3-mask-word > span{ display:block; } }

/* ── „Káoszból rend” (hero-v3.js): a felirat betűi szétszórt papírlapokon érkeznek, a helyükre repülnek, a lapok eltűnnek ──
   JS nélkül / csökkentett mozgásnál a fenti, egyben maszkolt felirat marad. JS-módban minden betű saját, de a feliratra
   folytonos papírmintát kap (--ox/--oy: a betű helye, --ww/--tw: felirat- és mintaszélesség, --pan: a minta lassú úszása). */
@property --pan{ syntax:'<length>'; inherits:true; initial-value:0px; }
.hv3-mask-word.hv3-mw-js{ position:relative; background:none; animation:hv3-pan2 24s ease-in-out infinite alternate; }
@keyframes hv3-pan2{ to{ --pan:calc(-1 * var(--panmax, 0px)); } }
.hv3-L{ display:inline-block; position:relative; z-index:1; padding:.1em .04em .14em; margin:-.1em -.04em -.14em;
  color:transparent; -webkit-background-clip:text; background-clip:text; background-repeat:no-repeat;
  background-image:
    linear-gradient(90deg, rgba(18,46,134,0) 50%, rgba(18,46,134,.38) 100%),
    url('../img/felirat-papir.webp'),
    linear-gradient(120deg, var(--hv-cbdd), var(--hv-cb) 45%, #4C7BFF 70%, var(--hv-cbd));
  background-size:var(--ww) 100%, var(--tw) auto, var(--ww) 100%;
  background-position:calc(-1 * var(--ox)) 0, calc(var(--pan) - var(--ox)) calc(-1 * var(--oy)), calc(-1 * var(--ox)) 0; }
.hv3-card{ position:absolute; z-index:0; border-radius:.07em; background:#fff; border:1px solid rgba(14,22,48,.06);
  box-shadow:0 .01em .02em rgba(14,22,48,.05), 0 .07em .16em rgba(14,22,48,.14); pointer-events:none; }
/* 1. várakozás: szétszórva, láthatatlanul */
.hv3-mw-js.is-wait :is(.hv3-L, .hv3-card){ opacity:0; transform:translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(calc(var(--ss) * .6)); }
/* 2. a lapok szétszórva előbukkannak */
.hv3-mw-js.is-in :is(.hv3-L, .hv3-card){ transform:translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(var(--ss));
  transition:transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--d1), opacity .25s ease var(--d1); }
/* 3. rendbe állnak */
.hv3-mw-js.is-order :is(.hv3-L, .hv3-card){ transform:none; transition:transform .95s cubic-bezier(.65, 0, .35, 1) var(--d2); }
/* 4. a lapok eltűnnek, csak a felirat marad */
.hv3-mw-js.is-done .hv3-card{ opacity:0; transform:scale(.85); transition:opacity .4s ease var(--d3), transform .4s ease var(--d3); }
.hv3-mw-js.is-done .hv3-L{ transform:none; }

/* ── Mobil ── */
@media (max-width: 960px){
  .hv3, .hv3-mask-band{ --hv-frame:10px; --hv-r:22px; }
  .hv3-nav{ grid-template-columns:auto 1fr; gap:8px; padding:0 10px 0 0; }
  /* mobilon a fül a bal felső sarokba kerül: homorú ív jobbra a felső élen és lefelé a bal élen */
  .hv3-frame{ border-top-left-radius:0; }   /* a sarkot a fül takarja – a lekerekítés íve ne derengjen át alatta */
  .hv3-brand{ gap:8px; padding:14px 14px 14px 12px; border-radius:0 0 var(--hv-notch) 0; --hv-notch:18px; }
  .hv3-brand::before{ right:auto; left:0; top:100%; background:radial-gradient(circle at 100% 100%, transparent calc(var(--hv-notch) - .5px), var(--hv-bg) var(--hv-notch)); }
  .hv3-pills, .hv3-login{ display:none; }
  .hv3-brand{ order:-1; font-size:17px; }
  .hv3-mark{ width:30px; height:30px; font-size:17px; }
  .hv3-nav-right{ gap:6px; }
  .hv3-nav-right .hv3-cta{ height:40px; padding-left:14px; font-size:14px; }
  .hv3-nav-right .hv3-arr{ width:28px; height:28px; }
  .hv3-nav-right .hv3-lbl-long{ display:none; } .hv3-nav-right .hv3-lbl-short{ display:inline; }
  .hv3-menu-btn{ display:grid; place-items:center; width:40px; height:40px; }
  .hv3-body{ grid-template-columns:1fr; padding:30px 20px 0; }
  .hv3 .hv3-title{ font-size:clamp(32px, 9.4vw, 44px); max-width:none; }
  .hv3-stage{ min-height:360px; margin:8px -20px 0; }
  .hv3-browser{ position:relative; right:auto; bottom:auto; width:112%; height:300px; margin:118px 0 -30px 2%; transform:perspective(1200px) rotateY(-6deg) rotateX(3deg); }
  .hv3-phone{ width:108px; right:14px; bottom:-10px; border-width:5px; }
  /* a két kártya – mint asztalon – lebegve, egymásra csúsztatva ül a képernyőkép fölött (nincs vízszintes görgetősáv, nincs levágott kártya) */
  .hv3-floats{ display:contents; }
  .hv3-float{ padding:11px 13px; border-radius:14px; font-size:12px; box-shadow:0 14px 30px rgba(8,18,60,.3); }
  .hv3-float .hv3-ft{ font-size:12.5px; }
  .hv3-float ul{ gap:4px; }
  .hv3-f1{ left:14px; top:62px; width:200px; rotate:-2deg; z-index:2; }
  .hv3-f2{ display:none; }
  .hv3-f3{ right:14px; left:auto; top:0; width:auto; max-width:210px; rotate:2deg; z-index:3; }
  .hv3-f3 .hv3-ico{ width:26px; height:26px; }
}

/* ── Keskeny telefon (≤ 400 px, pl. 360 px): a fül, a próba-gomb és a ☰ egy sorban elférjen ── */
@media (max-width: 400px){
  .hv3-nav{ padding-right:8px; }
  .hv3-brand{ font-size:15px; gap:7px; padding:13px 10px 13px 10px; }
  .hv3-mark{ width:26px; height:26px; font-size:15px; border-radius:8px; }
  .hv3-nav-right .hv3-cta{ padding-left:12px; gap:8px; font-size:13.5px; }
  .hv3-menu-btn{ width:38px; height:38px; }
  .hv3-cta-lg{ white-space:normal; line-height:1.25; height:auto; min-height:44px; padding-top:6px; padding-bottom:6px; }   /* a hosszú felirat törjön, ne lógjon ki a keretből */
}