:root{
  --blue: #4aa3df;
  --orange: #f39c12;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --vv-offset: 0px;
  --bottom-ui: 0px;
  --header-h: 72px;

  --c-bg: #0e1117;
  --c-surface-1: rgba(255,255,255,.03);
  --c-surface-2: rgba(255,255,255,.04);
  --c-surface-3: rgba(17,19,26,.55);
  --c-surface-4: rgba(17,19,26,.9);
  --c-topbar-bg: rgba(11,12,16,.68);
  --c-overlay: rgba(11,12,16,.85);
  --c-panel: rgba(15,17,21,.88);
  --c-footer-bg: rgba(11,12,16,.55);
  --c-border: rgba(255,255,255,.10);
  --c-border-weak: rgba(255,255,255,.12);
  --c-border-strong: rgba(255,255,255,.18);
  --c-border-ghost: rgba(255,255,255,.22);
  --c-border-ghost-hover: rgba(255,255,255,.35);
  --c-text: #f5f7fa;
  --c-text-muted: #b5c0d0;
  --c-text-soft: rgba(243,244,246,.86);
  --c-text-strong: rgba(243,244,246,.92);
  --c-text-contrast: #0b0f16;
  --c-hero-1: #3b8fcf;
  --c-hero-2: #2c6fae;
  --c-hero-3: #1b2a3a;

  --bg: var(--c-bg);
  --surface: var(--c-surface-3);
  --surface2: var(--c-surface-4);
  --border: var(--c-border);

  --text: var(--c-text);
  --muted: var(--c-text-muted);

  --radius: 18px;
  --shadow: 0 16px 50px rgba(0,0,0,.35);

  /* aliasy */
  --line: var(--border);
  --accent: var(--orange);

  --bg-dark: var(--bg);
  --text-light: var(--text);
  --text-muted: var(--muted);
}


/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  overflow-x: hidden;
}

body:not(.page--home) main{
  padding-top: 110px;
}

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

img, video{ display:block; max-width:100%; }

@supports (overflow: clip){
  body{
    overflow-x: clip;
  }
}

button, input, textarea, select{ font: inherit; }

.container{
  width: min(1100px, calc(100% - 28px));
  margin: 0 auto;
}

/* sticky topbar + anchor scroll */
:target{ scroll-margin-top: 90px; }
section[id]{ scroll-margin-top: 90px; }

/* focus dla klawiatury */
:focus-visible{
  outline: 3px solid rgba(243,156,18,.45);
  outline-offset: 3px;
  border-radius: 12px;
}

code{
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--c-border-weak);
  background: var(--c-surface-2);
  color: var(--c-text-strong);
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 18px;
  border-radius:14px;

  border:1px solid rgba(243,156,18,.35);
  background: linear-gradient(180deg, rgba(243,156,18,.95), rgba(243,156,18,.75));
  color: var(--c-text-contrast);

  font-weight:800;
  text-decoration:none;
  cursor:pointer;

  box-shadow: 0 14px 34px rgba(243,156,18,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 0 20px rgba(243,156,18,.35);
}
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.7; cursor:not-allowed; }

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--c-border-ghost);
  box-shadow: none;
}
.btn--ghost:hover{
  border-color: var(--c-border-ghost-hover);
  box-shadow: none;
}
.btn--small{
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0,0,0,0.15);
  border-bottom: 0;
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 16px 0 8px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__logo{
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand__dot{ display:none; }
.brand__text{ display:none; }

.nav{
  display:flex;
  gap: 26px;
  align-items:center;
}
.nav a{
  padding: 6px 6px;
  border-radius: 0;
  color: #fff;
  font-family: "Corbel", "Corbel Light", "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 28px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover{
  background: transparent;
  color: #f1773c;
}
.nav a.is-active{
  color: #fff;
  border-bottom: 2px solid #f1773c;
}

.header--visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease;
}
.header--hidden{
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}


.burger{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--c-surface-2);
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  margin:6px 10px;
  background: var(--c-text-strong);
  border-radius:999px;
}

