:root{
  --bg:#07090c;
  --bg-2:#0b1220;
  --text:#f5f7fb;
  --muted:#b9c7d9;
  --accent:#00d2ff;
  --accent-2:#4aa3ff;
  --outline:#1b2a44;
  --radius:14px;
  --container:clamp(18rem, 92vw, 1200px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; z-index:999}

.container{width:var(--container); margin-inline:auto; padding-inline:clamp(16px, 3vw, 28px)}
.section{width:100%; padding:clamp(40px, 7vw, 96px) 0}

.topbar{position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(7,9,12,.92), rgba(7,9,12,.7));
  border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter:saturate(130%) blur(6px);
}
.nav-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; padding:12px clamp(14px, 3vw, 26px);
}
.brand{font-weight:800; letter-spacing:.3px}
.nav-left{justify-self:start}
.nav-center{justify-self:center}
.nav-right{justify-self:end}

.menu{list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center}
.menu > li > a{padding:8px 10px; border-radius:10px}
.menu > li > a[aria-current="page"]{color:var(--accent)}

.has-submenu{position:relative}
.submenu-toggle{
  background:transparent; border:0; color:var(--text); font:inherit;
  display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px; cursor:pointer;
}
.chevron{display:inline-block; transition:transform .2s ease}

.submenu{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% + 10px); min-width:240px; display:none; padding:8px;
  background:var(--bg-2); border:1px solid var(--outline); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.submenu li a{display:block; padding:10px 12px; border-radius:8px}
.submenu li a:hover{background:rgba(255,255,255,.06)}
.has-submenu.open .submenu{display:block}
.has-submenu.open .chevron{transform:rotate(180deg)}


.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; font-weight:700; border:1px solid transparent;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#001018;
  box-shadow:0 6px 18px rgba(0,210,255,.35);
}
.btn-contact{white-space:nowrap}

.hamburger{display:none; width:36px; height:28px; background:transparent; border:0; position:relative}
.hamburger span{position:absolute; left:0; right:0; height:3px; background:var(--text); border-radius:2px}
.hamburger span:nth-child(1){top:2px}
.hamburger span:nth-child(2){top:12px}
.hamburger span:nth-child(3){bottom:2px}

@media (max-width: 940px){
  .hamburger{display:block; grid-column:3; justify-self:end}
  .nav-right{display:none}
  .nav-center{position:fixed; right:16px; top:64px; background:var(--bg-2);
    border:1px solid var(--outline); border-radius:14px; display:none;
    width:min(88vw, 340px); padding:8px; box-shadow:0 12px 28px rgba(0,0,0,.5)}
  .nav-center.open{display:block}
  .menu{flex-direction:column; align-items:stretch}
  .submenu{position:static; transform:none; top:auto; display:none; border:0; box-shadow:none; background:transparent; padding:0}
  .has-submenu.open .submenu{display:block}
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(70px, 14vw, 180px) 16px; 
  background: var(--bg);
}
.hero-logo {
  width: min(94vw, 1280px);  
  height: auto;
}
@media (max-width: 640px) {
  .hero-logo { width: 90vw; }
}

.pillars-graphics {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  margin: clamp(30px, 6vw, 50px) 0;
  flex-wrap: wrap;
}
.circle {
  position: relative;
  width: clamp(140px, 28vw, 200px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 20px rgba(0,210,255,0.35), inset 0 0 20px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.12);
  transition: transform .2s ease, box-shadow .3s ease;
}
.circle span {
  font-size: clamp(14px, 2.6vw, 18px);
  line-height: 1.3;
  padding: 10px;
}
.circle:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 0 28px rgba(0,210,255,0.5), inset 0 0 20px rgba(0,0,0,0.6);
}

.section-cta{
  text-align:center;
  background:radial-gradient(700px 200px at 80% 0%, rgba(0,210,255,.08), transparent 70%), var(--bg);
}



.site-footer{
  padding:22px; text-align:center; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06); background:var(--bg);
  padding-bottom: 0;
}

