/* SAARSflow premium industrial-technology hybrid. */

body {
  background: radial-gradient(circle at 50% 12%, rgba(32, 207, 232, .025), transparent 32rem), var(--deep);
}

h1, h2, h3, h4 { text-wrap: balance; }
.eyebrow { color: var(--brass-lit); }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 9px; vertical-align: middle; background: var(--brass); }
.section-head h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); letter-spacing: -.055em; line-height: 1; }
.section-head p { max-width: 62ch; font-size: clamp(.96rem, 1.35vw, 1.08rem); line-height: 1.75; color: var(--ivory-dim); }

.site-nav.is-compact { background: rgba(4, 18, 26, .78); border-bottom-color: rgba(200, 155, 74, .16); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
.nav-links.nav-pill { background: rgba(4, 18, 26, .42); border-color: rgba(243, 236, 221, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-links a:hover, .footer-links a:hover { color: var(--brass-lit); }
.btn--primary { box-shadow: 0 12px 34px rgba(200, 155, 74, .18); }
.btn--primary:hover { box-shadow: 0 15px 42px rgba(200, 155, 74, .26); }
.btn--ghost:hover { border-color: rgba(230, 196, 130, .68); }

/* Preserve the cinematic hero: warm grade, serif contrast and depth. */
.hero-bg, .hero-fg { filter: saturate(.76) contrast(1.1) brightness(.94); }
.hero-grade { mix-blend-mode: soft-light; background: linear-gradient(155deg, rgba(230, 196, 130, .35), rgba(200, 155, 74, .07) 34%, rgba(4, 18, 26, .05) 58%, rgba(4, 18, 26, .55)); }
.hero-wordmark { letter-spacing: -.055em; text-shadow: 0 8px 50px rgba(4, 18, 26, .22); }
.hero-headline-text { letter-spacing: -.035em; text-shadow: 0 5px 24px rgba(4, 18, 26, .48); }
.hero-headline-text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; background: linear-gradient(120deg, #F3D08C, var(--brass-lit) 48%, var(--brass)); -webkit-background-clip: text; background-clip: text; }

/* Client facilities: the service promise immediately after the hero. */
.facilities-section { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 120px); border-top: 1px solid rgba(200, 155, 74, .14); border-bottom: 1px solid rgba(27, 74, 93, .7); background: linear-gradient(rgba(27, 74, 93, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 74, 93, .08) 1px, transparent 1px), radial-gradient(circle at 88% 15%, rgba(32, 207, 232, .065), transparent 31%), #061721; background-size: 64px 64px, 64px 64px, auto, auto; }
.facilities-section::before { content: "CLIENT WORKSPACE"; position: absolute; top: 32px; right: -12px; color: rgba(243, 236, 221, .025); font-family: var(--font-display); font-size: clamp(4rem, 10vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -.07em; white-space: nowrap; pointer-events: none; }
.facilities-intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr); gap: clamp(32px, 7vw, 96px); align-items: end; margin-bottom: clamp(48px, 6vw, 72px); }
.facilities-intro h2 { max-width: 760px; margin-top: 12px; font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.06em; }
.facilities-intro h2 em { display: block; margin-top: 6px; }
.facilities-intro > p { color: var(--ivory-dim); font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.8; }
.facilities-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(168, 186, 194, .16); border-left: 1px solid rgba(168, 186, 194, .16); }
.facility-card { position: relative; min-height: 224px; padding: 28px; overflow: hidden; border-right: 1px solid rgba(168, 186, 194, .16); border-bottom: 1px solid rgba(168, 186, 194, .16); background: linear-gradient(145deg, rgba(12, 45, 61, .5), rgba(4, 18, 26, .48)); transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); }
.facility-card::after { content: ""; position: absolute; inset: auto -20% -70% 20%; height: 180px; background: radial-gradient(circle, rgba(32, 207, 232, .11), transparent 68%); opacity: 0; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.facility-card:hover { z-index: 2; background: linear-gradient(145deg, rgba(15, 56, 73, .72), rgba(5, 23, 32, .82)); border-color: rgba(32, 207, 232, .36); transform: translateY(-4px); }
.facility-card:hover::after { opacity: 1; transform: translateY(-18px); }
.facility-index { display: block; color: var(--brass); font-size: 11px; letter-spacing: .12em; }
.facility-signal { position: absolute; top: 30px; right: 28px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(32, 207, 232, .08), 0 0 18px rgba(32, 207, 232, .42); }
.facility-card h3 { margin-top: 46px; font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -.035em; }
.facility-card p { margin-top: 12px; color: var(--ivory-dim); font-size: .92rem; line-height: 1.7; }
.facilities-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.facilities-action > span { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.facilities-action i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(32, 207, 232, .65); }

/* Editorial product cards. */
.source-section { background: radial-gradient(circle at 50% 48%, rgba(12, 45, 61, .42), transparent 48%); }
.showcase-card { background: linear-gradient(160deg, rgba(14, 49, 65, .92), rgba(6, 25, 34, .96)); border-color: rgba(168, 186, 194, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 50px rgba(0, 0, 0, .16); }
.source-card--centre .showcase-card { border-color: rgba(230, 196, 130, .52); box-shadow: 0 30px 80px rgba(0, 0, 0, .26), 0 0 40px rgba(200, 155, 74, .08); }
.showcase-card:hover, .showcase-card:focus-visible { border-color: var(--brass-lit); box-shadow: 0 30px 60px -18px rgba(200, 155, 74, .22); }
.showcase-standards { color: var(--brass-lit); }

/* Process: gold is trust, cyan is live movement. */
.process-section { background: radial-gradient(circle at 50% 52%, rgba(32, 207, 232, .045), transparent 30%), #05151E; }
.process-ring-glow, .process-ring-band { background: conic-gradient(from 0deg, var(--cyan), var(--brass) 32%, var(--brass-lit) 48%, var(--cyan) 70%, var(--brass)); }
.process-centre { background: radial-gradient(circle at 38% 28%, #103345, var(--deep) 72%); border-color: rgba(230, 196, 130, .32); }
.process-panel { background: rgba(8, 34, 48, .92); border-color: rgba(168, 186, 194, .2); box-shadow: 0 24px 60px rgba(0, 0, 0, .34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Trust, reference and FAQ panels. */
#why .why-col, .table-scroll, .accordion-item { border: 1px solid rgba(168, 186, 194, .16); background: linear-gradient(145deg, rgba(12, 45, 61, .58), rgba(5, 22, 30, .72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
#why .why-col { position: relative; min-height: 260px; padding: 30px; border-radius: var(--radius-card); overflow: hidden; }
#why .why-col::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 58px; background: var(--brass); }
#why .why-col h3 { font-size: 1.22rem; }
#why .why-col p { margin-top: 16px; color: var(--ivory-dim); font-size: .92rem; }
.table-scroll { border-radius: var(--radius-card); overflow: auto; }
.pressure-table thead th { background: rgba(200, 155, 74, .12); }
.pressure-table tbody tr:hover { background: rgba(32, 207, 232, .035); }
.accordion-item { border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.accordion-trigger { padding-inline: 22px; }

/* RFQ Assistant becomes the functional technology layer. */
.rfqa-inline-section { background: linear-gradient(rgba(27, 74, 93, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 74, 93, .09) 1px, transparent 1px), radial-gradient(circle at 82% 8%, rgba(32, 207, 232, .08), transparent 30%), #041219; background-size: 56px 56px, 56px 56px, auto, auto; }
#rfqa-inline-mount .rfqa-header { padding-top: 10px; }
#rfqa-inline-mount .rfqa-title-group::before { content: "SMART SOURCING WORKSPACE  /  ONLINE"; display: block; margin-bottom: 8px; color: var(--cyan); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }
#rfqa-inline-mount .rfqa-brand-mark { border-color: rgba(230, 196, 130, .52); box-shadow: 0 0 30px rgba(200, 155, 74, .08); }
#rfqa-inline-mount .rfqa-sector-section, #rfqa-inline-mount .rfqa-upload-section, #rfqa-inline-mount .rfqa-manual-section, #rfqa-inline-mount .rfqa-table-preview, #rfqa-inline-mount .rfqa-contact-row, #rfqa-inline-mount .rfqa-send-row { border-color: rgba(168, 186, 194, .16); background: linear-gradient(145deg, rgba(12, 45, 61, .72), rgba(5, 22, 30, .82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 22px 58px rgba(0, 0, 0, .14); }
#rfqa-inline-mount .rfqa-upload-section { border-color: rgba(32, 207, 232, .26); }
#rfqa-inline-mount .rfqa-manual-section { border-color: rgba(230, 196, 130, .25); }
#rfqa-inline-mount .rfqa-sector-tab.is-active { border-color: var(--brass); background: var(--brass); color: var(--deep); box-shadow: 0 10px 24px rgba(200, 155, 74, .16); }
#rfqa-inline-mount .rfqa-file-label, #rfqa-inline-mount .rfqa-btn--add, #rfqa-inline-mount .rfqa-btn--send { border-color: var(--cyan); background: var(--cyan); color: var(--deep); }
#rfqa-inline-mount .rfqa-field input:focus, #rfqa-inline-mount .rfqa-field select:focus, #rfqa-inline-mount .rfqa-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(32, 207, 232, .08); }
#rfqa-inline-mount .rfqa-section-title { color: var(--brass-lit); }
.wa-float { box-shadow: 0 12px 32px rgba(200, 155, 74, .22); }
.site-footer { background: #030D12; }

@media (max-width: 900px) {
  .facilities-intro { grid-template-columns: 1fr; gap: 22px; }
  .facilities-intro > p { max-width: 620px; }
  .facilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .section-head h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .facilities-intro h2 { font-size: clamp(2.25rem, 12vw, 3.4rem); line-height: 1.02; }
  .facilities-grid { grid-template-columns: 1fr; }
  .facility-card { min-height: 198px; }
  .facility-card h3 { margin-top: 34px; }
  .facilities-action { align-items: stretch; flex-direction: column; }
  .facilities-action .btn { justify-content: center; }
  #why .why-col { min-height: auto; }
  #why .why-col::before { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) { .facility-card:hover { transform: none; } }