/* FLOWBASE — profil kolorów i zdjęć. Zmień wartości poniżej, by dostosować stronę. */
:root {
  --color-ink: #292b25;          /* ciemna oliwka, tekst i stopka */
  --color-brown: #514538;        /* ziemisty brąz */
  --color-olive: #77765e;        /* stonowana oliwka */
  --color-sand: #d0b792;         /* piaskowy akcent */
  --color-cream: #f4f1e9;        /* tło sekcji */
  --color-paper: #e8e2d5;        /* drugi odcień tła */
  --color-line: #cdc7b8;         /* linie i obramowania */
  --color-white: #fbfaf6;
  --color-card-middle: #e1dacb;
  --color-card-hover: #eee9df;
  --color-card-middle-hover: #d9d0bf;
  --color-strong-line: #bcb3a1;
  --color-light-muted: #ebe5d9;
  --color-footer-muted: #c7c6b6;

    /* Zdjęcia tła są w folderze images/. */
  --hero-image: url("images/hero-flowbase.jpg");
  --second-image: url("images/realizacja-flowbase.jpg");

  /* Pierwsze zdjęcie: przyciemnienie dla czytelności tekstu. */
  --photo-filter-color: #30251e;
  --photo-filter-opacity: .68;
  /* Drugie zdjęcie: ciepły filtr zachowuje barwy, ale łagodzi czerwień foteli. */
  --second-photo-saturation: .7;
  --second-photo-brightness: .78;
  --second-photo-sepia: .18;
  --second-photo-filter-color: #3b2e24;
  --second-photo-filter-opacity: .42;
  --photo-fallback-color: #4a372d; /* widoczny przed dodaniem zdjęć */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink); background: var(--color-cream); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(100% - 80px, 1320px); margin-inline: auto; }
.section-padding { padding-block: clamp(90px, 11vw, 154px); }
.overline { margin: 0; font-size: .76rem; font-weight: 700; line-height: 1.4; letter-spacing: .19em; }
.overline.light { color: var(--color-light-muted); }
.overline.dark { color: var(--color-olive); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { letter-spacing: -.055em; line-height: 1.12; }
h2 { font-size: clamp(2.7rem, 5.1vw, 5.4rem); font-weight: 550; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--color-white); }
.header-inner { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 25px; border-bottom: 1px solid rgba(255,255,255,.35); }
.wordmark { font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: -.09em; white-space: nowrap; }
.wordmark .accent { color: var(--color-sand); }
.wordmark-dot, .footer-brand span { color: var(--color-sand); }
.brand-logo { display: block; width: auto; max-width: 210px; max-height: 46px; object-fit: contain; }
.site-header nav { display: flex; gap: clamp(20px, 3.2vw, 48px); align-items: center; }
.site-header nav a { font-size: .875rem; font-weight: 600; transition: color .2s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--color-sand); }

/* Górna fotografia pozostaje na ekranie przez pierwszy fragment przewijania. */
.hero-stage { height: 115svh; min-height: 740px; }
.hero { position: sticky; top: 0; min-height: 650px; height: 100svh; display: flex; align-items: center; background: var(--photo-fallback-color) var(--hero-image) center / cover no-repeat; color: var(--color-white); isolation: isolate; }
.photo-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-filter-color); opacity: var(--photo-filter-opacity); pointer-events: none; }
.hero-content { position: relative; z-index: 1; padding-top: 30px; padding-bottom: 60px; }
.hero h1 { max-width: 1100px; margin: 28px 0 30px; font-size: clamp(3.7rem, 6.9vw, 7.4rem); font-weight: 550; text-wrap: balance; }
.hero h1 span, .statement h2 span { color: var(--color-sand); }
.hero-description { max-width: 615px; margin: 0 0 36px; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 28px; padding-bottom: 9px; border-bottom: 1px solid var(--color-sand); font-size: .94rem; font-weight: 650; }
.text-link span { font-size: 1.35rem; line-height: 1; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px,-3px); }
.hero-bottom { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; gap: 36px; font-size: .7rem; letter-spacing: .17em; font-weight: 700; color: var(--color-light-muted); }

