@charset "UTF-8";
/* A „Kérj élő bemutatót” ablak (főoldal, Termékek) és az egyedi jelölőnégyzet (ablak + Kapcsolat űrlap).
   Az oldalak saját, régi .panel szabályait az #leadModal előtag írja felül. */

/* ── jelölőnégyzet: sötét, a háttérbe olvad; bejelölve a márka színátmenete ── */
#leadModal .consent input[type=checkbox], .hozzajarulas input[type=checkbox]{
  -webkit-appearance:none; appearance:none; flex:0 0 22px; width:22px; height:22px; margin:1px 0 0; padding:0; border-radius:7px; cursor:pointer;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.05); box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transition:background .2s, border-color .2s, box-shadow .2s; }
#leadModal .consent input[type=checkbox]:hover, .hozzajarulas input[type=checkbox]:hover{ border-color:rgba(0,212,200,.6); }
#leadModal .consent input[type=checkbox]:checked, .hozzajarulas input[type=checkbox]:checked{ border-color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,
    linear-gradient(135deg,#8b30c9,#5b4be6 50%,#2f6fe8); box-shadow:0 0 0 3px rgba(91,75,230,.2); }
#leadModal .consent input[type=checkbox]:focus-visible, .hozzajarulas input[type=checkbox]:focus-visible{ outline:2px solid #00d4c8; outline-offset:2px; }
.hozzajarulas input[type=checkbox]:user-invalid{ border-color:rgba(255,130,130,.75); }

/* ── az ablak ── */
#leadModal{ padding:16px; }
#leadModal .veil{ background:rgba(3,5,10,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#leadModal .panel{ position:relative; isolation:isolate; width:min(880px,100%); max-height:calc(100svh - 32px); overflow:auto; padding:0; border:0; border-radius:26px;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:radial-gradient(120% 80% at 0% 0%,rgba(0,212,200,.12),transparent 55%),linear-gradient(180deg,rgba(18,27,48,.97),rgba(8,13,26,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 40px 100px -30px rgba(0,0,0,.9); }
#leadModal .panel::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(0,212,200,.55),rgba(255,255,255,.08) 32%,rgba(255,255,255,.04) 68%,rgba(91,140,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
#leadModal .x{ position:absolute; z-index:2; top:14px; right:14px; width:42px; height:42px; display:grid; place-items:center; padding:0; border-radius:50%;
  color:#c9d4e3; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); font-size:0; line-height:0; cursor:pointer; transition:background .2s, color .2s; }
#leadModal .x:hover{ color:#fff; background:rgba(255,255,255,.1); }
#leadModal .x svg{ width:18px; height:18px; }

/* bal oszlop: miért érdemes, mi történik utána */
#leadModal .lm-oldal{ padding:38px 34px 34px; border-right:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column;
  background:radial-gradient(90% 70% at 0% 100%,rgba(139,48,201,.16),transparent 70%); }
