/* ==========================================================================
   Ghandour Global Group — industries.html stylesheet
   Requires css/base.css to be loaded first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. Industries page - sector intelligence map
   -------------------------------------------------------------------------- */

.industries-flow {
  --industries-green: #1fcc1f;
  --industries-mobility: #2fd46b;
  --industries-mobility-2: #5ce1ff;
  --industries-infrastructure: #66e6ff;
  --industries-compliance: #8fd6ff;
  --industries-software: #1fcc1f;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 76% 16%, rgba(102, 230, 255, 0.14), transparent 26rem),
    radial-gradient(circle at 20% 78%, rgba(47, 212, 107, 0.12), transparent 28rem),
    linear-gradient(180deg, #010b1b 0%, #041331 38%, #020914 72%, #010b1b 100%);
}

.industries-flow .container,
.industries-flow section {
  position: relative;
  z-index: 1;
}

/* Energy rail: one thread through hero -> interface -> pipeline -> CTA,
   lit by scroll progress, blue -> green to echo the whole ecosystem. */
.industries-energy-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 1;
  pointer-events: none;
}

.industries-energy-rail-track {
  position: absolute;
  inset: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 64, 224, 0.3) 10%,
    rgba(102, 230, 255, 0.28) 45%,
    rgba(31, 204, 31, 0.3) 90%,
    transparent 100%
  );
}

.industries-energy-rail-pulse {
  position: absolute;
  left: 50%;
  top: calc(var(--industries-progress, 0) * 100%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(102, 230, 255, 0.95), transparent 70%);
  box-shadow: 0 0 24px 6px rgba(31, 204, 31, 0.4);
}

.industries-hero,
.industries-interface,
.industries-pipeline-section,
.industries-cta {
  min-height: calc(100svh - var(--header-h, 72px));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.industries-pipeline-section {
  min-height: 0;
  display: block;
  padding-block: clamp(4rem, 9vw, 6rem);
}

.industries-hero-grid,
.industries-interface-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1.06fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.industries-cta-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.industries-copy h1,
.industries-copy h2,
.industries-interface-copy h2 {
  color: var(--color-white);
  text-wrap: balance;
}

.industries-copy h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 0.96;
}

.industries-copy h2,
.industries-interface-copy h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1;
}

.industries-copy p,
.industries-interface-copy p,
.industries-panel p {
  color: rgba(232, 237, 247, 0.82);
}

.industries-copy .lead {
  max-width: 58ch;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
}

.industries-breadcrumb a,
.industries-breadcrumb li {
  color: rgba(232, 237, 247, 0.7);
}

.industries-breadcrumb a:hover {
  color: var(--industries-infrastructure);
}

/* --- Hero stage: hexagonal prism hub -------------------------------------- */

.industries-hub-stage {
  position: relative;
  width: min(86vw, 560px);
  min-height: 540px;
  margin-inline: auto;
  perspective: 1200px;
  transform-style: preserve-3d;
  --pos-scale: 1;
  cursor: pointer;
  transform: rotateX(var(--industries-tilt-x, 0deg)) rotateY(var(--industries-tilt-y, 0deg));
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.industries-grid-floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 6%;
  height: 44%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(102, 230, 255, 0.32) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 50px),
    radial-gradient(ellipse, rgba(102, 230, 255, 0.14), transparent 72%);
  border: 1px solid rgba(102, 230, 255, 0.2);
  transform: rotateX(68deg) translateZ(-70px);
  transform-origin: center bottom;
  box-shadow: 0 0 34px rgba(102, 230, 255, 0.1);
}

.industries-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px dashed rgba(47, 212, 107, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg) translateZ(8px);
  /* Slowed from 50s - purely decorative ambient ring, calmer. */
  animation: industries-spin 60s linear infinite;
}

@keyframes industries-spin {
  to { transform: translate(-50%, -50%) rotateX(66deg) translateZ(8px) rotateZ(360deg); }
}

.industries-hub {
  /* Upright hexagon emblem facing the viewer with a short extruded depth -
     a flat-on hexagon reads instantly as "the hub" from any angle, where the
     earlier true prism kept collapsing into a flat slab / floor tile.
     The face is built as a faceted core: dark plate, six lit facets, a
     wireframe grid, vertex nodes, a slow-turning inner ring, a pulsing core
     and a scan sweep - each a clipped layer inside the front cap.
     --hub-r is the hexagon half-width; the 2.309 (4/sqrt(3)) height ratio is
     what keeps the pointy-top hexagon regular instead of squashed.
     --hub-d is the extrude depth, --hub-accent the live filter colour. */
  --hub-r: 76px;
  --hub-d: 24px;
  --hub-accent: 102, 230, 255;
  --hub-accent-2: 47, 212, 107;
  --hub-shape: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--hub-r) * 2);
  height: calc(var(--hub-r) * 2.309);
  transform-style: preserve-3d;
  opacity: calc(0.72 + var(--industries-hub-enter, 1) * 0.28);
  transform:
    translate(-50%, -50%)
    translateZ(20px)
    scale(calc(0.82 + var(--industries-hub-enter, 1) * 0.18))
    rotateX(9deg)
    rotateY(calc(-17deg + var(--industries-hub-rot, 0deg)));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  filter: drop-shadow(14px 22px 26px rgba(0, 8, 20, 0.5));
}

/* The hub takes on the colour of whichever industry is selected, so the
   emblem itself reads as the filter's readout rather than static chrome. */
[data-industries-filter="mobility"] .industries-hub { --hub-accent: 47, 212, 107; --hub-accent-2: 102, 230, 255; }
[data-industries-filter="infrastructure"] .industries-hub { --hub-accent: 102, 230, 255; --hub-accent-2: 143, 214, 255; }
[data-industries-filter="compliance"] .industries-hub { --hub-accent: 143, 214, 255; --hub-accent-2: 102, 230, 255; }
[data-industries-filter="software"] .industries-hub { --hub-accent: 31, 204, 31; --hub-accent-2: 102, 230, 255; }
[data-industries-filter="growth"] .industries-hub { --hub-accent: 102, 230, 255; --hub-accent-2: 31, 204, 31; }

