body{margin:0;background:#0A0B0F;color:#E8EAF0;font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6}
.mt{overflow:hidden}
html{scroll-behavior:smooth}
a{color:#E8EAF0}a:hover{color:#FFFFFF}
.mt *{box-sizing:border-box}
.mt h1,.mt h2,.mt h3{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* tło: siatka, która powoli płynie */
.gridbg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;animation:gridmove 18s linear infinite;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%)}
@keyframes gridmove{to{background-position:56px 56px,56px 56px}}

/* wejście elementów hero */
.in{opacity:0;transform:translateY(24px);animation:in .9s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes in{to{opacity:1;transform:none}}

/* rotujące słowo w nagłówku */
.rot{display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom}
.rot span{display:block;height:1.08em;line-height:1.08em;color:var(--acc);animation:rot 10s cubic-bezier(.7,0,.3,1) infinite}
@keyframes rot{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-100%)}50%,68%{transform:translateY(-200%)}75%,93%{transform:translateY(-300%)}100%{transform:translateY(-400%)}}

/* kursor */
.caret{display:inline-block;width:.08em;height:.9em;background:var(--acc);margin-left:.06em;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* makieta przeglądarki – strona "składa się" na żywo */
.build{opacity:0;transform:scale(.96) translateY(10px);animation:build .7s cubic-bezier(.2,.8,.2,1) forwards}
.b1{animation-delay:.9s}.b2{animation-delay:1.15s}.b3{animation-delay:1.35s}.b4{animation-delay:1.5s}.b5{animation-delay:1.65s}.b6{animation-delay:1.8s}.b7{animation-delay:2s}
@keyframes build{to{opacity:1;transform:none}}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.2s ease-in-out 2.4s infinite}
@keyframes shine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.float{animation:float 6s ease-in-out infinite}
.float2{animation:float 7s ease-in-out -3s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* pisany kod */
.type{display:block;white-space:nowrap;overflow:hidden;width:0;animation:type 1.1s steps(28,end) forwards}
.t1{animation-delay:1.2s}.t2{animation-delay:2.2s}.t3{animation-delay:3.2s}.t4{animation-delay:4.2s}.t5{animation-delay:5.2s}
@keyframes type{to{width:100%}}

/* pasek technologii */
.marquee{display:flex;width:max-content;animation:marq 32s linear infinite}
.marqwrap:hover .marquee{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* karty */
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s}
.card:hover{transform:translateY(-6px);border-color:var(--acc)!important;background:#15171E!important}
.card:hover .ico{background:var(--acc);color:#0A0B0F}
.ico{transition:background .35s,color .35s}
.proj{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.proj:hover{transform:translateY(-6px) rotate(-.4deg)}
.proj:hover .projimg{transform:scale(1.04)}
.projimg{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* przyciski */
.btn{transition:transform .2s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--acc)}
.btn:hover .arr{transform:translateX(4px)}
.arr{transition:transform .25s}
.ghost{transition:border-color .25s,background .25s}
.ghost:hover{border-color:#E8EAF0!important;background:rgba(255,255,255,.04)}
.navl{position:relative;text-decoration:none}
.navl::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navl:hover::after{transform:scaleX(1)}

/* pulsująca kropka */
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--acc);animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}

/* FAQ */
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details .plus{transition:transform .3s}
details[open] .plus{transform:rotate(45deg)}
details[open] .ans{animation:in .45s ease forwards}

/* realizacje – animacje makiet */
.weld{stroke-dasharray:100;stroke-dashoffset:100;animation:weld 4s linear infinite}
@keyframes weld{0%{stroke-dashoffset:100}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.spark{offset-path:path('M40 30 L62 44 L80 32 L100 50 L122 36 L140 54');offset-rotate:0deg;animation:spark 4s linear infinite}
@keyframes spark{0%{offset-distance:0%;opacity:1}60%{offset-distance:100%;opacity:1}61%,100%{offset-distance:100%;opacity:0}}
.cta-pulse{animation:ctap 2.4s ease-in-out infinite}
@keyframes ctap{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.55)}50%{box-shadow:0 0 0 8px rgba(255,122,26,0)}}
.pop{animation:popin 6s ease infinite}
.p2{animation-delay:.25s}.p3{animation-delay:.5s}
@keyframes popin{0%{opacity:0;transform:translateY(8px)}8%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.bounce{animation:bounce 1.4s cubic-bezier(.3,0,.5,1) infinite}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1.06,.92)}15%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(.97,1.04)}85%{transform:translateY(0) scale(1)}}
.shadow{animation:shad 1.4s cubic-bezier(.3,0,.5,1) infinite}
@keyframes shad{0%,100%{transform:scaleX(1.1);opacity:1}50%{transform:scaleX(.7);opacity:.5}}
.cloud{animation:cloud 14s linear infinite}
@keyframes cloud{from{left:-60px}to{left:110%}}
.pick{animation:pick 3s ease-in-out infinite}
@keyframes pick{0%,40%{background:#E9F6FF;color:#17324D}50%,90%{background:#4CB8FF;color:#FFFFFF;transform:scale(1.15)}100%{background:#E9F6FF}}
.shoe{animation:shoe 3s ease-in-out infinite}
.s2{animation-delay:.4s}.s3{animation-delay:.8s}
@keyframes shoe{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-8deg) translateY(-4px)}50%{transform:rotate(0) translateY(0)}}
.toast{animation:toast 5s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes toast{0%,15%{transform:translateY(60px);opacity:0}25%,70%{transform:none;opacity:1}80%,100%{transform:translateY(60px);opacity:0}}
.cnt{animation:cnt 15s steps(1) infinite}
@keyframes cnt{0%,24%{transform:translateY(0)}25%,49%{transform:translateY(-14px)}50%,74%{transform:translateY(-28px)}75%,100%{transform:translateY(-42px)}}
.hexbg{opacity:.1;background-image:radial-gradient(#F2B53A 1.4px,transparent 1.8px);background-size:18px 18px;animation:hex 20s linear infinite}
@keyframes hex{to{background-position:0 36px}}
.honey{transform-box:fill-box;transform-origin:50% 100%;animation:honey 5s ease-in-out infinite}
.h2{animation-delay:1.2s}
@keyframes honey{0%{transform:scaleY(.1)}50%,85%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.bee{offset-path:path('M20 50 C40 0 110 0 125 40 C140 80 70 90 60 55 C50 20 0 100 20 50');animation:bee 7s linear infinite}
@keyframes bee{to{offset-distance:100%}}
.wing{transform-box:fill-box;transform-origin:50% 100%;animation:wing .12s linear infinite alternate}
@keyframes wing{to{transform:scaleY(.3)}}

/* odsłanianie przy przewijaniu */
@supports (animation-timeline: view()){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
@keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.line{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

@media (prefers-reduced-motion: reduce){.mt *,.mt *::before,.mt *::after{animation:none!important;transition:none!important}.in,.build{opacity:1;transform:none}.type{width:100%}}

input,textarea,select{font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent!important}
@media (max-width: 760px){.hidem{display:none!important}}