/* Fonty hostowane lokalnie (Archivo, Geist, Geist Mono — SIL OFL 1.1).
   Archivo jest przycięty do WERSALIKÓW, cyfr i interpunkcji (używany tylko z text-transform:uppercase).
   Jeśli kiedyś potrzebne będą małe litery w Archivo, podmień pliki na pełne z Google Fonts. */
/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist · latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist · latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono · latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono · latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   CS Finanse — landing page
   Tokeny zgodne z „CS Finanse — Design system v1.0”
   ========================================================================== */

:root {
  /* marka */
  --cs-ink:#0A0A0A; --cs-graphite:#161616; --cs-line:#2A2A2A; --cs-mute:#8A8A85;
  --cs-stone:#B5B3AD; --cs-fog:#D6D4CE; --cs-paper:#F2F0EB;
  --cs-volt:#C6F432; --cs-volt-press:#B3DE22; --cs-danger:#FF5A4E;
  /* stopnie dla jasnej sekcji (.cs-light) */
  --cs-paper-line:#CFCDC6; --cs-ink-body:#2B2B2A; --cs-ink-secondary:#4A4A47; --cs-ink-muted:#5E5E5A;
  /* aliasy */
  --surface-page:var(--cs-ink); --surface-card:var(--cs-graphite); --surface-inverse:var(--cs-paper);
  --border-default:var(--cs-line); --border-strong:var(--cs-mute);
  --text-primary:var(--cs-paper); --text-body:var(--cs-fog); --text-secondary:var(--cs-stone);
  --text-muted:var(--cs-mute); --text-on-accent:var(--cs-ink); --text-placeholder:var(--cs-mute);
  --accent:var(--cs-volt); --accent-press:var(--cs-volt-press); --focus-ring:var(--cs-volt);
  /* typografia */
  --font-display:'Archivo',sans-serif; --font-display-stretch:125%;
  --font-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --text-body-l:20px; --text-body:18px; --text-body-s:15px; --text-label:13px;
  --leading-display:0.92; --leading-body:1.6; --tracking-label:0.14em;
  /* odstępy i kształt */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:104px; --space-7:160px;
  --control-height:56px; --control-height-s:44px; --container-max:1440px; --gutter:64px;
  --slash-angle:-24deg;
  /* ruch */
  --ease-out:cubic-bezier(.2,.7,.2,1); --duration-fast:140ms; --duration-base:240ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --duration-layout:380ms; --duration-enter:760ms; --stagger:60ms;
}

/* jasna sekcja — jedna na stronę */
.cs-light {
  --surface-page:var(--cs-paper); --border-default:var(--cs-paper-line); --border-strong:var(--cs-ink);
  --text-primary:var(--cs-ink); --text-body:var(--cs-ink-body); --text-secondary:var(--cs-ink-secondary); --text-muted:var(--cs-ink-muted);
  --focus-ring:var(--cs-ink); --accent:var(--cs-ink);
}

/* --------------------------------------------------------------------------
   Reset / baza
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }
body {
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin:0; }
ul, ol { padding:0; list-style:none; }
img, svg { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--text-primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
    transition:color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out); }
a:hover { text-decoration-color:var(--accent); }
:focus { outline:none; }
:focus-visible { outline:1px solid var(--focus-ring); outline-offset:4px; }
::selection { background:var(--cs-volt); color:var(--cs-ink); }

[hidden] { display:none !important; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-100px; z-index:100; padding:12px 20px; background:var(--cs-volt); color:var(--cs-ink);
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; }
.skip-link:focus { top:16px; }

.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); }
@media (max-width: 1024px) { :root { --gutter:40px; } }
@media (max-width: 640px)  { :root { --gutter:24px; --space-6:72px; --space-7:104px; } }

/* --------------------------------------------------------------------------
   Typografia
   -------------------------------------------------------------------------- */