/* =========================
   HERO SLIDER
========================= */
.hero-slider{
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}
@supports (height: 100svh){
  .hero-slider{
    height: 100svh;
    min-height: 100svh;
  }
}
.slider{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__track{
  display: flex;
  width: 800%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform 450ms ease-out;
  will-change: transform;
}
.slide{
  flex: 0 0 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: blur(14px);
  opacity: .55;
}
.slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 2;
}
.slider__overlay{
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  background: rgba(0,0,0,0.55);
  border-radius: 14px;
  padding: clamp(14px, 2.2vw, 24px);
  text-align: center;
  color: #fff;
}
.slider__overlay h1{
  margin: 0 0 10px;
  font-family: "Corbel", "Corbel Light", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: 0.02em;
}
.slider__overlay p{
  margin: 0;
  font-family: "Corbel", "Corbel Light", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.8vw, 22px);
  line-height: 1.4;
}
.slider__dots{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.slider__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d8d8d8;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.slider__dot.is-active{
  background: #f1773c;
}

@media (max-width: 768px){
  .slider__overlay{
    top: 62%;
    width: min(520px, 92vw);
  }
  .slider__dots{
    bottom: 18px;
    gap: 8px;
  }
}

.mobile{
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  backdrop-filter: blur(14px);
  padding-top: 90px;

  z-index: 15000;
}
.mobile[hidden]{
  display: none;
}
.mobile a{
  display:block;
  padding:12px 20px;
  color:var(--muted);
}
.mobile a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.mobile-cta{
  display: none;
}


/* Mobile menu overlay */
#mobileNav[hidden]{ display:none !important; }
/* =========================
   HERO
========================= */
.hero{
  padding:56px 0 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--c-hero-1) 0%,
    var(--c-hero-2) 55%,
    var(--c-hero-3) 100%
  );
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 400px at 20% 30%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(700px 350px at 80% 40%, rgba(0,0,0,.22), transparent 60%);
  pointer-events:none;
}
.hero > *{ position: relative; z-index: 1; }

.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
  align-items:center;
}
.badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--c-surface-2);
  color:var(--muted);
  font-weight:600;
  margin:0 0 10px;
}

h1{
  font-size:54px;
  line-height:1.03;
  margin:0 0 12px;
  letter-spacing:-.8px;
}
.h1sm{
  font-size:34px;
  margin:0 0 6px;
  letter-spacing:-.4px;
}

.lead{
  margin:0 0 18px;
  color:var(--c-text-soft);
  font-size:18px;
  max-width:60ch;
}
.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 18px;
}

.quick{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:var(--c-surface-1);
  overflow:hidden;
}
.quick li{
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border-top:1px solid var(--line);
}
.quick li:first-child{ border-top:none; }
.quick__k{ color:var(--muted); }
.quick__v{ font-weight:700; }

.hero__visual{ position:relative; }
.card-glow{
  padding:16px;
  border-radius: 26px;
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(243,156,18,.18), transparent 60%),
    radial-gradient(600px 300px at 80% 10%, rgba(124,58,237,.22), transparent 60%);
  border:1px solid var(--line);
}
.card{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17,19,26,.95), rgba(17,19,26,.72));
  border:1px solid var(--c-border);
  box-shadow: var(--shadow);
  padding:16px;
}
.card__top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--c-border-weak);
  background:var(--c-surface-2);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.card__mid{
  display:flex;
  align-items:center;
  justify-content:center;
  height:190px;
  border-radius:18px;
  background:var(--c-surface-1);
  border:1px dashed rgba(255,255,255,.14);
}
.mini-mt{ position:relative; width:220px; height:140px; }
.mt{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:180px;
  height:110px;
  background: linear-gradient(180deg, var(--c-border-strong), rgba(255,255,255,.06));
  clip-path: polygon(50% 0%, 85% 65%, 100% 100%, 0% 100%, 15% 65%);
  border:1px solid var(--c-border-weak);
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
}
.sun{
  position:absolute;
  right:10px;
  top:10px;
  width:30px;
  height:30px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 40px rgba(243,156,18,.35);
}
.card__bot{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:12px;
}
.stat{
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:12px;
  background:var(--c-surface-1);
}
.stat__n{ font-size:22px; font-weight:900; }
.stat__t{ color:var(--muted); font-weight:700; margin-top:2px; }
.hint{ margin:10px 0 0; color:var(--muted); font-size:12px; }

