*,*::before,*::after{box-sizing:border-box}

html,body{
  height:100%;
  min-height:100%;
  scroll-behavior:auto;
  background:#0b0c10;
}

:root{
  --bg:#0b0c10;
  --bg-2:#0f1220;
  --text:#e6e6e6;
  --muted:#a5a7af;
  --brand:#7c5cff;
  --brand-2:#00d2ff;
  --radius:20px;
  --radius-btn:12px;
  --outline:1px solid rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;
  --mx:0;
  --my:0;
  --scroll:0;
  --padY: calc(0.9rem - 0.45rem * var(--scroll));
  --logoH: calc(60px - 18px * var(--scroll));
  --logoOpacity: calc(1 - 0.9 * var(--scroll));
  --borderOpacity: calc(0.18 + 0.12 * var(--scroll));
  --glassBg: rgba(255,255,255,0.06);
  --header-fixed: 90px;
  --stack-top: calc(var(--header-fixed) + 18px);
  --stack-step: 14px;
  --stack-min-h: clamp(460px, 68vh, 760px);
  --z-header: 10000;
  --z-drawer: 9000;
}

body{
  margin:0;
  font:16px/1.6 'Inter',ui-sans-serif,system-ui;
  color:var(--text);
  background:#0b0c10;
  background-color:#0b0c10;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-fixed);
  position:relative;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}
.text-narrow{max-width:70ch}
.muted{color:var(--muted)}

.site-bg{
  display:none;
}

.site-bg__noise{
  position:absolute;
  inset:0;
  opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.7) 0.5px, transparent 0.5px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at center, black 35%, transparent 100%);
}

.site-bg__glow{
  position:absolute;
  border-radius:999px;
  filter:blur(80px);
  opacity:.5;
}

.site-bg__glow--1{
  width:420px;
  height:420px;
  top:-120px;
  left:-100px;
  background:rgba(124,92,255,.16);
}

.site-bg__glow--2{
  width:320px;
  height:320px;
  right:-80px;
  bottom:10%;
  background:rgba(0,210,255,.12);
}

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-header);
  isolation:isolate;
}

.glass{
  position:relative;
  background:var(--glassBg);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,var(--borderOpacity));
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  overflow:visible;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.glass::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(1200px 400px at calc(50% + 12vw) -200px, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 300px at -10% 10%, rgba(0,210,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  mix-blend-mode:screen;
  filter:blur(10px);
  transform:translate(calc(var(--mx)*6px), calc(var(--my)*4px));
  transition:transform .2s ease;
  pointer-events:none;
  z-index:0;
}

.glass::after{
  content:"";
  position:absolute;
  inset:-30% -10% -50%;
  background:
    radial-gradient(120% 60% at 10% -10%, rgba(255,255,255,.28), rgba(255,255,255,0) 45%),
    linear-gradient(120deg, rgba(124,92,255,.18), rgba(0,210,255,.12));
  opacity:calc(.38 + .12 * (1 - var(--scroll)));
  filter:blur(18px);
  transform:
    translate(calc(var(--mx)*16px), calc(var(--my)*10px))
    rotate(1.2deg)
    translateY(calc(var(--scroll)*-6px));
  transition:transform .25s ease, opacity .25s ease;
  pointer-events:none;
  z-index:0;
}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--padY) 0;
  z-index:1;
  transition:padding .25s ease;
}

.brand{display:flex;align-items:center;gap:.7rem}

.logo-img{
  height:var(--logoH);
  width:auto;
  object-fit:contain;
  transition:transform .35s ease, opacity .35s ease, filter .35s ease, height .25s ease;
  opacity:var(--logoOpacity);
  transform:scale(calc(1 - 0.08 * var(--scroll)));
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)) blur(calc(1px * var(--scroll)));
  image-rendering:-webkit-optimize-contrast;
}

.logo-img:hover{
  transform:scale(calc(1.05 - 0.05 * var(--scroll)));
}

.menu{
  display:flex;
  gap:1rem;
  align-items:center;
  position:relative;
}

