/*
Theme Name:  Aparatka Gdańsk
Theme URI:   https://aparatkagdansk.pl
Description: Minimalistyczny motyw dla fotografki – one-page + podstrony usług.
Version:     1.0
Author:      Aparatka Gdańsk
Text Domain: aparatka
*/

/* =============================================
       BLOK 1 – ZMIENNE GLOBALNE
       Tutaj zmieniasz: kolory, czcionki, odstępy.
       Jedna zmiana = efekt w całej stronie.
    ============================================= */
    :root {
      /* Czcionki */
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'Raleway', 'Helvetica Neue', sans-serif;

      /* Kolory – tryb jasny */
      --color-bg:             #f4f7f4;
      --color-surface:        #ffffff;
      --color-surface-2:      #edf2ed;
      --color-surface-offset: #dce8dc;
      --color-border:         #c4d5c4;
      --color-text:           #0f1a0f;
      --color-text-muted:     #4a5e4a;
      --color-text-faint:     #8aab8a;
      /* Akcent – zmieniasz TU, zmienia się wszędzie */
      --color-accent:         #2f4a3a;
      --color-accent-hover:   #1e3228;
      --color-accent-light:   #e2ece7;

      /* Skala tekstu (fluid) */
      --text-xs:   clamp(0.75rem,  0.7rem  + 0.2vw,  0.813rem);
      --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw,  1rem);
      --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.063rem);
      --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
      --text-xl:   clamp(1.375rem, 1.1rem  + 1.2vw,  2rem);
      --text-2xl:  clamp(2rem,     1.2rem  + 2.4vw,  3.25rem);
      --text-hero: clamp(2.75rem,  0.5rem  + 6.5vw,  6.5rem);

      /* Odstępy (4px grid) */
      --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
      --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
      --s12: 3rem;   --s16: 4rem;   --s20: 5rem;   --s24: 6rem;

      /* Promienie */
      --r-sm: 0.25rem; --r-md: 0.5rem; --r-lg: 0.875rem; --r-full: 9999px;

      /* Cienie */
      --shadow-sm: 0 1px 3px rgba(10,8,4,.08);
      --shadow-md: 0 4px 20px rgba(10,8,4,.12);
      --shadow-lg: 0 12px 40px rgba(10,8,4,.18);

      /* Przejścia */
      --ease: 200ms cubic-bezier(0.16,1,0.3,1);

      /* Szerokości treści */
      --w-narrow: 640px;
      --w-default: 960px;
      --w-wide: 1180px;
    }

    /* Tryb ciemny */
    [data-theme="dark"] {
      --color-bg:             #0a0f0b;
      --color-surface:        #0f1a13;
      --color-surface-2:      #162119;
      --color-surface-offset: #1c2b21;
      --color-border:         #243b2e;
      --color-text:           #e8f2ec;
      --color-text-muted:     #7aab8a;
      --color-text-faint:     #4a7060;
      --color-accent:         #4a9468;
      --color-accent-hover:   #5aaa78;
      --color-accent-light:   #1a2e22;
    }

    /* =============================================
       BLOK 2 – RESET I BAZA (nie zmieniaj)
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 72px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      font-weight: 300;
      line-height: 1.65;
      color: var(--color-text);
      background: var(--color-bg);
    }
    img, picture { display: block; max-width: 100%; height: auto; }
    ul[role="list"], ol[role="list"] { list-style: none; }
    button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
    a { color: inherit; }
    h1,h2,h3,h4 { text-wrap: balance; line-height: 1.15; font-weight: 300; }
    p, li { text-wrap: pretty; }
    ::selection { background: color-mix(in oklch, var(--color-accent) 20%, transparent); }
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--r-sm); }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* =============================================
       BLOK 3 – NAWIGACJA
       Zmień: logo (AG + tekst), linki menu
    ============================================= */
    .nav {
      position: sticky; top: 0; z-index: 200;
      background: color-mix(in oklch, var(--color-bg) 92%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-border);
      height: 68px;
      display: flex; align-items: center;
    }
    .nav-inner {
      max-width: var(--w-wide); width: 100%;
      margin: 0 auto; padding: 0 var(--s8);
      display: flex; align-items: center; justify-content: space-between; gap: var(--s8);
    }
    .nav-brand {
      display: flex; align-items: center; gap: var(--s3);
      text-decoration: none; flex-shrink: 0;
    }
    /* Logo obrazkowe */
    .nav-logo-img {
      width: 44px; height: 42px;
      flex-shrink: 0;
      border-radius: var(--r-sm);
      transition: filter 200ms ease;
    }
    /* Tryb ciemny: czarne logo → białe przez inversion */
    [data-theme="dark"] .nav-logo-img {
      filter: invert(1);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme]) .nav-logo-img {
        filter: invert(1);
      }
    }
    .nav-brand-text {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      letter-spacing: 0.02em;
    }
    .nav-links {
      display: flex; gap: var(--s6); list-style: none; align-items: center;
    }
    .nav-links a {
      font-size: var(--text-sm);
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color var(--ease);
    }
    .nav-links a:hover { color: var(--color-text); }
    .nav-links .nav-cta {
      padding: 0.45rem 1.1rem;
      background: var(--color-accent);
      color: #fff !important;
      border-radius: var(--r-full);
      font-weight: 400;
      transition: background var(--ease);
    }
    .nav-links .nav-cta:hover { background: var(--color-accent-hover); }
    .nav-actions { display: flex; align-items: center; gap: var(--s3); }
    .theme-toggle {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-muted); border-radius: var(--r-md);
      transition: color var(--ease), background var(--ease);
    }
    .theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }

    /* =============================================
       BLOK 4 – HERO
       Zmień: eyebrow, H1, lead, przyciski, lista
    ============================================= */
    .hero {
      min-height: calc(100svh - 68px);
      display: flex; align-items: center;
      padding: var(--s20) var(--s8);
    }
    .hero-inner {
      max-width: var(--w-wide); margin: 0 auto; width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s16);
      align-items: center;
    }
    .hero-eyebrow {
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--s5);
    }
    .hero-title {
      font-family: var(--font-display);
      font-size: var(--text-hero);
      font-weight: 300;
      font-style: italic;
      line-height: 1.08;
      margin-bottom: var(--s6);
    }
    .hero-lead {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      max-width: 52ch;
      margin-bottom: var(--s8);
    }
    .hero-actions {
      display: flex; gap: var(--s4); flex-wrap: wrap;
      margin-bottom: var(--s8);
    }
    .btn { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.04em; border-radius: var(--r-full); padding: 0.65rem 1.6rem; transition: background var(--ease), color var(--ease), border-color var(--ease); }
    .btn-primary { background: var(--color-accent); color: #fff; }
    .btn-primary:hover { background: var(--color-accent-hover); }
    .btn-secondary { border: 1px solid var(--color-border); color: var(--color-text); background: transparent; }
    .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
    .btn-full { width: 100%; justify-content: center; }
    .hero-meta { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
    .hero-meta li {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      padding-left: var(--s5);
      position: relative;
    }
    .hero-meta li::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 12px; height: 1px;
      background: var(--color-accent);
    }
    .hero-visual { position: relative; }
    .hero-card {
      background: var(--color-surface);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .hero-img-wrap {
      aspect-ratio: 3/4;
      overflow: hidden;
      background: var(--color-surface-offset);
    }
    .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .hero-note {
      padding: var(--s5) var(--s6);
      border-top: 1px solid var(--color-border);
    }
    .hero-note-label {
      font-size: var(--text-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--s2);
    }
    .hero-note-text {
      font-size: var(--text-sm);
      font-style: italic;
      font-family: var(--font-display);
      color: var(--color-text-muted);
      line-height: 1.5;
    }

    /* =============================================
       BLOK 5 – WSPÓLNE STYLE SEKCJI
    ============================================= */
    .section {
      padding: clamp(var(--s16), 8vw, var(--s24)) var(--s8);
    }
    .container { max-width: var(--w-wide); margin: 0 auto; width: 100%; }
    .container-narrow { max-width: var(--w-default); margin: 0 auto; width: 100%; }
    .section-kicker {
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--s3);
    }
    .section-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 300;
      margin-bottom: var(--s4);
    }
    .section-intro {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      max-width: 60ch;
    }
    .section-header { margin-bottom: var(--s12); }
    .section-header-center { text-align: center; }
    .section-header-center .section-intro { margin: 0 auto; }

    /* =============================================
       BLOK 6 – O MNIE
       Zmień: tekst w 3 kartach i paragrafy opisu
    ============================================= */
    .about { background: var(--color-surface-2); }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: clamp(var(--s10), 5vw, var(--s20));
      align-items: start;
    }
    .about-heading-col { position: sticky; top: 100px; }
    .about-body { display: flex; flex-direction: column; gap: var(--s6); }
    .about-body p { font-size: var(--text-base); color: var(--color-text-muted); max-width: 65ch; }
    .about-cards {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: var(--s4); margin-top: var(--s6);
    }
    .soft-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      padding: var(--s6);
    }
    .soft-card h3 {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      margin-bottom: var(--s3);
    }
    .soft-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

    /* =============================================
       BLOK 7 – CO FOTOGRAFUJĘ (usługi)
       Zmień: numery, nagłówki i opisy usług
    ============================================= */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s6);
    }
    @media (max-width: 900px) {
      .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .services-grid .service-card[style*="span 2"] { grid-column: span 2; }
    }
    @media (max-width: 600px) {
      .services-grid { grid-template-columns: 1fr !important; }
      .services-grid .service-card[style*="span 2"] { grid-column: span 1; }
    }
    .service-card {
      padding: var(--s8) var(--s6);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      background: var(--color-surface);
      transition: box-shadow var(--ease), transform var(--ease);
    }
    .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .service-number {
      display: block;
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 300;
      color: var(--color-accent);
      opacity: 0.5;
      line-height: 1;
      margin-bottom: var(--s4);
    }
    .service-card h3 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 400;
      margin-bottom: var(--s3);
    }
    .service-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

    /* =============================================
       BLOK 8 – PORTFOLIO (siatka z filtrami)

       ► JAK DODAĆ ZDJĘCIE:
         1. Skopiuj jeden blok figure.pf-item
         2. Zmień data-cat="kategoria" na: slub / pary / kobiece / rodzina / reportaz
         3. Wstaw ścieżkę: src="./obrazek8.jpg"
         4. Zmień alt, span (kategorię) i strong (tytuł)
         Klasy rozmiaru: brak = kwadrat, pf-tall = pionowy, pf-wide = poziomy, pf-large = duży kafel
    ============================================= */
    .portfolio { background: var(--color-surface-2); }
    .pf-filters {
      display: flex; gap: var(--s2); flex-wrap: wrap;
      margin-bottom: var(--s10);
    }
    .pf-btn {
      padding: 0.4rem 1.1rem;
      border-radius: var(--r-full);
      font-size: var(--text-sm);
      font-weight: 400;
      letter-spacing: 0.03em;
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      background: var(--color-surface);
      transition: all var(--ease);
    }
    .pf-btn:hover, .pf-btn.active {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
    }
    .pf-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 280px;
      gap: var(--s3);
    }
    .pf-item {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
      background: var(--color-surface-offset);
      cursor: pointer;
    }
    .pf-item.pf-tall  { grid-row: span 2; }
    .pf-item.pf-wide  { grid-column: span 2; }
    .pf-item.pf-large { grid-column: span 2; grid-row: span 2; }
    .pf-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
    }
    .pf-item:hover img { transform: scale(1.05); }
    .pf-item figcaption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: var(--s6) var(--s5) var(--s5);
      background: linear-gradient(to top, rgba(26,18,12,.65) 0%, transparent 100%);
      color: #fff;
      transform: translateY(4px);
      opacity: 0;
      transition: opacity 300ms ease, transform 300ms ease;
    }
    .pf-item:hover figcaption { opacity: 1; transform: translateY(0); }
    .pf-item figcaption span {
      display: block;
      font-size: var(--text-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.8;
      margin-bottom: var(--s1);
    }
    .pf-item figcaption strong {
      display: block;
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      font-style: italic;
    }

    /* =============================================
       BLOK 9 – OFERTA / PAKIETY
       Zmień: nazwy pakietów, ceny i listy cech
    ============================================= */
    .offer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s6);
      align-items: start;
    }
    .price-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      padding: var(--s8) var(--s7, var(--s8));
      display: flex; flex-direction: column; gap: var(--s4);
      transition: box-shadow var(--ease);
    }
    .price-card:hover { box-shadow: var(--shadow-md); }
    .price-card.featured {
      border-color: var(--color-accent);
      background: var(--color-accent-light);
    }
    .price-label {
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
    }
    .price-card h3 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 400;
    }
    .price-from {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 300;
      color: var(--color-accent);
    }
    .price-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
    .feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
    .feature-list li {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      padding-left: var(--s5);
      position: relative;
    }
    .feature-list li::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 10px; height: 1px;
      background: var(--color-accent);
    }
    .text-link {
      font-size: var(--text-sm);
      color: var(--color-accent);
      text-decoration: none;
      border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent);
      padding-bottom: 1px;
      transition: border-color var(--ease);
      align-self: flex-start;
    }
    .text-link:hover { border-color: var(--color-accent); }

    /* =============================================
       BLOK 10 – PASEK CTA
       Zmień: nagłówek i tekst
    ============================================= */
    .cta-band {
      background: var(--color-accent);
      color: #fff;
    }
    .cta-band-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--s12);
      align-items: center;
    }
    .cta-band .section-kicker { color: rgba(255,255,255,0.65); }
    .cta-band .section-title { color: #fff; margin-bottom: var(--s3); }
    .cta-band p { color: rgba(255,255,255,0.75); font-size: var(--text-base); }
    .btn-white { background: #fff; color: var(--color-accent); }
    .btn-white:hover { background: rgba(255,255,255,0.9); }

    /* =============================================
       BLOK 11 – OPINIE
       Zmień: cytaty i autorów
    ============================================= */
    .testimonials { background: var(--color-surface-2); }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s6);
    }
    .quote-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      padding: var(--s8);
      display: flex; flex-direction: column; gap: var(--s6);
    }
    .quote-mark {
      font-family: var(--font-display);
      font-size: 3.5rem;
      line-height: 0.5;
      color: var(--color-accent);
      opacity: 0.35;
    }
    .quote-text {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-style: italic;
      font-weight: 300;
      line-height: 1.5;
      color: var(--color-text);
      flex: 1;
    }
    .quote-author {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      letter-spacing: 0.03em;
    }

    /* =============================================
       BLOK 12 – KONTAKT
       Zmień: e-mail, instagram, telefon, dane
    ============================================= */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--s10), 6vw, var(--s20));
    }
    .contact-col p { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--s4); max-width: 56ch; }
    .contact-cards {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: var(--s4); margin-top: var(--s8);
    }
    .contact-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      padding: var(--s5) var(--s5);
    }
    .contact-card h3 {
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--s2);
    }
    .contact-card a {
      font-size: var(--text-sm);
      color: var(--color-text);
      text-decoration: none;
      transition: color var(--ease);
    }
    .contact-card a:hover { color: var(--color-accent); }
    .contact-panel {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--r-lg);
      padding: var(--s10) var(--s8);
    }
    .contact-panel h3 {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 400;
      margin-bottom: var(--s8);
    }
    .steps { list-style: none; display: flex; flex-direction: column; gap: var(--s6); margin-bottom: var(--s10); }
    .steps li {
      display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start;
    }
    .steps li strong {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      white-space: nowrap;
    }
    .steps li span { font-size: var(--text-sm); color: var(--color-text-muted); padding-top: 0.1rem; }

    /* =============================================
       BLOK 13 – STOPKA
       Zmień: tekst i dane
    ============================================= */
    .footer {
      border-top: 1px solid var(--color-border);
      padding: var(--s8) var(--s8);
    }
    .footer-inner {
      max-width: var(--w-wide); margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
      gap: var(--s4); flex-wrap: wrap;
    }
    .footer p { font-size: var(--text-sm); color: var(--color-text-faint); }

    /* =============================================
       BLOK 14 – RESPONSYWNOŚĆ (mobile)
       Nie zmieniaj
    ============================================= */
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-visual { display: none; }
      .about-grid { grid-template-columns: 1fr; }
      .about-heading-col { position: static; }
      .about-cards { grid-template-columns: 1fr; }
      .offer-grid { grid-template-columns: 1fr; }
      .pf-grid { grid-template-columns: repeat(2,1fr); }
      .testimonials-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .contact-cards { grid-template-columns: 1fr; }
      .cta-band-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .nav-links { display: none; }
      .pf-grid { grid-template-columns: 1fr; }
      .pf-item.pf-tall, .pf-item.pf-wide, .pf-item.pf-large { grid-column: span 1; grid-row: span 1; }
      .services-grid { grid-template-columns: 1fr; }
      .footer-inner { flex-direction: column; text-align: center; }
    }