[data-industries-filter="growth"] .industries-hub {
  filter: drop-shadow(0 24px 36px rgba(0, 8, 20, 0.4)) drop-shadow(0 0 22px rgba(var(--hub-accent), 0.55));
}

/* Soft bloom sitting behind the emblem - gives the glass a light source. */
.industries-hub-aura {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hub-accent), 0.26), rgba(var(--hub-accent), 0.07) 46%, transparent 70%);
  transform: translateZ(calc(var(--hub-d) / -2 - 8px));
  animation: industries-hub-breathe 6.5s ease-in-out infinite;
}

/* Narrower swing than a typical breathe pulse (was 0.55->1): this powers
   both the aura and the corner nodes, two supporting elements around the
   hub - the core pulse below is the hexagon's one focal point, so these
   stay present without competing with it for attention. */
@keyframes industries-hub-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.85; }
}

.industries-hub-cap {
  position: absolute;
  inset: 0;
  clip-path: var(--hub-shape);
}

/* Front hexagon: a lit bevel rim (the conic base gradient) around a dark
   inner plate (::before), with the facet stack layered over it and a glass
   gloss (::after) closing the sandwich on top. */
.industries-hub-cap--top {
  /* Conic bevel: angles are measured from the top vertex clockwise, so the
     white specular sits on the upper-left edges (310-340deg) where the rest
     of the face is lit from, and the rim falls away to its dimmest along the
     shadowed bottom-right. */
  background: conic-gradient(
    from 0deg,
    rgba(var(--hub-accent), 0.8) 0deg,
    rgba(var(--hub-accent), 0.9) 35deg,
    rgba(var(--hub-accent), 0.45) 90deg,
    rgba(var(--hub-accent-2), 0.35) 150deg,
    rgba(var(--hub-accent), 0.2) 195deg,
    rgba(var(--hub-accent), 0.45) 250deg,
    rgba(255, 255, 255, 0.95) 312deg,
    rgba(255, 255, 255, 0.7) 338deg,
    rgba(var(--hub-accent), 0.8) 360deg
  );
  transform: translateZ(calc(var(--hub-d) / 2));
}

.industries-hub-cap--top::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--hub-shape);
  background:
    radial-gradient(ellipse at 32% 24%, rgba(var(--hub-accent), 0.16), transparent 56%),
    linear-gradient(160deg, rgba(10, 32, 62, 0.99), rgba(2, 7, 20, 1));
}

.industries-hub-cap--top::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--hub-shape);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 20%, transparent 38%);
  pointer-events: none;
}

/* Six triangular facets from the centre to each pair of vertices, lit as if
   the source sits up and to the left - what turns a flat plate into a gem. */
.industries-hub-facet {
  position: absolute;
  inset: 2px;
}

.industries-hub-facet--1 {
  clip-path: polygon(50% 50%, 50% 0%, 100% 25%);
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.1), rgba(var(--hub-accent), 0.05));
}

.industries-hub-facet--2 {
  clip-path: polygon(50% 50%, 100% 25%, 100% 75%);
  background: linear-gradient(250deg, rgba(var(--hub-accent), 0.18), transparent 78%);
}

.industries-hub-facet--3 {
  clip-path: polygon(50% 50%, 100% 75%, 50% 100%);
  background: linear-gradient(300deg, rgba(var(--hub-accent-2), 0.13), transparent 74%);
}

.industries-hub-facet--4 {
  clip-path: polygon(50% 50%, 50% 100%, 0% 75%);
  background: linear-gradient(20deg, rgba(255, 255, 255, 0.03), transparent 62%);
}

.industries-hub-facet--5 {
  clip-path: polygon(50% 50%, 0% 75%, 0% 25%);
  background: linear-gradient(70deg, rgba(var(--hub-accent), 0.12), transparent 72%);
}

.industries-hub-facet--6 {
  clip-path: polygon(50% 50%, 0% 25%, 50% 0%);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(var(--hub-accent), 0.06));
}

/* Facet seams (the conic hairlines running centre -> vertex) plus a faint
   circuit grid, so the face has structure to catch the light. */
.industries-hub-grid {
  position: absolute;
  inset: 2px;
  clip-path: var(--hub-shape);
  background:
    repeating-conic-gradient(from 0deg, rgba(var(--hub-accent), 0.7) 0deg 0.55deg, transparent 0.55deg 60deg),
    repeating-linear-gradient(0deg, rgba(var(--hub-accent), 0.12) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(var(--hub-accent), 0.09) 0 1px, transparent 1px 13px);
}

/* A node at each of the six corners - the emblem's "ports". */
.industries-hub-nodes {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 2.5px at 50% 5%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%),
    radial-gradient(circle 2.5px at 94% 27.5%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%),
    radial-gradient(circle 2.5px at 94% 72.5%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%),
    radial-gradient(circle 2.5px at 50% 95%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%),
    radial-gradient(circle 2.5px at 6% 72.5%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%),
    radial-gradient(circle 2.5px at 6% 27.5%, rgba(255, 255, 255, 0.95), rgba(var(--hub-accent), 0.55) 55%, transparent 75%);
  animation: industries-hub-breathe 3.4s ease-in-out infinite;
}

/* Inner hexagon ring, turning slowly against the fixed outer shell. */
.industries-hub-ring {
  position: absolute;
  inset: 27%;
  clip-path: var(--hub-shape);
  background: linear-gradient(160deg, rgba(var(--hub-accent), 0.95), rgba(var(--hub-accent-2), 0.5));
  animation: industries-hub-ring 16s linear infinite;
}

.industries-hub-ring::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hub-shape);
  background: rgba(4, 12, 28, 0.92);
}

@keyframes industries-hub-ring {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

/* The core: a pulsing orb with a ripple that runs out to the ring. */
.industries-hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, rgba(var(--hub-accent), 0.85) 38%, rgba(var(--hub-accent), 0) 72%);
  box-shadow: 0 0 26px rgba(var(--hub-accent), 0.85);
  animation: industries-hub-core 2.8s ease-in-out infinite;
}

.industries-hub-core::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hub-accent), 0.55);
  animation: industries-hub-ripple 2.8s ease-out infinite;
}

