@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;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;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;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;
}

:root{
  --bg:#0a0a0a;
  --bg-2:#111213;
  --ink:#f7f7f5;
  --ink-dim:#a4a9ae;
  --steel:#2c3136;
  --steel-2:#454c53;
  --fire:#ff6b1a;
  --fire-hot:#ff8a3d;
  --radius:14px;
  --gap:clamp(120px,16vw,220px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,1.1vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--fire);outline-offset:3px;border-radius:4px}
::selection{background:var(--fire);color:var(--bg)}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 32px}}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--fire);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{left:8px}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 28px;border-radius:999px;border:1px solid var(--fire);
  background:var(--fire);color:var(--bg);
  font:inherit;font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--fire-hot);border-color:var(--fire-hot)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-lg{min-height:60px;padding:0 36px;font-size:17px}
.btn-block{display:flex;width:100%}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--steel-2)}
.btn-outline:hover{background:var(--fire);border-color:var(--fire);color:var(--bg)}
.btn[disabled]{opacity:.6;cursor:progress}

.link-arrow{display:inline-flex;align-items:center;min-height:52px;color:var(--ink-dim);text-decoration:none;font-weight:600;transition:color .2s}
.link-arrow::after{content:"→";margin-left:8px;transition:transform .2s}
.link-arrow:hover{color:var(--ink)}
.link-arrow:hover::after{transform:translateX(4px)}

/* === Header === */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.82);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--steel);
}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.logo-light{font-weight:400;color:var(--ink-dim)}
.logo-mark{width:14px;height:14px;background:var(--fire);transform:rotate(45deg);border-radius:2px;flex:none}
.logo-sm{font-size:17px}
.top-nav{display:none;gap:36px}
.top-nav a{color:var(--ink-dim);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s}
.top-nav a:hover{color:var(--ink)}
@media (min-width:860px){.top-nav{display:flex}}
@media (max-width:380px){.top .btn-sm{padding:0 14px;font-size:14px}.logo{font-size:18px}}

/* === Type === */
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:24px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--steel-2)}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,8.4vw,112px);max-width:14ch}
h2{font-size:clamp(34px,5.2vw,68px);max-width:18ch}
h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;line-height:1.15}
.lead{font-size:clamp(18px,1.7vw,23px);color:var(--ink-dim);max-width:44ch;margin-top:32px;line-height:1.5}
.section-sub{color:var(--ink-dim);max-width:52ch;margin-top:24px;font-size:clamp(16px,1.3vw,19px)}

/* === Hero === */
.hero{position:relative;isolation:isolate;padding:clamp(80px,14vw,180px) 0 clamp(60px,8vw,110px)}