.display, .h2, .card-title {
  font-family:var(--font-display); font-stretch:var(--font-display-stretch);
  text-transform:uppercase; color:var(--text-primary); text-wrap:balance; overflow-wrap:break-word; hyphens:manual;
}
.display { font-weight:800; font-size:clamp(44px, 7.4vw, 112px); line-height:var(--leading-display); letter-spacing:-0.025em; }
.h2 { font-weight:700; font-size:clamp(30px, 4vw, 48px); line-height:1.05; letter-spacing:-0.01em; }
.card-title { font-weight:700; font-size:24px; line-height:1.1; }
.h3 { font-size:22px; font-weight:600; line-height:1.25; color:var(--text-primary); }
.lead { font-size:var(--text-body-l); line-height:1.55; color:var(--text-body); max-width:640px; text-wrap:pretty; }
.text-s { font-size:var(--text-body-s); line-height:1.55; color:var(--text-secondary); }
.label { font-family:var(--font-mono); font-weight:500; font-size:var(--text-label); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); }
.hl { color:var(--accent); }
p { text-wrap:pretty; }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo { display:inline-flex; flex-direction:column; gap:8px; color:var(--text-primary); text-decoration:none; }
.logo__mark { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-display); font-stretch:125%; font-weight:900;
  font-size:22px; line-height:1; letter-spacing:-0.02em; }
.logo__slash { display:block; width:5px; height:42px; margin:0 3px; background:var(--cs-volt); transform:skewX(var(--slash-angle)) translateY(-5.5px); }
.logo__endorse { font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; color:var(--cs-mute); }

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; height:var(--control-height); padding:0 28px;
  font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:0; cursor:pointer; white-space:nowrap;
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.btn svg { width:16px; height:16px; flex:none; }
.btn--primary { background:var(--cs-volt); color:var(--cs-ink); }
.btn--primary:hover { background:var(--cs-paper); color:var(--cs-ink); }
.btn--primary:active { background:var(--cs-volt-press); }
.btn--secondary { border-color:var(--text-primary); color:var(--text-primary); font-weight:500; background:transparent; }
.btn--secondary:hover { background:var(--text-primary); color:var(--surface-page); }
.btn--s { height:var(--control-height-s); padding:0 20px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.4; pointer-events:none; }

.link-arrow { display:inline-flex; align-items:center; gap:10px; height:var(--control-height); border-bottom:1px solid var(--border-strong);
  color:var(--text-primary); text-decoration:none; font-family:var(--font-mono); font-weight:500; font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  transition:border-color var(--duration-fast) var(--ease-out); }
.link-arrow svg { width:16px; height:16px; }
.link-arrow:hover { border-bottom-color:var(--cs-volt); }
.cs-light .link-arrow:hover { border-bottom-color:var(--cs-ink); }

/* --------------------------------------------------------------------------
   Tag i etykieta sekcji
   -------------------------------------------------------------------------- */
.tag { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--border-default);
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-body); }
.tag__dot { width:8px; height:8px; border-radius:50%; background:var(--cs-volt); }
.section-label { display:inline-flex; align-items:center; gap:14px; font-family:var(--font-mono); font-weight:500; font-size:13px;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); }
.section-label__slash { display:block; width:4px; height:22px; background:var(--accent); transform:skewX(var(--slash-angle)) translateY(-3px); }
.section-label__num { color:var(--text-primary); }
/* --------------------------------------------------------------------------
   Nagłówek
   -------------------------------------------------------------------------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--cs-ink); border-bottom:1px solid var(--cs-line); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; height:80px; }
.site-header .logo__mark { font-size:20px; }
.site-header .logo__slash { height:38px; width:4.5px; transform:skewX(var(--slash-angle)) translateY(-5px); }
.nav { display:flex; align-items:center; gap:36px; }
.nav__list { display:flex; gap:28px; }
.nav__link { font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cs-stone); text-decoration:none; }
.nav__link:hover, .nav__link[aria-current="true"] { color:var(--cs-paper); }
.nav-toggle { display:none; background:none; border:0; padding:12px 0; cursor:pointer; font-family:var(--font-mono); font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--cs-paper); }

@media (max-width: 960px) {
  .nav-toggle { display:block; }
  .nav { position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--cs-ink);
    border-bottom:1px solid var(--cs-line); padding:8px var(--gutter) 32px; display:none; max-height:calc(100dvh - 80px); overflow:auto; }
  .nav.is-open { display:flex; }
  .nav__list { flex-direction:column; gap:0; }
  .nav__link { display:block; padding:20px 0; border-bottom:1px solid var(--cs-line); font-size:15px; }
  .nav .btn { margin-top:24px; height:var(--control-height); }
}

/* --------------------------------------------------------------------------
   Sekcje
   -------------------------------------------------------------------------- */
