/* GLOBAL SYSTEM */
:root {
  --primary: #2a9d8f;
  --primary-hover: #23867a;

  --bg-main: #f8fafc;
  --bg-alt: #f1f5f9;

  --text-main: #111827;
  --dark: #0a0a0a;

  --border-soft: rgba(0,0,0,0.08);
}





html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}



/* Main layout container */
.container-main {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 80px);
}

/* Narrow reading container */
.container-narrow {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* medium container  */
.container-medium {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}


/* Main sections */
.section {
  padding-block: clamp(50px, 6vw, 80px);
}

/* big sections */
.section-lg {
  padding-block: clamp(80px, 10vw, 110px);
}

/* Tight sections */
.section-sm {
  padding-block: clamp(30px, 4vw, 50px);
}



.section-tight {
  padding-top: 0;
}

.section-bottom-tight {
  padding-bottom: 0;
}





.container-narrow h2 {
  letter-spacing: -0.01em;
}




@media (max-width: 900px) {
  #navLinks {
    position: fixed;
    top: 72px;
    right: 0;

    width: 80%;
    height: calc(100vh - 72px);

    display: flex;
    flex-direction: column;

    gap: 20px;
    padding: 40px 20px;

    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);

    z-index: 999;
  }
}
@media (max-width: 900px) {
  #navLinks {
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }

  #navLinks.flex {
    transform: translateX(0);
  }
}