/* ======= Paletta (könnyen cserélhető) ======= */
:root {
  --bg:#0B0F19; --surface:#121826; --text:#fff; --muted:#94A3B8;
  --primary:#00E5FF; --secondary:#A855F7; /* <— legyen benne */
}


/* ======= Alap ======= */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ======= Fejléc / Navigáció ======= */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,15,25,.85);
  backdrop-filter: blur(8px);
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--primary);
}
nav a {
  color: var(--text);
  margin-right: 1rem;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  transition: color .2s ease, text-shadow .2s ease;
  
}
.nav .nav__link { margin: 0 !important; }
@media (max-width: 820px) {
  .nav__links {
    /* régi: padding: .75rem; */
    padding-block: .75rem;
    padding-inline: 1rem;        /* <<< két oldalt ugyanakkora */
    box-sizing: border-box;
  }
}

nav a:hover {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(0,229,255,.6);
}

/* ======= Címsorok ======= */
h1, h2, h3 {
  color: var(--primary);
  margin: 1.2rem 0 .6rem;
}
p { color: var(--text); }
.small, .muted { color: var(--muted); }

/* ======= Linkek ======= */
a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }

/* ======= Szekció szélesség ======= */
main { max-width: 980px; margin: 0 auto; padding: 1.25rem; }

/* ======= Kártyák ======= */
.card {
  position: relative;
  background: rgba(18, 24, 38, 0.55); /* áttetsző felület */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute; inset: -1px;
  pointer-events: none;
  border-radius: 16px;
  background:
    radial-gradient(600px 200px at -10% -10%, rgba(0,229,255,.14), transparent 60%),
    radial-gradient(500px 180px at 110% 120%, rgba(255,23,68,.12), transparent 60%);
  opacity: .9;
}
.project:hover {
  border-color: rgba(0,229,255,.45);
  box-shadow: 0 16px 44px rgba(0,229,255,.20), 0 10px 24px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
/* ======= Projektek rács ======= */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  align-items: stretch;   /* minden oszlop ugyanolyan magas lesz */
}

.project {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 12px 40px rgba(0,229,255,.15);
}




.link-underline {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Kis finomhangolás a Hero-hoz */
.hero { padding-top: 3.5rem; }
.hero__lead { max-width: 65ch; opacity: .96; }
/* ======= Láb ======= */
footer {
  text-align: center;
  padding: 1.25rem;
  border-top: 2px solid var(--primary);
  color: var(--muted);
  margin-top: 2rem;
}
/* ======= Hero ======= */
.hero {
  padding: 4rem 1.25rem 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center; /* !!! szöveg középre */
}
.hero__eyebrow {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .5rem;
}
/* Cím */
.hero__title {
  font-size: clamp(2.2rem, 3.2vw + 1rem, 3.6rem); /* kisebb tartomány */
  max-width: 22ch;
  margin: 0 auto 1rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  text-align: center;
}


.hero__title-accent {
  display: block;
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(0,229,255,.25);
}
/* Bekezdések */
.hero__lead {
  max-width: 55ch;     /* kb. 55–60 karakter */
  margin: 0.75rem auto 0; /* középre és lélegzőbb spacing */
  line-height: 1.75;
  font-size: 1.1rem;
  color: #EAFBFF;
  opacity: .95;
  text-align: center;
}

/* Gombok középre */
.hero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.4rem;
}
.link-underline { color: var(--primary); text-decoration: underline; }

/* ======= Badges & KPIs ======= */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.badge {
  border: 1px solid rgba(255,255,255,.14);
  background: var(--surface);
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
}
.badge--line { border-color: var(--primary); }
/* ======= KPIs – rugalmas és mobilbarát ======= */
.kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* rugalmas oszlopok */
  gap: .8rem;
  margin-top: 1rem;
}

.kpi{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .9rem;
  text-align: center;

  /* fontos a tördeléshez/kilógás ellen */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;                 /* <<< ez akadályozza meg a kilógást gridben */
}