.menu a{
  padding:.5rem .7rem;
  border-radius:10px;
  color:var(--muted);
  transition:background .2s ease,color .2s ease, transform .2s ease;
}

.menu a:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
  transform:translateY(-1px);
}

.menu a.is-active,
.menu a[aria-current="page"]{
  color:#fff;
  position:relative;
}

.menu a:focus-visible{
  outline:2px solid rgba(124,92,255,.8);
  outline-offset:4px;
}

.menu .menu-slider{
  position:absolute;
  left:0;
  bottom:-2px;
  height:2px;
  width:0;
  border-radius:2px;
  background:linear-gradient(90deg,#7c5cff,#00d2ff);
  box-shadow:0 0 6px #7c5cff,0 0 10px #00d2ff;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    width .35s cubic-bezier(.22,.61,.36,1),
    opacity .25s ease;
  transform:translateX(0);
  opacity:1;
  pointer-events:none;
}

.hamburger{
  display:none;
  appearance:none;
  background:none;
  border:0;
  color:var(--text);
  padding:.4rem;
  cursor:pointer;
  border-radius:10px;
}

.hamburger .material-symbols-outlined{
  font-size:28px;
  line-height:1;
}

.hamburger:focus-visible{
  outline:2px solid rgba(124,92,255,.7);
  outline-offset:2px;
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(8, 10, 20, 0.80);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  visibility:hidden;
  transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index:var(--z-drawer);
}

.drawer-open .drawer-overlay{
  opacity:1;
  visibility:visible;
}

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(340px, 88vw);
  height:100%;
  background:rgba(12, 14, 28, 0.95);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  border-left:1px solid rgba(124, 92, 255, 0.25);
  box-shadow:-20px 0 60px rgba(0, 0, 0, 0.7);
  transform:translateX(100%);
  transition:transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index:calc(var(--z-drawer) + 10);
  display:flex;
  flex-direction:column;
}

.drawer-open .drawer{
  transform:translateX(0);
}

.drawer__inner{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:2rem 1.8rem;
  overflow-y:auto;
}

.drawer__close{
  position:absolute;
  top:1.4rem;
  left:1.4rem;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.08);
  border:1px solid rgba(255, 255, 255, 0.15);
  color:#fff;
  display:grid;
  place-items:center;
  transition:all 0.3s ease;
  cursor:pointer;
}

.drawer__close:hover{
  background:rgba(124, 92, 255, 0.3);
  transform:rotate(90deg);
  border-color:#7c5cff;
}

.drawer__close .material-symbols-outlined{
  font-size:24px;
}

.drawer__nav{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-top:5rem;
}

.drawer__nav a{
  position:relative;
  display:block;
  padding:1.1rem 1.6rem;
  font-size:1.2rem;
  font-weight:500;
  color:#e0e0e0;
  border-radius:16px;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform:translateX(30px);
  opacity:0;
}

.drawer-open .drawer__nav a{
  animation:slideInRight 0.7s forwards;
}

.drawer-open .drawer__nav a:nth-child(1){ animation-delay:0.10s; }
.drawer-open .drawer__nav a:nth-child(2){ animation-delay:0.18s; }
.drawer-open .drawer__nav a:nth-child(3){ animation-delay:0.26s; }
.drawer-open .drawer__nav a:nth-child(4){ animation-delay:0.34s; }
.drawer-open .drawer__nav a:nth-child(5){ animation-delay:0.42s; }
.drawer-open .drawer__nav a:nth-child(6){ animation-delay:0.50s; }

.drawer__nav a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(124, 92, 255, 0.15), rgba(0, 210, 255, 0.1));
  opacity:0;
  transition:opacity 0.4s ease;
}

.drawer__nav a:hover::before,
.drawer__nav a.is-active::before{
  opacity:1;
}

.drawer__nav a:hover,
.drawer__nav a.is-active{
  color:#fff;
  background:rgba(124, 92, 255, 0.12);
  border:1px solid rgba(124, 92, 255, 0.3);
  transform:translateX(10px);
  box-shadow:0 8px 25px rgba(124, 92, 255, 0.25);
}

