:root{
  --bg0: #f7fbff;
  --bg1: #f2fff7;

  --panel: rgba(255,255,255,0.86);
  --panel2: rgba(255,255,255,0.65);

  --text: #0f172a;
  --muted: rgba(15,23,42,0.72);

  --brand: #22c55e;
  --brand2:#22d3ee;
  --violet:#8b5cf6;

  --border: rgba(15,23,42,0.10);
  --shadow: 0 18px 55px rgba(2,6,23,0.10);
  --shadow2: 0 10px 25px rgba(2,6,23,0.08);

  --radius: 20px;
  --ring: rgba(34,197,94,0.26);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(900px 650px at 85% 12%, rgba(34,211,238,0.16), transparent 62%),
    radial-gradient(900px 650px at 60% 85%, rgba(139,92,246,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color: inherit; }
img{ max-width: 100%; height: auto; }

.wrap{
  position:relative;
  z-index:1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px;
}

.small{ color: var(--muted); font-size: 14px; }
.note{
  color: rgba(15,23,42,0.78);
  font-size: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.60);
  box-shadow: 0 12px 28px rgba(2,6,23,0.06);
}

/* háttér-orb-ok */
.bg-orb{
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(45px);
  opacity: 0.50;
  pointer-events:none;
  z-index:0;
}
.orb1{ left:-140px; top:140px; background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.55), transparent 60%); }
.orb2{ right:-170px; top:80px;  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,0.55), transparent 62%); }
.orb3{ left:55%; bottom:-240px; width:520px; height:520px; background: radial-gradient(circle at 35% 35%, rgba(139,92,246,0.45), transparent 62%); }

/* panel */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

/* NAV */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  position: sticky;
  top: 12px;
  z-index: 50;

  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
  overflow: visible;
}

.nav.is-stuck{
  box-shadow: 0 22px 60px rgba(2,6,23,0.16);
  background: rgba(255,255,255,0.92);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand img{
  height: 40px;
  width: auto;
  display:block;
}

/* menu desktop */
.menu{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.menu a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(15,23,42,0.82);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.menu a:hover{
  background: rgba(34,197,94,0.10);
  transform: translateY(-1px);
}

.menu a.active{
  background: rgba(34,211,238,0.14);
  box-shadow: 0 8px 18px rgba(2,6,23,0.06);
}

/* modern hamburger */
.nav-toggle{
  display:none; /* desktopon rejtve */
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 10px 22px rgba(2,6,23,0.08);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle:active{
  transform: translateY(1px);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.12);
}
.nav-ico{
  width:22px; height:22px;
  color: rgba(15,23,42,0.72);
  transition: transform .18s ease, color .18s ease;
}
.nav-toggle.is-open .nav-ico{
  transform: rotate(90deg);
  color: rgba(15,23,42,0.90);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  user-select:none;
  position:relative;
  overflow:hidden;
  line-height: 1;
  white-space: nowrap;
}

.btn:focus{
  outline:none;
  box-shadow: 0 0 0 6px var(--ring), var(--shadow2);
}

.btn.primary{
  border-color: rgba(34,197,94,0.25);
  color: rgba(255,255,255,0.98);
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 35%, #22d3ee 75%, #8b5cf6 120%);
  background-size: 220% 220%;
  box-shadow: 0 18px 40px rgba(2,6,23,0.16), 0 10px 22px rgba(34,197,94,0.18);
}

.btn.primary:hover{
  transform: translateY(-2px);
  animation: gradShift .9s ease both;
  box-shadow: 0 24px 60px rgba(2,6,23,0.18), 0 14px 30px rgba(34,211,238,0.18);
}

.btn.primary:active{
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    0 10px 18px rgba(2,6,23,0.14),
    inset 0 3px 10px rgba(0,0,0,0.20);
}

.btn.ghost{
  background: rgba(255,255,255,0.78);
  border-color: rgba(15,23,42,0.12);
}

.btn.ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(2,6,23,0.10);
}

.btn.ghost:active{
  transform: translateY(1px);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.10);
}

