.hp-field {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
    :root{
      /* VIAC DO MODRA */
      --bg:#04102a;        /* hlboká tmavomodrá */
      --panel:#051b3e;     /* karty */
      --panel2:#061f47;    /* jemný variant */
      --text:#eef5ff;
      --muted:#fff;
      --line:#173d7a;
      --brand:#2f7dff;     /* accent modrá */
      --brand2:#4cc3ff;    /* druhý accent */
      --shadow: 0 14px 50px rgba(0,0,0,.35);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      line-height:1.6;

      /* MODRÝ "GLOW" ako tmavý web */
      background:
        radial-gradient(1200px 720px at 12% -12%, rgba(47,125,255,.28), transparent 60%),
        radial-gradient(900px 640px at 92% 6%, rgba(76,195,255,.18), transparent 55%),
        radial-gradient(850px 520px at 55% 120%, rgba(47,125,255,.16), transparent 60%),
        var(--bg);
    }

    a{color:inherit}
    .container{max-width:1100px;margin:0 auto;padding:0 18px}
    .pill{
      display:inline-flex;gap:10px;align-items:center;
      padding:8px 12px;border:1px solid var(--line);
      border-radius:999px;background:rgba(255,255,255,.03);
      color:var(--muted);font-size:14px;
    }

    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(4,16,42,.62);
      border-bottom:1px solid rgba(23,61,122,.65);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 0;gap:12px;
    }
    .brand{display:flex;flex-direction:column;line-height:1.1}
    .brand strong{font-size:15px;letter-spacing:.2px}
    .brand span{font-size:12px;color:var(--muted)}
    nav ul{
      margin:0;padding:0;list-style:none;
      display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    }
    nav a{
      text-decoration:none;
      color:var(--muted);
      padding:8px 10px;border-radius:10px;
      border:1px solid transparent;
    }
    nav a:hover{color:var(--text);border-color:rgba(23,61,122,.75);background:rgba(255,255,255,.03)}

    .cta{
      display:inline-flex;gap:10px;align-items:center;
      text-decoration:none;
      padding:10px 12px;border-radius:12px;
      border:1px solid rgba(47,125,255,.45);
      background: linear-gradient(180deg, rgba(47,125,255,.20), rgba(47,125,255,.07));
      color:var(--text);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      white-space:nowrap;
    }
    .cta:hover{border-color:rgba(76,195,255,.55)}

    .hero{padding:44px 0 18px 0;}

    .card{
      background: rgba(5,27,62,.82);
      border:1px solid rgba(23,61,122,.95);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card-pad{padding:18px}

    h1{
      margin:10px 0 10px 0;
      font-size:34px;line-height:1.15;
      letter-spacing:-.3px;
    }
    .lead{color:var(--muted);font-size:16px;margin:0}

    section{padding:26px 0}
    .section-title{
      display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
      margin:0 0 10px 0;
    }
    .section-title h2{margin:0;font-size:22px;letter-spacing:-.2px}
    .section-title p{margin:0;color:var(--muted);font-size:14px}
    .divider{height:1px;background:rgba(23,61,122,.85);margin:14px 0}

    .prose{color:var(--text);font-size:15px}
    .prose p{color:var(--muted);margin:0 0 12px 0}
    .prose strong{color:var(--text)}

    .meta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

    .projects{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:14px;
    }
    .project{
      grid-column: span 6;
      overflow:hidden;
    }
    .project .top{
      padding:16px 16px 10px 16px;
      display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
    }
    .project h3{margin:0;font-size:16px}
    .project .sub{margin:4px 0 0 0;color:var(--muted);font-size:13px}
    .badge{
      font-size:12px;color:var(--muted);
      border:1px solid rgba(23,61,122,.95);
      padding:6px 10px;border-radius:999px;
      background:rgba(255,255,255,.03);
      white-space:nowrap;
    }
    .media{
      border-top:1px solid rgba(23,61,122,.95);
      background:#020a18;
    }
    .responsive-embed{position:relative;width:100%;padding-top:56.25%}
    .responsive-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

    .project .body{padding:14px 16px 16px 16px;color:var(--muted);font-size:14px}
    .project .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

    .btn{
      display:inline-flex;align-items:center;gap:8px;
      text-decoration:none;
      padding:9px 10px;border-radius:12px;
      border:1px solid rgba(23,61,122,.95);
      background:rgba(255,255,255,.03);
      color:var(--text);
    }
    .btn:hover{border-color:rgba(76,195,255,.55)}

    .gallery{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:12px;
    }
    .g-item{
      grid-column: span 4;
      position:relative;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(23,61,122,.95);
      background:rgba(255,255,255,.03);
      cursor:pointer;
      min-height:190px;
    }
    .g-item img{
      width:100%;height:100%;
      object-fit:cover;display:block;
      filter:saturate(1.08);
      transform:scale(1.01);
      transition: transform .25s ease, opacity .25s ease;
      opacity:.92;
    }
    .g-item:hover img{transform:scale(1.06);opacity:1}
    .g-cap{
      position:absolute;left:0;right:0;bottom:0;
      padding:10px;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
      color:#fff;font-size:13px;
    }

    .contact-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .contact-list{margin:0;padding:0;list-style:none}
    .contact-list li{padding:10px 0;border-bottom:1px solid rgba(23,61,122,.85);color:var(--muted)}
    .contact-list strong{color:var(--text)}
    form label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 0}
    input, textarea{
      width:100%;
      padding:11px 12px;
      border-radius:12px;
      border:1px solid rgba(23,61,122,.95);
      background: rgba(255,255,255,.03);
      color: var(--text);
      outline:none;
    }
    textarea{min-height:120px;resize:vertical}
    input:focus, textarea:focus{border-color: rgba(76,195,255,.62)}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .send{
      margin-top:10px;
      display:inline-flex;align-items:center;gap:10px;
      padding:11px 12px;border-radius:12px;
      border:1px solid rgba(76,195,255,.45);
      background: linear-gradient(180deg, rgba(76,195,255,.18), rgba(76,195,255,.06));
      color:var(--text);
      cursor:pointer;
    }
    .send:hover{border-color:rgba(76,195,255,.65)}
    footer{padding:26px 0 40px 0;color:var(--muted);font-size:13px}

    /* Lightbox */
    .lightbox{
      position:fixed;inset:0;
      background: rgba(0,0,0,.82);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:2000;
    }
    .lightbox.open{display:flex}
    .lightbox-inner{
      max-width:1100px;width:100%;
      background:#020a18;
      border:1px solid rgba(23,61,122,.95);
      border-radius:16px;
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    .lightbox-top{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:10px 12px;border-bottom:1px solid rgba(23,61,122,.95);
      color:var(--muted);font-size:13px;
    }
    .lightbox-close{
      appearance:none;border:1px solid rgba(23,61,122,.95);
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-radius:10px;
      padding:7px 10px;
      cursor:pointer;
    }
    .lightbox-close:hover{border-color:rgba(76,195,255,.55)}
    .lightbox-img{width:100%;height:auto;display:block;background:#000}

    @media (max-width: 920px){
      .projects .project{grid-column: span 12}
      .gallery .g-item{grid-column: span 6}
      .contact-grid{grid-template-columns:1fr}
      .form-row{grid-template-columns:1fr}
      h1{font-size:30px}
    }
    @media (max-width: 520px){
      .gallery .g-item{grid-column: span 12}
      nav ul{gap:8px}
    }
    
    /* PORTRÉT V HLAVIČKE */
.header-portrait{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(76,195,255,.55);
  background: radial-gradient(circle at 30% 30%, rgba(76,195,255,.25), rgba(0,0,0,.2));
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 18px rgba(47,125,255,.35);
  flex-shrink:0;
}

.header-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: translateY(2px) scale(1.05);
}

/* jemný hover – nič agresívne */
.header-portrait:hover{
  box-shadow:
    0 8px 22px rgba(0,0,0,.6),
    0 0 26px rgba(76,195,255,.55);
}

/* MOBIL – skryť portrét, nech je menu čisté */
@media (max-width: 720px){
  .header-portrait{
    display:block;
  }
}
/* WRAP PORTRÉT + LOGO */
.brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

/* PORTRÉT V HLAVIČKE */
.header-portrait{
  width:52px;
  height:52px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(76,195,255,.55);
  background: radial-gradient(circle at 30% 30%, rgba(76,195,255,.25), rgba(0,0,0,.2));
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 18px rgba(47,125,255,.35);
  flex-shrink:0;
}

.header-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: translateY(2px) scale(1.05);
}