.drawer__footer{
  margin-top:auto;
  padding-top:2rem;
  border-top:1px solid rgba(255, 255, 255, 0.1);
  color:#aaa;
  font-size:0.95rem;
  text-align:center;
}

.drawer__footer a{
  color:#7c8fff;
  transition:color 0.3s;
}

.drawer__footer a:hover{
  color:#00d2ff;
  text-decoration:underline;
}

@keyframes slideInRight{
  to{
    transform:translateX(0);
    opacity:1;
  }
}

main{
  position:relative;
  z-index:1;
}

section{
  padding:clamp(2rem,5vw,3rem) 0;
  scroll-margin-top: calc(var(--header-fixed) + 10px);
}

.hero-band{
  margin-top:calc(var(--header-fixed) * -1);
  padding-top:var(--header-fixed);
}

.hero-band{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero-band__image{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  object-fit:cover;
  object-position:center center;
  z-index:-1;
  transform:scale(1.03);
  pointer-events:none;
  user-select:none;
}

.hero-band__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,9,15,.78) 0%, rgba(7,9,15,.72) 40%, rgba(7,9,15,.84) 100%);
  z-index:1;
}

.hero-band__grid{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.20;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center, black 42%, transparent 100%);
}

.hero-band__glow{
  position:absolute;
  border-radius:999px;
  filter:blur(56px);
  z-index:1;
}

.hero-band__glow--1,
.hero-band__glow--2{
  display:none;
}

.hero{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:clamp(7rem, 10vw, 9rem);
  padding-bottom:clamp(3rem, 7vw, 5rem);
}

.hero__content{
  max-width:900px;
  width:100%;
}

.hero__content--centered{
  text-align:center;
  margin-inline:auto;
}

.hero-badges{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-bottom:1.2rem;
  justify-content:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  padding:.52rem .85rem;
  border-radius:999px;
  font-size:.88rem;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}

.highlight{
  background:linear-gradient(120deg,rgba(196,184,255,.96),rgba(117,222,255,.92));
  -webkit-background-clip:text;
  color:transparent;
}

h1{
  font-size:clamp(2rem,4vw,3.55rem);
  line-height:1.06;
  margin:.4rem auto 1rem;
  letter-spacing:-0.03em;
  max-width:18ch;
}

.lead{
  font-size:clamp(1rem,1.2vw,1.1rem);
  color:#d0d5dd;
  max-width:68ch;
  margin-left:auto;
  margin-right:auto;
}

.cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
}

.hero-cta--centered{
  justify-content:center;
}

.btn{
  align-items:center;
  background-image:linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);
  border:0;
  border-radius:var(--radius-btn);
  box-shadow:rgba(151,65,252,0.2) 0 15px 30px -5px;
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:600;
  justify-content:center;
  line-height:1em;
  padding:3px;
  cursor:pointer;
  transition:all 0.3s;
  min-width:150px;
}

.btn span{
  background-color:rgb(5,6,45);
  padding:14px 20px;
  border-radius:calc(var(--radius-btn) - 2px);
  width:100%;
  transition:300ms;
}

.btn:hover{transform:scale(1.05)}
.btn:hover span{background:none}
.btn:active{transform:scale(0.96)}
.btn:focus-visible{
  outline:2px solid rgba(124,92,255,.9);
  outline-offset:3px;
}

.btn-secondary{
  background-image:linear-gradient(144deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}

.btn-secondary span{
  background:rgba(12,14,28,.9);
}

.btn-project{margin-top:.8rem}

.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1.6rem;
}

.stats--centered{
  max-width:900px;
  margin:1.6rem auto 0;
}

.stat{
  padding:1rem;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
  box-shadow:0 14px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}

.stat dt{
  font-size:.85rem;
  color:#c1c6cf;
  margin-bottom:.15rem;
}

.stat dd{
  margin:0;
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
}

/* STACK */
.page-content{
  position:relative;
  z-index:3;
  background:
    linear-gradient(180deg, rgba(11,12,16,.96) 0%, rgba(13,15,22,.985) 35%, rgba(11,12,16,1) 100%);
  border-top:1px solid rgba(255,255,255,.06);
  overflow:visible;
  padding:1.25rem 0 10vh;
}

