/* TOPklik: paleta oparta na oryginalnym znaku — błękit, fiolet i róż. */
.knowledge-hero .page-hero-content {
  max-width: 1400px;
}
.knowledge-hero .page-hero-content h1 {
  max-width: 900px;
}
.knowledge-hero .page-hero-content p {
  max-width: 840px;
}
.knowledge-hero .page-hero-content > .section-badge,
.knowledge-hero .page-hero-content > h1,
.knowledge-hero .page-hero-content > p {
  position: relative;
  z-index: 1;
}
.page-hero {
  display: flex;
  align-items: center;
  min-height: 600px;
}
.page-hero > .page-hero-content { width: 100%; }
.knowledge-hero-art {
  position: absolute;
  z-index: 0;
  top: calc(50% + 16px);
  right: 0;
  width: min(32vw, 440px);
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  animation: knowledge-art-float 7s ease-in-out infinite alternate;
}
.knowledge-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border: 1px solid rgba(38, 173, 225, .22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(38, 173, 225, .12), rgba(83, 100, 216, .065));
  color: #227cb7;
  transition: transform .25s ease;
}
.knowledge-card-icon svg { width: 23px; height: 23px; }
.knowledge-card:nth-child(3n + 2) .knowledge-card-icon {
  border-color: rgba(117, 71, 209, .22);
  background: linear-gradient(145deg, rgba(117, 71, 209, .12), rgba(83, 100, 216, .06));
  color: #7252c4;
}
.knowledge-card:nth-child(3n) .knowledge-card-icon {
  border-color: rgba(216, 70, 170, .2);
  background: linear-gradient(145deg, rgba(216, 70, 170, .11), rgba(117, 71, 209, .055));
  color: #b74592;
}
.knowledge-card:hover .knowledge-card-icon { transform: translateY(-3px) rotate(-4deg); }
.knowledge-start-card a {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #e7e9f2;
  line-height: 1.45;
}
.knowledge-start-card a:last-child { padding-bottom: 0; }
.page-hero:not(.knowledge-hero) { min-height: 600px; isolation: isolate; }
.page-hero:not(.knowledge-hero) .page-hero-content h1 { max-width: 820px; }
.page-hero:not(.knowledge-hero) .page-hero-content p { max-width: 780px; }
.page-hero:not(.knowledge-hero)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(50% + 56px);
  right: max(24px, calc((100vw - 1400px) / 2 + 12px));
  width: min(38vw, 520px);
  aspect-ratio: 640 / 520;
  background: url('/assets/img/topic-offer.svg') center / contain no-repeat;
  pointer-events: none;
  transform: translateY(-50%);
  animation: topic-art-drift 8s ease-in-out infinite alternate;
}
body[data-page="/oferta/seo"] .page-hero::after { background-image: url('/assets/img/topic-seo.svg'); }
body[data-page="/oferta/google-ads"] .page-hero::after { background-image: url('/assets/img/topic-ads.svg'); }
body[data-page="/oferta/social-media"] .page-hero::after { background-image: url('/assets/img/topic-social.svg'); }
body[data-page="/oferta/content-marketing"] .page-hero::after { background-image: url('/assets/img/topic-content.svg'); }
body[data-page="/oferta/design"] .page-hero::after { background-image: url('/assets/img/topic-design.svg'); }
body[data-page="/oferta/foto-wideo"] .page-hero::after { background-image: url('/assets/img/topic-photo.svg'); }
body[data-page="/oferta/szkolenia"] .page-hero::after { background-image: url('/assets/img/topic-training.svg'); }
body[data-page="/strony-24h"] .page-hero::after { background-image: url('/assets/img/topic-fast.svg'); }
body[data-page="/portfolio"] .page-hero::after { background-image: url('/assets/img/topic-portfolio.svg'); }
body[data-page="/o-nas"] .page-hero::after { background-image: url('/assets/img/topic-about.svg'); }
body[data-page="/kontakt"] .page-hero::after { background-image: url('/assets/img/topic-contact.svg'); }
body[data-page="/polityka-prywatnosci"] .page-hero { min-height: 370px; }
body[data-page="/polityka-prywatnosci"] .page-hero::after { top: calc(50% + 45px); width: 260px; background-image: url('/assets/img/topic-privacy.svg'); }
body[data-page="/404"] .page-hero::after { background-image: url('/assets/img/topic-missing.svg'); }
body[data-page^="/baza-wiedzy/"] .article-hero {
  display: flex;
  align-items: center;
  min-height: 660px;
  isolation: isolate;
}
body[data-page^="/baza-wiedzy/"] .article-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  column-gap: clamp(42px, 5vw, 96px);
  align-items: start;
  width: 100%;
  max-width: 1400px;
}
body[data-page^="/baza-wiedzy/"] .article-hero-inner > * { grid-column: 1; min-width: 0; }
body[data-page^="/baza-wiedzy/"] .article-hero h1 { max-width: none; font-size: clamp(42px, 4.2vw, 66px); }
body[data-page^="/baza-wiedzy/"] .article-hero-inner::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  width: 100%;
  aspect-ratio: 640 / 520;
  background: url('/assets/img/topic-article.svg') center / contain no-repeat;
  pointer-events: none;
  animation: article-art-float 8s ease-in-out infinite alternate;
}
@keyframes article-art-float {
  from { transform: translateY(5px); }
  to { transform: translateY(-7px); }
}
@keyframes topic-art-drift {
  from { transform: translateY(calc(-50% + 5px)); }
  to { transform: translateY(calc(-50% - 7px)); }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .page-hero:not(.knowledge-hero) { min-height: 0; padding-bottom: 300px; }
  .page-hero:not(.knowledge-hero)::after {
    top: auto;
    right: calc(50% - 160px);
    bottom: 10px;
    width: 320px;
    opacity: 1;
    transform: none;
    animation: none;
  }
  body[data-page="/polityka-prywatnosci"] .page-hero { min-height: 0; padding-bottom: 265px !important; }
  body[data-page="/polityka-prywatnosci"] .page-hero::after { right: calc(50% - 135px); width: 270px; }
  body[data-page^="/baza-wiedzy/"] .article-hero { min-height: 0; padding-bottom: 64px; }
  body[data-page^="/baza-wiedzy/"] .article-hero-inner { grid-template-columns: 1fr; max-width: 980px; }
  body[data-page^="/baza-wiedzy/"] .article-hero-inner::after {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(420px, 100%);
    margin-top: 24px;
  }
}
@media (max-width: 700px) {
  .page-hero,
  body[data-page^="/baza-wiedzy/"] .article-hero { display: block; min-height: 0; }
  .page-hero:not(.knowledge-hero) { min-height: 0; padding-bottom: 260px; }
  .page-hero:not(.knowledge-hero)::after {
    top: auto;
    right: calc(50% - 145px);
    bottom: 8px;
    width: 290px;
    opacity: 1;
    transform: none;
    animation: none;
  }
  body[data-page="/polityka-prywatnosci"] .page-hero { min-height: 0; padding-bottom: 220px !important; }
  body[data-page="/polityka-prywatnosci"] .page-hero::after { right: calc(50% - 120px); width: 240px; }
  body[data-page^="/baza-wiedzy/"] .article-hero { padding-bottom: 48px; }
  body[data-page^="/baza-wiedzy/"] .article-hero-inner { grid-template-columns: 1fr; max-width: 100%; }
  body[data-page^="/baza-wiedzy/"] .article-hero h1 { font-size: clamp(36px, 9.2vw, 44px); }
  body[data-page^="/baza-wiedzy/"] .article-hero-inner::after {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(320px, 100%);
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero:not(.knowledge-hero)::after,
  body[data-page^="/baza-wiedzy/"] .article-hero-inner::after { animation: none; }
}
.article-publication {
  margin-top: 26px;
  color: #aeb9cf;
  font-size: 13px;
  font-weight: 650;
}
@keyframes knowledge-art-float {
  from { transform: translateY(calc(-50% + 5px)); }
  to { transform: translateY(calc(-50% - 7px)); }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .knowledge-hero { min-height: 0; }
  .knowledge-hero .knowledge-hero-art {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 320px;
    margin: 22px auto -28px;
    transform: none;
    animation: none;
  }
}
@media (max-width: 700px) {
  .knowledge-hero { padding-bottom: 50px; }
  .knowledge-hero-art {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 310px);
    margin: 24px auto -30px;
    transform: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-hero-art { animation: none; }
  .knowledge-card-icon { transition: none; }
}
.about-process-section { padding-top: 24px; scroll-margin-top: 96px; }
.about-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  padding-top: 60px;
  border-top: 1px solid #e1e7f1;
}
.about-process-copy .section-title { max-width: 680px; }
.about-process-copy > p {
  max-width: 680px;
  margin: 0 0 15px;
  color: #5f6b80;
  line-height: 1.76;
}
.about-process-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.about-process-steps { border-top: 1px solid #dce3ef; }
.about-process-step {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid #dce3ef;
}
.about-process-step > span {
  color: #7658ca;
  font-size: 31px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.05em;
}
.about-process-step:nth-child(1) > span { color: #2489be; }
.about-process-step:nth-child(3) > span { color: #bd4b9d; }
.about-process-step h3 { margin: 0 0 6px; color: #20253a; font-size: 19px; }
.about-process-step p { margin: 0; color: #657087; line-height: 1.6; }
@media (max-width: 900px) {
  .about-process-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 42px; }
}
@media (max-width: 680px) {
  .about-process-grid { padding-top: 34px; }
  .about-process-step { grid-template-columns: 48px minmax(0, 1fr); gap: 15px; padding: 20px 0; }
  .about-process-step > span { font-size: 26px; }
}
:root {
  --brand-orange: #29b1e6;
  --brand-rose: #d846aa;
  --brand-purple: #7547d1;
  --brand-indigo: #5364d8;
  --brand-cyan: #26ade1;
  --primary: #5938b2;
  --primary-light: #7959d2;
  --secondary: #bd3195;
  --accent: #1e83ce;
  --accent-dark: #1767b1;
  --brand-gradient: linear-gradient(110deg, #29b1e6 0%, #5867dc 39%, #8547d6 68%, #dc48a9 100%);
  --brand-button-gradient: linear-gradient(110deg, #176cb9 0%, #5848c2 53%, #a533a0 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgba(38,173,225,.11), rgba(117,71,209,.10), rgba(216,70,170,.08));
  --surface-shadow: 0 16px 42px rgba(23, 28, 53, .075);
}

body, body::after { background-image: none; }
body::before { opacity: .28; }
::-webkit-scrollbar-thumb { background: #8058cf; }
.navbar-logo img { opacity: 1; }
.navbar-logo-gradient { display: none; }
.navbar.scrolled .nav-links a:hover, .navbar.opaque .nav-links a:hover,
.btn-outline-light:hover, .card-link, .card-link-dark,
.cookie-text a { color: var(--primary); }
.dropdown-menu a::before { background: #38b3e5; box-shadow: none; }
.hero-grid, .page-hero::before, .cta-banner::before {
  background-image: linear-gradient(rgba(83,100,216,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(38,173,225,.04) 1px, transparent 1px);
}
.page-hero-orb { background: rgba(117,71,209,.12); }
.hero-badge, .badge-primary-dark, .cookie-icon, .target-icon, .contact-item-icon {
  border-color: rgba(117,71,209,.23);
}
.hero-float-card-icon, .cta-box-icon, .adv-check, .photo-badge-icon,
.check-circle-primary, .check-circle-green {
  background: linear-gradient(135deg, rgba(38,173,225,.14), rgba(117,71,209,.11));
  border-color: rgba(117,71,209,.22);
}
.hero-float-card-icon svg, .hero-float-card-sub, .hero-float-card-item svg,
.cta-box-icon svg, .adv-check svg, .check-circle-green svg,
.target-icon svg, .cookie-icon svg, .contact-item-icon svg { color: #6f53ce; }
.step-icon-1, .step-icon-2, .step-icon-3, .step-icon-4 {
  background: linear-gradient(135deg, rgba(38,173,225,.13), rgba(117,71,209,.13));
  border-color: rgba(117,71,209,.24);
}
.badge-primary, .badge-accent, .badge-green, .badge-pink,
.badge-primary-dark, .badge-accent-dark, .badge-green-dark,
.icon-primary, .icon-primary-dark, .icon-accent, .icon-green {
  background: var(--brand-gradient-soft);
  border-color: rgba(117,71,209,.23);
}
.badge-primary-dark { color: #c1acfa; }
.card:hover, .card-dark:hover, .portfolio-card:hover, .faq-item.open,
.target-item:hover, .adv-item:hover {
  border-color: rgba(117,71,209,.27);
  box-shadow: 0 16px 48px rgba(80,54,167,.09), 0 6px 26px rgba(38,173,225,.055);
}
.web-hero, .city-hero, .locations-hero {
  background: radial-gradient(circle at 16% 20%, rgba(38,173,225,.10), transparent 29%),
              radial-gradient(circle at 86% 75%, rgba(117,71,209,.11), transparent 27%),
              #080c1e;
}
.web-hero-glow-two, .city-hero-glow, .locations-orb-two {
  background: radial-gradient(circle, rgba(117,71,209,.18), transparent 67%);
}
.city-hero-panel-top { background: linear-gradient(135deg, rgba(38,173,225,.1), rgba(117,71,209,.07)); }
.city-panel-kicker { color: #b9a2f6; }
.locations-visual-ring.ring-b { border-color: rgba(117,71,209,.27); }
.locations-visual-ring::before, .locations-visual-ring::after {
  background: #a27ce9;
  box-shadow: 0 0 18px rgba(117,71,209,.45);
}
.locations-visual-ring.ring-a::after { background: #38b4e7; }
.locations-visual-core { box-shadow: 0 0 60px rgba(117,71,209,.15); }
.web-trust-row svg, .project-focus-card svg { stroke: #59c1ea; }
.city-panel-item > span, .city-ai-checks > div > span,
.web-showcase-float-icon {
  background: rgba(38,173,225,.11);
  color: #6fcaed;
}
.web-tech-dot { background: #38b4e7; box-shadow: 0 0 0 5px rgba(38,173,225,.09); }
.badge-green-dark { color: #9adff4; }
:focus-visible { outline-color: #7b5ad3; }
.section-white, .section-white:nth-of-type(even) { background: #fbfcff; }
.section-light, .section-light:nth-of-type(even) { background: #f2f5fb; }

.navbar.scrolled, .navbar.opaque {
  background: rgba(250, 251, 255, .94);
  box-shadow: 0 8px 28px rgba(13, 18, 42, .075);
  border-bottom-color: rgba(25, 32, 57, .09);
  backdrop-filter: blur(14px);
}

.hero, .page-hero, .cta-banner {
  background:
    radial-gradient(circle at 14% 24%, rgba(50, 119, 194, .15), transparent 38%),
    radial-gradient(circle at 87% 78%, rgba(115, 66, 195, .16), transparent 34%),
    #080c1e;
}
.hero { min-height: min(850px, 100svh); }
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15%;
  right: 5%;
  width: min(56vw, 790px);
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(105,84,216,.16), rgba(38,173,225,.055) 45%, transparent 72%);
  opacity: .45;
  pointer-events: none;
}
.hero-grid { opacity: .36; }
.orb { display: none; }
.hero-fade { height: 80px; background: linear-gradient(to top, #080c1e, transparent); }
.hero-content { padding-top: 142px; padding-bottom: 74px; }
.hero-badge {
  margin-bottom: 25px;
  padding: 7px 13px;
  border-color: rgba(137, 112, 220, .32);
  background: rgba(105, 84, 216, .09);
  color: #e0dcf7;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .025em;
  animation: none;
}
.hero-badge .dot { background: #e65ab7; box-shadow: 0 0 11px rgba(230,90,183,.4); animation: none; }
.gradient-text, .stat-number .accent, .portfolio-tag {
  background: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}
.hero-title {
  max-width: min(100%, 980px);
  font-size: clamp(44px, 5.05vw, 67px);
  line-height: 1.08;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.hero-subtitle { max-width: 585px; color: #c5ccda; line-height: 1.68; }
.hero-ctas { margin-bottom: 49px; }
.hero-badges {
  max-width: 695px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 26px;
  padding-top: 23px;
}
.hero-badge-icon { width: 32px; height: 32px; border-radius: 9px; }
.hero-badge-text { color: #adb6c8; font-size: 12px; }
.hero-art {
  position: absolute;
  z-index: 1;
  top: 4%;
  right: -3%;
  width: min(64vw, 990px);
  height: 92%;
  opacity: .86;
  pointer-events: none;
}
.hero-art svg { display: block; width: 100%; height: 100%; }
.web-showcase { min-height: 350px; align-self: center; }
.web-showcase-main { inset: 0; }
.web-showcase-card { border-radius: 16px; border-color: rgba(255,255,255,.2); box-shadow: 0 26px 64px rgba(0,0,0,.34); }
.web-showcase-main img { object-position: center top; }

.btn-primary, .btn-nav, .cookie-accept, .filter-btn.active {
  background: var(--brand-button-gradient);
  box-shadow: 0 12px 28px rgba(83, 72, 188, .2);
  animation: none;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover, .btn-nav:hover, .cookie-accept:hover, .filter-btn.active:hover {
  background: var(--brand-button-gradient);
  box-shadow: 0 18px 38px rgba(83, 72, 188, .28);
  filter: saturate(1.08);
  transform: translateY(-3px);
}
.btn-outline, .btn-outline-light { transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.btn-outline:hover, .btn-outline-light:hover { transform: translateY(-3px); }
.hero .btn-outline { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.22); }
.hero .btn-outline:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.46); }

.section-title { letter-spacing: -.035em; text-wrap: balance; }
.section-badge { letter-spacing: .035em; }
.card, .portfolio-card, .faq-item, .contact-card, .contact-item {
  background: #fff;
  border-color: rgba(25, 32, 57, .09);
  box-shadow: var(--surface-shadow);
  backdrop-filter: none;
}
.card:hover, .portfolio-card:hover, .faq-item.open, .contact-card:hover, .contact-item:hover {
  background: #fff;
  border-color: rgba(117, 71, 209, .24);
  box-shadow: 0 22px 48px rgba(23, 28, 53, .12);
}
.portfolio-card, .knowledge-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.portfolio-card:hover, .knowledge-card:hover { transform: translateY(-5px); }
.portfolio-thumb { overflow: hidden; background: #e9edf4; }
.portfolio-thumb img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.045); }
.portfolio-card:focus-within { outline: 2px solid #7959d2; outline-offset: 3px; }
.home-proof-section .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.home-proof-section .section-title { max-width: 800px; }
.home-proof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; }
.home-proof-list .checklist-item { align-items: flex-start; margin: 0; line-height: 1.5; font-size: 14px; }
.home-proof-list .check-circle { flex: 0 0 auto; margin-top: 2px; background: #f0efff; border: 1px solid #d9d3f8; }
.home-proof-list .check-circle svg { color: #6849c2; }
.project-preview {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 21px;
  background: #101729;
  box-shadow: 0 22px 55px rgba(12, 19, 39, .16);
}
.project-preview::before { display: none; }
.project-preview-bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px 7px; color: #aab4c6; font-size: 11px; font-weight: 650; letter-spacing: .025em; }
.project-preview-dots { display: inline-flex; gap: 5px; }
.project-preview-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #667187; }
.project-preview-dots i:first-child { background: #3cb5e7; }
.project-preview-dots i:nth-child(2) { background: #7962d5; }
.project-preview-dots i:nth-child(3) { background: #d658b2; }
.project-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: 11px; background: #fff; }
.project-preview .photo-badge { position: static; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 9px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.photo-badge-copy { display: flex; flex-direction: column; min-width: 0; }
.project-preview .photo-badge-eyebrow { margin-bottom: 2px; color: #a88bef; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.project-preview .photo-badge-title { color: #fff; font-size: 16px; line-height: 1.3; }
.project-preview .photo-badge-sub { margin-top: 1px; color: #aeb9c9; font-size: 12px; }
.project-preview-link { flex: 0 0 auto; padding: 9px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #f1f3f8; font-size: 12px; font-weight: 700; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.project-preview-link:hover, .project-preview-link:focus-visible { border-color: #a88bef; background: rgba(117,71,209,.11); transform: translateY(-2px); }
.project-preview-link span { margin-left: 4px; color: #a88bef; }
.stats-bar { background: #0b1025; box-shadow: none; }
.stats-bar::after { display: none; }
.step-icon {
  background: rgba(117, 71, 209, .12);
  border: 1px solid rgba(117, 71, 209, .26);
}
.step-icon svg { color: #ab93ef; }
.step-card { transition: transform .3s ease, border-color .3s ease; }
.step-card:hover { transform: translateY(-4px); border-color: rgba(117, 71, 209, .32); }

/* Jedna paleta od nagłówka po stopkę. */
.footer {
  background: radial-gradient(circle at 20% 0%, rgba(38,173,225,.09), transparent 35%),
              radial-gradient(circle at 90% 0%, rgba(117,71,209,.10), transparent 30%),
              #080c1e;
  border-top-color: rgba(117,71,209,.23);
}
.footer-brand img { opacity: 1; }
.footer-brand p, .footer-contact-item, .footer-links a { color: #aeb8c9; }
.footer-col h4 { color: #dce2ed; }
.footer-contact-item svg { color: #68c7ef; }
.footer-contact-item:hover, .footer-links a:hover, .footer-all-locations:hover { color: #c7b5ff; }
.footer-all-locations { color: #a992ee !important; }
.footer-bottom { border-top-color: rgba(117,71,209,.2); }
.footer-bottom p { color: #8792a7; }
.cookie-text a { color: #c7b5ff; }

/* Renderuj całą treść nawet wtedy, gdy skrypt się nie wczyta. */
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
.reveal.enter-pending {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .68s cubic-bezier(.2,.7,.2,1), transform .68s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--enter-delay, 0ms);
}
.reveal.enter-pending.enter-in { opacity: 1; transform: translate3d(0,0,0); }

@media (prefers-reduced-motion: no-preference) {
  .hero-badge, .hero-title, .hero-subtitle, .hero-ctas, .hero-badges,
  .web-hero-copy, .web-showcase, .page-hero-content {
    animation: topklik-enter .72s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-title { animation-delay: .08s; }
  .hero-subtitle { animation-delay: .17s; }
  .hero-ctas { animation-delay: .26s; }
  .hero-badges { animation-delay: .35s; }
  .hero-art { animation: hero-art-drift 13s ease-in-out infinite alternate; }
  .hero::before { animation: hero-ambient 9s ease-in-out infinite alternate; }
  .web-showcase { animation-delay: .17s; }
}
@keyframes topklik-enter {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-art-drift {
  from { transform: translate3d(0, 7px, 0); }
  to { transform: translate3d(0, -11px, 0); }
}
@keyframes hero-ambient {
  from { opacity: .26; transform: scale(.92); }
  to { opacity: .68; transform: scale(1.08); }
}

@media (max-width: 1100px) {
  .hero-title { max-width: min(100%, 860px); font-size: clamp(43px, 5.5vw, 60px); }
  .hero-art { right: -15%; width: 90vw; opacity: .54; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-content { padding-top: 130px; }
  .hero-art { right: -28%; width: 110vw; opacity: .27; }
  .web-showcase { min-height: min(55vw, 380px); }
  .home-proof-section .grid-2 { grid-template-columns: 1fr; }
  .project-preview { max-width: 760px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .hero-content { padding-top: 120px; padding-bottom: 58px; }
  .hero-title { max-width: none; font-size: clamp(35px, 9.2vw, 45px); letter-spacing: -.047em; }
  .hero-subtitle { font-size: 15px; }
  .hero-ctas { margin-bottom: 35px; }
  .hero-badges { grid-template-columns: 1fr 1fr; gap: 13px; }
  .hero-badge-item { align-items: flex-start; gap: 8px; }
  .hero-badge-text { font-size: 11px; }
  .hero-badge-icon { width: 27px; height: 27px; }
  .hero-art { top: 8%; right: -65%; width: 145vw; height: 70%; opacity: .16; }
  .hero::before { display: none; }
  .web-showcase { min-height: 225px; }
  .home-proof-list { grid-template-columns: 1fr; gap: 12px; }
  .project-preview { padding: 7px; border-radius: 17px; }
  .project-preview .photo-badge { padding: 13px 7px 8px; }
  .project-preview-link { font-size: 11px; padding: 8px; }
  .stats-bar { padding: 26px 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { padding: 17px 9px; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); }
  .stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
  .stat-number { font-size: 34px; }
  .stat-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.enter-pending { opacity: 1; transform: none; transition: none; }
  .portfolio-thumb img, .portfolio-card, .knowledge-card { transition: none; }
}

/* Strony WWW: lekki projekt zamiast dużego zrzutu innej witryny. */
.web-hero { padding-top: 132px; padding-bottom: 86px; }
.web-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(40px, 5vw, 78px); }
.web-hero-copy h1 { font-size: clamp(42px, 4.1vw, 62px); line-height: 1.07; max-width: 680px; }
.web-showcase-illustration {
  width: min(100%, 640px);
  min-height: 0;
  aspect-ratio: 640 / 520;
  justify-self: end;
}
.web-showcase-illustration img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .web-hero-inner { grid-template-columns: 1fr; }
  .web-showcase-illustration { width: min(600px, 100%); min-height: 0; margin: 8px auto 0; justify-self: center; }
}
@media (max-width: 680px) {
  .web-showcase-illustration { min-height: 0; margin-top: 18px; }
}

/* Osobny temat ilustracji dla każdego poradnika. */
body[data-page="/baza-wiedzy/ile-kosztuje-strona-internetowa"] .article-hero-inner::after { background-image: url('/assets/img/article-cost.svg'); }
body[data-page="/baza-wiedzy/co-powinna-zawierac-strona-internetowa"] .article-hero-inner::after { background-image: url('/assets/img/article-essentials.svg'); }
body[data-page="/baza-wiedzy/jak-przygotowac-materialy-do-strony-internetowej"] .article-hero-inner::after { background-image: url('/assets/img/article-materials.svg'); }
body[data-page="/baza-wiedzy/ile-trwa-stworzenie-strony-internetowej"] .article-hero-inner::after { background-image: url('/assets/img/article-timeline.svg'); }
body[data-page="/baza-wiedzy/strona-internetowa-dla-malej-firmy"] .article-hero-inner::after { background-image: url('/assets/img/article-small.svg'); }
body[data-page="/baza-wiedzy/landing-page-czy-strona-firmowa"] .article-hero-inner::after { background-image: url('/assets/img/article-comparison.svg'); }
body[data-page="/baza-wiedzy/jak-przygotowac-strone-pod-seo"] .article-hero-inner::after { background-image: url('/assets/img/article-seo.svg'); }

.locations-illustration { display: block; width: min(540px, 100%); height: auto; justify-self: end; }
.city-panel-art { display: block; width: 100%; height: auto; margin-top: 19px; border-radius: 13px; }
@media (max-width: 900px) {
  .locations-illustration { width: min(540px, 100%); justify-self: center; }
}

/* Wpisy korzystają z tej samej szerokości co nagłówek i stopka. */
.article-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  column-gap: clamp(42px, 4.6vw, 64px);
}
.article-prose { max-width: 900px; font-size: clamp(18px, 1.3vw, 19px); line-height: 1.78; }
.article-takeaways { font-size: 17px; }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: 44px; }
  .article-prose { max-width: 780px; font-size: 18px; }
  .article-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .article-layout { gap: 38px; }
  .article-prose { font-size: 16.5px; line-height: 1.76; }
  .article-takeaways { font-size: 15px; }
.article-sidebar { grid-template-columns: 1fr; }
}

/* Równorzędne, czytelne wybory cookies oraz stały dostęp do zmiany decyzji. */
.cookie-banner { width: min(480px, calc(100vw - 32px)); max-width: none; }
.cookie-text { font-size: 13px; line-height: 1.65; }
.cookie-btns { flex-wrap: wrap; }
.cookie-accept, .cookie-decline, .cookie-customize, .cookie-save {
  flex: 1 1 135px; min-height: 43px; padding: 10px 12px;
  color: #fff; font-size: 13px; font-weight: 650; text-align: center;
  border: 1px solid rgba(200,186,255,.48); border-radius: 9px;
  cursor: pointer;
}
.cookie-decline { background: rgba(255,255,255,.11); }
.cookie-decline:hover { background: rgba(255,255,255,.18); }
.cookie-banner .cookie-accept, .cookie-banner .cookie-decline {
  background: rgba(255,255,255,.10); border-color: rgba(200,186,255,.48); box-shadow: none;
}
.cookie-banner .cookie-accept:hover, .cookie-banner .cookie-decline:hover {
  background: rgba(255,255,255,.18); transform: none;
}
.cookie-customize { background: transparent; color: #d8ddec; }
.cookie-customize:hover { background: rgba(255,255,255,.08); }
.cookie-details[hidden] { display: none; }
.cookie-details { display: grid; gap: 8px; margin: 0 0 13px; }
.cookie-option {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px;
  background: rgba(255,255,255,.045); color: #fff;
}
.cookie-option span { display: grid; gap: 2px; }
.cookie-option strong { font-size: 13px; }
.cookie-option small { color: #9ca8bc; font-size: 11px; }
.cookie-option input { width: 19px; height: 19px; accent-color: #8265db; }
.cookie-option-required { opacity: .75; }
.cookie-save { width: 100%; background: rgba(117,71,209,.9); }
.cookie-accept:focus-visible, .cookie-decline:focus-visible, .cookie-customize:focus-visible,
.cookie-save:focus-visible, .cookie-option input:focus-visible, .footer-cookie-settings:focus-visible {
  outline: 3px solid #71d7f4; outline-offset: 3px;
}
.footer-cookie-settings {
  border: 0; background: none; color: #aeb8c9; font: inherit;
  cursor: pointer; padding: 0; text-align: left;
}
.footer-cookie-settings:hover { color: #c7b5ff; }
@media (max-width: 520px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 17px; }
  .cookie-inner { gap: 11px; }
  .cookie-icon { width: 34px; height: 34px; }
}

/* Osobne usługi systemowe: pięć równych, klikalnych kart. */
.business-services-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.business-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.business-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(141, 180, 246, .4);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .18);
}
.business-service-card:focus-visible {
  outline: 3px solid #71d7f4;
  outline-offset: 3px;
}
.business-service-card h3 { font-size: 19px; }
.business-service-card p { font-size: 13.5px; }
.business-service-link {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 25px;
  color: #a9b9f1;
  font-size: 12px;
  font-weight: 750;
}
.dropdown-menu { max-height: calc(100vh - 110px); overflow-y: auto; }
.footer-service-heading { margin-top: 26px; }
.business-service-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .nav-links, .btn-nav { display: none !important; }
  .hamburger { display: flex !important; }
}
@media (max-width: 1150px) {
  .business-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .business-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 530px) {
  .business-services-grid { grid-template-columns: 1fr; }
  .business-service-actions { flex-direction: column; align-items: stretch; }
  .business-service-actions .btn-primary, .business-service-actions .btn-outline { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .business-service-card { transition: none; }
}