.section { padding:var(--space-6) 0 0; }
.section:last-of-type { padding-bottom:var(--space-7); }
.section__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4) var(--space-5); align-items:end; margin-bottom:var(--space-5); }
.section__head .h2 { margin-top:24px; }
.section__head .lead { justify-self:end; font-size:18px; }
@media (max-width: 960px) { .section__head { grid-template-columns:minmax(0,1fr); gap:24px; } .section__head .lead { justify-self:start; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { border-bottom:1px solid var(--cs-line); }
.hero__top { position:relative; overflow:hidden; overflow:clip; }
.hero__inner { position:relative; z-index:1; padding-top:var(--space-6); padding-bottom:var(--space-6); display:flex; flex-direction:column; gap:40px; }
.hero__copy { display:flex; flex-direction:column; align-items:flex-start; gap:32px; max-width:1120px; }
.hero__title .line { display:block; }
.hero .display { font-size:clamp(34px, 6.6vw, 96px); }
.hero__ctas { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; }
.hero__slash-track { position:absolute; z-index:0; top:-2%; right:clamp(-40px, 4vw, 100px); width:clamp(64px, 8vw, 132px); height:104%; pointer-events:none; }
.hero__slash { position:absolute; inset:0; background:var(--cs-volt); transform:skewX(var(--slash-angle)); transform-origin:100% 50%; }
@media (max-width: 960px) { .hero__slash-track { right:-40px; width:56px; } }
@media (max-width: 640px) { .hero__slash-track { visibility:hidden; } }

.facts { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--cs-line); padding-top:1px; }
.facts::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--cs-line); transform-origin:left; }
.facts__item { background:var(--cs-ink); padding:28px var(--gutter) 28px 0; display:flex; flex-direction:column; gap:8px; }
.facts__item + .facts__item { padding-left:28px; }
.facts__value { font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:22px; line-height:1.1; text-transform:uppercase; color:var(--cs-paper); }
@media (max-width: 960px) {
  .facts { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .facts__item, .facts__item + .facts__item { padding:24px 20px 24px 0; }
  .facts__item:nth-child(even) { padding-left:20px; }
}
@media (max-width: 640px) { .facts__value { font-size:17px; overflow-wrap:anywhere; } .facts__item { min-width:0; } }

/* --------------------------------------------------------------------------
   Siatki kart
   -------------------------------------------------------------------------- */
.grid { display:grid; gap:1px; background:var(--border-default); border:1px solid var(--border-default); }
.grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width: 1100px) { .grid--4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .grid--4, .grid--2 { grid-template-columns:minmax(0,1fr); } }

.card { background:var(--surface-page); padding:32px; display:flex; flex-direction:column; gap:20px; min-height:260px;
  transition:background-color var(--duration-base) var(--ease-out); }
.card:hover { background:var(--cs-graphite); }
.card__num { font-family:var(--font-mono); font-size:13px; color:var(--cs-volt); }
.card p { font-size:16px; line-height:1.55; color:var(--text-secondary); }
.card__foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--border-default); font-family:var(--font-mono);
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }

.note { margin-top:24px; font-size:var(--text-body-s); color:var(--text-muted); max-width:760px; }

/* Dla kogo */
.audience { background:var(--surface-page); padding:40px; display:flex; flex-direction:column; gap:28px; transition:background-color var(--duration-base) var(--ease-out); }
.audience:hover { background:var(--cs-graphite); }
.audience__head { display:flex; flex-direction:column; gap:14px; }
.audience .card-title { font-size:clamp(24px, 2.4vw, 32px); }
@media (max-width: 640px) { .audience .card-title, .card-title { font-size:21px; } }
.plus-list { display:flex; flex-direction:column; border-top:1px solid var(--border-default); }
.plus-list li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; padding:18px 0; border-bottom:1px solid var(--border-default);
  font-size:17px; line-height:1.55; color:var(--text-body); }