.page-content > .container{
  position:relative;
}

.page-content .section-shell{
  position:sticky;
  top:calc(var(--stack-top) + var(--stack-offset, 0px));
  min-height:var(--stack-min-h);
  padding:1rem;
  margin-bottom:clamp(3rem, 10vh, 6rem);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(18,22,34,.90), rgba(11,12,16,.97));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  isolation:isolate;
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.page-content .section-shell:nth-of-type(1){ --stack-offset: calc(var(--stack-step) * 0); z-index:1; }
.page-content .section-shell:nth-of-type(2){ --stack-offset: calc(var(--stack-step) * 1); z-index:2; }
.page-content .section-shell:nth-of-type(3){ --stack-offset: calc(var(--stack-step) * 2); z-index:3; }
.page-content .section-shell:nth-of-type(4){ --stack-offset: calc(var(--stack-step) * 3); z-index:4; }
.page-content .section-shell:nth-of-type(5){ --stack-offset: calc(var(--stack-step) * 4); z-index:5; }
.page-content .section-shell:nth-of-type(6){ --stack-offset: calc(var(--stack-step) * 5); z-index:6; }

.page-content .section-shell#o-mnie{
  min-height:clamp(300px, 42vh, 420px);
}

.page-content .section-shell#przewagi{
  min-height:clamp(400px, 54vh, 540px);
}

.page-content .section-shell#oferta{
  min-height:clamp(360px, 50vh, 500px);
}

.page-content .section-shell#projekty{
  min-height:clamp(420px, 62vh, 680px);
}

.page-content .section-shell#doswiadczenie{
  min-height:clamp(420px, 62vh, 640px);
}

.page-content .section-shell#kontakt{
  min-height:clamp(460px, 66vh, 760px);
  margin-bottom:0;
}

.page-content .section-shell::before{
  content:none;
}

.page-content .section-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events:none;
  z-index:0;
}

.page-content .section-shell > *{
  position:relative;
  z-index:1;
}

.page-content .section-shell h2{
  margin-top:0;
}

.page-content .section-shell .surface{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
}

section h2{
  font-size:clamp(1.35rem,2.6vw,2rem);
  margin:.4rem 0 1rem;
}

.surface{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
}

.card{
  border-radius:18px;
  padding:1rem;
}

.grid-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.grid-cards--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#projekty .grid-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

.offer{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:1rem;
}

.offer-card{
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  padding:1rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.offer-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.offer-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.offer-icon .material-symbols-outlined{
  font-size:28px;
  color:#fff;
}

.offer-content h3{
  margin:.1rem 0 .35rem;
  font-size:1.05rem;
}

.offer-content p{
  margin:0;
  color:var(--muted);
}

.offer-item--a{grid-column:span 6}
.offer-item--b{grid-column:span 6}
.offer-item--c{grid-column:1 / -1}

.project{
  display:flex;
  flex-direction:column;
  height:100%;
}

.project-preview{
  border-radius:18px;
  overflow:hidden;
  border:var(--outline);
  background:rgba(255,255,255,.03);
  height:180px;
  margin-bottom:.8rem;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.project-preview:hover img{
  transform:scale(1.04);
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.2rem 0 .8rem;
}

.project-tags span{
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.8rem;
  color:#d9dbdf;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.carousel{display:none}

.carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:.5rem;
}

.carousel-track::-webkit-scrollbar{height:6px}
.carousel-track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:6px;
}

.carousel-slide{
  min-width:85%;
  scroll-snap-align:center;
}

.carousel-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:.6rem;
}

.carousel-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  border:none;
}

.carousel-dot[aria-current="true"]{
  background:#fff;
  width:18px;
  transition:width .2s ease;
}

.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}

.contact .panel{
  padding:1.15rem;
  border-radius:var(--radius-btn);
}

.contact-list{
  display:grid;
  gap:.7rem;
  margin:0 0 1rem;
}