.btn.soft{
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.22);
}

.btn.soft:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(2,6,23,0.10);
}

.btn.soft:active{
  transform: translateY(1px);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.10);
}

.btn-shine{
  position:absolute;
  inset:-50% -60% auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 60%);
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events:none;
}
.btn:hover .btn-shine{ opacity: 1; }

@keyframes gradShift{
  from{ background-position: 0% 50%; }
  to  { background-position: 100% 50%; }
}

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 16px;
  margin-top: 16px;
}
.hero .left{ padding: 18px; }
.hero .right{ padding: 18px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(34,197,94,0.20);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 12px 28px rgba(2,6,23,0.06);
  color: rgba(15,23,42,0.80);
  font-weight: 800;
  font-size: 13px;
}

.badge .dot{
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(135deg, var(--brand), var(--brand2), var(--violet));
  box-shadow: 0 0 0 5px rgba(34,197,94,0.14);
}

h1{
  margin: 12px 0 10px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.grad{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 45%, var(--violet) 85%);
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

.lead{
  margin: 0;
  color: rgba(15,23,42,0.82);
}

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* figyelemfelkeltő bullet-k */
.feature-bullets{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}

.fb{
  display:flex;
  gap:12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 12px 28px rgba(2,6,23,0.06);
}

.fb .ico{
  width:40px; height:40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,211,238,0.16), rgba(139,92,246,0.16));
  border: 1px solid rgba(34,197,94,0.18);
  font-size: 18px;
  flex: 0 0 auto;
}

.fb .t{ font-weight: 950; }
.fb .s{ font-size: 13px; color: var(--muted); }

/* pills */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.68);
  color: rgba(15,23,42,0.80);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

/* right bullet list */
.k{ font-weight: 950; letter-spacing: -0.01em; font-size: 14px; opacity: 0.9; }

.bullet-list{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

.b{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.65);
}

.mark{
  width: 12px; height: 12px;
  border-radius: 99px;
  margin-top: 5px;
  background: linear-gradient(135deg, var(--brand), var(--brand2), var(--violet));
  box-shadow: 0 0 0 6px rgba(34,211,238,0.14);
  flex: 0 0 auto;
}

/* AI visual */
.ai-visual{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background:
    radial-gradient(520px 220px at 20% 30%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(520px 220px at 85% 30%, rgba(34,211,238,0.18), transparent 60%),
    rgba(255,255,255,0.60);
  padding: 10px;
  box-shadow: 0 18px 45px rgba(2,6,23,0.08);
}
.ai-svg{
  width: 100%;
  max-height: 220px;
  height: auto;
  display:block;
}

.ai-svg .wire{
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1.9s ease forwards;
}
.ai-svg .node{
  transform-origin: center;
  animation: pulse 1.6s ease-in-out infinite;
}
.ai-svg .pulseRing{
  transform-origin: center;
  animation: ring 2.4s ease-in-out infinite;
}
.ai-svg .float{ transform-origin: center; animation: floaty 5.2s ease-in-out infinite; }
.ai-svg .float2{ transform-origin: center; animation: floaty 6.2s ease-in-out infinite; }

@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes pulse{ 0%,100%{ transform: scale(1); opacity: .95; } 50%{ transform: scale(1.12); opacity: .75; } }
@keyframes ring{ 0%,100%{ transform: scale(1); opacity:.55; } 50%{ transform: scale(1.06); opacity:.28; } }
@keyframes floaty{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-8px); } }

/* mini kpis */
.mini-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.kpi{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.65);
  text-align:center;
}

