/* ═══════════════════════════════════════════════════════════════
   Diamond SPI — Schematics & high-end visual primitives
   Shared CSS used across index/services/about/partners/contact.

   Variables expected on :root (already defined in every page):
     --cyan, --cyan-glow, --cyan-dim, --black, --white,
     --font-display, --font-body, --transition
   ═══════════════════════════════════════════════════════════════ */

/* ─── core schematic wrapper ─────────────────────────────────── */
.dspi-schematic {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(0,200,255,0.06), transparent 70%),
    linear-gradient(180deg, #08111a 0%, #050a10 100%);
  border: 1px solid rgba(0,200,255,0.10);
  overflow: hidden;
}
.dspi-schematic::before,
.dspi-schematic::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(0,200,255,0.55);
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.35));
  pointer-events: none;
}
.dspi-schematic::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.dspi-schematic::after  { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* faint engineering grid underlay (looks like CAD paper) */
.dspi-schematic .dspi-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 60%, transparent 100%);
  pointer-events: none;
}

.dspi-schematic .dspi-svg {
  position: relative;
  width: 100%; height: 100%;
  display: block;
}

/* corner readout chips (mimic CAD title block) */
.dspi-readout {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,200,255,0.75);
  padding: 5px 9px;
  border: 1px solid rgba(0,200,255,0.30);
  background: rgba(8,17,26,0.65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}
.dspi-readout.r-tr { bottom: auto; left: auto; top: 10px; right: 10px; }
.dspi-readout.r-tl { bottom: auto; top: 10px; }
.dspi-readout.r-br { left: auto; right: 10px; }

/* ─── animated current / signal flow lines ───────────────────── */
.dspi-line {
  fill: none;
  stroke: rgba(0,200,255,0.18);
  stroke-width: 1.2;
}
.dspi-line.dspi-line-strong { stroke: rgba(0,200,255,0.40); stroke-width: 1.4; }
.dspi-line.dspi-line-faint  { stroke: rgba(0,200,255,0.10); stroke-width: 1; }

