/* TOPklik — typografia, rytm sekcji i prezentacja usług. */
:root {
  --surface-shadow: 0 7px 24px rgba(23, 31, 59, .045);
  --ink: #192039;
}
body { color: var(--ink); }
.section-title { font-weight: 780; line-height: 1.17; letter-spacing: -.042em; }
.section-white .section-title, .section-light .section-title { color: var(--ink); }
.section-subtitle { font-weight: 400; }
.section { padding-block: clamp(64px, 7vw, 104px); }
.section-header { margin-bottom: 42px; }
.page-hero h1, .cta-banner h2 { font-weight: 780; letter-spacing: -.04em; }
.cta-banner h2 { max-width: 1080px; margin-inline: auto; text-wrap: balance; }
.card, .card-dark, .knowledge-card, .contact-card { border-radius: 16px; }
.card p, .card-dark p { font-size: 14px; line-height: 1.7; font-weight: 400; }
.card h3, .card-dark h3 { font-size: 18px; line-height: 1.35; }
.card:hover, .contact-card:hover { box-shadow: 0 14px 35px rgba(23, 31, 59, .075); }
.btn-primary, .btn-outline, .btn-outline-light, .btn-nav { border-radius: 10px; }
.btn-primary, .btn-nav { box-shadow: 0 7px 18px rgba(83,72,188,.15); }
.btn-primary:hover, .btn-nav:hover { box-shadow: 0 11px 25px rgba(83,72,188,.23); transform: translateY(-2px); }
.card-icon { border-radius: 12px; }
.section-badge { font-weight: 650; }