.plus-list li::before { content:"+"; font-family:var(--font-mono); color:var(--cs-volt); }
.audience .link-arrow { align-self:flex-start; margin-top:auto; }
@media (max-width: 640px) { .audience { padding:28px 24px; } }

/* --------------------------------------------------------------------------
   Jasna sekcja — proces
   -------------------------------------------------------------------------- */
.process { margin-top:var(--space-6); padding:var(--space-6) 0; background:var(--surface-page); color:var(--text-body); }
.process .section__head { margin-bottom:var(--space-5); }
.step { background:var(--cs-paper); padding:32px; display:flex; flex-direction:column; gap:14px; min-height:240px; position:relative; }
.step::before { content:""; position:absolute; left:0; right:-1px; top:0; height:1px; background:var(--cs-ink); transform-origin:left; }
.step__num { font-family:var(--font-mono); font-size:13px; color:var(--text-muted); }
.step p { font-size:16px; line-height:1.55; color:var(--text-secondary); }
.process__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; }
.process__foot p { font-size:16px; color:var(--text-secondary); max-width:620px; }
.process .grid { border-top:0; }

/* --------------------------------------------------------------------------
   Grupa
   -------------------------------------------------------------------------- */
.group { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-5); align-items:start; }
.group__copy { display:flex; flex-direction:column; gap:24px; position:sticky; top:120px; }
.group__copy .h2 { margin-top:0; }
.group__copy p { font-size:18px; color:var(--text-body); }
.group__list { border-top:1px solid var(--cs-line); }
.company { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:8px 24px; align-items:baseline; padding:28px 20px; border-bottom:1px solid var(--cs-line); transition:background-color var(--duration-base) var(--ease-out); }
.company:hover { background:var(--cs-graphite); }
.company__num { font-family:var(--font-mono); font-size:13px; color:var(--cs-volt); }
.company__name { font-size:22px; font-weight:600; line-height:1.25; color:var(--cs-paper); }
.company__role { grid-column:2; font-size:16px; line-height:1.55; color:var(--cs-stone); }
.company__meta { grid-row:1; grid-column:3; }
a.company__meta { display:inline-block; padding-block:6px; margin-block:-6px; }
.company--self { background:var(--cs-graphite); }
@media (max-width: 960px) {
  .group { grid-template-columns:minmax(0,1fr); gap:40px; }
  .group__copy { position:static; }
  .company { grid-template-columns:36px minmax(0,1fr); padding:24px 12px; }
  .company__meta { grid-row:auto; grid-column:2; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-wrap { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-5); }
@media (max-width: 960px) { .faq-wrap { grid-template-columns:minmax(0,1fr); gap:40px; } }
.faq { border-top:1px solid var(--cs-line); }
.faq__item { border-bottom:1px solid var(--cs-line); }
.faq__q { list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:24px 0; cursor:pointer;
  font-size:20px; font-weight:600; line-height:1.3; color:var(--cs-paper); }
.faq__q::-webkit-details-marker { display:none; }
.faq__icon { position:relative; flex:none; width:14px; height:14px; align-self:center; color:var(--cs-mute); transition:color var(--duration-fast) var(--ease-out); }
.faq__icon::before, .faq__icon::after { content:""; position:absolute; left:0; top:6.5px; width:14px; height:1.5px; background:currentColor;
  transition:transform var(--duration-base) var(--ease-out-expo), opacity var(--duration-base) var(--ease-out); }
.faq__icon::after { transform:rotate(90deg); }
.faq__item[open] .faq__icon { color:var(--cs-volt); }
.faq__item[open] .faq__icon::after { transform:rotate(0deg); opacity:0; }
.faq__q:hover .faq__icon { color:var(--cs-paper); }
.faq__item[open] .faq__q:hover .faq__icon { color:var(--cs-volt); }
.faq__a { padding:0 48px 28px 0; font-size:17px; line-height:1.6; color:var(--cs-fog); display:flex; flex-direction:column; gap:12px; }
@media (max-width: 640px) { .faq__q { font-size:18px; } .faq__a { padding-right:0; } }

/* --------------------------------------------------------------------------
   Kontakt i formularz
   -------------------------------------------------------------------------- */
.contact { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-5); align-items:start; }
@media (max-width: 960px) { .contact { grid-template-columns:minmax(0,1fr); gap:56px; } }
.contact__aside { display:flex; flex-direction:column; gap:32px; }
.contact__aside .h2 { margin-top:24px; }
.contact__details { display:flex; flex-direction:column; border-top:1px solid var(--cs-line); }
.contact__details > div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--cs-line); font-size:16px; line-height:1.5; }
.contact__details dt { padding-top:3px; }
.contact__details dd { color:var(--cs-paper); min-width:0; overflow-wrap:anywhere; }
@media (max-width: 400px) { .contact__details > div { grid-template-columns:84px minmax(0,1fr); } }