/* the "flowing current" overlay — a short dash that travels along the path */
.dspi-flow {
  fill: none;
  stroke: var(--cyan, #00c8ff);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(0,200,255,0.65));
  stroke-dasharray: 18 240;
  animation: dspi-flow 4s linear infinite;
}
.dspi-flow.dspi-flow-slow  { animation-duration: 6s; }
.dspi-flow.dspi-flow-fast  { animation-duration: 2.4s; }
.dspi-flow.dspi-flow-reverse { animation-direction: reverse; }
.dspi-flow.dspi-flow-d1 { animation-delay: -0.5s; }
.dspi-flow.dspi-flow-d2 { animation-delay: -1.1s; }
.dspi-flow.dspi-flow-d3 { animation-delay: -1.8s; }
.dspi-flow.dspi-flow-d4 { animation-delay: -2.6s; }

@keyframes dspi-flow {
  from { stroke-dashoffset: 258; }
  to   { stroke-dashoffset: 0; }
}

/* ─── nodes / components ─────────────────────────────────────── */
.dspi-node {
  fill: #08111a;
  stroke: var(--cyan, #00c8ff);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px rgba(0,200,255,0.35));
}
.dspi-node-label {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.78);
}
.dspi-node-sublabel {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(0,200,255,0.85);
}

/* pulse markers */
.dspi-pulse {
  fill: var(--cyan, #00c8ff);
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.85));
  animation: dspi-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes dspi-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.dspi-pulse.dspi-pulse-d1 { animation-delay: -0.4s; }
.dspi-pulse.dspi-pulse-d2 { animation-delay: -0.9s; }
.dspi-pulse.dspi-pulse-d3 { animation-delay: -1.4s; }
.dspi-pulse.dspi-pulse-d4 { animation-delay: -1.9s; }

/* central / hub node — bigger glow */
.dspi-hub {
  fill: rgba(0,200,255,0.10);
  stroke: var(--cyan, #00c8ff);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 14px rgba(0,200,255,0.55));
}
.dspi-hub-inner {
  fill: var(--cyan, #00c8ff);
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(0,200,255,0.85));
  animation: dspi-hub-breathe 3.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes dspi-hub-breathe {
  0%, 100% { opacity: 0.7;  transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* waveforms (audio / power / lighting dim curves) */
.dspi-wave {
  fill: none;
  stroke: var(--cyan, #00c8ff);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(0,200,255,0.5));
  stroke-dasharray: 800;
  animation: dspi-wave-draw 3.5s ease-out forwards, dspi-wave-shift 6s linear infinite 3.5s;
}
@keyframes dspi-wave-draw {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
@keyframes dspi-wave-shift {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }
}

/* sweep line — oscilloscope style */
.dspi-sweep {
  stroke: var(--cyan, #00c8ff);
  stroke-width: 1;
  opacity: 0.7;
  filter: drop-shadow(0 0 8px rgba(0,200,255,0.7));
  animation: dspi-sweep 3.2s linear infinite;
}
@keyframes dspi-sweep {
  0%   { transform: translateX(-2%);  opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateX(102%); opacity: 0; }
}

/* scanline shimmer (data/refresh feel) */
.dspi-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,200,255,0.06) 50%, transparent 100%);
  background-size: 100% 220%;
  animation: dspi-scan 7s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes dspi-scan {
  0%   { background-position: 0 -120%; }
  100% { background-position: 0 220%;  }
}

/* ─── system schematic — big homepage hero diagram ───────────── */
.dspi-system {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .dspi-system { aspect-ratio: 4 / 5; }
}

/* corner-mounted info badges (orbiting the schematic) */
.dspi-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.dspi-badge {
  position: absolute;
  padding: 9px 13px;
  background: rgba(8,17,26,0.78);
  border: 1px solid rgba(0,200,255,0.30);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.dspi-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cyan, #00c8ff);
  box-shadow: 0 0 8px rgba(0,200,255,0.85);
  transform: rotate(45deg);
}
.dspi-badge .dspi-badge-num {
  color: var(--cyan, #00c8ff);
  font-weight: 700;
  font-size: 0.74rem;
  margin-left: 4px;
}

.dspi-badge.b-tl { top: 6%;  left: 4%;  }
.dspi-badge.b-tr { top: 6%;  right: 4%; }
.dspi-badge.b-ml { top: 46%; left: -2%; }
.dspi-badge.b-mr { top: 46%; right: -2%; }
.dspi-badge.b-bl { bottom: 6%; left: 4%; }
.dspi-badge.b-br { bottom: 6%; right: 4%; }

@media (max-width: 720px) {
  .dspi-badge { font-size: 0.58rem; padding: 6px 9px; }
  .dspi-badge.b-ml, .dspi-badge.b-mr { display: none; }
}

/* ─── homepage "System in Motion" section ────────────────────── */
.system-section {
  background: var(--black, #0a0a0a);
  padding: var(--section-pad-y, 120px) 0;
  position: relative;
  overflow: hidden;
}
.system-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: 140%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 35% 30% at 50% 50%, rgba(0,200,255,0.04), transparent 70%);
  pointer-events: none;
}
.system-section .container { position: relative; z-index: 1; }
.system-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 720px) {
  .system-header { grid-template-columns: 1fr; }
}
.system-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.system-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.system-legend span::before {
  content: '';
  width: 18px; height: 1.5px;
  background: var(--cyan, #00c8ff);
  box-shadow: 0 0 6px rgba(0,200,255,0.6);
}

/* ─── homepage service-card image upgrade ────────────────────── */
.sp-card.has-image {
  padding: 0;
  background: var(--charcoal, #111);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.sp-card.has-image .sp-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--black, #0a0a0a);
}
.sp-card.has-image .sp-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.85) contrast(1.05);
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1),
              filter 0.6s ease;
}
.sp-card.has-image:hover .sp-card-media img {
  transform: scale(1.12);
  filter: brightness(0.78) saturate(1) contrast(1.05);
}
/* gradient + scan sweep over image */
.sp-card.has-image .sp-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,0.12) 45%,
    rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}
.sp-card.has-image .sp-card-media::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(0,200,255,0) 35%,
    rgba(0,200,255,0.45) 50%,
    rgba(0,200,255,0) 65%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.85s cubic-bezier(0.65,0,0.35,1);
  pointer-events: none;
  z-index: 1;
}
.sp-card.has-image:hover .sp-card-media::before { left: 160%; }
.sp-card.has-image .sp-card-corner {
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  border: 1px solid rgba(0,200,255,0.7);
  border-right: none; border-bottom: none;
  filter: drop-shadow(0 0 5px rgba(0,200,255,0.4));
  pointer-events: none;
  z-index: 2;
}
.sp-card.has-image .sp-card-corner.tr {
  left: auto; right: 12px;
  border-right: 1px solid rgba(0,200,255,0.7);
  border-left: none;
}
.sp-card.has-image .sp-card-body {
  padding: clamp(22px, 2.5vw, 30px);
  display: flex; flex-direction: column;
  gap: 12px;
}
.sp-card.has-image .sp-card-body .sp-card-icon {
  width: 36px; height: 36px;
}

/* ─── service-card back-face mini schematic (services.html) ──── */
.service-card-back .dspi-mini {
  position: relative;
  width: 100%;
  margin-top: 14px;
  aspect-ratio: 21/9;
  border-top: 1px solid rgba(0,200,255,0.18);
  padding-top: 14px;
}
.service-card-back .dspi-mini svg {
  width: 100%; height: 100%;
  display: block;
}

