:root {
  --accent: #FF5500;        /* Soczysty, neonowy pomarańcz w stylu JBL */
  --accent-weak: #FFF0E6;   /* Bardzo jasne, ciepłe tło (np. dla partnerów) */
  --dark: #1A1A1A;          /* Zmiękczona czerń, mniej męcząca wzrok */
}

html { scroll-behavior: smooth; }
body { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.section { padding: 64px 0; }
.section-title { font-weight: 800; }

.text-accent { color: var(--accent) !important; }

/* HERO */
.hero {
  min-height: 72vh;
  background: url("../img/baner.webp") center/cover no-repeat; /* PODMIEŃ na swoje zdjęcie tła */
  position: relative;
}
.hero::after { 
  /* delikatne przyciemnienie do czytelności napisu */
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 80%);
}
.hero .hero-caption {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 760px;
}

/* Wrapper blokowy z ustaloną szerokością */
.hero .hero-caption h1,
.hero .hero-caption p {
  display: block;
  width: fit-content; /* dopasowanie do najszerszego */
  min-width: 100%;    /* wymusza równą szerokość między nimi */
  box-sizing: border-box;
}

/* CZARNY NAGŁÓWEK */
.hero .hero-caption h1 {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  background: rgba(26, 26, 26, 0.85); /* Podmienione na nową czerń z przezroczystością */
  padding: 0.5rem 1rem;
  border-radius: 4px 4px 0 0; 
  margin-bottom: 0;
}

/* POMARAŃCZOWY PODTYTUŁ */
.hero .hero-caption p {
  /* UWAGA: Zmieniłem tu tło na Twój nowy, soczysty pomarańcz (RGB: 255, 85, 0) */
  background: rgba(255, 85, 0, 0.9); 
  padding: 0.6rem 1rem;
  border-radius: 0 0 4px 4px;
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: -0.5rem;
}

/* ... reszta Twojego kodu CSS pozostaje bez zmian ... */


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FF5500;
    --bs-btn-border-color: #c14000;
}


/* OFERTA */
.offer-img{ max-width: 420px; }
.text-muted {
    font-size: 1.3rem;
}

/* CENNIK */
.section-accent {
  background-color: var(--accent) !important;
  color: #fff !important;
}

.section-accent table {
  width: 100%;
  background: none !important;      /* usuwa białe tło */
  color: #fff !important;           /* wymusza biały tekst */
  border-collapse: collapse !important;
}

.section-accent thead,
.section-accent tbody,
.section-accent tr,
.section-accent th,
.section-accent td {
  background: transparent !important; /* nic białego */
  border-color: rgba(255, 255, 255, 0.15) !important; /* subtelne linie */
  color: #fff !important;
}

.section-accent th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.section-accent td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.section-accent tr:last-child td {
  border-bottom: none !important;
}

.section-accent .table-responsive {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.section-accent p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}


/* KROKI */
.step i{ display:block; }
.step p{ max-width: 280px; margin: 0 auto; }

/* FAQ */
.section-dark{ background: #111; }

/* PARTNERZY */
.section-accent-weak{ background-color: var(--accent) !important; color: #fff;}
.partner-logo{ max-width: 140px; height: auto; filter: grayscale(100%); opacity: .9; transition: .2s; }
.partner-logo:hover{ filter: none; opacity: 1; }
@media (max-width: 768px){
  .partners .col{ text-align: center; }
  .partner-logo{ max-width: 120px; }
}

/* NAV */
.navbar .nav-link{ font-weight: 600; }

/* Drobne */
img{ user-select: none; }

/* --- GÓRNY PASEK USŁUG (TOP BAR) --- */
.top-bar-switcher {
    font-size: 0.9rem;
    border-bottom: 1px solid #333;
    background-color: #000!important;
}
.service-link {
    color: #ccc;
    text-decoration: none;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    margin: 0 0.2rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.service-link:hover {
    color: #fff;
    transform: translateY(-2px);
}
/* Wyróżnienie aktywnej zakładki (tej, na której obecnie jest klient) */
.service-link.active {
    color: #fff;
    background-color: #ff5a2f;
    border-radius: 4px;
}
/* Kolory marek po najechaniu myszką */
a[href="och-dron.pl"].service-link:hover { 
    color: #d03f3c;
}
a[href="/och-print3d"].service-link:hover { 
    color: rgb(0, 174, 66); 
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .fs-1 {
        font-size: 4.5rem !important;
    }
}




/* =========================================
   MOTYW DARK MODE (NIGHT CLUB)
========================================= */

:root {
  --accent: #FF5500;        /* Neonowy, "świecący" pomarańcz */
  --accent-weak: #111111;   /* Bardzo ciemny szary dla przełamania (np. dla partnerów) */
  --dark: #050505;          /* Smolista czerń tła głównego */
  --text-main: #E0E0E0;     /* Jasno-szary tekst, nie męczy wzroku jak czysta biel */
}

/* Tło całej strony i główny kolor tekstu */
body { 
  background-color: var(--dark) !important;
  color: var(--text-main) !important;
}

/* Wymuszenie ciemnego tła na jasnej nawigacji z Bootstrapa */
.navbar.bg-white {
  background-color: rgba(10, 10, 10, 0.95) !important;
  border-bottom: 1px solid #222 !important;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--accent) !important;
}
.navbar-toggler {
  background-color: #333 !important; /* Przycisk menu na telefonach */
}

/* Wymuszenie koloru nagłówków na biały */
.section-title, h1, h2, h3, h4, h5, h6, .h4, .h6 {
  color: #ffffff !important;
}

/* Teksty pomocnicze (np. szare podtytuły w ofercie) */
.text-muted {
  color: #AAAAAA !important;
}

/* HERO - Nagłówki na banerze */
.hero .hero-caption h1 {
  background: rgba(5, 5, 5, 0.85); /* Ciemniejsze tło pod czarnym nagłówkiem */
}
.hero .hero-caption p {
  background: rgba(255, 85, 0, 0.9); /* Neonowy pomarańcz z makiety nr 1 */
  color: #fff !important;
}

/* CENNIK - Transformacja na ekskluzywną, mroczną tabelę */
.section-accent {
  background-color: #0F0F0F !important; 
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.section-accent .section-title {
  color: var(--accent) !important; /* Tytuł cennika na pomarańczowo */
}
.section-accent th {
  color: var(--accent) !important; /* Pomarańczowe nagłówki kolumn */
  border-bottom: 1px solid rgba(255, 85, 0, 0.5) !important;
}

/* KROKI (Jak to działa) - Dodanie "kafelków" */
.step {
  background: #111;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #222;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.step:hover {
  transform: translateY(-5px);
  border-color: var(--accent); /* Podświetlenie przy najechaniu myszką */
}

/* Zwykłe linki na stronie (np. kontakt) */
a.text-body {
  color: var(--text-main) !important;
}
a.text-body:hover {
  color: var(--accent) !important;
}

.footer-color{
  background-color: rgba(255, 85, 0, 0.9)!important;
}