:root {
  /* Nowa paleta kolorów dla jasnego tła */
  --bg: #ffffff;
  --panel: #f8fafc;
  --panel2: #f1f5f9;
  --text: #1e293b;
  --muted: #475569;
  --line: rgba(0, 0, 0, 0.1);
  --accent: #0070f3; /* Nieco ciemniejszy niebieski dla lepszego kontrastu na białym */
  --accent2: #059669; /* Ciemniejsza zieleń */
  --max: 1160px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  /* Zmieniony gradient na bardzo delikatny szary/biały */
  background: 
    radial-gradient(circle at top right, rgba(69, 198, 255, 0.05), transparent 28%),
    linear-gradient(180deg, #ffffff, #f9fafb 60%, #f3f4f6);
  line-height: 1.65;
}

img {max-width: 100%; display: block}
a {color: inherit; text-decoration: none}

.container {width: min(calc(100% - 32px), var(--max)); margin: 0 auto}
.narrow {width: min(calc(100% - 32px), 900px)}

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.9); /* Białe tło z przezroczystością */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav {display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 78px}
.brand img {height: 40px; width: auto}

/* Logo "View2Surf" - czarny tekst z akcentem */
.site-header h1 a { color: #808080 /* #000*/; } 

.nav-links {display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: .95rem}
.nav-links a:hover {color: var(--accent)}

.hero {padding: 72px 0 48px}
.hero-grid {display: grid; grid-template-columns: 1.08fr .92fr; gap: 34px; align-items: center}

.eyebrow {text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 800; color: var(--accent2); margin-bottom: 12px}

h1, h2, h3, p {margin-top: 0}
h1 {font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.05; margin-bottom: 18px; color: #0f172a;}
h1 span {color: var(--accent)}

h2 {font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; margin-bottom: 10px; color: #0f172a;}
h3 {font-size: 1.2rem; margin-bottom: 10px; color: #1e293b;}
p {color: var(--muted)}

.hero-actions, .section-head {display: flex; gap: 16px; align-items: end; justify-content: space-between}
.hero-actions {justify-content: flex-start; flex-wrap: wrap; margin-top: 24px}

.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px;
  border: 1px solid transparent; font-weight: 700; transition: .2s ease; cursor: pointer
}
.btn:hover {transform: translateY(-1px); filter: brightness(1.1);}

.btn-primary {background: linear-gradient(135deg, var(--accent), #4f83ff); color: #ffffff; box-shadow: var(--shadow)}
.btn-secondary {border-color: #cbd5e1; background: transparent; color: var(--text)}

.hero-visual img, .panel, .card, .contact-form, .prose table, .stats .stat {
  border-radius: 24px; box-shadow: var(--shadow)
}

.hero-visual img {border: 1px solid var(--line)}

.section {padding: 32px 0 76px}
.alt {background: #f8fafc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}

.section-head {margin-bottom: 24px}
.section-head p {max-width: 52ch; margin-bottom: 0}

.grid {display: grid; gap: 18px}
.grid.four {grid-template-columns: repeat(4, 1fr)}
.grid.two {grid-template-columns: repeat(2, 1fr)}

/* Karty z jasnym tłem i delikatnym gradientem */
.card, .panel, .contact-form, .contact-copy, .prose table {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card {padding: 24px}
.card.big {min-height: 190px}

.panel img {width: 100%; height: 240px; object-fit: cover; border-radius: 24px 24px 0 0}
.panel-body {padding: 22px}

.split {display: grid; grid-template-columns: 1fr .9fr; gap: 24px; align-items: center}
.device-shot {display: flex; justify-content: center}
.device-shot img {max-height: 520px; width: auto; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow)}

.stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.stat {
  padding: 28px 20px; text-align: center; 
  background: #ffffff; 
  border: 1px solid var(--line);
}
.stat strong {display: block; font-size: 2rem; color: var(--accent); margin-bottom: 8px}
.stat span {color: var(--muted)}

.contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.contact-copy h3 {margin-top: 18px;}
.contact-form {padding: 24px}

label {display: grid; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--text)}

input, textarea {
  width: 100%; padding: 14px 15px; border-radius: 14px; 
  border: 1px solid #cbd5e1;
  background: #fcfcfc; color: var(--text); font: inherit
}
input:focus, textarea:focus {
  outline: 2px solid var(--accent); 
  outline-offset: 0;
  background: #fff;
}

.subhero {padding: 64px 0 8px}
.prose > * {margin-bottom: 1rem}
.prose img {border-radius: 20px; border: 1px solid var(--line); margin: 16px auto}

.prose blockquote {
  margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--accent);
  background: #f1f5f9; border-radius: 14px; color: var(--text);
}

.prose table {width: 100%; border-collapse: collapse; overflow: hidden; background: #fff;}
.prose td, .prose th {padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left}

.text-link {color: var(--accent); font-weight: 700}
.site-footer {border-top: 1px solid var(--line); padding: 26px 0 40px; background: #f9fafb;}

@media (max-width: 960px){
  .hero-grid, .split, .contact-grid, .grid.four, .grid.two, .stats {grid-template-columns: 1fr 1fr}
}
@media (max-width: 760px){
  .nav, .section-head, .footer-inner {flex-direction: column; align-items: flex-start}
  .hero-grid, .split, .contact-grid, .grid.four, .grid.two, .stats {grid-template-columns: 1fr}
  .hero {padding-top: 52px}
  h1 {font-size: 2.5rem}
}

[id] {
  scroll-margin-top: 80px;
}

.contact-copy {
    padding-left: 20px; /* Możesz użyć px, rem lub % */
    padding-top: 5px; /* Możesz użyć px, rem lub % */
}


/* Kontener siatki - domyślnie 4 kolumny (na PC) */
.user-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 równe kolumny */
  gap: 16px;                            /* Odstęp między obrazkami */
  margin: 24px 0;
}

/* Wyśrodkowanie obrazków wewnątrz kolumn */
.user-journey-grid figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

.user-journey-grid img {
  width: 100%;
  height: auto;
  max-width: 200px; /* Opcjonalnie: ograniczenie szerokości pojedynczego screena */
}

/* RWD: Na urządzeniach mobilnych (poniżej 760px) zmień na 1 kolumnę */
@media (max-width: 760px) {
  .user-journey-grid {
    grid-template-columns: 1fr; /* 1 kolumna (jeden pod drugim) */
    gap: 24px;                  /* Większy odstęp pionowy na mobile */
  }
}