.form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; }
.form__full { grid-column:1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns:minmax(0,1fr); gap:28px; } }
.field { display:flex; flex-direction:column; gap:10px; }
.field__label { font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--cs-mute); }
.field__label .opt { letter-spacing:0.08em; text-transform:none; color:var(--text-placeholder); }
.field__control { height:56px; width:100%; padding:0; border:0; border-bottom:1px solid var(--cs-mute); border-radius:0; background:transparent;
  font-size:18px; color:var(--cs-paper); -webkit-appearance:none; appearance:none; transition:border-color var(--duration-fast) var(--ease-out); }
.field__control::placeholder { color:var(--text-placeholder); opacity:1; }
.field__control:hover { border-bottom-color:var(--cs-stone); }
.field__control:focus { outline:none; border-bottom-color:var(--cs-volt); }
textarea.field__control { height:auto; min-height:128px; padding:16px 0; resize:vertical; line-height:1.55; }
select.field__control { cursor:pointer; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238A8A85' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; }
select.field__control option { background:var(--cs-graphite); color:var(--cs-paper); }
select.field__control:invalid { color:var(--text-placeholder); }
.field__error { display:none; font-size:14px; line-height:1.4; color:var(--cs-danger); }
.field.is-invalid .field__label { color:var(--cs-danger); }
.field.is-invalid .field__control { border-bottom-color:var(--cs-danger); }
.field.is-invalid .field__error { display:block; }

.check { display:grid; grid-template-columns:20px minmax(0,1fr); gap:14px; align-items:start; font-size:14px; line-height:1.55; color:var(--cs-stone); cursor:pointer; }
.check input { position:absolute; opacity:0; width:20px; height:20px; margin:0; }
.check__box { position:relative; width:20px; height:20px; margin-top:1px; border:1px solid var(--cs-mute); transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.check__box::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--cs-ink); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; }
.check input:checked + .check__box { background:var(--cs-volt); border-color:var(--cs-volt); }
.check input:checked + .check__box::after { opacity:1; }
.check input:focus-visible + .check__box { outline:1px solid var(--cs-volt); outline-offset:3px; }
.check.is-invalid .check__box { border-color:var(--cs-danger); }
.check.is-invalid + .field__error { display:block; margin:10px 0 0 34px; }

.form__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding-top:8px; }
.form__foot .text-s { font-size:14px; color:var(--cs-mute); max-width:420px; }
.form__status { grid-column:1 / -1; display:none; padding:20px 24px; border:1px solid var(--cs-line); font-size:16px; line-height:1.55; }
.form__status.is-visible { display:block; }
.form__status--error { border-color:var(--cs-danger); color:var(--cs-paper); }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.success { display:none; flex-direction:column; gap:24px; padding:40px; border:1px solid var(--cs-line); }
.success.is-visible { display:flex; }
.success .card-title { font-size:28px; }

