/* ============================================================
   Codeit4us — site styles (all pages)
   Brand system taken from codeit4us.com:
   teal #127689 / deep #045F70 / darkest #022A30 / light #4EB2C5
   pale #DEF0F3 / tint #F5F9FA — orange #F15025 for CTA only
   fonts: Poppins (display), Onest (body) — self-hosted, see fonts.css
   ============================================================ */

:root {
  --teal: #127689;
  --teal-deep: #045f70;
  --teal-ink: #022a30;
  --teal-light: #4eb2c5;
  --teal-pale: #def0f3;
  --teal-tint: #f5f9fa;
  /* bluer accent (matches the "4US" logo blue) for trust badges & checks —
     keeps them from reading green like the darker teal does */
  --accent-blue: #0c6f9c;
  --cta: #e0491f;
  --cta-dark: #c23d15;
  --ink: #2b3338;
  --muted: #5f6b73;
  --line: #e7eaec;
  --bg: #ffffff;
  --card: #ffffff;
  --radius: 20px;
  --radius-sm: 10px;
  --pill: 99px;
  --shadow: 0 1px 2px rgba(4, 95, 112, .05), 0 4px 12px rgba(4, 95, 112, .05), 0 12px 32px rgba(4, 95, 112, .07);
  --shadow-lg: 0 2px 4px rgba(4, 95, 112, .05), 0 12px 28px rgba(4, 95, 112, .09), 0 32px 72px rgba(4, 95, 112, .13);
  --container: 1140px;
  --body-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display-font: "Poppins", var(--body-font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display-font); line-height: 1.14; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
svg { display: block; }

::selection { background: var(--teal-pale); color: var(--teal-ink); }

:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.muted { color: var(--muted); }

/* Inline SVG icon defaults */
.icon { width: 1.1em; height: 1.1em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Accessible skip link */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--teal-ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px;
  font-family: var(--display-font); font-size: .9rem; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Anchor offset below the sticky header */
section[id], main[id] { scroll-margin-top: 88px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 600; font-family: var(--display-font);
  padding: 12px 26px; border-radius: var(--pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
  font-size: .95rem; white-space: nowrap; letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }
.btn-cta { background: var(--cta); color: #fff; border-color: var(--cta); box-shadow: 0 3px 10px rgba(2, 42, 48, .12), 0 10px 24px rgba(2, 42, 48, .10); }
/* calm hover: just darken, no lift, no shadow flare */
.btn-cta:hover { background: var(--cta-dark); border-color: var(--cta-dark); }
.btn-outline { background: transparent; color: var(--cta); border-color: var(--cta); }
/* outline stays a distinct secondary — subtle wash, never fills into the primary */
.btn-outline:hover { background: rgba(224, 73, 31, .08); color: var(--cta-dark); border-color: var(--cta-dark); }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-lg { padding: 12px 22px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, color .25s ease;
}
.site-header.scrolled { border-color: var(--line); background: rgba(255, 255, 255, .96); box-shadow: 0 4px 24px rgba(4, 95, 112, .07); }

/* Subpages with full-bleed photo heroes: fixed transparent header over the image (like live),
   then solid white once scrolled past the hero — always fixed to avoid position jump */
.has-page-hero .site-header {
  position: fixed; left: 0; right: 0; top: 0;
}
.has-page-hero .site-header:not(.scrolled) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border-bottom-color: transparent;
}
.has-page-hero .site-header:not(.scrolled) .nav > a:not(.btn) { color: #fff; }
.has-page-hero .site-header:not(.scrolled) .nav > a.active:not(.btn) { color: #fff; }
.has-page-hero .site-header:not(.scrolled) .nav-toggle span { background: #fff; }
/* ghost nav CTA turns white outline over the photo hero (matches the hero's secondary btn) */
.has-page-hero .site-header:not(.scrolled) .nav-cta { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.has-page-hero .site-header:not(.scrolled) .nav-cta:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); }
.has-page-hero .site-header:not(.scrolled) .lang-switch {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
}
.has-page-hero .site-header:not(.scrolled) .lang-switch .lang { color: rgba(255, 255, 255, .75); }
.has-page-hero .site-header:not(.scrolled) .lang-switch .lang:not(.active):hover {
  color: #fff; background: rgba(255, 255, 255, .14);
}
.has-page-hero .site-header:not(.scrolled) .lang-switch .lang.active {
  background: rgba(255, 255, 255, .22); color: #fff;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; }
.logo { align-self: flex-start; position: relative; z-index: 2; display: inline-flex; }

/* Logo tile — white logo on a teal tile hanging from the top, rounded bottom
   like the original; once scrolled it shrinks to the header's full height
   (88px bar + 1px divider) so no seam shows below it */
.logo-tile {
  background: var(--teal);
  height: 108px; padding: 0 24px;
  display: grid; place-items: center;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 26px rgba(4, 95, 112, .18);
  transition: height .25s ease, border-radius .25s ease, box-shadow .2s ease;
}
.logo-tile img { display: block; width: 96px; height: auto; }
/* scrolled: flat rectangle flush with the header — a delicate shadow on its
   right/bottom edges so it doesn't melt into the white header bar */
.site-header.scrolled .logo-tile { height: 89px; border-radius: 0; box-shadow: 2px 3px 10px rgba(4, 95, 112, .13); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav > a:not(.btn) {
  font-weight: 500; font-size: 1rem; color: var(--teal-deep); position: relative;
  letter-spacing: -0.005em; font-family: var(--display-font);
  padding: 4px 0;
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--cta); transition: width .2s ease;
}
.nav > a:not(.btn):hover::after, .nav > a.active:not(.btn)::after { width: 100%; }
.nav > a.active:not(.btn) { color: var(--teal-deep); }
.nav-cta { margin-left: 6px; font-size: .92rem; padding: 9px 20px; }

/* Language switcher — segmented pill with round inline-SVG flags + code.
   Inactive flag is dimmed; active segment fills teal with a soft ring on the flag. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--pill); padding: 4px;
  background: #fff;
}
.lang-switch .lang {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; border-radius: var(--pill);
  font-family: var(--display-font); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; color: var(--muted); padding: 5px 12px 5px 6px;
  transition: background .2s ease, color .2s ease;
}
.lang-switch .flag {
  width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(2, 42, 48, .12);
  opacity: .6; filter: saturate(.85); transition: opacity .2s ease, box-shadow .2s ease, filter .2s ease;
}
.lang-switch .flag svg { width: 100%; height: 100%; display: block; }
/* active = tile teal (#127689, the lead brand colour) with white text */
.lang-switch .lang.active { background: var(--teal); color: #fff; font-weight: 700; }
.lang-switch .lang.active .flag { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.lang-switch .lang:not(.active):hover { color: var(--teal-deep); background: var(--teal-tint); }
.lang-switch .lang:not(.active):hover .flag { opacity: 1; filter: none; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--teal-deep); border-radius: 2px; transition: .25s; }

/* ---------- Hero ---------- */
/* subtly tinted backdrop (not pure white) so the white card frame reads
   against it — including through the transparent photo window */
.hero {
  padding: 30px 0 0; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f8fbfc 0%, #eef5f7 100%);
  /* fill to the bottom of the first viewport so the tint covers the marquee too */
  min-height: calc(100vh - 88px);
}
/* Brilliant diamond backdrop behind the specialist photo — discreet icy
   watermark: washed-out render, radial feather, slow float + sparkles. */
.hero-gem {
  position: absolute; top: 280px; left: 50%; transform: translate(-50%, -50%);
  z-index: 0; width: 780px; pointer-events: none;
  animation: gem-float 10s ease-in-out infinite;
}
.hero-gem img {
  width: 100%; height: auto; display: block; opacity: .24;
  filter: saturate(.7) contrast(.48) brightness(1.46);
  -webkit-mask-image: radial-gradient(closest-side, #000 56%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 56%, transparent 92%);
  animation: gem-sway 26s ease-in-out infinite;
}
/* travelling glint — a barely-there soft light breath gliding across the facets */
.hero-gem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 86%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 86%);
  background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .22) 43%, rgba(255, 255, 255, .46) 50%, rgba(255, 255, 255, .22) 57%, transparent 72%);
  background-size: 240% 100%; background-repeat: no-repeat;
  will-change: background-position;
  animation: gem-shine 15s ease-in-out infinite;
}
/* twinkling sparkles removed — they read as kitsch; keep the gem an elegant watermark */
.gem-sparks { display: none; }
.gspark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gspark.g1 { animation: gem-twinkle 3.8s ease-in-out infinite; }
.gspark.g2 { animation: gem-twinkle 4.4s ease-in-out 1.3s infinite; }
.gspark.g3 { animation: gem-twinkle 5s ease-in-out 2.6s infinite; }
@keyframes gem-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } }
@keyframes gem-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes gem-shine { 0% { background-position: 145% 0; } 65%, 100% { background-position: -45% 0; } }
@keyframes gem-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45%, 55% { opacity: .8; transform: scale(1) rotate(18deg); } }
/* animated aurora backdrop — three soft blobs slowly drifting (Stripe-style, but subtle) */
.hero::after {
  content: ""; position: absolute; top: -10%; right: -12%; width: 75%; height: 110%;
  background:
    radial-gradient(38% 45% at 70% 30%, rgba(78, 178, 197, .2), transparent 70%),
    radial-gradient(32% 40% at 88% 62%, rgba(222, 240, 243, .95), transparent 70%),
    radial-gradient(24% 30% at 52% 75%, rgba(224, 73, 31, .05), transparent 70%);
  filter: blur(46px);
  animation: aurora 18s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0; pointer-events: none;
}
@keyframes aurora {
  to { transform: translate3d(-5%, 4%, 0) scale(1.08) rotate(2deg); }
}
/* the visual column + its -24px right margin give the photo its full 560px,
   while the copy column keeps enough room for the CTAs to stay on one line */
.hero-grid { display: grid; grid-template-columns: 1fr 536px; gap: 32px; align-items: center; position: relative; z-index: 1; }

.hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.1rem); font-weight: 600; color: var(--teal); letter-spacing: -0.02em; }
.hero h1 .hl { color: var(--teal-deep); font-weight: 700; }
.lead { font-size: 1.05rem; color: var(--ink); margin: 14px 0 0; }
.lead-strong { font-weight: 700; color: var(--teal-ink); margin-top: 26px; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin: 30px 0 0; padding: 0; }
.hero-badges li { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); }
.tick {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--accent-blue); color: var(--accent-blue); background: transparent; flex: 0 0 auto;
}
.tick svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Specialist carousel (ghost photo + framed card, like the original) ---------- */
.hero-visual { position: relative; margin-right: -24px; }
.spec-carousel { position: relative; overflow: hidden; --sx: 0px; }
.spec-track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.spec-slide { flex: 0 0 100%; min-width: 0; position: relative; height: 666px; overflow: hidden; }

