*,

*::before,

*::after {

  box-sizing: border-box;

}



:root {

  --primary: #1f97e0;

  --primary-soft: rgba(31, 151, 224, 0.12);

  --bg: #050910;

  --bg-alt: #080d15;

  --card: #0d141f;

  --border-subtle: rgba(255, 255, 255, 0.06);

  --text: #f9fafb;

  --text-soft: #9ca3af;

  --danger: #f97373;

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.45);

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: radial-gradient(circle at top left, #12263d 0, #050910 40%, #020309 80%);

  color: var(--text);

}



a {

  color: #fff;

  text-decoration: none;

}



a:hover {

  color: #1f97e0; /* accent barva */

}



/* Layout helpers */



.container {

  width: min(1120px, 100% - 3rem);

  margin-inline: auto;

}



.section {

  padding: 5rem 0;

}



.section-alt {

  padding: 5rem 0;

  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.1));

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}



.section-header {

  max-width: 640px;

  margin: 0 auto 3rem;

  text-align: center;

}



.section-header h2 {

  margin: 0 0 0.5rem;

  font-size: clamp(2rem, 1.5rem + 1vw, 2.4rem);

  letter-spacing: 0.03em;

}



.section-header p {

  margin: 0;

  color: var(--text-soft);

}



/* Header */



.site-header {

  position: sticky;

  top: 0;

  z-index: 40;

  backdrop-filter: blur(16px);

  background: linear-gradient(to bottom, rgba(5, 9, 16, 0.9), rgba(5, 9, 16, 0.75), transparent);

  border-bottom: 1px solid rgba(148, 163, 184, 0.12);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-block: 0.9rem;

}



.logo {

  font-weight: 700;

  letter-spacing: 0.12em;

  font-size: 1rem;

  text-transform: uppercase;

  padding: 0.3rem 0.75rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.35);

  background: radial-gradient(circle at 0 0, rgba(31, 151, 224, 0.55), transparent 55%), rgba(15, 23, 42, 0.8);

}



/* Navigation */



.main-nav {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.nav-link {

  position: relative;

  font-size: 0.9rem;

  text-decoration: none;

  color: var(--text-soft);

  padding: 0.35rem 0.7rem;

  border-radius: 999px;

  transition: color 160ms ease, background 160ms ease, transform 160ms ease;

}



.nav-link::after {

  content: "";

  position: absolute;

  left: 0.8rem;

  right: 0.8rem;

  bottom: 0.1rem;

  height: 2px;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--primary), transparent);

  opacity: 0;

  transform: translateY(3px);

  transition: opacity 160ms ease, transform 160ms ease;

}



.nav-link:hover {

  color: #e5e7eb;

  background: rgba(15, 23, 42, 0.9);

  transform: translateY(-1px);

}



.nav-link:hover::after {

  opacity: 1;

  transform: translateY(0);

}



.nav-cta {

  background: var(--primary-soft);

  color: #e5f0ff;

  border: 1px solid rgba(56, 189, 248, 0.3);

}



.nav-cta:hover {

  background: var(--primary);

}



/* Mobile nav toggle */



.nav-toggle {

  display: none;

  width: 2.25rem;

  height: 2.25rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.5);

  background: rgba(15, 23, 42, 0.9);

  cursor: pointer;

  align-items: center;

  justify-content: center;

  gap: 0.22rem;

  padding: 0;

}



.nav-toggle span {

  display: block;

  width: 1.3rem;

  height: 2px;

  border-radius: 999px;

  background: #e5e7eb;

  transition: transform 160ms ease, opacity 160ms ease;

}



.nav-toggle.is-open span:nth-child(1) {

  transform: translateY(4px) rotate(45deg);

}



.nav-toggle.is-open span:nth-child(2) {

  opacity: 0;

}



.nav-toggle.is-open span:nth-child(3) {

  transform: translateY(-4px) rotate(-45deg);

}



/* Hero */



.hero {

  padding: 5rem 0 4.5rem;

}



.hero-inner {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

  align-items: center;

  gap: 3.5rem;

}



.eyebrow {

  text-transform: uppercase;

  letter-spacing: 0.18em;

  font-size: 0.75rem;

  color: #a5f3fc;

  margin-bottom: 0.7rem;

}