@keyframes industries-hub-core {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes industries-hub-ripple {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Scan sweep travelling down the face, clipped by the cap's hexagon. */
.industries-hub-scan {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 20%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--hub-accent), 0.14) 44%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(var(--hub-accent), 0.14) 56%,
    transparent
  );
  /* Slower and dimmer than its first pass (6s / peak 0.85): a supporting
     accent, not something that should compete with the core for the eye. */
  animation: industries-hub-scan 8s ease-in-out infinite;
}

@keyframes industries-hub-scan {
  0% { transform: translateY(-30%); opacity: 0; }
  12% { opacity: 0.5; }
  82% { opacity: 0.5; }
  100% { transform: translateY(500%); opacity: 0; }
}

/* Back hexagon: offset behind the front and a touch larger, so a dark shell
   rim shows around the face and a thickness edge appears along one side when
   the emblem is turned - the depth cue. */
.industries-hub-cap--bottom {
  background: linear-gradient(160deg, rgba(9, 24, 50, 0.99), rgba(2, 7, 18, 1));
  border: 1px solid rgba(var(--hub-accent), 0.3);
  transform: translateZ(calc(var(--hub-d) / -2)) scale(1.03);
}

/* --- Orbiting modules + connection lines ---------------------------------- */

.industries-module {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 58px;
  border-radius: 10px;
  transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(4, 13, 31, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 10px 12px 0 rgba(1, 6, 16, 0.4);
  opacity: calc(0.7 + var(--industries-modules-out, 1) * 0.3);
  /* Modules sit at 55% of their resting spread even at beat 0, so the 4
     module cards never fully collapse onto the hub (which read as a
     rendering bug - overlapping stacked boxes - rather than an
     intentional entrance state) - scrolling still carries them the
     rest of the way out to their full orbit positions. */
  transform:
    translate3d(
      calc(var(--px) * (0.55 + var(--industries-modules-out, 1) * 0.45) * var(--pos-scale)),
      calc(var(--py) * (0.55 + var(--industries-modules-out, 1) * 0.45) * var(--pos-scale)),
      calc(var(--pz) * var(--pos-scale))
    )
    scale(calc(0.78 + var(--industries-modules-out, 1) * 0.22));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease, box-shadow 0.4s ease;
}

.industries-module::before,
.industries-module::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.industries-module::before {
  top: 6px;
  right: -12px;
  width: 12px;
  height: calc(100% - 8px);
  border-radius: 0 9px 9px 0;
  background: rgba(2, 8, 18, 0.72);
  transform-origin: left center;
  transform: rotateY(84deg);
}

.industries-module::after {
  left: 10px;
  bottom: -11px;
  width: calc(100% - 8px);
  height: 11px;
  border-radius: 0 0 9px 9px;
  background: rgba(2, 8, 18, 0.78);
  transform-origin: top center;
  transform: rotateX(-84deg);
}

.industries-module.is-forward {
  animation: industries-module-forward 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes industries-module-forward {
  0% { filter: brightness(1); }
  55% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

.industries-module--mobility { --px: 130px; --py: -130px; --pz: 40px; border-color: rgba(47, 212, 107, 0.35); }
.industries-module--infrastructure { --px: 130px; --py: 130px; --pz: 40px; border-color: rgba(102, 230, 255, 0.35); }
.industries-module--compliance { --px: -130px; --py: 130px; --pz: 40px; border-color: rgba(143, 214, 255, 0.35); }
.industries-module--software { --px: -130px; --py: -130px; --pz: 40px; border-color: rgba(31, 204, 31, 0.35); }

.industries-module-icon {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.industries-module--mobility .industries-module-icon { background: var(--industries-mobility); box-shadow: 0 0 10px rgba(47, 212, 107, 0.6); }
.industries-module--infrastructure .industries-module-icon { background: var(--industries-infrastructure); box-shadow: 0 0 10px rgba(102, 230, 255, 0.6); }
.industries-module--compliance .industries-module-icon { background: var(--industries-compliance); box-shadow: 0 0 10px rgba(143, 214, 255, 0.6); }
.industries-module--software .industries-module-icon { background: var(--industries-software); box-shadow: 0 0 10px rgba(31, 204, 31, 0.6); }

.industries-module-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.66rem;
  color: rgba(232, 237, 247, 0.85);
}

[data-industries-filter="mobility"] .industries-module--mobility,
[data-industries-filter="infrastructure"] .industries-module--infrastructure,
[data-industries-filter="compliance"] .industries-module--compliance,
[data-industries-filter="software"] .industries-module--software,
[data-industries-filter="growth"] .industries-module {
  /* Active module emphasis follows the SAME spread curve as the others
     (so it never flings out to full position while the rest are still
     collapsed - the old fixed 1.14x made the layout look lopsided), just
     nudged a little further out and forward. */
  transform:
    translate3d(
      calc(var(--px) * (0.55 + var(--industries-modules-out, 1) * 0.45) * 1.08 * var(--pos-scale)),
      calc(var(--py) * (0.55 + var(--industries-modules-out, 1) * 0.45) * 1.08 * var(--pos-scale)),
      calc((var(--pz) + 30px) * var(--pos-scale))
    )
    scale(calc(0.82 + var(--industries-modules-out, 1) * 0.26));
  box-shadow: 10px 12px 0 rgba(1, 6, 16, 0.4), 0 0 20px rgba(102, 230, 255, 0.3);
}

.industries-module.is-forward[data-industries-module] {
  animation-name: industries-module-forward;
}

.industries-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 183px;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(102, 230, 255, 0.75), transparent);
  transform: translateY(-50%) rotate(var(--line-angle)) scaleX(var(--industries-lines-draw, 1));
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease, background 0.4s ease;
}

.industries-line.is-lit {
  animation: industries-line-redraw 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes industries-line-redraw {
  0% { transform: translateY(-50%) rotate(var(--line-angle)) scaleX(0); }
  100% { transform: translateY(-50%) rotate(var(--line-angle)) scaleX(1); }
}

.industries-line--mobility { --line-angle: -45deg; }
.industries-line--infrastructure { --line-angle: 45deg; }
.industries-line--compliance { --line-angle: 135deg; }
.industries-line--software { --line-angle: -135deg; }

[data-industries-filter="mobility"] .industries-line--mobility,
[data-industries-filter="infrastructure"] .industries-line--infrastructure,
[data-industries-filter="compliance"] .industries-line--compliance,
[data-industries-filter="software"] .industries-line--software,
[data-industries-filter="growth"] .industries-line {
  background: linear-gradient(90deg, rgba(102, 230, 255, 0.95), rgba(31, 204, 31, 0.5));
  box-shadow: 0 0 10px rgba(102, 230, 255, 0.6);
}

.industries-line.is-lit::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation: industries-line-flow 1.6s ease-in-out infinite;
}

@keyframes industries-line-flow {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --- Interface / console section ------------------------------------------ */

.industries-console {
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    rgba(4, 11, 27, 0.72);
  backdrop-filter: blur(var(--blur-md));
  border: 1px solid rgba(102, 230, 255, 0.22);
  box-shadow:
    var(--shadow-console),
    inset 0 0 30px rgba(0, 64, 224, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.industries-console-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.industries-tab {
  position: relative;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 237, 247, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 237, 247, 0.78);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.industries-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--industries-green);
  box-shadow: 0 0 10px rgba(31, 204, 31, 0.7);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.industries-tab:hover,
.industries-tab:focus,
.industries-tab:focus-visible,
.industries-tab.is-active {
  color: var(--color-white);
  border-color: rgba(102, 230, 255, 0.55);
  background: rgba(102, 230, 255, 0.14);
  transform: translateY(-2px);
}

.industries-tab.is-active::after {
  width: 60%;
}

.industries-console-screen {
  position: relative;
  min-height: 300px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, rgba(102, 230, 255, 0.12), transparent 34%),
    linear-gradient(160deg, rgba(9, 24, 53, 0.82), rgba(2, 6, 16, 0.82));
  backdrop-filter: blur(8px);
  background-size: 42px 42px, 42px 42px, auto, auto;
  border: 1px solid rgba(232, 237, 247, 0.1);
}

.industries-panel {
  position: absolute;
  inset: 0;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.industries-panel.is-active {
  opacity: 1;
  transform: none;
}

.industries-panel h3 {
  max-width: 22ch;
  color: var(--color-white);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}

.industries-panel p:not(.eyebrow) {
  max-width: 30ch;
}

.industries-panel-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(232, 237, 247, 0.9);
}

.industries-panel-sub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.industries-panel--mobility .industries-panel-sub-dot { background: var(--industries-mobility); }
.industries-panel--infrastructure .industries-panel-sub-dot { background: var(--industries-infrastructure); }
.industries-panel--compliance .industries-panel-sub-dot { background: var(--industries-compliance); }
.industries-panel--software .industries-panel-sub-dot { background: var(--industries-software); }
.industries-panel--growth .industries-panel-sub-dot { background: linear-gradient(90deg, var(--industries-mobility), var(--industries-infrastructure)); }

.industries-mini {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 150px;
  height: 120px;
  perspective: 600px;
  transform-style: preserve-3d;
}

.industries-mini-box {
  position: absolute;
  border-radius: 10px;
  transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(102, 230, 255, 0.2), rgba(4, 12, 28, 0.94));
  border: 1px solid rgba(102, 230, 255, 0.24);
  box-shadow: 10px 12px 0 rgba(1, 6, 16, 0.4);
  transform: rotateX(52deg) rotateZ(-10deg);
}

/* Mobility: a street map with a live route running to a charging stop, and
   the stop's pin standing up off the map - the panel's subject ("where
   drivers find and use power") rather than a bare diagonal line. The pin is a
   sibling of the map, not a child: the map clips its own overflow, which
   would both cut the pin off and flatten it out of the 3D scene. */
.industries-mini--route {
  /* Sat as far right in the 150px mini box as the map and its pin fit, to
     keep the map's left edge clear of the panel's paragraph text. */
  left: 26px;
  top: 34px;
  width: 122px;
  height: 68px;
  overflow: hidden;
  border-color: rgba(47, 212, 107, 0.3);
  background:
    radial-gradient(ellipse at 76% 26%, rgba(47, 212, 107, 0.22), transparent 58%),
    linear-gradient(160deg, rgba(47, 212, 107, 0.14), rgba(4, 12, 28, 0.95));
}

/* Two arterial roads over a block grid. */
.industries-mini--route::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(47, 212, 107, 0.24), rgba(47, 212, 107, 0.24)) 32% 0 / 2px 100% no-repeat,
    linear-gradient(rgba(47, 212, 107, 0.16), rgba(47, 212, 107, 0.16)) 0 66% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 15px);
}

