/*
  Re‑Vault Landing Page Styles

  This stylesheet defines a sophisticated dark theme with golden accents for
  the Re‑Vault landing page. Sections are spaced generously, fonts are
  varied for hierarchy, and interactive elements provide subtle feedback
  through hover states. The hero section uses a background image with an
  overlay to ensure legible text. Service cards, benefits lists and the
  contact form are responsive and adapt to various screen sizes. A
  responsive grid layout is used for service cards.
*/

/* Import Google Fonts for typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Playfair+Display:wght@700&display=swap');

/* Root variables for colors */
:root {
  --color-background: #0b0b0b;
  --color-dark-section: #101010;
  --color-light-section: #0f0f0f;
  --color-primary: #f5a623; /* warm golden hue */
  --color-secondary: #333333;
  --color-text: #dddddd;
  --color-subtext: #bbbbbb;
  --color-heading: #f5e17c;
  --color-card-bg: #1a1a1a;
  --color-card-heading: #f5c242;
}

/* Base styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin: 0;
  color: var(--color-heading);
}

p {
  margin: 0 0 1rem;
  color: var(--color-subtext);
}

section {
  padding: 4rem 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hero Section */
.hero {
  background-image: url('background.png');
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2rem 1rem;
  max-width: 700px;
  border-radius: 8px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #0b0b0b;
}

.btn-primary:hover {
  background-color: #e09b1f;
}

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

.btn-secondary:hover {
  background-color: #444444;
}

/* Dark and Light sections */
.dark-section {
  background-color: var(--color-dark-section);
  text-align: center;
}

.light-section {
  background-color: var(--color-light-section);
  text-align: center;
}

/* Section headings */
.section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-heading);
  text-align: center;
}

/* Services Section */
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.service-card {
  background-color: var(--color-card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-card-heading);
}

.service-card p {
  font-size: 0.95rem;
  color: var(--color-subtext);
}

/* Benefits Section */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
}

.benefits-list li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
}

.benefits-list strong {
  color: var(--color-card-heading);
}

/* Coming soon */
.coming-soon {
  text-align: center;
}

/* Contact section */
.contact-section h2 {
  text-align: center;
}

.contact-section p {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

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

.contact-form input,
.contact-form textarea {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: var(--color-card-bg);
  color: var(--color-text);
  font-size: 1rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #666;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  background-color: var(--color-primary);
  color: #0b0b0b;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #e09b1f;
}

.contact-info {
  margin-top: 1.5rem;
  text-align: center;
  color: #777;
}

.contact-info a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Footer */
.footer {
  background-color: #0d0d0d;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: #666;
}

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

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.footer-nav a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .services-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .contact-form button {
    width: 100%;
  }
}