/* jemný hover – decentný */
.header-portrait:hover{
  box-shadow:
    0 8px 22px rgba(0,0,0,.6),
    0 0 26px rgba(76,195,255,.55);
}

/* MOBIL – fotka sa schová, ostane len meno */
@media (max-width: 720px){
  .header-portrait{
    display:block;
  }
  

  .nav{
    flex-wrap:wrap;
    align-items:center;
  }

  /* poradie: logo vľavo, hamburger vpravo, menu pod tým */
  .brand-wrap{ order:1; }
  .nav-toggle{
    order:2;
    margin-left:auto;   /* drží hamburger vpravo */
  }

  header nav{
    order:3;
    flex-basis:100%;    /* nav vždy na celý riadok */
    width:100%;
  }

  /* default: menu skryté */
  header nav{ display:none; }

  /* po otvorení: menu sa ukáže pod hornou lištou */
  header.mobile-open nav{
    display:block;
    margin-top:10px;
  }


}
.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(76,195,255,.45);
  color:#fff;
  font-size:42px;
  width:56px;
  height:56px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

.lb-nav:hover{
  background:rgba(76,195,255,.25);
}

.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}

@media (max-width:600px){
  .lb-nav{
    width:44px;
    height:44px;
    font-size:32px;
  }
}
/* Lightbox: nech sa celý dialog nikdy nezmestí mimo obrazovku */
.lightbox-inner{
  position:relative;               /* kvôli .lb-nav absolute */
  max-width:1100px;
  width:100%;
  max-height: 92vh;                /* <-- kľúčové */
  display:flex;
  flex-direction:column;
}

