:root{
  --bg0:#070812;
  --bg1:#090b18;

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);

  --text:#eef2ff;
  --muted:#aab4d6;

  --a:#0f766e;   /* teal */
  --b:#22c55e;   /* green */
  --c:#14b8a6;   /* cyan */

  --shadow: 0 22px 80px rgba(0,0,0,.45);
  --r:18px;
  --r2:24px;
}

2) Header/nav: sötét, pré

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:#0b1c1f;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(34,197,94,.12), transparent 62%),
    radial-gradient(900px 520px at 86% 18%, rgba(20,184,166,.10), transparent 64%),
    linear-gradient(180deg, #f6f4ec, #f1efe6 55%, #ece9df);
}
.muted{ color: var(--muted); }

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
/* typography */
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.3vw,3.1rem);line-height:1.06;margin:0 0 12px}
h2{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;margin:0 0 10px}
h3{font-size:1.15rem;line-height:1.25;margin:0 0 8px}
p{line-height:1.65}
.lead{font-size:1.06rem;color:rgba(14,31,36,.86);max-width:78ch;margin:0}

/* Topbar / Header (ha használod az include header.php-t) */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(254,248,235,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(4,60,75,.10);
}
.topbar__inner{
  display:flex; align-items:center; gap:14px;
  padding:12px 0;
  flex-wrap:wrap;
}

.brand{
  display:flex; align-items:center; gap:12px;
  min-width:260px;
}
.brand__logo{
  width:44px;height:44px;border-radius:12px;object-fit:cover;
  box-shadow: 0 10px 26px rgba(4,60,75,.14);
  border:1px solid rgba(4,60,75,.10);
  background:rgba(255,255,255,.6);
}
.brand__name{font-weight:800}
.brand__tag{font-size:12px;color:var(--muted);margin-top:2px}

.navbtn{
  display:none;
  margin-left:auto;
  border:1px solid rgba(4,60,75,.20);
  background:rgba(255,255,255,.55);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}
.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.nav a{
  font-size:14px;
  padding:10px 10px;
  border-radius:14px;
  color:rgba(14,31,36,.88);
  transition:.15s ease;
}
.nav a:hover{background:rgba(4,60,75,.08)}
.nav a.is-active{
  background:rgba(4,60,75,.12);
  color:var(--brand-900);
  font-weight:800;
}
.main{padding-bottom:40px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  color:#fff;
  font-weight:800;
  border:1px solid rgba(4,60,75,.18);
  background: linear-gradient(135deg, var(--brand-900) 0%, #0E6573 48%, var(--brand-500) 100%);
  box-shadow: 0 12px 26px rgba(4,60,75,.16);
  transition:.15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px)}
.btn--ghost{
  background:rgba(255,255,255,.55);
  color:var(--brand-900);
  border:1px solid rgba(4,60,75,.18);
  box-shadow:none;
}
.btn--sm{padding:10px 12px;border-radius:14px;font-size:14px}

/* Layout blocks used in index.php/about.php */
.section{padding:28px 0}
.section--alt{
  background: rgba(255,255,255,.35);
  border-top:1px solid rgba(4,60,75,.08);
  border-bottom:1px solid rgba(4,60,75,.08);
}

.hero{padding:44px 0 10px}
.hero .container{
  position:relative;
}


.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.card{
  background: var(--card);
  border:1px solid rgba(4,60,75,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:.15s ease;
}
.card:hover{transform:translateY(-1px); background: var(--card-strong)}
.card:before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 22% 24%, rgba(4,60,75,.10), transparent 62%),
    radial-gradient(circle at 78% 72%, rgba(97,121,125,.10), transparent 62%);
  transform: rotate(8deg);
  opacity:.9;
  pointer-events:none;
}
.card > *{position:relative}
.card h2{color:var(--brand-900)}
.card h3{color:var(--brand-900)}
.card ul, .card ol{
  margin:10px 0 0;
  padding-left:18px;
  color:rgba(14,31,36,.84);
}
.card li{margin:8px 0; line-height:1.55}

/* CTA block */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(4,60,75,.10);
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
}

/* Simple page content spacing */
.section .container > h1{margin-bottom:12px}
.section .container > h2{margin-top:18px}

/* Footer (ha használod) */
.footer{
  margin-top:28px;
  background: rgba(4,60,75,.94);
  color: rgba(255,255,255,.92);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:18px;
  padding:22px 0;
}
.footer__title{font-weight:900;margin-bottom:10px}
.footer__links{display:grid;gap:8px}
.footer a{color:rgba(255,255,255,.92)}
.footer a:hover{text-decoration:underline}
.footer__bottom{
  display:flex;justify-content:space-between;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.disabled{opacity:.6;pointer-events:none}

/* Small helpers */
.hr{height:1px;background: rgba(4,60,75,.10);margin:16px 0}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .75rem;border-radius:999px;
  border:1px solid rgba(4,60,75,.12);
  background: rgba(255,255,255,.55);
  font-size:.9rem;
}

/* Responsive */
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
  .footer__inner{grid-template-columns:1fr}
  .navbtn{display:inline-flex}
  .nav{
    display:none;
    width:100%;
    padding:10px 0 2px;
  }
  .nav.is-open{display:flex}
}
/* Top cards – gyors belépő */

.topcards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.topcard{
  display:block;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(4,60,75,.12);
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition:.18s ease;
}

.topcard:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.78);
}

.topcard:before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 20% 20%, rgba(4,60,75,.12), transparent 62%),
    radial-gradient(circle at 80% 70%, rgba(97,121,125,.12), transparent 62%);
  transform: rotate(10deg);
  pointer-events:none;
}

.topcard > *{position:relative}

.topcard__icon{
  font-size:26px;
  margin-bottom:6px;
}

.topcard__title{
  font-weight:900;
  color:var(--brand-900);
  font-size:1.05rem;
  margin-bottom:6px;
}

.topcard__text{
  color:rgba(14,31,36,.82);
  line-height:1.55;
  margin-bottom:10px;
}

.topcard__more{
  font-weight:800;
  color:var(--brand-700);
}

/* responsive */
@media (max-width: 980px){
  .topcards{grid-template-columns:1fr}
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hero-logo{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.hero-logo img{
  width:160px;
  max-width:60vw;
  height:auto;
  border-radius:32px;
  background: rgba(255,255,255,.75);
  padding:14px;
  border:1px solid rgba(4,60,75,.18);
  box-shadow: 0 22px 50px rgba(4,60,75,.22);
}
.hero{
  padding:70px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:center;
  gap:32px;
}

.hero-text h1{
  margin-top:0;
}

.hero-logo{
  display:flex;
  justify-content:center;
}

.hero-logo img{
  width:180px;
  max-width:100%;
  height:auto;
  border-radius:28px;
  background: rgba(255,255,255,.8);
  padding:16px;
  border:1px solid rgba(4,60,75,.18);
  box-shadow: 0 22px 50px rgba(4,60,75,.22);
}

/* mobil */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:left;
  }

  .hero-logo{
    margin-top:18px;
  }

  .hero-logo img{
    width:140px;
  }
}
/* HERO: szöveg bal, logó jobb */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:center;
  gap:32px;
}

