/* Fonty z Google Fonts na własnym serwerze (bez zapytań do Google). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/IBMPlexMono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/IBMPlexMono-500-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexMono-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/IBMPlexMono-600-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-400-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-500-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-600-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-700-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Montserrat-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Montserrat-700-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Montserrat-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Montserrat-800-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Montserrat-900-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/Montserrat-900-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;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yellowtail-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yellowtail-400-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;
}

/* Vibes Media: mobile first. Bazowe style są dla telefonu, większe ekrany dostają je przez min-width.
   Granat, pomarańcz, kremowe pigułki, logo „Vibes Media” pisane ręcznie, do tego język kamery (wizjer, REC, timecode).
   Progi: 640 px (duży telefon / mały tablet), 900 px (tablet poziomo), 1100 px (komputer). */
:root {
  --bg:#0b1630; --bg2:#0f1d3d; --card:#132450; --fg:#f4f6fb; --soft:#b3bfd6; --line:rgba(244,246,251,.13);
  --orange:#ff6b1a; --orange2:#ff8a45; --cream:#f4e4c4; --cream2:#e8cd98; --rec:#ff3b2f; --ok:#4ade80;
  --d:'Montserrat','Arial Black',system-ui,sans-serif; --b:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'IBM Plex Mono',ui-monospace,Menlo,monospace; --s:'Yellowtail','Brush Script MT',cursive;
  --r:16px; --gut:max(18px,env(safe-area-inset-left)); --gutr:max(18px,env(safe-area-inset-right));
  --mbar:64px; color-scheme:dark;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--b); overflow-x:hidden;
  padding-bottom:calc(var(--mbar) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color:transparent; }
img, video { max-width:100%; display:block; }
a { color:var(--orange2); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:6px; }
.wrap { width:100%; max-width:1180px; margin-inline:auto; padding-left:var(--gut); padding-right:var(--gutr); }
.narrow { max-width:820px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; background:var(--cream); color:var(--bg); padding:10px 16px; border-radius:999px; z-index:60; }
.skip:focus { left:12px; }

/* typografia: na telefonie rozmiar liczony od szerokości, żeby długie słowa (WIDEOFILMOWANIE) zawsze się mieściły */
h1,h2,h3 { font-family:var(--d); margin:0; letter-spacing:-.02em; text-wrap:balance; }
h1 { font-size:min(7vw,40px); line-height:1.05; font-weight:900; text-transform:uppercase; }
h2 { font-size:min(6.6vw,30px); line-height:1.1; font-weight:900; text-transform:uppercase; margin-bottom:22px; }
h3 { font-size:19px; line-height:1.25; font-weight:800; }
.o { color:var(--orange); }
.k { font:600 12px/1.3 var(--m); letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.k::before { content:""; flex:none; width:24px; height:2px; background:currentColor; }
.lead { font-size:18px; color:var(--soft); max-width:58ch; margin:0 0 14px; }
p { margin:0 0 14px; max-width:70ch; }
.center { text-align:center; margin-top:28px; } .center .pill { display:inline-flex; }
.todo { background:rgba(255,107,26,.16); color:var(--orange2); border:1px dashed rgba(255,107,26,.6); border-radius:6px; padding:0 6px; font:500 .85em var(--m); }

/* logo */
.logo { font:400 34px/1 var(--s); color:var(--orange); white-space:nowrap; text-decoration:none; }
.brand { text-decoration:none; display:inline-flex; min-height:48px; align-items:center; }
.foot .logo { font-size:42px; }

/* przyciski: min. 48 px wysokości, wygodne pod kciuk */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; font:800 16px/1.1 var(--d); color:var(--bg); text-decoration:none;
  background:linear-gradient(90deg,var(--cream),var(--cream2)); padding:14px 26px; border-radius:999px; border:0; cursor:pointer; text-align:center;
  box-shadow:0 10px 30px -14px rgba(244,228,196,.6); transition:transform .2s, box-shadow .2s; }