.contact-list__item{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  color:var(--muted);
  padding:.75rem .85rem;
  border-radius:var(--radius-btn);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.contact-list__item .material-symbols-outlined{
  font-size:20px;
  color:#d7d7ff;
}

.contact-panel--info{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-panel__eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.38rem .7rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#d7d7ff;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.28);
}

.contact-panel__top h3{
  margin:.35rem 0 .5rem;
}

.contact-panel__intro{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.contact-info-list{
  display:grid;
  gap:.8rem;
}

.contact-info-card{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem;
  border-radius:var(--radius-btn);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(124,92,255,.20);
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.contact-info-card:hover{
  transform:translateY(-2px);
  border-color:rgba(124,92,255,.55);
  background:rgba(124,92,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.contact-info-card .material-symbols-outlined{
  font-size:22px;
  color:#cfc4ff;
  margin-top:.12rem;
}

.contact-info-card div{
  display:flex;
  flex-direction:column;
  gap:.12rem;
}

.contact-info-card strong{
  font-size:.95rem;
  color:#fff;
}

.contact-info-card span:last-child{
  color:#c8ccd4;
  word-break:break-word;
}

.contact-meta{
  display:grid;
  gap:.8rem;
}

.contact-meta__item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.95rem 1rem;
  border-radius:var(--radius-btn);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
}

.contact-meta__item .material-symbols-outlined{
  font-size:20px;
  color:#b8c7ff;
  margin-top:.12rem;
}

.contact-meta__item strong{
  display:block;
  margin-bottom:.18rem;
  color:#fff;
  font-size:.94rem;
}

.contact-meta__item p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}

.contact-note{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem;
  border-radius:var(--radius-btn);
  background:linear-gradient(180deg, rgba(124,92,255,.10), rgba(0,210,255,.06));
  border:1px solid rgba(124,92,255,.30);
}

.contact-note .material-symbols-outlined{
  font-size:20px;
  color:#d8cdff;
  margin-top:.12rem;
}

.contact-note p{
  margin:0;
  color:#d7dbe3;
  line-height:1.65;
}

input,textarea{
  width:100%;
  margin:.4rem 0;
  padding:.95rem 1rem;
  border-radius:var(--radius-btn);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-family:inherit;
}

input:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(124,92,255,.8);
  outline-offset:2px;
}

#form-status{
  margin-top:.8rem;
  font-weight:500;
  min-height:1.2rem;
  border-radius:var(--radius-btn);
}

.fade-out{
  opacity:0;
  transition:opacity .5s ease;
}

.fade-in{
  opacity:0;
  animation:fadeIn .6s forwards;
}

@keyframes fadeIn{
  to{opacity:1}
}

.dotnav{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:calc(var(--z-drawer) + 2);
  padding:8px;
  border-radius:999px;
  background:rgba(10,12,20,.40);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}

.dotnav-visible .dotnav{
  opacity:1;
  pointer-events:auto;
}

.dotnav__dot{
  --p:#7c5cff;
  --c:#00d2ff;
  width:13px;
  height:13px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  appearance:none;
  background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.35) 0%, rgba(0,210,255,.30) 60%, rgba(0,0,0,0) 75%);
  box-shadow:
    0 0 8px rgba(124,92,255,.35),
    0 0 12px rgba(0,210,255,.28);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
  transform:scale(1);
  filter:saturate(120%);
}

.dotnav__dot:hover{
  transform:scale(1.22);
  box-shadow:
    0 0 10px rgba(124,92,255,.55),
    0 0 16px rgba(0,210,255,.45),
    0 0 26px rgba(124,92,255,.35);
  filter:saturate(140%) brightness(1.05);
}

.dotnav__dot.is-active,
.dotnav__dot[aria-current="true"]{
  background: radial-gradient(circle at 50% 50%, var(--p) 0%, var(--c) 60%, rgba(0,0,0,0) 78%);
  box-shadow:
    0 0 12px var(--p),
    0 0 22px var(--c),
    0 0 36px var(--p),
    0 0 46px var(--c);
  transform:scale(1.36);
  filter:saturate(160%) brightness(1.08);
}

.dotnav__dot:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:3px;
}