.intro { position: relative; z-index: 2; background: var(--color-cream); }
.intro-layout { display: grid; grid-template-columns: 28% 1fr; gap: 40px; }
.intro-layout .overline { padding-top: 13px; }
.intro h2 { max-width: 860px; margin: 0 0 42px; }
.intro h2 span, .services-heading h2 span { color: var(--color-brown); }
.intro p:not(.overline) { max-width: 710px; margin: 0 0 18px; color: var(--color-brown); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; }
.intro p:not(.overline):last-child { margin-bottom: 0; }

.services { position: relative; z-index: 2; background: var(--color-paper); }
.services-heading { display: grid; grid-template-columns: 28% 1fr; gap: 0 40px; margin-bottom: 58px; }
.services-heading .overline { grid-row: span 2; padding-top: 13px; }
.services-heading h2 { margin: 0 0 19px;}
.services-heading h2 span { color: var(--color-olive)}
.services-heading > p:last-child { margin: 0; color: var(--color-brown); font-size: 1.06rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.service-card { position: relative; min-height: 450px; padding: 34px clamp(24px, 3vw, 45px) 38px; display: flex; flex-direction: column; justify-content: flex-start; gap: 34px; background: var(--color-cream); transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.service-card:nth-child(2) { background: var(--color-card-middle); }
@media (hover: hover) {
  .service-card:hover { z-index: 1; background: var(--color-card-hover); box-shadow: inset 0 0 0 1px var(--color-olive), 0 10px 22px rgba(48,40,32,.08); transform: translateY(-3px); }
  .service-card:nth-child(2):hover { background: var(--color-card-middle-hover); }
}
.service-number { color: var(--color-olive); font-size: .82rem; font-weight: 700; letter-spacing: .15em; }
.service-card h3 { margin: 0 0 25px; font-size: clamp(2.05rem, 2.7vw, 3rem); font-weight: 570; }
.service-card p { margin: 0; color: var(--color-brown); font-size: .98rem; line-height: 1.7; }
.service-card .service-lead { margin-bottom: 12px; color: var(--color-ink); font-weight: 700; }
.product-showcase[hidden] { display: none; }
.product-showcase { padding-top: 50px; margin-top: 70px; border-top: 1px solid var(--color-strong-line); }
.carousel-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.carousel-heading h3 { margin: 12px 0 0; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 570; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-arrow { width: 44px; height: 44px; border: 1px solid var(--color-line); border-radius: 50%; background: transparent; color: var(--color-ink); font: inherit; font-size: 1.3rem; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.carousel-arrow:not(:disabled):hover { background: var(--color-cream); border-color: var(--color-olive); }
.carousel-arrow:disabled { opacity: .4; cursor: default; }
.carousel-arrow:focus-visible, .carousel-track:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.carousel-track::-webkit-scrollbar { display: none; }
.product-card { scroll-snap-align: start; min-width: 0; background: var(--color-cream); }
.product-card figure { margin: 0; }
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-strong-line); }
.product-card figcaption { padding: 17px 20px 20px; font-size: .94rem; font-weight: 650; line-height: 1.4; }
.operations { display: grid; grid-template-columns: 28% 1fr; gap: 40px; align-items: start; padding: 48px 0 0; margin-top: 56px; border-top: 1px solid var(--color-strong-line); }
.operations p:last-child { max-width: 820px; margin: 0; color: var(--color-brown); font-size: 1.05rem; line-height: 1.7; }

/* Drugi obraz ma osobną warstwę: CSS subtelnie ociepla i tonuje zdjęcie. */
.statement { position: relative; z-index: 2; display: flex; align-items: center; min-height: 560px; padding-block: 110px; color: var(--color-white); background: var(--photo-fallback-color); isolation: isolate; --photo-filter-color: var(--second-photo-filter-color); --photo-filter-opacity: var(--second-photo-filter-opacity); }
.statement::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--second-image) center / cover no-repeat; filter: saturate(var(--second-photo-saturation)) brightness(var(--second-photo-brightness)) sepia(var(--second-photo-sepia)); pointer-events: none; }
.statement-inner { position: relative; z-index: 1; }
.statement h2 { margin: 29px 0 24px; font-size: clamp(3rem, 6vw, 6rem); font-weight: 550; }
.statement-inner > p:last-child { max-width: 600px; margin: 0; font-size: 1.1rem; line-height: 1.7; }