.kpi .n{
  font-weight: 950;
  font-size: 18px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.kpi .t{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

/* Sections */
.section{
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 55px rgba(2,6,23,0.06);
}

.section h2{
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.grid4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card{ padding: 16px; }
.card h3{ margin: 10px 0 8px; }
.card p{ margin: 0; color: rgba(15,23,42,0.78); }

.chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,0.22);
  background: rgba(34,197,94,0.10);
  color: rgba(15,23,42,0.78);
  font-weight: 900;
  font-size: 12px;
}

.lift{ transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover{ transform: translateY(-4px); box-shadow: 0 22px 65px rgba(2,6,23,0.12); }

.mini-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(15,23,42,0.68);
  font-size: 13px;
}
.mini-list li{ margin: 4px 0; }

/* timeline */
.timeline{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.tl{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.58);
  box-shadow: 0 10px 24px rgba(2,6,23,0.05);
}
.tl .dot{
  width:10px; height:10px;
  border-radius: 99px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--brand), var(--brand2), var(--violet));
  box-shadow: 0 0 0 6px rgba(34,197,94,0.12);
  flex: 0 0 auto;
}

/* Footer */
.footer{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.64);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: rgba(15,23,42,0.70);
}
.footer a{ color: rgba(15,23,42,0.72); text-decoration:none; }
.footer a:hover{ text-decoration: underline; }

/* Cookie bar */
.cookiebar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 60px rgba(2,6,23,0.16);
  display: none;            /* <-- alapból rejtve (szép, nincs villanás) */
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.cookiebar .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Ha a JS úgy dönt, hogy meg kell jelenni */
.cookiebar.is-open{ display:flex; }

/* Ha hidden, akkor tényleg tűnjön el, bármi legyen */
#cookiebar[hidden]{ display:none !important; }


/* ===== REVEAL FAILSAFE (v2) =====
   Alapból MINDEN látszik.
   Rejtés CSAK akkor, ha a JS felarmed-eli az elemet: data-reveal="1".
   Így ha a JS nem tölt be / hibázik / cache, nem lesz üres tartalom. */
.reveal{ opacity: 1; transform: none; }

.js .reveal[data-reveal="1"]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

.js .reveal[data-reveal="1"].is-visible{
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 980px){
  h1{ font-size: 38px; }
  .hero{ grid-template-columns: 1fr; }
  .grid4{ grid-template-columns: repeat(2, 1fr); }
  .grid2{ grid-template-columns: 1fr; }
}

@media (max-width: 920px){
  /* HONOR 200 / mobil menü fix */
  .nav{
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-toggle{ display:inline-flex; }

  /* menü alapból rejtett mobilon */
  .menu{
    display:none !important;
    width:100%;
    order: 3;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(15,23,42,0.08);
  }

  /* nyitott állapot */
  .menu.is-open{
    display:flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .menu a{
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(15,23,42,0.08);
  }

  .menu a.btn{
    background: rgba(255,255,255,0.82);
    border-color: rgba(15,23,42,0.12);
  }
}

@media (max-width: 520px){
  .grid4{ grid-template-columns: 1fr; }
  .mini-kpis{ grid-template-columns: 1fr; }
  .cookiebar{ flex-direction:column; align-items:stretch; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ai-svg .wire, .ai-svg .node, .ai-svg .pulseRing, .ai-svg .float, .ai-svg .float2 { animation: none !important; }
  .btn, .lift, .reveal { transition: none !important; }
}
/* ===== Index: kártya-illusztrációk / showcase ===== */

.card-ill{
  margin: 0 0 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background:
    radial-gradient(420px 160px at 18% 40%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(420px 160px at 85% 40%, rgba(34,211,238,0.16), transparent 60%),
    rgba(255,255,255,0.62);
  box-shadow: 0 14px 36px rgba(2,6,23,0.06);
  padding: 8px;
  overflow: hidden;
}

.card-ill svg{
  width: 100%;
  height: 84px;
  display:block;
}

/* Section 2 – “képes” highlight lista */
.showcase{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.show-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 12px 28px rgba(2,6,23,0.06);
}

.show-ill{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(34,197,94,0.18);
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,211,238,0.14), rgba(139,92,246,0.12));
  font-size: 18px;
  flex: 0 0 auto;
}
/* ===== FAILSAFE: a szekciók grid kártyái sose legyenek láthatatlanok ===== */
.js .section .grid4 > .panel,
.js .section .grid2 > .panel{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}