:root {
  --bg: #1c1c1c;
  --white: #ffffff;
  --sand: #c4a882;
  --steel: #f0f0f0;
  --sans: 'Inter', system-ui, sans-serif;
  --serif: 'Inter', serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; background:#1c1c1c; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--steel);
  min-height: 100vh;
  overflow-x: hidden;
  padding:0;
  display:flex;
  flex-direction:column;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--policy-page-bg, url("/polityka-cookies/tlo.webp")) center/cover no-repeat;
  filter:brightness(.42);
  transform:scale(1.04);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  background:linear-gradient(135deg,rgba(28,28,28,.78),rgba(28,28,28,.54),rgba(28,28,28,.86));
}
a { color: var(--sand); text-decoration:none; transition:color .3s; }
a:hover { color: var(--white); }
.container {
  width:100%;
  max-width:800px;
  margin:0 auto;
  padding:2rem 5vw;
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ── FOOTER: shared with blog/index.html ───────────── */
footer {
  padding:.8rem 5vw;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;}
footer a { color:#999; text-decoration:none; transition:color .3s;}
footer a:hover { color:#ccc;}
.ft-text { font-size:.72rem; letter-spacing:.06em; color:#999;}
.ft-cookie { position:absolute; right:1.5vw; display:inline-flex; align-items:center; cursor:pointer; opacity:.6;}
.ft-cookie:hover { opacity:1;}

/* ── DEV LINK LOADER OVERLAY: shared with blog/index.html ── */
#dev-loader-overlay {
  position:fixed; inset:0; z-index:99999;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(6,8,15,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);}
#dev-loader-overlay.active { display:flex;}
#dev-loader-overlay .loader {
  position: absolute;
  top: 50%;
  margin-left: -50px;
  left: 50%;
  animation: speeder 0.4s linear infinite;}
#dev-loader-overlay .loader > span {
  height: 5px;
  width: 35px;
  background: #ff6b9d;
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;}
#dev-loader-overlay .base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid #ff6b9d;
  border-bottom: 6px solid transparent;}
#dev-loader-overlay .base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #c44dff;
  position: absolute;
  right: -110px;
  top: -16px;
  box-shadow: 0 0 15px rgba(196,77,255,0.6);}
#dev-loader-overlay .base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid #4d9eff;
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;}
#dev-loader-overlay .face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: #c44dff;
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
  box-shadow: 0 0 10px rgba(196,77,255,0.4);}
#dev-loader-overlay .face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: #4d9eff;
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 0 2px;
  box-shadow: 0 0 8px rgba(77,158,255,0.4);}
#dev-loader-overlay .loader > span > span:nth-child(1) {
  width: 30px;
  height: 1px;
  background: #ff6b9d;
  position: absolute;
  animation: fazer1 0.2s linear infinite;}
#dev-loader-overlay .loader > span > span:nth-child(2) {
  width: 30px;
  height: 1px;
  background: #c44dff;
  position: absolute;
  top: 3px;
  animation: fazer2 0.4s linear infinite;}
#dev-loader-overlay .loader > span > span:nth-child(3) {
  width: 30px;
  height: 1px;
  background: #4d9eff;
  position: absolute;
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;}
#dev-loader-overlay .loader > span > span:nth-child(4) {
  width: 30px;
  height: 1px;
  background: #ff6b9d;
  position: absolute;
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;}
@keyframes fazer1 { 0% { left: 0;} 100% { left: -80px; opacity: 0;}}
@keyframes fazer2 { 0% { left: 0;} 100% { left: -100px; opacity: 0;}}
@keyframes fazer3 { 0% { left: 0;} 100% { left: -50px; opacity: 0;}}
@keyframes fazer4 { 0% { left: 0;} 100% { left: -150px; opacity: 0;}}
@keyframes speeder {
  0% { transform: translate(2px, 1px) rotate(0deg);}
  10% { transform: translate(-1px, -3px) rotate(-1deg);}
  20% { transform: translate(-2px, 0px) rotate(1deg);}
  30% { transform: translate(1px, 2px) rotate(0deg);}
  40% { transform: translate(1px, -1px) rotate(1deg);}
  50% { transform: translate(-1px, 3px) rotate(-1deg);}
  60% { transform: translate(-1px, 1px) rotate(0deg);}
  70% { transform: translate(3px, 1px) rotate(-1deg);}
  80% { transform: translate(-2px, -1px) rotate(1deg);}
  90% { transform: translate(2px, 1px) rotate(0deg);}
  100% { transform: translate(1px, -2px) rotate(-1deg);}}
#dev-loader-overlay .longfazers {
  position: absolute;
  width: 100%;
  height: 100%;}
#dev-loader-overlay .longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;}
#dev-loader-overlay .longfazers span:nth-child(1) {
  top: 20%;
  background: #ff6b9d;
  animation: lf 0.6s linear infinite;
  animation-delay: -5s;}
#dev-loader-overlay .longfazers span:nth-child(2) {
  top: 40%;
  background: #c44dff;
  animation: lf2 0.8s linear infinite;
  animation-delay: -1s;}
#dev-loader-overlay .longfazers span:nth-child(3) {
  top: 60%;
  background: #4d9eff;
  animation: lf3 0.6s linear infinite;}
#dev-loader-overlay .longfazers span:nth-child(4) {
  top: 80%;
  background: #ff6b9d;
  animation: lf4 0.5s linear infinite;
  animation-delay: -3s;}
@keyframes lf {
  0% { left: 200%;}
  100% { left: -200%; opacity: 0;}}
@keyframes lf2 {
  0% { left: 200%;}
  100% { left: -200%; opacity: 0;}}
@keyframes lf3 {
  0% { left: 200%;}
  100% { left: -100%; opacity: 0;}}
@keyframes lf4 {
  0% { left: 200%;}
  100% { left: -100%; opacity: 0;}}
h1 {
  font-family:var(--serif);
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:300;
  color:var(--white);
  margin-bottom:2rem;
  line-height:1.15;
}
.back-link {
  position:fixed;
  top:2rem;
  left:5vw;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.back-link:hover { color:var(--sand); }
.notice {
  padding:3rem 2rem;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(48px);
  color:rgba(255,255,255,0.65);
  font-size:.9rem;
  line-height:1.85;
}
.notice p + p { margin-top:0.9rem; }
.notice-actions {
  display:flex;
  justify-content:center;
}
.notice-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:1.4rem;
  padding:.75rem 1.4rem;
  border:1px solid rgba(196,168,130,.45);
  border-radius:10px;
  color:var(--white);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}
.notice-cta:hover { color:var(--white); border-color:var(--sand); }