.contact { background: var(--color-cream); }
.contact-layout { display: grid; grid-template-columns: 1fr 35%; gap: 8%; align-items: end; }
.contact h2 { margin: 26px 0 0; }
.contact-details { display: grid; gap: 30px; padding-bottom: 10px; }
.contact-details div { padding-top: 17px; border-top: 1px solid var(--color-line); }
.contact-details span { color: var(--color-olive); font-size: .75rem; font-weight: 750; letter-spacing: .16em; }
.contact-details p { margin: 6px 0 0; color: var(--color-brown); font-size: 1.05rem; }
.site-footer { background: var(--color-ink); color: var(--color-white); }
.footer-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -.09em; }
.footer-logo { display: block; width: auto; max-width: 185px; max-height: 40px; object-fit: contain; }
.footer-inner > span:nth-child(2) { color: var(--color-footer-muted); font-size: .73rem; font-weight: 700; letter-spacing: .16em; }
.footer-inner a { font-size: .86rem; font-weight: 600; }

/* Efekt pojawiania jest bardzo delikatny; bez JavaScriptu treść pozostaje widoczna. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 980px) {
  .container { width: min(100% - 48px, 1320px); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; gap: 34px; }
  .service-card h3 br { display: none; }
  .carousel-track { grid-auto-columns: calc((100% - 20px) / 2); }
  .contact-layout { grid-template-columns: 1fr 40%; gap: 5%; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 36px, 1320px); }
  .header-inner { min-height: 72px; }
  .wordmark { font-size: 1.3rem; }
  .site-header nav { gap: 14px; }
  .site-header nav a { font-size: .76rem; }
  .hero-stage { min-height: 660px; height: 106svh; }
  .hero { min-height: 620px; height: 100svh; }
  .hero-content { padding: 75px 0 100px; }
  .hero h1 { font-size: clamp(2.85rem, 10vw, 4.7rem); margin-block: 20px 23px; }
  .hero-description { font-size: 1rem; margin-bottom: 25px; }
  .hero-bottom { bottom: 22px; gap: 13px; font-size: .58rem; letter-spacing: .09em; }
  .intro-layout, .services-heading, .operations, .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .intro-layout .overline, .services-heading .overline { padding-top: 0; }
  .services-heading .overline { grid-row: auto; }
  .intro h2 { margin-bottom: 26px; }
  .services-heading { margin-bottom: 40px; }
  .service-card { padding: 30px; }
  .service-card h3 { font-size: 2.35rem; }
  .product-showcase { margin-top: 50px; padding-top: 35px; }
  .carousel-track { grid-auto-columns: min(82%, 360px); gap: 14px; }
  .operations { margin-top: 42px; padding-top: 34px; }
  .statement { min-height: 510px; padding-block: 90px; }
  .contact-details { padding: 10px 0 0; }
  .footer-inner { flex-wrap: wrap; padding-block: 28px; gap: 8px 30px; }
  .footer-inner > span:nth-child(2) { order: 3; width: 100%; }
}
@media (max-width: 370px) {
  .site-header nav { gap: 9px; }
  .site-header nav a { font-size: .7rem; }
  .wordmark { font-size: 1.18rem; }
  .overline { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .text-link span { transition: none; }
  .service-card, .carousel-arrow { transition: none; }
}