.hero h1 {

  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.4rem);

  margin: 0 0 0.75rem;

}



.hero .accent {

  color: var(--primary);

}



.hero-subtitle {

  margin: 0 0 1.6rem;

  color: var(--text-soft);

  max-width: 540px;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

  margin-bottom: 1.1rem;

}



.hero-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

  font-size: 0.82rem;

  color: var(--text-soft);

}



.hero-meta span {

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.5);

  background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));

}



/* Buttons */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.65rem 1.4rem;

  border-radius: 999px;

  border: 1px solid transparent;

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 500;

  cursor: pointer;

  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;

}



.btn.primary {

  background: radial-gradient(circle at 0 0, #38bdf8, #1f97e0 45%, #0f5caa 100%);

  border-color: rgba(56, 189, 248, 0.7);

  color: #eff6ff;

  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.45);

}



.btn.primary:hover {

  transform: translateY(-1px);

  box-shadow: 0 22px 50px rgba(37, 99, 235, 0.65);

}



.btn.ghost {

  background: rgba(15, 23, 42, 0.85);

  border-color: rgba(148, 163, 184, 0.65);

  color: #e5e7eb;

}



.btn.ghost:hover {

  background: rgba(15, 23, 42, 1);

}



/* Hero gallery */



.hero-gallery {

  display: grid;

  gap: 1rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.hero-photo {

  position: relative;

  border-radius: 1.5rem;

  overflow: hidden;

  min-height: 9rem;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border: 1px solid rgba(148, 163, 184, 0.45);

  box-shadow: var(--shadow-soft);

  isolation: isolate;

}



.hero-photo::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.65));

  mix-blend-mode: multiply;

}



.hero-photo .tag {

  position: absolute;

  left: 0.9rem;

  bottom: 0.8rem;

  padding: 0.25rem 0.75rem;

  font-size: 0.75rem;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.85);

  border: 1px solid rgba(148, 163, 184, 0.7);

  backdrop-filter: blur(12px);

}



/* Placeholder imagery – nahraditelné vlastními fotkami */



.hero-photo-a {

  grid-row: span 2;

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.15), transparent), url("images/D/D12.jpg");

}



.hero-photo-b {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.22), transparent), url("images/D/F06.jpg");

}



.hero-photo-c {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/F20.jpg");

}



/* About */



/* ABOUT – čistý responsivní layout */



.about-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 sloupce na desktopu */

  gap: 2rem;

}



/* karta – uvnitř použijeme grid: text vlevo, fotka vpravo */

.about-card {

  display: grid;

  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr); /* širší text, užší fotka */

  column-gap: 1.8rem;

  align-items: center;

  padding: 1.8rem 1.8rem;

  border-radius: 1.4rem;

  background: radial-gradient(circle at top left, rgba(31, 151, 224, 0.18), transparent 55%), var(--card);

  border: 1px solid var(--border-subtle);

  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.6);

}



/* text – vše do levého sloupce, pod sebou */

.about-card h3 {

  grid-column: 1;

  margin: 0 0 0.2rem;

  font-size: 1.2rem;

  text-align: left;

}



.about-card .role {

  grid-column: 1;

  margin: 0 0 0.8rem;

  font-size: 0.86rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: #a5f3fc;

  text-align: left;

}



.about-card p {

  grid-column: 1;

  margin: 0;

  color: var(--text-soft);

  text-align: left;

}



/* „bublina“ s fotkou – vpravo, 3:4 na výšku */

.avatar-ring {

  grid-column: 2;

  grid-row: 1 / span 3;      /* zabere výšku celé textové části */

  justify-self: flex-end;

  padding: 3px;

  border-radius: 1.4rem;

  background: conic-gradient(

    from 160deg,

    rgba(31, 151, 224, 0.1),

    rgba(31, 151, 224, 0.9),

    rgba(31, 151, 224, 0.1)

  );

}



.avatar {

  width: 170px;              /* desktop velikost */

  aspect-ratio: 3 / 4;       /* vertikální poměr */

  border-radius: 1.3rem;

  background-size: cover;

  background-position: center;

  border: 2px solid rgba(15, 23, 42, 0.95);

}



/* ZDROJ FOTEK – tady dosaď svoje cesty */

.avatar-a {

  background-image: url("images/D-avatar.jpg");

}



