/*
  Museli Landing Page Styles
  ==========================
  This stylesheet defines the look and feel for the Museli marketing site.  The
  colour palette is inspired by the original Museli app with dark blues and
  greens.  Variables at the top make it easy to adjust the theme.  Each
  section is clearly delineated with generous spacing and simple layouts to
  encourage reading on both desktop and mobile.  Subtle fade‑in animations
  using IntersectionObserver bring the content to life as the user scrolls.
*/

/* Root variables
   -------------
   The palette uses deep blues for backgrounds, turquoise for highlights and
   off‑white for text.  Feel free to adjust these values to perfectly match
   your brand colours. */
:root {
  --color-primary: #081B2A;
  /* Deep navy used for darkest backgrounds */
  --color-secondary: #102A43;
  /* Lighter navy for alternating sections */
  --color-accent: #00A676;
  /* Turquoise green for buttons and highlights */
  --color-accent-light: #17C3B2;
  /* Lighter green for hover states */
  --color-text-light: #F5F5F5;
  /* Off‑white for headings and body text */
  --color-text-muted: #B0C4D9;
  /* Muted blue‑grey for supporting text with better contrast */
  --color-card-bg: rgba(255, 255, 255, 0.08);
  /* Slightly lighter translucent card background */
  --color-feature-bg: #0A2749;
  /* Background colour for the features section */
  --color-testimonial-bg: #031E3A;
  /* Background colour for the testimonials section */
  --border-radius: 8px;
  /* Default border radius for cards */
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Typography */
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-light);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-align: center;
  transition: background-color .2s ease-in-out;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-accent-light);
}

/* Navbar */
.navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding-top: 60px;
  padding-bottom: 80px;
}

/* Masthead logo in hero */
.masthead {
  display: flex;
  justify-content: center;
  margin-bottom: 0rem;
}

.masthead img {
  width: 280px;
  height: auto;
}

.hero-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.hero-text {
  flex: 1 1 45%;
  max-width: 540px;
}

.hero-text p {
  max-width: 600px;
}

.hero-screenshots {
  flex: 1 1 45%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero-screenshots .screenshot {
  width: 80%;
  border-radius: var(--border-radius);
}

/* Features Section */
.features {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-feature-bg) 100%);
  padding: 80px 0;
}

.features h2 {
  color: var(--color-accent);
  margin-bottom: 2rem;
  text-align: center;
}

.features-content {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
}

.features-list {
  flex: 1 1 50%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.feature-item {
  background-color: var(--color-card-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: left;
  transition: transform .2s ease-in-out;
}

.feature-item:hover {
  transform: translateY(-4px);
}

.feature-item i {
  /* Icon defined via inline SVG; this rule remains for backwards compatibility if font icons are used */
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
}

/* Inline SVG icons inside feature items */
.feature-item svg {
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  fill: var(--color-accent);
}

.feature-item h3 {
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.feature-item p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.features-screenshot {
  flex: 1 1 40%;
  text-align: center;
}

.features-screenshot .screenshot {
  width: 80%;
  border-radius: var(--border-radius);
}

/* Testimonials Section */
.testimonials {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-testimonial-bg) 100%);
  padding: 80px 0;
  text-align: center;
}

.testimonials h2 {
  color: var(--color-accent);
  margin-bottom: 2rem;
}

.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.testimonial-item {
  background-color: var(--color-card-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  max-width: 350px;
  flex: 1 1 280px;
  text-align: left;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.testimonial-item .stars {
  color: var(--color-accent);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.testimonial-item .stars i {
  margin-right: 0.15rem;
}

.testimonial-item p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.testimonial-item .author {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
}

/* Final Call To Action */
.final-cta {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  padding: 60px 0;
  text-align: center;
  color: var(--color-primary);
}

.final-cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.final-cta p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.final-cta .store-buttons a img:hover {
  transform: scale(1.05);
}

/* Footer */
.footer {
  background-color: var(--color-secondary);
  color: var(--color-text-muted);
  padding: 30px 0;
  text-align: center;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a {
  margin: 0 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color .2s ease-in-out;
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Utilities */
.store-buttons {
  gap: 1rem;
  align-items: center;
}

.store-buttons img {
  height: 2.8rem;
  margin: 0.1rem;
}

/* Sticky Header */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  z-index: 1000;
  transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.site-header .logo-wrapper img {
  height: 64px;
  transition: transform .3s ease;
}

.site-header.scrolled {
  background-color: var(--color-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0;
}

.site-header.scrolled .logo-wrapper img {
  transform: scale(0.75);
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive rules */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  .hero-content-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .features-content {
    flex-direction: column;
  }

  .features-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .features-screenshot {
    margin-bottom: 2rem;
  }

  .testimonial-item {
    max-width: 100%;
  }
}