/* =========================
   3EF — THEME + BASE
   ========================= */

/* ---- PALETTE ---- */
:root{
  --color-1: #AD142D;   /* red accent (alt CTA) */
  --color-2: #003B5E;   /* surface (cards/main) */
  --color-3: #010D1D;   /* page background */
  --color-4: #F58104;   /* primary CTA */
  --color-5: #3C531A;   /* footer green */

  --text:   #E8EEF5;
  --muted:  #B6C5D4;
  --border: rgba(255,255,255,0.10);
  --shadow: 0 30px 70px -20px rgba(0,0,0,.55);
}
html {
  height: 100%;
  scroll-behavior: smooth;   /* ⬅ sima, beépített smooth scroll */
   max-width: 100%;
  overflow-x: hidden;          /* ⬅ fontos */
}

/* ---- RESET ---- */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }

/* === GLOBAL BACKGROUND === */
body {
  font-family: 'Inter', sans-serif;
  background: url("background.jpg") no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-color: #010D1D; /* fallback */
  color: #E8EEF5;
  overflow-x: hidden;
  
}
/* rögzített navbar miatt a szekciók ne csússzanak alá */
section[id] {
  scroll-margin-top: 96px;   /* kb. navbar magasság */
}

/* === MAIN CARD / CONTENT === */
main {
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 40px 30px 0;
  position: relative;
  z-index: 5;

  /* NINCS külön háttér / box-shadow: a szekciók üvegesek */
  background: transparent;
  border: none;
  box-shadow: none;
}


/* === FORM SECTION (Tagfelvétel) === */
.join-section {
  background: rgba(1, 13, 29, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  padding: 60px 40px 40px;
  max-width: 1100px;
  margin: 60px auto;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #E8EEF5;
}

.join-section h2 {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}

/* === FORM INPUTS (TAGFELVÉTEL BLOKK) === */
#tagForm input,
#tagForm select,
#tagForm textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #E8EEF5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.2s ease;
}

#tagForm input:focus,
#tagForm select:focus,
#tagForm textarea:focus {
  outline: none;
  border-color: #2F83B5;
  box-shadow: 0 0 0 3px rgba(47, 131, 181, 0.25);
}

#tagForm input::placeholder {
  color: #A7B4C4;
}

.notice-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  color: #E8EEF5;
}

/* === FOOTER (ÜVEGES ALAP) === */
.site-footer {
  background: rgba(1, 13, 29, 0.92);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0.5rem 0.5rem; /* ⬅ jóval kisebb alul */
  color: #E8EEF5;
}

/* Glass-style “chip” a footerben */
.footer-bottom {
  max-width: 960px;
  margin: 0.3rem auto 0;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgba(7, 42, 92, 0.95),
    rgba(40, 104, 176, 0.85)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* Link sor: Privacy • Terms • e-mail */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.9rem;
  row-gap: 0.35rem;
  font-size: 0.82rem;
}

.footer-links a {
  color: #fcd97f;
  font-weight: 600;
  text-decoration: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

.footer-links a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.footer-dot {
  opacity: 0.5;
}

/* © sor külön, lejjebb */
.footer-copy {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* Mobil finomítás */
@media (max-width: 640px) {
  .footer-bottom {
    border-radius: 18px;
    padding-inline: 1.3rem;
  }

  .footer-copy {
    text-align: center;
  }
}



/* ---- NAVBAR ---- */
.navbar {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;

  width: calc(100% - 40px);   /* szépen beljebb húzva a szélektől */
  max-width: 1200px;

  padding: 10px 22px;         /* vékonyabb sáv */
  color: var(--text);

    border-radius: 100px 100px 100px 100px;    /* teljesen lekerekített pill */
  backdrop-filter: blur(8x);
  background: rgba(1, 13, 29, 0.94);   /* egységes glass háttér */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.navbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.navbar .logo img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
}

/* menü – kicsit kisebb betű, könnyebb megjelenés */
.navbar .nav-links {
  display: flex;
  gap: 26px;
}

.navbar .nav-links a,
.navbar .donate-link {
  font-weight: 600;
  font-size: 12px;              /* ⬅ picit kisebb */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color .2s ease, opacity .2s ease, transform .15s ease;
}

.navbar .nav-links a:hover,
.navbar .donate-link:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

/* TÁMOGATOM – kis glass pill, hogy ne legyen +1 "vastag fül" */
.navbar .donate-link {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(1,13,29,0.92);
  color: #FDE7C2;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
}


/* =========================
   HERO – GLASS LANDING CARD
   ========================= */

.hero {
  min-height: 100vh;
  position: relative;
  padding: 110px 20px 70px;  /* kicsit kisebb alsó padding */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  z-index: 1;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* globális sötét overlay a hero-n */
    linear-gradient(to bottom, rgba(1, 13, 29, 0.90), rgba(1, 13, 29, 0.85)),
    /* kicsi vignetta a sarkokban, hogy legyen mélység */
    radial-gradient(circle at top left, rgba(0, 0, 0, 0.55), transparent 40%),
    radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.60), transparent 40%),
    /* maga a kép */
    url("landing.png") center center / cover no-repeat;
  z-index: -1;
}