.avatar-b {

  background-image: url("images/F-avatar.jpg");

}



/* RESPONSIVE – tablet / užší displeje */

@media (max-width: 900px) {

  .about-grid {

    grid-template-columns: minmax(0, 1fr); /* jen 1 sloupec – karty pod sebou */

  }



  .about-card {

    grid-template-columns: minmax(0, 1fr); /* uvnitř karty vše do jednoho sloupce */

  }



  .avatar-ring {

    grid-column: 1;

    grid-row: 1;

    justify-self: center;

    margin-bottom: 1rem;

  }



  .about-card h3,

  .about-card .role,

  .about-card p {

    grid-column: 1;

    text-align: left; /* klidně můžeš změnit na center, pokud se ti to víc líbí */

  }



  .avatar {

    width: 150px;

  }

}



/* EXTRA mobile ladění */

@media (max-width: 600px) {

  .about-card {

    padding: 1.4rem 1.4rem;

  }



  .avatar {

    width: 130px;

  }

}







.about-card p {

  margin: 0;

  color: var(--text-soft);

}



/* Portfolio */



.portfolio-controls {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  justify-content: center;

  margin-bottom: 2.2rem;

}



.filter-btn {

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.7);

  padding: 0.4rem 0.9rem;

  background: rgba(15, 23, 42, 0.85);

  color: var(--text-soft);

  font-size: 0.82rem;

  cursor: pointer;

  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;

}



.filter-btn:hover {

  transform: translateY(-1px);

  border-color: rgba(56, 189, 248, 0.8);

}



.filter-btn.active {

  background: var(--primary);

  color: white;

  border-color: transparent;

}



.portfolio-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.5rem;

}



.portfolio-item {

  margin: 0;

  border-radius: 1.4rem;

  overflow: hidden;

  background: var(--card);

  border: 1px solid var(--border-subtle);

  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.7);

  display: flex;

  flex-direction: column;

}



.portfolio-photo {

  aspect-ratio: 3 / 2;

  background-size: cover;

  background-position: center;

  position: relative;

}



/* pro fotky na výšku – vyšší poměr stran */

.portfolio-photo.portrait {

  aspect-ratio: 3 / 4;  /* klidně uprav na 2 / 3 podle reálných fotek */

  background-position: center top; /* nahoře, ať nejsou uříznuté hlavy */

}



/* Badge s počtem lajků na kartě v top-likes */



.portfolio-like-badge {

  position: absolute;

  right: 0.9rem;

  bottom: 0.9rem;

  display: inline-flex;

  align-items: center;

  gap: 0.3rem;

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.9);

  border: 1px solid rgba(148, 163, 184, 0.8);

  font-size: 0.8rem;

  color: #e5e7eb;

  backdrop-filter: blur(4px);

}



.portfolio-like-badge .heart {

  font-size: 0.95rem;

}



.portfolio-like-badge .count {

  min-width: 1.5rem;

  text-align: right;

}





/* Dummy photos – přepište v CSS nebo nahraďte vlastními soubory */



.ph-1 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D13.jpg");

}



.ph-2 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D08.jpg");

}



.ph-3 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D37.jpg");

}



.ph-4 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/F03.jpg");

}



.ph-5 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/F05.jpg");

}



.ph-6 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/F04.jpg");

}



.ph-7 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D10.jpg");

}



.ph-8 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D38.jpg");

}



.ph-9 {

  background-image: linear-gradient(135deg, rgba(31, 151, 224, 0.2), transparent), url("images/D/D44.jpg");

}



.portfolio-item figcaption {

  padding: 1.1rem 1.2rem 1.25rem;

}



.portfolio-item h3 {

  margin: 0 0 0.3rem;

  font-size: 1rem;

}



.portfolio-item p {

  margin: 0;

  font-size: 0.86rem;

  color: var(--text-soft);

}



.portfolio-note {

  margin-top: 2rem;

  text-align: center;

  font-size: 0.85rem;

  color: var(--text-soft);

}



/* --- Galerie – pás fotek --- */



.gallery-carousel {

  position: relative;

  margin-top: 1.5rem;

}



.gallery-track {

  display: flex;

  gap: 0.5rem;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 0.5rem 0.25rem 0.75rem;
  
    -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-snap-type: none; /* pokud bys někde měl snap */

}



