/* NEXTON System Kft. — stíluslap
   Arculati alap: villamos kapcsolási rajz. Mély petrol alap, réz vezetékszín,
   kondenzált betű a táblafeliratokhoz, mono a műszaki adatokhoz. */

:root{
  --ejfel:#0B1F27;
  --acel:#143642;
  --acel-vil:#1E4E5D;
  --rez:#C2661F;
  --rez-vil:#E39A5C;
  --kod:#E7EDEE;
  --papir:#F6F9F9;
  --feher:#fff;
  --szoveg:#0B1F27;
  --halvany:#5C7481;
  --vonal:#D3DDDF;
  --max:1180px;
  --sug:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--papir);
  color:var(--szoveg);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto}
a{color:var(--acel-vil);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--rez);outline-offset:3px}

.burok{max-width:var(--max);margin:0 auto;padding:0 24px}

/* --- tipográfia --- */
h1,h2,h3,h4{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.1em}
.vezeto{font-size:clamp(1.05rem,1.7vw,1.24rem);color:#294B58;max-width:62ch}

.cimke{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rez);
  display:inline-block;
  margin-bottom:.9rem;
}
.cimke::before{content:"— ";opacity:.6}

/* --- fejléc --- */
.fejlec{
  position:sticky;top:0;z-index:50;
  background:rgba(11,31,39,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.fejlec-belso{display:flex;align-items:center;gap:1.4rem;height:70px}
.marka{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:700;font-size:1.3rem;letter-spacing:.06em;
  color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:.45rem;
}
.marka span{font-weight:300;font-size:.78rem;letter-spacing:.2em;color:var(--rez-vil);text-transform:uppercase}
.menu{margin-left:auto;display:flex;gap:.3rem;align-items:center}
.menu a{
  color:#CBD9DD;text-decoration:none;font-size:.94rem;
  padding:.5rem .72rem;border-radius:var(--sug);
}
.menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--rez)}
.menu .gomb-kicsi{background:var(--rez);color:#fff;font-weight:600}
.menu .gomb-kicsi:hover{background:#D5751F}
.hamburger{
  margin-left:auto;display:none;background:none;border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:var(--sug);padding:.45rem .7rem;font:inherit;font-size:.9rem;cursor:pointer;
}

/* --- gombok --- */
.gomb{
  display:inline-block;background:var(--rez);color:#fff;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:var(--sug);font-weight:600;
  border:1px solid var(--rez);transition:background .18s ease,transform .18s ease;
}
.gomb:hover{background:#D5751F;transform:translateY(-1px)}
.gomb.vonalas{background:transparent;color:var(--acel);border-color:var(--vonal)}
.gomb.vonalas:hover{background:#fff;border-color:var(--acel);transform:none}
.gomb.vilagos{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.gomb.vilagos:hover{background:rgba(255,255,255,.12)}
.gombsor{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

/* --- hero --- */
.hero{
  background:
    radial-gradient(1100px 460px at 78% -8%,rgba(194,102,31,.22),transparent 62%),
    linear-gradient(178deg,var(--ejfel) 0%,#0E2933 100%);
  color:#EAF1F2;padding:clamp(3.6rem,8vw,6.4rem) 0 0;
  overflow:hidden;
}
.hero h1{color:#fff;max-width:16ch}
.hero .kiemelt{color:var(--rez-vil)}
.hero p{color:#B9CBD1;max-width:56ch;font-size:1.1rem}
.hero-racs{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-adat{
  display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-adat div{max-width:210px}
.hero-adat strong{
  display:block;font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:1.05rem;color:#fff;margin-bottom:.15rem;
}
.hero-adat span{font-size:.88rem;color:#93AAB2;line-height:1.45;display:block}

/* --- egyvonalas séma (aláírás-elem) --- */
.sema{margin-top:2.4rem;padding-bottom:2.4rem}
.sema svg{width:100%;display:block}
.aram{
  stroke-dasharray:7 11;
  animation:aramlas 2.4s linear infinite;
}
@keyframes aramlas{to{stroke-dashoffset:-36}}
@media (prefers-reduced-motion:reduce){.aram{animation:none;stroke-dasharray:none}}
.sema-felirat{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  fill:#8FA7AF;letter-spacing:.04em;text-transform:uppercase;
}
.sema-nev{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:13px;fill:#fff;font-weight:600}

/* --- szekciók --- */
.szekcio{padding:clamp(3.4rem,6.5vw,5.6rem) 0}
.szekcio.kod{background:var(--kod)}
.szekcio.sotet{background:var(--ejfel);color:#DCE7E9}
.szekcio.sotet h2{color:#fff}
.szekcio.sotet p{color:#A9BFC6}
.szekcio-fej{max-width:72ch;margin-bottom:2.6rem}

/* --- kártyák --- */
.racs{display:grid;gap:1.2rem}
.racs.ketto{grid-template-columns:repeat(2,1fr)}
.racs.harom{grid-template-columns:repeat(3,1fr)}
.racs.negy{grid-template-columns:repeat(4,1fr)}

.kartya{
  background:var(--feher);border:1px solid var(--vonal);border-radius:var(--sug);
  padding:1.7rem;display:flex;flex-direction:column;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.kartya:hover{border-color:#A8BDC2;box-shadow:0 10px 30px rgba(11,31,39,.07)}
.kartya h3{margin-bottom:.45rem}
.kartya p{color:#3E5C68;font-size:.97rem;margin-bottom:1rem}
.kartya .tovabb{
  margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rez);text-decoration:none;
}
.kartya .tovabb::after{content:" →"}
.kartya .tovabb:hover{text-decoration:underline}
.kartya .sorszam{
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--halvany);
  letter-spacing:.12em;margin-bottom:.9rem;
}

/* --- lista pipákkal --- */
.pipas{list-style:none;padding:0;margin:0}
.pipas li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:#3E5C68}
.pipas li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;
  border:2px solid var(--rez);background:transparent;
}
.szekcio.sotet .pipas li{color:#A9BFC6}

/* --- folyamat --- */
.folyamat{counter-reset:lepes;display:grid;gap:0;border-top:1px solid var(--vonal)}
.folyamat-elem{
  display:grid;grid-template-columns:80px 1fr;gap:1.6rem;
  padding:1.5rem 0;border-bottom:1px solid var(--vonal);
}
.folyamat-elem .szam{
  font-family:"IBM Plex Mono",monospace;color:var(--rez);font-size:.86rem;letter-spacing:.1em;padding-top:.25rem;
}
.folyamat-elem h3{margin-bottom:.25rem}
.folyamat-elem p{margin:0;color:#3E5C68;font-size:.97rem}

/* --- kiemelt sáv --- */
.savszalag{
  background:var(--acel);color:#fff;border-radius:var(--sug);
  padding:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1.4fr auto;
  gap:2rem;align-items:center;
}
.savszalag h2{color:#fff;margin-bottom:.4rem}
.savszalag p{color:#B6CCD3;margin:0;max-width:60ch}

/* --- adatlap --- */
.adatlap{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid var(--vonal)}
.adatlap th,.adatlap td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--vonal);vertical-align:top}
.adatlap th{
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--halvany);width:34%;
}
.adatlap tr:last-child th,.adatlap tr:last-child td{border-bottom:none}

/* --- űrlap --- */
.urlap{display:grid;gap:1rem;max-width:560px}
.urlap label{display:block;font-size:.88rem;color:var(--halvany);margin-bottom:.3rem}
.urlap input,.urlap select,.urlap textarea{
  width:100%;padding:.72rem .85rem;border:1px solid var(--vonal);border-radius:var(--sug);
  font:inherit;background:#fff;color:var(--szoveg);
}
.urlap textarea{resize:vertical;min-height:130px}

/* --- lábléc --- */
.lablec{background:var(--ejfel);color:#8FA7AF;padding:3.4rem 0 2rem;font-size:.92rem}
.lablec a{color:#C3D4D8;text-decoration:none}
.lablec a:hover{text-decoration:underline}
.lablec h4{
  color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;font-weight:500;margin-bottom:1rem;
}
.lablec-racs{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem}
.lablec-racs ul{list-style:none;padding:0;margin:0}
.lablec-racs li{margin-bottom:.5rem}
.lablec-alj{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;
}
.kitolt{color:var(--rez-vil);font-family:"IBM Plex Mono",monospace;font-size:.9em}

/* --- reszponzív --- */
@media (max-width:980px){
  .hero-racs{grid-template-columns:1fr;gap:2rem}
  .racs.negy{grid-template-columns:repeat(2,1fr)}
  .racs.harom{grid-template-columns:repeat(2,1fr)}
  .savszalag{grid-template-columns:1fr}
  .lablec-racs{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .hamburger{display:block}
  .menu{
    display:none;position:absolute;top:70px;left:0;right:0;
    background:var(--ejfel);flex-direction:column;align-items:stretch;
    padding:.7rem 24px 1.2rem;gap:.15rem;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .menu.nyitva{display:flex}
  .menu a{padding:.75rem .5rem}
  .menu .gomb-kicsi{text-align:center;margin-top:.5rem}
  .racs.ketto,.racs.harom,.racs.negy{grid-template-columns:1fr}
  .folyamat-elem{grid-template-columns:1fr;gap:.3rem}
  .lablec-racs{grid-template-columns:1fr}
  .hero-adat{gap:1.4rem}
}