/* ==========================================================================
   eloelo — design system: komponenty i wzorce motion
   System B (duotone D2): tuszowe obrysy + offset-cień 2px, naklejka „elo!",
   zakreślacze; gradient fiolet→turkus TYLKO na elementach łączących.
   ========================================================================== */

/* ── marka / logo ────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:10px;}
.mark{position:relative;width:30px;height:22px;display:inline-block;}
.mark i{position:absolute;top:0;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;}
.mark i:last-child{left:8px;border-color:var(--accent);}
.brand b{font-weight:500;font-size:18px;letter-spacing:.01em;}
/* wordmark eloelo: pierwsze „elo" fiolet (ty), drugie turkus (ktoś) */
.brand .wordmark{font-family:'Space Grotesk',var(--mono);font-weight:700;font-size:36px;letter-spacing:-0.03em;color:var(--ink);}
.brand .wordmark span{color:var(--ink);}
.brand .mark-face{display:block;flex:0 0 auto;}
.mark-face .eye{transform-box:fill-box;transform-origin:center;animation:eyeBlink 4.4s ease-in-out infinite;}
.mark-face .eye.r{animation-delay:.12s;}
.brand .mark-face .eye{animation-duration:3.6s;}
@keyframes eyeBlink{0%,76%,100%{transform:scaleY(1);}83%,89%{transform:scaleY(.06);}95%{transform:scaleY(1);}}
@media (prefers-reduced-motion: reduce){.mark-face .eye,.brand .mark-face .eye,.brand .mark-face .eye.r{animation:none;}}

/* ── navbar (sticky; tło pojawia się po zjechaniu w dół) ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:var(--paper-deep);border-bottom:2px solid var(--ink);
}
.nav-inner{
  max-width:960px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:16px;
}
.nav .brand{flex:0 0 auto;text-decoration:none;color:inherit;}
.nav-links{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:26px;}
.nav-links a{
  font-family:var(--serif);font-weight:600;font-size:15px;
  color:var(--ink);text-decoration:none;transition:color .15s ease;
}
.nav-links a:hover{color:var(--accent-deep);}
.nav-cta{flex:0 0 auto;margin-left:auto;margin-right:6px;}
.pill.pill-sm{padding:13px 28px;font-size:15px;}
/* mobile-first: przy wąskim ekranie zostają logo + CTA, linki chowamy */
@media(max-width:600px){
  .nav-links{display:none;}
  .nav-inner{padding:12px 16px;}
  .brand .wordmark{font-size:31px;}
  .nav .pill.pill-sm{padding:11px 18px;font-size:13.5px;}
  .nav .arr{display:none;}
}

/* ── HERO ────────────────────────────────────────────── */
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;}
.hero .brand{margin-bottom:64px;}
.hero h1{
  font-size:clamp(44px,7.5vw,84px);
  line-height:1.04;font-weight:500;letter-spacing:-.015em;max-width:20ch;
}
.hero h1 em{font-style:italic;}
.fn-ref{font-family:var(--mono);font-size:.35em;vertical-align:super;color:var(--accent-deep);text-decoration:none;}
.hero .footnote{margin-top:auto;padding-top:56px;}
.automatyzm{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:30px;}
.automatyzm em{font-style:normal;color:#fff;background:var(--accent);padding:2px 7px;border-radius:4px;}

/* ── trust: pasek „część PARP Future Camp" + microcopy pod CTA ── */
.trust-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:22px;
}
.trust-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.cta-note{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);margin-top:20px;}
.cta-note b{color:var(--ink);font-weight:500;}


/* ── pasma sekcji (tinty design systemu) — full-bleed ── */
.band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.band-vio{background:var(--vio-tint);}
.band-tur{background:var(--tur-tint);}
.band-white{background:var(--paper-deep);}
.band + footer.colophon{border-top:0;}
.glue{white-space:nowrap;}
/* zakreślacz = pastel przeciwnej barwy niż dominanta sekcji;
   dwa sąsiednie nagłówki na tym samym pasmie nie dublują koloru */
.band-tur h2.sectitle em{background:var(--vio-pastel);}
#faq h2.sectitle em{background:var(--vio-pastel);}
.band + section{border-top:0;}
.band + .band{border-top:0;}
.duets + .band, .duets + section{border-top:0;}

