/* Home page layout. Colours are existing tokens. No looping motion.
   Rajdhani is requested with font-display: swap on the Google stylesheet.
   This fallback uses the same widths as Arial (Liberation Sans and Arimo are
   metric clones) scaled so the hero headline, tagline, and buttons keep the
   webfont's line breaks before that file arrives. */

@font-face {
  font-family: "Rajdhani Fallback";
  src: local("Liberation Sans"), local("Arial"), local("Arimo"), local("Nimbus Sans");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 92%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --font-display: "Rajdhani", "Rajdhani Fallback", "Arial Narrow", "Nimbus Sans Narrow", sans-serif;
}

.hero-terrain,
.hero-terrain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-terrain-canvas[hidden] {
  display: none !important;
}

.hero .eyebrow {
  color: #f8f8f8;
}

.hero h1 .word {
  display: inline-block;
}

.flow-diagram {
  display: block;
  width: min(100%, 64rem);
  height: auto;
  margin-top: 0.25rem;
}

.decision-flow,
.service-grid,
.value-grid,
.practice-grid {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.decision-flow {
  counter-reset: step;
}

.decision-flow > *,
.service-grid > *,
.value-grid > *,
.practice-grid > *,
.card-grid > * {
  min-width: 0;
}

.decision-flow li {
  min-width: 0;
  padding: 1rem 0.85rem 0.2rem 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--color-lilac);
  border-radius: 0;
  box-shadow: none;
}

.decision-flow li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-deep);
}

.decision-flow h3,
.value-grid h3,
.practice-grid h3 {
  margin-bottom: 0.4rem;
}

.decision-flow p,
.service-grid p,
.value-grid p,
.practice-grid p {
  color: var(--color-text-muted);
}

.section-actions {
  margin-top: 1.35rem;
}

.mock-label,
.card p.mock-label {
  display: inline-block;
  margin: 0 0.45rem 0.4rem 0;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.mock-mini,
.practice-art,
.mock-frame {
  min-width: 0;
}

.mock-mini,
.practice-art {
  margin-bottom: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  background: var(--color-light);
}

.mock-mini svg,
.practice-art svg,
.mock-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.mock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.mock-chips li,
.bdm-step {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--color-deep);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.4;
}

.bdm-flow {
  display: grid;
  gap: 0.45rem;
}

.bdm-step {
  border-radius: 0.55rem;
}

.compare {
  margin-inline: auto;
}

.compare figcaption {
  color: var(--color-text);
}

