/* ——— RESET & zmienne ——— */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --primary:#00aaff;
  --dark:#00192f;      /* najciemniejszy dotąd granat */
  --light:#00365c;     /* ciemny błękit */
  --text:#e0f7ff;
  --font:'Montserrat',sans-serif;
}
html{font-size:100%;}
body{
  font-family:var(--font);
  display:flex;flex-direction:column;min-height:100vh;
  background:linear-gradient(-45deg,var(--dark),var(--light));
  background-size:200% 200%;animation:gradientBG 6s ease infinite;
  color:var(--text);overflow-x:hidden;
  padding-top:4.25rem;            /* = dokładna wysokość paska */
  position:relative;
  height: 100%;
  overflow-y: scroll;
}
@keyframes gradientBG{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* —— Banner w NAVBARZE ——  */
.banner {
    width: 128px;
    height: 64px;
}

/* —— kratka —— */
#grid-canvas{position:fixed;inset:0;pointer-events:none;z-index:1;}

/* —— NAVBAR —— */
.navbar{
  position:fixed;top:0;left:0;width:100%;height:5.25rem;
  background:rgba(0,0,0,.94);backdrop-filter:blur(3px);
  box-shadow:0 3px 10px rgba(0,0,0,.55);
  z-index:100;
}
.navbar .container{
  width:90%;max-width:1200px;margin:0 auto;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.brand{font-size:1.8rem;font-weight:700;color:var(--primary);text-decoration:none;}

/* hamburger */
.nav-toggle{display:none;width:28px;height:22px;flex-direction:column;justify-content:space-between;background:none;border:none;cursor:pointer;z-index:110;}
.nav-toggle span{width:100%;height:3px;background:var(--text);border-radius:2px;transition:.3s;}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(6px,6px);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}

/* menu desktop */
.nav-menu{display:flex;align-items:center;gap:2.2rem;z-index:105;}
.nav-menu li{list-style:none;}
.nav-menu a{color:var(--text);text-decoration:none;position:relative;font-size:1rem;transition:color .3s;}
.nav-menu a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--primary);transition:width .3s;}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%;}
.nav-menu a:hover{color:var(--primary);}

/* font +/- */
.font-controls{display:flex;gap:.5rem;}
.font-controls button{background:transparent;border:1px solid var(--text);color:var(--text);padding:.2rem .45rem;border-radius:2px;font-size:.9rem;opacity:.75;transition:.3s;}
.font-controls button:hover{opacity:1;color:var(--primary);}
.experience{
  list-style:none;
  margin:0 0 1.5rem 0;
  line-height:1.4;
}

/* portfolio kilofy */
.experience li{
  position:relative;
  padding-left:1.8rem;
  margin-bottom:.55rem;
}
.experience li::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;                 /* konieczne dla kodów “solid” */
  content:"\f6e3";                 /* ← fa‑hammer (FREE) */
  position:absolute;left:0;top:0;
  color:var(--primary);
  font-size:1rem;
}


/* —— OVERLAY —— */
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
  z-index:90;
}
.nav-overlay.open{opacity:1;pointer-events:auto;}

