:root{
  --color-bg:#0f1420; --color-surface:#141c28; --color-text:#e6edf6; --color-text-dim:#9aa7b5; --color-border:#263243;
  --color-accent:#00aaff; --color-accent-2:#1e90ff;
  --glass:saturate(120%) blur(10px); --header-h:70px; --slider-h:320px;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{ --color-bg:#f6f9fc; --color-surface:#eef2f6; --color-text:#0f1720; --color-text-dim:#4a5a68; --color-border:#d6dee7; }

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);line-height:1.6}
a{color:var(--color-accent);text-decoration:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
section{padding:6rem 2rem}

/* CTAs */
.cta-button{display:inline-flex;align-items:center;gap:.6rem;background:var(--color-accent);color:#061018;padding:.85rem 1.2rem;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;transition:transform .2s,box-shadow .2s}
.cta-ghost{background:transparent;border:1px solid color-mix(in oklab,var(--color-accent) 35%,var(--color-border));color:var(--color-text)}
.cta-button:hover,.cta-button:focus-visible{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in oklab,var(--color-accent) 45%,transparent)}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:2000;background:var(--color-accent);color:#061018;padding:.5rem 1rem;border-radius:0 0 8px 8px}
.skip-link:focus-visible{left:1rem;top:1rem;width:auto;height:auto}

/* Background deco */
.aura-layer{position:fixed;inset:0;z-index:-1;pointer-events:none}
.aura{position:absolute;border-radius:999px;filter:blur(80px);opacity:.25}
.aura-1{width:420px;height:420px;top:5%;left:6%;background:radial-gradient(50% 50% at 50% 50%,#0aaaff 0%,transparent 70%)}
.aura-2{width:360px;height:360px;bottom:8%;right:6%;background:radial-gradient(50% 50% at 50% 50%,#7a3cff 0%,transparent 70%)}
.aura-3{width:280px;height:280px;top:35%;right:12%;background:radial-gradient(50% 50% at 50% 50%,#21d4fd 0%,transparent 70%)}
.grid-lines{position:absolute;inset:0;opacity:.06;background:linear-gradient(to right,var(--color-accent) 1px,transparent 1px) 0 0/120px 100%,linear-gradient(to bottom,var(--color-accent) 1px,transparent 1px) 0 0/100% 120px}

/* Header */
.main-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 .75rem 0 1rem;z-index:1000;background:linear-gradient(180deg,rgba(10,18,28,.65),rgba(10,18,28,.4));backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-bottom:1px solid color-mix(in oklab,var(--color-accent) 18%,transparent)}
.logo{display:flex;align-items:center;gap:.8rem;color:var(--color-text)}
.logo-symbol{width:40px;height:40px}
.logo-type{height:20px;width:auto}
.main-nav{display:flex;align-items:center;gap:.25rem}
.main-nav a[data-nav]{position:relative;color:var(--color-text);font-weight:600;padding:.55rem .9rem;border-radius:12px;transition:color .15s,background-color .15s,box-shadow .2s}
.main-nav a[data-nav]:hover{color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 10%,transparent)}
.main-nav a[data-nav].active{color:#fff;background:linear-gradient(90deg,rgba(23,24,36,.9),rgba(23,24,36,.9));border:1px solid color-mix(in oklab,var(--color-accent) 35%,var(--color-border));box-shadow:0 0 0 1px color-mix(in oklab,var(--color-accent) 25%,transparent) inset}
.main-nav a[data-nav].active::before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:14px;background:linear-gradient(90deg,rgba(123,63,255,.45),rgba(0,170,255,.45));filter:blur(12px)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.theme-toggle{height:40px;width:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--color-border);background:color-mix(in oklab,var(--color-surface) 90%,transparent);color:var(--color-text);cursor:pointer;transition:transform .15s,border-color .2s}
.theme-toggle:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--color-accent) 30%,var(--color-border));color:var(--color-accent)}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;margin-left:.25rem}
.burger-bar{width:28px;height:3px;background:var(--color-accent);border-radius:2px;display:block;transition:all .3s}
.burger.open .burger-bar:nth-child(1){transform:rotate(45deg) translateY(8px)}
.burger.open .burger-bar:nth-child(2){opacity:0}
.burger.open .burger-bar:nth-child(3){transform:rotate(-45deg) translateY(-8px)}
.mobile-nav{display:none;position:fixed;top:0;right:0;width:80vw;max-width:340px;height:100vh;background:var(--color-surface);z-index:1100;flex-direction:column;padding:calc(var(--header-h) + 1rem) 1.5rem 2rem;box-shadow:-2px 0 24px rgba(0,0,0,.4)}
.mobile-nav a{color:var(--color-text);font-size:1.1rem;margin:.75rem 0;display:block;padding:.6rem .4rem;border-radius:10px}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 10%,transparent)}
.mobile-nav.open{display:flex;animation:slideIn .25s ease both}
@keyframes slideIn{from{right:-100vw}to{right:0}}