/* ONE photo, two copies in identical geometry (520px wide, centered, top 0):
   the bottom copy is washed out, the top copy is sharp and clipped exactly to
   the card's photo window — so the body continues seamlessly past the card */
.spec-ghost, .spec-sharp {
  position: absolute; left: calc(50% + var(--sx, 0px)); transform: translateX(-50%); top: 0;
  width: 560px; max-width: none; height: auto;
}
.spec-ghost {
  opacity: .5;
  filter: grayscale(1) contrast(.8) brightness(1.12);
  /* fades out at the bottom; a hair-thin side fade is only a safety net —
     the column is wide enough that the silhouette ends naturally */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, rgba(0, 0, 0, .5) 93%, transparent 100%);
  mask-image:
    linear-gradient(180deg, #000 0, #000 84%, rgba(0, 0, 0, .5) 93%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.spec-sharp {
  z-index: 0;
  clip-path: inset(58px 100px calc(100% - 396px) 100px);
  filter: grayscale(1) contrast(1.03);
  /* dissolve the gray studio floor that often sits at the bottom of the crop */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 96%);
}
.spec-sharp img { display: block; width: 100%; height: auto; }

/* tall card: white 10px frame with a TRANSPARENT photo window on top,
   solid white meta panel below — the page background shows through the window */
.spec-card {
  position: absolute; left: calc(50% + var(--sx, 0px)); transform: translateX(-50%); top: 48px;
  width: 380px; height: 600px; background: transparent; z-index: 1;
  box-shadow: 0 4px 10px rgba(2, 42, 48, .06), 0 24px 60px rgba(2, 42, 48, .16);
}
.spec-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 358px;
  border: 10px solid #fff;
}
.spec-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 358px; bottom: 0;
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 28%);
}

/* text/controls layer above the sharp photo */
.spec-overlay {
  position: absolute; left: calc(50% + var(--sx, 0px)); transform: translateX(-50%); top: 48px;
  width: 380px; height: 600px; z-index: 2; pointer-events: none;
}