/* Logó blokk jobbra igazítva */
.hero-logo{
  display:flex;
  justify-content:flex-end;
}

/* Logó "kártya" – ez fogja meg a shadow/paddinget */
.hero-logo-card{
  width: 220px;               /* ettől lesz stabil */
  max-width: 100%;
  padding: 16px;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(4,60,75,.18);
  box-shadow: 0 22px 50px rgba(4,60,75,.22);
  overflow: hidden;           /* EZ a kulcs: nem lóg ki */
}

/* A kép ne feszítse szét a kártyát */
.hero-logo-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 18px;        /* szép belső lekerekítés */
}

/* mobil */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-logo{justify-content:flex-start; margin-top:16px}
  .hero-logo-card{width: 170px}
}
.hero{ padding:56px 0; }

.hero-panel{
  position:relative;
  padding:34px;
  border-radius:34px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border:1px solid rgba(4,60,75,.12);
  box-shadow: 0 22px 60px rgba(4,60,75,.14);
  overflow:hidden;
}

/* finom “fényfoltok” */
.hero-panel:before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 18% 26%, rgba(4,60,75,.18), transparent 58%),
    radial-gradient(circle at 78% 32%, rgba(97,121,125,.18), transparent 60%),
    radial-gradient(circle at 55% 85%, rgba(234,242,243,.95), transparent 52%);
  transform: rotate(8deg);
  opacity:.95;
  pointer-events:none;
}

/* modern “fénycsík” */
.hero-panel:after{
  content:"";
  position:absolute;
  left:-20%;
  top:-10%;
  width:60%;
  height:140%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.42) 45%, transparent 70%);
  transform: rotate(18deg);
  opacity:.55;
  pointer-events:none;
}

/* finom zaj (nem kötelező, de modern) */
.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:center;
  gap:32px;
}

.hero-logo{
  display:flex;
  justify-content:flex-end;
}

.hero-logo-card{
  width:220px;
  max-width:100%;
  padding:16px;
  border-radius:28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(4,60,75,.18);
  box-shadow: 0 22px 50px rgba(4,60,75,.22);
  overflow:hidden; /* fontos */
}

.hero-logo-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
}

@media (max-width: 900px){
  .hero-panel{ padding:22px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-logo{ justify-content:flex-start; margin-top:14px; }
  .hero-logo-card{ width:170px; }
}
.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.52);
  border:1px solid rgba(4,60,75,.14);
  box-shadow: 0 12px 26px rgba(4,60,75,.10);
  color: rgba(14,31,36,.84);
  font-weight:700;
  font-size:14px;
}
.chip:before{
  content:"";
  width:9px;height:9px;border-radius:999px;
  background: linear-gradient(135deg, var(--brand-900), #0E6573, var(--brand-500));
}
@media (prefers-reduced-motion: no-preference){
  .hero-logo-card{ animation: floaty 6s ease-in-out infinite; }
  .topcard{ transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .topcard:hover{ transform: translateY(-5px); box-shadow: 0 24px 58px rgba(4,60,75,.16); }
}

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.nav a.is-active{
  background: linear-gradient(135deg, rgba(4,60,75,.16), rgba(97,121,125,.12));
  border:1px solid rgba(4,60,75,.14);
}
.card{
  position:relative;
  overflow:hidden;
}

.card::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:5px;
  background: linear-gradient(90deg, var(--brand-900), var(--accent-1), var(--accent-2));
  opacity:.55;
  transform: scaleX(.65);
  transform-origin:left;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}

.card:hover{
  transform: translateY(-4px);
  background: var(--card-strong);
  box-shadow: 0 26px 70px rgba(4,60,75,.18);
}

.card:hover::after{
  opacity:1;
  transform: scaleX(1);
  filter:saturate(1.2);
}
.topcard{
  position:relative;
  overflow:hidden;
}

.topcard::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:6px;
  background: linear-gradient(90deg, var(--accent-1), var(--brand-900), var(--accent-2));
  opacity:.70;
  transform: scaleX(.55);
  transform-origin:left;
  transition: transform .18s ease, opacity .18s ease;
}

.topcard:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 85px rgba(4,60,75,.20);
}

.topcard:hover::after{
  opacity:1;
  transform: scaleX(1);
}

.card:hover, .topcard:hover{
  border-color: rgba(4,60,75,.18);
}

.card:hover::before, .topcard:hover::before{
  opacity: 1;
}
.card h2, .card h3,
.topcard__title{
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.hero-panel{
  position:relative; /* legyen már így, csak biztos ami biztos */
  overflow:hidden;   /* csík ne lógjon ki */
}

.hero-panel::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:6px;
  background: linear-gradient(90deg, var(--brand-900), var(--accent-1), var(--accent-2));
  opacity:.95;
}
.hero-panel::before{
  transform: scaleX(.75);
  transform-origin:left;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

.hero-panel:hover::before{
  transform: scaleX(1);
  filter:saturate(1.2);
  opacity:1;
}
@media (prefers-reduced-motion: no-preference){
  .hero-panel::after{
    content:"";
    position:absolute;
    top:0;
    left:-30%;
    width:30%;
    height:6px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: heroShine 6s ease-in-out infinite;
    pointer-events:none;
  }

  @keyframes heroShine{
    0%, 55% { transform: translateX(0); opacity:0; }
    60%     { opacity:.9; }
    100%    { transform: translateX(520%); opacity:0; }
  }
}* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
}

/* HEADER */
.site-header {
  background: #1a1a1a;
  color: #fff;
  padding: 16px 24px;
}

/* TARTALOM */
.content {
  flex: 1; /* ez tolja le a footert az aljára */
  padding: 24px;
}

/* FOOTER */
.site-footer {
  background: #f2f2f2;
  color: #333;
  padding: 12px 24px;
  text-align: center;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 10, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.brand img {
  height: 36px;
  width: auto;
}

.main-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}

.main-nav a {
  font-weight: 600;
  opacity: .85;
}

.main-nav a:hover {
  opacity: 1;
}

/* BURGER */
.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  border-radius: 3px;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(8,10,24,.96);
  transform: translateX(100%);
  transition: .3s ease;
  z-index: 200;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu nav {
  padding: 100px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-menu a {
  font-size: 1.2rem;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .main-nav {
    display: none;
  }
  .burger {
    display: block;
  }
}
.brand span {
  font-size: 1.05rem;
  letter-spacing: .04em;
  opacity: .9;
}
/* NAV – sok menüpont kezelése */
.main-nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;              /* fontos: tördeljen */
  justify-content:flex-end;
}

