
: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:50;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; }
header{ position:relative; z-index:10000; }
@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;
}

  to{   filter: drop-shadow(0 0 14px rgba(64,180,255,.85)) drop-shadow(0 0 30px rgba(64,180,255,.45)); }
}


/* --- 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; }
}


/* v64: split hero logo (Q + rest), no pre-glow; per-part neon on hover */
.hero-logo-group{
  display:flex; justify-content:center; align-items:flex-end; gap:12px;
  margin:-20px auto 44px auto;
}
.hero-logo-group img{ display:block; height:130px; width:auto; transition: transform .55s ease, filter .55s ease; }

/* Default state: pipes only (no glow) */
.logo-q, .logo-rest{ filter: none !important; }

@media (pointer: fine){
  .hero-logo-group:hover .logo-q{
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 16px #ff8800)
      drop-shadow(0 0 34px #ff8800)
      drop-shadow(0 0 58px #ff8800)
      brightness(1.12);
  }
  .hero-logo-group:hover .logo-rest{
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 16px #00ccff)
      drop-shadow(0 0 36px #00ccff)
      drop-shadow(0 0 60px #00ccff)
      brightness(1.12);
  }
}

/* Mobile sizing */
@media (max-width: 640px){
  .hero-logo-group img{ height:96px; }
}

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


/* v71: 3-part hero logo assembly (no glow change) */
.hero-logo-group3{
  display:flex; justify-content:center; align-items:flex-end; gap:14px;
  margin:-12px auto 44px auto;
}
.hero-logo-group3 .logo-q{ height:140px; width:auto; display:block; }
.hero-logo-group3 .logo-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-logo-group3 .logo-rest{ height:140px; width:auto; display:block; }
.hero-logo-group3 .logo-slogan{ height:36px; width:auto; display:block; }

@media (max-width: 640px){
  .hero-logo-group3 .logo-q{ height:104px; }
  .hero-logo-group3 .logo-rest{ height:104px; }
  .hero-logo-group3 .logo-slogan{ height:28px; }
}


/* v77: 3-part hero logo — final scaling per reference */
.hero-logo-group3{
  display:flex; justify-content:center; align-items:flex-end;
  gap:12px; margin:-4px auto 44px auto;
}
.hero-logo-group3 .logo-q{ height:150px; width:auto; display:block; }
.hero-logo-group3 .logo-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-logo-group3 .logo-rest{ height:250px; width:auto; display:block; position:relative; top:4px; }
.hero-logo-group3 .logo-slogan{ height:40px; width:auto; display:block; margin-top:12px; }

@media (max-width: 640px){
  .hero-logo-group3{ gap:10px; margin:-2px auto 32px auto; }
  .hero-logo-group3 .logo-q{ height:112px; }
  .hero-logo-group3 .logo-rest{ height:140px; top:2px; }
  .hero-logo-group3 .logo-slogan{ height:28px; margin-top:10px; }
}


/* v87: Minimal, isolated hero-logo tuning (no impact outside hero) */
.hero .hero-logo-group3{
  /* keep original flex layout from base; just nudge spacing */
  gap: 12px;
  margin: -8px auto 18px auto;
}
/* 50% scale vs base (150/250/40 -> 75/125/20) with fine alignment */
.hero .hero-logo-group3 .logo-q{
  height: 97px !important;
  width: auto;
  position: relative;
  left: 40px; /* optical centering: start ~half Q, end before S */
  top: -32px; /* lift Q to align baseline with LOGOS */
}
.hero .hero-logo-group3 .logo-rest{
  height: 150px !important;
  width: auto;
  position: relative;
  margin-left: -12px;     /* delikatne zacieśnienie; zwiększ absolutną wartość jeśli chcesz ciaśniej */
  left: 40px; /* optical centering: start ~half Q, end before S */
  top: -10;
}
.hero .hero-logo-group3 .logo-slogan{
  height: 26px !important;
  width: auto;
  margin-top: -1px;
  position: relative;
  left: -50px; /* -39 optical centering: start ~half Q, end before S */
  top: -2px;
}

/* Mobile (≤640px) — identyczne ustawienie jak desktop */
@media (max-width: 640px){
  .hero .hero-logo-group3{
    gap: 12px !important;
    margin: -8px auto 18px auto !important;
  }

  .hero .hero-logo-group3 .logo-q{
    height: 97px !important;
    width: auto;
    position: relative;
    left: 40px !important;
    top: -50px !important;     /* podniesione Q – tak samo jak desktop -45 - do góry + na dół */
  }

  .hero .hero-logo-group3 .logo-rest{
    height: 150px !important;
    width: auto;
    position: relative;
    margin-left: -12px !important;
    left: 40px !important;
    top: -10px !important;
  }

  .hero .hero-logo-group3 .logo-slogan{
    height: 26px !important;
    width: auto;
    margin-top: -1px !important;
    position: relative;
    left: -42px !important; /* było -39 * + idzie w prawo, - idzie w lewo */
    top: -16px !important;   /* - do góry + na dół */
  }
}



/* v94 consolidated: hover glow (desktop), persistent tap glow (mobile), stability & hit-area */
.hero .hero-logo-group3{
  display: inline-flex;              /* shrink hover area to logo bounds */
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero .hero-logo-group3 img{
  display:block;
  vertical-align:bottom;
  /* baseline filter to avoid none→something jump */
  filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(0,0,0,0));
  -webkit-user-drag: none;
  user-select: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transition: filter .65s ease-out;
}

/* Desktop hover glow */
@media (pointer: fine){
  .hero .hero-logo-group3:hover .logo-q{
    filter:
      drop-shadow(0 0 18px #ff8800)
      drop-shadow(0 0 42px #ff8800)
      brightness(1.24) saturate(1.16) !important;
  }
  .hero .hero-logo-group3:hover .logo-rest,
  .hero .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) !important;
  }
}

/* Mobile: slower transition and persistent glow on tap */
@media (pointer: coarse){
  .hero .hero-logo-group3 img{ transition: filter 1.2s ease-out; }
  .hero .hero-logo-group3, .hero .hero-logo-group3 *{
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }
  .hero .hero-logo-group3.glow-on .logo-q{
    filter:
      drop-shadow(0 0 18px #ff8800)
      drop-shadow(0 0 42px #ff8800)
      brightness(1.24) saturate(1.16) !important;
  }
  .hero .hero-logo-group3.glow-on .logo-rest,
  .hero .hero-logo-group3.glow-on .logo-slogan{
    filter:
      drop-shadow(0 0 20px #00ccff)
      drop-shadow(0 0 48px #00e5ff)
      brightness(1.22) saturate(1.14) !important;
  }
  .hero .hero-logo-group3{ cursor: pointer; }
}