/* The route itself: flowing dashes with a vehicle running the line. */
.industries-mini-route {
  position: absolute;
  left: 12%;
  top: 72%;
  width: 70%;
  height: 3px;
  border-radius: var(--radius-pill);
  transform-origin: left center;
  transform: rotate(-22deg);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(180, 255, 214, 0.95) 0 7px,
    rgba(47, 212, 107, 0) 7px 13px
  );
  background-size: 13px 100%;
  box-shadow: 0 0 8px rgba(47, 212, 107, 0.55);
  animation: industries-route-dash 1.1s linear infinite;
}

@keyframes industries-route-dash {
  to { background-position: 13px 0; }
}

/* Origin marker at the start of the route. */
.industries-mini-route::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--industries-mobility);
  background: rgba(4, 12, 28, 0.9);
  transform: translate(-50%, -50%);
}

/* The vehicle travelling the route toward the stop. */
.industries-mini-route::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 2px rgba(47, 212, 107, 0.9);
  transform: translate(-50%, -50%);
  animation: industries-route-drive 2.8s ease-in-out infinite;
}

@keyframes industries-route-drive {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* The charging stop on the map, pulsing where the route lands. */
.industries-mini-stop {
  position: absolute;
  left: 77%;
  top: 25%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(47, 212, 107, 0.5) 55%, transparent 72%);
}

.industries-mini-stop::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(47, 212, 107, 0.7);
  animation: industries-stop-ping 2.8s ease-out infinite;
}

@keyframes industries-stop-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Map pin standing above the stop, carrying the charge bolt. */
.industries-mini-pin {
  position: absolute;
  left: 106px;
  top: 22px;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(150deg, var(--industries-mobility-2), var(--industries-mobility));
  transform: rotate(-45deg);
  box-shadow: 0 8px 14px rgba(1, 6, 16, 0.55), 0 0 14px rgba(47, 212, 107, 0.45);
  animation: industries-pin-bob 2.8s ease-in-out infinite;
}