/* Hero */
.hero-section{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;padding-top:var(--header-h);overflow:hidden}
.hero-content{position:relative;z-index:2;max-width:980px;padding:2rem}
.hero-kicker{letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-dim);font-size:.9rem;margin-bottom:.6rem}
.hero-title{font-weight:900;line-height:1.05;margin:0 0 .6rem;font-size:clamp(2.4rem,4.2vw + 1rem,4.6rem);color:#fff}
.hero-title span{display:inline-block;background:linear-gradient(90deg,#9ad9ff 0%,#6fc1ff 40%,#a08bff 75%,#7a3cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title-sep{display:inline-block;width:.6em;height:.12em;background:linear-gradient(90deg,#00aaff,#7a3cff);margin:0 .35em .22em}
.hero-sub{color:var(--color-text-dim);margin-bottom:1.2rem;font-size:1.1rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center}
.hero-background{position:absolute;inset:0;z-index:0;opacity:.28;background:radial-gradient(80% 60% at 50% 50%,transparent 0%,var(--color-bg) 80%),url('img/wizualizacje_osiedla_mount_avenue_irlandia/renders/wizualizacja_osiedla_mount_avenue_-_ujecie_wieczorne.jpg') center/cover no-repeat}
/* Optional hero logo */
.hero-logo-wrap{display:flex;justify-content:center;margin-bottom:1rem}
.hero-logo{width:min(22vw,180px);height:auto;opacity:.9;filter:drop-shadow(0 8px 30px rgba(0,170,255,.25));animation:logoFloat 6s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
@media (prefers-reduced-motion:reduce){.hero-logo{animation:none}}

/* Trusted-by */
.trusted-by-section{background:var(--color-surface)}
.logos-container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem 3rem;margin-top:1.5rem}
/* Portfolio controls */
.portfolio-section{padding-top:8rem;overflow-x:hidden}
.portfolio-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem}
.category-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.category-filters button{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim);padding:.5rem .9rem;cursor:pointer;border-radius:999px;transition:all .15s;font-weight:700}
.category-filters button:hover,.category-filters button:focus-visible{color:var(--color-accent);border-color:color-mix(in oklab,var(--color-accent) 40%,var(--color-border));background:color-mix(in oklab,var(--color-accent) 10%,transparent)}
.category-filters button.active{background:linear-gradient(90deg,color-mix(in oklab,var(--color-accent) 35%,transparent),transparent);border-color:var(--color-accent-2);color:#e9f6ff;box-shadow:0 0 0 2px color-mix(in oklab,var(--color-accent-2) 25%,transparent) inset}
.category-filters .filter-count{font-size:.9em;color:var(--color-accent-2);margin-left:.5em}
.view-switchers button{background:none;border:1px solid var(--color-border);font-size:1.1rem;color:var(--color-text-dim);cursor:pointer;margin-left:.5rem;padding:.5rem .65rem;border-radius:10px;transition:color .15s,border-color .15s,background .15s}
.view-switchers button:hover,.view-switchers button:focus-visible{color:var(--color-accent);border-color:color-mix(in oklab,var(--color-accent) 40%,var(--color-border))}
.view-switchers button.active{color:#0b1420;background:var(--color-accent-2);border-color:var(--color-accent-2)}

/* Portfolio container */
.portfolio-container{width:100%;min-height:200px}

/* Corner accents overlay */
.project-item,.list-item-renders,.about-photo-wrap{position:relative;background:#000}
.project-item::before,.list-item-renders::before,.about-photo-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .18s ease;
  background:
    linear-gradient(var(--color-accent),var(--color-accent)) top left/28px 2px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) top left/2px 28px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) top right/28px 2px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) top right/2px 28px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) bottom left/28px 2px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) bottom left/2px 28px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) bottom right/28px 2px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) bottom right/2px 28px no-repeat;
  filter:drop-shadow(0 0 6px rgba(0,170,255,.35));
}
.project-item:hover::before,.project-item:focus-visible::before,
.list-item-renders:hover::before,.list-item-renders:focus-visible::before,
.about-photo-wrap:hover::before{opacity:1}