/* központi üveges kártya */
/* Külső keret – conic gradient border (coming soon feel) */
.hero-frame {
  --border-angle: 0turn;
  position: relative;
  width: 100%;
  max-width: 780px;
  padding: 3px;
  border-radius: 32px;
  overflow: hidden;
  background: conic-gradient(
    from var(--border-angle),
    transparent 5%,
    #f58104,
    #0d8bff,
    #3c531a,
    #f58104,
    transparent 95%
  );
  animation: border-spin 5s linear infinite;
}
/* hivatalos név – erős, de a fő tagline alatt marad */
.hero-official-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 217, 127, 0.96);
  margin-bottom: 12px;
}

.hero-title {
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 10px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

.hero-tagline {
  max-width: 44rem;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}


/* Belső üveges kártya */
.hero-glass {
  width: 100%;
  background: rgba(1, 13, 29, 0.9);
  backdrop-filter: blur(18px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.8);
  padding: 36px 30px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* belső fényfoltok (3EF vibe) */
.hero-glass::before,
.hero-glass::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  z-index: -1;
}

.hero-glass::before {
  background: radial-gradient(circle, rgba(245, 129, 4, 0.9), transparent 70%);
  top: -80px;
  left: -80px;
}

.hero-glass::after {
  background: radial-gradient(circle, rgba(0, 170, 79, 0.9), transparent 70%);
  bottom: -90px;
  right: -80px;
}

/* border-spin animáció (coming soon-ból) */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes border-spin {
  to {
    --border-angle: 1turn;
  }
}


/* felső pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(1,13,29,0.95);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FDE7C2;
  margin-bottom: 14px;
}

/* fő cím */
.hero-card h1 {
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* rövid leírás */
.hero-subtitle {
  max-width: 40rem;
  margin: 0 auto 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* mini statok a cím alatt */
.hero-metas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 24px;
}

.hero-meta-item {
  min-width: 110px;
}

.hero-meta-number {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #FDE7C2;
}

.hero-meta-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(232,238,245,0.8);
}

/* CTA gombok */
.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}

/* kis „görgess lejjebb” hint */
.hero-scroll-hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(230,240,255,0.78);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero {
    padding: 100px 16px 60px;
  }

  .hero-card {
    padding: 26px 20px 22px;
    border-radius: 22px;
  }

  .hero-metas {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .hero-card h1 {
    font-size: 30px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-metas {
    flex-direction: column;
  }
}



/* ---- FEATURES / HUB – HERO UTÁN CSÚSZÓ BLOKK ---- */
/* ---- FEATURES / HUB – HERO UTÁN CSÚSZÓ BLOKK ---- */
.features-section {
  position: relative;
  z-index: 1;
  padding: 4.5rem 1.5rem 4.5rem;
}

/* Egy, normális üveges háttér az egész hub mögé */
.features-section::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: clamp(1.5rem, 8vw, 7rem);
  margin-block: 1.5rem 2.5rem;
  border-radius: 36px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 122, 255, 0.22), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0, 204, 255, 0.20), transparent 60%),
    rgba(2, 9, 35, 0.94);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85);
  z-index: -1;
  pointer-events: none;
}

/* a grid tartalma szépen középen marad */
.features-section .section-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* CÍM + ALcím */
.features-heading {
  text-align: center;
  margin-bottom: 30px;
}

.features-title {
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}

.features-subtitle {
  margin-top: 10px;
  font-size: 18px;              /* <-- nagyobb lett */
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.82);
}



/* GRID: középen nagy kártya, körülötte 6 kisebb (bal 3, jobb 3) */
.features-grid-hub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "stats   main  main team"
    "apply   main  main support"
    "contact main  main news";
  gap: 26px;
  align-items: stretch;
}

/* alap kártyastílus – glass hatás */
.feature-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 20px 20px 18px;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}

.feature-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.09);
}

.feature-link {
  color: var(--color-4);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* nagy központi kártya – finomabb tipó */
.feature-card--overview {
  grid-area: main;
  padding: 24px 24px 20px;
}

.feature-card--overview h3 {
  font-size: 19px;
  margin-bottom: px;
}

/* --- 3EF OVERVIEW – NAGYOBB, OLVASHATÓ TIPÓ --- */
.feature-card--overview {
    font-size: 1.1rem;    /* kb. 17.5px – már profi */
    line-height: 1.7;
}

.feature-card--overview p,
.feature-card--overview .feature-list {
    font-size: 1.05rem;   /* 16.8px */
    line-height: 1.7;
}

.feature-card--overview h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 800;
}



.feature-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.feature-list li {
  margin-bottom: 4px;
}

/* környező kártyák elhelyezése + kis „diagonál” eltolás */
/* környező kártyák elhelyezése – csak a grid-area, NINCS margin-top */
.feature-card--stats   { grid-area: stats; }
.feature-card--apply   { grid-area: apply; }
.feature-card--team    { grid-area: team; }
.feature-card--support { grid-area: support; }
.feature-card--news    { grid-area: news; }
.feature-card--contact { grid-area: contact; }


/* MOBIL / TABLET – egymás alatt */
@media (max-width: 900px) {
  .features-grid-hub {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "stats"
      "team"
      "support"
      "news"
      "apply"
      "contact";
  }

  .feature-card--stats,
  .feature-card--apply,
  .feature-card--team,
  .feature-card--support,
  .feature-card--news,
  .feature-card--contact {
    margin-top: 0;
  }

  .feature-card--overview {
    order: -1;
  }
}



