@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==================================================
   Podstawy — mocna typografia i dwie kontrastowe sceny
   ================================================== */
:root { --bg:#111015; --ink:#f5effb; --lilac:#caa2fb; --paper:#ede4f6; --soft:#a59aae; --line:#ffffff20; --ease:cubic-bezier(.16,1,.3,1); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font-family:'Manrope',Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; }
body.modal-open { overflow:hidden; }
h1,h2,h3,p,figure { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button[hidden],a[hidden],section[hidden] { display:none!important; }
img { max-width:100%; }
::selection { background:var(--lilac); color:var(--bg); }
:focus-visible { outline:2px solid var(--lilac); outline-offset:6px; }
.xoxo-icon { display:inline-block; width:1em; height:1em; vertical-align:-.1em; flex:none; }
.section-inner { width:min(1320px,calc(100% - 128px)); margin-inline:auto; }
.scene { position:relative; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:1.8px; }
.muted { color:var(--soft); }
.accent { color:var(--lilac); }
.text-line { display:block; overflow:clip; padding-block:.08em; margin-block:-.08em; }
.text-line > span { display:block; }
.skip-link { position:fixed; left:20px; top:-100px; background:var(--lilac); color:#19101f; padding:10px 20px; z-index:100; }
.skip-link:focus { top:20px; }
.reading-progress { position:fixed; inset:0 0 auto; height:2px; background:var(--lilac); transform:scaleX(0); transform-origin:left; z-index:40; pointer-events:none; }

/* --- Levitująca nawigacja i dyskretny licznik sekcji --- */
.header { position:fixed; top:22px; left:32px; right:32px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:16px 27px; border:1px solid #ffffff16; border-radius:18px; background:#17121dd9; backdrop-filter:blur(20px); color:#f5effb; transition:background .3s; }
.wordmark { display:inline-flex; align-items:baseline; font-size:29px; font-weight:800; letter-spacing:-2.2px; line-height:1; }
.wordmark span { color:var(--lilac); font-size:.68em; letter-spacing:-1px; }
.header nav { display:flex; align-items:center; gap:36px; font-size:12px; }
.header nav a { transition:color .2s; }
.header nav a:hover,.header nav a[aria-current] { color:var(--lilac); }
.header nav a:last-child { display:flex; align-items:center; gap:17px; }
.header nav .xoxo-icon { width:17px; height:17px; }
.menu-toggle { display:none; }
.scene-rail { position:fixed; z-index:12; top:50%; right:19px; display:flex; flex-direction:column; align-items:center; gap:14px; color:#a48bbf; font-size:9px; mix-blend-mode:normal; }
.rail-line { width:1px; height:68px; background:#9d7dc14d; }

/* ==================================================
   Pierwszy ekran — hasło i przestrzenna scena z logo
   ================================================== */
.hero { min-height:100svh; padding:145px 64px 100px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; overflow:hidden; isolation:isolate; }
.hero .eyebrow { display:flex; align-items:center; gap:11px; margin-bottom:32px; color:#c4b3d5; }
.status-dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--lilac); box-shadow:0 0 0 4px #caa2fb14; }
h1 { font-size:clamp(65px,7.8vw,128px); font-weight:700; line-height:.97; letter-spacing:-.075em; }
.round-link { display:inline-flex; align-items:center; gap:16px; margin-top:27px; font-size:12px; }
.round-link-icon { display:grid; place-items:center; width:47px; height:47px; border-radius:50%; background:var(--lilac); color:#20102f; transition:transform .4s var(--ease),background .3s; font-size:21px; }
.round-link:hover .round-link-icon { transform:rotate(45deg); background:#e5ccff; }
.hero-stage { position:relative; min-width:0; aspect-ratio:1; width:100%; max-width:660px; display:grid; place-items:center; transform:translateY(var(--hero-y,0px)); }
.hero-bottom { position:absolute; bottom:28px; left:64px; right:64px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:9px; letter-spacing:1.2px; color:#988aa7; }
.hero-bottom a { display:flex; gap:24px; align-items:center; text-transform:none; letter-spacing:.2px; }
.hero-bottom .xoxo-icon { font-size:20px; }

/* --- Manifest: tekst odsłaniany w rytmie przewijania --- */
.manifesto { min-height:150svh; color:#24172e; background:var(--paper); }
.manifesto-content { position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:130px 75px; }
.manifesto-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; }
.manifesto-star { color:#9b6ac4; font-size:48px; }
.word-reveal { max-width:1200px; font-size:clamp(48px,6.3vw,92px); line-height:1.15; letter-spacing:-.065em; font-weight:600; }
.word-reveal span { display:inline; transition:opacity .16s linear; }
.manifesto-bottom { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-top:50px; }
.manifesto-bottom p { max-width:480px; font-size:14px; line-height:1.9; color:#6c587b; }
.tiny-label { color:#826791; font-size:9px; letter-spacing:1.5px; text-align:right; flex:none; }
.liquid-edge { height:clamp(60px,7.5vw,120px); width:100%; margin-block:-1px; line-height:0; overflow:hidden; }
.liquid-edge svg { display:block; width:100%; height:100%; fill:var(--paper); }
.dark-to-light svg { fill:var(--lilac); }

/* ==================================================
   Portfolio — jedna realizacja, jeden duży kadr
   ================================================== */
.work { padding-top:55px; }
.work-intro-row { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-top:26px; }
.work h2,.approach h2,.studio h2,.faq h2 { font-size:clamp(45px,5.2vw,78px); letter-spacing:-.065em; line-height:1.08; font-weight:600; }
.work-intro-row > p { flex:none; font-size:13px; color:#b0a2bb; line-height:1.9; padding-bottom:10px; }
.project-scene { min-height:108svh; display:grid; grid-template-columns:.6fr 1.4fr; align-items:center; gap:65px; padding-block:120px; }
.project-copy { position:relative; z-index:2; }
.project-counter { font-size:10px; color:#ac91c0; letter-spacing:1.5px; margin-bottom:28px; display:block; }
.project-copy h3 { font-size:clamp(32px,3.5vw,53px); letter-spacing:-.06em; line-height:1.12; font-weight:600; }
.project-category { color:#a68caf; font-size:11px; margin-top:15px; }
.project-summary { color:#b7aabd; font-size:14px; line-height:1.85; margin-top:25px; }
.project-copy .text-link { margin-top:27px; }
.text-link { display:inline-flex; align-items:center; gap:18px; padding:0 0 8px; border:0; border-bottom:1px solid #a687bc55; color:inherit; background:none; font-size:12px; font-weight:500; cursor:pointer; }
.text-link .xoxo-icon { font-size:18px; transition:transform .3s; }
.text-link:hover .xoxo-icon { transform:translate(3px,-3px); }
.project-art { position:relative; margin:0 8px 35px 0; transform:translateY(var(--project-y,0px)); }
.project-poster { padding:0; border:1px solid #c7a1ed33; border-radius:17px; overflow:hidden; display:block; width:100%; background:#22182d; color:#eadcf7; box-shadow:0 35px 65px #0005; transition:transform .6s var(--ease),box-shadow .6s; }
.project-poster:hover { transform:translateY(-7px); box-shadow:0 40px 75px #0006; }
.browser-bar { height:33px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding-inline:16px; font-size:9px; color:#c0a9d2; }
.browser-dots { display:flex; gap:5px; }
.browser-dots i { display:block; width:5px; height:5px; border-radius:50%; background:#a785bc; }
.browser-domain { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-poster > img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; object-position:top; transition:transform .7s var(--ease); }
.project-poster:hover > img { transform:scale(1.018); }
.project-sticker { position:absolute; top:-22px; right:28px; z-index:3; padding:12px 16px; color:#321c44; background:#e7d1ff; border:1px solid #fffa; border-radius:100px; font-size:9px; font-weight:700; letter-spacing:.8px; transform:rotate(8deg); pointer-events:none; }
.project-phone { position:absolute; width:19%; max-width:145px; bottom:-55px; right:-18px; padding:5px; border-radius:23px; background:#110c16; border:1px solid #aa87c5; box-shadow:-15px 15px 45px #0005; transform:rotate(6deg); pointer-events:none; }
.project-phone img { width:100%; display:block; border-radius:18px; }
.project-scene:nth-child(2) { grid-template-columns:1.4fr .6fr; }
.project-scene:nth-child(2) .project-copy { order:2; }
.project-scene:nth-child(2) .project-art { order:1; margin-right:35px; }
.concepts { padding-block:30px 120px; }
.concepts-intro { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:35px; padding-top:35px; border-top:1px solid var(--line); }
.concepts-intro h3 { font-size:32px; letter-spacing:-1.5px; line-height:1.2; font-weight:500; }
.concepts-intro p { max-width:410px; font-size:12px; color:#a798b4; }
.concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.concept-card { display:block; width:100%; padding:0; border:0; background:none; text-align:left; color:inherit; }
.concept-card img { display:block; width:100%; aspect-ratio:1.5; object-fit:cover; border-radius:12px; transition:transform .5s var(--ease); }
.concept-card:hover img { transform:translateY(-5px); }
.concept-caption { display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:14px; }
.concept-caption > span { font-size:9px; color:#ac98b9; }

/* --- Podejście, o mnie i pytania: każdy blok ma swój rytm --- */
.approach { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:100px; padding-block:140px; border-top:1px solid var(--line); }
.approach-heading { align-self:start; position:sticky; top:150px; }
.approach h2 { margin-top:28px; font-size:clamp(36px,4vw,57px); }
.approach-heading > p:not(.eyebrow) { margin-top:28px; color:#af9fbb; font-size:14px; max-width:380px; }
.approach-flower { display:inline-block; color:#b288d8; font-size:90px; margin-top:40px; }
.step { display:grid; grid-template-columns:32px 1fr 22px; gap:24px; border-top:1px solid #cba5ed36; padding-block:32px; }
.step-number { font-size:10px; color:#a581c4; padding-top:7px; }
.step > [data-icon] { color:#c8a4e2; font-size:20px; padding-top:5px; }
.step h3 { font-size:26px; letter-spacing:-.9px; font-weight:500; }
.step p { color:#ae9dbb; font-size:13px; line-height:1.85; margin-top:15px; }
.step-tag { display:inline-block; font-size:9px; color:#c8a8df; margin-top:19px; letter-spacing:.6px; }
.studio { min-height:95svh; background:#18131e; display:flex; align-items:center; padding-block:120px; }
.studio-grid { display:grid; grid-template-columns:.8fr 1fr; align-items:center; gap:120px; }
.studio-art { position:relative; width:min(100%,400px); transform:rotate(-8deg); margin-inline:auto; }
.studio-art > svg { display:block; width:100%; }
.studio-copy h2 { margin-top:28px; }
.studio-copy > p:not(.eyebrow) { font-size:15px; line-height:1.9; color:#b5a3c3; max-width:480px; margin-top:25px; }
.studio-copy .text-link { margin-top:30px; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:95px; padding-block:130px 90px; }
.faq h2 { margin-top:27px; font-size:clamp(35px,3.7vw,54px); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-child { border-top:1px solid var(--line); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:24px; list-style:none; cursor:pointer; font-size:14px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-plus { position:relative; width:26px; height:26px; border:1px solid #bc94d74a; border-radius:50%; flex:none; }
.faq-plus::before,.faq-plus::after { content:''; position:absolute; top:12px; left:8px; width:9px; height:1px; background:#d6b4ec; }
.faq-plus::after { transform:rotate(90deg); transition:transform .3s; }
details[open] .faq-plus::after { transform:rotate(0deg); }
.faq-list details > p { margin-bottom:25px; padding-right:30px; font-size:13px; line-height:1.85; color:#b29fbf; }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial { border-top:1px solid var(--line); padding-block:55px 95px; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label { color:#987ead; font-size:9px; letter-spacing:1.3px; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial blockquote { max-width:950px; margin:25px 0; font-size:clamp(24px,3.2vw,45px); font-weight:400; letter-spacing:-.04em; line-height:1.5; color:#ccb9d9; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial > p { color:#8e799f; font-size:10px; }
*/

/* ==================================================
   Kontakt i wielki podpis marki — zachowany ulubiony detal
   ================================================== */
.contact { min-height:88svh; display:flex; align-items:center; padding-block:85px 115px; color:#261632; background:var(--lilac); overflow:hidden; }
.contact-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:33px; }
.contact-top > [data-icon] { font-size:50px; }
.contact h2 { font-size:clamp(58px,8.3vw,125px); font-weight:600; line-height:1.02; letter-spacing:-.075em; }
.contact h2 em { font-style:italic; color:#fbf3ff; font-weight:500; }
.contact-bottom { display:flex; justify-content:space-between; align-items:end; gap:55px; margin-top:60px; }
.contact-bottom > p { font-size:14px; line-height:1.9; color:#5b3b72; }
.email-link { display:flex; align-items:center; gap:30px; border-bottom:1px solid #48265b55; padding-block:15px; max-width:100%; }
.email-link > span:first-child { display:grid; gap:7px; min-width:0; }
.email-label { font-size:9px; letter-spacing:1.5px; color:#674380; }
#email-address { font-size:clamp(16px,1.8vw,26px); letter-spacing:-.04em; font-weight:600; overflow-wrap:anywhere; }
.email-arrow { display:grid; place-items:center; width:48px; height:48px; border:1px solid #41205245; border-radius:50%; font-size:23px; flex:none; transition:transform .4s var(--ease),background .4s; }
.email-link:hover .email-arrow { background:#ebd7ff; transform:rotate(45deg); }
.contact :focus-visible { outline-color:#341846; }
.footer { padding-block:65px 35px; }
.footer-signature { display:flex; align-items:baseline; font-size:clamp(60px,15.7vw,245px); line-height:1.2; letter-spacing:-.075em; font-weight:800; color:var(--lilac); width:100%; }
.footer-signature > span { color:transparent; -webkit-text-stroke:1px #bb8ce0; transition:color .5s; }
.footer-signature:hover > span { color:#bb8ce0; }
.footer-signature sup { align-self:start; font-size:.24em; margin-top:.6em; margin-left:.35em; letter-spacing:0; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:48px; color:#94839f; font-size:10px; }
.motion-toggle { background:none; border:0; color:inherit; padding:5px; font-size:10px; }
.footer-bottom a { display:inline-flex; align-items:center; gap:10px; }
.back-to-top { position:fixed; z-index:18; right:24px; bottom:24px; width:42px; height:42px; background:#d6b3ff; color:#291439; border:1px solid #f1ddff; border-radius:50%; display:grid; place-items:center; font-size:21px; box-shadow:0 5px 18px #0003; animation:back-in .3s var(--ease); }

/* --- Okno realizacji i przestrzenny podgląd telefonu --- */
dialog { width:min(980px,calc(100% - 32px)); max-height:90svh; padding:0; border:1px solid #9e7abc65; border-radius:23px; background:#19131f; color:#f5effb; overflow-y:auto; }
dialog::backdrop { background:#09050bd9; backdrop-filter:blur(14px); }
dialog[open] { animation:dialog-in .4s var(--ease); }
.dialog-close { position:sticky; top:18px; float:right; margin:18px 18px -62px 0; z-index:3; width:44px; height:44px; display:grid; place-items:center; border:1px solid #dfb9ff; border-radius:50%; background:#22102be6; color:white; font-size:21px; }
.dialog-media img { display:block; width:100%; }
.dialog-content { padding:45px; }
.dialog-content h2 { font-size:clamp(30px,4vw,52px); letter-spacing:-.055em; line-height:1.15; margin:18px 0 25px; }
.dialog-content > p:not(.eyebrow) { color:#bcaac8; font-size:15px; line-height:1.9; }
.mobile-showcase { display:grid; grid-template-columns:1fr 215px; align-items:center; gap:45px; padding:32px; margin-block:40px; border:1px solid #bb86df30; border-radius:20px; background:radial-gradient(ellipse at 15% 10%,#4a2b63,transparent 70%),#24192e; }
.mobile-showcase h3 { font-size:30px; line-height:1.2; letter-spacing:-1px; margin:18px 0; }
.mobile-showcase p:not(.eyebrow) { font-size:13px; color:#ba9ecc; }
.phone-screen { padding:6px; border:1px solid #a086b3; background:#110a19; border-radius:30px; box-shadow:0 25px 40px #0c05194d; transform:perspective(900px) rotateX(var(--phone-x,0deg)) rotateY(var(--phone-y,0deg)); transition:transform .4s var(--ease); }
.phone-screen img { width:100%; display:block; border-radius:24px; }
.phone-preview figcaption { color:#ad93bf; font-size:9px; margin-top:16px; text-align:center; }
.case-item { border-top:1px solid var(--line); padding-block:25px; }
.case-item h3 { font-size:16px; font-weight:500; color:#dfbfff; margin-bottom:12px; }
.case-item p { color:#b49ec1; line-height:1.9; font-size:14px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-block:20px; }
.tags span { border:1px solid #b388d644; border-radius:100px; padding:6px 12px; color:#c3aacf; font-size:10px; }
.dialog-visit { display:inline-flex; align-items:center; gap:25px; padding:15px 21px; background:var(--lilac); color:#281436; font-size:12px; border-radius:100px; margin-top:12px; }
.dialog-visit .xoxo-icon { font-size:20px; }
.motion-live .approach-flower { animation:star-turn 35s linear infinite; }
@keyframes star-turn { to { rotate:360deg; } }
@keyframes dialog-in { from { opacity:0; translate:0 25px; scale:.97; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes back-in { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation:none!important; }
.motion-paused .word-reveal span { opacity:1!important; transition:none; }

/* ==================================================
   Telefon — pełne kadry, ale bez ciasnych wysokości i blokowania przewijania
   ================================================== */
@media(min-width:1600px) { .hero { padding-inline:max(64px,calc((100vw - 1450px)/2)); }.hero-bottom { left:max(64px,calc((100vw - 1450px)/2)); right:max(64px,calc((100vw - 1450px)/2)); } }
@media(max-width:1100px) {
  .section-inner { width:calc(100% - 80px); }
  .hero { padding-inline:40px; gap:20px; }
  h1 { font-size:8vw; }
  .hero-bottom { left:40px; right:40px; }
  .project-scene { gap:35px; grid-template-columns:.65fr 1.35fr; }
  .project-scene:nth-child(2) { grid-template-columns:1.35fr .65fr; }
  .approach { gap:50px; }
  .studio-grid { gap:60px; }
  .faq { gap:50px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:105px; }
  .section-inner { width:calc(100% - 44px); }
  .header { top:14px; left:14px; right:14px; padding:16px 18px; border-radius:15px; }
  .wordmark { font-size:28px; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:6px; width:35px; height:32px; padding:5px; background:none; border:0; }
  .menu-toggle span { height:1px; width:23px; background:#f1e0ff; transition:transform .25s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .header nav { position:absolute; left:0; right:0; top:calc(100% + 8px); display:none; flex-direction:column; align-items:stretch; padding:22px; border:1px solid #d6b7ed33; background:#201626; border-radius:15px; gap:20px; font-size:15px; }
  .header nav.is-open { display:flex; }
  .header nav a:last-child { justify-content:space-between; }
  .scene-rail { display:none; }
  .hero { min-height:100svh; display:flex; flex-direction:column; align-items:stretch; padding:130px 22px 92px; gap:35px; }
  .hero .eyebrow { font-size:8px; letter-spacing:1.1px; margin-bottom:25px; }
  h1 { font-size:clamp(56px,14.4vw,100px); line-height:1.02; }
  .round-link { margin-top:24px; }
  .hero-stage { max-width:420px; width:100%; align-self:center; margin-top:3px; }
  .hero-bottom { left:22px; right:22px; bottom:25px; flex-wrap:wrap; justify-content:flex-start; gap:13px; font-size:8px; letter-spacing:.6px; }
  .hero-bottom a { gap:14px; }
  .manifesto { min-height:125svh; }
  .manifesto-content { min-height:100svh; padding-block:110px 55px; }
  .manifesto-top { margin-bottom:30px; }
  .manifesto-top .eyebrow { max-width:220px; font-size:8px; letter-spacing:1.1px; }
  .manifesto-star { font-size:35px; }
  .word-reveal { font-size:clamp(36px,9.7vw,58px); line-height:1.2; }
  .manifesto-bottom { display:block; margin-top:35px; }
  .manifesto-bottom p { font-size:13px; }
  .tiny-label { display:none; }
  .liquid-edge { height:65px; }
  .work { padding-top:45px; }
  .work h2 { font-size:clamp(39px,10.8vw,62px); }
  .work-intro-row { display:block; margin-top:22px; }
  .work-intro-row > p { font-size:12px; margin-top:25px; }
  .project-scene,.project-scene:nth-child(2) { min-height:auto; display:flex; flex-direction:column; align-items:stretch; padding-block:75px 55px; gap:32px; }
  .project-scene:nth-child(2) .project-copy { order:0; }
  .project-scene:nth-child(2) .project-art { order:0; margin-right:0; }
  .project-copy h3 { font-size:37px; }
  .project-counter { margin-bottom:20px; }
  .project-summary { margin-top:18px; font-size:13px; max-width:450px; }
  .project-copy .text-link { margin-top:20px; }
  .project-art { margin:0; transform:none; }
  .project-poster { border-radius:11px; }
  .browser-bar { padding-inline:10px; height:27px; font-size:8px; }
  .browser-bar > span:last-child { display:none; }
  .project-sticker { top:-16px; right:15px; font-size:7px; padding:9px 12px; }
  .project-phone { display:none; }
  .concepts { padding-block:25px 75px; }
  .concepts-intro { display:block; padding-top:30px; }
  .concepts-intro h3 { font-size:29px; }
  .concepts-intro p { margin-top:20px; font-size:12px; }
  .concept-grid { grid-template-columns:1fr; gap:35px; }
  .approach { min-height:auto; display:block; padding-block:75px; }
  .approach-heading { position:static; }
  .approach h2,.studio h2,.faq h2 { font-size:clamp(33px,8.8vw,50px); }
  .approach-heading > p:not(.eyebrow) { font-size:13px; }
  .approach-flower { display:none; }
  .steps { margin-top:45px; }
  .step { grid-template-columns:23px 1fr 18px; gap:15px; padding-block:27px; }
  .step h3 { font-size:25px; }
  .studio { min-height:auto; padding-block:75px; }
  .studio-grid { display:flex; flex-direction:column; align-items:stretch; gap:38px; }
  .studio-art { width:min(75%,300px); }
  .studio-copy > p:not(.eyebrow) { font-size:14px; }
  .faq { display:block; padding-block:75px 45px; }
  .faq-list { margin-top:35px; }
  .faq-list summary { font-size:13px; gap:15px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial { padding-block:35px 65px; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial blockquote { margin-block:20px; font-size:25px; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label { font-size:8px; }
*/
  .contact { min-height:80svh; padding-block:60px 75px; }
  .contact-top { gap:20px; margin-bottom:30px; }
  .contact-top .eyebrow { font-size:8px; letter-spacing:1px; }
  .contact-top > [data-icon] { font-size:38px; }
  .contact h2 { font-size:clamp(37px,10.7vw,68px); letter-spacing:-.07em; }
  .contact-bottom { display:block; margin-top:35px; }
  .contact-bottom > p { font-size:13px; }
  .email-link { margin-top:26px; gap:14px; }
  #email-address { font-size:clamp(14px,4vw,23px); }
  .email-label { font-size:8px; letter-spacing:.9px; }
  .email-arrow { margin-left:auto; width:37px; height:37px; font-size:19px; }
  .footer { padding-block:35px 27px; }
  .footer-signature { font-size:15.1vw; }
  .footer-bottom { margin-top:30px; flex-wrap:wrap; gap:20px; font-size:9px; }
  .footer-bottom p { flex:0 0 100%; }
  .footer-bottom .motion-toggle { margin-right:auto; }
  .back-to-top { right:15px; bottom:15px; width:38px; height:38px; }
  .dialog-content { padding:25px; }
  .mobile-showcase { grid-template-columns:1fr; padding:25px 18px; gap:30px; }
  .mobile-showcase > div { text-align:center; }
  .mobile-showcase h3 { font-size:25px; }
  .phone-preview { width:205px; max-width:100%; margin-inline:auto; }
}
@media(max-width:360px) { h1 { font-size:14vw; }.contact h2 { font-size:10.5vw; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .word-reveal span { opacity:1!important; }
  .hero-stage,.project-art,.phone-screen { transform:none!important; }
  .round-link:hover .round-link-icon,.text-link:hover .xoxo-icon,.project-poster:hover,.project-poster:hover > img,.concept-card:hover img,.email-link:hover .email-arrow { transform:none; }
}

/* ==================================================
   Nowy kierunek — czarny kadr i światło wycięte w literach
   ================================================== */
:root { --bg:#09090c; --ink:#f0ecf5; --paper:#141118; --lilac:#cfacff; --soft:#9c90a7; }
body { background:var(--bg); }
html { scroll-padding-top:35px; }
.section-inner { width:min(1240px,calc(100% - 80px)); }
.scene-rail { display:none; }

/* --- Klasyczny nagłówek: logo, proste menu i kontakt --- */
.header { position:relative; inset:auto; width:min(1400px,calc(100% - 80px)); margin-inline:auto; height:104px; padding:0; border:0; border-bottom:1px solid #ffffff16; border-radius:0; background:none; backdrop-filter:none; }
.wordmark { font-size:37px; letter-spacing:-2.8px; }
.header nav { gap:32px; font-size:13px; }
.header nav a:last-child { border:1px solid #c09be33d; border-radius:100px; padding:11px 18px; gap:28px; }
.header nav a:last-child:hover { background:#cda3ff0b; }

/* --- Jedna dominanta wizualna, bez nakładających się dekoracji --- */
.hero { min-height:calc(100svh - 104px); width:min(1400px,calc(100% - 80px)); margin-inline:auto; padding:44px 0 25px; display:flex; flex-direction:column; justify-content:space-evenly; align-items:stretch; gap:30px; isolation:isolate; }
.hero-kicker { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.hero .eyebrow { margin:0; font-size:9px; letter-spacing:1.4px; }
.hero-kicker-note { font-size:9px; letter-spacing:1.5px; color:#6f617e; }
.hero-stage { position:relative; display:block; aspect-ratio:auto; max-width:none; min-width:0; width:100%; margin:0; font-size:inherit; line-height:1; letter-spacing:0; }
.hero-summary { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; max-width:1140px; width:100%; }
.hero-summary h2 { font-size:clamp(28px,3vw,45px); font-weight:500; letter-spacing:-.055em; line-height:1.22; }
.hero-summary h2 > span { color:#8d7c9e; }
.hero-summary-copy { max-width:440px; justify-self:end; }
.hero-summary-copy > p { color:#a99cb4; font-size:13px; line-height:1.9; }
.hero-summary .round-link { margin-top:22px; gap:22px; font-size:12px; }
.hero-summary .round-link-icon { width:40px; height:40px; font-size:19px; background:#e0c5ff; }
.hero-bottom { position:static; inset:auto; margin-top:18px; padding-top:20px; border-top:1px solid #ffffff12; font-size:8px; letter-spacing:1.1px; }

/* --- Spójne szerokości i naturalna wysokość kolejnych sekcji --- */
.manifesto { min-height:100svh; background:var(--paper); color:#eee5f8; border-top:1px solid #b083d914; }
.manifesto-content { position:relative; top:auto; min-height:100svh; padding-block:100px; }
.manifesto-top { margin-bottom:32px; }
.manifesto-top .eyebrow { color:#ad8dc5; }
.manifesto-star { color:#c8a2e9; }
.word-reveal { font-size:clamp(40px,5.8vw,82px); max-width:1100px; line-height:1.17; font-weight:500; letter-spacing:-.06em; }
.manifesto-bottom { margin-top:35px; }
.manifesto-bottom p { color:#a995b9; }
.tiny-label { color:#857194; }
.work { padding-top:65px; }
.work h2 { font-size:clamp(42px,4.9vw,70px); }
.work-intro-row { align-items:center; }
.project-scene,.project-scene:nth-child(2) { min-height:0; padding-block:100px; gap:65px; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
.project-scene:nth-child(2) .project-copy { order:0; }
.project-scene:nth-child(2) .project-art { order:0; margin-right:8px; }
.project-copy { min-width:0; }
.project-copy h3 { font-size:clamp(31px,3vw,44px); overflow-wrap:anywhere; }
.project-art { min-width:0; }
.project-poster { border-radius:15px; border-color:#cba4ec25; box-shadow:0 25px 50px #0004; }
.project-phone { width:19%; max-width:125px; right:-12px; bottom:-42px; border-radius:20px; }
.project-phone img { border-radius:15px; }
.project-sticker { top:-17px; padding:10px 14px; font-size:8px; transform:rotate(5deg); }
.concepts { padding-block:45px 90px; }
.concepts-intro h3 { font-size:29px; }
.concept-grid { gap:24px; }
.approach { min-height:0; padding-block:100px; gap:80px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.approach-heading { position:static; }
.approach h2 { font-size:clamp(33px,3.5vw,49px); }
.approach-flower { font-size:65px; margin-top:30px; }
.step { gap:18px; }
.studio { min-height:0; padding-block:100px; background:#141118; }
.studio-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:90px; }
.studio-copy h2 { font-size:clamp(40px,4.4vw,63px); }
.faq { padding-block:100px 70px; gap:70px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.faq h2 { font-size:clamp(32px,3.3vw,47px); }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial { padding-bottom:75px; }
*/
.contact { min-height:0; padding-block:70px 100px; background:#c7a0f6; }
.dark-to-light svg { fill:#c7a0f6; }
.contact h2 { font-size:clamp(47px,7.7vw,105px); }
.contact-bottom { flex-wrap:wrap; row-gap:35px; }
.email-link { min-width:0; }
.footer { padding-top:55px; }
.footer-signature { font-size:clamp(50px,15.1vw,225px); }
.footer-bottom { margin-top:35px; }

@media(min-width:1600px) { .hero { padding-inline:0; }.hero-bottom { inset:auto; } }
@media(max-width:1100px) {
  .section-inner { width:calc(100% - 64px); }
  .header,.hero { width:calc(100% - 64px); }
  .hero { padding-inline:0; }
  .hero-summary { gap:45px; }
  .project-scene,.project-scene:nth-child(2) { gap:40px; }
  .approach { gap:45px; }
  .studio-grid { gap:55px; }
  .faq { gap:45px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:24px; }
  .section-inner { width:calc(100% - 40px); }
  .header { width:calc(100% - 40px); height:84px; padding:0; border-radius:0; }
  .wordmark { font-size:33px; }
  .header nav { top:calc(100% + 8px); gap:20px; background:#19111f; padding:21px; }
  .header nav a:last-child { border:0; border-radius:0; padding:0; }
  .hero { min-height:calc(100svh - 84px); width:calc(100% - 40px); padding:35px 0 23px; gap:28px; }
  .hero .eyebrow { font-size:8px; letter-spacing:1px; margin:0; }
  .hero-kicker-note { display:none; }
  .hero-stage { margin:0; width:100%; max-width:none; align-self:stretch; }
  .hero-summary { display:flex; flex-direction:column; gap:21px; }
  .hero-summary h2 { font-size:clamp(26px,7.1vw,39px); }
  .hero-summary-copy { max-width:450px; }
  .hero-summary-copy > p { font-size:12px; }
  .hero-summary .round-link { margin-top:18px; font-size:11px; gap:18px; }
  .hero-summary .round-link-icon { width:36px; height:36px; font-size:18px; }
  .hero-bottom { margin-top:6px; padding-top:18px; gap:12px; font-size:7px; letter-spacing:.6px; }
  .hero-bottom a { font-size:9px; gap:13px; }
  .manifesto,.manifesto-content { min-height:0; }
  .manifesto-content { padding-block:75px; }
  .manifesto-top .eyebrow { font-size:8px; }
  .manifesto-star { font-size:30px; }
  .word-reveal { font-size:clamp(32px,8.6vw,48px); }
  .manifesto-bottom { margin-top:27px; }
  .manifesto-bottom p { font-size:12px; }
  .work { padding-top:40px; }
  .work h2 { font-size:clamp(36px,9.6vw,54px); }
  .project-scene,.project-scene:nth-child(2) { display:flex; padding-block:60px 40px; gap:29px; }
  .project-scene:nth-child(2) .project-art { margin-right:0; }
  .project-copy h3 { font-size:32px; }
  .project-counter { font-size:9px; }
  .project-summary { font-size:12px; }
  .project-poster { border-radius:11px; }
  .concepts { padding-block:25px 65px; }
  .concepts-intro h3 { font-size:27px; }
  .concept-grid { gap:30px; }
  .approach { display:block; padding-block:65px; }
  .approach h2,.studio h2,.faq h2 { font-size:clamp(30px,8.1vw,45px); }
  .studio { padding-block:65px; }
  .studio-grid { display:flex; gap:35px; }
  .faq { display:block; padding-block:65px 40px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial { padding-block:30px 55px; }
*/
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial blockquote { font-size:23px; }
*/
  .contact { min-height:0; padding-block:55px 65px; }
  .contact h2 { font-size:clamp(34px,9.8vw,60px); }
  .contact-bottom { display:block; }
  .footer { padding-block:30px 25px; }
  .footer-signature { font-size:14.8vw; }
  .footer-bottom { margin-top:25px; }
}
@media(max-height:650px) and (min-width:761px) { .hero { min-height:auto; gap:25px; }.hero-summary h2 { font-size:30px; } }
@media(prefers-reduced-motion:reduce) {.hero-stage { transform:none!important; } }


/* ==================================================
   Dopasowanie układu — tablet, mały telefon i długie treści
   ================================================== */
img { display:block; height:auto; }
.hero-stage { flex:none; }
.hero-summary > *, .studio-grid > *, .faq > *, .concept-grid > *, .steps, .step > div { min-width:0; }
.manifesto,.manifesto-content { min-height:0; }
.manifesto-content { padding-block:clamp(75px,9vw,140px); }
.email-link > span:first-child { min-width:0; }
.email-arrow { flex-shrink:0; }
.footer-signature { white-space:nowrap; }
.project-phone img { width:100%; height:auto; aspect-ratio:375 / 844; object-fit:cover; object-position:top; }
@media (min-width:761px) and (max-width:1000px) {
  .project-scene,.project-scene:nth-child(2) { grid-template-columns:1fr; gap:35px; padding-block:65px; }
  .project-copy { max-width:580px; }
  .project-art,.project-scene:nth-child(2) .project-art { width:100%; margin:0 0 35px; }
  .project-phone { right:14px; }
  .approach,.faq { grid-template-columns:1fr; gap:40px; }
  .approach-heading { max-width:600px; }
  .approach-flower { display:none; }
  .studio-grid { gap:35px; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); }
  .concept-grid { gap:16px; }
  .concept-caption { flex-wrap:wrap; gap:8px; }
}
@media (max-width:760px) {
  .header { z-index:30; }
  .header nav { box-shadow:0 15px 35px #0007; }
  .hero-bottom { align-items:start; flex-direction:column; }
  .project-scene,.project-scene:nth-child(2),.studio-grid { flex-direction:column; align-items:stretch; }
  .project-art { width:100%; }
  .browser-bar { gap:9px; }
  .browser-domain { min-width:0; }
  .studio-art { align-self:center; }
  .footer-signature { font-size:14.5vw; }
  .step { grid-template-columns:20px minmax(0,1fr) 18px; gap:12px; }
  .email-link { width:100%; }
}
@media (max-width:380px) {
  .section-inner,.header,.hero { width:calc(100% - 32px); }
  .hero .eyebrow { font-size:7px; letter-spacing:.8px; }
  .project-copy h3 { font-size:28px; }
  .step h3 { font-size:23px; }
  .contact h2 { font-size:9.7vw; }
  #email-address { font-size:14px; }
}

/* ==================================================
   Światło w wyciętym znaku i naprzemienne kadry portfolio
   ================================================== */
.hero-stage { filter:drop-shadow(0 3px 2px #000); }
.hero-stage::after { content:''; position:absolute; bottom:1%; left:15%; right:15%; height:1px; background:linear-gradient(90deg,transparent,#a644ff60,transparent); pointer-events:none; }
#live-projects { position:relative; isolation:isolate; margin-top:30px; }
#live-projects::before { content:''; position:absolute; top:40px; bottom:50px; left:50%; width:1px; background:linear-gradient(transparent,#ab6deb50 12%,#ab6deb50 88%,transparent); z-index:-1; }
#live-projects::after { content:''; position:absolute; top:40px; bottom:50px; left:calc(50% - 1px); width:3px; background:linear-gradient(transparent 0%,transparent 42%,#e0baff 50%,transparent 58%,transparent 100%); background-size:100% 250%; opacity:.6; pointer-events:none; z-index:-1; }
#live-projects.motion-live::after { animation:spine-light 10s linear infinite; }
@keyframes spine-light { from { background-position:0 180%; } to { background-position:0 -80%; } }
@media(min-width:1001px) {
  .project-scene,.project-scene:nth-child(2) { position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(90px,9vw,150px); padding-block:100px; }
  .project-copy { max-width:430px; }
  .project-scene:nth-child(2) .project-copy { order:2; justify-self:start; }
  .project-scene:nth-child(2) .project-art { order:1; margin-right:0; }
  .project-marker { position:absolute; top:50%; left:50%; width:9px; height:9px; translate:-50% -50%; border-radius:50%; background:#dfbaff; box-shadow:0 0 0 7px #a65eea16,0 0 25px #b867ff; }
  .project-phone { right:-14px; }
}
/* --- Logo i podpis mieszczą się w okręgu, bez ujemnych marginesów --- */
.studio-art { container-type:inline-size; transform:rotate(-5deg); }
.motion-live .studio-art > svg { animation:seal-breathe 10s ease-in-out infinite alternate; transform-origin:50% 42%; }
@media(max-width:1000px) {
  #live-projects::before,#live-projects::after,.project-marker { display:none; }
  .project-scene:nth-child(2) .project-copy,.project-scene:nth-child(2) .project-art { order:0; }
}
@media(max-width:760px) {
  .studio-art { width:min(90%,320px); }
}
@media(prefers-reduced-motion:reduce) {
  .studio-art > svg { transform:none; }
}

/* ==================================================
   Płaski znak, czytelniejsze detale i ramki zgodne ze zdjęciami
   ================================================== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero-stage { filter:none; transform:none; }
.hero-stage::after { display:none; }
.hero-signature { display:flex; align-items:baseline; font-size:clamp(80px,14.6vw,220px); line-height:1.12; letter-spacing:-.075em; font-weight:800; color:#cfacff; white-space:nowrap; }
.hero-signature > span { color:transparent; -webkit-text-stroke:1.2px #bb8ce0; }
.eyebrow { font-size:12px; letter-spacing:1.3px; }
.hero .eyebrow,.hero-kicker-note,.hero-bottom { font-size:11px; }
.tiny-label,.step-tag,.project-counter,.email-label { font-size:11px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label { font-size:11px; }
*/
.project-category,.browser-bar,.project-sticker,.concept-caption > span { font-size:11px; }
.footer-bottom,.motion-toggle { font-size:12px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial > p { font-size:12px; }
*/
.project-poster > img,.concept-card > img { height:auto; aspect-ratio:auto; object-fit:contain; }
.project-poster:hover > img { transform:none; }
.project-poster { background:#18131e; }
.browser-bar { height:32px; }
.studio-grid { perspective:900px; }
.studio-art { transform:rotate(-5deg) rotateX(var(--seal-x,0deg)) rotateY(var(--seal-y,0deg)); transition:transform .65s var(--ease); }
/* Litery z dolnymi wydłużeniami muszą mieć miejsce także podczas wejścia. */
.contact h2 { line-height:1.16; }
.contact h2 .text-line { overflow:visible; padding-block:.12em .22em; margin-block:-.12em -.22em; }
.contact h2 em { display:inline-block; position:relative; padding-right:.08em; }
.motion-live .contact-top > [data-icon] { animation:star-turn 26s linear infinite; }

/* ==================================================
   Nagłówek przy przewijaniu oraz pełnoekranowe menu mobilne
   ================================================== */
html { scroll-padding-top:120px; }
.header { position:sticky; top:0; z-index:40; background:#09090cf5; height:104px; transition:top .4s var(--ease); }
.header.header-hidden { top:-110px; }
.header nav { gap:22px; font-size:13px; }
.header nav a:last-child { gap:15px; }
.menu-toggle { position:relative; z-index:52; }
body.menu-open { overflow:hidden; }
@media(max-width:1000px) {
  html { scroll-padding-top:104px; }
  .header { height:84px; }
  .hero { min-height:calc(100svh - 84px); }
  .menu-toggle { display:grid; place-content:center; gap:6px; width:46px; height:46px; border:1px solid #cda3ff40; border-radius:50%; background:#15101d; color:inherit; }
  .menu-toggle span { display:block; width:19px; height:1px; background:#eee3fa; transition:transform .3s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .header nav { position:fixed; inset:0; top:0; display:flex; height:100dvh; flex-direction:column; justify-content:center; align-items:stretch; gap:12px; padding:95px max(32px,8vw) 45px; border:0; border-radius:0; background:#110b1ce8; backdrop-filter:blur(20px); box-shadow:none; overflow-y:auto; z-index:50; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(100%); transition:transform .55s var(--ease),opacity .4s,visibility .55s; }
  .header nav.is-open { display:flex; opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); }
  .header nav a,.header nav a:last-child { font-size:clamp(24px,5vw,43px); font-weight:600; padding:8px 0; border:0; border-radius:0; letter-spacing:-.04em; opacity:0; transform:translateY(18px); transition:transform .5s var(--ease),opacity .4s; }
  .header nav.is-open a { opacity:1; transform:translateY(0); }
  .header nav.is-open a:nth-child(2) { transition-delay:.05s; }
  .header nav.is-open a:nth-child(3) { transition-delay:.1s; }
  .header nav.is-open a:nth-child(4) { transition-delay:.15s; }
  .header nav.is-open a:nth-child(5) { transition-delay:.2s; }
  .header nav.is-open a:nth-child(6) { transition-delay:.25s; }
  .header nav .xoxo-icon { width:28px; height:28px; }
}
@media(max-width:760px) {
  .hero-signature { flex-direction:column; font-size:29vw; line-height:.98; white-space:normal; }
  .hero-signature > span { font-size:.92em; }
  .hero .eyebrow,.hero-bottom,.manifesto-top .eyebrow,.contact-top .eyebrow { font-size:10px; }
  .project-counter,.project-category,.step-tag,.email-label,.footer-bottom,.motion-toggle { font-size:11px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label,.testimonial > p { font-size:11px; }
*/
  .project-sticker { font-size:9px; }
  .browser-bar { font-size:9px; }
  .hero-bottom a { font-size:11px; }
  .hero-summary-copy > p,.project-summary,.manifesto-bottom p { font-size:14px; }
}
@media(max-height:600px) and (max-width:1000px) { .header nav { justify-content:flex-start; gap:4px; padding-top:80px; }.header nav a,.header nav a:last-child { font-size:23px; padding:5px 0; } }
@media(prefers-reduced-motion:reduce) { .studio-art { transform:rotate(-5deg); } }
.motion-paused .studio-art { transform:rotate(-5deg); }

/* ==================================================
   Spokojniejsza nawigacja, większe drobiazgi i znak studia
   ================================================== */
html { scroll-padding-top:0; }
.header,.header.header-hidden { position:relative; top:auto; transition:none; }
.header nav { transform:none; }
.hero-signature { font-size:clamp(90px,15.6vw,240px); }
.eyebrow,.hero .eyebrow,.hero-kicker-note,.hero-bottom,.tiny-label,.step-tag,.project-counter,.email-label,.project-category { font-size:13px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label { font-size:13px; }
*/
.project-sticker,.browser-bar,.concept-caption > span { font-size:12px; }
.footer-bottom,.motion-toggle { font-size:13px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.testimonial > p { font-size:13px; }
*/
#email-address { font-size:clamp(16px,1.55vw,22px); }
.studio-art { width:min(100%,450px); aspect-ratio:1.04; padding:36px; container-type:normal; transform:rotate(-3deg); transition:none; border-radius:24px; background:linear-gradient(135deg,#d9bcff,#9d65e3); color:#281439; box-shadow:0 25px 65px #0003; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.studio-art::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px); background-size:40px 40px; }
@keyframes studio-float { 0%,100% { translate:0 0; rotate:-1deg; } 50% { translate:0 -10px; rotate:1deg; } }
.contact h2 em { animation:none; clip-path:none; overflow:visible; }
.contact h2 em::after { display:none; }
.faq-answer { overflow:hidden; }
.faq-list .faq-answer p { margin:0; padding-bottom:24px; font-size:14px; }
.faq-list details[data-expanded=false] .faq-plus::after { transform:rotate(90deg); }
.faq-list details[data-expanded=true] .faq-plus::after { transform:rotate(0); }
@media(max-width:1000px) {
  .header nav,.header nav.is-open { transform:none; transition:opacity .3s,visibility .3s; }
  .header nav a,.header nav a:last-child { font-size:clamp(21px,3.1vw,29px); letter-spacing:-.02em; padding-block:10px; }
  .header nav .xoxo-icon { width:22px; height:22px; }
}
@media(max-width:760px) {
  .hero-signature { font-size:31vw; }
  .hero .eyebrow,.hero-bottom,.hero-bottom a,.manifesto-top .eyebrow,.contact-top .eyebrow,.project-counter,.project-category,.step-tag,.email-label,.footer-bottom,.motion-toggle { font-size:12px; }
/* Opinie — styl zachowany, sekcja wyłączona.
.demo-label,.testimonial > p { font-size:12px; }
*/
  .browser-bar,.project-sticker { font-size:11px; }
  .studio-art { width:min(100%,390px); padding:28px; }
  #email-address { font-size:clamp(14px,3.7vw,19px); }
}
@media(max-width:380px) { .hero .eyebrow { font-size:10px; letter-spacing:.6px; } }
@media(prefers-reduced-motion:reduce) {.studio-art { transform:rotate(-3deg); } }
.motion-paused .studio-art { transform:rotate(-3deg); }

/* ==================================================
   Panel z oryginału — znak, obracająca się pieczęć i detale
   ================================================== */
.hero-signature { font-size:clamp(95px,16.7vw,260px); }
section[tabindex="-1"]:focus { outline:none; }
.studio-art { position:relative; isolation:isolate; min-height:440px; width:min(100%,450px); aspect-ratio:auto; padding:30px; border-radius:100px 32px 32px 32px; background:#b77feb; overflow:visible; margin-top:4px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(2deg); }
.studio-art::before { display:none; }
.studio-art .art-grid { position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(ellipse at 15% 15%,#f6ddff,transparent 55%),linear-gradient(135deg,#c59af0,#9c61df 75%); overflow:hidden; }
.studio-art .art-grid::after { content:''; position:absolute; inset:0; background:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(120deg,transparent,#0008); }
.studio-art .art-caption,.studio-art .art-bottom { font-size:11px; letter-spacing:1.5px; font-weight:800; color:#25133f; position:relative; z-index:2; }
.studio-art .art-caption { padding-left:25px; max-width:70%; }
.studio-art .hero-brand { position:relative; display:grid; place-items:center; width:100%; transform:rotate(-9deg); z-index:2; }
.studio-art .hero-brand img { width:115%; max-width:none; height:270px; object-fit:contain; filter:drop-shadow(7px 14px 0 #3a194344); }
.studio-art .art-bottom { display:flex; align-items:end; justify-content:space-between; gap:15px; }
.studio-art .art-asterisk { font-size:45px; line-height:1; }
.studio-art .floating-tag { position:absolute; bottom:70px; right:30px; z-index:3; background:#f1e1ff; color:#222523; font-size:11px; font-weight:700; padding:12px 20px; border-radius:30px; transform:rotate(-9deg); box-shadow:4px 4px 0 #341b6133; }
.studio-art .floating-tag span { margin-left:20px; }
.studio-art .art-orbs { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.studio-art .art-orbs i { position:absolute; display:block; width:115px; height:115px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff9,#e4bcff33 45%,#61239755 90%); border:1px solid #fff4; box-shadow:inset -12px -15px 30px #642da52b; }
.studio-art .art-orbs i:nth-child(1) { top:17%; right:-35px; }
.studio-art .art-orbs i:nth-child(2) { width:65px; height:65px; bottom:17%; left:-20px; }
.studio-art .art-orbs i:nth-child(3) { width:35px; height:35px; top:10%; left:22%; }
.studio-art > .vision-seal { position:absolute; z-index:3; width:105px; height:105px; top:-34px; right:-10px; transform:rotate(12deg); filter:drop-shadow(0 6px 12px #21113128); }
.studio-art .vision-seal circle { fill:#23152e; stroke:#d6b6ef; stroke-width:.6px; }
.studio-art .vision-seal text { fill:#e4c6ff; font-size:10px; font-weight:700; letter-spacing:1.5px; }
.studio-art .seal-arrow { fill:none; stroke:#e4c6ff; stroke-width:2px; stroke-linecap:round; stroke-linejoin:round; }
.studio-art .seal-ring { transform-origin:60px 60px; }
.motion-live .studio-art .hero-brand img { animation:studio-float 7s ease-in-out infinite; }
.motion-live .studio-art .seal-ring { animation:star-turn 28s linear infinite; }
.motion-live .studio-art .art-orbs i { animation:studio-orb 8s ease-in-out infinite; }
.motion-live .studio-art .art-orbs i:nth-child(2) { animation-delay:-3s; }
.motion-live .studio-art .art-orbs i:nth-child(3) { animation-delay:-5s; }
@keyframes studio-orb { 0%,100% { translate:0 0; } 50% { translate:7px -12px; } }
/* --- Projekt: czerń i lawenda z głównej strony, lżejsze obramowania --- */
dialog { width:min(1000px,calc(100% - 32px)); background:#100d14; border-color:#c7a0f630; border-radius:24px; box-shadow:0 35px 120px #0009; }
dialog::backdrop { background:#09090ce0; backdrop-filter:blur(12px); }
.dialog-close { background:#100d14ee; border-color:#cfacff50; color:#e7d2ff; transition:background .2s; }
.dialog-close:hover { background:#39214f; }
.dialog-media { padding:24px 24px 0; }
.dialog-media img { height:auto; border-radius:14px; border:1px solid #c7a0f628; }
.dialog-content { padding:34px 40px 40px; }
.dialog-content h2 { color:#f1eaf8; font-weight:600; }
.dialog-content > p:not(.eyebrow),.case-item p { color:#b6a9c2; }
.mobile-showcase { background:radial-gradient(ellipse at 0 0,#56317450,transparent 75%),#17121f; border-color:#c7a0f630; }
.mobile-showcase h3,.case-item h3 { color:#d9bbf7; }
.tags span { font-size:12px; border-color:#c7a0f630; background:#c7a0f609; color:#d3b5ee; }
.dialog-visit { background:#c7a0f6; padding:16px 24px; font-size:13px; transition:background .25s,translate .25s; }
.dialog-visit:hover { background:#dfc5ff; translate:0 -2px; }
.phone-preview figcaption { font-size:12px; }
@media(max-width:760px) {
  .hero-signature { font-size:32.5vw; }
  .studio-art { min-height:390px; padding:24px; width:min(100%,390px); border-radius:80px 26px 26px 26px; }
  .studio-art .hero-brand img { height:245px; }
  .studio-art > .vision-seal { width:86px; height:86px; top:-28px; right:0; }
  .studio-art .art-caption { padding-left:15px; max-width:65%; font-size:10px; }
  .studio-art .art-bottom { font-size:10px; }
  .studio-art .floating-tag { right:24px; bottom:62px; padding:11px 16px; font-size:10px; }
  .dialog-media { padding:16px 16px 0; }
  .dialog-content { padding:26px 22px; }
}
.motion-paused .studio-art { transform:rotate(2deg); }
@media(prefers-reduced-motion:reduce) { .studio-art { transform:rotate(2deg); } }

/* --- Opisy i przyciski: czytelna wielkość również na małych ekranach --- */
.hero-summary-copy > p,.project-summary,.manifesto-bottom p,
.approach-heading > p:not(.eyebrow),.studio-copy > p:not(.eyebrow),
.concepts-intro p,.work-intro-row > p,.contact-bottom > p,
.step p,.faq-list .faq-answer p,.dialog-content > p:not(.eyebrow),.case-item p { font-size:16px; line-height:1.8; }
.hero-summary .round-link,.round-link,.text-link { font-size:15px; }
.faq-list summary { font-size:16px; }
.mobile-showcase p:not(.eyebrow) { font-size:15px; }
/* Zaznaczony obrys staje się pełną literą, jak zwykły zaznaczony tekst. */
.hero-signature::selection,.hero-signature > span::selection,
.wordmark::selection,.wordmark span::selection,.footer-signature::selection,
.footer-signature > span::selection { color:#09090c; background:#cfacff; -webkit-text-fill-color:#09090c; -webkit-text-stroke:0; text-shadow:none; }
@media(max-width:760px) {
  .hero-summary-copy > p,.project-summary,.manifesto-bottom p,
  .approach-heading > p:not(.eyebrow),.studio-copy > p:not(.eyebrow),
  .concepts-intro p,.work-intro-row > p,.contact-bottom > p,.step p,
  .faq-list .faq-answer p { font-size:15px; }
  .hero-summary .round-link,.round-link,.text-link,.faq-list summary { font-size:15px; }
}

/* --- Menu: jeden czytelny napis i jego dekoracyjna wersja do przewinięcia --- */
.nav-label { display:inline-grid; overflow:hidden; line-height:1.45; padding-block:.04em; vertical-align:middle; }
.nav-label-front,.nav-label-next { grid-area:1 / 1; display:block; transition:transform .45s cubic-bezier(.22,.75,.2,1),opacity .35s; }
.nav-label-front { transform:translateY(0); opacity:1; }
.nav-label-next { transform:translateY(115%); opacity:0; color:#cfacff; }
@media(min-width:1001px) { .header nav,.header nav a,.header nav a:last-child { font-size:15px; } }
@media(max-width:1000px) { .header nav a,.header nav a:last-child { font-size:21px; } }
@media(max-width:760px) { .header nav a,.header nav a:last-child { font-size:20px; } }
@media(hover:hover) and (pointer:fine) {
  .header nav a:hover .nav-label-front { transform:translateY(-115%); opacity:0; }
  .header nav a:hover .nav-label-next { transform:translateY(0); opacity:1; }
}
.header nav a:focus-visible .nav-label-front { transform:translateY(-115%); opacity:0; }
.header nav a:focus-visible .nav-label-next { transform:translateY(0); opacity:1; }
@media(prefers-reduced-motion:reduce) {
  .header nav a .nav-label-front { transform:none!important; opacity:1!important; }
  .nav-label-next { display:none; }
}
.motion-paused .header nav a .nav-label-front { transform:none!important; opacity:1!important; }
.motion-paused .nav-label-next { display:none; }

/* --- Powrót do góry: lekka obwódka i fiolet zamiast pełnego przycisku --- */
.back-to-top { width:46px; height:46px; background:transparent; color:#b677f0; border:1px solid #b677f085; border-radius:50%; box-shadow:0 4px 18px #09090c20; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .3s,color .3s,background .3s,box-shadow .3s; }
.back-to-top .xoxo-icon { width:20px; height:20px; stroke-width:1.8; transition:translate .35s var(--ease); }
@media(hover:hover) and (pointer:fine) {
  .back-to-top:hover { background:#b677f010; border-color:#cfacff; color:#cfacff; box-shadow:0 0 20px #b677f018; }
  .back-to-top:hover .xoxo-icon { translate:0 -3px; }
}
.back-to-top:focus-visible { outline:2px solid #cfacff; outline-offset:4px; }
@media(max-width:760px) { .back-to-top { width:42px; height:42px; } }
@media(prefers-reduced-motion:reduce) { .back-to-top:hover .xoxo-icon { translate:none; } }
.motion-paused .back-to-top:hover .xoxo-icon { translate:none; }

/* ==================================================
   Safari na telefonie — dekoracje nie poszerzają dokumentu
   ================================================== */
html { width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { width:100%; min-width:0; max-width:100%; overflow-x:hidden; }
@supports (overflow:clip) {
  html,body { overflow-x:clip; }
}
html,body { overscroll-behavior-x:none; }
main,.header,.footer { min-width:0; max-width:100%; }
/* overflow-y pozostaje naturalne: linki i pionowe przewijanie nadal działają. */
@media(max-width:760px) {
  .studio-grid { perspective:none; min-width:0; }
  .studio-art { width:min(calc(100% - 12px),390px); flex-shrink:0; }
  .studio-art .hero-brand { min-width:0; transform:rotate(-6deg); }
  .studio-art .hero-brand img { width:100%; max-width:100%; height:auto; }
  .studio-art > .vision-seal { right:8px; }
  .studio-art .floating-tag { max-width:calc(100% - 40px); }
  .hero-stage,.hero-summary,.hero-summary-copy,.project-copy,.project-art,
  .concept-card,.studio-copy,.faq-list,.contact-bottom { min-width:0; max-width:100%; }
  .hero-signature,.footer-signature { max-width:100%; }
  .concept-caption { flex-wrap:wrap; gap:8px; }
  .header nav { width:100%; max-width:100%; overflow-x:hidden; }
  .dialog-content,.mobile-showcase { min-width:0; }
}
/* Rozmiar wielkich liter odnosi się do ich rzeczywistej kolumny. */
@supports (font-size:1cqw) {
  @media(max-width:760px) {
    .hero-stage,.footer { container-type:inline-size; }
    .hero-signature { font-size:36cqw; }
    .footer-signature { font-size:16.1cqw; }
  }
}

/* ==================================================
   Kontakt — czarne koła i jasne litery w miejscu przecięcia
   ================================================== */
.contact { isolation:isolate; position:relative; }
.contact-orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.contact-orbs > span { position:absolute; display:block; width:clamp(160px,24vw,350px); aspect-ratio:1; border-radius:50%; background:#09090c; transform-origin:center; }
.contact-orbs > span:nth-child(1) { left:4%; top:24%; }
.contact-orbs > span:nth-child(2) { right:-4%; top:3%; width:clamp(180px,28vw,390px); }
.contact-orbs > span:nth-child(3) { right:30%; bottom:-8%; width:clamp(120px,17vw,240px); }
/* Cała treść tworzy jedną warstwę. Difference zmienia tylko pokryty fragment liter,
   bez kopii nagłówków, masek śledzonych JavaScriptem i blokowania kliknięć. */
.contact > .section-inner { position:relative; z-index:1; mix-blend-mode:difference; color:#f3c3ff; }
.contact > .section-inner h2 em,
.contact > .section-inner .contact-bottom > p,
.contact > .section-inner .email-label { color:inherit; }
.contact > .section-inner .email-link,
.contact > .section-inner .email-arrow { border-color:currentColor; }
.contact > .section-inner .email-link:hover .email-arrow { background:transparent; }
.contact > .section-inner :focus-visible { outline-color:currentColor; }
.contact.motion-live .contact-orbs > span:nth-child(1) { animation:contact-orb-one 11s ease-in-out infinite; }
.contact.motion-live .contact-orbs > span:nth-child(2) { animation:contact-orb-two 14s ease-in-out infinite; }
.contact.motion-live .contact-orbs > span:nth-child(3) { animation:contact-orb-three 9s ease-in-out infinite; }
@keyframes contact-orb-one { 0%,100% { transform:translate(0,0) scale(.72); } 50% { transform:translate(10%,8%) scale(1.12); } }
@keyframes contact-orb-two { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-12%,14%) scale(.62); } }
@keyframes contact-orb-three { 0%,100% { transform:translate(0,0) scale(.65); } 50% { transform:translate(-8%,-18%) scale(1.15); } }
@media(max-width:760px) {
  .contact-orbs > span:nth-child(1) { width:38vw; left:-8%; top:28%; }
  .contact-orbs > span:nth-child(2) { width:49vw; right:-12%; top:5%; }
  .contact-orbs > span:nth-child(3) { width:30vw; right:15%; bottom:3%; }
}
@media(prefers-reduced-motion:reduce) { .contact-orbs > span { animation:none!important; } }
.motion-paused .contact-orbs > span { animation:none!important; }

/* --- Zakres pracy: krótkie konkrety obok głównej myśli o wizji firmy --- */
.service-scope { padding-block:0 75px; }
.service-scope > h3 { font-size:25px; letter-spacing:-.04em; font-weight:500; margin-bottom:25px; }
.service-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.service-scope-grid article { min-width:0; border-top:1px solid #c7a0f635; padding-top:22px; }
.service-scope-grid h4 { margin:0 0 12px; color:#d5b5f2; font-size:18px; font-weight:500; letter-spacing:-.02em; }
.service-scope-grid p { color:#a995b9; font-size:15px; line-height:1.8; }
.scope-note { color:#a995b9; font-size:14px; line-height:1.7; margin-top:28px; }
@media(max-width:760px) { .service-scope { padding-bottom:55px; }.service-scope-grid { grid-template-columns:1fr; gap:25px; }.service-scope > h3 { font-size:23px; }.service-scope-grid article { padding-top:18px; } }

/* --- Wariant hero: studio jako czarny napis na lawendowym polu --- */
.hero-signature { align-items:baseline; }
.hero-signature > span {
  display:inline-block;
  flex:0 0 auto;
  max-width:100%;
  background:#cfacff;
  color:#09090c;
  -webkit-text-fill-color:#09090c;
  -webkit-text-stroke:0;
  padding:.035em .17em .055em .07em;
  line-height:1.04;
  border-radius:0;
}
@media(max-width:760px) {
  .hero-signature { align-items:flex-start; gap:.07em; }
  .hero-signature > span { font-size:.84em; padding:.045em .17em .065em .09em; }
}

/* --- Profile społecznościowe: lokalne SVG, bez zewnętrznego zestawu ikon --- */
.footer-bottom { flex-wrap:wrap; }
.footer-socials { display:flex; align-items:center; gap:10px; flex:none; }
.footer-socials a { display:grid; place-items:center; width:44px; height:44px; border:1px solid #c7a0f640; border-radius:50%; color:#c7a0f6; transition:color .25s,background .25s,border-color .25s; }
.footer-socials .social-icon { display:block; width:20px; height:20px; }
.footer-socials a:hover { background:#c7a0f614; color:#ead5ff; border-color:#c7a0f685; }
.footer-socials a:focus-visible { outline:2px solid #cfacff; outline-offset:4px; }
@media(max-width:760px) { .footer-bottom { column-gap:16px; }.footer-socials { gap:8px; } }