/* schování ošklivého scrollbaru tam, kde to jde */

.gallery-track::-webkit-scrollbar {

  height: 6px;

}

.gallery-track::-webkit-scrollbar-track {

  background: rgba(15, 23, 42, 0.9);

}

.gallery-track::-webkit-scrollbar-thumb {

  background: rgba(148, 163, 184, 0.7);

  border-radius: 999px;

}

.gallery-track {
  scrollbar-width: none; /* Firefox */
}
.gallery-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.gallery-track.is-dragging { scroll-behavior: auto !important; }




.gallery-thumb {

  flex: 0 0 auto;

  height: 300px;              /* jednotná výška */

  width: auto;

  border-radius: 0.9rem;

  object-fit: cover;          /* různé poměry stran – ořeže se jen přebytek */

  border: 1px solid rgba(148, 163, 184, 0.5);

  cursor: pointer;

  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.7);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;

}



.gallery-thumb:hover {

  transform: translateY(-2px);

  border-color: rgba(56, 189, 248, 0.9);

  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.9);

}



/* šipky v karuselu */



.gallery-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border-radius: 999px;

  width: 2.2rem;

  height: 2.2rem;

  border: 1px solid rgba(148, 163, 184, 0.6);

  background: rgba(15, 23, 42, 0.96);

  color: #e5e7eb;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 2;

  font-size: 1.3rem;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);

  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;

}



.gallery-arrow:hover {

  background: var(--primary);

  border-color: rgba(56, 189, 248, 0.9);

  transform: translateY(-50%) translateY(-1px);

}



.gallery-arrow-prev {

  left: 0;

}



.gallery-arrow-next {

  right: 0;

}



/* --- Lightbox / popup --- */



.lightbox {

  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.9);

  backdrop-filter: blur(6px);

  display: none;               /* ve výchozím stavu skryté */

  align-items: center;

  justify-content: center;

  z-index: 60;

}



.lightbox.is-open {

  display: flex;

}



.lightbox-backdrop {

  position: absolute;

  inset: 0;

}



.lightbox-dialog {

  position: relative;

  max-width: min(90vw, 1200px);

  max-height: min(85vh, 800px);

  display: flex;

  align-items: center;

  justify-content: center;

}



.lightbox-image {

  max-width: 100%;

  max-height: 100%;

  border-radius: 1rem;

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);

  object-fit: contain;   /* DŮLEŽITÉ – zobrazí celou fotku, neřeže ji */

  background: #000;      /* jen když máš hodně úzké portréty, ať okraje nejsou divné */

}



/* když je lightbox v režimu single obrázku (hero / avatar), schovej šipky */

.lightbox.is-single .lightbox-nav {

  display: none;

}





/* zavírací křížek */



.lightbox-close {

  position: absolute;

  top: -3rem;

  right: 0;

  width: 2.3rem;

  height: 2.3rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.7);

  background: rgba(15, 23, 42, 0.98);

  color: #e5e7eb;

  font-size: 1.4rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* šipky v lightboxu */



.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 2.6rem;

  height: 2.6rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.7);

  background: rgba(15, 23, 42, 0.95);

  color: #e5e7eb;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

}



.lightbox-nav-prev {

  left: -3.2rem;

}



.lightbox-nav-next {

  right: -3.2rem;

}



/* Lajky v lightboxu */



.lightbox-like {

  position: absolute;

  bottom: -3rem;

  left: 50%;

  transform: translateX(-50%);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.35rem 0.9rem;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.96);

  border: 1px solid rgba(148, 163, 184, 0.7);

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);

  font-size: 0.9rem;

}