/* ── HERO dwukolumnowe (treść + żywa karta) ──────────── */
.hero-x{position:relative;min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding:120px calc(50vw - 50%) 72px;background:var(--vio-tint);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.trust-top{position:absolute;top:116px;left:0;right:0;text-align:center;}
.trust-top .trust-eyebrow{margin-bottom:0;}
@media(max-width:860px){.hero-x{grid-template-columns:minmax(0,1fr);gap:40px;min-height:auto;padding:104px calc(50vw - 50%) 52px;}.hero-x>*{min-width:0;}}
@media(max-width:600px){
  .hero-x{padding:96px calc(50vw - 50%) 44px;}
}
.hero-x .lead .footnote{margin-top:26px;line-height:1.6;}
.hero-x .lead h1{font-family:var(--disp);font-size:clamp(40px,6vw,68px);line-height:1.06;font-weight:700;letter-spacing:-.03em;max-width:18ch;}
.hero-x .lead h1 em{font-style:normal;background:var(--accent-2);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ── żywa karta (wypełnia się sama) ──────────────────── */
.livecard-wrap{position:relative;}
.livecard-wrap::before{content:'';position:absolute;inset:26px -22px -24px 26px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:2px solid var(--ink);border-radius:20px;transform:rotate(-1.6deg);}
.livecard{
  background:var(--paper-deep);border:2px solid var(--ink);border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  padding:30px 32px 34px;position:relative;transform:rotate(.8deg);
}
.livecard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.livecard .perf{display:none;}
.livecard .no{position:absolute;top:16px;left:20px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);}
.livecard .lc-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.livecard .lc-id{margin-left:18px;}
.livecard .lc-av{width:62px;height:62px;border-radius:50%;background:var(--accent-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:21px;
  border:2px solid var(--ink);flex:0 0 auto;}
.livecard .name{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.02em;min-height:1.1em;margin-left:0;}
.livecard .name .caret{border-right:2px solid var(--accent);animation:cb 1s steps(1) infinite;}
@keyframes cb{50%{opacity:0;}}
.livecard .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:3px 0 0 0;opacity:0;transition:opacity .4s;}
.livecard .score{font-family:var(--disp);font-size:60px;font-weight:700;line-height:1;letter-spacing:-.04em;margin-left:0;opacity:0;transition:opacity .4s;}
.livecard .score small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
.livecard .dims{margin:22px 0 0 0;gap:11px;}
.livecard .dim .bar i{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1);}
.livecard .lc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;opacity:0;transition:opacity .4s;}
.livecard.done .lc-chips{opacity:1;}
.livecard .lchip{font-family:var(--serif);font-weight:600;font-size:12.5px;border:1.5px solid var(--ink);border-radius:999px;padding:4px 13px;}
.livecard .lchip.them{background:var(--tur-pastel);}
.livecard .lchip.me{background:var(--vio-pastel);}
.livecard .foot{margin:18px 0 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-soft);opacity:0;transition:opacity .5s;}
.livecard .foot .idx{font-family:var(--mono);font-size:10px;color:var(--accent-deep);margin-right:6px;}
.livecard .stamp{
  position:absolute;top:-26px;right:-20px;margin:0;opacity:0;
  font-family:var(--disp);font-size:25px;font-weight:700;letter-spacing:0;text-transform:none;
  background:var(--accent-2);color:#fff;border:2.5px solid #fff;border-radius:999px;padding:10px 26px;
  box-shadow:2px 2px 0 rgba(23,22,26,.85);
  transform:rotate(-4deg) scale(1.12);transition:opacity .3s ease, transform .3s ease;
}
.livecard.done .stamp{opacity:1;transform:rotate(-4deg) scale(1);}
.livecard-cap{margin-top:46px;position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center;}
.livecard-cap b{color:var(--accent-deep);}
@media (prefers-reduced-motion: reduce){
  .livecard .name .caret{animation:none;}
  .livecard .dim .bar i{transition:none;}
}

/* terminal prompt nad hero */
.term{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:26px;}
.term .cur{display:inline-block;width:.6em;border-bottom:2px solid var(--accent);animation:blink 1.1s steps(1) infinite;}
.term b{color:var(--accent-2-deep);font-weight:500;}
@keyframes blink{50%{opacity:0;}}

/* rotator kroków */
.rotator{margin:40px 0 8px;display:flex;align-items:baseline;gap:14px;}
.rotator .step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--paper-deep);border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px;white-space:nowrap;}
.rotator .word{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.01em;min-width:20ch;transition:opacity .25s ease, transform .25s ease;}
.rotator .word.out{opacity:0;transform:translateY(6px);}

