/* =============================================================================
   wild.css — kierunek „Nocny Chopper" (biker-rock) dla Wild Angel Barber Studio.
   Warstwa NA WIERZCHU styles.css (baza) + tokens.css. Link po styles.css.
   ============================================================================= */

/* --- Header / nav (ciemny, sticky) --------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 86%,transparent);
  backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--color-border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.brandmark{display:flex;align-items:center;gap:11px;color:var(--text-strong);font:700 18px/1 var(--font-heading);
  letter-spacing:.12em;text-transform:uppercase}
.brandmark svg{width:42px;height:20px;flex:none}
.brand-logo{height:50px;width:64px;object-fit:cover;object-position:50% 36%;flex:none;mix-blend-mode:screen;border-radius:6px}
nav[aria-label="Główna"] a{color:var(--text-body);font:600 13px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
nav[aria-label="Główna"] a:hover{color:var(--color-accent)}
.header-cta{display:none}
@media(min-width:768px){.header-cta{display:inline-flex}}

/* --- HERO „Nocny Chopper" -------------------------------------------------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(20px,4vw,46px) 0 clamp(44px,7vw,82px)}
.hero__bg{position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(210,137,47,.26),transparent 55%),
    linear-gradient(180deg,rgba(20,17,15,.35) 0%,rgba(20,17,15,.8) 58%,#14110F 100%),
    repeating-linear-gradient(115deg,#1b1714 0 2px,#171310 2px 26px)}
/* Wizual hero: wyśrodkowane, powiększone ZDJĘCIE wnętrza (Reguła 8), lekki overlap tekstu */
.hero__moto{position:relative;z-index:-1;width:min(92%,1120px);margin:0 auto;aspect-ratio:2/1}
.hero__moto__inner{position:relative;width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid #2c241e;box-shadow:var(--shadow-md)}
picture{display:contents}  /* wrapper <picture> (WebP) nie zaburza layoutu */
.hero__moto__inner img{width:100%;height:100%;object-fit:cover;display:block}
/* Zdjęcie normalnie widoczne — TYLKO delikatne przyciemnienie na samym dole pod tekst */
.hero__moto__inner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(20,17,15,.5) 100%)}
.hero__inner{position:relative;z-index:1;width:100%;margin-top:clamp(-70px,-5.5vw,-40px)}
.hero__wordmark{font-family:var(--font-heading);text-transform:uppercase;font-weight:700;color:var(--text-strong);
  font-size:clamp(56px,13vw,150px);line-height:.88;letter-spacing:.01em;margin:0;
  text-shadow:0 4px 22px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.7)}
.hero__wordmark .accent{color:var(--color-accent);text-shadow:0 0 36px rgba(210,137,47,.4)}
/* .hero .hero__h1small — wyższa specyficzność niż bazowe .hero h1 (inaczej h1 rośnie do 32px) */
.hero .hero__h1small{font-family:var(--font-heading);text-transform:uppercase;font-weight:600;color:var(--text-muted);
  font-size:clamp(13px,1.4vw,15px);letter-spacing:.22em;margin:22px 0 0;line-height:1.2}