.compare-controls label {
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.compare-hint {
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.capability-list {
  margin: 0.2rem 0 0;
  padding-left: 1.15rem;
  color: var(--color-text-muted);
}

.capability-list li + li {
  margin-top: 0.3rem;
}

.designed-for {
  margin-top: 0.75rem;
  color: var(--color-text);
}

.mock-frame {
  max-width: 68rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.mock-frame > p {
  max-width: 42rem;
  margin-bottom: 0.85rem;
  color: var(--color-text-muted);
}

.mock-app {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.7rem;
  border-radius: 0.7rem;
  background: var(--color-light);
}

.mock-layers,
.mock-data {
  margin: 0;
  padding: 0.65rem 0.75rem;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}

.mock-layers li,
.mock-data div {
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.95rem;
}

.mock-layers li:last-child,
.mock-data div:last-child {
  border-bottom: 0;
}

.mock-kicker {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mock-map {
  min-width: 0;
  padding: 0.45rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}

.mock-chart {
  min-width: 0;
  padding: 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}

.mock-chart p {
  margin-bottom: 0.6rem;
  color: var(--color-text);
}

.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  height: 8.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mock-bars li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  height: 100%;
}

.mock-bars span {
  color: var(--color-text);
  font-size: 0.875rem;
  text-align: center;
}

.mock-bar {
  width: 100%;
  border-radius: 0.35rem 0.35rem 0 0;
  background: var(--color-deep);
}

.mock-bar-a { height: 42%; }
.mock-bar-b { height: 74%; }
.mock-bar-c { height: 56%; }
.mock-bar-d { height: 33%; }

.hero > .wrap.hero-layout {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - var(--header-h));
  padding: 1.5rem 0 2rem;
  pointer-events: none;
}

.hero-copy,
.hero-copy a,
.hero-copy button {
  pointer-events: auto;
}

.hero-copy {
  width: min(38rem, 100%);
  max-width: 38rem;
  margin-bottom: 0.4rem;
  padding: 0.25rem 0 0.4rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* Homepage hero: Atrobot purple-to-lavender background */
.hero-media {
  background: linear-gradient(
    90deg,
    #4b2385 0%,
    #8054b6 28%,
    #c5a9e8 55%,
    #f1e9fb 78%,
    #ffffff 100%
  );
}

/* Keep the background gradient visible beneath the images */
.hero-media .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(40, 18, 75, 0.48) 0%,
    rgba(91, 53, 145, 0.28) 32%,
    rgba(190, 159, 224, 0.12) 62%,
    rgba(255, 255, 255, 0.08) 100%
  );
}


.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.hero-slide.is-active {
  pointer-events: auto;
  opacity: 1;
  z-index: 1;
}

.hero-slide .thermal-rgb,
.hero-slide .thermal-ir,
.hero-slide .thermal-overlay,
.hero-slide .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* The clip keeps its own aspect. Nothing translates, scales, or animates
   the video box. Slide changes are opacity only. */
.hero-slide .hero-video {
  z-index: 1;
  pointer-events: none;
  transform: none;
  translate: none;
  animation: none;
  will-change: auto;
}

.hero-slide .thermal-rgb,
.hero-slide .hero-video {
  filter: none;
}

.hero h1 {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(20, 8, 36, 0.28);
}

.hero .lead {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(20, 8, 36, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slide {
    transition: opacity 1.1s ease;
  }
}

@media (max-width: 700px) {
  .hero-scrim {
    background: linear-gradient(90deg,
      rgba(40, 24, 72, 0.58) 0%,
      rgba(48, 24, 80, 0.32) 36%,
      rgba(40, 24, 72, 0.12) 68%,
      rgba(40, 24, 72, 0) 100%);
  }

  .hero-layout {
    padding-bottom: 1.25rem;
  }

  .hero-copy {
    padding: 1rem 1rem 1.05rem;
  }

  .hero h1 {
    font-size: 2.05rem;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.45;
  }
}

@media (min-width: 700px) {
  .service-grid,
  .value-grid,
  .practice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 800px) {
  .mock-app {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 12rem);
    grid-template-areas:
      "layers map data"
      "chart chart chart";
  }

  .mock-layers { grid-area: layers; }
  .mock-map { grid-area: map; }
  .mock-data { grid-area: data; }
  .mock-chart { grid-area: chart; }
}

.service-grid .card,
.value-grid .card,
.card-grid.industries .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(127, 93, 132, 0.35);
  padding: 1.15rem 0 0.15rem;
}

.mock-mini,
.practice-art {
  border: 0;
  background: transparent;
  padding: 0 0 0.4rem;
}

@media (min-width: 1100px) {
  .decision-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .service-grid,
  .practice-grid,
  .card-grid.industries {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 3rem;
  }
}


/* Consistent spacing and alignment for homepage solutions */
.zig {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 4rem;
  min-height: 32rem;
}

/* Keep alternating rows aligned consistently */
.zig-even {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.zig-even .zig-media {
  order: 2;
}

/* Keep each media card aligned to the top of its row */
.zig-media {
  width: 100%;
  min-width: 0;
  align-self: start;
}

/* Consistent comparison-card dimensions */
.zig-media .reveal,
.zig-media .hotspot-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

/* Responsive layout */
@media (max-width: 859px) {
  .zig,
  .zig-even {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    min-height: 0;
    margin-top: 3rem;
  }

  .zig-even .zig-media {
    order: 0;
  }
}


.zig-media img,
.zig-media .reveal,
.zig-media .hotspot-stage {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 0.4rem;
}

.zig-media > img {
  height: auto;
}

.solutions-label {
  margin: 0 0 0.25rem;
  color: var(--color-deep);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zig-kicker {
  margin: 0 0 0.35rem;
  color: var(--color-deep);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zig h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.zig-meta {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.zig-meta li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  padding-top: 0.45rem;
  border-top: 2px solid #9a6aa3;
  font-size: 0.92rem;
}

.zig-meta span {
  color: var(--color-deep);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zig .card-more {
  display: inline-block;
}

@media (min-width: 860px) {
  .zig {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
  }

  .zig-even {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .zig-even .zig-media {
    order: 2;
  }
}

.deliver-split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.deliver-points {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.deliver-points li {
  position: relative;
  margin: 0;
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-bottom: 1px solid rgba(127, 93, 132, 0.25);
}

.deliver-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #9a6aa3;
}

.deliver-links {
  display: grid;
  gap: 0.35rem 1.5rem;
}

.deliver-links a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0;
}

.deliver-links a:hover,
.deliver-links a:focus-visible {
  color: var(--color-dark);
  text-decoration: none;
}

.deliver-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  margin-top: 2.25rem;
  align-items: start;
}

.deliver-gallery figure {
  margin: 0;
  min-width: 0;
}

.deliver-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 0.35rem;
  background: #281848;
}

@media (min-width: 800px) {
  .deliver-split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
  }

  .deliver-links {
    grid-template-columns: 1fr 1fr;
    align-content: start;
    padding-top: 3.2rem;
  }

  .deliver-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
  }
}