/* ── CTA / pigułki ───────────────────────────────────── */
.cta{margin-top:36px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.pill{
  display:inline-block;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.01em;
  background:var(--accent);color:#fff;border:2px solid var(--ink);
  padding:13px 32px;border-radius:999px;text-decoration:none;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pill:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.pill.ghost{background:var(--paper-deep);color:var(--ink);}

/* ── marquee: wielkie duety ──────────────────────────── */
.duets{background:var(--plum);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding:15px 0;
  margin:0 calc(50% - 50vw);}
.duets .track{display:inline-block;animation:scrollX 36s linear infinite;}
.duets:hover .track{animation-play-state:paused;}
.duets span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8B8595;margin:0 26px;}
.duets b{color:#EFEFED;font-weight:500;}
.duets .you b{color:transparent;background:linear-gradient(90deg,#C39BFF,#5CE6D8);-webkit-background-clip:text;background-clip:text;}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── fotografia vintage ──────────────────────────────── */
.vphoto{position:relative;overflow:hidden;background:var(--paper-deep);}
.vphoto img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:sepia(.38) saturate(.72) contrast(.9) brightness(1.04);
}
.vphoto::after{ /* ziarno */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.vphoto::before{ /* winieta + prześwietlenie */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(30,26,22,.28) 100%),
    linear-gradient(200deg, rgba(255,240,200,.18), transparent 40%);
}
.photoband{margin:0 -24px;position:relative;}
.photoband .vphoto{height:64vh;min-height:380px;}
.photoband .caption{
  position:absolute;left:24px;bottom:20px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:rgba(30,26,22,.72);padding:7px 12px;
}
.prints{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;align-items:start;}
.print{
  background:#FBF8F0;border:1px solid var(--rule);padding:12px 12px 14px;
  box-shadow:2px 4px 0 rgba(30,26,22,.14);transform:rotate(-1.4deg);
}
.print:nth-child(2){transform:rotate(1.1deg);}
.print:nth-child(3){transform:rotate(-.6deg);}
.print .vphoto{aspect-ratio:4/3;}
.print figcaption{
  display:flex;justify-content:space-between;gap:8px;margin-top:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}

/* ── manifest editorial (odwrócone tło) ──────────────── */
.manifest-ed{background:var(--ink);color:var(--paper);margin:0 -24px;padding:120px 24px;}
.manifest-ed .inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:180px 1fr;gap:48px;}
@media(max-width:760px){.manifest-ed .inner{grid-template-columns:1fr;gap:24px;}}
.manifest-ed .col-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,227,.5);}
.manifest-ed .letter{font-size:clamp(20px,2.4vw,26px);line-height:1.55;max-width:52ch;}
.manifest-ed .letter p{margin-bottom:22px;}
.manifest-ed .fill-text{font-size:inherit;line-height:inherit;max-width:none;font-weight:400;}
.manifest-ed .fill-text .w{color:rgba(244,241,234,.25);}
.manifest-ed .fill-text .w.on{color:var(--paper);}
.manifest-ed .fill-text .w.acc.on{color:var(--paper);font-style:italic;}
.manifest-ed .fnote{font-size:14px;color:rgba(244,241,234,.55);max-width:48ch;margin-top:34px;}
.manifest-ed .fnote .idx{font-family:var(--mono);font-size:11px;color:var(--accent);margin-right:8px;}
.manifest-ed .sig{margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(244,241,234,.6);text-align:right;}