.main-nav a{
  font-weight:650;
  opacity:.88;
  padding:8px 10px;
  border-radius:12px;
}

.main-nav a:hover{ opacity:1; background: rgba(255,255,255,.06); }

.btn.btn-ghost{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

/* Header szélességből hozunk vissza helyet a logónak */
.brand img{ height:34px; }
.header-inner{ gap:14px; }

/* Mobil menü overlay */
.mobile-menu{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: .2s ease;
  z-index:250;
}

.mobile-menu.open{ opacity:1; pointer-events:auto; }

.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(420px, 92vw);
  background: rgba(8,10,24,.96);
  backdrop-filter: blur(12px);
  border-left:1px solid rgba(255,255,255,.10);
  transform: translateX(100%);
  transition: .25s ease;
  padding:18px;
}

.mobile-menu.open .mobile-menu__panel{ transform: translateX(0); }

.mobile-menu__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 6px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:14px;
}

.mobile-menu__title{ font-weight:900; letter-spacing:.02em; }
.mobile-menu__close{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:8px 12px;
  color:#fff;
  cursor:pointer;
}

.mobile-menu__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-menu__nav a{
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

@media (max-width: 960px){
  .main-nav{ display:none; }
  .burger{ display:block; }
}
/* ===== HERO PRO ===== */
.hero-panel--pro{
  position:relative;
  overflow:hidden;
  border-radius:26px;
}

.hero-topline{
  position:absolute;
  top:0; left:0; right:0;
  height:7px;
  background: linear-gradient(90deg,
    rgba(15,118,110,1),
    rgba(34,197,94,1),
    rgba(20,184,166,1),
    rgba(34,197,94,1)
  );
  opacity:.95;
  filter:saturate(1.1);
}

.hero-grid--pro{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:34px;
  align-items:center;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  font-weight:700;
  font-size:13px;
  margin-bottom:14px;
}

.kdot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, #0f766e, #22c55e);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* CTA gombok */
.hero-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition: .18s ease;
  user-select:none;
  white-space:nowrap;
}

.hero-btn__arrow{
  font-weight:900;
  transform: translateX(0);
  transition: .18s ease;
  opacity:.9;
}

.hero-btn:hover{
  transform: translateY(-2px);
}
.hero-btn:hover .hero-btn__arrow{
  transform: translateX(3px);
  opacity:1;
}

.hero-btn--primary{
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, #0f766e, #22c55e);
  box-shadow: 0 18px 48px rgba(15,118,110,.20);
}

.hero-btn--glass{
  color:#0b1c1f;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 42px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

.hero-btn--outline{
  color:#0f766e;
  border:1px solid rgba(15,118,110,.28);
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
}

.hero-subline{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(10px);
  font-weight:700;
  font-size:13px;
}

/* jobb oldal */
.hero-side{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-end;
}

.hero-logo-card--pro{
  border-radius:22px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 26px 70px rgba(0,0,0,.16);
  padding:14px;
  transform: translateY(0);
  transition: .18s ease;
}
.hero-logo-card--pro:hover{
  transform: translateY(-2px);
}

.hero-stats{
  width:min(360px, 100%);
  display:grid;
  gap:10px;
}

.stat{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
  padding:14px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
  transition: .18s ease;
}
.stat:before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 20% 30%, rgba(34,197,94,.22), transparent 58%),
    radial-gradient(circle at 80% 60%, rgba(20,184,166,.18), transparent 60%);
  transform: rotate(10deg);
  opacity:.9;
}
.stat > *{ position:relative; }

.stat:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(0,0,0,.14);
}

.stat__n{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0b1c1f;
}
.stat__t{
  font-weight:850;
  margin-top:2px;
  color:#0b1c1f;
  opacity:.92;
}
.stat__m{
  margin-top:2px;
  font-size:13px;
  opacity:.72;
}

/* mobil */
@media (max-width: 980px){
  .hero-grid--pro{ grid-template-columns: 1fr; }
  .hero-side{ align-items:flex-start; }
  .hero-btn{ width:100%; justify-content:space-between; }
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(245, 242, 232, .72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.site-header:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e);
  opacity:.9;
}

.header-inner{
  position:relative;
}

.main-nav a{
  position:relative;
}

.main-nav a:hover{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.04);
}

.main-nav a.active:after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-6px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, #0f766e, #22c55e);
}
.topcard{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 46px rgba(0,0,0,.10);
  transition: .18s ease;
}

.topcard:before{
  content:"";
  position:absolute; inset:-55%;
  background:
    radial-gradient(circle at 22% 28%, rgba(34,197,94,.20), transparent 58%),
    radial-gradient(circle at 82% 70%, rgba(20,184,166,.16), transparent 60%);
  transform: rotate(10deg);
  opacity:.9;
}

.topcard:after{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:6px;
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e);
  opacity:.75;
}

.topcard > *{ position:relative; }

.topcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 64px rgba(0,0,0,.14);
}

.topcard__icon{
  width:44px;height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(7,8,18,.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg, var(--a), var(--b), var(--c), var(--b));
  opacity:.95;
}

.brand span{ color: var(--text); opacity:.92; }
.brand img{ height:34px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a{
  color: rgba(238,242,255,.88);
  font-weight:750;
  padding:10px 12px;
  border-radius:14px;
  border: 1px solid transparent;
  transition: .18s ease;
  position:relative;
}

.main-nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.main-nav a.active:after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:-6px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--a), var(--b), var(--c));
}

.btn.btn-primary{
  color:#071015;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, var(--a), var(--b), var(--c));
  box-shadow: 0 18px 52px rgba(0,0,0,.30);
}
.btn.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn.btn-ghost{
  color: rgba(238,242,255,.92);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.btn.btn-ghost:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* Burger */
.burger span{
  background: rgba(238,242,255,.85);
}
.card, .topcard, .map-card, .hero-panel{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
}

.card{
  border-radius: var(--r2);
  position:relative;
  overflow:hidden;
}

.card-topline, .topcard:after, .hero-topline{
  background: linear-gradient(90deg, var(--a), var(--b), var(--c), var(--b)) !important;
}

/* Kártya “éljen” hoverre */
.card:hover, .topcard:hover, .map-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.075);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

