/* Branding and global styles for the Stirvana landing page
   These variables and rules define the colour palette, typography and
   layout for the entire site. When updating colours or fonts,
   modify the values in the :root selector below so the change
   propagates everywhere. */

:root {
  /* Brand colours derived from the repository's info.txt
     The primary colour is a deep burgundy (#5A0E1D) and the secondary
     accent is a warm beige (#B39984).  Text colours use black and a
     slightly lighter shade for the slogan to match the branding
     guidance【669896283844982†L0-L12】. */
  --primary-color: #5A0E1D;
  --secondary-color: #B39984;
  --text-color: #000000;
  --slogan-color: #141414;
  --bg-light: #f8f8f8;
  --white: #ffffff;

  /* Maximum width for centred content and responsive breakpoints */
  --container-width: 1200px;

  /* Font families: use Google fonts for readability.  If you wish to
     incorporate the custom “Reislust” and “Kaushan Script” fonts
     mentioned in the branding info you can define them here via
     @font-face rules.  For now we rely on Poppins and Inter which
     deliver a modern, neutral appearance. */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--bg-light);
  line-height: 1.6;
}

/* Utility classes */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hero section */
/* Hero section */
header.hero {
  position: relative;
  color: var(--white);
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url('https://images.unsplash.com/photo-1551218808-94e220e084d2') center/cover no-repeat;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  padding-top: 4rem; 
}

@media (max-width: 640px) {
  header.hero {
    padding-top: 5rem; /* ✅ more on phones so logo never gets clipped */
  }
}

header.hero .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

/* Top-left brand link */
h/* Make the backing dark so the white logo is visible */
header.hero .logo-link {
  background: rgba(0, 0, 0, 0.6);  /* was white */
  padding: 8px 10px;
  border-radius: 8px;
  z-index: 3; /* stays above overlay */
  margin-top: 0.5rem; 
}

/* Explicit size for the SVG logo */
header.hero .logo-link img {
  width: 140px;       /* tweak to taste */
  height: auto;
  display: block;     /* remove inline gaps */
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35)); /* subtle pop on photo */
   max-width: 100%; 
}

/* Mobile: slightly smaller logo */
@media (max-width: 640px) {
  header.hero .logo-link img {
    width: 100px;
  }
}

header.hero .logo-link:hover {
  background: transparent; /* darker for contrast */
}


header.hero .content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 20px;
  margin-top: 0px; /* pulls content upward */
}

header.hero h2 {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 15px;
}

header.hero p.description {
  font-size: 1.3rem;
  line-height: 1.5;
  margin-bottom: 25px;
}

header.hero p.note {
  font-size: 0.9em;
  margin-top: 15px;
  opacity: 0.85;
}


/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--primary-color);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

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

/* Section wrappers */
.section {
  padding: 4rem 1rem;
}

.section.light {
  background: var(--bg-light);
}

.section.dark {
  background: var(--white);
}

.section h2 {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary-color);
  text-transform: uppercase;
}

/* Persona grid */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.persona-grid .persona-item svg {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.persona-grid .persona-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.persona-grid .persona-item p {
  color: var(--text-color);
}

/* Ordered list for "How it works" */
.ol-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.ol-list ol {
  list-style-position: inside;
  padding-left: 0;
}

.ol-list strong {
  color: var(--primary-color);
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
  line-height: 1.5;
}

.features-grid svg {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.feature-item span strong {
  display: block;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--primary-color);
  color: var(--white);
}

footer a {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
}

footer p {
  margin: 0;
  font-size: 0.95em;
}


/* Responsive tweaks */
@media (max-width: 880px) {
  header.hero h1 {
    font-size: 2.5rem;
  }
  header.hero .tagline {
    font-size: 1.5rem;
  }
  .btn-primary {
    width: 100%;
    margin-top: 1rem;
  }
}

/* ✅ Consistent top padding for hero & waitlist */
header.hero,
.waitlist-section {
  padding-top: 4rem;
}

@media (max-width: 640px) {
  header.hero,
  .waitlist-section {
    padding-top: 5rem; /* more breathing room on phones */
  }
}

/* ✅ Ensure logos are responsive everywhere */
header.hero .logo-link img,
.waitlist-section .logo-link img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  header.hero .logo-link img,
  .waitlist-section .logo-link img {
    max-width: 140px;
  }
}