/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.page-hero-section { padding-top: 160px; padding-bottom: 60px; }
.page-hero-section h1 { margin-bottom: 8px; }

/* ==========================================================================
   ECOSYSTEM (section-problem.php) — rendered by ecosystem.js
   ========================================================================== */
.ecosystem { position: relative; }
.ecosystem-canvas { width: 100%; min-height: 460px; }
.ecosystem-canvas svg { width: 100%; height: auto; }
.eco-node {
  cursor: pointer;
}
.eco-node circle {
  fill: var(--c-ink-soft); stroke: var(--c-border); stroke-width: 2;
  transition: stroke var(--dur-fast), fill var(--dur-fast);
}
.eco-node.is-center circle { fill: var(--c-violet); stroke: var(--c-violet-light); }
.eco-node text { font-family: var(--font-body); font-weight: 600; font-size: 13px; fill: var(--c-soft-white); pointer-events: none; }
.eco-node.is-center text { fill: #fff; }
.eco-node:hover circle, .eco-node.is-active circle { stroke: var(--c-violet-light); fill: rgba(91,63,212,0.22); }
.eco-link { stroke: var(--c-border); stroke-width: 1.5; transition: stroke var(--dur-fast), stroke-width var(--dur-fast); }
.eco-link.is-active { stroke: var(--c-violet); stroke-width: 2.5; }
.ecosystem-fallback-list { list-style: none; padding: 0; columns: 2; gap: 24px; }
.ecosystem-fallback-list li { padding: 10px 0; border-bottom: 1px solid var(--c-border); }

/* ==========================================================================
   DIAGNOSTIC SCAN (section-diagnose.php)
   ========================================================================== */
.diagnostic-scan { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 40px 0; }
.scan-node { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.scan-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-border); transition: background 0.4s, box-shadow 0.4s; }
.scan-node.is-scanned .scan-dot {
  background: var(--c-violet-light);
  box-shadow: 0 0 0 6px rgba(157,140,255,0.18);
  animation: scanPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .scan-node.is-scanned .scan-dot { animation: none; } }
@keyframes scanPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(157,140,255,0.18); }
  50% { box-shadow: 0 0 0 10px rgba(157,140,255,0.08); }
}
.scan-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-muted); }
.scan-node.is-scanned .scan-label { color: var(--c-white); }
.scan-line {
  position: absolute; top: 47px; left: 0; height: 2px; width: 0%;
  background: var(--c-violet); transition: width 1.6s var(--ease-out); z-index: 0;
}
.diagnostic-scan.is-scanning .scan-line { width: 100%; }

/* ==========================================================================
   GROWTH SYSTEM (section-growth-system.php) — visual driven by growth-system.js
   ========================================================================== */
.growth-system-section { padding-bottom: 60px; }
.growth-system-stage { height: 70vh; min-height: 420px; position: relative; margin: 20px 0; }
.growth-system-stage svg { width: 100%; height: 100%; }
.growth-system-labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.growth-stage-label {
  flex: 1; min-width: 100px; text-align: center; padding: 12px 8px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; color: #8A84AC; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.growth-stage-label.is-active { color: #fff; background: rgba(91,63,212,0.25); border-color: var(--c-violet); }

/* ==========================================================================
   PROCESS FLOW (section-training.php)
   ========================================================================== */
.process-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; position: relative; padding: 12px 0; }
.process-step {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 108px;
  padding: 18px 10px; border-radius: var(--radius-md); transition: background var(--dur-fast), transform var(--dur-fast);
}
.process-step:hover { background: rgba(157,140,255,0.08); transform: translateY(-3px); }
.process-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--c-violet-light);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--c-border); border-radius: 50%;
}
.process-step:hover .process-num { border-color: var(--c-violet-light); box-shadow: 0 0 0 5px rgba(157,140,255,0.12); }
.process-label { font-weight: 600; font-size: 0.95rem; color: var(--c-white); }
.process-arrow { color: var(--c-text-muted); font-size: 1.3rem; }

/* ==========================================================================
   CAPABILITY TABS (section-capabilities.php)
   ========================================================================== */
.capability-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; }
.capability-tab {
  padding: 9px 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--c-border-strong);
  background: var(--c-ink-soft); font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); color: var(--c-white);
}
.capability-tab.is-active, .capability-tab:hover { background: var(--c-violet); border-color: var(--c-violet); color: #fff; }
.capability-tab:focus-visible { outline: 2px solid var(--c-violet-light); outline-offset: 2px; }
/* ==========================================================================
   SERVICES RAIL (section-capabilities.php) — CSS scroll-snap does the
   heavy lifting (including native touch swipe); rail.js adds drag,
   arrows, and keyboard on top. See rail.js for the interaction layer.
   ========================================================================== */
.rail-wrapper { display: flex; align-items: center; gap: 14px; }
.rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 28px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail:focus-visible { outline: 2px solid var(--c-violet-light); outline-offset: 4px; }

.rail-item {
  flex: 0 0 auto;
  width: calc((100% - 2 * 24px) / 3.3); /* ~3 cards visible, next one peeks in */
  scroll-snap-align: start;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), opacity var(--dur-fast);
}
.rail-item.is-active { border-color: var(--c-border-strong); transform: translateY(-2px) scale(1.015); }
.rail-item.is-hidden { display: none; }
@media (max-width: 1080px) { .rail-item { width: calc((100% - 24px) / 2.15); } }
@media (max-width: 700px) { .rail-item { width: 86%; } .rail { gap: 16px; } }