/* ── scroll-fill (tekst wypełnia się na śliwce) ──────── */
.fill-text{font-family:var(--disp);font-size:clamp(28px,4.2vw,46px);line-height:1.32;font-weight:600;max-width:28ch;letter-spacing:-.01em;}
.fill-text .w{color:rgba(239,239,237,.18);transition:color .25s linear;}
.fill-text .w.on{color:#EFEFED;}
.fill-text .w.acc.on{color:transparent;background:linear-gradient(90deg,#C39BFF,#5CE6D8);-webkit-background-clip:text;background-clip:text;font-style:normal;}
/* tryb „litera po literze": skokowo, większy kontrast, kursor piszący */
.fill-text[data-fill="letter"] .w{transition:none;color:rgba(239,239,237,.12);}
.fill-text[data-fill="letter"] .w.on{color:#EFEFED;}
.fill-text[data-fill="letter"] .w.acc.on{color:#fff;background:var(--accent);-webkit-background-clip:initial;background-clip:initial;}
.fill-text[data-fill="letter"] .w.tip{box-shadow:2px 0 0 var(--accent);animation:tipblink 1s steps(1) infinite;}
@keyframes tipblink{50%{box-shadow:2px 0 0 transparent;}}

/* ── inline-chipy w zdaniu ───────────────────────────── */
[data-random-stories]{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:stretch;}
.ichip-line{flex:1 1 460px;max-width:620px;font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);
  line-height:1.75;text-align:left;color:var(--ink);
  background:var(--paper-deep);border:2px solid var(--ink);border-radius:16px;box-shadow:2px 2px 0 var(--ink);padding:28px 32px;rotate:-.5deg;}
.ichip-line:nth-child(2){rotate:.5deg;}
.ichip-line:nth-child(3){rotate:-.4deg;}
.ichip-line .ichip{font-size:.6em;}
.ichip{
  display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  padding:0 .06em;font-family:var(--disp);font-weight:700;font-size:1em;
  letter-spacing:-.01em;white-space:nowrap;
}
.ichip .av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);color:#fff;border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:12px;
}
/* w zdaniu-historii: pierwsza osoba fioletowa (ty-strona), druga turkusowa */
.ichip-line .glue .ichip .av{background:var(--accent-2);}
.ichip.pct{padding:0 .06em;font-family:var(--serif);font-weight:400;font-size:1em;color:var(--ink);}
.ichip.pct b{font-family:var(--disp);color:var(--ink);font-weight:700;font-size:1.2em;margin-right:.14em;}

/* ── manifest na śliwce (scroll-fill) ────────────────── */
.manifest-x{padding:128px calc(50vw - 50%);background:var(--plum);margin:0 calc(50% - 50vw);}
.manifest-x .fill-text{max-width:22ch;margin:0 auto;text-align:center;font-size:clamp(30px,5vw,58px);line-height:1.24;font-weight:400;}
.manifest-x .fill-text p{margin-bottom:.42em;}
.manifest-x .footnote{margin:30px auto 0;text-align:center;}
.manifest-x .sig{margin-top:20px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#8B8595;}
.manifest-x .manifest-mark{display:flex;justify-content:center;margin-bottom:38px;}
.manifest-x .manifest-mark .mark{transform:scale(1.8);}
/* ikona app (radial duotone) nad manifestem */
.manifest-x .manifest-mark{margin-bottom:44px;}
.app-tile{width:98px;height:98px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%, #A55CFF 0%, #7E7BE2 55%, #2FD4C4 100%);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);}
.app-tile svg{width:88px;height:60px;}
/* wariant z mniejszą czcionką + szerszy blok treści */
.manifest-x.sm{padding:96px 0;}
.manifest-x.sm .fill-text{max-width:52ch;font-size:clamp(24px,3.6vw,38px);line-height:1.36;}
/* wariant „tall": wysoka sekcja + przypięty tekst - przewijasz całość */
.manifest-x.tall{min-height:280vh;padding:0;}
.manifest-x.tall .sticky-inner{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;
  z-index:0;overflow:hidden;}
/* ambient: dwie duotonowe poświaty dryfują za tekstem */
.manifest-x.tall .sticky-inner::before,
.manifest-x.tall .sticky-inner::after{
  content:'';position:absolute;z-index:-1;width:72vw;height:72vw;border-radius:50%;
  pointer-events:none;filter:blur(2px);
}
.manifest-x.tall .sticky-inner::before{
  left:-22vw;top:-18vw;
  background:radial-gradient(circle, rgba(165,92,255,.34) 0%, rgba(165,92,255,.12) 45%, transparent 70%);
  animation:blobA 17s ease-in-out infinite alternate;
}
.manifest-x.tall .sticky-inner::after{
  right:-24vw;bottom:-20vw;
  background:radial-gradient(circle, rgba(47,212,196,.28) 0%, rgba(47,212,196,.10) 45%, transparent 70%);
  animation:blobB 21s ease-in-out infinite alternate;
}
@keyframes blobA{from{transform:translate(0,0) scale(1);}to{transform:translate(9vw,7vh) scale(1.12);}}
@keyframes blobB{from{transform:translate(0,0) scale(1.08);}to{transform:translate(-8vw,-8vh) scale(.96);}}
@media (prefers-reduced-motion: reduce){
  .manifest-x.tall .sticky-inner::before,.manifest-x.tall .sticky-inner::after{animation:none;}
}

/* ── karta eventu w sekcji beta ──────────────────────── */
.beta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
@media(max-width:860px){.beta-grid{grid-template-columns:1fr;gap:32px;}}
.event-card{background:var(--paper-deep);border:2px solid var(--ink);border-radius:18px;
  box-shadow:3px 3px 0 var(--ink);padding:30px 32px;transform:rotate(.8deg);max-width:420px;justify-self:center;align-self:center;margin:auto 0;width:100%;}
.event-card .ec-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2-deep);}
.event-card .ec-name{font-family:var(--disp);font-size:29px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:10px;}
.event-card .ec-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-top:6px;text-transform:uppercase;}
.event-card .ec-people{display:flex;align-items:center;margin-top:22px;}
.event-card .ec-av{width:40px;height:40px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;border:2px solid var(--paper-deep);margin-right:-10px;flex:0 0 auto;}
.event-card .ec-more{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);margin-left:22px;}

/* ── odznaki (dawne stemple) ─────────────────────────── */
.stamp{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--tur-pastel);border:1.5px solid var(--ink);padding:6px 14px;border-radius:999px;
}
.stamp.round{border-radius:999px;}