/* Bolt inside the pin, counter-rotated so it sits upright. */
.industries-mini-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 13px;
  background: rgba(4, 16, 12, 0.92);
  clip-path: polygon(58% 0%, 12% 56%, 44% 56%, 36% 100%, 88% 40%, 52% 40%);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* The translate runs inside the pin's own -45deg frame, so (2px, -2px) there
   is what reads as a straight lift on screen. */
@keyframes industries-pin-bob {
  0%, 100% { transform: rotate(-45deg) translate(0, 0); }
  50% { transform: rotate(-45deg) translate(2px, -2px); }
}

/* Infrastructure: a site pad with charger units standing on it - two
   commissioned, one still a dashed outline waiting to be built. That reads as
   the panel's subject ("where charging gets built... from single sites to
   citywide rollouts") where the old single lit bar did not. Same pattern as
   the mobility map: the pad clips its overflow, so the upright units are
   siblings of it rather than children. */
.industries-mini--site {
  left: 12px;
  top: 48px;
  width: 126px;
  height: 56px;
  overflow: hidden;
  border-color: rgba(102, 230, 255, 0.28);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(102, 230, 255, 0.2), transparent 60%),
    linear-gradient(160deg, rgba(102, 230, 255, 0.14), rgba(4, 12, 28, 0.95));
}

/* Bay markings on the pad. */
.industries-mini--site::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(102, 230, 255, 0.2), rgba(102, 230, 255, 0.2)) 0 74% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 21px);
}

/* A charger unit: dark pillar, lit screen, cable coiling off the side. */
.industries-mini-unit {
  position: absolute;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(150deg, rgba(30, 62, 104, 0.98), rgba(4, 12, 28, 0.98));
  border: 1px solid rgba(102, 230, 255, 0.4);
  box-shadow: 0 8px 12px rgba(1, 6, 16, 0.5);
}

/* The screen, charging up - the commissioning beat. */
.industries-mini-unit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--industries-infrastructure), rgba(102, 230, 255, 0.35));
  box-shadow: 0 0 8px rgba(102, 230, 255, 0.8);
  animation: industries-unit-charge 2.4s ease-in-out infinite;
}

@keyframes industries-unit-charge {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Cable running from the unit down to the pad. */
.industries-mini-unit::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 5px;
  width: 9px;
  height: 14px;
  border-right: 1.5px solid rgba(102, 230, 255, 0.6);
  border-bottom: 1.5px solid rgba(102, 230, 255, 0.6);
  border-radius: 0 0 8px 0;
}

/* Each unit's base lands ~80px down, which is on the pad's surface rather
   than on its back edge - what makes them read as planted on the site. */
.industries-mini-unit--lead {
  left: 40px;
  top: 36px;
  width: 22px;
  height: 44px;
}

.industries-mini-unit--second {
  left: 74px;
  top: 44px;
  width: 18px;
  height: 36px;
}

/* The next site: staked out, not yet built. */
.industries-mini-unit--planned {
  left: 104px;
  top: 51px;
  width: 16px;
  height: 28px;
  background: rgba(102, 230, 255, 0.05);
  border: 1px dashed rgba(102, 230, 255, 0.5);
  box-shadow: none;
  animation: industries-unit-planned 2.8s ease-in-out infinite;
}

.industries-mini-unit--planned::before,
.industries-mini-unit--planned::after {
  content: none;
}

@keyframes industries-unit-planned {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

/* Compliance: a permit dossier whose requirements tick off one by one, then
   the approval seal stamps down on it - the panel's subject ("where projects
   get cleared", regulatory approval and readiness) rather than a generic
   shield. The whole sequence runs on one 4.2s cycle: checks land on a stagger,
   the seal drops once they are all in. */
.industries-mini--permit {
  left: 26px;
  top: 32px;
  width: 116px;
  height: 72px;
  overflow: hidden;
  border-color: rgba(143, 214, 255, 0.3);
  background:
    radial-gradient(ellipse at 26% 30%, rgba(143, 214, 255, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(143, 214, 255, 0.14), rgba(4, 12, 28, 0.95));
}

/* The dossier's header rule and body text. */
.industries-mini--permit::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(143, 214, 255, 0.5), rgba(143, 214, 255, 0.5)) 10% 14% / 34% 2px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)) 62% 14% / 26% 1px no-repeat;
}

/* One requirement line: its box (::before) and the tick that clears it
   (::after), with the line itself as the row of text. */
.industries-mini-check {
  position: absolute;
  left: 26%;
  width: 46%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
}

.industries-mini-check::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid rgba(143, 214, 255, 0.55);
  background: rgba(4, 12, 28, 0.8);
  transform: translateY(-50%);
}

.industries-mini-check::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--industries-compliance);
  border-bottom: 1.5px solid var(--industries-compliance);
  transform: translateY(-70%) rotate(-45deg);
  transform-origin: center;
  animation: industries-check-in 4.2s ease-in-out infinite;
}

.industries-mini-check--1 { top: 36%; }
.industries-mini-check--2 { top: 56%; }
.industries-mini-check--3 { top: 76%; width: 34%; }

.industries-mini-check--2::after { animation-delay: 0.4s; }
.industries-mini-check--3::after { animation-delay: 0.8s; }

@keyframes industries-check-in {
  0%, 10% { opacity: 0; transform: translateY(-70%) rotate(-45deg) scale(0.5); }
  22%, 88% { opacity: 1; transform: translateY(-70%) rotate(-45deg) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(-70%) rotate(-45deg) scale(1); }
}

/* The approval seal, landing once the checklist is clear. */
.industries-mini-seal {
  position: absolute;
  left: 102px;
  top: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--industries-compliance);
  background: rgba(6, 20, 40, 0.9);
  box-shadow: 0 8px 16px rgba(1, 6, 16, 0.55), 0 0 16px rgba(143, 214, 255, 0.4);
  animation: industries-seal-stamp 4.2s ease-out 1.2s infinite;
}

/* Inner ring of the seal. */
.industries-mini-seal::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(143, 214, 255, 0.6);
}

