/* Jelszavaim – sötét petrol alap, sárgaréz kiemelés, széfrekesz-rács textúra */
:root{
  --ink:#0c1a20; --ink-2:#12262f; --panel:#152c36; --line:#2b4954;
  --fg:#e9f0ec; --muted:#9db2b5; --brass:#d8a23f; --brass-hi:#f2c66b; --brass-ink:#241904;
  --paper:#f6efe0;
  --f-display:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  background-image:
    radial-gradient(1000px 560px at 78% -6%, rgba(46,104,122,.55), transparent 65%),
    linear-gradient(var(--ink-2) 2px, transparent 2px),
    linear-gradient(90deg, var(--ink-2) 2px, transparent 2px);
  background-size:auto, 120px 76px, 120px 76px;
}
img{max-width:100%;height:auto}
a{color:var(--brass-hi)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.belso{max-width:1080px;margin:0 auto;padding-left:max(18px, env(safe-area-inset-left,0px));padding-right:max(18px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
.felcim{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi);font-weight:700}

/* Fejléc */
.fejlec{padding-block:18px}
.fejlec-sor{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marka{display:flex;align-items:center;gap:10px;color:var(--brass);text-decoration:none}
.marka svg{width:32px;height:32px}
.marka span{color:var(--fg);font-family:var(--f-display);font-weight:800;font-size:21px}
.cimke{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:5px 12px}

/* Hős */
.hos{padding-block:36px 64px}
.hos-racs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:48px;align-items:center}
.hos-szoveg{display:flex;flex-direction:column;gap:20px}
.hos h1{font-size:clamp(34px,5.4vw,58px);font-weight:800}
.hos h1 em{font-style:normal;color:var(--brass-hi);display:block;margin-top:.15em}
.bevezeto{font-size:19px;color:var(--muted);max-width:56ch}
.gombsor{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.gomb{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:14px;font-weight:700;text-decoration:none;font-size:16px}
.gomb-fo{background:var(--brass);color:var(--brass-ink);opacity:.75;cursor:default}
.gomb-masod{border:1px solid var(--line);color:var(--fg);background:rgba(21,44,54,.6)}
.gomb-masod:hover{border-color:var(--brass)}

.hos-kep{display:flex;justify-content:center}
.kartya{
  width:100%;max-width:330px;background:var(--paper);color:#13262f;border-radius:22px;padding:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(242,198,107,.35);
  transform:rotate(2.5deg);display:flex;flex-direction:column;gap:12px;align-items:center
}
.kartya-fej{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}
.kartya-figy{background:#13262f;color:var(--brass-hi);border-radius:6px;padding:2px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.kartya img{width:100%;max-width:230px;border-radius:12px}
.kartya-kod{font-family:var(--f-mono);font-weight:700;letter-spacing:.08em;font-size:15px}
.pin{display:flex;align-items:center;gap:12px;background:#13262f;border-radius:12px;padding:10px 16px}
.pin-cim{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;margin-right:4px}
.pin i{width:14px;height:14px;border-radius:50%;background:var(--brass);display:block}

/* Előnyök */
.elony{padding-block:20px 64px}
.elony-racs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.elony article{background:rgba(21,44,54,.85);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px}
.elony-jel{font-family:var(--f-mono);color:var(--brass);font-weight:700;font-size:14px}
.elony h2{font-size:22px}
.elony p{color:var(--muted)}

/* Hogyan */
.hogyan{padding-block:56px}
.szekciocim{font-size:clamp(28px,3.6vw,38px);margin-bottom:28px}
.lepesek{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:lepes}
.lepesek li{counter-increment:lepes;position:relative;padding-top:58px;display:flex;flex-direction:column;gap:8px}
.lepesek li::before{content:counter(lepes);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brass);color:var(--brass-ink);font-weight:800;font-family:var(--f-display);font-size:20px}
.lepesek li:not(:last-child)::after{content:"";position:absolute;top:21px;left:54px;right:-6px;height:2px;background:linear-gradient(90deg,var(--brass),transparent)}
.lepesek h3{font-size:19px}
.lepesek p{color:var(--muted);font-size:16px}

/* Őszinte */
.oszinte{padding-block:24px 56px}
.oszinte-doboz{display:flex;flex-direction:column;gap:14px}
.oszinte-doboz > *{max-width:760px}
.oszinte h2{font-size:clamp(24px,3vw,32px);color:var(--brass-hi)}
.oszinte p{font-size:18px}
.oszinte p + p{color:var(--muted)}
.oszinte-doboz{border-left:4px solid var(--brass);padding-top:6px;padding-bottom:6px}

/* Cég */
.ceg{padding-block:56px;background:linear-gradient(180deg,rgba(21,44,54,.0),rgba(21,44,54,.75) 30%,rgba(21,44,54,.75) 70%,rgba(21,44,54,0))}
.ceg-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.ceg h2{font-size:clamp(26px,3.4vw,36px);margin:8px 0 12px}
.ceg p{color:var(--muted)}
.pipak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pipak li{position:relative;padding-left:36px}
.pipak li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:7px;background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23241904' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat}

/* GYIK */
.gyik{padding-block:56px 72px}
.gyik details{border-top:1px solid var(--line);padding:16px 0;max-width:820px}
.gyik details:last-child{border-bottom:1px solid var(--line)}
.gyik summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary::after{content:"+";color:var(--brass-hi);font-size:24px;line-height:1}
.gyik details[open] summary::after{content:"–"}
.gyik details p{color:var(--muted);margin-top:10px;max-width:68ch}

/* Lábléc */
.lab{border-top:1px solid var(--line);padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:14px}
.lab-sor{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Kapu: belépés + új széf (legfelül) */
.kapu{padding-block:8px 8px}
.kapu-doboz{max-width:440px;margin:0 auto;background:rgba(21,44,54,.92);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.kapu-cim{font-family:var(--f-display);font-weight:800;font-size:22px;text-align:center;margin-bottom:4px}
.gomb-nagy{flex-direction:column;align-items:center;min-height:72px;padding:12px 20px;font-size:19px;gap:2px;text-align:center}
.gomb-nagy small{font-size:13px;font-weight:500;opacity:.8}
.kapu .gomb-fo{opacity:1}
.kapu .gomb-masod{background:transparent;border:2px solid var(--brass);color:var(--brass-hi)}
.kapu-vagy{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.kapu-vagy::before,.kapu-vagy::after{content:"";flex:1;height:1px;background:var(--line)}
.kapu-megj{text-align:center;font-size:13px;color:var(--muted);margin-top:4px}
.hos .hos-cim{font-size:clamp(30px,4.6vw,50px)}

/* Animáció: így működik */
.anim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center;background:rgba(12,26,32,.6);border:1px solid var(--line);border-radius:20px;padding:28px 20px;margin-bottom:18px}
.anim p{text-align:center;color:var(--muted);font-size:14px;margin-top:10px}
.anim-allomas{display:flex;flex-direction:column;align-items:center}
.anim-telefon{width:96px;height:160px;border:3px solid var(--line);border-radius:20px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.anim-lakat{width:38px;height:38px;fill:none;stroke:var(--muted);stroke-width:2;animation:lakat 8s infinite}
.anim-lakat rect{fill:currentColor;fill-opacity:.12}
.anim-kengyel{transform-origin:16px 10px;animation:kengyel 8s infinite}
.anim-pontok{display:flex;gap:8px}
.anim-pontok i{width:11px;height:11px;border-radius:50%;border:2px solid var(--brass);display:block;animation:pont 8s infinite}
.anim-pontok i:nth-child(2){animation-delay:.35s}
.anim-pontok i:nth-child(3){animation-delay:.7s}
.anim-pontok i:nth-child(4){animation-delay:1.05s}
.anim-ut{position:relative;height:100px;display:flex;flex-direction:column;justify-content:center}
.anim-ut::before{content:"";position:absolute;left:0;right:0;top:40px;border-top:2px dashed var(--line)}
.anim-csomag{position:absolute;top:26px;left:0;font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--brass-ink);background:var(--brass);border-radius:8px;padding:4px 8px;white-space:nowrap;animation:csomag 8s infinite}
.anim-ut p{position:absolute;left:0;right:0;top:56px}
.anim-szerver{width:120px;border:3px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 10px;display:flex;flex-direction:column;gap:6px;animation:szerver 8s infinite}
.anim-szerver span{font-family:var(--f-mono);font-size:11px;color:var(--muted);background:var(--ink);border-radius:5px;padding:3px 6px;letter-spacing:.04em;overflow:hidden}
.anim-feliratok{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:f}
.anim-feliratok li{counter-increment:f;font-size:15px;color:var(--muted);border-top:3px solid var(--line);padding-top:10px}
.anim-feliratok li::before{content:counter(f) ". ";color:var(--brass-hi);font-weight:800}
.anim-feliratok li:nth-child(1){animation:f1 8s infinite}
.anim-feliratok li:nth-child(2){animation:f2 8s infinite}
.anim-feliratok li:nth-child(3){animation:f3 8s infinite}
@keyframes pont{0%,8%{background:transparent}12%,88%{background:var(--brass)}94%,100%{background:transparent}}
@keyframes lakat{0%,26%{stroke:var(--muted);color:var(--muted)}32%,88%{stroke:var(--brass-hi);color:var(--brass-hi)}94%,100%{stroke:var(--muted);color:var(--muted)}}
@keyframes kengyel{0%,26%{transform:none}34%,88%{transform:translateY(-3px) rotate(-28deg)}94%,100%{transform:none}}
@keyframes csomag{0%,38%{left:0;opacity:0}42%{opacity:1}70%{left:calc(100% - 92px);opacity:1}76%,100%{left:calc(100% - 92px);opacity:0}}
@keyframes szerver{0%,70%{border-color:var(--line)}76%,92%{border-color:var(--brass)}100%{border-color:var(--line)}}
@keyframes f1{0%,30%{color:var(--fg);border-color:var(--brass)}36%,100%{color:var(--muted);border-color:var(--line)}}
@keyframes f2{0%,30%{color:var(--muted);border-color:var(--line)}36%,62%{color:var(--fg);border-color:var(--brass)}68%,100%{color:var(--muted);border-color:var(--line)}}
@keyframes f3{0%,62%{color:var(--muted);border-color:var(--line)}68%,96%{color:var(--fg);border-color:var(--brass)}100%{color:var(--muted);border-color:var(--line)}}
@media (max-width:640px){
  .anim{grid-template-columns:1fr;gap:6px;padding:22px 16px}
  .anim-ut{height:90px}
  .anim-feliratok{grid-template-columns:1fr}
}

/* Mobil */
@media (max-width:900px){
  .hos-racs{grid-template-columns:1fr;gap:40px}
  .elony-racs{grid-template-columns:1fr}
  .lepesek{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lepesek li::after{display:none}
  .ceg-racs{grid-template-columns:1fr;gap:24px}
}
@media (max-width:520px){
  body{font-size:16px}
  .lepesek{grid-template-columns:1fr}
  .kartya{transform:none}
  .bevezeto{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.anim-pontok i{background:var(--brass)}.anim-lakat{stroke:var(--brass-hi)}.anim-csomag{left:calc(50% - 46px);opacity:1}}