/* ── chipy (intencje / wybór) ────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.chip-x{
  font-family:var(--mono);font-size:15px;letter-spacing:.03em;
  border:1.5px solid var(--rule);padding:13px 26px;border-radius:2px;background:transparent;cursor:pointer;color:var(--ink);
  transition:transform .12s ease, border-color .12s ease;
}
.chip-x:hover{border-color:var(--ink-soft);transform:translateY(-1px);}
.chip-x.sel{
  border-color:var(--accent);color:var(--accent);background:rgba(0,0,0,.025);
  transform:rotate(-1.2deg);box-shadow:1px 2px 0 rgba(30,26,22,.15);
}
.chip-x.sel::before{content:'✓ ';}

/* ── karta katalogowa ────────────────────────────────── */
.card{
  background:var(--paper-deep);border:1px solid var(--rule);
  box-shadow:2px 3px 0 rgba(30,26,22,.12);
  padding:26px 28px;position:relative;
}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);opacity:.6;}
.card .no{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);}
.card h3{font-size:27px;font-weight:500;margin-bottom:2px;}
.card .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;}
.card .score{font-size:56px;font-weight:500;line-height:1;letter-spacing:-.02em;}
.card .score small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);display:block;margin-top:6px;text-transform:uppercase;}
.card .why{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:16px;color:var(--ink-soft);}
.card .why .idx{font-family:var(--mono);font-size:11px;color:var(--accent);margin-right:6px;}
.card .gap{margin-top:10px;font-size:15px;font-style:italic;color:var(--ink-soft);}

/* ── kwestionariusz BFI ──────────────────────────────── */
.quiz{border:1px solid var(--rule);padding:26px 28px;background:var(--paper);}
.quiz .qno{display:flex;justify-content:space-between;margin-bottom:18px;}
.quiz .q{font-size:25px;font-style:italic;margin-bottom:24px;max-width:30ch;}
.likert{display:flex;flex-direction:column;gap:8px;}
.likert button{
  display:flex;align-items:center;gap:12px;text-align:left;
  font-family:var(--serif);font-size:16px;color:var(--ink);
  background:transparent;border:1px solid var(--rule);padding:12px 16px;cursor:pointer;
}
.likert button .box{width:13px;height:13px;border:1.5px solid var(--ink-soft);display:inline-block;flex:0 0 auto;}
.likert button.sel{border-color:var(--accent);}
.likert button.sel .box{background:var(--accent);border-color:var(--accent);}
.quiz .skip{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-decoration:underline;background:none;border:0;cursor:pointer;}

/* ── moment połączenia ───────────────────────────────── */
.connected{border:1px solid var(--rule);padding:34px 28px;text-align:center;background:var(--paper);}
.connected h3{font-size:30px;margin:16px 0 6px;}
.connected p{color:var(--ink-soft);font-size:16px;max-width:34ch;margin:0 auto;}
.connected .contact{margin-top:20px;display:inline-block;border:1px solid var(--rule);padding:10px 20px;font-family:var(--mono);font-size:14px;background:var(--paper-deep);}

/* ── wymiary dopasowania ─────────────────────────────── */
.dims{display:flex;flex-direction:column;gap:14px;}
.dim{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:14px;}
.dim .t-meta{font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--ink);}
.dim .bar{height:8px;border-radius:99px;background:var(--paper-deep);border:1.5px solid var(--ink);position:relative;overflow:hidden;}
.dim .bar i{position:absolute;inset:0;right:auto;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.dim .val{font-family:var(--mono);font-size:13px;text-align:right;}

/* ── grid pomocniczy ─────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}
.demo-label{margin-bottom:14px;}

/* ── case: karta dopasowania ─────────────────────────── */
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:34px 0;}
@media(max-width:760px){.case-pair{grid-template-columns:1fr;}}
.case-step{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:44px 0 16px;}
.case-quotes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px;}
@media(max-width:760px){.case-quotes{grid-template-columns:1fr;}}
.cquote{border-left:2px solid var(--accent);padding:4px 0 4px 18px;}
.cquote p{font-size:19px;font-style:italic;line-height:1.5;}
.cquote .who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;display:block;}
.case-connect{text-align:center;margin:40px 0 8px;}