/* ---- STATS ---- */
.stats-section {
  padding: 90px 0;
}

.stats-section h2 {
  font-size: 42px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 40px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 18px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.stat-number {
  font-size: clamp(38px, 4.9vw, 54px);
  font-weight: 800;
  color: var(--color-4);
  line-height: 1.1;
  margin-bottom: 6px;
}

.stat-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}


/* mobilon egymás alá */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}


/* ---- STORIES ---- */
.inspiring-section{ padding:100px 0; }
.section-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; }
.section-header h2{ font-size:48px; font-weight:800; }
.btn-see-all{ color: var(--color-4); text-transform:uppercase; font-weight:800; font-size:14px; white-space:nowrap; }
.story-carousel{ display:flex; overflow-x:auto; gap:30px; margin:0 -30px; padding:20px 30px; -ms-overflow-style:none; scrollbar-width:none; }
.story-carousel::-webkit-scrollbar{ display:none; }
.story-card{
  flex:0 0 30%; min-width:320px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s;
}
.story-card:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.story-card img{ width:100%; height:300px; object-fit:cover; }
.story-content{ padding:22px; }
.story-content h3{ font-size:20px; font-weight:800; margin-bottom:6px; }
.story-content p{ color: var(--muted); margin-bottom:18px; }
.progress-bar{ width:100%; height:8px; background: rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.progress{ height:100%; background: var(--color-4); }

/* ---- SUPPORT (TÁMOGATÁS SZEKCIÓ – QR + FELIRATKOZÁS) ---- */

.support-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: stretch;
  margin: 0 -30px;
  padding: 60px 40px;
  background: rgba(1, 13, 29, 0.9);
  border-radius: 30px;
  border: 1px solid var(--border);
}

.support-left,
.support-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === FLIP KÁRTYA (BAL OLDAL, QR) === */

.donate-card {
  width: 320px;
  height: 380px;
  perspective: 1200px;
}

.donate-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.donate-card-face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(245,129,4,0.35), transparent 60%),
    radial-gradient(circle at bottom right, rgba(0,123,255,0.3), transparent 60%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow);
  padding: 40px 24px 26px;   /* ⬅ felül kicsit több padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  backface-visibility: hidden;
}


.donate-card-front {
  align-items: flex-start;
}

.donate-card-back {
  transform: rotateY(180deg);
  align-items: center;
  text-align: center;
}

.donate-card-back img {
  max-width: 80%;
  border-radius: 16px;
  margin: 0 auto 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

.donate-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #FDE7C2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(1,13,29,0.85);
}

/* sarokba tett verzió a front oldalon */
.donate-tag--corner {
  position: absolute;
  top: 16px;
  right: 16px;
}


.donate-card h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}

.donate-card p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.donate-hint {
  font-size: 12px;
  opacity: 0.85;
}

.donate-note {
  font-size: 13px;
}



/* hover + kattintás esetén forduljon */

.donate-card:hover .donate-card-inner,
.donate-card.is-flipped .donate-card-inner {
  transform: rotateY(180deg);
}

/* === JOBB OLDALI GLASS KÁRTYA – FELIRATKOZÁS === */

/* JOBB OLDALI GLASS KÁRTYA – FELIRATKOZÁS (FINOMÍTOTT RITMUS) */
.support-subscribe-card {
  width: 100%;
  max-width: 600px;
  background: rgba(255,255,255,0.06);
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 40px 40px 34px;      /* kicsit több belső padding, egységesebb */
}

/* CÍM */
.support-subscribe-card h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;           /* szorosabban a bevezető szöveghez */
}

/* BEVEZETŐ SZÖVEG – olvashatóbb, nem ér hozzá az űrlaphoz */
.support-subscribe-card > p {
  color: var(--muted);
  margin-bottom: 24px;          /* nagyobb tér a szöveg és az űrlap között */
  line-height: 1.6;
  max-width: 36rem;
}

/* AZ EGÉSZ ŰRLAP BLOKK KAP EGY KIS FELSŐ MARGÓT */
.support-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 14px;                    /* minden mező között fix, szép távolság */
}

/* FORM GROUP */
.support-subscribe-form .form-group {
  margin: 0;                    /* a gap intézi a távolságot */
}

/* LABEL + INPUT KÖZÖTT HELYET CSINÁLUNK */
.support-subscribe-form .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;           /* ⬅ ez tolja le az "E-mail címed" feliratot */
  letter-spacing: 0.02em;
}

/* EMAIL INPUT maradhat, de a padding szép így: */
.support-subscribe-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(1,13,29,0.9);
  color: #E8EEF5;
  font-size: 15px;
}

/* checkbox blokk kicsit lejjebb a mezőtől */
.checkbox-3ef {
  margin-top: 6px;
}

/* gomb előtt is legyen levegő */
.support-subscribe-form .btn {
  margin-top: 6px;
}
.support-subscribe-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(1,13,29,0.9);
  color: #E8EEF5;
  font-size: 15px;
}

.support-subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: #2F83B5;
  box-shadow: 0 0 0 3px rgba(47,131,181,0.3);
}

.support-smallprint {
  font-size: 12px;
  color: #9EB2C6;
  margin-top: 10px;
}