.footer{
  position:relative;
  z-index:20;
  background:#0b0c10;
  padding:1.25rem 0 2rem;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
  border-top:var(--outline);
  margin-top:0;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:center;
}

.footer-social{
  display:flex;
  gap:.8rem;
}

.footer-social a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  transition:.25s ease;
}

.footer-social a svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.footer-social a:hover{
  color:#fff;
  border-color:rgba(124,92,255,.7);
  box-shadow:0 0 10px rgba(124,92,255,.55),0 0 16px rgba(0,210,255,.45),0 0 26px rgba(124,92,255,.35);
  transform:translateY(-4px) scale(1.12);
}

.footer-social a:focus-visible{
  outline:2px solid rgba(124,92,255,.85);
  outline-offset:3px;
}

@media(max-width:1200px){
  #projekty .grid-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:1100px){
  .grid-cards--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  :root{
    --stack-top: calc(var(--header-fixed) + 10px);
    --stack-step: 8px;
    --stack-min-h: clamp(280px, 48svh, 460px);
  }

  html, body{
    overscroll-behavior-y: none;
    background:#0b0c10;
  }

  .menu{display:none !important}

  .nav{
    justify-content:center;
  }

  .brand{
    margin-inline:auto;
    justify-content:center;
  }

  h1{
    max-width:none;
    font-size:clamp(1.95rem,9vw,2.5rem);
  }

  .lead{
    max-width:100%;
  }

  .cta .btn{min-width:100%}
  .stats{grid-template-columns:1fr 1fr 1fr}

  #projekty .grid-cards{display:none}
  #projekty .carousel{display:block}
  #przewagi .grid-cards{display:grid;grid-template-columns:1fr}

  .offer{grid-template-columns:repeat(6,minmax(0,1fr))}
  .offer-item--a,.offer-item--b{grid-column:span 6}
  .offer-item--c{grid-column:1 / -1}
  .contact{grid-template-columns:1fr}
  .logo-img{height:48px}

  .dotnav{ display:none !important; }

  .page-content{
    padding:1rem 0 1.25rem;
    overflow:visible;
  }

  .page-content .section-shell{
    position:sticky;
    top:calc(var(--stack-top) + var(--stack-offset, 0px));
    min-height:max(var(--mobile-shell-h, 0px), max-content);
    margin-bottom:1.05rem;
    padding:.88rem;
    border-radius:18px;
    overflow:hidden;
    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
  }

  .page-content .section-shell#o-mnie,
  .page-content .section-shell#przewagi,
  .page-content .section-shell#oferta,
  .page-content .section-shell#projekty,
  .page-content .section-shell#doswiadczenie,
  .page-content .section-shell#kontakt{
    min-height:max(var(--mobile-shell-h, 0px), max-content);
  }

  .page-content .section-shell#kontakt{
    margin-bottom:0;
  }

  .hero-band__image{
    position:absolute;
    height:100%;
  }

  section h2{
    margin:.2rem 0 .8rem;
    font-size:clamp(1.18rem, 4.8vw, 1.6rem);
  }

  .card,
  .offer-card,
  .contact .panel{
    padding:.85rem;
  }

  .project-preview{
    height:150px;
    margin-bottom:.65rem;
  }

  .project-tags{
    gap:.42rem;
    margin:.16rem 0 .68rem;
  }

  .project-tags span{
    font-size:.76rem;
    padding:.3rem .58rem;
  }

  .offer-card{ gap:.78rem; }

  .offer-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:12px;
  }

  .offer-icon .material-symbols-outlined{ font-size:24px; }

  .offer-content h3,
  .project h3,
  .contact h3{ font-size:1rem; }

  .contact-list__item,
  .contact-info-card,
  .contact-meta__item,
  .contact-note{ padding:.82rem; }

  input,textarea{ padding:.82rem .9rem; }

  .footer{ padding:1rem 0 1.75rem; }
}