.like-button {

  border: none;

  background: transparent;

  cursor: pointer;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.like-icon {

  font-size: 1.2rem;

  transition: transform 0.15s ease, text-shadow 0.15s ease;

}



/* když uživatel fotku lajkl */

.like-button.liked .like-icon {

  transform: scale(1.2);

  text-shadow: 0 0 10px rgba(248, 113, 113, 0.9);

}



.like-count {

  min-width: 2rem;

  text-align: right;

  color: #e5e7eb;

}



/* při režimu single (hero/avatar/portfolio) schováme šipky, ale lajky necháme */

.lightbox.is-single .lightbox-nav {

  display: none;

}



@media (max-width: 720px) {

  .lightbox-like {

    bottom: -2.4rem;

    padding: 0.3rem 0.75rem;

  }

}





@media (max-width: 720px) {

  .gallery-thumb {

    height: 200px;

  }



  .lightbox-dialog {

    max-width: 100vw;

    max-height: 80vh;

    padding-inline: 1rem;

  }



  .lightbox-nav-prev {

    left: 0.4rem;

  }

  .lightbox-nav-next {

    right: 0.4rem;

  }

  .lightbox-close {

    top: 0.8rem;

    right: 0.8rem;

  }

}



/* na mobilech ještě trochu víc prostoru a nižší výška */



@media (max-width: 768px) {

  .section-top-likes {

    padding-top: 4.5rem;

    padding-bottom: 4.5rem;

  }



  .top-likes-page .section-inner {

    padding-inline: 1.25rem;

  }



  .top-likes-grid .portfolio-photo {

    aspect-ratio: 3 / 4;

  }

}



/* Pricing */



.pricing-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.5rem;

}

/* poslední položku ceníku dej do prostředního sloupce (2. pozice) */
.pricing-grid .pricing-card:last-child {
  grid-column: 2;
}
/* CENÍK – na úzkých obrazovkách do jednoho sloupce */
@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* ať se poslední karta (kterou dáváš na střed) nefixuje do 2. sloupce */
  .pricing-grid .pricing-card:last-child {
    grid-column: auto;
  }
}


.pricing-card {

  padding: 2.1rem 1.8rem;

  border-radius: 1.5rem;

  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.98));

  border: 1px solid var(--border-subtle);

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);

  position: relative;

}



.pricing-card-highlight {

  background: radial-gradient(circle at top left, rgba(31, 151, 224, 0.3), rgba(15, 23, 42, 1));

  border-color: rgba(56, 189, 248, 0.7);

  transform: translateY(-4px);

}



.pricing-card h3 {

  margin: 0 0 0.4rem;

  font-size: 1.2rem;

}



.price {

  margin: 0 0 0.9rem;

  font-size: 1.1rem;

  font-weight: 600;

  color: #e0f2fe;

}



.pricing-card ul {

  list-style: none;

  padding: 0;

  margin: 0;

  color: var(--text-soft);

  font-size: 0.9rem;

}



.pricing-card ul li {

  display: flex;

  align-items: flex-start;

  gap: 0.4rem;

  margin-bottom: 0.4rem;

}



.pricing-card ul li::before {

  content: "•";

  color: var(--primary);

  margin-top: 0.05rem;

}



.badge {

  position: absolute;

  top: 1.4rem;

  right: 1.5rem;

  font-size: 0.7rem;

  padding: 0.26rem 0.7rem;

  border-radius: 999px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  background: rgba(15, 23, 42, 0.9);

  border: 1px solid rgba(56, 189, 248, 0.85);

}



.pricing-note {

  margin-top: 1.8rem;

  text-align: center;

  font-size: 0.86rem;

  color: var(--text-soft);

}



/* Contact */



.contact-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);

  gap: 3rem;

  align-items: flex-start;

}



.contact-text h2 {

  margin: 0 0 0.8rem;

}



.contact-text p {

  margin: 0 0 0.8rem;

  color: var(--text-soft);

}



.contact-list {

  list-style: none;

  padding: 0;

  margin: 0 0 0.9rem;

  font-size: 0.9rem;

}



.contact-list li {

  margin-bottom: 0.3rem;

}



.contact-hint {

  font-size: 0.84rem;

  color: var(--text-soft);

  opacity: 0.9;

}



.contact-form {

  padding: 2.1rem 1.9rem;

  border-radius: 1.5rem;

  background: rgba(15, 23, 42, 0.98);

  border: 1px solid var(--border-subtle);

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7);

}



.form-row {

  display: grid;

  gap: 1rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.form-field {

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

  margin-bottom: 1rem;

}



label {

  font-size: 0.82rem;

  color: var(--text-soft);

}



input,

textarea,

select {

  border-radius: 0.9rem;

  border: 1px solid rgba(148, 163, 184, 0.7);

  background: rgba(15, 23, 42, 0.96);

  color: var(--text);

  padding: 0.55rem 0.85rem;

  font-size: 0.9rem;

  font-family: inherit;

  outline: none;

  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;

}



input:focus,

textarea:focus,

select:focus {

  border-color: rgba(56, 189, 248, 0.95);

  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5);

  background: rgba(15, 23, 42, 1);

}



