:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#666666;
  --border:#e9e9e9;
  --accent:#ffd60a;       /* BeeAi yellow */
  --accent-ink:#000000;
  --maxw: 980px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --gutter: 20px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-padding-top: 64px }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background:var(--bg); color:var(--fg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility;
}
a{color:inherit; text-decoration: none}
a:hover{text-decoration: underline}
img{max-width:100%; height:auto; display:block}
/* ha van width+height attribútum, ne torzítsunk */
img[width][height]{ height:auto; }

/* focus rings */
:focus-visible{ outline: 3px solid #111; outline-offset: 2px }

/* Top navigation – fixed */
.topnav{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.navwrap{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 10px var(--gutter);
  display:flex; align-items:center; gap:14px;
}
.brand{ font-weight: 900; letter-spacing:.2px; font-size: 18px; }
nav{margin-left:auto; display:flex; gap:14px; align-items:center}
nav a{ padding:8px 10px; border-radius:10px; font-weight:600; }
nav a.active{ background:#111; color:#fff; text-decoration:none }
.menu{
  display:none; margin-left:8px;
  background:#111; color:#fff; border:none; border-radius:10px;
  padding:8px 12px; font-weight:700; cursor:pointer;
}

/* Mobile menu */
@media (max-width: 860px){
  nav{display:none; position:absolute; right:10px; top:54px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px; flex-direction:column; box-shadow: var(--shadow);}
  nav.open{display:flex}
  .menu{ display:block; margin-left:auto; }
}

/* Layout */
.wrap{max-width:var(--maxw); margin:64px auto 0; padding: 24px var(--gutter)}
h1{font-size: clamp(28px, 4vw, 44px); margin:0 0 6px}
h2{font-size: clamp(22px, 3vw, 30px); margin: 8px 0 8px}
p{margin:8px 0}
.micro{ font-size: 13px; line-height: 1.5 }
.tag{color:var(--muted); font-size: 16px}
.lead{font-weight:600}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow: var(--shadow);
}
.grid{display:grid; gap:18px}

/* GRID oszlopok default (ha külön class nincs) */
@media (min-width: 880px){
  .grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{background:#f7f7f7; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:13px}
.badge.vip { background: var(--accent); color: #111; font-weight: 700; }

/* tiny tooltip for badges */
.badge[data-tip]{ position:relative; cursor:help }
.badge[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform: translateX(-50%); white-space:nowrap;
  background:#111; color:#fff; font-size:12px; font-weight:600;
  padding:6px 8px; border-radius:8px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease;
}
.badge[data-tip]::before{
  content:""; position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%); border:6px solid transparent; border-top-color:#111;
  opacity:0; transition:opacity .12s ease;
}
.badge[data-tip]:hover::after{ opacity:1; transform:translateX(-50%) translateY(-4px) }
.badge[data-tip]:hover::before{ opacity:1 }

.why blockquote{
  margin: 0 0 10px 0; padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background:#fffbea; border-radius: 10px;
  color:#2b2b2b; font-style: italic;
}

.frame{border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.btn-inline{
  display:inline-block; background:#111; color:white; padding:10px 14px;
  border-radius:10px; text-decoration:none; font-weight:700
}
.btn-inline.ghost{ background:#f7f7f7; color:#111; border:1px solid var(--border); margin-left:8px; }
.btn-inline.sm{ padding:8px 12px; font-size:14px }

/* Example (Before / After / Details) – képsáv */
.frame.media img{
  aspect-ratio: 16/10;
  height:180px;
  object-fit: cover;
  width:100%;
  border-bottom:1px solid var(--border);
}
.cap{
  background:#fff;
  padding:12px 12px 14px;
  font-size:13px; line-height:1.55; gap:6px;
}
.cap .steps{ margin:0; padding-left:18px; list-style:decimal }
.cap .steps li{ margin:6px 0 0 }

/* How flow mini visual */
.howflow{ display:flex; align-items:center; gap:10px; margin-bottom:8px; color:#2b2b2b }
.hf-step{ display:flex; align-items:center; gap:6px; background:#fffbea; border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-weight:600 }
.hf-step span{ font-weight:700 }
.hf-arrow{ opacity:.7 }

/* Sticky CTA */
.cta-fab{
  position: fixed; inset:auto 18px 18px auto;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 999px; padding: 14px 20px;
  font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  z-index: 1100;
}
.cta-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.24); }
.cta-sub{ display:block; font-weight:600; opacity:.8; font-size:12px; margin-top:2px }

/* Footer */
.footer{padding: 40px var(--gutter) 80px; color:var(--muted); font-size:14px}

/* spacing safeguard */
#why{ margin-bottom:10px }

/* Collapsible sections */
.collapsible{ max-height:0; overflow:hidden; transition:max-height .25s ease }
.collapsible.open{ max-height:1200px }

/* Lightbox */
#lightbox[hidden]{ display:none }
#lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  display:grid; place-items:center; z-index:2000;
}
#lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5) }
.lb-x{
  position:fixed; top:16px; right:18px; font-size:28px; line-height:1;
  background:#fff; border:none; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:800
}

/* === Example & Why – rács oszlopszámok ================================= */
#example.grid{ grid-template-columns: repeat(3, minmax(0,1fr)); align-items:stretch; }
#why.grid{ grid-template-columns: repeat(2, minmax(0,1fr)); align-items:stretch; }

/* Why vizuál + kártya */
#why .why-img, #why .card{ height:100%; }
#why .why-img{
  display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
#why .why-img img{
  flex:1 1 auto; width:100%; height:100%; min-height:0; object-fit:cover; border-radius:12px;
}

/* Mobil */
@media (max-width: 880px){
  #example{ grid-template-columns: 1fr !important; }
  #why{ grid-template-columns: 1fr !important; }
  #why .why-img img{ max-height:380px; object-fit:contain; }
}

/* === Example sor végső fix: minden kártya egyforma magasságon ========== */
#example.ex-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;   /* minden kártya a sor legmagasabbjához igazodik */
}

/* Before / After kártyák: fix képsáv + rugalmas tartalom */
#example.ex-compact > .frame.media {
  display: grid;
  grid-template-rows: 200px 1fr;   /* kép fix, tartalom kitölti */
}
#example.ex-compact > .frame.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
#example.ex-compact > .frame.media .cap {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
}
#example.ex-compact > .frame.media .cap > *:last-child {
  margin-top: auto;
}