.saas-grid {
  display: grid;
  gap: 1.5rem;
}

.saas-card {
  display: grid;
  gap: 0.8rem;
  color: inherit;
  text-decoration: none;
}

.saas-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.35rem;
}

.saas-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (min-width: 860px) {
  .saas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (min-width: 1180px) {
  .saas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.industry-grid {
  display: grid;
  gap: 0.85rem;
}

.industry-tile {
  position: relative;
  display: block;
  min-height: 14rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #281848;
}

.industry-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.industry-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 24, 72, 0.05) 20%, rgba(40, 24, 72, 0.78) 100%);
}

.industry-plus {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}

.industry-copy {
  position: absolute;
  left: 0.9rem;
  right: 2rem;
  bottom: 0.85rem;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
}

.industry-copy strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.industry-copy small {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.industry-tile:hover::after,
.industry-tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(154, 106, 163, 0.15) 10%, rgba(40, 24, 72, 0.82) 100%);
}

@media (min-width: 700px) {
  .industry-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.partner-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  margin: 0;
}

.partner-row img {
  display: block;
  width: auto;
  height: 3.1rem;
  max-width: 9.5rem;
  object-fit: contain;
}

.cap-strip {
  background: #f8f8f8;
  border-block: 1px solid rgba(154, 106, 163, 0.28);
}

.cap-strip ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-strip li {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 1.15rem 1.1rem 1.2rem;
  border-top: 3px solid #9a6aa3;
  border-left: 1px solid rgba(154, 106, 163, 0.22);
}

.cap-strip li:first-child {
  border-left: 0;
}

.cap-strip strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.05;
  color: #281848;
}

.cap-strip span {
  color: #7f5d84;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .cap-strip ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.reveal {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: #281848;
  cursor: ew-resize;
}

.reveal-under,
.reveal-over img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.reveal-over {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}

.reveal-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-1.5px);
  pointer-events: none;
}

.reveal-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #281848;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.reveal-handle::after {
  content: none;
}

.hotspot-stage {
  position: relative;
  overflow: hidden;
  background: #281848;
}

.hotspot-stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.zig-media .hotspot-stage.hotspot-tower {
  aspect-ratio: 16 / 9;
}

.hotspot-stage.hotspot-tower > img {
  object-position: center center;
}

.hotspot {
  position: absolute;
  z-index: 2;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.hotspot-dot,
.hotspot-dot::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hotspot-dot {
  background: #e10600;
  box-shadow: 0 0 0 2px #fff;
}

.hotspot-dot::before {
  content: "";
  inset: -0.45rem;
  border: 2px solid rgba(225, 6, 0, 0.75);
  animation: hotspot-pulse 1.6s ease-out infinite;
}

.hotspot-tip {
  display: none;
  position: absolute;
  left: 1.4rem;
  top: 50%;
  width: 11.5rem;
  padding: 0.35rem;
  background: #fff;
  color: #281848;
  border-radius: 0.35rem;
  box-shadow: 0 10px 28px rgba(40, 24, 72, 0.28);
  transform: translateY(-50%);
  text-align: left;
}

.zig-media .hotspot-tip img {
  position: static;
  display: block;
  width: 100%;
  height: 5.6rem;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0.2rem;
}

.zig-media .reveal-under,
.zig-media .reveal-over img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
}


.reveal-labels {
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
}

.hotspot-tip strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.hotspot:hover .hotspot-tip,
.hotspot:focus .hotspot-tip,
.hotspot:focus-visible .hotspot-tip {
  display: block;
}

