/* V47: direct, specialist access to the three operational XR-UAT centres. */
#technology.v8-home-tech {
  background:
    radial-gradient(circle at 50% 8%, rgba(48, 198, 236, .09), transparent 30%),
    linear-gradient(180deg, #061421 0%, #04101b 100%);
}

.v47-centres-heading { align-items: end; }
.v47-centres-heading h2 { max-width: 16ch; }

.v47-centres-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 52px);
}

.v47-centre-card {
  --centre-accent: #54e4ff;
  --centre-accent-rgb: 84, 228, 255;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--centre-accent-rgb), .34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--centre-accent-rgb), .11), transparent 38%),
    linear-gradient(155deg, rgba(8, 31, 47, .98), rgba(3, 13, 23, .99));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .25), inset 0 1px rgba(255,255,255,.035);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.v47-centre-card[data-centre="nature"] {
  --centre-accent: #54efc2;
  --centre-accent-rgb: 84, 239, 194;
}

.v47-centre-card[data-centre="chemical"] {
  --centre-accent: #76cfff;
  --centre-accent-rgb: 118, 207, 255;
}

.v47-centre-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--centre-accent-rgb), .62);
  box-shadow: 0 30px 70px rgba(0,0,0,.33), 0 0 35px rgba(var(--centre-accent-rgb), .08);
}

.v47-centre-viewer {
  position: relative;
  height: clamp(320px, 29vw, 430px);
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--centre-accent-rgb), .25);
  background:
    linear-gradient(rgba(var(--centre-accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--centre-accent-rgb), .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(var(--centre-accent-rgb), .14), transparent 56%),
    #041521;
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.v47-centre-viewer model-viewer { width: 100%; height: 100%; background: transparent; }

.v47-viewer-status {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--centre-accent-rgb), .38);
  border-radius: 999px;
  color: var(--centre-accent);
  background: rgba(3, 16, 27, .86);
  backdrop-filter: blur(10px);
  font: 700 .64rem/1.1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.v47-viewer-status > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--centre-accent);
  box-shadow: 0 0 15px var(--centre-accent);
}

.v47-centre-body {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.3vw, 32px);
}

.v47-centre-body > small {
  color: var(--centre-accent);
  font: 700 .68rem/1.25 var(--font-mono, monospace);
  letter-spacing: .14em;
}

.v47-centre-body h3 {
  margin: 12px 0 10px;
  color: #f4f8ff;
  font-size: clamp(1.35rem, 1.75vw, 1.75rem);
  line-height: 1.08;
}

.v47-centre-body p {
  margin: 0;
  color: #afc1d2;
  font-size: .94rem;
  line-height: 1.62;
}

.v47-centre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 24px;
}

.v47-centre-tags span {
  padding: 7px 9px;
  border: 1px solid rgba(var(--centre-accent-rgb), .25);
  border-radius: 8px;
  color: #c6d9e8;
  background: rgba(var(--centre-accent-rgb), .055);
  font: 700 .61rem/1 var(--font-mono, monospace);
  letter-spacing: .09em;
}

.v47-centre-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid rgba(var(--centre-accent-rgb), .48);
  border-radius: 12px;
  color: #03121d;
  background: linear-gradient(100deg, var(--centre-accent), #8fb0ff);
  font-size: .91rem;
  font-weight: 800;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}

.v47-centre-card[data-centre="nature"] .v47-centre-button {
  background: linear-gradient(100deg, #54efc2, #63d7f6);
}

.v47-centre-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.v47-centre-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.v47-centre-button b { font-size: 1.25rem; }

.v47-centres-shortcuts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid rgba(92, 221, 248, .22);
  border-radius: 16px;
  background: rgba(3, 14, 24, .72);
}

.v47-centres-shortcuts > span {
  margin-right: 4px;
  color: #6fdff4;
  font: 700 .63rem/1 var(--font-mono, monospace);
  letter-spacing: .14em;
}

.v47-centres-shortcuts a {
  padding: 8px 11px;
  border: 1px solid rgba(139, 188, 216, .22);
  border-radius: 999px;
  color: #d9e7f1;
  font-size: .78rem;
  text-decoration: none;
}

.v47-centres-shortcuts a:hover,
.v47-centres-shortcuts a:focus-visible { border-color: #54e4ff; color: #54e4ff; }

@media (max-width: 1120px) {
  .v47-centres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v47-centre-card:last-child { grid-column: 1 / -1; }
  .v47-centre-card:last-child .v47-centre-viewer { height: 410px; }
}

@media (max-width: 720px) {
  .v47-centres-grid { grid-template-columns: minmax(0, 1fr); }
  .v47-centre-card:last-child { grid-column: auto; }
  .v47-centre-viewer,
  .v47-centre-card:last-child .v47-centre-viewer { height: 340px; }
  .v47-centre-body { min-height: 0; }
  .v47-centre-button { margin-top: 4px; }
  .v47-centres-shortcuts { align-items: stretch; flex-direction: column; }
  .v47-centres-shortcuts a { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .v47-centre-card, .v47-centre-button { transition: none; }
}