/* =========================
   SECTIONS
========================= */
.section{ padding:56px 0; }
.section__head{ margin-bottom:18px; }
.section__headRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

h2{
  font-size:30px;
  margin:0 0 8px;
  letter-spacing:-.3px;
}
.muted{ color:var(--muted); }
.lead2{
  color:var(--c-text-strong);
  font-size:18px;
  margin:0 0 18px;
}

/* Tags */
.tile__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--c-border-weak);
  background:var(--c-surface-2);
  color:var(--c-text-strong);
  font-weight:800;
  font-size:12px;
}
.tag--soft{
  color:var(--muted);
  border-color: var(--c-border);
  background: var(--c-surface-1);
}
.tag--accent{
  border-color: rgba(243,156,18,.35);
  background: rgba(243,156,18,.14);
  color: rgba(255,255,255,.95);
}

/* Tiles */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.tile{
  border:1px solid rgba(243,156,18,.35);
  background: var(--c-surface-1);
  border-radius: var(--radius);
  padding:18px;

  box-shadow:
    0 0 0 1px rgba(243,156,18,.15),
    0 18px 40px rgba(0,0,0,.35);
}

.tile:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(243,156,18,.45),
    0 26px 60px rgba(0,0,0,.45);
}
.tile h3{ margin:0 0 8px; font-size:20px; }
.tile__p{ margin:0 0 12px; color:var(--c-text-soft); }

.list{
  margin:0 0 12px;
  padding:0 0 0 18px;
  color:var(--c-text-soft);
}
.link{
  display:inline-block;
  color: var(--c-text-strong);
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  background: var(--c-surface-2);
  border:1px solid var(--c-border);
  transition:.15s;
}
.link:hover{ transform: translateY(-1px); }
.offer-cta{
  display:inline-flex;
  margin: 8px 0 6px;
}

.note{
  margin-top:14px;
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  border-radius: var(--radius);
  padding:14px 16px;
  color:var(--c-text-soft);
}

/* Split + panel */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}
.panel{
  border:1px solid var(--c-border);
  background: linear-gradient(180deg, var(--c-surface-2), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding:18px;
}
.panel h3{ margin:0 0 10px; }
.panel__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.fineprint{
  margin-top:12px;
  border:1px solid var(--c-border);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:12px 14px;
  color: var(--c-text-soft);
}

/* Bullets */
.bullets{ display:grid; gap:12px; margin-top:16px; }
.bullet{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
}
.bullet__icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-surface-2);
  border:1px solid var(--c-border);
}
.bullet__t{ font-weight:900; }

/* =========================
   ACCORDION (DETAILS)
========================= */
.acc{
  margin-top:14px;
  border-radius: var(--radius);
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  overflow:hidden;
}
.acc__sum{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
}
.acc__sum::-webkit-details-marker{ display:none; }
.acc__chev{ color: var(--muted); transition: transform .15s ease; }
.acc[open] .acc__chev{ transform: rotate(180deg); }

.acc__body{
  padding: 14px 16px 16px;
  border-top:1px solid var(--c-border);
}
.acc__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Profiles */
.profiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.profile{
  border:1px solid var(--c-border);
  background: var(--c-surface-3);
  border-radius: var(--radius);
  padding:14px;
}
.profile__top{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.avatar{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-surface-2);
  border:1px solid var(--c-border);
  font-size:20px;
}
.profile__name{
  margin:0;
  font-size:18px;
}
.profile__sub{
  margin:2px 0 0;
  font-size:13px;
}
.profile__p{
  margin:0 0 10px;
  color: var(--c-text-soft);
}
.profile__links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.mini-link{
  display:inline-flex;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--c-border-weak);
  background: var(--c-surface-1);
  color: var(--c-text-strong);
  font-weight:900;
  font-size:13px;
}
.mini-link:hover{ transform: translateY(-1px); }

