/* Klaudia Pingot, podgląd trzech sekcji. Kierunek: Ciemna woda. */

:root{
  --tlo:#0c1014;
  --tlo-2:#111820;
  --tlo-3:#0a1620;
  --linia:#1e2a34;
  --tekst:#e9eff3;
  --tekst-2:#a3b1bc;
  --tekst-3:#75858f;
  --blekit:#0f94c9;
  --blekit-jasny:#5fb6dd;
  --blekit-ciemny:#0a6d96;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shell:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--tlo);
  color:var(--tekst);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 28px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--blekit);color:#fff;
  padding:10px 16px;z-index:50;font-size:13px;
}
.skip:focus{left:12px;top:12px}

.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blekit-jasny);margin:0 0 18px;font-weight:400;
}

.btn{
  display:inline-block;background:var(--blekit);color:#fff;text-decoration:none;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding:14px 26px;border:0;cursor:pointer;font-family:var(--sans);
  transition:background .25s ease;white-space:nowrap;
}
.btn:hover{background:#12a6e0}
.btn:focus-visible,.demo-btn:focus-visible,.nav a:focus-visible,.link:focus-visible,input:focus-visible{
  outline:2px solid var(--blekit-jasny);outline-offset:3px;
}
.btn-full{width:100%;text-align:center}

/* topbar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:10}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
.mark{
  font-family:var(--serif);font-size:19px;text-decoration:none;line-height:1.15;
  display:flex;flex-direction:column;
}
.mark span{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--blekit-jasny);margin-top:2px;
}
.nav{display:flex;gap:30px}
.nav a{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--tekst-2);transition:color .2s ease;
}
.nav a:hover{color:var(--tekst)}

/* 1. hero */
.hero{position:relative;isolation:isolate;padding-top:170px}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(2);transform-origin:6% 12%}
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(94deg,rgba(8,12,16,.95) 0%,rgba(8,12,16,.86) 40%,rgba(8,12,16,.58) 72%,rgba(8,12,16,.74) 100%),
    linear-gradient(to bottom,rgba(8,12,16,.55) 0%,rgba(8,12,16,.12) 28%,rgba(8,12,16,.92) 94%);
}
.curve{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.75}

.hero-in{padding-bottom:96px;max-width:var(--shell)}
.hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.04;max-width:14ch}
.lead{margin-top:24px;color:var(--tekst-2);font-size:clamp(15px,1.6vw,18px);max-width:52ch}

.teraz{margin-top:44px;max-width:660px}
.teraz-states{position:relative;border:1px solid var(--linia);background:rgba(12,18,24,.72);backdrop-filter:blur(6px)}
.teraz-state{
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1);
}
.teraz-state[data-state="premiera"]{position:absolute;inset:0}
.teraz-state.is-off{opacity:0;transform:translateY(10px);pointer-events:none}
.teraz-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--blekit-jasny)}
.teraz-title{font-family:var(--serif);font-size:21px;line-height:1.3;margin-top:8px;max-width:26ch}
.teraz-sub{font-size:13.5px;color:var(--tekst-3);margin-top:6px;max-width:40ch;line-height:1.6}
.teraz-txt{flex:1 1 320px;min-width:0}
.teraz-state > .btn{flex:0 0 auto}

.demo{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.demo-tag{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-3);
  border:1px solid var(--linia);padding:3px 9px;border-radius:99px;
}
.demo-btn{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-weight:300;
  font-size:13px;color:var(--tekst-2);border-bottom:1px solid var(--linia);
  transition:color .2s ease,border-color .2s ease;
}
.demo-btn:hover{color:var(--blekit-jasny);border-color:var(--blekit-ciemny)}

/* 2. pasek dowodu, cisza */
.dowod{border-top:1px solid var(--linia);background:rgba(8,12,16,.82);position:relative}
.dowod-in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 34px;
  padding-top:22px;padding-bottom:22px;
  font-size:12px;line-height:1.55;color:var(--tekst-3);letter-spacing:.01em;
}
.dowod-in b{display:block;color:var(--tekst-2);font-weight:500;font-size:12.5px;letter-spacing:.03em}

/* 3. kim jestem */
.kim{background:var(--tlo-2);padding:104px 0}
.kim-in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:start}
.portret{margin:0;border:1px solid var(--linia)}
.portret img{width:100%;height:auto;filter:grayscale(1) contrast(1.04)}
.kontrast{
  font-size:clamp(30px,4vw,46px);line-height:1.16;display:flex;flex-wrap:wrap;
  gap:0 14px;position:relative;padding-bottom:20px;
}
.kontrast .w{
  display:inline-block;opacity:0;transform:translateY(12px);
  transition:opacity .6s ease var(--d),transform .6s cubic-bezier(.22,.61,.36,1) var(--d);
}
.kontrast.widoczne .w{opacity:1;transform:none}
.kontrast .sep{color:var(--tekst-3);font-size:.62em;align-self:center}
.kontrast .hi{color:var(--blekit-jasny)}
.podkres{
  position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--blekit);
  transition:width .9s cubic-bezier(.22,.61,.36,1) .75s;
}
.kontrast.widoczne .podkres{width:min(100%,520px)}
.kim-p{margin-top:22px;color:var(--tekst-2);max-width:60ch;font-size:15.5px}
.link{
  display:inline-block;margin-top:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blekit-jasny);text-decoration:none;border-bottom:1px solid var(--blekit-ciemny);padding-bottom:3px;
}