/* ── pas kart (wzorzec 222) ──────────────────────────── */
.cardstrip{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 22px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.cardstrip::-webkit-scrollbar{height:4px;}
.cardstrip::-webkit-scrollbar-thumb{background:var(--rule);}
.cardstrip .card{min-width:270px;flex:0 0 auto;scroll-snap-align:start;}
.invite-pill{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  border:1px solid var(--rule);border-radius:999px;padding:8px 16px;
  color:var(--ink);text-decoration:none;transition:border-color .15s ease,color .15s ease;
}
.invite-pill b{font-weight:500;}
.invite-pill:hover{border-color:var(--accent);color:var(--accent);}
.invite-pill .mk{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:0 0 auto;}

/* ── steps: „jak to działa" 3 kroki ──────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.steps.four{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.steps.four{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.steps,.steps.four{grid-template-columns:1fr;}}
.step-card{background:var(--paper-deep);border:2px solid var(--ink);border-radius:14px;box-shadow:2px 2px 0 var(--ink);padding:20px 22px;transition:transform .15s ease, box-shadow .15s ease;}
.steps .step-card:nth-child(1){rotate:-.6deg;}
.steps .step-card:nth-child(2){rotate:.5deg;}
.steps .step-card:nth-child(3){rotate:-.4deg;}
.steps .step-card:nth-child(4){rotate:.7deg;}
.step-card:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.step-card .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px;}
.step-card h3{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;}
.step-card h3 em{font-style:normal;background:var(--vio-pastel);padding:0 .12em;}
.step-card p{font-size:15px;color:#3A393F;max-width:34ch;}

/* ── waitlista: formularz ────────────────────────────── */
.wl-form{border:1px solid var(--rule);background:var(--paper);padding:32px 30px;max-width:520px;}
.wl-form .field{margin-bottom:20px;}
.wl-form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.wl-form input[type=text],.wl-form input[type=email]{
  width:100%;font-family:var(--serif);font-size:18px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 2px;
}
.wl-form input:focus{outline:0;border-bottom-color:var(--accent);}
.wl-form .roles{display:flex;gap:10px;flex-wrap:wrap;}
.wl-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);margin:6px 0 22px;}
.wl-form .consent input{margin-top:5px;}
.wl-form .consent a{color:var(--accent);}
.wl-form button[type=submit]{
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;cursor:pointer;
  background:var(--accent);color:var(--paper);border:1px solid var(--accent);
  padding:14px 34px;border-radius:999px;
}
.wl-form button[type=submit]:disabled{opacity:.5;cursor:not-allowed;}
.wl-form .done{font-size:17px;color:var(--ink);}
.wl-form .done .stamp{margin-bottom:14px;}
.wl-form .err{color:#8a2d2d;font-size:14px;margin-top:10px;}

/* ── FAQ: siatka kart z obrysem ──────────────────────── */
.faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-items:start;}
@media(max-width:760px){.faq{grid-template-columns:1fr;}}
.faq details{background:var(--paper-deep);border:1.5px solid var(--ink);border-radius:12px;
  padding:16px 20px;box-shadow:2px 2px 0 var(--ink);transition:transform .15s ease, box-shadow .15s ease;}
.faq details:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.faq details[open]{background:var(--vio-tint);}
.faq summary{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--accent-deep);}
.faq details[open] summary::after{content:'–';}
.faq p{margin-top:12px;font-size:16px;color:var(--ink-soft);max-width:60ch;}
.faq p .idx{font-family:var(--mono);font-size:11px;color:var(--accent-deep);margin-right:6px;}

/* ── modal kontakt (odwrócona powierzchnia ink) ──────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 20px;overflow-y:auto;
  background:rgba(29,26,34,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;
}
.modal-backdrop.open{opacity:1;visibility:visible;}
.modal{
  position:relative;width:100%;max-width:520px;margin:auto;
  background:var(--paper-deep);color:var(--ink);border:2px solid var(--ink);
  border-radius:18px;box-shadow:4px 4px 0 var(--ink);
  padding:34px 34px 30px;
  transform:translateY(12px);transition:transform .25s ease;
}
.modal-backdrop.open .modal{transform:none;}
.modal h2{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;display:flex;align-items:center;gap:14px;}
.modal h2 .m-face{flex:0 0 auto;display:block;}
.modal .close{
  position:absolute;top:20px;right:22px;width:34px;height:34px;cursor:pointer;border-radius:50%;
  background:var(--paper-deep);border:1.5px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-size:17px;line-height:1;
  transition:box-shadow .15s ease, background .15s ease;
}
.modal .close:hover{box-shadow:2px 2px 0 var(--ink);background:var(--vio-tint);}
.modal hr{border:0;border-top:1px solid var(--rule);margin:24px 0;}
.modal .blk h3{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px;}
.modal .blk .cap{font-size:15px;color:var(--ink-soft);margin-bottom:16px;}
.modal .m-btn{
  display:block;width:100%;text-align:center;text-decoration:none;
  font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;padding:13px 20px;background:var(--vio-pastel);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.modal .m-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.modal .m-field{margin-bottom:12px;}
.modal input[type=text],.modal input[type=email],.modal textarea{
  width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--paper-deep);border:1.5px solid var(--ink);border-radius:12px;
  padding:14px 16px;
}
.modal input[type=text]::placeholder,.modal input[type=email]::placeholder,.modal textarea::placeholder{color:var(--ink-soft);opacity:.7;}
.modal input[type=text]:focus,.modal input[type=email]:focus,.modal textarea:focus{outline:0;box-shadow:2px 2px 0 var(--accent);}
.modal .consent input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent);}
.modal textarea{min-height:110px;resize:vertical;}
.modal .m-send{
  width:100%;cursor:pointer;margin-top:8px;
  font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.01em;
  background:var(--accent);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:14px 20px;
  box-shadow:2px 2px 0 var(--ink);
}
.modal .m-send:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.modal .m-done{font-size:16px;color:var(--ink-soft);padding:8px 0;}
/* formularz waitlisty wewnątrz modalu - bez własnej ramki/tła */
.modal .wl-lead{font-size:15px;color:var(--ink-soft);margin-bottom:22px;}
.modal .wl-form{border:0;background:transparent;padding:0;max-width:none;}
body.modal-lock{overflow:hidden;}
@media(max-width:600px){.modal{padding:28px 22px 24px;}}

