/* białe studio — wspólne style */
:root{
  --bg:#fbfaf8; --bg-alt:#f3f1ec; --ink:#17150f; --teal:#37837a; --teal-l:#7ab8af;
  --line:rgba(23,21,15,.12); --muted:rgba(23,21,15,.65); --err:#b4483c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Manrope,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%}
input,select,button,textarea{font-family:Manrope,sans-serif}
h1,h2,h3,p{margin:0}

/* animacje */
@keyframes bsUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bsBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(180px,-110px) scale(1.28)}66%{transform:translate(-150px,80px) scale(.88)}}
@keyframes bsFlowA{0%,100%{transform:translate(-8%,-6%) rotate(-10deg) scale(1)}50%{transform:translate(16%,12%) rotate(12deg) scale(1.3)}}
@keyframes bsFlowB{0%,100%{transform:translate(10%,6%) rotate(8deg) scale(1.15)}50%{transform:translate(-18%,-12%) rotate(-14deg) scale(.9)}}
@keyframes bsFlowC{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}33%{transform:translate(-14%,10%) rotate(9deg) scale(1.35)}66%{transform:translate(12%,-10%) rotate(-7deg) scale(.92)}}
@keyframes bsLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* nagłówek */
/* Sticky header — matowe szkło. Tło jest ZAWSZE (wcześniej pojawiało się dopiero
   po przewinięciu, więc treść przebijała przez nagłówek). Prefiks -webkit- jest
   konieczny dla Safari, które bez niego w ogóle nie rozmywa tła. */
.site-head{position:sticky;top:0;z-index:60;
  background:rgba(251,250,248,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(23,21,15,.06);
  transition:background .3s,box-shadow .3s,border-color .3s}
.site-head.scrolled{background:rgba(251,250,248,.9);
  border-bottom-color:rgba(23,21,15,.1);
  box-shadow:0 8px 30px -18px rgba(23,21,15,.28)}
/* Gdy przeglądarka nie umie rozmyć tła, samo półprzezroczyste tło dałoby
   prześwitującą treść — wtedy krycie prawie pełne. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{background:rgba(251,250,248,.97)}
  .site-head.scrolled{background:#fbfaf8}
}
.head-in{max-width:1400px;margin:0 auto;padding:18px clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(23,21,15,.62)}
.nav a{color:inherit}
.nav-link{position:relative;transition:color .25s}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-link:hover{color:var(--teal)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--ink)}
.nav-link.is-active::after{transform:scaleX(1);background:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob-nav{display:none;position:fixed;inset:0;z-index:55;background:var(--bg);padding:100px clamp(20px,6vw,40px) 40px;flex-direction:column;gap:2px}
.mob-nav.open{display:flex}
.mob-nav a{font-family:'Instrument Serif',serif;font-size:34px;color:var(--ink);padding:14px 0;border-bottom:1px solid rgba(23,21,15,.1)}
.mob-nav .btn-teal{font-family:Manrope,sans-serif;font-size:16px;margin-top:24px;border-bottom:none;text-align:center}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap-n{max-width:840px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sec{padding:clamp(64px,9vw,104px) 0}
.sec-alt{background:var(--bg-alt);border-top:1px solid rgba(23,21,15,.07)}
.sec-dark{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}

/* typografia */
.over{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;color:rgba(23,21,15,.55)}
.sec-dark .over{color:rgba(251,250,248,.55)}
.h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(42px,7vw,82px);line-height:1.04;letter-spacing:-.015em;margin-top:20px;text-wrap:pretty}
.h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(32px,5.4vw,52px);line-height:1.12;letter-spacing:-.01em;margin-top:20px;text-wrap:pretty}
.h3{font-weight:800;font-size:21px;line-height:1.3}
.em{font-style:italic;color:var(--teal)}
.em.u{position:relative;display:inline-block}
.em.u::after{content:"";position:absolute;left:0;bottom:.09em;width:100%;height:.085em;background:rgba(83,158,149,.35);transform-origin:left;animation:bsLine .9s .7s ease-out both}
.sec-dark .em{color:var(--teal-l)}
.lead{font-size:18px;line-height:1.7;color:rgba(23,21,15,.72);max-width:620px;margin-top:24px;text-wrap:pretty}
.sec-dark .lead{color:rgba(251,250,248,.72)}
.body{font-size:15.5px;line-height:1.7;color:rgba(23,21,15,.72);text-wrap:pretty}
.small{font-size:13.5px;line-height:1.6;color:rgba(23,21,15,.6)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(23,21,15,.55)}
.num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--teal)}