/* The seal's cleared tick. */
.industries-mini-seal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 16px;
  height: 8px;
  border-left: 2.5px solid var(--industries-compliance);
  border-bottom: 2.5px solid var(--industries-compliance);
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes industries-seal-stamp {
  0%, 8% { opacity: 0; transform: rotate(-18deg) scale(1.6); }
  18% { opacity: 1; transform: rotate(-12deg) scale(0.94); }
  24% { transform: rotate(-12deg) scale(1); }
  86% { opacity: 1; transform: rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}

/* Software: an operations board whose metrics climb, driven by the AI chip
   standing over it - the panel's subject ("where operations get smarter",
   AI-powered platforms) rather than a featureless cube. The bars grow on a
   stagger and hold, so the loop reads as a run improving, not a bouncing
   equaliser. */
.industries-mini--board {
  left: 24px;
  top: 42px;
  width: 112px;
  height: 62px;
  overflow: hidden;
  border-color: rgba(31, 204, 31, 0.3);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(31, 204, 31, 0.2), transparent 60%),
    linear-gradient(160deg, rgba(31, 204, 31, 0.13), rgba(4, 12, 28, 0.95));
}

/* Gridlines and the baseline the metrics sit on. */
.industries-mini--board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(31, 204, 31, 0.35), rgba(31, 204, 31, 0.35)) 0 86% / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 12px);
}

/* The board is tilted 52deg, which foreshortens everything drawn on it to
   ~60% of its height - hence the tall percentages below, which land as
   readable columns on screen rather than nubs. */
.industries-mini-bar {
  position: absolute;
  bottom: 12%;
  width: 11px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--industries-software), rgba(31, 204, 31, 0.25));
  box-shadow: 0 0 8px rgba(31, 204, 31, 0.5);
  transform-origin: bottom center;
  animation: industries-bar-grow 3.6s ease-out infinite;
}

.industries-mini-bar--1 { left: 14%; height: 40%; }
.industries-mini-bar--2 { left: 33%; height: 56%; animation-delay: 0.2s; }
.industries-mini-bar--3 { left: 52%; height: 72%; animation-delay: 0.4s; }
.industries-mini-bar--4 { left: 71%; height: 88%; animation-delay: 0.6s; }

@keyframes industries-bar-grow {
  0% { transform: scaleY(0.15); opacity: 0.4; }
  22%, 88% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.15); opacity: 0.4; }
}

/* The AI chip reading the board. */
.industries-mini-chip {
  position: absolute;
  left: 94px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(30, 78, 44, 0.98), rgba(4, 14, 26, 0.98));
  border: 1px solid rgba(31, 204, 31, 0.5);
  box-shadow: 0 8px 14px rgba(1, 6, 16, 0.5), 0 0 16px rgba(31, 204, 31, 0.35);
}

/* Chip core, thinking. */
.industries-mini-chip::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 4px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(31, 204, 31, 0.7) 45%, rgba(31, 204, 31, 0.1) 75%),
    linear-gradient(90deg, transparent 45%, rgba(4, 14, 26, 0.5) 45% 55%, transparent 55%);
  box-shadow: 0 0 12px rgba(31, 204, 31, 0.8);
  animation: industries-chip-think 1.8s ease-in-out infinite;
}

@keyframes industries-chip-think {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Pins down each side, sitting behind the chip body. */
.industries-mini-chip::after {
  content: "";
  position: absolute;
  inset: 4px -8px;
  z-index: -1;
  background:
    repeating-linear-gradient(180deg, rgba(31, 204, 31, 0.75) 0 3px, transparent 3px 8px) left center / 8px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(31, 204, 31, 0.75) 0 3px, transparent 3px 8px) right center / 8px 100% no-repeat;
}

/* Enterprise growth: the four subsidiary lanes running in and merging into a
   single trunk, with the group emblem standing over the junction - literally
   the panel's sentence ("ties mobility, infrastructure, compliance, and
   software into one roadmap"), where the old four loose dots showed the parts
   but never the tie. */
.industries-mini--roadmap {
  left: 20px;
  top: 40px;
  width: 118px;
  height: 64px;
  overflow: hidden;
  border-color: rgba(102, 230, 255, 0.26);
  background:
    radial-gradient(ellipse at 70% 50%, rgba(102, 230, 255, 0.2), transparent 58%),
    linear-gradient(160deg, rgba(102, 230, 255, 0.12), rgba(4, 12, 28, 0.95));
}

.industries-mini--roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px);
}

/* Each lane pivots about its right end, so all four fan out on the left and
   meet at one junction. Their dashes flow toward it. */
.industries-mini-lane {
  position: absolute;
  right: 32%;
  top: 50%;
  width: 58%;
  height: 2px;
  border-radius: var(--radius-pill);
  transform-origin: right center;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
  background-size: 12px 100%;
  animation: industries-lane-flow 1.3s linear infinite;
}

@keyframes industries-lane-flow {
  to { background-position: 12px 0; }
}

.industries-mini-lane--mobility {
  color: var(--industries-mobility);
  transform: rotate(-20deg);
}

.industries-mini-lane--infrastructure {
  color: var(--industries-infrastructure);
  transform: rotate(-7deg);
  animation-delay: 0.15s;
}

.industries-mini-lane--compliance {
  color: var(--industries-compliance);
  transform: rotate(7deg);
  animation-delay: 0.3s;
}

.industries-mini-lane--software {
  color: var(--industries-software);
  transform: rotate(20deg);
  animation-delay: 0.45s;
}

/* The single roadmap the four lanes become. */
.industries-mini-trunk {
  position: absolute;
  left: 68%;
  top: 50%;
  width: 26%;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #ffffff, var(--industries-infrastructure));
  box-shadow: 0 0 12px rgba(102, 230, 255, 0.75);
}

/* The junction where they merge. */
.industries-mini-trunk::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px 2px rgba(102, 230, 255, 0.9);
  transform: translate(-50%, -50%);
}

/* Where the roadmap leads. */
.industries-mini-trunk::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--industries-infrastructure);
  border-right: 2px solid var(--industries-infrastructure);
  transform: translate(0, -50%) rotate(45deg);
}

/* Group emblem standing over the junction - the same hexagon as the hero hub,
   its rim carrying all four subsidiary colours. */
