/* =========================================================
     PALETA I CZCIONKI — tu zmieniasz kolory całej strony
     ========================================================= */
  :root{
    --ink:        #14171B;   /* tło główne — grafit (nie czerń) */
    --ink-2:      #1C2026;   /* tło paneli / sekcji */
    --ink-3:      #252A31;   /* kafelki */
    --chrome:     #F3F0EA;   /* główny tekst (ciepła biel) */
    --mist:       #A2A8B0;   /* tekst drugoplanowy */
    --line:       #333941;   /* delikatne linie */
    --accent:     #C9A24B;   /* akcent — złoto (jak w logo) */
    --accent-2:   #E7D3A1;   /* jasne złoto / refleks */

    --serif:   "Playfair Display", Georgia, serif; /* logo i duże nagłówki */
    --display: "Space Grotesk", system-ui, sans-serif;
    --body:    "Inter", system-ui, sans-serif;
    --mono:    "Space Mono", ui-monospace, monospace;

    --maxw: 1180px;

    /* Ukośne pasma światła w tle sekcji (nieruchome).
       Kąt 102deg = zgodny z refleksem w sekcji głównej.
       Chcesz mocniej? Podnieś liczby .16 / .10 / .13.
       Chcesz subtelniej? Zejdź na .08 / .05 / .06. */
    --streaks:
      linear-gradient(102deg,
        transparent 10%,
        rgba(231,211,161,.16) 24%,
        rgba(201,162,75,.10) 31%,
        transparent 44%),
      linear-gradient(102deg,
        transparent 52%,
        rgba(231,211,161,.13) 64%,
        rgba(201,162,75,.07) 70%,
        transparent 82%),
      linear-gradient(102deg,
        transparent 86%,
        rgba(231,211,161,.07) 95%,
        transparent 100%);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--chrome);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

  /* etykiety (eyebrow) — styl „specyfikacji" */
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--accent);
    display:inline-block;
  }

  h1,h2{ font-family:var(--serif); font-weight:700; line-height:1.06; letter-spacing:-.01em; }
  h3{ font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-.02em; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--display); font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:2px;
    border:1px solid var(--accent);
    background:var(--accent); color:var(--ink);
    cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--accent); }
  .btn-ghost{ background:transparent; color:var(--chrome); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--accent); box-shadow:none; }

  /* =========================================================
     NAWIGACJA
     ========================================================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    backdrop-filter:blur(12px);
    background:color-mix(in srgb, var(--ink) 78%, transparent);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  header.scrolled{ border-bottom-color:var(--line); }
  nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
  .brand{ font-family:var(--serif); font-weight:700; font-size:21px; letter-spacing:.02em; }
  .brand span{ color:var(--accent); }
  .nav-links{ display:flex; gap:34px; align-items:center; }
  .nav-links a{ font-size:14px; color:var(--mist); transition:color .2s; }
  .nav-links a:hover{ color:var(--chrome); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-phone{ font-family:var(--mono); font-size:14px; color:var(--chrome); }

  .burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
  .burger span{ display:block; width:24px; height:2px; background:var(--chrome); margin:5px 0; transition:.3s; }

  /* =========================================================
     HERO
     ========================================================= */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding-top:72px;
    overflow:hidden;
  }
  /* tło — głęboki lakier z poświatą lampy */
  .hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(120% 80% at 75% 0%, rgba(201,162,75,.16), transparent 55%),
      radial-gradient(90% 70% at 10% 100%, rgba(201,162,75,.07), transparent 50%),
      var(--ink);
    z-index:-2;
  }
  /* SYGNATURA STRONY: refleks światła przesuwający się jak po wypolerowanym lakierze */
  .hero::after{
    content:""; position:absolute; top:0; bottom:0; width:60%;
    left:-60%;
    background:linear-gradient(105deg, transparent, rgba(231,211,161,.10) 45%, rgba(255,246,222,.20) 50%, rgba(231,211,161,.10) 55%, transparent);
    transform:skewX(-12deg);
    animation:sweep 9s ease-in-out infinite;
    z-index:-1; pointer-events:none;
  }
  @keyframes sweep{
    0%   { left:-60%; }
    55%  { left:130%; }
    100% { left:130%; }
  }

  .hero-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:54px; align-items:center; width:100%; }

  .hero h1{
    font-size:clamp(42px, 6vw, 78px);
    margin:22px 0 24px;
  }
  .hero h1 em{ font-style:normal; color:var(--accent); }
  .hero p.lead{ font-size:18px; color:var(--mist); max-width:46ch; margin-bottom:34px; }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

  .hero-stats{ display:flex; gap:40px; margin-top:54px; }
  .hero-stats .num{ font-family:var(--display); font-size:34px; font-weight:700; color:var(--chrome); }
  .hero-stats .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); }

  /* ZDJĘCIE GŁÓWNE w sekcji tytułowej
     Ramka sama przyjmuje proporcje wstawionego zdjęcia — nic nie ucina
     i nie trzeba nic ustawiać przy podmianie pliku. */
  .hero-photo{
    position:relative; border-radius:8px; overflow:hidden;
    border:1px solid var(--line); background:#141418; line-height:0; min-height:300px;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
  }
  .hero-photo img{ display:block; width:100%; height:auto; }
  .hero-photo .badge{
    position:absolute; left:18px; bottom:18px;
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--chrome); border:1px solid var(--line); padding:6px 12px; border-radius:2px;
    background:rgba(20,23,27,.7);
  }

  /* =========================================================
     SEKCJA — wspólny styl
     ========================================================= */
  /* =========================================================
     WIDOKI (osobne „podstrony" w jednym pliku)
     Widoczny jest tylko jeden widok naraz — przełącza go menu.
     Adres w przeglądarce zmienia się na #pakiety, #cennik itd.,
     więc linki można wysyłać, a przycisk „wstecz" działa.
     ========================================================= */
  .view{ display:none; }
  .view.active{ display:block; animation:viewIn .35s ease; }
  @keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

  /* aktywna pozycja w menu */
  .nav-links a.current{ color:var(--accent); }

  /* =========================================================
     SEKCJA — wspólny styl + tło
     -----------------------------------------------------------
     Cała strona stoi na jednym, ciemnym tle — sekcje NIE mają
     własnego koloru, dlatego nie ma widocznej kreski na styku.
     Życie w tle daje trzy nieruchome warstwy:
       1) ukośne pasma światła (jak refleks na lakierze),
       2) poświata w narożniku (.lit-r / .lit-l),
       3) miękkie rozjaśnienie sekcji (.services/.process/.contact),
          wtapiające się u góry i u dołu — zamiast twardej zmiany koloru.
     Siłę efektu reguluje ostatnia liczba w rgba(...) poniżej.
     ========================================================= */
  section{ position:relative; padding:110px 0; overflow:hidden; }
  section > .wrap{ position:relative; z-index:2; }

  /* poświata narożna — .lit-r prawy górny, .lit-l lewy dolny */
  .lit-r::before, .lit-l::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    width:70%; height:80%;
    background:radial-gradient(closest-side, rgba(201,162,75,.16), transparent 72%);
  }
  .lit-r::before{ top:-12%; right:-8%; }
  .lit-l::before{ bottom:-12%; left:-8%; }

  /* ukośne pasma światła — wspólne dla wszystkich sekcji poza główną */
  section:not(.hero)::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:var(--streaks);
  }
  /* sekcje „panelowe": pasma + miękkie rozjaśnienie wtopione na krawędziach */
  .services::after, .process::after, .contact::after{
    background:
      var(--streaks),
      linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,.030) 14%,
        rgba(255,255,255,.030) 86%,
        transparent 100%);
  }
  .sec-head{ max-width:640px; margin-bottom:56px; }
  .sec-head h2{ font-size:clamp(30px, 4vw, 46px); margin:18px 0 16px; }
  .sec-head p{ color:var(--mist); font-size:17px; }

  /* USŁUGI / PAKIETY */
  /* .services / .process / .contact — rozjaśnienie daje ::after (patrz wyżej) */
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .card{
    background:var(--ink-2); border:1px solid var(--line); border-radius:4px;
    padding:34px 28px; position:relative; overflow:hidden;
    transition:border-color .3s, transform .3s;
  }
  .card:hover{ border-color:var(--accent); transform:translateY(-4px); }
  .card .idx{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
  .card h3{ font-size:22px; margin:16px 0 12px; }
  .card p{ color:var(--mist); font-size:15px; margin-bottom:22px; }
  .card .price{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--chrome); }
  .card .price b{ font-size:26px; }
  .card ul{ list-style:none; margin:18px 0 0; }
  .card ul li{ font-size:14px; color:var(--mist); padding:7px 0 7px 22px; position:relative; border-top:1px solid var(--line); }
  .card ul li:first-child{ border-top:0; }
  .card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); }
  .card.featured{ border-color:var(--accent); }
  .card.featured .tag{
    position:absolute; top:0; right:0; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; background:var(--accent); color:var(--ink); padding:6px 12px;
  }

  /* PRZED / PO — suwak (sygnatura sekcji) */
  .ba-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  /* Ramka nie ma ustalonych proporcji — wysokość bierze ze zdjęcia „przed".
     Dowolne zdjęcie (pionowe, poziome, kwadratowe) wejdzie całe, bez ucinania. */
  .ba{
    position:relative; border-radius:4px; overflow:hidden;
    border:1px solid var(--line); user-select:none; touch-action:none;
    background:#1A1E24; line-height:0;
    width:100%;
  }
  .ba .ba-base{
    /* Zdjęcie „przed" wyznacza wymiar kontenera. Bez limitu wysokości —
       inaczej warstwa „po" (inset:0) nie pokrywałaby się z nim co do piksela. */
    display:block; width:100%; height:auto;
  }
  /* Warstwa „po" — przycinana suwakiem.
     background jest NIEPRZEZROCZYSTE: bez tego przy różnych proporcjach
     zdjęć prześwitywałyby resztki zdjęcia „przed" u góry i u dołu. */
  .ba .ba-top{
    position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos,50%));
    background:#1A1E24;
  }
  .ba .ba-top img{ position:absolute; inset:0; width:100%; height:100%;
    max-width:none; max-height:none; object-fit:cover; border:0; border-radius:0; }
  .ba .lab{
    position:absolute; bottom:16px; z-index:3;
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--chrome); background:rgba(8,8,10,.7); padding:6px 10px; border-radius:2px;
    line-height:1.4; pointer-events:none;
  }
  .ba .lab-l{ left:16px; }
  .ba .lab-r{ right:16px; }
  /* Uchwyt i linia są tylko dekoracją — pointer-events:none sprawia,
     że kliknięcie/przeciągnięcie „przechodzi" do suwaka pod nimi.
     Bez tego złapanie za kółko nie działa. */
  .ba .handle{
    position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--accent);
    transform:translateX(-1px); pointer-events:none;
  }
  .ba .handle::after{
    content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    pointer-events:none;
  }
  .ba input[type=range]{
    position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
    cursor:ew-resize; z-index:2; touch-action:none;
  }
  /* niewidzialny „chwyt" na całą wysokość — łatwiej złapać na telefonie */
  .ba input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:44px; height:600px; background:transparent; cursor:ew-resize;
  }
  .ba input[type=range]::-moz-range-thumb{
    width:44px; height:600px; border:0; background:transparent; cursor:ew-resize;
  }
  .ba input[type=range]:focus-visible ~ .handle::after{ outline:3px solid var(--accent-2); outline-offset:3px; }

  /* PROCES */

  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .step{ padding-top:24px; border-top:2px solid var(--line); }
  .step .n{ font-family:var(--mono); font-size:13px; color:var(--accent); }
  .step h3{ font-size:19px; margin:14px 0 10px; }
  .step p{ font-size:14px; color:var(--mist); }
  /* zdjęcie kroku — wysokość wg zdjęcia, bez ucinania */
  .step .step-img{
    display:block; width:100%; height:auto; margin-top:20px;
    border-radius:4px; border:1px solid var(--line);
  }

  /* =========================================================
     CENNIK (tabela z wyborem rozmiaru auta)
     ========================================================= */
  .price-tabs{ margin-bottom:30px; }
  .pricing{ width:100%; border-collapse:collapse; }
  .pricing th{
    text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--mist); font-weight:400; padding:0 0 16px; border-bottom:1px solid var(--line);
  }
  .pricing th:last-child{ text-align:right; }
  .pricing td{ padding:20px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
  .pricing .svc strong{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--chrome); display:block; margin-bottom:3px; }
  .pricing .svc span{ font-size:13px; color:var(--mist); }
  .pricing .cost{ text-align:right; font-family:var(--display); font-weight:700; font-size:21px; color:var(--accent); white-space:nowrap; }
  .price-note{ margin-top:24px; font-size:14px; color:var(--mist); }
  .price-note a{ color:var(--accent); }

  /* pakiety — oznaczenie rabatu */
  .card .bundle{ font-size:14px; color:var(--mist); margin-bottom:18px; }
  .card .price .was{ font-family:var(--display); font-weight:500; font-size:15px; color:var(--mist); text-decoration:line-through; margin-right:10px; }
  .card .save{
    display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:2px; padding:6px 11px;
  }

  @media (max-width:560px){
    .pricing .svc strong{ font-size:15px; }
    .pricing .cost{ font-size:18px; }
  }

  /* OPINIE */
  .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .review{ background:var(--ink-2); border:1px solid var(--line); border-radius:4px; padding:30px; }
  .review .stars{ color:var(--accent); letter-spacing:3px; margin-bottom:16px; }
  .review p{ font-size:15px; color:var(--chrome); margin-bottom:20px; }
  .review .who{ font-family:var(--mono); font-size:12px; color:var(--mist); letter-spacing:.06em; }

  /* OPINIE — wezwanie do Google */
  .reviews-cta{
    text-align:center; max-width:680px; margin:0 auto;
    border:1px solid var(--line); border-radius:6px; padding:54px 40px;
    background:
      radial-gradient(80% 120% at 50% 0%, rgba(201,162,75,.10), transparent 60%),
      var(--ink-2);
  }
  .reviews-cta .rate{ font-family:var(--display); font-weight:700; font-size:54px; color:var(--chrome); line-height:1; }
  .reviews-cta .rate-stars{ color:var(--accent); letter-spacing:5px; font-size:22px; margin:12px 0 8px; }
  .reviews-cta .rate-count{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); }
  .reviews-cta h2{ font-size:clamp(26px,3.5vw,38px); margin:26px 0 14px; }
  .reviews-cta p{ color:var(--mist); font-size:17px; max-width:46ch; margin:0 auto 30px; }

  /* ikony social w pasku nawigacji */
  .nav-social{ display:flex; align-items:center; gap:14px; }
  .nav-social a{ color:var(--mist); display:flex; transition:color .2s ease, transform .2s ease; }
  .nav-social a:hover{ color:var(--accent); transform:translateY(-2px); }
  .nav-social svg{ width:19px; height:19px; }

  /* KONTAKT */

  .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; }
  .contact-info .row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
  .contact-info .row:last-child{ border-bottom:0; }
  .contact-info .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); width:90px; flex:none; padding-top:3px; }
  .contact-info .v{ font-size:16px; color:var(--chrome); }
  .contact-info .v a:hover{ color:var(--accent); }

  form{ display:grid; gap:16px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); display:block; margin-bottom:8px; }
  input,select,textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); border-radius:2px;
    color:var(--chrome); font-family:var(--body); font-size:15px; padding:13px 14px;
    transition:border-color .2s;
  }
  input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); }
  textarea{ resize:vertical; min-height:120px; }

  /* =========================================================
     PORTFOLIO (taby + galeria) — sekcja Realizacje
     ========================================================= */
  .tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
  .tab{
    font-family:var(--display); font-size:14px; font-weight:600; color:var(--mist);
    background:transparent; border:1px solid var(--line); border-radius:2px;
    padding:11px 18px; cursor:pointer; transition:color .25s, border-color .25s, background .25s;
  }
  .tab:hover{ color:var(--chrome); border-color:var(--accent); }
  .tab.active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; animation:fadeUp .4s ease; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  /* Szerokość obszaru suwaka. Ramka „obejmuje" zdjęcie dokładnie:
     zdjęcie panoramiczne ograniczy szerokość, pionowe ograniczy wysokość.
     Dzięki temu nic nie jest przycinane i nic nie jest za duże. */
  .portfolio-ba{ max-width:620px; margin:0 auto 30px; }
  /* GALERIA — układ mozaikowy: każde zdjęcie zachowuje własne proporcje,
     nic nie jest ucinane, niezależnie czy jest pionowe czy poziome. */
  .gallery{ columns:3; column-gap:14px; }
  .shot{
    display:block; width:100%; height:auto; margin:0 0 14px;
    border-radius:4px; border:1px solid var(--line); break-inside:avoid;
    transition:transform .3s ease, border-color .3s ease;
  }
  .shot:hover{ transform:scale(1.02); border-color:var(--accent); }

  /* =========================================================
     MAPA / LOKALIZACJA
     ========================================================= */
  .map{ border:1px solid var(--line); border-radius:4px; overflow:hidden; }
  .map iframe{ width:100%; height:440px; border:0; display:block; filter:grayscale(.35) contrast(1.05); }

  @media (max-width:900px){
    .gallery{ columns:2; }
    .map iframe{ height:360px; }
  }
  @media (max-width:560px){
    .gallery{ columns:1; }
  }
  @media (prefers-reduced-motion:reduce){
    .tab-panel.active{ animation:none; }
  }

  /* STOPKA */
  footer{ padding:50px 0; border-top:1px solid var(--line); }
  .foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .foot .brand{ font-size:18px; }
  .foot p{ font-size:13px; color:var(--mist); }
  .foot .socials{ display:flex; gap:20px; }
  .foot .socials a{ font-family:var(--mono); font-size:12px; color:var(--mist); }
  .foot .socials a:hover{ color:var(--accent); }

  /* reveal przy scrollu */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* =========================================================
     RESPONSYWNOŚĆ (telefony / tablety)
     ========================================================= */
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; gap:40px; }
    .hero-photo{ max-width:100%; }
    .cards,.reviews-grid{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr 1fr; }
    .ba-wrap,.contact-grid{ grid-template-columns:1fr; gap:32px; }
    .nav-links,.nav-phone{ display:none; }
    .burger{ display:block; }
    .nav-links.open{
      display:flex; flex-direction:column; gap:22px;
      position:absolute; top:72px; left:0; right:0;
      background:var(--ink); border-bottom:1px solid var(--line);
      padding:28px 24px;
    }
    section{ padding:72px 0; }
    .field-row{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .steps{ grid-template-columns:1fr; }
    .hero-stats{ gap:26px; }
    .brand{ font-size:17px; }
    .nav-cta .btn{ padding:10px 16px; font-size:13px; }
    .nav-social{ display:none; }
  }

  /* szanuj ustawienie „mniej animacji" w systemie */
  @media (prefers-reduced-motion:reduce){
    .hero::after{ animation:none; display:none; }
    .view.active{ animation:none; }
    .reveal{ transition:none; opacity:1; transform:none; }
    html{ scroll-behavior:auto; }
  }

  /* =========================================================
     ZDJĘCIE W TLE SEKCJI GŁÓWNEJ
     Plik: hero-bg.jpg (poziome, min. 2000px).
     Gradient nad zdjęciem pilnuje czytelności tekstu.
     ========================================================= */
  .hero.has-photo::before{
    background:
      linear-gradient(90deg, rgba(20,23,27,.985) 0%, rgba(20,23,27,.95) 38%, rgba(20,23,27,.80) 62%, rgba(20,23,27,.88) 100%),
      radial-gradient(120% 80% at 78% 10%, rgba(201,162,75,.20), transparent 55%),
      url('hero-bg.jpg') center/cover no-repeat,
      var(--ink);
  }

  /* =========================================================
     KASKADOWE WEJŚCIE ZDJĘĆ (portfolio)
     Zdjęcia wjeżdżają jedno po drugim po wybraniu zakładki.
     ========================================================= */
  @keyframes flyIn{
    from{ opacity:0; transform:translateY(26px) scale(.965); filter:blur(6px); }
    to  { opacity:1; transform:none; filter:blur(0); }
  }
  .tab-panel.active .fly{ animation:flyIn .55s cubic-bezier(.22,.75,.3,1) both; }
  .tab-panel.active .fly:nth-child(1){ animation-delay:.00s; }
  .tab-panel.active .fly:nth-child(2){ animation-delay:.10s; }
  .tab-panel.active .fly:nth-child(3){ animation-delay:.20s; }
  .tab-panel.active .fly:nth-child(4){ animation-delay:.30s; }
  .tab-panel.active .fly:nth-child(5){ animation-delay:.40s; }

  /* =========================================================
     BLOKI "ZDJĘCIE + OPIS" (naprzemiennie lewo / prawo)
     ========================================================= */
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin:0 0 34px; }
  .duo:nth-of-type(even) .duo-img{ order:2; }
  /* tylko zwykłe zdjęcie w bloku — NIE dotyczy zdjęć wewnątrz suwaka .ba,
     bo tam ograniczenie wysokości ucinało warstwę „po" i zostawiało pasek na dole */
  .duo-img > img{ display:block; width:100%; height:auto; max-height:460px; object-fit:cover;
    border-radius:6px; border:1px solid var(--line); }
  .duo-txt h3{ font-size:24px; margin:0 0 14px; }
  .duo-txt p{ color:var(--mist); font-size:16px; }
  .duo-txt .eyebrow{ margin-bottom:14px; }

  /* =========================================================
     STRONA USŁUGI — pasek danych (cena / czas / gwarancja)
     ========================================================= */
  .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0 0; }
  .fact{ border:1px solid var(--line); border-radius:6px; padding:22px 20px; background:var(--ink-2); }
  .fact .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
  .fact .v{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--chrome); margin-top:8px; }
  .fact .v small{ font-size:14px; color:var(--mist); font-weight:400; }

  /* korzyści — kafelki */
  .benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .benefit{ border:1px solid var(--line); border-radius:6px; padding:26px 24px; background:var(--ink-2); }
  .benefit h3{ font-size:18px; margin:0 0 10px; }
  .benefit p{ color:var(--mist); font-size:14px; }

  /* FAQ — rozwijane pytania */
  .faq{ max-width:820px; }
  .faq details{ border-bottom:1px solid var(--line); padding:0; }
  .faq summary{ cursor:pointer; list-style:none; padding:22px 0; font-family:var(--display);
    font-weight:600; font-size:17px; color:var(--chrome); display:flex; justify-content:space-between; gap:20px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; color:var(--accent); font-size:22px; line-height:1; flex:none; }
  .faq details[open] summary::after{ content:"–"; }
  .faq details p{ color:var(--mist); font-size:15px; padding:0 0 22px; max-width:70ch; }

  /* siatka odnośników do usług */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .svc-card{ display:block; border:1px solid var(--line); border-radius:6px; overflow:hidden;
    background:var(--ink-2); transition:border-color .25s, transform .25s; }
  .svc-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
  .svc-card img{ display:block; width:100%; height:190px; object-fit:cover; }
  .svc-card .b{ padding:22px 22px 26px; }
  .svc-card h3{ font-size:19px; margin:0 0 10px; }
  .svc-card p{ color:var(--mist); font-size:14px; margin:0 0 14px; }
  .svc-card .more{ font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent); }

  /* okruszki */
  .crumbs{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--mist); margin-bottom:20px; }
  .crumbs a{ color:var(--mist); }
  .crumbs a:hover{ color:var(--accent); }

  /* przyklejony pasek kontaktu na telefonie */
  .sticky-cta{ display:none; }

  @media (max-width:900px){
    .duo{ grid-template-columns:1fr; gap:24px; }
    .duo:nth-of-type(even) .duo-img{ order:0; }
    .facts,.benefits,.svc-grid{ grid-template-columns:1fr; }
    .hero.has-photo::before{
      background:
        linear-gradient(180deg, rgba(20,23,27,.92) 0%, rgba(20,23,27,.80) 55%, rgba(20,23,27,.94) 100%),
        url('hero-bg.jpg') center/cover no-repeat, var(--ink);
    }
    .sticky-cta{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
      background:rgba(20,23,27,.96); backdrop-filter:blur(10px);
      border-top:1px solid var(--line); padding:10px 14px; gap:10px;
    }
    .sticky-cta a{ flex:1; text-align:center; justify-content:center; padding:13px 10px; font-size:14px; }
    body{ padding-bottom:74px; }
  }
  @media (prefers-reduced-motion:reduce){
    .tab-panel.active .fly{ animation:none; }
  }

  /* =========================================================
     STOPKA — układ kolumnowy
     ========================================================= */
  .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; }
  .foot-grid .brand{ font-size:20px; }
  .foot-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--accent); margin:6px 0 14px; }
  .foot-grid p{ font-size:14px; color:var(--mist); line-height:1.9; }
  .foot-grid a{ color:var(--mist); }
  .foot-grid a:hover{ color:var(--accent); }
  .foot-grid h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--chrome); font-weight:400; margin-bottom:12px; }
  .foot-grid ul{ list-style:none; }
  .foot-grid li{ font-size:14px; padding:4px 0; }
  .foot-copy{ font-size:13px; color:var(--mist); margin-top:40px;
    padding-top:24px; border-top:1px solid var(--line); }
  @media (max-width:900px){
    .foot-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* =========================================================
     CENA NA KAFELKU USŁUGI — zachęta do kliknięcia
     ========================================================= */
  .svc-card .price-tag{
    display:flex; align-items:baseline; gap:8px; margin:0 0 14px;
    font-family:var(--display); font-weight:600; color:var(--accent);
  }
  .svc-card .price-tag b{ font-size:24px; }
  .svc-card .price-tag span{ font-size:13px; color:var(--mist); font-weight:400; }
  .svc-card .more{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--display); font-weight:600; font-size:14px;
    letter-spacing:0; text-transform:none; color:var(--accent);
  }
  .svc-card .more::after{ content:"→"; transition:transform .25s ease; }
  .svc-card:hover .more::after{ transform:translateX(5px); }

  /* =========================================================
     CERTYFIKATY
     ========================================================= */
  .cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  .cert{
    display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:start;
    background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:24px;
    transition:border-color .3s ease, transform .3s ease;
  }
  .cert:hover{ border-color:var(--accent); transform:translateY(-4px); }
  .cert img{
    display:block; width:100%; height:auto; border-radius:4px;
    border:1px solid var(--line); background:#1A1E24;
  }
  .cert h3{ font-size:19px; margin:0 0 6px; }
  .cert .who{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
  .cert p{ color:var(--mist); font-size:14px; }

  /* =========================================================
     SEKCJA Z FILMEM W TLE
     Pliki: video-1.mp4 itd. Plakat: video-1.jpg (pierwsza klatka).
     ========================================================= */
  .video-sec{ position:relative; overflow:hidden; }
  .video-sec > video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0; pointer-events:none;
  }
  .video-sec::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(20,23,27,.95) 0%, rgba(20,23,27,.80) 45%, rgba(20,23,27,.55) 100%),
      linear-gradient(180deg, rgba(20,23,27,.7), rgba(20,23,27,.3) 40%, rgba(20,23,27,.85));
  }
  .video-sec > .wrap{ position:relative; z-index:2; }

  /* karty filmów */
  .clips{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .clip{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--ink-2); }
  .clip video{ display:block; width:100%; height:230px; object-fit:cover; background:#1A1E24; }
  .clip .b{ padding:20px 20px 24px; }
  .clip h3{ font-size:17px; margin:0 0 8px; }
  .clip p{ color:var(--mist); font-size:14px; }

  @media (max-width:900px){
    .cert-grid{ grid-template-columns:1fr; }
    .cert{ grid-template-columns:120px 1fr; gap:18px; padding:18px; }
    .clips{ grid-template-columns:1fr; }
    .video-sec::after{
      background:linear-gradient(180deg, rgba(20,23,27,.90), rgba(20,23,27,.72) 45%, rgba(20,23,27,.95));
    }
  }

  /* =========================================================
     FILM PIONOWY (nagrania z telefonu) — blok z opisem
     ========================================================= */
  .filmbox{ display:grid; grid-template-columns:400px 1fr; gap:48px; align-items:center; }
  .filmbox video{
    display:block; width:100%; height:auto; border-radius:10px;
    border:1px solid var(--line); background:#1A1E24;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(201,162,75,.18);
  }
  .filmbox .txt h3{ font-size:clamp(24px,3vw,32px); margin:14px 0 16px; }
  .filmbox .txt p{ color:var(--mist); font-size:16px; margin-bottom:14px; }
  .filmbox .hint{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--accent); }
  @media (max-width:900px){
    .filmbox{ grid-template-columns:1fr; gap:26px; }
    .filmbox video{ max-width:360px; margin:0 auto; }
  }

