:root {
      --purple-dark: #3e1e6f;
      --purple-light: #6a2dc1;
      --accent: #ffd500;
      --bg: #2c134f;
      --surface: #4a2788;
      --surface-2: #5a30a3;
      --text: #fff;
      --muted: #e7ddffb3;
      --ok: #10b981;
      --err: #ef4444;
      --radius: 16px;
      --container: 1200px;
      --font-sans: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    }

    * {
      box-sizing: border-box
    }

    html{
      scroll-behavior: smooth;
    }
    html.scrolling-to-map body{ scroll-snap-type: none !important; }




    body {
      margin: 0;
      background: var(--purple-dark);
      color: var(--text);
      font-family: var(--font-sans);
      overflow-x: hidden
    }

    /* Top bar */
    .appbar {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(62, 30, 111, .85);
      backdrop-filter: saturate(140%) blur(8px);
      border-bottom: 1px solid #7041c94d
    }

    .appbar-inner {
      max-width: var(--container);
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none
    }

    .brand img {
      width: 250px;
      object-fit: contain
    }

    .brand span {
      font-weight: 700
    }

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    nav a {
      color: #fff;
      opacity: .9;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none
    }

    nav a:hover,
    nav a.active {
      background: #ffffff1a
    }

    /* Hero */
    header.hero {
      display: grid;
      place-items: start center;
      text-align: center;
      min-height: 100vh;
      padding: clamp(2rem, 5vw, 4rem) 1rem;
      background: radial-gradient(1200px 600px at 20% -10%, #6a2dc1 0%, #3e1e6f 60%, #2c134f 100%);
    }

    .hero-inner {
      max-width: 900px
    }

    .hero img {
      width: 100%;
      margin: 0 auto 1rem
    }

    .hero h1 {
      font-size: clamp(1.6rem, 5.5vw, 3rem);
      font-weight: 700;
      margin: .5rem 0 1rem
    }

    .hero p {
      font-size: clamp(1rem, 3.5vw, 1.25rem);
      opacity: .95;
      max-width: 60ch;
      margin: 0 auto 1.5rem
    }

    .button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: .9rem 1.3rem;
      border-radius: 12px;
      font-weight: 700;
      color: #2c134f;
      background: var(--accent);
      text-decoration: none;
      box-shadow: 0 10px 30px #ffd50033;
      border: 1px solid #00000010
    }

    .button:hover {
      filter: brightness(.95)
    }

    /* Sections */
    main {
      display: grid;
      gap: clamp(2rem, 5vw, 4rem);
      padding: clamp(2rem, 5vw, 4rem) 1rem
    }

    section {
      max-width: var(--container);
      margin: 0 auto;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s, transform .6s
    }

    section.visible {
      opacity: 1;
      transform: none
    }

    .section-title {
      font-size: clamp(1.5rem, 4.2vw, 2.3rem);
      font-weight: 700;
      margin-bottom: .5rem;
      color: var(--accent)
    }

    .section-content {
      font-size: clamp(1rem, 3.2vw, 1.125rem);
      line-height: 1.6;
      color: #fff
    }

    /* Cards / media */
    .card {
      background: linear-gradient(180deg, #ffffff10, #ffffff08);
      border: 1px solid #ffffff24;
      border-radius: var(--radius);
      padding: 18px
    }

    .media {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background: #5a30a3;
      border: 1px solid #ffffff24
    }

    .badge {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #00000066
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px
    }

    .col-4 {
      grid-column: span 4
    }

    .col-6 {
      grid-column: span 6
    }

    .col-8 {
      grid-column: span 8
    }

    .col-12 {
      grid-column: span 12
    }

    @media (max-width:900px) {

      .col-4,
      .col-6,
      .col-8 {
        grid-column: 1 / -1
      }
    }

    /* Pannellum / map */
    .pano {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius);
      overflow: hidden
    }

    #map {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius);
      overflow: hidden
    }

    /* Route UI */
    .route-ui {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin: 12px 0 8px
    }

    .input-wrap {
      position: relative;
      flex: 1 1 260px;
      min-width: 220px
    }

    .route-ui input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #ffffff2b;
      background: #ffffff12;
      color: #fff;
      outline: none
    }

    .route-ui input::placeholder {
      color: #ffffffb3
    }

    .swap-btn {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid #ffffff2b;
      background: #ffffff12;
      color: #fff;
      cursor: pointer
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      background: var(--accent);
      color: #2c134f;
      font-weight: 700;
      border: 0;
      cursor: pointer
    }

    .btn.ghost {
      background: #ffffff12;
      color: #fff;
      border: 1px solid #ffffff2b
    }

    .suggestions {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: #2c134f;
      border: 1px solid #ffffff2b;
      border-radius: 12px;
      margin-top: 6px;
      box-shadow: 0 10px 30px #00000033;
      display: none;
      max-height: 260px;
      overflow: auto;
      z-index: 20
    }

    .suggestions.show {
      display: block
    }

    .suggestions>div {
      padding: 10px 12px;
      cursor: pointer
    }

    .suggestions>div:hover {
      background: #ffffff12
    }

    /* Estimator form */
    .form {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px
    }

    .form .field {
      grid-column: span 6
    }

    .form .field.full {
      grid-column: span 12
    }

    .form label {
      display: block;
      margin: 4px 0 8px;
      font-weight: 600
    }

    .form input,
    .form select {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #ffffff2b;
      background: #ffffff12;
      color: #fff;
      outline: none
    }

    .small {
      color: var(--muted);
      font-size: .9rem
    }

    /* Footer / mobile dock */
    footer {
      border-top: 1px solid #ffffff24;
      background: #2c134f
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 20px;
      max-width: var(--container);
      padding: 24px;
      margin: 0 auto
    }

    @media (max-width:900px) {
      .footer-grid {
        grid-template-columns: 1fr
      }
    }

    .cta-dock {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 16px;
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 30
    }

    .cta-dock-inner {
      pointer-events: auto;
      display: flex;
      gap: 10px;
      padding: 8px;
      border-radius: 999px;
      background: #3e1e6fee;
      border: 1px solid #ffffff2b
    }

    @media (min-width:901px) {
      .cta-dock {
        display: none
      }
    }

    /* === Responsive nav (auto-hamburger) === */

    .appbar {
      --appbar-h: 64px;
    }

    /* nadpiszemy runtime w JS */
    #site-nav {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Przycisk hamburgera domyślnie ukryty */
    .nav-toggle {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 10px;
      background: #ffffff12;
      color: #fff;
      border: 1px solid #ffffff2b;
      cursor: pointer;
    }

    .nav-toggle:focus-visible {
      outline: 2px solid #ffd500;
      outline-offset: 2px;
    }

    .nav-toggle-label {
      font-weight: 600;
      opacity: .9
    }

    /* Lista w poziomie (desktop) */
    #site-menu {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    #site-menu a {
      color: #fff;
      opacity: .9;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none
    }

    #site-menu a:hover,
    #site-menu a.active {
      background: #ffffff1a
    }

    /* Gdy brakuje miejsca – klasa .collapsed na .appbar-inner */
    .appbar-inner.collapsed .nav-toggle {
      display: inline-flex;
    }

    .appbar-inner.collapsed #site-menu {
      display: none;
    }

    /* Otwarte menu w trybie „hamburger” */
    body.menu-open .appbar-inner.collapsed #site-menu {
      display: flex;
      flex-direction: column;
      position: fixed;
      z-index: 50;
      top: calc(var(--appbar-h) + 8px);
      left: 12px;
      right: 12px;
      padding: 10px;
      gap: 6px;
      background: rgba(62, 30, 111, .98);
      border: 1px solid #7041c94d;
      border-radius: 12px;
      box-shadow: 0 12px 30px #0008;
    }

    body.menu-open .appbar-inner.collapsed #site-menu a {
      padding: 12px 14px;
    }

    /* Drobna redukcja logo w trybie „ciasno” */
    .appbar-inner.collapsed .brand img {
      width: 180px;
    }

    /* Fallback breakpoint gdyby ktoś sztucznie ścisnął okno bardzo wąsko */
    @media (max-width: 880px) {
      .nav-toggle {
        display: inline-flex;
      }

      #site-menu {
        display: none;
      }
    }

    /* Hero musi być relative, dodajemy też dolny padding pod strzałkę */
