:root{ --ink:#0A0A0A; --paper:#FAF9F7; --mist:#F0F0F2; --signal:#EA580C; --signal-deep:#C2410C; --petrol:#14304A; --petrol-2:#1C4066; --line:rgba(10,10,10,.12); --line-strong:rgba(10,10,10,.22); --muted:rgba(10,10,10,.58); --paper-muted:rgba(250,249,247,.62); --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --maxw:1200px; --gutter:clamp(20px,5vw,64px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; /* NIE dodawaj tutaj `overflow-x: hidden`. Nagłówek jest `position: sticky`. Jakikolwiek `overflow` inny niż `visible` na czyni z niego kontener przewijania — a wtedy na iOS (Safari i Chrome, oba na WebKicie) sticky nagłówek jest przesuwany o wartość scrollY i szerokość strony rośnie proporcjonalnie do przewijania: kolumna wpisów „rozjeżdża się” poza ekran. Potwierdzone na urządzeniu — wyłączenie sticky usuwało objaw. Przycinanie i tak nie jest potrzebne: żaden element nie wystaje poza viewport (sprawdzone przy 320, 375 i 1440 px). Jeśli kiedyś coś zacznie wystawać — napraw ten element, nie zasłaniaj problemu overflow-em. */ } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ::selection{background:var(--signal);color:#fff} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* ---------- mono utility / eyebrow ---------- */ .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--signal); display:inline-flex; align-items:center; gap:.6em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--signal);display:inline-block} .eyebrow.on-dark{color:var(--signal)} /* ---------- buttons ---------- */ .btn{ font-family:var(--mono);font-size:.82rem;letter-spacing:.04em; display:inline-flex;align-items:center;gap:.7em; padding:.92em 1.5em;border:1px solid var(--ink); background:var(--ink);color:var(--paper);cursor:pointer; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; border-radius:0;position:relative;overflow:hidden; } .btn:hover{transform:translateY(-2px)} .btn .arr{transition:transform .25s ease} .btn:hover .arr{transform:translateX(4px)} .btn--signal{background:var(--signal);border-color:var(--signal);color:#fff} .btn--signal:hover{background:var(--signal-deep);border-color:var(--signal-deep)} /* shimmer sweep on signal buttons */ .btn--signal::after{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);transition:left .6s ease; } .btn--signal:hover::after{left:140%} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--paper)} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:50; background:rgba(250,249,247,.82);backdrop-filter:blur(12px); border-bottom:1px solid transparent;transition:border-color .3s ease, background .3s ease; } header.scrolled{border-color:var(--line);background:rgba(250,249,247,.94)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:1rem} .brand{display:flex;align-items:center;gap:.85em;line-height:1;min-width:0} /* real logo — trimmed, transparent-bg version generated from the source PNG */ .brand img.logo{height:30px;width:auto;flex:none} .brand .partner{font-family:var(--mono);font-size:.54rem;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:.85em} .brand .partner b{color:var(--signal);font-weight:500} .nav-links{display:flex;align-items:center;gap:2rem} .nav-links a{font-size:.92rem;color:var(--muted);transition:color .2s ease;position:relative} .nav-links a:hover{color:var(--ink)} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--signal);transition:width .25s ease} .nav-links a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:1rem} .nav-mobile-cta{display:none} .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .menu-toggle span{width:24px;height:2px;background:var(--ink);transition:transform .3s ease, opacity .3s ease} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- media (photo) component + fallback ---------- */ .media{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--petrol) 0%, #0d2136 70%, #081826 100%)} .media::before{ /* fallback texture grid, always present behind image */ content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(250,249,247,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(250,249,247,.05) 1px,transparent 1px); background-size:34px 34px; } .media-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.82); transition:transform 1.4s cubic-bezier(.16,1,.3,1);will-change:transform; } .media-img.failed{display:none} .media-tint{position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,48,74,.82),rgba(20,48,74,.45) 55%,rgba(234,88,12,.42));mix-blend-mode:multiply} .media-tint.lite{background:linear-gradient(120deg,rgba(20,48,74,.6),rgba(234,88,12,.3))} .media-cap{position:absolute;bottom:12px;right:14px;z-index:4;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--paper-muted)} .media-hud{position:absolute;inset:0;z-index:3;pointer-events:none} .media:hover .media-img{transform:scale(1.07)} /* ---------- hero ---------- */ .hero{position:relative;padding:clamp(48px,9vh,104px) 0 clamp(56px,8vh,96px);overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center} .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.02em;margin:1.1rem 0 0;max-width:16ch} .hero h1 .sent{display:block;text-wrap:balance} .hero h1 .accent{color:var(--signal)} .hero h1 .quiet{color:var(--muted);font-weight:400} .hero-sub{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted);max-width:46ch;margin-top:1.6rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem} .hero-meta{margin-top:2.6rem;display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.4rem} .hero-meta div{font-family:var(--mono);font-size:.78rem;color:var(--muted)} .hero-meta strong{display:block;font-family:var(--display);font-size:1.55rem;color:var(--ink);font-weight:600;letter-spacing:-.01em} /* ---------- hero partner badge (the "hook") ---------- */ .partner-badge{ display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.4rem; font-family:var(--mono);font-size:.72rem;letter-spacing:.04em; padding:.5em .9em;border:1px solid var(--line-strong);border-radius:2px; background:rgba(234,88,12,.06);color:var(--ink); } .partner-badge .dotmark{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none} .partner-badge b{font-weight:600} .partner-badge .pl{color:var(--signal);font-weight:600} /* ---------- hero video placeholder (drop a