/* ===== HERO (section background, overlay, inner layout) ===== */

/* A háttérképet inline adjuk át: style="--hero:url('...')" */
.hero{
  position: relative;
  background: var(--light) no-repeat center/cover;
  min-height: clamp(420px, 75vh, 860px);
  overflow: hidden;

  /* A tényleges kép a --hero változóval érkezik; lásd alább */
}

/* Hero transitions are now handled in transitions.css */

/* A tényleges háttérkép réteg: így biztosan cover, és külön overlay réteget tudunk tenni fölé */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero) center/cover no-repeat;
  z-index: 0;
}

/* Sötétítő/fényesítő overlay (ha volt a formatting.css-ben, 1:1 megtartjuk a rétegezést) */
.hero .overlay{
  position:absolute; inset:0;
  z-index: 1;
  pointer-events:none;

  
  /* ha eddig volt gradient, itt marad a helye; üresen nem változtat */
}

/* Hero-n belüli akciógombok sor */
.hero .actions{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px, 2vw, 16px);
  position: relative;
  z-index: 3;
  margin-top: clamp(16px, 3vw, 24px);
}

.hero .actions .btn{
  position: relative;
  overflow: hidden;
}

.hero .actions .btn::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}

.hero .actions .btn:hover::after{
  width: 300px;
  height: 300px;
}

/* Üveges tartalomkártya a hero-ban */
.hero-card{
  position: relative;
  max-width: 860px;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 22px;
  background: linear-gradient(135deg, 
    rgba(8,14,24,.75), 
    rgba(8,14,24,.60),
    rgba(59,130,246,.08)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 60px rgba(0,0,0,.3),
    0 8px 25px rgba(59,130,246,.1),
    inset 0 1px 0 rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 25px 80px rgba(0,0,0,.4),
    0 12px 35px rgba(59,130,246,.15),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* Enhanced hero card animations */
.hero-card::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hero-card:hover::after{
  opacity: 1;
}

.hero .container{
display: flex;
  justify-content: center;   /* vízszintesen középre */
  align-items: center;       /* függőlegesen középre */
  min-height: clamp(420px, 75vh, 860px);
  padding: clamp(40px, 8vw, 60px) clamp(1rem, 4vw, 2rem);
}

/* Kis sor-távolság az egymásra eső elemek között */
.hero-card > * + *{ 
  margin-top: clamp(12px, 2vw, 16px); 
  color: #fff;    
}

.hero-card .eyebrow{
  color: rgba(207,232,255,.95);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hero-card .hero-title{ 
  line-height: 1.05; 
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.hero-card .hero-subtitle{
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.hero-card .btn{
  color:#fff;
}
.hero-card .btn-ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  border:3px solid rgba(255,255,255,.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card .btn-ghost:hover{ 
  background: rgba(255,255,255,.18);
  border-color: var(--brand-warm);
  color: var(--brand-warm-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(245,158,11,.2);
}

/* Mobilon a kártya teljes szélesség közelébe mehet */
@media (max-width: 640px){
  .hero-card{ max-width: none; }
}