/* Details kártya: nyúljon a többivel egyformára */
#example.ex-compact > .card.details {
  display: flex;
  flex-direction: column;
}
#example.ex-compact > .card.details p:last-child {
  margin-top: auto; /* CTA mindig alul */
}

/* Mobil: szabad magasság, egy oszlop */
@media (max-width: 880px) {
  #example.ex-compact {
    grid-template-columns: 1fr;
  }
  #example.ex-compact > .frame.media,
  #example.ex-compact > .card.details {
    height: auto !important;
  }
}

/* Why: a figure default margója miatt lejjebb csúszott a kép */
figure { margin: 0; }                   /* univerzális fix */
#why .why-img { margin: 0; }            /* (redundáns, de biztos ami biztos) */

/* és maradjon tökéletesen egyvonalban és egyforma magas */
#why.grid { align-items: stretch; }
#why .why-img, #why .card { height: 100%; }

/* === WHY: comic ne torzuljon, ne nőjön együtt a kártyával ============== */
#why.grid { 
  align-items: start;                 /* ne nyújtsa fel a bal oszlopot */
}

/* ne legyen kötelező 100% magasság */
#why .why-img,
#why .card { 
  height: auto; 
}

/* a comic képarányt tart, fix max magassággal */
#why .why-img { 
  display: block; 
  margin: 0;                          /* biztonság kedvéért */
}
#why .why-img img {
  width: 100%;
  height: auto;
  max-height: 488px;    /* 520 → 500 vagy kevesebb */
  object-fit: contain;
  padding: 8px;         /* belső térköz, hogy ne érjen a széléhez */
  border-radius: 10px;  /* maradjon kerekített */
  background-color: #fcfaf2;
 }

/* Mobilon engedjük nagyobbra is, hogy kényelmes legyen */
@media (max-width: 880px){
  #why .why-img img { max-height: none; }
}

/* Project Steps listák legyenek pöttyösek */
#example .cap .steps {
  list-style: disc;          /* pötty */
  padding-left: 18px;        /* hely a pöttyöknek */
  margin-top: 4px;           /* közelebb kerüljön a címhez */
}
#example .cap .steps li {
  margin-top: 4px;           /* szorosabb */
}

