/* =====================================================
   ArCode PRO – Hero section (shortcode [arcode_hero])
   Przeniesione z eksportu "ArCode PRO.dc.html"
   ===================================================== */

/* Keyframes */
@keyframes acpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes acpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes acpDraw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes acpSpin{to{transform:rotate(360deg)}}
@keyframes acpBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes acpPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes acpSway{0%,100%{transform:scale(1.06) translateX(-1.1%)}50%{transform:scale(1.06) translateX(1.1%)}}
@keyframes acpPing{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.4);opacity:0}}

/* Kontener sekcji – lokalne zerowanie, żeby motyw nie nadpisywał typografii */
/* Nieprzezroczyste tło (#14110F = kolor, do którego wygasza się wideo) sprawia,
   że gwiazdy z tła strony nie prześwitują przez blok hero (liczniki, marquee)
   i nie ma widocznego szwu na styku z sekcją wideo. */
#acp{position:relative;overflow:hidden;background:#14110F;color:#F5EFE7;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#acp *{box-sizing:border-box}
#acp ::selection{background:#F26A1B;color:#14110F}
#acp h1{font-family:'Space Grotesk',system-ui,sans-serif}

/* Logotypy w marquee */
#acp .acp-logo{display:flex;align-items:center;justify-content:center;height:64px;padding:0 22px;flex:none}
#acp .acp-logo img{box-sizing:content-box;height:42px;max-width:158px;width:auto;object-fit:contain;display:block;filter:brightness(0) invert(1);opacity:.45;border-radius:8px;transition:opacity .35s ease,filter .35s ease,background .35s ease,padding .35s ease,margin .35s ease,box-shadow .35s ease}
/* Hover: pełne kolory + delikatne, jasne tło (czytelne też dla ciemnych logotypów).
   Ujemny margines kompensuje padding, żeby sąsiednie logo się nie przesuwały. */
#acp .acp-logo:hover img{filter:none;opacity:1;background:rgba(255,255,255,.94);padding:6px 12px;margin:0 -12px;box-shadow:0 6px 20px rgba(0,0,0,.28)}

/* ---- responsywność (mapowanie na style inline z eksportu) ---- */
#acp [style*="font-size: 70px"]{font-size:clamp(30px,8.5vw,70px)!important}
#acp [style*="font-size: 46px"]{font-size:clamp(27px,6vw,46px)!important}
#acp [style*="font-size: 44px"]{font-size:clamp(27px,6vw,44px)!important}
#acp [style*="font-size: 42px"]{font-size:clamp(26px,5.6vw,42px)!important}

@media(max-width:920px){
  #acp [style*="grid-template-columns: repeat(2, 1fr)"],
  #acp [style*="grid-template-columns: 1fr 1fr; gap: 20px"],
  #acp [style*="grid-template-columns: 0.9fr 1.1fr"]{grid-template-columns:1fr!important}
  #acp [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  #acp [style*="grid-template-columns: repeat(3, 1fr); gap: 20px"]{grid-template-columns:repeat(2,1fr)!important}
  #acp [style*="left: 6%; right: 6%; height: 2px"]{display:none!important}
  #acp [style*="grid-template-columns: 1.4fr 1fr 1fr 1.1fr"]{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){
  #acp-header nav{display:none!important}
  #acp .acp-social{display:none!important}
  #acp [style*="max-width: 1200px"],#acp [style*="max-width: 1080px"],#acp [style*="max-width: 1000px"]{padding-left:22px!important;padding-right:22px!important}
  #acp [style*="padding: 64px 56px"],#acp [style*="padding: 60px 56px"]{padding:40px 24px!important}

  /* Akapit lead – mniejsza czcionka i mniejszy margines pod spodem na mobile */
  #acp .acp-lead{font-size:.85rem!important;margin-bottom:15px!important}

  /* Przyciski CTA – jeden pod drugim, równa szerokość, mniejszy padding */
  #acp .acp-cta{flex-direction:column;align-items:stretch}
  #acp .acp-cta .acp-btn{width:100%;max-width:340px;margin:0 auto;justify-content:center;padding:12px 28px!important}

  /* Liczniki – skalowanie + mniejsze odstępy, żeby wszystkie 3 zmieściły się w rzędzie */
  #acp .acp-stat-num{font-size:clamp(22px,6.6vw,40px)!important}
  #acp .acp-stats>div{padding:6px 6px!important}
}

/* Liczniki – na najwęższych ekranach stackuj w kolumnę */
@media(max-width:400px){
  #acp .acp-stats{grid-template-columns:1fr!important}
  #acp .acp-stats>div{border-left:0!important;border-right:0!important;padding:14px 10px!important}
  #acp .acp-stats>div+div{border-top:1px solid rgba(245,239,231,.1)!important}
}
@media(max-width:620px){
  #acp [style*="grid-template-columns: repeat(3, 1fr); gap: 20px"]{grid-template-columns:1fr!important}
  #acp [style*="grid-template-columns: repeat(3, 1fr); align-items: center"]{grid-template-columns:1fr!important}
  #acp [style*="grid-template-columns: 1fr 1fr; gap: 16px"]{grid-template-columns:1fr!important}
  #acp [style*="grid-template-columns: 1.4fr 1fr 1fr 1.1fr"]{grid-template-columns:1fr!important}
  #acp [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:1fr!important}
}

/* Tablet (768–1023px): stały rozmiar nagłówka i opisu.
   Nagłówek celuje tym samym selektorem atrybutowym co reguła clamp powyżej
   (równa specyficzność), a bycie później w pliku zapewnia nadpisanie. */
@media(min-width:768px) and (max-width:1023px){
  #acp [style*="font-size: 70px"]{font-size:55px!important}
  #acp .acp-lead{font-size:15px!important}
}

/* Laptop (1024–1439px): mniejszy nagłówek i opis */
@media(min-width:1024px) and (max-width:1728px){
  #acp [style*="font-size: 70px"]{font-size:clamp(30px,8.5vw,58px)!important}
  #acp .acp-lead{font-size:.9rem!important}
}

/* Reduced motion – zatrzymaj animacje dla użytkowników preferujących mniej ruchu */
@media (prefers-reduced-motion: reduce){
  #acp [style*="animation"]{animation:none!important}
}