/* bottom meta tile — hybrid: v1 structure + v2 polish */
.spec-meta {
  position: absolute; left: 0; right: 0; top: 358px; bottom: 0;
  z-index: 3;
  display: flex; flex-direction: column; gap: 0;
  padding: 16px 22px 18px;
  box-sizing: border-box;
}
.spec-example {
  margin: 0 0 8px;
  font-size: .6rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #a8b2b9; line-height: 1;
}
.spec-meta-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(4, 95, 112, .1);
}
.spec-name {
  position: static; margin: 0; z-index: 2;
  color: var(--teal-ink); font-family: var(--display-font); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -0.025em; line-height: 1.15;
  flex: 1 1 auto; min-width: 0;
}
.spec-loc {
  position: static; flex: 0 0 auto; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display-font); font-weight: 500; font-size: .7rem;
  color: #8a959d; letter-spacing: .01em; line-height: 1; white-space: nowrap;
}
.spec-loc-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal-light); flex: 0 0 auto;
  opacity: .85;
}
.spec-area {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  margin: 10px 0 0;
  color: var(--teal); font-size: .8rem; font-weight: 500; line-height: 1.2;
}
.spec-area strong { font-weight: 600; color: var(--teal-deep); }
.spec-area .icon {
  width: 14px; height: 14px; color: var(--teal-light); flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.spec-desc {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: 7px;
  margin: 6px 0 0; padding: 0;
  max-width: 58%;
  color: #7a868e; font-size: .78rem; line-height: 1.4;
  font-weight: 400;
}
.spec-desc .icon {
  width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto;
  color: var(--teal-light);
}

/* Europe map + country pin — quiet watermark behind copy */
.spec-map {
  position: absolute; right: -18px; bottom: 18px;
  width: 300px; height: 138px;
  z-index: 1;
  pointer-events: none;
}
.spec-map::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/map-europe-blue.png") center / contain no-repeat;
  opacity: .3;
  -webkit-mask-image: radial-gradient(115% 105% at 80% 65%, #000 28%, transparent 100%);
  mask-image: radial-gradient(115% 105% at 80% 65%, #000 28%, transparent 100%);
}
.spec-pin {
  position: absolute; left: var(--pin-x); top: var(--pin-y); z-index: 1;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #1683a9;
  box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(2, 42, 48, .28), 0 0 0 0 rgba(22, 131, 169, .5);
  animation: pin-pulse 2.2s ease-out infinite;
}
.spec-pin::after {
  content: ""; position: absolute; inset: -7px;
  border: 1.5px solid #1683a9; border-radius: 50%; opacity: .45;
}
.spec-map[data-country="pl"] { --pin-x: 58%; --pin-y: 48%; }
.spec-map[data-country="de"] { --pin-x: 48%; --pin-y: 46%; }
.spec-map[data-country="fr"] { --pin-x: 36%; --pin-y: 56%; }
.spec-map[data-country="it"] { --pin-x: 52%; --pin-y: 70%; }
.spec-map[data-country="es"] { --pin-x: 26%; --pin-y: 68%; }
.spec-map[data-country="pt"] { --pin-x: 20%; --pin-y: 70%; }
@keyframes pin-pulse {
  0% { box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(2, 42, 48, .28), 0 0 0 0 rgba(22, 131, 169, .5); }
  70% { box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(2, 42, 48, .28), 0 0 0 13px rgba(22, 131, 169, 0); }
  100% { box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(2, 42, 48, .28), 0 0 0 0 rgba(22, 131, 169, 0); }
}

/* white disc with a teal chevron, bottom-left of the card */
.spec-next {
  position: absolute; left: calc(50% + var(--sx, 0px) - 170px); bottom: 50px; z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--accent-blue); display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(2, 42, 48, .12), 0 16px 38px rgba(2, 42, 48, .18);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.spec-next svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spec-next:hover { background: var(--accent-blue); color: #fff; transform: scale(1.06); }

/* scroll hint — a rounded card anchored to the bottom-left of the screen.
   It rises up from the bottom edge while you're at the top of the page, then
   slides smoothly back down out of view as soon as you start scrolling. */
.scroll-hint {
  position: fixed; left: 20px; bottom: 0; z-index: 40;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--teal-light); color: #fff; font-family: var(--display-font);
  font-size: 1.05rem; font-weight: 500;
  padding: 24px 30px 24px 26px; border-radius: 26px 26px 0 0;
  box-shadow: 0 -4px 22px rgba(78, 178, 197, .3);
  transition: transform 1s cubic-bezier(.33, 1, .68, 1), opacity .8s ease, background .2s ease;
}
.scroll-hint:hover { background: var(--teal); }
.scroll-label { white-space: nowrap; }
/* hidden state: the whole card slides straight down past the bottom edge and fades */
.scroll-hint.tuck {
  transform: translateY(130%); opacity: 0; pointer-events: none;
}
/* the mouse itself: a tall white capsule outline drawn straight on the pill */
.scroll-mouse {
  width: 22px; height: 34px; color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
.scroll-mouse svg { width: 22px; height: 34px; stroke: currentColor; stroke-width: 2; fill: none; }
/* the wheel dot glides down inside the mouse and fades — a live "scroll" cue */
.scroll-wheel { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; animation: scroll-wheel 1.7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes scroll-wheel {
  0%   { transform: translateY(-3px); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateY(5px); opacity: 1; }
  85%, 100% { transform: translateY(7px); opacity: 0; }
}

/* ---------- Carousel dots (shared) ---------- */
.carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #d8dee1; transition: background .2s ease, transform .2s ease;
}
.carousel-dots button.active { background: var(--cta); transform: scale(1.25); }

/* ---------- Tech logo marquee ---------- */
.marquee {
  margin-top: -17px; padding: 30px 0; background: transparent;
  position: relative; z-index: 2;
}
.marquee-inner { display: flex; align-items: center; gap: 44px; }
.marquee-title {
  flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.45;
  font-family: var(--display-font); font-weight: 400; text-align: right;
}
.marquee-viewport { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 24px; width: max-content; animation: marquee 52s linear infinite; }
/* logos come in fairly strong — dampen the whole set uniformly (hover restores full colour) */
.marquee-track img { height: 96px; width: auto; flex: 0 0 auto; filter: grayscale(.3) opacity(.33); transition: filter .25s ease; }
.marquee-track img:hover { filter: grayscale(0) opacity(1); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; position: relative; }
.section-tight { padding: 64px 0; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.eyebrow {
  display: inline-block; background: var(--teal-pale); color: var(--teal-deep);
  border-radius: var(--pill); padding: 7px 18px; font-size: .85rem;
  font-weight: 500; margin-bottom: 18px; font-family: var(--display-font);
}
.section-head h2, .split-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 600; color: var(--teal-ink); letter-spacing: -0.02em; }
.section-head h2 strong, .split-head h2 strong { font-weight: 700; color: var(--teal); }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 16px auto 0; max-width: 56ch; }

/* ---------- Features + testimonial split (like the original) ---------- */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: stretch; }

.features-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px;
  padding: 44px 48px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.features-card .eyebrow { align-self: center; margin-bottom: 26px; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.f-cell { padding: 26px 30px; position: relative; }
.f-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.f-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.f-cell h3 { font-size: 1.35rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.f-cell h3 strong { color: var(--teal); font-weight: 700; }
.f-cell p { color: var(--muted); font-size: .93rem; margin: 10px 0 0; }

.results-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px;
  padding: 36px 34px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.results-card h2 { font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.results-card h2 strong { color: var(--teal); font-weight: 700; }
.case-list { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.case-item { padding-top: 16px; border-top: 1px solid var(--line); }
.case-item:first-child { padding-top: 0; border-top: 0; }
.case-item h3 { font-size: 1.05rem; font-weight: 600; color: var(--teal-deep); margin: 0 0 6px; }
.case-item p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
/* honest NDA note under the scenario list — quiet, not apologetic */
.case-note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.results-card .carousel-dots { justify-content: flex-start; padding: 8px 0 14px; }
.quote-viewport { overflow: hidden; flex: 1; }
.quote-track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); height: 100%; }
.quote { flex: 0 0 100%; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 20px; font-size: .95rem; color: var(--ink); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.q-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal-pale); }
.quote figcaption strong { display: block; font-family: var(--display-font); font-size: .95rem; color: var(--teal-deep); }
.quote figcaption small { color: var(--muted); font-size: .82rem; }

/* ---------- Tech stack ---------- */
#tech-stack { background: linear-gradient(180deg, #fff 0%, var(--teal-tint) 100%); }
/* compact horizontal strip: icon on the left, category + techs stacked right */
.stack-strip { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 22px 14px; margin-top: 6px; }
.stack-item { display: flex; align-items: center; gap: 11px; min-width: 0; }
.stack-ic { width: 42px; height: 42px; flex: 0 0 auto; }
.stack-item h3 { font-size: 1rem; font-weight: 600; color: var(--teal-deep); margin: 0 0 2px; letter-spacing: -0.015em; line-height: 1.15; white-space: nowrap; }
.stack-item p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.2; white-space: nowrap; }
.stack-more { text-align: center; margin-top: 34px; color: var(--muted); font-size: .95rem; }
.stack-more strong { color: var(--teal-deep); font-weight: 600; }
.stack-more a { color: var(--cta); font-weight: 600; }
.stack-more a:hover { text-decoration: underline; }

/* ---------- Process ---------- */
/* premium editorial timeline: hairline connector + nodes, big ghosted
   gradient numbers, no boxes — airy and high-end */
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 34px; position: relative; }
/* continuous hairline across the whole row, fading at both ends */
.process::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-light) 5%, var(--teal-light) 95%, transparent);
  transform: scaleX(0); transform-origin: left center;
}
/* draws in (animated) on enter; on leave it just resets to 0 instantly —
   the transition lives only on the drawn state, so you never see it "un-draw" */
