*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#010106}

:root{
  --bg:      #010106;
  --bg2:     #04040e;
  --bg3:     #08081a;
  --border:  #0f0f22;
  --text:    #ffffff;
  --sub:     #9090b0;
  --muted:   #4a4a6a;
  --dim:     #1a1a30;
  --acc:     #6e3fff;
  --acc-hi:  #9b6fff;
  --acc-lo:  #4a1fd4;
  --acc-glow:#8b5cf6;
}

.pg{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* HEADER */
.header{padding:2rem 2.5rem 0}

.tabs{
  display:inline-flex;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:100px;
  padding:4px;
}
.tab{
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:none;
  border:none;
  padding:8px 24px;
  cursor:pointer;
  border-radius:100px;
  transition:background 0.2s,color 0.2s;
}
.tab.active{background:var(--acc);color:#fff}
.tab:hover:not(.active){color:var(--sub)}

/* SCREENS */
.screen{display:none;flex:1;flex-direction:column}
.screen.active{display:flex}

/* WAKACJE HERO */
.hero{padding:2.5rem 2.5rem 0;flex:1;display:flex;flex-direction:column}

.label-sm{
  font-size:9px;
  font-weight:600;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.5rem;
}

.big-num{
  font-size:clamp(5rem,18vw,12rem);
  font-weight:900;
  line-height:0.9;
  letter-spacing:-0.03em;
  margin-bottom:1.8rem;
  background:linear-gradient(120deg,var(--acc-hi) 0%,var(--acc) 50%,var(--acc-lo) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.live-date{
  font-size:12px;
  font-weight:400;
  color:var(--sub);
  letter-spacing:0.08em;
  margin-bottom:2rem;
}

/* CARDS */
.cards-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:1px;
}
.card{
  background:var(--bg2);
  padding:1.4rem 1.25rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.card-lbl{
  font-size:9px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.card-val{
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
}
.card-sub{
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px;
}

.v-w   {color:#ffffff}
.v-acc {color:var(--acc-hi)}
.v-mid {color:var(--acc-glow)}
.v-lo  {color:var(--sub)}
.v-teal{color:#5eead4}

/* PROGRESS */
.progress-section{
  background:var(--bg2);
  border-radius:12px;
  padding:1.5rem 1.5rem 1.2rem;
  margin-top:1px;
  margin-bottom:1px;
}
.prog-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:1rem;
  gap:1rem;
  flex-wrap:wrap;
}
.prog-lbl{
  font-size:9px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.prog-pct{
  font-size:2rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--acc-hi);
}
.prog-track{
  height:1px;
  background:var(--border);
  border-radius:1px;
  overflow:hidden;
}
.prog-fill{
  height:100%;
  transition:width 0.6s ease;
  background:linear-gradient(90deg,var(--acc-lo),var(--acc),var(--acc-hi));
}
.prog-note{
  font-size:9px;
  font-weight:400;
  color:var(--muted);
  margin-top:0.6rem;
  letter-spacing:0.05em;
}

/* PRAGA HERO */
.prague-hero{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2.5rem 2.5rem 0;
}
.prague-days-wrap{margin-bottom:2rem}

.p-big{
  font-size:clamp(6rem,22vw,15rem);
  font-weight:900;
  line-height:0.85;
  letter-spacing:-0.04em;
  background:linear-gradient(120deg,var(--acc-hi),var(--acc),var(--acc-lo));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.p-word{
  font-size:clamp(1.2rem,3.5vw,2.2rem);
  font-weight:300;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.p-date-line{
  font-size:12px;
  font-weight:400;
  color:var(--sub);
  letter-spacing:0.1em;
  margin-top:0.8rem;
}

/* FOOTER */
.footer{
  padding:1rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  margin-top:auto;
}
.footer a{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:color 0.2s;
}
.footer a:hover{color:var(--acc-hi)}
.footer-clock{
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0.1em;
}

/* RESPONSIVE */
@media(max-width:600px){
  .header{padding:1.5rem 1.2rem 0}
  .hero,.prague-hero{padding:1.5rem 1.2rem 0}
  .footer{padding:1rem 1.2rem}
  .tab{padding:8px 16px}
}