/*
  Custom stylesheet for the HausAgent.ai marketing website
  Defines the site’s colour palette, typography, layout utilities
  and component styling. Responsive design is built into the
  layouts via media queries. Colours and fonts adhere to the
  provided brand guidelines.
*/

:root {
  /* Brand colours */
  --primary: #8e44ad; /* Violet */
  --secondary: #1abc9c; /* Aqua */
  --charcoal: #1c1c1c; /* Dark charcoal */
  --silver: #bdc3c7; /* Light grey */
  --white: #ffffff;
  /* Utility colours */
  --light-bg: #f7f7f7;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--charcoal);
  background-color: var(--white);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--charcoal);
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

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

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

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

.logo img {
  /* Set a fixed height for the logo image. The logo container now
     includes both an icon and text so the image itself should not
     scale down and cause clipping. */
  height: 48px;
}

/*
 * Logo container styling
 * By default the original site used a single image for the logo
 * which would get cropped when the navigation compressed.  To
 * prevent text from being cut off, the logo is now composed of a
 * monogram icon and a text element.  The container is styled as
 * a flexbox to align the items and prevent shrinking.  See
 * index.html, services.html and industries.html for usage.
 */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--charcoal);
}

/*
 * Highlight the active navigation link on secondary pages.  When
 * viewing Services or Industries pages the corresponding nav link
 * receives the "active" class and is underlined using the brand
 * colours.
 */
.nav-list a.active {
  color: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

/*
 * Generic hero section for secondary pages (Services and
 * Industries).  Provides top padding to account for the fixed
 * navigation bar and gives pages a distinct title area.
 */
.hero-page-section {
  padding: 6rem 0 4rem;
  background-color: var(--light-bg);
  margin-top: 0; /* The offset is applied via padding; no extra margin needed */
  text-align: center;
}
.hero-page-section h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero-page-section p {
  font-size: 1.1rem;
  color: #555;
  margin: 0 auto;
  max-width: 700px;
  margin-bottom: 1.5rem;
}

.nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list li a {
  font-weight: 600;
  padding: 0.5rem 0;
}

.nav-cta a {
  margin-left: 1rem;
}

/* Hamburger for mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background-color: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* When the navigation is open on mobile, transform the bars into a cross */
.nav-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background-image: var(--gradient);
  color: var(--white);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

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

/* Hero section */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: var(--gradient);
  overflow: hidden;
  color: var(--white);
  padding-top: 80px; /* offset for fixed nav */
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: 2rem;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero-content .subtitle {
  font-size: 1.125rem;
  max-width: 600px;
  margin-bottom: 2rem;
  color: var(--silver);
}

.hero-btn {
  font-size: 1rem;
  padding: 0.75rem 2rem;
}

.hero-image img {
  width: 100%;
  max-width: 500px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}

/* Grid overlay for hero */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}

/* Features section */
.features-section {
  padding: 4rem 0;
  background-color: var(--light-bg);
  text-align: center;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-intro {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  color: var(--charcoal);
  font-size: 1.1rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.feature-card {
  background-color: var(--white);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-card h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.feature-card p {
  color: #555;
  font-size: 0.95rem;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  font-size: 1.5rem;
}

/* CTA section */
.cta-section {
  padding: 4rem 0;
  background-image: linear-gradient(135deg, var(--primary) 0%, #5c2692 50%, var(--secondary) 100%);
  color: var(--white);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.cta-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  max-width: 600px;
}

.cta-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem 1rem;
}

.cta-list li {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.cta-list li i {
  color: var(--secondary);
  margin-right: 0.5rem;
}

.cta-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Process section */
.process-section {
  padding: 4rem 0;
  background-color: var(--light-bg);
  text-align: center;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.step {
  position: relative;
  background-color: var(--white);
  padding: 2rem 1.5rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.step:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.step-number {
  position: absolute;
  top: -20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.step h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.step p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
}

/* About section */
.about-section {
  padding: 4rem 0;
  background-color: var(--white);
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.about-content {
  flex: 1;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #555;
}

.about-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem 1rem;
}

.about-list li {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.about-list li i {
  color: var(--primary);
  margin-right: 0.5rem;
}

/* Contact section */
.contact-section {
  padding: 4rem 0;
  background-image: linear-gradient(180deg, var(--primary), var(--secondary));
  color: var(--white);
}

.contact-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.contact-form {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.submit-btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 1rem;
  width: fit-content;
}

/* Footer */
.footer {
  background-color: var(--charcoal);
  color: var(--white);
  padding: 1.5rem 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-logo {
  font-weight: 600;
  font-size: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  color: var(--white);
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: var(--secondary);
}

/* Responsive navigation */
@media (max-width: 768px) {
  .nav-list {
    position: fixed;
    top: 70px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    align-items: flex-start;
    width: 240px;
    height: calc(100vh - 70px);
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 99;
  }
  .nav-list li {
    margin-bottom: 1rem;
  }
  .nav-list.show {
    transform: translateX(0);
  }
  .nav-toggle {
    display: flex;
  }
  .nav-cta {
    margin-top: auto;
  }
}

/* Packages page styles */

/* Hero section specific to the packages page */
.packages-hero {
  padding: 6rem 0 4rem;
  background: var(--gradient);
  color: var(--white);
  text-align: center;
  margin-top: 72px; /* offset for fixed navbar */
}

.packages-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.packages-hero p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Packages grid section */
.packages-grid-section {
  padding: 4rem 0;
  background-color: var(--light-bg);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.package-card {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.package-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  color: var(--primary);
}

.package-card .package-description {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}

.package-card .package-features {
  list-style: none;
  margin-bottom: 1.5rem;
  padding-left: 0;
}

.package-card .package-features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.package-card .package-features li::before {
  content: '\2022';
  color: var(--secondary);
  margin-right: 0.5rem;
  line-height: 1;
}

.package-card .btn {
  margin-top: auto;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-image {
    order: -1;
  }
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }
  .about-inner {
    flex-direction: column;
    text-align: center;
  }
  .about-content {
    padding-top: 1rem;
  }
  .about-list {
    grid-template-columns: 1fr;
  }
  .process-steps {
    grid-template-columns: 1fr;
  }
  .cta-list {
    grid-template-columns: 1fr;
  }
}