.section-services {
  position: relative; width: 100%;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: clamp(50px, 10vw, 100px) 0;
}
.services-head {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 50px);
}
.services-head h2 {
  font-size: clamp(24px, 5vw, 40px);
  margin-bottom: 10px;
  color: #000;
}
.services-head .subtitle {
  color: #333;
  margin: 0 auto;
  max-width: 720px;
}

.services-computers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 40px);
  justify-items: center;
}
@media (max-width: 1024px) {
  .services-computers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .services-computers { grid-template-columns: 1fr; }
}

.computer {
  display: flex; flex-direction: column; align-items: center;
  max-width: 340px; width: 100%;
  background: #000; border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}
.computer .screen {
  background: #fff; color: #111;
  padding: 20px; border-radius: 8px 8px 0 0; text-align: center;
}
.computer .screen h3 {
  margin-top: 0; font-size: 1.2rem; color: #000;
}
.computer .screen p {
  font-size: 0.95rem; margin: 12px 0 20px; color: #222;
}
.computer .screen .btn {
  display: inline-flex; padding: 10px 16px; border-radius: 10px; font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #001018;
  box-shadow: 0 6px 18px rgba(0,210,255,0.35);
  transition: transform .08s ease;
}
.computer .screen .btn:active { transform: translateY(1px); }
.computer .base {
  width: 100%; height: 14px; background: #000; border-radius: 0 0 8px 8px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.1);
}

.section {
  position: relative; isolation: isolate;
  padding: clamp(50px, 10vw, 100px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.section::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 100vw; height: 100%;
  transform: translateX(-50%);
  z-index: -1; background: inherit;
}
.section > .container { position: relative; z-index: 1; }

.section {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(30px, 6vw, 60px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.section > .container {
  width: 100%; max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.nav-center .menu > li > a { font-weight: 700; }
.nav-center .menu > li.has-submenu > .submenu-toggle { font-weight: 700; }/
.nav-center .submenu a { font-weight: 400; }

.section-cyber {
  background: #000; color: #fff;
  padding: clamp(50px, 10vw, 100px) 0;
  text-align: center;
}
.cyber-head {
  max-width: 800px; margin: 0 auto 40px;
}
.cyber-head h2 {
  font-size: clamp(24px, 5vw, 38px);
  margin-bottom: 16px; font-weight: 700;
}
.cyber-head p {
  font-size: 1.1rem; line-height: 1.6; color: #ddd;
}

.browser-mockup {
  background: #111; border-radius: 12px; overflow: hidden;
  max-width: 800px; margin: 0 auto 60px; /* było 0 auto, dodajemy 60px na dole */
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #222; color: #eee;
  font-size: 0.9rem; font-weight: 500; position: relative;
}
.browser-bar span {
  flex-shrink: 0; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
}
.browser-bar span:nth-child(1) { background: #ff5f56; }
.browser-bar span:nth-child(2) { background: #ffbd2e; }
.browser-bar span:nth-child(3) { background: #27c93f; }
.browser-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center; color: #aaa; font-size: 0.95rem; pointer-events: none;
}
.browser-content {
  background: #fff; color: #000; padding: 30px 40px; text-align: left;
}
.browser-content ul {
  list-style: none; margin: 0; padding: 0;
}
.browser-content li {
  font-size: 1.1rem; margin-bottom: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}

.section h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 16px;
}
.section h3 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400; line-height: 1.5;
  margin-top: 0; margin-bottom: 16px;
}
.section p {
  font-size: 1.05rem; line-height: 1.6;
  margin: 0 auto 24px; max-width: 720px; text-align: center; color: inherit;
}
.section-cta {
  padding-bottom: 25 !important; margin-bottom: 0 !important;
}
footer {
  margin-top: 0 !important; padding-top: 0 !important;
}

.section-process {
  background: #fff; color: #111; text-align: center;
  padding-top: 80px; padding-bottom: 80px;
}
.section-process .process-timeline {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; margin-top: 60px; gap: 40px;
}

.section-process .process-timeline::before {
  content: "";
  position: absolute; top: 35px; left: 0; right: 0;
  height: 2px; background: #111; z-index: 0;
}

.section-process .process-step { flex: 1; position: relative; z-index: 1; }
.section-process .process-step h3 {
  margin-top: 20px; font-size: 1.25rem; font-weight: 600;
}
.section-process .process-step p {
  margin-top: 10px; font-size: 1rem; line-height: 1.5;
}

.section-process .process-circle {
  width: 50px; height: 50px; margin: 0 auto; border-radius: 50%;
  background: #111; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

@media (max-width: 768px) {
  .section-process .process-timeline {
    flex-direction: column; align-items: center;
  }
  .section-process .process-timeline::before {
    top: 0; bottom: 0; left: 25px; right: auto;
    width: 2px; height: auto;
  }
  .section-process .process-step {
    text-align: left; padding-left: 70px; margin-bottom: 40px;
  }
  .section-process .process-step:last-child { margin-bottom: 0; }
  .section-process .process-circle { margin: 0; position: absolute; left: 0; top: 0; }
}

@media (max-width: 768px) {
  .hero-logo {
    width: 100vw; max-width: none; transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  .section-head h2,
  .section-process h2,
  .section-services h2,
  .section-cyber h2,
  .section-intro h2 {
    font-size: 1.6rem !important;
  }
  .section-head h3,
  .section-process h3,
  .section-services h3,
  .section-cyber h3,
  .section-intro h3 {
    font-size: 1.2rem !important;
  }
  .section p {
    font-size: 1rem !important; line-height: 1.5;
  }
}

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.services-computers .computer {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.services-computers.is-visible .computer {
  opacity: 1; transform: none;
}
.services-computers .computer:nth-child(1) { transition-delay: .05s; }
.services-computers .computer:nth-child(2) { transition-delay: .15s; }
.services-computers .computer:nth-child(3) { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .services-computers .computer {
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
}

.section-about { background: #fff; color: #000; }
.section-about .about-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.section-about .about-photo {
  margin: 0; align-self: start; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.section-about .about-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
}
.section-about .about-text { text-align: left; max-width: 60ch; }
.section-about .about-text p + p { margin-top: 1rem; }
@media (max-width: 992px) {
  .section-about .about-grid { grid-template-columns: 1fr; }
  .section-about .about-photo {
    order: -1; max-width: 520px; margin-bottom: 16px;
  }
}

.only-mobile { display: none; }
@media (max-width: 1024px) {
  .only-mobile { display: block; margin-top: 8px; }
  .only-mobile .btn-full {
    display: block; width: 100%; text-align: center; padding: 12px 16px; border-radius: 12px;
  }
  .nav-right { display: none; }
}

.section-contact {
  color: #fff; text-align: center; padding: 60px 20px;
}
.section-contact .contact-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 24px 0;
}
.section-contact .contact-details {
  font-size: 0.9rem; line-height: 1.6; opacity: 0.85; margin-top: 32px;
}

.btn, .btn-accent, .btn-contact { text-decoration: none; }
.section-contact .contact-buttons a:link,
.section-contact .contact-buttons a:visited { text-decoration: none !important; }
a.btn, a.btn-contact, a.btn-accent, .btn, .btn-contact, .btn-accent { text-decoration: none; }

@media (max-width: 768px) {
  .hero-logo svg {
    width: 300%;  
    height: auto;
  }
}



.section h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 16px;
}


contact-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap; 
}

.contact-buttons .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px 16px;
  min-width: 160px;
}


.contact-buttons .icon {
  display: inline-block;
  width: 24px;
  text-align: center;
}


@media (max-width: 768px) {
  .contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .contact-buttons .btn {
    display: grid;                    
    grid-template-columns: 28px 1fr;  
    column-gap: 10px;
    align-items: center;
    justify-items: start;
    width: 100%;
    text-align: left;                 
    padding: 12px 16px;
  }

  .contact-buttons .icon {
    width: 28px; height: 28px;        
    display: grid; place-items: center;
    font-size: 20px; line-height: 1;  
  }

  .contact-buttons .label {
    display: block;                   
  }
}