/* ==========================================================================
   Home — Nortefy
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  padding-top: var(--space-14);
  padding-bottom: var(--space-12);
  text-align: center;
  position: relative;
  isolation: isolate;
  /* Break out of .container's max-width so the mesh glow can span the full
     viewport. Content elements (h1, p) retain their own max-width so text
     stays in the same visual column. overflow: hidden clips the pseudos
     vertically, keeping the glow out of the header/Problem sections. */
  max-width: none;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* JetBrains-style mesh glow — two counter-drifting layers of soft brand-tinted
   orbs behind the hero. Pseudos break out to 120vw (wider than viewport) so
   the drift animation never reveals a gap at the edges. Strict top/bottom
   bounds + aggressive mask fade keep the glow inside the hero section and
   out of the sticky header / Problem section below.
   Clay-warm layer on ::before, Stone-cool layer on ::after — different speeds
   and phases give organic mesh motion rather than a single panning image. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 60vw);
  width: 120vw;
  z-index: -1;
  pointer-events: none;
  filter: blur(60px) saturate(1.05);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
  will-change: transform, opacity;
}

/* Warm layer — clay + cream highlight */
.hero::before {
  background:
    radial-gradient(ellipse 46% 48% at 18% 38%, rgba(178, 105, 74, 0.46), transparent 62%),
    radial-gradient(ellipse 55% 55% at 62% 88%, rgba(143, 82, 56, 0.32), transparent 68%),
    radial-gradient(ellipse 34% 30% at 50% 48%, rgba(245, 220, 190, 0.42), transparent 70%);
  animation: hero-glow-warm 14s ease-in-out infinite alternate;
}

/* Cool layer — stone teal */
.hero::after {
  background:
    radial-gradient(ellipse 44% 44% at 82% 28%, rgba(47, 85, 78, 0.38), transparent 66%),
    radial-gradient(ellipse 38% 42% at 8% 82%, rgba(47, 85, 78, 0.26), transparent 66%);
  animation: hero-glow-cool 18s ease-in-out infinite alternate;
}

@keyframes hero-glow-warm {
  0%   { transform: translate3d(-8%, -4%, 0) scale(1.00); opacity: 0.85; }
  50%  { transform: translate3d( 6%,  3%, 0) scale(1.14); opacity: 1;    }
  100% { transform: translate3d( 9%,  6%, 0) scale(1.06); opacity: 0.9;  }
}

@keyframes hero-glow-cool {
  0%   { transform: translate3d( 8%,  4%, 0) scale(1.08); opacity: 1;    }
  50%  { transform: translate3d(-6%, -3%, 0) scale(1.00); opacity: 0.78; }
  100% { transform: translate3d(-9%,  5%, 0) scale(1.12); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after { animation: none; }
}

.hero h1 {
  font-size: calc(var(--fs-display) * 1.15);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  margin: 0 auto var(--space-6);
}

.hero p {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  color: var(--moss);
}

.hero-mockup {
  margin-top: var(--space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--hairline);
}

/* ==========================================================================
   Problem → Solution section
   Editorial pain/answer narrative. Paper ground, hairline-framed grid,
   Stone-ground solution block as the reveal.
   ========================================================================== */
.problem {
  background-color: var(--paper);
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}

/* ---- Pain intro ---- */
.problem-intro {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-10);
}

.problem-intro h2 {
  margin-bottom: var(--space-5);
  color: var(--ink);
}

.problem-intro h2 em {
  font-style: italic;
  color: var(--clay-deep);
  font-weight: var(--fw-regular);
}

.problem-intro .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--moss);
  max-width: 48ch;
  margin: 0 auto;
}

/* ---- Pain + Solution: paired horizontally ---- */
.problem-solution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}

/* ---- Pillars: pain + solution share one structure, differ by ground ---- */
.pillar {
  display: flex;
  flex-direction: column;
  color: var(--oyster);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: left;
  overflow: hidden;
}

.pillar-pain { background-color: var(--ember); }
.pillar-solution { background-color: var(--stone); }

.pillar-label {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-medium);
  color: var(--oyster);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.pillar-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(238, 240, 236, 0.12);
}

.pillar-row:first-of-type {
  border-top: 0;
}

.pillar-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  color: var(--oyster);
  opacity: 0.9;
  flex-shrink: 0;
}

.pillar-text h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--oyster);
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.pillar-text h4 em {
  font-style: italic;
  color: var(--oyster);
  font-weight: var(--fw-regular);
}

.pillar-text p {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: rgba(238, 240, 236, 0.78);
  margin-bottom: 0;
}

