/*
  FoodyNut Coming Soon Landing Page Styles

  This stylesheet defines a warm, glass‑morphic look for the FoodyNut
  landing page.  Colours and spacing are based on the provided brand
  palette of soft beige and deep orange.  The layout is mobile‑first and
  gracefully scales up to larger screens.  Cards use backdrop filters
  for a frosted‑glass effect and subtle hover interactions to add life
  without cluttering the interface.
*/

/* Colour variables */
:root {
  --background: #FFFAE5;        /* Soft beige background */
  --accent: #E86A25;           /* Deep orange accent */
  --accent-dark: #D85A14;      /* Darker shade for hover states */
  --text: #333333;             /* Primary text colour */
  --card-bg: rgba(255, 255, 255, 0.35); /* Glass card background */
  --card-blur: blur(10px);     /* Blur effect for glass cards */
}

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

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text);
  line-height: 1.5;
}

/* Container utility for centring content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

header .logo {
  height: 60px;
}

nav a {
  margin-left: 1rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

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

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  gap: 2rem;
}

.hero-content {
  flex: 1 1 300px;
  max-width: 600px;
}

.hero-content h1 {
  margin: 0;
  font-size: 2.5rem;
  color: var(--text);
}

.hero-content h1 span {
  color: var(--accent);
}

.hero-content p {
  font-size: 1.2rem;
  margin: 1rem 0 2rem;
}

.btn.primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

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

.hero-visual {
  flex: 1 1 300px;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.hero-visual img {
  max-width: 100%;
  height: auto;
}

/* Benefits section */
.benefits {
  padding: 3rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: var(--card-bg);
  border-radius: 16px;
  backdrop-filter: var(--card-blur);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

.card-header {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.card-body {
  padding: 1.5rem;
}

.card-body h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--accent);
  text-align: center;
  font-size: 1.4rem;
}

.card-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-body ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.card-body ul li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: bold;
}

/* Testimonials section */
.testimonials {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  padding: 4rem 1rem;
}

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

.testimonials-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
}

.testimonial {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  padding: 1.5rem;
  border-radius: 12px;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.testimonial img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.testimonial p {
  font-style: italic;
  margin-bottom: 0.5rem;
}

.testimonial span {
  font-size: 0.9rem;
  color: var(--accent);
}

/* Signup section */
.signup {
  background: #FFF3E8;
  padding: 4rem 1rem;
  text-align: center;
}

.signup h2 {
  margin-bottom: 1.5rem;
  color: var(--accent);
  font-size: 1.8rem;
}

.signup form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}

.signup input,
.signup select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.signup button {
  padding: 0.75rem 2rem;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.signup button:hover {
  background: var(--accent-dark);
}

.thank-you {
  display: none;
  margin-top: 1rem;
  color: green;
  font-weight: bold;
}

/* Footer */
footer {
  background: rgba(0, 0, 0, 0.05);
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .testimonials-container {
    flex-direction: column;
    align-items: center;
  }
}