
:root{
  --bg:#0b1020; --panel:#12172a; --muted:#9aa4bf;
  --brand:#8b5cf6; --brand2:#22d3ee; --text:#e6e9f4; --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
header{position:sticky;top:0;z-index:999;background:rgba(11,16,32,.75);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
nav a{color:var(--text);opacity:.9;font-weight:500}
.burger{display:none;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);padding:8px 10px;border-radius:8px}
@media(max-width:880px){
  nav ul{display:none;flex-direction:column;background:var(--panel);position:absolute;top:60px;left:0;right:0;margin:0;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav ul.open{display:flex}
  .burger{display:block}
}

.hero{
  padding:72px 0;
  background:radial-gradient(1200px 500px at 50% -10%, rgba(34,211,238,.25), transparent 60%),
             radial-gradient(900px 500px at 80% 10%, rgba(139,92,246,.18), transparent 60%);
}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 10px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:800px}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:990px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:14px}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}
section{padding:40px 0;border-top:1px solid rgba(255,255,255,.06)}
h2{font-size:26px;margin:0 0 12px}
ul{padding-left:18px}
.cols{display:grid;gap:18px;grid-template-columns:1.2fr 1fr}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

.cta{display:inline-block;background:linear-gradient(90deg,var(--brand2),var(--brand));color:#0b1020;font-weight:700;padding:10px 16px;border-radius:10px;border:none}
.center{text-align:center}
footer{padding:40px 0;color:var(--muted);font-size:14px}
.contact-card{background:var(--panel);border:1px dashed rgba(255,255,255,.2);padding:18px;border-radius:14px}
.list-links a{display:inline-block;margin:4px 6px 0 0;word-break:break-all}


/* --- Zoom spotkania: sekcja ujednolicona --- */
#spotkania-online { margin-top: 24px; margin-bottom: 40px; }
#spotkania-online .info-card{ 
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; 
  padding: 20px; 
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
#spotkania-online h2{ margin: 0 0 8px; font-size: 1.4rem; }
#spotkania-online .zoom-link a{ word-break: break-all; }
#spotkania-online .code-grid{
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 10px; 
  margin: 10px 0 6px;
}
#spotkania-online .code{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
#spotkania-online .code span{ display:block; opacity: .8; font-size:.9rem; margin-bottom:4px }
#spotkania-online .code strong{ font-size:1.05rem; letter-spacing:.5px }
@media (min-width: 700px){
  #spotkania-online .code-grid{ grid-template-columns: 1fr 1fr; }
}


/* --- v17: optymalizacja menu --- */
@media (min-width: 980px) {
  .nav nav ul {
    gap: 14px;              /* ciaśniejsze odstępy między linkami */
    flex-wrap: nowrap;      /* nie zawijaj całej listy */
  }
  .nav nav ul li a {
    white-space: nowrap;    /* nie zawijaj tekstu w linkach */
    letter-spacing: 0;      /* neutralne kerning */
  }
}


/* --- v19: single-line nav on desktop --- */
@media (min-width: 980px){
  .nav nav{ flex: 1 1 auto; }
  .nav nav ul{ flex-wrap: nowrap; align-items: center; gap: 12px; }
  .nav nav ul li{ flex: 0 0 auto; }
  .nav nav ul li a{ white-space: nowrap; }
}
@media (min-width: 980px) and (max-width: 1200px){
  .nav nav ul li a{ font-size: 15px; }
}

/* v19: link "więcej …" pod kartami */
.more-link{ margin-top: 10px; }
.more-link a{ color: var(--muted); font-size: 14px; text-decoration: underline; }
.more-link a:hover{ color: var(--text); }

/* v19: typografia treści (prose) */
.prose{ max-width: var(--max); }
.prose h2{ margin-top: 28px; margin-bottom: 10px; }
.prose p{ margin: 10px 0; color: var(--text); }
.prose ul, .prose ol{ padding-left: 20px; }
.prose li{ margin: 6px 0; }

/* v20: klikalny brand jako link do strony głównej */
.brand{ text-decoration: none; cursor: pointer; }
.brand:hover{ text-decoration: none; opacity: .95; }

/* v37: mobile-visible share arrow */
.footer-row{ display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 18px; }
.copyright-row{ text-align:center; padding:6px 18px 16px 18px; }
.qr-actions{ position:relative; display:flex; align-items:center; gap:12px; }
.qr-download img{ display:block; background:#fff; padding:4px; border-radius:8px; }
.share-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent; color:#fff; /* force arrow visible */
  cursor:pointer; flex:0 0 auto; line-height:1; padding:0;
  -webkit-tap-highlight-color: rgba(255,255,255,.12);
  touch-action: manipulation;
}
.share-btn svg{ display:block; width:60px; height:60px; }
.share-btn svg, .share-btn svg *{ stroke: currentColor !important; vector-effect: non-scaling-stroke; }
.share-btn:hover{ background:rgba(255,255,255,.06); }
.share-menu{ position:absolute; z-index:9999; top:100%; left:50%; transform:translateX(-50%); margin-top:8px;
  background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px; min-width:220px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 10px 30px rgba(0,0,0,.35); max-height:60vh; overflow:auto; }
.share-menu[hidden]{ display:none !important; pointer-events:none; }