/* hero podstrony */
.page-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px)}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blobs div{position:absolute;border-radius:50%}
.b1{top:-40%;left:-12%;width:1100px;height:700px;background:radial-gradient(closest-side,rgba(83,158,149,.5),transparent 68%);filter:blur(70px);animation:bsFlowA 9s ease-in-out infinite}
.b2{top:-30%;right:-18%;width:980px;height:660px;background:radial-gradient(closest-side,rgba(219,190,138,.55),transparent 68%);filter:blur(80px);animation:bsFlowB 11s ease-in-out infinite}
.b3{bottom:-60%;left:14%;width:900px;height:620px;background:radial-gradient(closest-side,rgba(122,184,175,.4),transparent 68%);filter:blur(80px);animation:bsFlowC 14s ease-in-out infinite}

/* przyciski */
.btn-teal,.btn-dark,.btn-out{display:inline-block;border-radius:999px;font-weight:700;cursor:pointer;border:none;text-align:center}
.btn-teal{background:var(--teal);color:var(--bg);padding:17px 32px;font-size:16px;transition:transform .25s,box-shadow .25s}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(55,131,122,.6);color:var(--bg)}
.btn-dark{background:var(--ink);color:var(--bg);padding:11px 24px;font-size:13.5px;font-weight:600;transition:transform .25s,box-shadow .25s}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(23,21,15,.5);color:var(--bg)}
.btn-out{padding:16px 28px;font-size:16px;font-weight:600;border:1px solid rgba(23,21,15,.25);color:var(--ink);transition:border-color .25s}
.btn-out:hover{border-color:var(--ink);color:var(--ink)}
.sec-dark .btn-out{border-color:rgba(251,250,248,.3);color:var(--bg)}
.sec-dark .btn-out:hover{border-color:var(--bg);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:34px}