/* =========================
   GALLERY
========================= */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.video-quality{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-muted);
  font-size: 12px;
}
.video-quality select{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 14px;
}
.video-quality__note{
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-text-muted);
}
@media (max-width: 768px){
  .video-quality select{
    font-size: 16px;
  }
}
.gallery--full{
  margin-top: 14px;
}
.gitem{
  border-radius: var(--radius);
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio: 16 / 9;
  height: auto;
}
.gitem img,
.gitem video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gitem--video{ cursor:default; }
.gitem--video video{ background:#000; }

/* =========================
   TABS (galeria.html)
========================= */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 0;
}
.tab{
  border:1px solid rgba(255,255,255,.14);
  background: var(--c-surface-1);
  color: var(--c-text-strong);
  border-radius: 999px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
}
.tab:hover{ transform: translateY(-1px); }
.tab.is-active{
  border-color: rgba(243,156,18,.35);
  background: rgba(243,156,18,.14);
}

/* =========================
   CONTACT
========================= */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items: stretch;
}

.contact__cards{ display:grid; gap:12px; margin-top:14px; }

.contact__card{
  min-height: 72px;
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  border-radius: var(--radius);
  padding:14px;
  transition:.15s;
}
.contact__card:hover{ transform: translateY(-1px); }

.contact__icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-surface-2);
  border:1px solid var(--c-border);
  font-size:18px;
}
.contact__t{ font-weight:900; }

/* Social block */
.social{
  margin-top: 14px;
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  border-radius: var(--radius);
  padding: 14px;
}
.social__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.social__title{ font-weight: 900; }
.social__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.social__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--c-border);
  background: var(--c-surface-3);
  color: var(--c-text-strong);
  font-weight: 900;
}
.social__item:hover{ transform: translateY(-1px); }
.social__ico{
  width:34px;
  height:34px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-surface-2);
  border:1px solid var(--c-border);
}

/* Form */
.form{
  height: 100%;
  border:1px solid var(--c-border);
  background: var(--c-surface-1);
  border-radius: var(--radius);
  padding:16px;
}

label{ display:block; font-weight:800; margin-bottom:10px; }

input, textarea, select{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--c-border-weak);
  background: var(--c-surface-4);
  color:var(--text);
  outline:none;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(243,156,18,.55);
  box-shadow: 0 0 0 4px rgba(243,156,18,.12);
}

.toast{ margin:10px 0 0; font-weight:800; }
.toast--error{ color:#ffd1d1; }

/* honeypot */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* =========================
   LIGHTBOX
========================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
}
.lightbox[hidden]{ display:none; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(1000px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(17,19,26,.65);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  overflow:hidden;
}

.lightbox__img{
  width:100%;
  height:auto;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  display:block;
  background:#000;
}

.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  transition:.15s;
}
.lightbox__close:hover{ transform: translateY(-1px); }

.lightbox__nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.lightbox__nav--prev{ left:10px; }
.lightbox__nav--next{ right:10px; }

/* =========================
   FOOTER
========================= */
.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  background: var(--c-footer-bg);
    margin-top: 40px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.footer__links{ display:flex; gap:12px; }
