/* ============================================================
   UNIT-X — podstrony usług (service.css)
   Reużywa tokenów, navbaru, stopki, .btn, .pulse-rule, .section-label
   z ../styles.css. Tu tylko komponenty specyficzne dla podstron.
   ============================================================ */

/* ---------- HERO ---------- */
.svc-hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: var(--black); }
.svc-hero__img { position: absolute; top: 0; left: 0; width: 100%; height: 118%; object-fit: cover; object-position: top; }
.svc-hero__grad-v { position: absolute; inset: 0; background: linear-gradient(to top, var(--black), rgba(9,9,9,.6) 50%, rgba(9,9,9,.3)); }
.svc-hero__grad-h { position: absolute; inset: 0; background: linear-gradient(to right, rgba(9,9,9,.7), transparent 50%, transparent); }
.svc-hero__inner { position: relative; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; padding: 8rem 1.5rem 5rem; }
@media (min-width: 1024px){ .svc-hero__inner { padding: 8rem 3rem 5rem; } }
.svc-hero__box { max-width: 42rem; }
.svc-overline { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; }
.svc-overline::before { content: ""; width: 1.5rem; height: 1px; background: var(--gold); display: block; }
.svc-overline span { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .20em; text-transform: uppercase; color: var(--gold); }
.svc-hero h1 { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.05; margin-bottom: 1.5rem; font-size: clamp(34px, 5.5vw, 72px); letter-spacing: 0; }
.svc-hero__lead { font-family: var(--font-body); font-weight: 300; font-size: 17px; color: var(--muted); max-width: 36rem; line-height: 1.7; margin-bottom: 2.5rem; }
.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- TREŚĆ GŁÓWNA ---------- */
.svc-main { background: var(--black); padding: 5rem 0; }
@media (min-width: 1024px){ .svc-main { padding: 7rem 0; } }
.svc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
@media (min-width: 1024px){ .svc-wrap { padding: 0 2rem; } }
.svc-main__grid { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1024px){ .svc-main__grid { flex-direction: row; gap: 5rem; } }
@media (min-width: 1024px){ .svc-main__left { width: 40%; } .svc-main__right { width: 60%; } }
.svc-main h2 { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.2; margin: 1rem 0 1.5rem; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: 0; }
.svc-intro--top { margin-top: 1rem; }
.svc-intro p { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--muted); line-height: 1.7; margin-top: 1.25rem; }
.svc-intro p:first-child { margin-top: 0; }
.svc-scope__heading { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 18px; margin-bottom: .75rem; }
.svc-scope__lead { font-family: var(--font-body); font-weight: 300; font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; }
.svc-scope__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.07); }
@media (min-width: 640px){ .svc-scope__grid { grid-template-columns: 1fr 1fr; } }
.svc-scope__item { background: var(--black); padding: 1.5rem; transition: background-color .3s ease; }
.svc-scope__item:hover { background: var(--dark2); }
.svc-scope__item .row { display: flex; align-items: flex-start; gap: .75rem; }
.svc-scope__item .plus { font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: 18px; line-height: 1; margin-top: .125rem; flex: 0 0 auto; }
.svc-scope__item h4 { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 15px; }
.svc-scope__item p { font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--muted); line-height: 1.7; margin-top: .5rem; }
.svc-scope__closing { font-family: var(--font-body); font-weight: 300; font-size: 15px; color: var(--muted); line-height: 1.7; margin-top: 1.5rem; }

/* ---------- HIGHLIGHT (opcjonalny) ---------- */
.svc-highlight { background: var(--dark); padding: 5rem 0; }
@media (min-width: 1024px){ .svc-highlight { padding: 6rem 0; } }
.svc-highlight__wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
@media (min-width: 1024px){ .svc-highlight__wrap { padding: 0 2rem; } }
.svc-highlight__box { border-left: 2px solid var(--gold); padding-left: 1.5rem; }
@media (min-width: 1024px){ .svc-highlight__box { padding-left: 2.5rem; } }
.svc-highlight h2 { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 1.5rem; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: 0; }
.svc-highlight p { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--muted); line-height: 1.7; margin-top: 1.25rem; }
.svc-highlight p:first-child { margin-top: 0; }

/* ---------- DLA KOGO / CO ANALIZUJEMY (tło białe) ---------- */
.svc-aud { background: #fff; padding: 5rem 0; }
@media (min-width: 1024px){ .svc-aud { padding: 6rem 0; } }
.svc-aud h2 { font-family: var(--font-head); font-weight: 700; color: #000; line-height: 1.2; margin: 1rem 0 3rem; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: 0; }
.svc-aud__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(0,0,0,.09); }
@media (min-width: 768px){ .svc-aud__grid { grid-template-columns: repeat(3, 1fr); } }
.svc-aud__card { background: #fff; padding: 2rem; border-top: 2px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.svc-aud__card:hover { background: var(--off); border-top-color: var(--gold); }
.svc-aud__card .plus { font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: 22px; line-height: 1; display: block; margin-bottom: 1rem; }
.svc-aud__card h3 { font-family: var(--font-head); font-weight: 700; color: #000; font-size: 16px; margin-bottom: .5rem; }
.svc-aud__card p { font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--mid); line-height: 1.7; }

/* ---------- GALERIA ---------- */
.svc-gallery { background: var(--black); }
.svc-gallery__grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 768px){ .svc-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.svc-gallery__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark2); }
.svc-gallery__item img { position: absolute; top: 0; left: 0; width: 100%; height: 116%; object-fit: cover; object-position: top; }