/* mobil / tablet */

@media (max-width: 900px) {
  .support-section {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    margin: 0;
  }

  /* QR kártya teljesen eltűnik mobilon */
  .support-left {
    display: none;
  }

  .support-right {
    order: 1;
    margin-bottom: 0;
    justify-content: stretch;
  }

  .support-subscribe-card {
    max-width: 100%;
  }
}


/* Inputs */
.support-form select,
.support-form input[type="text"],
#tagForm input, #tagForm select, #tagForm textarea{
  width:100%; padding:14px 16px;
  background:#0B1A2B; color:#E6EEF6;
  border:1px solid #1E3A57; border-radius:8px; font-size:16px;
}
#tagForm input::placeholder{ color:#8CA2B7; }
#tagForm input:focus, #tagForm select:focus, #tagForm textarea:focus,
.support-form input:focus, .support-form select:focus{
  outline:none; border-color:#2F83B5; box-shadow:0 0 0 3px rgba(47,131,181,.2);
}

/* ---- HÍREK / ÚJDONSÁGOK – GLASS KÁRTYÁK ---- */

/* Hírek szekció – kapjon rendes felső helyet minden nézetben */
.news-section {
  padding: 120px 0 80px;
}


/* fejléc finomhangolva */
.section-header--news h2 {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 6px;
}

.section-header--news .section-subtitle {
  font-size: 14px;
  color: var(--muted);
}

/* GRID: 3 kártya, szép gap */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 32px;
}

/* ALAP KÁRTYA – GLASS HATÁS */
.news-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.16);
}

/* 1. AKTÍV HÍR – KÉPES KÁRTYA */
.news-card-media {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

.news-card:hover .news-card-media img {
  transform: scale(1.07);
}

/* "ÚJ" badge */
.news-badge {
  position: absolute;
  top: 14px;
  right: 14px;   /* ⬅ BAL HELYETT JOBB OLDAL */
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(1, 13, 29, 0.9);
  color: #FDE7C2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}


/* tartalom */
.news-card-content {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-dot {
  opacity: 0.5;
}

.news-location {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(1, 13, 29, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
}

.news-card-content h3 {
  font-size: 20px;
  font-weight: 800;
  margin-top: 6px;
  margin-bottom: 2px;
}

.news-card-content p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.news-link-note {
  margin-top: auto;
  font-size: 12px;
  color: #FDE7C2;
  opacity: 0.95;
}

/* KIS KIEMELÉS AZ ELSŐ HÍRNEK */
.news-card--primary {
  background:
    radial-gradient(circle at top left, rgba(245,129,4,0.20), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0,123,255,0.20), transparent 55%),
    rgba(255,255,255,0.06);
}

/* 2–3. PLACEHOLDER KÁRTYÁK – "HAMAROSAN" FEELING */
.news-card--placeholder {
  background:
    radial-gradient(circle at top left, rgba(245,129,4,0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0,123,255,0.16), transparent 55%),
    rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  text-align: center;
}

.news-placeholder-inner h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.news-placeholder-inner p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* "HAMAROSAN" pill */
.news-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(1,13,29,0.92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FDE7C2;
  margin-bottom: 12px;
}

/* RESPONSIVE – TABLET / MOBIL */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .news-grid {
    display: flex;
    grid-template-columns: none;   /* a korábbi gridet kiütjük */
    overflow-x: auto;
    gap: 24px;
    margin-top: 24px;
    padding: 4px 4px 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .news-grid::-webkit-scrollbar {
    display: none;
  }

  /* egy kártya legyen fókuszban, ne vágja le az alját */
  .news-card {
    min-width: 88%;
    max-width: 88%;
  }

  .news-section {
    padding: 60px 0 70px;   /* picit kisebb, de alul marad hely */
  }
}




/* ---- CTA ---- */
.cta-section{
  padding:80px 0;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
    url('https://images.unsplash.com/photo-1518640166430-c1ffc66f5341?auto=format&fit=crop&q=80&w=2070') center/cover no-repeat;
  color:#fff;
  margin-top:20px;
  margin-bottom:0; padding-bottom:0;
  position:relative; z-index:5;
}
.cta-section h2{ font-size:48px; font-weight:800; margin-bottom:32px; }
.cta-buttons{ display:flex; justify-content:center; gap:20px; }

/* ---- MODALS (TERMS + PRIVACY) ---- */
.modal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.7); overflow-y:auto; }
.modal-content{ background:#fff; color:#111; margin:4rem auto; max-width:800px; border-radius:1rem; padding:2rem; line-height:1.6; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.close-btn{ border:0; background:transparent; font-size:1.5rem; font-weight:700; cursor:pointer; float:right; }
.close-btn:hover{ opacity:.75; }
body.modal-open{ overflow:hidden; }

/* ---- JOIN (TAGFELVÉTEL) ---- */
/* ---- JOIN (TAGFELVÉTEL / CSATLAKOZÁS) ---- */

.join-section {
  margin: 80px auto 40px;
  max-width: 1100px;
  padding: 40px 38px 34px;
  background: rgba(1, 13, 29, 0.92);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.7);
}

/* fejléc: középre rendezve, barátságos hang */
.join-header {
  text-align: center;
  margin-bottom: 26px;
}

.join-header h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 10px;
}