.footer__links a{ color:var(--muted); }
.footer__links a:hover{ color:var(--text); }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; gap:18px; }
  h1{ font-size:44px; }
  .split{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .contact{ grid-template-columns:1fr; }
  .profiles{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  /*
    Reserve space for the fixed bottom CTA on mobile.
    --bottom-ui is measured in JS (mobile CTA height).
    --vv-offset is set via visualViewport to account for Android toolbars.
  */
  body{
    padding-bottom: calc(var(--bottom-ui) + var(--safe-bottom) + var(--vv-offset) + 16px);
  }
  .nav{ display:none; }
  .burger{ display:block; }
  .mobile{ display:block; }
  .mobile-cta{ display:block; }
  /* mobile menu base */
  .mobile{
    position: static;
    width: 100%;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    z-index: 1000;
  }
  .mobile__backdrop{
    display: none;
  }
  .mobile__panel{
    position: relative;
    margin-top: 0;
    background: var(--c-panel);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 0 14px;
  }
  .mobile a{ padding: 14px 22px; font-size: 18px; }
  .mobile a:hover{ background: var(--c-surface-2); }

  /* bar view (auto at top) */
  .mobile.is-bar{
    position: sticky;
    top: 0;
  }
  .mobile.is-bar .mobile__panel{
    display: flex;
    gap: 6px;
    justify-content: space-around;
    align-items: center;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 8px 6px;
  }
  .mobile.is-bar a{
    padding: 10px 10px;
    font-size: 16px;
  }

  /* overlay view (burger open) */
  .mobile.is-overlay{
    position: fixed;
    top: 64px;
    right: 12px;
    left: auto;
    width: min(320px, calc(100% - 24px));
  }
  .mobile.is-overlay .mobile__panel{
    border-radius: 16px;
  }

.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + var(--safe-bottom) + var(--vv-offset));
  width: 100%;
  max-width: 100%;
  padding-left: calc(12px + var(--safe-left));
  padding-right: calc(12px + var(--safe-right));
  z-index: 1002;
  box-sizing: border-box;
  background: transparent;
  transition: opacity .15s ease, transform .15s ease;
}

  .mobile-cta,
  .mobile-cta .mobile-cta__inner,
  .mobile-cta .mobile-cta__inner > *{
    min-width: 0;
  }

  .mobile-cta__inner{
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--c-border);
    background: var(--c-topbar-bg);
    backdrop-filter: blur(10px);
  }

  .mobile-cta .btn{
    width: 100%;
    justify-content: center;
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 12px 12px;
    line-height: 1.1;
  }

  /* Extra-tight phones: keep 2 columns but slightly smaller text */
  @media (max-width: 360px){
    .mobile-cta__inner{
      gap: 8px;
      padding: 8px 10px;
    }
    .mobile-cta .btn{
      font-size: 13px;
      padding: 10px 10px;
    }
  }

  footer{
    padding-bottom: 140px;
  }

  /* burger always visible on mobile */
  .burger{
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 1001;
  }

  .topbar__inner{
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .brand{
    margin-right: auto;
  }

  h1{ font-size:40px; }
  .gallery{ grid-template-columns:1fr; }
  .section__headRow{ align-items:flex-start; flex-direction:column; }
  .social__grid{ grid-template-columns: 1fr; }
}
/* Plakaty w ofercie */
.poster{
  display:block;
  margin: 12px 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: rgba(0,0,0,.25);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.poster:hover{
  transform: translateY(-2px);
  border-color: rgba(243,156,18,.25);
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

.poster img{
  width:100%;
  height:auto;
  display:block;
}
/* FORCE: wszystkie kafelki w OFERCIE mają pomarańczowy glow */
#oferta .tile{
  border: 1px solid rgba(243,156,18,.35) !important;
  box-shadow:
    0 0 0 1px rgba(243,156,18,.15),
    0 18px 40px rgba(0,0,0,.35) !important;
}
/* Oferta: wszystkie pastylki (tagi/badge) na pomarańczowo */
#oferta .pill,
#oferta .tag,
#oferta .chip,
#oferta .badge{
  border-color: rgba(243,156,18,.45) !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(243,156,18,.12) !important;
}
/* Zdjęcia zespołu – O nas */
.profile__photo{
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;

  border-radius: 18px;
  border: 1px solid var(--c-border-weak);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
/* =========================
   TRIP PAGES
========================= */
.trip-hero{
  padding: 36px 0 18px;
}
.trip-hero__lead{
  margin: 8px 0 16px;
  color: var(--c-text-muted);
  max-width: 70ch;
}
.itinerary{
  padding: 10px 0 26px;
}
.itinerary__list{
  display: grid;
  gap: 10px;
}
.itinerary__day{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 12px 14px;
}
.itinerary__day summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.itinerary__day summary::-webkit-details-marker{
  display: none;
}
.itinerary__day summary::after{
  content: "+";
  opacity: .7;
}
.itinerary__day[open] summary::after{
  content: "-";
}
.itinerary__day ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.itinerary__day li{
  margin: 4px 0;
  color: var(--c-text-muted);
}
.itinerary__day:focus-within{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.itinerary-layout{
  display: grid;
  gap: 16px;
}
.itinerary-nav{
  display: none;
}
.itinerary-nav a{
  display: block;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.itinerary-nav a:hover,
.itinerary-nav a:focus-visible{
  color: var(--c-text);
  border-color: var(--c-border);
  background: rgba(255,255,255,0.03);
  outline: none;
}
.itinerary-days{
  display: grid;
  gap: 12px;
}
.day-card{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
}
.day-head{
  margin-bottom: 8px;
}
.day-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-weight: 600;
}
.day-num{
  color: var(--c-text);
}
.day-date,
.day-place{
  color: var(--c-text-muted);
  font-weight: 500;
}
.day-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--c-text-muted);
  line-height: 1.6;
}
@media (min-width: 900px){
  .itinerary-layout{
    grid-template-columns: 190px 1fr;
    align-items: start;
  }
  .itinerary-nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 90px;
  }
}
.trip-pricing{
  padding: 8px 0 26px;
}
.trip-pricing__grid{
  display: grid;
  gap: 12px;
}
.trip-pricing__card{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
}
.trip-back{
  padding: 4px 0 32px;
}
.trip-callout,
.trip-info,
.trip-audience,
.trip-steps{
  padding: 10px 0 24px;
}
.trip-callout p,
.trip-info li,
.trip-audience li{
  line-height: 1.6;
}
.trip-callout .btn{
  margin-top: 10px;
}
.trip-info ul,
.trip-audience ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.offer-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.offer-chips span{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: 13px;
  color: var(--c-text-muted);
}
.for-who{
  padding: 10px 0 24px;
}
.for-who-grid{
  display: grid;
  gap: 12px;
}
.for-who-box{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
}
.for-who-box.yes{
  border-left: 3px solid rgba(255,165,0,0.35);
}
.for-who-box.no{
  border-left: 3px solid rgba(255,255,255,0.08);
}
.for-who-box h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.for-who-box ul{
  margin: 0;
  padding-left: 18px;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.included{
  padding: 10px 0 24px;
}
.included h2{
  margin: 0 0 10px;
}
.included ul{
  margin: 0;
  padding-left: 18px;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.offer-cta{
  padding: 6px 0 18px;
}
.offer-cta .container{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
}
.price{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.price-main{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.price-note{
  margin: 0;
  font-size: 13px;
  color: var(--c-text-muted);
}
@media (min-width: 900px){
  .for-who-grid{
    grid-template-columns: 1fr 1fr;
  }
  .offer-cta{
    position: sticky;
    top: 90px;
    z-index: 4;
  }
}

/* =========================
   CHAT WIDGET
========================= */
.chat-widget{
  --chat-bottom: 24px;
}
.chat-fab{
  position: fixed;
  right: 20px;
  bottom: var(--chat-bottom);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-4);
  color: var(--c-text);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.chat-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.chat-fab__icon{
  font-size: 16px;
}
.chat-panel{
  position: fixed;
  right: 20px;
  bottom: calc(var(--chat-bottom) + 58px);
  width: min(360px, 92vw);
  max-height: min(520px, 76vh);
  display: flex;
  flex-direction: column;
  background: var(--c-surface-4);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 1201;
}
.chat-panel.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 1000;
}
.chat-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.chat-panel__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
}
.chat-panel__title{
  font-weight: 700;
}
.chat-panel__subtitle{
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.chat-term{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text-muted);
}
.chat-term__change{
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.chat-panel__close{
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  font-size: 18px;
  cursor: pointer;
}
.chat-messages{
  padding: 12px 14px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  flex: 1;
}
.chat-message{
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.4;
  font-size: 13px;
  white-space: pre-wrap;
}
.chat-message.user{
  background: rgba(255,165,0,0.18);
  color: var(--c-text);
  justify-self: end;
}
.chat-message.bot{
  background: rgba(255,255,255,0.06);
  color: var(--c-text-muted);
  justify-self: start;
}
.chat-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 12px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.chat-chip{
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-muted);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.chat-chip:hover,
.chat-chip:focus-visible{
  color: var(--c-text);
  border-color: rgba(255,165,0,0.45);
  outline: none;
}
.chat-input{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--c-border);
}
.chat-input input{
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: rgba(0,0,0,0.15);
  color: var(--c-text);
  padding: 8px 10px;
}
.chat-input button{
  border-radius: 10px;
  border: 0;
  background: rgba(255,165,0,0.85);
  color: #111;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}
.chat-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
}
.chat-action{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.chat-action:hover,
.chat-action:focus-visible{
  color: var(--c-text);
  border-color: rgba(255,165,0,0.45);
  outline: none;
}
@media (max-width: 768px){
  .chat-widget{
    --cta-gap: 12px;
    /* Bottom UI height is measured dynamically in JS from .mobile-cta */
    --chat-right: calc(12px + var(--safe-right));
    --chat-left: calc(12px + var(--safe-left));
    --chat-bottom: calc(12px + var(--safe-bottom) + var(--vv-offset) + var(--bottom-ui) + var(--cta-gap));
  }
  .chat-fab{
    right: var(--chat-right);
    bottom: var(--chat-bottom);
    z-index: 900;
    max-width: calc(100vw - var(--chat-left) - var(--chat-right));
  }
  .chat-panel{
    right: var(--chat-right);
    bottom: calc(var(--chat-bottom) + 58px);
    width: min(360px, calc(100vw - var(--chat-left) - var(--chat-right)));
    max-width: calc(100vw - var(--chat-left) - var(--chat-right));
    height: min(62vh, 560px);
    border-radius: 18px;
    z-index: 1001;
    transform: translateY(12px);
    background: var(--c-surface-4);
    backdrop-filter: blur(10px);
  }
  .chat-panel__head{
    flex: 0 0 auto;
  }
  .chat-messages{
    flex: 1 1 auto;
    min-height: 120px;
    padding-bottom: 18px;
  }
  .chat-chips{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
  }
  .chat-input{
    flex: 0 0 auto;
  }
}

/* MOBILE: gdy chat otwarty, ukryj sticky CTA na dole */
@media (max-width: 768px) {
  body:has(.chat-panel.is-open) .mobile-cta,
  body.chat-open .mobile-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity .15s ease, transform .15s ease;
  }
}

/* Android subpixel/offset guard */
html, body{
  margin: 0;
  padding: 0;
}
body{
  position: relative;
  left: 0;
  right: 0;
}
@media (max-width: 768px){
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .page,
  main,
  .container,
  .wrap,
  .section,
  .topbar,
  header{
    width: 100%;
    max-width: 100%;
  }
}

.trip-steps ol{
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

/* Profile modal (o-nas.html) */
.profile-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7,9,12,.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 2000;
}
.profile-modal[hidden]{
  display: none;
}
.profile-modal__panel{
  width: min(980px, calc(100% - 24px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transform: scale(0.92) translateY(16px);
  opacity: 0;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
  will-change: transform, opacity;
}
.profile-modal__close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 20px;
}
.profile-modal__content .profile__p{
  font-size: 1.05em;
  line-height: 1.6;
}
.profile-modal__content .profile__photo{
  max-width: 520px;
}
.profile-modal__backdrop{
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}
.profile-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.profile-modal.is-open .profile-modal__backdrop{
  opacity: 1;
}
.profile-modal.is-open .profile-modal__panel{
  transform: scale(1) translateY(0);
  opacity: 1;
}
@media (min-width: 768px){
  .trip-pricing__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .itinerary__list{
    gap: 12px;
  }
}
/* =========================
   MOBILE POLISH (<= 480px)
========================= */
@media (max-width: 480px){

  /* mniejsze “oddechy” */
  .section{ padding: 44px 0; }
  .hero{ padding: 44px 0 12px; }

  /* hero typografia */
  h1{ font-size: 34px; line-height: 1.05; }
  .lead{ font-size: 16px; }

  /* badge w hero – żeby wyglądało równo */
  .badge{
    font-size: 12px;
    padding: 8px 10px;
    line-height: 1.2;
    white-space: normal; /* pozwala ładnie zawijać */
  }

  /* CTA w hero – przyciski pełną szerokość */
  .hero__cta .btn{
    width: 100%;
    justify-content: center;
  }

  /* szybkie info (Terminy/Grupy...) – lepsza czytelność */
  .quick li{
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  /* kafelki oferty – trochę ciaśniej */
  .tile{ padding: 14px; }
  .tile h3{ font-size: 18px; }

  /* plakaty w ofercie – żeby nie dominowały ekranu */
  .poster img{
    max-height: 420px;
    object-fit: cover;
    width: 100%;
  }

  /* social – już masz 1 kolumnę przy 720px, tu tylko “touch feel” */
  .social__item{
    padding: 12px;
  }

  /* menu mobilne: większy klik */
  .mobile a{
    padding: 14px 20px;
  }
}

/* Na urządzeniach dotykowych wyłączamy “hover transform”, żeby nie skakało */
@media (hover: none){
  .tile:hover,
  .tab:hover,
  .social__item:hover,
  .mini-link:hover,
  .link:hover,
  .contact__card:hover{
    transform: none;
  }
}

/* Hamburger zawsze dostępny w rogu (mobile) */
@media (max-width: 768px){
  .burger{
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 20000;
    width: 46px;
    height: 46px;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 0;
    line-height: 0;
    text-align: center;

    background: rgba(0,0,0,.35);
    border: 1px solid var(--c-border-weak);
    border-radius: 14px;
    backdrop-filter: blur(10px);
  }

  .burger span{
    display: block;
    flex: 0 0 auto;
    margin: 0 !important;
    height: 2px;
    width: 22px;
    background: var(--c-text-strong);
    border-radius: 999px;
  }

}

.trust{
  padding: 28px 0 10px;
}

.trust .section-title{
  margin: 0 0 8px;
}

.trust .section-lead{
  margin: 0 0 16px;
  color: var(--c-text-muted);
  max-width: 60ch;
}

.trust-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.trust-card{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.trust-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 165, 0, 0.35);
}

.trust-card:active{
  transform: translateY(0px);
}

.trust-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  border-color: rgba(255, 165, 0, 0.45);
}

.trust-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 165, 0, 0.10);
  margin-bottom: 8px;
  font-size: 18px;
}