@media (max-width:560px){
  .brand img{ height:36px; }

  .footer-row{ flex-direction:column; gap:10px; }
  .share-btn{ width:64px; height:64px; border-radius:12px; }
  .share-btn svg{ width:48px; height:48px; }
  .qr-actions{ gap:14px; }
}

.hero-logo {
  display: block;
  margin: -20px auto 44px auto; /* większy odstęp pod logo */
  max-width: 92%;
  width: 520px;
  height: auto;
  filter: none;
  animation: none;
  opacity: 1;

  transition: transform 0.5s ease, filter 0.5s ease;
}


/* --- v42: efekt halo dla dużego logo --- */
.neon {
  filter: drop-shadow(0 0 25px #00bfff)
          drop-shadow(0 0 55px #00ccff)
          drop-shadow(0 0 90px #00ccff);
}


/* v45 effect: hover lens/glow */
.hero-logo:hover{
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 18px #00ccff)
    drop-shadow(0 0 35px #00ccff)
    saturate(1.3)
    brightness(1.15);
}


/* v47: mobile tap pulse (desktop hover unchanged) */
@keyframes pulseGlow{
  0%{ filter: brightness(1) saturate(1); }
  50%{ filter: brightness(1.35) saturate(1.25); }
  100%{ filter: brightness(1) saturate(1); }
}
.hero-logo.pulse{ animation: pulseGlow .6s ease-in-out; }


/* v48: center hero text and lower it a bit */
.hero .wrap{ text-align:center; }
.hero h1{ margin-top: 26px; }
.hero p.lead{ margin-top: 12px; margin-left:auto; margin-right:auto; }


/* v50: stable dropdown hover */
nav li.has-sub { position: relative; }
nav li.has-sub::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:12px;
}
nav .submenu {
  position: absolute; top:100%; right:0;
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  padding: 10px; border-radius: 10px; display: none; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
nav li.has-sub.open > .submenu,
nav li.has-sub:hover > .submenu,
nav li.has-sub:focus-within > .submenu { display: block; }
@media(max-width:880px){
  nav ul.open li.has-sub > .submenu {
    position: static; display: block; border: none; padding: 0; box-shadow: none; margin-left: 10px;
  }
  nav li.has-sub::after { display:none; }
}


/* --- HERO LOGO (Wersja Poprawiona - Płynna) --- */
.hero-logo-group3 {
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin: -8px auto 18px auto;
  
  /* Interakcja */
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.hero-logo-group3 img {
  display: block;
  vertical-align: bottom;
  width: auto;
  
  /* KLUCZ DO PŁYNNOŚCI: Definiujemy startowe wartości dla wszystkich filtrów */
  /* Kolejność musi być taka sama jak przy hover: Cień 1 -> Cień 2 -> Jasność -> Nasycenie */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1) saturate(1);
  
  -webkit-user-drag: none;
  user-select: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Wydłużony czas (1.2s) dla efektu powolnego rozpalania */
  transition: filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Pozycjonowanie elementów */
.hero-logo-group3 .logo-q {
  height: 97px;
  position: relative;
  left: 40px; top: -32px; 
}
.hero-logo-group3 .logo-rest {
  height: 150px;
  position: relative;
  margin-left: -12px;
  left: 40px; top: -10px;
}
.hero-logo-group3 .logo-slogan {
  height: 26px;
  position: relative;
  left: -50px; top: -2px;
}

/* --- Efekty Glow (Desktop - Hover) --- */
@media (pointer: fine) {
  .hero-logo-group3:hover .logo-q {
    /* Kolejność filtrów identyczna jak w stanie spoczynku */
    filter: drop-shadow(0 0 18px #ff8800) drop-shadow(0 0 42px #ff8800) brightness(1.24) saturate(1.16);
  }
  .hero-logo-group3:hover .logo-rest,
  .hero-logo-group3:hover .logo-slogan {
    filter: drop-shadow(0 0 20px #00ccff) drop-shadow(0 0 48px #00e5ff) brightness(1.22) saturate(1.14);
  }
} /* <--- TU BRAKOWAŁO ZAMKNIĘCIA */


/* --- Wersja Mobilna (układ i pozycje) --- */
@media (max-width: 640px) {
  .hero-logo-group3 { margin: -8px auto 18px auto; }
  .hero-logo-group3 .logo-q { top: -50px; left: 40px; }
  .hero-logo-group3 .logo-rest { left: 40px; top: -10px; }
  .hero-logo-group3 .logo-slogan { left: -42px; top: -16px; }

  /* Bardzo powolne wygaszanie na mobilkach */
  .hero-logo-group3 img { transition: filter 1.5s ease-out; }
}

/* --- Efekt Pulse (GLOBALNY - działa na każdym ekranie po kliknięciu) --- */
/* To musi być POZA klamrą @media, żeby działało na każdym telefonie */
.hero-logo-group3.pulse .logo-q {
  filter: drop-shadow(0 0 18px #ff8800) drop-shadow(0 0 42px #ff8800) brightness(1.24) saturate(1.16) !important;
}
.hero-logo-group3.pulse .logo-rest,
.hero-logo-group3.pulse .logo-slogan {
  filter: drop-shadow(0 0 20px #00ccff) drop-shadow(0 0 48px #00e5ff) brightness(1.22) saturate(1.14) !important;
}