.process.line-drawn::before { transform: scaleX(1); transition: transform 1.9s cubic-bezier(.42, 0, .58, 1); }
.process li { position: relative; padding: 34px 8px 0 0; }
/* node at the left of each step, sitting on the timeline */
.process li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; z-index: 2;
  border-radius: 50%; background: var(--card); border: 2px solid var(--teal-light); box-shadow: 0 0 0 3px var(--bg);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.process li:hover::before { background: var(--teal); border-color: var(--teal); transform: scale(1.25); }
.step-no {
  display: block; margin: 0 0 8px; font-family: var(--display-font); font-weight: 800;
  font-size: 3.1rem; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--teal-light), var(--teal-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: .4; transition: opacity .3s ease;
}
.process li:hover .step-no { opacity: 1; }
.process h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--teal-ink); font-weight: 600; letter-spacing: -.01em; }
.process p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.6; max-width: 26ch; }

/* ---------- Stats — dark band for rhythm and contrast ---------- */
.stats-section {
  background: linear-gradient(155deg, #06333c 0%, var(--teal-ink) 60%, #011d22 100%);
  position: relative; overflow: hidden;
}
.stats-section::before {
  content: ""; position: absolute; top: -180px; right: -120px; width: 520px; height: 520px;
  border: 60px solid rgba(78, 178, 197, .08); border-radius: 50%;
}
/* two-column: copy + stats on the left, live Europe talent-network map on the right */
.stats-layout { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
/* eyebrow on the dark stats section: solid bright teal pill so it clearly pops */
.eyebrow-light {
  background: var(--teal-light); color: var(--teal-ink); font-weight: 600;
}
.stats-copy h2 { color: #eaf4f6; font-weight: 500; font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: 1.28; letter-spacing: -0.02em; }
/* highlight the repeated "Właściw-"/"The right" — the triad's anaphora */
.stats-copy h2 .kw { color: var(--teal-light); font-weight: 700; }
.stats-copy h2 strong { color: var(--teal-light); }
.stats-lead { color: rgba(255, 255, 255, .66); margin: 20px 0 30px; max-width: 42ch; line-height: 1.65; }
/* stat sheet: number | label rows separated by hairline dividers */
.stats-figs { display: flex; flex-direction: column; max-width: 448px; }
.fig { position: relative; display: grid; grid-template-columns: 104px 1fr; align-items: center; column-gap: 22px; padding: 18px 0; }
/* teal gradient hairline between rows, fading out to the right */
.fig + .fig::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(120, 215, 232, .35), rgba(120, 215, 232, .1) 55%, transparent);
}
.stat-num {
  font-family: var(--display-font); font-weight: 700; text-align: right;
  font-size: clamp(2rem, 2.9vw, 2.6rem); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(120deg, #f0fafc 0%, var(--teal-light) 56%, #5cbdd0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--teal-light);
  filter: drop-shadow(0 3px 18px rgba(78, 178, 197, .4));
}
.stat-label { color: rgba(255, 255, 255, .66); font-size: .92rem; line-height: 1.4; }
.fig--solo { grid-template-columns: 1fr; }
.stat-label--solo { font-size: 1.05rem; color: rgba(255, 255, 255, .85); font-weight: 500; }

/* --- Europe talent-network map --- */
.euro-map { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 7 / 6; }
.euro-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .5; filter: brightness(1.7) saturate(1.15); }
.euro-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-base { fill: none; stroke: rgba(120, 215, 232, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arc-flow {
  fill: none; stroke: var(--teal-light); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 100; filter: drop-shadow(0 0 4px rgba(120, 215, 232, .9));
  animation: arc-flow 3.4s linear infinite;
}
@keyframes arc-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -102; } }
.node {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle, #eafaff 0%, var(--teal-light) 58%, #2f9fb6 100%);
  box-shadow: 0 0 11px 2px rgba(120, 215, 232, .6); z-index: 1;
}
.node::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: node-pulse 2.6s ease-out infinite; animation-delay: var(--pd, 0s);
}
.node.hub { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
@keyframes node-pulse {
  0% { box-shadow: 0 0 0 0 rgba(120, 215, 232, .5); }
  70% { box-shadow: 0 0 0 15px rgba(120, 215, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(120, 215, 232, 0); }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--teal), var(--teal-deep)); border-radius: 26px;
  padding: 52px 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; top: -120px; right: -60px; width: 320px; height: 320px;
  border: 44px solid rgba(255, 255, 255, .06); border-radius: 50%;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; position: relative; }
