/* ---------- S1 Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-ink-900);
  padding-block: var(--space-16) var(--space-12);
}
@media (min-width: 768px) { .hero { padding-block: var(--space-24) var(--space-20); } }

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 27, 40, .15) 0%, rgba(14, 27, 40, .35) 55%, rgba(14, 27, 40, .55) 100%),
    linear-gradient(90deg, rgba(14, 27, 40, .30) 0%, rgba(14, 27, 40, .05) 78%);
}
.hero-inner { position: relative; }

.hero-eyebrow {
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-light);
  margin-bottom: var(--space-5);
}

.hero h1 { color: #fff; max-width: 17ch; }

.hero-lead {
  margin-top: var(--space-5);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: #D3DCE4;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

.hero-selector { margin-top: var(--space-12); max-width: 1060px; }

/* ---------- S2 Trust bar ---------- */
.trust-bar {
  padding-block: var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-100);
}
@media (min-width: 1024px) { .trust-bar { padding-block: var(--space-10); } }

/* ---------- S3 Pain points ---------- */
.pain-grid {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pain-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); } }

.pain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-line-200);
  border-top: 3px solid var(--color-steel-300);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard),
              border-top-color var(--motion-base) var(--ease-standard);
}
.pain-card.is-danger { border-top-color: var(--color-accent); }
@media (hover: hover) {
  .pain-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-card-hover);
    border-top-color: var(--color-accent);
  }
  .pain-card:hover .pain-link { color: var(--color-accent); }
}

.pain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-ink-700);
  margin-bottom: var(--space-4);
}
.pain-card.is-danger .pain-icon { background: var(--color-accent-soft); color: var(--color-accent); }

.pain-card h3 { font-size: var(--text-lg); line-height: 1.25; margin-bottom: var(--space-3); }
.pain-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-steel-500); }
.pain-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-800);
  transition: color var(--motion-fast) var(--ease-standard);
}

/* ---------- S4 Products ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.product-more {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line-200);
}
.product-more-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-steel-500);
  margin-bottom: var(--space-4);
}
.product-more ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.product-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px var(--space-4);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
  transition: border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
@media (hover: hover) {
  .product-more a:hover { border-color: var(--color-ink-600); color: var(--color-ink-900); }
}

/* ---------- S5 Industries ---------- */
.industry-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) { .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1200px) { .industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.industry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
@media (hover: hover) {
  .industry-card:hover { transform: translateY(-2px); box-shadow: var(--elev-card-hover); }
  .industry-card:hover .industry-media img { transform: scale(1.04); }
}
.industry-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-2); }
.industry-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-standard);
}
.industry-body { padding: var(--space-4); }
.industry-body h3 { font-size: var(--text-base); line-height: 1.3; margin-bottom: 6px; }
.industry-body p { font-size: var(--text-xs); line-height: 1.5; color: var(--color-steel-500); }

/* ---------- S6 Capability ---------- */
.capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
@media (min-width: 900px) { .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

.cap-media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.cap-media img { width: 100%; height: 100%; object-fit: cover; }

.cap-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(242, 124, 62, .16);
  color: var(--color-accent-light);
}
.cap-head h3 { font-size: var(--text-lg); line-height: 1.25; }
.cap-body { font-size: var(--text-sm); line-height: 1.65; color: #C7D2DC; }

.cap-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.cap-thumbs img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-sm);
  opacity: .82;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
@media (hover: hover) { .cap-thumbs img:hover { opacity: 1; } }

/* certificates strip */
.cert-strip {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.cert-strip-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.cert-strip-head h3 { font-size: var(--text-xl); }

.cert-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 640px) { .cert-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cert-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cert-row li { display: flex; flex-direction: column; gap: var(--space-2); }
.cert-row img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .16);
}
.cert-row span { font-size: 11px; line-height: 1.4; color: #A9B8C6; }

/* ---------- Case cards ---------- */
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 900px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.case-card {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
@media (hover: hover) {
  .case-card:hover { transform: translateY(-3px); box-shadow: var(--elev-card-hover); }
}
.case-media { aspect-ratio: 16 / 9; background: var(--color-surface-2); }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: var(--space-6); }
.case-meta {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.case-body h3 { font-size: var(--text-xl); line-height: 1.28; margin-bottom: var(--space-3); }
.case-summary { font-size: var(--text-sm); line-height: 1.65; color: var(--color-steel-500); }
.case-points { list-style: none; display: grid; gap: var(--space-2); margin: var(--space-5) 0; }
.case-points li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-700);
}
.case-points svg { flex-shrink: 0; margin-top: 3px; color: var(--color-success); }

/* ---------- S7 Process ---------- */
.process-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}
@media (min-width: 640px) { .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
@media (min-width: 1280px) { .process-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); } }

/* 8-step variant (About page): 4 columns x 2 rows from tablet-landscape up */
@media (min-width: 1024px) {
  .process-list.process-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
}

.process-list li { padding-top: var(--space-4); border-top: 2px solid var(--color-line-200); }
.process-n {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1;
  color: var(--color-steel-300);
  margin-bottom: var(--space-3);
}
.process-list h3 { font-size: var(--text-base); line-height: 1.3; margin-bottom: var(--space-2); }
.process-list p { font-size: var(--text-xs); line-height: 1.6; color: var(--color-steel-500); }

.process-assurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-200);
}
.process-assurance li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-ink-700);
}
.process-assurance svg { color: var(--color-success); flex-shrink: 0; }

/* ---------- S8 RFQ layout ---------- */
.rfq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}
@media (min-width: 1024px) {
  .rfq-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: start; }
  .rfq-aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}
.rfq-aside .eyebrow { margin-bottom: var(--space-4); }
.rfq-aside h2 { max-width: 16ch; }
.rfq-aside .lead { margin-top: var(--space-4); }

.rfq-benefits { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.rfq-benefits li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-700);
}
.rfq-benefits svg { flex-shrink: 0; margin-top: 2px; color: var(--color-success); }

.rfq-alt {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-200);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.rfq-alt p { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-800); }