/*
  Global stylesheet for the QuantumLeap Technologies website.

  The design aims to mirror the premium, dark‑themed aesthetic of the original
  Squarespace site while staying lightweight and completely static.  The
  palette is dominated by deep blacks and cosmic accent colours.  Text uses
  modern serif and sans‑serif typefaces for a sophisticated look.  Sections
  are separated with generous spacing and optional SVG waves for fluid
  transitions.
*/

/* Reset and base typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  background-color: #000000;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1.5em;
  font-size: 1.1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* Header and navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

header .logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: bold;
}

nav ul {
  display: flex;
  gap: 2rem;
}

nav a {
  font-weight: 600;
  transition: opacity 0.3s;
}

nav a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* Hero sections */
.hero {
  min-height: 90vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  padding-top: 120px;
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  color: #ffffff;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

/* Section layout */
.section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  gap: 2rem;
  background-color: #000000;
}

.section:nth-child(even) {
  background-color: #050505;
}

.image-container {
  flex: 1 1 300px;
  text-align: center;
}

.image-container img {
  width: 80%;
  max-width: 450px;
  border-radius: 50%;
  object-fit: cover;
}

.text-container {
  flex: 1 1 400px;
  max-width: 600px;
}

.text-container h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

.text-container p {
  font-size: 1.1rem;
}

.list {
  display: flex;
  flex-direction: column;
}

.list li {
  padding: 0.75rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.list li:last-child {
  border-bottom: none;
}

/* Contact form */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 5rem 2rem;
}

.contact-info {
  flex: 1 1 300px;
}

.contact-info h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.contact-info p,
.contact-info a {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}

.contact-form-container {
  flex: 1 1 400px;
  max-width: 600px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

input,
textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0;
  font-size: 1rem;
  color: #ffffff;
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

button {
  background: #e0e0e0;
  color: #000000;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}

button:hover {
  background: #d0d0d0;
}

/* Footer */
.footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
  background-color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer a {
  color: #ffffff;
  margin-left: 0.5rem;
  transition: opacity 0.3s;
}

.footer a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  nav ul {
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .section {
    padding: 3rem 1.5rem;
  }
  .contact-section {
    padding: 3rem 1.5rem;
  }
  .image-container img {
    width: 60%;
  }
}