/*
 | A vigkaroly /v2 ("Ejszakai muszak") design stiluslapja,
 | a bet repo v2/layout.blade.php <style> blokkjaibol.
 */

/* =========================================================
       ÉJSZAKAI MŰSZAK — sötét, mélyzöld, középre szervezett
       (a /uj/2 dizájn, közös layouttá emelve az összes v2 oldalra)
       ========================================================= */

    /* ---------------- téma-tokenek ----------------------------------------
       Az ALAP a sötét („Éjszakai műszak”); a világos változat lentebb, a
       :root[data-theme="light"] blokkban ugyanezeket írja felül. A data-theme-et
       a <head>-ben lévő script állítja be, még a festés előtt: mentett választás,
       ha nincs, akkor a rendszerbeállítás (prefers-color-scheme).

       Amit itt nem szín-konstansként, hanem RGB-hármasként tartunk (--fill-rgb,
       --scrim-rgb), azt azért, mert a lapon sokféle áttetszőséggel szerepel — így
       témát váltani egy sor átírása, nem húsz. */
    :root{
        color-scheme:dark;

        --void:#050A08; --panel:#0B1310; --panel-2:#0F241C;
        --edge:rgba(var(--fill-rgb),.10); --edge-2:rgba(var(--fill-rgb),.18);
        --text:#E9F1EB; --muted:#8CA096;
        --green:#5BD467; --lime:#DDDE26;
        --accent:#5BD467;                         /* zöld ott, ahol SZÖVEG vagy ikon */
        --brand-hu:#5DD466;                       /* a logó „.hu” része */
        --grad:linear-gradient(115deg,#5BD467,#9AD94A 48%,#DDDE26);
        --grad-ink:var(--grad);                   /* ugyanez, ha szövegre vágjuk */
        /* A gradiensen ülő szöveg (#08120D) mindkét témában ugyanaz marad —
           a gradiens sem változik —, ezért az maradt konstansnak a szabályokban. */

        --fill-rgb:233,241,235;                   /* felületi „fátyol” a háttéren */
        --scrim-rgb:5,10,8;                       /* elmosott takarás: fejléc, címkék */
        --modal-back:rgba(var(--scrim-rgb),.72);
        --on-scrim:#C7D4CC; --on-scrim-mut:#9BAFA4;
        --placeholder:#6E8078;
        --err:#FF9E9E;

        --sh-lift:0 24px 50px rgba(0,0,0,.45);
        --sh-deep:0 40px 90px rgba(0,0,0,.6);
        --sh-knob:0 6px 20px rgba(0,0,0,.5);
        --glow-hero:rgba(91,212,103,.17);
        --glow-btn:0 0 30px rgba(91,212,103,.28);
        --glow-btn-h:0 0 46px rgba(91,212,103,.44);

        --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        --sans:"Stack Sans Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

        --chat-bg:#0B1310; --chat-fg:#E9F1EB; --chat-line:rgba(var(--fill-rgb),.12);
        --chat-bot:rgba(var(--fill-rgb),.06); --chat-user:#5BD467; --chat-userfg:#08120D;
        --chat-muted:#8CA096; --chat-radius:20px;
    }

    /* ---------------- világos téma ----------------------------------------
       A márka-gradiens (--grad) ugyanaz marad, mert azon mindig sötét szöveg ül.
       Ami viszont FEHÉREN olvashatatlan lenne — a zöld szövegek és a szövegre
       vágott gradiens —, az sötétebb változatot kap: --accent és --grad-ink. */
    :root[data-theme="light"]{
        color-scheme:light;

        --void:#F4F8F5; --panel:#FFFFFF; --panel-2:#E9F4EB;
        --edge:rgba(12,32,22,.12); --edge-2:rgba(12,32,22,.20);
        --text:#0C1A13; --muted:#4E6459;
        --accent:#15803C;
        --brand-hu:#15803C;
        --grad-ink:linear-gradient(115deg,#12833C,#3C8A16 48%,#6C7503);

        --fill-rgb:12,32,22;
        --scrim-rgb:255,255,255;
        --modal-back:rgba(9,26,17,.46);
        --on-scrim:#24352C; --on-scrim-mut:#4E6459;
        --placeholder:#7B8C83;
        --err:#B3261E;

        --sh-lift:0 20px 44px rgba(12,40,24,.13);
        --sh-deep:0 30px 70px rgba(12,40,24,.17);
        --sh-knob:0 6px 20px rgba(12,40,24,.32);
        --glow-hero:rgba(91,212,103,.26);
        --glow-btn:0 8px 22px rgba(21,128,60,.26);
        --glow-btn-h:0 12px 30px rgba(21,128,60,.34);

        --chat-bg:#FFFFFF; --chat-fg:#0C1A13; --chat-line:rgba(12,32,22,.14);
        --chat-bot:#F1F6F2; --chat-user:#15803C; --chat-userfg:#FFFFFF;
        --chat-muted:#4E6459;
    }

    *,*::before,*::after{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
    body{margin:0; background:var(--void); color:var(--text); font-family:var(--sans);
        font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
        transition:background-color .25s, color .25s}
    body.is-locked{overflow:hidden}
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    button{font:inherit; color:inherit}
    h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.04em; line-height:1.08}
    p{margin:0}
    [hidden]{display:none !important}
    :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}

    .wrap{max-width:1160px; margin:0 auto; padding:0 24px}
    @media(max-width:600px){ .wrap{padding:0 18px} }

    .lbl{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
        text-transform:uppercase; color:var(--muted)}

    .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
        padding:16px 26px; border:0; border-radius:999px; cursor:pointer;
        font-size:15.5px; font-weight:700; line-height:1;
        transition:transform .18s, box-shadow .18s, background-color .18s}
    .btn--go{background:var(--grad); color:#08120D; box-shadow:var(--glow-btn)}
    .btn--go:hover{transform:translateY(-2px); box-shadow:var(--glow-btn-h)}
    .btn--out{background:rgba(var(--fill-rgb),.05); box-shadow:inset 0 0 0 1px var(--edge-2)}
    .btn--out:hover{background:rgba(var(--fill-rgb),.10)}

    /* ---------- lenyíló menü (Árak) ----------
       A szülő maga is link; a panel hoverre és billentyűzetes fókuszra is nyílik. */
    .navdrop{position:relative; display:inline-flex; align-items:center}
    .navdrop__arrow{font-size:10px; opacity:.7}
    .navdrop__panel{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
        display:flex; flex-direction:column; min-width:190px; padding:8px; border-radius:16px;
        background:rgba(var(--scrim-rgb),.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
        box-shadow:var(--sh-lift), inset 0 0 0 1px var(--edge); opacity:0; visibility:hidden; transition:opacity .16s, transform .16s}
    .navdrop:hover .navdrop__panel,
    .navdrop:focus-within .navdrop__panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px)}
    .navdrop__panel a{padding:9px 12px; border-radius:10px; font-size:14.5px; white-space:nowrap}
    .navdrop__panel a:hover{background:rgba(var(--fill-rgb),.08)}

    /* ---------- fejléc ---------- */
    .top{position:fixed; inset:0 0 auto 0; z-index:70; transition:background-color .3s}
    .top.is-stuck{background:rgba(var(--scrim-rgb),.8); -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px); border-bottom:1px solid var(--edge)}
    .top__in{display:flex; align-items:center; gap:20px; height:74px}
    .top__left{display:flex; align-items:center; gap:14px; margin-right:auto; min-width:0}
    .brand{display:flex; align-items:center; gap:10px}

    /* Kiemelt ígéret a fejlécben: gradiens keret + gradiens szám */
    .promise{
        position:relative; display:inline-flex; align-items:center; gap:8px;
        padding:8px 15px; border-radius:999px; white-space:nowrap;
        font-size:13.5px; font-weight:600; color:var(--muted);
        background:rgba(91,212,103,.06);
        border:0; font-family:inherit; cursor:pointer;   /* <button>-ként nyitja a konzultáció-modalt */
        transition:background-color .18s, transform .18s;
    }
    .promise:hover{background:rgba(91,212,103,.14); transform:translateY(-1px)}
    .promise:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
    .promise::before{
        content:""; position:absolute; inset:0; border-radius:999px; padding:1px;
        background:var(--grad);
        -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite:xor; mask-composite:exclude;
        pointer-events:none;
    }
    .promise b{
        font-weight:800; letter-spacing:-.02em;
        background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .promise__dot{
        width:7px; height:7px; border-radius:50%; background:var(--green); flex:none;
        box-shadow:0 0 0 0 rgba(91,212,103,.65); animation:promisePulse 2.4s infinite;
    }
    @keyframes promisePulse{
        70%{box-shadow:0 0 0 8px rgba(91,212,103,0)}
        100%{box-shadow:0 0 0 0 rgba(91,212,103,0)}
    }
    @media(max-width:1180px){ .promise .promise__long{display:none} }
    @media(max-width:660px){ .promise{padding:7px 12px; font-size:12.5px} }
    /* Kis kijelzőn a fejlécben már nem fér el a gomb mellé — ott a hero tetején
       jelenik meg ugyanez (lásd .promise--hero). */
    @media(max-width:1040px){ .top__left .promise{display:none} }

    .promise--hero{display:none; margin-top:14px}
    @media(max-width:1040px){ .promise--hero{display:inline-flex} }

    @media(prefers-reduced-motion:reduce){ .promise__dot{animation:none} }

    /* ---------- konzultáció-modal (a fejléc-pille nyitja) ---------- */
    .cmodal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
        padding:20px; opacity:0; transition:opacity .22s}
    .cmodal.is-open{opacity:1}
    .cmodal[hidden]{display:none}
    .cmodal__back{position:absolute; inset:0; background:var(--modal-back);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
    .cmodal__sheet{
        position:relative; width:100%; max-width:560px; max-height:calc(100dvh - 40px); overflow:auto;
        padding:34px 30px 30px; border-radius:26px; text-align:center;
        background:radial-gradient(120% 90% at 50% 0, var(--panel-2), var(--panel) 62%);
        box-shadow:inset 0 0 0 1px var(--edge-2), var(--sh-deep);
        transform:translateY(14px) scale(.98); transition:transform .22s}
    .cmodal.is-open .cmodal__sheet{transform:none}
    .cmodal__sheet h3{margin:10px 0 8px; font-size:clamp(1.4rem,3.2vw,1.85rem); letter-spacing:-.03em}
    .cmodal__lead{color:var(--muted); font-size:15.5px; max-width:420px; margin:0 auto}
    .cmodal__sheet .ask{margin-top:24px}
    .cmodal__x{position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:50%;
        background:rgba(var(--fill-rgb),.06); color:var(--muted); font-size:15px; line-height:1; cursor:pointer}
    .cmodal__x:hover{background:rgba(var(--fill-rgb),.13); color:var(--text)}
    @media(max-width:560px){ .cmodal{padding:12px} .cmodal__sheet{padding:30px 18px 22px; border-radius:22px} }
    @media(prefers-reduced-motion:reduce){ .cmodal, .cmodal__sheet{transition:none} }
    .brand img{width:30px; height:30px}
    .brand span{font-size:20px; font-weight:800; letter-spacing:-.045em}
    .brand em{font-style:normal; color:var(--brand-hu)}   /* a logó „.hu” része */
    .top nav{display:flex; gap:2px}
    .top nav a{padding:8px 12px; border-radius:999px; font-size:14.2px; color:var(--muted); white-space:nowrap}
    .top nav a:hover{color:var(--text); background:rgba(var(--fill-rgb),.06)}
    .top nav a.is-here{color:var(--text); background:rgba(var(--fill-rgb),.08)}
    @media(max-width:1040px){ .top nav{display:none} }
    .top .btn{padding:11px 19px; font-size:14.5px}
    @media(max-width:760px){ .top .btn{display:none} }

    /* mobil menü */
    .burger{display:none; width:42px; height:42px; flex:none; cursor:pointer; border:0;
        border-radius:13px; background:rgba(var(--fill-rgb),.05); box-shadow:inset 0 0 0 1px var(--edge);
        align-items:center; justify-content:center}
    .burger span{position:relative; display:block; width:18px; height:2px; border-radius:2px;
        background:var(--text); transition:background-color .2s}
    .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px;
        border-radius:2px; background:var(--text); transition:transform .22s cubic-bezier(.2,.8,.3,1)}
    .burger span::before{top:-6px}
    .burger span::after{top:6px}
    .burger.is-on span{background:transparent}
    .burger.is-on span::before{transform:translateY(6px) rotate(45deg)}
    .burger.is-on span::after{transform:translateY(-6px) rotate(-45deg)}
    @media(max-width:1040px){ .burger{display:inline-flex} }

    /* ---------- téma-váltó ----------
       Azt az ikont mutatja, AMIRE váltana: sötétben napot, világosban holdat.
       JS nélkül (nincs data-theme) a sötét marad, és a nap látszik. */
    .tsw{display:inline-grid; place-items:center; width:40px; height:40px; flex:none;
        cursor:pointer; border:0; border-radius:13px; color:var(--muted);
        background:rgba(var(--fill-rgb),.05); box-shadow:inset 0 0 0 1px var(--edge);
        transition:color .18s, background-color .18s}
    .tsw:hover{color:var(--text); background:rgba(var(--fill-rgb),.10)}
    .tsw svg{width:18px; height:18px}
    .tsw__moon{display:none}
    :root[data-theme="light"] .tsw__sun{display:none}
    :root[data-theme="light"] .tsw__moon{display:block}

    .mnav{position:fixed; z-index:69; inset:74px 0 auto 0; display:none;
        background:rgba(var(--scrim-rgb),.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
        border-bottom:1px solid var(--edge); padding:12px 0 22px}
    .mnav.is-open{display:block}
    .mnav ul{list-style:none; margin:0; padding:0}
    .mnav a{display:block; padding:14px 2px; font-size:17px; font-weight:700;
        letter-spacing:-.03em; border-bottom:1px solid var(--edge)}
    .mnav a.is-here{color:var(--accent)}
    .mnav .btn{width:100%; margin-top:18px}
    @media(min-width:1041px){ .mnav{display:none !important} }

    /* ---------- hero ---------- */
    .hero{position:relative; padding:146px 0 84px; overflow:hidden; text-align:center}
    .hero::before{content:""; position:absolute; inset:-40% -20% auto -20%; height:130%;
        background:radial-gradient(closest-side at 50% 32%, var(--glow-hero), transparent 70%);
        pointer-events:none}
    .hero__in{position:relative}
    @media(max-width:980px){ .hero{padding:110px 0 60px} }
    .hero h1{font-size:clamp(2.2rem,5vw,3.9rem); margin:18px auto 0; max-width:17ch}
    .hero h1 span{background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent}
    .hero__sub{margin:20px auto 0; color:var(--muted); font-size:1.08rem; max-width:54ch}
    .hero__sub b{color:var(--text); font-weight:700}
    /* ha közvetlenül a hero alá jön a három út kártya, ne legyen dupla levegő */
    .hero--tight{padding-bottom:30px}
    .hero--tight + .sec{padding-top:64px}
    .hero--page{padding:132px 0 64px}
    .hero--page h1{max-width:20ch}
    @media(max-width:980px){ .hero--page{padding:104px 0 50px} }
    .hero__cta{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px}

    /* morzsa */
    .crumb{display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:16px;
        font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
        color:var(--muted)}
    .crumb a:hover{color:var(--text)}
    .crumb b{font-weight:600; color:var(--accent)}
    .crumb svg{width:11px; height:11px; opacity:.55}

    /* számsáv a hero alatt */
    .facts{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 46px; margin-top:38px;
        padding-top:26px; border-top:1px solid var(--edge)}
    .facts div{min-width:130px}
    .facts b{display:block; font-size:24px; font-weight:800; letter-spacing:-.04em;
        background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent}
    .facts span{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted)}

    /* --- az űrlap: cím és email külön sorban, a gomb is --- */
    .ask{margin:32px auto 0; max-width:520px; text-align:left}
    .ask__row{display:flex; flex-direction:column; gap:10px}
    .ask__field{
        display:flex; align-items:center; padding:0 19px; border-radius:999px;
        border:1px solid var(--edge-2); background:rgba(var(--fill-rgb),.05);
        transition:border-color .16s, box-shadow .16s, background-color .16s;
    }
    .ask__field:focus-within{border-color:var(--accent); background:rgba(91,212,103,.07);
        box-shadow:0 0 0 4px rgba(91,212,103,.16)}
    .ask__prefix{
        font-family:var(--mono); font-size:14.5px; color:var(--muted);
        user-select:none; padding-right:0; flex:none; letter-spacing:-.01em;
    }
    .ask__field input{
        flex:1; min-width:0; padding:17px 0; border:0; background:transparent;
        font-family:var(--sans); font-size:16.5px; color:var(--text);
    }
    @media(max-width:420px){
        .ask__field{padding:0 15px}
        .ask__prefix{font-size:13px}
        .ask__field input{font-size:15.5px}
    }
    .ask__field input::placeholder{color:var(--placeholder)}
    .ask__field input:focus{outline:0}
    .ask .btn{width:100%}
    .ask__fine{margin-top:13px; text-align:center; font-family:var(--mono); font-size:12.2px;
        color:var(--muted); line-height:1.7}
    .ask__done{padding:22px; border-radius:20px; background:rgba(91,212,103,.10);
        border:1px solid rgba(91,212,103,.28); text-align:center}
    .ask__done b{display:block; margin-bottom:5px; font-size:1.05rem}
    .ask__done p{font-size:15px; color:var(--muted)}
    .ask__err{margin-top:11px; text-align:center; font-size:14.5px; color:var(--err)}

    /* --- hero csúszka --- */
    .ba{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--edge);
        background:var(--panel); cursor:ew-resize; user-select:none; touch-action:pan-y;
        box-shadow:var(--sh-deep)}
    .ba__img{display:block; width:100%; aspect-ratio:1120/760; object-fit:cover}
    .ba__after{position:absolute; inset:0; clip-path:inset(0 0 0 50%)}
    .ba__after .ba__img{height:100%}
    .ba__tag{position:absolute; top:12px; z-index:3; padding:5px 11px; border-radius:999px;
        font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
        text-transform:uppercase; pointer-events:none}
    .ba__tag--b{left:12px; background:rgba(var(--scrim-rgb),.8); color:var(--on-scrim); border:1px solid var(--edge-2)}
    .ba__tag--a{right:12px; background:var(--grad); color:#08120D}
    .ba__handle{position:absolute; top:0; bottom:0; left:var(--ba-pos,50%); width:2px; z-index:4;
        background:var(--green); box-shadow:0 0 18px rgba(91,212,103,.7); pointer-events:none}
    .ba__handle::after{content:"⟨ ⟩"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        width:42px; height:42px; border-radius:50%; background:var(--grad); color:#08120D;
        display:grid; place-items:center; font-size:12px; letter-spacing:-1px;
        box-shadow:var(--sh-knob)}
    .ba__range{position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; opacity:0;
        cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent}

    .heroProof{margin-top:52px}
    .heroProof__cap{margin-top:13px; display:flex; gap:12px; align-items:baseline;
        justify-content:center; flex-wrap:wrap}
    .heroProof__cap span{font-size:14.4px; color:var(--muted)}

    /* ---------- logósáv ---------- */
    .trust{padding:34px 0 30px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
        background:var(--panel)}
    .trust__head{text-align:center; margin-bottom:20px; font-size:15.4px; color:var(--muted)}
    .trust__head b{color:var(--text); font-weight:700}
    .strip{overflow:hidden;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
    /* A sáv 6 példányban tartalmazza a sort, és a felénél ugrik vissza — így
       széles képernyőn sincs üres szakasz. A sebesség a hosszal arányos. */
    .strip__row{display:flex; align-items:center; gap:56px; width:max-content;
        animation:slide 120s linear infinite; will-change:transform}
    .strip:hover .strip__row{animation-play-state:paused}
    @keyframes slide{to{transform:translateX(-50%)}}

    .strip__item{display:inline-flex; align-items:center; gap:9px; opacity:.9;
        transition:opacity .2s}
    .strip__item:hover{opacity:1}
    /* a logó a saját alfa-csatornájával maszkolja a márka-gradienst */
    .strip__item .logo{
        display:block; height:var(--h); width:var(--w); background:var(--grad-ink);
        -webkit-mask:var(--src) no-repeat center / contain;
        mask:var(--src) no-repeat center / contain;
    }
    .strip__item b{font-size:21px; font-weight:800; letter-spacing:-.03em;
        background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent}

    /* ---------- szekció ---------- */
    .sec{padding:96px 0; scroll-margin-top:86px}
    .sec--panel{background:var(--panel)}
    @media(max-width:700px){ .sec{padding:66px 0} }
    .secHead{max-width:62ch; margin:0 auto 44px; text-align:center}
    .secHead h2{font-size:clamp(1.9rem,3.5vw,2.8rem); margin:16px 0 0}
    .secHead p{margin:15px auto 0; color:var(--muted); max-width:54ch}
    .secFoot{margin-top:38px; text-align:center}

    /* ---------- referencia-kártyák ---------- */
    .filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; justify-content:center}
    .filters button{padding:9px 16px; border-radius:999px; cursor:pointer;
        background:rgba(var(--fill-rgb),.04); border:1px solid var(--edge);
        font-size:14px; font-weight:600; color:var(--muted); transition:all .16s}
    .filters button:hover{color:var(--text); border-color:var(--edge-2)}
    .filters button.is-on{background:var(--grad); border-color:transparent; color:#08120D}

    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
    @media(max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:640px){ .cards{grid-template-columns:1fr} }

    .card{
        display:flex; flex-direction:column; overflow:hidden;
        background:var(--panel); border:1px solid var(--edge); border-radius:20px;
        transition:transform .2s, border-color .2s, box-shadow .2s;
    }
    .card:hover{transform:translateY(-4px); border-color:rgba(91,212,103,.32);
        box-shadow:var(--sh-lift)}

    /* a teljes oldal egy ablakban: hoverre végiggördül, érintésen görgethető */
    .card__shot{position:relative; height:290px; overflow:hidden; background:var(--panel-2)}
    .card__pane{position:absolute; inset:0; opacity:0; overflow:hidden; transition:opacity .22s}
    .card__pane.is-on{opacity:1; z-index:2}
    .card__pane img{width:100%; height:auto; display:block}
    @media(hover:hover){
        .card__pane img{transition:transform 9s linear}
        .card:hover .card__pane.is-on img{transform:translateY(calc(-100% + 290px))}
    }
    @media(hover:none){
        .card__pane{overflow-y:auto; -webkit-overflow-scrolling:touch}
    }
    /* rövid oldal: nincs mit végiggördíteni */
    .card__pane.is-short img{transform:none !important}
    .card__pane.is-short{overflow:hidden}
    .card__pane.is-short::after{content:""; position:absolute; inset:0; pointer-events:none}
    .card__tabs{position:absolute; z-index:4; left:12px; top:12px; display:flex; gap:0;
        border-radius:999px; overflow:hidden; background:rgba(var(--scrim-rgb),.72);
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
        border:1px solid var(--edge-2)}
    .card__tabs button{padding:6px 13px; border:0; cursor:pointer; background:transparent;
        font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
        text-transform:uppercase; color:var(--on-scrim); transition:background-color .16s, color .16s}
    .card__tabs button.is-on{background:var(--grad); color:#08120D}
    .card__badge{position:absolute; z-index:4; right:12px; top:12px; padding:5px 11px;
        border-radius:999px; background:rgba(var(--scrim-rgb),.72); border:1px solid var(--edge-2);
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
        font-size:11.5px; font-weight:600; color:var(--on-scrim)}
    .card__hint{position:absolute; z-index:4; left:0; right:0; bottom:0; padding:22px 14px 9px;
        background:linear-gradient(transparent, rgba(var(--scrim-rgb),.88));
        font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
        color:var(--on-scrim-mut); pointer-events:none; display:flex; align-items:center; gap:7px}
    .card__hint svg{width:12px; height:12px}
    .card__body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:7px; flex:1}
    .card__body h3{font-size:1.06rem}
    .card__body p{font-size:14.8px; color:var(--muted); line-height:1.55}

    .galAsk{margin-top:48px; padding:34px 30px; border-radius:24px; text-align:center;
        background:linear-gradient(160deg, var(--panel-2), var(--panel)); border:1px solid var(--edge)}
    .galAsk h3{font-size:1.4rem}
    .galAsk > p{margin-top:9px; color:var(--muted); font-size:15.4px}

    /* ---------- a három út ---------- */
    .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    @media(max-width:940px){ .trio{grid-template-columns:1fr} }
    .trio--two{grid-template-columns:repeat(2,1fr)}
    @media(max-width:760px){ .trio--two{grid-template-columns:1fr} }
    .trio--one{grid-template-columns:minmax(0,560px); justify-content:center}

    .way{position:relative; display:flex; flex-direction:column; padding:30px 26px 28px;
        border-radius:22px; text-align:left; overflow:hidden;
        background:rgba(var(--fill-rgb),.035); border:1px solid var(--edge);
        transition:transform .2s, border-color .2s, box-shadow .2s, background-color .2s}
    .way::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--grad);
        opacity:.5; transition:opacity .2s}
    .way:hover{transform:translateY(-5px); border-color:rgba(91,212,103,.32);
        background:linear-gradient(160deg, var(--panel-2), rgba(var(--fill-rgb),.03));
        box-shadow:var(--sh-lift)}
    .way:hover::before{opacity:1}
    .way__stretch{position:absolute; inset:0; z-index:2}
    .way__n{display:inline-grid; place-items:center; width:29px; height:29px; border-radius:10px;
        background:var(--grad); color:#08120D; font-family:var(--mono); font-size:13px; font-weight:600}
    .way h3{margin-top:16px; font-size:1.3rem}
    .way__when{margin-top:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
        text-transform:uppercase; color:var(--accent)}
    .way p{margin-top:13px; color:var(--muted); font-size:15.2px; line-height:1.56; flex:1}
    .way__more{margin-top:20px; display:inline-flex; align-items:center; gap:7px;
        font-size:14.6px; font-weight:700}
    .way__more svg{width:14px; height:14px; transition:transform .2s}
    .way:hover .way__more svg{transform:translateX(3px)}

    /* ---------- nagy választó (van már oldala / nulláról indul) ---------- */
    .pick{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:780px; margin:34px auto 0}
    @media(max-width:700px){ .pick{grid-template-columns:1fr} }
    .pick button{position:relative; overflow:hidden; cursor:pointer; text-align:left;
        padding:22px 22px 20px; border-radius:20px; color:inherit;
        background:rgba(var(--fill-rgb),.035); border:1px solid var(--edge);
        transition:transform .2s, border-color .2s, background-color .2s}
    .pick button:hover{transform:translateY(-3px); border-color:rgba(91,212,103,.32)}
    .pick button.is-on{border-color:rgba(91,212,103,.55);
        background:linear-gradient(160deg, var(--panel-2), rgba(var(--fill-rgb),.03))}
    .pick button.is-on::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--grad)}
    .pick__k{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
        text-transform:uppercase; color:var(--muted)}
    .pick button.is-on .pick__k{color:var(--accent)}
    .pick b{display:block; margin-top:10px; font-size:1.2rem; font-weight:800; letter-spacing:-.03em}
    .pick span + span, .pick b + span{display:block; margin-top:8px; color:var(--muted);
        font-size:14.8px; line-height:1.5}

    /* ---------- általános csempe (szolgáltatás / képesség / AI) ---------- */
    .g2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    .g3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .g4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    @media(max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:820px){ .g2{grid-template-columns:1fr} }
    @media(max-width:640px){ .g3,.g4{grid-template-columns:1fr} }

    .tile{position:relative; padding:26px 24px 28px; border-radius:20px; text-align:left;
        background:rgba(var(--fill-rgb),.035); border:1px solid var(--edge);
        transition:transform .2s, border-color .2s, background-color .2s}
    .tile:hover{transform:translateY(-4px); border-color:rgba(91,212,103,.28);
        background:rgba(var(--fill-rgb),.055)}
    .tile--wide{grid-column:1 / -1}
    @media(max-width:820px){ .tile--wide{grid-column:auto} }
    .tile__ico{display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
        background:rgba(91,212,103,.13); color:var(--accent); margin-bottom:16px}
    .tile__ico svg{width:21px; height:21px}
    .tile h3{font-size:1.08rem}
    .tile > p{margin-top:9px; color:var(--muted); font-size:15px; line-height:1.56}
    .tile ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
    .tile li{display:flex; gap:10px; font-size:14.6px; color:var(--muted); line-height:1.5}
    .tile li::before{content:""; width:6px; height:6px; margin-top:8px; flex:none;
        border-radius:2px; background:var(--grad)}
    .tile__tools{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
    .tile__tools span{padding:5px 11px; border-radius:999px; background:rgba(var(--fill-rgb),.05);
        border:1px solid var(--edge); font-family:var(--mono); font-size:10.8px;
        letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

    /* ---------- 4 lépés ---------- */
    .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    @media(max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:560px){ .steps{grid-template-columns:1fr} }
    .step{position:relative; padding:24px 22px 26px; border-radius:20px;
        background:rgba(var(--fill-rgb),.035); border:1px solid var(--edge)}
    .step::before{content:""; position:absolute; inset:auto auto 0 0; width:100%; height:1px;
        background:var(--grad); opacity:.5}
    .step__n{display:inline-grid; place-items:center; width:29px; height:29px; border-radius:10px;
        background:var(--grad); color:#08120D; font-family:var(--mono); font-size:13px; font-weight:600}
    .step h3{font-size:1.06rem; margin:15px 0 0}
    .step p{margin-top:8px; color:var(--muted); font-size:14.8px}
    .step__you{margin-top:16px; padding-top:13px; border-top:1px solid var(--edge);
        font-family:var(--mono); font-size:11.5px; color:var(--muted)}
    .step__you b{color:var(--accent); font-weight:600}
    .step--talk{background:linear-gradient(160deg, rgba(91,212,103,.10), rgba(var(--fill-rgb),.03));
        border-color:rgba(91,212,103,.26)}

    /* ---------- két hasáb: most / ezután ---------- */
    .nomore{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    @media(max-width:820px){ .nomore{grid-template-columns:1fr} }
    .nomore__col{padding:28px 26px 30px; border-radius:22px; border:1px solid var(--edge);
        background:rgba(var(--fill-rgb),.03)}
    .nomore__col:last-child{background:linear-gradient(160deg, var(--panel-2), var(--panel));
        border-color:rgba(91,212,103,.22)}
    .nomore__col h3{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
        text-transform:uppercase; color:var(--muted)}
    .nomore__col:last-child h3{color:var(--accent)}
    .nomore__col ul{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
    .nomore__col li{display:flex; gap:12px; font-size:15.8px; line-height:1.5}
    .nomore__col li::before{content:""; width:7px; height:7px; margin-top:9px; flex:none;
        border-radius:2px; background:var(--grad)}
    .nomoreFoot{margin-top:22px; padding:26px; border-radius:22px; text-align:center;
        background:var(--grad); color:#08120D}
    .nomoreFoot b{display:block; font-size:1.3rem; letter-spacing:-.03em}
    .nomoreFoot span{font-size:15px; color:rgba(8,18,13,.72)}

    /* ---------- rólam ---------- */
    .me{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center}
    @media(max-width:880px){ .me{grid-template-columns:1fr; gap:30px} }
    .me__photo{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:1/1.1; background:var(--panel)}
    .me__photo img{width:100%; height:100%; object-fit:cover; object-position:center 12%}
    .me__glow{position:absolute; inset:-18px; z-index:-1; border-radius:36px;
        background:var(--grad); opacity:.3; filter:blur(40px)}
    .me h2{font-size:clamp(1.7rem,2.9vw,2.3rem); margin-top:14px}
    .me p{margin-top:15px; color:var(--muted); max-width:58ch}
    .me p b{color:var(--text); font-weight:700}
    .me__contact{margin-top:26px; display:flex; flex-wrap:wrap; gap:11px}
    .me__contact a{padding:11px 18px; border-radius:999px; font-size:14.6px; font-weight:600;
        background:rgba(var(--fill-rgb),.05); border:1px solid var(--edge)}
    .me__contact a:hover{background:rgba(var(--fill-rgb),.1)}

    /* ---------- ár ---------- */
    .price{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    @media(max-width:760px){ .price{grid-template-columns:1fr} }
    .price__box{padding:28px; border-radius:22px; background:rgba(var(--fill-rgb),.035); border:1px solid var(--edge)}
    .price__box--m{background:linear-gradient(160deg, var(--panel-2), var(--panel)); border-color:rgba(91,212,103,.22)}
    .price__box h3{font-size:1.2rem}
    .price__box > p{margin-top:9px; color:var(--muted); font-size:15.2px}
    .price__box ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
    .price__box li{display:flex; gap:10px; font-size:15.2px; color:var(--muted)}
    .price__box li::before{content:"·"; color:var(--accent); font-weight:800}
    .price__sum{margin-top:18px; font-size:2rem; font-weight:800; letter-spacing:-.045em;
        background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent}
    .price__sum small{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
        text-transform:uppercase; color:var(--muted); -webkit-text-fill-color:var(--muted)}
    .priceNote{margin-top:24px; font-size:15.2px; color:var(--muted); max-width:64ch}
    .priceNote b{color:var(--text)}

    /* ---------- GYIK ---------- */
    .faq{max-width:840px; margin:0 auto}
    .faq details{border-bottom:1px solid var(--edge)}
    .faq summary{list-style:none; cursor:pointer; padding:21px 40px 21px 0; position:relative;
        font-size:1.06rem; font-weight:700; letter-spacing:-.025em}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{content:""; position:absolute; right:6px; top:50%; width:10px; height:10px;
        border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
        transform:translateY(-70%) rotate(45deg); transition:transform .2s}
    .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--accent)}
    .faq p{padding:0 0 21px; color:var(--muted); max-width:64ch}

    /* ---------- záró ---------- */
    .end{position:relative; padding:96px 0; overflow:hidden; text-align:center}
    .end::before{content:""; position:absolute; inset:auto 0 -60% 0; height:130%;
        background:radial-gradient(closest-side at 50% 100%, var(--glow-hero), transparent 70%);
        pointer-events:none}
    .end__in{position:relative}
    .end h2{font-size:clamp(1.9rem,3.5vw,2.8rem); margin:16px auto 0; max-width:18ch}
    .end__lead{margin:15px auto 0; color:var(--muted); max-width:46ch}
    .end__cta{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px}

    /* ---------- lábléc ---------- */
    .foot{border-top:1px solid var(--edge); padding:52px 0 0}
    .foot__in{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:34px; padding-bottom:36px}
    @media(max-width:820px){ .foot__in{grid-template-columns:1fr; gap:26px} }
    .foot p{margin-top:14px; color:var(--muted); font-size:15px; max-width:34ch}
    .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px}
    .foot li a{color:var(--muted)} .foot li a:hover{color:var(--text)}
    .foot h4{margin:0 0 12px}
    .foot__bar{border-top:1px solid var(--edge); padding:15px 0 24px; display:flex; flex-wrap:wrap;
        gap:8px 20px; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--muted)}
    .foot__legal{display:inline-flex; gap:8px; flex-wrap:wrap}
    /* A süti-banner a site saját tokenjeiből: nincs új paletta. */
    :root{--vkcc-bg:#0B1310; --vkcc-fg:#E9F1EB; --vkcc-muted:#8CA096;
        --vkcc-line:rgba(233,241,235,.16); --vkcc-accent:#5BD467; --vkcc-accent-ink:#08120D}
    :root[data-theme="light"]{--vkcc-bg:#FFFFFF; --vkcc-fg:#0C1A13; --vkcc-muted:#4E6459;
        --vkcc-line:rgba(12,32,22,.16); --vkcc-accent:#15803C; --vkcc-accent-ink:#FFFFFF}
    .foot__legal a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
    .foot__legal a:hover{color:var(--text)}

    /* ---------- reveal ----------
       A REJTES A `html.js-anim` OSZTALYON LOG, es nem magan az elemen. A fejlec
       scriptje teszi fel, es 2,5 s mulva le is veszi, ha a lap alji reveal-script
       addig el sem indult. Feltetel nelkul rejteni azt jelenti, hogy egy meg nem
       futo (lassan erkezo, hibara futo, kikapcsolt) JS mellett a latogato URES
       LAPOT lat — a hellokedves.hu-n pontosan ez tortent 2026-09-23-an. */
    .js-anim [data-reveal]:not(.is-in){opacity:0; transform:translateY(20px)}
    [data-reveal]{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1)}
    @media(prefers-reduced-motion:reduce){
        [data-reveal]{opacity:1 !important; transform:none !important}
        .strip__row{animation:none}
        .card__pane img{transition:none !important}
        html{scroll-behavior:auto}
    }

/* ── Mobil fiók (site.partials.mobile-drawer) ─────────────────────────────
   A design SAJÁT téma-változóira mutat, ezért a világos/sötét váltót
   magától követi — nincs külön [data-theme="light"] blokk. */
:root{
  --vkdrawer-bg:var(--panel);
  --vkdrawer-ink:var(--text);
  --vkdrawer-line:var(--edge);
  --vkdrawer-accent:var(--accent);
  --vkdrawer-cta-bg:var(--accent);
  --vkdrawer-cta-ink:var(--void);
  --vkdrawer-scrim:var(--modal-back);
}

/* ── GYIK-chat (site.partials.faq-chat) ───────────────────────────────────
   A design SAJÁT téma-változóira mutat, ezért a világos/sötét váltót magától
   követi — nincs külön [data-theme="light"] blokk, ugyanúgy, mint a fióknál. */
:root{
  --vkchat-bg:var(--panel);
  --vkchat-ink:var(--text);
  --vkchat-line:var(--edge);
  --vkchat-soft:rgba(127,127,127,.10);
  --vkchat-accent:var(--accent);
  --vkchat-accent-ink:var(--void);
  --vkchat-bot-bg:rgba(127,127,127,.10);
  --vkchat-head-bg:var(--panel);
  --vkchat-field-bg:transparent;
  --vkchat-scrim:var(--modal-back);
}

/* ── Előtte–utána: NAGY változat (a blokk „Méret" mezője) ─────────────────
   Egy-két referenciához: soronként egy kártya, magasabb képernyőképpel.

   ⚠ A SZÉLESSÉG NEM SZABADON VÁLASZTHATÓ. A referencia-képek natív szélessége
   760 px (`design/vigkaroly-v2/assets/ba/*.webp`); efölé nagyítva a
   képernyőkép láthatóan elmosódik. Ezért a max-width pontosan 760px — ha
   egyszer nagyobb felbontású képek készülnek, EZT a számot kell velük együtt
   emelni, nem külön.

   A hover-végiggördítés ELTOLÁSÁT is együtt kell vinni a magassággal: a
   `calc(-100% + 290px)` az alap kártyára van szabva, a nagynál ugyanaz a szám
   a kép alját levágná. */
.cards--lg{grid-template-columns:1fr; max-width:760px; margin-left:auto; margin-right:auto}
@media(max-width:1000px){ .cards--lg{grid-template-columns:1fr} }
.cards--lg .card__shot{height:560px}
@media(hover:hover){
  .cards--lg .card:hover .card__pane.is-on img{transform:translateY(calc(-100% + 560px))}
}
.cards--lg .card__body{padding:22px 26px 26px}
.cards--lg .card__body h3{font-size:1.24rem}
.cards--lg .card__body p{font-size:15.6px}

/* A záró sáv a kártyához igazodik — teljes szélességben elnyomná a mellette
   álló, keskenyebb kártyát. */
.cards--lg ~ .nomoreFoot{max-width:760px; margin-left:auto; margin-right:auto}

@media(max-width:640px){
  .cards--lg .card__shot{height:420px}
  @media(hover:hover){
    .cards--lg .card:hover .card__pane.is-on img{transform:translateY(calc(-100% + 420px))}
  }
}

/* ── Előtte–utána: KÖZÉPEN ELHÚZÓS változat ───────────────────────────────
   A `.ba` komponens a designból jön (fentebb), az eredeti hero-csúszkából.
   Itt csak arra igazítjuk, hogy a képeink NEM fekvő hero-kivágások, hanem
   teljes oldalas, magas képernyőképek (760 × 2123 és 760 × 4546).

   Ezért két dolgot kell felülírni:
     - saját arány, hogy a sáv magasabb legyen a design 1120/760-ánál;
     - `object-position:top`, különben az `object-fit:cover` a kép KÖZEPÉT
       mutatná — egy 4546 px magas oldal közepét, ami értelmezhetetlen.
       A lap TETEJE az, ami összehasonlítható. */
.baWrap{max-width:760px; margin-left:auto; margin-right:auto}

/* NAGY csuszka. A `next` referencia kepei 2026-08-25-en ujra lettek fotozva
   1440, illetve 1498 px szelesen (a korabbi 760 helyett), ezert itt a teljes
   tartalom-szelesseg is LEFELE skalazas marad — nincs felnagyitas.
   ⚠ Ez CSAK erre a keppárra igaz. A tobbi 14 referencia meg a regi, 760 px-es
   kepekkel megy: azoknal a `.cards--lg` 760-as korlatja tovabbra is ervenyes. */
.baWrap--lg{max-width:1112px}

.baWrap .ba__img{aspect-ratio:760/560; object-position:top}
.baWrap .ba{cursor:ew-resize}
.baWrap__cap{margin-top:16px; text-align:center}
.baWrap__cap h3{font-size:1.24rem}
.baWrap__cap p{margin-top:5px; font-size:15.6px; color:var(--muted)}

/* A fogantyú legyen vastagabb és láthatóbb, mint a design hajszálvonala:
   itt ez a fő interakció, nem egy dísz a hero-ban. */
.baWrap .ba__handle{width:3px}

@media(max-width:640px){
  .baWrap .ba__img{aspect-ratio:760/620}
}

/* ── Cég-referenciák (blocks/references) ──────────────────────────────────
   A `.tile` kártyát hasznaljuk, kiegeszitve a logoval. A logo ALFA-csatornaja
   szerint fehérre szinezzuk, mint a logosavban: a marka-logok tobbnyire sotet
   hatterre keszultek, es a v2 sotet temaban maskepp elvesznenek. */
.refTile{display:flex; flex-direction:column}
.refTile__logo{
  width:auto; max-width:150px; object-fit:contain; align-self:flex-start;
  margin-bottom:16px; filter:brightness(0) invert(1); opacity:.86;
}
:root[data-theme="light"] .refTile__logo{filter:none; opacity:1}
.refTile .lbl{margin-bottom:6px}
.refTile > p{flex:1}
.refTile__private{
  margin-top:14px; font-size:13.5px; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px;
}
.refTile .way__more{margin-top:14px; align-self:flex-start}
.refTile[hidden]{display:none}

/* A kattinthato referencia-kartya. A `.tile` mar `position:relative`, ezert a
   lefedo link (.way__stretch) rateszi magat. A privat munkak kartyai NEM
   kapnak sem kurzort, sem fokusz-keretet: azoknak nincs hova vinniuk. */
.refTile--link{cursor:pointer}
.refTile--link:focus-within{border-color:rgba(91,212,103,.45)}
.refTile--link:hover .way__more svg{transform:translateX(3px)}

/* Folytatás-szakasz: az előtte–utána és a cég-referenciák EGY szakasznak
   olvasódnak. Nincs felső térköz, csak egy vékony választó vonal. */
.sec--joined{padding-top:0}
.sec--joined > .wrap{border-top:1px solid var(--edge); padding-top:44px}
.sec--joined .secHead h2{font-size:1.5rem}

/* ── Számok sávja saját blokként (sec--tight) ─────────────────────────────
   A sáv a HERO-ban a cím alá tapadt (`margin-top:38px` + felső vonal). Külön
   szakaszként a `.sec` 96 px-es térköze RÁADÓDIK erre, és mivel az előtte álló
   szakasznak sincs fejléce, a kettő alja-teteje összeadódott: 250 px-es lyuk
   maradt a két doboz és a számok között.

   Ezért a sáv nem kap felső térközt, és az előtte álló szakasz alja is szűkebb.
   A saját felső vonala megmarad — az választja el, nem a térköz. */
.sec--tight{padding-top:0}
.sec--tight .facts{margin-top:0}
.sec:has(+ .sec--tight){padding-bottom:48px}

/* A számok sávja ÖNÁLLÓ blokként RÁCS, nem sortörő flex.
   A design flexes változata a hero alatt jó volt, mert ott rövid értékek
   álltak („0 Ft"). Az „Ingyenes demó oldal" viszont hosszabb, és a flex
   3+1-be törte a sort: három elem egymás mellett, a negyedik alattuk
   középen — töröttnek látszott. A rács mind a négyet egy sorban tartja,
   szűk kijelzőn pedig 2×2-be, majd egymás alá rendezi. */
.sec--tight .facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px 32px; justify-items:start; text-align:left;
}
.sec--tight .facts div{min-width:0}
@media(max-width:900px){ .sec--tight .facts{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .sec--tight .facts{grid-template-columns:1fr} }

/* ── Két nagy, szándék-alapú gomb (blocks/choices) ────────────────────────
   Az ELSŐ a fő ajánlat: kitöltött, márka-gradienses. A másik keretes, de nem
   halkabb — a két út egyenrangú, csak az egyik a nyilvánvaló alapértelmezés.
   A design saját tokenjeit használják, nem új színeket. */
.pick2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(max-width:860px){ .pick2{grid-template-columns:1fr} }

.pick2__btn{
  position:relative; display:flex; flex-direction:column; gap:7px;
  min-height:132px; padding:30px 64px 30px 32px; border-radius:22px;
  text-decoration:none; color:var(--text); justify-content:center;
  background:var(--panel); border:1px solid var(--edge);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.pick2__btn:hover{transform:translateY(-4px); border-color:rgba(91,212,103,.38); box-shadow:var(--sh-lift)}
.pick2__btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.pick2__btn--go{background:var(--grad); border-color:transparent; color:#08120D}
.pick2__btn--go:hover{border-color:transparent}

.pick2__label{font-size:1.24rem; font-weight:800; letter-spacing:-.02em; line-height:1.25}
.pick2__note{font-size:14.5px; font-weight:400; opacity:.78}
.pick2__btn--go .pick2__note{opacity:.72}

.pick2__arrow{
  position:absolute; right:28px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; transition:transform .2s;
}
.pick2__btn:hover .pick2__arrow{transform:translateY(-50%) translateX(4px)}

/* ── Logósáv: SAJÁT SZÍNBEN (user, 2026-08-26) ────────────────────────────
   A design eredetileg a logó alfa-csatornájával maszkolta a márka-gradienst,
   attól nézett ki egységesen zöldnek mind. Az ügyfelek mostantól a saját
   arculatukkal szerepelnek.

   ⚠ Ezért kell a lap a kép mögé: a sáv SÖTÉT háttéren ül, világos témában
   viszont világoson — egy sötét tintájú logó az egyiken, egy világos a másikon
   tűnne el. A halvány lap MINDKÉT témában világos, így minden logó azon a
   háttéren ül, amire tervezték. */
.strip__plate{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px;
  background:#F4F6F4; border:1px solid rgba(0,0,0,.06);
}
.strip__logo{display:block; object-fit:contain; max-width:100%}

/* A háttérlap fajtája LOGÓNKÉNT. Mérve (2026-08-26): a Richter, az Egis, az
   Azúr és a MESI.LIFE jele SÖTÉT rajzolat — világos lap kell alá; a Balatoné
   és a Landventure-é VILÁGOS — sötét lap; a BaloBau-nak saját háttere van.
   Nincs tehát egyetlen jó háttér: ezért választható. */
.strip__plate--dark{background:#12181A; border-color:rgba(255,255,255,.12)}
.strip__plate--none{background:none; border-color:transparent; padding:0}

/* ── Kattintható logó a sávban ────────────────────────────────────────────
   A logó a SAJÁT referencia-kártyájára ugrik. A `scroll-margin-top` azért
   kell, mert a fejléc TAPADÓ: enélkül a kártya teteje alácsúszna. */
a.strip__item{text-decoration:none; cursor:pointer}
a.strip__item:hover .strip__plate{border-color:rgba(91,212,103,.5)}
.refTile{scroll-margin-top:120px}

/* A megcélzott kártya rövid kiemelése — enélkül nem derül ki, hova érkeztünk. */
.refTile:target{border-color:rgba(91,212,103,.6); box-shadow:var(--sh-lift)}

/* ── Szűkebb térköz az előtte–utána alatt ─────────────────────────────────
   A csúszka képaláírása után 96 px jött, majd a folytatás-szakasz saját
   44 px-e — túl nagy lyuk egy olyan szakasz közepén, ami EGYnek olvasódik.

   ⚠ NEM `.sec:has(+ .sec--joined)`-kel oldjuk meg: a két szakasz KÖZÖTT egy
   `<script>` elem áll (a partial `@once` blokkja), ezért a `+` szomszéd-
   választó nem talál. Helyette a folytatás-szakaszt húzzuk feljebb — az
   független attól, mi áll közte. */
.sec--joined{margin-top:-56px}

/* ── Logósáv háttere ──────────────────────────────────────────────────────
   A design SAJÁT eszközeiből épül, nem új színekből:
     - mélység: ugyanaz a `panel-2 -> panel` radiális, mint a hero mögött;
     - ragyogás: a `--glow-hero`, amit a hero és a záró szakasz is használ;
     - raszter: a márka-gradiens 115°-os SZÖGÉBEN futó hajszálvonalak.
   Az átlós raszter szöge nem véletlen: a `--grad` is 115deg, így a sáv
   ugyanabba az irányba „dől", mint minden gomb és kiemelés az oldalon.

   A raszter és a ragyogás `pointer-events:none` — a logók fölöttük ülnek,
   és a sáv kattintható marad. */
.trust{position:relative; overflow:hidden;
  background:radial-gradient(130% 150% at 50% 0%, var(--panel-2), var(--panel) 62%)}

.trust::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-70%; height:240%;
  background:radial-gradient(closest-side at 50% 50%, var(--glow-hero), transparent 72%);
  pointer-events:none;
}
.trust::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg,
    rgba(91,212,103,.07) 0 1px, transparent 1px 15px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* A tartalom a diszites FOLOTT. Enelkul a raszter a logokra is rafeszulne. */
.trust__head, .trust .strip{position:relative; z-index:1}

/* ── Logósáv: EGY világos felület a hét kis doboz helyett ─────────────────
   A logók többsége sötét rajzolatú (mérve: Richter, Egis, Azúr, MESI.LIFE),
   ezért világos háttéren áll jól. Egyetlen széles, lekerekített felület
   sokkal nyugodtabb, mint hét apró keret — a logók így a saját színükkel,
   de doboz nélkül látszanak. */
.strip--surface{
  position:relative;
  background:#F4F6F4;
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  padding:22px 0;
  margin:0 clamp(16px, 4vw, 40px);

  /* ⚠ A design él-maszkja (`mask-image`) MAGÁT a felületet is átlátszóvá
     tenné a két szélén — a világos sáv úgy nézne ki, mintha szétfolyna.
     A maszkot ezért kikapcsoljuk, és helyette a felület SAJÁT SZÍNÉBE
     úsztatjuk ki a logókat két fedő réteggel. */
  -webkit-mask-image:none;
  mask-image:none;
}
.strip--surface::before,
.strip--surface::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(32px, 6vw, 72px);
  z-index:2; pointer-events:none;
}
.strip--surface::before{left:0; background:linear-gradient(90deg,#F4F6F4,rgba(244,246,244,0))}
.strip--surface::after{right:0; background:linear-gradient(270deg,#F4F6F4,rgba(244,246,244,0))}

/* A felületen már NEM kell külön lap a logók alá. */
.strip--surface .strip__plate{background:none; border:0; padding:0}

/* Az egyetlen FEHÉR jel (46° Balaton) másképp eltűnne: sötétre fordítjuk.
   Nem szín-csere, hanem a monokróm logó másik, sötét változata. */
.strip--surface .strip__plate--invert .strip__logo{filter:invert(1)}

/* ── Világos témában NINCS felület a logók alatt ──────────────────────────
   A logók többsége sötét rajzolatú, tehát világos témában a lap SAJÁT
   háttere is jó nekik — a világos csík ott csak egy fölösleges doboz lenne.
   Sötét témában viszont kell, különben a sötét jelek eltűnnének.

   Ilyenkor visszakapcsoljuk a design eredeti él-maszkját: az átlátszóságba
   úsztat, ezért BÁRMILYEN háttéren jó — nem kell hozzá tudni, milyen színű
   a sáv éppen. */
:root[data-theme="light"] .strip--surface{
  background:none; border:0; border-radius:0; padding:0;
  margin-left:0; margin-right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
:root[data-theme="light"] .strip--surface::before,
:root[data-theme="light"] .strip--surface::after{display:none}

/* ⚠ A sötétre fordítás VILÁGOS témában is kell: a 46° Balaton jele fehér,
   az a világos lapon ugyanúgy eltűnne, mint a világos csíkon. */

/* ── Kapcsolat-űrlap (blocks/contact ÉS a demó-modal) ─────────────────────
   Korábban a contact partial <style> blokkjában élt, de a modal ugyanezt
   az űrlapot használja — két helyen tartva biztosan szétcsúszna. */
.end .end__lead { max-width: 46rem; margin-left: auto; margin-right: auto; }

    .vkform { max-width: 520px; margin: 32px auto 0; text-align: left; }
    .vkform__trap { position: absolute; left: -9999px; }

    .vkform__row { display: grid; gap: 14px; }
    @media (min-width: 560px) { .vkform__row { grid-template-columns: 1fr 1fr; } }

    .vkform__field { display: block; margin-bottom: 14px; }
    .vkform__field > span {
        display: block; margin-bottom: 6px;
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted, #8CA096);
    }
    .vkform__field input,
    .vkform__field textarea {
        display: block; width: 100%; box-sizing: border-box;
        padding: 13px 16px; font: inherit; font-size: 15.5px;
        color: var(--text, inherit);
        background: var(--panel, rgba(127, 127, 127, .08));
        border: 1px solid var(--edge, rgba(127, 127, 127, .26));
        border-radius: 14px;
        transition: border-color .18s;
    }
    .vkform__field textarea { resize: vertical; min-height: 120px; }
    .vkform__field input::placeholder,
    .vkform__field textarea::placeholder { color: var(--placeholder, rgba(127, 127, 127, .7)); }
    .vkform__field input:focus,
    .vkform__field textarea:focus { outline: 0; border-color: var(--accent, #5BD467); }

    .vkform .btn { width: 100%; margin-top: 6px; }

    .vkform__err { margin: -8px 0 12px; font-size: 14.5px; color: var(--err, #FF9E9E); }
    .vkform__ok {
        margin-bottom: 16px; padding: 12px 16px; border-radius: 14px;
        border: 1px solid var(--accent, #5BD467);
        background: color-mix(in srgb, var(--accent, #5BD467) 14%, transparent);
    }

    .end .end__contact { margin-top: 20px; font-size: .95rem; color: var(--muted, #8CA096); }
    .end .end__contact a { color: inherit; }

/* ── A fejléc fő gombja: „Ingyenes demó oldal" ────────────────────────────
   2026-08-27-től a logó melletti pille helyett rendes gomb (a „Beszéljünk"
   gomb kinézetével), és az a gomb kikerült — egy fejlécben egy fő CTA legyen.
   A fejléc tapadó, tehát ez VÉGIG látszik: ezért nincs már a lapok alján
   külön kapcsolat-szakasz. */
.top__demo{white-space:nowrap}
.top__demo b{font-weight:800}
@media(max-width:660px){
  .top__demo{padding:9px 14px; font-size:13px}
  /* Szűk kijelzőn csak a lényeg: „Ingyenes". */
  .top__demo b + br{display:none}
}

/* ── Színes kártyák (cards, „spectrum" kinézet) ───────────────────────────
   Kártyánként saját kiemelő szín. A paletta a márka-gradiens (zöld → lime →
   sárga) körül mozog, plusz pár hideg árnyalat — így színes, de nem esik szét
   az „Éjszakai műszak" hangulata.

   ⚠ A kiemelő szín SEHOL nem lesz szövegszín a panelen: a sárga (#DDDE26) egy
   világos kártyán olvashatatlan lenne. Csak a felső sáv és a sorszám-chip
   HÁTTERE használja, a chip szövege pedig sötét — az mindkét témában olvasható. */
.tile--spectrum{position:relative; overflow:hidden}
.tile--spectrum::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--tile-accent), transparent 88%);
}
.tile__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:14px; border-radius:11px;
  background:var(--tile-accent); color:#08120D;
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.tile--spectrum:hover{
  border-color:color-mix(in srgb, var(--tile-accent) 55%, transparent);
  box-shadow:0 10px 34px color-mix(in srgb, var(--tile-accent) 16%, transparent);
}

/* A színes szakasz címe ugyanazt a márka-gradienst kapja, mint a hero címe. */
.secHead__grad{
  background:var(--grad-ink); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* Ha egy lapon nincs hero, az első szakasz címe a lap h1-e — ugyanúgy nézzen
   ki, mint a h2-k, csak a szerkezet más. */
.secHead h1{font-size:clamp(1.9rem,3.5vw,2.8rem); margin:16px 0 0}

/* Kartya sajat CTA-ja (pl. a „Weboldal" csempe demo-gombja).
   A kartya aljara ul, sajat sorban — a szoveg es a gomb kozott legyen levego,
   kulonben ugy nez ki, mintha a bekezdes resze lenne. */
.tile__cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:16px;
}

/* A világos sávon a `dark` lap MEGMARAD: van logó, ami saját, fekete hátteret
   hoz magával (Next Restaurant — a felirat fehér). Enélkül egy kemény fekete
   téglalap ülne a világos felületen; így lekerekített, sötét lapon áll.
   A háttér PONTOSAN a logó saját fekete alapja, hogy ne látszódjon az éle. */
.strip--surface .strip__plate--dark{
  background:#000; border:0; padding:8px 14px; border-radius:12px;
}

/* ── „Ahogy most megy" → „Ahogy mehetne" PÁRONKÉNT ────────────────────────
   A két hasáb helyett soronként EGY pár, közte nyíllal: így látszik, hogy a
   bal oldali mondatból a jobb oldali lesz. A bal oldal halkabb (ez a mai
   állapot), a jobb oldal a márkaszínt viszi (ez a cél). */
.swap{display:flex; flex-direction:column; gap:14px}

.swap__head{
  display:grid; grid-template-columns:1fr 52px 1fr; gap:0 10px;
  padding:0 22px 2px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.swap__head > :first-child{color:var(--muted)}
.swap__head > :last-child{color:var(--accent)}

.swap__row{
  display:grid; grid-template-columns:1fr 52px 1fr; gap:0 10px; align-items:stretch;
  border:1px solid var(--edge); border-radius:20px; overflow:hidden;
  background:var(--panel);
}
.swap__cell{display:flex; flex-direction:column; justify-content:center; padding:20px 22px}
.swap__cell p{margin:0; font-size:15.6px; line-height:1.5}
.swap__cell--now p{color:var(--muted)}
.swap__cell--next{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow:inset 1px 0 0 var(--edge);
}

/* A címke csak MOBILON kell: ott nincs közös fejléc a két oszlop fölött. */
.swap__tag{display:none}

.swap__arrow{
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.swap__arrow svg{width:22px; height:22px}

@media(max-width:820px){
  .swap__head{display:none}
  .swap__row{grid-template-columns:1fr; gap:0}
  .swap__cell{padding:16px 18px}
  .swap__cell--next{box-shadow:inset 0 1px 0 var(--edge)}
  .swap__arrow{padding:2px 0 6px}
  .swap__arrow svg{transform:rotate(90deg)}

  .swap__tag{
    display:block; margin-bottom:6px;
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  .swap__cell--next .swap__tag{color:var(--accent)}
}

/* ── Gazdagabb belépő animáció — CSAK a kezdőlapon ────────────────────────
   Ott dől el az első benyomás, ezért ott engedünk több mozgást: hosszabb út,
   egy hajszálnyi méret-változás és lágyabb kifutás. A belső lapok a
   visszafogott alapváltozatot tartják meg — ott az olvasás a lényeg.

   A LÉPCSŐZÉST a layout JS-e adja hozzá (`transition-delay`), mert azt csak
   futásidőben lehet tudni, mely elemek léptek be egyszerre. */
[data-anim="rich"] [data-reveal]{
  transform:translateY(28px) scale(.985);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),
             transform .78s cubic-bezier(.16,1,.3,1);
}
[data-anim="rich"] [data-reveal].is-in{transform:none}

/* A szakasz-fejléc BELÜL is lépcsőzik: címke → cím → felvezető.
   Ez egy `data-reveal` elem, ezért a gyerekeit külön animáljuk. */
@keyframes vkRise{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}
[data-anim="rich"] .secHead.is-in > *{animation:vkRise .62s cubic-bezier(.16,1,.3,1) both}
[data-anim="rich"] .secHead.is-in > :nth-child(2){animation-delay:.09s}
[data-anim="rich"] .secHead.is-in > :nth-child(3){animation-delay:.18s}

/* ⚠ A `[data-reveal]` visszafogása feljebb már `!important`-tal megvan, de a
   fejléc-animáció külön kikapcsolást igényel: az `animation` nem onnan jön. */
@media(prefers-reduced-motion:reduce){
  [data-anim="rich"] .secHead.is-in > *{animation:none}
}

/* ── Csupasz CTA-gomb két szakasz között ──────────────────────────────────
   Nem záró sáv: nincs háttere, nincs címe — csak egy középre zárt gomb, ami
   felkínál egy lépést ott, ahol a látogató éppen tart. A szűk térköz
   SZÁNDÉKOS: a fölötte álló szakaszhoz tartozik, nem külön blokk. */
.ctaOnly{padding:6px 0 34px}
.ctaOnly .wrap{display:flex; justify-content:center}

/* ── Üzenet-doboz (a `cta` blokk „csak gomb" változata) ───────────────────
   A lap minden más eleme kártyán ül, ezért egy magában álló gomb kilógott a
   ritmusból. Kis doboz: cím + egy sor + egy NAGY gomb.

   Szűk felső térköz: a fölötte álló szakaszhoz tartozik, nem külön blokk. */
.ctaOnly{padding:4px 0 42px}
.ctaOnly .wrap{display:flex; justify-content:center}

.ctaBox{
  width:100%; max-width:640px; text-align:center;
  padding:32px 28px 34px; border-radius:22px;
  border:1px solid var(--edge);
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
}
.ctaBox h3{font-size:1.42rem; letter-spacing:-.02em; line-height:1.2}
.ctaBox p{margin-top:10px; color:var(--muted); font-size:15.4px; line-height:1.55}
.ctaBox .btn{margin-top:22px}

/* Nagyobb gomb — a doboz fő eleme, nem egy a sok közül. */
.btn--lg{padding:19px 34px; font-size:16.6px}

@media(max-width:560px){
  .ctaBox{padding:26px 20px 28px}
  .ctaBox .btn{width:100%}
}

/* ── Nincs világos csík a logók alatt (2026-08-27, user-kérés) ────────────
   A logók a lap SAJÁT hátterén állnak — ugyanaz a kezelés, ami eddig csak
   világos témában futott.

   Sötét témában viszont a saját szín nem működne: a sötét rajzolatú jelek
   (Egis, MESI.LIFE, Térmenedzsment, 46° Balaton) beleolvadnának a háttérbe.
   Ezért ott EGYSÉGESEN fehér sziluettként állnak — pontosan úgy, ahogy a
   referencia-kártyákon (`.refTile__logo`) már eddig is. Világos témában
   marad a saját márkaszín. Lásd lentebb a `--dark` kivételét. */
.strip--surface{
  background:none; border:0; border-radius:0; padding:0;
  margin-left:0; margin-right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.strip--surface::before,
.strip--surface::after{display:none}

/* Sötét témában a logók FEHÉR SZILUETTKÉNT állnak: a csík nélkül a sötét
   rajzolatú jelek eltűnnének. Nem szín-csere, hanem monokróm változat —
   ugyanaz, amit a referencia-kártyák is használnak. */
:root[data-theme="dark"] .strip__plate:not(.strip__plate--dark):not(.strip__plate--color) .strip__logo{
  filter:brightness(0) invert(1); opacity:.88;
}

/* ⚠ KIVÉTEL: ami SAJÁT SÖTÉT HÁTTERET hoz (Next Restaurant — fehér felirat
   fekete alapon), azt nem szabad sziluetté fordítani: a `brightness(0)` az
   egész fekete téglalapot befogná, és `invert(1)` után egy TÖMÖR FEHÉR
   doboz maradna, a felirat nélkül. Az ilyen jel a saját alapjával áll, ami
   a sötét lapba beleolvad — pont ezt akarjuk. */
.strip__plate--dark{background:none; border:0; padding:0}
.strip--surface .strip__plate--dark{background:none; border:0; padding:0}

/* ⚠ MÁSIK KIVÉTEL: a KITÖLTÖTT jelek (`plate => 'color'`). A sziluett csak a
   vonalas logóknál működik; egy tömör, többszínű jelnél (BaloBau: piros-
   fekete-fehér csillag) a `brightness(0)` az egészet befogja, és tömör fehér
   folt marad belőle. Ezek a saját színükkel állnak, sötét témában is.
   A besorolás MÉRÉS alapján megy (átlátszóság + átlag-világosság), nem szemre. */
.strip__plate--color{background:none; border:0; padding:0}

/* ── Köszönő doboz a modalban (küldés után, újratöltés nélkül) ────────────
   Az űrlap eltűnik, ez marad a helyén. Középre zárt, hogy egyértelmű legyen:
   itt vége van, nincs több teendő. */
.vkdone{text-align:center; padding:14px 4px 6px}
.vkdone__tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin-bottom:16px; border-radius:999px;
  background:var(--grad); color:#08120D;
}
.vkdone__tick svg{width:28px; height:28px}
.vkdone h3{font-size:1.5rem; letter-spacing:-.02em}
.vkdone__text{margin-top:10px; color:var(--muted); font-size:15.4px; line-height:1.55}
.vkdone .btn{margin-top:22px; width:auto; min-width:160px}

/* Az űrlap burka a modalban. Saját megjelenése nincs — küldés után EZ tűnik
   el, és a köszönő doboz marad a helyén.

   ⚠ A `hidden` működését KIÍRJUK: egy `display` szabály máshonnan (pl. egy
   leszármazott-szabály a modalra) némán felülírhatná a böngésző alapértelmezett
   `[hidden]{display:none}`-ját, és akkor küldés után az űrlap ott maradna a
   köszönő doboz mellett. */
.cmodal__body{display:block}
.cmodal__body[hidden]{display:none}

/* ── Márkanév a jel mellett a logósávban ──────────────────────────────────
   Csak ott kell, ahol a logó ÖNMAGÁBAN nem mondja meg, ki az: a Richter
   „RG" monogramja és a doBanana banánja jel-logó, felirat nélkül — a többi
   (EGIS, Azúr, LANDVENTURE, MESI.LIFE, Térmenedzsment) viszi a nevét.

   A szín a LOGÓÉ (a képből mérve: Richter #0050A0, doBanana #FFC300), így a
   jel és a név egy egységként olvasódik.

   ⚠ Sötét témában a sáv logói FEHÉR SZILUETTKÉNT állnak (lásd fentebb), ezért
   a név is fehér. Egy sötétkék felirat egy fehér jel mellett két külön
   dolognak látszana — ráadásul a sötét háttéren alig lenne olvasható.

   A `.strip__item b` a márka-gradienst vágja a szövegbe; azt itt mind a három
   tulajdonságában vissza kell venni, különben a saját szín nem látszik. */
.strip__item b.strip__name{
  /* A vastagsag logonkent allithato: a doBanana felirata vekonyabb betus,
     mint a Richtere — egy kozos ertek az egyiket mindig elrontja. */
  font-size:19px; font-weight:var(--logo-name-weight, 800); letter-spacing:-.02em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--logo-name, var(--text));
}
/* Sötét témán a saját, sötét háttérre szánt márkaszín — ha nincs megadva,
   fehér, mint a jel sziluettje. A doBanana sárgája itt ragyog (17:1), a
   Richter kékje viszont csak világítottabb árnyalatban olvasható. */
:root[data-theme="dark"] .strip__item b.strip__name{ color:var(--logo-name-dark, #fff); opacity:.95 }

/* ── „Műszak"-váltó a láblécben ───────────────────────────────────────────
   A design aláírása („Éjszakai műszak") mostantól kapcsoló is. A felirat és
   a jel azt mondja, HOVA váltasz — nem azt, hol állsz: világos témán hold +
   „Éjszakai műszak", sötéten nap + „Nappali műszak".

   A váltást a `data-theme` vezérli, nem JS: így a helyes felirat már az első
   festéskor kint van, és nem villan át. A rejtett feliratot a `display:none`
   a képernyőolvasó elől is elveszi, tehát nem hangzik el mindkettő. */
.foot__shift{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; opacity:.85; transition:opacity .16s, color .16s;
}
.foot__shift:hover{opacity:1; color:var(--accent)}
.foot__shift:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.foot__shift__ic{width:15px; height:15px; flex:none}

/* Alap (világos téma): a HOLD látszik, az éjszakai műszakra hív. */
.foot__shift__ic--sun,
.foot__shift__day{display:none}

:root[data-theme="dark"] .foot__shift__ic--moon,
:root[data-theme="dark"] .foot__shift__night{display:none}
:root[data-theme="dark"] .foot__shift__ic--sun{display:block}
:root[data-theme="dark"] .foot__shift__day{display:inline}

/* A név a jel ALATT — ott, ahol a logó saját apró alcíme olvashatatlan
   (Next Restaurant: a „restaurant" 40 px-en eltűnik). Kisebb, ritkított
   betű: így a logó alcímeként olvasódik, nem külön feliratként. */
.strip__item--stack{flex-direction:column; gap:3px; text-align:center}
.strip__item--stack b.strip__name{font-size:12px; letter-spacing:.22em; text-transform:lowercase}
