/* layout.css — Układ strony i animowana scena w tle */


.cloud {
  position: absolute;
  color: rgba(255,255,255,.85);
  font-size: 90px;
  filter: drop-shadow(0 10px 18px rgba(20,60,110,.18));
  animation: drift linear infinite;
  will-change: transform;
}

.cloud.c1 { top: 12%; font-size: 70px; opacity: .9;  animation-duration: 70s; }

.cloud.c2 { top: 26%; font-size: 120px; opacity: .7; animation-duration: 105s; animation-delay: -30s; }

.cloud.c3 { top: 46%; font-size: 55px; opacity: .8;  animation-duration: 85s; animation-delay: -55s; }

.cloud.c4 { top: 68%; font-size: 100px; opacity: .55; animation-duration: 120s; animation-delay: -80s; }

.pin.p1 { top: 30%; left: 18%; }

.pin.p2 { top: 58%; left: 74%; background: var(--teal); box-shadow:0 0 0 0 rgba(20,184,166,.6); animation-delay: 1s; }

.pin.p3 { top: 74%; left: 30%; background: #fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation-delay: 2s; }

.pin.p4 { top: 20%; left: 66%; background: var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation-delay: .5s; }

.landmark.l1 { bottom: 6%;  left: 6%;  animation-delay: 0s; }

.landmark.l2 { bottom: 10%; left: 40%; font-size: 58px; animation-delay: -2s; }

.landmark.l3 { bottom: 5%;  right: 8%; font-size: 52px; animation-delay: -4s; }

.landmark.l4 { top: 14%;    left: 44%; font-size: 40px; animation-delay: -6s; }

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene::before {
  content: '';
  position: absolute; inset: -10%;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 55%, transparent 100%);
  opacity: .5;
}

.scene::after {
  content: '';
  position: absolute;
  top: -160px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,214,140,.55) 0%, rgba(255,178,90,.18) 45%, transparent 70%);
  filter: blur(4px);
}

.pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245,158,11,.6);
  animation: ping 3.2s ease-out infinite;
}

.landmark {
  position: absolute;
  font-size: 46px;
  opacity: .18;
  filter: grayscale(.2);
  animation: bob 9s ease-in-out infinite;
}

.container {
  position: relative;
  z-index: 2;
  max-width: 1140px;   /* pełna szerokość - sekcje zamiast wąskiej kolumny */
  margin: 0 auto;
  padding: 26px 22px 60px;
}