/* ---- How it works ---- */
.how-it-works {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--rule);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.step { text-align: center; position: relative; }

/* The Daily Loop:
   A 10s wave moves through the four steps. Each circle's ring draws,
   then the disc fills and the digit crossfades stone→paper. Connector
   lines fill left-to-right as the wave passes. After step 4 lands,
   all four hold briefly, then reset together — closing the loop. */

@property --step-p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --step-fill {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.75rem;
  right: -0.75rem;
  width: 1.5rem;
  height: 1px;
  background:
    linear-gradient(to right, var(--stone), var(--stone)) no-repeat 0 50% / 0% 100%,
    var(--rule);
}

.step-number {
  --step-p: 0%;
  --step-fill: 0;
  position: relative;
  isolation: isolate;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--rule), var(--stone) calc(var(--step-fill) * 100%));
  color: color-mix(in srgb, var(--stone), var(--paper) calc(var(--step-fill) * 100%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.step-number i {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  transform-origin: center;
}

/* Ring: drawn around the perimeter via conic-gradient, masked to a thin band */
.step-number::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--stone) var(--step-p), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  z-index: -1;
  pointer-events: none;
}

/* Disc: scales 0→1 to fill the inside once the ring completes */
.step-number::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--stone);
  transform: scale(var(--step-fill));
  transform-origin: center;
  z-index: -1;
  pointer-events: none;
}

/* Stagger: each step's animation maps the same global 10s timeline,
   so all four reset together at the end of each cycle.
   Animations only run while the section is in view (toggled by JS). */
.how-it-works.in-view .step:nth-child(1) .step-number { animation: step-cycle-1 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(2) .step-number { animation: step-cycle-2 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(3) .step-number { animation: step-cycle-3 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(4) .step-number { animation: step-cycle-4 10s ease-in-out infinite; }

.how-it-works.in-view .step:nth-child(1):not(:last-child)::after { animation: line-flow-1 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(2):not(:last-child)::after { animation: line-flow-2 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(3):not(:last-child)::after { animation: line-flow-3 10s ease-in-out infinite; }

@keyframes step-cycle-1 {
  0%   { --step-p: 0%;   --step-fill: 0; }
  10%  { --step-p: 100%; --step-fill: 0; }
  15%  { --step-p: 100%; --step-fill: 1; }
  90%  { --step-p: 100%; --step-fill: 1; }
  100% { --step-p: 0%;   --step-fill: 0; }
}
@keyframes step-cycle-2 {
  0%, 20% { --step-p: 0%;   --step-fill: 0; }
  30%     { --step-p: 100%; --step-fill: 0; }
  35%     { --step-p: 100%; --step-fill: 1; }
  90%     { --step-p: 100%; --step-fill: 1; }
  100%    { --step-p: 0%;   --step-fill: 0; }
}
@keyframes step-cycle-3 {
  0%, 40% { --step-p: 0%;   --step-fill: 0; }
  50%     { --step-p: 100%; --step-fill: 0; }
  55%     { --step-p: 100%; --step-fill: 1; }
  90%     { --step-p: 100%; --step-fill: 1; }
  100%    { --step-p: 0%;   --step-fill: 0; }
}
@keyframes step-cycle-4 {
  0%, 60% { --step-p: 0%;   --step-fill: 0; }
  70%     { --step-p: 100%; --step-fill: 0; }
  75%     { --step-p: 100%; --step-fill: 1; }
  90%     { --step-p: 100%; --step-fill: 1; }
  100%    { --step-p: 0%;   --step-fill: 0; }
}

@keyframes line-flow-1 {
  0%, 20% { background-size: 0% 100%, auto; }
  30%     { background-size: 100% 100%, auto; }
  90%     { background-size: 100% 100%, auto; }
  100%    { background-size: 0% 100%, auto; }
}
@keyframes line-flow-2 {
  0%, 40% { background-size: 0% 100%, auto; }
  50%     { background-size: 100% 100%, auto; }
  90%     { background-size: 100% 100%, auto; }
  100%    { background-size: 0% 100%, auto; }
}
@keyframes line-flow-3 {
  0%, 60% { background-size: 0% 100%, auto; }
  70%     { background-size: 100% 100%, auto; }
  90%     { background-size: 100% 100%, auto; }
  100%    { background-size: 0% 100%, auto; }
}

/* Each icon does a thematic micro-animation during its step's activation window */
.how-it-works.in-view .step:nth-child(1) .step-number i { animation: icon-compass 10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(2) .step-number i { animation: icon-checks  10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(3) .step-number i { animation: icon-eye     10s ease-in-out infinite; }
.how-it-works.in-view .step:nth-child(4) .step-number i { animation: icon-report  10s ease-in-out infinite; }

/* Compass: needle finds north as step 1 draws */
@keyframes icon-compass {
  0%   { transform: rotate(-25deg); }
  10%  { transform: rotate(15deg); }
  15%  { transform: rotate(0deg); }
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(-25deg); }
}

/* Checks: a quick stamp on activation — scaling in like a checkmark being placed */
@keyframes icon-checks {
  0%, 20% { transform: scale(0.85); }
  26%     { transform: scale(1.12); }
  32%     { transform: scale(0.96); }
  38%     { transform: scale(1); }
  90%     { transform: scale(1); }
  100%    { transform: scale(0.85); }
}

/* Eye: a single calm blink as step 3 becomes aware */
@keyframes icon-eye {
  0%, 42% { transform: scaleY(1); }
  45%     { transform: scaleY(0.08); }
  48%     { transform: scaleY(1); }
  90%     { transform: scaleY(1); }
  100%    { transform: scaleY(1); }
}

/* Report: a subtle "reviewing the page" tilt + zoom as the user takes a closer look */
@keyframes icon-report {
  0%, 60% { transform: scale(1) rotate(0deg); }
  68%     { transform: scale(1.12) rotate(-4deg); }
  74%     { transform: scale(1.06) rotate(3deg); }
  80%     { transform: scale(1) rotate(0deg); }
  90%     { transform: scale(1) rotate(0deg); }
  100%    { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works.in-view .step-number,
  .how-it-works.in-view .step-number i,
  .how-it-works.in-view .step:not(:last-child)::after { animation: none; }
}

.step h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--fs-body-sm);
  color: var(--moss);
  margin-bottom: 0;
}

/* ---- Modules section ---- */
.modules {
  background-color: var(--paper);
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}

.modules-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  margin-top: var(--space-6);
  justify-content: center;
  border-bottom: 1px solid var(--rule);
}

.tab-btn {
  position: relative;
  padding: var(--space-3) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--moss);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease-out;
  margin-bottom: -1px;
}

.tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--stone);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease-out;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn.active {
  color: var(--ink);
}

.tab-btn.active::after {
  transform: scaleX(1);
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.tab-content.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.module-icon {
  width: 48px;
  height: 48px;
  display: block;
  margin-bottom: var(--space-4);
}

.tab-content h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
  color: var(--ink);
  letter-spacing: var(--ls-heading);
}

.tab-content p {
  font-size: var(--fs-body-sm);
  color: var(--moss);
  line-height: 1.6;
  max-width: 52ch;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.module-image {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--hairline);
  background-color: var(--oyster);
}

/* ---- Insights section ----
   Cross-module observations — paper cards with screenshot slots,
   sits between Modules (paper) and Benefits (oyster) as a quiet reveal. */
.insights {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}

.insights .text-center p {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--moss);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.insight-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.insight-card-screenshot {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--fog);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(47, 85, 78, 0.05) 0 1px,
      transparent 1px 14px
    );
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.insight-card-screenshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.insight-card-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.insight-card-caption h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  margin: 0;
}