.cta-band p { color: rgba(255, 255, 255, .85); margin: 8px 0 0; position: relative; }
.cta-band .btn { position: relative; }

/* ---------- Contact ---------- */
.contact-section { background: linear-gradient(180deg, var(--teal-tint) 0%, var(--teal-pale) 100%); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 60px; align-items: center; }
.contact-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 600; color: var(--teal-ink); letter-spacing: -0.02em; }
.contact-copy h2 strong { color: var(--teal); font-weight: 700; }
.contact-copy > p { font-size: 1.06rem; max-width: 42ch; }
.contact-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.contact-list .ci {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(4, 95, 112, .12); color: var(--teal-deep); flex: 0 0 auto;
}
.contact-list .ci svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-list a { color: var(--teal-deep); font-weight: 600; }
.contact-list a:hover { text-decoration: underline; }
/* contact person — warm human trust element (avatar + reply promise) */
.contact-person { display: flex; align-items: center; gap: 15px; margin: 28px 0 6px; }
.contact-person picture { flex: 0 0 auto; line-height: 0; }
.contact-person img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: center; box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(4, 95, 112, .2); }
.contact-person strong { display: block; font-family: var(--display-font); font-weight: 600; font-size: 1.02rem; color: var(--teal-ink); }

.contact-form {
  position: relative;
  background: #fff; border: 1px solid rgba(4, 95, 112, .08); border-radius: 26px;
  padding: 40px 40px 36px; display: grid; gap: 20px;
  box-shadow: 0 1px 3px rgba(4, 95, 112, .04), 0 18px 40px rgba(4, 95, 112, .09), 0 44px 90px rgba(4, 95, 112, .10);
}
.form-header { display: grid; gap: 7px; margin-bottom: 2px; }
.form-header h3 { font-family: var(--display-font); font-weight: 600; font-size: 1.4rem; color: var(--teal-ink); margin: 0; letter-spacing: -.02em; }
.form-header p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.btn-arrow { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.btn-cta:hover .btn-arrow { transform: translateX(3px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--teal-deep); letter-spacing: .01em; }
.field input, .field textarea {
  font-family: var(--body-font); font-size: 1rem; padding: 15px 17px; border-radius: 14px;
  border: 1px solid rgba(4, 95, 112, .14); background: #f7fafb; color: var(--ink);
  resize: vertical; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa7ab; }
.field input:hover, .field textarea:hover { border-color: rgba(4, 95, 112, .28); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-pale); }
/* consent — refined custom checkbox, top-aligned for multi-line text */
.checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .88rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.checkbox input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px;
  border: 1.5px solid rgba(4, 95, 112, .3); background-color: #fff; cursor: pointer;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-origin: border-box;
  transition: border-color .18s ease, background-color .18s ease;
}
/* whole checked state (teal box + white tick) baked into one background SVG —
   renders reliably on <input> even where background-color/::after don't */
.checkbox input:checked {
  border-color: var(--teal); background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='6' fill='%23127689'/%3E%3Cpath d='M5.4 10.4l3 3 6.2-6.7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.checkbox input:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.checkbox a { color: var(--teal); font-weight: 600; border-bottom: 1px solid rgba(18, 118, 137, .35); transition: border-color .2s ease; }
.checkbox a:hover { border-bottom-color: var(--teal); }
.contact-form .btn-block { padding-top: 15px; padding-bottom: 15px; margin-top: 4px; font-size: .95rem; }
.form-note { margin: 0; font-size: .9rem; min-height: 1.2em; }
.form-note.ok { color: #157a43; }
.form-note.err { color: var(--cta-dark); }
/* honeypot — hidden from humans, tempting for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer — balanced three-column, premium dark ---------- */
.site-footer {
  background: radial-gradient(1100px 320px at 50% -120px, rgba(78, 178, 197, .12), transparent 70%), var(--teal-ink);
  color: rgba(255, 255, 255, .72); padding: 76px 0 30px;
}
.footer-inner {
  position: relative;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; align-items: start;
  padding-bottom: 40px;
}
/* soft gradient divider that fades at both ends (reliable vs. 1px border-image) */
.footer-inner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, .16) 78%, transparent);
}
.footer-brand img { width: 112px; height: auto; display: block; }
.footer-brand p { margin: 20px 0 0; font-size: .95rem; max-width: 32ch; line-height: 1.6; color: rgba(255, 255, 255, .64); }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-heading { font-family: var(--display-font); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-light); margin: 0 0 4px; }
.footer-contact-line { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: rgba(255, 255, 255, .82); font-weight: 500; font-size: .94rem; transition: color .2s ease; }
.footer-contact-line svg { width: 16px; height: 16px; stroke: var(--teal-light); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.footer-contact-line:hover { color: #fff; }
.footer-contact-line:hover svg { stroke: #fff; }
.footer-nav a { position: relative; width: fit-content; color: rgba(255, 255, 255, .72); font-size: .94rem; transition: color .2s ease; }
.footer-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--teal-light); transition: width .2s ease; }
.footer-nav a:hover { color: #fff; }
.footer-nav a:hover::after { width: 100%; }
.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social a {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.footer-social a:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 28px; flex-wrap: wrap; padding-top: 26px; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.footer-copy { padding-top: 1px; }
.footer-legal { display: flex; flex-direction: column; gap: 3px; text-align: right; font-style: normal; }
.footer-reg { font-size: .78rem; color: rgba(255, 255, 255, .38); letter-spacing: .01em; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--teal); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
}
.to-top svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--teal); color: #fff; }

/* ---------- Subpage hero ---------- */
/* Full first viewport — edge-to-edge photo under a transparent header (matches live screenshots) */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 0 72px;
  box-sizing: border-box;
  background-color: #042f38;
  background-image:
    linear-gradient(105deg, rgba(2, 28, 34, .9) 0%, rgba(4, 48, 58, .72) 38%, rgba(4, 95, 112, .35) 72%, rgba(4, 95, 112, .18) 100%),
    image-set(
      url("assets/hero-bg.webp") type("image/webp"),
      url("assets/hero-bg.jpg") type("image/jpeg")
    );
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}
.page-hero--about {
  background-image:
    linear-gradient(105deg, rgba(2, 26, 32, .88) 0%, rgba(3, 36, 44, .64) 34%, rgba(4, 52, 62, .3) 64%, rgba(4, 48, 58, .14) 100%),
    image-set(
      url("assets/hero-about.webp") type("image/webp"),
      url("assets/hero-about.jpg") type("image/jpeg")
    );
  background-position: center, right center;
}
.page-hero--companies {
  /* Extra height so .intro-teal’s -40px overlap sits below the first viewport */
  min-height: calc(100vh + 40px);
  min-height: calc(100dvh + 40px);
  background-image:
    linear-gradient(105deg, rgba(2, 26, 32, .88) 0%, rgba(3, 36, 44, .64) 34%, rgba(4, 52, 62, .3) 64%, rgba(4, 48, 58, .14) 100%),
    image-set(
      url("assets/hero-companies.webp") type("image/webp"),
      url("assets/hero-companies.jpg") type("image/jpeg")
    );
  background-position: center, right center;
}
.page-hero--specialists {
  /* Extra height so .intro-teal’s -40px overlap sits below the first viewport */
  min-height: calc(100vh + 40px);
  min-height: calc(100dvh + 40px);
  background-image:
    linear-gradient(105deg, rgba(2, 24, 36, .9) 0%, rgba(4, 40, 55, .72) 36%, rgba(6, 55, 75, .32) 68%, transparent 100%),
    image-set(
      url("assets/hero-specialists.webp") type("image/webp"),
      url("assets/hero-specialists.jpg") type("image/jpeg")
    );
  background-position: center, right center;
}
.page-hero--contact {
  text-align: center;
  align-items: flex-end;
  padding: 120px 0 56px;
  background-image:
    linear-gradient(105deg, rgba(2, 28, 36, .88) 0%, rgba(3, 38, 48, .68) 40%, rgba(4, 48, 58, .42) 70%, rgba(4, 44, 54, .22) 100%),
    image-set(
      url("assets/hero-contact.webp") type("image/webp"),
      url("assets/hero-contact.jpg") type("image/jpeg")
    );
  background-position: center, right center;
}
.page-hero--contact .lead { margin-left: auto; margin-right: auto; }
.page-hero--contact .eyebrow { margin-left: auto; margin-right: auto; }

