/*
  Global styles for the Ideal Customers website.
  The palette favors subtle blues and neutrals to convey trust and
  professionalism while keeping the design clean and minimal. The CSS is
  organized into base styles, navigation, sections, components and
  responsive tweaks.
*/

/* Base resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #334155;
  line-height: 1.6;
  background-color: #ffffff;
}

h1, h2, h3 {
  margin: 0.5em 0 0.3em;
  color: #0f172a;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  font-size: 1rem;
  max-width: 60ch;
}

a {
  text-decoration: none;
  color: inherit;
}

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

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

/* Navigation */
.navbar {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  padding: 0.5rem 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0067a3;
}

.nav-links {
  display: flex;
  gap: 1.2rem;
}

.nav-links a {
  font-weight: 500;
  color: #475569;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #0067a3;
}

/* Hero section */
.hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(135deg, #f5faff 0%, #f0f9ff 100%);
}

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

.hero-text h1 {
  font-size: 2.2rem;
  line-height: 1.3;
}

.hero-text p {
  font-size: 1.1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #0067a3;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: #004f7d;
}

.hero-image img {
  width: 340px;
  max-width: 100%;
  height: auto;
}

/* Section styles */
.section {
  padding: 4rem 0;
}

.section:nth-child(even) {
  background-color: #f9fafb;
}

.section h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.section-intro {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 70ch;
  color: #475569;
}

/* Services grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s ease;
}

.service-card i {
  color: #0067a3;
  margin-bottom: 0.5rem;
}

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

.service-card p {
  font-size: 0.95rem;
  color: #475569;
}

.service-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Packages table */
.package-table-wrapper {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.package-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.package-table th,
.package-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.package-table thead {
  background-color: #0067a3;
  color: #ffffff;
}

.package-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.package-table .package-name {
  font-weight: 600;
}

.table-note {
  font-size: 0.85rem;
  color: #475569;
  margin-top: 0.75rem;
}

/* Readiness grid */
.readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.readiness-item {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  transition: box-shadow 0.2s ease;
}

.readiness-item:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.icon-circle {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e0f2fe;
  color: #0067a3;
  font-size: 1.25rem;
}

.readiness-item h3 {
  font-size: 1.1rem;
  margin-top: 0;
}

.readiness-item p {
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 0;
}

/* Add-ons list */
.addons-list {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.addons-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

.addons-list li i {
  color: #0067a3;
  margin-top: 0.1rem;
}

.addons-list li:hover {
  background-color: #f5faff;
}

/* Contact section */
.contact {
  background-color: #f5faff;
}

.contact-container {
  text-align: center;
  max-width: 700px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: #0067a3;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-link i {
  font-size: 1.1rem;
}

.contact-link:hover {
  background-color: #e0f2fe;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Contact form styles */
.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background-color: #0067a3;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

/* Footer */
.footer {
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  .hero-image img {
    width: 80%;
    margin-top: 1rem;
  }
  .nav-links {
    display: none;
  }
}