@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
  /* Adjust primary and secondary colours to lean more purple and reduce the blue tint.
     These values have been lightened slightly so interior pages feel less dark
     while still retaining the signature purple gradient. */
  /* Updated colour palette for a less overtly feminine look. The primary is a
     deeper violet and the secondary leans towards a dark indigo to reduce
     pinkish tones. */
  --primary: #6842a2; /* deep violet */
  --secondary: #3b287c; /* dark indigo */
  --text-light: #ffffff;
  --text-muted: #d3cce6;
  /* Lighten the default dark backgrounds so interior pages use a slightly lighter
     tone. */
  /* Further lighten the interior backgrounds to improve readability on all pages.
     The base dark tone is softened and the card backdrop has a higher alpha so
     content stands out better. */
  /* Dark backgrounds adjusted to harmonise with the new palette. The card
     backdrop is slightly more opaque to stand out on the gradient. */
  --bg-dark: #110a2e;
  --bg-card: rgba(255,255,255,0.1);
  --radius: 8px;
  --max-width: 1200px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Poppins',sans-serif;
  color:var(--text-light);
  line-height:1.6;
  background-color: var(--bg-dark);
}

/* Use the hero artwork across all pages. The home page displays the image in full
   colour, while other pages blend it with the gradient to create a subtle
   background. */