#example .cap h3 {
  font-size: 13px;
  margin: 2px 0 2px;   /* kisebb felső/alsó távolság */
}

/* Example kártyák – Project Steps cím alatti hézag kicsire */
#example .cap .micro {           /* ez a "Project Steps" sor */
  margin: 1px 0 2px !important;  /* felül/alul kicsi térköz */
  line-height: 1.35;
}
#example .cap .micro > strong {
  display: block;                /* biztos blokkos cím, nincs extra sor-magasság */
}
#example .cap .steps {
  margin-top: 0;                 /* a lista ne tegyen plusz felső margót */
}

/* --- Project Steps körüli térköz kicsire (Before/After cap) --- */
#example .frame.media .cap h3{
  font-size: 13px;
  line-height: 1.25;
  margin: 2px 0 2px !important;       /* a cím körüli hézag le */
}

#example .frame.media .cap .steps{
  margin: 0 !important;               /* lista NE tegyen plusz felső margót */
  padding-left: 18px;                  /* pöttyök helye */
  list-style: disc;                    /* pöttyök (ha még ol, akkor is) */
}

#example .frame.media .cap .steps li{
  margin-top: 4px;                     /* szorosabb sor-köz */
}

/* Project Steps: kompakt cím és pöttyök */
#example .frame.media .cap .micro { margin: 2px 0 2px !important; line-height: 1.3; }
#example .frame.media .cap .steps { list-style: disc; padding-left: 18px; margin: 0 !important; }
#example .frame.media .cap .steps li { margin-top: 4px; }

/* Header: a brand mellett legyen szép kicsi ikonszerű */
.navwrap .brand {
  display: inline-flex;           /* szöveg + videó egy sorban */
  align-items: center;
  gap: 6px;
}
/* Header logó – továbbra is kompakt */
.brand-loop {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  border-radius: 6px;
  pointer-events: none;
}

/* Hero logó – nagyobb hangsúly, hogy kiemelkedjen a címben */
.hero-loop {
  width: 52px;      /* 40 → 52 */
  height: 52px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  object-fit: contain;
  border-radius: 10px;
  pointer-events: none;
}

/* Akiknél ki van kapcsolva az animáció: videó elrejt, emoji fallback */
@media (prefers-reduced-motion: reduce) {
  .brand-loop, .hero-loop { display: none; }
  .bee-fallback { display: inline; }
}
/* alapból az emoji ne látszódjon, csak fallbacknél */
.bee-fallback { display: none; }

/* fix hely → nincs CLS */
.bee-hero { width:120px; height:120px; object-fit: contain; }

/* ha a user kéri a kevesebb mozgást: állókép */
@media (prefers-reduced-motion: reduce) {
  .bee-hero { display:none; }       /* vagy: animation-play-state: paused; */
  .bee-hero-fallback { display:inline-block; } /* tegyél ide egy statikus SVG-t */
}

/* Hero: szöveg + ikon/videó mindig egymás mellett, tördelhető címmel */
.hero-title{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;         /* vertikális közép */
  column-gap: 10px;
  margin: 0 0 8px;
}
.hero-title .t{ min-width: 0; line-height: 1.15; }

/* Ikon / videó egységes méretezése, CLS védelem (width/height az HTML-ben is megadva) */
.hero-buzz{
  inline-size: clamp(60px, 6.5vw, 60px);
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: block;
  object-fit: cover;           /* poszter / frame szépen kitölt */
  background: #0e2834;         /* a logó háttere, villódzás ellen */
}

/* nagyon kicsi kijelzőn kicsit kisebb ikon és szorosabb gap */
@media (max-width: 400px){
  .hero-title{ column-gap: 8px; }
  .hero-buzz{ inline-size: 32px; }
}

/* A11y: csökkentett mozgásnál rejtsük az animációt (posta marad) */
@media (prefers-reduced-motion: reduce){
  .hero-buzz[autoplay]{ display:none; }
}

/* Before/After képek: ne felül-középen, hanem alul középen vágjon */
#example > .frame.media img{
  object-fit: cover;
  object-position: center bottom; /* vagy: center 90% */
}

/* ---- Header ikon kerekítése ---- */
.brand-icon{
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 6px;           /* kerek */
  object-fit: contain;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);  /* finom árnyék (opcionális) */
}