.trust-card h3{
  margin: 0 0 6px;
  font-size: 16px;
}

.trust-card p{
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.scroll-anchor{
  height: 1px;
}

.faq{
  padding: 28px 0;
}

.faq .section-lead{
  margin: 0 0 14px;
  color: var(--c-text-muted);
  max-width: 60ch;
}

.faq-list{
  display: grid;
  gap: 10px;
}

.faq-item{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 12px 14px;
}

.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  outline: none;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-item summary::after{
  content: "＋";
  opacity: 0.75;
  font-weight: 700;
}

.faq-item[open] summary::after{
  content: "－";
}

.faq-body{
  margin-top: 10px;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.faq-item:focus-within{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.compare{
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
}
.compare input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.compare-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.compare-tabs label{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  cursor: pointer;
}
#compare-spring:checked ~ .compare-tabs label[for="compare-spring"],
#compare-summer:checked ~ .compare-tabs label[for="compare-summer"],
#compare-autumn:checked ~ .compare-tabs label[for="compare-autumn"]{
  color: var(--c-text);
  border-color: rgba(255,165,0,0.45);
  background: rgba(255,165,0,0.1);
}
.compare-panels .compare-panel{
  display: none;
}
#compare-spring:checked ~ .compare-panels .compare-panel--spring,
#compare-summer:checked ~ .compare-panels .compare-panel--summer,
#compare-autumn:checked ~ .compare-panels .compare-panel--autumn{
  display: grid;
  gap: 10px;
}
.compare-panel ul{
  margin: 0;
  padding-left: 18px;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.compare-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--c-text);
  font-weight: 600;
}