.pill:hover { color:var(--bg); transform:translateY(-2px); }
.pill.ghost { background:transparent; color:var(--fg); border:2px solid rgba(255,107,26,.7); box-shadow:none; }
.pill.ghost:hover { color:var(--fg); background:rgba(255,107,26,.12); }
.pill.small { min-height:44px; padding:10px 18px; font-size:14px; }
.btns { display:grid; gap:12px; margin-top:24px; }
.btns .pill { width:100%; }
.tel { font:600 17px var(--m); color:var(--soft); text-align:center; }
.tel a { display:inline-block; padding:10px 0; }

/* nagłówek strony */
/* rozmycie tła siedzi na ::before: backdrop-filter na samym .top zamknąłby w nim menu z position:fixed (panel miałby wysokość paska) */
.top { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); }
.top::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(11,22,48,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background-color .35s; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.burger { background:none; border:0; width:48px; height:48px; margin-right:-10px; cursor:pointer; position:relative; }
.burger span:not(.sr) { position:absolute; left:12px; right:12px; height:2px; background:var(--fg); border-radius:2px; transition:transform .2s; }
.burger span:nth-child(1) { top:19px; } .burger span:nth-child(2) { top:28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform:translateY(-4.5px) rotate(-45deg); }
.menu { position:fixed; left:0; right:0; top:64px; bottom:0; display:none; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding:8px var(--gutr) calc(32px + env(safe-area-inset-bottom)) var(--gut); background:var(--bg); }
.menu.open { display:flex; }
.menu a:not(.pill) { color:var(--fg); text-decoration:none; font:700 20px var(--d); padding:16px 0; border-bottom:1px solid var(--line); }
.menu a[aria-current] { color:var(--orange); }
.menu .pill { margin-top:20px; min-height:56px; font-size:17px; }
body.menu-open { overflow:hidden; }

/* dolny pasek na telefonie: zadzwoń i wycena zawsze pod kciukiem */
.mbar { position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:10px var(--gutr) calc(10px + env(safe-area-inset-bottom)) var(--gut); background:rgba(8,17,39,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.mbar a { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font:800 15px var(--d); text-decoration:none; }
.mbar .call { color:var(--fg); border:2px solid rgba(255,107,26,.7); }
.mbar .call::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--rec); }
.mbar .quote { color:var(--bg); background:linear-gradient(90deg,var(--cream),var(--cream2)); }

/* hero */
.hero { position:relative; padding:28px 0 44px;
  background:radial-gradient(ellipse 90% 50% at 100% 0%,rgba(255,107,26,.14),transparent 60%),radial-gradient(ellipse 90% 60% at 0% 0%,#17306a,transparent 65%); }
.hero.short { padding-bottom:30px; }
.hgrid { display:grid; gap:28px; }
.htext { min-width:0; }
.hero h1 { margin-bottom:16px; }
.htext > p:not(.k):not(.lead) { color:var(--soft); }
.crumbs { font:500 13px/1.6 var(--m); color:var(--soft); margin-bottom:16px; }
.crumbs a { color:var(--soft); display:inline-block; padding:4px 0; }

/* wizjer kamery */
.vf { position:relative; aspect-ratio:16/10; width:100%; border-radius:var(--r); overflow:hidden; background:#16295a; box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 0 1px var(--line); }
.vf.vert { aspect-ratio:9/16; width:min(100%,320px); margin-inline:auto; }
.vf video, .vf .yt, .vf .vf-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; border-radius:0; }
.vf .c { position:absolute; z-index:3; width:26px; height:26px; border:0 solid #fff; pointer-events:none; }
.vf .c1 { left:12px; top:12px; border-left-width:3px; border-top-width:3px; } .vf .c2 { right:12px; top:12px; border-right-width:3px; border-top-width:3px; }
.vf .c3 { left:12px; bottom:12px; border-left-width:3px; border-bottom-width:3px; } .vf .c4 { right:12px; bottom:12px; border-right-width:3px; border-bottom-width:3px; }
.vf .rec, .vf .tc, .vf .fmt, .vf .vf-label { position:absolute; z-index:3; font:600 11px/1 var(--m); letter-spacing:.1em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); pointer-events:none; }
.vf .rec { left:24px; top:24px; display:flex; gap:7px; align-items:center; } .vf .rec b { width:9px; height:9px; border-radius:50%; background:var(--rec); box-shadow:0 0 10px var(--rec); }
.vf .tc { right:24px; top:24px; font-variant-numeric:tabular-nums; }
.vf .vf-label { left:24px; right:24px; bottom:24px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vf .fmt { display:none; }
@media (prefers-reduced-motion:no-preference) { .vf .rec b { animation:blink 1.2s steps(2,start) infinite; } }
@keyframes blink { to { visibility:hidden; } }

/* sekcje */
.sec { padding:48px 0; }
.sec.alt { background:var(--bg2); border-block:1px solid var(--line); }
.sec h2 + p { color:var(--soft); }
.sec h3 { margin-top:8px; }

.svcs { display:grid; gap:12px; }
.svc { display:grid; gap:8px; align-content:start; padding:22px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); color:var(--fg); text-decoration:none; min-width:0; transition:transform .2s, border-color .2s; }
.svc:hover { color:var(--fg); border-color:rgba(255,107,26,.6); }
.svc .n { font:600 12px var(--m); color:var(--orange); } .svc p { color:var(--soft); margin:0; font-size:16px; }
.svc .more { font:700 14px var(--b); color:var(--orange2); margin-top:4px; }
.wsps { display:grid; gap:12px; }
.wsp { padding:22px; border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(160deg,rgba(255,107,26,.1),transparent 55%); min-width:0; }
.wsp h3 { font-size:22px; } .wsp .who { font:600 12px var(--m); letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin:6px 0 10px; } .wsp p { color:var(--soft); margin:0; }

/* oś pracy: na telefonie pionowa, każdy krok ma własną kropkę przy własnej linii, więc nic na siebie nie nachodzi */
.steps { list-style:none; margin:0; padding:0 0 0 22px; display:grid; gap:0; border-left:2px solid var(--line); }
.steps li { position:relative; padding:0 0 26px 0; }
.steps li:last-child { padding-bottom:0; }
.steps li::before { content:""; position:absolute; left:-30px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,107,26,.18); }
.steps .tcode { font:600 12px var(--m); color:var(--orange); } .steps h3 { margin:4px 0 6px; } .steps p { color:var(--soft); font-size:16px; margin:0; }

.ticks { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; }
.ticks li { position:relative; padding-left:30px; }
.ticks li::before { content:""; position:absolute; left:2px; top:.45em; width:15px; height:8px; border-left:3px solid var(--orange); border-bottom:3px solid var(--orange); transform:rotate(-45deg); }
.ticks + p { margin-top:18px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 24px; }
.chips a { font:600 15px/1.2 var(--b); color:var(--fg); text-decoration:none; padding:12px 16px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; border:1px solid rgba(255,107,26,.45); background:rgba(255,107,26,.06); }
.chips a:hover { color:var(--bg); background:var(--cream); border-color:transparent; }

/* portfolio */
.tabs { display:flex; gap:8px; margin-bottom:20px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { flex:none; min-height:48px; font:800 15px var(--d); padding:12px 22px; border-radius:999px; border:2px solid rgba(255,107,26,.6); background:transparent; color:var(--orange2); cursor:pointer; }
.tabs button[aria-selected="true"] { background:linear-gradient(90deg,var(--cream),var(--cream2)); color:var(--bg); border-color:transparent; }
.tiles { display:grid; gap:18px; }
.tiles.vert { grid-template-columns:1fr 1fr; gap:12px; }
.tile { margin:0; display:grid; gap:8px; min-width:0; }
.tile figcaption { display:grid; gap:2px; } .tile figcaption b { color:var(--fg); font:700 15px/1.3 var(--b); } .tile figcaption span { color:var(--soft); font-size:14px; }
.tile.vert video { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:12px; background:#0f1d3d; }
.yt { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:12px; overflow:hidden; background:#0f1d3d; cursor:pointer; }
.yt img { width:100%; height:100%; object-fit:cover; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt .play { position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:rgba(244,228,196,.94); box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:4; }
.yt .play::after { content:""; position:absolute; left:24px; top:19px; border:11px solid transparent; border-left:17px solid var(--bg); border-right:0; }
.gallery { columns:2; column-gap:10px; }
.ph-item { margin:0 0 10px; break-inside:avoid; position:relative; }
.ph-item img { width:100%; border-radius:10px; }
.ph-item figcaption { position:absolute; left:8px; right:8px; bottom:8px; font:600 11px var(--m); padding:4px 8px; border-radius:999px; background:rgba(11,22,48,.8); color:var(--fg); width:fit-content; max-width:calc(100% - 16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-wide { margin:22px 0 0; } .ph-wide img { width:100%; border-radius:var(--r); }

.strip { padding:22px 0; border-block:1px solid var(--line); background:#0a1430; }
.strip .k { margin-bottom:10px; }
.marki { display:flex; flex-wrap:wrap; gap:8px 18px; }
.marki span { font:800 15px/1.3 var(--d); text-transform:uppercase; letter-spacing:-.01em; color:rgba(244,246,251,.75); }
.marki span:nth-child(3n+2) { color:var(--orange2); }

.faq { display:grid; gap:10px; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 18px; }
.faq summary { cursor:pointer; list-style:none; font:700 17px/1.35 var(--b); padding:18px 32px 18px 0; position:relative; min-height:56px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:12px; font:400 28px var(--b); color:var(--orange); }
.faq details[open] summary::after { content:"–"; } .faq details p { color:var(--soft); padding-bottom:16px; margin:0; }

.cta { padding:0 0 48px; }
.cta-in { padding:28px 22px; border-radius:22px; background:radial-gradient(ellipse at 90% 0%,rgba(255,107,26,.35),transparent 55%),linear-gradient(135deg,#17306a,#0f1d3d); border:1px solid var(--line); }
.cta-in p:not(.k) { color:var(--soft); }

.portrait { margin:0; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--card); }
.portrait img { width:100%; height:100%; object-fit:cover; }

/* kontakt i formularz: pola 16 px+ (iPhone nie przybliża), duże, z czytelnymi błędami */
.kgrid { display:grid; gap:28px; }
.kdane dl { margin:0; display:grid; gap:2px; } .kdane dt { font:600 12px var(--m); letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-top:16px; }
.kdane dd { margin:0; font:600 18px/1.4 var(--b); overflow-wrap:anywhere; } .kdane dd a { display:inline-block; padding:4px 0; }
.form { display:grid; gap:6px; padding:22px 18px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); min-width:0; }
.form label { font:600 15px var(--b); color:var(--soft); margin-top:10px; }
.form input, .form select, .form textarea { width:100%; min-height:52px; font:400 17px var(--b); color:var(--fg); background:var(--bg); border:1px solid rgba(244,246,251,.22); border-radius:12px; padding:13px 14px; -webkit-appearance:none; appearance:none; }
.form select { background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%); background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px; }
.form textarea { min-height:130px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color:var(--orange); outline:none; box-shadow:0 0 0 3px rgba(255,107,26,.22); }
.form [aria-invalid="true"] { border-color:var(--rec); }
.form .err { color:#ff8b82; font-size:14px; margin:2px 0 0; min-height:0; }
.form .zgoda { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-weight:400; font-size:15px; color:var(--soft); margin-top:16px; }
.form .zgoda input { width:24px; height:24px; min-height:0; margin:1px 0 0; -webkit-appearance:checkbox; appearance:auto; accent-color:var(--orange); }
.form .pill { margin-top:18px; width:100%; }
.form .pill[disabled] { opacity:.6; cursor:wait; }
.form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.status { border-radius:12px; padding:14px 16px; font-weight:600; }
.status.ok { background:rgba(74,222,128,.12); border:1px solid var(--ok); color:var(--fg); }
.status.bad { background:rgba(255,59,47,.12); border:1px solid var(--rec); color:var(--fg); }

.prose h1 { margin-bottom:20px; } .prose h2 { font-size:22px; margin:30px 0 10px; text-transform:none; letter-spacing:-.01em; }

/* stopka */
.foot { border-top:1px solid var(--line); padding:44px 0 24px; background:#081127; }
.fgrid { display:grid; gap:28px; }
.fgrid > div { display:grid; gap:2px; align-content:start; min-width:0; }
.fgrid a, .fgrid span { color:var(--soft); text-decoration:none; font-size:16px; padding:6px 0; }
.fgrid a:hover { color:var(--orange); }
.fgrid p { color:var(--soft); font-size:15px; margin:10px 0 0; }
.nap { line-height:1.7; } .nap b { color:var(--fg); } .nap a { padding:0; }
.legal { display:grid; gap:6px; margin-top:32px; padding-top:18px; border-top:1px solid var(--line); font:500 13px var(--m); color:var(--soft); }
.legal a { color:var(--soft); }

/* ---------- od 640 px: duży telefon poziomo, mały tablet ---------- */
@media (min-width:640px) {
  body { font-size:18px; }
  h1 { font-size:min(7vw,52px); } h2 { font-size:34px; }
  .btns { display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .btns .pill { width:auto; } .tel { text-align:left; }
  .svcs, .wsps { grid-template-columns:1fr 1fr; gap:16px; }
  .tiles.wide { grid-template-columns:1fr 1fr; }
  .tiles.vert { grid-template-columns:repeat(3,1fr); max-width:820px; }
  .gallery { columns:3; column-gap:14px; } .ph-item { margin-bottom:14px; }
  .steps { grid-template-columns:repeat(3,1fr); gap:28px 22px; padding:0; border-left:0; }
  .steps li { padding:26px 0 0; border-top:2px solid var(--line); }
  .steps li::before { left:0; top:-7px; }
  .fgrid { grid-template-columns:1fr 1fr; } .fgrid > div:first-child { grid-column:1/-1; }
  .legal { display:flex; justify-content:space-between; }
  .form { padding:30px; } .form .pill { width:auto; justify-self:start; }
  .cta-in { padding:44px; }
  .vf .c { width:32px; height:32px; } .vf .c1, .vf .c2 { top:16px; } .vf .c1, .vf .c3 { left:16px; } .vf .c2, .vf .c4 { right:16px; } .vf .c3, .vf .c4 { bottom:16px; }
  .vf .rec, .vf .tc, .vf .vf-label { font-size:12px; } .vf .rec, .vf .vf-label { left:30px; } .vf .tc { right:30px; } .vf .rec, .vf .tc { top:30px; } .vf .vf-label { bottom:30px; right:120px; }
  .vf .fmt { display:block; right:30px; bottom:30px; }
  .vf.vert .vf-label { right:30px; }
}

/* ---------- od 900 px: tablet poziomo ---------- */
@media (min-width:900px) {
  .hero { padding:72px 0 80px; } .hero.short { padding-bottom:44px; }
  .hgrid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; }
  .hero h1 { font-size:clamp(34px,3.5vw,54px); } .sub h1 { font-size:clamp(32px,3.4vw,50px); }
  .sec { padding:80px 0; } .cta { padding-bottom:80px; }
  h2 { font-size:clamp(30px,3.4vw,44px); margin-bottom:28px; }
  .svcs { grid-template-columns:repeat(3,1fr); }
  .tiles.wide { grid-template-columns:repeat(3,1fr); }
  .kgrid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start; }
  .fgrid { grid-template-columns:1.4fr repeat(3,1fr); } .fgrid > div:first-child { grid-column:auto; }
  .marki { gap:10px 26px; } .marki span { font-size:18px; }
  .portrait { aspect-ratio:4/5; max-height:560px; }
}

/* ---------- od 1100 px: komputer ---------- */
@media (min-width:1100px) {
  body { padding-bottom:0; }
  .mbar { display:none; }
  .bar { min-height:76px; }
  .logo { font-size:40px; }
  .burger { display:none; }
  .menu { position:static; display:flex; flex-direction:row; align-items:center; gap:22px; padding:0; background:none; overflow:visible; }
  .menu a:not(.pill) { font:600 15px var(--b); padding:8px 0; border:0; }
  .menu a:not(.pill):hover { color:var(--orange); }
  .menu .pill { margin:0; min-height:44px; font-size:14px; }
  .steps { grid-template-columns:repeat(6,1fr); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
.note-form { margin:14px 0 0; color:var(--soft); font-size:15px; text-align:center; } .note-form a { font-weight:700; }
@media (min-width:640px) { .note-form { text-align:left; } }

/* film Olimp ma własny napis VHS „PLAY”, więc nie dublujemy REC i timecode */
.vf.own-hud .rec, .vf.own-hud .tc { display:none; }

/* ---------- „Kim jestem” na stronie głównej: tekst, a obok wycięty Szymon stojący na linii kolejnej sekcji ---------- */
.about { overflow:hidden; }
.agrid { display:grid; gap:8px; align-items:end; }
.about-txt { min-width:0; align-self:center; }
.about-txt .ticks { margin:20px 0 0; }
.about-cut { position:relative; margin:0 0 -48px; display:flex; justify-content:center; align-items:flex-end; height:460px; }
.about-cut::before { content:""; position:absolute; left:50%; top:8%; width:min(420px,120%); aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,26,.22),rgba(255,107,26,.07) 42%,transparent 68%); pointer-events:none; }
.about-cut::after { content:""; position:absolute; left:50%; bottom:0; width:70%; height:26px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%); }
.about-cut img { position:relative; z-index:1; height:100%; width:auto; max-width:none; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
@media (min-width:900px) {
  .agrid { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:stretch; }
  /* Szymon sięga od nagłówka do linii kolejnej sekcji, niezależnie od długości tekstu */
  .about-cut { height:auto; margin:0; align-self:stretch; }
  .about-cut img { position:absolute; left:50%; bottom:-80px; height:calc(100% + 80px); transform:translateX(-50%); }
  .about-cut::after { bottom:-80px; }
}

/* zdjęcie ze studia obok kart współprac */
.wspgrid { display:grid; gap:16px; }
.wsp-img { margin:0; position:relative; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; background:var(--card); }
.wsp-img img { width:100%; height:100%; object-fit:cover; }
.wsp-img figcaption { position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px); font:600 11px/1.3 var(--m); letter-spacing:.06em; padding:6px 10px; border-radius:999px; background:rgba(11,22,48,.82); color:var(--fg); }
.wspgrid .wsps { grid-template-columns:1fr; align-content:start; }
@media (min-width:900px) {
  .wspgrid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:20px; align-items:stretch; }
  .wsp-img { aspect-ratio:auto; min-height:100%; }
  .wspgrid .wsps { gap:20px; }
}

/* ---------- ruch: wejście hero, odsłanianie przy przewijaniu, najechania ---------- */
:root { --ease:cubic-bezier(.2,.7,.2,1); }
.top { transition:box-shadow .35s; }
.top.scrolled { box-shadow:0 14px 34px -18px rgba(0,0,0,.75); } .top.scrolled::before { background:rgba(9,18,40,.95); }

/* hero przy wejściu na stronę: sam CSS, więc działa od pierwszej klatki */
@keyframes rise { from { opacity:0; transform:translateY(22px); } }
@keyframes wipe { from { opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(.4em); } }
@keyframes zoomin { from { opacity:0; transform:scale(.95); } }
.hero .crumbs, .hero .k, .hero .lead, .hero .htext > p, .hero .btns { animation:rise .9s var(--ease) backwards; }
.hero h1 { animation:wipe 1.05s var(--ease) .08s backwards; }
.hero .lead { animation-delay:.28s; } .hero .htext > p:not(.k):not(.lead) { animation-delay:.36s; } .hero .btns { animation-delay:.42s; }
.hero .vf, .hero .portrait { animation:zoomin 1.3s var(--ease) .18s backwards; }

/* elementy niżej: JS dopisuje data-r / data-split tylko do tego, czego nie widać po wejściu */
.fx [data-r] { transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--dl,0ms); }
.fx [data-r]:not(.in) { opacity:0; transform:translateY(28px); }
.fx .about-cut[data-r] { transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.fx .about-cut[data-r]:not(.in) { transform:translateY(60px); }
.fx .k[data-r]::before { transition:transform .8s var(--ease) .15s; transform-origin:left; }
.fx .k[data-r]:not(.in)::before { transform:scaleX(0); }
.fx .w { display:inline-block; overflow:hidden; vertical-align:top; padding:.16em .03em .1em; margin:-.16em -.03em -.1em; }
.fx .w > span { display:inline-block; transition:transform .95s var(--ease); transition-delay:calc(var(--i,0) * 55ms); }
.fx [data-split]:not(.in) .w > span { transform:translateY(115%); }

/* kafelki: miękkie najechania tylko tam, gdzie jest mysz */
.svc, .wsp { position:relative; isolation:isolate; }
.svc::after, .wsp::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0), rgba(255,107,26,.16), transparent 45%); }
.svc { transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.svc .more { display:inline-block; transition:transform .3s var(--ease); }
.yt img, .ph-item img, .tile.vert video { transition:transform .8s var(--ease); }
.yt .play { transition:transform .35s var(--ease); }
.ph-item { overflow:hidden; border-radius:10px; }
.pill { transition:transform .3s var(--ease), box-shadow .3s, background-color .3s; }
@media (hover:hover) {
  .svc:hover { transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(0,0,0,.9); }
  .svc:hover .more { transform:translateX(6px); }
  .svc:hover::after, .wsp:hover::after { opacity:1; }
  .wsp { transition:border-color .35s; } .wsp:hover { border-color:rgba(255,107,26,.45); }
  .yt:hover img { transform:scale(1.05); } .yt:hover .play { transform:scale(1.12); }
  .ph-item:hover img { transform:scale(1.05); }
  .tile.vert:hover video { transform:scale(1.02); }
  .chips a { transition:background-color .25s, color .25s, border-color .25s; }
  .pill:hover { box-shadow:0 16px 34px -14px rgba(244,228,196,.7); }
}
.faq summary::after { transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:rotate(180deg); }
.faq details[open] p { animation:rise .5s var(--ease); }
.pane:not([hidden]) { animation:rise .55s var(--ease); }

/* pasek marek przewija się w pętli, po najechaniu staje */
.marq { display:flex; 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); }
.marq .marki { flex:none; flex-wrap:nowrap; gap:0 34px; padding-right:34px; animation:marq 48s linear infinite; }
.marq .marki span { white-space:nowrap; }
.marq:hover .marki { animation-play-state:paused; }
@keyframes marq { to { transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce) {
  .marq { -webkit-mask-image:none; mask-image:none; } .marq .marki { flex-wrap:wrap; gap:8px 18px; padding:0; } .marq .marki[aria-hidden] { display:none; }
}

/* menu na telefonie: pozycje wjeżdżają po kolei */
.menu.open a { animation:rise .5s var(--ease) backwards; }
.menu.open a:nth-child(2) { animation-delay:.04s; } .menu.open a:nth-child(3) { animation-delay:.08s; } .menu.open a:nth-child(4) { animation-delay:.12s; }
.menu.open a:nth-child(5) { animation-delay:.16s; } .menu.open a:nth-child(6) { animation-delay:.2s; } .menu.open a:nth-child(7) { animation-delay:.24s; } .menu.open a:nth-child(8) { animation-delay:.28s; }
@media (min-width:1100px) { .menu.open a { animation:none; } }