/* ── modal prywatności ───────────────────────────────── */
.modal.modal-privacy{max-width:640px;}
.m-privacy-body>div{max-width:100% !important;font-size:15.5px !important;gap:14px !important;}
.m-privacy-body p strong{font-family:var(--disp);font-weight:700 !important;}
.m-privacy-body .m-loading{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}

/* ── CTA końcowe: całe pasmo fioletowe ───────────────── */
.band-cta{background:var(--accent);}
.cta-panel{position:relative;text-align:center;color:#fff;padding:56px 0 40px;}
/* dekoracje mogą wyjść poza kolumnę — pasmo je dotnie */
.band-cta{overflow:hidden;}
.cta-panel h2{font-family:var(--disp);font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px;}
.cta-panel .cp-sub{font-size:16px;color:rgba(255,255,255,.82);margin:0 0 30px;}
.cta-panel .cp-row{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;}
.cta-panel .pill.cp-cta{background:var(--paper-deep);color:var(--ink);}
.cta-panel .stamp.cp-min{background:var(--accent-2);color:var(--ink);}
.cta-panel .cp-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:rgba(255,255,255,.7);margin:22px 0 0;}
@media(max-width:700px){
  .cta-panel{padding:40px 0 30px;}
}

/* ── modal „mobile-first" przy załóż profil ──────────── */
.modal.modal-signup{max-width:500px;text-align:center;}
.modal-signup h2{font-size:25px;}
.modal-signup h2{justify-content:center;}
/* zrzut ekranu appki pod tytułem */
.modal-signup .sn-shot{display:block;width:230px;margin:16px auto 6px;border:2px solid var(--ink);
  border-radius:22px;box-shadow:3px 3px 0 var(--ink);}
.modal-signup .sn-lead{font-size:15px;color:#3A393F;line-height:1.55;margin:24px 0 22px;}
.modal-signup .sn-wm{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;color:var(--accent);}
.modal-signup .sn-wm span{color:var(--accent-2-deep);}
.modal-signup .sn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.modal-signup .sn-back{cursor:pointer;font-size:15px;}

/* ── baner cookies ───────────────────────────────────── */
.cookie-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);z-index:40;
  width:min(560px, calc(100vw - 24px));background:var(--paper-deep);border:2px solid var(--ink);border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);padding:18px 20px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.cookie-bar.show{transform:translateX(-50%) translateY(0);}
