:root{
      --hero-min-height: 100vh;
      --footer-height: 92px;
      --navy: #0b0f2a;
    }

    body{
      margin: 0;
      background: var(--navy);
      color: #fff;
      overflow-x: hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* HERO */
    .hero{
      position: relative;
      min-height: var(--hero-min-height);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /* tło bez ręki */
     
    }

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  background:
    radial-gradient(
      circle at 70% 50%,
      rgba(255,60,60,0.12),
      transparent 55%
    ),
    url("assets/bg_empty.png") no-repeat center center;

  background-size: cover;
 animation: bg-drift 24s ease-in-out infinite;
  /*animation: bg-glow 18s ease-in-out infinite;*/
}

@keyframes bg-glow{
  0%   { opacity:.6; }
  50%  { opacity:1; }
  100% { opacity:.6; }
}

@keyframes bg-drift{
  0%   { transform: scale(1) translate(0,0); opacity:1;}
  50%  { transform: scale(1.1) translate(0%, -7%); opacity:0.6;}
  100% { transform: scale(1) translate(0,0); opacity:1;}
	
	 0%   { transform: translateY(0)  rotate(0deg); }
  50%  { transform: scale(1.1) translateY(12px) rotate(-4deg); } 
  100% { transform: translateY(0)  rotate(0deg); }
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background: url("assets/hand.png") no-repeat right center;
  background-size: auto;

  pointer-events:none;
  z-index:0;

  /* kluczowe: punkt obrotu "nadgarstek" */
  transform-origin: 92% 32%;
  will-change: transform;

  /* start od obecnej pozycji */
  transform: translateY(0) rotate(0deg);

  animation:
    hand-enter 0.9s ease-out 0.3s forwards,
    hand-float-tilt 10s ease-in-out 1.2s infinite;
}