/* Nawigacja ma ten sam detal na każdej podstronie. */
.navbar.scrolled, .navbar.opaque { background: rgba(255,255,255,.96); box-shadow: 0 3px 18px rgba(21,28,52,.045); }
.nav-links > li > a { border-radius: 8px; }
.dropdown-menu-featured { padding: 10px; border-radius: 16px; background: #fff; border-color: #e7eaf2; box-shadow: 0 18px 55px rgba(16,25,52,.13); }
.dropdown-menu-featured a { border-radius: 9px; padding: 12px 14px; transition: background .2s ease; }
.dropdown-menu-featured a strong, .dropdown-menu-featured a:hover strong { color: var(--ink); font-weight: 650; }
.dropdown-menu-featured a small, .dropdown-menu-featured a:hover small { color: #67748b; line-height: 1.5; }
.dropdown-menu-featured a:hover, .dropdown-menu-featured a:focus-visible { background: #f2f4fa !important; }

/* Główny ekran: mocny tekst i pojedyncza dominująca ilustracja. */
body[data-page="/"] .hero-title { font-weight: 820; }
body[data-page="/"] .hero-subtitle { max-width: 625px; font-size: 17px; line-height: 1.75; }
body[data-page="/"] .hero-grid { opacity: .2; }
body[data-page="/"] .hero-badges { gap: 16px 24px; }
body[data-page="/"] .hero-badge-text { font-size: 12px; }
body[data-page="/"] .stats-bar { padding: 30px 0; background: #10172a; border-block: 1px solid rgba(167,181,208,.1); }
body[data-page="/"] .stat-number { font-size: 37px; letter-spacing: -.035em; font-weight: 750; }
body[data-page="/"] .stat-label { color: #b0bbd0; font-weight: 400; font-size: 12px; }
body[data-page="/"] .home-proof-section .section-title { font-size: clamp(30px,3.2vw,44px); }
body[data-page="/"] .home-proof-section .section-subtitle { max-width: 610px; }
.home-proof-visual { margin: 0; min-width: 0; }
.home-proof-visual > img { display: block; width: 100%; height: auto; }
.home-proof-visual figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 12px 24px 0; color: #66738b; font-size: 14px; }
.home-proof-visual figcaption a { color: #7754bc; font-weight: 700; }
.home-proof-visual figcaption a:hover { color: #493287; }
.project-preview { border-radius: 16px; background: #fff; border: 1px solid #dfe5ef; box-shadow: 0 18px 45px rgba(25,35,61,.09); }
.project-preview-bar { color: #68768b; }
.project-preview img { border-radius: 8px; }
.project-preview .photo-badge { padding: 19px 9px 9px; }
.project-preview .photo-badge-title { color: var(--ink); }
.project-preview .photo-badge-sub { color: #66738b; }
.project-preview .photo-badge-eyebrow { color: #7754bc; }
.project-preview-link { color: var(--ink); border-color: #dce2ed; }
.project-preview-link:hover { background: #f5f3fc; }

/* Proces jako otwarta oś, zamiast kolejnego rzędu zamkniętych kafelków. */
body[data-page="/"] .grid-steps { gap: 30px; }
body[data-page="/"] .step-card { border: 0; border-top: 1px solid #35405a; border-radius: 0; background: transparent; padding: 27px 0 0; }
body[data-page="/"] .step-card::after { display: none; }
body[data-page="/"] .step-number { color: #728099; font-size: 18px; font-weight: 500; top: 31px; right: 0; }
body[data-page="/"] .step-icon { width: 43px; height: 43px; border-radius: 12px; margin-bottom: 20px; }
body[data-page="/"] .step-icon svg { width: 22px; height: 22px; }
body[data-page="/"] .step-card p { color: #b1bdd0; font-size: 14px; }

/* Usługi: katalog z numerami, większym tekstem i swobodniejszym układem. */
.home-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 54px; }
.home-services-grid > .card { display: grid !important; grid-template-columns: 48px minmax(0,1fr); column-gap: 21px; padding: 28px 0; border: 0; border-top: 1px solid #dfe4ee; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.home-services-grid > .card::before, .home-services-grid > .card::after { display: none; }
.home-services-grid > .card:hover { transform: none; background: transparent; box-shadow: none; border-color: #9f8bc9; }
.home-services-grid .card-icon { grid-column: 1; grid-row: 1 / 4; margin-bottom: 0; background: #f0edf8; border: 0; width: 48px; height: 48px; }
.home-services-grid h3 { grid-column: 2; padding-right: 32px; color: var(--ink); font-size: 21px; margin: 0 0 9px; font-weight: 650; }
.home-services-grid p { grid-column: 2; font-size: 15px; line-height: 1.7; max-width: 480px; }
.home-services-grid .card-link { grid-column: 2; margin-top: 15px; }
.home-service-number { position: absolute; right: 0; top: 31px; color: #97a0b2; font-size: 12px; font-weight: 500; }
.home-services-grid > .card:hover .card-link { color: #4e359d; gap: 8px; }
.home-services-grid > .card:hover .card-icon { background: #e6e0f4; }
body[data-page="/"] .business-services-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px; }
body[data-page="/"] .business-service-card { grid-column: span 2; padding: 26px; background: #10182c; border-color: #26314a; }
body[data-page="/"] .business-service-card:nth-last-child(-n+2) { grid-column: span 3; }
body[data-page="/"] .business-service-card p { max-width: 490px; color: #b5bfd1; }

/* Wybrane realizacje dostają dwie większe otwierające karty. */
body[data-page="/"] .portfolio-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
body[data-page="/"] .portfolio-card:nth-child(-n+2) { grid-column: span 2; }
body[data-page="/"] .portfolio-card { box-shadow: none; border-radius: 14px; }
body[data-page="/"] .portfolio-thumb { height: auto; aspect-ratio: 8 / 5; }
body[data-page="/"] .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
body[data-page="/"] .portfolio-info { padding: 22px; }
body[data-page="/"] .portfolio-name { font-size: 19px; letter-spacing: -.025em; }
body[data-page="/"] a.portfolio-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.portfolio-name-arrow { flex: 0 0 auto; color: #8565bf; font-size: 19px; font-weight: 400; }
body[data-page="/"] .portfolio-card:nth-child(-n+2) .portfolio-name { font-size: 25px; }
body[data-page="/"] .portfolio-tag { background: none; -webkit-text-fill-color: #7153b2; color: #7153b2; font-size: 11px; }
body[data-page="/"] .portfolio-desc { font-size: 13px; font-weight: 400; }
.portfolio-thumb-overlay:focus-within { opacity: 1; }
.portfolio-card:focus-within { outline: 2px solid #7959d2; outline-offset: 3px; }

/* Mała ilustracja łączy działania w jedną ścieżkę kontaktu. */
.client-path { display: flex; align-items: flex-start; gap: 9px; max-width: 340px; margin: 0 auto 32px; padding: 22px 0 29px; border-bottom: 1px solid #35405a; }
.client-path-node { flex: 0 0 68px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #8bd3ea; }
.client-path-node svg { width: 48px; height: 48px; padding: 11px; border: 1px solid currentColor; border-radius: 13px; background: rgba(76,167,210,.08); }
.client-path-node:nth-of-type(2) { color: #b79ae7; }
.client-path-node:last-child { color: #e1a1c9; }
.client-path-node span { font-size: 11px; letter-spacing: .035em; color: #cad3e2; }
.client-path-line { flex: 1; height: 1px; margin-top: 24px; background: linear-gradient(90deg,#5da9c9,#a483d1); position: relative; }
.client-path-line::after { content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid #b494dc; border-right: 1px solid #b494dc; transform: rotate(45deg); }
body[data-page="/"] .cta-box { background: #131d33; border: 1px solid #35405a; border-radius: 20px; box-shadow: none; }
body[data-page="/"] .cta-box::before { display: none; }
body[data-page="/"] .target-item { background: transparent; border-color: #2c364d; border-radius: 12px; }
body[data-page="/"] .web-local-panel { box-shadow: none; border-radius: 18px; }

/* FAQ i stopka: spokojniejsze powierzchnie i czytelniejsze odstępy. */
.faq-item { border-radius: 12px; box-shadow: none; }
.faq-item:hover, .faq-item.open { box-shadow: 0 6px 20px rgba(23,31,59,.035); }
.faq-trigger { line-height: 1.5; font-weight: 600; }
.faq-answer { line-height: 1.75; }
.footer { padding-top: 64px; background: #0c1326; }
.footer-grid-seo { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 28px; }
.footer-local-col { grid-column: auto; }
.footer-brand img { width: 180px; }
.footer-brand p { font-weight: 400; }
.footer-links a { font-size: 13px; line-height: 1.6; }
.footer-links { display: grid; gap: 10px; }
.footer-links li { margin-bottom: 0; }
.footer-col h4 { font-size: 11px; letter-spacing: .1em; }
.footer-bottom { padding-block: 24px; }

@media (max-width: 1180px) {
  .footer-grid-seo { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; }
  body[data-page="/"] .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-page="/"] .portfolio-card:nth-child(-n+2) { grid-column: auto; }
  body[data-page="/"] .portfolio-card:nth-child(-n+2) .portfolio-name { font-size: 21px; }
  .home-services-grid { column-gap: 30px; }
}
@media (max-width: 740px) {
  .footer-grid-seo { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: 480px; }
  .section { padding-block: 64px; }
  .section-header { margin-bottom: 30px; }
  .home-services-grid { grid-template-columns: 1fr; }
  .home-services-grid > .card { column-gap: 17px; padding-block: 25px; }
  .home-services-grid h3 { font-size: 19px; }
  .home-services-grid p { font-size: 14px; }
  body[data-page="/"] .business-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-page="/"] .business-service-card, body[data-page="/"] .business-service-card:nth-last-child(-n+2) { grid-column: auto; }
  body[data-page="/"] .business-service-card:last-child { grid-column: 1 / -1; }
  body[data-page="/"] .hero-subtitle { font-size: 15px; }
  body[data-page="/"] .portfolio-info { padding: 18px; }
  .project-preview .photo-badge { padding: 14px 7px 7px; }
}
@media (max-width: 530px) {
  .container, .hero-content, .navbar-inner { padding-inline: 22px; }
  body[data-page="/"] .hero-badge { font-size: 10px; padding-inline: 10px; gap: 6px; }
  body[data-page="/"] .hero-badge-logo { display: none; }
  body[data-page="/"] .hero-badges { gap: 15px 12px; }
  body[data-page="/"] .hero-badge-text { font-size: 11px; }
  body[data-page="/"] .hero-ctas { gap: 12px; }
  body[data-page="/"] .hero-ctas > a { width: 100%; justify-content: center; font-size: 13px; }
  body[data-page="/"] .business-services-grid, body[data-page="/"] .portfolio-grid { grid-template-columns: 1fr; }
  body[data-page="/"] .business-service-card:last-child { grid-column: auto; }
  body[data-page="/"] .portfolio-name, body[data-page="/"] .portfolio-card:nth-child(-n+2) .portfolio-name { font-size: 21px; }
  body[data-page="/"] .stats-bar { padding-block: 16px; }
  body[data-page="/"] .stat-number { font-size: 30px; }
  body[data-page="/"] .stat-label { font-size: 11px; }
  .footer-grid-seo { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 165px; }
  .client-path { gap: 6px; }
  .client-path-node { flex-basis: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; }
  .home-services-grid > .card, .home-services-grid .card-icon { transition: none; }
}
/* Directory filters must override the city links' explicit display rule. */
.location-city-link[hidden],
.location-region-card[hidden],
.location-empty[hidden] { display: none !important; }