:root{
  --accent:#0b74de;
  --accent-2:#0a5fb8;
  --bg-dark:#071021;
  --bg-mid:#0b1220;
  --card:#0b1220;
  --muted:#9aa6b2;
  --radius:12px;
  --container:1100px;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --text:#e6eef6;
  --success:#2ecc71;
  --noise: rgba(255,255,255,0.02);
}

/* Reset i podstawy */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  background: linear-gradient(180deg, rgba(6,10,16,1) 0%, rgba(11,17,32,1) 100%);
  position:relative;
  overflow-x:hidden;
}

/* Animowany gradient tła (pełna strona) */
@keyframes bgShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background: linear-gradient(120deg, #071021 0%, #071a2b 25%, #0b2a4a 50%, #0b1220 75%, #06101a 100%);
  background-size: 300% 300%;
  filter: blur(18px) saturate(110%);
  opacity:0.95;
  animation: bgShift 18s ease-in-out infinite;
}

/* Subtelny noise overlay (data URI tiny PNG) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NgYGD4DwABBAEAf0k0WQAAAABJRU5ErkJggg==");
  opacity:0.06;
  pointer-events:none;
}

/* Opcjonalne dekoracyjne gradientowe kształty */
.bg-shape{
  position:fixed;
  width:40vmax;
  height:40vmax;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.18;
  z-index:-3;
  pointer-events:none;
}
.bg-shape.shape-1{
  right:-10vmax;
  top:-12vmax;
  background: radial-gradient(circle at 30% 30%, rgba(11,116,222,0.18), transparent 30%);
}
.bg-shape.shape-2{
  left:-12vmax;
  bottom:-10vmax;
  background: radial-gradient(circle at 70% 70%, rgba(10,95,184,0.14), transparent 30%);
}

/* Kontener */
.container{max-width:var(--container);margin:0 auto;padding:28px}

/* Nagłówek */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(11,17,32,0.6), rgba(11,17,32,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:1.2rem}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px 16px;border-radius:10px;border:0;cursor:pointer;text-decoration:none}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none}

/* Hero z falą SVG i glassmorphism */
.hero{
  padding:64px 0;
  border-radius:16px;
  margin:18px 0;
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: radial-gradient(800px 400px at 10% 20%, rgba(11,116,222,0.06), transparent 10%),
              radial-gradient(600px 300px at 90% 80%, rgba(10,95,184,0.05), transparent 10%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;padding:28px}
.hero h1{font-size:2rem;margin:0}
.hero p{color:var(--muted);max-width:70%}

/* Dodaj falę SVG dekoracyjną (w stopce hero) */
.hero .wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  z-index:0;
  opacity:0.6;
  transform:translateY(2px);
  pointer-events:none;
}

/* Sekcje i karty */
.services h2, .pricing h2, .about h2, .contact h2{margin-top:0}
.grid{display:grid;gap:18px}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(4px)}
.card h3{margin:0 0 8px 0}
.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:12px}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.price{font-weight:700;font-size:1.4rem;color:var(--accent)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.contact-form label{display:block;margin-top:12px;color:var(--muted);font-size:0.9rem}
.contact-form input, .contact-form textarea, .contact-form select{width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.form-actions{display:flex;gap:10px;margin-top:12px}
.form-note{color:var(--muted);font-size:0.9rem;margin-top:8px}

/* Stopka */
.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:28px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer-inner a{color:var(--accent)}

/* Responsywność */
@media (max-width:900px){
  .hero p{max-width:100%}
  .contact-grid{grid-template-columns:1fr}
  .header-inner{gap:12px}
  .main-nav{display:none}
}

/* Drobne animacje interakcji */
.card, .price-card, .contact-form{
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.card:hover, .price-card:hover, .contact-form:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.6);
}

.contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,0.02);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 10px 40px 10px 12px; /* miejsce na strzałkę */
  border-radius: 8px;
  outline: none;
  transition: box-shadow .18s, transform .18s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6eef6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* Dropdown options (stylizacja, może być ignorowana przez niektóre przeglądarki natywne) */
.contact-form select option {
  background-color: var(--bg-mid);
  color: var(--text);
}

/* Fokus i hover */
.contact-form select:focus {
  box-shadow: 0 6px 20px rgba(11,116,222,0.12);
  border-color: var(--accent);
}

/* Dla lepszej widoczności w starszych przeglądarkach Windows */
@supports (-ms-ime-align: auto) {
  .contact-form select { background-color: #0b1220; color: var(--text); }
  .contact-form select option { background-color: #0b1220; color: var(--text); }
}

/* Alternatywa: jeśli chcesz, aby pole wyglądało jak input (bez natywnej strzałki) */
.contact-form select.no-arrow {
  background-image: none;
  padding-right: 12px;
}

/* logo */
.logo-img {
  height: 38px; /* dopasuj do wyglądu strony */
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(11,116,222,0.4));
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

/* świecenie logo */
.logo-img {
  box-shadow: 0 0 12px rgba(11,116,222,0.3);
}

/* komunikaty */
.form-status {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
}

.form-status.success {
    color: #4caf50; /* zielony */
}

.form-status.error {
    color: #ff5252; /* czerwony */
}