/* Marquee (pixel-perfect loop; media only here + list) */
@keyframes scrollPx{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--loop-px)*-1),0,0)}}
.category-slider-wrapper{margin-bottom:2.5rem;position:relative}
.strip-header{text-align:left;margin-bottom:1rem}
.strip-header h4{color:var(--color-text-dim);font-weight:800;letter-spacing:.03em}
.marquee-container{width:100%;overflow:hidden}
.marquee-track{display:flex;flex-wrap:nowrap;will-change:transform;animation-name:scrollPx;animation-timing-function:linear;animation-iteration-count:infinite}
.project-item.marquee-slide{height:var(--slider-h);position:relative;cursor:pointer;overflow:hidden;background:#000;flex:0 0 auto;padding:0 10px;border:1px solid #000;border-radius:0}

/* Media visibility only for sliders and list (grid unaffected) */
.marquee-slide img,.marquee-slide video,.list-item-renders img,.list-item-renders video{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;z-index:1;transition:opacity .5s ease;
}
.marquee-slide .active-render,.list-item-renders .active-render{opacity:1;visibility:visible;z-index:2}
/* hard guard */
.marquee-slide img:not(.active-render),.marquee-slide video:not(.active-render),
.list-item-renders img:not(.active-render),.list-item-renders video:not(.active-render){visibility:hidden!important}

.marquee-slide .slide-overlay{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));color:#fff;padding:2.25rem 1rem 1rem;z-index:3;opacity:0;transition:opacity .25s}
.marquee-slide:hover .slide-overlay,.marquee-slide:focus-visible .slide-overlay{opacity:1}
@media (max-width:768px){.marquee-slide .slide-overlay{opacity:0}.marquee-slide.centered .slide-overlay{opacity:1}}

/* List */
.portfolio-list-view .project-item-list{display:flex;gap:1.2rem;margin-bottom:1.2rem;border:1px solid var(--color-border);padding:1rem;cursor:pointer;transition:background-color .15s,border-color .15s;border-radius:0;background:color-mix(in oklab,var(--color-surface) 85%,transparent)}
.portfolio-list-view .project-item-list:hover,.portfolio-list-view .project-item-list:focus-visible{background:var(--color-surface);border-color:color-mix(in oklab,var(--color-accent) 25%,var(--color-border))}
.list-item-renders{width:320px;height:180px;border-radius:0;overflow:hidden}
.list-item-info h3{margin-bottom:.35rem;font-weight:800;color: var(--color-accent)}
.list-item-info p{color:var(--color-text-dim)}

/* Grid (4 columns) */
.portfolio-grid-view{column-count:4;column-gap:1rem}
@media (max-width:1100px){.portfolio-grid-view{column-count:2}}
@media (max-width:700px){.portfolio-grid-view{column-count:1}}
.project-item-grid{display:inline-block;width:100%;margin:0 0 1rem;break-inside:avoid;position:relative;cursor:pointer;background:#000;border:1px solid #000;border-radius:0;overflow:hidden}
.project-item-grid img,.project-item-grid video{width:100%;height:auto;display:block;object-fit:cover;transition:transform .35s;z-index:1;position:relative}
.project-item-grid:hover img,.project-item-grid:hover video,.project-item-grid:focus-visible img,.project-item-grid:focus-visible video{transform:scale(1.03)}
.project-item-grid .slide-overlay{display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;text-align:left;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);opacity:0;position:absolute;inset:0;transition:opacity .25s;z-index:3}
.project-item-grid:hover .slide-overlay,.project-item-grid:focus-visible .slide-overlay{opacity:1}