body.home {
  background-image: url('assets/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Use the same vibrant gradient backdrop on all interior pages as the home
   page. Removing the hero image overlay ensures consistent colours
   throughout the site. */
body:not(.home) {
  background-image: linear-gradient(135deg, var(--primary), var(--secondary));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Lighten the header backdrop on non‑home pages by reducing opacity */
/* Lighten header backdrop on all pages for better contrast */
header {
  backdrop-filter: blur(10px);
  background-color: rgba(20, 0, 60, 0.4);
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
}
.nav-container { max-width:var(--max-width); margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; }
nav ul { list-style:none; display:flex; gap:1.5rem; }
nav ul li a { color:var(--text-light); text-decoration:none; font-weight:500; }
nav ul li a:hover { color:var(--secondary); }
.logo a { font-weight:700; font-size:1.5rem; color:var(--text-light); text-decoration:none; }
/* Adjust logo sizing: enlarge the logo on desktop for better visibility and
   reduce the size slightly on smaller screens. The logo still scales
   proportionally thanks to an auto width. */
/* Increase the logo height for better visibility on desktop. It scales proportionally */
/* Logo sizing: enlarge further to match header height. */
/* Further enlarge the logo so it fills most of the header height on desktop. */
.logo img.site-logo {
  height:5rem;
  width:auto;
  vertical-align:middle;
  margin-right:0.75rem;
}

@media (max-width: 768px) {
  .logo img.site-logo {
    /* Slightly reduce the logo height on mobile to shorten the header */
    height:3rem;
    margin-right:0.5rem;
  }
}
.container { max-width:var(--max-width); margin:0 auto; padding:2rem; }
.btn-primary { background-image:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; padding:0.8rem 1.6rem; border:none; border-radius:var(--radius); cursor:pointer; transition:background 0.2s ease; text-decoration:none; font-size:1rem; display:inline-block; }
.btn-primary:hover { background-image:linear-gradient(135deg,var(--secondary),var(--primary)); }
.hero { min-height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:4rem 2rem; color:#fff; }
.hero h1 { font-size:3rem; margin-bottom:1rem; max-width:600px; }
.hero p { font-size:1.25rem; margin-bottom:2rem; max-width:550px; color:var(--text-muted); }

/* Increase whitespace between sections */
section.container:not(:first-of-type) {
  margin-top:3rem;
}

/* Trust and newsletter sections improvements */
.trust-section h2, .newsletter-section h2 {
  text-align:center;
  margin-bottom:1rem;
  font-size:2rem;
}
.trust-section p, .newsletter-section p {
  text-align:center;
  margin-bottom:1.5rem;
  font-size:1rem;
}

/* Pricing table */
.pricing-table {
  width:100%;
  border-collapse:collapse;
  margin-top:2rem;
}
.pricing-table th, .pricing-table td {
  border:1px solid rgba(255,255,255,0.2);
  padding:0.8rem;
  text-align:center;
  font-size:0.95rem;
}
.pricing-table th {
  background-color:rgba(255,255,255,0.07);
  font-weight:600;
}
.pricing-table tr:nth-child(even) {
  background-color:rgba(255,255,255,0.04);
}

/* Badge styling */
.badge {
  background-color: var(--secondary);
  color: #fff;
  padding:0.2rem 0.5rem;
  border-radius: var(--radius);
  font-size:0.75rem;
  margin-left:0.5rem;
  vertical-align: middle;
}

/* Review items */
.reviews-grid {
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:2rem;
}
.review-item {
  background-color: var(--bg-card);
  border-radius: var(--radius);
  padding:1.5rem;
  flex:1 1 calc(33% - 2rem);
  min-width:280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.review-item .stars {
  color:#ffd700;
  font-size:1.2rem;
}
.review-item img {
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
}
.review-item p {
  font-size:0.95rem;
  color: var(--text-muted);
}

/* Checkout page enhancements */
.secure-badges {
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:1rem;
}
.secure-badges img {
  height:24px;
  width:auto;
}

/* Button hover transitions */
.btn-primary {
  transition: background-image 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
}

/* Responsive styles */
@media (max-width:768px) {
  .hero h1 { font-size:2.2rem; }
  .hero p { font-size:1rem; }
  .features { flex-direction:column; }
  .price-card { flex:1 1 100%; }
  .reviews-grid { flex-direction:column; }
  .review-item { flex:1 1 100%; }
  nav ul { flex-wrap:wrap; gap:1rem; }
  .nav-container { padding:1rem; }
}

/*
 * Mobile navigation improvements
 *
 * On small screens we want the navigation items to appear directly below the
 * logo in a horizontal row rather than stacking vertically. The existing
 * desktop layout positions the logo and the navigation side–by–side using
 * a flexbox container with space‑between. To adjust this for phones and
 * tablets we change the flex direction on the nav container to column and
 * center its children. We also centre and wrap the menu list itself so
 * that the buttons flow to the next line when they run out of space. Each
 * list item keeps its natural width (auto) so they sit neatly next to
 * each other. If there isn’t room for all of the links on one line the
 * final “Start Your Song” button will wrap onto its own line and remain
 * centred.
 */
@media (max-width: 768px) {
  /* Stack the logo and navigation list vertically and shrink padding */
  .nav-container {
    flex-direction: column;
    align-items: center;
    /* Reduce padding on mobile to shorten the header height */
    padding: 0.5rem 1rem;
  }

  /*
   * Use a grid layout to force exactly three navigation items per row. The natural
   * order of the links (Home, How It Works, Pricing, Samples, Reviews, Start
   * Your Song) means the first three will be on the top line and the last three
   * on the second. Grid gaps are kept small to minimise the header height.
   */
  .nav-container nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
  }

  /* Reset any previous flex behaviour and order settings on list items */
  .nav-container nav ul li {
    flex: none;
    order: initial;
    text-align: center;
  }

  /* Shrink link font and padding for better fit on small screens */
  .nav-container nav ul li a {
    display: block;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }

  /*
   * Pricing page adjustments: make the Pro tier appear last on mobile.
   * The pricing cards live inside a flex container. By assigning a
   * higher order to the pro-tier card we push it to the end of the
   * sequence while preserving its full‑width behaviour. This only
   * affects devices with a screen width of 768px or less.
   */
  .pricing .price-card.pro-tier {
    order: 99;
  }

  /*
   * Pricing comparison table responsiveness: allow horizontal
   * scrolling on narrow screens so the table doesn’t overflow the
   * viewport. We turn the table into a block element with an
   * overflow‑x scroll and prevent cell contents from wrapping. This
   * preserves the desktop layout and only applies when the screen is
   * narrow.
   */
  .pricing-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    white-space: nowrap;
  }
  .pricing-table th,
  .pricing-table td {
    white-space: nowrap;
  }
}
.features { display:flex; flex-wrap:wrap; gap:2rem; margin-top:3rem; }
.feature-card { background-color:var(--bg-card); border-radius:var(--radius); padding:2rem; flex:1 1 calc(33% - 2rem); min-width:250px; backdrop-filter:blur(5px); box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.feature-card h3 { margin-bottom:0.5rem; font-size:1.25rem; }
.feature-card p { font-size:0.95rem; color:var(--text-muted); }
/* Pricing container uses flexbox to lay out the plans. Cards wrap when
   necessary and are centred within the container. */
.pricing {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
/* Base price-card styling. By default cards occupy one third of the available
   width so that three plans can sit on a row. The Pro tier overrides this
   sizing to span the full width. */
.price-card {
  background-color: var(--bg-card);
  border-radius: var(--radius);
  padding: 2rem;
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 260px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
/* Make the Pro/Special Event tier span the full width of the pricing
   container on larger screens for prominence and to allow more room for its
   details. */
.price-card.pro-tier {
  flex: 1 1 100%;
  max-width: 100%;
}
.price-card h3 { font-size:1.5rem; margin-bottom:1rem; }
.price-card .price { font-size:2rem; font-weight:700; margin-bottom:1rem; }
.price-card .tagline {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.price-card ul {
  list-style: none;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  text-align: left;
  padding-left: 0;
}
.price-card li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
}
.price-card li .emoji {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
}
/* Styling for bullet labels in pricing plans: keep the label bold and prevent
   wrapping across multiple lines. */
.price-card li .label {
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  margin-right: 0.3rem;
}

/* Preserve styling for any remaining <strong> tags inside list items */
.price-card li strong {
  color: var(--text-light);
}

/* Feature list styling for pricing plans: align icons and text neatly */
.feature-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
}
.feature-list li i {
  margin-right: 0.5rem;
  color: var(--secondary);
  font-size: 1.1rem;
  line-height: 1.3;
}
.feature-list li strong {
  color: var(--text-light);
}

/* Highlight styles for featured (Premium) and Pro tiers on the pricing page.  These
   variations increase contrast with a subtle border and brighter card
   background, while enlarging the call‑to‑action buttons to draw more
   attention to these premium offerings. */
/* Premium (featured) tier – highlight with a gold border and slightly brighter backdrop */
.price-card.featured {
  border: 2px solid #ffd700;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Pro tier – highlight with a distinct indigo border and brighter backdrop */
.price-card.pro-tier {
  border: 2px solid var(--secondary);
  background-color: rgba(255, 255, 255, 0.18);
}

.price-card.featured .btn-primary,
.price-card.pro-tier .btn-primary {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* De-emphasise call‑to‑action buttons for Basic and Standard plans by slightly
   reducing padding and opacity. */
.price-card:not(.featured):not(.pro-tier) .btn-primary {
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.sample { background-color:var(--bg-card); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; }
.sample h3 { margin-bottom:0.5rem; }
form { display:flex; flex-direction:column; gap:1rem; }
form input, form select, form textarea { padding:0.8rem; border-radius:var(--radius); border:none; width:100%; }
footer { text-align:center; padding:2rem; color:var(--text-muted); }