.hotspot.tip-left .hotspot-tip {
  left: auto;
  right: 1.4rem;
}

@keyframes hotspot-pulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.practice-rail {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: practice;
}

.practice-rail li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "index title"
    "index copy";
  gap: 0.15rem 1rem;
  margin: 0;
  padding: 1.15rem 1.2rem 1.2rem 1.15rem;
  background: #fff;
  border: 1px solid rgba(127, 93, 132, 0.28);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(40, 24, 72, 0.05);
}

.practice-rail li::before {
  content: "";
  position: absolute;
  left: 2.15rem;
  top: 100%;
  width: 2px;
  height: 1rem;
  background: linear-gradient(#9a6aa3, transparent);
}

.practice-rail li:last-child::before {
  display: none;
}

.practice-index {
  grid-area: index;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #281848;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.practice-rail h3 {
  grid-area: title;
  margin: 0.15rem 0 0;
  color: #281848;
  font-size: 1.45rem;
}

.practice-rail p {
  grid-area: copy;
  margin: 0.25rem 0 0;
}

.practice-icon {
  display: none;
}

@media (min-width: 980px) {
  .practice-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .practice-rail li {
    grid-template-columns: 1fr;
    grid-template-areas:
      "index"
      "title"
      "copy";
    min-height: 100%;
    padding-top: 1.35rem;
  }

  .practice-rail li::before {
    left: auto;
    right: -0.7rem;
    top: 2.35rem;
    width: 1.15rem;
    height: 2px;
    background: #9a6aa3;
  }

  .practice-index {
    margin-bottom: 0.85rem;
  }
}

@media (max-width: 699px) {
  .deliver-gallery {
    grid-template-columns: 1fr;
  }
}


/* === 2026 Homepage Hero & 4-Metric Stats Strip Upgrades === */

/* Keep hero background 100% locked to the 1920x1080 drone-free RGB + thermal pair */
.hero-slide .hero-video {
  display: none !important;
}

.hero h1 {
  color: #ffffff !important;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(10, 4, 22, 0.65);
}

.hero .lead {
  color: #f8f5fc !important;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(10, 4, 22, 0.65);
}

/* 4-Column Metric Stats Strip (Photo 9 replacement for 5-column cap-strip) */
.stats-strip {
  background-color: #ffffff;
  background-image: radial-gradient(rgba(40, 24, 72, 0.13) 1.25px, transparent 1.25px);
  background-size: 22px 22px;
  border-bottom: 1px solid rgba(40, 24, 72, 0.12);
  padding: 2.25rem 0;
}

.stats-strip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-strip-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.75rem 1.75rem 0.65rem;
  border-left: 1px solid rgba(40, 24, 72, 0.14);
}

.stats-strip-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #f5c518;
  margin-bottom: 0.35rem;
}

.stats-strip-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #1c1032;
}

.stats-strip-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c5a7c;
}

@media (min-width: 640px) {
  .stats-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .stats-strip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================
   ATROBOT — HOMEPAGE HEADER
   Seamless glass effect, full width, sticky
   ========================================== */

/* Full-width translucent header */
body:has(section.hero) .site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  width: 100% !important;
  max-width: none !important;

  /* Keep hero visible through the header */
  background: rgba(40, 24, 72, 0.16) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  border: none !important;
  box-shadow: none !important;

  /* Pull the hero underneath the header */
  margin-bottom: calc(-1 * var(--header-h));
}