/* Loader */
.global-loader{position:fixed;inset:0;background:rgba(6,16,24,.65);display:flex;align-items:center;justify-content:center;z-index:1200}
.global-loader[hidden]{display:none}
.loader{border:4px solid #222;border-top:4px solid var(--color-accent);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1150;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal-overlay.visible{opacity:1;visibility:visible}
.modal-content{background:var(--color-bg);width:92%;height:90%;max-width:1400px;position:relative;transform:scale(.98);transition:transform .25s;border:1px solid var(--color-border)}
.modal-overlay.visible .modal-content{transform:scale(1)}
.modal-close-button{position:absolute;top:.8rem;right:1rem;background:none;border:1px solid var(--color-border);color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;z-index:10;height:42px;width:42px;display:grid;place-items:center}
.modal-close-button:hover{border-color:color-mix(in oklab,var(--color-accent) 30%,var(--color-border));color:var(--color-accent)}
@media (max-width:768px){.modal-close-button{top:max(.75rem, env(safe-area-inset-top));right:max(.75rem, env(safe-area-inset-right));}}
.modal-body{display:flex;width:100%;height:100%;padding:2.5rem;gap:1.5rem}
.modal-main-render{flex:0 0 65%;height:calc(100% - 100px);margin-bottom:1rem;position:relative;overflow:hidden;background:#000}
#modal-main-image,#modal-main-video,#modal-main-render iframe{width:100%;height:100%;object-fit:contain;border:none;display:block}
#modal-thumbnails{width:65%;height:90px;position:absolute;bottom:2.5rem;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;scrollbar-color:var(--color-accent) var(--color-surface)}
#modal-thumbnails::-webkit-scrollbar{height:8px}
#modal-thumbnails::-webkit-scrollbar-thumb{background:var(--color-accent)}
.modal-thumbnail-item{height:70px;width:auto;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .2s;background:var(--color-surface);color:var(--color-text);font-size:1.4rem;flex-shrink:0}
.modal-thumbnail-item:hover{transform:translateY(-1px)}
.modal-thumbnail-item img{height:100%;width:auto;display:block;object-fit:cover}
.modal-thumbnail-item.active,.modal-thumbnail-item:focus-visible{border-color:var(--color-accent)}
.modal-details{flex:0 0 35%;padding-left:.5rem;overflow-y:auto}
#modal-title{font-size:2rem;color:var(--color-accent);margin:0 0 .5rem;font-weight:800}
#modal-client{font-size:1.05rem;color:var(--color-text-dim);margin:0 0 1.25rem}
#modal-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tag{background:var(--color-surface);padding:.3rem .7rem;border:1px solid var(--color-border);font-size:.8rem;color:var(--color-text-dim)}

/* About + timeline */
.about-card{display:grid;grid-template-columns:320px 1fr;gap:2rem;max-width:1400px;margin:0 auto}
.about-aside{background:var(--color-surface);border:1px solid var(--color-border);padding:1.25rem;text-align:center}
.about-photo-wrap{display:block;width:100%;max-width:260px;height:320px;margin:0 auto}
.about-photo{width:100%;height:100%;object-fit:cover;border:none;border-radius:0}
.about-name{margin:.75rem 0 .25rem;font-weight:800}
.about-title{margin:0 0 .75rem;color:var(--color-text-dim)}
.about-contact{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.4rem}
.about-contact a{color:inherit}
.about-edu{margin:.5rem 0 1rem;color:var(--color-text-dim);font-size:.95rem}
.about-skills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.about-skills span{background:var(--color-surface);border:1px solid var(--color-border);padding:.35rem .7rem;border-radius:999px;font-size:.85rem;color:var(--color-text-dim)}
.about-main{display:flex;flex-direction:column;align-self:center}
.qual-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-top:1rem}
.qual-title{font-weight:800;margin-bottom:.75rem}
.timeline{position:relative}
.timeline .timeline-item{position:relative;margin:0 0 1.25rem 2rem}
.timeline .timeline-item:last-child{margin-bottom:0}
.timeline .timeline-item::before{content:"";position:absolute;left:-1.05rem;top:0;bottom:0;width:2px;background:linear-gradient(#1e90ff,#00aaff)}
.circle-dot{position:absolute;left:-1.35rem;top:.2rem;width:12px;height:12px;border-radius:50%;background:#00aaff;box-shadow:0 0 0 4px rgba(0,170,255,.18)}
.timeline-title{margin:0 0 .15rem}
.timeline-text{margin:.1rem 0 .35rem;color:var(--color-text-dim)}
.timeline-date{display:flex;align-items:center;gap:.4rem;color:var(--color-accent-2);font-size:.95rem}

/* Services */
.services-section{background:var(--color-surface)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:1200px;margin:0 auto}
.service-card{background:var(--color-bg);padding:1.6rem;text-align:center;border:1px solid var(--color-border);transition:border-color .15s,transform .15s}
.service-card:hover,.service-card:focus-within{transform:translateY(-3px);border-color:color-mix(in oklab,var(--color-accent) 30%,var(--color-border))}
.service-icon{font-size:2rem;margin-bottom:.75rem;color:var(--color-accent)}

/* Contact & Footer */
.contact-section{text-align:center;background:var(--color-surface)}
.contact-section p{max-width:680px;margin:0 auto;color:var(--color-text-dim)}
.contact-section .cta-button{margin-top:1rem}
.contact-details{margin-top:1rem;font-size:1.1rem}
.contact-link{color:var(--color-text)}
.contact-link:hover{color:var(--color-accent)}
/* one-line links with vertical separators (no HTML change) */
.contact-grid{display:flex !important;flex-wrap:nowrap;justify-content:center;gap:.75rem;overflow-x:auto;padding-bottom:.25rem}
.contact-link{display:inline-flex;align-items:center;gap:.4rem;padding-inline:.75rem;position:relative;white-space:nowrap}
.contact-link:first-child{padding-left:0}
.contact-link + .contact-link::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:1.2em;background:var(--color-border)}
/* scrollbar cosmetic */
.contact-grid::-webkit-scrollbar{height:6px}
.contact-grid::-webkit-scrollbar-thumb{background:var(--color-border)}

.main-footer-bottom{text-align:center;padding:1.25rem;font-size:.95rem;color:var(--color-text-dim);border-top:1px solid var(--color-border)}

/* Responsive */
@media (max-width:1024px){
  .modal-body{flex-direction:column;padding:1.5rem;gap:1rem}
  .modal-main-render{flex-basis:auto;width:100%;height:50vh}
  #modal-thumbnails{position:static;width:100%;margin:1rem 0 0}
}
@media (max-width:900px){.about-card{grid-template-columns:1fr}.qual-grid{grid-template-columns:1fr}}
@media (max-width:768px){
  section{padding:4rem 1rem}
  .main-nav{display:none}
  .burger{display:flex}
  .category-slider-wrapper .strip-header{text-align:center}
  .portfolio-controls{flex-direction:column;align-items:stretch}
  .portfolio-list-view .project-item-list{flex-direction:column}
  .list-item-renders{width:100%;height:180px}
  .modal-content{width:100vw;height:100vh;max-width:none}
}
@media (max-width:480px){
  .modal-content{width:100vw;height:100vh}
  .modal-main-render{height:40vh}
  #modal-thumbnails{height:60px}
  .modal-thumbnail-item{height:50px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .cta-button,.service-card,.project-item-grid img,.project-item-grid video{transition:none!important}
  .marquee-track{animation:none!important}
}


/* Paragrafy w kontakcie – do lewej, ale blok zostaje na środku */
.contact-section p {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

/* Lista kontaktów: jeden pod drugim, ikona w stałej kolumnie */
.contact-grid{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  margin:0 auto;
  padding:0;
  overflow:visible;
  max-width: 680px; /* opcjonalnie, żeby trzymać szerokość osi */
}

.contact-link{
  display:grid;
  grid-template-columns: 36px auto; /* kolumna na ikonę */
  align-items:center;
  column-gap:.6rem;
  padding:.25rem 0;
  white-space:normal;
}

.contact-link i{
  font-size:1.5rem;              /* większe ikony */
  width:36px; height:1.5rem;
  display:inline-grid; place-items:center;
  color:var(--color-accent);
}

/* upewnij się, że nie ma separatorów z poprzedniej wersji */
.contact-link + .contact-link::before{ content:none !important; }

/* Sekcyjne nagłówki na środku (desktop) */
.services-section > h2,
.about-section > h2,
.contact-section > h2,
.trusted-by-section > h4 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px){
  .services-section > h2,
  .about-section > h2,
  .contact-section > h2,
  .trusted-by-section > h4 {
    max-width: 1100px;
  }
}

/* LOGOTYPY: szare tło kafelka, bez zmiany samych logotypów */
:root[data-theme="dark"]  { --logo-tile-bg: #566071; }
:root[data-theme="light"] { --logo-tile-bg: #b3bdce; }

.logos-container { gap: 1.2rem 1.4rem; }

.logos-container img{
  display:block;
  max-height: 64px;          /* odrobinkę większe */
  max-width: 164px; 
  width:auto;
  padding: 10px 14px;        /* margines wewnętrzny kafelka */
  background: var(--logo-tile-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  object-fit: contain;
  filter: none !important;   /* nie zmieniamy logo */
  opacity: 1 !important;
  mix-blend-mode: normal;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.logos-container img:hover,
.logos-container img:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  outline: none;
}

@media (max-width: 480px){
  .logos-container img{ max-height: 52px; padding: 8px 10px; }
}


/* --- DODAJ NA KOŃCU PLIKU style.css --- */

/* Styl dla przycisku zmiany widoku, gdy jest "logicznie" wyłączony */
.view-switcher.is-disabled {
  opacity: 0.5;
  cursor: help; /* Kursor sugeruje, że kliknięcie ma specjalne działanie */
  /* Resetujemy style, żeby nie wyglądał jak aktywny po najechaniu */
  background: none !important;
  color: var(--color-text-dim) !important;
  border-color: var(--color-border) !important;
}

/* Animacja podświetlenia dla przycisków, na które chcemy zwrócić uwagę */
@keyframes highlight-flash {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    box-shadow: 0 0 12px color-mix(in oklab, var(--color-accent) 30%, transparent);
  
    box-shadow: 0 0 12px color-mix(in oklab, var(--color-accent) 30%, transparent);
  }
}

/* Klasa, którą będziemy dodawać dynamicznie w JS, aby uruchomić animację */
.highlight-once {
  animation: highlight-flash 1.9s ease-in-out;
}


/* --- POPRAWKI KONTRASTU DLA TRYBU JASNEGO --- */

/* 1. Definicja nowych zmiennych, które będą się zmieniać z motywem */
:root {
  --color-text-on-accent: #061018; /* Ciemny tekst na jasnym tle akcentu (np. przyciski) */
  --color-bg-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  --color-text-overlay: #fff; /* Domyślnie biały tekst na nakładce */
}

:root[data-theme="light"] {
  /* W trybie jasnym tekst na nakładce musi być ciemny */
  --color-text-overlay: var(--color-text); 
  /* Nakładka w trybie jasnym - lekko przezroczyste tło powierzchni */
  --color-bg-overlay: linear-gradient(to top, color-mix(in oklab, var(--color-surface) 92%, transparent), transparent);
}


/* 2. Zastosowanie nowych zmiennych w problematycznych miejscach */

/* Aktywny przycisk zmiany widoku (np. Siatka) */
.view-switchers button.active {
  color: var(--color-text-on-accent); /* Zawsze ciemny tekst na tle akcentu */
}

/* Aktywny filtr kategorii */
.category-filters button.active {
  color: var(--color-text); /* Użycie głównego koloru tekstu motywu zamiast stałego białego */
}

/* Nakładka z tytułem na kafelkach portfolio (w siatce i na pasach) */
.marquee-slide .slide-overlay,
.project-item-grid .slide-overlay {
  background: var(--color-bg-overlay);
  color: var(--color-text-overlay);
}

/* Tytuł na nakładce musi mieć odpowiedni kolor */
.slide-overlay h4, .slide-overlay-title {
  color: var(--color-text-overlay);
}

/* Dodatkowy opis na nakładce również */
.slide-overlay p {
   color: color-mix(in oklab, var(--color-text-overlay) 80%, transparent);
}

/* Aktywny link w nawigacji - jest zawsze ciemny, więc tekst musi być jasny */
.main-nav a[data-nav].active {
  color: #fff; /* Utrzymujemy biały, bo tło jest sztywne i ciemne */
}


/* --- KOMPLEKSOWE POPRAWKI SKALOWANIA I PRZEWIJANIA NA URZĄDZENIACH MOBILNYCH --- */

/* 1. Globalne zabezpieczenie ("Safety Net") */
/* Zapobiega poziomemu przewijaniu całej strony, ukrywając "wystające" elementy. */
body {
  overflow-x: hidden;
}

/* 2. KLUCZOWA POPRAWKA: Układ przycisków w sekcji HERO na mobile */
/* Na ekranach do 480px szerokości, przyciski układają się w kolumnę. */
@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column; /* Zmiana kierunku z rzędu na kolumnę */
    align-items: center;   /* Wyśrodkowanie przycisków w kolumnie */
    gap: 1rem;             /* Dostosowanie odstępu do układu pionowego */
  }
}

/* 3. Poprawka layoutu dla siatki kontaktów na mobile */
/* Na mniejszych ekranach kontakty również układają się w kolumnę. */
@media (max-width: 768px) {
  .contact-grid {
    flex-direction: column !important; 
    align-items: flex-start !important; 
    overflow-x: visible !important;
    justify-content: flex-start !important;
    gap: 0.75rem;
  }

  /* Ukrywamy pionowe separatory, które nie mają sensu w układzie kolumnowym */
  .contact-link + .contact-link::before {
    content: none !important;
  }
}

/* 4. Poprawka dla kontenera z logotypami na bardzo wąskich ekranach */
/* Zapewniamy, że logotypy będą się zawijać i nie spowodują przewijania */
@media (max-width: 480px) {
  .logos-container {
    justify-content: center;
    flex-wrap: wrap;
  }
}