.kpi__num{
  font-size: clamp(1.1rem, 3.8vw, 1.6rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.kpi__label{
  color: var(--muted);
  font-size: clamp(.85rem, 2.8vw, .95rem);
  line-height: 1.25;
  margin-top: .2rem;

  /* agresszívebb tördelés hosszú szavaknál is */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-wrap: pretty;
}

/* Mobil – általános: 2 oszlop, kisebb padding */
@media (max-width: 560px){
  .kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .kpi{ padding: .75rem; }
}

/* Extra kicsi kijelző: 1 oszlop */
@media (max-width: 360px){
  .kpis{ grid-template-columns: 1fr; }
  .kpi{ padding: .7rem; }
}

/* ======= Lists & Steps ======= */
.list { padding-left: 1.1rem; }
.list li { margin: .4rem 0; }
.steps { padding-left: 1.2rem; }
.steps li { margin: .35rem 0; }

/* ======= Responsive grids ======= */
.grid-3 {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-2 {
  display: grid; gap: 1rem; margin: 1rem 0 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero__ctas { flex-wrap: wrap; }
}
/* ======= Projects – erősebb kontraszt hover ======= */
.projects .project {
  display: flex;
  flex-direction: column; 
  background: rgba(9,12,20,0.72);            /* sötétebb alap */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 1rem;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: background-color .25s ease, transform .2s ease,
              box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.projects .project-body {
  flex: 1;              /* kitölti a rendelkezésre álló helyet */
}

.projects .project-footer {
  margin-top: auto;     /* gombokat az aljára tolja */
  display: flex;
  justify-content: center; /* középre vagy stretch-re */
}
.projects .project:hover {
  background: rgba(9,12,20,0.97);            /* sötétebb, nem halványodik */
  border-color: #00E5FF;                      /* cián keret */
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 50px rgba(0,0,0,.65),    /* mély árnyék */
              0 0 0 2px rgba(0,229,255,.25);  /* finom gyűrű */
}
.projects .project h2 { color: #00E5FF; }
.projects .project p,
.projects .project li { color: #FFFFFF; opacity: .96; }
.projects .project:hover p,
.projects .project:hover li { opacity: 1; }

/* Linkek a project kártyákban – jól látszanak kéken is */
.projects .project a { color: #00E5FF; text-decoration: underline; }
.projects .project a:hover { color: #FF1744; }

/* Ha a projekteknél véletlenül a .card overlay is rákerülne, halkítsuk: */
.projects .project.card::after { opacity: .08; }


/* a globális 'a:hover' CIÁN színét NEM alkalmazzuk a .btn-re */


/* Projets (kék/cián) gomb szöveg mindig sötét maradjon */


/* Alternatív gomb: lila, jobban passzol a kékkel, mint a piros */


/* ======= Glass blur hover a KÁRTYÁKON ======= */
/* Alap: simább animációk minden kártyán */
.card,
.projects .project {
    display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  will-change: transform, backdrop-filter;
  transition:
    transform .22s ease,
    box-shadow .28s ease,
    border-color .25s ease,
    background-color .25s ease,
    backdrop-filter .25s ease,
    -webkit-backdrop-filter .25s ease,
    opacity .25s ease;
}
.projects .project ul {
  margin-bottom: 1rem;      /* legyen kis térköz a lista és a gomb között */
}
/* ===== Projekt kártyák – gomb igazítás ===== */
.projects .project {
  display: flex;
  flex-direction: column;   /* tartalom fent, gomb lent */
}

.projects .project ul {
  margin-bottom: 1rem;      /* legyen kis térköz a lista és a gomb között */
}

.projects .project .btn {
  margin-top: auto;         /* minden tartalom fölé kerül */
  align-self: center;       /* középre rakja vízszintesen */
  width: fit-content;       /* csak amekkora kell */
}




/* Hover: erősebb blur + kicsit sötétebb háttér, cián keret és fénygyűrű */
.card:hover,
.projects .project:hover {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: rgba(18, 24, 38, 0.78);
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 2px rgba(0,229,255,.20),
    0 0 36px rgba(0,229,255,.18);
}

/* Finom „glow” overlay a széleken – hoverkor jelenik meg */
.card::before,
.projects .project::before {
  content: "";
  position: absolute; inset: -16px;
  pointer-events: none;
  border-radius: 16px;
  background:
    radial-gradient(220px 140px at 0% -10%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(220px 140px at 110% 120%, rgba(168,85,247,.16), transparent 60%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}
.card:hover::before,
.projects .project:hover::before { opacity: 1; }

/* Aktív (lenyomott) állapot – picit „besüllyed” */
.card:active,
.projects .project:active {
  transform: translateY(-2px) scale(0.995);
}

/* Akadálymentesség: ha valaki csökkentett animációt kér, halkítsuk vissza */
@media (prefers-reduced-motion: reduce) {
  .card, .projects .project { transition: none; }
}
/* ===== Rólam – hero ===== */
.about-hero {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.2rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}
.avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden; /* levágja a kép széleit kör alakban */
  box-shadow:
    0 0 0 4px rgba(255,255,255,.06),
    0 8px 30px rgba(0,0,0,.5),
    0 0 40px rgba(0,229,255,.18);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* szépen kitölti, nem torzul */
  display: block;
}
.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  margin-bottom: .25rem;
}
.lead { max-width: 65ch; opacity: .96; }

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.chip {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(18,24,38,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .35rem .6rem; border-radius: 999px; font-size: .85rem;
}
.chip--line { border-color: var(--primary); }

/* KPI sor a Rólamhoz – laposabb, elegánsabb */
.kpis--about { margin: 1rem 0 1.2rem; }
.kpis--about .kpi { padding: 1.1rem .9rem; }

/* Quote */
.quote {
  margin: .9rem 0 0;
  padding: .9rem 1rem;
  border-left: 3px solid var(--primary);
  background: rgba(18,24,38,.55);
  border-radius: 8px;
  color: #E6F9FC;
  font-style: italic;
}

/* Timeline */
.timeline {
  position: relative;
  display: grid;
  row-gap: 1.1rem;
  margin-top: .8rem;
}

/* A középső vonal a bal oszlop közepén fut (28px széles a bal oszlop -> közepe 14px) */
.t-dot {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #001015;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 4px;
}

/* Minden elem két oszlop: 28px (pötty) + tartalom */
.t-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: start;
}

.t-dot {
  width: 28px;
  height: 28px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--primary);
  color: #001015;          /* jól olvasható sötét szöveg */
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(0,229,255,.2), 0 4px 12px rgba(0,229,255,.25);
}


.t-content h3 {
  margin: 0 0 .25rem;
  line-height: 1.2;
  color: var(--primary);
}
.t-content p {
  margin: 0;
  color: #fff;
  opacity: .95;
}

/* ===== Services – layout ===== */
.s-hero h1 { margin: 0 0 .25rem; }
.service-grid {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .service-grid { grid-template-columns: 1fr; } }

/* Szolgáltatás kártya fej – ikon + cím */
.service-card { padding-bottom: 1rem; }          /* kis belső buffer alul */
.service-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }



/* Feature lista – check jelölők */
.feature-list { list-style: none; padding-left: 0; margin: .6rem 0 0; }
.feature-list li {
  position: relative; padding-left: 1.6rem; margin: .35rem 0;
}
.feature-list li::before {
  content: "✔"; position: absolute; left: 0; top: .05rem;
  width: 1.1rem; height: 1.1rem; line-height: 1.1rem; text-align: center;
  font-size: .82rem; color: #001015; font-weight: 900;
  background: var(--primary); border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0,229,255,.18);
}

/* Kártya CTA sor */
.card-cta { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }

/* Folyamat lépések */
.flow-steps {
  list-style: none; padding-left: 0; margin: .6rem 0 0;
  display: grid; gap: .5rem;
}
.step-dot {
  display: inline-grid; place-items: center; margin-right: .5rem;
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, #A855F7, #7C3AED); /* lilás akcentus */
  color: #fff; font-weight: 900;
  box-shadow: 0 0 0 3px rgba(168,85,247,.25), 0 6px 16px rgba(168,85,247,.25);
}

/* CTA banner – két oszlop, glow háttér */
.cta-banner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 1rem; margin-top: 1rem; position: relative;
}
.cta-banner::before {
  content: ""; position: absolute; inset: -2px; border-radius: 16px; pointer-events: none;
  background:
    radial-gradient(400px 160px at -10% -10%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(400px 160px at 110% 120%, rgba(168,85,247,.16), transparent 60%);
  filter: blur(8px);
}
.cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Hover blur a szolgáltatás kártyákon erősebb kiemeléssel */
.service-card {
  overflow: hidden;               /* maradjon */
  display: flex;                  /* tartalom fent, CTA lent */
  flex-direction: column;
  min-height: 100%;
}

.service-card:hover {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: rgba(18, 24, 38, 0.78);
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 2px rgba(0,229,255,.20),
    0 0 36px rgba(0,229,255,.18);
}

/* A gombsor mindig a kártya alján, egységes elrendezéssel */
.service-card .feature-list { margin-bottom: 1rem; }
.service-card .card-cta { padding-top: .3rem; }  /* ne tapadjon a listához */

.service-card .card-cta {
  margin-top: auto;                 /* letolja aljára */
  display: grid;
  grid-template-columns: 1fr 1fr;   /* desktop: két gomb egymás mellett */
  gap: .6rem;
  align-items: stretch;
}

.service-card .btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: .75rem 1rem;
  font-size: .95rem;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Ha túl hosszú a felirat (pl. „Időpontot egyeztetek”), hagyhatjuk törni: */
/* .service-card .btn { white-space: normal; } */

/* Mobilon a két gomb egymás alatt, szép gap-pel */
@media (max-width: 700px) {
  .service-card .card-cta { grid-template-columns: 1fr; }
}

/* Extra: a felső ikon-cím blokk ne remegjen különböző címhosszoknál */
.service-head h2 { line-height: 1.2; margin: 0; }
.service-head { min-height: 40px; } /* stabil sor magasság */
/* ==== CTA gombok NE lógjanak ki a szolgáltatás-kártyákból ==== */
.service-card { padding-bottom: 1rem; }          /* kis belső buffer alul */
.service-card .card-cta { padding-top: .3rem; }  /* ne tapadjon a listához */

/* Contained buttons: nincs külső glow, belső gyűrű + pici drop */
.service-card .btn,
.service-card .btn.btn--alt {
  position: relative;
  overflow: hidden;                 /* a belső effektek a gombon belül maradnak */
  box-shadow: none !important;      /* külső árnyék le */
  border: 0;
}

/* Alap (cián) gomb – kontrasztosabb, sötétebb gradient */
.service-card .btn {
  background: linear-gradient(135deg, #00D6F2 0%, #009CB8 100%);
  color: #001015;
}
.service-card .btn::after {
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(0,229,255,.45),   /* belső gyűrű */
    0 4px 10px rgba(0,0,0,.20);            /* pici drop, nem lóg ki */
  pointer-events:none;
}

/* Alternatív (lila) gomb – egységes stílus */
.service-card .btn--alt {
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  color: #fff !important;
}
.service-card .btn--alt::after {
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(168,85,247,.45),
    0 4px 10px rgba(0,0,0,.20);
  pointer-events:none;
}

/* Hover/active – finom, de nem lóg ki */
.service-card .btn:hover,
.service-card .btn--alt:hover { transform: translateY(-1px); filter: saturate(1.06); }
.service-card .btn:active,
.service-card .btn--alt:active { transform: translateY(0); filter: saturate(1.0); }

/* Biztos ami biztos: ne kapjanak aláhúzást a gomb-linkek */
.service-card a.btn { text-decoration: none; }

/* ===== Service buttons: ne lógjon ki a szöveg ===== */
.service-card .btn,
.service-card .btn--alt {
  white-space: normal !important;    /* TÖRHET a felirat */
  overflow-wrap: anywhere;           /* törhet bárhol, ha muszáj */
  word-break: break-word;            /* extra biztonság */
  hyphens: auto;                     /* elválasztás (lang="hu" megvan) */
  text-align: center;                /* középre a több sor */
  line-height: 1.2;
  padding: .8rem 1rem;               /* picit több függőleges hely */
  min-height: 48px;                  /* két sor is elférjen */
  box-sizing: border-box;
}
/* ===== Kapcsolat – layout ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 980px) { .form-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; padding-left: 0; }
.contact-list li { margin: .35rem 0; }

/* ===== Form elemek (glass) ===== */
.form .field { margin-bottom: .8rem; }
.form .form-row {
  display: grid;
  gap: .8rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) { .form .form-row { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

.input, .textarea, .select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,24,38,.55);
  color: #fff;
  padding: .75rem .9rem;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input::placeholder, .textarea::placeholder { color: #cbd5e1; opacity: .7; }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,229,255,.22), 0 6px 16px rgba(0,0,0,.35);
  background: rgba(18,24,38,.7);
}

/* üzenet számláló */
.char-counter {
  text-align: right;
  font-size: .8rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* gomb-sor az űrlap alján */
.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .8rem;
}
@media (max-width: 700px) { .form-actions { grid-template-columns: 1fr; } }

.form-actions .btn,
.form-actions .btn--alt {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  min-height: 48px;
}

/* honeypot elrejtése */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; }
/* ======= NAV modern/glassty ======= */
:root { --header-h: 68px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: rgba(11,15,25,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav {
  max-width: 980px; margin: 0 auto;
  height: var(--header-h);
  padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  position: relative;
}

/* Brand */
.nav__brand {
  font-weight: 900; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary, #A855F7));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.1rem; text-decoration: none;
}

/* Links row */
.nav__links { display: flex; gap: .5rem; align-items: center; }
.nav__link {
  display: inline-block;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(18,24,38,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: #EAFBFF; text-decoration: none; font-weight: 600;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nav__link:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.nav__link.active {
  color: #001015;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), #66F0FF);
  box-shadow: 0 8px 22px rgba(0,229,255,.25);
}

/* Hamburger */
.nav__toggle {
  display: none; gap: 5px; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,24,38,.45);
  align-items: center; justify-content: center; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 18px; height: 2px; border-radius: 999px;
  background: #EAFBFF;
}

/* Mobil layout */
@media (max-width: 820px) {
  .nav { padding: 0 .75rem; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    display: grid; gap: .5rem; padding: .75rem;
    background: rgba(11,15,25,.95);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-open .nav__links { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav__link { padding: .7rem .9rem; }
}
/* === Nav & gombok: soha ne legyen aláhúzás === */
.nav__link,
.nav__link:hover,
.nav__link:focus,
.nav__link:focus-visible,
.nav__link.active,
.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible {
  text-decoration: none !important;
}

/* === Csak a TARTALMI linkek kapjanak aláhúzást hoverre === */
main a:not(.btn):not(.nav__link):hover,
.card a:not(.btn):not(.nav__link):hover {
  color: var(--primary);
  text-decoration: underline;
}


/* ===== NAV: vízszintes KÖZÉPRE igazítás (desktop) ===== */
@media (min-width: 821px){
  .nav{
    max-width: 100%;          /* ne szűküljön 980px-re */
    width: 100%;
    height: var(--header-h);
    padding-inline: 0;        /* ne húzza el a padding */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;       /* a ::before/::after-hez */
  }

  /* két rugalmas „spacer”, így a linksor mindig középen marad */
  .nav::before,
  .nav::after{ content:""; flex:1 1 0; }

  .nav__links{
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 0 auto;           /* biztos, ami biztos */
  }

  /* pillákban a szöveg optikailag középen */
  .nav__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    line-height: 1;
  }

  /* ha lenne brand/burger, desktopon rejtsük el */
  .nav__brand, .nav__toggle{ display: none !important; }
}

/* Mobil: marad a meglévő fixed/lenyíló menü */
/* NAV: soft glow + blur a pill mögött, a szöveg nem halványodik */
.nav__link{
  position: relative;
  z-index: 0;
  color:#EAFBFF;                 /* fix nav szövegszín */
  text-shadow:none;
}
.nav__link:hover,
.nav__link:focus,
.nav__link:focus-visible{
  color:#EAFBFF !important;      /* ne váltson ciánra */
}
.nav__link.active{
  color:#001015 !important;      /* sötét szöveg a világos pillen */
}

/* Külső „aura” — enyhén elmosott fény a gomb körül */
.nav__link::before{
  content:"";
  position:absolute;
  inset:-8px;                    /* picit kilógjon a gomb köré */
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(60% 140% at 50% 0%,   rgba(0,229,255,.28), transparent 70%),
    radial-gradient(60% 140% at 50% 100%, rgba(168,85,247,.22), transparent 72%);
  filter: blur(12px);
  opacity:0;
  transition: opacity .25s ease, filter .25s ease;
}

/* Enyhe üvegesítés a pill belsején (nagyon finom) */
.nav__link::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  backdrop-filter: blur(2px) saturate(120%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  opacity:0;
  transition: opacity .25s ease;
}

/* Aktiválás: hover/fókusz/aktív */
.nav__link:hover::before,
.nav__link:focus-visible::before,
.nav__link.active::before{ opacity:1; filter: blur(14px); }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.active::after{ opacity:.08; }

/* (opcionális) egy ici-pici belső gyűrű a hoverre */
.nav__link:hover{
  box-shadow: 0 0 0 3px rgba(0,229,255,.12);
}
/* Form gomb középre igazítása */
.form-actions {
  display: flex;
  justify-content: center; /* vízszintesen középre */
  margin-top: .8rem;
}

.form-actions .btn {
  min-width: 220px; /* opcionális: fix szélesség, hogy szebb legyen */
  text-align: center;
}
.projects-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--muted); /* megmaradjon a halvány szín */
}
.projects-intro {
  text-align: center;
  margin-bottom: 2rem;
}
.s-hero {
  text-align: center;
}

.s-hero h1 {
  margin-bottom: .5rem;
}

.s-hero p {
  max-width: 60ch;       /* hogy ne fusson túl szélesre */
  margin: 0 auto 1rem;   /* középre igazítva */
}
.card.intro {
  text-align: center;
}

.card.intro p {
  max-width: 60ch;
  margin: 0 auto 1rem;  /* középre igazítva */
}
/* Hero tipó finomhangolás: rövidebb sorhossz, szebb tördelés */
.hero {
  padding-top: 3.5rem;
}



.hero__lead{
  max-width: 62ch;                 /* ~60–65 karakteres sor */
  line-height: 1.7;                /* kényelmes sorköz */
  font-size: clamp(1rem, 1.2vw + .9rem, 1.125rem);
  color: #EAFBFF;                  /* picit világosabb, de nem vakító */
  opacity: .96;
  text-wrap: pretty;               /* modernebb tördelés (támogatott böngészőkben) */
  hyphens: auto;                   /* szóelválasztás */
}

.hero__lead + .hero__lead{
  margin-top: .6rem;               /* a két bekezdés között kis tér */
}

/* extra: nagy kijelzőn ne legyen túl széles a teljes hero blokk */
@media (min-width: 1100px){
  .hero { max-width: 60rem; }      /* opcionális „optikai” szélesség */
}
@media (max-width: 420px){
  .hero__title { font-size: clamp(2.2rem, 8vw + .5rem, 3.2rem); }
}
/* ===== Kapcsolat linkek ===== */
.contact-list a {
  color: var(--primary);           /* világos cián */
  text-decoration: none;           /* nincs vonal */
  font-weight: 600;
}

.contact-list a:hover {
  color: var(--secondary);         /* hoverkor lila */
  text-decoration: none;           /* továbbra se legyen vonal */
}
/* Szolgáltatás fejlécek: egységes sor-magasság és ikon doboz */
.service-head{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:56px;                /* egységes header magasság */
}

/* Ikon-doboz: fix méret, jó kontraszt, egységes megjelenés */
.service-icon{
  flex:0 0 48px;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, #00E5FF, #A855F7);
  box-shadow:
    0 0 0 2px rgba(0,229,255,.35) inset,
    0 6px 16px rgba(0,229,255,.25);
}

/* Emoji egységes skálázása (OS-enként eltérő lehet az alapméret) */
.service-icon .emoji {
  font-size: 22px;
  line-height: 1;
  transform: translateY(1px);
  color: #00E5FF; /* világoskék ikon szín */
}


/* Cím ne tolja szét a sort, ne legyen extra margó */
.service-head h2{
  margin:0;
  line-height:1.25;
}

/* Kártyák: teljes magasságra nyúlnak, gombok alul maradnak */
.service-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.service-card .card-cta{ margin-top:auto; }
/* Nyelvváltó alap pozíció (desktop) */
.nav__lang{
  position: absolute;
  top: 50%;
  right: 12px;                 /* teljesen jobb oldal */
  transform: translateY(-50%);
  z-index: 2;                  /* a lenyíló fölött maradjon */
}

/* Stílus: egyezzen a nav pill-ekkel */
.nav__lang .nav__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 .75rem;
  border-radius: 999px;
  background: rgba(18,24,38,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: #EAFBFF;
  font-weight: 600;
}

/* Mobil: a hamburger előtt legyen helye */
@media (max-width: 820px){
  .nav__lang{
    right: 56px;               /* 40px burger + ~16px légrés */
  }
}
/* ===== CTA banner – mobilon oszlopos ===== */
@media (max-width: 700px){
  .cta-banner{
    grid-template-columns: 1fr;   /* egy oszlop */
    align-items: start;
    gap: .9rem;
    text-align: left;              
  }

  .cta-text{ order: 1; }

  .cta-actions{
    order: 2;
    display: grid;
    grid-template-columns: 1fr;   /* gombok egymás alatt */
    gap: .6rem;
    justify-self: stretch;        /* nyúljon ki a kártya szélességére */
    width: 100%;
  }

  .cta-actions .btn{
    width: 100%;
    min-height: 48px;
    text-align: center;
  }
}

/* Extra kicsin még szorosabban */
@media (max-width: 380px){
  .cta-banner{ gap: .75rem; }
  .cta-actions .btn{ min-height: 46px; }
}
/* ===== Függőleges spacing fixek ===== */
:root{
  --card-gap: 16px;      /* kártyák közti egységes távolság */
  --section-gap: 24px;   /* nagyobb blokk(ok) közti távolság */
}

/* Standalone kártyák: kapjanak egységes külső margót felül és alul */
.card{
  margin-block: var(--card-gap);
}

/* De: rácsokban/flex gridben NE kapjanak plusz margót (a gap elég) */
.projects .project,
.projects > .card,
.service-grid > .service-card {
  margin: 0 !important;
}
/* A main-en belüli egymást követő nagy blokkok közt legyen fix köz */
main > * + *{
  margin-top: var(--section-gap);
}

/* Az utolsó főblokk alatt is maradjon levegő (a footer előtt) */
main > :last-child{
  margin-bottom: max(var(--section-gap), 2rem);
}
main > .card + .card{
  margin-top: calc(var(--section-gap) - var(--card-gap)) !important;
}


/* Élő példák kártyái */
.project-thumb {
  width: 100%;
  max-height: 220px;       /* kicsit kisebb, szabályozott magasság */
  object-fit: contain;     /* teljes kép látszik */
  object-position: center; /* középre igazítva */
  background: #0B0F19;     /* háttérszín a fekete kerethez (sötét UI-hoz) */
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px;            /* kis belső margó, hogy legyen levegő a keretben */
  box-sizing: border-box;
}

.live-samples {
  display: flex;
  justify-content: center;   /* középre teszi */
}

.live-samples .project {
  max-width: 420px;          /* ne legyen túl széles */
  width: 100%;
}

.live-samples .project h2 {
  margin-top: 0;
  font-size: 1.15rem;
}
.live-samples .btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #001015;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease;
}
.live-samples .btn:hover {
  transform: translateY(-2px);
}
/* ==== LIVE blokk kiemelés ==== */
.live-wrap{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,24,38,.55);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.live-wrap::before{
  content:"";
  position:absolute;
  transform: translateY(-9999px); /* no stacking issues */
}
.live-wrap .live-samples{ margin-top: .75rem; }

.live-wrap__head{
  text-align: center;
  margin-bottom: .5rem;
}
.live-wrap__head h2{
  margin: .35rem 0 .25rem;
  color: var(--primary);
}
.live-wrap__head p{ margin: 0 auto; max-width: 65ch; }

/* felső sárga-cian „chip” címke */
.live-chip{
  display:inline-block;
  padding:.25rem .6rem;
  font-weight:700; font-size:.8rem; letter-spacing:.06em;
  border-radius:999px;
  color:#001015;
  background: linear-gradient(135deg, var(--primary), #66F0FF);
  box-shadow: 0 6px 18px rgba(0,229,255,.20);
}

/* kártya sarkában LIVE jelvény */
.live-tag{
  position:absolute; top:10px; right:10px;
  z-index:2;
  padding:.18rem .5rem;
  font-size:.7rem; font-weight:800;
  border-radius:999px;
  color:#001015;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 0 2px rgba(0,229,255,.25), 0 6px 16px rgba(0,0,0,.35);
}

/* kártya és kép finomhangolás */
.live-samples{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}
.live-samples .project{ padding:.9rem; }
.project-thumb{
  width:100%;
  max-height:170px;
  object-fit: contain;
  background:#0B0F19;
  border-radius:10px;
  display:block;
  border:1px solid rgba(255,255,255,.12);
  padding:4px; box-sizing:border-box;
  margin-bottom:.75rem;
}
/* ======= Badges & KPIs ======= */
.badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
  justify-content: center;   /* <-- ez hozza középre */
}

.badge{
  border: 1px solid rgba(255,255,255,.14);
  background: var(--surface);
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
}
/* Minden gridben nullázzuk a közvetlen gyerekek margóját */
.kpis > * ,
.grid-2 > * ,
.grid-3 > * ,
.service-grid > * {
  margin: 0 !important;
}
@media (max-width: 560px){
  .chips{
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .chip{
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;         /* egy soros „pill” */
    padding: .45rem .75rem;
    font-size: .9rem;
  }
}
/* Chips – mobilon vízszintes görgetés, AZONOS szélesség */
@media (max-width: 560px){
  :root{ --chip-w: 150px; }        /* itt állítod az egységes szélességet */

  .chips{
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding: .25rem 0 .25rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    scrollbar-width: thin;                      /* Firefox */
  }
  .chips::-webkit-scrollbar{ height: 8px; }     /* WebKit */
  .chips::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
  }
  .chips::-webkit-scrollbar-track{
    background: rgba(255,255,255,.06);
    border-radius: 999px;
  }

  .chip{
    flex: 0 0 var(--chip-w);        /* MIND egyforma szélesség */
    text-align: center;
    scroll-snap-align: start;
    white-space: nowrap;            /* egy soros „pill” */
    padding: .45rem .75rem;
    font-size: .9rem;
  }

  /* Extra kicsin kicsit keskenyebb „pill” */
  @media (max-width:380px){
    :root{ --chip-w: 132px; }
    .chip{ font-size: .88rem; padding: .42rem .7rem; }
  }
}