.cookie-bar p{font-size:13.5px;line-height:1.5;color:#3A393F;margin:0 0 14px;}
.cookie-bar p b{font-family:var(--disp);color:var(--ink);}
.cookie-bar .row{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-bar button{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:13.5px;border-radius:999px;padding:10px 20px;
  border:2px solid var(--ink);transition:transform .15s ease, box-shadow .15s ease;box-shadow:2px 2px 0 var(--ink);}
.cookie-bar button:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.cookie-bar .c-all{background:var(--accent);color:#fff;}
.cookie-bar .c-min{background:var(--paper-deep);color:var(--ink);}
@media (prefers-reduced-motion: reduce){.cookie-bar{transition:none;}}

/* ── kolofon / stopka ────────────────────────────────── */
footer.colophon{background:var(--paper-deep);border-top:2px solid var(--ink);
  margin:0 calc(50% - 50vw);padding:36px calc(50vw - 50%) 26vw;
  display:flex;justify-content:center;flex-wrap:wrap;row-gap:10px;align-items:flex-start;
  position:relative;overflow:hidden;}
/* aurora duotone wyrasta od dołu */
footer.colophon::before{content:'';position:absolute;left:0;right:0;bottom:0;height:36vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 95% at 28% 100%, rgba(165,92,255,.85) 0%, rgba(165,92,255,0) 70%),
    radial-gradient(58% 95% at 74% 100%, rgba(47,212,196,.65) 0%, rgba(47,212,196,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(196,150,255,.35) 100%);}
/* gigantyczne eloelo jako tło stopki — na całą szerokość, przycięte dołem */
footer.colophon .wordmark-foot{position:absolute;left:0;right:0;bottom:-0.14em;z-index:0;
  font-family:'Space Grotesk',var(--mono);font-weight:700;
  font-size:35vw;line-height:1;letter-spacing:-0.045em;
  color:rgba(255,255,255,.20);
  -webkit-text-stroke:2px rgba(255,255,255,.65);
  text-align:center;white-space:nowrap;}
/* całe słowa: mysz po lewej pali PRAWE elo, po prawej — LEWE */
footer.colophon .wordmark-foot .w1,
footer.colophon .wordmark-foot .w2{color:rgba(255,255,255,.20);transition:color .16s ease;}
footer.colophon .wordmark-foot .w1.lit,
footer.colophon .wordmark-foot .w2.lit{color:rgba(255,255,255,.9);}
footer.colophon .label{position:relative;z-index:1;flex:1 1 100%;text-align:center;color:var(--ink-soft);}
/* linki stopki: pigułki w systemie */
footer.colophon .foot-links{position:relative;z-index:1;flex:1 1 100%;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:6px;}
footer.colophon .foot-links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;
  background:var(--paper-deep);transition:transform .15s ease, box-shadow .15s ease;box-shadow:2px 2px 0 var(--ink);}
footer.colophon .foot-links a:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
/* naklejka nad gigantem */
footer.colophon .foot-stick{position:absolute;right:7%;bottom:19vw;z-index:2;
  font-family:var(--disp);font-weight:700;font-size:16px;background:var(--accent);color:#fff;
  border:2px solid #fff;border-radius:999px;padding:8px 20px;transform:rotate(-4deg);
  box-shadow:2px 2px 0 rgba(23,22,26,.85);}

/* gigant wyłania się przy dojeździe do stopki (scroll-driven, progressive) */
@supports (animation-timeline: view()){
  footer.colophon .wordmark-foot{animation:footRise linear both;animation-timeline:view();animation-range:entry 0% entry 85%;}
  @keyframes footRise{from{transform:translateY(24%);}to{transform:translateY(0);}}
}
@media (prefers-reduced-motion: reduce){
  footer.colophon .wordmark-foot{animation:none;}
}

/* ── reduced-motion fallback ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rotator .word{transition:none;}
  .pill{transition:none;}
  .fill-text .w{transition:none;color:#EFEFED;}
  .fill-text .w.acc{color:#C39BFF;}
  .duets .track{animation:none;}
  .term .cur{animation:none;}
}

/* ── mobile: nadpisania kart/manifestu (na końcu pliku — kaskada) ── */
@media(max-width:600px){
  .livecard{padding:20px 18px 24px;}
  .livecard .lc-head{gap:10px;margin-bottom:14px;}
  .livecard .lc-av{width:44px;height:44px;font-size:15px;}
  .livecard .name{font-size:22px;}
  .livecard .score{font-size:44px;}
  .livecard .lchip{font-size:11px;padding:3px 10px;}
  .livecard .foot{font-size:12.5px;}
  .livecard .dim{grid-template-columns:96px 1fr 30px;gap:9px;}
  /* naklejka: na środku górnej krawędzi karty */
  .livecard .stamp{font-size:18px;padding:6px 17px;top:-29px;right:auto;left:50%;
    transform:translateX(-50%) rotate(-4deg) scale(1.12);}
  .livecard.done .stamp{transform:translateX(-50%) rotate(-4deg) scale(1);}
  .livecard-wrap{margin-right:6px;}
  .livecard-wrap::before{inset:20px 10px -12px -4px;transform:rotate(1deg);}
  .rotator{flex-wrap:wrap;row-gap:8px;}
  .rotator .word{font-size:19px;min-width:0;flex:1 1 100%;}
  .brand .mark-face{width:58px;height:38px;}
  .manifest-x .fill-text{font-size:clamp(25px,7.6vw,31px);line-height:1.45;max-width:100%;overflow-wrap:break-word;}
  .manifest-x.tall{min-height:220vh;padding-left:0;padding-right:0;}
  .manifest-x.tall .sticky-inner{padding:40px 24px;}
  footer.colophon{padding-bottom:30vw;}
  footer.colophon .foot-stick{display:none;}
  .app-tile{width:92px;height:92px;border-radius:21px;}
  .app-tile svg{width:72px;height:49px;}
}