/* Inner Circle Huniverse — organisms/hero.css
   Hero szerkezet a .devin/rules/html_rules.md konvenció szerint: logo+cím egy sorban,
   alcím új sorban, videó alcím és CTA között, fluid clamp() méretezés.
   A "szögezett keretes" videó a korábbi EgyProbaProjekt egyetlen megtartott eleme,
   de facade/click-to-load mintával (l. .devin/rules/optimize.md YouTube szakasz) —
   nincs azonnal betöltött iframe, csak kattintásra. */
.hero{position:relative;padding:calc(var(--sp-2xl)*2) var(--sp-lg) var(--sp-2xl);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);object-fit:cover;opacity:.28}
/* A korábbi .hero-overlay (sötét gradiens takarólap) eltávolítva -- nincs .hero-bg kép, amit
   sötétíteni kellene, a takarólap csak egy éles, feleslegesen sötét sávot hozott létre a hero alján,
   ami élesen elvágva ütközött a következő szekció hátterével. */

.hero-content{position:relative;z-index:1;max-width:min(800px,90vw);margin:0 auto;text-align:center}
.hero-title-container{display:flex;align-items:center;justify-content:center;gap:var(--sp-sm);flex-wrap:wrap}
.hero-title-container img{width:clamp(40px,6vw,64px);height:clamp(40px,6vw,64px)}
.hero-title-container h1{font-size:clamp(2.2rem,5vw + 1rem,3.6rem)}
/* A főoldal FŐCÍME (fent, .hero-title-container h1) kivétel a lekicsinyítés alól, de az alcím nem
   -- a felhasználó explicit kérése szerint. */
.hero-subtitle{font-size:clamp(1rem,1.4vw + .5rem,1.15rem);color:var(--muted);margin-top:var(--sp-sm)}

.hero-video-frame{position:relative;max-width:min(800px,90vw);margin:var(--sp-xl) auto 0;
  aspect-ratio:16/9;border:3px solid var(--primary);
  clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px));
  box-shadow:0 25px 60px rgba(255,107,53,.25),inset 0 0 30px rgba(255,107,53,.08);
  overflow:hidden;cursor:pointer;background:#000}
.hero-video-frame img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hero-video-frame:hover img{transform:scale(1.03)}
.hero-video-frame iframe{width:100%;height:100%;border:0}
.hero-video-frame .play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero-video-frame .play-btn span{width:74px;height:74px;border-radius:var(--r-full);background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#1a1005;box-shadow:var(--shadow-brand)}

.hero-cta{display:flex;gap:var(--sp-md);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-lg)}