/* XPERI 24×7 — minden oldalon azonos alapstílus. */
:root{ --navy:#0f2a4a; --navy-2:#14355c; --blue:#0064c8; --blue-dark:#004f9e; --red:#e8483c; --bg:#f4f7fb; --bg-card:#ffffff; --text-gray:#5b6b7c; --text-light:#8a97a6; --border:#e4eaf1; --radius:14px; --maxw:1400px; --maxw-wide:1680px; --pad:32px; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--navy); background:var(--bg); line-height:1.5; }
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img,svg{display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
header{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px var(--pad); max-width:var(--maxw-wide); margin:0 auto; gap:18px; }
.logo{display:flex; align-items:center; gap:10px;}
.logo-dots{width:36px; height:36px; flex-shrink:0;}
.logo-text{display:flex; flex-direction:column; line-height:1.1;}
.logo-text .name{font-size:21px; font-weight:800; color:var(--navy); letter-spacing:0.5px;}
.logo-text .tag{font-size:9px; font-weight:700; color:var(--text-light); letter-spacing:0.6px;}

/* --- Fejléc logó bevezető animációja. Korábban ez minden oldal saját
       <style> blokkjában szerepelt külön-külön, ezért két oldalról
       (adatkezelés, impresszum) hiányzott is. Innen mind a kilenc oldal
       ugyanazt kapja, és egyetlen helyen hangolható.
       Az ütem rövidebb lett: korábban az "XPERI" alatti felirat csak a
       3,5. másodperc után kezdett látszani és az 5,5.-nél lett kész —
       addigra a látogató már máshová néz, így a beúszás elveszett. --- */
#brandDotRing{transform-origin:20px 20px; transition:transform 1.6s cubic-bezier(.5,0,.2,1);}
#brandDotRing circle{transition:fill .35s ease, opacity .35s ease;}
#headerLogo .logo-dots{position:relative; z-index:2; background:#fff;}
#headerLogo .logo-text{position:relative; z-index:1;}
#headerLogo .logo-text .name{color:var(--blue); opacity:1; transform:translateX(0); transition:opacity .7s ease .12s, transform 1.35s cubic-bezier(.2,.7,.2,1);}
#headerLogo .logo-text .tag{color:var(--text-light); opacity:1; transform:translateX(0); transition:opacity 1.05s cubic-bezier(.35,0,.35,1), transform 1.25s cubic-bezier(.2,.7,.2,1);}
#headerLogo .logo-text .name.pending{opacity:0; transform:translateX(-46px);}
#headerLogo .logo-text .tag.pending{opacity:0; transform:translateX(-22px);}
#headerLogo.intro-init #brandDotRing{transition:none !important;}
#headerLogo.intro-init #brandDotRing circle{transition:none !important;}
#headerLogo.intro-init .logo-text .name,
#headerLogo.intro-init .logo-text .tag{transition:none !important;}
nav{display:flex; gap:27px; flex-wrap:wrap;}
.header-actions{display:flex; align-items:center; gap:20px; flex-shrink:0; margin-right:calc(-1 * max(0px, (100vw - var(--maxw-wide)) / 2) + 56px);}
nav a{ font-size:11px; font-weight:700; letter-spacing:0.1px; color:var(--navy-2); white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; transition:.15s; }
nav a:hover{color:var(--blue); border-bottom-color:var(--blue);}
nav a.nav-current{color:var(--blue); border-bottom-color:var(--blue);}
.nav-divider{width:1px; height:14px; background:var(--border); align-self:center; margin:0 2px;}
nav a.nav-back{color:var(--text-light); font-weight:700;}
nav a.nav-back:hover{color:var(--blue); border-bottom-color:transparent;}
.btn{ display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; letter-spacing:0.4px; padding:13px 22px; border-radius:9px; cursor:pointer; border:1.5px solid transparent; transition:.15s; white-space:nowrap; }
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{background:transparent; color:var(--blue); border-color:var(--blue);}
.btn-outline:hover{background:var(--blue); color:#fff;}
.btn-pill{border-radius:999px; padding:15px 28px; font-size:13px;}
/* A gomb hosszú felirata az alapértelmezett; a rövidet a szűk táblagépes
   lépcső kapcsolja be. */
.cta-rovid{display:none;}

.lang-switch{display:flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0;}
.lang-btn{font-size:11px; font-weight:800; letter-spacing:0.4px; padding:7px 11px; background:#fff; color:var(--text-light); border:none; cursor:pointer; transition:.15s; font-family:inherit;}
.lang-btn:hover{color:var(--blue);}
.lang-btn.active{background:var(--blue); color:#fff;}
footer{background:#0b2038; color:#a9b7c9; padding:64px 0 28px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
footer .logo-text .name{color:#fff;}
footer .logo{margin-bottom:14px;}
footer p.desc{font-size:13px; line-height:1.6; max-width:260px;}
footer h4{color:#fff; font-size:13px; font-weight:800; letter-spacing:0.6px; margin-bottom:16px; text-transform:uppercase;}
footer ul li{margin-bottom:10px; font-size:13.5px;}
footer ul li a:hover{color:#fff;}
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; font-size:12px; color:#7c8ba0; flex-wrap:wrap; gap:10px; }
/* --- A fejléc egy sorban tartása ---------------------------------------
   Erősebb kiválasztó (header ...), mert az oldalak saját stílusa később
   töltődik be, és azonos erősségnél felülírná ezeket. */
@media (max-width: 1439px){
  header .header-actions{gap:10px; margin-right:0;}
  header .header-actions .btn{padding:9px 15px; font-size:11px;}
  header .lang-btn, header a.lang-btn{padding:5px 8px; font-size:10px;}
}
@media (max-width: 1366px){
  header .header-inner{padding:16px 16px; gap:10px;}
  header nav{gap:10px;}
  header nav a{font-size:10px; letter-spacing:0;}
  header .header-actions{gap:8px;}
  header .header-actions .btn{padding:9px 13px; font-size:10.5px; letter-spacing:.2px;}
  header .cta-hosszu{display:none;}
  header .cta-rovid{display:inline;}
}
@media (max-width: 1120px){
  /* 1024 px — a klasszikus táblagép fekvő tartásban. */
  header .header-inner{padding:16px 12px; gap:8px;}
  header nav{gap:7px;}
  header nav a{font-size:9.5px;}
  header .header-actions{gap:6px;}
  header .header-actions .btn{padding:8px 11px; font-size:10px;}
  header .lang-btn, header a.lang-btn{padding:5px 6px; font-size:9.5px;}
}

/* --- Reszponzív fejléc és lábléc. Ezek a szabályok a közös elemekre
       vonatkoznak, ezért itt a helyük, nem az egyes oldalak stílusában. --- */
@media (max-width: 980px){
  nav{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 620px){
  .header-inner{padding:14px 16px; gap:8px;}
  .header-inner .btn{padding:10px 14px; font-size:11px;}
  .lang-btn, a.lang-btn{padding:6px 8px; font-size:10px;}
  /* A felirat korábban itt teljesen eltűnt (display:none), ezért keskeny
     ablakban — pl. az előnézet oldalsó paneljében vagy telefonon — az
     "XPERI" alatt nem volt semmi. Elrejtés helyett zsugorodik. */
  .logo-text .tag{font-size:8px; letter-spacing:.2px; white-space:nowrap;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 420px){
  .header-inner{gap:6px;}
  .header-inner .btn{padding:9px 11px; font-size:10px; letter-spacing:.2px;}
  .logo-dots{width:30px; height:30px;}
  .logo-text .name{font-size:18px;}
  .logo-text .tag{font-size:7px; letter-spacing:-.1px;}
  /* Nagyon keskeny kijelzőn a 32 px-es oldalmargó már többet vesz el,
     mint amennyit ad — ettől lógott ki vízszintesen a tartalom. */
  :root{--pad:20px;}
}
@media (max-width: 374px){
  /* 375 px alatt a logó + nyelvváltó + ajánlatkérő gomb együtt már nem fér
     el egy sorban a felirattal — ott (és csak ott) marad az elrejtés. */
  .logo-text .tag{display:none;}
}
/* Az angol felirat ("IT SECURITY & MANAGED SERVICES") jóval hosszabb a
   magyarnál, ezért keskeny kijelzőn korábban kell zsugorítani, 414 px alatt
   pedig — ahol az ajánlatkérő gombbal együtt semmiképp nem fér el — elmarad. */
@media (max-width: 459px){
  html[lang="en"] .logo-text .tag{font-size:7px; letter-spacing:-.1px;}
}
@media (max-width: 413px){
  html[lang="en"] .logo-text .tag{display:none;}
}

/* Közösségi ikonsor a láblécben — csak akkor jelenik meg, ha a
   config.php-ban van kitöltött cím. */
.kozosseg{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.kozosseg a{width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.07);
  color:#a9b7c9; transition:background .15s, color .15s, transform .15s;}
.kozosseg a:hover{background:var(--blue); color:#fff; transform:translateY(-2px);}
.kozosseg svg{width:17px; height:17px;}

/* --- Sütisáv -------------------------------------------------------
   A lap aljához tapad, keskeny, és nem takarja el a tartalmat: a
   látogató elolvashatja anélkül, hogy bármit el kellene tüntetnie. */
.suti-sav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#0b2038; color:#c8d6e8; border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -8px 30px rgba(9,26,47,.22);
  animation:sutiFel .32s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sutiFel{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.suti-sav{animation:none;}}
.suti-belso{
  max-width:var(--maxw-wide); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.suti-szoveg{font-size:12.5px; line-height:1.6; margin:0; flex:1 1 320px; min-width:0;}
.suti-szoveg a{color:#8fc4ff; font-weight:700; text-decoration:underline; white-space:nowrap;}
.suti-szoveg a:hover{color:#fff;}
.suti-gombok{display:flex; gap:10px; flex:0 0 auto;}
.suti-gomb{
  font:inherit; font-size:12px; font-weight:800; letter-spacing:.3px;
  padding:9px 18px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.suti-fo{background:var(--blue); color:#fff;}
.suti-fo:hover{background:#0057b0;}
.suti-halk{background:transparent; color:#c8d6e8; border-color:rgba(255,255,255,.28);}
.suti-halk:hover{border-color:#fff; color:#fff;}
.suti-gomb:focus-visible{outline:2px solid #8fc4ff; outline-offset:2px;}
/* A „Beállítások" nem gomb kinézetű: nem versenyez az elfogadással
   és az elutasítással, de ugyanúgy elérhető. */
.suti-szoveges{background:transparent; color:#8fc4ff; text-decoration:underline;
  padding:9px 6px; border:0;}
.suti-szoveges:hover{color:#fff;}

/* --- A részletes panel ---------------------------------------------
   Nem külön ablak: a sáv fölé nyílik ki, a lap látható marad mögötte.
   Csak akkor létezik egyáltalán, ha legalább két külön cél van. */
.suti-panel{border-top:1px solid rgba(255,255,255,.12); background:#081a2e;
  max-height:56vh; overflow-y:auto;}
.suti-panel-belso{display:block; padding-top:16px; padding-bottom:16px;}
.suti-cel{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);}
.suti-cel h4{margin:0 0 3px; font-size:13px; color:#eaf2fb; letter-spacing:.2px;}
.suti-cel p{margin:0; font-size:12px; line-height:1.55; color:#9fb2c8; max-width:82ch;}
.suti-cel input[type=checkbox]{width:18px; height:18px; margin:1px 0 0; accent-color:var(--blue); cursor:pointer;}
label.suti-cel{cursor:pointer;}
label.suti-cel:hover h4{color:#fff;}
.suti-mindig{font-size:9.5px; font-weight:800; letter-spacing:.8px; color:#7d8fa3;
  background:rgba(255,255,255,.07); border-radius:4px; padding:4px 7px; white-space:nowrap; margin-top:1px;}
.suti-panel-gombok{display:flex; gap:10px; flex-wrap:wrap; padding-top:15px;}

@media (max-width:620px){
  /* Mobilon a szöveg és a gombsor egymás alá kerül, ezért itt minden
     méret egy fokkal kisebb: így a sáv a képernyőnek csak a töredékét
     foglalja el, és a lap alja továbbra is olvasható marad alatta. */
  .suti-belso{padding:10px 14px; gap:9px;}
  .suti-szoveg{font-size:11.8px; line-height:1.5; flex-basis:100%;}
  .suti-gombok{width:100%; gap:8px; flex-wrap:wrap;}
  .suti-gomb{flex:1; padding:8px 10px; font-size:11.5px; letter-spacing:0;}
  .suti-szoveges{flex:0 0 100%; order:-1; text-align:left; padding:0 0 2px;}
  .suti-panel{max-height:46vh;}
  .suti-panel-belso{padding-top:12px; padding-bottom:12px;}
  .suti-cel{gap:10px; padding:9px 0;}
  .suti-cel p{font-size:11.5px;}
  .suti-panel-gombok{gap:8px; padding-top:12px;}
  .suti-panel-gombok .suti-gomb{flex:1 1 100%;}
}