/* Tło hero: kolaż realizacji przypięty do ekranu; clip-path ogranicza go do obszaru hero */
.hero-bg{position:absolute;inset:0;z-index:-1;clip-path:inset(0);pointer-events:none}
.collage{position:fixed;inset:0;overflow:hidden}
.collage-grid{
  position:absolute;left:38%;top:50%;width:1500px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  transform:translateY(-50%) rotate(-12deg) skewX(4deg);
}
.collage-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--steel);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.collage-grid img:nth-child(3n+2){transform:translateY(-90px)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,10,0) 55%,var(--bg) 100%),
    linear-gradient(90deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.9) 45%,rgba(10,10,10,.5) 100%);
}
@media (max-width:759px){
  .collage-grid{left:-10%;width:900px;gap:16px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.9) 55%,var(--bg) 100%)}
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:48px}
.hero-facts{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px;max-width:760px;
  margin-top:clamp(72px,10vw,130px);padding-top:28px;border-top:1px solid var(--steel);
  color:var(--ink-dim);font-size:14px;line-height:1.35;
}
.hero-facts strong{display:block;white-space:nowrap;color:var(--ink);font-size:clamp(20px,3vw,34px);font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
@media (max-width:639px){.hero-cta .btn{width:100%}}

/* === Sections === */
.section{padding-top:var(--gap)}
.section[id]{scroll-margin-top:calc(104px - var(--gap))}
.section-head{margin-bottom:clamp(48px,7vw,88px)}

/* === Plans === */
.plans{display:grid;gap:20px}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:36px 28px 28px;border:1px solid var(--steel);border-radius:var(--radius);background:var(--bg-2);
}
.plan-featured{border-color:var(--steel-2);background:linear-gradient(180deg,#17181a 0%,var(--bg-2) 60%)}
.plan-tag{
  position:absolute;top:-13px;left:28px;padding:4px 12px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.04em;
}
.plan-for{color:var(--ink-dim);margin-top:10px;font-size:15px;min-height:3.2em}
.plan-price{margin:28px 0;font-size:20px;font-weight:600;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price .amount{font-size:clamp(48px,5vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1}
.plan-price .net{color:var(--ink-dim);font-size:15px;font-weight:500}
.plan-list{display:grid;gap:12px;margin-bottom:36px;flex:1;padding-top:24px;border-top:1px solid var(--steel)}
.plan-list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-dim)}
.plan-list li strong{color:var(--ink);font-weight:700}
.plan-list li::before{
  content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);
}
.plans-note{margin-top:32px;color:var(--ink-dim);font-size:15px;max-width:70ch}
.plan-price .from{color:var(--ink-dim);font-size:18px;font-weight:500;align-self:flex-end;margin-bottom:6px}
.plan-excl{margin:-16px 0 28px;font-size:14px;color:#7a8086;font-style:italic}

/* === Add-ons === */
.care{
  display:grid;gap:20px;align-items:center;
  padding:32px 28px;border:1px solid var(--steel-2);border-radius:var(--radius);
  background:linear-gradient(180deg,#17181a 0%,var(--bg-2) 100%);
}
@media (min-width:760px){.care{grid-template-columns:1fr auto;gap:48px;padding:40px}}
.care p{color:var(--ink-dim);margin-top:10px;max-width:56ch}
.care .care-price{margin:0;color:var(--ink-dim);font-size:17px;white-space:nowrap}
.care-price strong{color:var(--ink);font-size:clamp(36px,4vw,48px);font-weight:800;letter-spacing:-.03em}
.care-price .from{font-size:17px}
.pricelist{margin-top:12px}
.pricelist li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 4px;border-bottom:1px solid var(--steel);font-size:clamp(16px,1.3vw,18px);
}
.pl-price{font-weight:700;white-space:nowrap}

/* === Work === */
.work{display:grid;gap:40px;align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--steel)}
.work:last-child{border-bottom:1px solid var(--steel)}
@media (min-width:960px){
  .work{grid-template-columns:1.35fr 1fr;gap:72px}
  .work-flip .mock{order:2}
}
.work-kind{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;margin-bottom:14px}
.work-copy h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.work-copy > p:not(.work-kind){color:var(--ink-dim);margin-top:18px;max-width:46ch}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.work-tags li{font-size:13px;padding:6px 12px;border:1px solid var(--steel-2);border-radius:999px;color:var(--ink-dim)}

.mock{position:relative;padding:0 8% 9% 0}
.laptop-screen{
  aspect-ratio:16/10;overflow:hidden;
  border:clamp(6px,1vw,12px) solid #1b1d20;border-bottom-width:clamp(10px,1.4vw,18px);
  border-radius:12px 12px 0 0;background:#000;
  box-shadow:0 0 0 1px var(--steel);
}
.laptop-screen img,.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop{padding:0 6%}
.laptop-base{
  height:clamp(10px,1.3vw,16px);margin:0 -7%;
  background:linear-gradient(180deg,#3a3f45,#1d2024);border-radius:0 0 14px 14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
}
.phone{
  position:absolute;right:0;bottom:0;width:26%;aspect-ratio:390/844;overflow:hidden;
  border:clamp(4px,.6vw,7px) solid #1b1d20;border-radius:clamp(16px,2.4vw,28px);background:#000;
  box-shadow:0 0 0 1px var(--steel-2),0 24px 50px -10px rgba(0,0,0,.95);
}

/* === Concepts (projekty dla branż) === */
.concepts{display:grid;gap:40px 28px}
@media (min-width:760px){.concepts{grid-template-columns:repeat(2,1fr)}}
.concept-shot{
  aspect-ratio:16/10;overflow:hidden;margin-bottom:22px;
  border:clamp(5px,.7vw,9px) solid #1b1d20;border-radius:12px;background:#000;
  box-shadow:0 0 0 1px var(--steel),0 24px 50px -20px rgba(0,0,0,.9);
}
.concept-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.concept:hover .concept-shot img{transform:scale(1.03)}
.concept .work-kind{margin-bottom:6px}
.concept-desc{color:var(--ink-dim);max-width:44ch}
.link-inline{color:var(--ink);font-weight:600}

/* === Contact === */
.contact{padding-bottom:var(--gap)}
.contact-grid{display:grid;gap:56px}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1fr;gap:88px;align-items:start}}
.response{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font-weight:600;padding:12px 18px;border:1px solid var(--steel);border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.15)}

.form{display:grid;gap:22px;padding:clamp(24px,4vw,40px);border:1px solid var(--steel);border-radius:var(--radius);background:var(--bg-2)}
.field{display:grid;gap:8px;border:0;min-width:0}
.field label,.field legend{font-size:14px;font-weight:600}
.field legend{margin-bottom:8px;padding:0}
.field input{
  width:100%;min-height:56px;padding:0 16px;border-radius:10px;
  border:1px solid var(--steel-2);background:var(--bg);color:var(--ink);
  font:inherit;font-size:16px;transition:border-color .2s;
}
.field input:hover{border-color:#5d656d}
.field input:focus{outline:none;border-color:var(--ink)}
.field input[aria-invalid="true"]{border-color:#ff5d5d}

.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:520px){.choices{grid-template-columns:repeat(4,1fr)}}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 10px;
  border:1px solid var(--steel-2);border-radius:10px;font-weight:600;font-size:15px;transition:all .2s;
}
.choice:hover span{border-color:#5d656d}
.choice input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.choice input:focus-visible + span{outline:2px solid var(--fire);outline-offset:2px}
.choices.is-invalid .choice span{border-color:#ff5d5d}

.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;color:var(--ink-dim);cursor:pointer}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--fire);cursor:pointer}
.consent.is-invalid{color:#ff8a8a}
.consent a,.form-legal a{color:var(--ink)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-weight:600}
.form-status:empty{display:none}
.form-status.ok{color:#3ddc84}
.form-status.err{color:#ff8a8a}
.form-legal{font-size:12px;color:#7a8086;line-height:1.5}
.grecaptcha-badge{visibility:hidden}

/* === Footer === */
.foot{border-top:1px solid var(--steel);padding:36px 0;color:var(--ink-dim);font-size:14px}
.foot-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot a{color:var(--ink-dim)}
.foot a:hover{color:var(--ink)}

/* === Reveal === */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* === Legal page === */
.legal{padding:clamp(64px,10vw,120px) 0 var(--gap)}
.legal h1{font-size:clamp(36px,6vw,64px);max-width:none}
.legal h2{font-size:clamp(22px,2.4vw,28px);max-width:none;margin:48px 0 14px;letter-spacing:-.02em}
.legal p,.legal li{color:var(--ink-dim);max-width:70ch}
.legal p + p{margin-top:12px}
.legal ul{list-style:disc;padding-left:22px;display:grid;gap:6px}
.legal .back{margin-top:56px}