.industries-mini-emblem {
  position: absolute;
  left: 88px;
  top: 28px;
  width: 28px;
  height: 32px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: conic-gradient(
    from 0deg,
    var(--industries-infrastructure),
    var(--industries-software) 25%,
    var(--industries-mobility) 50%,
    var(--industries-compliance) 75%,
    var(--industries-infrastructure)
  );
  filter: drop-shadow(0 8px 12px rgba(1, 6, 16, 0.6));
  animation: industries-emblem-bob 3.2s ease-in-out infinite;
}

.industries-mini-emblem::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(12, 36, 68, 0.98), rgba(3, 10, 26, 1));
}

.industries-mini-emblem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffffff, rgba(102, 230, 255, 0.6) 45%, transparent 72%);
}

@keyframes industries-emblem-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* --- Pipeline section: sector tiles unfolding ------------------------------ */

.industries-pipeline-copy {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Without these, the heading and lead paragraph both fell back to the
   site's default dark body text color against this section's dark
   background, rendering as invisible dark-on-dark. */
.industries-pipeline-copy h2 {
  margin-inline: auto;
  color: var(--color-white);
}

.industries-pipeline-copy p:not(.eyebrow) {
  color: rgba(232, 237, 247, 0.82);
}

.industries-pipeline-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 2vw, 1.2rem);
  max-width: 1040px;
  margin-inline: auto;
  perspective: 1400px;
}

.industries-pipeline-tile {
  position: relative;
  padding: 1.1rem 1.15rem 1.3rem;
  border-radius: 16px;
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 32%),
    linear-gradient(160deg, rgba(102, 230, 255, 0.14), rgba(5, 13, 30, 0.94));
  border: 1px solid rgba(102, 230, 255, 0.22);
  box-shadow: 0 20px 30px rgba(1, 6, 16, 0.42), 0 0 20px rgba(102, 230, 255, 0.08);
  opacity: 0;
  transform:
    rotateX(18deg) rotateZ(-4deg)
    translate3d(var(--unfold-x, 0px), var(--unfold-y, 0px), 0)
    scale(0.85);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 0.08s);
}

.industries-pipeline-section.is-assembled .industries-pipeline-tile {
  opacity: 1;
  transform: rotateX(18deg) rotateZ(-4deg) translate3d(0, 0, 0) scale(1);
}

.industries-pipeline-tile h4 {
  color: var(--color-white);
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
  padding-right: 1rem;
}

.industries-pipeline-tile p {
  font-size: 0.82rem;
  color: rgba(232, 237, 247, 0.76);
  max-width: 26ch;
}

.industries-tile-dot {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.industries-pipeline-tile--one { --i: 0; --unfold-x: 70px; --unfold-y: 40px; }
.industries-pipeline-tile--two { --i: 1; --unfold-x: 30px; --unfold-y: 40px; }
.industries-pipeline-tile--three { --i: 2; --unfold-x: -30px; --unfold-y: 40px; }
.industries-pipeline-tile--four { --i: 3; --unfold-x: -70px; --unfold-y: 40px; }
.industries-pipeline-tile--five { --i: 4; --unfold-x: 70px; --unfold-y: -40px; }
.industries-pipeline-tile--six { --i: 5; --unfold-x: 30px; --unfold-y: -40px; }
.industries-pipeline-tile--seven { --i: 6; --unfold-x: -30px; --unfold-y: -40px; }
.industries-pipeline-tile--eight { --i: 7; --unfold-x: -70px; --unfold-y: -40px; }

.industries-tile-dot--mobility { background: var(--industries-mobility); box-shadow: 0 0 8px rgba(47, 212, 107, 0.6); }
.industries-tile-dot--infrastructure { background: var(--industries-infrastructure); box-shadow: 0 0 8px rgba(102, 230, 255, 0.6); }
.industries-tile-dot--compliance { background: var(--industries-compliance); box-shadow: 0 0 8px rgba(143, 214, 255, 0.6); }
.industries-tile-dot--software { background: var(--industries-software); box-shadow: 0 0 8px rgba(31, 204, 31, 0.6); }
.industries-tile-dot--growth { background: linear-gradient(90deg, var(--industries-mobility), var(--industries-infrastructure)); }

/* --- Crosslinks + CTA ------------------------------------------------------ */

.industries-crosslinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 2rem;
}

.industries-crosslink {
  display: block;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(102, 230, 255, 0.16);
  color: rgba(232, 237, 247, 0.86);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.industries-crosslink:hover,
.industries-crosslink:focus {
  border-color: rgba(102, 230, 255, 0.5);
  background: rgba(102, 230, 255, 0.1);
  transform: translateY(-2px);
}

/* Each subsidiary keeps its own established accent color here too. */
.industries-crosslink--emagine { border-color: rgba(77, 125, 255, 0.3); }
.industries-crosslink--electrify { border-color: rgba(111, 157, 255, 0.3); }
.industries-crosslink--wattswhere { border-color: rgba(47, 212, 107, 0.3); }
.industries-crosslink--melon360 { border-color: rgba(31, 204, 31, 0.3); }

.industries-crosslink--emagine:hover,
.industries-crosslink--emagine:focus { border-color: rgba(77, 125, 255, 0.6); background: rgba(77, 125, 255, 0.1); }
.industries-crosslink--electrify:hover,
.industries-crosslink--electrify:focus { border-color: rgba(111, 157, 255, 0.6); background: rgba(111, 157, 255, 0.1); }
.industries-crosslink--wattswhere:hover,
.industries-crosslink--wattswhere:focus { border-color: rgba(47, 212, 107, 0.6); background: rgba(47, 212, 107, 0.1); }
.industries-crosslink--melon360:hover,
.industries-crosslink--melon360:focus { border-color: rgba(31, 204, 31, 0.6); background: rgba(31, 204, 31, 0.1); }

.industries-crosslink strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-primary);
  margin-bottom: 0.25rem;
  font-size: 0.92rem;
}

.industries-crosslink span {
  font-size: 0.78rem;
  color: rgba(232, 237, 247, 0.72);
}

.industries-crosslink.is-lit {
  animation: industries-module-forward 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-industries-filter] .industries-crosslink {
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.4s ease;
}

