/* Dream Data — minimal, logo-friendly UI
   Palette: deep navy + cyan accents
*/
:root{
  --bg: #071425;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --cyan: #38bdf8;
  --cyan2: #22d3ee;
  --navy: #0b1f3a;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);        /* tylko kolor */
  color: var(--text);
  line-height:1.5;
  position: relative;
  overflow-x: hidden;
}

/* gradienty jako osobna warstwa (mniej pasów przy zoomie) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 400px at 70% -10%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(700px 360px at 10% 10%, rgba(34,211,238,.16), transparent 60%);
  transform: translateZ(0);     /* stabilizuje render */
}

/* cała treść nad tłem */
body > *{
  position: relative;
  z-index: 1;
}

a{color:inherit}
code{background: rgba(255,255,255,.08); padding: .15rem .35rem; border-radius: 8px; border:1px solid rgba(255,255,255,.12)}
.container{width:min(1100px, 92vw); margin:0 auto}
.skip{
  position:absolute; left:-999px; top:-999px;
  background:#fff; color:#000; padding:.6rem 1rem; border-radius:10px;
}
.skip:focus{left:16px; top:16px; z-index:9999}

.topbar{
  position: sticky;
  top:0;
  z-index:50;

  /* USUNIĘTY blur */
  backdrop-filter: none;

  /* trochę mocniejsze tło zamiast blur */
  background: rgba(7,20,37,.82);

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand__logo{width:40px; height:40px; object-fit:contain}
.brand__name{font-weight:800; letter-spacing:.2px}

.nav{
  display:flex; gap: 14px; align-items:center;
}
.nav a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--text);
  border-color: rgba(56,189,248,.25);
  background: rgba(56,189,248,.07);
}

.nav-toggle{
  display:none;
  width:46px; height:42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px; width:18px;
  background: rgba(255,255,255,.85);
  margin:4px auto;
  border-radius: 2px;
}

.hero{ padding: 62px 0 26px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 28px;
  align-items:stretch;
}
.eyebrow{
  color: var(--cyan);
  font-weight:700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .84rem;
  margin:0 0 12px;
}
h1{
  font-size: clamp(2.05rem, 3.2vw, 3.1rem);
  line-height:1.1;
  margin: 0 0 14px;
}
.lead{
  color: var(--muted);
  font-size: 1.04rem;
  margin: 0 0 18px;
}

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 14px 0 10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35) }
.btn--full{ width:100% }
.btn--primary{
  background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(34,211,238,.95));
  color: #04121f;
  border-color: transparent;
}
.btn--primary:hover{ filter: brightness(1.02) }
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  font-size:.88rem;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}

.hero__panel{ position:relative; }
.panel{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__title{ font-weight:800; margin-bottom:10px; color: rgba(255,255,255,.88) }
.kpis{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top:8px; }
.kpi{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
}
.kpi__value{ font-size: 1.6rem; font-weight:900; color: var(--cyan2) }
.kpi__label{ color: rgba(255,255,255,.76); font-size:.92rem }
.mini{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.mini__row{ display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.78) }
.dot{ width:8px; height:8px; border-radius:999px; background: rgba(56,189,248,.9); margin-top:7px; flex: 0 0 auto; }
.glow{
  position:absolute; inset:-80px -40px -60px -60px;
  background: radial-gradient(700px 420px at 70% 30%, rgba(56,189,248,.28), transparent 60%),
              radial-gradient(620px 420px at 30% 70%, rgba(34,211,238,.20), transparent 60%);
  filter: none;
  pointer-events:none;
  opacity:.55;
}

.section{ padding: 54px 0; }
.section--alt{
  position: relative;
  z-index: 0;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

.section__head{ margin-bottom: 18px; }
.section__head h2{
  margin:0 0 8px;
  font-size: clamp(1.5rem, 2.1vw, 2.05rem);
}
.section__head p{ margin:0; color: var(--muted) }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
}
.card h3{ margin:0 0 8px }
.card p{ margin:0; color: rgba(255,255,255,.78) }

.timeline{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  gap: 12px;
}
.timeline__item{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items:start;
}
.timeline__badge{
  height: 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  font-weight:900;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
  color: rgba(255,255,255,.92);
}
.timeline__body{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.timeline__body h3{ margin:0 0 6px }
.timeline__body p{ margin:0; color: rgba(255,255,255,.75) }

.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items:stretch;
}
.price{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.price--featured{
  border-color: rgba(56,189,248,.35);
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(255,255,255,.05));
}
.price__top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.price__tag{ margin:0; color: var(--cyan2); font-weight:800; font-size:.9rem }
.price ul{ margin: 12px 0 16px; padding-left: 18px; color: rgba(255,255,255,.78) }
.price li{ margin: 8px 0 }

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight:600;
}

