:root{
    --ink:#0C1620;        /* noční navy pozadí */
    --ink-2:#122130;      /* panely */
    --ink-3:#1A2E3F;      /* karty */
    --paper:#F4EFE4;      /* teplý papír */
    --paper-text:#1C2A33;
    --brass:#E8B15A;      /* mosaz / kompas — teplý akcent */
    --seafoam:#79C7BE;    /* stopa / moře — chladný akcent */
    --mist:#9DB0BC;       /* tlumený text na tmavém */
    --hair:rgba(157,176,188,.16);
    --shadow:0 24px 60px -20px rgba(0,0,0,.55);
    --display:"Fraunces",Georgia,serif;
    --body:"Hanken Grotesk",system-ui,sans-serif;
    --mono:"Space Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);color:#E7EEF2;font-family:var(--body);
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--seafoam)}

  /* ---------- NAV ---------- */
  .nav{position:fixed;top:0;left:0;right:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;
    background:linear-gradient(to bottom,rgba(12,22,32,.85),rgba(12,22,32,0));
    backdrop-filter:blur(2px)}
  .brand{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em}
  .brand .a{color:var(--brass)} .brand .dot{color:var(--mist);margin:0 .12em}
  .brand .b{color:var(--seafoam)}
  .menu{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
  .menu a{position:relative;padding:4px 0;transition:color .25s}
  .menu a:hover,.menu a:focus-visible{color:#fff}
  .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
    background:var(--brass);transition:width .3s}
  .menu a:hover::after,.menu a:focus-visible::after{width:100%}

  /* ---------- HERO / MAPA ---------- */
  .hero{position:relative;height:min(92vh,820px);min-height:560px}
  #map{position:absolute;inset:0;background:var(--ink);z-index:1}
  .hero-scrim{position:absolute;inset:0;z-index:400;pointer-events:none;
    background:
      linear-gradient(to top,rgba(12,22,32,.92) 3%,rgba(12,22,32,.28) 42%,rgba(12,22,32,.1) 72%),
      linear-gradient(to right,rgba(12,22,32,.55) 0%,rgba(12,22,32,.08) 46%,rgba(12,22,32,0) 70%)}
  .hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:500;pointer-events:none}
  .hero-copy .wrap{padding-bottom:52px}
  .hero-copy .eyebrow{opacity:0;transform:translateY(12px);
    animation:rise .8s .2s forwards}
  .hero-h1{font-family:var(--display);font-weight:600;line-height:.98;
    font-size:clamp(46px,8vw,104px);letter-spacing:-.02em;margin:.18em 0 .28em;
    max-width:14ch}
  .hero-h1 span{display:block}
  .hero-h1 .em{font-style:italic;font-weight:500;color:var(--brass)}
  .hero-h1 span{opacity:0;transform:translateY(20px);animation:rise .9s forwards}
  .hero-h1 span:nth-child(1){animation-delay:.32s}
  .hero-h1 span:nth-child(2){animation-delay:.44s}
  .hero-stats{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    font-family:var(--mono);font-size:13px;color:var(--mist);
    opacity:0;animation:rise .9s .6s forwards}
  .hero-stats b{color:#fff;font-weight:700}
  .hero-stats .sep{color:var(--seafoam)}
  .hero-hint{margin-top:20px;display:inline-flex;align-items:center;gap:10px;
    font-size:14px;color:var(--mist);opacity:0;animation:rise .9s .8s forwards}
  .hero-hint .pin{width:9px;height:9px;border-radius:50%;background:var(--brass);
    box-shadow:0 0 0 0 rgba(232,177,90,.6);animation:ping 2.4s infinite}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(232,177,90,.55)}
    70%{box-shadow:0 0 0 12px rgba(232,177,90,0)}100%{box-shadow:0 0 0 0 rgba(232,177,90,0)}}

  /* ---------- LEAFLET přebarvení ---------- */
  .leaflet-container{font-family:var(--body);background:var(--ink)}
  .leaflet-control-attribution{background:rgba(12,22,32,.6)!important;
    color:#6d818e!important;font-size:10px}
  .leaflet-control-attribution a{color:#8ba0ad!important}
  .leaflet-bar a{background:var(--ink-2)!important;color:var(--mist)!important;
    border-color:var(--hair)!important}
  .leaflet-bar a:hover{background:var(--ink-3)!important;color:#fff!important}
  .trace-marker{position:relative}
  .trace-marker i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:15px;height:15px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%,#fff6e6 0%,var(--brass) 55%,#c8912f 100%);
    border:1.5px solid rgba(255,244,224,.9);
    box-shadow:0 0 16px 4px rgba(232,177,90,.9),0 0 3px 1px rgba(255,255,255,.6)}
  .trace-marker i::after{content:"";position:absolute;inset:-6px;border-radius:50%;
    border:1px solid var(--seafoam);opacity:.7;
    animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.6);opacity:0}}
  .leaflet-popup-content-wrapper{background:var(--ink-2);color:#E7EEF2;
    border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow)}
  .leaflet-popup-tip{background:var(--ink-2);border:1px solid var(--hair)}
  .leaflet-popup-content{margin:16px 18px}
  .pop-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--seafoam)}
  .pop-t{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.05;margin:4px 0 8px}
  .pop-c{font-family:var(--mono);font-size:11px;color:var(--mist)}
  .pop-cta{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;
    letter-spacing:.08em;color:var(--brass);border-bottom:1px solid var(--brass);padding-bottom:2px}

  /* ---------- SEKCE ---------- */
  .section{padding:96px 0}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;
    gap:20px;margin-bottom:40px;border-bottom:1px solid var(--hair);padding-bottom:20px}
  .sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,46px);
    letter-spacing:-.01em}
  .sec-head a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--seafoam);white-space:nowrap}
  .sec-head a:hover{color:var(--brass)}

  /* karty cest */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;
    display:block;border:1px solid var(--hair);
    transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .card .cover{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .card:hover .cover{transform:scale(1.06)}
  .card .grain{position:absolute;inset:0;
    background:radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.14),transparent 55%),
      linear-gradient(to top,rgba(10,17,24,.92),rgba(10,17,24,.15) 55%,rgba(10,17,24,.05))}
  .card .meta{position:absolute;left:0;right:0;bottom:0;padding:22px}
  .card .yr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--brass)}
  .card .ttl{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;margin:6px 0 6px}
  .card .co{font-family:var(--mono);font-size:11px;color:var(--mist);
    display:flex;gap:8px;align-items:center}
  .card .co .g{color:var(--seafoam)}
  .card .tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.12em;text-transform:uppercase;color:#eaf3f5;
    background:rgba(12,22,32,.55);border:1px solid var(--hair);
    padding:5px 10px;border-radius:999px;backdrop-filter:blur(3px)}

  /* ---------- CESTOVNÍ PAS ---------- */
  .passport{background:var(--ink-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .pass-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
  .pass-lead h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,48px);
    line-height:1.02;margin:14px 0 16px}
  .pass-lead p{color:var(--mist);max-width:42ch}
  .stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .stamp{background:var(--ink);border:1px solid var(--hair);border-radius:14px;padding:22px 18px;text-align:center}
  .stamp .n{font-family:var(--display);font-weight:600;font-size:40px;color:var(--brass);line-height:1}
  .stamp .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mist);margin-top:8px}

  /* ---------- FOOTER ---------- */
  footer{padding:64px 0 48px}
  .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .foot .big{font-family:var(--display);font-size:clamp(28px,5vw,54px);font-weight:500;line-height:1}
  .foot .big em{color:var(--seafoam);font-style:italic}
  .foot .meta{font-family:var(--mono);font-size:12px;color:var(--mist);text-align:right}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:820px){
    .menu{display:none}
    .cards{grid-template-columns:1fr 1fr}
    .pass-grid{grid-template-columns:1fr;gap:36px}
    .section{padding:72px 0}
  }
  @media(max-width:540px){
    .cards{grid-template-columns:1fr}
    .hero-copy .wrap{padding-bottom:36px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .hero-copy .eyebrow,.hero-h1 span,.hero-stats,.hero-hint{opacity:1;transform:none}
  }
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

  .factbox{margin-top:22px;padding:16px 18px;border:1px solid var(--hair);border-left:3px solid var(--brass);
    border-radius:12px;background:rgba(232,177,90,.05)}
  .factlabel{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
  .facttext{font-family:var(--display);font-size:19px;line-height:1.4;color:#e7eef2}

  .quoteband{max-width:820px;margin:0 auto;padding:9vh 26px 1vh;text-align:center}
  .quoteband p{font-family:var(--display);font-style:italic;font-size:clamp(21px,3.3vw,31px);line-height:1.42;color:#dfe8ec}
  .quoteband .m{color:var(--brass);font-style:normal}
  .next{max-width:1080px;margin:5vh auto 0;padding:0 26px}
  .next a{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--hair);border-radius:16px;
    background:linear-gradient(120deg,rgba(121,199,190,.09),rgba(232,177,90,.05));text-decoration:none;color:inherit;transition:.2s}
  .next a:hover{border-color:var(--brass)}
  .next .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--seafoam);margin-bottom:5px}
  .next .t{font-family:var(--display);font-size:clamp(21px,3vw,30px);font-weight:600;color:#fff}
  .next .cd{margin-left:auto;text-align:right;font-family:var(--mono);font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:.1em}
  .next .cd b{display:block;font-family:var(--display);font-size:32px;color:var(--brass);line-height:1}