/* —— CONTENT —— */
.content{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem 0;}
.hero{text-align:center;}
.hero-box{background:rgba(0,0,0,.9);padding:2.3rem;border-radius:.5rem;width:100%;max-width:600px;}
.hero-box h1{font-size:2.3rem;margin-bottom:1.2rem;}
.hero-box p{font-size:1.12rem;margin-bottom:1.6rem;}
.btn{display:inline-block;background:rgb(0, 65, 77);color:#dcd9d9;padding:.8rem 1.6rem;border-radius:.5rem;transition:transform .3s;}
.btn:hover{transform:translateY(-1px);background:rgb(66, 0, 151);color:#d0d0d0;}

/* —— STOPKA —— */
.footer{background:rgba(0,0,0,.94);text-align:center;padding:1.3rem 0;font-size:.9rem;position:relative;z-index:2;}

/* --- MOBILE (≤ 768 px) --------------------------------- */
@media (max-width: 768px) {
    .nav-toggle{ display:flex; }
  
    /* zamknięte menu – BEZ animacji */
    .nav-menu{
      position:fixed;
      top:4.25rem; left:0;
      width:100%;
      flex-direction:column; gap:1.2rem;
      padding:1.2rem 1.5rem;
      background:rgba(0,0,0,.97);
  
      transform:translateY(-110%);
      opacity:0;
      visibility:hidden;
  
      transition:none;
    }
  
    /* otwarte menu – animacja slide-down + fade-in */
    .nav-menu.open{
      transform:translateY(0);
      opacity:1;
      visibility:visible;
  
      transition:transform .35s ease,
                  opacity   .75s ease;
    }
  
    body.menu-open{ overflow:hidden; }
    .hero-box{ width:90%; margin:0 auto; }
  }



/* === OFERTY (karty cenowe) ============================================ */

/* nagłówek sekcji */ 
.offers-title{
  text-align:center;
  font-size:2.2rem;
  margin-bottom:2rem;
}

/* odstęp od górnej kratki */
.offers{ margin-top:2rem; }

/* 1 kol mobile, 2 kol tablet, 3 kol desktop – luźne przerwy */
.pricing-grid{
  display:grid;
  gap:2.5rem 2rem;          /* wiersze / kolumny */
  width:100%;
  max-width:1400px;         /* lepiej wygląda na ultrawide */
  margin:0 auto;
  padding:0 1rem;
}
@media (min-width:776px){  .pricing-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1092px){  .pricing-grid{ grid-template-columns:repeat(3,1fr);} }

.offer-card{
  background:rgba(0,0,0,.88);
  border-radius:.5rem;
  padding:1.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.offer-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 18px rgba(0,0,0,.55);
}

/* obraz nagłówka */
.offer-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:.35rem;
  margin-bottom:1rem;
}

/* tytuł pakietu */
.offer-card h3{
  font-size:1.35rem;
  margin-bottom:.8rem;
  color:var(--primary);
}

/* lista cech */
.offer-card ul{
  list-style:none;
  line-height:1.45;
  margin-bottom:1rem;
  text-align:left;
}
.offer-card ul li{
  position:relative;
  padding-left:1.2rem;
  margin-bottom:.4rem;
}
.offer-card ul li::before{
  content:"✔";
  position:absolute;
  left:0; top:0;
  font-size:.8rem;
  color:var(--text);     /* biały – nie konkuruje z ceną */
}

/* sekcja ceny */
.price{
  font-size:1.1rem;
  letter-spacing:.3px;
  margin-bottom:1rem;
}
.price span{
  font-size:1.7rem;
  font-weight:700;
  color:var(--primary);
}

/* przycisk */
.btn.small{
  padding:.55rem 1.2rem;
  font-size:.9rem;
  width:100%;
}

/* === MODAL =============================================== */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  display:flex; justify-content:center; align-items:center;
  opacity:0; visibility:hidden;
  transition:.3s;
  z-index:120;
}
.modal.open{opacity:1;visibility:visible;}
.modal-box{
  background:rgba(0,0,0,.95);
  padding:2rem; border-radius:.5rem; width:100%; max-width:460px;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
.modal-close{
  position:absolute; top:.6rem; right:.8rem;
  background:none; border:none; color:var(--text);
  font-size:1.8rem; cursor:pointer;
}

.modal-box h2{ text-align:center; margin-bottom:1.2rem; }
.modal-box label{ display:block; margin-bottom:.9rem; font-size:.92rem; }
.modal-box input[type=text],
.modal-box input[type=email],
.modal-box textarea{
  width:100%; padding:.5rem .6rem; border:none; border-radius:.3rem;
  background:rgba(255,255,255,.1); color:var(--text);
}
.modal-box textarea{ resize:vertical; }
.modal-box .terms{ font-size:.85rem; }
.modal-box .btn{ margin-top:1rem; width:100%; }

/* drobny przycisk w kartach */
.btn.small{ padding:.55rem 1.2rem; font-size:.9rem; width:100%; }
.modal-price{
  text-align:center;
  margin: .8rem 0 1rem;
  font-size:1.1rem;
}
.modal-price span{ font-weight:700; color:var(--primary); }

/* === FORMULARZ (zamówienie) ================================ */
.order-box{ max-width:560px; }
.back-btn{
  display:inline-block; margin-bottom:1.2rem; font-size:.85rem;
  padding:.5rem 1rem; background:rgba(255,255,255,.08);
}
.back-btn:hover{ background:rgba(255,255,255,.18); color:var(--primary); }

.order-form label{ display:block; margin-bottom:1.1rem; font-size:.92rem; }
.order-form input[type=text],
.order-form input[type=email],
.order-form textarea{
  width:100%; padding:.55rem .7rem; border:none; border-radius:.35rem;
  background:rgba(255,255,255,.08); color:var(--text);
}
.order-form textarea{ resize:vertical; }
.order-form .terms{ font-size:.82rem; }

.order-price{
  text-align:center; margin:.9rem 0 1.3rem; font-size:1.1rem;
}
.order-price strong{ color:var(--primary); }

/* inline-alert w formularzu */
.alert-error {
  max-width: 360px;
  margin: 1rem auto 1.5rem;
  padding: 0.8rem 1rem;
  background: rgba(255, 60, 60, 0.15);
  color: #ff3c3c;
  border: 1px solid rgba(255, 60, 60, 0.4);
  border-radius: 0.4rem;
  text-align: center;
  font-size: 0.95rem;
}

/* ─── DROPDOWN W NAVBAR ─── */
.nav-menu .dropdown {
  position: relative;
}
.nav-menu .drop-toggle {
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0;
}
.nav-menu .drop-toggle .caret {
  font-size: .7rem;
  transition: transform .3s ease;
}

.nav-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(0,0,0,.95);
  list-style: none;
  margin: .5rem 0 0;
  padding: .5rem 0;
  border-radius: .3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.nav-menu .dropdown-menu li {
  margin: 0;
}
.nav-menu .dropdown-menu a {
  display: block;
  padding: .5rem 1.2rem;
  color: var(--text);
  font-size: .9rem;
  white-space: nowrap;
}
.nav-menu .dropdown-menu a:hover,
.nav-menu .dropdown-menu a.active {
  background: rgba(0,0,0,.3);
  color: var(--primary);
}

/* stan otwartego submenu */
.nav-menu .dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-menu .dropdown.open .drop-toggle .caret {
  transform: rotate(180deg);
}