/*
  Base styles for the Saascol Marketplace prototype.  The design
  utilises a dark colour palette with subtle silver tones to evoke
  modernity and sophistication.  White text and light accents help
  maintain legibility against the gradient background.  Responsive
  layouts ensure the site looks good on a wide range of screen sizes.
*/

/* Colour variables */
:root {
  /*
    Gradient colours for the page background.  The end colour has been
    lightened to a mid‑tone grey to introduce a subtle silver degrade
    effect, as requested.
  */
  --color-bg-start: #0a0a0a;
  --color-bg-mid: #1a1a1a;
  --color-bg-end: #474747;
  --color-silver: #b3b3b3;
  --color-white: #ffffff;
  --color-accent: #3fa9f5; /* optional accent for interactive elements */
  --color-card-bg: rgba(255, 255, 255, 0.05);
  --color-card-border: rgba(255, 255, 255, 0.15);
}

/* Reset some default browser styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  background: linear-gradient(
    180deg,
    var(--color-bg-start) 0%,
    var(--color-bg-mid) 50%,
    var(--color-bg-end) 100%
  );
  color: var(--color-white);
  min-height: 100vh;
}

/* Container to limit width and centre content */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 0;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 6rem 0 4rem;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero .subtitle {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--color-silver);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
}

.btn.primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 2px solid transparent;
}

.btn.outline {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn.small {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 30px;
}

.btn:hover {
  background-color: var(--color-white);
  color: var(--color-bg-start);
  border-color: var(--color-white);
}

/* Section headings */
section h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Catalogue cards */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card .logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-silver);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.card .industry {
  font-size: 0.85rem;
  color: var(--color-silver);
  margin-bottom: 0.5rem;
}

.card .description {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--color-white);
}

.card .offer {
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.card .offer-valid {
  font-size: 0.75rem;
  color: var(--color-silver);
  margin-bottom: 0.5rem;
}

.category-tags {
  margin-bottom: 0.5rem;
}

.tag {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-bg-start);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
}

.review {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-silver);
  margin: 0.5rem 0 1rem;
}

.card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Categories */
.categories {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 4rem 0;
}

.category-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.category-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  width: 220px;
  text-align: center;
}

.category-card img {
  max-width: 80px;
  margin: 0 auto 1rem;
  display: block;
}

.category-card h3 {
  font-size: 1.1rem;
}

/* CTA section */
.cta {
  padding: 4rem 0;
  text-align: center;
}

.cta p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: var(--color-silver);
}

/* Formulario */
.formulario {
  background-color: rgba(255, 255, 255, 0.02);
  padding: 4rem 0;
}

.formulario form {
  max-width: 700px;
  margin: 0 auto;
}

.formulario .form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.formulario label {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.formulario input,
.formulario textarea,
.formulario select {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  background-color: transparent;
  color: var(--color-white);
  font-size: 0.9rem;
  outline: none;
}

.formulario input:focus,
.formulario textarea:focus,
.formulario select:focus {
  border-color: var(--color-accent);
}

.formulario .note {
  font-size: 0.8rem;
  color: var(--color-silver);
  margin-top: 1rem;
}

/* Footer */
.footer {
  background-color: #000;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-silver);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  .cards {
    flex-direction: column;
    align-items: center;
  }
  .category-cards {
    flex-direction: column;
    align-items: center;
  }
  .category-card {
    width: 80%;
    max-width: 300px;
  }
}