/* Topcard */
.topcard{
  border-radius: 22px;
  position:relative;
  overflow:hidden;
  transition:.18s ease;
}
.topcard:after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px;
  opacity:.9;
}
.topcard > *{ position:relative; }
.topcard__title{ color: var(--text); }
.topcard__text{ color: rgba(238,242,255,.82); }
.hero-panel--pro{
  background:
    radial-gradient(700px 380px at 14% 16%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(720px 420px at 86% 18%, rgba(20,184,166,.16), transparent 62%),
    radial-gradient(620px 420px at 60% 92%, rgba(15,118,110,.14), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.hero-kicker, .pill, .stat, .hero-btn--glass{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(238,242,255,.92) !important;
}
.stat__n, .stat__t{ color: var(--text) !important; }
.hero-btn--outline{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  color: rgba(238,242,255,.92) !important;
}
.main-nav a:hover{
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.btn.btn-primary{
  position:relative;
  overflow:hidden;
}
.btn.btn-primary:before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%);
  transform: rotate(10deg);
  opacity:.0;
  transition:.18s ease;
}
.btn.btn-primary:hover:before{ opacity:.9; }
.hero-panel{
  background:
    radial-gradient(700px 380px at 14% 16%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(720px 420px at 86% 18%, rgba(20,184,166,.16), transparent 62%),
    linear-gradient(135deg, #0f172a, #0b3a34);
  border:1px solid rgba(255,255,255,.12);
}
.hero h1{
  color:#ffffff;
}

.hero .lead{
  color: rgba(255,255,255,.92);
}

.hero p,
.hero li{
  color: rgba(255,255,255,.88);
}
.hero-btn{
  color:#ffffff;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
}

.hero-btn:hover{
  background: rgba(255,255,255,.14);
}

.hero-btn--primary{
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color:#042f2e;
  border:none;
}
.card,
.topcard,
.map-card{
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}.site-header{
  background: rgba(12,24,24,.88);
}

.main-nav a{
  color: rgba(255,255,255,.9);
}
/* háttér: világos, krémes, finom gradient */
body{
  color:#0b1c1f !important;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(34,197,94,.10), transparent 62%),
    radial-gradient(900px 520px at 86% 18%, rgba(20,184,166,.08), transparent 64%),
    linear-gradient(180deg, #f6f4ec, #f1efe6 55%, #ece9df) !important;
}

/* header: sötét, jól olvasható menü */
.site-header{
  background: rgba(30,35,42,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.site-header:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e) !important;
  opacity:.95;
}

.main-nav a{
  color: rgba(255,255,255,.92) !important;
}
.main-nav a:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.main-nav a.active:after{
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6) !important;
}

.btn.btn-primary{
  background: rgba(15,118,110,.85) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.btn.btn-ghost{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}

/* hero: világos panel + topline */
.hero-panel,
.hero-panel--pro{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
}
.hero-topline{
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e) !important;
  height:6px !important;
}

/* hero szöveg: sötét (mert a hero világos) */
.hero h1{ color:#0b1c1f !important; }
.hero .lead{ color: rgba(11,28,31,.82) !important; }
.hero-kicker, .pill{
  background: rgba(255,255,255,.72) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  color:#0b1c1f !important;
}

/* statok: pasztell */
.stat{
  background: rgba(255,255,255,.65) !important;
  border:1px solid rgba(0,0,0,.06) !important;
}
.stat__n, .stat__t{ color:#0b1c1f !important; }
.stat__m{ color: rgba(11,28,31,.70) !important; }

/* kártyák: világos üveg + zöld topline */
.card,
.topcard,
.map-card{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.12) !important;
}
.card-topline{
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6) !important;
}

/* topcard felső csík */
.topcard:after{
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6) !important;
  opacity:.85 !important;
}

/* általános muted */
.muted{ color: rgba(11,28,31,.62) !important; }
/* ===== EOSZ FIX PATCH (layout + topline + text) ===== */

/* 1) Container: ne engedje szétfullwidthre */
.container{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* 2) Topcards grid: 3 oszlop desktopon */
.topcards{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
@media (max-width: 980px){
  .topcards{ grid-template-columns: 1fr !important; }
}

/* 3) Kártyák alap tipó: legyen olvasható, ne halvány */
.card h1, .card h2, .card h3,
.topcard__title,
.topcard__text,
.card p, .card li{
  color: #0b1c1f !important;
}
.card p, .topcard__text{
  opacity: .82 !important;
}
.card .muted, .muted{
  color: rgba(11,28,31,.62) !important;
}

/* 4) TOPLINE vissza: a csíkok konkrétan látszódjanak */
.topcard{
  position: relative !important;
  overflow: hidden !important;
}
.topcard:after{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:0 !important;
  height:6px !important;
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e) !important;
  opacity:.95 !important;
  display:block !important;
  z-index: 2 !important;
}
.topcard > *{ position: relative !important; z-index: 3 !important; }

/* 5) Map-card topline: ha .card-topline div van benne */
.map-card{
  position: relative !important;
  overflow: hidden !important;
}
.map-card .card-topline{
  height:6px !important;
  background: linear-gradient(90deg, #0f766e, #22c55e, #14b8a6, #22c55e) !important;
  opacity:.95 !important;
  display:block !important;
  border-radius: 24px 24px 0 0 !important;
}

/* 6) Kártya háttér: maradjon üveg/pasztell, de ne legyen kimosott */
.card,
.topcard,
.map-card{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.12) !important;
  border-radius: 22px !important;
}

/* 7) Topcard hover: “éljen” */
.topcard{
  transition: .18s ease !important;
}
.topcard:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.16) !important;
  background: rgba(255,255,255,.70) !important;
}

/* 8) Hero: maradjon a jó világos panel, a kicker ne legyen kék kijelölés-hatású */
.hero-panel, .hero-panel--pro{
  background: rgba(255,255,255,.55) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
}
.hero h1{ color:#0b1c1f !important; }
.hero .lead{ color: rgba(11,28,31,.82) !important; }

/* 9) Ha valami globál CSS lebutította a linkeket */
a{ color: inherit; }
.topcard__more{
  color:#0f766e !important;
  font-weight: 800 !important;
}
/* ===== HERO BUTTON FIX (ne legyen halvány/disabled) ===== */
.hero .btn,
.hero .hero-btn,
.hero .cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:12px 16px;
  border-radius:14px;
  font-weight:850;
  border:1px solid rgba(11,28,31,.12);
  background: rgba(255,255,255,.65);
  color:#0b1c1f;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* ha valahol "disabled" class van */
.hero .btn.disabled,
.hero .hero-btn.disabled,
.hero .btn[disabled],
.hero .hero-btn[disabled]{
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Primary (Csatlakozás) */
.hero .btn-primary,
.hero .hero-btn--primary{
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  border-color: rgba(255,255,255,.35);
  color:#072826;
}

/* Secondary üveg gombok */
.hero .btn-outline,
.hero .hero-btn--outline{
  background: rgba(255,255,255,.55);
  border-color: rgba(15,118,110,.22);
  color:#0b1c1f;
}

/* Hover: éljen */
.hero .btn:hover,
.hero .hero-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
  background: rgba(255,255,255,.75);
}

.hero .btn-primary:hover,
.hero .hero-btn--primary:hover{
  filter: brightness(1.03);
}

.hero .btn-outline:hover,
.hero .hero-btn--outline:hover{
  border-color: rgba(15,118,110,.35);
}
/* ===== LEAFLET ZOOM BUTTONS – EOSZ STYLE ===== */
.leaflet-control-zoom {
  border: none;
  box-shadow: none;
}

.leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;

  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #072826;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);

  transition: all .18s ease;
}

.leaflet-control-zoom a:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.leaflet-control-zoom a.leaflet-disabled {
  background: rgba(255,255,255,.5);
  color: rgba(0,0,0,.35);
  box-shadow: none;
  transform: none;
}
/* ===== MAP CARD / CONTAINER ===== */
.map-card {
  position: relative;
  padding: 16px;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.75),
      rgba(240,253,250,.85)
    );

  box-shadow:
    0 20px 50px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* felső EOSZ színcsík (mint a többi cardon) */
