/* ICTHUB static website - palette updated to match the attached ICTHUB portfolio leaflet.
   No external dependencies. Compatible with Safari, Chrome, Brave, Firefox and Edge on desktop/mobile. */
:root {
  --blue: #0040D8;
  --blue-bright: #006CFF;
  --blue-mid: #0030A8;
  --blue-deep: #002070;
  --navy: #001860;
  --ink: #111318;
  --text: #333333;
  --muted: #5D6470;
  --pale: #E0E8F8;
  --pale-2: #F3F7FF;
  --line: #DCE5F4;
  --white: #FFFFFF;
  --black: #02040A;
  --shadow: 0 24px 70px rgba(0, 32, 112, .16);
  --shadow-soft: 0 14px 36px rgba(0, 32, 112, .08);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 0 0 12px 0; z-index: 100; }
.skip-link:focus { left: 0; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 48, 168, .10);
}
.navbar { display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.logo img { width: 252px; max-height: 78px; object-fit: contain; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav-links a { display: inline-flex; align-items: center; padding: 10px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .025em; color: var(--ink); text-transform: uppercase; }
.nav-links a:hover, .nav-links a:focus, .nav-links a.active { background: var(--pale); color: var(--blue); outline: none; }
.lang-link { border: 1px solid rgba(0, 64, 216, .28); color: var(--blue) !important; }
.nav-toggle { display: none; border: 0; background: var(--blue); color: #fff; border-radius: 12px; padding: 10px 13px; font-weight: 800; }
.hero {
  position: relative; overflow: hidden; min-height: 720px; display: flex; align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 32, 112, .96) 0%, rgba(0, 64, 216, .92) 42%, rgba(0, 64, 216, .72) 100%),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(135deg, var(--navy), var(--blue));
}
.hero::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    url('../img/hero-network.svg');
  background-size: 58px 58px, 58px 58px, cover;
  background-position: center, center, right center;
  opacity: .50;
}
.hero::after { content:""; position:absolute; inset:auto 0 0 0; height: 150px; background: linear-gradient(to top, rgba(0,0,0,.24), transparent); pointer-events:none; }
.hero-grid { position: relative; z-index: 1; display:grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr); gap: 60px; align-items: center; padding: 98px 0 86px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:9px 13px; border-radius:999px; background:rgba(224,232,248,.14); color:#fff; border:1px solid rgba(255,255,255,.22); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow::before { content:""; width:9px; height:9px; border-radius:999px; background:var(--blue-bright); box-shadow: 13px 0 0 #FFFFFF; }
h1 { margin: 22px 0 18px; color: #fff; font-size: clamp(42px, 7vw, 76px); line-height: 1.01; letter-spacing: -.055em; text-transform: uppercase; }
.lead { max-width: 740px; font-size: clamp(18px, 2.1vw, 22px); color: rgba(255,255,255,.90); margin: 0 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top: 32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding: 13px 22px; border-radius:999px; font-weight:900; border:1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color:#fff; background: linear-gradient(135deg, var(--blue-bright), var(--blue)); box-shadow: 0 18px 38px rgba(0, 64, 216, .34); }
.btn-secondary { color:#fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.42); }
.trust-row { display:flex; flex-wrap:wrap; gap:10px; margin-top: 34px; }
.trust-pill { padding:8px 11px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.10); border-radius:999px; color:#fff; font-size:13px; font-weight:800; }
.hero-panel { position:relative; padding:26px; border-radius:30px; background: linear-gradient(135deg, rgba(0,64,216,.92), rgba(0,24,96,.92)); border:1px solid rgba(255,255,255,.24); box-shadow: var(--shadow); overflow:hidden; }
.hero-panel::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.20), transparent 27%), linear-gradient(135deg, rgba(255,255,255,.09), transparent 42%); pointer-events:none; }
.hero-visual { min-height: 480px; border-radius: 22px; overflow:hidden; background: linear-gradient(150deg, rgba(0,64,216,.98), rgba(0,32,112,.98) 58%, rgba(0,0,0,.96)); position:relative; }
.hero-visual::before { content:""; position:absolute; inset:-2px; background-image: url('../img/hero-network.svg'); background-size: cover; background-position:center; opacity:.78; }
.hero-visual::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 72% 28%, rgba(255,255,255,.24), transparent 24%), linear-gradient(to top, rgba(0,0,0,.28), transparent 72%); }
.competence-grid { position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.competence-tile { min-height: 116px; padding: 18px; border-radius: 16px; color:#fff; background: linear-gradient(145deg, rgba(0,64,216,.74), rgba(0,24,96,.72)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(0,108,255,.20); }
.competence-tile span { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff; font-weight:900; box-shadow:0 0 22px rgba(0,108,255,.42); }
.competence-tile strong { display:block; margin-top:14px; font-size:17px; line-height:1.2; }
.stats-card, .float-card { position:absolute; background:#fff; color: var(--ink); border:1px solid rgba(0,64,216,.10); box-shadow: var(--shadow); }
.stats-card { left:-18px; bottom:36px; width:245px; padding:20px; border-radius:22px; }
.stats-card b { display:block; color:var(--blue); font-size:31px; letter-spacing:-.04em; line-height:1; }
.stats-card span { display:block; color: var(--muted); font-weight:700; font-size:13px; margin-top:6px; }
.float-card { right:-18px; top:52px; width: 220px; padding:18px; border-radius:22px; }
.float-card strong { display:block; color:var(--ink); margin-bottom: 8px; }
.float-card small { color:var(--muted); font-weight:600; }
section { padding: 92px 0; }
.section-head { max-width: 800px; margin: 0 auto 46px; text-align:center; }
.kicker { color: var(--blue); font-weight:900; letter-spacing:.12em; font-size:13px; text-transform:uppercase; }
h2 { margin: 10px 0 14px; color: var(--ink); font-size: clamp(30px, 4vw, 48px); line-height:1.08; letter-spacing:-.04em; }
h3 { color: var(--ink); line-height:1.18; letter-spacing:-.025em; }
.section-text { color:#526174; font-size:18px; }
.about { background: #fff; }
.about-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 38px; align-items:start; }
.about-card { padding: 34px; border-radius: var(--radius); background: linear-gradient(180deg, #fff, var(--pale-2)); border:1px solid var(--line); box-shadow: var(--shadow-soft); }
.about-card h3 { margin-top: 0; font-size:28px; }
.about-list { display:grid; gap:14px; margin: 0; padding: 0; list-style: none; }
.about-list li { display:flex; gap:12px; align-items:flex-start; padding: 14px 16px; background:#fff; border:1px solid var(--line); border-radius: 16px; }
.check { flex:0 0 24px; width:24px; height:24px; border-radius:999px; background:var(--pale); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; font-weight:900; }
.services { background: var(--pale-2); }
.service-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding: 26px; box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease, border .18s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(0,64,216,.28); }
.icon { width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--pale); margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.80); }
.icon img { width:33px; height:33px; }
.service-card h3 { margin: 0 0 10px; font-size: 21px; }
.service-card p { margin: 0 0 14px; color:#536275; }
.service-card ul { margin: 0; padding-left: 18px; color:#4E5E72; }
.service-card li { margin: 7px 0; }
.methodology { background: linear-gradient(135deg, var(--blue), var(--blue-deep) 62%, var(--black)); color:#fff; position:relative; overflow:hidden; }
.methodology::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 52px 52px; opacity:.48; }
.methodology .container { position:relative; }
.methodology h2, .methodology h3 { color:#fff; }
.methodology .section-text { color:rgba(255,255,255,.86); }
.steps { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.step { padding: 24px; border-radius:22px; background: rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.24); backdrop-filter: blur(12px); }
.step-number { display:inline-flex; width:44px; height:44px; border-radius:999px; align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.26); font-weight:900; font-size:18px; }
.step h3 { margin: 16px 0 8px; font-size:18px; }
.step p { color:rgba(255,255,255,.83); margin:0; }
.contact { background:#fff; }
.contact-grid { display:grid; grid-template-columns: .86fr 1.14fr; gap: 30px; align-items:start; }
.contact-card, .form-card { border:1px solid var(--line); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-soft); padding: 34px; }
.contact-card { background: linear-gradient(145deg, var(--blue), var(--blue-deep) 58%, var(--black)); color:#fff; }
.contact-card h2, .contact-card .kicker, .contact-card .contact-label, .contact-card .contact-value { color:#fff; }
.contact-item { padding:18px 0; border-top:1px solid rgba(255,255,255,.18); }
.contact-item:first-of-type { margin-top: 22px; }
.contact-label { display:block; color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.contact-value { color:var(--ink); font-weight:800; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-field { display:flex; flex-direction:column; gap:7px; }
.form-field.full { grid-column: 1 / -1; }
label { color: var(--ink); font-size: 14px; font-weight:800; }
input, textarea { width:100%; border:1px solid #CED8E8; border-radius: 14px; padding: 13px 14px; font: inherit; color: var(--ink); background:#fff; }
input:focus, textarea:focus { outline: 3px solid rgba(0,64,216,.16); border-color: var(--blue); }
textarea { min-height: 130px; resize: vertical; }
.consent { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#5A6878; }
.consent input { width:auto; margin-top:4px; }
.form-status { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; display:none; }
.form-status.ok { display:block; background:#EAF9EF; color:#146B2F; }
.form-status.error { display:block; background:#FFF1F0; color:#A2362A; }
.site-footer { background: linear-gradient(90deg, var(--blue) 0%, var(--navy) 34%, var(--black) 100%); color:#DCE7F3; padding: 46px 0 28px; }
.footer-grid { display:grid; grid-template-columns: 1fr 2fr; gap: 36px; }
.footer-logo { width: 190px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity:.96; }
.footer-text { color:#AEBCCE; font-size:14px; }
.footer-links { display:flex; flex-wrap:wrap; gap: 10px 18px; justify-content:flex-end; }
.footer-links a { color:#DCE7F3; font-weight:700; }
.footer-links a:hover { color:#fff; }
.copyright { margin-top: 28px; padding-top: 22px; border-top:1px solid rgba(255,255,255,.12); color:#9AAABC; font-size:13px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.page-hero { padding: 70px 0; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#fff; border-bottom:1px solid var(--line); }
.page-hero h1, .page-hero p { color:#fff; }
.content-page { max-width:900px; margin: 0 auto; padding: 70px 0; }
.content-page h1 { font-size: clamp(36px,5vw,58px); }
.content-page h2 { font-size: 28px; margin-top: 36px; }
.content-page li { margin: 10px 0; }

.portfolio-hero {
  position: relative;
  padding: 82px 0;
  background:
    linear-gradient(90deg, rgba(0, 32, 112, .96) 0%, rgba(0, 64, 216, .90) 52%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(135deg, var(--blue), var(--blue-deep));
  overflow:hidden;
}
.portfolio-hero::before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 56px 56px; opacity:.35;
}
.portfolio-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items:center; }
.portfolio-summary-card { padding: 30px; border-radius: var(--radius); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.portfolio-summary-card h2 { color:#fff; margin-top:0; font-size:30px; }
.portfolio-summary-card .about-list li { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color:#fff; }
.portfolio-viewer-section { background: var(--pale-2); }
.pdf-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin: -16px 0 24px; }
.pdf-toolbar .btn-secondary { color: var(--blue); background:#fff; border-color: rgba(0,64,216,.24); }
.pdf-frame-wrap { overflow:hidden; border-radius: var(--radius); border: 1px solid var(--line); background:#fff; box-shadow: var(--shadow); }
.pdf-frame { width:100%; height: 820px; display:block; border:0; }
.pdf-fallback { padding: 38px; text-align:center; }
.pdf-fallback h3 { margin-top:0; }

@media (max-width: 1120px) {
  .navbar { min-height: 92px; }
  .logo img { width: 220px; }
  .nav-toggle { display:inline-flex; }
  .nav-links { position:absolute; left:20px; right:20px; top:98px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow: var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { justify-content:center; padding:13px 12px; font-size:13px; }
}
@media (max-width: 1060px) { .portfolio-hero-grid { grid-template-columns:1fr; } }
@media (max-width: 780px) { .pdf-frame { height: 560px; } .portfolio-hero { padding: 58px 0; } }

.back-top { position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px; border:0; background:var(--blue); color:#fff; box-shadow:0 12px 24px rgba(0,64,216,.22); display:none; cursor:pointer; }
.back-top.show { display:block; }

@media (max-width: 1120px) {
  .navbar { min-height: 92px; }
  .logo img { width: 220px; }
  .nav-toggle { display:inline-flex; }
  .nav-links { position:absolute; left:20px; right:20px; top:98px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow: var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { justify-content:center; padding:13px 12px; font-size:13px; }
}
@media (max-width: 1060px) { .hero-grid, .about-grid, .contact-grid, .footer-grid { grid-template-columns:1fr; } .hero { min-height: auto; } .hero-panel { max-width: 660px; } .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer-links { justify-content:flex-start; } }
@media (max-width: 780px) { .container { width:min(100% - 28px, var(--container)); } .navbar { min-height:86px; } .logo img { width:196px; } .nav-toggle { display:inline-flex; } .nav-links { position:absolute; left:14px; right:14px; top:82px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow: var(--shadow); } .nav-links.open { display:flex; } .nav-links a { justify-content:center; padding:13px 12px; } .hero-grid { padding: 58px 0 56px; gap: 34px; } h1 { font-size: clamp(38px, 12vw, 58px); } .hero-actions { align-items:stretch; } .btn { width:100%; } .hero-visual { min-height: 340px; } .competence-grid { grid-template-columns:1fr; } .stats-card, .float-card { position: relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; margin-top:14px; } section { padding: 68px 0; } .service-grid, .steps, .form-grid { grid-template-columns:1fr; } .form-field.full { grid-column:auto; } .contact-card, .form-card, .about-card { padding: 22px; } .copyright { flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* --- Aktualizacja 2026: nowe logo PNG + optymalizacja mobile --- */
.logo { flex: 0 0 auto; }
.logo img {
  width: clamp(188px, 22vw, 252px);
  height: auto;
  max-height: 86px;
  object-fit: contain;
  image-rendering: auto;
}
.footer-logo {
  width: 226px;
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
  filter: none;
  opacity: 1;
  background: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.navbar { position: relative; }
.hero, .portfolio-hero, .methodology { isolation: isolate; }
.btn, .nav-toggle, .nav-links a { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1180px) {
  .navbar { min-height: 92px; }
  .nav-links a { font-size: 12px; padding-inline: 9px; }
}

@media (max-width: 1120px) {
  .navbar { min-height: 90px; }
  .logo img { width: clamp(180px, 32vw, 230px); max-height: 76px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
  .nav-links {
    position:absolute;
    left: 20px;
    right: 20px;
    top: calc(100% + 10px);
    z-index: 80;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    padding: 12px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display:flex; }
  .nav-links a { justify-content:center; padding:13px 12px; font-size:13px; }
}

@media (max-width: 1060px) {
  .hero-grid,
  .about-grid,
  .contact-grid,
  .footer-grid,
  .portfolio-hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-panel { max-width: 720px; width: 100%; }
  .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-links { justify-content:flex-start; }
}

@media (max-width: 780px) {
  :root { --radius: 20px; --radius-sm: 14px; }
  body { line-height: 1.55; }
  .container { width:min(100% - 28px, var(--container)); }
  .site-header { position: sticky; }
  .navbar { min-height:78px; gap: 12px; }
  .logo img { width: 190px; max-height: 64px; }
  .nav-toggle { display:inline-flex; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
  .nav-links { left:14px; right:14px; top: calc(100% + 8px); border-radius: 18px; max-height: calc(100vh - 96px); overflow:auto; -webkit-overflow-scrolling: touch; }
  .nav-links a { justify-content:center; padding:12px; font-size:12.5px; }
  .hero-grid { padding: 54px 0 52px; gap: 28px; }
  .hero::before { background-size: 42px 42px, 42px 42px, cover; opacity: .42; }
  h1 { font-size: clamp(36px, 11vw, 54px); line-height: 1.04; letter-spacing: -.045em; }
  h2 { font-size: clamp(28px, 8vw, 40px); }
  .lead, .section-text { font-size: 17px; }
  .eyebrow { font-size: 11px; padding: 8px 11px; max-width: 100%; }
  .hero-actions { align-items:stretch; margin-top: 24px; }
  .btn { width:100%; min-height: 48px; padding: 12px 18px; }
  .trust-row { gap: 8px; margin-top: 24px; }
  .trust-pill { font-size: 12px; padding: 7px 9px; }
  .hero-panel { padding: 16px; border-radius: 24px; }
  .competence-grid { grid-template-columns:1fr; gap: 12px; }
  .competence-tile { min-height: 88px; padding: 15px; }
  .competence-tile span { width: 36px; height: 36px; font-size: 14px; }
  .competence-tile strong { margin-top: 10px; font-size: 16px; }
  section { padding: 62px 0; }
  .section-head { margin-bottom: 32px; text-align: left; }
  .service-grid, .steps, .form-grid { grid-template-columns:1fr; }
  .service-card { padding: 22px; }
  .form-field.full { grid-column:auto; }
  .contact-card, .form-card, .about-card, .portfolio-summary-card { padding: 22px; }
  .footer-grid { gap: 24px; }
  .footer-logo { width: 210px; }
  .copyright { flex-direction:column; }
  .portfolio-hero { padding: 56px 0; }
  .pdf-frame { height: 560px; }
}

@media (max-width: 520px) {
  .container { width:min(100% - 24px, var(--container)); }
  .navbar { min-height: 72px; }
  .logo img { width: 168px; max-height: 58px; }
  .nav-toggle { min-height: 40px; padding: 8px 10px; }
  .hero-grid { padding: 42px 0 46px; }
  h1 { font-size: clamp(32px, 12.2vw, 44px); }
  .lead { font-size: 16px; }
  .hero-panel { padding: 12px; }
  .competence-tile { min-height: 82px; }
  .about-list li { padding: 12px; }
  .service-card { border-radius: 18px; padding: 20px; }
  .icon { width: 52px; height: 52px; }
  .icon img { width: 29px; height: 29px; }
  .contact-card, .form-card, .about-card, .portfolio-summary-card { border-radius: 18px; padding: 20px; }
  .pdf-toolbar { margin-top: 0; }
  .pdf-toolbar .btn { width: 100%; }
  .pdf-frame { height: 460px; }
}

/* Czytelność hero po testach podglądu: delikatniejsza siatka, bez ciężkiego overlay na tekście. */
.hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 58px 58px, 58px 58px;
  background-position: center, center;
  opacity: .42;
}
@media (max-width: 780px) {
  .hero::before { background-size: 42px 42px, 42px 42px; opacity: .34; }
}


/* --- Aktualizacja formularza reCAPTCHA v2 + mobile --- */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.recaptcha-field {
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 2px;
}
.recaptcha-field .g-recaptcha {
  max-width: 100%;
  transform-origin: left top;
}
.field-help {
  margin: 4px 0 0;
  color: #5A6878;
  font-size: 12px;
  line-height: 1.45;
}
.form-card {
  overflow: hidden;
}

@media (max-width: 420px) {
  .recaptcha-field .g-recaptcha {
    transform: scale(.88);
    margin-bottom: -10px;
  }
}
@media (max-width: 360px) {
  .recaptcha-field .g-recaptcha {
    transform: scale(.78);
    margin-bottom: -18px;
  }
}