.insight-card-caption p {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ---- Benefits / comparison ---- */
.benefits {
  background-color: var(--paper);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--rule);
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--space-10);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-5) var(--space-6);
  text-align: left;
  border-bottom: var(--hairline);
  font-size: var(--fs-body-sm);
  vertical-align: top;
}

.comparison-table tr:last-child td { border-bottom: 0; }

.comparison-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--muted-color);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.comparison-table td:first-child {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- Lifted Nortefy column ---- */
.comparison-table .comparison-us {
  background-color: var(--paper);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.comparison-table th.comparison-us {
  color: var(--text-color);
  font-weight: var(--fw-bold);
  border-top: 1px solid var(--rule);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  padding-top: var(--space-5);
}

.comparison-table td.comparison-us {
}

.comparison-table tbody tr:last-child td.comparison-us {
  border-bottom: 1px solid var(--rule);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ---- Social proof / stats ---- */
.social-proof {
  background-color: var(--stone);
  color: var(--oyster);
  padding: var(--section-y) 0;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.social-proof h2 {
  color: var(--oyster);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.social-proof h2 em {
  color: var(--oyster);
  font-style: italic;
  font-weight: var(--fw-regular);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding: var(--space-8) var(--space-6);
}

.stat { text-align: center; }

.stat-number {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--oyster);
  letter-spacing: var(--ls-tight);
}

.stat-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: rgba(238, 240, 236, 0.7);
  font-weight: var(--fw-regular);
  margin-left: 0.15em;
}

.stat-label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(238, 240, 236, 0.65);
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  margin: 0;
  border: 1px solid rgba(238, 240, 236, 0.14);
  border-radius: var(--radius);
  background: rgba(238, 240, 236, 0.02);
  text-align: left;
  overflow: hidden;
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  right: 0.08em;
  font-family: var(--font-serif);
  font-size: 18rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(238, 240, 236, 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.testimonial > * {
  position: relative;
  z-index: 1;
}

/* ---- Featured testimonial ---- */
.testimonial--featured {
  background: var(--clay);
  border-color: transparent;
  color: var(--oyster);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(17, 32, 29, 0.25),
    0 24px 48px -18px rgba(17, 32, 29, 0.55),
    0 48px 80px -32px rgba(143, 82, 56, 0.45);
}

.testimonial--featured::before {
  color: rgba(238, 240, 236, 0.12);
}

.testimonial--featured .testimonial-text {
  color: var(--oyster);
}

.testimonial--featured .testimonial-attribution {
  border-top-color: rgba(238, 240, 236, 0.28);
}

.testimonial--featured .testimonial-role {
  color: rgba(238, 240, 236, 0.75);
}

.testimonial-avatar--featured {
  background: var(--oyster);
  color: var(--clay-deep);
  box-shadow: inset 0 0 0 1px rgba(47, 85, 78, 0.14);
}

@media (min-width: 880px) {
  .testimonial--featured {
    transform: translateY(-12px) scale(1.03);
  }
}

.testimonial-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  margin: 0;
  color: var(--oyster);
  flex: 1;
}

.testimonial-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(238, 240, 236, 0.12);
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(238, 240, 236, 0.18);
}

.testimonial-avatar--moss  { background: #5A6960; color: var(--oyster); }
.testimonial-avatar--clay  { background: var(--clay); color: var(--oyster); }
.testimonial-avatar--paper { background: var(--paper); color: var(--stone); }

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.testimonial-author {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--oyster);
  font-weight: var(--fw-medium);
}

.testimonial-role {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(238, 240, 236, 0.55);
  font-weight: var(--fw-regular);
}

/* ---- FAQ / accordion ---- */
.faq {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--rule);
}

.accordion {
  max-width: 720px;
  margin: var(--space-10) auto 0;
}

.accordion-item {
  border-bottom: var(--hairline);
}

.accordion-item:last-child {
  border-bottom: 0;
}

.accordion-btn {
  width: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.005em;
  transition: var(--transition-fast);
}

.accordion-btn:hover { color: var(--stone); }
.accordion-btn:hover::after { color: var(--stone); }

.accordion-btn::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--fs-lede);
  color: var(--ink);
  margin-left: var(--space-4);
  transition: var(--transition);
}