/* 4. medytacja */
.medy{background:var(--tlo-3);padding:110px 0;border-top:1px solid var(--linia)}
.medy-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:70px;align-items:center}
.oddech{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.oddech .ring{
  width:300px;height:300px;border-radius:50%;border:1px solid #2b7699;
  opacity:.4;transform:scale(.94);display:block;
}
.oddech .dot{
  position:absolute;width:168px;height:168px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#4bb6e2,#0a5c80 62%,#073d57);
  transform:scale(.72);display:block;
}
.oddech.oddycha .dot{animation:oddech 7s cubic-bezier(.4,0,.4,1) forwards}
.oddech.oddycha .ring{animation:pierscien 7s ease forwards}
@keyframes oddech{
  0%{transform:scale(.72)}
  28%{transform:scale(1)}
  58%{transform:scale(1)}
  92%{transform:scale(.78)}
  100%{transform:scale(.78)}
}
@keyframes pierscien{
  0%{opacity:.3;transform:scale(.94)}
  28%{opacity:.85;transform:scale(1.05)}
  100%{opacity:.45;transform:scale(1)}
}
.medy h2{font-size:clamp(28px,3.6vw,42px);line-height:1.16}
.medy-p{margin-top:20px;color:var(--tekst-2);max-width:52ch}
.medy-p-min{font-size:14px;color:var(--tekst-3)}
.form{margin-top:34px;display:flex;flex-direction:column;gap:14px;max-width:440px}
.pole{display:flex;flex-direction:column;gap:7px}
.pole span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-3)}
.pole input{
  background:rgba(255,255,255,.03);border:1px solid var(--linia);color:var(--tekst);
  padding:13px 15px;font-family:var(--sans);font-weight:300;font-size:15px;border-radius:0;
}
.pole input::placeholder{color:#4e5c66}
.pole input:focus{border-color:var(--blekit-ciemny);outline:none}
.form-info{font-size:12px;color:var(--tekst-3);margin-top:2px}

/* stopka */
.stopka{border-top:1px solid var(--linia);padding:30px 0 44px}
.stopka-nota{font-size:12.5px;color:var(--tekst-3);max-width:70ch}
.stopka-nota a{color:var(--tekst-2)}

/* 1024 */
@media (max-width:1024px){
  .kim-in{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px}
  .medy-in{grid-template-columns:1fr;gap:46px}
  .oddech{min-height:220px;order:2}
  .medy-tresc{order:1}
  .oddech .ring{width:190px;height:190px}
  .oddech .dot{width:106px;height:106px}
}

/* 700 */
@media (max-width:700px){
  .shell{padding:0 20px}
  .topbar{background:linear-gradient(to bottom,rgba(8,12,16,.94) 0%,rgba(8,12,16,.72) 55%,rgba(8,12,16,0) 100%)}
  .topbar-in{padding-top:16px;padding-bottom:26px}
  .nav{gap:18px}
  .nav a:first-child{display:none}
  .hero{padding-top:0}
  .hero-bg{position:relative;z-index:0;height:300px}
  .hero-bg img{height:300px;transform:scale(2.05);transform-origin:31% 24%}
  .scrim{
    background:
      linear-gradient(to bottom,rgba(8,12,16,.88) 0%,rgba(8,12,16,.42) 22%,rgba(8,12,16,.2) 46%,rgba(8,12,16,.74) 84%,rgba(8,12,16,.98) 100%);
  }
  .hero-in{padding-top:38px;padding-bottom:56px}
  .hero h1{max-width:none}
  .teraz{margin-top:32px}
  .teraz-state{padding:22px 20px;gap:18px}
  .teraz-state .btn{width:100%;text-align:center}
  .teraz-title{font-size:19px}
  .dowod-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;font-size:11.5px}
  .kim{padding:72px 0}
  .kim-in{grid-template-columns:1fr;gap:34px}
  .portret{order:2;max-width:280px}
  .kim-tresc{order:1}
  .kontrast{gap:0 10px}
  .medy{padding:76px 0}
  .form{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .kontrast .w{opacity:1;transform:none}
  .kontrast .podkres{width:min(100%,520px)}
  .r{opacity:1;transform:none}
}

/* wejście pierwszego ekranu, bez biblioteki */
.r{opacity:0;transform:translateY(14px);animation:wejscie .8s cubic-bezier(.22,.61,.36,1) forwards}
.r1{animation-delay:.05s}
.r2{animation-delay:.16s}
.r3{animation-delay:.3s}
.r4{animation-delay:.44s}
@keyframes wejscie{to{opacity:1;transform:none}}