/* --------------------------------------------------------------------------
   Stopka
   -------------------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--cs-line); padding:var(--space-5) 0 40px; }
.site-footer__grid { display:grid; grid-template-columns:minmax(0,4fr) repeat(3, minmax(0,2.6fr)); gap:40px; padding-bottom:var(--space-5); }
.site-footer h2 { margin-bottom:18px; }
.site-footer ul { display:flex; flex-direction:column; gap:10px; }
.site-footer li, .site-footer address { font-style:normal; font-size:15px; line-height:1.6; color:var(--cs-stone); }
.site-footer a { color:var(--cs-stone); text-decoration:none; display:inline-block; padding-block:4px; margin-block:-4px; }
.site-footer li a { padding-block:6px; margin-block:-6px; }
.site-footer a:hover { color:var(--cs-paper); }
.site-footer__claim { margin-top:24px; font-size:15px; color:var(--cs-stone); max-width:320px; }
.site-footer__bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 24px; padding-top:32px; border-top:1px solid var(--cs-line); }
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .site-footer__brand { grid-column:1 / -1; } }
@media (max-width: 560px)  { .site-footer__grid { grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   Podstrona prawna
   -------------------------------------------------------------------------- */
.legal { max-width:820px; padding-top:var(--space-6); padding-bottom:var(--space-7); }
.legal .display { font-size:clamp(36px, 5vw, 64px); margin:24px 0 40px; }
.legal h2 { font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:22px; line-height:1.2; text-transform:uppercase; color:var(--cs-paper); margin:56px 0 18px; }
.legal p, .legal li { font-size:17px; line-height:1.65; color:var(--cs-fog); }
.legal p + p { margin-top:14px; }
.legal ul { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.legal li { display:grid; grid-template-columns:24px minmax(0,1fr); }
.legal li::before { content:"+"; font-family:var(--font-mono); color:var(--cs-volt); }

/* poprawki */
.site-footer .logo, .site-footer .logo:hover { color:var(--cs-paper); }
@media (max-width: 640px) { .step, .card { min-height:0; } }

/* ==========================================================================
   RUCH
   Idea: „jedna linia w górę”. Wszystko, co się pojawia, wznosi się albo
   rysuje od lewej do prawej, jak linia trendu. Sygnaturą jest ukośnik w hero.
   Wejścia: ease-out-expo, 500–800 ms. Stany: 140–380 ms. Wyjścia ~75% wejść.
   Bez odbić, bez skalowania elementów interfejsu.
   Wszystko poniżej działa tylko przy prefers-reduced-motion: no-preference.
   Treść jest widoczna domyślnie; stan „przed wejściem” nakłada JS (klasa
   .is-pending) wyłącznie na grupy poniżej widocznego obszaru.
   ========================================================================== */

/* Mikrointerakcje — bezpieczne także przy ograniczonym ruchu (tylko kolor) */
.link-arrow { position:relative; }
.link-arrow::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--cs-volt);
  transform:scaleX(0); transform-origin:left; transition:transform var(--duration-layout) var(--ease-out-expo); }
.cs-light .link-arrow::after { background:var(--cs-ink); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform:scaleX(1); }
.link-arrow:hover { border-bottom-color:var(--border-strong); }
.btn svg, .link-arrow svg { transition:transform var(--duration-base) var(--ease-out-expo); }
.btn:hover svg, .link-arrow:hover svg { transform:translateX(4px); }

/* Pasek postępu czytania w nagłówku */
.site-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--cs-volt);
  transform:scaleX(0); transform-origin:left; pointer-events:none; }

/* Przycisk w trakcie wysyłki */
.btn.is-loading { position:relative; opacity:1; pointer-events:none; overflow:hidden; }
.btn.is-loading::after { content:""; position:absolute; left:0; bottom:0; width:40%; height:2px; background:var(--cs-ink); }