/* =========================================================
   TELEFON: zdjęcie studia w tle sekcji głównej lepiej widoczne
   (pionowa wersja zdjęcia: hero-bg-m.jpg)
   ========================================================= */
@media (max-width:900px){
  .hero.has-photo::before{
    bottom:auto; height:100vh; height:100svh;
    background:
      linear-gradient(180deg, rgba(20,23,27,.78) 0%, rgba(20,23,27,.62) 38%, rgba(20,23,27,.68) 72%, rgba(20,23,27,1) 100%),
      url('hero-bg-m.jpg') 45% 20%/cover no-repeat,
      var(--ink);
  }
  .hero h1, .hero p.lead, .hero .eyebrow, .hero-stats{ text-shadow:0 2px 16px rgba(0,0,0,.75); }
  .hero p.lead{ color:#e2e2e2; }
}

/* etykieta w rogu pakietu (np. „Nowość”) także dla zwykłych kart */
.card .tag{
  position:absolute; top:0; right:0; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-top:0; border-right:0; padding:6px 12px;
}
.card.featured .tag{ color:var(--ink); border:0; }

/* nagłówek główny podstron (h1) — wygląd jak dotychczasowy h2 */
.sec-head h1{ font-size:clamp(30px, 4vw, 46px); margin:18px 0 16px; }