.map-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #22c55e, #14b8a6);
}

/* maga a térkép */
#eoszMap {
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
map-card::before{
  content: none !important;
  display: none !important;
}
.map-card{
  position: relative !important;
  overflow: hidden !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(240,253,250,.85)) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.map-card .card-topline{
  height: 6px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #22c55e, #14b8a6, #22c55e) !important;
  opacity: .95 !important;
  border-radius: 22px 22px 0 0 !important;
  margin: -16px -16px 14px -16px !important; /* kitolja a paddingból */
}
.map-card .btn{
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(15,118,110,.22) !important;
  color:#0b1c1f !important;
  font-weight: 850 !important;
}
.map-card .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0,0,0,.14);
  background: rgba(255,255,255,.88) !important;
}
.map-card::before,
.map-card::after{
  content: none !important;
  display: none !important;
}

.card.map-card::before,
.card.map-card::after{
  content: none !important;
  display: none !important;
}
.map-card .noise,
.map-card .glow{
  display:none !important;
}
.hero-panel{
  background:
    radial-gradient(1200px 500px at 15% 10%, rgba(34,197,94,0.08), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(20,184,166,0.06), transparent 60%),
    linear-gradient(180deg,
      #fbfcf9 0%,
      #f6faf6 45%,
      #f1f7f3 100%
    );
  border-radius: 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-text h1{
  color:#0f172a; /* mély grafitszürke */
}

.hero-text p,
.hero-text .lead{
  color:#334155; /* jól olvasható, nem fekete */
}.hero .btn-primary{
  background: linear-gradient(135deg,#22c55e,#14b8a6);
  color:#042f2e;
  box-shadow: 0 12px 32px rgba(16,185,129,.35);
}

.hero .btn{
  backdrop-filter: blur(6px);
}
.hero-panel::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background: linear-gradient(90deg,#22c55e,#14b8a6,#22c55e);
  border-radius: 28px 28px 0 0;
  opacity:.9;
}
/* ===== HERO BACKGROUND (biztos célzás) ===== */
.hero .hero-panel,
.hero .hero-panel--pro,
.hero-panel,
.hero-panel--pro{
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(1200px 520px at 15% 10%, rgba(34,197,94,0.10), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(20,184,166,0.08), transparent 60%),
    linear-gradient(180deg, #fbfcf8 0%, #f6fbf6 45%, #f1f8f3 100%) !important;

  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.hero .hero-panel::after,
.hero .hero-panel--pro::after,
.hero-panel::after,
.hero-panel--pro::after{
  content:"";
  position:absolute;
  left:22px; right:22px; top:0;
  height:6px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, #22c55e, #14b8a6, #22c55e);
  opacity: .65;
  transform: translateY(-1px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  pointer-events:none;
}

.hero .hero-panel:hover::after,
.hero .hero-panel--pro:hover::after,
.hero-panel:hover::after,
.hero-panel--pro:hover::after{
  opacity: .95;
  transform: translateY(0);
  filter: brightness(1.06);
}.hero .hero-panel::before,
.hero .hero-panel--pro::before{
  content:none !important;
  display:none !important;
}
.hero-panel.hero-panel--pro{
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(1200px 520px at 15% 10%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(20,184,166,.08), transparent 60%),
    linear-gradient(180deg, #fbfcf8 0%, #f6fbf6 45%, #f1f8f3 100%) !important;

  border: 1px solid rgba(0,0,0,.06);
  border-radius: 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ha a noise "beszürkít", vegyük vissza */
.hero-panel.hero-panel--pro .noise{
  opacity: .10 !important;  /* próbáld .06–.14 között */
  mix-blend-mode: soft-light;
}

/* ===== HERO TOPLINE (a te meglévő elemed) + HOVER ===== */
.hero-panel.hero-panel--pro .hero-topline{
  height: 6px;
  margin: -16px -16px 14px -16px; /* ha a panel paddingos, ez kihúzza a szélére */
  border-radius: 28px 28px 0 0;
  background: linear-gradient(90deg, #22c55e, #14b8a6, #22c55e);
  opacity: .70;
  transform: translateY(-1px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

/* hoverre "éljen" */
.hero-panel.hero-panel--pro:hover .hero-topline{
  opacity: .98;
  transform: translateY(0);
  filter: brightness(1.06);
}
/* =========================
   HERO – background finomhangolás
   ========================= */
.hero-panel.hero-panel--pro{
  position: relative;
  overflow: hidden;

  /* krém + halvány zöld, de nem "ködös" */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(34,197,94,.10), transparent 62%),
    radial-gradient(700px 360px at 82% 22%, rgba(20,184,166,.08), transparent 62%),
    linear-gradient(180deg, #fbfaf6 0%, #f6faf6 55%, #f1f7f2 100%) !important;

  border: 1px solid rgba(15,23,42,.08);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.92);
}

/* a noise ne színezze el (csak textúra legyen) */
.hero-panel.hero-panel--pro .noise{
  opacity: .06 !important;   /* 0.04–0.10 jó */
  mix-blend-mode: soft-light;
}

/* =========================
   HERO – "card top csík" + hover sweep
   (alapból halványan ott van, hoverre végigfut)
   ========================= */
.hero-panel.hero-panel--pro .hero-topline{
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  opacity: .55;                 /* félig mindig ott */
  background: rgba(20,184,166,.18);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.14);
  pointer-events: none;
}

/* a "futó" fénycsík */
.hero-panel.hero-panel--pro .hero-topline::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-45%;
  width:45%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(34,197,94,0),
    rgba(34,197,94,.95),
    rgba(20,184,166,.95),
    rgba(34,197,94,0)
  );
  filter: blur(.2px);
  transform: translateX(0);
  transition: transform .55s ease;
}

/* hoverre végigsöpör */
.hero-panel.hero-panel--pro:hover .hero-topline{
  opacity: .95;
  background: rgba(20,184,166,.14);
}

.hero-panel.hero-panel--pro:hover .hero-topline::after{
  transform: translateX(240%);
}

:root{
  --card-bg: rgba(255,255,255,.58);
  --card-border: rgba(25,35,45,.08);
  --card-text: #0f2320;
  --card-muted: rgba(15,35,32,.72);
  --topline: linear-gradient(90deg, rgba(32,176,132,1), rgba(16,200,120,1), rgba(32,176,132,1));
}

/* a kártya "frosted" háttér + árnyék */
.card{
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  color: var(--card-text);
}

/* finom mintázat a kártyán */
.card::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(32,176,132,.10), transparent 62%),
    radial-gradient(900px 520px at 90% 40%, rgba(25,214,255,.06), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 6px, transparent 6px, transparent 14px);
  opacity:.55;
  pointer-events:none;
}
.card > *{ position: relative; }

.card .muted, .card p{ color: var(--card-muted); }

/* a felső csík */
.card-topline{
  position:absolute;
  top:0; left:0;
  height: 4px;
  width: 44%;
  background: var(--topline);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  transition: width .28s ease, filter .28s ease;
  filter: saturate(1.15);
}

/* hoverre "fut végig" */
.card:hover .card-topline{
  width: 100%;
  filter: saturate(1.35) brightness(1.05);
}

/* Programjaink blokk címsor alatti kis csík (ha volt) */
.section-titleline{
  height:4px; width:120px;
  border-radius:999px;
  background: var(--topline);
  margin:10px 0 0;
}
/* ===== HÍREK OLDAL EXTRA ===== */

.hero-panel--news .hero-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: start;
}
.hero-panel--news .hero-side{
  display:grid;
  gap: 12px;
}

@media (max-width: 980px){
  .hero-panel--news .hero-grid{ grid-template-columns: 1fr; }
  .hero-panel--news .hero-side{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .hero-panel--news .hero-side{ grid-template-columns: 1fr; }
}

/* Chips */
.news-chips{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.chip{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.70); }
.chip--active{
  border-color: rgba(20,160,100,.30);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}

/* Stat cards */
.statcard{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  padding: 14px;
  position: relative;
  overflow:hidden;
}
.statcard:before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 22% 22%, rgba(31,184,135,.18), transparent 60%),
    radial-gradient(circle at 78% 72%, rgba(24,211,123,.14), transparent 60%);
  transform: rotate(10deg);
  opacity:.9;
}
.statcard > *{ position:relative; }
.statnum{
  font-size: 2rem;
  font-weight: 1000;
  letter-spacing: -.02em;
}
.statlabel{
  font-weight: 900;
  margin-top: 4px;
}

/* News cards grid */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1050px){ .news-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .news-grid{ grid-template-columns: 1fr; } }

.newscard{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  padding: 14px;
  position:relative;
  overflow:hidden;
  transition: .18s ease;
}
.newscard:hover{ transform: translateY(-2px); background: rgba(255,255,255,.62); }
.newscard .card-topline{
  position:absolute; top:0; left:0; height:4px; width:42%;
  background: linear-gradient(90deg,#1fb887,#18d37b,#1fb887);
  transition: width .28s ease, filter .28s ease;
  filter:saturate(1.15);
}
.newscard:hover .card-topline{ width:100%; filter:saturate(1.35) brightness(1.05); }

.newscard__head{ display:flex; justify-content:flex-start; margin-bottom:10px; }
.datebadge{
  font-size:.88rem;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  opacity:.9;
}

.newscard__title{
  margin:0 0 8px;
  font-size: 1.02rem;
  line-height: 1.25;
}
.newscard__summary{
  margin:0;
  opacity:.9;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 3.8em;
}
.newscard__actions{ margin-top: 12px; }
/* Hírek kártya thumb */
.newscard__thumb{
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.35);
}

.newscard__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}