/* Znak sukcesu — ukośnik w kwadracie (sygnet) */
.success__mark { width:48px; height:48px; outline:1px solid var(--cs-line); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.success__mark span { display:block; width:9px; height:64px; background:var(--cs-volt); transform:skewX(var(--slash-angle)); }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- HERO: sygnaturowe wejście ---------- */
  /* 1) blok wolt wznosi się na całą szerokość hero, 2) zjeżdża w prawo i zwęża się do ukośnika z logo */
  .hero__slash { animation:slash-intro 1300ms 60ms both; }
  .hero__title .line { clip-path:inset(-0.35em -0.2em -0.18em -0.2em); }
  .hero__title .line__in { display:block; animation:line-rise 640ms var(--ease-out-expo) both; }
  .hero__title .line:nth-child(1) .line__in { animation-delay:var(--t-h1, 780ms); }
  .hero__title .line:nth-child(2) .line__in { animation-delay:calc(var(--t-h1, 780ms) + 90ms); }
  .hero__title .hl { animation:hl-on 420ms var(--ease-out) calc(var(--t-h1, 780ms) + 640ms) both; }
  .hero .tag      { animation:fade-rise 600ms var(--ease-out-expo) calc(var(--t-h1, 780ms) - 60ms) both; }
  .hero .lead     { animation:fade-rise 700ms var(--ease-out-expo) calc(var(--t-h1, 780ms) + 260ms) both; }
  .hero__ctas     { animation:fade-rise 700ms var(--ease-out-expo) calc(var(--t-h1, 780ms) + 340ms) both; }
  .facts::before  { animation:draw-x 1000ms var(--ease-out-expo) calc(var(--t-h1, 780ms) + 300ms) both; }
  .facts__item > * { animation:fade-rise 600ms var(--ease-out-expo) both; animation-delay:calc(var(--t-h1, 780ms) + 440ms + var(--i, 0) * var(--stagger)); }
  /* telefon: blok znika w prawo zamiast zostawać ukośnikiem (ukośnik zasłoniłby tekst) */
  @media (max-width: 640px) {
    .hero__slash-track { visibility:visible; right:0; width:40px; }
    .hero__slash { animation-name:slash-intro-out; }
  }

  /* Ukośnik unosi się przy przewijaniu hero (scroll-driven, bez JS) */
  @supports (animation-timeline: view()) {
    .hero__slash-track { animation:slash-drift linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; animation-duration:auto; }
    .site-header::after { animation:draw-x linear both; animation-timeline:scroll(root block); animation-duration:auto; }
  }

  /* Jasna sekcja rozszerza się do pełnej szerokości przy wejściu */
  @supports (animation-timeline: view()) {
    @media (min-width: 961px) {
      .process { animation:widen linear both; animation-timeline:view(); animation-range:cover 0% cover 30%; animation-duration:auto; }
    }
  }

  /* ---------- Wejścia grup przy przewijaniu (jednorazowe) ---------- */
  /* rise — karty oferty wznoszą się po kolei, linia stopki rysuje się */
  .motion [data-reveal="rise"].is-pending .card > * { opacity:0; transform:translateY(28px); }
  .motion [data-reveal="rise"].is-pending .card__foot { opacity:1; transform:none; clip-path:inset(0 100% 0 0); }
  [data-reveal="rise"].is-in .card > * { animation:fade-rise var(--duration-enter) var(--ease-out-expo) both; animation-delay:calc(var(--i, 0) * 90ms + var(--j, 0) * 50ms); }
  [data-reveal="rise"].is-in .card > :nth-child(2) { --j:1; }
  [data-reveal="rise"].is-in .card > :nth-child(3) { --j:2; }
  [data-reveal="rise"].is-in .card__foot { animation:wipe-x 800ms var(--ease-out-expo) both; animation-delay:calc(260ms + var(--i, 0) * 90ms); }

  /* list — punkty „+” pojawiają się jak pozycje na liście kontrolnej */
  .motion [data-reveal="list"].is-pending .plus-list li { opacity:0; transform:translateX(-12px); }
  [data-reveal="list"].is-in .plus-list li { animation:fade-in-x 560ms var(--ease-out-expo) both; animation-delay:calc(120ms + var(--i, 0) * 70ms); }

  /* seq — proces: linia rysuje się przez kolejne kroki, krok pojawia się, gdy linia do niego dotrze */
  .motion [data-reveal="seq"].is-pending .step::before { transform:scaleX(0); }
  .motion [data-reveal="seq"].is-pending .step > * { opacity:0; transform:translateY(16px); }
  [data-reveal="seq"].is-in .step::before { animation:draw-x 380ms cubic-bezier(.45,0,.55,1) both; animation-delay:calc(var(--i, 0) * 380ms); }
  [data-reveal="seq"].is-in .step > * { animation:fade-rise 600ms var(--ease-out-expo) both; animation-delay:calc(var(--i, 0) * 380ms + 160ms); }
  [data-reveal="seq"].is-in .step > :nth-child(2) { animation-delay:calc(var(--i, 0) * 380ms + 220ms); }
  [data-reveal="seq"].is-in .step > :nth-child(3) { animation-delay:calc(var(--i, 0) * 380ms + 280ms); }

  /* rows — spółki grupy */
  .motion [data-reveal="rows"].is-pending .company { opacity:0; transform:translateY(18px); }
  [data-reveal="rows"].is-in .company { animation:fade-rise 640ms var(--ease-out-expo) both; animation-delay:calc(var(--i, 0) * 70ms); }

  /* ---------- Stany ---------- */
  .field__error { animation:fade-drop 220ms var(--ease-out-expo) both; }
  .form.is-leaving { animation:fade-out 180ms var(--ease-out) both; }
  .success.is-visible > * { animation:fade-rise 640ms var(--ease-out-expo) both; }
  .success.is-visible > :nth-child(2) { animation-delay:260ms; }
  .success.is-visible > :nth-child(3) { animation-delay:320ms; }
  .success.is-visible > :nth-child(4) { animation-delay:380ms; }
  .success.is-visible .success__mark { animation:none; }
  .success.is-visible .success__mark span { animation:slash-rise 700ms var(--ease-out-expo) 80ms both; }
  .btn.is-loading::after { animation:loading-bar 1100ms var(--ease-out-quart) infinite; }

  /* Menu mobilne */
  .nav.is-open { animation:menu-in 320ms var(--ease-out-expo) both; }
  .nav.is-open .nav__list li, .nav.is-open .btn { animation:fade-rise 420ms var(--ease-out-expo) both; }
  .nav.is-open .nav__list li:nth-child(2) { animation-delay:30ms; }
  .nav.is-open .nav__list li:nth-child(3) { animation-delay:60ms; }
  .nav.is-open .nav__list li:nth-child(4) { animation-delay:90ms; }
  .nav.is-open .nav__list li:nth-child(5) { animation-delay:120ms; }
  .nav.is-open .btn { animation-delay:160ms; }
  .nav.is-closing { animation:menu-out 220ms var(--ease-out) both; }
  @media (min-width: 961px) { .nav.is-open, .nav.is-open .nav__list li, .nav.is-open .btn { animation:none; } }
}