header.hero{ position:relative; padding-bottom:clamp(3.5rem,6vh,72px); }

/* Scroll hint – wycentrowana „pastylka” z delikatną animacją */
.scroll-hint{
  position:absolute; left:50%; bottom:25vh;
  transform:translate(-50%,0);
  width:84px; height:84px; display:grid; place-items:center;
  border-radius:999px;
  background:#ffffff12; border:1px solid #ffffff2b; color:var(--accent);
  box-shadow:0 8px 24px #ffd50033;
  text-decoration:none; transition:opacity .25s, transform .25s, background .2s;
  animation:hintFloat 1.8s ease-in-out infinite;
}
.scroll-hint:hover{ background:#ffffff1a; }
.scroll-hint:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Schowanie gdy przewiniemy */
.scroll-hint.hide{ opacity:0; pointer-events:none; transform:translate(-50%,8px); }

/* Animacja „bob” – podskok w górę */
@keyframes hintFloat{
  0%,100%{ transform:translate(-50%,0); }
  50%    { transform:translate(-50%,-6px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-hint{ animation:none; }
}

/* --- Smart hero collapse + snap --- */
:root{
  --hero-full: 100svh;                              /* pełny start */
  --hero-collapsed: clamp(560px, 60vh, 900px);      /* po zwinięciu */
  --appbar-h: 64px;                                  /* nadpisywane w JS, ale dajemy default */
}

/* start: pełny ekran */
header.hero{
  min-height: var(--hero-full);
  transition: min-height 0.6s ease-in-out;
}

/* po minimalnym scrollu: skompresuj hero, by szybciej odsłonić treść */
body.hero-collapsed header.hero{
  min-height: var(--hero-collapsed);
}

/* scroll-snap na całej stronie – subtelny (proximity) */
@supports (scroll-snap-type: y proximity){
  body{ scroll-snap-type: y proximity; }
  header.hero, main > section{ scroll-snap-align: start; }
  /* gdy nawigacja jest sticky – nie przykrywaj kotwic */
  main > section{ scroll-margin-top: calc(var(--appbar-h) + 8px); }
}

#mapa .section-title{ scroll-margin-top: calc(var(--appbar-h) + 8px); }
html.scrolling-to-map body{ scroll-snap-type: none !important; }


/* Strzałka bardziej „przy krawędzi” i spójna z collapse */
.scroll-hint{
  bottom: clamp(16px, 6vh, 36px);
  width: 56px; height: 56px;
}

#map { position: relative; }


/* pozycja kontrolki */
.m3-attrib{ position:absolute; right:8px; bottom:6px; z-index:999 }

/* guzik © */
.m3-attrib__toggle{
  width:24px; height:24px; border:0; border-radius:50%;
  background:#0b1f3a; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}

/* czysty tekst nad guzikiem (bez tła/box-shadow) */
.m3-attrib__content{
  position:absolute; right:35px; bottom:0px;
  font-size:11px; line-height:1.3; white-space:nowrap;
  color:#000; padding:0; border-radius:0; box-shadow:none;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.m3-attrib__content a{ color:#000; text-decoration:none }
.m3-attrib__content a:hover{ text-decoration:underline }

/* mocny brand, reszta przygaszona */
.m3-attrib__brand{ font-weight:700 }      /* m3ntor.dev */
.m3-attrib__content .dim{ opacity:.3 }    /* OpenMapTiles + OSM */

/* stan rozwinięty */
.m3-attrib--open .m3-attrib__content{
  opacity:1; transform:translateY(0); pointer-events:auto;
}