/* ---- Mobil menü: a panel a jobb oldalhoz tapadjon ---- */
@media (max-width: 860px){
  .navwrap{ position: relative; }                  /* referenciapont az abszolút nav-nak */
  nav{
    display: none;
    position: absolute;
    right: 0;                                      /* teljesen jobbra */
    left: auto;
    top: 54px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    flex-direction: column;
    box-shadow: var(--shadow);
    min-width: 200px;                              /* ne legyen túl keskeny */
    z-index: 1001;
  }
  nav.open{ display:flex }
  nav a{
    text-align: right;                             /* elemek jobbra rendezve */
    padding: 10px 12px;
    border-radius: 8px;
  }
}

/* WHY comic: kerek sarok + árnyék, mint a módok képnél */
#why .why-img{
  border-radius: 12px;
  overflow: hidden;            /* a kép sarkai is kerekek legyenek */
  box-shadow: var(--shadow);   /* ugyanaz a szürke árnyék */
  background: #fff;
}
#why .why-img img{
  display: block;
  width: 100%;
  height: auto;                /* ne torzuljon */
  border-radius: 0;            /* a keret adja a kerekítést */
}


/* Mobile header fix: hamburger jobbra */
@media (max-width: 860px){
  .topnav .navwrap{ position: relative; display:flex; align-items:center; }
  .topnav .menu{
    display:block;
    margin-left: auto !important;   /* tolja ki jobbra, akármi is volt előtte */
  }
  .topnav #nav{
    display:none;
    position:absolute;
    top:54px; right:10px; left:auto; /* biztosan jobb szélre nyíljon */
    z-index: 1001;                   /* fedje a tartalmat */
  }
  .topnav #nav.open{ display:flex; }
}

/* How flow – mobilon oszlop + lefelé mutató nyilak */
@media (max-width: 420px){
  .howflow{
    flex-direction: column;
    align-items: center;   /* <-- középre igazítás */
    text-align: center;
    gap: 8px;
  }
  .howflow .hf-arrow{
    display: block;
    transform: rotate(90deg);    /* "→" -> lefelé */
        content:"↓";
    margin: 2px 0;
    text-align: center;   /* <-- nyilak középre */
  }
  .howflow .hf-step{ 
    width: auto; 
  }
}

/* === Buttons hover polish ============================================== */

/* Alap átmenetek minden gombon */
.btn-inline,
.btn-inline.ghost,
.cta-fab{
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}

/* Fekete gomb: hover → sárga + sárga árnyék */
.btn-inline{
  background:#111; color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.btn-inline:hover{
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(255,214,10,.45);
  transform: translateY(-1px);
}
.btn-inline:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(255,214,10,.35);
}

/* Ghost gomb: hover → sötétebb szürke */
.btn-inline.ghost{
  background:#f7f7f7; color:#111; border:1px solid var(--border);
}
.btn-inline.ghost:hover{
  background:#ededed;
  border-color:#d9d9d9;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  text-decoration: none;
}
.btn-inline.ghost:active{
  background:#e6e6e6;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* FAB CTA: hover árnyék sárgára hangolva */
.cta-fab{
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.cta-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(255,214,10,.50);
}
.cta-fab:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(255,214,10,.40);
}

/* FOCUS – egységes, jól látható fókuszgyűrű */
.btn-inline:focus-visible,
.btn-inline.ghost:focus-visible,
.cta-fab:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion – ugrálás nélkül */
@media (prefers-reduced-motion: reduce){
  .btn-inline,
  .btn-inline.ghost,
  .cta-fab{ transition: none; }
  .btn-inline:hover,
  .btn-inline.ghost:hover,
  .cta-fab:hover{ transform: none; }
}

/* === NAV POLISH ================================================= */

/* alap spacing */
.topnav #nav a {
  padding: 8px 14px;
  margin: 0 4px;
  border-radius: 6px;
  transition: background-color .18s ease, color .18s ease;
}

/* hover: halvány háttér + finom kerekítés */
.topnav #nav a:hover {
  background-color: rgba(0,0,0,0.06);
  text-decoration: none;
}

/* active link külön hangsúly */
.topnav #nav a.active {
  background-color: #000;   /* fekete */
  color: #fff;              /* fehér szöveg, hogy olvasható legyen */
  font-weight: 600;
}

/* navwrap igazítása – hogy ne tapadjon a logóra */
.topnav .navwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* hely a logo és a nav közt */
  padding: 6px 12px;
}