:root {
  --color-primary: #0A2342; /* Navy */
  --color-secondary: #2CA58D; /* Calm Blue/Teal */
  --color-accent: #F46036; /* Orange */
  --color-text: #333333;
  --color-bg-light: #F4F7F6;
  --color-white: #FFFFFF;
  --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --border-radius: 8px;
}

/* Scoped to Jigyokei Template if necessary, but broad reset might interfere. 
   Assuming enqueueing only on this page will safely apply these styles.
   If conflicts arise, we might need to wrap everything in a .jigyokei-page class.
*/

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

body {
  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-white);
}

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

ul {
  list-style: none;
}

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

/* Utilities */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-xl) 0;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary);
  font-weight: bold;
}

.sub-title {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: var(--spacing-xl);
  color: #666;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn:hover {
  opacity: 0.9;
}

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

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

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

/* Header - Handled by WP Theme likely, but keeping styles here just in case specific overrides needed */
/* The LP header styles might conflict with Main Theme header if classes match. 
   Since requirements say "Use get_header()", the main theme header will be rendered.
   The LP header styles here (.header class) might need to be removed or adapted if they clash.
   For now, I'll keep them but comment out the fixed position part if it's redundant.
*/
/* 
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
  height: 70px;
  display: flex;
  align-items: center;
}
*/

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  padding: 160px 0 100px;
  text-align: center;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  font-weight: bold;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Problems Section (Issues) */
.problems {
  background-color: var(--color-bg-light);
}

.problems-list {
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  max-width: 800px;
  margin: 0 auto;
}

.problem-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.problem-check {
  color: var(--color-accent);
  margin-right: var(--spacing-sm);
  font-weight: bold;
}

/* Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.service-card {
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

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

.service-title {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: var(--spacing-sm);
  display: inline-block;
}

.service-list li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: 1.2em;
}

.service-list li::before {
  content: "•";
  color: var(--color-secondary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Strengths Section */
.strengths {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.strength-item {
  background-color: rgba(255,255,255,0.1);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

.strength-title {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent);
}

.section-title-white {
  color: var(--color-white);
}

/* Flow Section */
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 800px;
  margin: 0 auto;
}

.step-item {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-light);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.step-number {
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

.step-content {
  font-weight: 500;
}

/* Profile Section */
.profile-card {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.profile-role {
  color: #666;
  margin-bottom: var(--spacing-md);
}

.profile-desc {
  text-align: left;
  line-height: 1.8;
}

/* FAQ Section */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid #eee;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--spacing-md);
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
}

.faq-item.active .faq-question::after {
  content: "-";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 var(--spacing-md);
  background-color: var(--color-bg-light);
}

.faq-answer p {
  padding: var(--spacing-md) 0;
}

/* Contact Section */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
}

/* Footer - handled by WP theme */
/*
.footer {
  background-color: #051121;
  color: #aaa;
  padding: var(--spacing-lg) 0;
  text-align: center;
  font-size: 0.9rem;
}

.footer-links {
  margin-bottom: var(--spacing-md);
}

.footer-links a {
  margin: 0 var(--spacing-sm);
  text-decoration: underline;
}
*/

/* Responsive */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    flex-direction: column;
    padding: var(--spacing-md);
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    display: none;
  }

  .nav-menu.active {
    display: flex;
  }

  .hero-title {
    font-size: 2rem;
  }
}

@media (min-width: 769px) {
  .flow-steps {
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
  }
  
  .step-item {
    flex-direction: column; /* Optional: if space is tight */
    text-align: center;
    flex: 1;
    display: block;
  }
  
  .step-number {
      margin: 0 auto var(--spacing-sm);
  }
}