/* Inner wrappers must not add a second color layer */
body:has(section.hero) .site-header .header-bar,
body:has(section.hero) .site-header .header-inner,
body:has(section.hero) .site-header .nav-wrap {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove separator lines */
body:has(section.hero) .site-header::before,
body:has(section.hero) .site-header::after,
body:has(section.hero) .site-header .header-bar::before,
body:has(section.hero) .site-header .header-bar::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep the logo and CTA inset from the screen edges */
body:has(section.hero) .site-header .header-bar > .wrap {
  width: min(var(--wrap), calc(100% - 6rem)) !important;
  max-width: var(--wrap) !important;
  margin-inline: auto !important;
}

/* White logo and navigation */
body:has(section.hero) .site-header .brand,
body:has(section.hero) .site-header .nav-link,
body:has(section.hero) .site-header .nav-btn,
body:has(section.hero) .site-header .nav-toggle {
  color: #fff !important;
}

/* Solid lavender Request a Demo button */
body:has(section.hero) .site-header a.nav-cta,
body:has(section.hero) .site-header a.btn-demo,
body:has(section.hero) .site-header a[href*="contact"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem !important;

  background: #9B6FA3 !important;
  color: #fff !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

/* Button hover */
body:has(section.hero) .site-header a.nav-cta:hover,
body:has(section.hero) .site-header a.btn-demo:hover,
body:has(section.hero) .site-header a[href*="contact"]:hover {
  background: #83568C !important;
  color: #fff !important;
  border: none !important;
}

/* Hero starts behind the header */
body:has(section.hero) section.hero {
  margin-top: 0 !important;
  min-height: 100svh;
}

/* Keep hero text clear of the overlaid navigation */
body:has(section.hero) .hero > .wrap.hero-layout {
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 2rem);
}

/* Mobile spacing */
@media (max-width: 768px) {
  body:has(section.hero) .site-header .header-bar > .wrap {
    width: calc(100% - 2rem) !important;
  }
}


/* ==========================================
   ATROBOT — CLEAR TRANSLUCENT HEADER
   ========================================== */

/* Transparent header: no blur */
body:has(section.hero) .site-header {
  background: rgba(40, 24, 72, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep every header layer consistent across the full width */
body:has(section.hero) .site-header .header-bar,
body:has(section.hero) .site-header .header-inner,
body:has(section.hero) .site-header .nav-wrap {
  background: rgba(40, 24, 72, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inset the header content from both screen edges */
body:has(section.hero) .site-header .header-bar > .wrap,
body:has(section.hero) .site-header .header-inner > .wrap,
body:has(section.hero) .site-header .nav-wrap > .wrap {
  width: calc(100% - 6rem) !important;
  max-width: var(--wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the logo and demo button inside the content area */
body:has(section.hero) .site-header .brand {
  margin-left: 0 !important;
}

body:has(section.hero) .site-header .nav-cta,
body:has(section.hero) .site-header .btn-demo,
body:has(section.hero) .site-header a[href*="contact"] {
  margin-right: 0 !important;
}

/* Responsive side spacing */
@media (max-width: 768px) {
  body:has(section.hero) .site-header .header-bar > .wrap,
  body:has(section.hero) .site-header .header-inner > .wrap,
  body:has(section.hero) .site-header .nav-wrap > .wrap {
    width: calc(100% - 2rem) !important;
  }
}


/* ==========================================
   HOMEPAGE — SHARP-CORNER COMPARISON CARDS
   ========================================== */

/* Outer comparison cards and clipping wrappers */
.home .comparison-card,
.home .comparison,
.home .image-comparison,
.home .comparison-container,
.home .comparison-slider,
.home .comparison-figure,
.home .comparison-media,
.home .compare-card,
.home .compare-visual,
.home .solution-visual,
.home .solution-card,
.home .solution-card__media,
.home .solution-card__image,
.home .media-frame,
.home .hero-figure {
  border-radius: 0 !important;
}

/* Images and videos inside comparison cards */
.home .comparison-card img,
.home .comparison img,
.home .image-comparison img,
.home .comparison-container img,
.home .comparison-slider img,
.home .comparison-figure img,
.home .comparison-media img,
.home .compare-card img,
.home .compare-visual img,
.home .solution-visual img,
.home .solution-card img,
.home .solution-card video,
.home .media-frame img,
.home .media-frame video {
  border-radius: 0 !important;
}

/* Ensure the clipping wrappers don't round the corners */
.home .comparison-card,
.home .comparison-container,
.home .comparison-slider,
.home .comparison-figure,
.home .solution-card__media,
.home .solution-card__image {
  clip-path: none !important;
}

/* Preserve the comparison divider and draggable handle */
.home .comparison-handle,
.home .comparison-divider {
  border-radius: 0 !important;
}


/* Infrastructure: consistent spacing and top alignment */
.zig.zig-infrastructure {
  margin-top: 5.5rem !important;
  min-height: 0;
  align-items: start !important;
}

.zig.zig-infrastructure > .zig-media,
.zig.zig-infrastructure > div:last-child {
  align-self: start !important;
  margin-top: 0 !important;
}

.zig.zig-infrastructure .reveal {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

@media (max-width: 859px) {
  .zig.zig-infrastructure {
    margin-top: 3rem !important;
  }
}


/* =========================================
   HOMEPAGE SOLUTION VIEW BUTTONS
   Sharp edges + lavender hover + click effect
   ========================================= */

.zig .card-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  margin-top: 0.85rem;
  padding: 0.65rem 1.4rem;
  min-height: 44px;

  border: 1.5px solid #9a6aa3;
  border-radius: 0 !important;

  background: transparent;
  color: #754d7d;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;

  box-shadow: 0 0 0 rgba(40, 24, 72, 0);
  transform: translateY(0) scale(1);

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}


/* =========================================
   ATROBOT — REFINED SOLUTION LINK
   Minimal, elegant, and premium
   ========================================= */

.zig .card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  margin-top: 0.65rem;
  padding: 0.35rem 0 0.4rem;

  border: 0;
  border-bottom: 1.5px solid rgba(154, 106, 163, 0.65);
  border-radius: 0 !important;

  background: transparent;
  color: #754d7d;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.35;

  box-shadow: none;
  transform: none;

  transition:
    color 200ms ease,
    border-color 200ms ease,
    padding 200ms ease;
}

/* Small arrow appears as part of the label */
.zig .card-more::after {
  content: "→";
  display: inline-block;
  font-size: 1.1em;
  transition: transform 200ms ease;
}

/* Subtle lavender hover */
.zig .card-more:hover {
  color: #9a6aa3;
  border-bottom-color: #9a6aa3;
  background: transparent;
  box-shadow: none;
  transform: none;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}

.zig .card-more:hover::after {
  transform: translateX(4px);
}

/* Accessible keyboard focus */
.zig .card-more:focus-visible {
  outline: 2px solid #9a6aa3;
  outline-offset: 4px;
  color: #754d7d;
}

/* Subtle pressed effect */
.zig .card-more:active {
  color: #593761;
  border-bottom-color: #593761;
  transform: translateY(1px);
  box-shadow: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .zig .card-more,
  .zig .card-more::after {
    transition: none;
  }
}


/* Homepage Intelligence Loop — image styling */
.home-intelligence-section .intelligence-visual {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  background: #35204f;
}

.home-intelligence-section .intelligence-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-intelligence-section .intelligence-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(43, 23, 72, 0.72),
    rgba(43, 23, 72, 0.04) 65%
  );
  pointer-events: none;
}

.home-intelligence-section .intelligence-visual span {
  position: relative;
  z-index: 2;
  color: #fff;
}


/* Atrobot spatial-intelligence section — clean gradient background */
.home-intelligence-section .home-intelligence-layers {
  position: relative;
  overflow: hidden;

  /* Dark Atrobot purple on the left, light lavender on the right */
  background-color: #eee4fb;
  background-image: linear-gradient(
    90deg,
    #4b2385 0%,
    #8054b6 25%,
    #c5a9e8 55%,
    #eee4fb 80%,
    #ffffff 100%
  );

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-color: #c9b3e5;
}

/* Keep text readable over the purple background */
.home-intelligence-section .home-intelligence-layers .intelligence-layer-labels span {
  background: rgba(53, 25, 83, 0.82);
  border-color: #8c65bb;
  color: #ffffff;
}


.home-intelligence-section .home-intelligence-layers
.intelligence-layer-message h3 {
  color: #281848;
  text-shadow: none !important;
}

.home-intelligence-section .home-intelligence-layers
.intelligence-layer-message p {
  color: #4e3569;
  text-shadow: none !important;
}

.home-intelligence-section .home-intelligence-layers .intelligence-layer-labels i {
  background: #c8a5ff;
}



/* Keep the section content above the background */
.spatial-layers-section > * {
  position: relative;
  z-index: 1;
}


/* TEMPORARY FIX: hide any duplicate text shadows */
.home-intelligence-section .home-intelligence-layers .intelligence-layer-message {
  text-shadow: none !important;
}

.home-intelligence-section .home-intelligence-layers .intelligence-layer-message h3,
.home-intelligence-section .home-intelligence-layers .intelligence-layer-message p {
  text-shadow: none !important;
}

.home-intelligence-section .home-intelligence-layers .intelligence-layer-message h3::before,
.home-intelligence-section .home-intelligence-layers .intelligence-layer-message h3::after,
.home-intelligence-section .home-intelligence-layers .intelligence-layer-message p::before,
.home-intelligence-section .home-intelligence-layers .intelligence-layer-message p::after {
  content: none !important;
  display: none !important;
}