/* scrim layers above the photo, below the copy (container is z-index:1):
   top band keeps the transparent header legible, bottom band anchors content,
   teal glow adds brand warmth */
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 18, 23, .5), transparent 160px),
    linear-gradient(0deg, rgba(1, 18, 23, .38), transparent 170px),
    radial-gradient(ellipse 50% 60% at 88% 40%, rgba(78, 178, 197, .16), transparent 70%);
}
/* contact: copy is centred, so add a soft radial mask behind it + stronger base */
.page-hero--contact::after {
  background:
    linear-gradient(180deg, rgba(1, 18, 23, .5), transparent 160px),
    linear-gradient(0deg, rgba(2, 22, 28, .55), transparent 240px),
    radial-gradient(ellipse 60% 55% at 50% 62%, rgba(2, 24, 30, .38), transparent 72%),
    radial-gradient(ellipse 55% 50% at 78% 42%, rgba(78, 178, 197, .12), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; width: 100%; }
.page-hero-copy { max-width: 34rem; }
.page-hero--contact .page-hero-copy { max-width: 42rem; margin: 0 auto; }
.page-hero .eyebrow { margin-bottom: 14px; background: rgba(255, 255, 255, .14); color: #fff; }
/* soft off-white + teal accent: colour (not weight) carries the emphasis,
   a faint shadow keeps lighter type legible over the photo */
.page-hero h1 { font-size: clamp(2.15rem, 4.6vw, 3.35rem); font-weight: 600; color: #e9f3f5; letter-spacing: -0.02em; line-height: 1.14; text-shadow: 0 2px 28px rgba(2, 20, 26, .45); }
.page-hero h1 strong { color: var(--teal-light); font-weight: 700; -webkit-text-fill-color: currentColor; background: none; }
.page-hero .lead { max-width: 38rem; font-size: 1.14rem; color: rgba(255, 255, 255, .82); margin: 18px 0 0; line-height: 1.55; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); }
.page-hero .btn-outline:hover { background: #fff; color: var(--teal-deep); border-color: #fff; box-shadow: none; }

/* prose blocks on subpages (philosophy / quality) */
.prose-block { max-width: 760px; margin: 0 auto; }
.prose-block h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--teal-ink); font-weight: 600; margin: 0 0 10px; }
.prose-block .subhead { color: var(--teal); font-weight: 600; font-size: 1.15rem; margin: 0 0 22px; }
.prose-block p { color: var(--muted); font-size: 1.05rem; margin: 0 0 16px; }
.prose-block p:last-child { margin-bottom: 0; }
/* teal intro panel — a rounded-top band rising over the hero, like the original */
.section.intro-teal {
  background: linear-gradient(160deg, var(--teal-light) 0%, var(--teal) 42%, var(--teal-deep) 100%);
  position: relative; overflow: hidden; z-index: 1;
  border-radius: 46px 46px 0 0; margin-top: -40px; padding-top: 84px;
  box-shadow: 0 -18px 44px rgba(2, 42, 48, .18);
}
.section.intro-teal::before {
  content: ""; position: absolute; top: -140px; right: -80px; width: 420px; height: 420px;
  border: 56px solid rgba(255, 255, 255, .06); border-radius: 50%; pointer-events: none;
}
.intro-teal .prose-block { position: relative; z-index: 1; }
.intro-teal .prose-block h2 { color: #fff; }
.intro-teal .prose-block .subhead { color: var(--teal-light); }
.intro-teal .prose-block p { color: rgba(255, 255, 255, .82); }

/* testimonial grid (CTO / freelancer quotes) */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 48px 28px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
/* soft decorative quotation mark */
.quote-card::before {
  content: "\201C"; position: absolute; top: 12px; right: 24px; z-index: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 4rem; line-height: 1;
  color: var(--teal-pale); pointer-events: none;
}
.quote-card--fact::before { content: none; }
.quote-card--fact { padding-top: 30px; }
.quote-card blockquote { position: relative; z-index: 1; margin: 0; color: var(--ink); font-size: .96rem; line-height: 1.62; flex: 1; }
.quote-card footer { position: relative; z-index: 1; color: var(--teal-deep); font-family: var(--display-font); font-weight: 600; font-size: .92rem; }
.quote-card footer span { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; margin-top: 2px; }

/* ---------- Benefit / feature cards (needs · why · roles on subpages) ---------- */
/* flex + centering so 3/4/6-card sections all wrap evenly and centre any orphan row */
.stack-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.stack-grid--3 .stack-card { flex: 1 1 260px; max-width: 340px; }
.stack-card {
  flex: 1 1 280px; max-width: 360px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.stack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.stack-icon-wrap {
  display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px;
  border-radius: 14px; background: var(--teal-pale); color: var(--teal-deep);
}
.stack-icon-wrap svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stack-card h3 { font-family: var(--display-font); color: var(--teal-ink); font-size: 1.18rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.stack-card p { color: var(--muted); font-size: .96rem; line-height: 1.6; margin: 0; }

/* ---------- Stats band (subpages · about) — premium dark ---------- */
.stats-section .section-head { margin-bottom: 46px; }
.stats-section .section-head h2 { color: #eef6f8; font-weight: 500; }
.stats-section .section-head h2 .kw,
.stats-section .section-head h2 strong { color: var(--teal-light); font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 900px; margin: 0 auto; }
.stats-grid .stat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 14px; padding: 10px 26px; position: relative;
}
/* elegant hairline dividers between stats */
.stats-grid .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(78, 178, 197, .38), transparent);
}
.stats-grid .stat-num {
  text-align: center; font-family: var(--display-font); font-weight: 800; line-height: 1;
  font-size: clamp(2.9rem, 5.4vw, 3.8rem); letter-spacing: -.03em;
  background: linear-gradient(150deg, #a6e3ee 0%, var(--teal-light) 48%, #2b93a8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 26px rgba(78, 178, 197, .32));
}
.stats-grid .stat-label { color: rgba(255, 255, 255, .74); font-size: .97rem; line-height: 1.45; letter-spacing: .01em; max-width: 22ch; }
.stat-map { width: 195px; max-width: 100%; height: auto; filter: brightness(1.7) saturate(1.15) drop-shadow(0 8px 26px rgba(78, 178, 197, .3)); }

/* numbered beliefs */
.beliefs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.beliefs li {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.beliefs li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.beliefs h3 { font-family: var(--display-font); color: var(--teal-ink); font-size: 1.18rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.beliefs p { color: var(--muted); margin: 0; font-size: .96rem; line-height: 1.6; }

/* leader / founder */
.leader {
  display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.leader:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.leader-photo {
  width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 16%;
  border: 4px solid var(--teal-pale); background: var(--teal-tint);
}
.team-photo { max-width: 860px; margin: 44px auto 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.team-photo img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.team-photo:hover img { transform: scale(1.03); }
.leader .role { color: var(--teal); font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
.leader h3 { color: var(--teal-ink); font-size: 1.4rem; margin: 0 0 12px; }
.leader p { color: var(--muted); margin: 0; }

/* open roles */
.job-list { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.job-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.job-card summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 26px; font-family: var(--display-font); font-weight: 600;
  color: var(--teal-ink); font-size: 1.05rem;
}
.job-card summary::-webkit-details-marker { display: none; }
.job-card summary::after {
  content: "Details"; flex: 0 0 auto; font-size: .82rem; font-weight: 600;
  color: var(--teal); background: var(--teal-pale); padding: 6px 14px; border-radius: var(--pill);
}
.job-card[open] summary::after { content: "Collapse"; }
:lang(pl) .job-card summary::after { content: "Szczegóły"; }
:lang(pl) .job-card[open] summary::after { content: "Zwiń"; }
.job-meta { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 26px 8px; }
.job-meta span {
  font-size: .82rem; color: var(--teal-deep); background: var(--teal-tint);
  border: 1px solid var(--teal-pale); padding: 4px 12px; border-radius: var(--pill);
}
.job-body { padding: 8px 26px 26px; color: var(--muted); font-size: .95rem; border-top: 1px solid var(--line); margin-top: 8px; }
.job-body h4 { color: var(--teal-deep); font-size: 1rem; margin: 18px 0 8px; }
.job-body ul { margin: 0; padding-left: 18px; }
.job-body li { margin: 4px 0; }
.job-body li::marker { color: var(--teal-light); }
.job-body .btn { margin-top: 18px; }
.job-list-empty { text-align: center; color: var(--muted); margin: 0; padding: 8px 0; }

/* form helpers — optional-field hint, file input, big success tick */
.optional { color: var(--muted); font-weight: 400; font-size: .85em; }
.contact-form input[type="file"] {
  width: 100%; font-family: var(--body-font); font-size: .92rem; color: var(--muted);
  padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--teal-tint); cursor: pointer;
}
.contact-form input[type="file"]::file-selector-button {
  font-family: var(--display-font); font-weight: 600; font-size: .85rem; cursor: pointer;
  color: #fff; background: var(--teal); border: 0; border-radius: var(--pill);
  padding: 8px 16px; margin-right: 12px;
}
.contact-form input[type="file"]:hover { border-color: var(--teal-light); }
.tick-lg {
  width: 56px; height: 56px; border-width: 3px; margin-bottom: 20px;
}
.tick-lg svg { width: 28px; height: 28px; }

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 0 22px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--display-font);
  font-weight: 600; color: var(--teal-ink); font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-pale); color: var(--teal-deep);
  font-size: 1.2rem; line-height: 1; font-weight: 500;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--muted); padding-top: 0; border-top: 1px solid var(--line); padding-top: 14px; }

/* two-column info rows on subpages */
/* contact channels — modern, tappable icon cards that lift over the hero */
.channel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
  margin-top: -18px; position: relative; z-index: 2;
}
.channel-card {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 26px 24px; box-shadow: var(--shadow); color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.channel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-light); }
.channel-ic {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 14px; background: var(--teal-pale); color: var(--teal-deep);
}
.channel-ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.channel-label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.channel-value { font-family: var(--display-font); font-size: 1.16rem; font-weight: 600; color: var(--teal-ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.channel-hint { font-size: .88rem; color: var(--muted); }
.channel-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--teal); font-weight: 600; font-size: .88rem; }
.channel-map .channel-arrow { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.channel-card:hover .channel-arrow { transform: translateX(3px); }
/* preferred channel — subtle teal wash + solid icon + badge */
.channel-card--accent { background: linear-gradient(180deg, var(--teal-tint), #fff 62%); border-color: rgba(78, 178, 197, .5); }
.channel-card--accent .channel-ic { background: var(--teal); color: #fff; }
/* .channel-card gets .spotlight on desktop (.spotlight > * forces position:relative),
   so scope the badge to keep its absolute corner placement */
.channel-card .channel-badge {
  position: absolute; top: 15px; right: 15px; z-index: 2;
  background: var(--teal); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px;
}

/* prose page (privacy) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { color: var(--teal-deep); font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; }
.prose p, .prose li { color: var(--ink); }
.prose li::marker { color: var(--teal-light); }
.prose a { color: var(--teal); text-decoration: underline; }

/* 404 page */
.error-hero { min-height: 55vh; display: grid; place-items: center; text-align: center; padding: 80px 24px; }
.error-code {
  font-family: var(--display-font); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(5rem, 16vw, 9rem); line-height: 1; color: var(--teal-pale);
  -webkit-text-stroke: 2px var(--teal-light);
}
.error-hero h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--teal-ink); margin: 12px 0 10px; }
.error-hero p { color: var(--muted); margin: 0 0 28px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .lang-switch { display: none; }
}

@media (max-width: 960px) {
  /* layout */
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .lead { max-width: none; }
  .split { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .process::before { display: none; }
  .stack-strip { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 26px 28px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .channel-grid { margin-top: -12px; }
  .quote-grid, .beliefs { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 34px; }
  .stats-grid .stat + .stat::before { display: none; }
  .leader { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .leader-photo { width: 160px; height: 160px; }
  .marquee-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .marquee-title { max-width: none; text-align: center; }
  .page-hero { min-height: 100svh; padding: 108px 0 56px; }
  .page-hero--companies,
  .page-hero--specialists { min-height: calc(100svh + 40px); }
  .page-hero--contact { padding: 108px 0 40px; text-align: left; align-items: center; }
  .page-hero--contact .page-hero-copy { margin: 0; }
  .page-hero--contact .lead,
  .page-hero--contact .eyebrow { margin-left: 0; margin-right: 0; }
  .page-hero-copy { max-width: 28rem; }
  .page-hero--about,
  .page-hero--companies,
  .page-hero--specialists { background-position: center, 70% center; }
  /* narrow screens crop away the dark left zone, so text sits on the subject —
     strengthen the veil to keep copy readable (replaces the desktop glow) */
  .page-hero::after,
  .page-hero--contact::after {
    background:
      linear-gradient(180deg, rgba(2, 22, 28, .62) 0%, rgba(2, 26, 32, .38) 40%, rgba(2, 24, 30, .56) 100%);
  }

  /* hero visual back to centered in single-column layout */
  .hero-visual { margin-right: 0; }
  .spec-carousel { --sx: 0px; }

  /* nav collapses to hamburger early enough that links never wrap */
  .nav {
    position: fixed; inset: 88px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 4px; background: #fff; border-bottom: 1px solid var(--line); padding: 16px 24px 24px;
    transform: translateY(-140%); transition: transform .3s ease; box-shadow: var(--shadow-lg); z-index: 45;
  }
  .nav.open { transform: translateY(0); }
  .nav > a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 12px 0 0; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* open mobile menu sits on white panel — keep teal link color even over photo heroes */
  .has-page-hero .site-header:not(.scrolled) .nav > a:not(.btn) { color: var(--teal-deep); }
  /* ...and the ghost CTA back to orange outline on that white panel */
  .has-page-hero .site-header:not(.scrolled) .nav-cta { color: var(--cta); border-color: var(--cta); background: transparent; }
}

@media (max-width: 680px) {
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-legal { text-align: left; align-items: flex-start; }
  .features-grid { grid-template-columns: 1fr; }
  .f-cell { border: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .f-cell:last-child { border-bottom: 0 !important; }
  .features-card { padding: 28px 22px; }
  .process { grid-template-columns: 1fr; }
  .stats-layout { grid-template-columns: 1fr; gap: 44px; }
  .stats-visual { order: -1; }
  .euro-map { max-width: 440px; }
  .stack-strip { grid-template-columns: repeat(2, 1fr); }
  .process { row-gap: 34px; }
  .section { padding: 60px 0; }
  .hero { padding-top: 44px; }
  .spec-slide { height: 640px; }
  .spec-ghost { display: none; }
  .spec-ghost, .spec-sharp { width: 440px; }
  .spec-sharp { clip-path: inset(36px 65px calc(100% - 354px) 65px); }
  .spec-card, .spec-overlay { width: 330px; height: 560px; top: 26px; }
  .spec-card::before { height: 338px; }
  .spec-card::after { top: 338px; }
  .spec-meta { top: 338px; padding: 14px 18px 16px; }
  .spec-example { font-size: .56rem; margin-bottom: 6px; }
  .spec-meta-head { padding-bottom: 8px; }
  .spec-name { font-size: 1.05rem; }
  .spec-area { font-size: .74rem; margin-top: 8px; }
  .spec-desc { font-size: .74rem; max-width: 58%; margin-top: 5px; }
  .spec-next { left: calc(50% - 145px); bottom: 72px; }
  .hero-gem { display: none; }
  .spec-map { width: 240px; height: 112px; }
  .scroll-hint { display: none; }
  .logo-tile, .site-header.scrolled .logo-tile {
    height: 72px; padding: 0 18px; border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 26px rgba(4, 95, 112, .18);
  }
  .logo-tile img { width: 78px; }
  .cta-band { padding: 36px 28px; }
  .marquee-track img { height: 72px; }
  .marquee-track { gap: 16px; }
  .to-top { right: 16px; bottom: 16px; }
  .page-hero--about,
  .page-hero--companies,
  .page-hero--specialists { background-position: center, 62% center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .process::before, .process.line-drawn::before { transform: none; transition: none; }
  .marquee-track { animation: none; }
  .spec-track, .quote-track { transition: none; }
  .scroll-wheel { animation: none; }
}

/* ============================================================
   Premium interaction layer
   ============================================================ */

/* --- Cross-page transitions (View Transitions API, progressive enhancement) --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .28s; }

/* --- Hero headline: masked line reveal (lines slide up from under a clip) --- */
.hero h1.headline-split { text-wrap: initial; }
.hero h1.headline-split .line { display: block; overflow: hidden; }
.hero h1.headline-split .line-inner {
  display: block; transform: translateY(112%);
  animation: line-up .85s cubic-bezier(.2, .65, .2, 1) forwards;
  animation-delay: var(--ld, 0s);
}
@keyframes line-up { to { transform: none; } }

/* --- Cursor spotlight on cards (Linear-style) --- */
.spotlight { position: relative; }
.spotlight::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(78, 178, 197, .14), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* --- CTA shine sweep --- */
.btn { position: relative; overflow: hidden; }
.btn-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); pointer-events: none; transition: left .55s ease;
}
.btn-cta:hover::after { left: 130%; }

/* --- Gradient ink on key accents --- */
.section-head h2 strong, .contact-copy h2 strong {
  background: linear-gradient(100deg, var(--teal-deep), var(--teal) 55%, var(--teal-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--teal);
}
.stats-copy h2 strong {
  background: linear-gradient(100deg, #bfe6ee, var(--teal-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--teal-light);
}

/* --- Film grain on dark surfaces (kills flat-gradient banding, adds texture) --- */
.stats-section::after, .cta-band::after, .site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}
.site-footer { position: relative; }
.site-footer > * { position: relative; }
.stats-section > .container, .cta-band > * { position: relative; z-index: 1; }

/* --- Back-to-top with scroll-progress ring --- */
.to-top::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--teal-light) calc(var(--sp, 0) * 1%), rgba(78, 178, 197, .15) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}

/* --- Quiet, branded scrollbar --- */
html { scrollbar-width: thin; scrollbar-color: rgba(18, 118, 137, .35) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(18, 118, 137, .3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(18, 118, 137, .5); border: 2px solid transparent; background-clip: padding-box; }

/* --- Small niceties --- */
body { -webkit-tap-highlight-color: transparent; accent-color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero-gem, .hero-gem img, .gspark, .spec-pin { animation: none; }
  .hero-gem::after { display: none; }
  .gspark { opacity: .5; }
  .hero h1.headline-split .line-inner { animation: none; transform: none; }
  .btn-cta::after { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}