#leadModal .lm-kicker{ font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#00d4c8; }
#leadModal .panel h3{ margin-top:14px; font-size:clamp(1.7rem,3vw,2.2rem); font-weight:700; letter-spacing:-.03em; line-height:1.08; color:#f4f8ff; }
#leadModal .panel h3 em{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:700; -webkit-text-stroke:min(.03em,1.3px) transparent; letter-spacing:0; padding-right:.08em; white-space:nowrap;
  background:linear-gradient(120deg,#8b30c9,#3f6fd1,#00d4c8,#3f6fd1,#8b30c9); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:gradFlow 9s linear infinite; }
@keyframes gradFlow{ to{ background-position:-220% 0; } }
#leadModal .lm-oldal .sub{ margin:14px 0 0; color:#a9b6c9; font-size:.98rem; line-height:1.6; }
#leadModal .lm-lepes{ list-style:none; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
#leadModal .lm-lepes li{ display:flex; align-items:center; gap:12px; font-size:.95rem; font-weight:600; color:#e6edf6; }
#leadModal .lm-lepes b{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; color:#04161a;
  background:linear-gradient(135deg,#6ff2e9,#00d4c8); }
#leadModal .lm-lepes small{ display:block; font-size:.84rem; font-weight:400; color:#8f9db5; }
#leadModal .lm-kontakt{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:8px; font-size:.92rem; color:#c9d4e3; }
#leadModal .lm-kontakt a{ display:inline-flex; align-items:center; gap:10px; width:fit-content; min-height:32px; color:#e6edf6; }
#leadModal .lm-kontakt a:hover{ color:#00d4c8; }
#leadModal .lm-kontakt svg{ width:16px; height:16px; flex:none; fill:none; stroke:#00d4c8; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* jobb oszlop: az űrlap */
#leadModal form, #leadModal .ok{ grid-column:2; grid-row:1; padding:38px 34px 32px; }
#leadModal .lm-mezok{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }
#leadModal .lm-mezo{ display:flex; flex-direction:column; gap:7px; }
#leadModal .lm-mezo.teljes{ grid-column:1 / -1; }
#leadModal .panel label{ margin:0; font-size:.86rem; font-weight:600; letter-spacing:0; text-transform:none; color:#dfe6f2; }
#leadModal .panel label .opc{ font-weight:400; color:#8f9db5; }
#leadModal .panel input:not([type=checkbox]), #leadModal .panel textarea{ width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045); color:#f4f8ff; font:inherit; font-size:1rem; outline:none; transition:border-color .2s, box-shadow .2s; }
#leadModal .panel textarea{ min-height:112px; resize:vertical; line-height:1.55; }
#leadModal .panel input::placeholder, #leadModal .panel textarea::placeholder{ color:#6f7f99; }
#leadModal .panel input:not([type=checkbox]):focus, #leadModal .panel textarea:focus{ border-color:rgba(0,212,200,.7); box-shadow:0 0 0 3px rgba(0,212,200,.18); }
#leadModal .panel .consent{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; font-size:.86rem; font-weight:400; line-height:1.55; color:#a9b6c9; cursor:pointer; }
#leadModal .panel .consent a{ color:#00d4c8; border-bottom:1px solid rgba(0,212,200,.4); }
#leadModal .panel .send{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; margin-top:22px; padding:0 24px; border:0; border-radius:100px; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:#fff; background:linear-gradient(120deg,#8b30c9,#5b4be6 50%,#2f6fe8); }
#leadModal .panel .send:disabled{ opacity:.6; cursor:progress; }
#leadModal .panel .ok{ display:none; align-self:center; text-align:center; }
#leadModal .panel .ok .big{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; font-size:1.8rem; color:#04161a; background:linear-gradient(135deg,#6ff2e9,#00d4c8); }
#leadModal .panel .ok h3{ margin-top:0; }
#leadModal .panel .ok .sub{ margin-top:10px; color:#a9b6c9; font-size:.98rem; }
#leadModal .panel.done form{ display:none; }
#leadModal .panel.done .ok{ display:block; }

@media (max-width:760px){
  #leadModal{ padding:10px; align-items:flex-end; }
  #leadModal .panel{ grid-template-columns:minmax(0,1fr); max-height:calc(100svh - 20px); border-radius:22px; }
  #leadModal .lm-oldal{ padding:26px 22px 4px; border-right:0; background:none; }
  #leadModal .lm-lepes, #leadModal .lm-kontakt{ display:none; }
  #leadModal form, #leadModal .ok{ grid-column:1; grid-row:2; padding:18px 22px 24px; }
  #leadModal .lm-mezok{ grid-template-columns:minmax(0,1fr); margin-top:6px; }
}
@media (prefers-reduced-motion:reduce){ #leadModal .x, #leadModal .panel input, #leadModal .panel textarea, .hozzajarulas input{ transition:none; } #leadModal .panel h3 em{ animation:none; } }