:root{
  --page-bg: #f4f8fa;
  --hero-bg: #081c28;
  --surface: #ffffff;
  --tint: #eef5f7;
  --text: #0b2534;
  --muted: #6b8596;
  --accent: #18c4a1;
  --accent-2: #4ea8de;
  --border: rgba(10,35,49,.12);
  --hero-border: rgba(255,255,255,.18);
  --shadow: 0 10px 30px rgba(7,28,40,.08);
  --radius: 18px;
  --container: 1180px;
  --gap: 24px; 
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  overflow-x: clip; 
}
@supports not (overflow-x: clip){
  html, body { overflow-x: hidden; }
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.55;
}


img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
h1,h2,h3{line-height:1.1;margin:0 0 16px}
h1{font-size:clamp(32px,6vw,60px);font-weight:800}
h2{font-size:clamp(22px,3vw,32px);font-weight:800}
h3{font-size:18px;font-weight:700}
.lead{color:#d8e6ed;font-size:clamp(16px,2.2vw,20px)}
.muted{color:var(--muted)}
.center{text-align:center}

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(8,28,40,.6);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#e8f1f6}
.brand-text{letter-spacing:.5px}
.links{display:flex;gap:10px;align-items:center}
.links a{color:#e8f1f6;padding:10px 12px;border-radius:10px}
.links a:hover{background:rgba(255,255,255,.08)}
.site-header .nav { min-width: 0; flex-wrap: nowrap; }
.site-header .brand { flex: 0 0 auto; }
.site-header .links { 
  flex: 1 1 auto; 
  min-width: 0; 
  justify-content: center; 
  gap: 8px;
}
.site-header .links a { white-space: nowrap; }

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;
  border:1px solid var(--border);background:transparent;
  cursor:pointer;font-weight:600;
  transition:transform .06s ease,filter .2s ease,background .2s ease,border-color .2s;
  text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--accent);color:#06251d;border-color:transparent;
  box-shadow:0 8px 20px rgba(24,196,161,.25);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{color:#e8faf6;border-color:var(--hero-border)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

.hero{
  position:relative;color:#e8f1f6;background:var(--hero-bg);
  padding:96px 0 56px;isolation:isolate;
  overflow: hidden; 
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:0;
  inset: -12vw;
  background:
    radial-gradient(closest-corner at 85% 25%, rgba(78,168,222,.18), transparent 70%),
    radial-gradient(closest-corner at 20% 85%, rgba(24,196,161,.12), transparent 65%);
  background-repeat: no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: clamp(160px, 28vw, 360px);      
  height: auto;
  aspect-ratio: 1/1;
  background: url("/logo_skylink_biale_bez_tla.png") no-repeat center/contain;
  opacity: 0.9;          
  z-index: 1;           
  pointer-events: none; 
  max-width: 40vw; 
}
.hero-wrap{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center;
}
.hero-copy .actions{display:flex;gap:10px;margin:16px 0 6px}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:inline-block;padding:8px 12px;border-radius:999px;
  border:1px solid var(--hero-border);background:rgba(255,255,255,.08);color:#e8f1f6;
  font-weight:600;font-size:14px;
}
.chip:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);cursor:pointer}

.features{background:var(--page-bg)}
.features .feature-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  grid-column: 1;grid-area: features;
}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;
}
.features .card{background:var(--tint)}
.icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg, rgba(78,168,222,.25), rgba(24,196,161,.25));
  display:inline-block;margin-bottom:10px;
}
.features .container{
  display:grid;
  grid-template-columns: 2fr 1fr;   
  gap: var(--gap);
  align-items: start;
  grid-template-areas:
    "title    sidebar"
    "features sidebar"
    "news     news"; 
}
.features .container > h2{
  grid-area: title;          
  margin-top: 0;
}
.features .news-block { grid-area: news; }
.features .news{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  align-items:start; /*stretch;*/
}
.features .news .news-item{
  /* display: block; */
  /* flex-direction: column; */
  /* height: auto; */
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;                 
  padding:0;                      
}
.features .news .news-item .news-thumb{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}
.features .news .news-item > div{
  /* display: block;
  flex-direction: column;
  gap: .5rem;
  flex: 1;    */
  padding:12px 14px;
}
.features .news .news-item strong{ display:inline-block; margin-bottom:2px; }

