/* ============================
       CSS CUSTOM PROPERTIES
    ============================ */
    :root {
      --clr-bg:         #0d0d0d;
      --clr-bg-2:       #121212;
      --clr-bg-3:       #1a1a1a;
      --clr-bg-4:       #222222;
      --clr-gold:       #c8a46a;
      --clr-gold-light: #e0c080;
      --clr-gold-dark:  #9a7840;
      --clr-copper:     #b87333;
      --clr-text:       #e8e0d0;
      --clr-text-muted: #9a9080;   /* było #8a8070 — poprawiony kontrast na ciemnym tle */
      --clr-text-dim:   #6a6055;   /* było #555045 — poprawiony kontrast */
      --clr-border:     rgba(200, 164, 106, 0.15);
      --clr-border-h:   rgba(200, 164, 106, 0.4);
      --clr-green:      #4caf6e;
      --clr-green-bg:   rgba(76, 175, 110, 0.1);
      --clr-red:        #e05555;
      --clr-red-bg:     rgba(224, 85, 85, 0.1);
      --clr-amber:      #d4a020;
      --clr-amber-bg:   rgba(212, 160, 32, 0.1);

      --ff-head: 'Bebas Neue', sans-serif;
      --ff-body: 'Crimson Pro', Georgia, serif;

      --fs-xs:   0.75rem;
      --fs-sm:   0.875rem;
      --fs-base: 1rem;
      --fs-lg:   1.2rem;
      --fs-xl:   1.5rem;
      --fs-2xl:  2rem;
      --fs-hero: clamp(2.8rem, 12vw, 7rem);

      --space-xs:  0.5rem;
      --space-sm:  1rem;
      --space-md:  1.25rem;
      --space-lg:  2rem;
      --space-xl:  3rem;
      --space-2xl: 4rem;

      --radius-sm: 4px;
      --radius-md: 8px;

      --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

      --nav-h:  60px;
      --max-w:  1280px;
      --px:     1rem;   /* page horizontal padding */

      /* Z-index system */
      --z-fab:      100;
      --z-nav:      200;
      --z-drawer:   250;
      --z-modal:    400;
      --z-popup:    500;
      --z-lightbox: 600;
      --z-skip:     700;
    }

    @media (min-width: 768px) {
      :root {
        --nav-h:   80px;
        --fs-base: 1.125rem;
        --fs-lg:   1.375rem;
        --fs-xl:   1.75rem;
        --fs-2xl:  2.25rem;
        --space-md:  1.5rem;
        --space-lg:  2.5rem;
        --space-xl:  4rem;
        --space-2xl: 6rem;
        --px: 1.5rem;
      }
    }

    /* ============================
       RESET & BASE
    ============================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h); /* anchor linki lądują poniżej fixed nava */
    }

    body {
      background-color: var(--clr-bg);
      color: var(--clr-text);
      font-family: var(--ff-body);
      font-size: var(--fs-base);
      line-height: 1.7;
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; height: auto; }
    a   { color: inherit; text-decoration: none; }
    ul  { list-style: none; }


    /* ============================
       SKIP LINK
    ============================ */
    .skip-link {
      position: absolute;
      top: -100px; left: 1rem;
      z-index: var(--z-skip);
      background: var(--clr-gold);
      color: var(--clr-bg);
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-family: var(--ff-head);
      letter-spacing: 0.1em;
      transition: top var(--transition);
    }
    .skip-link:focus { top: 1rem; }

    /* Custom scrollbar (desktop only) */
    @media (min-width: 768px) {
      ::-webkit-scrollbar { width: 6px; }
      ::-webkit-scrollbar-track { background: var(--clr-bg); }
      ::-webkit-scrollbar-thumb { background: var(--clr-gold-dark); border-radius: 3px; }
    }

    /* ============================
       TYPOGRAPHY
    ============================ */
    .section-label {
      display: inline-block;
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.2em;
      color: var(--clr-gold);
      text-transform: uppercase;
      margin-bottom: var(--space-sm);
    }
    .section-label::before { content: '// '; opacity: 0.5; }

    h1, h2, h3, h4 {
      font-family: var(--ff-head);
      letter-spacing: 0.05em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    h2 { font-size: clamp(1.8rem, 6vw, 3.5rem); }
    h3 { font-size: clamp(1.3rem, 4vw, 2.25rem); }

    .gold { color: var(--clr-gold); }

    /* ============================
       LAYOUT
    ============================ */
    .container {
      width: 100%;
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: var(--px);
    }

    section { padding: var(--space-2xl) 0; }

    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--clr-gold-dark), transparent);
      max-width: 600px;
      margin: var(--space-lg) auto 0;
    }

    /* ============================
       SCROLL REVEAL
    ============================ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }
    .reveal.revealed { opacity: 1; transform: none; }

    .reveal-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }
    .reveal-left.revealed { opacity: 1; transform: none; }

    .reveal-right {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }
    .reveal-right.revealed { opacity: 1; transform: none; }

    /* ============================
       NAVIGATION
    ============================ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: var(--z-nav);
      height: var(--nav-h);
      display: flex;
      align-items: center;
      padding-inline: var(--px);
      transition: background var(--transition), box-shadow var(--transition);
    }
    .nav.scrolled {
      background: rgba(10, 10, 10, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 var(--clr-border);
    }
    .nav::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
      pointer-events: none;
      transition: opacity var(--transition);
    }
    .nav.scrolled::before { opacity: 0; }

    .nav__inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--max-w);
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
    }

    .nav__logo {
      flex-shrink: 0;
      height: 36px;
    }
    @media (min-width: 768px) { .nav__logo { height: 44px; } }
    .nav__logo img { height: 100%; width: auto; object-fit: contain; }

    /* Desktop menu */
    .nav__menu {
      display: none;
      align-items: center;
      gap: var(--space-lg);
    }
    @media (min-width: 768px) { .nav__menu { display: flex; } }

    .nav__menu a {
      font-family: var(--ff-head);
      font-size: var(--fs-sm);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--clr-text);
      position: relative;
      padding-bottom: 2px;
      transition: color var(--transition);
    }
    .nav__menu a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1px;
      background: var(--clr-gold);
      transition: width var(--transition);
    }
    .nav__menu a:hover { color: var(--clr-gold); }
    .nav__menu a:hover::after { width: 100%; }
    .nav__menu a:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: 4px;
      border-radius: var(--radius-sm);
    }
    .nav__menu a.nav-active { color: var(--clr-gold); }
    .nav__menu a.nav-active::after { width: 100%; }

    /* Desktop social icons */
    .nav__social {
      display: none;
      align-items: center;
      gap: 0.6rem;
    }
    @media (min-width: 768px) { .nav__social { display: flex; } }

    .nav__social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      border: 1px solid var(--clr-border);
      border-radius: 50%;
      color: var(--clr-text-muted);
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }
    .nav__social a:hover {
      color: var(--clr-gold);
      border-color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.08);
    }
    .nav__social svg { width: 14px; height: 14px; }

    /* Hamburger – 44×44 touch target */
    .nav__hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px; height: 44px;
      background: none;
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 10px 8px;
      transition: border-color var(--transition);
      flex-shrink: 0;
    }
    @media (min-width: 768px) { .nav__hamburger { display: none; } }

    .nav__hamburger:hover { border-color: var(--clr-gold); }
    .nav__hamburger:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: 3px;
    }
    .nav__hamburger span {
      display: block;
      height: 1.5px;
      background: var(--clr-text);
      border-radius: 1px;
      transition: transform var(--transition), opacity var(--transition), background var(--transition);
    }
    .nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--clr-gold); }
    .nav__hamburger.open span:nth-child(2) { opacity: 0; }
    .nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--clr-gold); }

    /* Mobile drawer – visibility-based (not display) so CSS transitions work */
    .nav__drawer {
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      background: rgba(8, 8, 8, 0.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--clr-border);
      padding: var(--space-lg) var(--px) var(--space-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      z-index: var(--z-drawer);
      /* hidden state */
      visibility: hidden;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity var(--transition), transform var(--transition), visibility 0s var(--transition);
      pointer-events: none;
    }
    .nav__drawer.open {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition: opacity var(--transition), transform var(--transition), visibility 0s;
      pointer-events: all;
    }
    @media (min-width: 768px) { .nav__drawer { display: none; } }

    .nav__drawer a {
      font-family: var(--ff-head);
      font-size: clamp(1.5rem, 7vw, 2rem);
      letter-spacing: 0.08em;
      color: var(--clr-text);
      padding: 0.4em 0;
      border-bottom: 1px solid var(--clr-border);
      transition: color var(--transition);
    }
    .nav__drawer a:hover { color: var(--clr-gold); }

    .nav__drawer-social {
      display: flex;
      gap: var(--space-sm);
      margin-top: var(--space-md);
    }
    .nav__drawer-social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border: 1px solid var(--clr-border);
      border-radius: 50%;
      color: var(--clr-text-muted);
      transition: all var(--transition);
    }
    .nav__drawer-social a:hover { color: var(--clr-gold); border-color: var(--clr-gold); }
    .nav__drawer-social svg { width: 17px; height: 17px; }

    /* ============================
       HERO
    ============================ */
    .hero {
      position: relative;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      background-color: #1a1f15; /* fallback gdy zdjęcie nie załaduje */
      background-image: url('https://www.lupus.com.pl/wp-content/uploads/2021/02/oferty_pakiety_lupus_bg.jpg');
      background-size: cover;
      background-position: center;
      /* will-change dodawane przez JS tylko gdy parallax aktywny */
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.55) 50%,
        rgba(13,13,13,0.95) 100%
      );
    }

    .hero__content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: calc(var(--nav-h) + var(--space-xl)) var(--px) var(--space-xl);
      width: 100%;
      max-width: 900px;
    }

    .hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      font-family: var(--ff-head);
      font-size: clamp(0.65rem, 2.5vw, 0.875rem);
      letter-spacing: 0.2em;
      color: var(--clr-gold);
      margin-bottom: var(--space-md);
    }
    .hero__eyebrow::before,
    .hero__eyebrow::after {
      content: '';
      display: block;
      width: clamp(16px, 4vw, 30px);
      height: 1px;
      background: var(--clr-gold);
      opacity: 0.6;
      flex-shrink: 0;
    }

    .hero__title {
      font-size: var(--fs-hero);
      color: #fff;
      text-shadow: 0 4px 30px rgba(0,0,0,0.6);
      line-height: 0.95;
      margin-bottom: var(--space-md);
    }
    .hero__title span {
      display: block;
      color: var(--clr-gold);
      font-size: 0.5em;
      letter-spacing: 0.15em;
      margin-top: 0.2em;
    }

    .hero__subtitle {
      font-size: clamp(0.95rem, 2.5vw, 1.375rem);
      color: rgba(232, 224, 208, 0.8);
      font-style: italic;
      margin-bottom: var(--space-lg);
      letter-spacing: 0.02em;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      font-family: var(--ff-head);
      font-size: clamp(0.9rem, 3vw, 1.125rem);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 0.85em 1.8em;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition);
      border: none;
      /* min touch target */
      min-height: 48px;
    }
    .btn--primary {
      background: var(--clr-gold);
      color: var(--clr-bg);
    }
    .btn--primary:hover,
    .btn--primary:focus-visible {
      background: var(--clr-gold-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(200, 164, 106, 0.35);
    }
    .btn--outline {
      background: transparent;
      color: var(--clr-gold);
      border: 1px solid var(--clr-gold);
    }
    .btn--outline:hover,
    .btn--outline:focus-visible {
      background: var(--clr-gold);
      color: var(--clr-bg);
      transform: translateY(-2px);
    }
    .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* Hero CTA row */
    .hero__cta-row {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: var(--space-lg);
    }

    /* Full-width CTA on small screens */
    @media (max-width: 479px) {
      .hero__cta-row { flex-direction: column; align-items: center; }
      .hero__cta-row .btn { width: 100%; max-width: 320px; }
    }

    /* Hero mini-stats */
    .hero__mini-stats {
      display: flex;
      justify-content: center;
      gap: clamp(1.5rem, 5vw, 3rem);
      flex-wrap: wrap;
      margin-top: var(--space-lg);
    }
    .hero__mini-stat {
      text-align: center;
      position: relative;
    }
    .hero__mini-stat:not(:last-child)::after {
      content: '';
      position: absolute;
      right: calc(-0.75 * clamp(1.5rem, 5vw, 3rem) / 2);
      top: 15%;
      height: 70%;
      width: 1px;
      background: rgba(200, 164, 106, 0.25);
    }
    .hero__mini-stat strong {
      display: block;
      font-family: var(--ff-head);
      font-size: clamp(1.6rem, 5vw, 2.4rem);
      color: #fff;
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .hero__mini-stat span {
      font-size: var(--fs-xs);
      color: rgba(200, 164, 106, 0.8);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    @media (max-width: 479px) {
      .hero__mini-stat:not(:last-child)::after { display: none; }
    }
    @media (max-width: 359px) {
      .hero__mini-stats {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
      }
      .hero__mini-stat strong { font-size: clamp(1.4rem, 8vw, 1.8rem); }
    }

    /* Scroll indicator */
    .hero__scroll {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      color: var(--clr-text-muted);
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.2em;
      cursor: pointer;
      animation: bounce 2s infinite;
      /* larger touch target */
      padding: 0.5rem;
    }
    @media (min-width: 768px) { .hero__scroll { bottom: 2.5rem; } }

    .hero__scroll-mouse {
      width: 22px; height: 34px;
      border: 1.5px solid rgba(200, 164, 106, 0.4);
      border-radius: 11px;
      position: relative;
    }
    .hero__scroll-mouse::before {
      content: '';
      position: absolute;
      top: 5px; left: 50%;
      transform: translateX(-50%);
      width: 3px; height: 5px;
      background: var(--clr-gold);
      border-radius: 2px;
      animation: scroll-dot 2s infinite;
    }
    @keyframes scroll-dot {
      0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
      50%       { opacity: 0; transform: translateX(-50%) translateY(8px); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(5px); }
    }

    /* ============================
       ABOUT / STRZELNICA
    ============================ */
    #strzelnica_mysliwska {
      background: var(--clr-bg-2);
      position: relative;
    }
    #strzelnica_mysliwska::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8a46a' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    .about__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
    @media (min-width: 768px) {
      .about__grid { grid-template-columns: 1fr 1fr; }
    }

    .about__text h2 { margin-bottom: var(--space-md); }

    .about__lead {
      font-size: var(--fs-lg);
      line-height: 1.75;
      color: rgba(232, 224, 208, 0.85);
      margin-bottom: var(--space-lg);
      border-left: 2px solid var(--clr-gold);
      padding-left: var(--space-md);
    }

    .about__subtitle {
      font-family: var(--ff-head);
      font-size: var(--fs-xl);
      letter-spacing: 0.05em;
      color: var(--clr-gold);
      margin-bottom: var(--space-sm);
      margin-top: var(--space-lg);
    }

    .about__list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0 var(--space-sm);
    }
    .about__list li {
      display: flex;
      align-items: center;
      gap: 0.6em;
      font-size: var(--fs-base);
      color: var(--clr-text-muted);
      padding: 0.5em 0;
      border-bottom: 1px solid var(--clr-border);
    }
    .about__list li::before {
      content: '';
      display: block;
      flex-shrink: 0;
      width: 6px; height: 6px;
      background: var(--clr-gold);
      border-radius: 50%;
    }

    /* Feature badges */
    .feature-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: var(--space-md);
    }
    .feature-badge {
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.45em 1em;
      border: 1px solid var(--clr-border-h);
      border-radius: var(--radius-sm);
      color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.06);
      white-space: nowrap;
      transition: background var(--transition), border-color var(--transition);
    }
    .feature-badge:hover {
      background: rgba(200, 164, 106, 0.12);
      border-color: var(--clr-gold);
    }

    /* Hours block */
    .hours-block {
      background: var(--clr-bg-4);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .hours-block__title {
      font-family: var(--ff-head);
      font-size: var(--fs-lg);
      letter-spacing: 0.05em;
      color: var(--clr-gold);
      margin-bottom: var(--space-sm);
    }
    .hours-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
      padding: 0.45em 0;
      border-bottom: 1px solid var(--clr-border);
    }
    .hours-row:last-child { border-bottom: none; }
    .hours-val {
      font-family: var(--ff-head);
      font-size: var(--fs-base);
      color: var(--clr-text);
      letter-spacing: 0.04em;
    }
    .hours-val--open   { color: var(--clr-green); }
    .hours-val--closed { color: var(--clr-text-dim); }

    .about__features {
      margin-top: var(--space-md);
      display: flex;
      flex-direction: column;
    }
    .about__features li {
      display: flex;
      align-items: flex-start;
      gap: 0.75em;
      color: var(--clr-text-muted);
      padding: 0.55em 0;
      border-bottom: 1px solid var(--clr-border);
      font-size: var(--fs-base);
    }
    .about__features li::before {
      content: '›';
      color: var(--clr-gold);
      font-size: 1.4em;
      line-height: 1;
      flex-shrink: 0;
    }

    .about__body {
      font-size: var(--fs-base);
      color: rgba(232, 224, 208, 0.75);
      margin-top: var(--space-md);
      line-height: 1.8;
    }

    /* Image block */
    .about__image-wrap {
      position: relative;
      /* image goes first on mobile */
      order: -1;
    }
    @media (min-width: 768px) {
      .about__image-wrap {
        order: unset;
      }
      /* Decorative border only on desktop (avoids overflow on mobile) */
      .about__image-wrap::before {
        content: '';
        position: absolute;
        top: -12px; right: -12px;
        bottom: 12px; left: 12px;
        border: 1px solid var(--clr-gold-dark);
        border-radius: var(--radius-md);
        pointer-events: none;
        z-index: 0;
      }
    }

    .about__image {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      border-radius: var(--radius-md);
      filter: brightness(0.9) contrast(1.05);
    }
    @media (min-width: 768px) {
      .about__image { aspect-ratio: 4/3; }
    }

    .about__badge {
      position: absolute;
      z-index: 2;
      /* safe position on all screen sizes */
      bottom: -1rem;
      left: 0.5rem;
      transform: none;
      background: var(--clr-gold);
      color: var(--clr-bg);
      font-family: var(--ff-head);
      font-size: clamp(0.6rem, 2vw, 0.875rem);
      letter-spacing: 0.1em;
      padding: 0.5em 1em;
      border-radius: var(--radius-sm);
      line-height: 1.3;
      text-align: center;
      white-space: nowrap;
    }
    @media (min-width: 768px) {
      .about__badge {
        bottom: -16px;
        left: -16px;
        transform: none;
      }
    }

    /* ============================
       CENNIK
    ============================ */
    #cennik {
      background: var(--clr-bg);
      position: relative;
    }

    .pricing__header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .pricing__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
    @media (min-width: 480px) {
      .pricing__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 768px) {
      /* tablet landscape: 3 kolumny aby uniknąć zbyt szerokich kart */
      .pricing__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1024px) {
      .pricing__grid { grid-template-columns: repeat(4, 1fr); }
    }

    .pricing__card {
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      position: relative;
      overflow: hidden;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                  box-shadow var(--transition),
                  border-color var(--transition);
    }
    @media (min-width: 768px) {
      .pricing__card { padding: var(--space-lg); }
    }

    .pricing__card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--clr-gold-dark), var(--clr-gold));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition);
    }
    .pricing__card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.4);
      border-color: var(--clr-border-h);
    }
    .pricing__card:hover::before { transform: scaleX(1); }

    .pricing__card-icon {
      width: 36px; height: 36px;
      margin-bottom: 0.75rem;
      color: var(--clr-gold);
    }
    .pricing__card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }

    .pricing__card-name {
      font-family: var(--ff-head);
      font-size: var(--fs-lg);
      letter-spacing: 0.04em;
      color: var(--clr-text);
      margin-bottom: 0.4rem;
      line-height: 1.2;
    }

    .pricing__card-price {
      font-family: var(--ff-head);
      font-size: var(--fs-2xl);
      color: var(--clr-gold);
      letter-spacing: 0.02em;
    }
    .pricing__card-price span {
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
      margin-left: 0.2em;
    }

    .pricing__note {
      text-align: center;
      margin-top: var(--space-lg);
      color: var(--clr-text-muted);
      font-style: italic;
      font-size: var(--fs-sm);
    }

    /* Featured pricing card */
    .pricing__card--featured {
      border-color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.06);
    }
    .pricing__card--featured::before {
      transform: scaleX(1);
    }
    .pricing__card__badge {
      display: inline-block;
      position: absolute;
      top: -1px;
      right: 1rem;
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--clr-gold);
      color: var(--clr-bg);
      padding: 0.25em 0.85em;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    /* ============================
       WYNAJEM / AMUNICJA
    ============================ */
    .rental {
      margin-top: var(--space-xl);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
    @media (min-width: 768px) {
      .rental { grid-template-columns: 1fr 1fr; }
    }
    .rental__card {
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
    }
    .rental__card-head {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--clr-border);
    }
    .rental__card-head svg {
      width: 22px; height: 22px; flex-shrink: 0;
      fill: none; stroke: var(--clr-gold); stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .rental__card-head h3 {
      font-family: var(--ff-head);
      font-size: 1.15rem;
      letter-spacing: 0.06em;
      color: var(--clr-gold);
    }
    .rental__rows { display: flex; flex-direction: column; gap: 0.5rem; }
    .rental__row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      font-size: var(--fs-sm);
    }
    .rental__row-label { color: var(--clr-text-muted); }
    .rental__row-val {
      font-family: var(--ff-head);
      font-size: 1rem;
      letter-spacing: 0.06em;
      color: var(--clr-text);
      white-space: nowrap;
    }
    .rental__row-val.ask {
      font-family: var(--ff-body);
      font-size: var(--fs-sm);
      color: var(--clr-gold);
      font-style: italic;
    }
    .rental__note {
      margin-top: var(--space-sm);
      padding-top: var(--space-sm);
      border-top: 1px solid var(--clr-border);
      font-size: var(--fs-xs);
      color: var(--clr-text-dim);
      line-height: 1.6;
    }
    .rental__badge {
      display: inline-block;
      background: var(--clr-green-bg);
      color: var(--clr-green);
      border: 1px solid rgba(76,175,110,0.3);
      border-radius: 3px;
      font-family: var(--ff-head);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      padding: 0.15rem 0.5rem;
      margin-left: 0.4rem;
      vertical-align: middle;
    }

    /* ============================
       FAQ
    ============================ */
    .faq { background: var(--clr-bg-2); }
    .faq__header { text-align: center; margin-bottom: var(--space-xl); }
    .faq__list { max-width: 720px; margin: 0 auto; }
    .faq__item {
      border-bottom: 1px solid var(--clr-border);
    }
    .faq__item:first-child { border-top: 1px solid var(--clr-border); }
    .faq__btn {
      width: 100%;
      background: none;
      border: none;
      padding: 1.1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      cursor: pointer;
      text-align: left;
      font-family: var(--ff-body);
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--clr-text);
      transition: color var(--transition);
    }
    .faq__btn:hover { color: var(--clr-gold); }
    .faq__btn[aria-expanded="true"] { color: var(--clr-gold); }
    .faq__icon {
      flex-shrink: 0;
      width: 20px; height: 20px;
      fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
      transition: transform var(--transition);
    }
    .faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
    .faq__body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .faq__body.open { grid-template-rows: 1fr; }
    .faq__body-inner {
      overflow: hidden;
    }
    .faq__answer {
      padding-bottom: 1.1rem;
      font-size: var(--fs-base);
      color: var(--clr-text-muted);
      line-height: 1.8;
    }
    .faq__answer strong { color: var(--clr-text); }
    .faq__answer a { color: var(--clr-gold); }
    .faq__answer a:hover { color: var(--clr-gold-light); }

    /* ============================
       GALERIA
    ============================ */
    #galeria { background: var(--clr-bg-2); }

    .gallery__header {
      text-align: center;
      margin-bottom: var(--space-lg);
    }
    .gallery__intro {
      font-size: var(--fs-lg);
      color: var(--clr-text-muted);
      max-width: 600px;
      margin-inline: auto;
      margin-top: var(--space-sm);
    }

    .gallery__grid {
      columns: 2;
      column-gap: 0.5rem;
    }
    @media (min-width: 600px) { .gallery__grid { columns: 3; } }
    @media (min-width: 1024px) { .gallery__grid { columns: 4; } }

    .gallery__item {
      break-inside: avoid;
      margin-bottom: 0.5rem;
      overflow: hidden;
      border-radius: var(--radius-sm);
      cursor: pointer;
      position: relative;
    }
    .gallery__item img {
      width: 100%;
      display: block;
      transition: transform var(--transition-slow), filter var(--transition);
      filter: brightness(0.85) saturate(0.9);
    }
    .gallery__item-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Always visible on touch, hover-only on pointer devices */
      opacity: 1;
      background: rgba(0,0,0,0.25);
      transition: opacity var(--transition), background var(--transition);
    }
    .gallery__item-overlay svg {
      width: 28px; height: 28px;
      fill: none;
      stroke: rgba(255,255,255,0.75);
      stroke-width: 1.5;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
    }
    /* On pointer devices: hide overlay until hover */
    @media (hover: hover) and (pointer: fine) {
      .gallery__item-overlay { opacity: 0; background: transparent; }
      .gallery__item:hover .gallery__item-overlay {
        opacity: 1;
        background: rgba(200, 164, 106, 0.08);
      }
      .gallery__item:hover img {
        transform: scale(1.05);
        filter: brightness(1) saturate(1.1);
      }
    }

    .gallery__social {
      display: flex;
      justify-content: center;
      gap: var(--space-sm);
      margin-top: var(--space-xl);
      flex-wrap: wrap;
    }
    .gallery__social a {
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-family: var(--ff-head);
      font-size: var(--fs-sm);
      letter-spacing: 0.12em;
      color: var(--clr-text-muted);
      border: 1px solid var(--clr-border);
      padding: 0.7em 1.4em;
      border-radius: var(--radius-sm);
      min-height: 44px;
      transition: all var(--transition);
    }
    .gallery__social a svg { width: 16px; height: 16px; }
    .gallery__social a:hover {
      color: var(--clr-gold);
      border-color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.05);
    }

    /* Gallery filters */
    .gallery__filters {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }
    /* Na mobile: przewijalne w poziomie z subtelnym wskaźnikiem */
    @media (max-width: 599px) {
      .gallery__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        padding-right: 2.5rem;
        /* gradient fade po prawej jako wskaźnik scrollu */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
      }
      .gallery__filters::-webkit-scrollbar { display: none; }
      .gallery__filter { flex-shrink: 0; }
    }
    .gallery__filter {
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.55em 1.2em;
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--clr-text-muted);
      cursor: pointer;
      min-height: 40px;
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }
    .gallery__filter:hover {
      border-color: var(--clr-gold);
      color: var(--clr-gold);
    }
    .gallery__filter:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: 3px;
    }
    .gallery__filter.active {
      border-color: var(--clr-gold);
      color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.07);
    }
    .gallery__item:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: 2px;
    }

    /* ukryte elementy galerii */
    .gallery__item[hidden] {
      display: none;
    }

    /* ============================
       CTA STRIP
    ============================ */
    .cta-strip {
      background: var(--clr-bg-3);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
      padding: var(--space-2xl) 0;
      position: relative;
      overflow: hidden;
    }
    /* Subtelny złoty akcent w tle */
    .cta-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 60% 50%, rgba(200, 164, 106, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-strip__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xl);
      flex-wrap: wrap;
    }
    .cta-strip__text { flex: 1; min-width: 260px; }
    .cta-strip__title {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 5vw, 3.2rem);
      letter-spacing: 0.04em;
      color: var(--clr-text);
      line-height: 1.05;
      margin-bottom: 0.6rem;
    }
    .cta-strip__title span { color: var(--clr-gold); }
    .cta-strip__sub {
      font-size: var(--fs-lg);
      color: var(--clr-text-muted);
      line-height: 1.6;
      max-width: 480px;
    }
    .cta-strip__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    @media (max-width: 599px) {
      .cta-strip__actions { width: 100%; }
      .cta-strip__actions .btn { width: 100%; justify-content: center; }
    }

    /* ============================
       LIGHTBOX
    ============================ */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: var(--z-lightbox);
      background: rgba(0,0,0,0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .lightbox.open { opacity: 1; pointer-events: all; }

    .lightbox__img {
      max-width: 92vw;
      max-height: 80vh;
      object-fit: contain;
      border-radius: var(--radius-sm);
      box-shadow: 0 0 60px rgba(0,0,0,0.8);
      transform: scale(0.96);
      transition: opacity 0.2s ease, transform var(--transition);
      /* prevent text-selection on swipe */
      user-select: none;
      -webkit-user-select: none;
    }
    .lightbox.open .lightbox__img { transform: scale(1); }

    .lightbox__close {
      position: absolute;
      top: 1rem; right: 1rem;
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .lightbox__close:hover { background: var(--clr-gold); border-color: var(--clr-gold); color: var(--clr-bg); }
    .lightbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

    .lightbox__nav {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .lightbox__nav:hover { background: var(--clr-gold); border-color: var(--clr-gold); color: var(--clr-bg); }
    .lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

    .lightbox__prev { left: 0.5rem; }
    .lightbox__next { right: 0.5rem; }

    @media (min-width: 768px) {
      .lightbox__prev { left: 1.5rem; }
      .lightbox__next { right: 1.5rem; }
      .lightbox__nav { width: 50px; height: 50px; }
      .lightbox__img { max-width: 88vw; max-height: 85vh; }
    }

    .lightbox__counter {
      position: absolute;
      bottom: 1rem; left: 50%; transform: translateX(-50%);
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.4);
      white-space: nowrap;
    }

    /* Swipe hint text – only on touch */
    .lightbox__swipe-hint {
      position: absolute;
      bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.25);
      white-space: nowrap;
    }
    @media (hover: hover) and (pointer: fine) { .lightbox__swipe-hint { display: none; } }

    /* ============================
       KONTAKT
    ============================ */
    #kontakt { background: var(--clr-bg); }

    .contact__header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .contact__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
    @media (min-width: 768px) {
      .contact__grid { grid-template-columns: 1fr 1fr; }
    }

    .contact__info h3 {
      font-size: var(--fs-xl);
      color: var(--clr-gold);
      margin-bottom: var(--space-md);
    }

    .contact__item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--clr-border);
    }
    .contact__item-icon {
      flex-shrink: 0;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(200, 164, 106, 0.08);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
      color: var(--clr-gold);
    }
    .contact__item-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
    .contact__item-label {
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.15em;
      color: var(--clr-text-dim);
      margin-bottom: 2px;
    }
    .contact__item-val { font-size: var(--fs-base); color: var(--clr-text); }
    .contact__item-val a { transition: color var(--transition); }
    .contact__item-val a:hover { color: var(--clr-gold); }

    .contact__legal {
      margin-top: var(--space-lg);
      padding: var(--space-md);
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
    }
    .contact__legal p {
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
      line-height: 1.6;
    }

    .contact__map-wrap h3 {
      font-size: var(--fs-xl);
      color: var(--clr-gold);
      margin-bottom: var(--space-md);
    }
    .contact__map-address {
      font-size: var(--fs-base);
      color: var(--clr-text-muted);
      margin-bottom: var(--space-md);
      display: flex;
      align-items: center;
      gap: 0.5em;
    }
    .contact__map-address svg { width: 14px; height: 14px; fill: none; stroke: var(--clr-gold); stroke-width: 2; flex-shrink: 0; }

    .contact__map-frame {
      width: 100%;
      /* taller on mobile */
      aspect-ratio: 4/3;
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .contact__map-frame { aspect-ratio: 16/9; }
    }
    .contact__map-frame iframe {
      width: 100%; height: 100%;
      border: none;
      filter: grayscale(0.8) brightness(0.7) contrast(1.1);
    }

    /* ============================
       DOJAZD
    ============================ */
    .directions {
      margin-top: var(--space-2xl);
      padding-top: var(--space-xl);
      border-top: 1px solid var(--clr-border);
    }
    .directions__header {
      margin-bottom: var(--space-lg);
    }
    .directions__header h3 {
      font-family: var(--ff-head);
      font-size: var(--fs-2xl);
      letter-spacing: 0.04em;
      color: var(--clr-gold);
      margin-bottom: 0.4rem;
    }
    .directions__header p {
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
    }
    .directions__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
    @media (min-width: 768px) {
      .directions__grid { grid-template-columns: repeat(3, 1fr); }
    }
    .directions__card {
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      transition: border-color var(--transition);
    }
    .directions__card:hover { border-color: var(--clr-border-h); }
    .directions__card-icon {
      width: 40px; height: 40px;
      background: var(--clr-bg-4);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--space-sm);
    }
    .directions__card-icon svg {
      width: 20px; height: 20px;
      fill: none; stroke: var(--clr-gold); stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .directions__card-title {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      letter-spacing: 0.06em;
      color: var(--clr-text);
      margin-bottom: 0.25rem;
    }
    .directions__card-dist {
      font-size: var(--fs-xs);
      font-family: var(--ff-head);
      letter-spacing: 0.12em;
      color: var(--clr-gold);
      margin-bottom: var(--space-sm);
    }
    .directions__card ol {
      padding-left: 1.2rem;
      margin: 0;
    }
    .directions__card li {
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
      margin-bottom: 0.3rem;
      line-height: 1.5;
    }
    .directions__card li strong { color: var(--clr-text); }
    .directions__parking {
      margin-top: var(--space-md);
      background: var(--clr-bg-4);
      border: 1px solid var(--clr-border);
      border-left: 3px solid var(--clr-gold);
      border-radius: var(--radius-sm);
      padding: 0.85rem 1.1rem;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: var(--fs-sm);
      color: var(--clr-text-muted);
    }
    .directions__parking svg {
      width: 18px; height: 18px; flex-shrink: 0;
      fill: none; stroke: var(--clr-gold); stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
      margin-top: 2px;
    }
    .directions__parking strong { color: var(--clr-text); }

    /* ============================
       FOOTER
    ============================ */
    .footer {
      background: #060606;
      border-top: 1px solid var(--clr-border);
      padding: var(--space-xl) 0 var(--space-lg);
    }

    .footer__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-md);
      text-align: center;
    }
    @media (min-width: 768px) {
      .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        text-align: left;
        gap: var(--space-lg);
      }
    }

    .footer__logo img {
      height: 44px;
      width: auto;
      opacity: 0.85;
      transition: opacity var(--transition);
    }
    .footer__logo img:hover { opacity: 1; }

    .footer__social {
      display: flex;
      gap: 0.75rem;
    }
    .footer__social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border: 1px solid var(--clr-border);
      border-radius: 50%;
      color: var(--clr-text-muted);
      transition: all var(--transition);
    }
    .footer__social a:hover {
      color: var(--clr-gold);
      border-color: var(--clr-gold);
      background: rgba(200, 164, 106, 0.08);
    }
    .footer__social svg { width: 16px; height: 16px; }

    .footer__nav {
      display: flex;
      gap: var(--space-md);
      flex-wrap: wrap;
      justify-content: center;
    }
    @media (min-width: 768px) { .footer__nav { justify-content: flex-start; } }
    .footer__nav a {
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clr-text-dim);
      transition: color var(--transition);
    }
    .footer__nav a:hover { color: var(--clr-gold); }

    .footer__copy {
      font-size: var(--fs-sm);
      color: var(--clr-text-dim);
    }
    .footer__copy a { color: var(--clr-text-muted); transition: color var(--transition); }
    .footer__copy a:hover { color: var(--clr-gold); }

    /* Scroll to top */
    .scroll-top {
      position: fixed;
      bottom: 1.25rem; right: 1.25rem;
      z-index: var(--z-fab);
      width: 44px; height: 44px;
      background: var(--clr-gold);
      color: var(--clr-bg);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity var(--transition), transform var(--transition), background var(--transition);
      pointer-events: none;
    }
    .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
    .scroll-top:hover { background: var(--clr-gold-light); }
    .scroll-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }

    /* ============================
       STATS STRIP
    ============================ */
    .stats-strip {
      background: var(--clr-bg-4);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
      padding: var(--space-xl) 0;
    }
    .stats-strip__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md) 0;
    }
    @media (min-width: 768px) {
      .stats-strip__grid { grid-template-columns: repeat(4, 1fr); }
    }
    .stats-strip__item {
      text-align: center;
      padding: var(--space-sm) var(--space-md);
      position: relative;
    }
    /* separatory pionowe między elementami */
    .stats-strip__item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 15%; height: 70%;
      width: 1px;
      background: var(--clr-border);
    }
    /* na mobilce co drugi element nie ma separatora */
    @media (max-width: 767px) {
      .stats-strip__item:nth-child(even)::after { display: none; }
    }
    .stats-strip__val {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.15em;
      line-height: 1;
      margin-bottom: 0.4rem;
    }
    .stats-strip__num {
      font-family: var(--ff-head);
      font-size: clamp(2.4rem, 6vw, 3.8rem);
      color: var(--clr-gold);
      letter-spacing: 0.02em;
    }
    .stats-strip__unit {
      font-family: var(--ff-head);
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      color: var(--clr-gold-dark);
    }
    .stats-strip__label {
      font-size: var(--fs-xs);
      color: var(--clr-text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* ============================
       FLOATING PHONE BUTTON (FAB)
    ============================ */
    .fab-phone {
      display: none;
      position: fixed;
      bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
      left: 1.25rem;
      z-index: var(--z-fab);
      width: 52px;
      height: 52px;
      background: #2e7d52;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 4px 20px rgba(46, 125, 82, 0.45);
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .fab-phone svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
      flex-shrink: 0;
    }
    .fab-phone:hover,
    .fab-phone:focus-visible {
      background: #3da368;
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(46, 125, 82, 0.6);
    }
    /* Widoczny tylko na mobilce */
    @media (max-width: 767px) {
      .fab-phone { display: flex; }
    }
    /* Odsunięcie scroll-top od FAB na małych ekranach */
    @media (max-width: 767px) {
      .scroll-top { right: 1.25rem; bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)); }
    }

    /* ============================
       REDUCED MOTION
    ============================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
    }

    /* ============================
       TERMINARZ ZAWODÓW
    ============================ */
    #zawody {
      background: var(--clr-bg-3);
      position: relative;
    }
    #zawody::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8a46a' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    .comp__header { text-align: center; margin-bottom: var(--space-xl); }
    .comp__header p { font-size: var(--fs-lg); color: var(--clr-text-muted); max-width: 580px; margin: var(--space-sm) auto 0; }

    /* Tab bar */
    .comp__tabs {
      display: flex;
      gap: 0.2rem;
      margin-bottom: var(--space-xl);
      border-bottom: 1px solid var(--clr-border);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .comp__tabs::-webkit-scrollbar { display: none; }

    .comp__tab {
      flex-shrink: 0;
      font-family: var(--ff-head);
      font-size: var(--fs-sm);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clr-text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 0.75em 1.25em;
      cursor: pointer;
      margin-bottom: -1px;
      transition: color var(--transition), border-color var(--transition);
      white-space: nowrap;
    }
    .comp__tab:hover { color: var(--clr-text); }
    .comp__tab:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: -2px;
    }
    .comp__tab.active { color: var(--clr-gold); border-bottom-color: var(--clr-gold); }

    /* Tab panels */
    .comp__panel { display: none; }
    .comp__panel.active { display: block; }

    /* Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3em;
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      padding: 0.25em 0.7em;
      border-radius: var(--radius-sm);
      text-transform: uppercase;
      flex-shrink: 0;
      line-height: 1.4;
    }
    .badge--green  { background: var(--clr-green-bg);  color: var(--clr-green);  border: 1px solid rgba(76,175,110,0.25); }
    .badge--amber  { background: var(--clr-amber-bg);  color: var(--clr-amber);  border: 1px solid rgba(212,160,32,0.25); }
    .badge--red    { background: var(--clr-red-bg);    color: var(--clr-red);    border: 1px solid rgba(224,85,85,0.25); }
    .badge--gold   { background: rgba(200,164,106,0.1); color: var(--clr-gold);  border: 1px solid var(--clr-border); }
    .badge--dim    { background: var(--clr-bg-4); color: var(--clr-text-muted);  border: 1px solid var(--clr-border); }
    .badge svg     { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* Competition cards grid */
    .comp-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
    @media (min-width: 680px)  { .comp-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1100px) { .comp-grid { grid-template-columns: repeat(3, 1fr); } }

    /* ============================
       CLAYCIRCUIT CTA CARD
    ============================ */
    .cc-card {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
      align-items: center;
      padding: var(--space-lg);
      background: linear-gradient(135deg, var(--clr-bg-4) 0%, var(--clr-bg-2) 100%);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      position: relative;
      overflow: hidden;
    }
    .cc-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
    }
    @media (min-width: 720px) {
      .cc-card {
        grid-template-columns: 220px 1fr;
        gap: var(--space-xl);
        padding: var(--space-xl);
      }
    }
    .cc-card__logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-md);
      background: rgba(255,255,255,0.04);
      border-radius: var(--radius-md);
      border: 1px solid var(--clr-border);
    }
    .cc-card__logo img {
      width: 100%;
      max-width: 180px;
      height: auto;
      object-fit: contain;
    }
    .cc-card__title {
      font-family: var(--ff-head);
      font-size: clamp(1.4rem, 3vw, 1.8rem);
      color: var(--clr-text);
      margin-bottom: var(--space-sm);
      line-height: 1.2;
    }
    .cc-card__desc {
      color: var(--clr-text-muted);
      line-height: 1.65;
      margin-bottom: var(--space-md);
    }
    .cc-card__desc strong { color: var(--clr-gold); font-weight: 600; }
    .cc-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
    }
    @media (max-width: 479px) {
      .cc-card__actions { flex-direction: column; align-items: stretch; }
      .cc-card__actions .btn { width: 100%; justify-content: center; }
    }

    .comp-card {
      background: var(--clr-bg-4);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--transition),
                  box-shadow var(--transition),
                  transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .comp-card:hover { border-color: var(--clr-border-h); box-shadow: 0 12px 40px rgba(0,0,0,0.4); transform: translateY(-3px); }

    .comp-card__img {
      width: 100%;
      aspect-ratio: 16/7;
      object-fit: cover;
      filter: brightness(0.8) saturate(0.85);
      transition: filter var(--transition-slow), transform var(--transition-slow);
    }
    .comp-card:hover .comp-card__img {
      filter: brightness(0.9) saturate(1);
    }
    .comp-card__img-placeholder {
      width: 100%;
      aspect-ratio: 16/7;
      background: linear-gradient(135deg, #1a1a1a 0%, #1e1a14 50%, #221e16 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      color: var(--clr-text-dim);
      font-family: var(--ff-head);
      font-size: var(--fs-lg);
      letter-spacing: 0.1em;
      border-bottom: 1px solid var(--clr-border);
    }
    .comp-card__img-placeholder svg {
      width: 32px; height: 32px;
      stroke: var(--clr-text-dim);
      fill: none; stroke-width: 1.5;
      opacity: 0.5;
    }
    .comp-card__body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; gap: 0.6rem; }
    .comp-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .comp-card__title {
      font-family: var(--ff-head);
      font-size: clamp(1.1rem, 3vw, 1.45rem);
      letter-spacing: 0.04em;
      color: var(--clr-text);
      line-height: 1.15;
    }
    .comp-card__details { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.2rem; }
    .comp-card__detail { display: flex; align-items: flex-start; gap: 0.5em; font-size: var(--fs-sm); color: var(--clr-text-muted); }
    .comp-card__detail svg { width: 14px; height: 14px; fill: none; stroke: var(--clr-gold); stroke-width: 1.8; flex-shrink: 0; margin-top: 0.2em; }

    /* Spots bar */
    .comp-card__spots { margin-top: 0.5rem; }
    .spots-label { font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-text-muted); }
    .spots-label strong { color: var(--clr-gold); }
    .spots-bar { height: 4px; background: var(--clr-bg); border-radius: 2px; overflow: hidden; margin-top: 0.3rem; }
    .spots-bar__fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--clr-gold-dark), var(--clr-gold)); }

    .comp-card__footer {
      margin-top: auto;
      padding-top: var(--space-sm);
      border-top: 1px solid var(--clr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }
    .comp-card__price { font-family: var(--ff-head); font-size: var(--fs-xl); color: var(--clr-gold); letter-spacing: 0.04em; }
    .comp-card__price span { font-size: var(--fs-sm); color: var(--clr-text-muted); margin-left: 0.2em; }

    /* Buttons inside zawody */
    .comp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      font-family: var(--ff-head);
      font-size: var(--fs-sm);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.7em 1.4em;
      border-radius: var(--radius-sm);
      border: none;
      min-height: 44px;
      cursor: pointer;
      transition: all var(--transition);
    }
    .comp-btn--gold   { background: var(--clr-gold); color: var(--clr-bg); }
    .comp-btn--gold:hover { background: var(--clr-gold-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,164,106,0.3); }
    .comp-btn--ghost  { background: transparent; color: var(--clr-text-muted); border: 1px solid var(--clr-border); }
    .comp-btn--ghost:hover { border-color: var(--clr-gold); color: var(--clr-gold); }
    .comp-btn--outline { background: transparent; color: var(--clr-gold); border: 1px solid var(--clr-gold); }
    .comp-btn--outline:hover { background: var(--clr-gold); color: var(--clr-bg); }
    .comp-btn--sm     { font-size: var(--fs-xs); padding: 0.5em 1em; min-height: 44px; } /* 44px touch target */
    .comp-btn--full   { width: 100%; }
    .comp-btn:focus-visible {
      outline: 2px solid var(--clr-gold);
      outline-offset: 3px;
    }
    .comp-btn:disabled { opacity: 0.4; pointer-events: none; }
    .comp-btn svg     { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* Section sub-header */
    .comp-sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }
    .comp-sub h3 {
      font-family: var(--ff-head);
      font-size: clamp(1.4rem, 4vw, 2rem);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--clr-text);
    }
    .comp-sub h3 span { color: var(--clr-gold); }

    /* Past competition rows */
    .past-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .past-row {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-md);
      background: var(--clr-bg-4);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-md);
      transition: border-color var(--transition);
      flex-wrap: wrap;
    }
    .past-row:hover { border-color: var(--clr-border-h); }

    .past-row__date {
      text-align: center;
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
      padding: 0.4em 0.7em;
      min-width: 62px;
      flex-shrink: 0;
    }
    .past-row__date-day { font-family: var(--ff-head); font-size: 1.5rem; line-height: 1; color: var(--clr-gold); }
    .past-row__date-mon { font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--clr-text-muted); text-transform: uppercase; }

    .past-row__info { flex: 1; min-width: 160px; }
    .past-row__title { font-family: var(--ff-head); font-size: var(--fs-lg); letter-spacing: 0.04em; color: var(--clr-text); line-height: 1.2; }
    .past-row__sub { font-size: var(--fs-xs); color: var(--clr-text-muted); margin-top: 0.2rem; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
    .past-row__sub span { display: flex; align-items: center; gap: 0.25em; }
    .past-row__sub svg { width: 11px; height: 11px; fill: none; stroke: var(--clr-gold); stroke-width: 2; }

    .past-row__winner { font-size: var(--fs-sm); color: var(--clr-text-muted); min-width: 130px; }
    .past-row__winner strong { color: var(--clr-text); display: block; }

    /* Results */
    .results-selector { display: flex; gap: 0.5rem; margin-bottom: var(--space-lg); flex-wrap: wrap; }
    .results-selector button {
      font-family: var(--ff-head);
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.5em 1.1em;
      border-radius: var(--radius-sm);
      border: 1px solid var(--clr-border);
      background: transparent;
      color: var(--clr-text-muted);
      min-height: 40px;
      cursor: pointer;
      transition: all var(--transition);
    }
    .results-selector button.active { border-color: var(--clr-gold); color: var(--clr-gold); background: rgba(200,164,106,0.06); }
    .results-selector button:hover  { border-color: var(--clr-gold); color: var(--clr-gold); }

    .results-meta { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
    .results-meta-item { font-size: var(--fs-sm); color: var(--clr-text-muted); display: flex; align-items: center; gap: 0.4em; }
    .results-meta-item svg { width: 14px; height: 14px; fill: none; stroke: var(--clr-gold); stroke-width: 1.8; }
    .results-meta-item strong { color: var(--clr-text); }

    /* Podium */
    .podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-xl); }
    @media (max-width: 479px) { .podium { grid-template-columns: 1fr; max-width: 240px; margin-inline: auto; } }

    .podium-place {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: var(--space-md) var(--space-sm);
      border-radius: var(--radius-md);
      border: 1px solid var(--clr-border);
      background: var(--clr-bg-4);
      gap: 0.35rem;
    }
    .podium-place.first  { border-color: var(--clr-gold); background: rgba(200,164,106,0.06); }
    .podium-place.second { border-color: rgba(180,180,200,0.3); }
    .podium-place.third  { border-color: rgba(184,115,51,0.3); }
    .podium-medal { font-size: 1.8rem; line-height: 1; }
    .podium-name  { font-family: var(--ff-head); font-size: var(--fs-lg); letter-spacing: 0.04em; color: var(--clr-text); line-height: 1.2; }
    .podium-club  { font-size: var(--fs-xs); color: var(--clr-text-muted); }
    .podium-score { font-family: var(--ff-head); font-size: var(--fs-2xl); color: var(--clr-gold); margin-top: 0.2rem; }
    .podium-score span { font-size: var(--fs-sm); color: var(--clr-text-muted); }

    /* Station legend */
    .station-legend { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
    .station-legend-item { font-size: var(--fs-xs); color: var(--clr-text-muted); display: flex; align-items: center; gap: 0.3em; }
    .station-legend-item::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-gold-dark); flex-shrink: 0; }

    /* Results table */
    .table-wrap { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: var(--radius-md); }
    .comp-table { width: 100%; border-collapse: collapse; min-width: 580px; }
    .comp-table thead tr { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); }
    .comp-table th {
      font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--clr-text-muted);
      padding: 0.85em 1em; text-align: left; white-space: nowrap;
    }
    .comp-table th.num, .comp-table td.num { text-align: center; }
    .comp-table td { padding: 0.8em 1em; font-size: var(--fs-sm); color: var(--clr-text); border-bottom: 1px solid var(--clr-border); vertical-align: middle; }
    .comp-table tr:last-child td { border-bottom: none; }
    .comp-table tbody tr:hover { background: rgba(200,164,106,0.03); }

    .rank-badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      font-family: var(--ff-head); font-size: var(--fs-sm);
    }
    .rank-badge.gold   { background: rgba(200,164,106,0.15); color: var(--clr-gold);   border: 1px solid rgba(200,164,106,0.4); }
    .rank-badge.silver { background: rgba(180,180,200,0.1);  color: #b0b0c0;            border: 1px solid rgba(180,180,200,0.3); }
    .rank-badge.bronze { background: rgba(184,115,51,0.12);  color: #c87a40;            border: 1px solid rgba(184,115,51,0.35); }
    .rank-badge.plain  { background: var(--clr-bg-4); color: var(--clr-text-muted);    border: 1px solid var(--clr-border); }

    .score-cell { font-family: var(--ff-head); font-size: var(--fs-sm); letter-spacing: 0.04em; }
    .score-cell.total { font-size: var(--fs-lg); color: var(--clr-gold); }
    .score-cell.best  { color: var(--clr-green); }
    .contestant-name  { font-weight: 600; }
    .contestant-club  { font-size: var(--fs-xs); color: var(--clr-text-muted); margin-top: 1px; }

    /* Empty state */
    .comp-empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--clr-text-muted); border: 1px dashed var(--clr-border); border-radius: var(--radius-md); }
    .comp-empty svg { width: 38px; height: 38px; fill: none; stroke: var(--clr-text-dim); stroke-width: 1.2; margin: 0 auto var(--space-sm); }

    /* Registration modal */
    .comp-modal-overlay {
      position: fixed; inset: 0; z-index: var(--z-modal);
      background: rgba(0,0,0,0.82);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: flex-end; justify-content: center;
      padding: 0;
      visibility: hidden; opacity: 0;
      transition: opacity 0.35s ease, visibility 0s 0.35s;
    }
    @media (min-width: 640px) { .comp-modal-overlay { align-items: center; padding: var(--px); } }
    .comp-modal-overlay.open { visibility: visible; opacity: 1; transition: opacity 0.35s ease, visibility 0s; }

    .comp-modal {
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border-h);
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      width: 100%; max-width: 540px;
      max-height: 92dvh; overflow-y: auto;
      transform: translateY(30px);
      transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    @media (min-width: 640px) { .comp-modal { border-radius: var(--radius-md); } }
    .comp-modal-overlay.open .comp-modal { transform: translateY(0); }

    .comp-modal__hdr {
      padding: var(--space-md); border-bottom: 1px solid var(--clr-border);
      display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm);
      position: sticky; top: 0; background: var(--clr-bg-3); z-index: 1;
    }
    .comp-modal__hdr-title { font-family: var(--ff-head); font-size: var(--fs-xl); letter-spacing: 0.05em; color: var(--clr-text); line-height: 1.15; }
    .comp-modal__hdr-sub   { font-size: var(--fs-sm); color: var(--clr-gold); margin-top: 0.2rem; }

    .comp-modal-close {
      width: 36px; height: 36px; flex-shrink: 0;
      background: var(--clr-bg-4); border: 1px solid var(--clr-border); border-radius: 50%;
      color: var(--clr-text-muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .comp-modal-close:hover { background: var(--clr-gold); border-color: var(--clr-gold); color: var(--clr-bg); }
    .comp-modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

    .comp-modal__body { padding: var(--space-md); }

    /* Form */
    .f-row     { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
    @media (min-width: 480px) { .f-row.two { grid-template-columns: 1fr 1fr; } }
    .f-group   { display: flex; flex-direction: column; gap: 0.4rem; }
    .f-label   { font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-text-muted); }
    .f-label em { color: var(--clr-red); font-style: normal; margin-left: 0.2em; }
    .f-control {
      background: var(--clr-bg-4); border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
      padding: 0.7em 0.9em; font-family: var(--ff-body); font-size: var(--fs-base);
      color: var(--clr-text); width: 100%; min-height: 44px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .f-control::placeholder { color: var(--clr-text-dim); }
    .f-control:focus { outline: none; border-color: var(--clr-gold); box-shadow: 0 0 0 3px rgba(200,164,106,0.12); }
    select.f-control {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8070' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.9em center; padding-right: 2.5em;
    }
    select.f-control option { background: var(--clr-bg-3); }

    .f-check { display: flex; align-items: flex-start; gap: 0.7em; font-size: var(--fs-sm); color: var(--clr-text-muted); cursor: pointer; margin-bottom: var(--space-sm); }
    .f-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--clr-gold); margin-top: 0.15em; }
    .f-check a { color: var(--clr-gold); text-decoration: underline; text-underline-offset: 2px; }

    .f-summary {
      background: var(--clr-bg-4); border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
      padding: var(--space-md); margin-bottom: var(--space-md);
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .f-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); color: var(--clr-text-muted); }
    .f-summary-row.total { border-top: 1px solid var(--clr-border); padding-top: 0.5rem; margin-top: 0.2rem; font-family: var(--ff-head); font-size: var(--fs-lg); letter-spacing: 0.05em; color: var(--clr-text); }
    .f-summary-row.total span { color: var(--clr-gold); }

    /* Spinner dla submit */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .btn-spinner {
      width: 16px; height: 16px;
      border: 2px solid rgba(13,13,13,0.3);
      border-top-color: var(--clr-bg);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }

    /* Stany przycisku submit */
    .comp-btn--submitting { opacity: 0.75; pointer-events: none; }

    /* Błędy walidacji */
    .f-control.error {
      border-color: var(--clr-red);
      box-shadow: 0 0 0 3px rgba(224, 85, 85, 0.12);
    }
    .f-error {
      font-size: var(--fs-xs);
      color: var(--clr-red);
      margin-top: 0.2rem;
      display: none;
    }
    .f-error.visible { display: block; }

    .comp-modal-success {
      display: none; flex-direction: column; align-items: center; text-align: center;
      padding: var(--space-xl) var(--space-md); gap: var(--space-sm);
    }
    .comp-modal-success.show { display: flex; }
    .comp-modal-success .icon {
      width: 64px; height: 64px; border-radius: 50%;
      background: var(--clr-green-bg); border: 1px solid rgba(76,175,110,0.3);
      display: flex; align-items: center; justify-content: center; color: var(--clr-green);
      margin-bottom: var(--space-sm);
    }
    .comp-modal-success .icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }
    .comp-modal-success h3 { font-family: var(--ff-head); font-size: var(--fs-2xl); letter-spacing: 0.04em; }
    .comp-modal-success p  { font-size: var(--fs-lg); color: var(--clr-text-muted); max-width: 320px; }

    /* Table scroll hint */
    .table-scroll-hint {
      display: none;
      align-items: center;
      gap: 0.4em;
      font-size: var(--fs-xs);
      color: var(--clr-text-muted);
      margin-bottom: 0.5rem;
      background: rgba(200, 164, 106, 0.06);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-sm);
      padding: 0.4em 0.8em;
    }
    .table-scroll-hint svg { width: 14px; height: 14px; fill: none; stroke: var(--clr-gold); stroke-width: 2; }

    /* Fade gradient po prawej stronie tabeli na mobile */
    @media (max-width: 599px) {
      .table-wrap {
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
      }
      .table-wrap:hover,
      .table-wrap:focus-within {
        -webkit-mask-image: none;
        mask-image: none;
      }
    }

    /* ============================
       ZAWODY – MOBILE FIXES
    ============================ */



    @media (max-width: 599px) {
      /* Pokaż wskazówkę scrollowania tabeli */
      .table-scroll-hint { display: flex; }

      /* Past rows: ukryj kolumnę zwycięzcy, rozciągnij przycisk */
      .past-row { gap: 0.6rem; }
      .past-row__winner { display: none; }
      .past-row > .comp-btn { width: 100%; justify-content: center; margin-top: 0.25rem; }

      /* Podium: mniejsze fonty przy 3 kolumnach */
      .podium-place { padding: 0.65rem 0.4rem; gap: 0.25rem; }
      .podium-medal { font-size: 1.3rem; }
      .podium-name  { font-size: var(--fs-base); letter-spacing: 0.02em; }
      .podium-club  { display: none; }
      .podium-score { font-size: var(--fs-xl); margin-top: 0; }

      /* Results selector: pionowo, pełna szerokość */
      .results-selector { flex-direction: column; }
      .results-selector button { width: 100%; text-align: left; }

      /* Results meta: mniejszy gap */
      .results-meta { gap: var(--space-sm); }

      /* Station legend: 2 kolumny */
      .station-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.75rem; }

      /* Comp sub: tytuł + badge pionowo */
      .comp-sub { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

      /* Card footer: trzymaj cenę i przycisk w jednej linii */
      .comp-card__footer { flex-wrap: nowrap; }

      /* Nie przycinaj modalu od dołu */
      .comp-modal { max-height: 96dvh; }

      /* Safe area dla telefonów z notchem */
      .comp-modal {
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
    }

    /* 480–599px: przywróć podium-club */
    @media (min-width: 480px) and (max-width: 599px) {
      .podium-club { display: block; }
    }

    /* ============================
       POPUP
    ============================ */
    .popup-overlay {
      position: fixed;
      inset: 0;
      z-index: var(--z-popup);
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--px);
      padding-bottom: max(var(--px), env(safe-area-inset-bottom, 0px));
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0s 0.4s;
    }
    .popup-overlay.open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s ease, visibility 0s;
    }

    .popup-card {
      position: relative;
      background: var(--clr-bg-3);
      border: 1px solid var(--clr-border-h);
      border-radius: var(--radius-md);
      overflow: hidden;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
      transform: translateY(20px) scale(0.97);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .popup-overlay.open .popup-card {
      transform: translateY(0) scale(1);
    }

    .popup-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      z-index: 1;
      width: 36px;
      height: 36px;
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition), border-color var(--transition);
    }
    .popup-close:hover {
      background: var(--clr-gold);
      border-color: var(--clr-gold);
      color: var(--clr-bg);
    }
    .popup-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; }

    .popup-image {
      width: 100%;
      display: block;
      aspect-ratio: 783 / 1024;
      object-fit: cover;
    }

    .popup-body {
      padding: 1.5rem var(--space-md);
      display: flex;
      justify-content: center;
    }

    .popup-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      width: 100%;
      font-family: var(--ff-head);
      font-size: 1.3rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clr-bg);
      background: var(--clr-gold);
      border: none;
      border-radius: var(--radius-sm);
      padding: 0.85em 1.5em;
      min-height: 52px;
      cursor: pointer;
      text-decoration: none;
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    .popup-cta:hover,
    .popup-cta:focus-visible {
      background: var(--clr-gold-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(200, 164, 106, 0.4);
    }
    .popup-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }