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

       :root {
           /* Brand: dark-grey + red primary, green+yellow secondary */
           --red: #C0392B;
           --red-light: #e04535;
           --green: #3A9C47;
           --yellow: #D4A800;
           --grey: #7A7A7A;
           --dark: #1C1C1C;
           --dark-2: #272727;
           --dark-3: #313131;
           --bg: #F5F4F1;
           --bg-white: #FFFFFF;
           --text: #1C1C1C;
           --text-muted: #5E5E5E;
           --border: #E2E0DC;
           --font: 'Outfit', sans-serif;
       }

       html {
           scroll-behavior: smooth;
       }

       body {
           background: var(--bg);
           color: var(--text);
           font-family: var(--font);
           font-size: 16px;
           line-height: 1.65;
       }

       ::-webkit-scrollbar {
           width: 5px;
       }

       ::-webkit-scrollbar-track {
           background: var(--border);
       }

       ::-webkit-scrollbar-thumb {
           background: var(--red);
           border-radius: 3px;
       }

       .container {
           max-width: 1140px;
           margin: 0 auto;
           padding: 0 clamp(1.25rem, 5vw, 2.5rem);
       }

       section {
           padding: clamp(4rem, 8vw, 7rem) 0;
       }

       /* ── NAVBAR ── */
       nav {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 500;
           background: var(--dark);
           border-bottom: 3px solid var(--red);
       }

       .nav-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           height: 70px;
       }

       /* Logo in nav */
       .nav-logo {
           display: flex;
           align-items: center;
           text-decoration: none;
       }

       .nav-logo img {
           height: 44px;
           width: auto;
           display: block;
       }

       .nav-links {
           display: flex;
           list-style: none;
       }

       .nav-links a {
           display: block;
           padding: 0 1.1rem;
           height: 70px;
           line-height: 70px;
           font-size: 0.83rem;
           font-weight: 500;
           letter-spacing: 0.07em;
           text-transform: uppercase;
           color: rgba(255, 255, 255, 0.72);
           text-decoration: none;
           transition: color 0.2s, background 0.2s;
       }

       .nav-links a:hover {
           color: #fff;
           background: rgba(192, 57, 43, 0.25);
       }

       .hamburger {
           display: none;
           flex-direction: column;
           gap: 5px;
           cursor: pointer;
           background: none;
           border: none;
           padding: 6px;
       }

       .hamburger span {
           display: block;
           width: 24px;
           height: 2px;
           background: #fff;
           transition: all 0.3s;
       }

       .hamburger.open span:nth-child(1) {
           transform: rotate(45deg) translate(5px, 5px);
       }

       .hamburger.open span:nth-child(2) {
           opacity: 0;
       }

       .hamburger.open span:nth-child(3) {
           transform: rotate(-45deg) translate(5px, -5px);
       }

       .mobile-nav {
           display: none;
           flex-direction: column;
           position: fixed;
           top: 73px;
           inset: 73px 0 0 0;
           background: var(--dark);
           z-index: 499;
           padding: 1.5rem 2rem;
       }

       .mobile-nav.open {
           display: flex;
       }

       .mobile-nav a {
           font-size: 1.15rem;
           font-weight: 600;
           color: #fff;
           text-decoration: none;
           padding: 0.9rem 0;
           border-bottom: 1px solid rgba(255, 255, 255, 0.08);
           transition: color 0.2s;
       }

       .mobile-nav a:hover {
           color: var(--red);
       }

       /* ── HERO ── */
       #hero {
           margin-top: 73px;
           position: relative;
           min-height: 540px;
           display: flex;
           align-items: center;
           background: var(--dark);
           overflow: hidden;
       }

       .hero-img {
           position: absolute;
           inset: 0;
           background: url('images/Stacja_2.jpg') center/cover no-repeat;
           opacity: 0.22;
       }

       /* Red accent stripe on left */
       .hero-stripe {
           position: absolute;
           left: 0;
           top: 0;
           bottom: 0;
           width: 5px;
           background: var(--red);
       }

       .hero-content {
           position: relative;
           z-index: 2;
           padding: 4rem 0;
           max-width: 620px;
       }

       .hero-badge {
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
           background: var(--red);
           color: #fff;
           font-size: 0.73rem;
           font-weight: 600;
           letter-spacing: 0.12em;
           text-transform: uppercase;
           padding: 0.4rem 0.9rem;
           border-radius: 2px;
           margin-bottom: 1.5rem;
       }

       .hero-h1 {
           font-size: clamp(2.4rem, 6vw, 4rem);
           font-weight: 800;
           color: #fff;
           line-height: 1.1;
           margin-bottom: 1.25rem;
       }

       .hero-h1 span {
           color: var(--red);
       }

       .hero-p {
           font-size: 1.05rem;
           font-weight: 300;
           color: rgba(255, 255, 255, 0.68);
           max-width: 460px;
           margin-bottom: 2.25rem;
       }

       .hero-actions {
           display: flex;
           gap: 1rem;
           flex-wrap: wrap;
       }

       .btn-red {
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
           background: var(--red);
           color: #fff;
           font-size: 0.9rem;
           font-weight: 700;
           padding: 0.85rem 1.75rem;
           border-radius: 3px;
           text-decoration: none;
           transition: background 0.2s, transform 0.15s;
       }

       .btn-red:hover {
           background: var(--red-light);
           transform: translateY(-1px);
       }

       .btn-ghost {
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
           background: transparent;
           color: #fff;
           border: 1.5px solid rgba(255, 255, 255, 0.3);
           font-size: 0.9rem;
           font-weight: 500;
           padding: 0.85rem 1.75rem;
           border-radius: 3px;
           text-decoration: none;
           transition: border-color 0.2s, color 0.2s;
       }

       .btn-ghost:hover {
           border-color: var(--red);
           color: var(--red);
       }

       /* ── STATUS STRIP ── */
       #status-strip {
           background: var(--dark-2);
           padding: 0.85rem 0;
           border-bottom: 2px solid var(--dark-3);
       }

       .strip-inner {
           display: flex;
           align-items: center;
           gap: 1.25rem;
           flex-wrap: wrap;
       }

       .status-pill {
           display: flex;
           align-items: center;
           gap: 0.6rem;
           font-size: 0.9rem;
           font-weight: 700;
           color: #fff;
       }

       .s-dot {
           width: 9px;
           height: 9px;
           border-radius: 50%;
           background: var(--green);
           animation: glow 2s ease-in-out infinite;
       }

       .s-dot.red-dot {
           background: var(--red);
           animation: none;
       }

       @keyframes glow {

           0%,
           100% {
               box-shadow: 0 0 0 0 rgba(58, 156, 71, .5)
           }

           50% {
               box-shadow: 0 0 0 5px rgba(58, 156, 71, 0)
           }
       }

       .strip-div {
           width: 1px;
           height: 16px;
           background: rgba(255, 255, 255, 0.15);
       }

       .strip-hours {
           font-size: 0.82rem;
           color: rgba(255, 255, 255, 0.55);
       }

       .strip-left {
           font-size: 0.82rem;
           color: var(--yellow);
           font-weight: 500;
           margin-left: auto;
       }

       /* ── SECTION HEADER ── */
       .section-header {
           margin-bottom: 2.75rem;
       }

       .section-label {
           font-size: 0.7rem;
           font-weight: 700;
           letter-spacing: 0.24em;
           text-transform: uppercase;
           color: var(--red);
           margin-bottom: 0.4rem;
       }

       .section-title {
           font-size: clamp(1.8rem, 4vw, 2.6rem);
           font-weight: 800;
           color: var(--dark);
           line-height: 1.15;
       }

       .section-desc {
           font-size: 1rem;
           color: var(--text-muted);
           margin-top: 0.6rem;
           max-width: 520px;
       }

       /* ── PALIWA ── */
       #paliwa {
           background: var(--bg-white);
       }

       .fuel-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 1.25rem;
           margin-bottom: 2.5rem;
       }

       .fuel-card {
           background: var(--bg);
           border: 1.5px solid var(--border);
           border-radius: 6px;
           padding: 1.75rem 1.5rem;
           transition: border-color .25s, box-shadow .25s, transform .2s;
       }

       .fuel-card:hover {
           border-color: var(--red);
           box-shadow: 0 4px 18px rgba(192, 57, 43, .12);
           transform: translateY(-3px);
       }

       .fuel-icon-wrap {
           width: 46px;
           height: 46px;
           background: var(--dark);
           border-radius: 6px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-bottom: 1.2rem;
           font-size: 1.1rem;
           color: #fff;
       }

       .fuel-name {
           font-size: 1.15rem;
           font-weight: 700;
           color: var(--dark);
       }

       .fuel-sub {
           font-size: 0.8rem;
           color: var(--text-muted);
           margin-top: 0.2rem;
       }

       .extras-row {
           display: flex;
           flex-wrap: wrap;
           gap: 0.6rem;
           padding-top: 1.5rem;
           border-top: 1px solid var(--border);
       }

       .extra-chip {
           display: inline-flex;
           align-items: center;
           gap: 0.4rem;
           font-size: 0.82rem;
           font-weight: 500;
           color: var(--dark-2);
           background: var(--bg);
           border: 1.5px solid var(--border);
           border-radius: 50px;
           padding: 0.35rem 0.9rem;
       }

       .extra-chip i {
           color: var(--grey);
           font-size: 0.7rem;
       }

       /* ── O NAS ── */
       #o-nas {
           background: var(--bg);
       }

       .about-grid {
           display: grid;
           grid-template-columns: 1fr 1.5fr;
           gap: clamp(2rem, 6vw, 5rem);
           align-items: start;
       }

       .about-img-wrap {
           position: relative;
       }

       .about-img-wrap img {
           width: 100%;
           border-radius: 6px;
           display: block;
           aspect-ratio: 4/3;
           object-fit: cover;
       }

       .about-badge {
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
           margin-top: 1rem;
           background: transparent;
           color: var(--text-muted);
           font-size: 0.82rem;
           font-weight: 500;
       }

       .about-badge big {
           display: inline;
           font-size: inherit;
           font-weight: 700;
           color: var(--dark);
       }

       .about-text p {
           font-size: 1rem;
           color: #444;
           line-height: 1.82;
           margin-bottom: 1.25rem;
       }

       .about-stat {
           display: none;
       }

       /* ── GODZINY ── */
       #godziny {
           background: var(--dark);
       }

       #godziny .section-title {
           color: #fff;
       }

       #godziny .section-label {
           color: var(--red);
       }

       #godziny .section-desc {
           color: rgba(255, 255, 255, 0.5);
       }

       .hours-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 1.25rem;
           margin-top: 2.75rem;
       }

       /* Live status card */
       .hours-live {
           background: var(--red);
           border-radius: 6px;
           padding: 2rem;
           display: flex;
           flex-direction: column;
       }

       .hours-live.closed-state {
           background: var(--dark-3);
           border: 1px solid rgba(255, 255, 255, 0.1);
       }

       .hcard-label {
           font-size: 0.68rem;
           font-weight: 700;
           letter-spacing: 0.2em;
           text-transform: uppercase;
           margin-bottom: 1rem;
           color: rgba(255, 255, 255, 0.55);
       }

       .live-row {
           display: flex;
           align-items: center;
           gap: 0.75rem;
           margin-bottom: 0.4rem;
       }

       .live-dot {
           width: 12px;
           height: 12px;
           border-radius: 50%;
           flex-shrink: 0;
       }

       .live-dot.open {
           background: #fff;
           animation: pw 2s infinite;
       }

       .live-dot.closed-d {
           background: rgba(255, 255, 255, 0.35);
       }

       @keyframes pw {

           0%,
           100% {
               box-shadow: 0 0 0 0 rgba(255, 255, 255, .4)
           }

           50% {
               box-shadow: 0 0 0 7px rgba(255, 255, 255, 0)
           }
       }

       .live-status-text {
           font-size: 1.6rem;
           font-weight: 800;
           color: #fff;
       }

       .live-until {
           font-size: 0.88rem;
           color: rgba(255, 255, 255, 0.65);
           margin-bottom: 1.75rem;
       }

       .live-hours-big {
           font-size: 2.4rem;
           font-weight: 800;
           color: #fff;
           line-height: 1;
       }

       .live-day-label {
           font-size: 0.82rem;
           color: rgba(255, 255, 255, 0.65);
           margin-top: 0.3rem;
       }

       .live-season-note {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.45);
           margin-top: auto;
           padding-top: 1.5rem;
       }

       /* Schedule card */
       .hours-schedule {
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 6px;
           padding: 2rem;
       }

       .season-block {
           margin-bottom: 1.5rem;
       }

       .season-block:last-child {
           margin-bottom: 0;
       }

       .season-title {
           font-size: 0.72rem;
           font-weight: 700;
           letter-spacing: 0.18em;
           text-transform: uppercase;
           color: rgba(255, 255, 255, 0.35);
           margin-bottom: 0.65rem;
           padding-bottom: 0.5rem;
           border-bottom: 1px solid rgba(255, 255, 255, 0.08);
           display: flex;
           align-items: center;
           gap: 0.6rem;
       }

       .season-block.inactive .sched-day,
       .season-block.inactive .sched-time {
           color: rgba(255, 255, 255, 0.3);
       }

       .season-block.inactive .season-dates {
           color: rgba(255, 255, 255, 0.2);
       }

       .season-current-badge {
           display: none;
           font-size: 0.6rem;
           font-weight: 700;
           letter-spacing: 0.1em;
           background: var(--red);
           color: #fff;
           padding: 0.15rem 0.5rem;
           border-radius: 2px;
           text-transform: uppercase;
       }

       .season-title.current {
           color: rgba(255, 255, 255, 0.85);
       }

       .season-title.current .season-current-badge {
           display: inline;
       }

       .sched-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0.45rem 0;
       }

       .sched-day {
           font-size: 0.86rem;
           color: rgba(255, 255, 255, 0.6);
       }

       .sched-time {
           font-size: 0.9rem;
           color: #fff;
           font-weight: 600;
       }

       .season-dates {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.35);
           margin-top: 0.25rem;
       }

       /* ── GALERIA ── */
       #galeria {
           background: var(--bg-white);
       }

       .gallery-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 1rem;
           margin-top: 2.75rem;
       }

       .gallery-item {
           position: relative;
           border-radius: 6px;
           overflow: hidden;
           cursor: pointer;
           aspect-ratio: 4/3;
       }

       .gallery-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform .4s;
       }

       .gallery-item:hover img {
           transform: scale(1.05);
       }

       .gallery-overlay {
           position: absolute;
           inset: 0;
           background: rgba(28, 28, 28, 0.55);
           opacity: 0;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: opacity .3s;
           color: #fff;
           font-size: 1.5rem;
       }

       .gallery-item:hover .gallery-overlay {
           opacity: 1;
       }

       /* Lightbox */
       .lightbox {
           position: fixed;
           inset: 0;
           z-index: 9000;
           background: rgba(10, 10, 10, .96);
           display: flex;
           align-items: center;
           justify-content: center;
           opacity: 0;
           pointer-events: none;
           transition: opacity .3s;
       }

       .lightbox.active {
           opacity: 1;
           pointer-events: all;
       }

       .lightbox img {
           max-width: 88vw;
           max-height: 86vh;
           object-fit: contain;
           border-radius: 4px;
           transition: opacity .2s;
       }

       .lb-close {
           position: absolute;
           top: 1.5rem;
           right: 2rem;
           background: none;
           border: none;
           color: rgba(255, 255, 255, .55);
           font-size: 1.8rem;
           cursor: pointer;
           transition: color .2s;
       }

       .lb-close:hover {
           color: var(--red);
       }

       .lb-btn {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(255, 255, 255, .07);
           border: 1px solid rgba(255, 255, 255, .15);
           color: #fff;
           width: 48px;
           height: 48px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           transition: background .2s;
       }

       .lb-btn:hover {
           background: rgba(192, 57, 43, .3);
           border-color: var(--red);
           color: #fff;
       }

       .lb-prev {
           left: 1.5rem;
       }

       .lb-next {
           right: 1.5rem;
       }

       /* ── KONTAKT ── */
       #kontakt {
           background: var(--bg);
       }

       .contact-grid {
           display: grid;
           grid-template-columns: 1fr 1.4fr;
           gap: clamp(2rem, 6vw, 5rem);
           margin-top: 2.75rem;
           align-items: start;
       }

       .contact-list {
           display: flex;
           flex-direction: column;
           gap: 1rem;
       }

       .contact-item {
           display: flex;
           gap: 1rem;
           align-items: flex-start;
           padding: 1.25rem;
           background: var(--bg-white);
           border: 1px solid var(--border);
           border-radius: 6px;
       }

       .cicon {
           width: 40px;
           height: 40px;
           flex-shrink: 0;
           background: var(--dark);
           border-radius: 5px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #fff;
           font-size: 0.95rem;
       }

       .c-key {
           font-size: 0.68rem;
           font-weight: 700;
           letter-spacing: 0.14em;
           text-transform: uppercase;
           color: var(--text-muted);
           margin-bottom: 0.2rem;
       }

       .c-val {
           font-size: 0.97rem;
           font-weight: 600;
           color: var(--dark);
       }

       .c-val a {
           color: inherit;
           text-decoration: none;
       }

       .c-val a:hover {
           color: var(--red);
       }

       .btn-dark {
           display: inline-flex;
           align-items: center;
           gap: 0.6rem;
           margin-top: 0.75rem;
           background: var(--dark);
           color: #fff;
           font-size: 0.9rem;
           font-weight: 700;
           padding: 0.9rem 1.75rem;
           border-radius: 3px;
           text-decoration: none;
           transition: background .2s;
           border-left: 4px solid var(--red);
       }

       .btn-dark:hover {
           background: var(--dark-2);
       }

       .map-wrap {
           border-radius: 6px;
           overflow: hidden;
           border: 2px solid var(--border);
       }

       .map-wrap iframe {
           display: block;
           width: 100%;
           height: 360px;
           filter: saturate(.65);
       }

       /* ── FOOTER ── */
       footer {
           background: var(--dark);
           border-top: 3px solid var(--red);
           padding: 1.75rem 0;
       }

       .footer-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           flex-wrap: wrap;
           gap: 1rem;
       }

       .footer-logo img {
           height: 36px;
           width: auto;
           display: block;
           filter: brightness(1.1);
       }

       .footer-copy {
           font-size: 0.78rem;
           color: rgba(255, 255, 255, 0.4);
       }

       .footer-nav {
           display: flex;
           gap: 1.5rem;
           list-style: none;
       }

       .footer-nav a {
           font-size: 0.78rem;
           color: rgba(255, 255, 255, 0.4);
           text-decoration: none;
           transition: color .2s;
       }

       .footer-nav a:hover {
           color: #fff;
       }

       /* ── BACK TO TOP ── */
       #goTop {
           position: fixed;
           bottom: 1.75rem;
           right: 1.75rem;
           width: 44px;
           height: 44px;
           background: var(--red);
           color: #fff;
           border: none;
           border-radius: 50%;
           font-size: 1rem;
           cursor: pointer;
           display: none;
           align-items: center;
           justify-content: center;
           z-index: 400;
           transition: background .2s, transform .2s, bottom .3s;
           box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
       }

       #goTop.visible {
           display: flex;
       }

       #goTop:hover {
           background: var(--red-light);
           transform: translateY(-2px);
       }

       #goTop.near-footer {
           bottom: 5rem;
       }

       /* ── REVEAL ── */
       .reveal {
           opacity: 0;
           transform: translateY(20px);
           transition: opacity .6s ease, transform .6s ease;
       }

       .reveal.visible {
           opacity: 1;
           transform: none;
       }

       .d1 {
           transition-delay: .08s
       }

       .d2 {
           transition-delay: .16s
       }

       .d3 {
           transition-delay: .24s
       }

       .d4 {
           transition-delay: .32s
       }

       /* ── RESPONSIVE ── */
       @media(max-width:960px) {
           .fuel-grid {
               grid-template-columns: repeat(2, 1fr)
           }

           .about-grid,
           .contact-grid {
               grid-template-columns: 1fr
           }

           .about-badge {
               right: .5rem;
               bottom: .5rem
           }

           .hours-grid {
               grid-template-columns: 1fr
           }
       }

       @media(max-width:700px) {
           .nav-links {
               display: none
           }

           .hamburger {
               display: flex
           }

           .gallery-grid {
               grid-template-columns: 1fr 1fr
           }

           .footer-nav {
               display: none
           }
       }

       @media(max-width:480px) {
           .gallery-grid {
               grid-template-columns: 1fr
           }

           .strip-left {
               margin-left: 0;
               width: 100%
           }
       }