/* ── Breadcrumb (podstrony) ─────────────────────────────────── */
.breadcrumb {
  padding: var(--s3) var(--s8);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--ease);
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { margin: 0 var(--s2); opacity: .5; }

/* ── Hero podstrony ─────────────────────────────────────────── */
.subpage-hero {
  padding: var(--s20) var(--s8) var(--s16);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.subpage-hero-inner {
  max-width: var(--w-default);
  margin: 0 auto;
}
.subpage-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: var(--s6);
}
.subpage-hero .hero-lead {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--s8);
}

/* ── Grid "Co dostajesz" ────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s4);
  margin-top: var(--s10);
}
.feature-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.feature-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-bottom: var(--s2);
}
.feature-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--s4); }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.faq-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  margin-bottom: var(--s2);
}
.faq-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════ */
.hero-slider-section {
  width: 100%;
  background: var(--color-bg);
  padding-bottom: var(--s10);
}

/* Slider wrapper */
.hslider {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 28vh;
}

/* Track – wszystkie slajdy w rzędzie */
.hslider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}

/* Pojedynczy slajd */
.hslide {
  flex: 0 0 auto;
  /* szerokość ustawiana przez JS */
  padding: 0 3px;
  box-sizing: border-box;
}
.hslide img {
  width: 100%;
  height: 92vh;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Strzałki */
.hslider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--ease);
  z-index: 10;
}
.hslider-btn:hover { background: rgba(255,255,255,0.35); }
.hslider-prev { left: var(--s4); }
.hslider-next { right: var(--s4); }

/* Kropki */
.hslider-dots {
  position: absolute;
  bottom: var(--s4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s2);
  z-index: 10;
}
.hslider-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
  padding: 0;
}
.hslider-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* Cytat pod sliderem */
.hero-quote-bar {
  text-align: center;
  padding: var(--s12) var(--s6) var(--s6);
}
.hero-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
  font-weight: 400;
  color: var(--color-text);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.4;
}

/* Przyciski pod cytatem */
.hero-actions-bar {
  display: flex;
  gap: var(--s4);
  justify-content: center;
  padding-bottom: var(--s10);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hslide img { height: 60vw; }
  .hslider { max-height: 60vw; }
}