{"id":14,"date":"2025-10-24T15:14:42","date_gmt":"2025-10-24T13:14:42","guid":{"rendered":"https:\/\/rafaltuszynski.pl\/?page_id=14"},"modified":"2026-09-13T17:56:16","modified_gmt":"2026-09-13T15:56:16","slug":"start","status":"publish","type":"page","link":"https:\/\/rafaltuszynski.pl\/","title":{"rendered":"Start"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><section class=\"nx-hero\" id=\"start\">\n\n  <!-- T\u0141O -->\n  <div class=\"nx-scene\">\n    <div class=\"nx-bg\"><\/div>\n    <div class=\"nx-bg-overlay\"><\/div>\n    <div class=\"nx-bg-gradient\"><\/div>\n  <\/div>\n\n  <!-- EFEKTY -->\n  <div class=\"nx-mesh\"><\/div>\n  <div class=\"nx-grid\"><\/div>\n\n  <div class=\"nx-orbit nx-orbit-1\"><\/div>\n  <div class=\"nx-orbit nx-orbit-2\"><\/div>\n  <div class=\"nx-orbit nx-orbit-3\"><\/div>\n\n  <div class=\"nx-orb nx-orb-cyan\"><\/div>\n  <div class=\"nx-orb nx-orb-purple\"><\/div>\n  <div class=\"nx-orb nx-orb-pink\"><\/div>\n\n  <div class=\"nx-particles\" id=\"nxParticles\"><\/div>\n  <div class=\"nx-cursor-glow\"><\/div>\n\n  <div class=\"nx-scanlines\"><\/div>\n  <div class=\"nx-noise\"><\/div>\n  <div class=\"nx-sweep\"><\/div>\n\n\n  <!-- MENU -->\n  <header class=\"nx-nav\">\n\n    <a href=\"#start\" class=\"nx-brand\">\n      <span class=\"nx-brand-icon\">\n        <span><\/span>\n      <\/span>\n\n      <span class=\"nx-brand-name\">\n        RAFA\u0141 TUSZY\u0143SKI<span>.PL<\/span>\n      <\/span>\n    <\/a>\n\n\n    <nav class=\"nx-menu\">\n\n      <a href=\"#o-mnie\">\n        <span>01<\/span>\n        O MNIE\n      <\/a>\n\n      <a href=\"#uslugi\">\n        <span>02<\/span>\n        US\u0141UGI\n      <\/a>\n\n      <a href=\"#projekty\">\n        <span>03<\/span>\n        PROJEKTY\n      <\/a>\n\n      <a href=\"#kontakt\">\n        <span>04<\/span>\n        KONTAKT\n      <\/a>\n\n    <\/nav>\n\n\n    <a href=\"#kontakt\" class=\"nx-nav-button magnetic\">\n\n      <span>ROZPOCZNIJ PROJEKT<\/span>\n\n      <svg viewBox=\"0 0 24 24\">\n        <path d=\"M5 19L19 5M9 5h10v10\"\/>\n      <\/svg>\n\n    <\/a>\n\n  <\/header>\n\n\n  <!-- G\u0141\u00d3WNA ZAWARTO\u015a\u0106 -->\n  <div class=\"nx-container\">\n\n    <div class=\"nx-content\">\n\n\n      <!-- STATUS -->\n      <div class=\"nx-status nx-reveal\">\n\n        <span class=\"nx-live\">\n          <i><\/i>\n          DOST\u0118PNY DO WSP\u00d3\u0141PRACY\n        <\/span>\n\n        <span class=\"nx-status-line\"><\/span>\n\n        <span class=\"nx-status-year\">\n          CYFROWY TW\u00d3RCA \/ 2026\n        <\/span>\n\n      <\/div>\n\n\n      <!-- TYTU\u0141 -->\n      <h1 class=\"nx-title\">\n\n        <span class=\"nx-title-row nx-row-create\">\n          <span class=\"nx-title-inner\">\n            TWORZ\u0118\n          <\/span>\n        <\/span>\n\n        <span class=\"nx-title-row nx-row-digital\">\n          <span class=\"nx-title-inner\">\n            CYFROWE\n          <\/span>\n        <\/span>\n\n        <span class=\"nx-title-row nx-row-experience\">\n          <span class=\"nx-title-inner\">\n            DO\u015aWIADCZENIA\n          <\/span>\n        <\/span>\n\n        <span class=\"nx-title-row nx-row-outline\">\n          <span class=\"nx-title-inner\">\n            POZA SCHEMATEM.\n          <\/span>\n        <\/span>\n\n      <\/h1>\n\n\n      <!-- OPIS -->\n      <div class=\"nx-bottom-copy nx-reveal\">\n\n        <p>\n          Projektuj\u0119 i buduj\u0119 nowoczesne strony, interfejsy\n          oraz do\u015bwiadczenia cyfrowe dla marek, kt\u00f3re chc\u0105\n          wyprzedza\u0107 konkurencj\u0119 i wygl\u0105da\u0107 inaczej ni\u017c wszyscy.\n        <\/p>\n\n      <\/div>\n\n\n      <!-- PRZYCISKI -->\n      <div class=\"nx-actions nx-reveal\">\n\n        <a href=\"#projekty\" class=\"nx-primary magnetic\">\n\n          <span class=\"nx-button-light\"><\/span>\n\n          <span>ZOBACZ PROJEKTY<\/span>\n\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n          <\/svg>\n\n        <\/a>\n\n\n        <a href=\"#kontakt\" class=\"nx-secondary\">\n\n          <span>POROZMAWIAJMY<\/span>\n\n          <span class=\"nx-secondary-arrow\">\n            \u2197\n          <\/span>\n\n        <\/a>\n\n      <\/div>\n\n\n      <!-- TECHNOLOGIE -->\n      <div class=\"nx-stack nx-reveal\">\n\n        <span>WEB DESIGN<\/span>\n        <i><\/i>\n\n        <span>DEVELOPMENT<\/span>\n        <i><\/i>\n\n        <span>UI \/ UX<\/span>\n        <i><\/i>\n\n        <span>CREATIVE<\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- KARTY HUD -->\n    <div class=\"nx-data\">\n\n      <div class=\"nx-glass-card nx-card-1\">\n\n        <div class=\"nx-card-top\">\n          <span>PROJEKTY<\/span>\n          <i><\/i>\n        <\/div>\n\n        <strong>\n          24<span>+<\/span>\n        <\/strong>\n\n        <small>\n          REALIZACJE CYFROWE\n        <\/small>\n\n      <\/div>\n\n\n      <div class=\"nx-glass-card nx-card-2\">\n\n        <div class=\"nx-card-top\">\n          <span>SYSTEM<\/span>\n          <i><\/i>\n        <\/div>\n\n        <strong class=\"nx-online\">\n          AKTYWNY\n        <\/strong>\n\n        <div class=\"nx-bars\">\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"nx-target\">\n\n        <span><\/span>\n        <span><\/span>\n        <div><\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- BOCZNE ELEMENTY -->\n  <div class=\"nx-side nx-side-left\">\n    <span>DESIGN \/ KREACJA<\/span>\n    <i><\/i>\n    <span>DO\u015aWIADCZENIE<\/span>\n  <\/div>\n\n\n  <div class=\"nx-side nx-side-right\">\n    <span>52.2297 N<\/span>\n    <i><\/i>\n    <span>CYFROWA PRZESTRZE\u0143<\/span>\n  <\/div>\n\n\n  <!-- SCROLL -->\n  <a href=\"#o-mnie\" class=\"nx-scroll\">\n\n    <span>PRZEWI\u0143 DALEJ<\/span>\n\n    <div>\n      <i><\/i>\n    <\/div>\n\n  <\/a>\n\n\n  <div class=\"nx-frame nx-frame-tl\"><\/div>\n  <div class=\"nx-frame nx-frame-br\"><\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n.nx-hero,\n.nx-hero * {\n  box-sizing: border-box;\n}\n\n.nx-hero {\n  --cyan: #46f9ff;\n  --cyan2: #00d9ff;\n  --violet: #765cff;\n  --purple: #a55cff;\n  --pink: #ff27d3;\n  --white: #f8faff;\n\n  position: relative;\n\n  width: 100%;\n  min-height: 100svh;\n\n  overflow: hidden;\n\n  background: #020308;\n\n  color: #fff;\n\n  isolation: isolate;\n\n  font-family:\n    \"Inter\",\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   T\u0141O\n========================================================= *\/\n\n.nx-scene {\n  position: absolute;\n  inset: 0;\n\n  overflow: hidden;\n\n  z-index: -10;\n}\n\n.nx-bg {\n  position: absolute;\n\n  inset: -4%;\n\n  width: 108%;\n  height: 108%;\n\n  \/*\n  ==========================================================\n  TUTAJ WKLEJ URL NOWEGO T\u0141A Z WORDPRESSA\n  ==========================================================\n  *\/\n\n  background-image:\n    url('\/wp-content\/uploads\/2026\/09\/bg-2.png');\n\n  background-size: cover;\n\n  background-position:\n    center center;\n\n  filter:\n    brightness(.82)\n    contrast(1.08)\n    saturate(.95);\n\n  transform:\n    scale(1.03);\n\n  animation:\n    nxCamera 20s\n    ease-in-out\n    infinite alternate;\n\n  will-change: transform;\n}\n\n@keyframes nxCamera {\n\n  from {\n    transform:\n      scale(1.03)\n      translate3d(0,0,0);\n  }\n\n  to {\n    transform:\n      scale(1.08)\n      translate3d(-1%,-.5%,0);\n  }\n\n}\n\n\n\/* =========================================================\n   PRZYCIEMNIENIE T\u0141A\n========================================================= *\/\n\n.nx-bg-overlay {\n  position: absolute;\n  inset: 0;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(1,3,8,.78) 0%,\n      rgba(2,5,12,.58) 31%,\n      rgba(2,5,14,.23) 59%,\n      rgba(2,4,12,.10) 100%\n    ),\n\n    linear-gradient(\n      0deg,\n      rgba(1,2,8,.74) 0%,\n      transparent 44%,\n      rgba(1,3,9,.28) 100%\n    );\n}\n\n\n\/* =========================================================\n   AMBIENT\n========================================================= *\/\n\n.nx-bg-gradient {\n  position: absolute;\n  inset: 0;\n\n  background:\n\n    radial-gradient(\n      circle at 14% 48%,\n      rgba(0,245,255,.09),\n      transparent 27%\n    ),\n\n    radial-gradient(\n      circle at 72% 38%,\n      rgba(79,101,255,.07),\n      transparent 32%\n    ),\n\n    radial-gradient(\n      circle at 64% 92%,\n      rgba(255,39,211,.09),\n      transparent 28%\n    );\n}\n\n\n\/* =========================================================\n   MESH\n========================================================= *\/\n\n.nx-mesh {\n  position: absolute;\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events: none;\n\n  background:\n\n    radial-gradient(\n      circle at 12% 48%,\n      rgba(0,245,255,.09),\n      transparent 26%\n    ),\n\n    radial-gradient(\n      circle at 80% 30%,\n      rgba(118,92,255,.08),\n      transparent 30%\n    ),\n\n    radial-gradient(\n      circle at 55% 92%,\n      rgba(255,39,211,.07),\n      transparent 28%\n    );\n\n  animation:\n    nxMesh 9s\n    ease-in-out\n    infinite alternate;\n}\n\n@keyframes nxMesh {\n\n  from {\n    opacity: .65;\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1.05);\n  }\n\n}\n\n\n\/* =========================================================\n   PERSPEKTYWICZNA SIATKA\n========================================================= *\/\n\n.nx-grid {\n  position: absolute;\n\n  left: -10%;\n  right: -10%;\n  bottom: -47%;\n\n  height: 84%;\n\n  z-index: 1;\n\n  opacity: .12;\n\n  pointer-events: none;\n\n  background-image:\n\n    linear-gradient(\n      rgba(70,249,255,.10) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(70,249,255,.10) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    72px 72px;\n\n  transform:\n    perspective(700px)\n    rotateX(67deg)\n    scale(1.25);\n\n  transform-origin:\n    bottom center;\n\n  mask-image:\n    linear-gradient(\n      to bottom,\n      transparent,\n      #000\n    );\n}\n\n\n\/* =========================================================\n   ORBITY\n========================================================= *\/\n\n.nx-orbit {\n  position: absolute;\n\n  border-radius: 50%;\n\n  pointer-events: none;\n\n  border:\n    1px solid\n    rgba(70,249,255,.11);\n}\n\n.nx-orbit::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 5px;\n  height: 5px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 10px var(--cyan),\n    0 0 24px rgba(70,249,255,.6);\n}\n\n.nx-orbit-1 {\n  width: 620px;\n  height: 620px;\n\n  right: -100px;\n  top: 8%;\n\n  animation:\n    nxOrbit1 25s\n    linear infinite;\n}\n\n.nx-orbit-1::before {\n  top: 15%;\n  left: 10%;\n}\n\n.nx-orbit-2 {\n  width: 940px;\n  height: 940px;\n\n  right: -340px;\n  top: -9%;\n\n  border-color:\n    rgba(165,92,255,.09);\n\n  animation:\n    nxOrbit2 34s\n    linear infinite;\n}\n\n.nx-orbit-2::before {\n  left: 3%;\n  top: 65%;\n\n  background: var(--purple);\n\n  box-shadow:\n    0 0 12px var(--purple);\n}\n\n.nx-orbit-3 {\n  width: 380px;\n  height: 380px;\n\n  right: 23%;\n  top: 31%;\n\n  border-color:\n    rgba(255,39,211,.09);\n\n  animation:\n    nxOrbit1 20s\n    linear infinite reverse;\n}\n\n.nx-orbit-3::before {\n  bottom: 3%;\n  right: 25%;\n\n  background: var(--pink);\n\n  box-shadow:\n    0 0 12px var(--pink);\n}\n\n@keyframes nxOrbit1 {\n\n  to {\n    transform: rotate(360deg);\n  }\n\n}\n\n@keyframes nxOrbit2 {\n\n  to {\n    transform: rotate(-360deg);\n  }\n\n}\n\n\n\/* =========================================================\n   \u015aWIAT\u0141A\n========================================================= *\/\n\n.nx-orb {\n  position: absolute;\n\n  z-index: 1;\n\n  border-radius: 50%;\n\n  pointer-events: none;\n\n  filter: blur(100px);\n}\n\n.nx-orb-cyan {\n  width: 500px;\n  height: 500px;\n\n  right: 15%;\n  top: 16%;\n\n  background:\n    rgba(0,217,255,.08);\n\n  animation:\n    nxOrb1 10s\n    ease-in-out infinite alternate;\n}\n\n.nx-orb-purple {\n  width: 520px;\n  height: 520px;\n\n  right: -100px;\n  bottom: -160px;\n\n  background:\n    rgba(118,92,255,.10);\n\n  animation:\n    nxOrb2 13s\n    ease-in-out infinite alternate;\n}\n\n.nx-orb-pink {\n  width: 420px;\n  height: 420px;\n\n  left: 34%;\n  bottom: -200px;\n\n  background:\n    rgba(255,39,211,.07);\n\n  animation:\n    nxOrb3 12s\n    ease-in-out infinite alternate;\n}\n\n@keyframes nxOrb1 {\n\n  to {\n    transform:\n      translate(-70px,50px)\n      scale(1.1);\n  }\n\n}\n\n@keyframes nxOrb2 {\n\n  to {\n    transform:\n      translate(-80px,-60px);\n  }\n\n}\n\n@keyframes nxOrb3 {\n\n  to {\n    transform:\n      translate(80px,-40px);\n  }\n\n}\n\n\n\/* =========================================================\n   PARTICLES\n========================================================= *\/\n\n.nx-particles {\n  position: absolute;\n  inset: 0;\n\n  z-index: 3;\n\n  pointer-events: none;\n}\n\n.nx-particle {\n  position: absolute;\n\n  width: 2px;\n  height: 2px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(100,249,255,.9);\n\n  box-shadow:\n    0 0 8px\n    rgba(70,249,255,.8);\n\n  opacity: 0;\n\n  animation:\n    nxParticleFloat\n    linear infinite;\n}\n\n@keyframes nxParticleFloat {\n\n  0% {\n    opacity: 0;\n\n    transform:\n      translateY(25px)\n      scale(.5);\n  }\n\n  20% {\n    opacity: .7;\n  }\n\n  80% {\n    opacity: .3;\n  }\n\n  100% {\n    opacity: 0;\n\n    transform:\n      translateY(-120px)\n      scale(1.2);\n  }\n\n}\n\n\n\/* =========================================================\n   CURSOR LIGHT\n========================================================= *\/\n\n.nx-cursor-glow {\n  position: fixed;\n\n  z-index: 4;\n\n  width: 500px;\n  height: 500px;\n\n  pointer-events: none;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(70,249,255,.08),\n      rgba(118,92,255,.035) 35%,\n      transparent 68%\n    );\n\n  filter: blur(10px);\n\n  transform:\n    translate(-50%,-50%);\n\n  opacity: 0;\n\n  transition:\n    opacity .3s ease;\n}\n\n\n\/* =========================================================\n   SCANLINES\n========================================================= *\/\n\n.nx-scanlines {\n  position: absolute;\n  inset: 0;\n\n  z-index: 20;\n\n  pointer-events: none;\n\n  opacity: .025;\n\n  background:\n    repeating-linear-gradient(\n      to bottom,\n      transparent 0,\n      transparent 3px,\n      rgba(255,255,255,.14) 4px\n    );\n}\n\n\n\/* =========================================================\n   NOISE\n========================================================= *\/\n\n.nx-noise {\n  position: absolute;\n\n  z-index: 21;\n\n  pointer-events: none;\n\n  left: -100%;\n  top: -100%;\n\n  width: 300%;\n  height: 300%;\n\n  opacity: .022;\n\n  background-image:\n    url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'\/%3E%3C\/svg%3E\");\n\n  animation:\n    nxNoise .25s\n    steps(2)\n    infinite;\n}\n\n@keyframes nxNoise {\n\n  0% {\n    transform: translate(0,0);\n  }\n\n  25% {\n    transform: translate(2%,-1%);\n  }\n\n  50% {\n    transform: translate(-1%,2%);\n  }\n\n  75% {\n    transform: translate(1%,1%);\n  }\n\n  100% {\n    transform: translate(-2%,-1%);\n  }\n\n}\n\n\n\/* =========================================================\n   LIGHT SWEEP\n========================================================= *\/\n\n.nx-sweep {\n  position: absolute;\n\n  z-index: 5;\n\n  pointer-events: none;\n\n  top: -40%;\n  left: -35%;\n\n  width: 25%;\n  height: 180%;\n\n  transform:\n    rotate(12deg);\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(70,249,255,.035),\n      rgba(255,255,255,.07),\n      rgba(255,39,211,.035),\n      transparent\n    );\n\n  filter: blur(30px);\n\n  animation:\n    nxSweep 9s\n    3s ease-in-out\n    infinite;\n}\n\n@keyframes nxSweep {\n\n  0% {\n    left: -35%;\n    opacity: 0;\n  }\n\n  15% {\n    opacity: 1;\n  }\n\n  45% {\n    left: 125%;\n    opacity: .8;\n  }\n\n  46%,\n  100% {\n    opacity: 0;\n  }\n\n}\n\n\n\/* =========================================================\n   MENU\n========================================================= *\/\n\n.nx-nav {\n  position: absolute;\n\n  z-index: 50;\n\n  top: 0;\n  left: 50%;\n\n  transform:\n    translateX(-50%);\n\n  width:\n    min(1580px, calc(100% - 60px));\n\n  height: 110px;\n\n  display: flex;\n\n  align-items: center;\n\n  opacity: 0;\n\n  animation:\n    nxNavReveal\n    .9s .3s ease\n    forwards;\n}\n\n@keyframes nxNavReveal {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translate(-50%,-20px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translate(-50%,0);\n  }\n\n}\n\n\n\/* =========================================================\n   LOGO\n========================================================= *\/\n\n.nx-brand {\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n\n  color: #fff;\n\n  text-decoration: none;\n}\n\n.nx-brand-icon {\n  position: relative;\n\n  width: 20px;\n  height: 20px;\n\n  transform: rotate(45deg);\n\n  border:\n    1px solid var(--cyan);\n\n  box-shadow:\n    0 0 18px\n    rgba(70,249,255,.3);\n}\n\n.nx-brand-icon span {\n  position: absolute;\n\n  width: 5px;\n  height: 5px;\n\n  top: 50%;\n  left: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 10px var(--cyan);\n}\n\n.nx-brand-name {\n  font-size: 18px;\n\n  font-weight: 800;\n\n  letter-spacing: 5px;\n}\n\n.nx-brand-name span {\n  color: var(--cyan);\n}\n\n\n\/* =========================================================\n   MENU LINKI\n========================================================= *\/\n\n.nx-menu {\n  display: flex;\n\n  gap: 38px;\n\n  margin-left: auto;\n}\n\n.nx-menu a {\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 5px;\n\n  text-decoration: none;\n\n  color:\n    rgba(255,255,255,.64);\n\n  font-size: 10px;\n\n  font-weight: 700;\n\n  letter-spacing: 2px;\n\n  transition:\n    .3s ease;\n}\n\n.nx-menu a span {\n  font-size: 7px;\n\n  color:\n    rgba(70,249,255,.55);\n}\n\n.nx-menu a:hover {\n  color: #fff;\n\n  transform:\n    translateY(-2px);\n}\n\n\n\/* =========================================================\n   CTA MENU\n========================================================= *\/\n\n.nx-nav-button {\n  margin-left: 45px;\n\n  min-width: 225px;\n  height: 54px;\n\n  padding: 0 23px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  color: #fff;\n\n  text-decoration: none;\n\n  font-size: 10px;\n\n  font-weight: 700;\n\n  letter-spacing: 1.6px;\n\n  border:\n    1px solid\n    rgba(70,249,255,.28);\n\n  background:\n    linear-gradient(\n      120deg,\n      rgba(70,249,255,.07),\n      rgba(118,92,255,.07)\n    );\n\n  backdrop-filter:\n    blur(16px);\n\n  transition:\n    .3s ease;\n}\n\n.nx-nav-button:hover {\n  border-color:\n    rgba(70,249,255,.75);\n\n  box-shadow:\n    0 0 35px\n    rgba(70,249,255,.10);\n}\n\n.nx-nav-button svg {\n  width: 16px;\n  height: 16px;\n\n  fill: none;\n\n  stroke: var(--cyan);\n\n  stroke-width: 1.7;\n}\n\n\n\/* =========================================================\n   CONTENT CONTAINER\n========================================================= *\/\n\n.nx-container {\n  position: relative;\n\n  z-index: 10;\n\n  width:\n    min(1580px, calc(100% - 60px));\n\n  min-height: 100svh;\n\n  margin: 0 auto;\n\n  display: flex;\n\n  align-items: center;\n}\n\n.nx-content {\n  position: relative;\n\n  z-index: 10;\n\n  width:\n    min(1080px, 76%);\n\n  padding-top: 95px;\n\n  will-change: transform;\n}\n\n\n\/* =========================================================\n   STATUS\n========================================================= *\/\n\n.nx-status {\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n\n  margin-bottom: 26px;\n\n  color:\n    rgba(225,238,245,.64);\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n  letter-spacing: 2.4px;\n}\n\n.nx-live {\n  display: flex;\n\n  align-items: center;\n\n  gap: 9px;\n}\n\n.nx-live i {\n  width: 5px;\n  height: 5px;\n\n  border-radius: 50%;\n\n  background: #4cffb1;\n\n  box-shadow:\n    0 0 7px #4cffb1,\n    0 0 20px rgba(76,255,177,.5);\n\n  animation:\n    nxLive 1.8s\n    ease-in-out infinite;\n}\n\n@keyframes nxLive {\n\n  50% {\n    opacity: .35;\n    transform: scale(.65);\n  }\n\n}\n\n.nx-status-line {\n  width: 48px;\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      transparent\n    );\n}\n\n.nx-status-year {\n  color: var(--cyan);\n\n  opacity: .7;\n}\n\n\n\/* =========================================================\n   G\u0141\u00d3WNY TYTU\u0141\n========================================================= *\/\n\n.nx-title {\n  margin: 0;\n\n  font-size:\n    clamp(68px, 6.8vw, 128px);\n\n  line-height: .79;\n\n  letter-spacing: -.065em;\n\n  font-weight: 700;\n}\n\n.nx-title-row {\n  display: block;\n\n  overflow: hidden;\n\n  padding-bottom: .06em;\n}\n\n.nx-title-inner {\n  display: block;\n\n  transform:\n    translateY(115%);\n\n  animation:\n    nxTitleReveal\n    1.15s\n    cubic-bezier(.16,1,.3,1)\n    forwards;\n}\n\n\n\/* =========================================================\n   1 \u2014 TWORZ\u0118\n========================================================= *\/\n\n.nx-row-create .nx-title-inner {\n\n  color: #dce8f0;\n\n  text-shadow:\n    0 0 35px\n    rgba(70,249,255,.07);\n\n  animation-delay: .42s;\n}\n\n\n\/* =========================================================\n   2 \u2014 CYFROWE\n========================================================= *\/\n\n.nx-row-digital .nx-title-inner {\n\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #bdfdff 15%,\n      #55f8ff 40%,\n      #36e0ff 67%,\n      #7d8fff 100%\n    );\n\n  -webkit-background-clip: text;\n  background-clip: text;\n\n  color: transparent;\n\n  filter:\n    drop-shadow(\n      0 0 22px\n      rgba(70,249,255,.10)\n    );\n\n  animation-delay: .54s;\n}\n\n\n\/* =========================================================\n   3 \u2014 DO\u015aWIADCZENIA\n========================================================= *\/\n\n.nx-row-experience .nx-title-inner {\n\n  background:\n    linear-gradient(\n      90deg,\n      #f2f8ff 0%,\n      #e4edf7 30%,\n      #d4daf7 58%,\n      #c7b8ff 80%,\n      #ae8cff 100%\n    );\n\n  -webkit-background-clip: text;\n  background-clip: text;\n\n  color: transparent;\n\n  filter:\n    drop-shadow(\n      0 0 22px\n      rgba(118,92,255,.08)\n    );\n\n  animation-delay: .66s;\n}\n\n\n\/* =========================================================\n   4 \u2014 POZA SCHEMATEM\n========================================================= *\/\n\n.nx-row-outline .nx-title-inner {\n\n  color:\n    rgba(255,255,255,.015);\n\n  -webkit-text-stroke:\n    1px\n    rgba(215,235,245,.82);\n\n  filter:\n    drop-shadow(\n      0 0 18px\n      rgba(70,249,255,.045)\n    );\n\n  animation-delay: .78s;\n}\n\n\n@keyframes nxTitleReveal {\n\n  to {\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n\/* =========================================================\n   OPIS\n========================================================= *\/\n\n.nx-bottom-copy {\n  margin-top: 31px;\n}\n\n.nx-bottom-copy p {\n  max-width: 650px;\n\n  margin: 0;\n\n  color:\n    rgba(226,236,244,.69);\n\n  font-size: 14px;\n\n  line-height: 1.8;\n}\n\n\n\/* =========================================================\n   REVEAL\n========================================================= *\/\n\n.nx-reveal {\n  opacity: 0;\n\n  transform:\n    translateY(18px);\n\n  filter: blur(5px);\n\n  animation:\n    nxReveal\n    .9s .9s ease\n    forwards;\n}\n\n.nx-actions {\n  animation-delay: 1.05s;\n}\n\n.nx-stack {\n  animation-delay: 1.2s;\n}\n\n@keyframes nxReveal {\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n\n    filter:\n      blur(0);\n  }\n\n}\n\n\n\/* =========================================================\n   PRZYCISKI\n========================================================= *\/\n\n.nx-actions {\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n\n  margin-top: 36px;\n}\n\n.nx-primary {\n  position: relative;\n\n  overflow: hidden;\n\n  min-width: 225px;\n  height: 59px;\n\n  padding: 0 26px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 20px;\n\n  color: #02050a;\n\n  text-decoration: none;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: 1.8px;\n\n  background:\n    linear-gradient(\n      100deg,\n      #b6fdff,\n      #4af8ff 45%,\n      #2edcff\n    );\n\n  box-shadow:\n    0 15px 60px\n    rgba(0,238,255,.14);\n\n  transition:\n    .3s ease;\n}\n\n.nx-primary:hover {\n  box-shadow:\n    0 20px 70px\n    rgba(0,238,255,.26);\n}\n\n.nx-primary svg {\n  width: 17px;\n\n  fill: none;\n\n  stroke: currentColor;\n\n  stroke-width: 1.8;\n}\n\n.nx-button-light {\n  position: absolute;\n\n  top: -40px;\n  left: -80px;\n\n  width: 50px;\n  height: 140px;\n\n  transform:\n    rotate(24deg);\n\n  background:\n    rgba(255,255,255,.65);\n\n  filter: blur(15px);\n\n  transition:\n    left .65s ease;\n}\n\n.nx-primary:hover\n.nx-button-light {\n  left: 120%;\n}\n\n\n\/* SECONDARY *\/\n\n.nx-secondary {\n  height: 59px;\n\n  padding: 0 26px;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 23px;\n\n  color:\n    rgba(255,255,255,.82);\n\n  text-decoration: none;\n\n  font-size: 10px;\n\n  font-weight: 700;\n\n  letter-spacing: 1.7px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.16);\n\n  background:\n    rgba(255,255,255,.025);\n\n  backdrop-filter:\n    blur(15px);\n\n  transition:\n    .35s ease;\n}\n\n.nx-secondary:hover {\n  color: #fff;\n\n  border-color:\n    rgba(165,92,255,.55);\n\n  background:\n    rgba(118,92,255,.08);\n}\n\n.nx-secondary-arrow {\n  color: #b89cff;\n}\n\n\n\/* =========================================================\n   STACK\n========================================================= *\/\n\n.nx-stack {\n  display: flex;\n\n  align-items: center;\n\n  gap: 13px;\n\n  margin-top: 45px;\n\n  color:\n    rgba(220,235,245,.38);\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n  letter-spacing: 2px;\n}\n\n.nx-stack i {\n  width: 3px;\n  height: 3px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n}\n\n\n\/* =========================================================\n   HUD CARDS\n========================================================= *\/\n\n.nx-data {\n  position: absolute;\n  inset: 0;\n\n  z-index: 7;\n\n  pointer-events: none;\n}\n\n.nx-glass-card {\n  position: absolute;\n\n  padding: 18px 20px;\n\n  border:\n    1px solid\n    rgba(180,220,255,.18);\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(12,18,36,.65),\n      rgba(7,9,20,.35)\n    );\n\n  backdrop-filter:\n    blur(20px);\n\n  box-shadow:\n    inset 0 1px 0\n    rgba(255,255,255,.07),\n    0 30px 90px\n    rgba(0,0,0,.22);\n\n  opacity: 0;\n\n  animation:\n    nxCardAppear\n    .8s 1.3s ease forwards,\n    nxFloat\n    6s 2.2s ease-in-out infinite;\n}\n\n.nx-card-1 {\n  top: 33%;\n  right: 3%;\n\n  width: 160px;\n}\n\n.nx-card-2 {\n  right: 10%;\n  bottom: 16%;\n\n  width: 180px;\n\n  animation-delay:\n    1.5s,\n    2.5s;\n}\n\n@keyframes nxCardAppear {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateY(20px)\n      scale(.96);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0)\n      scale(1);\n  }\n\n}\n\n@keyframes nxFloat {\n\n  0%,\n  100% {\n    transform:\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateY(-10px);\n  }\n\n}\n\n.nx-card-top {\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  margin-bottom: 15px;\n\n  color:\n    rgba(215,230,245,.45);\n\n  font-size: 7px;\n\n  font-weight: 700;\n\n  letter-spacing: 1.6px;\n}\n\n.nx-card-top i {\n  width: 5px;\n  height: 5px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 9px var(--cyan);\n}\n\n.nx-glass-card strong {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: #fff;\n\n  font-size: 33px;\n\n  font-weight: 600;\n\n  letter-spacing: -2px;\n}\n\n.nx-glass-card strong span {\n  color: var(--cyan);\n}\n\n.nx-glass-card small {\n  color:\n    rgba(220,235,245,.36);\n\n  font-size: 6px;\n\n  letter-spacing: 1.3px;\n}\n\n.nx-online {\n  color: #66ffb5 !important;\n\n  font-size: 21px !important;\n\n  letter-spacing: 1px !important;\n}\n\n\n\/* =========================================================\n   BARS\n========================================================= *\/\n\n.nx-bars {\n  display: flex;\n\n  align-items: flex-end;\n\n  gap: 3px;\n\n  height: 21px;\n\n  margin-top: 10px;\n}\n\n.nx-bars i {\n  width: 4px;\n\n  background:\n    linear-gradient(\n      to top,\n      var(--purple),\n      var(--cyan)\n    );\n\n  animation:\n    nxBars\n    1s ease-in-out\n    infinite alternate;\n}\n\n.nx-bars i:nth-child(1) {\n  height: 35%;\n}\n\n.nx-bars i:nth-child(2) {\n  height: 65%;\n  animation-delay: .2s;\n}\n\n.nx-bars i:nth-child(3) {\n  height: 100%;\n  animation-delay: .4s;\n}\n\n.nx-bars i:nth-child(4) {\n  height: 55%;\n  animation-delay: .1s;\n}\n\n.nx-bars i:nth-child(5) {\n  height: 80%;\n  animation-delay: .35s;\n}\n\n@keyframes nxBars {\n\n  to {\n    height: 25%;\n  }\n\n}\n\n\n\/* =========================================================\n   TARGET\n========================================================= *\/\n\n.nx-target {\n  position: absolute;\n\n  right: 24%;\n  top: 44%;\n\n  width: 72px;\n  height: 72px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(70,249,255,.18);\n\n  animation:\n    nxTarget\n    10s linear infinite;\n}\n\n.nx-target span {\n  position: absolute;\n\n  top: 50%;\n  left: 50%;\n\n  background:\n    rgba(70,249,255,.28);\n}\n\n.nx-target span:nth-child(1) {\n  width: 92px;\n  height: 1px;\n\n  transform:\n    translate(-50%,-50%);\n}\n\n.nx-target span:nth-child(2) {\n  width: 1px;\n  height: 92px;\n\n  transform:\n    translate(-50%,-50%);\n}\n\n.nx-target div {\n  position: absolute;\n\n  top: 50%;\n  left: 50%;\n\n  width: 5px;\n  height: 5px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 12px var(--cyan);\n}\n\n@keyframes nxTarget {\n\n  to {\n    transform: rotate(360deg);\n  }\n\n}\n\n\n\/* =========================================================\n   BOCZNE HUD\n========================================================= *\/\n\n.nx-side {\n  position: absolute;\n\n  z-index: 12;\n\n  top: 50%;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 13px;\n\n  color:\n    rgba(220,235,245,.28);\n\n  font-size: 7px;\n\n  font-weight: 700;\n\n  letter-spacing: 2px;\n\n  pointer-events: none;\n}\n\n.nx-side i {\n  display: block;\n\n  width: 50px;\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      transparent\n    );\n}\n\n.nx-side-left {\n  left: -65px;\n\n  transform:\n    translateY(-50%)\n    rotate(-90deg);\n}\n\n.nx-side-right {\n  right: -55px;\n\n  transform:\n    translateY(-50%)\n    rotate(90deg);\n}\n\n\n\/* =========================================================\n   SCROLL\n========================================================= *\/\n\n.nx-scroll {\n  position: absolute;\n\n  z-index: 20;\n\n  left: 50%;\n  bottom: 24px;\n\n  transform:\n    translateX(-50%);\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color:\n    rgba(220,235,245,.40);\n\n  text-decoration: none;\n\n  font-size: 6px;\n\n  letter-spacing: 3px;\n}\n\n.nx-scroll > div {\n  position: relative;\n\n  width: 1px;\n  height: 34px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.12);\n}\n\n.nx-scroll i {\n  position: absolute;\n\n  left: 0;\n  top: -12px;\n\n  width: 1px;\n  height: 12px;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n\n  animation:\n    nxScroll\n    1.7s ease-in-out\n    infinite;\n}\n\n@keyframes nxScroll {\n\n  to {\n    top: 45px;\n  }\n\n}\n\n\n\/* =========================================================\n   RAMKI\n========================================================= *\/\n\n.nx-frame {\n  position: absolute;\n\n  z-index: 9;\n\n  width: 54px;\n  height: 54px;\n\n  pointer-events: none;\n\n  opacity: .4;\n}\n\n.nx-frame-tl {\n  left: 28px;\n  top: 138px;\n\n  border-top:\n    1px solid var(--cyan);\n\n  border-left:\n    1px solid var(--cyan);\n}\n\n.nx-frame-br {\n  right: 28px;\n  bottom: 28px;\n\n  border-right:\n    1px solid var(--pink);\n\n  border-bottom:\n    1px solid var(--pink);\n}\n\n\n\/* =========================================================\n   MAGNETIC\n========================================================= *\/\n\n.magnetic {\n  will-change: transform;\n\n  transition:\n    transform .18s ease-out,\n    box-shadow .3s ease,\n    border-color .3s ease;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width: 1180px) {\n\n  .nx-nav,\n  .nx-container {\n    width:\n      calc(100% - 50px);\n  }\n\n  .nx-menu {\n    display: none;\n  }\n\n  .nx-nav-button {\n    margin-left: auto;\n  }\n\n  .nx-content {\n    width: 80%;\n  }\n\n  .nx-title {\n    font-size:\n      clamp(62px,8vw,100px);\n  }\n\n  .nx-card-1 {\n    right: 1%;\n  }\n\n  .nx-card-2 {\n    right: 3%;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width: 767px) {\n\n  .nx-hero {\n    min-height: 100svh;\n  }\n\n  .nx-nav {\n    width:\n      calc(100% - 34px);\n\n    height: 78px;\n  }\n\n  .nx-brand-name {\n    font-size: 14px;\n\n    letter-spacing: 3px;\n  }\n\n  .nx-nav-button {\n    display: none;\n  }\n\n  .nx-container {\n    width:\n      calc(100% - 34px);\n\n    min-height: 100svh;\n\n    align-items: flex-end;\n\n    padding-bottom: 65px;\n  }\n\n  .nx-content {\n    width: 100%;\n\n    padding-top: 110px;\n  }\n\n  .nx-bg {\n    background-position:\n      67% center;\n  }\n\n  .nx-bg-overlay {\n    background:\n\n      linear-gradient(\n        0deg,\n        rgba(1,3,9,.97) 0%,\n        rgba(1,3,9,.88) 48%,\n        rgba(1,3,9,.25) 100%\n      );\n  }\n\n  .nx-status {\n    font-size: 6px;\n\n    gap: 8px;\n\n    letter-spacing: 1.4px;\n  }\n\n  .nx-status-line {\n    width: 20px;\n  }\n\n  .nx-title {\n    font-size:\n      clamp(47px,15.5vw,70px);\n\n    line-height: .84;\n\n    letter-spacing: -.055em;\n  }\n\n  .nx-bottom-copy {\n    margin-top: 24px;\n  }\n\n  .nx-bottom-copy p {\n    font-size: 13px;\n\n    line-height: 1.65;\n  }\n\n  .nx-actions {\n    flex-direction: column;\n\n    align-items: stretch;\n\n    margin-top: 27px;\n  }\n\n  .nx-primary,\n  .nx-secondary {\n    width: 100%;\n\n    justify-content: space-between;\n  }\n\n  .nx-stack {\n    margin-top: 27px;\n\n    flex-wrap: wrap;\n\n    gap: 7px;\n\n    font-size: 6px;\n  }\n\n  .nx-glass-card,\n  .nx-target,\n  .nx-side,\n  .nx-frame {\n    display: none;\n  }\n\n  .nx-scroll {\n    display: none;\n  }\n\n  .nx-orbit-1 {\n    width: 420px;\n    height: 420px;\n\n    right: -280px;\n  }\n\n  .nx-orbit-2 {\n    width: 650px;\n    height: 650px;\n\n    right: -450px;\n  }\n\n  .nx-cursor-glow {\n    display: none;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion: reduce) {\n\n  .nx-bg,\n  .nx-mesh,\n  .nx-orbit,\n  .nx-orb,\n  .nx-particle,\n  .nx-sweep,\n  .nx-live,\n  .nx-bars i,\n  .nx-scroll i {\n\n    animation:\n      none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\n  'DOMContentLoaded',\n  function() {\n\n    const hero =\n      document.querySelector('.nx-hero');\n\n    if (!hero) return;\n\n\n    const bg =\n      hero.querySelector('.nx-bg');\n\n    const content =\n      hero.querySelector('.nx-content');\n\n    const glow =\n      hero.querySelector('.nx-cursor-glow');\n\n    const particles =\n      hero.querySelector('#nxParticles');\n\n\n    \/* PARTICLES *\/\n\n    if (particles) {\n\n      for (let i = 0; i < 30; i++) {\n\n        const dot =\n          document.createElement('span');\n\n        dot.className =\n          'nx-particle';\n\n        dot.style.left =\n          Math.random() * 100 + '%';\n\n        dot.style.top =\n          20 + Math.random() * 75 + '%';\n\n        dot.style.animationDuration =\n          5 + Math.random() * 7 + 's';\n\n        dot.style.animationDelay =\n          Math.random() * 7 + 's';\n\n        const size =\n          1 + Math.random() * 2;\n\n        dot.style.width =\n          size + 'px';\n\n        dot.style.height =\n          size + 'px';\n\n        particles.appendChild(dot);\n\n      }\n\n    }\n\n\n    \/* MOUSE PARALLAX *\/\n\n    if (\n      window.matchMedia(\n        '(pointer:fine)'\n      ).matches\n    ) {\n\n      hero.addEventListener(\n        'mousemove',\n        function(e) {\n\n          const rect =\n            hero.getBoundingClientRect();\n\n          const x =\n            e.clientX - rect.left;\n\n          const y =\n            e.clientY - rect.top;\n\n          const px =\n            x \/ rect.width - .5;\n\n          const py =\n            y \/ rect.height - .5;\n\n\n          if (glow) {\n\n            glow.style.opacity = '1';\n\n            glow.style.left =\n              e.clientX + 'px';\n\n            glow.style.top =\n              e.clientY + 'px';\n\n          }\n\n\n          if (bg) {\n\n            bg.style.transform =\n              `\n              translate3d(\n                ${px * -12}px,\n                ${py * -8}px,\n                0\n              )\n              scale(1.07)\n              `;\n\n          }\n\n\n          if (content) {\n\n            content.style.transform =\n              `\n              translate3d(\n                ${px * 3}px,\n                ${py * 2}px,\n                0\n              )\n              `;\n\n          }\n\n        }\n      );\n\n\n      hero.addEventListener(\n        'mouseleave',\n        function() {\n\n          if (glow) {\n            glow.style.opacity = '0';\n          }\n\n          if (content) {\n            content.style.transform =\n              'translate3d(0,0,0)';\n          }\n\n        }\n      );\n\n    }\n\n\n    \/* MAGNETIC BUTTONS *\/\n\n    hero\n      .querySelectorAll('.magnetic')\n      .forEach(function(button) {\n\n        button.addEventListener(\n          'mousemove',\n          function(e) {\n\n            const rect =\n              button.getBoundingClientRect();\n\n            const x =\n              e.clientX -\n              rect.left -\n              rect.width \/ 2;\n\n            const y =\n              e.clientY -\n              rect.top -\n              rect.height \/ 2;\n\n            button.style.transform =\n              `\n              translate(\n                ${x * .12}px,\n                ${y * .12}px\n              )\n              `;\n\n          }\n        );\n\n\n        button.addEventListener(\n          'mouseleave',\n          function() {\n\n            button.style.transform =\n              'translate(0,0)';\n\n          }\n        );\n\n      });\n\n\n    \/* SMOOTH SCROLL *\/\n\n    hero\n      .querySelectorAll(\n        'a[href^=\"#\"]'\n      )\n      .forEach(function(link) {\n\n        link.addEventListener(\n          'click',\n          function(e) {\n\n            const id =\n              link.getAttribute('href');\n\n            const target =\n              document.querySelector(id);\n\n            if (!target) return;\n\n            e.preventDefault();\n\n            target.scrollIntoView({\n              behavior: 'smooth'\n            });\n\n          }\n        );\n\n      });\n\n  }\n);\n\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_1 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_1 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><section class=\"build-x\" id=\"o-mnie\">\n\n  <div class=\"build-bg\">\n    <div class=\"build-glow build-glow-1\"><\/div>\n    <div class=\"build-glow build-glow-2\"><\/div>\n    <div class=\"build-grid\"><\/div>\n  <\/div>\n\n  <div class=\"build-wrap\">\n\n    <div class=\"build-top build-reveal\">\n\n      <div class=\"build-section-number\">\n        <span>01<\/span>\n        <i><\/i>\n        <strong>O MNIE<\/strong>\n      <\/div>\n\n      <div class=\"build-top-status\">\n        <span><\/span>\n        PROJEKTUJ\u0118 CYFROWE DO\u015aWIADCZENIA\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ==================================\n         G\u0141\u00d3WNY SPLIT\n    =================================== -->\n\n    <div class=\"build-main\">\n\n\n      <!-- ===============================\n           LEWA \/ ANIMACJA KODOWANIA\n      ================================ -->\n\n      <div class=\"code-stage build-reveal\">\n\n        <div class=\"code-stage-glow\"><\/div>\n\n        <div class=\"code-window\">\n\n          <div class=\"code-window-top\">\n\n            <div class=\"code-dots\">\n              <span><\/span>\n              <span><\/span>\n              <span><\/span>\n            <\/div>\n\n            <div class=\"code-file\">\n              index.html\n            <\/div>\n\n            <div class=\"code-status\">\n              <span><\/span>\n              LIVE\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"code-body\">\n\n\n            <!-- LEFT SIDEBAR -->\n\n            <div class=\"code-sidebar\">\n\n              <span class=\"code-side-line active\"><\/span>\n              <span class=\"code-side-line\"><\/span>\n              <span class=\"code-side-line\"><\/span>\n              <span class=\"code-side-line\"><\/span>\n              <span class=\"code-side-line small\"><\/span>\n\n            <\/div>\n\n\n            <!-- CODE -->\n\n            <div class=\"code-editor\">\n\n              <div class=\"code-row\">\n                <span class=\"code-nr\">01<\/span>\n                <span class=\"code-purple\">&lt;section<\/span>\n                <span class=\"code-cyan\"> class<\/span>\n                <span class=\"code-white\">=\"hero\"<\/span>\n                <span class=\"code-purple\">&gt;<\/span>\n              <\/div>\n\n              <div class=\"code-row indent\">\n                <span class=\"code-nr\">02<\/span>\n                <span class=\"code-purple\">&lt;h1&gt;<\/span>\n              <\/div>\n\n              <div class=\"code-row indent2\">\n                <span class=\"code-nr\">03<\/span>\n                <span class=\"code-white typing-code\">\n                  Tworz\u0119 cyfrowe do\u015bwiadczenia\n                <\/span>\n                <span class=\"code-cursor\"><\/span>\n              <\/div>\n\n              <div class=\"code-row indent\">\n                <span class=\"code-nr\">04<\/span>\n                <span class=\"code-purple\">&lt;\/h1&gt;<\/span>\n              <\/div>\n\n              <div class=\"code-row\">\n                <span class=\"code-nr\">05<\/span>\n                <span class=\"code-purple\">&lt;\/section&gt;<\/span>\n              <\/div>\n\n              <div class=\"code-row\">\n                <span class=\"code-nr\">06<\/span>\n              <\/div>\n\n              <div class=\"code-row\">\n                <span class=\"code-nr\">07<\/span>\n                <span class=\"code-pink\">.hero<\/span>\n                <span class=\"code-white\"> {<\/span>\n              <\/div>\n\n              <div class=\"code-row indent\">\n                <span class=\"code-nr\">08<\/span>\n                <span class=\"code-cyan\">display<\/span>\n                <span class=\"code-white\">:<\/span>\n                <span class=\"code-green\"> grid<\/span>\n                <span class=\"code-white\">;<\/span>\n              <\/div>\n\n              <div class=\"code-row indent\">\n                <span class=\"code-nr\">09<\/span>\n                <span class=\"code-cyan\">animation<\/span>\n                <span class=\"code-white\">:<\/span>\n                <span class=\"code-green\"> reveal 1s<\/span>\n                <span class=\"code-white\">;<\/span>\n              <\/div>\n\n              <div class=\"code-row\">\n                <span class=\"code-nr\">10<\/span>\n                <span class=\"code-white\">}<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- BUILD PREVIEW -->\n\n          <div class=\"code-preview\">\n\n            <div class=\"preview-bar\">\n              <span>LIVE PREVIEW<\/span>\n\n              <div class=\"preview-status\">\n                <i><\/i>\n                GOTOWE\n              <\/div>\n            <\/div>\n\n            <div class=\"preview-canvas\">\n\n              <div class=\"preview-nav\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n              <\/div>\n\n              <div class=\"preview-hero\">\n\n                <div class=\"preview-line preview-line-small\"><\/div>\n\n                <div class=\"preview-title\">\n                  <span><\/span>\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n                <div class=\"preview-text\"><\/div>\n\n                <div class=\"preview-buttons\">\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- SCANNER -->\n\n          <div class=\"code-scan\"><\/div>\n\n        <\/div>\n\n\n        <!-- FLOATING UI -->\n\n        <div class=\"code-float code-float-1\">\n          <span>UX FLOW<\/span>\n          <strong>98%<\/strong>\n        <\/div>\n\n        <div class=\"code-float code-float-2\">\n          <span>LAYOUT<\/span>\n          <strong>READY<\/strong>\n        <\/div>\n\n        <div class=\"code-float code-float-3\">\n          <span>BUILD<\/span>\n          <strong>LIVE<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ===============================\n           PRAWA \/ TEKST\n      ================================ -->\n\n      <div class=\"build-copy\">\n\n        <div class=\"build-kicker build-reveal\">\n          <span><\/span>\n          DESIGN \/ UX \/ WORDPRESS\n        <\/div>\n\n\n        <h2 class=\"build-title\">\n\n          <span class=\"build-line build-line-1\">\n            <span class=\"build-word\">\n              NIE ROBI\u0118\n            <\/span>\n          <\/span>\n\n          <span class=\"build-line build-line-2\">\n            <span class=\"build-word build-gradient\">\n              ZWYK\u0141YCH\n            <\/span>\n          <\/span>\n\n          <span class=\"build-line build-line-3\">\n            <span class=\"build-word\">\n              STRON.\n            <\/span>\n          <\/span>\n\n        <\/h2>\n\n\n        <div class=\"build-manifest build-reveal\">\n\n          <p>\n            Ka\u017cdy projekt traktuj\u0119 jak cyfrowe do\u015bwiadczenie.\n            \u0141\u0105cz\u0119 wyrazisty design, przemy\u015blany interfejs\n            i technologi\u0119, \u017ceby strona nie by\u0142a tylko miejscem w sieci.\n          <\/p>\n\n          <div class=\"build-highlight\">\n            <span>Ma zatrzyma\u0107 uwag\u0119.<\/span>\n            <span>Ma prowadzi\u0107 u\u017cytkownika.<\/span>\n            <span>Ma zosta\u0107 w pami\u0119ci.<\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ==================================\n         DOLNE KARTY\n    =================================== -->\n\n    <div class=\"build-areas\">\n\n      <article class=\"build-area build-reveal\">\n\n        <div class=\"build-area-number\">\n          01\n        <\/div>\n\n        <div class=\"build-area-icon\">\n\n          <div class=\"big-icon icon-www\">\n            <span><\/span>\n            <span><\/span>\n            <i><\/i>\n          <\/div>\n\n        <\/div>\n\n        <h3>\n          STRONY WWW\n        <\/h3>\n\n        <p>\n          Nowoczesne strony o mocnej identyfikacji wizualnej,\n          dopracowanej strukturze i wyrazistym charakterze.\n        <\/p>\n\n        <div class=\"build-area-bottom\">\n          <span>DESIGN \/ UX \/ WWW<\/span>\n          <b>\u2197<\/b>\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"build-area build-reveal\">\n\n        <div class=\"build-area-number\">\n          02\n        <\/div>\n\n        <div class=\"build-area-icon\">\n\n          <div class=\"big-icon icon-ui\">\n            <span><\/span>\n            <span><\/span>\n            <i><\/i>\n          <\/div>\n\n        <\/div>\n\n        <h3>\n          UI \/ UX\n        <\/h3>\n\n        <p>\n          Interfejsy, kt\u00f3re s\u0105 czytelne, intuicyjne\n          i prowadz\u0105 u\u017cytkownika dok\u0142adnie tam, gdzie trzeba.\n        <\/p>\n\n        <div class=\"build-area-bottom\">\n          <span>INTERFEJS \/ UX \/ FLOW<\/span>\n          <b>\u2197<\/b>\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"build-area build-reveal\">\n\n        <div class=\"build-area-number\">\n          03\n        <\/div>\n\n        <div class=\"build-area-icon\">\n\n          <div class=\"big-icon icon-wp\">\n            <span><\/span>\n            <span><\/span>\n            <i><\/i>\n          <\/div>\n\n        <\/div>\n\n        <h3>\n          WORDPRESS\n        <\/h3>\n\n        <p>\n          Indywidualne strony WordPress,\n          kt\u00f3re nie wygl\u0105daj\u0105 jak gotowy szablon\n          i mo\u017cna swobodnie rozwija\u0107.\n        <\/p>\n\n        <div class=\"build-area-bottom\">\n          <span>CMS \/ WORDPRESS \/ WWW<\/span>\n          <b>\u2197<\/b>\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"build-area build-reveal\">\n\n        <div class=\"build-area-number\">\n          04\n        <\/div>\n\n        <div class=\"build-area-icon\">\n\n          <div class=\"big-icon icon-project\">\n            <span><\/span>\n            <span><\/span>\n            <i><\/i>\n          <\/div>\n\n        <\/div>\n\n        <h3>\n          PROJEKTY\n        <\/h3>\n\n        <p>\n          Od pierwszej koncepcji do finalnej realizacji.\n          Ka\u017cdy detal buduje charakter i efekt ko\u0144cowy.\n        <\/p>\n\n        <div class=\"build-area-bottom\">\n          <span>KONCEPCJA \/ DESIGN \/ EFEKT<\/span>\n          <b>\u2197<\/b>\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- TICKER -->\n\n  <div class=\"build-ticker\">\n\n    <div class=\"build-ticker-track\">\n\n      <span>STRONY WWW<\/span><i><\/i>\n      <span>UI \/ UX<\/span><i><\/i>\n      <span>WORDPRESS<\/span><i><\/i>\n      <span>DESIGN<\/span><i><\/i>\n      <span>PROJEKTY<\/span><i><\/i>\n      <span>CYFROWE DO\u015aWIADCZENIA<\/span><i><\/i>\n\n      <span>STRONY WWW<\/span><i><\/i>\n      <span>UI \/ UX<\/span><i><\/i>\n      <span>WORDPRESS<\/span><i><\/i>\n      <span>DESIGN<\/span><i><\/i>\n      <span>PROJEKTY<\/span><i><\/i>\n      <span>CYFROWE DO\u015aWIADCZENIA<\/span><i><\/i>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* ==========================================================\n   ROOT\n========================================================== *\/\n\n.build-x,\n.build-x * {\n  box-sizing: border-box;\n}\n\n.build-x {\n\n  --cyan: #4df9ff;\n  --blue: #45a8ff;\n  --violet: #826cff;\n  --purple: #ba62ff;\n  --pink: #ff42d0;\n  --green: #63ffb9;\n\n  position: relative;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #020308,\n      #030610 48%,\n      #020309\n    );\n\n  color: white;\n\n  padding:\n    45px 0 0;\n\n  font-family:\n    \"Inter\",\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n}\n\n\n\/* ==========================================================\n   BACKGROUND\n========================================================== *\/\n\n.build-bg {\n\n  position: absolute;\n  inset: 0;\n\n  z-index: -1;\n\n  pointer-events: none;\n\n}\n\n\n.build-glow {\n\n  position: absolute;\n\n  border-radius: 50%;\n\n  filter:\n    blur(120px);\n\n}\n\n\n.build-glow-1 {\n\n  width: 620px;\n  height: 620px;\n\n  left: -250px;\n  top: 15%;\n\n  background:\n    rgba(0,230,255,.10);\n\n}\n\n\n.build-glow-2 {\n\n  width: 700px;\n  height: 700px;\n\n  right: -300px;\n  top: 18%;\n\n  background:\n    rgba(137,88,255,.10);\n\n}\n\n\n.build-grid {\n\n  position: absolute;\n  inset: 0;\n\n  opacity: .09;\n\n  background-image:\n\n    linear-gradient(\n      rgba(77,249,255,.08) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(77,249,255,.08) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    85px 85px;\n\n  mask-image:\n    radial-gradient(\n      ellipse at center,\n      black,\n      transparent 77%\n    );\n\n}\n\n\n\/* ==========================================================\n   WRAP\n========================================================== *\/\n\n.build-wrap {\n\n  position: relative;\n\n  width:\n    min(1580px, calc(100% - 80px));\n\n  margin:\n    0 auto;\n\n}\n\n\n\/* ==========================================================\n   TOP\n========================================================== *\/\n\n.build-top {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content:\n    space-between;\n\n  margin-bottom:\n    80px;\n\n}\n\n\n.build-section-number {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n\n}\n\n\n.build-section-number span {\n\n  color:\n    var(--cyan);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n\n}\n\n\n.build-section-number i {\n\n  width: 75px;\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      transparent\n    );\n\n}\n\n\n.build-section-number strong {\n\n  color:\n    #e5fbff;\n\n  font-size:\n    8px;\n\n  letter-spacing:\n    3px;\n\n}\n\n\n.build-top-status {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color:\n    #c8e8ff;\n\n  font-size:\n    8px;\n\n  letter-spacing:\n    2px;\n\n}\n\n\n.build-top-status span {\n\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background:\n    var(--green);\n\n  box-shadow:\n    0 0 10px var(--green);\n\n}\n\n\n\/* ==========================================================\n   MAIN SPLIT\n========================================================== *\/\n\n.build-main {\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(520px,1.05fr)\n    minmax(500px,.95fr);\n\n  gap:\n    clamp(70px,8vw,150px);\n\n  align-items: center;\n\n}\n\n\n\/* ==========================================================\n   CODE STAGE\n========================================================== *\/\n\n.code-stage {\n\n  position: relative;\n\n  min-height:\n    680px;\n\n  display: flex;\n\n  align-items: center;\n\n}\n\n\n.code-stage-glow {\n\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 500px;\n  height: 500px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(77,249,255,.14),\n      rgba(116,82,255,.08) 38%,\n      transparent 70%\n    );\n\n  filter:\n    blur(45px);\n\n}\n\n\n\/* ==========================================================\n   CODE WINDOW\n========================================================== *\/\n\n.code-window {\n\n  position: relative;\n\n  width: 100%;\n\n  border:\n    1px solid\n    rgba(123,224,255,.20);\n\n  background:\n    rgba(5,10,20,.88);\n\n  backdrop-filter:\n    blur(22px);\n\n  box-shadow:\n\n    0 40px 110px\n    rgba(0,0,0,.45),\n\n    inset 0 1px\n    rgba(255,255,255,.05);\n\n  overflow: hidden;\n\n  transform:\n    perspective(1200px)\n    rotateY(3deg)\n    rotateX(1deg);\n\n  transition:\n    transform .6s\n    cubic-bezier(.16,1,.3,1);\n\n}\n\n\n.code-stage:hover\n.code-window {\n\n  transform:\n    perspective(1200px)\n    rotateY(0deg)\n    rotateX(0deg)\n    translateY(-8px);\n\n}\n\n\n\/* TOP BAR *\/\n\n.code-window-top {\n\n  height: 52px;\n\n  padding:\n    0 17px;\n\n  display: flex;\n\n  align-items: center;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.07);\n\n  background:\n    rgba(255,255,255,.02);\n\n}\n\n\n.code-dots {\n\n  display: flex;\n\n  gap: 6px;\n\n}\n\n\n.code-dots span {\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.18);\n\n}\n\n\n.code-dots span:nth-child(1) {\n  background: #ff5f57;\n}\n\n.code-dots span:nth-child(2) {\n  background: #ffbd2e;\n}\n\n.code-dots span:nth-child(3) {\n  background: #28c840;\n}\n\n\n.code-file {\n\n  margin-left:\n    20px;\n\n  color:\n    #dffaff;\n\n  font-size:\n    9px;\n\n  letter-spacing:\n    1.3px;\n\n}\n\n\n.code-status {\n\n  margin-left: auto;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 7px;\n\n  color:\n    #6dffbc;\n\n  font-size:\n    7px;\n\n  letter-spacing:\n    1.5px;\n\n}\n\n\n.code-status span {\n\n  width: 5px;\n  height: 5px;\n\n  border-radius: 50%;\n\n  background:\n    #63ffb9;\n\n  box-shadow:\n    0 0 9px #63ffb9;\n\n}\n\n\n\/* BODY *\/\n\n.code-body {\n\n  display: grid;\n\n  grid-template-columns:\n    42px 1fr;\n\n  min-height:\n    355px;\n\n}\n\n\n.code-sidebar {\n\n  padding-top:\n    22px;\n\n  border-right:\n    1px solid\n    rgba(255,255,255,.055);\n\n  background:\n    rgba(255,255,255,.015);\n\n}\n\n\n.code-side-line {\n\n  display: block;\n\n  width: 18px;\n  height: 2px;\n\n  margin:\n    0 auto 15px;\n\n  background:\n    rgba(255,255,255,.17);\n\n}\n\n\n.code-side-line.active {\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n\n}\n\n\n.code-side-line.small {\n\n  width: 10px;\n\n}\n\n\n\/* CODE *\/\n\n.code-editor {\n\n  position: relative;\n\n  padding:\n    25px 22px;\n\n  overflow: hidden;\n\n}\n\n\n.code-row {\n\n  min-height:\n    26px;\n\n  display: flex;\n\n  align-items: center;\n\n  font-family:\n    \"SFMono-Regular\",\n    Consolas,\n    monospace;\n\n  font-size:\n    clamp(10px,.75vw,13px);\n\n  white-space: nowrap;\n\n}\n\n\n.code-row.indent {\n  padding-left: 24px;\n}\n\n.code-row.indent2 {\n  padding-left: 48px;\n}\n\n\n.code-nr {\n\n  width: 28px;\n\n  flex:\n    0 0 auto;\n\n  color:\n    rgba(138,180,205,.38);\n\n}\n\n\n.code-purple {\n  color: #b994ff;\n}\n\n.code-cyan {\n  color: #5cecff;\n}\n\n.code-pink {\n  color: #ff74db;\n}\n\n.code-green {\n  color: #7dffc0;\n}\n\n.code-white {\n  color: #e9f7ff;\n}\n\n\n\/* TYPING *\/\n\n.typing-code {\n\n  display: inline-block;\n\n  overflow: hidden;\n\n  max-width: 0;\n\n  animation:\n    codeTyping 4s\n    1.2s\n    steps(28,end)\n    infinite alternate;\n\n}\n\n\n@keyframes codeTyping {\n\n  0%,\n  15% {\n    max-width: 0;\n  }\n\n  65%,\n  100% {\n    max-width: 280px;\n  }\n\n}\n\n\n.code-cursor {\n\n  width: 1px;\n  height: 16px;\n\n  margin-left: 4px;\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n\n  animation:\n    codeCursor .7s\n    steps(1)\n    infinite;\n\n}\n\n\n@keyframes codeCursor {\n\n  50% {\n    opacity: 0;\n  }\n\n}\n\n\n\/* ==========================================================\n   LIVE PREVIEW\n========================================================== *\/\n\n.code-preview {\n\n  margin:\n    0 18px 18px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.15);\n\n  background:\n    #060b14;\n\n}\n\n\n.preview-bar {\n\n  height: 36px;\n\n  padding:\n    0 13px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.06);\n\n  color:\n    #a9d5e5;\n\n  font-size:\n    6px;\n\n  letter-spacing:\n    1.5px;\n\n}\n\n\n.preview-status {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 6px;\n\n  color:\n    #71ffc2;\n\n}\n\n\n.preview-status i {\n\n  width: 4px;\n  height: 4px;\n\n  border-radius: 50%;\n\n  background:\n    #71ffc2;\n\n  box-shadow:\n    0 0 7px #71ffc2;\n\n}\n\n\n.preview-canvas {\n\n  min-height:\n    145px;\n\n  position: relative;\n\n  overflow: hidden;\n\n  background:\n\n    radial-gradient(\n      circle at 75% 35%,\n      rgba(119,76,255,.28),\n      transparent 34%\n    ),\n\n    linear-gradient(\n      135deg,\n      #08121d,\n      #040710\n    );\n\n}\n\n\n.preview-nav {\n\n  position: absolute;\n\n  top: 15px;\n  right: 18px;\n\n  display: flex;\n\n  gap: 7px;\n\n}\n\n\n.preview-nav span {\n\n  width: 24px;\n  height: 3px;\n\n  background:\n    rgba(207,244,255,.24);\n\n}\n\n\n.preview-hero {\n\n  position: absolute;\n\n  left: 22px;\n  top: 34px;\n\n  width: 66%;\n\n}\n\n\n.preview-line {\n\n  width: 80px;\n  height: 4px;\n\n  margin-bottom:\n    12px;\n\n  background:\n    var(--cyan);\n\n  opacity: .6;\n\n}\n\n\n.preview-line-small {\n  width: 50px;\n}\n\n\n.preview-title span {\n\n  display: block;\n\n  height: 11px;\n\n  margin-bottom: 5px;\n\n  background:\n    linear-gradient(\n      90deg,\n      #f0fdff,\n      #55f5ff,\n      #9672ff\n    );\n\n  animation:\n    previewBuild\n    3.5s\n    ease-in-out\n    infinite alternate;\n\n}\n\n\n.preview-title span:nth-child(1) {\n  width: 72%;\n}\n\n.preview-title span:nth-child(2) {\n  width: 88%;\n}\n\n.preview-title span:nth-child(3) {\n  width: 59%;\n}\n\n\n.preview-text {\n\n  width: 46%;\n  height: 4px;\n\n  margin-top: 13px;\n\n  background:\n    rgba(219,240,255,.28);\n\n}\n\n\n.preview-buttons {\n\n  display: flex;\n\n  gap: 7px;\n\n  margin-top:\n    15px;\n\n}\n\n\n.preview-buttons span {\n\n  width: 62px;\n  height: 17px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.35);\n\n}\n\n\n.preview-buttons span:first-child {\n\n  background:\n    var(--cyan);\n\n}\n\n\n@keyframes previewBuild {\n\n  from {\n    opacity: .55;\n    transform: scaleX(.92);\n    transform-origin: left;\n  }\n\n  to {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n\n}\n\n\n\/* SCANNER *\/\n\n.code-scan {\n\n  position: absolute;\n\n  left: 0;\n  right: 0;\n\n  top: -50px;\n\n  height: 50px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      transparent,\n      rgba(62,241,255,.08),\n      rgba(62,241,255,.25),\n      transparent\n    );\n\n  filter:\n    blur(1px);\n\n  animation:\n    codeScan\n    5s ease-in-out\n    infinite;\n\n  pointer-events: none;\n\n}\n\n\n@keyframes codeScan {\n\n  0% {\n    top: -50px;\n  }\n\n  70%,\n  100% {\n    top: 100%;\n  }\n\n}\n\n\n\/* ==========================================================\n   FLOATING CODE CARDS\n========================================================== *\/\n\n.code-float {\n\n  position: absolute;\n\n  padding:\n    13px 16px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.18);\n\n  background:\n    rgba(6,11,22,.82);\n\n  backdrop-filter:\n    blur(14px);\n\n  box-shadow:\n    0 20px 60px\n    rgba(0,0,0,.3);\n\n  animation:\n    floatCode\n    5s ease-in-out\n    infinite;\n\n}\n\n\n.code-float span {\n\n  display: block;\n\n  margin-bottom:\n    5px;\n\n  color:\n    #7bdce9;\n\n  font-size:\n    6px;\n\n  letter-spacing:\n    1.5px;\n\n}\n\n\n.code-float strong {\n\n  color:\n    #f1fcff;\n\n  font-size:\n    17px;\n\n}\n\n\n.code-float-1 {\n\n  left: -35px;\n  top: 75px;\n\n}\n\n\n.code-float-2 {\n\n  right: -35px;\n  top: 190px;\n\n  animation-delay:\n    .8s;\n\n}\n\n\n.code-float-3 {\n\n  left: 12%;\n  bottom: 8px;\n\n  animation-delay:\n    1.5s;\n\n}\n\n\n.code-float-3 strong {\n  color: #69ffba;\n}\n\n\n@keyframes floatCode {\n\n  0%,\n  100% {\n    transform:\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateY(-10px);\n  }\n\n}\n\n\n\/* ==========================================================\n   RIGHT COPY\n========================================================== *\/\n\n.build-copy {\n\n  position: relative;\n\n  z-index: 5;\n\n}\n\n\n.build-kicker {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom:\n    25px;\n\n  color:\n    #8befff;\n\n  font-size:\n    8px;\n\n  font-weight: 700;\n\n  letter-spacing:\n    2.4px;\n\n}\n\n\n.build-kicker span {\n\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n    0 0 10px var(--cyan);\n\n}\n\n\n\/* TITLE *\/\n\n.build-title {\n\n  margin: 0;\n\n  font-size:\n    clamp(74px,6.4vw,122px);\n\n  line-height: .82;\n\n  letter-spacing:\n    -.07em;\n\n  font-weight: 730;\n\n}\n\n\n.build-line {\n\n  display: block;\n\n  overflow: hidden;\n\n  padding-bottom:\n    .055em;\n\n}\n\n\n.build-word {\n\n  display: block;\n\n  color:\n    #f3fcff;\n\n  transform:\n    translateY(115%);\n\n  transition:\n    transform\n    1s\n    cubic-bezier(.16,1,.3,1);\n\n}\n\n\n.build-gradient {\n\n  background:\n\n    linear-gradient(\n      90deg,\n      #ffffff,\n      #6cf8ff 35%,\n      #50cfff 62%,\n      #9c72ff 82%,\n      #ff72dc\n    );\n\n  -webkit-background-clip:\n    text;\n\n  background-clip:\n    text;\n\n  color: transparent;\n\n  filter:\n    drop-shadow(\n      0 0 28px\n      rgba(72,232,255,.13)\n    );\n\n}\n\n\n\/* REVEAL TITLE *\/\n\n.build-visible\n.build-line-1\n.build-word {\n\n  transform: translateY(0);\n\n  transition-delay:\n    .08s;\n\n}\n\n\n.build-visible\n.build-line-2\n.build-word {\n\n  transform: translateY(0);\n\n  transition-delay:\n    .18s;\n\n}\n\n\n.build-visible\n.build-line-3\n.build-word {\n\n  transform: translateY(0);\n\n  transition-delay:\n    .28s;\n\n}\n\n\n\/* MANIFEST *\/\n\n.build-manifest {\n\n  margin-top:\n    42px;\n\n  max-width:\n    620px;\n\n}\n\n\n.build-manifest > p {\n\n  margin:\n    0 0 30px;\n\n  color:\n    #d7ecfa;\n\n  font-size:\n    16px;\n\n  line-height:\n    1.8;\n\n}\n\n\n.build-highlight {\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 8px;\n\n}\n\n\n.build-highlight span {\n\n  font-size:\n    clamp(20px,1.5vw,28px);\n\n  line-height:\n    1.25;\n\n  font-weight:\n    600;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      #ffffff,\n      #67efff 45%,\n      #b889ff\n    );\n\n  -webkit-background-clip:\n    text;\n\n  background-clip:\n    text;\n\n  color:\n    transparent;\n\n}\n\n\n\/* ==========================================================\n   LOWER CARDS\n========================================================== *\/\n\n.build-areas {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  margin-top:\n    140px;\n\n  border-top:\n    1px solid\n    rgba(77,249,255,.17);\n\n  border-bottom:\n    1px solid\n    rgba(77,249,255,.17);\n\n}\n\n\n.build-area {\n\n  position: relative;\n\n  min-height:\n    460px;\n\n  padding:\n    30px 28px;\n\n  overflow: hidden;\n\n  border-right:\n    1px solid\n    rgba(77,249,255,.12);\n\n  background:\n    rgba(5,9,18,.48);\n\n  backdrop-filter:\n    blur(10px);\n\n  text-align: center;\n\n  transition:\n    transform .45s\n    cubic-bezier(.16,1,.3,1),\n    background .45s ease;\n\n}\n\n\n.build-area:first-child {\n\n  border-left:\n    1px solid\n    rgba(77,249,255,.12);\n\n}\n\n\n.build-area::before {\n\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  opacity: 0;\n\n  background:\n\n    radial-gradient(\n      circle at 50% 60%,\n      rgba(68,229,255,.16),\n      transparent 55%\n    );\n\n  transition:\n    opacity .4s ease;\n\n}\n\n\n.build-area::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 2px;\n\n  transform:\n    scaleX(0);\n\n  transform-origin:\n    center;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      var(--violet),\n      var(--pink)\n    );\n\n  transition:\n    transform .5s ease;\n\n}\n\n\n.build-area:hover {\n\n  transform:\n    translateY(-14px);\n\n  background:\n    rgba(9,16,32,.82);\n\n}\n\n\n.build-area:hover::before {\n\n  opacity: 1;\n\n}\n\n\n.build-area:hover::after {\n\n  transform:\n    scaleX(1);\n\n}\n\n\n\/* NUMBER *\/\n\n.build-area-number {\n\n  position: absolute;\n\n  left: 28px;\n  top: 30px;\n\n  color:\n    var(--cyan);\n\n  font-size:\n    8px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    2px;\n\n}\n\n\n\/* ==========================================================\n   BIG ICONS\n========================================================== *\/\n\n.build-area-icon {\n\n  position: relative;\n\n  z-index: 2;\n\n  height: 150px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  margin-top: 30px;\n\n}\n\n\n.big-icon {\n\n  position: relative;\n\n  width: 110px;\n  height: 110px;\n\n  transition:\n    transform .55s\n    cubic-bezier(.16,1,.3,1);\n\n}\n\n\n.build-area:hover\n.big-icon {\n\n  transform:\n    scale(1.10)\n    translateY(-5px);\n\n}\n\n\n\/* outer frame *\/\n\n.big-icon::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 10px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.55);\n\n  transform:\n    rotate(45deg);\n\n  box-shadow:\n    inset 0 0 30px\n    rgba(77,249,255,.04),\n    0 0 25px\n    rgba(77,249,255,.07);\n\n  animation:\n    iconRotate\n    12s linear infinite;\n\n}\n\n\n\/* outer circle *\/\n\n.big-icon::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(77,249,255,.13);\n\n  animation:\n    iconRotateReverse\n    15s linear infinite;\n\n}\n\n\n@keyframes iconRotate {\n\n  to {\n    transform:\n      rotate(405deg);\n  }\n\n}\n\n\n@keyframes iconRotateReverse {\n\n  to {\n    transform:\n      rotate(-360deg);\n  }\n\n}\n\n\n\/* horizontal *\/\n\n.big-icon span:nth-child(1) {\n\n  position: absolute;\n\n  left: 5px;\n  right: 5px;\n\n  top: 50%;\n\n  height: 1px;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(77,249,255,.7),\n      transparent\n    );\n\n}\n\n\n\/* vertical *\/\n\n.big-icon span:nth-child(2) {\n\n  position: absolute;\n\n  top: 5px;\n  bottom: 5px;\n\n  left: 50%;\n\n  width: 1px;\n\n  background:\n\n    linear-gradient(\n      transparent,\n      rgba(77,249,255,.7),\n      transparent\n    );\n\n}\n\n\n\/* center *\/\n\n.big-icon i {\n\n  position: absolute;\n\n  width: 14px;\n  height: 14px;\n\n  left: 50%;\n  top: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n\n    0 0 14px var(--cyan),\n\n    0 0 35px\n    rgba(77,249,255,.5);\n\n}\n\n\n\/* UI *\/\n\n.icon-ui::before {\n\n  border-color:\n    rgba(130,108,255,.75);\n\n}\n\n.icon-ui i {\n\n  background:\n    var(--violet);\n\n  box-shadow:\n    0 0 14px var(--violet),\n    0 0 35px rgba(130,108,255,.5);\n\n}\n\n\n\/* WP *\/\n\n.icon-wp::before {\n\n  border-color:\n    rgba(186,98,255,.75);\n\n}\n\n.icon-wp i {\n\n  background:\n    var(--purple);\n\n  box-shadow:\n    0 0 14px var(--purple),\n    0 0 35px rgba(186,98,255,.5);\n\n}\n\n\n\/* PROJECT *\/\n\n.icon-project::before {\n\n  border-color:\n    rgba(255,66,208,.75);\n\n}\n\n.icon-project i {\n\n  background:\n    var(--pink);\n\n  box-shadow:\n    0 0 14px var(--pink),\n    0 0 35px rgba(255,66,208,.5);\n\n}\n\n\n\/* CARD TEXT *\/\n\n.build-area h3 {\n\n  position: relative;\n\n  z-index: 2;\n\n  margin:\n    10px 0 18px;\n\n  color:\n    #f4fcff;\n\n  font-size:\n    clamp(22px,1.5vw,29px);\n\n  letter-spacing:\n    -.03em;\n\n}\n\n\n.build-area p {\n\n  position: relative;\n\n  z-index: 2;\n\n  max-width:\n    290px;\n\n  margin:\n    0 auto;\n\n  color:\n    #c4dff0;\n\n  font-size:\n    13px;\n\n  line-height:\n    1.7;\n\n}\n\n\n.build-area-bottom {\n\n  position: absolute;\n\n  z-index: 2;\n\n  left: 28px;\n  right: 28px;\n  bottom: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content:\n    space-between;\n\n}\n\n\n.build-area-bottom span {\n\n  color:\n    #6edbea;\n\n  font-size:\n    6px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    1.6px;\n\n}\n\n\n.build-area-bottom b {\n\n  color:\n    var(--cyan);\n\n  font-size:\n    17px;\n\n  font-weight:\n    400;\n\n  transition:\n    transform .3s ease;\n\n}\n\n\n.build-area:hover\n.build-area-bottom b {\n\n  transform:\n    translate(4px,-4px);\n\n}\n\n\n\/* ==========================================================\n   REVEAL\n========================================================== *\/\n\n.build-reveal {\n\n  opacity: 0;\n\n  transform:\n    translateY(35px);\n\n  filter:\n    blur(7px);\n\n  transition:\n    opacity .85s ease,\n    transform .85s\n    cubic-bezier(.16,1,.3,1),\n    filter .85s ease;\n\n}\n\n\n.build-visible\n.build-reveal {\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n  filter:\n    blur(0);\n\n}\n\n\n.build-visible\n.code-stage {\n\n  transition-delay:\n    .12s;\n\n}\n\n\n.build-visible\n.build-kicker {\n\n  transition-delay:\n    .20s;\n\n}\n\n\n.build-visible\n.build-manifest {\n\n  transition-delay:\n    .40s;\n\n}\n\n\n.build-visible\n.build-area:nth-child(1) {\n\n  transition-delay:\n    .10s;\n\n}\n\n\n.build-visible\n.build-area:nth-child(2) {\n\n  transition-delay:\n    .18s;\n\n}\n\n\n.build-visible\n.build-area:nth-child(3) {\n\n  transition-delay:\n    .26s;\n\n}\n\n\n.build-visible\n.build-area:nth-child(4) {\n\n  transition-delay:\n    .34s;\n\n}\n\n\n\/* ==========================================================\n   TICKER\n========================================================== *\/\n\n.build-ticker {\n\n  margin-top:\n    70px;\n\n  overflow: hidden;\n\n  padding:\n    25px 0;\n\n  border-top:\n    1px solid\n    rgba(77,249,255,.12);\n\n  background:\n    rgba(3,7,14,.82);\n\n}\n\n\n.build-ticker-track {\n\n  display: flex;\n\n  align-items: center;\n\n  width:\n    max-content;\n\n  animation:\n    buildTicker\n    27s linear infinite;\n\n}\n\n\n.build-ticker-track span {\n\n  padding:\n    0 26px;\n\n  color:\n    #e5fbff;\n\n  font-size:\n    10px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    3px;\n\n  white-space:\n    nowrap;\n\n}\n\n\n.build-ticker-track i {\n\n  width: 5px;\n  height: 5px;\n\n  flex: 0 0 auto;\n\n  border-radius: 50%;\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n    0 0 9px\n    var(--cyan);\n\n}\n\n\n@keyframes buildTicker {\n\n  to {\n    transform:\n      translateX(-50%);\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n========================================================== *\/\n\n@media(max-width:1100px) {\n\n  .build-wrap {\n\n    width:\n      calc(100% - 50px);\n\n  }\n\n\n  .build-main {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n\n  .code-stage {\n\n    min-height:\n      auto;\n\n  }\n\n\n  .code-window {\n\n    max-width:\n      760px;\n\n    margin:\n      0 auto;\n\n  }\n\n\n  .build-copy {\n\n    max-width:\n      850px;\n\n  }\n\n\n  .build-areas {\n\n    grid-template-columns:\n      repeat(2,1fr);\n\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n========================================================== *\/\n\n@media(max-width:700px) {\n\n  .build-x {\n\n    padding-top:\n      85px;\n\n  }\n\n\n  .build-wrap {\n\n    width:\n      calc(100% - 34px);\n\n  }\n\n\n  .build-top {\n\n    flex-direction:\n      column;\n\n    align-items:\n      flex-start;\n\n    gap:\n      18px;\n\n    margin-bottom:\n      55px;\n\n  }\n\n\n  .build-main {\n\n    gap:\n      65px;\n\n  }\n\n\n  .code-stage {\n\n    min-height:\n      auto;\n\n  }\n\n\n  .code-window {\n\n    transform:\n      none;\n\n  }\n\n\n  .code-body {\n\n    grid-template-columns:\n      30px 1fr;\n\n  }\n\n\n  .code-editor {\n\n    padding:\n      20px 10px;\n\n  }\n\n\n  .code-row {\n\n    font-size:\n      8px;\n\n  }\n\n\n  .code-row.indent {\n    padding-left: 12px;\n  }\n\n  .code-row.indent2 {\n    padding-left: 22px;\n  }\n\n\n  .code-float {\n\n    display:\n      none;\n\n  }\n\n\n  .build-title {\n\n    font-size:\n      clamp(58px,16vw,78px);\n\n  }\n\n\n  .build-manifest > p {\n\n    font-size:\n      14px;\n\n  }\n\n\n  .build-highlight span {\n\n    font-size:\n      22px;\n\n  }\n\n\n  .build-areas {\n\n    grid-template-columns:\n      1fr;\n\n    margin-top:\n      90px;\n\n  }\n\n\n  .build-area {\n\n    min-height:\n      440px;\n\n  }\n\n\n  .build-area-icon {\n\n    height:\n      160px;\n\n  }\n\n\n  .big-icon {\n\n    width:\n      125px;\n\n    height:\n      125px;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\n  'DOMContentLoaded',\n  function() {\n\n    const section =\n      document.querySelector(\n        '.build-x'\n      );\n\n    if (!section) return;\n\n\n    \/* REVEAL *\/\n\n    const observer =\n      new IntersectionObserver(\n        function(entries) {\n\n          entries.forEach(\n            function(entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                section.classList.add(\n                  'build-visible'\n                );\n\n                observer.unobserve(\n                  section\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: .12\n        }\n      );\n\n\n    observer.observe(\n      section\n    );\n\n\n    \/* CODE WINDOW 3D *\/\n\n    const stage =\n      section.querySelector(\n        '.code-stage'\n      );\n\n    const windowBox =\n      section.querySelector(\n        '.code-window'\n      );\n\n\n    if (\n      stage &&\n      windowBox &&\n      window.matchMedia(\n        '(pointer:fine)'\n      ).matches\n    ) {\n\n      stage.addEventListener(\n        'mousemove',\n        function(e) {\n\n          const rect =\n            stage.getBoundingClientRect();\n\n          const x =\n            (\n              e.clientX -\n              rect.left\n            ) \/\n            rect.width -\n            .5;\n\n          const y =\n            (\n              e.clientY -\n              rect.top\n            ) \/\n            rect.height -\n            .5;\n\n\n          windowBox.style.transform =\n            `\n            perspective(1200px)\n            rotateY(${x * 5}deg)\n            rotateX(${y * -4}deg)\n            translateY(-5px)\n            `;\n\n        }\n      );\n\n\n      stage.addEventListener(\n        'mouseleave',\n        function() {\n\n          windowBox.style.transform =\n            `\n            perspective(1200px)\n            rotateY(3deg)\n            rotateX(1deg)\n            `;\n\n        }\n      );\n\n    }\n\n  }\n);\n\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_2 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_2 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_2 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_2 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><section class=\"forge-x\" id=\"uslugi\">\n\n  <div class=\"forge-bg\">\n    <div class=\"forge-glow forge-glow-a\"><\/div>\n    <div class=\"forge-glow forge-glow-b\"><\/div>\n    <div class=\"forge-lines\"><\/div>\n  <\/div>\n\n  <div class=\"forge-wrap\">\n\n    <!-- TOP -->\n    <div class=\"forge-top forge-reveal\">\n\n      <div class=\"forge-index\">\n        <span>02<\/span>\n        <i><\/i>\n        <strong>US\u0141UGI<\/strong>\n      <\/div>\n\n      <div class=\"forge-status\">\n        <span><\/span>\n        DIGITAL CONSTRUCTION SYSTEM\n      <\/div>\n\n    <\/div>\n\n\n    <!-- MAIN -->\n    <div class=\"forge-scene\">\n\n      <!-- LEFT -->\n      <div class=\"forge-machine forge-reveal\">\n\n        <div class=\"machine-stage\">\n\n          <div class=\"machine-frame\">\n\n            <div class=\"machine-corner c1\"><\/div>\n            <div class=\"machine-corner c2\"><\/div>\n            <div class=\"machine-corner c3\"><\/div>\n            <div class=\"machine-corner c4\"><\/div>\n\n            <div class=\"machine-label\">\n              LIVE INTERFACE BUILD\n            <\/div>\n\n          <\/div>\n\n\n          <svg\n            class=\"machine-connectors\"\n            viewBox=\"0 0 800 700\"\n            preserveAspectRatio=\"none\"\n          >\n\n            <path\n              class=\"connector-line line-1\"\n              d=\"M95 150 C230 140, 220 280, 360 275\"\n            \/>\n\n            <path\n              class=\"connector-line line-2\"\n              d=\"M680 120 C560 150, 560 270, 465 300\"\n            \/>\n\n            <path\n              class=\"connector-line line-3\"\n              d=\"M100 540 C240 500, 235 405, 360 395\"\n            \/>\n\n            <path\n              class=\"connector-line line-4\"\n              d=\"M690 520 C570 495, 585 405, 470 395\"\n            \/>\n\n          <\/svg>\n\n\n          <!-- CENTRAL WEBSITE -->\n          <div class=\"machine-site\">\n\n            <div class=\"site-window\">\n\n              <div class=\"site-topbar\">\n\n                <div class=\"site-logo\"><\/div>\n\n                <div class=\"site-menu\">\n                  <span><\/span>\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"site-hero\">\n\n                <div class=\"site-kicker\"><\/div>\n\n                <div class=\"site-title\">\n                  <span><\/span>\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n                <div class=\"site-copy\"><\/div>\n\n                <div class=\"site-actions\">\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n\n                <div class=\"site-visual\">\n\n                  <div class=\"site-visual-ring ring-a\"><\/div>\n                  <div class=\"site-visual-ring ring-b\"><\/div>\n\n                  <div class=\"site-core\"><\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"site-modules\">\n\n                <div class=\"site-module\">\n                  <i><\/i>\n                  <span><\/span>\n                  <b><\/b>\n                <\/div>\n\n                <div class=\"site-module\">\n                  <i><\/i>\n                  <span><\/span>\n                  <b><\/b>\n                <\/div>\n\n                <div class=\"site-module\">\n                  <i><\/i>\n                  <span><\/span>\n                  <b><\/b>\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- FLOATING MODULES -->\n\n          <div class=\"machine-layer layer-nav\">\n\n            <small>NAVIGATION<\/small>\n\n            <span><\/span>\n            <span><\/span>\n            <span><\/span>\n\n          <\/div>\n\n\n          <div class=\"machine-layer layer-ui\">\n\n            <small>UI SYSTEM<\/small>\n\n            <div class=\"ui-grid\">\n              <i><\/i>\n              <i><\/i>\n              <i><\/i>\n              <i><\/i>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"machine-layer layer-ux\">\n\n            <small>UX FLOW<\/small>\n\n            <div class=\"ux-flow\">\n              <i><\/i>\n              <b><\/b>\n              <i><\/i>\n              <b><\/b>\n              <i><\/i>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"machine-layer layer-wp\">\n\n            <small>WORDPRESS<\/small>\n\n            <strong>CMS<\/strong>\n\n            <div class=\"wp-pulse\"><\/div>\n\n          <\/div>\n\n\n          <!-- NODES -->\n\n          <div class=\"machine-node node-a\">\n            <span><\/span>\n            <small>LAYOUT<\/small>\n          <\/div>\n\n          <div class=\"machine-node node-b\">\n            <span><\/span>\n            <small>INTERFACE<\/small>\n          <\/div>\n\n          <div class=\"machine-node node-c\">\n            <span><\/span>\n            <small>EXPERIENCE<\/small>\n          <\/div>\n\n          <div class=\"machine-node node-d\">\n            <span><\/span>\n            <small>CMS<\/small>\n          <\/div>\n\n\n          <div class=\"machine-scan\"><\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- RIGHT -->\n      <div class=\"forge-copy\">\n\n        <div class=\"forge-kicker forge-reveal\">\n\n          <span><\/span>\n\n          PROJEKT \/ INTERFEJS \/ WDRO\u017bENIE\n\n        <\/div>\n\n\n        <h2 class=\"forge-title\">\n\n          <span class=\"forge-title-row row-1\">\n            <span class=\"forge-title-inner\">\n              NIE SK\u0141ADAM\n            <\/span>\n          <\/span>\n\n          <span class=\"forge-title-row row-2\">\n            <span class=\"forge-title-inner forge-gradient\">\n              STRON.\n            <\/span>\n          <\/span>\n\n          <span class=\"forge-title-row row-3\">\n            <span class=\"forge-title-inner\">\n              BUDUJ\u0118\n            <\/span>\n          <\/span>\n\n          <span class=\"forge-title-row row-4\">\n            <span class=\"forge-title-inner forge-outline\">\n              CYFROWE\n            <\/span>\n          <\/span>\n\n          <span class=\"forge-title-row row-5\">\n            <span class=\"forge-title-inner forge-worlds\">\n              \u015aWIATY.\n            <\/span>\n          <\/span>\n\n        <\/h2>\n\n\n        <div class=\"forge-copy-bottom forge-reveal\">\n\n          <p>\n            Ka\u017cdy projekt zaczyna si\u0119 od pomys\u0142u, ale ko\u0144czy dopiero wtedy,\n            kiedy design, struktura i interakcje tworz\u0105 jeden sp\u00f3jny cyfrowy \u015bwiat.\n          <\/p>\n\n\n          <div class=\"forge-points\">\n\n            <div>\n              <span>01<\/span>\n              <strong>Projekt<\/strong>\n            <\/div>\n\n            <div>\n              <span>02<\/span>\n              <strong>Interfejs<\/strong>\n            <\/div>\n\n            <div>\n              <span>03<\/span>\n              <strong>Ruch<\/strong>\n            <\/div>\n\n            <div>\n              <span>04<\/span>\n              <strong>Wdro\u017cenie<\/strong>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- BOTTOM SERVICES -->\n    <div class=\"forge-services\">\n\n      <article class=\"forge-service forge-reveal\">\n\n        <div class=\"forge-service-number\">\n          01\n        <\/div>\n\n        <div class=\"forge-big-icon icon-web\">\n\n          <div class=\"icon-frame\"><\/div>\n\n          <div class=\"icon-screen\">\n            <span><\/span>\n            <span><\/span>\n            <span><\/span>\n          <\/div>\n\n        <\/div>\n\n        <h3>STRONY WWW<\/h3>\n\n        <p>\n          Strony internetowe, kt\u00f3re maj\u0105 w\u0142asny charakter,\n          mocn\u0105 narracj\u0119 wizualn\u0105 i przemy\u015blan\u0105 struktur\u0119.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"forge-service forge-reveal\">\n\n        <div class=\"forge-service-number\">\n          02\n        <\/div>\n\n        <div class=\"forge-big-icon icon-interface\">\n\n          <div class=\"interface-grid\">\n            <span><\/span>\n            <span><\/span>\n            <span><\/span>\n            <span><\/span>\n          <\/div>\n\n          <div class=\"interface-cursor\"><\/div>\n\n        <\/div>\n\n        <h3>UI \/ UX<\/h3>\n\n        <p>\n          Interfejsy, kt\u00f3re s\u0105 intuicyjne, dynamiczne\n          i prowadz\u0105 u\u017cytkownika bez zb\u0119dnego chaosu.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"forge-service forge-reveal\">\n\n        <div class=\"forge-service-number\">\n          03\n        <\/div>\n\n        <div class=\"forge-big-icon icon-cms\">\n\n          <div class=\"cms-ring\"><\/div>\n\n          <div class=\"cms-ring second\"><\/div>\n\n          <strong>W<\/strong>\n\n        <\/div>\n\n        <h3>WORDPRESS<\/h3>\n\n        <p>\n          Indywidualne wdro\u017cenia WordPress,\n          kt\u00f3re nie wygl\u0105daj\u0105 jak gotowy szablon.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"forge-service forge-reveal\">\n\n        <div class=\"forge-service-number\">\n          04\n        <\/div>\n\n        <div class=\"forge-big-icon icon-special\">\n\n          <div class=\"special-piece p1\"><\/div>\n          <div class=\"special-piece p2\"><\/div>\n          <div class=\"special-piece p3\"><\/div>\n\n        <\/div>\n\n        <h3>PROJEKTY<\/h3>\n\n        <p>\n          Nietypowe landing page, koncepty i realizacje,\n          kt\u00f3re potrzebuj\u0105 czego\u015b wi\u0119cej ni\u017c standardu.\n        <\/p>\n\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* ======================================================\n   ROOT\n====================================================== *\/\n\n.forge-x,\n.forge-x * {\n  box-sizing: border-box;\n}\n\n.forge-x {\n\n  --cyan: #49f7ff;\n  --cyan2: #20cfff;\n  --blue: #559cff;\n  --violet: #8068ff;\n  --purple: #b65cff;\n  --pink: #ff43cf;\n  --green: #68ffba;\n\n  position: relative;\n\n  overflow: hidden;\n\n  padding: 150px 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      #020308 0%,\n      #030712 52%,\n      #020308 100%\n    );\n\n  color: #fff;\n\n  font-family:\n    \"Inter\",\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n}\n\n\n\/* ======================================================\n   BACKGROUND\n====================================================== *\/\n\n.forge-bg {\n\n  position: absolute;\n  inset: 0;\n\n  z-index: -1;\n\n  pointer-events: none;\n}\n\n\n.forge-glow {\n\n  position: absolute;\n\n  border-radius: 50%;\n\n  filter: blur(120px);\n}\n\n\n.forge-glow-a {\n\n  width: 700px;\n  height: 700px;\n\n  left: -320px;\n  top: 12%;\n\n  background:\n    rgba(0,225,255,.10);\n}\n\n\n.forge-glow-b {\n\n  width: 760px;\n  height: 760px;\n\n  right: -340px;\n  top: 32%;\n\n  background:\n    rgba(146,70,255,.10);\n}\n\n\n.forge-lines {\n\n  position: absolute;\n  inset: 0;\n\n  opacity: .07;\n\n  background-image:\n\n    linear-gradient(\n      rgba(70,240,255,.08) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(70,240,255,.08) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    90px 90px;\n\n  mask-image:\n    linear-gradient(\n      to bottom,\n      transparent,\n      black 15%,\n      black 85%,\n      transparent\n    );\n}\n\n\n\/* ======================================================\n   WRAP\n====================================================== *\/\n\n.forge-wrap {\n\n  width:\n    min(1580px, calc(100% - 80px));\n\n  margin: 0 auto;\n\n  position: relative;\n\n  z-index: 2;\n}\n\n\n\/* ======================================================\n   TOP\n====================================================== *\/\n\n.forge-top {\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  margin-bottom: 80px;\n}\n\n\n.forge-index {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n}\n\n\n.forge-index span {\n\n  color: var(--cyan);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n}\n\n\n.forge-index i {\n\n  width: 75px;\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      transparent\n    );\n}\n\n\n.forge-index strong {\n\n  color: #e8fbff;\n\n  font-size: 8px;\n\n  letter-spacing: 3px;\n}\n\n\n.forge-status {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color: #aeefff;\n\n  font-size: 8px;\n\n  letter-spacing: 2px;\n}\n\n\n.forge-status span {\n\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: var(--green);\n\n  box-shadow:\n    0 0 10px var(--green);\n}\n\n\n\/* ======================================================\n   MAIN GRID\n====================================================== *\/\n\n.forge-scene {\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(620px,1.05fr)\n    minmax(500px,.95fr);\n\n  gap:\n    clamp(80px,8vw,150px);\n\n  align-items: center;\n}\n\n\n\/* ======================================================\n   LEFT MACHINE\n====================================================== *\/\n\n.forge-machine {\n\n  position: relative;\n\n  min-height: 760px;\n}\n\n\n.machine-stage {\n\n  position: relative;\n\n  height: 700px;\n\n  transform:\n    perspective(1400px)\n    rotateY(4deg)\n    rotateX(2deg);\n\n  transition:\n    transform .4s ease;\n}\n\n\n.forge-machine:hover\n.machine-stage {\n\n  transform:\n    perspective(1400px)\n    rotateY(0deg)\n    rotateX(0deg);\n}\n\n\n\/* ======================================================\n   FRAME\n====================================================== *\/\n\n.machine-frame {\n\n  position: absolute;\n\n  inset: 30px;\n\n  border:\n    1px solid\n    rgba(78,232,255,.14);\n}\n\n\n.machine-label {\n\n  position: absolute;\n\n  top: -8px;\n  left: 35px;\n\n  padding: 0 10px;\n\n  background: #030712;\n\n  color: #66eaf8;\n\n  font-size: 6px;\n\n  letter-spacing: 2px;\n}\n\n\n.machine-corner {\n\n  position: absolute;\n\n  width: 30px;\n  height: 30px;\n}\n\n\n.c1 {\n\n  top: -1px;\n  left: -1px;\n\n  border-top:\n    1px solid var(--cyan);\n\n  border-left:\n    1px solid var(--cyan);\n}\n\n\n.c2 {\n\n  top: -1px;\n  right: -1px;\n\n  border-top:\n    1px solid var(--violet);\n\n  border-right:\n    1px solid var(--violet);\n}\n\n\n.c3 {\n\n  bottom: -1px;\n  left: -1px;\n\n  border-bottom:\n    1px solid var(--cyan);\n\n  border-left:\n    1px solid var(--cyan);\n}\n\n\n.c4 {\n\n  bottom: -1px;\n  right: -1px;\n\n  border-bottom:\n    1px solid var(--pink);\n\n  border-right:\n    1px solid var(--pink);\n}\n\n\n\/* ======================================================\n   CONNECTIONS\n====================================================== *\/\n\n.machine-connectors {\n\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  pointer-events: none;\n}\n\n\n.connector-line {\n\n  fill: none;\n\n  stroke:\n    rgba(79,239,255,.24);\n\n  stroke-width: 1;\n\n  stroke-dasharray:\n    5 7;\n\n  animation:\n    forgeConnector\n    2s linear infinite;\n}\n\n\n.line-2,\n.line-4 {\n\n  stroke:\n    rgba(181,94,255,.22);\n}\n\n\n@keyframes forgeConnector {\n\n  to {\n    stroke-dashoffset: -24;\n  }\n\n}\n\n\n\/* ======================================================\n   CENTRAL SITE\n====================================================== *\/\n\n.machine-site {\n\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 58%;\n\n  transform:\n    translate(-50%,-50%);\n}\n\n\n.site-window {\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    rgba(115,230,255,.20);\n\n  background:\n    rgba(4,9,18,.94);\n\n  box-shadow:\n    0 45px 100px rgba(0,0,0,.40),\n    0 0 65px rgba(52,230,255,.07);\n}\n\n\n.site-topbar {\n\n  height: 45px;\n\n  padding:\n    0 15px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content:\n    space-between;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.06);\n}\n\n\n.site-logo {\n\n  width: 40px;\n  height: 5px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      var(--violet)\n    );\n}\n\n\n.site-menu {\n\n  display: flex;\n\n  gap: 7px;\n}\n\n\n.site-menu span {\n\n  width: 20px;\n  height: 3px;\n\n  background:\n    #caeaff;\n}\n\n\n\/* ======================================================\n   WEBSITE HERO\n====================================================== *\/\n\n.site-hero {\n\n  position: relative;\n\n  min-height: 290px;\n\n  padding:\n    45px 28px;\n\n  background:\n\n    radial-gradient(\n      circle at 75% 40%,\n      rgba(125,89,255,.24),\n      transparent 35%\n    ),\n\n    radial-gradient(\n      circle at 35% 70%,\n      rgba(43,235,255,.12),\n      transparent 33%\n    ),\n\n    #050b15;\n}\n\n\n.site-kicker {\n\n  width: 55px;\n  height: 4px;\n\n  background: var(--cyan);\n\n  margin-bottom: 16px;\n\n  box-shadow:\n    0 0 10px var(--cyan);\n}\n\n\n.site-title span {\n\n  display: block;\n\n  height: 14px;\n\n  margin-bottom: 7px;\n\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff,\n      #6ef8ff,\n      #8977ff\n    );\n\n  transform-origin: left;\n\n  animation:\n    forgeBuild\n    3s ease-in-out infinite alternate;\n}\n\n\n.site-title span:nth-child(1) {\n  width: 54%;\n}\n\n.site-title span:nth-child(2) {\n  width: 73%;\n}\n\n.site-title span:nth-child(3) {\n  width: 44%;\n}\n\n\n@keyframes forgeBuild {\n\n  from {\n\n    transform:\n      scaleX(.75);\n\n    opacity: .5;\n\n  }\n\n  to {\n\n    transform:\n      scaleX(1);\n\n    opacity: 1;\n\n  }\n\n}\n\n\n.site-copy {\n\n  width: 38%;\n  height: 4px;\n\n  margin-top: 20px;\n\n  background:\n    rgba(225,245,255,.28);\n\n  box-shadow:\n    0 10px 0\n    rgba(225,245,255,.13);\n}\n\n\n.site-actions {\n\n  display: flex;\n\n  gap: 8px;\n\n  margin-top: 28px;\n}\n\n\n.site-actions span {\n\n  width: 63px;\n  height: 22px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.30);\n}\n\n\n.site-actions span:first-child {\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      #62bcff\n    );\n}\n\n\n\/* ======================================================\n   SITE VISUAL\n====================================================== *\/\n\n.site-visual {\n\n  position: absolute;\n\n  right: 18px;\n  top: 55px;\n\n  width: 135px;\n  height: 135px;\n}\n\n\n.site-visual-ring {\n\n  position: absolute;\n\n  inset: 0;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(77,249,255,.22);\n}\n\n\n.ring-a {\n\n  animation:\n    forgeRing\n    8s linear infinite;\n}\n\n\n.ring-b {\n\n  inset: 22px;\n\n  border-color:\n    rgba(183,90,255,.35);\n\n  animation:\n    forgeRing\n    6s linear infinite reverse;\n}\n\n\n.site-core {\n\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 30px;\n  height: 30px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  background:\n    var(--cyan);\n\n  box-shadow:\n    0 0 22px var(--cyan),\n    0 0 60px rgba(77,249,255,.35);\n}\n\n\n@keyframes forgeRing {\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n\/* ======================================================\n   SITE MODULES\n====================================================== *\/\n\n.site-modules {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.06);\n}\n\n\n.site-module {\n\n  height: 80px;\n\n  padding: 14px;\n\n  border-right:\n    1px solid\n    rgba(255,255,255,.06);\n}\n\n\n.site-module:last-child {\n  border-right: 0;\n}\n\n\n.site-module i {\n\n  display: block;\n\n  width: 8px;\n  height: 8px;\n\n  margin-bottom: 12px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n}\n\n\n.site-module span {\n\n  display: block;\n\n  width: 60%;\n  height: 4px;\n\n  margin-bottom: 8px;\n\n  background:\n    rgba(231,247,255,.60);\n}\n\n\n.site-module b {\n\n  display: block;\n\n  width: 80%;\n  height: 3px;\n\n  background:\n    rgba(231,247,255,.18);\n}\n\n\n\/* ======================================================\n   FLOATING MODULES\n====================================================== *\/\n\n.machine-layer {\n\n  position: absolute;\n\n  padding: 15px;\n\n  border:\n    1px solid\n    rgba(94,225,255,.17);\n\n  background:\n    rgba(4,9,18,.82);\n\n  backdrop-filter:\n    blur(12px);\n\n  box-shadow:\n    0 20px 50px\n    rgba(0,0,0,.26);\n\n  animation:\n    forgeFloat\n    5s ease-in-out infinite;\n}\n\n\n.machine-layer small {\n\n  display: block;\n\n  margin-bottom: 12px;\n\n  color: #7ce4f0;\n\n  font-size: 6px;\n\n  letter-spacing: 1.6px;\n}\n\n\n.layer-nav {\n\n  top: 95px;\n  left: 22px;\n\n  width: 150px;\n}\n\n\n.layer-nav span {\n\n  display: block;\n\n  height: 3px;\n\n  margin-bottom: 7px;\n\n  background:\n    rgba(222,246,255,.55);\n}\n\n\n.layer-nav span:nth-child(2) {\n  width: 70%;\n}\n\n.layer-nav span:nth-child(3) {\n  width: 85%;\n}\n\n.layer-nav span:nth-child(4) {\n  width: 45%;\n}\n\n\n.layer-ui {\n\n  top: 85px;\n  right: 12px;\n\n  width: 150px;\n\n  animation-delay:\n    .7s;\n}\n\n\n.ui-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr;\n\n  gap: 5px;\n}\n\n\n.ui-grid i {\n\n  height: 28px;\n\n  border:\n    1px solid\n    rgba(135,113,255,.35);\n\n  background:\n    rgba(135,113,255,.08);\n}\n\n\n.layer-ux {\n\n  bottom: 95px;\n  left: 12px;\n\n  width: 175px;\n\n  animation-delay:\n    1.1s;\n}\n\n\n.ux-flow {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 5px;\n}\n\n\n.ux-flow i {\n\n  width: 13px;\n  height: 13px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 8px var(--cyan);\n}\n\n\n.ux-flow b {\n\n  width: 24px;\n  height: 1px;\n\n  background:\n    rgba(77,249,255,.35);\n}\n\n\n.layer-wp {\n\n  right: 5px;\n  bottom: 80px;\n\n  width: 140px;\n\n  animation-delay:\n    1.5s;\n}\n\n\n.layer-wp strong {\n\n  font-size: 25px;\n\n  color: #f0faff;\n}\n\n\n.wp-pulse {\n\n  position: absolute;\n\n  right: 13px;\n  top: 50%;\n\n  width: 10px;\n  height: 10px;\n\n  transform:\n    translateY(-50%);\n\n  border-radius: 50%;\n\n  background: var(--pink);\n\n  box-shadow:\n    0 0 12px var(--pink);\n\n  animation:\n    wpPulse\n    1.5s ease-in-out infinite;\n}\n\n\n@keyframes forgeFloat {\n\n  0%,\n  100% {\n\n    transform:\n      translateY(0);\n\n  }\n\n  50% {\n\n    transform:\n      translateY(-12px);\n\n  }\n\n}\n\n\n@keyframes wpPulse {\n\n  50% {\n\n    transform:\n      translateY(-50%)\n      scale(.6);\n\n    opacity: .5;\n\n  }\n\n}\n\n\n\/* ======================================================\n   NODES\n====================================================== *\/\n\n.machine-node {\n\n  position: absolute;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 7px;\n\n  color: #aeeeff;\n\n  font-size: 6px;\n\n  letter-spacing: 1.5px;\n}\n\n\n.machine-node span {\n\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 9px var(--cyan);\n}\n\n\n.node-a {\n  left: 80px;\n  top: 210px;\n}\n\n.node-b {\n  right: 65px;\n  top: 220px;\n}\n\n.node-c {\n  left: 90px;\n  bottom: 210px;\n}\n\n.node-d {\n  right: 70px;\n  bottom: 210px;\n}\n\n\n\/* ======================================================\n   SCAN\n====================================================== *\/\n\n.machine-scan {\n\n  position: absolute;\n\n  left: 40px;\n  right: 40px;\n\n  top: -60px;\n\n  height: 60px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      transparent,\n      rgba(70,242,255,.08),\n      rgba(70,242,255,.22),\n      transparent\n    );\n\n  animation:\n    forgeScan\n    5.5s ease-in-out infinite;\n}\n\n\n@keyframes forgeScan {\n\n  0% {\n    top: -60px;\n  }\n\n  70%,\n  100% {\n    top: 100%;\n  }\n\n}\n\n\n\/* ======================================================\n   RIGHT COPY\n====================================================== *\/\n\n.forge-copy {\n\n  position: relative;\n\n  z-index: 3;\n\n  min-width: 0;\n\n  overflow: visible;\n}\n\n\n.forge-kicker {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 28px;\n\n  color: #77eefd;\n\n  font-size: 8px;\n\n  letter-spacing: 2.4px;\n}\n\n\n.forge-kicker span {\n\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 10px var(--cyan);\n}\n\n\n\/* ======================================================\n   TITLE\n====================================================== *\/\n\n.forge-title {\n\n  position: relative;\n\n  z-index: 5;\n\n  margin: 0;\n\n  font-size:\n    clamp(58px,5.25vw,102px);\n\n  line-height: .84;\n\n  letter-spacing: -.065em;\n\n  font-weight: 730;\n\n  overflow: visible;\n}\n\n\n.forge-title-row {\n\n  position: relative;\n\n  display: block;\n\n  overflow: hidden;\n\n  padding:\n    .04em .06em .11em 0;\n\n  margin-bottom:\n    -.07em;\n}\n\n\n.forge-title-inner {\n\n  display: block;\n\n  width: max-content;\n\n  max-width: 100%;\n\n  color: #f4fcff;\n\n  transform:\n    translateY(115%);\n\n  transition:\n    transform 1s\n    cubic-bezier(.16,1,.3,1);\n}\n\n\n\/* STRON *\/\n\n.forge-gradient {\n\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #75f8ff 28%,\n      #45d8ff 55%,\n      #8772ff 80%,\n      #ff61d6 100%\n    );\n\n  -webkit-background-clip:\n    text;\n\n  background-clip:\n    text;\n\n  -webkit-text-fill-color:\n    transparent;\n\n  color:\n    transparent;\n\n  filter:\n    drop-shadow(\n      0 0 26px\n      rgba(70,235,255,.13)\n    );\n}\n\n\n\/* CYFROWE *\/\n\n.forge-outline {\n\n  color:\n    transparent;\n\n  -webkit-text-fill-color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px\n    rgba(207,239,255,.82);\n\n  filter:\n    drop-shadow(\n      0 0 20px\n      rgba(90,230,255,.08)\n    );\n}\n\n\n\/* \u015aWIATY *\/\n\n.forge-worlds {\n\n  position: relative;\n\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #72faff 23%,\n      #42dfff 45%,\n      #757eff 68%,\n      #bd62ff 84%,\n      #ff4dce 100%\n    );\n\n  -webkit-background-clip:\n    text;\n\n  background-clip:\n    text;\n\n  -webkit-text-fill-color:\n    transparent;\n\n  color:\n    transparent;\n\n  filter:\n    drop-shadow(\n      0 0 30px\n      rgba(70,235,255,.18)\n    )\n    drop-shadow(\n      0 0 55px\n      rgba(160,80,255,.10)\n    );\n}\n\n\n\/* ======================================================\n   COPY BOTTOM\n====================================================== *\/\n\n.forge-copy-bottom {\n\n  max-width: 650px;\n\n  margin-top: 32px;\n}\n\n\n.forge-copy-bottom > p {\n\n  margin: 0;\n\n  color: #d7ecfa;\n\n  font-size: 16px;\n\n  line-height: 1.8;\n}\n\n\n.forge-points {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr;\n\n  gap: 10px;\n\n  margin-top: 30px;\n}\n\n\n.forge-points div {\n\n  padding:\n    15px 16px;\n\n  border:\n    1px solid\n    rgba(86,225,255,.14);\n\n  background:\n    rgba(255,255,255,.018);\n}\n\n\n.forge-points span {\n\n  display: block;\n\n  margin-bottom: 6px;\n\n  color: var(--cyan);\n\n  font-size: 7px;\n\n  letter-spacing: 1.5px;\n}\n\n\n.forge-points strong {\n\n  color: #f4fbff;\n\n  font-size: 13px;\n}\n\n\n\/* ======================================================\n   BOTTOM SERVICES\n====================================================== *\/\n\n.forge-services {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  margin-top: 150px;\n\n  border-top:\n    1px solid\n    rgba(77,249,255,.15);\n\n  border-bottom:\n    1px solid\n    rgba(77,249,255,.15);\n}\n\n\n.forge-service {\n\n  position: relative;\n\n  min-height: 460px;\n\n  padding:\n    30px 28px 35px;\n\n  text-align: center;\n\n  border-right:\n    1px solid\n    rgba(77,249,255,.10);\n\n  background:\n    rgba(5,9,18,.44);\n\n  transition:\n    transform .45s\n    cubic-bezier(.16,1,.3,1),\n    background .4s ease;\n}\n\n\n.forge-service:first-child {\n\n  border-left:\n    1px solid\n    rgba(77,249,255,.10);\n}\n\n\n.forge-service:hover {\n\n  transform:\n    translateY(-15px);\n\n  background:\n    rgba(10,17,32,.76);\n}\n\n\n.forge-service-number {\n\n  position: absolute;\n\n  top: 28px;\n  left: 28px;\n\n  color: var(--cyan);\n\n  font-size: 8px;\n\n  letter-spacing: 1.7px;\n}\n\n\n\/* ======================================================\n   BIG ICON\n====================================================== *\/\n\n.forge-big-icon {\n\n  position: relative;\n\n  width: 150px;\n  height: 150px;\n\n  margin:\n    50px auto 30px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  transition:\n    transform .5s\n    cubic-bezier(.16,1,.3,1);\n}\n\n\n.forge-service:hover\n.forge-big-icon {\n\n  transform:\n    scale(1.10)\n    translateY(-8px);\n}\n\n\n\/* WWW *\/\n\n.icon-web {\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(77,249,255,.20);\n}\n\n\n.icon-frame {\n\n  position: absolute;\n\n  width: 100px;\n  height: 72px;\n\n  border:\n    1px solid\n    rgba(77,249,255,.58);\n\n  transform:\n    rotate(-4deg);\n\n  box-shadow:\n    0 0 30px\n    rgba(77,249,255,.08);\n}\n\n\n.icon-screen {\n\n  width: 75px;\n\n  z-index: 2;\n}\n\n\n.icon-screen span {\n\n  display: block;\n\n  height: 7px;\n\n  margin-bottom: 7px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      #7385ff\n    );\n\n  animation:\n    iconScreen\n    2.4s ease-in-out\n    infinite alternate;\n}\n\n\n.icon-screen span:nth-child(2) {\n  width: 70%;\n}\n\n.icon-screen span:nth-child(3) {\n  width: 45%;\n}\n\n\n@keyframes iconScreen {\n\n  from {\n\n    transform:\n      scaleX(.7);\n\n    transform-origin:\n      left;\n\n  }\n\n  to {\n\n    transform:\n      scaleX(1);\n\n  }\n\n}\n\n\n\/* UI UX *\/\n\n.icon-interface {\n\n  border:\n    1px solid\n    rgba(128,104,255,.18);\n\n  transform:\n    rotate(45deg);\n}\n\n\n.interface-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr;\n\n  gap: 7px;\n\n  width: 90px;\n  height: 90px;\n\n  transform:\n    rotate(-45deg);\n}\n\n\n.interface-grid span {\n\n  border:\n    1px solid\n    rgba(150,120,255,.65);\n\n  background:\n    rgba(130,104,255,.10);\n}\n\n\n.interface-cursor {\n\n  position: absolute;\n\n  width: 10px;\n  height: 10px;\n\n  border-radius: 50%;\n\n  background:\n    var(--violet);\n\n  box-shadow:\n    0 0 15px\n    var(--violet);\n\n  animation:\n    interfaceCursor\n    4s ease-in-out infinite;\n}\n\n\n@keyframes interfaceCursor {\n\n  0% {\n    transform:\n      translate(-35px,-25px);\n  }\n\n  35% {\n    transform:\n      translate(30px,-15px);\n  }\n\n  70% {\n    transform:\n      translate(20px,35px);\n  }\n\n  100% {\n    transform:\n      translate(-35px,-25px);\n  }\n\n}\n\n\n\/* WORDPRESS *\/\n\n.icon-cms {\n\n  border-radius: 50%;\n}\n\n\n.cms-ring {\n\n  position: absolute;\n\n  inset: 15px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(182,92,255,.50);\n\n  animation:\n    cmsSpin\n    9s linear infinite;\n}\n\n\n.cms-ring.second {\n\n  inset: 32px;\n\n  border-color:\n    rgba(77,249,255,.35);\n\n  animation-direction:\n    reverse;\n\n  animation-duration:\n    6s;\n}\n\n\n.icon-cms strong {\n\n  color: #f7fbff;\n\n  font-size: 34px;\n\n  z-index: 2;\n\n  text-shadow:\n    0 0 20px\n    rgba(182,92,255,.4);\n}\n\n\n@keyframes cmsSpin {\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n\/* SPECIAL *\/\n\n.icon-special {\n\n  perspective: 600px;\n}\n\n\n.special-piece {\n\n  position: absolute;\n\n  width: 70px;\n  height: 70px;\n\n  border:\n    1px solid\n    rgba(255,67,207,.45);\n\n  background:\n    rgba(255,67,207,.04);\n\n  animation:\n    specialPiece\n    7s ease-in-out infinite;\n}\n\n\n.p1 {\n\n  transform:\n    rotateX(60deg)\n    rotateZ(45deg);\n}\n\n\n.p2 {\n\n  transform:\n    rotateY(60deg)\n    rotateZ(45deg);\n\n  border-color:\n    rgba(77,249,255,.45);\n\n  animation-delay:\n    .7s;\n}\n\n\n.p3 {\n\n  width: 32px;\n  height: 32px;\n\n  border-color:\n    rgba(128,104,255,.65);\n\n  animation-delay:\n    1.4s;\n}\n\n\n@keyframes specialPiece {\n\n  50% {\n\n    transform:\n      rotateX(120deg)\n      rotateZ(135deg)\n      scale(1.08);\n\n  }\n\n}\n\n\n\/* ======================================================\n   SERVICE TEXT\n====================================================== *\/\n\n.forge-service h3 {\n\n  margin:\n    0 0 17px;\n\n  color:\n    #f4fcff;\n\n  font-size:\n    clamp(24px,1.6vw,30px);\n\n  letter-spacing:\n    -.035em;\n}\n\n\n.forge-service p {\n\n  max-width: 290px;\n\n  margin: 0 auto;\n\n  color: #c8e3f3;\n\n  font-size: 13px;\n\n  line-height: 1.75;\n}\n\n\n\/* ======================================================\n   REVEAL\n====================================================== *\/\n\n.forge-reveal {\n\n  opacity: 0;\n\n  transform:\n    translateY(40px);\n\n  filter:\n    blur(8px);\n\n  transition:\n    opacity .9s ease,\n    transform .9s\n    cubic-bezier(.16,1,.3,1),\n    filter .9s ease;\n}\n\n\n.forge-visible\n.forge-reveal {\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n  filter:\n    blur(0);\n}\n\n\n\/* TITLE REVEAL *\/\n\n.forge-visible\n.row-1\n.forge-title-inner {\n\n  transform:\n    translateY(0);\n\n  transition-delay:\n    .10s;\n}\n\n\n.forge-visible\n.row-2\n.forge-title-inner {\n\n  transform:\n    translateY(0);\n\n  transition-delay:\n    .19s;\n}\n\n\n.forge-visible\n.row-3\n.forge-title-inner {\n\n  transform:\n    translateY(0);\n\n  transition-delay:\n    .28s;\n}\n\n\n.forge-visible\n.row-4\n.forge-title-inner {\n\n  transform:\n    translateY(0);\n\n  transition-delay:\n    .37s;\n}\n\n\n.forge-visible\n.row-5\n.forge-title-inner {\n\n  transform:\n    translateY(0);\n\n  transition-delay:\n    .46s;\n}\n\n\n\/* SERVICES REVEAL *\/\n\n.forge-visible\n.forge-service:nth-child(1) {\n\n  transition-delay:\n    .10s;\n}\n\n\n.forge-visible\n.forge-service:nth-child(2) {\n\n  transition-delay:\n    .18s;\n}\n\n\n.forge-visible\n.forge-service:nth-child(3) {\n\n  transition-delay:\n    .26s;\n}\n\n\n.forge-visible\n.forge-service:nth-child(4) {\n\n  transition-delay:\n    .34s;\n}\n\n\n\/* ======================================================\n   TABLET\n====================================================== *\/\n\n@media(max-width:1150px) {\n\n  .forge-scene {\n\n    grid-template-columns:\n      1fr;\n\n  }\n\n\n  .forge-machine {\n\n    max-width: 800px;\n\n    width: 100%;\n\n    margin:\n      0 auto;\n  }\n\n\n  .forge-copy {\n\n    max-width:\n      900px;\n  }\n\n\n  .forge-services {\n\n    grid-template-columns:\n      repeat(2,1fr);\n  }\n\n}\n\n\n\/* ======================================================\n   MOBILE\n====================================================== *\/\n\n@media(max-width:700px) {\n\n  .forge-x {\n\n    padding:\n      90px 0;\n  }\n\n\n  .forge-wrap {\n\n    width:\n      calc(100% - 34px);\n  }\n\n\n  .forge-top {\n\n    flex-direction:\n      column;\n\n    align-items:\n      flex-start;\n\n    gap: 17px;\n\n    margin-bottom:\n      55px;\n  }\n\n\n  .forge-machine {\n\n    min-height:\n      520px;\n  }\n\n\n  .machine-stage {\n\n    height:\n      500px;\n\n    transform:\n      none;\n  }\n\n\n  .machine-site {\n\n    width: 72%;\n  }\n\n\n  .machine-layer {\n\n    transform:\n      scale(.8);\n  }\n\n\n  .layer-nav {\n\n    left:\n      -25px;\n  }\n\n\n  .layer-ui {\n\n    right:\n      -25px;\n  }\n\n\n  .layer-ux {\n\n    left:\n      -20px;\n\n    bottom:\n      35px;\n  }\n\n\n  .layer-wp {\n\n    right:\n      -20px;\n\n    bottom:\n      35px;\n  }\n\n\n  .machine-node {\n\n    display: none;\n  }\n\n\n  .forge-title {\n\n    font-size:\n      clamp(48px,13.5vw,70px);\n\n    line-height: .86;\n  }\n\n\n  .forge-title-row {\n\n    padding-bottom:\n      .12em;\n  }\n\n\n  .forge-copy-bottom > p {\n\n    font-size:\n      14px;\n  }\n\n\n  .forge-points {\n\n    grid-template-columns:\n      1fr 1fr;\n  }\n\n\n  .forge-services {\n\n    grid-template-columns:\n      1fr;\n\n    margin-top:\n      90px;\n  }\n\n\n  .forge-service {\n\n    min-height:\n      430px;\n  }\n\n\n  .forge-big-icon {\n\n    width:\n      165px;\n\n    height:\n      165px;\n  }\n\n}\n\n\n\/* ======================================================\n   REDUCED MOTION\n====================================================== *\/\n\n@media(prefers-reduced-motion:reduce) {\n\n  .connector-line,\n  .machine-layer,\n  .machine-scan,\n  .site-title span,\n  .site-visual-ring,\n  .interface-cursor,\n  .cms-ring,\n  .special-piece {\n\n    animation:\n      none !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\n  'DOMContentLoaded',\n  function() {\n\n    const section =\n      document.querySelector(\n        '.forge-x'\n      );\n\n    if (!section) return;\n\n\n    \/* ==============================\n       SCROLL REVEAL\n    ============================== *\/\n\n    const observer =\n      new IntersectionObserver(\n        function(entries) {\n\n          entries.forEach(\n            function(entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                section.classList.add(\n                  'forge-visible'\n                );\n\n                observer.unobserve(\n                  section\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: .10\n        }\n      );\n\n\n    observer.observe(\n      section\n    );\n\n\n    \/* ==============================\n       MOUSE 3D\n    ============================== *\/\n\n    const machine =\n      section.querySelector(\n        '.forge-machine'\n      );\n\n    const stage =\n      section.querySelector(\n        '.machine-stage'\n      );\n\n\n    if (\n      machine &&\n      stage &&\n      window.matchMedia(\n        '(pointer:fine)'\n      ).matches\n    ) {\n\n      machine.addEventListener(\n        'mousemove',\n        function(e) {\n\n          const rect =\n            machine.getBoundingClientRect();\n\n\n          const x =\n            (\n              e.clientX -\n              rect.left\n            ) \/\n            rect.width -\n            .5;\n\n\n          const y =\n            (\n              e.clientY -\n              rect.top\n            ) \/\n            rect.height -\n            .5;\n\n\n          stage.style.transform =\n            `\n              perspective(1400px)\n              rotateY(${x * 5}deg)\n              rotateX(${y * -4}deg)\n              translateY(-5px)\n            `;\n\n        }\n      );\n\n\n      machine.addEventListener(\n        'mouseleave',\n        function() {\n\n          stage.style.transform =\n            `\n              perspective(1400px)\n              rotateY(4deg)\n              rotateX(2deg)\n            `;\n\n        }\n      );\n\n    }\n\n  }\n);\n\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_3 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_3 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_3 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_3 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><section class=\"projects-x\" id=\"projekty\">\n\n  <div class=\"projects-bg\">\n    <div class=\"projects-glow projects-glow-1\"><\/div>\n    <div class=\"projects-glow projects-glow-2\"><\/div>\n    <div class=\"projects-grid\"><\/div>\n  <\/div>\n\n  <div class=\"projects-wrap\">\n\n    <!-- TOP -->\n    <div class=\"projects-top projects-reveal\">\n\n      <div class=\"projects-index\">\n        <span>03<\/span>\n        <i><\/i>\n        <strong>PROJEKTY<\/strong>\n      <\/div>\n\n      <div class=\"projects-status\">\n        <span><\/span>\n        SELECTED DIGITAL WORK\n      <\/div>\n\n    <\/div>\n\n\n    <!-- INTRO -->\n    <div class=\"projects-intro\">\n\n      <div class=\"projects-intro-left\">\n\n        <div class=\"projects-kicker projects-reveal\">\n          <span><\/span>\n          WYBRANE REALIZACJE\n        <\/div>\n\n        <h2 class=\"projects-title\">\n\n          <span class=\"projects-title-row row-1\">\n            <span class=\"projects-title-inner\">\n              PROJEKTY,\n            <\/span>\n          <\/span>\n\n          <span class=\"projects-title-row row-2\">\n            <span class=\"projects-title-inner projects-gradient\">\n              KT\u00d3RE\n            <\/span>\n          <\/span>\n\n          <span class=\"projects-title-row row-3\">\n            <span class=\"projects-title-inner projects-outline\">\n              ZOSTAWIAJ\u0104\n            <\/span>\n          <\/span>\n\n          <span class=\"projects-title-row row-4\">\n            <span class=\"projects-title-inner projects-gradient-2\">\n              \u015aLAD.\n            <\/span>\n          <\/span>\n\n        <\/h2>\n\n      <\/div>\n\n\n      <div class=\"projects-intro-right projects-reveal\">\n\n        <p>\n          Ka\u017cdy projekt ma inny charakter, ale cel jest ten sam:\n          stworzy\u0107 co\u015b, czego nie da si\u0119 pomyli\u0107 z kolejnym gotowym szablonem.\n        <\/p>\n\n        <div class=\"projects-intro-line\"><\/div>\n\n        <span>\n          WWW \/ UI UX \/ WORDPRESS \/ CREATIVE\n        <\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- PROJECT 01 -->\n    <article class=\"project-case projects-reveal\">\n\n      <div class=\"project-case-bg\"><\/div>\n\n      <div class=\"project-case-head\">\n\n        <div class=\"project-number\">\n          01\n        <\/div>\n\n        <div class=\"project-category\">\n          WEB DESIGN \/ WORDPRESS\n        <\/div>\n\n        <div class=\"project-arrow\">\n          \u2197\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"project-case-main\">\n\n        <div class=\"project-copy\">\n\n          <span class=\"project-mini\">\n            DIGITAL EXPERIENCE\n          <\/span>\n\n          <h3>\n            PROJEKT\n            <strong>01<\/strong>\n          <\/h3>\n\n          <p>\n            Nowoczesna realizacja oparta na mocnej typografii,\n            przemy\u015blanej strukturze i dopracowanym do\u015bwiadczeniu u\u017cytkownika.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"project-visual\">\n\n          <div class=\"project-device project-device-back\">\n\n            <div class=\"project-screen\">\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-device project-device-front\">\n\n            <div class=\"project-screen project-screen-alt\">\n\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-orbit orbit-1\"><\/div>\n          <div class=\"project-orbit orbit-2\"><\/div>\n\n          <div class=\"project-light\"><\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/article>\n\n\n    <!-- PROJECT 02 -->\n    <article class=\"project-case projects-reveal\">\n\n      <div class=\"project-case-bg project-bg-violet\"><\/div>\n\n      <div class=\"project-case-head\">\n\n        <div class=\"project-number\">\n          02\n        <\/div>\n\n        <div class=\"project-category\">\n          UI \/ UX \/ INTERFACE\n        <\/div>\n\n        <div class=\"project-arrow\">\n          \u2197\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"project-case-main\">\n\n        <div class=\"project-copy\">\n\n          <span class=\"project-mini\">\n            INTERFACE DESIGN\n          <\/span>\n\n          <h3>\n            PROJEKT\n            <strong>02<\/strong>\n          <\/h3>\n\n          <p>\n            Interfejs zaprojektowany tak, aby \u0142\u0105czy\u0107 funkcj\u0119,\n            charakter wizualny i naturalne prowadzenie u\u017cytkownika.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"project-visual\">\n\n          <div class=\"project-device project-device-back project-device-purple\">\n\n            <div class=\"project-screen\">\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-device project-device-front project-device-purple2\">\n\n            <div class=\"project-screen project-screen-alt\">\n\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-orbit orbit-1\"><\/div>\n          <div class=\"project-orbit orbit-2\"><\/div>\n\n          <div class=\"project-light project-light-violet\"><\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/article>\n\n\n    <!-- PROJECT 03 -->\n    <article class=\"project-case projects-reveal\">\n\n      <div class=\"project-case-bg project-bg-pink\"><\/div>\n\n      <div class=\"project-case-head\">\n\n        <div class=\"project-number\">\n          03\n        <\/div>\n\n        <div class=\"project-category\">\n          LANDING \/ CREATIVE \/ WEB\n        <\/div>\n\n        <div class=\"project-arrow\">\n          \u2197\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"project-case-main\">\n\n        <div class=\"project-copy\">\n\n          <span class=\"project-mini\">\n            CREATIVE PROJECT\n          <\/span>\n\n          <h3>\n            PROJEKT\n            <strong>03<\/strong>\n          <\/h3>\n\n          <p>\n            Nietypowy projekt, w kt\u00f3rym layout, animacje\n            i spos\u00f3b prezentacji buduj\u0105 charakter ca\u0142ej marki.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"project-visual\">\n\n          <div class=\"project-device project-device-back project-device-pink\">\n\n            <div class=\"project-screen\">\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-device project-device-front project-device-pink2\">\n\n            <div class=\"project-screen project-screen-alt\">\n\n              <div class=\"project-screen-top\"><\/div>\n\n              <div class=\"project-screen-content\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n\n                <div class=\"project-screen-button\"><\/div>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"project-orbit orbit-1\"><\/div>\n          <div class=\"project-orbit orbit-2\"><\/div>\n\n          <div class=\"project-light project-light-pink\"><\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/article>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n.projects-x,\n.projects-x * {\n  box-sizing: border-box;\n}\n\n.projects-x {\n\n  --cyan: #49f7ff;\n  --blue: #4fb8ff;\n  --violet: #866dff;\n  --purple: #ba63ff;\n  --pink: #ff45cf;\n  --green: #69ffbc;\n\n  position: relative;\n\n  overflow: hidden;\n\n  padding: 150px 0 170px;\n\n  background:\n    linear-gradient(\n      180deg,\n      #020308 0%,\n      #030611 55%,\n      #020308 100%\n    );\n\n  color: #fff;\n\n  font-family:\n    \"Inter\",\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n.projects-bg {\n  position: absolute;\n  inset: 0;\n\n  z-index: -1;\n\n  pointer-events: none;\n}\n\n.projects-glow {\n  position: absolute;\n\n  border-radius: 50%;\n\n  filter: blur(130px);\n}\n\n.projects-glow-1 {\n  width: 720px;\n  height: 720px;\n\n  left: -330px;\n  top: 8%;\n\n  background:\n    rgba(0,220,255,.08);\n}\n\n.projects-glow-2 {\n  width: 850px;\n  height: 850px;\n\n  right: -390px;\n  bottom: 5%;\n\n  background:\n    rgba(155,78,255,.08);\n}\n\n.projects-grid {\n  position: absolute;\n  inset: 0;\n\n  opacity: .065;\n\n  background-image:\n    linear-gradient(\n      rgba(77,249,255,.08) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(77,249,255,.08) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    90px 90px;\n\n  mask-image:\n    linear-gradient(\n      to bottom,\n      transparent,\n      black 12%,\n      black 88%,\n      transparent\n    );\n}\n\n\n\/* =========================================================\n   WRAP\n========================================================= *\/\n\n.projects-wrap {\n  width:\n    min(1580px, calc(100% - 80px));\n\n  margin: 0 auto;\n\n  position: relative;\n  z-index: 2;\n}\n\n\n\/* =========================================================\n   TOP\n========================================================= *\/\n\n.projects-top {\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  margin-bottom: 90px;\n}\n\n.projects-index {\n  display: flex;\n\n  align-items: center;\n\n  gap: 15px;\n}\n\n.projects-index span {\n  color: var(--cyan);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n}\n\n.projects-index i {\n  width: 75px;\n  height: 1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      transparent\n    );\n}\n\n.projects-index strong {\n  color: #e8fbff;\n\n  font-size: 8px;\n\n  letter-spacing: 3px;\n}\n\n.projects-status {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color: #b9ecff;\n\n  font-size: 8px;\n\n  letter-spacing: 2px;\n}\n\n.projects-status span {\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: var(--green);\n\n  box-shadow:\n    0 0 10px var(--green);\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.projects-intro {\n  display: grid;\n\n  grid-template-columns:\n    minmax(650px,1.15fr)\n    minmax(340px,.85fr);\n\n  gap:\n    clamp(70px,8vw,150px);\n\n  align-items: end;\n\n  margin-bottom: 120px;\n}\n\n.projects-kicker {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 28px;\n\n  color: #79eaf8;\n\n  font-size: 8px;\n\n  letter-spacing: 2.5px;\n}\n\n.projects-kicker span {\n  width: 6px;\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: var(--cyan);\n\n  box-shadow:\n    0 0 10px var(--cyan);\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.projects-title {\n  margin: 0;\n\n  font-size:\n    clamp(66px,6vw,118px);\n\n  line-height: .82;\n\n  letter-spacing: -.065em;\n\n  font-weight: 730;\n}\n\n.projects-title-row {\n  display: block;\n\n  overflow: hidden;\n\n  padding:\n    .04em .06em .10em 0;\n\n  margin-bottom:\n    -.07em;\n}\n\n.projects-title-inner {\n  display: block;\n\n  width: max-content;\n\n  max-width: 100%;\n\n  color: #f3fcff;\n\n  transform:\n    translateY(115%);\n\n  transition:\n    transform 1s\n    cubic-bezier(.16,1,.3,1);\n}\n\n.projects-gradient {\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff,\n      #6ff8ff 35%,\n      #4bc9ff 58%,\n      #9078ff 82%\n    );\n\n  -webkit-background-clip: text;\n  background-clip: text;\n\n  color: transparent;\n\n  -webkit-text-fill-color: transparent;\n}\n\n.projects-outline {\n  color: transparent;\n\n  -webkit-text-fill-color: transparent;\n\n  -webkit-text-stroke:\n    1px rgba(206,240,255,.84);\n}\n\n.projects-gradient-2 {\n  background:\n    linear-gradient(\n      90deg,\n      #61faff 0%,\n      #4ccfff 30%,\n      #8c73ff 58%,\n      #c25fff 80%,\n      #ff4dcd 100%\n    );\n\n  -webkit-background-clip: text;\n  background-clip: text;\n\n  color: transparent;\n\n  -webkit-text-fill-color: transparent;\n\n  filter:\n    drop-shadow(\n      0 0 30px rgba(91,225,255,.14)\n    );\n}\n\n\n\/* =========================================================\n   INTRO RIGHT\n========================================================= *\/\n\n.projects-intro-right {\n  max-width: 520px;\n\n  padding-bottom: 10px;\n}\n\n.projects-intro-right p {\n  margin: 0;\n\n  color: #d8edf9;\n\n  font-size: 16px;\n\n  line-height: 1.85;\n}\n\n.projects-intro-line {\n  width: 100%;\n  height: 1px;\n\n  margin: 30px 0 18px;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(76,239,255,.55),\n      rgba(143,104,255,.28),\n      transparent\n    );\n}\n\n.projects-intro-right span {\n  color: #71dce9;\n\n  font-size: 7px;\n\n  letter-spacing: 1.8px;\n}\n\n\n\/* =========================================================\n   PROJECT CASE\n========================================================= *\/\n\n.project-case {\n  position: relative;\n\n  min-height: 620px;\n\n  margin-bottom: 42px;\n\n  overflow: hidden;\n\n  border:\n    1px solid rgba(93,227,255,.14);\n\n  background:\n    rgba(5,9,18,.48);\n\n  box-shadow:\n    0 35px 100px rgba(0,0,0,.20);\n\n  transition:\n    transform .55s\n    cubic-bezier(.16,1,.3,1),\n    border-color .45s ease,\n    box-shadow .45s ease;\n}\n\n.project-case:hover {\n  transform:\n    translateY(-10px);\n\n  border-color:\n    rgba(93,227,255,.30);\n\n  box-shadow:\n    0 55px 130px rgba(0,0,0,.32);\n}\n\n.project-case-bg {\n  position: absolute;\n  inset: 0;\n\n  opacity: .62;\n\n  background:\n    radial-gradient(\n      circle at 78% 48%,\n      rgba(0,220,255,.18),\n      transparent 30%\n    ),\n    radial-gradient(\n      circle at 58% 90%,\n      rgba(90,80,255,.12),\n      transparent 30%\n    );\n\n  transition:\n    transform .7s ease,\n    opacity .7s ease;\n}\n\n.project-bg-violet {\n  background:\n    radial-gradient(\n      circle at 78% 48%,\n      rgba(134,109,255,.23),\n      transparent 30%\n    ),\n    radial-gradient(\n      circle at 55% 90%,\n      rgba(60,202,255,.10),\n      transparent 30%\n    );\n}\n\n.project-bg-pink {\n  background:\n    radial-gradient(\n      circle at 78% 48%,\n      rgba(255,69,207,.19),\n      transparent 30%\n    ),\n    radial-gradient(\n      circle at 55% 90%,\n      rgba(105,90,255,.12),\n      transparent 30%\n    );\n}\n\n.project-case:hover\n.project-case-bg {\n  transform:\n    scale(1.05);\n\n  opacity: .9;\n}\n\n\n\/* =========================================================\n   HEAD\n========================================================= *\/\n\n.project-case-head {\n  position: relative;\n  z-index: 4;\n\n  height: 74px;\n\n  padding:\n    0 30px;\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 1fr auto;\n\n  align-items: center;\n\n  border-bottom:\n    1px solid rgba(255,255,255,.06);\n}\n\n.project-number {\n  color: var(--cyan);\n\n  font-size: 9px;\n\n  letter-spacing: 2px;\n}\n\n.project-category {\n  justify-self: center;\n\n  color: #b8eafa;\n\n  font-size: 7px;\n\n  letter-spacing: 1.8px;\n}\n\n.project-arrow {\n  color: var(--cyan);\n\n  font-size: 24px;\n\n  transition:\n    transform .35s ease;\n}\n\n.project-case:hover\n.project-arrow {\n  transform:\n    translate(5px,-5px);\n}\n\n\n\/* =========================================================\n   CASE MAIN\n========================================================= *\/\n\n.project-case-main {\n  position: relative;\n  z-index: 3;\n\n  min-height: 545px;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(360px,.72fr)\n    minmax(620px,1.28fr);\n\n  gap: 40px;\n\n  align-items: center;\n\n  padding:\n    60px 45px;\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.project-copy {\n  max-width: 440px;\n}\n\n.project-mini {\n  display: block;\n\n  margin-bottom: 18px;\n\n  color: #6fe9f7;\n\n  font-size: 7px;\n\n  letter-spacing: 2px;\n}\n\n.project-copy h3 {\n  margin:\n    0 0 24px;\n\n  font-size:\n    clamp(52px,4.5vw,86px);\n\n  line-height: .88;\n\n  letter-spacing: -.06em;\n\n  font-weight: 720;\n\n  color: #f4fcff;\n}\n\n.project-copy h3 strong {\n  display: block;\n\n  background:\n    linear-gradient(\n      90deg,\n      #69faff,\n      #51beff,\n      #9376ff,\n      #ff56d2\n    );\n\n  -webkit-background-clip: text;\n  background-clip: text;\n\n  -webkit-text-fill-color: transparent;\n\n  color: transparent;\n}\n\n.project-copy p {\n  margin: 0;\n\n  color: #cfe7f4;\n\n  font-size: 14px;\n\n  line-height: 1.8;\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n.project-visual {\n  position: relative;\n\n  min-height: 430px;\n\n  perspective: 1200px;\n}\n\n.project-device {\n  position: absolute;\n\n  border:\n    1px solid rgba(106,230,255,.22);\n\n  background:\n    #050a13;\n\n  box-shadow:\n    0 35px 90px rgba(0,0,0,.32);\n\n  overflow: hidden;\n\n  transition:\n    transform .7s\n    cubic-bezier(.16,1,.3,1),\n    filter .7s ease;\n}\n\n.project-device-back {\n  width: 67%;\n  height: 300px;\n\n  right: 12%;\n  top: 15px;\n\n  transform:\n    rotateY(-8deg)\n    rotateX(3deg)\n    translateZ(-20px);\n}\n\n.project-device-front {\n  width: 58%;\n  height: 285px;\n\n  left: 4%;\n  bottom: 5px;\n\n  transform:\n    rotateY(8deg)\n    rotateX(-2deg)\n    translateZ(30px);\n}\n\n.project-case:hover\n.project-device-back {\n  transform:\n    rotateY(-3deg)\n    rotateX(1deg)\n    translate(18px,-10px)\n    scale(1.02);\n}\n\n.project-case:hover\n.project-device-front {\n  transform:\n    rotateY(3deg)\n    rotateX(-1deg)\n    translate(-12px,12px)\n    scale(1.04);\n}\n\n\n\/* =========================================================\n   SCREEN\n========================================================= *\/\n\n.project-screen {\n  position: relative;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 75% 40%,\n      rgba(83,217,255,.22),\n      transparent 30%\n    ),\n    linear-gradient(\n      145deg,\n      #07131e,\n      #030610\n    );\n}\n\n.project-screen-alt {\n  background:\n    radial-gradient(\n      circle at 70% 40%,\n      rgba(138,102,255,.28),\n      transparent 34%\n    ),\n    linear-gradient(\n      145deg,\n      #080817,\n      #03050c\n    );\n}\n\n.project-screen-top {\n  height: 34px;\n\n  border-bottom:\n    1px solid rgba(255,255,255,.06);\n\n  background:\n    rgba(255,255,255,.02);\n}\n\n.project-screen-content {\n  position: absolute;\n\n  left: 9%;\n  top: 28%;\n\n  width: 56%;\n}\n\n.project-screen-content span {\n  display: block;\n\n  height: 11px;\n\n  margin-bottom: 8px;\n\n  background:\n    linear-gradient(\n      90deg,\n      #ffffff,\n      #66f4ff,\n      #8e76ff\n    );\n\n  transform-origin: left;\n\n  animation:\n    projectLine\n    3s ease-in-out\n    infinite alternate;\n}\n\n.project-screen-content span:nth-child(1) {\n  width: 82%;\n}\n\n.project-screen-content span:nth-child(2) {\n  width: 100%;\n}\n\n.project-screen-content span:nth-child(3) {\n  width: 62%;\n}\n\n.project-screen-button {\n  width: 78px;\n  height: 25px;\n\n  margin-top: 25px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--cyan),\n      #5cabff\n    );\n\n  box-shadow:\n    0 0 22px rgba(77,249,255,.15);\n}\n\n@keyframes projectLine {\n\n  from {\n    transform: scaleX(.72);\n    opacity: .55;\n  }\n\n  to {\n    transform: scaleX(1);\n    opacity: 1;\n  }\n\n}\n\n\n\/* =========================================================\n   COLOR VARIANTS\n========================================================= *\/\n\n.project-device-purple\n.project-screen {\n  background:\n    radial-gradient(\n      circle at 75% 40%,\n      rgba(147,98,255,.30),\n      transparent 32%\n    ),\n    linear-gradient(\n      145deg,\n      #09071a,\n      #030510\n    );\n}\n\n.project-device-purple2\n.project-screen {\n  background:\n    radial-gradient(\n      circle at 74% 45%,\n      rgba(62,210,255,.20),\n      transparent 35%\n    ),\n    linear-gradient(\n      145deg,\n      #070b18,\n      #040511\n    );\n}\n\n.project-device-pink\n.project-screen {\n  background:\n    radial-gradient(\n      circle at 74% 40%,\n      rgba(255,69,207,.24),\n      transparent 34%\n    ),\n    linear-gradient(\n      145deg,\n      #100615,\n      #04050d\n    );\n}\n\n.project-device-pink2\n.project-screen {\n  background:\n    radial-gradient(\n      circle at 70% 42%,\n      rgba(117,91,255,.28),\n      transparent 34%\n    ),\n    linear-gradient(\n      145deg,\n      #090717,\n      #03050d\n    );\n}\n\n\n\/* =========================================================\n   ORBITS\n========================================================= *\/\n\n.project-orbit {\n  position: absolute;\n\n  border-radius: 50%;\n\n  border:\n    1px solid rgba(77,249,255,.17);\n\n  pointer-events: none;\n\n  transition:\n    transform .8s ease;\n}\n\n.orbit-1 {\n  width: 250px;\n  height: 250px;\n\n  right: -15px;\n  top: 35px;\n\n  animation:\n    projectOrbit\n    12s linear infinite;\n}\n\n.orbit-2 {\n  width: 160px;\n  height: 160px;\n\n  right: 30px;\n  top: 80px;\n\n  border-color:\n    rgba(166,104,255,.22);\n\n  animation:\n    projectOrbit\n    8s linear infinite reverse;\n}\n\n@keyframes projectOrbit {\n\n  to {\n    transform: rotate(360deg);\n  }\n\n}\n\n\n\/* =========================================================\n   LIGHT\n========================================================= *\/\n\n.project-light {\n  position: absolute;\n\n  right: 4%;\n  top: 15%;\n\n  width: 280px;\n  height: 280px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(52,224,255,.12);\n\n  filter: blur(75px);\n\n  transition:\n    transform .6s ease,\n    opacity .6s ease;\n}\n\n.project-light-violet {\n  background:\n    rgba(133,91,255,.14);\n}\n\n.project-light-pink {\n  background:\n    rgba(255,70,207,.13);\n}\n\n.project-case:hover\n.project-light {\n  transform: scale(1.22);\n  opacity: .95;\n}\n\n\n\/* =========================================================\n   REVEAL\n========================================================= *\/\n\n.projects-reveal {\n  opacity: 0;\n\n  transform:\n    translateY(45px);\n\n  filter:\n    blur(8px);\n\n  transition:\n    opacity .9s ease,\n    transform .9s\n    cubic-bezier(.16,1,.3,1),\n    filter .9s ease;\n}\n\n.projects-visible\n.projects-reveal {\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n  filter:\n    blur(0);\n}\n\n\n\/* title reveal *\/\n\n.projects-visible\n.row-1\n.projects-title-inner {\n  transform:\n    translateY(0);\n\n  transition-delay: .08s;\n}\n\n.projects-visible\n.row-2\n.projects-title-inner {\n  transform:\n    translateY(0);\n\n  transition-delay: .17s;\n}\n\n.projects-visible\n.row-3\n.projects-title-inner {\n  transform:\n    translateY(0);\n\n  transition-delay: .26s;\n}\n\n.projects-visible\n.row-4\n.projects-title-inner {\n  transform:\n    translateY(0);\n\n  transition-delay: .35s;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1150px) {\n\n  .projects-intro {\n    grid-template-columns: 1fr;\n\n    gap: 50px;\n  }\n\n  .project-case-main {\n    grid-template-columns: 1fr;\n\n    gap: 60px;\n  }\n\n  .project-copy {\n    max-width: 650px;\n  }\n\n  .project-visual {\n    min-height: 430px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:700px) {\n\n  .projects-x {\n    padding:\n      90px 0 100px;\n  }\n\n  .projects-wrap {\n    width:\n      calc(100% - 34px);\n  }\n\n  .projects-top {\n    flex-direction: column;\n\n    align-items: flex-start;\n\n    gap: 18px;\n\n    margin-bottom: 55px;\n  }\n\n  .projects-title {\n    font-size:\n      clamp(52px,14vw,72px);\n  }\n\n  .projects-intro {\n    margin-bottom: 80px;\n  }\n\n  .project-case {\n    min-height: auto;\n\n    margin-bottom: 28px;\n  }\n\n  .project-case-head {\n    grid-template-columns:\n      auto 1fr auto;\n\n    padding:\n      0 18px;\n  }\n\n  .project-category {\n    justify-self: start;\n\n    margin-left: 20px;\n  }\n\n  .project-case-main {\n    min-height: auto;\n\n    padding:\n      40px 22px 45px;\n  }\n\n  .project-copy h3 {\n    font-size:\n      clamp(45px,13vw,68px);\n  }\n\n  .project-visual {\n    min-height: 320px;\n  }\n\n  .project-device-back {\n    width: 72%;\n    height: 220px;\n\n    right: 3%;\n  }\n\n  .project-device-front {\n    width: 70%;\n    height: 210px;\n  }\n\n  .project-screen-content span {\n    height: 8px;\n  }\n\n  .orbit-1 {\n    width: 180px;\n    height: 180px;\n  }\n\n  .orbit-2 {\n    width: 110px;\n    height: 110px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce) {\n\n  .project-screen-content span,\n  .project-orbit {\n    animation: none !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\n  'DOMContentLoaded',\n  function() {\n\n    const section =\n      document.querySelector(\n        '.projects-x'\n      );\n\n    if (!section) return;\n\n\n    \/* REVEAL *\/\n\n    const observer =\n      new IntersectionObserver(\n        function(entries) {\n\n          entries.forEach(\n            function(entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                section.classList.add(\n                  'projects-visible'\n                );\n\n                observer.unobserve(\n                  section\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: .08\n        }\n      );\n\n\n    observer.observe(\n      section\n    );\n\n\n    \/* 3D HOVER *\/\n\n    const cases =\n      section.querySelectorAll(\n        '.project-case'\n      );\n\n\n    if (\n      window.matchMedia(\n        '(pointer:fine)'\n      ).matches\n    ) {\n\n      cases.forEach(\n        function(item) {\n\n          const visual =\n            item.querySelector(\n              '.project-visual'\n            );\n\n\n          item.addEventListener(\n            'mousemove',\n            function(e) {\n\n              const rect =\n                item.getBoundingClientRect();\n\n\n              const x =\n                (\n                  e.clientX -\n                  rect.left\n                ) \/\n                rect.width -\n                .5;\n\n\n              const y =\n                (\n                  e.clientY -\n                  rect.top\n                ) \/\n                rect.height -\n                .5;\n\n\n              if (visual) {\n\n                visual.style.transform =\n                  `\n                    perspective(1300px)\n                    rotateY(${x * 3}deg)\n                    rotateX(${y * -2.5}deg)\n                  `;\n\n              }\n\n            }\n          );\n\n\n          item.addEventListener(\n            'mouseleave',\n            function() {\n\n              if (visual) {\n\n                visual.style.transform =\n                  `\n                    perspective(1300px)\n                    rotateY(0deg)\n                    rotateX(0deg)\n                  `;\n\n              }\n\n            }\n          );\n\n        }\n      );\n\n    }\n\n  }\n);\n\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":28,"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/rafaltuszynski.pl\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}