.rail-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--c-border); background: var(--c-ink-soft); color: var(--c-white);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.rail-arrow:hover { border-color: var(--c-violet-light); background: rgba(91,63,212,0.15); transform: translateY(-1px); }
.rail-arrow:focus-visible { outline: 2px solid var(--c-violet-light); outline-offset: 2px; }
@media (max-width: 700px) { .rail-arrow { display: none; } }

/* ==========================================================================
   TRANSFORMATION PATH (section-transformation.php)
   ========================================================================== */
.transformation-path { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 4px; align-items: center; }
.transform-step { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--c-text-muted); opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s, color 0.4s; transition-delay: calc(var(--i) * 0.08s); }
.transform-step.is-visible { opacity: 1; transform: translateY(0); color: var(--c-white); }
.transform-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-violet-light); box-shadow: 0 0 0 4px rgba(157,140,255,0.15); }
.transform-step:not(:last-child)::after { content: '\2192'; margin-left: 14px; color: var(--c-text-muted); }

/* ==========================================================================
   CASE STUDIES / PROBLEM CARDS
   ========================================================================== */
.case-study-card { display: block; position: relative; }
.sample-badge {
  position: absolute; top: 20px; right: 20px;
  background: rgba(157,140,255,0.15); color: var(--c-violet-light);
  border: 1px solid rgba(157,140,255,0.3);
  font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill);
}
.case-study-quote { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; color: var(--c-white); border-left: 4px solid var(--c-violet-light); padding-left: 24px; margin: 32px 0; }

.problem-card {
  text-align: left; border: 1px solid var(--c-border); cursor: pointer; font-family: inherit;
  position: relative; min-height: 150px; padding-left: 46px;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.problem-card::before {
  content: ''; position: absolute; left: 26px; top: 32px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--c-text-muted); transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.problem-card::after {
  content: ''; position: absolute; left: 30px; top: 42px; width: 1px; height: calc(100% - 62px);
  background: var(--c-border);
}
.problem-card.is-flipped { border-color: var(--c-violet-light); }
.problem-card.is-flipped::before { background: var(--c-violet-light); box-shadow: 0 0 0 5px rgba(157,140,255,0.18); }
.problem-front, .problem-back {
  transition: opacity 0.3s, transform 0.3s;
}
.problem-back { display: none; color: var(--c-text-muted); font-size: 0.95rem; }
.problem-card.is-flipped .problem-front { display: none; }
.problem-card.is-flipped .problem-back { display: block; }
.problem-card .problem-front { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }

/* ==========================================================================
   DATA FLOW (section-data.php)
   ========================================================================== */
.data-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.data-flow-step {
  padding: 16px 26px; border-radius: var(--radius-pill); background: rgba(91,63,212,0.12);
  border: 1px solid rgba(157,140,255,0.3); font-weight: 700; color: var(--c-violet-light);
  opacity: 0; transform: scale(0.9); transition: opacity 0.5s, transform 0.5s; transition-delay: calc(var(--i) * 0.12s);
}
.data-flow-step.is-visible { opacity: 1; transform: scale(1); }
.data-flow-arrow { color: var(--c-text-muted); font-size: 1.2rem; }

/* ==========================================================================
   TIMELINE (section-how-we-work.php)
   ========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.timeline-item { border-top: 3px solid var(--c-violet); padding-top: 16px; }
.timeline-item h3 { font-size: 1.1rem; }
.timeline-item p { color: var(--c-text-muted); font-size: 0.94rem; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-card { position: relative; }
.testimonial-quote { font-style: italic; color: var(--c-text); margin-bottom: 18px; }
.testimonial-author { font-weight: 700; font-family: var(--font-display); }
.testimonial-role { color: var(--c-text-muted); font-size: 0.88rem; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-inner { max-width: 760px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta-section { position: relative; padding: 130px 0; overflow: hidden; }
.final-cta-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(91,63,212,0.3), transparent 60%);
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; background: var(--c-white); color: var(--c-text-on-light);
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(91,63,212,0.15); }
.form-honeypot { position: absolute; left: -9999px; }
.form-notice { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 600; }
.form-notice.success { background: rgba(46,125,79,0.1); color: var(--c-success); }
.form-notice.error { background: rgba(192,57,43,0.1); color: var(--c-error); }
.contact-info-card { position: sticky; top: 110px; }
.contact-link { display: block; font-weight: 600; margin-bottom: 14px; }
.entry-content-wrap { max-width: 780px; margin: 0 auto; }
.service-price { font-weight: 700; margin: 12px 0; color: var(--c-violet-light); }