/* Nevometry: produktowa prezentacja dla koła. */
:root{--paper:#f7f6f3;--ink:#20202b;--muted:#656473;--teal:#5446b5;--line:#e1dfe7;--soft:#f0eef7;--dark:#25213b}
body{background:#211c37;color:var(--ink)}
.header{height:76px;width:min(1380px,calc(100% - 88px));border-bottom:1px solid #ffffff1c;color:#fff}
.header .brand small{color:#aaa5c0}.header .desktop-nav{color:#ddd9e9}.header .desktop-nav a:hover,.header .nav-link:hover{color:#c9befb}
.header .nav-link{background:#fff;color:#221e35;border-radius:99px;padding:12px 18px}.header .nav-link:hover{background:#e6e0ff;color:#211c37}
.header .brand-mark svg rect{fill:#393254}.header .brand-mark svg circle{fill:#c5b9ff}
main{background:var(--paper)}
.hero{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;gap:0;min-height:0;padding:100px 0 84px;text-align:center;color:#fff}
.hero:before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 72%,#494469 0,#292340 46%,#211c37 80%)}
.hero-copy{width:min(100%,880px);display:flex;align-items:center;flex-direction:column}
.hero .eyebrow{display:inline-flex;width:auto;border:1px solid #ffffff2e;border-radius:99px;background:#ffffff13;padding:9px 14px;color:#e5ddff;letter-spacing:.09em;font-size:10px}
.hero .pulse{background:#c3b5ff;box-shadow:0 0 0 4px #bdaeff25}
.hero h1{max-width:870px;margin:30px 0 23px;color:#fff;font-size:clamp(52px,6.4vw,83px);font-weight:600;line-height:1.03;letter-spacing:-.055em}
.hero h1 em{color:#cfc5ff;font-style:normal;font-weight:600}
.hero-desc{max-width:600px;color:#d0ccda;font-size:18px;line-height:1.65;margin:0}
.hero-actions{justify-content:center;margin-top:29px;gap:10px}.hero .button,.hero .text-link{min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;font-size:13px;padding:0 22px}
.hero .primary{background:#fff;color:#211c37}.hero .primary:hover{background:#e6e0ff}.hero .text-link{border:1px solid #ffffff45;background:#ffffff13;color:#fff}.hero .text-link:hover{background:#ffffff22}
.hero-quick{justify-content:center;margin-top:27px}.hero-quick,.hero-quick a{color:#d8d2e6}.hero-quick a:hover{color:#fff}.hero-note{margin-top:23px;color:#b5aec4}
.project-preview{width:min(920px,100%);height:480px;margin:45px auto 0;padding:25px 30px;background:#e2e3f4;text-align:left;border:8px solid #ffffff30;border-radius:20px;box-shadow:0 35px 90px #09061360}
.project-preview:before{background:radial-gradient(ellipse at 50% 42%,#fff 0,#ebe8f8 40%,#d2d0e7 100%)}
.preview-header{font-size:10px;color:#575472}.preview-header i{background:#6956c7}.preview-phone{border-color:#28243c;box-shadow:0 24px 50px #28213e35}
.preview-phone-front{width:174px;top:6px;left:calc(50% - 135px)}.preview-phone-back{width:160px;top:30px;left:calc(50% + 3px)}
.preview-label{background:#fff;color:#29243b;border-color:#e7e4f0}.preview-label>span{background:#eeebfb;color:#5542b4}.preview-label small{color:#676476}
.preview-label-map{left:10%;bottom:76px}.preview-label-history{right:10%;top:90px}.preview-footer{border-color:#bab8d4;color:#615e74}.preview-footer a{color:#4a3b9d}
.strip{background:#eeecf5;border-color:#e3e0ec}.strip-inner span{color:#5e50ad}.strip-inner strong{color:#28223a}
.section,.data-story{padding-top:110px;padding-bottom:110px}.section-top h2,.section h2,.data-story h2{letter-spacing:-.05em}.section-index,.eyebrow,.area-type,.insight-label{color:#6050b7}
.tinted{background:#f0eef7;border-radius:40px 40px 0 0}.real-screen,.detail-screen{background:#eae9f5;border-color:#d9d7e9;border-radius:18px}.gallery-card{border-color:#dedce9;border-radius:15px;background:#fff}.gallery-card>a{background:#eae9f5}
.area{border-color:#dedbe8}.area-nav{border-color:#dedbe8}.area-nav a:hover,.detail-link:hover{color:#5844bb}
.insight,.comparison,.module-map,.research-steps{border-radius:14px}.starter-grid article{border-radius:14px;background:#fff;border-color:#e3e0ed}.first-exercise{background:#f0edfb;border-color:#6a55cb;border-radius:0 14px 14px 0}
.progress-section{background:#27213e;color:#f6f4ff}.progress-section .section-index,.progress-section .accent{color:#cfc2ff}.test-status{background:#37304e;border-color:#574d71}
.closing{background:#eeeafa;border-radius:20px}.footer{background:#f7f6f3}.detail-art,.detail-art.vision,.detail-art.mobile,.detail-art.people{background:#eae8f5;border-radius:16px}
.detail-shortcuts a,.first-exercise a,.source-panel a,.footer p a,.legal-page a:not(.button){color:#5040aa}.detail-screen .screen-caveat,.real-screen-copy .screen-caveat{color:#514d65}
a:focus-visible{outline-color:#b4a3ff}
@media(max-width:850px){.header{width:calc(100% - 40px)}.hero{padding-top:66px}.project-preview{width:min(720px,100%)}.mobile-jump{position:relative;z-index:0;color:#eee}.mobile-jump:before{content:"";position:absolute;z-index:-1;inset:0 calc((100vw - 100%) / -2);background:#211c37}.mobile-jump a{color:#ddd8ed}.mobile-jump{border-color:#ffffff25}}
@media(max-width:680px){.header{height:68px}.header .nav-link{padding:10px 12px;font-size:11px}.hero{padding:60px 0 52px}.hero h1{font-size:clamp(39px,10.3vw,62px);margin:25px 0 20px}.hero-desc{font-size:16px}.hero-actions{gap:9px}.hero .button,.hero .text-link{min-height:47px}.hero-quick{gap:12px}.hero-note{margin-top:22px}.project-preview{height:390px;margin-top:33px;padding:16px;border-width:5px;border-radius:15px}.preview-phone-front{width:137px;top:10px;left:calc(50% - 108px)}.preview-phone-back{width:125px;top:32px;left:calc(50% + 1px)}.preview-label-map{left:0;bottom:60px}.preview-label-history{right:0;top:105px}.preview-footer{font-size:9px}.preview-footer a{font-size:10px}.section,.data-story{padding-top:75px;padding-bottom:75px}.tinted{border-radius:25px 25px 0 0}.closing{border-radius:16px}.mobile-jump{gap:20px}}
@media(max-width:360px){.hero h1{font-size:37px}.project-preview{height:365px}.preview-label{padding:7px}.preview-label-history{right:-5px}.preview-label-map{left:-5px}.preview-header{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{overflow-x:clip}
.hero-quick span{color:#c0b8d0}
.detail-art.app,.detail-art.ux{background:#eae8f5}
body{overflow-x:clip}
@media(max-width:850px){.mobile-jump{width:100%;margin:0;padding-left:20px;padding-right:20px;background:#211c37}.mobile-jump:before{display:none}}
/* Ciemne tło należy do nagłówka, nie do marginesów podstron. */
body{background:var(--paper)}
.header{position:relative;isolation:isolate}
.header:before{content:"";position:absolute;z-index:-1;top:0;bottom:-1px;left:50%;width:100vw;transform:translateX(-50%);background:#211c37}
/* Wizualizacje obszarów: konkretne etapy zamiast ozdobnych symboli. */
.detail-art.area-visual{height:360px;padding:26px;background:radial-gradient(circle at 50% 15%,#f9f8ff,#dcd9ed);display:grid;place-items:center}
.visual-window{width:min(100%,360px);background:#fff;border:1px solid #dedbe9;border-radius:14px;box-shadow:0 18px 40px #2c224324;overflow:hidden;color:#28243b}
.visual-bar{height:42px;display:flex;align-items:center;gap:5px;padding:0 14px;border-bottom:1px solid #e9e7f0;color:#706b83;font-size:9px;letter-spacing:.07em;font-weight:700}
.visual-bar i{width:6px;height:6px;border-radius:50%;background:#c8c3da}.visual-bar span{margin-left:7px}
.visual-flow,.visual-observations{padding:15px 20px}.visual-flow div,.visual-observations div{display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center}.visual-flow b,.visual-observations span{grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#eeebfa;color:#6150b4;font-size:10px}.visual-flow strong,.visual-observations strong{font-size:12px}.visual-flow small,.visual-observations small{font-size:10px;color:#767184;margin-top:2px}.visual-flow>span{display:block;color:#b9b3ca;padding:3px 0 3px 9px;font-size:10px}.visual-observations{display:grid;gap:17px}.visual-note{padding:11px 20px;background:#f4f2fb;color:#615b75;font-size:10px}
.visual-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px}.visual-pair div{display:flex;flex-direction:column;align-items:center;gap:5px;background:#f1f0f3;border-radius:9px;padding:8px}.visual-pair img{height:135px;width:100%;object-fit:contain}.visual-pair span{font-size:8px;color:#615c70;font-weight:700}
.visual-mobile-content{height:225px;display:flex;align-items:center;gap:18px;padding:20px}.visual-phone{width:92px;max-height:190px;overflow:hidden;flex:none;border:4px solid #27223b;border-radius:14px}.visual-phone img{display:block;width:100%}.visual-mobile-content small,.visual-mobile-content strong{display:block}.visual-mobile-content small{color:#6b5ab8;font-size:9px;font-weight:700}.visual-mobile-content strong{margin-top:8px;font-size:18px;line-height:1.15}.visual-mobile-content p{color:#716d7f;font-size:11px;line-height:1.5}
.diagram-panel{background:#f2f0f8;border:1px solid #e3e0ed;border-radius:18px;padding:28px;margin-bottom:55px}.detail-diagram>div{border-radius:12px;background:#fff;border:1px solid #e5e1ef}.detail-layout{gap:7%}.detail-sidebar{border-color:#e4e1ed}.content-block,.detail-content section{line-height:1.65}
@media(max-width:680px){.detail-art.area-visual{height:310px;padding:20px}.visual-pair img{height:110px}.visual-mobile-content{height:210px}.diagram-panel{padding:20px;margin-bottom:40px}.detail-diagram>div{min-width:0}.detail-layout{gap:35px}.visual-observations{gap:13px}}
/* Krój pisma jak w inspiracji, dostępny również bez internetu. */
@font-face{font-family:NevometryBricolage;src:url('assets/bricolage-grotesque.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
:root{--sans:NevometryBricolage,Arial,sans-serif;--serif:var(--sans)}
.hero h1,.hero h1 em{font-weight:500;letter-spacing:-.04em}.hero h1{font-size:clamp(43px,5.2vw,68px);max-width:840px;line-height:1.07}.hero h1 em{color:#ddd8ff}.hero-desc{font-size:17px}
h1,h2,h3,.section h2,.closing h2,.detail-hero h1{font-weight:500;letter-spacing:-.035em}
.project-intro-head{max-width:740px;margin:0 auto 50px;text-align:center}.project-intro-head h2{font-size:clamp(38px,4vw,55px);font-weight:500;line-height:1.1;margin:20px 0}.project-intro-head h2 em{font-style:normal;color:#5a4cb0}.project-intro-head>p{color:#646374;font-size:16px;line-height:1.65;max-width:650px;margin:auto}
.project-tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px}.project-track{background:#fff;border:1px solid #e2deeb;border-radius:20px;padding:34px;box-shadow:0 12px 35px #2823420a}.track-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#eeeafb;color:#5b4bb6;margin-bottom:25px}.track-icon svg{width:24px;height:24px}.track-kicker{font-size:11px;color:#6253b2;font-weight:600;letter-spacing:.07em}.project-track h3{font-size:27px;font-weight:500;line-height:1.15;margin:15px 0}.project-track p{font-size:15px;line-height:1.7;color:#666473;max-width:440px}.project-track a{display:inline-block;color:#5040a5;font-size:14px;font-weight:600;text-decoration:none;margin-top:14px}.project-track a:hover{text-decoration:underline}.project-intro .boundary{margin-top:25px}
@media(max-width:680px){.hero h1{font-size:clamp(35px,9.4vw,47px);line-height:1.1}.hero-desc{font-size:16px}.project-tracks{grid-template-columns:1fr}.project-track{padding:25px}.project-intro-head{margin-bottom:32px}.project-intro-head h2{font-size:36px}.project-track h3{font-size:24px}}
/* Trzy widoki aplikacji: jeden nowy, dwa historyczne, opisane w galerii. */
.preview-phone-new{width:145px;top:39px;left:calc(50% - 235px);z-index:1;transform:rotate(-9deg)}
.preview-label-new{left:2%;top:65px}.preview-phone-front{z-index:3}.preview-phone-back{left:calc(50% + 15px);z-index:2}.preview-label{z-index:4}
.preview-label-map{left:9%}.preview-label-history{right:9%}
@media(max-width:680px){.preview-phone-new{width:105px;top:50px;left:calc(50% - 135px)}.preview-phone-front{left:calc(50% - 75px)}.preview-phone-back{left:calc(50% + 28px);width:115px}.preview-label-new{left:0;top:20px}.preview-label-map{left:0;bottom:50px}.preview-label-history{right:0;top:120px}}
.brand small{font-size:10px;letter-spacing:.01em;font-weight:500}
/* Nawigacja i schematy bez ozdobnych strzałek. */
.story-item:after{content:none}
.visual-flow{display:grid;gap:13px}
.hero .button,.button{gap:0}

/* Żywsza prezentacja produktu, z subtelnym ruchem i czytelnymi stanami. */
.real-screen{position:relative;isolation:isolate;background:linear-gradient(125deg,#eeebfb 0%,#e6e2f7 58%,#dcd5f5 100%);border-color:#d8d1ed}
.real-screen:before{content:"";position:absolute;z-index:-1;width:440px;height:440px;right:-110px;top:-150px;border:1px solid #a89bd54a;border-radius:50%;box-shadow:0 0 0 55px #ffffff20,0 0 0 110px #ffffff1c;pointer-events:none}
.real-screen-copy h3 em{font-style:normal;color:#6551bd}
.feature-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.feature-pills span{padding:9px 13px;border:1px solid #c8bee8;border-radius:99px;background:#ffffffa8;color:#4a3d85;font-size:12px;font-weight:600}
.screen-figure .phone-frame{box-shadow:0 22px 45px #44397238}
.gallery-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gallery-card>a{background:radial-gradient(circle at 50% 30%,#fff 0,#eae6fa 60%,#ddd7f2 100%);overflow:hidden}
.gallery-card img{transition:transform .35s ease}
.gallery-card:hover,.gallery-card:focus-within{transform:translateY(-5px);box-shadow:0 18px 35px #35295d1a;border-color:#c5b9e9}
.gallery-card:hover img,.gallery-card:focus-within img{transform:scale(1.035)}
.gallery-note a{color:#5140a5;font-weight:600}
.project-track,.starter-grid article{transition:transform .25s ease,box-shadow .25s ease}
.project-track:hover,.starter-grid article:hover{transform:translateY(-4px);box-shadow:0 15px 35px #33275312}
@media(max-width:680px){.feature-pills{margin-top:20px}.real-screen:before{width:280px;height:280px;right:-120px;top:-120px}.gallery-card:hover,.project-track:hover,.starter-grid article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.gallery-card,.gallery-card img,.project-track,.starter-grid article{transition:none}.gallery-card:hover,.gallery-card:focus-within,.project-track:hover,.starter-grid article:hover,.gallery-card:hover img,.gallery-card:focus-within img{transform:none}}
