/* Spatial diagrams: upright labels above a layered perspective plane. */
.spatial-stage {
  --stage-color: #63f6ff;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
}
.spatial-floor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: 53%;
  width: min(86%, 1150px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) perspective(950px) rotateX(66deg) rotateZ(-12deg);
  transform-style: preserve-3d;
  opacity: .72;
}
.spatial-floor > i,
.spatial-floor > b {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--stage-color) 22%, transparent);
  border-radius: 50%;
}
.spatial-floor > b {
  background-image: linear-gradient(#65dfea18 1px, transparent 1px), linear-gradient(90deg, #65dfea18 1px, transparent 1px), radial-gradient(ellipse, #059fb328, transparent 65%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  mask-image: radial-gradient(ellipse, #000 20%, transparent 72%);
  transform: translateZ(-32px);
}
.spatial-floor > i { box-shadow: 0 10px 0 #041b2680, 0 11px 0 #65dfea24, inset 0 0 30px #059fb312; }
.spatial-floor > i:nth-child(1) { inset: 10%; }
.spatial-floor > i:nth-child(2) { inset: 24%; transform: translateZ(40px); border-color: #a897fb66; }
.spatial-floor > i:nth-child(3) { inset: 38%; transform: translateZ(85px); border-color: #63f6ff99; background: radial-gradient(ellipse, #1ca4ce44, #021a2677); }
.spatial-floor > i:first-child::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 20deg, transparent 70%, #63f6ff30 95%, #b5ffff80 100%);
  mask-image: radial-gradient(ellipse, transparent 67%, #000 69%, #000 70%, transparent 71%);
  animation: spatial-scan 24s linear infinite;
}
@keyframes spatial-scan { to { transform: rotate(360deg); } }
.spatial-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spatial-link { fill: none; stroke: var(--link-color, #63f6ff); stroke-width: 1.3; opacity: .38; }
.spatial-flow { fill: none; stroke: var(--link-color, #63f6ff); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 68; animation: spatial-flow 5s linear infinite; filter: drop-shadow(0 0 3px currentColor); }
.spatial-endpoint { fill: var(--link-color, #63f6ff); }
@keyframes spatial-flow { to { stroke-dashoffset: -284; } }

/* 01 / Raised governance modules and central control sphere. */
.section-about .about-visual {
  min-height: 0;
  display: block;
  padding: 16px 3vw 24px;
  background: radial-gradient(ellipse at 50% 40%, #083144 0%, #05131e 45%, #030e14 85%);
}
.about-visual::before, .about-visual::after { display: none; }
.spatial-caption { position: relative; z-index: 2; margin: 0; text-align: center; color: #8ddfe9; font-size: .78rem; font-weight: 700; letter-spacing: .18em; }
.spatial-caption span { margin-left: 14px; color: #a6bfc9; letter-spacing: .1em; }
.about-stage { height: clamp(310px, 43vh, 400px); max-width: 1600px; }
.about-stage .about-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: 148px; height: 148px; }
.about-stage .about-core img { width: 44px; height: 44px; }
.about-stage .about-core strong { font-size: 1.25rem; }
.about-stage .about-core span { font-size: .88rem; white-space: nowrap; }
.about-stage .about-node {
  --node-color: #63f6ff;
  position: absolute;
  left: var(--x);
  top: var(--y);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: clamp(162px, 17vw, 218px);
  height: 86px;
  padding: 12px;
  border-radius: 16px;
  animation: none;
  margin: 0;
  border-color: color-mix(in srgb, var(--node-color) 55%, transparent);
  background: linear-gradient(155deg, color-mix(in srgb, var(--node-color) 18%, #0a2431), #071622 72%);
  box-shadow: inset 0 1px 0 #ffffff38, 0 5px 0 #092330, 0 6px 0 color-mix(in srgb, var(--node-color) 38%, transparent), 0 24px 18px -12px #000b;
}
.about-stage .about-node::before { inset: 5px; border-style: solid; border-radius: 12px; opacity: .5; }
.about-stage .about-node b { color: #e7fbff; font-size: 1.08rem; }
.about-stage .about-node span { color: #b3cbd6; font-size: .88rem; margin-top: 5px; }
.about-stage .about-node-1 { --x: 18%; --y: 27%; }
.about-stage .about-node-2 { --x: 50%; --y: 14%; --node-color: #a6b0ff; }
.about-stage .about-node-3 { --x: 82%; --y: 27%; --node-color: #a9ed66; }
.about-stage .about-node-4 { --x: 82%; --y: 73%; --node-color: #65baff; }
.about-stage .about-node-5 { --x: 18%; --y: 73%; --node-color: #f1cd68; }
.about-stage .about-node-6 { --x: 50%; --y: 88%; }
.section-about .about-badges { position: relative; inset: auto; width: 100%; max-width: 1480px; margin: 12px auto 0; gap: 14px; }
.section-about .about-badges div { min-height: 82px; border-radius: 10px; box-shadow: inset 0 1px 0 #ffffff18, 0 6px 0 #020c10; }
.section-about .about-badges strong { font-size: 1.18rem; }
.section-about .about-badges span { font-size: .9rem; line-height: 1.4; }
.about-badge-experience br { display: none; }

/* Shared sculpted spheres: the light source stays above-left. */
.about-stage .about-core,
.security-orbit .security-core,
.journey-stage .journey-hub {
  background: radial-gradient(circle at 28% 20%, #2384a8 0%, #0b334b 26%, #05131f 70%);
  border: 1px solid #6ce8faab;
  box-shadow: inset 3px 4px 14px #b0efff44, inset -12px -16px 24px #000b, 0 6px 0 #061f30, 0 8px 0 #54c6e966, 0 30px 25px -13px #000e, 0 0 40px #0aa7ff26;
}
.about-stage .about-core::after,
.security-orbit .security-core::after,
.journey-stage .journey-hub::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: calc(100% + 20px);
  height: 13px;
  border: 1px solid #63f6ff77;
  border-radius: 50%;
  box-shadow: 0 7px 0 #061727, 0 8px 0 #63f6ff40, 0 0 24px #41dbfa30;
  background: #2dc8f11c;
}
.about-stage .about-core::after { top: calc(100% + 4px); height: 6px; }

/* 04 / Five elevated circular security capabilities. */
.section-security .security-visual { padding: 20px 3vw 24px; background: radial-gradient(ellipse at 50% 65%, #102c41, #071420 50%, #030e14 85%); }
.security-title-panel { position: relative; z-index: 3; }
.security-title-panel h2 { font-size: clamp(1.7rem, 2.5vw, 2.6rem); }
.security-title-panel strong { font-size: 1rem; }
.security-title-panel small { font-size: .9rem; }
.security-orbit.spatial-stage { display: block; width: min(100%, 1180px); height: clamp(395px, 49vh, 470px); }
.security-orbit .security-core { position: absolute; left: 50%; top: 59%; transform: translate(-50%, -50%); margin: 0; width: 154px; height: 154px; z-index: 6; }
.security-orbit .security-core span { font-size: 1rem; letter-spacing: .05em; }
.security-orbit .security-core > i { opacity: .18; }
.security-orbit .security-orbit-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: clamp(150px, 15.5vw, 174px);
  height: clamp(150px, 15.5vw, 174px);
  padding: 15px 10px;
  margin: 0;
  animation: none;
  overflow: visible;
  border-width: 1px;
  background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--security-color) 36%, #102434), #081928 63%, #040b12 100%);
  box-shadow: inset 2px 3px 8px #ffffff22, inset -8px -12px 18px #0008, 0 5px 0 #0b2432, 0 7px 0 color-mix(in srgb, var(--security-color) 40%, transparent), 0 28px 22px -12px #000b;
}
.security-orbit .security-orbit-node::before { inset: 7px; border-style: solid; opacity: .7; animation: none; }
.security-orbit .security-orbit-node > span { font-size: .8rem; }
.security-orbit .security-orbit-node h3 { font-size: 1rem; margin: 5px 0; }
.security-orbit .security-orbit-node p { font-size: .78rem; color: #ccdce5; white-space: nowrap; }
.security-node-1 { --x: 50%; --y: 20%; }
.security-node-2 { --x: 81%; --y: 37%; }
.security-node-3 { --x: 71%; --y: 78%; }
.security-node-4 { --x: 29%; --y: 78%; }
.security-node-5 { --x: 19%; --y: 37%; }

/* 05 / A spatial constellation, with every outcome connected to the core. */
.section-journey .journey-constellation { display: block; min-height: 0; padding: 22px 3vw 20px; background: radial-gradient(ellipse at 50% 65%, #12293e, #08131f 52%, #030e14 88%); }
.journey-constellation::before { display: none; }
.journey-constellation .journey-map-title { position: relative; inset: auto; margin: 0; width: 100%; max-width: none; text-align: center; z-index: 4; }
.journey-constellation .journey-map-title h2 { font-size: clamp(1.6rem, 2.4vw, 2.5rem); }
.journey-stage { height: clamp(420px, 56vh, 530px); max-width: 1700px; }
.journey-stage .spatial-floor { width: 95%; top: 57%; }
.journey-constellation .journey-stage .journey-hub { position: absolute; top: 50%; left: 50%; width: 154px; height: 154px; transform: translate(-50%, -50%); margin: 0; z-index: 7; }
.journey-stage .journey-hub b { color: #aeedff; font-size: 1.8rem; }
.journey-stage .journey-hub strong { font-size: 1.3rem; }
.journey-stage .journey-hub span { font-size: .92rem; }
.journey-stage .journey-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  right: auto;
  bottom: auto;
  width: clamp(110px, 10vw, 146px);
  height: clamp(110px, 10vw, 146px);
  transform: translate(-50%, -50%);
  animation: none;
  margin: 0;
  padding: 10px;
  background: radial-gradient(circle at 28% 20%, color-mix(in srgb, var(--node-color) 32%, #102434), #081826 64%, #030a12);
  box-shadow: inset 2px 3px 10px #ffffff24, inset -8px -10px 15px #0008, 0 5px 0 #0b2130, 0 6px 0 color-mix(in srgb, var(--node-color) 35%, transparent), 0 27px 20px -12px #000c;
}
.journey-stage .journey-node::before { inset: 6px; border-style: solid; opacity: .6; animation: none; }
.journey-stage .journey-node span { font-size: clamp(.96rem, 1.18vw, 1.2rem); line-height: 1.5; }
.journey-stage .journey-node:hover { border-color: var(--node-color); filter: brightness(1.15); }
.journey-stage .node-01 { --x: 12%; --y: 18%; }
.journey-stage .node-02 { --x: 37%; --y: 16%; }
.journey-stage .node-03 { --x: 63%; --y: 16%; }
.journey-stage .node-04 { --x: 88%; --y: 18%; }
.journey-stage .node-05 { --x: 7%; --y: 50%; }
.journey-stage .node-06 { --x: 28%; --y: 50%; }
.journey-stage .node-07 { --x: 72%; --y: 50%; }
.journey-stage .node-08 { --x: 93%; --y: 50%; }
.journey-stage .node-09 { --x: 12%; --y: 82%; }
.journey-stage .node-10 { --x: 37%; --y: 84%; }
.journey-stage .node-11 { --x: 63%; --y: 84%; }
.journey-stage .node-12 { --x: 88%; --y: 82%; }

/* Personal qualifications and company-issued documents remain distinct. */
.cert-badges { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.cert-badges figure { min-width: 0; }
.cert-badges img { width: 54px; height: 58px; object-fit: contain; }
.cert-badges figcaption { font-size: .75rem; }
.cert-badges .cert-oscp { border-color: #d69b7166; background: linear-gradient(140deg, #803c211a, #030d1380); }
.section-certifications { padding: 38px 3vw; }
.section-certifications .section-heading { display: block; text-align: center; margin-bottom: 24px; }
.section-certifications .section-index { margin-bottom: 10px; }
.section-certifications h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.section-certifications .section-heading > p:last-child { color: #adc2cc; font-size: 1rem; max-width: none; margin: 10px auto 0; }
.company-cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.company-cert-card { --cert-color: #70e2ff; min-width: 0; overflow: hidden; border: 1px solid #82dce52e; border-radius: 16px; background: linear-gradient(150deg, #0d2330, #060f18); box-shadow: inset 0 1px 0 #ffffff13, 0 15px 35px #0003; }
.cert-registration { --cert-color: #a9ed86; }
.cert-interoperability { --cert-color: #beaaff; }
.cert-category { padding: 18px 22px 12px; border-top: 3px solid var(--cert-color); }
.cert-category span, .cert-category b { display: block; }
.cert-category span { color: var(--cert-color); font-size: .76rem; letter-spacing: .13em; font-weight: 700; }
.cert-category b { font-size: 1.5rem; margin-top: 5px; }
.certificate-preview { position: relative; display: flex; justify-content: center; height: 192px; margin: 0 22px; padding: 10px; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse, #233948, #0a1620); }
.certificate-preview img { display: block; max-width: 100%; width: auto; height: 100%; object-fit: contain; box-shadow: 0 6px 16px #0005; transition: transform .25s; }
.certificate-preview:hover img { transform: scale(1.03); }
.certificate-preview > span { position: absolute; bottom: 8px; right: 8px; border: 1px solid #6e96aa66; border-radius: 5px; background: #071722eb; padding: 5px 9px; font-size: .76rem; color: #d7f4ff; }
.company-cert-copy { padding: 18px 22px 22px; }
.company-cert-copy h3 { font-size: 1.17rem; line-height: 1.45; margin: 0 0 9px; }
.company-cert-copy > p { font-size: .95rem; line-height: 1.65; color: #bcd0da; margin: 0; }
.company-cert-copy .certificate-meta { font-size: .875rem; line-height: 1.7; color: #a1bdcb; margin-top: 14px; overflow-wrap: anywhere; }
.certificate-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.certificate-links a { font-size: .85rem; color: var(--cert-color); text-decoration: underline; text-underline-offset: 4px; }
.registered-services { list-style: none; display: grid; gap: 5px; margin: 12px 0 0; padding: 0; }
.registered-services li { font-size: .89rem; line-height: 1.5; }
.registered-services li::before { content: "✓"; color: var(--cert-color); margin-right: 8px; }
.connectathon-certificates { display: grid; gap: 10px; margin: 0 22px; }
.connectathon-certificates a { display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 91px; border: 1px solid #b29df52b; border-radius: 8px; background: #b29df506; }
.connectathon-certificates img { width: 112px; height: 78px; object-fit: contain; background: #eff3f5; }
.connectathon-certificates b { display: block; font-size: 1rem; }
.connectathon-certificates small { display: block; margin-top: 3px; font-size: .75rem; color: #b5c4d3; }
.connectathon-certificates em { display: block; margin-top: 6px; font-size: .76rem; color: var(--cert-color); font-style: normal; }
.company-cert-card a:focus-visible { outline: 2px solid var(--cert-color); outline-offset: 3px; }

@media (min-width: 961px) and (max-height: 800px) {
  .section-about .section-heading h2 { font-size: 2.2rem; }
  .about-stage { height: 310px; }
  .about-stage .about-core { width: 132px; height: 132px; }
  .about-stage .about-node { height: 76px; }
  .section-about .about-badges div { min-height: 72px; }
  .security-title-panel h2 { font-size: 2.1rem; }
  .security-title-panel small { font-size: .84rem; }
  .security-orbit.spatial-stage { height: 400px; }
  .security-orbit .security-orbit-node { width: 148px; height: 148px; }
  .security-orbit .security-core { width: 142px; height: 142px; }
  .journey-stage { height: 400px; }
  .journey-stage .journey-node { width: 116px; height: 116px; }
  .journey-constellation .journey-map-title h2 { font-size: 2.1rem; }
  .section-certifications { padding-block: 24px; }
  .section-certifications h2 { font-size: 2.1rem; }
  .certificate-preview { height: 148px; }
  .cert-category { padding-top: 12px; }
  .company-cert-copy { padding-top: 14px; padding-bottom: 16px; }
  .connectathon-certificates a { min-height: 69px; padding: 6px 10px; }
  .connectathon-certificates img { height: 62px; width: 88px; }
  .company-cert-copy .certificate-meta { margin-top: 10px; }
}
@media (min-width: 701px) and (max-width: 960px) {
  .section-about, .section-security, .section-journey { padding-block: 28px; }
  .about-stage { height: 350px; }
  .about-stage .about-node { width: 154px; }
  .security-orbit.spatial-stage { height: 420px; }
  .security-orbit .security-orbit-node { width: 150px; height: 150px; }
  .security-orbit .security-core { width: 136px; height: 136px; }
  .security-node-3 { --x: 74%; }
  .security-node-4 { --x: 26%; }
  .journey-stage { height: 400px; }
  .journey-stage .journey-node { width: clamp(90px, 13vw, 100px); height: clamp(90px, 13vw, 100px); }
  .journey-constellation .journey-stage .journey-hub { width: 128px; height: 128px; }
  .company-cert-grid { gap: 12px; }
  .cert-category, .company-cert-copy { padding-inline: 15px; }
  .certificate-preview, .connectathon-certificates { margin-inline: 15px; }
  .connectathon-certificates a { flex-direction: column; text-align: center; }
}
@media (max-width: 1100px) {
  .cert-badges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .section-about, .section-security, .section-journey { padding-block: 28px; }
  .section-about .section-heading h2 { font-size: clamp(1.45rem, 5.5vw, 2rem); }
  .section-about .section-heading h2 br { display: block; }
  .spatial-caption { font-size: .73rem; letter-spacing: .12em; }
  .spatial-caption span { display: none; }
  .section-about .about-visual { padding: 18px 16px 24px; }
  .about-stage, .security-orbit.spatial-stage, .journey-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    height: auto;
    padding: 20px 0 14px;
    max-width: 520px;
  }
  .spatial-floor { width: 145%; max-width: 650px; top: 180px; opacity: .4; }
  .journey-stage .spatial-floor { width: 145%; top: 220px; }
  .about-stage .about-core, .security-orbit .security-core, .journey-constellation .journey-stage .journey-hub {
    position: relative; inset: auto; transform: none; grid-column: 1 / -1; width: 120px; height: 120px; margin: 0 auto 14px;
  }
  .about-stage .about-node, .security-orbit .security-orbit-node, .journey-stage .journey-node {
    position: relative; inset: auto; transform: none; margin: 0; justify-self: center; width: min(100%, 160px);
  }
  .about-stage { gap: 16px 28px; padding-block: 14px; }
  .about-stage .about-core img { width: 36px; height: 36px; }
  .about-stage .about-core strong { font-size: 1.1rem; }
  .about-stage .about-core span { font-size: .8rem; }
  .about-stage .about-node { height: 72px; padding: 8px 4px; }
  .about-stage .about-node b { font-size: 1rem; }
  .about-stage .about-node span { font-size: .8rem; }
  .section-about .about-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .section-about .about-badges div { padding: 10px 5px; min-height: 68px; }
  .section-about .about-badges strong { font-size: 1.06rem; }
  .section-about .about-badges span { font-size: .82rem; }
  .section-security .security-visual { padding: 22px 16px; }
  .security-title-panel h2 { font-size: clamp(1.4rem, 5.3vw, 2rem); }
  .security-title-panel strong { font-size: .87rem; }
  .security-title-panel small { font-size: .8rem; }
  .security-orbit.spatial-stage { gap: 18px 28px; padding-block: 14px; }
  .security-orbit .security-orbit-node { width: min(100%, 138px); height: auto; aspect-ratio: 1; padding: 10px 4px; }
  .security-orbit .security-core span { font-size: .88rem; }
  .security-orbit .security-orbit-node h3 { font-size: clamp(.78rem, 3.5vw, 1rem); }
  .security-orbit .security-orbit-node p { font-size: .8rem; }
  .security-orbit .security-orbit-node:last-child { grid-column: auto; }
  .section-journey .journey-constellation { padding: 22px 16px; }
  .journey-constellation .journey-map-title h2 { font-size: clamp(1.22rem, 4.6vw, 1.8rem); }
  .journey-map-title h2 span { white-space: nowrap; }
  .journey-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .journey-stage .journey-node { height: auto; aspect-ratio: 1; max-width: 104px; padding: 5px; }
  .journey-stage .journey-node span { font-size: .9rem; line-height: 1.4; }
  .journey-stage .journey-hub b { font-size: 1.5rem; }
  .journey-stage .journey-hub strong { font-size: 1.1rem; }
  .journey-stage .journey-hub span { font-size: .85rem; }
  .journey-constellation .journey-hub::before { display: none; }
  .cert-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cert-badges img { width: 58px; height: 64px; }
  .cert-badges figcaption { font-size: .76rem; }
  .section-certifications { padding: 28px 16px; }
  .company-cert-grid { grid-template-columns: 1fr; gap: 18px; }
  .certificate-preview { height: 190px; }
  .company-cert-copy { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .spatial-floor *, .spatial-flow, .spatial-stage *::before { animation: none !important; }
  .spatial-flow { display: none; }
}