.join-header p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
}

/* kis pill a cím fölött */
.join-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(1,13,29,0.95);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FDE7C2;
  margin-bottom: 12px;
}

/* rács az inputoknak */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 18px;
}

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

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

/* label + input stílus a tagformnál */
#tagForm .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

#tagForm input,
#tagForm select,
#tagForm textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #E8EEF5;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.2s ease;
}

#tagForm input::placeholder {
  color: #9EB2C6;
}

#tagForm input:focus,
#tagForm select:focus,
#tagForm textarea:focus {
  outline: none;
  border-color: #2F83B5;
  box-shadow: 0 0 0 3px rgba(47, 131, 181, 0.3);
}

/* nyilatkozat box – üveges */
.notice-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px 18px 14px;
  margin: 8px 0 16px;
  color: #E8EEF5;
  font-size: 14px;
}

.notice-box ul {
  margin: 10px 0 0 18px;
}

.notice-box li {
  margin: 6px 0;
  line-height: 1.6;
}

.notice-box small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #B6C5D4;
}

/* checkbox-3ef már definiálva van – csak kis plusz tér közéjük */
.join-section .checkbox-3ef {
  margin-top: 10px;
}

/* akciók (gomb + magyarázó szöveg) */
.form-actions {
  margin-top: 18px;
  text-align: center;
}

.form-actions .btn {
  min-width: 260px;
}

.form-help {
  font-size: 12px;
  color: #9EB2C6;
  margin-top: 10px;
}



/* ---- ANIM ---- */
@keyframes fadeInFromBottom{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- RESPONSIVE TWEAKS ---- */
@media (max-width:640px){
  .navbar{ padding:18px 20px; }
  .hero-sponsors{ display:none; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cta-section{ padding:64px 0; }
}
/* === TEAM SECTION (CSAPATUNK) === */
.team-section {
  padding: 80px 0;
  color: #fff;
}

.team-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.team-section h2 {
  font-size: 48px;
  font-weight: 800;
}

/* ================================
   TEAM NAV ARROWS — 3EF STYLE
   ================================ */

.team-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.team-arrow-icon {
  width: 20px;
  height: auto;
  transition: transform .25s ease, fill .25s ease;
}

.team-arrow-icon path {
  fill: #F58104; /* 3EF narancs ikon */
}

/* Hover */
.team-arrow:hover {
  background: #F58104;
  border-color: #F58104;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(245,129,4,0.6);
}

.team-arrow:hover .team-arrow-icon path {
  fill: #010D1D;
}

/* Rejtett állapot */
.team-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
}


/* középre igazított, görgethető sor */
.team-carousel {
  display: flex;
  justify-content: flex-start;      /* ⬅ NE középről induljon, hanem balról */
  gap: 24px;
  padding: 0 10px 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.team-carousel::-webkit-scrollbar { display: none; }
/* Tablet + mobil: 2×2 rács */
@media (max-width: 900px) {
  .team-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* kártyák + méretezés, hogy ne legyen pixeles */
.team-card {
  position: relative;
  flex: 0 0 calc((100% - 3 * 24px) / 4);    /* 4 kártya / sor a gapekkel együtt */
  max-width: calc((100% - 3 * 24px) / 4);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* badge tényleg a sarokban */
.team-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(1, 13, 29, 0.9);
  color: #FDE7C2;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* avatar képek */
.team-card img {
  width: 100%;
  height: 230px;                 /* picit magasabb = kicsit nagyobb arc */
  object-fit: cover;             /* finom zoom, de nem eszi szét a minőséget */
  object-position: center 10%;   /* kicsit fej felé fókuszálunk */
  background:
    radial-gradient(circle at 0% 0%, rgba(245,129,4,0.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0,123,255,0.30), transparent 60%),
    rgba(4, 15, 46, 0.96);       /* háttér is enyhébb */
  image-rendering: auto;
}

@media (max-width: 640px) {
  .team-card {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

/* placeholder kártyák – launch feeling */
/* Hamarosan kártyák – abstract narancs–kék háttér (úgy, mint a referenciakép) */
.team-card--placeholder {
  position: relative;
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  max-width: calc((100% - 3 * 24px) / 4);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 26px 20px;
  border-radius: 18px;
  overflow: hidden;

  /* finomabb, sötétebb glow – nem üvölt annyira */
  background:
    radial-gradient(circle at -10% 30%, rgba(255, 176, 96, 0.45), transparent 58%),
    radial-gradient(circle at 115% 70%, rgba(102, 82, 255, 0.42), transparent 58%),
    radial-gradient(circle at 50% 120%, rgba(0, 133, 255, 0.35), transparent 60%),
    linear-gradient(135deg, #02081f, #031738);
  border: 1px solid rgba(255, 255, 255, 0.18);;
}


/* belső tartalom */
.team-placeholder-inner {
  text-align: center;
}

.team-placeholder-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(232, 238, 245, 0.85);
}

.team-placeholder-date {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
}
/* az első hamarosan kártya – extra kiemelés */
.team-card--next {
  border-color: rgba(255, 255, 255, 0.6);
}

.team-card--next .team-placeholder-label {
  color: #FDE7C2;
}

.team-card--next .team-placeholder-date {
  font-size: 22px;
}


.team-content {
  padding: 14px 14px 18px;
  text-align: center;
}

.team-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.team-role {
  font-size: 13px;
  font-weight: 700;
  color: #F58104;
  text-transform: uppercase;
  margin-bottom: 6px;
}
                
.team-desc {
  font-size: 13px;
  color: #B6C5D4;
}

/* mobilon szélesebbek lehetnek a kártyák */
@media (max-width: 640px) {
  .team-card {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
/* === CURSOR-ORIGIN FILL EFFECT: .btn-primary + .btn-secondary === */

/* közös alap a két gombnak */
.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
  cursor: pointer;

  --x: 50%;
  --y: 50%;
  --btn-fill: #ffffff;    /* alap, majd felülírjuk */

  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;

  background: transparent;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}

/* narancssárga verzió */
.btn-primary {
  --btn-fill: #F58104;
  border: 2px solid #F58104;
  color: #F58104;
}

/* fehér verzió */
.btn-secondary {
  --btn-fill: #ffffff;
  border: 2px solid #ffffff;
  color: #ffffff;
}

/* hover állapot: kicsit „feljön” a gomb, de háttér még a ::before kezeli */
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-3px);
  border-color: transparent;
  color: #010D1D; /* kitöltés után sötét szöveg */
}

/* a kitöltés „köre” – innen indul a fill */
.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--btn-fill);
  z-index: -1;
  transition:
    width 0.55s ease-out,
    height 0.55s ease-out;
}

/* hoverre nő a kör – ettől telítődik a gomb */
.btn-primary:hover::before,
.btn-secondary:hover::before {
  width: 600px;
  height: 600px;
}


/* FELÜLSŐ SZÖVEG KÜLÖN BLOKK */
.hero-top {
  margin-top: 90px;     /* ⬅ A cím FELJEBB megy */
  text-align: center;
}

.hero-top h1 {
  font-size: clamp(32px, 5.8vw, 58px);  /* ⬅ kisebb és szebb arányú betű */
  font-weight: 800;
  line-height: 1.15;                   /* ⬅ kisebb sortáv, nem lesz „vastag” */
  margin: 0;
  padding: 0 20px;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
}


/* A GOMBOK FIXEN LENT MARADNAK */
.hero-buttons-fixed {
  position: absolute;
  bottom: 90px;         /* ⬅ EZZEL tudod feljebb/lejjebb tenni a gombokat */
  display: flex;
  gap: 20px;
}
/* ===========================
   SIMPLE BACK TO TOP BUTTON
   =========================== */

#backToTop {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;

  opacity: 0;
  pointer-events: none;

  overflow: hidden;
  transition:
    opacity .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    border-color .25s ease;
}


/* amikor scrollolsz lejjebb, a JS adja rá a .show-t */
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ikon */
#backToTop .svgIcon {
  width: 15px;
  transition: transform .25s ease, fill .25s ease;
}

#backToTop .svgIcon path {
  fill: #F58104;  /* narancs nyíl alapból */
}

