html {
  scroll-behavior: smooth;
  scroll-padding: 60px;
}
body {
  background-color: #16181F;
  font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.page {
}
.content {
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;  
}
a {
  color: #8C9399;
}
h1 {
  color: #B4BEC8;
  font-size: 28px;
  text-align: center;
  border-bottom: 1px solid #B4BEC8;
  line-height: 1.5;
  padding-bottom: 0.5em;
  font-weight: 400;
}
h2 {
  color: #B4BEC8;
  font-size: 16px;
}
h3 {
  color: #B4BEC8;
  font-size: 14px;
}
h4 {
  color: #B4BEC8;
  font-size: 12px;
}
p, li {
  line-height: 1.5;
}
li
{
  color: #B4BEC8;
  font-weight: 400;
}
p {
  color: #B4BEC8;
  font-weight: 400;
}
p.note {
  color: #B4BEC8;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.top-bar {
  position: sticky;
  top: 0; 
  width: 100%;
  background: rgba(0, 0, 0, 0.7); 
  color: #B4BEC8;
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 1000;
  text-align: center;
}

.top-bar a {
  color: #B4BEC8;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: 400;
}

@media (max-width: 768px) {
  .top-bar a { margin: 0 0.25rem; }
}

.flex {
  display: flex;
  color: #B4BEC8;
  font-weight: 400;  
  width: 100%;
}

.flex .cell {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 768px) {
  .flex {
    flex-direction: column;
  }
}

.cell-header {
  /*padding: 1rem;*/
  font-weight: bold;
  text-align: center;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  min-width: 0;
}

.cell-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
}

.cell-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer; 
  border-radius: 8px;
  will-change: opacity;
}

.cell-desc {
  padding: 1rem;
  text-align: center;
}

.download-btn {
  display: inline-flex; 
  align-items: center;  
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  margin-bottom: 1rem;
  background-color: #2D323B;
  color: #B4BEC8;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 400;
  transition: background-color 0.2s ease;
  max-width: 200px; 
}

.btn-text {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  min-width: 0;   
  flex-shrink: 1; 
}

.download-btn:hover {
  background-color: #3A414C;
}

.btn-icon {
  height: 20px;
  flex-shrink: 0;
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; 
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Desktop: 2 columns */
.flex-grid .cell {
  flex: 1 1 calc(50% - 1rem);
  min-width: 150px;
  color: #B4BEC8;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 6px;
}

.flex-grid .cell.a {
  flex: 1 1 calc(35% - 1rem);
  background: #20232b;
  line-height: 0;
}

.flex-grid .cell.b {
  flex: 1 1 calc(65% - 1rem);
  font-size: 12px;
}

.flex-grid .cell.c {
  flex: 1 1 calc(65% - 1rem);
}

.flex-grid .cell ul {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}

.feature-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .flex-grid .cell.a {
    flex: 1 1 100%; 
  }
  .flex-grid .cell.b {
    flex: 1 1 100%; 
    padding-top: 0;
    padding-bottom: 0;
  }
  .flex-grid .cell.c {
    flex: 1 1 100%; 
    padding-top: 0;
    padding-bottom: 0;
  }  
}

.header {
  display: flex;
  border: 1px;
  border-color: red;
  height: 250px;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */  
}

.header-parallax {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.logo {
  z-index: 10;              /* above all layers */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;  
  color: white;
  font-size: 64px;
  color: #f8bbd0;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

.logo img {
  width: 96px;
  height: 96px;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.7));
}

@media (max-width: 768px) {
  .logo {
    font-size: 48px;
  }
  .logo img {
    width: 64px;
    height: 64px;
  }
}

.layer {
  position: fixed;
  min-width: 768px;
  max-width: 1200px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center top;
  will-change: transform;    /* smooth GPU animation */
  background-repeat: no-repeat;
  mix-blend-mode: screen; 
}

.bg {
  background-image: url(bg.png);
  background-color: #16181F;
  mix-blend-mode: normal;
  opacity: 1.0;
}

.layer1 {
  background-image: url(layer1.png);
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(270deg);
  opacity: 0.5;
}

.layer2 {
  background-image: url(layer2.png);
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(270deg);
  opacity: 0.5;
}

.layer3 {
  background-image: url(layer3.png);
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(270deg);
  opacity: 0.5;
}

.gallery img {
  width: 160px;
  cursor: pointer;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0,0,0,0.75);
  display: none;
  z-index: 1000;
  overscroll-behavior: contain;
  align-items: center;
  justify-content: center;  
}

.lightbox.open {
  display: flex;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
}

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 1001;
}

.lightbox-button-img {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(2px 2px 2px #000);
}

.close { top: 0.5rem; right: 0.5rem; }
.prev  { left: 0.5rem; }
.next  { right: 0.5rem; }