.how-it-works{
  padding: 28px 0 36px;
}
.how-grid{
  display: grid;
  gap: 12px;
}
.how-card{
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 16px;
  padding: 14px;
}
.how-step{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(255,165,0,0.12);
  margin-bottom: 8px;
}
.how-card h3{
  margin: 0 0 6px;
  font-size: 16px;
}
.how-card p{
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.5;
}
@media (min-width: 768px){
  .how-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-steps{
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(255,165,0,0.10),
    rgba(255,165,0,0.03) 60%,
    transparent
  );
  border-left: 3px solid rgba(255,165,0,0.55);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.contact-steps h3{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.steps li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
}

.step-num{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  background: rgba(255,165,0,0.25);
}

.step-text{
  font-size: 13px;
  line-height: 1.35;
  color: var(--c-text);
}

.contact-note{
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-text-muted);
}

@media (min-width: 1024px){
  .contact-steps{
    margin-bottom: 18px;
  }
}

@media (max-width: 768px){
  #kontakt-form{
    scroll-margin-top: 96px;
  }

  .contact-steps{
    margin-top: 10px;
    margin-bottom: 14px;
  }
}

@media (min-width: 768px){
  .trust{
    padding: 36px 0 14px;
  }
  .trust-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .trust-card{
    padding: 16px;
  }
}