/* karty i siatki */
.card{background:#fff;border:1px solid rgba(23,21,15,.1);border-radius:16px;padding:34px 32px}
.hv-card{transition:transform .3s,box-shadow .3s}
.hv-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(23,21,15,.25)}
.hv-lift{transition:transform .3s}
.hv-lift:hover{transform:translateY(-6px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.grid-2-founder{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:stretch}
.grid-2-eq{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.grid-2-a{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.rows{display:flex;flex-direction:column}
.row{padding:24px 0;border-top:1px solid rgba(23,21,15,.14)}
.rows .row:last-child{border-bottom:1px solid rgba(23,21,15,.14)}
.sec-dark .row{border-top-color:rgba(251,250,248,.14)}
.sec-dark .rows .row:last-child{border-bottom-color:rgba(251,250,248,.14)}
.step{border-top:2px solid rgba(23,21,15,.15);padding-top:20px}
.step.first{border-top-color:var(--teal)}
.ticks{display:flex;flex-direction:column;gap:11px;margin-top:22px;font-size:14.5px;line-height:1.55;color:rgba(23,21,15,.75)}
.ticks>div{display:flex;gap:10px}
.ticks .d{color:var(--teal);flex:none}
.price{font-family:'Instrument Serif',serif;font-size:40px;margin-top:18px;line-height:1}
.price small{font-size:19px;color:rgba(23,21,15,.6)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:999px;background:var(--teal);color:var(--bg);font-family:'IBM Plex Mono',monospace;font-size:11.5px;white-space:nowrap}

/* pasek CTA */
.cta-band{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:64px;padding:32px 44px;border:1px solid rgba(23,21,15,.1);border-radius:999px;background:#fff}
.cta-band .t{font-family:'Instrument Serif',serif;font-size:clamp(21px,3.2vw,27px)}
.band-accent{background:var(--teal);color:var(--bg);border-radius:22px;padding:clamp(30px,4vw,44px);display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.band-accent .btn-out{border-color:rgba(251,250,248,.55);color:var(--bg);white-space:nowrap}
.band-accent .btn-out:hover{background:var(--bg);color:var(--teal);border-color:var(--bg)}

/* trust bar */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:rgba(23,21,15,.6)}
.trust span::before{content:"· ";color:var(--teal)}
.trust span:first-child::before{content:""}

/* zdjęcie założyciela */
.founder{display:flex;gap:32px;background:#fff;border:1px solid rgba(23,21,15,.1);border-radius:18px;padding:36px}
.founder-img{flex:none;width:220px;height:270px;border-radius:12px;overflow:hidden}
.founder-img img{width:100%;height:100%;object-fit:cover;display:block}

/* podglądy projektów */
.shot{display:block;color:inherit;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 30px 70px -30px rgba(23,21,15,.3);overflow:hidden;transition:box-shadow .35s}
.shot:hover{box-shadow:0 40px 90px -30px rgba(23,21,15,.4)}
.shot .inner{transition:transform .35s ease}
.shot:hover .inner{transform:scale(1.03)}
.shot .bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(23,21,15,.08)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(23,21,15,.15)}
.shot .cap{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid rgba(23,21,15,.08);font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(23,21,15,.6)}

/* FAQ */
.faq{border-bottom:1px solid rgba(23,21,15,.14)}
.faq-item{border-top:1px solid rgba(23,21,15,.14)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;cursor:pointer;transition:color .25s}
.faq-q:hover{color:var(--teal)}
.faq-q h3{font-weight:700;font-size:17.5px;line-height:1.4}
.faq-sign{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(23,21,15,.2);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--teal)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:15.5px;line-height:1.7;color:rgba(23,21,15,.72);padding:0 44px 22px 4px;max-width:680px;text-wrap:pretty}
.faq-group-label{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--teal);margin:44px 0 12px;letter-spacing:.04em}

/* formularz */
.form{display:flex;flex-direction:column;gap:18px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:700}
.f-input{padding:15px 16px;border-radius:12px;border:1px solid rgba(23,21,15,.18);background:#fff;font-size:15px;outline:none;transition:border-color .2s;color:var(--ink)}
.f-input:focus{border-color:var(--teal)}
.f-input.err{border-color:rgba(180,72,60,.7)}
.f-err{display:none;font-size:12.5px;font-weight:600;color:var(--err)}
.f-err.show{display:block}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-card{background:var(--bg);color:var(--ink);border-radius:20px;padding:clamp(26px,4vw,42px) clamp(20px,4vw,40px);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.consent{flex-direction:row!important;align-items:flex-start;gap:11px;cursor:pointer;font-weight:400!important}
.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal);cursor:pointer}
.consent span{font-size:12.5px;line-height:1.55;color:rgba(23,21,15,.7)}

/* stopka */
.site-foot{background:var(--ink);color:var(--bg);border-top:1px solid rgba(251,250,248,.12)}
.foot-in{max-width:1200px;margin:0 auto;padding:34px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(251,250,248,.6)}
.foot-links a{color:inherit}
.foot-links a:hover{color:var(--teal-l)}
.foot-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(251,250,248,.6)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:1100px){
  .grid-3{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .grid-2-founder,.grid-2-eq{grid-template-columns:1fr}
  .founder{flex-direction:column}
  .founder-img{width:100%;height:260px}
  .grid-2-a{grid-template-columns:1fr;gap:44px}
  .grid-4{grid-template-columns:1fr 1fr;gap:28px}
  .band-accent{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav,.head-in>.btn-dark{display:none}
  .burger{display:flex}
  .grid-2{grid-template-columns:1fr}
  .founder{flex-direction:column}
  .founder-img{width:100%;height:240px}
  .cta-band{flex-direction:column;border-radius:28px;text-align:center;gap:18px}
  .foot-in{flex-direction:column;text-align:center}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .faq-a p{padding-right:8px}
}