:root {
  --bg:#0b1020;          /* Tło strony */
  --panel:#121a33;       /* Panele/karty */
  --text:#eaf0ff;        /* Tekst główny */
  --muted:#a8b3d6;       /* Tekst drugorzędny */
  --brand:#6ee7ff;       /* Akcent (turkus) */
  --brand-2:#8b5cf6;     /* Akcent dodatkowy (fiolet) */
  --ok:#34d399;          /* Zielony */
  --warn:#f59e0b;        /* Pomarańcz */
  --danger:#ef4444;      /* Czerwony */
  --radius:18px;         /* Promień zaokrągleń */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:1100px;
}

* { box-sizing:border-box }

html, body {
  margin:0; padding:0;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(139,92,246,.15), transparent),
    radial-gradient(1000px 600px at 90% 10%, rgba(110,231,255,.12), transparent),
    var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }

.container { max-width:var(--maxw); margin-inline:auto; padding:28px }

/* ===== Buttons & Badges ===== */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  font-weight:700; letter-spacing:.2px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#03121a; box-shadow:var(--shadow);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05); text-decoration:none }
.btn.secondary{ background:#1b264d; color:var(--text) }

.badge{
  display:inline-flex; gap:8px; align-items:center; font-size:.9rem;
  padding:6px 10px; border-radius:999px;
  background:rgba(110,231,255,.12); color:#c9eeff; border:1px dashed rgba(110,231,255,.35)
}

/* ===== Header / Nav ===== */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.4) blur(8px);
  background:linear-gradient(180deg, rgba(11,16,32,.85), rgba(11,16,32,.65));
  border-bottom:1px solid rgba(255,255,255,.06);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800 }
.logo .mark{
  width:34px; height:34px; border-radius:10px;
  background:conic-gradient(from 180deg, var(--brand), var(--brand-2));
  box-shadow:var(--shadow);
}
nav a{ margin-left:18px; color:var(--muted) }
nav a:hover{ color:var(--text) }

/* ===== Hero ===== */
.hero{ padding:72px 0 36px }
.hero h1{ font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:14px 0 }
.hero p{ max-width:800px; color:var(--muted); margin:0 0 24px }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap }

/* ===== Grid, Cards, Sections ===== */
.grid{ display:grid; gap:18px }
.cards{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)) }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  padding:18px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.card h3{ margin:0 0 6px }
.muted{ color:var(--muted) }

.section{ padding:40px 0 }
.section h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 10px }

/* ===== Prices ===== */
.prices{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)) }
.price{ position:relative }
.price .tag{
  position:absolute; top:10px; right:10px; font-size:.78rem;
  padding:6px 10px; border-radius:999px; background:#1c254d;
}
.price .big{ font-size:2rem; font-weight:800 }

/* ===== Testimonials ===== */
.testimonial{ display:flex; gap:14px; align-items:flex-start }
.avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  flex:0 0 44px;
}

/* ===== FAQ ===== */
.faq details{
  background:#0f1731; border:1px solid rgba(255,255,255,.06);
  padding:14px 16px; border-radius:12px;
}
.faq details+details{ margin-top:10px }
.faq summary{ cursor:pointer; font-weight:700 }

/* ===== Contact / Form ===== */
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
@media (max-width:860px){ .contact{ grid-template-columns:1fr } }

form{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  padding:18px; border-radius:var(--radius); box-shadow:var(--shadow);
}
label{ display:block; font-weight:700; margin:.6rem 0 .25rem }
input, textarea, select{
  width:100%; padding:12px 14px; background:#0c1430; color:var(--text);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; outline:none;
}
textarea{ min-height:120px; resize:vertical }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* checkbox + tekst obok */
.agree{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--muted) }
.agree label{ display:flex; align-items:flex-start; gap:8px; line-height:1.5 }
.agree input[type="checkbox"]{
  width:18px; height:18px; accent-color:#6ee7ff; margin-top:2px;
}

/* ===== Paper/TOC ===== */
.paper{ padding:24px }
.paper h2{ font-size:1.25rem; margin:24px 0 8px }
.paper h3{ font-size:1.05rem; margin:16px 0 6px }
.paper ol, .paper ul{ margin:8px 0 18px 18px }

/* wrapper z dwiema kolumnami: treść | toc */
.grid.toc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:18px;
  align-items:start;
}

/* TOC przyklejony po prawej */
.toc{
  position:sticky;
  top:92px;
  align-self:start;
}
.toc .card{ padding:16px }
.toc h3{ margin:0 0 8px; font-size:.95rem }
.toc a{ display:block; padding:6px 0; color:var(--muted) }
.toc a:hover{ color:var(--text) }

/* na mobile jedna kolumna */
@media (max-width:920px){
  .grid.toc-layout{ grid-template-columns:1fr }
  .toc{ position:static; top:auto }
}

/* ===== Footer ===== */
footer{
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted); padding:26px 0 60px;
}
.foot{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.foot .links a{ margin-right:14px }

/* ===== Brytyjska flaga w tle (subtelna) ===== */
.flag-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('/images/uk-flag.svg');
  background-repeat:no-repeat; background-position:center center; background-size:cover;
  opacity:.10; filter:blur(4px) saturate(.8) contrast(1.2);
  mix-blend-mode:overlay;
  filter: blur(16px);
  -webkit-filter: blur(16px);
}
html { scroll-behavior: smooth; }

/* żeby nagłówek nie chował się pod sticky headerem */
.paper h1[id], .paper h2[id], .paper h3[id],
section[id], h2[id], h3[id] {
  scroll-margin-top: 110px;  /* dopasuj do wysokości headera */
}
/* ===== Strzałka "powrót do góry" ===== */
#scrollTopBtn {
  position: fixed;
  right: 24px;
  bottom: 26px;
  z-index: 999;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #03121a;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollTopBtn:hover {
  filter: brightness(1.1);
  transform: translateY(0) scale(1.05);
}

#scrollTopBtn.show {
  opacity: 1;
  transform: translateY(0);
}

/* Na małych ekranach lekko przesunięta */
@media (max-width:600px) {
  #scrollTopBtn {
    right: 16px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }
}