.newscard:hover .newscard__thumb img{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== BAL OLDAL – ELÉRHETŐSÉGEK ===== */

.contact-cards {
  display: grid;
  gap: 16px;
}

.contact-card {
  background: linear-gradient(145deg, #f4fbf7, #eef5f1);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 40%;
  background: linear-gradient(90deg, #2fbf71, #38d39f);
  transition: width .35s ease;
}

.contact-card:hover::before {
  width: 100%;
}

.contact-card strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f2e25;
  margin-bottom: 2px;
}

.contact-card a {
  font-weight: 600;
  color: #1a7f63;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-card p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #5f6f69;
  line-height: 1.45;
}

/* ===== JOBB OLDAL – ŰRLAP ===== */

.contact-form {
  background: linear-gradient(145deg, #f7fdfb, #edf6f2);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.contact-form h2 {
  margin: 0 0 14px;
}

.contact-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #29433a;
  margin: 12px 0 4px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d6e5de;
  padding: 10px 12px;
  font-size: 14px;
  background: #ffffff;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #2fbf71;
  box-shadow: 0 0 0 3px rgba(47,191,113,.18);
}

/* ===== SUBMIT GOMB ===== */

.contact-form button {
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #2fbf71, #1fa97a);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(47,191,113,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.contact-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(47,191,113,.45);
}

/* ===== MEGJEGYZÉS ===== */

.contact-form .form-note {
  margin-top: 10px;
  font-size: 12px;
  color: #6b7f77;
}
.checkrow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background: rgba(255,255,255,.55);
  margin:10px 0;
}

.checkrow input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: var(--accent, #16a34a);
}

.checkrow a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root{
  --btn-radius: 14px;
  --btn-pad-y: 11px;
  --btn-pad-x: 16px;

  --c-ink: #0b1b16;
  --c-white: #fff;

  --c-primary: #0e7c6d;        /* EOSZ zöld */
  --c-primary-2: #13a58f;      /* hover */
  --c-border: rgba(11,27,22,.14);

  --c-ghost: rgba(255,255,255,.55);
  --c-ghost-2: rgba(255,255,255,.78);

  --c-danger: #d34a4a;
  --c-danger-2: #e35b5b;

  --shadow-btn: 0 12px 34px rgba(0,0,0,.18);
  --shadow-btn-hover: 0 18px 44px rgba(0,0,0,.22);
}

.btn{
  appearance:none;
  border:1px solid var(--c-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: 800;
  letter-spacing: .01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  box-shadow: var(--shadow-btn);
  text-decoration:none;
  line-height:1;
}

.btn:focus{
  outline: none;
}
.btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(19,165,143,.25), var(--shadow-btn);
}

/* Primary */
.btn-primary{
  color: var(--c-white);
  border-color: rgba(14,124,109,.22);
  background: linear-gradient(135deg, rgba(14,124,109,1), rgba(19,165,143,.95));
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  filter: saturate(1.05);
}
.btn-primary:active{
  transform: translateY(0px);
}

/* Secondary (világos, de nem “kifakult”) */
.btn-secondary{
  color: var(--c-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border-color: rgba(11,27,22,.16);
}
.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
}

/* Ghost (panel gombokhoz) */
.btn-ghost{
  color: var(--c-ink);
  background: rgba(255,255,255,.40);
  border-color: rgba(11,27,22,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.62);
  transform: translateY(-1px);
}

/* Danger (Kilépés / Törlés) */
.btn-danger{
  color: var(--c-white);
  border-color: rgba(211,74,74,.20);
  background: linear-gradient(135deg, rgba(211,74,74,1), rgba(227,91,91,.95));
}
.btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

/* Disabled */
.btn[disabled], .btn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.2);
}