.hero .lead{font:500 clamp(16px,2.3vw,21px)/1.5 var(--font-body);color:var(--text-body);max-width:46ch;margin:18px 0 0}
.hero .hero-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;align-items:center}
.hero .stars{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);font:600 14px/1 var(--font-body)}
.hero .stars i{color:#E5B45A;font-style:normal;letter-spacing:2px}.hero .stars b{color:var(--color-accent)}
@media(max-width:760px){
  /* Hero na cały ekran, treść wyśrodkowana, BEZ nachodzenia na zdjęcie */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
  .hero__moto{width:96%}
  .hero__inner{margin-top:26px;text-align:center}
  .hero__wordmark{font-size:clamp(62px,17vw,120px)}
  .hero .lead{margin-inline:auto}
  .hero-row{justify-content:center}
  .hero .stars{width:100%;justify-content:center}
}

/* --- Przyciski w stylu Oswald --------------------------------------------- */
.btn{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.06em;font-size:15px;min-height:54px}
.btn-primary{background:var(--color-accent);color:var(--color-accentText);box-shadow:0 8px 24px rgba(210,137,47,.18)}
.btn-primary:hover{background:var(--color-accentHover)}
.btn-ghost{border-color:var(--color-border);color:var(--text-strong)}
.btn-ghost:hover{background:var(--color-surface)}

/* --- Sekcje / typografia --------------------------------------------------- */
.section{padding-block:var(--section-gap)}
.section h2{font-family:var(--font-heading);text-transform:uppercase;font-weight:700;color:var(--text-strong);
  font-size:clamp(28px,4.4vw,44px);line-height:1.04;letter-spacing:.01em}
.eyebrow{color:var(--color-accent);font-weight:700;letter-spacing:.24em}
.lead-muted{color:var(--text-muted);max-width:60ch}

/* --- Karty / statystyki ---------------------------------------------------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.stat-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--space-6) var(--space-5);text-align:center}
.stat .num{font:700 clamp(34px,6vw,52px)/1 var(--font-heading);color:var(--color-accent)}
.stat .lab{margin-top:8px;color:var(--text-muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase}

/* --- Usługi (offer-card biker) -------------------------------------------- */
.svc-grid{display:grid;gap:var(--space-5)}
@media(min-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
.svc{display:grid;grid-template-columns:96px 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-5);
  transition:transform var(--motion-dur) var(--motion-ease),border-color var(--motion-dur)}
.svc:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.svc .media-frame{--media-ratio:1/1;width:96px}
.svc h3{font-family:var(--font-heading);text-transform:uppercase;font-size:19px;color:var(--text-strong);letter-spacing:.02em}
.svc p{color:var(--text-muted);font-size:14px;margin-top:2px}
.svc .price{font:700 22px/1 var(--font-heading);color:var(--color-accent);white-space:nowrap}
.svc .price small{display:block;font:500 11px/1 var(--font-body);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}

/* --- Kroki „Jak działamy" -------------------------------------------------- */
.steps{display:grid;gap:var(--space-5);counter-reset:s}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:var(--space-6) var(--space-5)}
.step::before{counter-increment:s;content:"0" counter(s);font:700 40px/1 var(--font-heading);color:var(--color-brick);opacity:.55}
.step h3{font-family:var(--font-heading);text-transform:uppercase;font-size:18px;color:var(--text-strong);margin-top:10px}
.step p{color:var(--text-muted);font-size:14px;margin-top:6px}

/* --- Opinie ---------------------------------------------------------------- */
.rev-grid{display:grid;gap:var(--space-5)}
@media(min-width:768px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{padding:var(--space-6) var(--space-5)}
.rev .q{color:var(--text-body);font-size:15px;line-height:1.6}
.rev .who{margin-top:14px;color:var(--text-muted);font-size:13px;font-weight:600}
.rev .who i{color:#E5B45A;font-style:normal;margin-right:6px}
.rev-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:var(--space-6)}
.rev-score{font:700 56px/1 var(--font-heading);color:var(--color-accent)}
.rev-score small{display:block;font:600 13px/1 var(--font-body);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:6px}

/* --- CTA band kontakt ------------------------------------------------------ */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(32px,6vw,64px);
  background:linear-gradient(135deg,#221913,#14110F);border:1px solid var(--color-border);isolation:isolate}
.cta-band h2{margin-bottom:10px}
.contact-grid{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
@media(min-width:768px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-item{padding:var(--space-5);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.contact-item .k{color:var(--color-accent);font:700 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.contact-item .v{color:var(--text-strong);margin-top:8px;font-size:16px}
.contact-item .v a{color:var(--text-strong)}

/* --- Stopka ---------------------------------------------------------------- */
.site-footer,footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding-block:var(--space-8);color:var(--text-muted)}
footer .footer-nap p{margin:2px 0}footer a{color:var(--text-body)}footer a:hover{color:var(--color-accent)}

/* --- Sticky mobile CTA kolor ----------------------------------------------- */
.mobile-cta{background:var(--color-surface);border-top:1px solid var(--color-border)}