/* ─── partners "How It Works" step connector ─────────────────── */
.steps-grid.has-flow {
  position: relative;
}
.steps-grid.has-flow .step-card {
  position: relative;
  overflow: hidden;
}
.step-card .step-flow {
  position: absolute;
  inset: auto 0 0 0;
  height: 38px;
  pointer-events: none;
  opacity: 0.8;
}
.step-card .step-flow svg { width: 100%; height: 100%; display: block; }

/* connector arrows between cards (desktop only) */
.steps-grid.has-flow::before,
.steps-grid.has-flow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px; height: 28px;
  background: var(--black, #0a0a0a);
  border-top: 1.5px solid var(--cyan, #00c8ff);
  border-right: 1.5px solid var(--cyan, #00c8ff);
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.5));
  z-index: 2;
  opacity: 0;
  animation: dspi-arrow-pulse 2.4s ease-in-out infinite;
}
.steps-grid.has-flow::before { left: calc(33.333% - 14px); }
.steps-grid.has-flow::after  { left: calc(66.667% - 14px); animation-delay: -1.2s; }
@keyframes dspi-arrow-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(-50%) rotate(45deg) translateX(-4px); }
  50%      { opacity: 1;    transform: translateY(-50%) rotate(45deg) translateX(4px); }
}
@media (max-width: 768px) {
  .steps-grid.has-flow::before,
  .steps-grid.has-flow::after { display: none; }
}

/* ─── contact-page header schematic accent ───────────────────── */
.contact-accent {
  position: relative;
  max-width: 880px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  aspect-ratio: 3 / 1;
  z-index: 1;
}
.contact-accent svg { width: 100%; height: 100%; display: block; }

/* ─── about-page hero parallax + capability mesh ─────────────── */
.about-hero-image.has-parallax {
  position: relative;
  height: clamp(360px, 50vw, 560px);
  aspect-ratio: auto;
  overflow: hidden;
}
.about-hero-image.has-parallax img {
  position: absolute;
  top: -10%; left: 0;
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--ah-shift, 0px), 0) scale(1.02);
  filter: brightness(0.4) saturate(0.7) contrast(1.05);
}
.about-hero-image.has-parallax::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.25) 0%, transparent 35%, rgba(10,10,10,0.92) 100%),
    radial-gradient(60% 40% at 50% 60%, transparent 0%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}
.about-hero-image.has-parallax::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background-image:
    linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 48px);
  pointer-events: none;
}
.about-hero-stats {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.about-hero-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  background: rgba(8,17,26,0.62);
  border: 1px solid rgba(0,200,255,0.20);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.about-hero-stat .num {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: var(--cyan, #00c8ff);
  letter-spacing: 0.05em;
  line-height: 1;
}
.about-hero-stat .lbl {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
@media (max-width: 600px) {
  .about-hero-overlay { padding: 16px; }
  .about-hero-stat { padding: 8px 12px; }
}

/* capability mesh (about page) */
.cap-mesh {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 980px;
}
.cap-mesh svg { width: 100%; height: 100%; display: block; }

/* ─── partners capabilities-bg upgrade (replaces stock photo) ── */
.capabilities-bg.has-schematic {
  background: none !important;
  opacity: 1 !important;
}
.capabilities-bg.has-schematic::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%);
}
.capabilities-bg.has-schematic::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(0,200,255,0.06);
  pointer-events: none;
}

/* ─── reduced-motion respect ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dspi-flow,
  .dspi-pulse,
  .dspi-hub-inner,
  .dspi-wave,
  .dspi-sweep,
  .dspi-scanline,
  .steps-grid.has-flow::before,
  .steps-grid.has-flow::after {
    animation: none !important;
  }
  .sp-card.has-image .sp-card-media img { transform: none; }
  .about-hero-image.has-parallax img { transform: none; }
}

/* ===== Responsive QA polish (mobile/desktop) ===== */
/* Tap-to-flip for the services cards (own flip mechanism). */
.service-card.flipped .service-card-inner { transform: rotateY(180deg); }
@media (max-width: 768px) {
  /* Decorative schematics shrink to illegible ~3px text on phones — hide them
     (each is aria-hidden and duplicated by a readable list/grid). */
  .cap-mesh, .contact-accent, .service-card-back .dspi-mini { display: none !important; }
  /* The "Hover →" hint can't apply on touch — show "Tap →" instead. */
  .service-card-front-hint { font-size: 0 !important; }
  .service-card-front-hint::after { content: "Tap →"; font-size: 0.66rem; letter-spacing: 0.2em; }
  /* Comfortable tap targets. */
  .contact-services-list a { padding: 6px 0; }
  .footer-col a, .footer-bottom a { padding: 4px 0; }
  /* Reserve room so the animated step connector never overlaps text. */
  .steps-grid.has-flow .step-card { padding-bottom: 52px; }
}