.accordion-btn.active { padding-bottom: var(--space-2); }
.accordion-btn.active::after { content: '−'; }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-inner {
  padding: 0 0 var(--space-5);
  color: var(--moss);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  max-width: 60ch;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { display: none; }
  .insights-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .hero { padding-top: var(--space-12); padding-bottom: var(--space-10); }
  .hero h1 { font-size: var(--fs-display); }
  .hero::before,
  .hero::after { filter: blur(40px) saturate(1.05); top: -120px; }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .modules-tabs { border-bottom: 0; }
  .tab-content.active { grid-template-columns: 1fr; gap: var(--space-6); }
  .problem-solution {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .pillar {
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius);
  }
  .stats-row {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding: var(--space-7) var(--space-5);
  }
  .stat-number { font-size: var(--fs-h1); }
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-4) var(--space-5);
  }
  .comparison-table .comparison-us {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .comparison-table th:first-child,
  .comparison-table td:first-child { display: none; }
}

/* ---- Closing CTA ---- */
.home-cta {
  background-color: var(--paper);
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}

.home-cta-inner {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background-color: var(--stone);
  border-radius: var(--radius-lg);
}

.home-cta-inner h2 {
  color: var(--oyster);
  margin-bottom: var(--space-4);
}

.home-cta-inner h2 em {
  font-style: italic;
  color: var(--fog);
  font-weight: var(--fw-regular);
}

.home-cta-inner p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--fog);
  margin-bottom: var(--space-7);
}

.home-cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.home-cta .btn-primary {
  background-color: var(--oyster);
  border-color: var(--oyster);
  color: var(--stone);
}

.home-cta .btn-primary:hover { color: var(--stone); }

.home-cta .btn-secondary {
  border-color: var(--oyster);
  color: var(--oyster);
  background-color: transparent;
}

@media (max-width: 860px) {
  .home-cta-inner p {
    font-size: var(--fs-body-lg);
  }
}