textarea {

  resize: vertical;

  min-height: 140px;

}



.form-footer {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.8rem;

  margin-top: 0.6rem;

}



.form-note {

  font-size: 0.78rem;

  color: var(--text-soft);

  max-width: 380px;

}



/* Footer */



.site-footer {

  padding: 1.6rem 0 2.1rem;

  border-top: 1px solid rgba(15, 23, 42, 0.9);

  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.96), #020617);

}



.footer-inner {

  text-align: center;

  font-size: 0.82rem;

  color: var(--text-soft);

}



.footer-sub {

  margin-top: 0.45rem;

}



/* Scroll animation */



[data-animate] {

  opacity: 0;

  transform: translateY(12px);

  transition: opacity 360ms ease, transform 360ms ease;

}



[data-animate].is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* Utilities */



code {

  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-size: 0.8rem;

}



/* Responsive */



@media (max-width: 900px) {

  .hero-inner {

    grid-template-columns: minmax(0, 1fr);

  }



  .hero-gallery {

    order: -1;

  }



  .about-grid,

  .pricing-grid {

    grid-template-columns: minmax(0, 1fr);

  }



  .contact-layout {

    grid-template-columns: minmax(0, 1fr);

  }



  .pricing-card-highlight {

    transform: none;

  }



  .portfolio-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 720px) {

  .header-inner {

    padding-block: 0.7rem;

  }



.nav-toggle {
  display: flex;
  flex-direction: column;   /* DŮLEŽITÉ */
  justify-content: center;
  gap: 6px;
  padding: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
}




  .main-nav {

    position: fixed;

    inset-inline: 1.5rem;

    top: 3.7rem;

    border-radius: 1rem;

    padding: 0.7rem;

    background: rgba(15, 23, 42, 0.98);

    border: 1px solid rgba(148, 163, 184, 0.4);

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);

    flex-direction: column;

    gap: 0.2rem;

    opacity: 0;

    transform: translateY(-8px);

    pointer-events: none;

    transition: opacity 140ms ease, transform 140ms ease;

  }



  .main-nav.is-open {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }



  .nav-link {

    padding: 0.6rem 0.75rem;

  }



  .hero {

    padding-top: 4rem;

  }



  .hero-actions {

    flex-direction: column;

    align-items: stretch;

  }



  .portfolio-grid {

    grid-template-columns: minmax(0, 1fr);

  }



  .form-row {

    grid-template-columns: minmax(0, 1fr);

  }



  .section,

  .section-alt {

    padding: 3.5rem 0;

  }

}



@media (max-width: 480px) {

  .container {

    width: min(100% - 2rem, 100%);

  }



  .logo {

    font-size: 0.86rem;

  }



  .contact-form {

    padding: 1.6rem 1.4rem;

  }

}



/* Top likes – víc prostoru kolem obsahu */



.section-top-likes {

  padding-top: 6rem;

  padding-bottom: 6rem;

}



.top-likes-page .section-inner {

  max-width: 1120px;

  margin: 0 auto;

  padding-inline: 1.5rem;

}



/* Grid nejlajkovanějších fotek – použijeme contain, aby nebyly brutálně ořezané */



.top-likes-grid .portfolio-item {

  /* můžeš doladit – třeba větší gapy u top fotek */

}



.top-likes-grid .portfolio-photo {

  position: relative;

  width: 100%;

  /* vyšší formát, aby měly místo i fotky na výšku */

  aspect-ratio: 4 / 5;

  border-radius: 1.2rem;

  background-color: #020617;

  background-size: contain;     /* DŮLEŽITÉ – zobrazí celou fotku, neřeže ji */

  background-position: center;

  background-repeat: no-repeat;

  overflow: hidden;

}





/* Omezení stahování – zákaz drag & drop a označování */

img,

.portfolio-photo,

.hero-photo-a,

.hero-photo-b,

.hero-photo-c,

.avatar-a,

.avatar-b {

  -webkit-user-drag: none;

  user-drag: none;

  user-select: none;

}