/* hover – csak kis emelkedés + színcsere, NEM nyúlik szét, NINCS felirat */
#backToTop:hover {
  background: #F58104;
  border-color: #F58104;
  box-shadow: 0 12px 30px rgba(245,129,4,0.6);
  transform: translateY(-4px);
}

#backToTop:hover .svgIcon path {
  fill: #010D1D;  /* sötét nyíl narancs háttér előtt */
}
.feature-ul {
    margin-top: 16px;
    padding-left: 0;
    list-style: none;
}

.feature-ul li {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.feature-ul li::before {
    content: "•";
    color: var(--color-4);  /* narancs bullet */
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 2px;
}
/* csak a Mi is a 3EF? kártyán belül */

.feature-card--overview p:last-of-type {
  margin-bottom: 4px;      /* eddig valószínűleg 10–14px volt */
}

.feature-card--overview .feature-ul {
  margin-top: 4px;         /* eddigi 18px helyett */
}
/* =========================
   REVOLUT DONATION CARD
   animált szegéllyel
   ========================= */

.revolut-card {
  width: 260px;
  height: 320px;
  position: relative;
  overflow: visible;
  margin: 0 auto;
}

/* külső "keret", ami megkapja a forgó gradientet */
.revolut-card-content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms ease;
  border-radius: 20px;
  position: relative;
}

/* animált border – Uiverse minta alapján */
.revolut-card-content::before {
  position: absolute;
  content: '';
  display: block;
  width: 160%;
  height: 160%;
  top: -30%;
  left: -30%;
  background: linear-gradient(
    90deg,
    transparent,
    #F58104,
    #0d8bff,
    #F58104,
    transparent
  );
  animation: revBorderSpin 5000ms linear infinite;
}

/* belső "üveg" kártya, ami takarja a közepét */
.revolut-card-inner {
  position: absolute;
  inset: 2px;
  background: rgba(1, 13, 29, 0.95);
  border-radius: 18px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 22px 18px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* Revolut ikon középen */
.revolut-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 6px;
}