.features .news .news-item p{
  color:var(--muted); margin:8px 0 0;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; 
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.sidebar{display:grid;gap:var(--gap);top:20px}
.sidebar h2{margin-top:0}
.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
}
.stats li{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;text-align:center;
}
.stats .big{display:block;font-weight:800;font-size:28px}
.news{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}
.news li{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;
}
.news.avatars{
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.news.avatars li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 10px;
}
.news .face{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(#e8f1f6,#cfe0ea);
  margin-bottom:8px;
}
.news .label{font-size:14px;color:var(--text)}
.news .news-item p{
  display: -webkit-box;
  -webkit-line-clamp: 3;  
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight{background:#f7fbfd}
.two{display:grid;grid-template-columns:1.6fr 1.4fr;gap:var(--gap)}
.project.card{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--gap);align-items:center}
.thumb{background:#1f3140;border-radius:12px;min-height:140px;overflow:hidden;}
.project-body p{color:var(--muted);margin:6px 0 14px}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.project .thumb{aspect-ratio:16/9;background:#0f2a37;border-radius:12px}
.proj p{color:var(--muted)}
.thumb img,
.section.highlight .thumb img,
.proj .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.person{display:flex;flex-direction:column;gap:10px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.person .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(#e8f1f6,#cfe0ea);overflow:hidden;}
.person .avatar img{
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}

.partners.two{align-items:center}

.logos{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap)}
.logo{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center; max-width: 300px; max-height: 300px;}
  
.join{align-self:start}
.join p{color:var(--muted);margin:8px 0 14px}

.footer{
  background:var(--hero-bg);color:#e8f1f6;padding:28px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.foot{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: center;
}
.foot-meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.foot-links{ display:none !important; }
.footer .brand{
  display:flex; align-items:center; gap:12px;
  flex-wrap:nowrap;
}
.footer .brand-text,
.footer .brand p{ white-space:nowrap; margin:0; }
.footer .brand .email{ font-weight:400; color:#cfe0ea; }
.footer .brand .email span{ color:#e8f1f6; font-weight:600; }
.footer .chip{background:rgba(255,255,255,.08);border:1px solid var(--hero-border)}

.section .btn.ghost{color:var(--text);border-color:var(--border)}
.section .btn.ghost:hover{background:#f1f6f8}
.section .chip{background:var(--tint);color:var(--text);border:1px solid var(--border)}

.features .sidebar{
  grid-area: sidebar;
  top: 20px;
}

.exp-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0 0 0 .25rem;
  text-decoration: underline;
  opacity: .8;
}

.exp-toggle:hover { opacity: 1; }

.exp-text { display: inline; }     
.exp-rest[hidden] { display: none; }  

.card.expanded p,
.news-item.expanded p,
.exp-text[data-collapsed="false"] {
  -webkit-line-clamp: unset !important;
  line-clamp: 3;
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
  white-space: normal !important;
}

.card.expanded p::after,
.news-item.expanded p::after {
  content: none !important;
}

.exp-text[data-collapsed="false"] .exp-rest {
  display: inline;
}
.exp-text .exp-ellipsis[hidden] { display: none; }


.thumb{ overflow:hidden; border-radius:12px; }
.project .thumb{ aspect-ratio:16/9; }

.thumb img,
.section.highlight .thumb img,
.proj .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.person .avatar{
  width:56px; height:56px; border-radius:50%;
  overflow:hidden; background:#cfe0ea;
}
.person .avatar img{
  width:100%; height:100%;
  object-fit:cover; border-radius:50%; display:block;
}

.features .news .news-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;              
  padding:0;                    
}
.features .news .news-item .news-thumb{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}
.features .news .news-item > div{
  padding:12px 14px;
}
.features .news .news-item strong{ display:inline-block; margin-bottom:2px; }
.features .news .news-item p{ color:var(--muted); margin:8px 0 0; }

.features .news .news-item p{
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .62rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  border:1px solid transparent;
  user-select:none;
  white-space:nowrap;
}

.status.completed,
.status.finished{
  --bg:  #eaf7ef;  
  --bd:  #bfe9cf;   
  --fg:  #0a6b35;  
  background: var(--bg);
  border-color: var(--bd);
  color: var(--fg);
}
.status.completed::before,
.status.finished::before{
  content:"✔";
  font-weight:900;
}

.status.in-development,
.status.prototype{
  --bg:  #eaf2ff;
  --bd:  #c9ddff;
  --fg:  #1b5fd6;
  background: var(--bg);
  border-color: var(--bd);
  color: var(--fg);
}
.status.in-development::before,
.status.prototype::before{
  content:"⏳";
  font-weight:900;
}

.lightbox{
  position: fixed;
  inset: 0;
  display: none;             
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,.85);
  z-index: 9999;
}
.lightbox[aria-hidden="false"]{ display: flex; }

.lightbox img{
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.lightbox-close{
  position: absolute;
  top: 14px; right: 14px;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  width: 40px; height: 40px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }

.news-thumb, .section.projects .thumb img, .section.highlight .thumb img{
  cursor: zoom-in;
}

.section .actions.center {
  display: flex;
  justify-content: center;
  margin-top: 16px;      
  margin-bottom: 4px;    
}


@media (max-width: 1200px){
  .links a{ padding: 8px 10px; }
  .nav-cta .btn{ padding: 10px 14px; }
}
@media (max-width: 1180px){
  .container{padding:0 16px}
}
@media (max-width: 1080px){
  .links{ display: none; }
}
@media (max-width: 1024px){
  .features .container{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "features"
      "sidebar"
      "news";
  }
  .sidebar{ position: static; }
}
@media (max-width: 920px){
  .nav-cta .btn.ghost{ display: none; } 
}
@media (max-width: 880px){
  .cards.three{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .foot{ grid-template-columns: 1fr; gap:14px; }
  .features .news{ grid-template-columns: 1fr; }
  .footer .brand{ flex-wrap:wrap; }
  .footer .brand-text, .footer .brand p{ white-space:normal; }
  .hero{padding: 72px 0 40px;}
  .hero-wrap{grid-template-columns: 1fr;}
  .hero-copy{text-align: center;}
  .hero-copy .actions{ justify-content: center; flex-wrap: wrap;}
  .quick{ justify-content: center; }
  .nav{
    gap: 10px;
    flex-wrap: wrap;
    height: auto;           
    row-gap: 8px;
  }
  .links{display: none;}
  .nav-cta .btn{padding: 10px 14px;}
  .nav-cta{
    order: 3;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
@media (max-width: 720px){
  .feature-grid{grid-template-columns: 1fr !important;}
  .stats{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 680px){
  .section.highlight .project.card{
    grid-template-columns: 1fr;    
    align-items: start;
    padding: 16px;
  }
  .section.highlight .project.card .thumb{
    order: -1;                   
    min-height: 180px;            
    margin-bottom: 12px;
    width: 100%;
  }
  .section.highlight .project-body{
    text-align: left;            
  }
  .section.highlight h2{ margin-bottom: 12px; }
}
@media (max-width: 560px){
  .cards.three, .cards.four{grid-template-columns:1fr}
  .news.avatars{grid-template-columns:repeat(2, minmax(0,1fr))}
  .section{ padding: 40px 0; }
  h1{ font-size: clamp(28px, 8vw, 44px); }
  .lead{ font-size: clamp(15px, 4.2vw, 18px); }
  .card p, .proj p, .news .news-item p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width: 520px){
  .hero::after{ display: none; }
}
@media (max-width: 420px){
  .stats{grid-template-columns: 1fr;}
}
@media (prefers-color-scheme: dark){
  .status.completed,.status.finished{
    --bg:#103a25; --bd:#1b5a39; --fg:#88f0b8;
  }
  .status.in-development,.status.prototype{
    --bg:#0e2547; --bd:#1a3a6b; --fg:#8fc0ff;
  }
}

@media (min-width: 900px) {
  .section .actions.center { margin-top: 20px; }
}