/* Small */
.btn-sm{
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .92rem;
}

/* ===== ADMIN: “Quick actions” toolbar styling ===== */
.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.admin-actions .btn{
  border-radius: 999px; /* pill */
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.btn{
  color: var(--c-white);
  border-color: rgba(14,124,109,.22);
  background: linear-gradient(135deg, rgba(14,124,109,1), rgba(19,165,143,.95));
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  filter: saturate(1.05);
}
.btn:active{
  transform: translateY(0px);
}
.site-footer{
  margin-top: 40px;
  border-top: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(37,214,255,.10), transparent 62%),
    radial-gradient(900px 520px at 90% 20%, rgba(175,76,255,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
}

.footer-inner{
  padding: 22px 0 14px;
}

.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
  flex: 1 1 280px;
}

.footer-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  box-shadow: 0 14px 44px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-brandtext strong{
  display:block;
  line-height:1.15;
  letter-spacing:-.01em;
}

.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  flex: 2 1 520px;
  align-items:start;
}

.footer-col{
  padding: 6px 0;
}

.footer-title{
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing:-.01em;
  color: rgba(0,0,0,.78);
}

.footer-link{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  padding: 6px 0;
  color: rgba(0,0,0,.70);
  text-decoration:none;
  font-weight: 800;
  position:relative;
}

.footer-link:after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0%;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,122,24,.95), rgba(175,76,255,.90), rgba(37,214,255,.85));
  transition: width .18s ease;
  opacity: .9;
}

.footer-link:hover{
  color: rgba(0,0,0,.86);
}

.footer-link:hover:after{
  width: 100%;
}

.footer-bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-mini{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* Mobil */
@media (max-width: 900px){
  .footer-cols{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .footer-cols{
    grid-template-columns: 1fr;
  }
  .footer-inner{
    padding: 18px 0 12px;
  }
}
.burger{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
}
.burger span{
  display:block;
  width:26px;
  height:3px;
  margin:5px 0;
  background:#111;
  border-radius:3px;
}

/* Mobil nézet */
@media (max-width: 900px){

  /* Burger látszik */
  .burger{
    display:block;
  }

  /* Desktop nav eltűnik alapból */
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:0;
    padding:14px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    z-index:999;
  }

  /* Aktív állapot */
  .main-nav.is-open{
    display:flex;
  }

  .main-nav a{
    padding:12px 6px;
    font-weight:800;
  }

  .main-nav .btn{
    margin-top:10px;
  }
}
@media (max-width: 900px){

  /* lenyíló menü háttér */
  .main-nav{
    background: rgba(248, 250, 252, .98); /* világos, krémes */
    border-top: 1px solid rgba(0,0,0,.10);
  }

  /* linkek színe mobil menüben */
  .main-nav a{
    color: rgba(0,0,0,.84) !important;
  }

  /* hover */
  .main-nav a:hover{
    color: rgba(0,0,0,.95) !important;
  }

  /* Kapcsolat gomb mobil menüben */
  .main-nav a.btn.btn-primary{
    color: #0b0c12 !important;           /* sötét szöveg a gradiens gombon */
    border-color: rgba(0,0,0,.10);
  }

  /* ha a primary nálad inkább sötét, akkor inkább ez kell:
  .main-nav a.btn.btn-primary{ color:#fff !important; }
  */
}
@media (max-width: 900px){
  .main-nav a:not(.btn){
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.55);
  }
  .main-nav a:not(.btn):hover{
    background: rgba(255,255,255,.80);
  }
}
/* Alapító tagszervezetek – kártya grid */
.org-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 980px){
  .org-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .org-grid{ grid-template-columns: 1fr; }
}

.org-card{
  position:relative;
  border-radius:18px;
  padding:16px 16px 14px;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.org-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.10);
}

.org-card .card-topline{
  position:absolute;
  left:0;
  top:0;
  height:4px;
  width:55%;
  background: linear-gradient(90deg, var(--accent, #1fbf88), rgba(31,191,136,0));
  transition: width .25s ease;
}
.org-card:hover .card-topline{ width:100%; }

.org-card__title{
  margin:0 0 10px;
  font-size: 1.05rem;
  line-height:1.25;
}

.org-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 8px;
}

.org-meta__row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.org-meta__label{
  min-width:72px;
  font-weight:700;
  opacity:.75;
}

.org-meta__value{
  opacity:.95;
}

.org-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

.btn.btn-sm{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .95rem;
}
.nav-dropdown {
  position: relative;
}

.nav-toggle {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.nav-toggle .caret {
  font-size: 0.8em;
  transition: transform .2s ease;
}

.nav-dropdown.open .caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding: 8px 0;
  display: none;
  z-index: 1000;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.95rem;
}

.dropdown-menu a:hover {
  background: rgba(0,0,0,.04);
}
@media (max-width: 900px) {
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
  }
}
/* === RÓLUNK DROPDOWN – SZÍN FIX === */

.main-nav .dropdown-menu {
  background: #f9fafb;          /* világos, krémes */
  border: 1px solid #e5e7eb;
}

.main-nav .dropdown-menu a {
  color: #111827;               /* sötét szöveg */
  font-weight: 500;
}

.main-nav .dropdown-menu a:hover {
  background: #eef2f7;
  color: #111827;
}

/* gomb színe */
.main-nav .nav-toggle {
  color: #ffffff;
}