@keyframes slash-intro {
  0%   { clip-path:inset(100% 0 0 0); transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:cubic-bezier(.25,1,.5,1); }
  32%  { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:linear; }
  38%  { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  100% { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(1); }
}
@keyframes slash-intro-out {
  0%   { clip-path:inset(100% 0 0 0); transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:cubic-bezier(.25,1,.5,1); }
  32%  { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:linear; }
  38%  { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(var(--slash-from, 12)); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  100% { clip-path:inset(0 0 0 0);    transform:skewX(var(--slash-angle)) scaleX(0); }
}
@keyframes slash-rise  { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes line-rise   { from { transform:translateY(160%); } to { transform:translateY(0); } }
@keyframes hl-on       { from { color:var(--cs-paper); } to { color:var(--cs-volt); } }
@keyframes fade-rise   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fade-in-x   { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes fade-drop   { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes fade-out    { to { opacity:0; } }
@keyframes draw-x      { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes wipe-x      { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes slash-drift { from { transform:translateY(0); } to { transform:translateY(-18%); } }
@keyframes widen       { from { clip-path:inset(0 var(--gutter)); } to { clip-path:inset(0 0); } }
@keyframes menu-in     { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes menu-out    { from { clip-path:inset(0 0 0 0); opacity:1; } to { clip-path:inset(0 0 100% 0); opacity:.6; } }
@keyframes loading-bar { from { transform:translateX(-100%); } to { transform:translateX(250%); } }