/* ==========================================================================
   Sections: homepage modules and shared section-level patterns
   ========================================================================== */

/* ---- hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--c-navy-900); color: var(--c-text-inv); padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)); padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.hero__bg { position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 70% at 78% 40%, rgba(18, 103, 196, .35), transparent 70%),
		radial-gradient(40% 50% at 20% 90%, rgba(39, 184, 242, .12), transparent 70%),
		linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-800) 55%, var(--c-navy-700) 100%);
}
.hero__bg::after { content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid-size) var(--grid-size);
	mask-image: radial-gradient(70% 80% at 60% 50%, rgba(0,0,0,.9), transparent);
}
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: center; }
.hero__title { font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.9rem); margin-bottom: var(--sp-5); max-width: 18ch; color: #fff; }
.hero__lead { font-size: var(--fs-lg); color: var(--c-text-inv-2); max-width: 58ch; margin-bottom: var(--sp-8); }
.hero__industries { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--c-line-inv); font-size: var(--fs-sm); }
.hero__industries a { color: var(--c-text-inv-2); }
.hero__industries a:hover { color: var(--c-cyan); }
.hero__visual { margin: 0; position: relative; }
.hero__frame { position: relative; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(165,223,237,.15); }
.hero__img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.hero__callout { position: absolute; padding: .4em .7em; font-size: var(--fs-xs); background: rgba(7,21,34,.85); color: var(--c-cyan); border: 1px solid rgba(39,184,242,.4); border-radius: 4px; backdrop-filter: blur(6px); }
.hero__callout::before { content: ""; position: absolute; width: 40px; height: 1px; background: var(--c-cyan); opacity: .7; }
.hero__callout--a { left: 8%; top: 14%; }
.hero__callout--a::before { left: 100%; top: 50%; }
.hero__callout--b { right: 10%; bottom: 16%; }
.hero__callout--b::before { right: 100%; top: 50%; }
.hero__caption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-inv-2); text-align: right; }
.hero-sm { padding-top: var(--header-h); max-width: 720px; }
.hero-sm__lead { color: var(--c-text-inv-2); font-size: var(--fs-lg); margin-bottom: var(--sp-6); }
.section--hero-sm { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }

/* ---- metrics band ----------------------------------------------------- */
.metrics-band { border-bottom: 1px solid var(--c-line); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.metrics .metric { background: var(--bg-panel); border: 1px solid var(--c-line); border-left: 2px solid var(--c-cyan); border-radius: var(--radius); }
.trust-line { margin: var(--sp-8) 0 0; text-align: center; color: var(--c-text-2); font-size: var(--fs-sm); }
.logo-wall { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-8); }
.logo-wall img { height: 32px; width: auto; filter: grayscale(1); opacity: .75; }

/* ---- capabilities grid ------------------------------------------------ */
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line-inv); border: 1px solid var(--c-line-inv); border-radius: var(--radius-lg); overflow: hidden; }
.cap-tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); background: var(--c-navy-900); color: var(--c-text-inv); min-height: 220px; transition: background var(--dur) var(--ease); }
.cap-tile:hover { background: var(--c-navy-800); color: var(--c-text-inv); }
.cap-tile__no { font-size: var(--fs-xs); color: var(--c-cyan); }
.cap-tile__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: #fff; }
.cap-tile__text { font-size: var(--fs-sm); color: var(--c-text-inv-2); flex: 1; }
.cap-tile__tol { font-size: var(--fs-xs); color: var(--c-cyan); border-top: 1px solid var(--c-line-inv); padding-top: var(--sp-3); }
.cap-tile__arrow { position: absolute; right: var(--sp-5); top: var(--sp-5); color: var(--c-cyan); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cap-tile:hover .cap-tile__arrow { opacity: 1; transform: none; }

/* ---- industries tabs -------------------------------------------------- */
.ind-tabs { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 2fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.ind-tabs__list { display: grid; gap: 2px; border-left: 1px solid var(--c-line); }
.ind-tabs__tab { display: flex; gap: var(--sp-3); align-items: baseline; text-align: left; padding: .8em 1em; margin-left: -1px; border-left: 2px solid transparent; color: var(--c-text-2); font-size: var(--fs-base); font-weight: var(--fw-medium); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ind-tabs__tab .mono { font-size: var(--fs-xs); color: var(--c-text-3); }
.ind-tabs__tab:hover { color: var(--c-text); background: var(--c-surface); }
.ind-tabs__tab[aria-selected="true"] { color: var(--c-text); border-left-color: var(--c-cyan); background: var(--c-surface); }
.ind-tabs__tab[aria-selected="true"] .mono { color: var(--c-brand); }
.ind-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.ind-panel__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-navy-800); aspect-ratio: 4 / 3; }
.ind-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.ind-panel__body h3 { font-size: var(--fs-2xl); }
.ind-panel__body h3 a { color: var(--c-text); }
.ind-panel__body > p { color: var(--c-text-2); }
.ind-panel__label { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); }
.ind-panel__cta { margin-top: var(--sp-6); }

/* ---- why / workflow --------------------------------------------------- */
.tile--pillar .tile__evidence { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-brand); }
.workflow { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ---- equipment / quality ---------------------------------------------- */
.media-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-navy-800); box-shadow: var(--shadow-lg); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.media-frame--chamfer { border-radius: var(--radius-media); }
.equip-list { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-8); }
.equip-list__item { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line-inv); border-radius: var(--radius-sm); background: rgba(255,255,255,.03); }
.equip-list__name { font-weight: var(--fw-medium); color: #fff; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.equip-list__detail { font-size: var(--fs-sm); color: var(--c-text-inv-2); }
.q-point { display: grid; grid-template-columns: minmax(40px, auto) 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.q-point__no { color: var(--c-brand); font-size: var(--fs-sm); padding-top: .2em; }
.q-point p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.claim-note { margin: var(--sp-6) 0; font-size: var(--fs-sm); color: var(--c-text-2); display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap; }

@media (max-width: 1024px) {
	.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ind-tabs { grid-template-columns: 1fr; }
	.ind-tabs__list { display: flex; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--c-line); padding-bottom: 2px; gap: 0; scrollbar-width: thin; }
	.ind-tabs__tab { border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; margin: 0; }
	.ind-tabs__tab[aria-selected="true"] { border-bottom-color: var(--c-cyan); background: transparent; }
}
@media (max-width: 768px) {
	.hero { padding-top: calc(var(--header-h) + 2rem); }
	.hero__inner { grid-template-columns: 1fr; }
	.hero__title { max-width: none; }
	.hero__visual { margin-top: var(--sp-4); }
	.hero__callout { font-size: .65rem; }
	.metrics { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
	.metric { padding: var(--sp-4); }
	.metric__value { font-size: var(--fs-2xl); }
	.cap-grid { grid-template-columns: 1fr; }
	.cap-tile { min-height: 0; }
	.ind-panel { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 480px) { .metrics { grid-template-columns: 1fr; } }