/* Horný panel nech je vždy viditeľný */
.lightbox-top{
  flex: 0 0 auto;
}

/* Obrázok nech sa zmestí do zvyšnej plochy */
.lightbox-img{
  flex: 1 1 auto;
  width: 100%;
  height: auto;                    /* fallback */
  max-height: calc(92vh - 52px);   /* 52px ~ výška top baru, uprav podľa seba */
  object-fit: contain;             /* <-- kľúčové */
  display:block;
  background:#000;
}

/* keď by sa niečo aj tak prehuplo, nech sa dá scrollovať vnútri */
.lightbox-inner{
  overflow: hidden;
}
.responsive-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
}
.responsive-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items: stretch;   /* kľúčové */
}

/* každý card nech vyplní celý riadok */
.contact-grid .card{
  height:100%;
  display:flex;
  flex-direction:column;
}/* --- Mobile menu (hamburger) --- */
.nav-toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(23,61,122,.95);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:9px 10px;
  cursor:pointer;
  line-height:1;
}

@media (max-width: 720px){
    
    .contact-grid{
    grid-template-columns: 1fr !important;
  }
  /* skryj klasické menu, ukáž hamburger */
  header nav{
    display:none;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* CTA môžeš nechať, ale ak zavadzia, skry ju */
  .cta{
    display:none;
  }

  /* otvorené mobilné menu */
  header.mobile-open nav{
    display:block;
    width:100%;
    margin-top:10px;
  }
  header.mobile-open .nav{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  header.mobile-open nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 0;
  }
  header.mobile-open nav a{
    display:block;
    padding:10px 12px;
  }
}