@media(max-width:600px){
  :root{
    --stack-top: calc(var(--header-fixed) + 8px);
    --stack-step: 6px;
    --stack-min-h: clamp(260px, 44svh, 380px);
  }

  .hero-band__image{ object-position:center top; }
  .hero-band{ margin-top:calc(var(--header-fixed) * -1); padding-top:var(--header-fixed); }
  .hero{ padding-top:calc(var(--header-fixed) + 1.5rem); min-height:auto; padding-bottom:2.5rem; }

  .stats{grid-template-columns:1fr 1fr}
  .stat dd{font-size:1.12rem}
  .carousel-slide{min-width:92%}
  .hero-badges{gap:.45rem}
  .hero-badge{ font-size:.8rem; padding:.42rem .66rem; }
  .stats--centered{ max-width:none; }
  .contact-panel--info{ gap:.9rem; }

  .page-content .section-shell{
    padding:.8rem;
    margin-bottom:.92rem;
    border-radius:16px;
  }

  .page-content .section-shell#przewagi,
  .page-content .section-shell#doswiadczenie{
    margin-bottom:1.05rem;
  }

  .project-preview{ height:138px; }

  .contact-info-card,
  .contact-meta__item,
  .contact-note{ padding:.78rem; }
}

@media(max-width:420px){
  :root{
    --stack-top: calc(var(--header-fixed) + 6px);
    --stack-step: 5px;
    --stack-min-h: clamp(240px, 42svh, 340px);
  }

  .page-content .section-shell{
    padding:.74rem;
    margin-bottom:.82rem;
  }

  .page-content .section-shell#przewagi,
  .page-content .section-shell#doswiadczenie{
    margin-bottom:1rem;
  }

  .project-preview{ height:128px; }
  .dotnav{ right:8px; gap:10px; }
}

@media(min-width:900px){
  .dotnav{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto;
  }

  .hero-band__image{
    transform:none;
  }
}

#kontakt .panel.surface{
  border:1px solid rgba(124,92,255,.45);
}

#kontakt .panel.surface:hover{
  border-color:rgba(124,92,255,.7);
}

@media(max-width:900px){
  .page-content .section-shell#przewagi,
  .page-content .section-shell#doswiadczenie{
    min-height:max-content !important;
    padding:.72rem;
  }

  #przewagi h2,
  #doswiadczenie h2{
    margin:.05rem 0 .55rem;
    font-size:clamp(1.05rem, 4.4vw, 1.28rem);
    line-height:1.2;
  }

  #przewagi .grid-cards{
    gap:.62rem;
  }

  #przewagi .card,
  #doswiadczenie .card{
    padding:.72rem;
    border-radius:14px;
  }

  #przewagi .card h3,
  #doswiadczenie dt{
    font-size:.95rem;
    line-height:1.2;
    margin:0 0 .22rem;
  }

  #przewagi .card p,
  #doswiadczenie dd{
    font-size:.84rem;
    line-height:1.42;
  }

  #doswiadczenie .text-narrow{
    max-width:none;
  }

  #doswiadczenie .text-narrow > div{
    margin-bottom:.62rem !important;
  }
}

@media(max-width:420px){
  .page-content .section-shell#przewagi,
  .page-content .section-shell#doswiadczenie{
    padding:.64rem;
  }

  #przewagi h2,
  #doswiadczenie h2{
    font-size:1rem;
    margin-bottom:.5rem;
  }

  #przewagi .card,
  #doswiadczenie .card{
    padding:.64rem;
  }

  #przewagi .card h3,
  #doswiadczenie dt{
    font-size:.9rem;
  }

  #przewagi .card p,
  #doswiadczenie dd{
    font-size:.8rem;
    line-height:1.38;
  }
}


/* Temporary unstack during menu navigation */
html.nav-jump-mode,
body.nav-jump-mode{
  scroll-behavior:auto !important;
}

.nav-jump-mode .page-content .section-shell{
  position:relative !important;
  top:auto !important;
}


/* Temporary unstack during menu navigation */
html.nav-jump-mode,
body.nav-jump-mode{
  scroll-behavior:auto !important;
}

.nav-jump-mode .page-content{
  overflow:visible !important;
}

.nav-jump-mode .page-content .section-shell{
  position:relative !important;
  top:auto !important;
}