/* szövegek */
.revolut-card-inner h3 {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.revolut-card-inner p {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

/* CTA gomb */
.revolut-btn {
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid #F58104;
  background: #F58104;
  color: #010D1D;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease,
              box-shadow .2s ease, border-color .2s ease;
}

.revolut-btn:hover {
  background: transparent;
  color: #F58104;
  border-color: #F9A53D;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 129, 4, 0.6);
}

/* hover effektre enyhe 3D emelkedés */
.revolut-card:hover .revolut-card-content {
  transform: translateY(-4px);
}

/* forgó border animáció (fixed a 0%/100% bug) */
@keyframes revBorderSpin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
/* =========================
   3EF ANIMATED CHECKBOX
   (Uiverse alap, 3EF színek)
   ========================= */

.checkbox-3ef {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
}

.checkbox-3ef-input {
  display: none;
  visibility: hidden;
}

.checkbox-3ef-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* kis négyzet */
.checkbox-3ef-box {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(3, 17, 40, 0.9);
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.checkbox-3ef-text {
  font-size: 14px;
  line-height: 1.5;
  color: #C4D0E0;
}


/* pipa – stroke animáció */
.checkbox-3ef-box svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
}

/* hullám effekt (kitáguló kör) */
.checkbox-3ef-box::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-4); /* 3EF narancs */
  display: block;
  transform: scale(0);
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* szöveg */
.checkbox-3ef-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* hover – csak border szín */
.checkbox-3ef-label:hover .checkbox-3ef-box {
   border-color: rgba(129, 193, 255, 0.9);
}

/* CHECKED ÁLLAPOT – itt jön a varázs ✨ */
.checkbox-3ef-input:checked + .checkbox-3ef-label .checkbox-3ef-box {
  background: rgba(47, 131, 181, 0.9);
  border-color: rgba(149, 210, 255, 1);
  box-shadow: 0 0 0 2px rgba(90, 175, 230, 0.4);
  animation: none; /* kikapcsoljuk a hullámos villogást */
}

.checkbox-3ef-input:checked + .checkbox-3ef-label .checkbox-3ef-box svg {
  stroke-dashoffset: 0;
}


.checkbox-3ef-input:checked + .checkbox-3ef-label .checkbox-3ef-box::before {
  transform: scale(3.5);
  opacity: 0;
}

/* Uiverse-szerű "összeugrás" animáció */
@keyframes wave-3ef {
  50% {
    transform: scale(0.9);
  }
}
/* === PAGE FOOTER (egyszerű, elegáns) === */

.page-footer {
  margin-top: 20px;
  padding: 12px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* nincs extra háttérszín: a fő háttér marad látható */
}
/* Visszafogott, mégis kattintható inline linkek (Alapszabály, Adatvédelem stb.) */
.inline-link {
  color: rgba(255, 255, 255, 0.35);;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.inline-link:hover {
  color: #FFE0A2;
  border-color: rgba(255, 224, 162, 0);
  background: rgba(255, 224, 162, 0);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.footer-links a {
  text-decoration: none;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: opacity 0.18s ease;
}

.footer-links a:hover {
  opacity: 1;
}

.footer-links .separator {
  opacity: 0.45;
}

.footer-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.75;
}

/* verzió "chip" – glass pill */
.footer-version-pill {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(1, 13, 29, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FDE7C2;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* ABOUT / "Közösséget építünk..." szekció */
/* -------- Info / about section glass barrier -------- */

/* ====== ABOUT / INFO SECTION – glass barrier ====== */
/* ====== ABOUT / INFO SECTION – wrapper ====== */
.info-section {
  position: relative;
  padding: 0;          /* a paddinget már a features-section intézi */
  overflow: visible;
}

/* nincs második háttér, csak a features-section::before dolgozik */
.info-section::before {
  content: none;
}

/* minden tartalom a barrier fölé kerüljön */
.info-section .info-grid,
.info-section .info-main-card,
.info-section .info-side-card,
.info-section .info-column,
.info-section h2,
.info-section p {
  position: relative;
  z-index: 1;
}


/* a valódi tartalom menjen a barrier fölé */
.info-section .section-container {
  position: relative;
  z-index: 1;
}

/* ---------- Glass success popup ---------- */

.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 36, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.feedback-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.feedback-modal {
  max-width: 420px;
  width: 90%;
  padding: 28px 32px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(255, 181, 74, 0.18), transparent 55%),
              radial-gradient(circle at bottom right, rgba(62, 219, 160, 0.22), transparent 60%),
              rgba(10, 21, 74, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.feedback-modal h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.feedback-modal p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* gomb stílus – a mostani primary buttonodhoz igazítva */
.feedback-modal .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Hibás e-mail input vizuális jelzés */
.input-error {
  border-color: #ff5c7a !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 122, 0.5);
}

.input-error::placeholder {
  color: rgba(255, 92, 122, 0.9);
}
/* ---------- Feedback modal ---------- */
.feedback-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 999;
}

.feedback-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.feedback-modal {
  min-width: min(420px, 90vw);
  padding: 2.5rem 2.25rem 2rem;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8, 15, 53, 0.98), rgba(12, 32, 84, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  color: #fff;
  text-align: center;
}

.feedback-badge {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: radial-gradient(circle at 30% 0%, #00ffb0, #00a86b);
  box-shadow: 0 12px 35px rgba(0, 255, 176, 0.35);
}

.feedback-modal h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feedback-modal p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  color: rgba(255, 255, 255, 0.86);
}

.feedback-close {
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #ffb63b, #ff7a00);
  color: #0d1228;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 144, 0, 0.4);
}

.feedback-close:hover {
  transform: translateY(-1px);
}
/* ====== Általános mező-hiba jelölés ====== */
.field-error {
  border-color: #ff4b5c !important;
  box-shadow: 0 0 0 1px rgba(255, 75, 92, 0.6);
}

/* ====== Glass feedback modal ====== */
.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 13, 29, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 999;
}

.feedback-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.feedback-modal {
  max-width: 420px;
  width: calc(100% - 3rem);
  padding: 2.5rem 2.25rem 2rem;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 188, 72, 0.14), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0, 214, 143, 0.18), transparent 55%),
    rgba(3, 9, 30, 0.98);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.78);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.feedback-modal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.feedback-modal h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.feedback-modal p {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.7rem;
}