/* wejście jak u Ciebie */
@keyframes hand-enter {
  from { opacity: 0; transform: translateY(0) rotate(0deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* pływanie + delikatny tilt palców w dół */
@keyframes hand-float-tilt {
  0%   { transform: translateY(0)  rotate(0deg); }
  50%  { transform: translateY(12px) rotate(-4deg); }  /* <- palce w dół */
  100% { transform: translateY(0)  rotate(0deg); }
}

    /* RĘKA jako część tła (animowana)
    .hero::after{
      content: "";
      position: absolute;
      inset: 0;
      background: url("./assets/hand.png") right center / auto no-repeat;
      pointer-events: none;
      z-index: 0;
   animation:
        hand-enter 0.9s ease-out 0.3s forwards,
        hand-float 6s ease-in-out 1.2s infinite;
      opacity: 0;
      transform: translateY(12px);
    }

    @keyframes hand-enter{
      to{
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes hand-float{
      0%, 100%{ transform: translateY(0); }
      50%{ transform: translateY(12px); }
    }
 */
    .hero__content{
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      padding-top: 1.5rem;
      padding-bottom: 2rem;
    }

    .hero__inner{
      max-width: 820px;
    }

    .logo-title{

      height: auto;
      display: block;
      margin-bottom: 1.25rem;
    }

    .subtitle{
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: 0.2px;
      margin-bottom: 1.6rem;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
    }

    .subtitle .line{
      display:block;
      font-size: clamp(26px, 2.35vw, 44px);
    }

    .cta{
      display: inline-block;
      margin: 2rem 0;
		margin-bottom: 3rem;
    }

    .cta img{
      width: min(520px, 100%);
      height: auto;
      display:block;
    }

    .desc{
     max-width: 826px;
      font-size: 1rem;
      line-height: 1.45;
      opacity: .85;
      margin: 0rem 0 1.55rem;;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
		font-family: kallisto, sans-serif;
font-weight: 800;
font-style: normal;
		text-transform: none;
    }
.conf_name {
		font-family: komu-new-e, sans-serif;
font-weight: 400;
font-style: normal;
     font-size: clamp(10rem, 5.151rem, 84px);
      margin: 0;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
	line-height: normal;
    }
.conf_claim {
	font-family: kallisto, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(3.2rem, 3.2rem, 84px);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  line-height: normal;
	padding: 25px 0px;
    }
    .date {
		font-family: komu-new-c, sans-serif;
font-weight: 400;
font-style: normal;
 letter-spacing: 1px;
     font-size: clamp(34px, 5.151rem, 84px);
      margin: 0;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
		line-height: normal;
    }
@media (prefers-reduced-motion: reduce){
  .footerbar,
  .footerbar .logos img,
  .footerbar .actions > *{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .btn-reg,
  .icon-btn{
    transition: none !important;
  }
}
.footerbar{
  position: relative;
  transform: translateY(100%);
  opacity: 0;

  animation: footer-in 0.9s ease-out 0.6s forwards;
}
@keyframes footer-in{
  from{
    transform: translateY(100%);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}
    /* FOOTER BAR */
    .footerbar{
      flex: 0 0 auto;
      background: #fff;
      color: #111;
      height: var(--footer-height);
      border-top: 1px solid rgba(0,0,0,.08);
		height: fit-content;
		padding: 10px 0px;
    }

    .footerbar .wrap{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logos{
      display: flex;
      align-items: center;
      /*gap: clamp(12px, 2vw, 22px);*/
      flex-wrap: wrap;
    }

    .logos img{
     
      width: auto;
      display:block;
      object-fit: contain;
    }

    .actions{
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .btn-reg{
      display: inline-flex;
  align-items: center;
  justify-content: center;
    }
    .btn-reg:hover{ background: rgba(20, 28, 74, .06); }

    .icon-btn{
    display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-decoration: none;
    }

    .icon-btn img{
  
      height: auto;
      display:block;
    }

    /* Instagram – prosty inline SVG look */
    .ig svg{ width: 22px; height: 22px; }
    .ig svg *{ stroke: rgba(20, 28, 74, .95); }

    /* Layout/padding like in mock */
    .left-pad{
       padding-left: clamp(18px, 7vw, 70px);
      padding-right: 18px;
    }
/* ELEMENTY W FOOTERZE: wejście sekwencyjne (stagger) */
.footerbar .logos img,
.footerbar .actions > *{
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
  animation: footer-item-in 0.55s ease-out forwards;
  /* domyślnie start po wjeździe footera */
  animation-delay: 1.35s;
}

@keyframes footer-item-in{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


/* STAGGER LOGOS */
.footerbar .logos img:nth-child(1){ animation-delay: 1.35s; }
.footerbar .logos img:nth-child(2){ animation-delay: 1.55s; }
.footerbar .logos img:nth-child(3){ animation-delay: 1.65s; }
.footerbar .logos img:nth-child(4){ animation-delay: 1.75s; }
.footerbar .logos img:nth-child(5){ animation-delay: 1.85s; }

/* STAGGER AKCJE (REGULAMIN, IG, FB) */
.footerbar .actions > *:nth-child(1){ animation-delay: 1.45s; }
.footerbar .actions > *:nth-child(2){ animation-delay: 1.65s; }
.footerbar .actions > *:nth-child(3){ animation-delay: 1.75s; }
.footerbar .actions > *:nth-child(4){ animation-delay: 1.85s; }
    /* Dostosowanie ręki na mniejszych ekranach */
    @media (max-width: 991px){
      .hero::after{
        background-position: right top;
        background-size: 85%;
        opacity: 0.65;
		  display: none !important;
      }
    }

    /* Mobile tweaks */
    @media (max-width: 576px){
      :root{ --footer-height: auto; }
      .footerbar{
        height: auto;
        padding: 12px 0;
      }
      .footerbar .wrap{
        align-items: flex-start;
        flex-direction: column;
      }
      .actions{
        width: 100%;
        justify-content: flex-start;
		  gap: 2px;
      }
      .btn-reg{
        min-width: 194px;
      }
      .hero__content{
        padding-top: 2.25rem;
      }

      .hero::after{
        background-position: center bottom;
        background-size: 115%;
        opacity: 0.4;
      }
		.conf_name {
			line-height: 90%;
		}
		.conf_claim {
			font-size: clamp(1.8rem, 1.8rem, 4px);
		}
		.logos img {
  width: 50%;
			max-height: 81px;
		}
		.left-pad {
  padding-left: clamp(18px, 7vw, 120px);
  padding-right: clamp(18px, 7vw, 120px);
}
		.date {font-size: clamp(3.4rem, 3.4rem, 94px);
		}
		.icon-btn img {
			max-height: 60px;
		}
		.footerbar .wrap {
			display: inline-block !important;
		}
    }