:root{
      --bg:#0b0b0d;
      --bg2:#111115;
      --panel:#17171c;
      --text:#f2f0ea;
      --muted:#a8a5a0;
      --accent:#b7e300;
      --accent2:#d8ff45;
      --line:rgba(255,255,255,.10);
      --max:1180px;
      --radius:22px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--bg);
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.6;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:cover}

    .container{width:min(calc(100% - 40px),var(--max));margin:auto}

    header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:50;
      background:rgba(11,11,13,.78);
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .brand{
      font-weight:900;
      letter-spacing:-.04em;
      font-size:1rem;
      line-height:1;
      display:flex;
      align-items:center;
      gap:11px;
    }
    .brand-logo{
      width:46px;
      height:46px;
      object-fit:contain;
      flex:0 0 auto;
    }
    .brand-name{white-space:nowrap}
    .brand span{color:var(--accent)}
    .nav-links{display:flex;gap:30px;align-items:center}
    .nav-links a{
      color:#d5d2cc;
      font-size:.92rem;
      font-weight:700;
      transition:.2s;
    }
    .nav-links a:hover{color:var(--accent)}
    .menu-btn{
      display:none;
      border:1px solid var(--line);
      background:transparent;
      color:var(--text);
      width:44px;height:44px;
      border-radius:12px;
      font-size:1.25rem;
      cursor:pointer;
    }

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
      padding:120px 0 70px;
      background:
        radial-gradient(circle at 75% 35%,rgba(214,255,63,.10),transparent 28%),
        radial-gradient(circle at 15% 80%,rgba(255,255,255,.04),transparent 25%),
        var(--bg);
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.17;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:52px 52px;
      mask-image:linear-gradient(to bottom,black,transparent 85%);
      pointer-events:none;
    }
    .hero-inner{position:relative;z-index:1}
    .hero-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(250px,380px);
      gap:55px;
      align-items:center;
    }
    .hero-logo-wrap{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .hero-logo-wrap:before{
      content:"";
      position:absolute;
      width:120%;
      aspect-ratio:1;
      border-radius:50%;
      background:var(--accent);
      opacity:.07;
      filter:blur(35px);
    }
    .hero-logo{
      width:min(100%,350px);
      height:auto;
      position:relative;
      filter:drop-shadow(0 25px 45px rgba(0,0,0,.42));
    }
    .eyebrow{
      color:var(--accent);
      text-transform:uppercase;
      letter-spacing:.18em;
      font-weight:900;
      font-size:.78rem;
      margin-bottom:20px;
    }
    h1{
      max-width:900px;
      font-size:clamp(3.4rem,9vw,8.5rem);
      line-height:.86;
      letter-spacing:-.075em;
      text-transform:uppercase;
      font-weight:950;
    }
    h1 em{font-style:normal;color:var(--accent)}
    .hero-copy{
      max-width:610px;
      color:#c5c2bc;
      font-size:clamp(1.05rem,2vw,1.3rem);
      margin-top:34px;
    }
    .hero-line{
      display:flex;
      align-items:center;
      gap:15px;
      margin-top:40px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.82rem;
    }
    .hero-line:before{
      content:"";
      width:48px;height:3px;
      background:var(--accent);
    }

    section{padding:110px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:30px;
      margin-bottom:50px;
    }
    .section-number{
      color:var(--accent);
      font-size:.75rem;
      font-weight:900;
      letter-spacing:.16em;
      margin-bottom:12px;
    }
    h2{
      font-size:clamp(2.5rem,6vw,5rem);
      line-height:.9;
      letter-spacing:-.065em;
      text-transform:uppercase;
    }
    .lead{
      max-width:500px;
      color:var(--muted);
      font-size:1.05rem;
    }

    .about{
      background:var(--bg2);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .about-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:70px;
      align-items:center;
    }
    .about-text{
      color:#c6c3bd;
      font-size:1.15rem;
      max-width:700px;
    }
    .about-text p+p{margin-top:22px}
    .quote{
      border-left:3px solid var(--accent);
      padding-left:25px;
      margin-top:32px;
      font-weight:900;
      color:var(--text);
      font-size:1.35rem;
    }
    .about-card{
      min-height:390px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:
        linear-gradient(145deg,rgba(214,255,63,.10),transparent 45%),
        #15151a;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:35px;
      position:relative;
      overflow:hidden;
    }
    .about-card:before{
      content:"D20";
      position:absolute;
      right:-25px;
      top:-65px;
      font-size:15rem;
      line-height:1;
      font-weight:950;
      color:rgba(255,255,255,.035);
      transform:rotate(12deg);
    }
    .about-card strong{
      font-size:3rem;
      line-height:.95;
      letter-spacing:-.06em;
      position:relative;
    }
    .about-card span{
      color:var(--muted);
      margin-top:12px;
      position:relative;
    }

    .activities{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .activity{
      min-height:245px;
      padding:30px;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform .25s,border-color .25s,background .25s;
    }
    .activity:hover{
      transform:translateY(-5px);
      border-color:rgba(214,255,63,.45);
      background:#1b1b20;
    }
    .activity-icon{
      font-size:2rem;
      filter:grayscale(1);
    }
    .activity h3{
      font-size:1.45rem;
      text-transform:uppercase;
      letter-spacing:-.035em;
      margin-top:20px;
    }
    .activity p{color:var(--muted);font-size:.95rem;margin-top:6px}

    .members{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .member{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
    }
    .member-photo{
      aspect-ratio:4/3;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#77747a;
      background:
        linear-gradient(135deg,rgba(214,255,63,.08),transparent),
        #15151a;
      font-weight:900;
      letter-spacing:.1em;
      font-size:.72rem;
    }
    .member-body{padding:25px}
    .member h3{
      font-size:1.5rem;
      text-transform:uppercase;
      letter-spacing:-.04em;
    }
    .member-quote{
      color:var(--muted);
      font-size:.92rem;
      margin:10px 0 22px;
      min-height:48px;
    }
    .member dl{
      border-top:1px solid var(--line);
    }
    .member dl div{
      padding:11px 0;
      border-bottom:1px solid var(--line);
    }
    .member dt{
      color:#77747a;
      font-size:.68rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
    }
    .member dd{
      margin-top:2px;
      font-weight:800;
      font-size:.92rem;
    }

    .gallery{
      display:grid;
      grid-template-columns:1.35fr .8fr .8fr;
      grid-auto-rows:230px;
      gap:12px;
    }
    .gallery-item{
      border-radius:18px;
      overflow:hidden;
      background:#1a1a1e;
      border:1px solid var(--line);
      position:relative;
      cursor:pointer;
    }
    .gallery-item:first-child{grid-row:span 2}
    .gallery-item img{
      transition:transform .45s,filter .45s;
    }
    .gallery-item:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top,rgba(0,0,0,.20),transparent 45%);
      pointer-events:none;
    }
    .gallery-item:hover img{transform:scale(1.04)}
    .lightbox{
      position:fixed;
      inset:0;
      z-index:100;
      background:rgba(0,0,0,.92);
      display:none;
      align-items:center;
      justify-content:center;
      padding:30px;
    }
    .lightbox.open{display:flex}
    .lightbox img{
      width:auto;
      height:auto;
      max-width:min(1200px,94vw);
      max-height:90vh;
      object-fit:contain;
      border-radius:12px;
      box-shadow:0 20px 80px rgba(0,0,0,.5);
    }
    .lightbox-close{
      position:absolute;
      top:18px;
      right:22px;
      width:48px;
      height:48px;
      border:1px solid rgba(255,255,255,.2);
      border-radius:50%;
      background:rgba(255,255,255,.08);
      color:#fff;
      font-size:2rem;
      cursor:pointer;
    }
    .gallery-placeholder{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:20px;
      color:#77747a;
      background:
        linear-gradient(135deg,rgba(214,255,63,.06),transparent),
        #15151a;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.78rem;
    }

    .contact{
      background:var(--accent);
      color:#0b0b0d;
    }
    .contact .section-number{color:#0b0b0d}
    .contact-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:70px;
      align-items:end;
    }
    .contact h2{max-width:800px}
    .contact-copy{font-size:1.1rem;margin-top:25px;max-width:600px}
    .contact-links{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .contact-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:2px solid rgba(11,11,13,.18);
      padding:12px 0;
      font-weight:900;
      text-transform:uppercase;
    }
    .contact-link span:last-child{font-size:1.3rem}

    footer{
      background:#070708;
      padding:35px 0;
      color:#77757a;
      font-size:.8rem;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:20px;
    }
    footer strong{color:#d7d4ce}

@media (max-width: 850px) {
  .nav { height: 66px; }
  .menu-btn { display: block; }

  .nav-links {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 20px 30px;
    background: rgba(11,11,13,.97);
    border-bottom: 1px solid var(--line);
  }

  .nav-links.open { display: flex; }

  .hero {
    min-height: 90vh;
    padding-top: 105px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero-logo-wrap {
    order: -1;
    justify-content: flex-start;
  }

  .hero-logo { width: 150px; }

  section { padding: 80px 0; }
  .section-head { display: block; }
  .lead { margin-top: 20px; }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .activities {
    grid-template-columns: 1fr 1fr;
  }

  /* MOBILE: dokładnie jedna karta klubowicza w wierszu. */
  .members {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    gap: 16px;
  }

  .member {
    width: 100%;
    min-width: 0;
  }

  .member h3,
  .member-quote,
  .member dd {
    overflow-wrap: anywhere;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }

  .gallery-item:first-child {
    grid-row: span 2;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  h1 {
    font-size: clamp(3.1rem, 17vw, 5rem);
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-name { font-size: .83rem; }
  .hero-logo { width: 125px; }
  .hero-copy { font-size: 1rem; }
  .hero-line { margin-top: 30px; }
  section { padding: 65px 0; }

  .activities {
    grid-template-columns: 1fr;
  }

  /* MOBILE SMALL: nadal jedna karta na całą szerokość. */
  .members {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .activity { min-height: 190px; }

  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .gallery-item:first-child {
    grid-row: span 1;
  }

  .about-card { min-height: 280px; }
  .about-card strong { font-size: 2.4rem; }
  .contact-grid { gap: 35px; }

  .footer-inner {
    flex-direction: column;
  }

  .footer-brand {
    align-items: flex-start;
  }
}