body.modal-open {
  overflow: hidden;
}
/* Mobilon nem kell a "vissza a tetejére" gomb */
@media (max-width: 768px) {
  #backToTop {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .story-carousel {
    margin: 0;
    padding: 16px 0;
  }
}
@media (max-width: 768px) {
  main {
    max-width: 100%;
    padding: 32px 16px 0;
    margin: 0 auto 40px;
  }

  .hero {
    padding: 96px 16px 56px;
  }

  .features-section {
    padding: 3rem 1.25rem 3.5rem;
  }

  .stats-section,
  .news-section,
  .team-section {
    padding: 60px 0;
  }
}
/* --- MOBIL NÉZET: NAVBAR ELREJTÉSE --- */
@media (max-width: 900px) {
  .navbar {
    display: none !important;
  }

  /* Mivel a hero eredetileg a fix navbar miatt lejjebb van tolva,
     mobilon kicsit kisebb top padding elég */
  .hero {
    padding-top: 10px;
  }
}
/* MOBIL – Csapat szekció kompakt + nyíl jobb szélen, 1 kártya fókuszban */
/* MOBIL – Csapat szekció kompakt + nyíl jobb szélen, 1 kártya fókuszban */
@media (max-width: 768px) {
  .team-section {
    padding: 40px 0 50px;
  }

  .team-section .section-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .team-section h2 {
    font-size: 32px;
  }

  .team-nav {
    margin-top: 0;
  }

  .team-carousel {
    padding: 16px 4px 6px;
  }

  .team-card,
  .team-card--placeholder {
    flex: 0 0 88%;
    max-width: 88%;
  }
}


/* MOBIL – Támogass, akár ingyen is szekció finomhangolása */
/* MOBIL – Támogass, akár ingyen is szekció finomhangolása */
@media (max-width: 768px) {
  .support-section {
    padding: 32px 16px;
    border-radius: 22px;
    margin: 0 0 32px;   /* ⬅ kapjon egy alsó margót, így nem lóg rá a hírekre */
  }

  .support-subscribe-card {
    padding: 24px 18px 20px;
    border-radius: 20px;
  }

  .support-subscribe-card h2 {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .support-subscribe-card > p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .support-subscribe-form .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }

  .support-smallprint {
    font-size: 11px;
    margin-top: 8px;
  }
}

/* MOBIL – nagy címek visszafogva, hogy ne legyenek óriások */
@media (max-width: 768px) {
  .stats-section h2 {
    font-size: 30px;
  }

  .section-header--news h2 {
    font-size: 30px;
  }
}
/* Alapból ne látszódjon a hírek nav (desktop) */
.news-nav {
  display: none;
}


/* MOBIL – Csatlakozz (tagfelvétel) kompakt UI */
@media (max-width: 768px) {
  .join-section {
    margin: 32px 0 24px;
    padding: 24px 16px 22px;
    border-radius: 22px;
  }

  .join-header h2 {
    font-size: 28px;
  }

  .join-header p {
    font-size: 13px;
  }

  .notice-box {
    font-size: 13px;
    padding: 14px 12px;
  }

  .form-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .form-help {
    font-size: 11px;
  }
}
/* Easter egg watermark – alapból láthatatlan */
.eisler-watermark {
  position: fixed;
  right: 23px;
  bottom: 8px;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;                 /* alapból rejtve */
  transition: opacity 0.4s ease, transform 0.3s ease, color 0.3s ease;
}

.eisler-watermark span {
  font-weight: 700;
  color: rgba(255, 165, 0, 0.22);
}

.eisler-watermark.visible {
  opacity: 0.55;
}

@media (hover:hover) {
  .eisler-watermark.visible:hover {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (max-width:768px) {
  .eisler-watermark {
    font-size: 8px;
    right: 6px;
    bottom: 6px;
  }
}
/* --- HÍREK & ÚJDONSÁGOK – shadow eltávolítás --- */
.news-card,
.news-card--primary,
.news-card--placeholder {
    box-shadow: none !important;
}
/* === Szülinapi popup (Eisler Gábor) === */

.birthday-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 13, 29, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.birthday-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.birthday-modal {
  max-width: 420px;
  width: calc(100% - 3rem);
  padding: 2.2rem 2.1rem 1.8rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(255, 188, 72, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0, 214, 143, 0.18), transparent 55%),
    rgba(3, 9, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  position: relative;
}

.birthday-modal h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.birthday-modal p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.birthday-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.birthday-close:hover {
  color: #fff;
}
.birthday-date {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}