/* ---------- FAQ ---------- */
.svc-faq { background: var(--black); padding: 5rem 0; }
@media (min-width: 1024px){ .svc-faq { padding: 7rem 0; } }
.svc-faq__wrap { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
@media (min-width: 1024px){ .svc-faq__wrap { padding: 0 2rem; } }
.svc-faq h2 { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.2; margin: 1rem 0 2.5rem; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: 0; }
.svc-faq__list { border-top: 1px solid rgba(255,255,255,.08); }
.faq-row { border-bottom: 1px solid rgba(255,255,255,.08); }
.faq-row__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; text-align: left; background: none; border: none; cursor: pointer; }
.faq-row__q .q { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 16px; }
@media (min-width: 1024px){ .faq-row__q .q { font-size: 17px; } }
.faq-row__q:hover .q { color: rgba(255,255,255,.9); }
.faq-row__icon { flex: 0 0 auto; color: var(--gold); display: flex; align-items: center; }
.faq-row__a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-row.open .faq-row__a { max-height: 20rem; }
.faq-row__a p { font-family: var(--font-body); font-weight: 300; font-size: 15px; color: var(--muted); line-height: 1.7; padding: 0 2.5rem 1.25rem 0; }

/* ---------- FORMULARZ USŁUGOWY (tło ciemne) ---------- */
.svc-form { background: var(--dark); padding: 5rem 0; }
@media (min-width: 1024px){ .svc-form { padding: 7rem 0; } }
.svc-form__grid { display: flex; flex-direction: column; gap: 3.5rem; }
@media (min-width: 1024px){ .svc-form__grid { flex-direction: row; gap: 5rem; } }
@media (min-width: 1024px){ .svc-form__left { width: 40%; } .svc-form__right { width: 60%; } }
.svc-form h2 { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 1.5rem; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: 0; }
.svc-form__intro { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 2.5rem; }
.svc-form__contacts { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }
.svc-form__contact .k { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .20em; text-transform: uppercase; color: var(--muted); }
.svc-form__contact .v { font-family: var(--font-body); font-weight: 300; font-size: 17px; color: #fff; margin-top: .25rem; display: block; }
.svc-form__contact .v a { color: inherit; }
.svc-form__note { background: var(--dark2); border: 1px solid rgba(255,255,255,.07); padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; }
.svc-form__note h4 { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: #fff; margin-bottom: .25rem; }
.svc-form__note p { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.7; }
.svc-input { width: 100%; background: var(--dark2); border: 1px solid rgba(255,255,255,.07); padding: .875rem 1rem; font-family: var(--font-body); font-weight: 300; font-size: 14px; color: #fff; outline: none; transition: border-color .2s ease; }
.svc-input::placeholder { color: var(--muted); }
.svc-input:focus { border-color: rgba(255,255,255,.3); }
.svc-form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px){ .svc-form__row.two { grid-template-columns: 1fr 1fr; } }
.svc-select-wrap { position: relative; }
select.svc-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
.svc-select-wrap svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
textarea.svc-input { resize: none; }
.svc-rodo { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; margin-bottom: 1rem; }
.svc-rodo input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--gold); flex: 0 0 auto; }
.svc-rodo span { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.7; }
.svc-err { color: #f87171; font-size: 14px; margin-top: .25rem; }
.svc-submit { width: 100%; justify-content: center; }
.svc-form__success { background: var(--dark2); border: 1px solid rgba(255,255,255,.07); padding: 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 420px; text-align: center; }
.svc-form__success .rule { width: 3rem; height: 1px; background: rgba(255,255,255,.2); }
.svc-form__success h3 { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: #fff; }
.svc-form__success p { font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--muted); }

/* ---------- ZOBACZ RÓWNIEŻ (tło białe) ---------- */
.svc-related { background: #fff; padding: 5rem 0; }
@media (min-width: 1024px){ .svc-related { padding: 6rem 0; } }
.svc-related h2 { font-family: var(--font-head); font-weight: 700; color: #000; line-height: 1.2; margin: 1rem 0 3rem; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: 0; }
.svc-related__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(0,0,0,.09); }
@media (min-width: 768px){ .svc-related__grid { grid-template-columns: repeat(3, 1fr); } }
.svc-related__card { background: #fff; padding: 2rem; display: flex; flex-direction: column; gap: .75rem; height: 100%; border-top: 2px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.svc-related__card:hover { background: var(--off); border-top-color: var(--gold); }
.svc-related__card h3 { font-family: var(--font-head); font-weight: 700; color: #000; font-size: 17px; line-height: 1.35; }
.svc-related__card p { font-family: var(--font-body); font-weight: 300; font-size: 14px; color: var(--mid); line-height: 1.7; flex: 1; }
.svc-related__more { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); transition: color .3s ease; }
.svc-related__card:hover .svc-related__more { color: #000; }
.svc-related__more .arrow { display: inline-block; margin-left: .5rem; transition: transform .3s ease; }
.svc-related__card:hover .svc-related__more .arrow { transform: translateX(4px); }

/* ---------- Reveal na podstronach (spójne z main.js .reveal) ---------- */
.svc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.svc-reveal.in { opacity: 1; transform: none; }