/* NEWS */
.news{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.news__item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
}
.news__item h3{ margin:0 0 8px; font-size: 1.05rem }
.news__meta{ color: rgba(255,255,255,.65); font-size:.9rem; margin-bottom: 10px }
.news__item p{ margin:0; color: rgba(255,255,255,.78) }
.news__item a{ text-decoration:none }
.news__item a:hover{ text-decoration:underline }

/* TEAM — flip cards + mobile: 1 karta = 1 ekran */
.team{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items:stretch;
}

/* 3D flip container */
.team-card{
  perspective: 1000px;
  min-height: 320px;
}
.team-card__inner{
  position:relative;
  height:100%;
  transition: transform .6s ease;
  transform-style: preserve-3d;
  border-radius: var(--radius);
}
.team-card:hover .team-card__inner,
.team-card:focus-within .team-card__inner{
  transform: rotateY(180deg);
}

/* front/back faces */
.team-face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.team-face--back{
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(255,255,255,.05));
  border-color: rgba(56,189,248,.25);
}
.team-name{ margin: 10px 0 4px; font-size: 1.05rem; font-weight: 800; }
.team-role{ margin: 0 0 10px; color: rgba(255,255,255,.72); font-weight: 600; }
.team-bio{ margin: 0; color: rgba(255,255,255,.78); font-size: .95rem; }

/* avatar with image fallback */
.team-avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #38bdf8);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size: 24px;
  letter-spacing:1px;
  margin: 0 auto 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

.team-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius:50%;
  transform: translateZ(0); /* lekkie wygładzenie */
}

.team-hint{
  margin-top: auto;
  padding-top: 10px;
  color: rgba(255,255,255,.62);
  font-size: .88rem;
}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.muted{ color: rgba(255,255,255,.72) }
.contact__rows{ margin-top: 12px; display:grid; gap: 10px; }
.row{ display:flex; justify-content:space-between; gap: 14px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
}
.row__k{ color: rgba(255,255,255,.66); }
.form{ display:grid; gap: 10px; margin-top: 12px; }
label span{ display:block; margin-bottom: 6px; color: rgba(255,255,255,.72); font-weight: 600; }
input, textarea{
  width:100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus{ border-color: rgba(56,189,248,.45); box-shadow: 0 0 0 4px rgba(56,189,248,.12); }

.hint{ margin-top: 14px; color: rgba(255,255,255,.62); font-size: .92rem }
.skeleton{
  padding: 16px;
  border-radius: var(--radius);
  border:1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
}

/* FOOTER */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  background: rgba(7,20,37,.55);
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center;
}
.footer a{ color: rgba(255,255,255,.78); text-decoration:none }
.footer a:hover{ text-decoration:underline }
.footer__egg{
  margin-left: 10px;
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.8);
  cursor:pointer;
}
.footer__egg:hover{ border-color: rgba(56,189,248,.35) }

/* MOBILE */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .news{ grid-template-columns: 1fr; }
  .team{ grid-template-columns: 1fr; } /* 1 karta = 1 ekran */
  .team-card{ min-height: calc(100svh - 200px); } /* pełniejszy „ekranowy” efekt */
  .contact{ grid-template-columns: 1fr; }
  .nav-toggle{ display:block; }
  .nav{
    position: absolute;
    top: 66px; right: 4vw; left: 4vw;
    display:none;
    flex-direction:column;
    padding: 10px;
    background: rgba(7,20,37,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav.is-open{ display:flex; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .team-card__inner{ transition:none !important; }
  .team-card:hover .team-card__inner,
  .team-card:focus-within .team-card__inner{ transform:none; }
}
#team .hint,
#contact .hint,
#news .hint {
  display: none;
}
#news .section__head p {
  display: none;
}
/* --- Soft blur band: działa pewnie (bez konfliktu z tłem body) --- */
body{
  position: relative;
}

/* cała treść strony nad rozmyciem */
body > *{
  position: relative;
  z-index: 1;
}
/* --- Fix: usuń poziome „pasy” od gradientów w kartach --- */
.price,
.card,
.timeline__body,
.news__item,
.team-face{
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
}

/* featured też bez „belki” */
.price--featured{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(56,189,248,.30) !important;
}

/* górka w pricing (tekst w rzędzie) bez dodatkowego kontrastu */
.price__top{
  background: transparent !important;
}
.price,
.card,
.timeline__body{
  overflow: hidden;
}
/* --- FIX: dithering (ziarno) usuwa banding/pasy na gradientach przy zoomie --- */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}