[data-industries-filter="mobility"] .industries-crosslink--wattswhere,
[data-industries-filter="infrastructure"] .industries-crosslink--emagine,
[data-industries-filter="compliance"] .industries-crosslink--electrify,
[data-industries-filter="software"] .industries-crosslink--melon360,
[data-industries-filter="growth"] .industries-crosslink {
  border-color: rgba(102, 230, 255, 0.6);
  background: rgba(102, 230, 255, 0.12);
  box-shadow: 0 0 18px rgba(102, 230, 255, calc(0.15 + var(--industries-subs-glow, 1) * 0.35));
}

.industries-cta {
  min-height: 82svh;
}

.industries-cta-scene {
  position: relative;
  width: min(86vw, 420px);
  height: 320px;
  margin-inline: auto;
  perspective: 900px;
}

.industries-cta-hub {
  --hub-r: 62px;
  --hub-d: 18px;
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--hub-r) * 2);
  height: calc(var(--hub-r) * 1.732);
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(20px) scale(0.85) rotateX(9deg) rotateY(-17deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* A small connected satellite node, echoing the hero's "connected
   ecosystem" language, so the CTA hub reads as the same mapping system
   rather than a lone, smaller shape with no context. */
.industries-cta-node {
  position: absolute;
  left: 74%;
  top: 30%;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(4, 13, 31, 0.94));
  border: 1px solid rgba(102, 230, 255, 0.4);
  box-shadow: 6px 8px 0 rgba(1, 6, 16, 0.4);
  opacity: 0;
  transform: translateY(14px) scale(0.7);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.3s;
}

.industries-cta-node::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--industries-mobility);
  box-shadow: 0 0 8px rgba(47, 212, 107, 0.7);
}

.industries-cta-line {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 90px;
  height: 1.5px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(102, 230, 255, 0.7), transparent);
  transform: rotate(-32deg) scaleX(0);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.4s;
}

.industries-cta-scene.is-assembled .industries-cta-node {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.industries-cta-scene.is-assembled .industries-cta-line {
  transform: rotate(-32deg) scaleX(1);
}

.industries-cta-scene.is-assembled .industries-cta-hub {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(20px) scale(1) rotateX(9deg) rotateY(-17deg);
  animation: industries-module-forward 0.7s ease;
}

.industries-cta-scene.is-assembled .industries-cta-hub .industries-hub-core {
  animation:
    industries-hub-core 2.8s ease-in-out infinite,
    industries-battery-glow-strong 2.6s ease-in-out infinite;
}

@keyframes industries-battery-glow-strong {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--hub-accent), 0.45); }
  50% { box-shadow: 0 0 32px rgba(var(--hub-accent), 0.9); }
}

.industries-cta-card {
  position: absolute;
  left: 10%;
  top: 66%;
  width: 150px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(102, 230, 255, 0.2);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.2s;
}

.industries-cta-scene.is-assembled .industries-cta-card {
  opacity: 1;
  transform: translateX(0);
}

.industries-cta-card strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.8rem;
}

.industries-cta-card span {
  font-size: 0.72rem;
  color: rgba(232, 237, 247, 0.7);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .industries-hero,
  .industries-interface,
  .industries-cta {
    min-height: auto;
    padding-block: clamp(4rem, 14vw, 6rem);
  }

  .industries-hero-grid,
  .industries-interface-grid,
  .industries-cta-grid {
    grid-template-columns: 1fr;
  }

  .industries-hub-stage {
    width: min(92vw, 400px);
    min-height: 440px;
    --pos-scale: 0.65;
  }

  .industries-console-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .industries-console-screen {
    min-height: 360px;
  }

  .industries-pipeline-visual {
    grid-template-columns: repeat(2, 1fr);
  }

  .industries-crosslinks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .industries-copy h1 {
    font-size: clamp(2.05rem, 13vw, 3rem);
  }

  .industries-copy h2,
  .industries-interface-copy h2 {
    font-size: clamp(1.7rem, 10vw, 2.5rem);
  }

  .industries-hub-stage {
    min-height: 380px;
  }

  .industries-console {
    padding: 0.8rem;
  }

  .industries-panel {
    padding: 1.2rem;
  }

  .industries-mini {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 1.5rem;
  }

  /* Stacking the mini graphic below the copy makes the panel taller than
     the console-screen's 360px (sized for the side-by-side layout above
     this breakpoint). A single min-height sized for the tallest tab
     (Enterprise Growth) left every shorter tab with a lot of dead space
     below its graphic, so industries.js measures the active panel and
     sets an explicit height per tab instead - this is just the no-JS/
     first-paint fallback, sized for the tab that's already visible
     before JS runs (Mobility, the only one not marked hidden in markup;
     every other tab requires JS to reveal at all). */
  .industries-console-screen {
    min-height: 430px;
  }

  .industries-pipeline-visual {
    grid-template-columns: 1fr;
  }

  .industries-crosslinks {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries-orbit,
  .industries-module.is-forward,
  .industries-line.is-lit,
  .industries-line.is-lit::after,
  .industries-crosslink.is-lit,
  .industries-cta-hub,
  .industries-hub-aura,
  .industries-hub-nodes,
  .industries-hub-ring,
  .industries-hub-core,
  .industries-hub-core::after,
  .industries-hub-scan,
  .industries-cta-scene.is-assembled .industries-cta-hub .industries-hub-core,
  .industries-mini-route,
  .industries-mini-route::after,
  .industries-mini-stop::after,
  .industries-mini-pin,
  .industries-mini-unit::before,
  .industries-mini-unit--planned,
  .industries-mini-check::after,
  .industries-mini-seal,
  .industries-mini-bar,
  .industries-mini-chip::before,
  .industries-mini-lane,
  .industries-mini-emblem {
    animation: none;
  }

  /* Without the stamp sequence, show the seal already landed. */
  .industries-mini-seal {
    transform: rotate(-12deg);
  }

  /* The scan bar only exists as a moving highlight - park it out of sight
     rather than freezing it as a static band across the face. */
  .industries-hub-scan {
    opacity: 0;
  }

  .industries-hub-stage,
  .industries-hub,
  .industries-module,
  .industries-line,
  .industries-tab,
  .industries-tab::after,
  .industries-panel,
  .industries-pipeline-tile,
  .industries-crosslink,
  .industries-cta-hub,
  .industries-cta-card {
    transition: none;
  }
}