/* caret ne legyen fehér */
.main-nav .nav-toggle .caret {
  color: #6b7280;
}
/* === DROPDOWN PANEL === */
.main-nav .dropdown-menu {
  background: #0f172a; /* sötét kékes-szürke */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* === DROPDOWN LINKEK === */
.main-nav .dropdown-menu a {
  color: #e5e7eb;       /* tört fehér */
  font-weight: 500;
}

/* hover */
.main-nav .dropdown-menu a:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.main-nav .dropdown > .nav-toggle .caret {
  color: rgba(255,255,255,0.75);
}
.main-nav .dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #38bdf8);
}.site-header .main-nav .dropdown > .nav-toggle {
  color: #ffffff !important;
}
/* ===== MOBIL MENÜ: dropdown trigger (Rólunk) javítás ===== */
@media (max-width: 920px) {

  /* amikor a mobilmenü nyitva van (JS által adott class/id alapján) */
  .main-nav.is-open a {
    color: #1c2420;          /* sötét szöveg a világos panelen */
  }

  /* kifejezetten a dropdownos főelem (Rólunk) */
  .main-nav.is-open .has-dropdown > a,
  .main-nav.is-open .dropdown > a,
  .main-nav.is-open a[aria-haspopup="true"] {
    color: #1c2420 !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;

    /* ugyanaz a “pill” gomb kinézet mint a többin */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  /* ha van kis nyíl (caret) benne */
  .main-nav.is-open .has-dropdown > a .caret,
  .main-nav.is-open .dropdown > a .caret {
    color: inherit !important;
    opacity: .75;
    font-size: 14px;
  }
}
/* ===== MOBIL MENÜ – Rólunk (dropdown trigger) FIX ===== */
@media (max-width: 920px) {

  /* mobilmenü panelen belül */
  .main-nav.is-open .nav-dropdown {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .main-nav.is-open .nav-toggle {
    /* szöveg */
    color: #1c2420 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    opacity: 1 !important;

    /* kinézet – ugyanaz mint a többi menüpont */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 18px;
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

    /* button reset */
    border: none;
    cursor: pointer;
  }

  /* caret nyíl */
  .main-nav.is-open .nav-toggle .caret {
    color: inherit;
    font-size: 14px;
    opacity: 0.7;
  }

  /* amikor nyitva van */
  .main-nav.is-open .nav-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.95);
  }
}
/* ===== HOME HERO – minimal, de rendezett ===== */
.hero { padding: 18px 0 6px; }

/* a panel ne legyen túl magas */
.hero-panel.hero-panel--pro{
  border-radius: 28px;
}

/* grid: bal szöveg, jobb logó */
.hero-grid.hero-grid--pro{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  align-items: center;
  gap: 22px;
  padding: 26px 28px; /* kisebb padding = kevésbé “üres” */
  min-height: unset;  /* ne kényszerítse magát magasra */
}

/* a “hosszú üres” background visszafogása */
.hero-panel.hero-panel--pro{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(47,161,123,.14), transparent 62%),
    radial-gradient(760px 520px at 88% 22%, rgba(47,161,123,.09), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(245,250,247,.88));
}

/* logo oldali doboz fent, ne csússzon le */
.hero-side{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.hero-logo-wrap{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.hero-logo-card{
  width: 190px;
  height: 190px;
  margin-top: 6px;
}
.hero-logo-card img{
  width: 150px;
  height: 150px;
}

/* tipográfia kicsit tömörebb */
.hero h1{
  margin: 12px 0 10px;
  font-size: clamp(30px, 4.2vw, 54px);
}
.hero .lead{
  margin: 0;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.7;
}

/* topline: 1 csík, ne legyen több “széthúzva” */
.hero-panel .hero-topline{
  height: 4px;
  opacity: .9;
  background: linear-gradient(90deg, rgba(47,161,123,0), rgba(47,161,123,1), rgba(47,161,123,0));
}
.hero-panel:hover .hero-topline{
  animation: eoszTopline 1.05s ease forwards;
}

/* ha a noise túl sok, visszavesszük */
.hero-panel .noise{
  opacity: .06;
}

/* Mobilon: logo menjen a szöveg alá középre */
@media (max-width: 980px){
  .hero-grid.hero-grid--pro{
    grid-template-columns: 1fr;
    padding: 22px 18px;
    gap: 14px;
  }
  .hero-side, .hero-logo-wrap{
    justify-content: flex-start;
  }
  .hero-logo-card{
    width: 160px;
    height: 160px;
  }
  .hero-logo-card img{
    width: 125px;
    height: 125px;
  }
}
/* FIX: hero logó pozíció (desktop) */
.hero-grid.hero-grid--pro {
  align-items: start !important;
}

.hero-side {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

.hero-logo-wrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

/* a logó kártya ne legyen “magától” középre igazítva */
.hero-logo-card {
  margin: 8px 0 0 auto !important;   /* fel + jobb */
}

/* MOBIL: logó középre */
@media (max-width: 980px){
  .hero-side,
  .hero-logo-wrap {
    justify-content: center !important;
  }
  .hero-logo-card {
    margin: 10px auto 0 !important;
  }
}
.hero-panel.hero-panel--pro { padding-bottom: 22px !important; }
.hero-grid.hero-grid--pro { min-height: 0 !important; }
.hero-grid.hero-grid--pro{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 28px;
  align-items: start;
}

.hero-side{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

@media (max-width: 980px){
  .hero-grid.hero-grid--pro{ grid-template-columns:1fr; }
  .hero-side{ justify-content:center; }
}
/* ===== Partner regisztráció form ===== */

.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: #1f2d2c;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d4dbd8;
  font-size: 0.95rem;
  background: #ffffff;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #1f8f7a;
  box-shadow: 0 0 0 3px rgba(31, 143, 122, 0.15);
  outline: none;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Két oszlop desktopon */
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-group.full {
    grid-column: span 2;
  }
}

/* Gomb */
.form-submit {
  margin-top: 10px;
}

.form-submit button {
  background: linear-gradient(135deg, #1f8f7a, #157a67);
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.form-submit button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.hero-actions .btn {
  min-width: 240px;
  text-align: center;
}

@media (max-width: 768px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }
}
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* alap kártya */
.hero-mini-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(4px);
}

/* 1. kártya – tagság (enyhe zöldes) */
.hero-mini-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(40, 170, 120, 0.12), rgba(40, 170, 120, 0.05));
  border: 1px solid rgba(40, 170, 120, 0.15);
}

/* 2. kártya – partner (enyhe kékeszöld) */
.hero-mini-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(40, 120, 170, 0.10), rgba(40, 120, 170, 0.05));
  border: 1px solid rgba(40, 120, 170, 0.15);
}

.hero-mini-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.hero-mini-icon {
  font-size: 30px;
}

.hero-mini-content strong {
  display: block;
  font-size: 17px;
  color: #0f2d2b;
}

.hero-mini-content span {
  font-size: 14px;
  color: #5f6f6e;
}
.editor-shell{
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  overflow: hidden;
}

.editor-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
}

.editor-title{
  font-weight: 800;
}

.editor-hint{
  color: rgba(0,0,0,.55);
  font-size: .95rem;
}

.editor-area{
  min-height: 320px;
  padding: 12px;
}

.editor-area textarea,
.editor-area .editor-target{
  width: 100%;
  min-height: 320px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.8);
  outline: none;
  font: inherit;
  line-height: 1.5;
}

.editor-area textarea:focus,
.editor-area .editor-target:focus{
  border-color: rgba(0,128,96,.45);
  box-shadow: 0 0 0 4px rgba(0,128,96,.12);
}