:root {
  --ink: #f7fbff;
  --muted: #b8c8da;
  --subtle: #8298b1;
  --bg: #07101d;
  --bg-deep: #040b15;
  --surface: #0d1d30;
  --surface-raised: #132840;
  --surface-light: #dce9f3;
  --surface-light-2: #cbdce9;
  --line: rgba(171, 205, 235, 0.18);
  --line-bright: rgba(104, 218, 246, 0.34);
  --blue: #3d7dff;
  --blue-deep: #2255dc;
  --cyan: #35d8ec;
  --mint: #63e6bd;
  --shadow: 0 30px 90px rgba(0, 8, 20, 0.34);
  --shadow-soft: 0 18px 55px rgba(7, 30, 57, 0.16);
  --radius: 1.25rem;
  --radius-lg: 2rem;
  --section: clamp(5rem, 9vw, 9rem);
}

body {
  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(53, 216, 236, 0.1),
      transparent 24rem
    ),
    linear-gradient(180deg, #081422 0%, #07101d 100%);
  font-size: clamp(1rem, 0.28vw + 0.94rem, 1.2rem);
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
}

h1,
h2,
h3 {
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2.35rem, 4.7vw, 4.8rem);
}

.container {
  width: min(calc(100% - (2 * var(--gutter))), var(--max));
}

.section {
  isolation: isolate;
}

.section-heading {
  max-width: 62rem;
}

.section-heading > p {
  max-width: 64ch;
}

.eyebrow {
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(90, 218, 245, 0.24);
  border-radius: 999px;
  background: rgba(52, 178, 224, 0.08);
  font-size: clamp(0.72rem, 0.2vw + 0.68rem, 0.82rem);
  letter-spacing: 0.13em;
}

.eyebrow::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(53, 216, 236, 0.7);
}

.btn {
  position: relative;
  min-height: 3.45rem;
  overflow: hidden;
  border-radius: 0.95rem;
  background: linear-gradient(125deg, #2875ff, #595cf2);
  box-shadow: 0 16px 38px rgba(44, 106, 244, 0.32);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22),
    transparent 70%
  );
  transition: transform 0.55s ease;
}

.btn:hover::before {
  transform: translateX(105%);
}

.btn-secondary {
  border-color: rgba(159, 199, 232, 0.25);
  background: rgba(14, 31, 51, 0.76);
  box-shadow: none;
}

/* Header */
.site-header {
  padding-top: 0.35rem;
}

.site-header.scrolled,
.site-header.menu-open {
  background: rgba(6, 15, 27, 0.82);
  border-color: rgba(152, 198, 230, 0.13);
  box-shadow: 0 14px 45px rgba(0, 7, 18, 0.22);
}

.brand img {
  width: clamp(6.3rem, 8vw, 7.8rem);
  height: auto;
  object-fit: contain;
}

.nav-toggle {
  border-color: rgba(121, 183, 226, 0.26);
  background: rgba(14, 33, 54, 0.86);
}

.main-nav > a:not(.btn) {
  color: #c4d1e1;
}

.language-switch {
  border-color: rgba(137, 184, 220, 0.2);
  background: rgba(15, 34, 56, 0.65);
}

/* New hero */
.hero {
  min-height: min(62rem, 100svh);
  padding-top: calc(var(--header) + clamp(3.8rem, 7vw, 7rem));
  background:
    linear-gradient(
      115deg,
      rgba(6, 16, 29, 0.94) 0%,
      rgba(8, 23, 40, 0.8) 52%,
      rgba(10, 35, 57, 0.82) 100%
    ),
    radial-gradient(
      circle at 75% 30%,
      rgba(61, 125, 255, 0.28),
      transparent 31rem
    );
}

.hero::before {
  inset: auto -10rem -18rem auto;
  width: 52rem;
  background: radial-gradient(circle, rgba(53, 216, 236, 0.2), transparent 64%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(136, 193, 230, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136, 193, 230, 0.11) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7.5rem);
  align-items: center;
}

.hero-copy h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6.5vw, 7rem);
  line-height: 0.98;
}

.hero-copy > p {
  max-width: 42rem;
  color: #bfd0e3;
  font-size: clamp(1.08rem, 0.72vw + 0.92rem, 1.36rem);
}

.gradient-text {
  background: linear-gradient(100deg, #9bc7ff 0%, #52dcf0 70%, #79efd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.trust-row {
  gap: 0.7rem 1.2rem;
  color: #d2dfec;
}

.hero-showcase {
  min-height: auto;
  padding: clamp(0.8rem, 2vw, 1.35rem);
  border: 1px solid rgba(126, 194, 235, 0.2);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(
      circle at var(--rx, 70%) var(--ry, 20%),
      rgba(55, 188, 240, 0.18),
      transparent 17rem
    ),
    rgba(10, 26, 44, 0.64);
  box-shadow: 0 35px 100px rgba(0, 8, 22, 0.48);
  backdrop-filter: blur(18px);
}

/* Positioning band */
.positioning-strip {
  position: relative;
  z-index: 2;
  border-block: 1px solid rgba(130, 193, 231, 0.18);
  background: linear-gradient(90deg, #10283e, #12344f 50%, #10283e);
}

.positioning-grid {
  display: grid;
  gap: 0;
}

.positioning-grid p {
  margin: 0;
  padding: 1.35rem 0;
  color: #bcd0e1;
  font-size: clamp(0.88rem, 0.3vw + 0.83rem, 1rem);
}

.positioning-grid p + p {
  border-top: 1px solid rgba(147, 199, 232, 0.14);
}

.positioning-grid strong {
  color: #f5faff;
}

/* Cards and section rhythm */
main > .section:nth-of-type(3) {
  background: linear-gradient(180deg, #0b1b2d, #0e2338);
}

.card {
  border-color: rgba(139, 190, 226, 0.19);
  background: linear-gradient(
    145deg,
    rgba(20, 44, 69, 0.92),
    rgba(10, 27, 45, 0.9)
  );
  box-shadow: 0 16px 45px rgba(0, 8, 20, 0.16);
}

.card:hover {
  transform: translateY(-7px);
  border-color: rgba(77, 216, 240, 0.45);
  box-shadow: 0 25px 60px rgba(0, 11, 27, 0.28);
}

.service-card {
  min-height: 22rem;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
}

.service-card .icon-box {
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 1.1rem;
  background: linear-gradient(
    135deg,
    rgba(61, 125, 255, 0.24),
    rgba(53, 216, 236, 0.12)
  );
  color: #8beeff;
}

.service-card h3 {
  font-size: clamp(1.45rem, 1.6vw, 2rem);
}

.section-soft {
  border-block-color: rgba(156, 201, 231, 0.17);
  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(57, 133, 232, 0.14),
      transparent 27rem
    ),
    linear-gradient(130deg, #10263c, #0c1d31 56%, #102a3f);
}

.benefit {
  background: rgba(21, 47, 73, 0.72);
}

/* Light software showcase */
.showcase-section {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(61, 125, 255, 0.18),
      transparent 28rem
    ),
    linear-gradient(
      145deg,
      var(--surface-light),
      #e8f1f7 58%,
      var(--surface-light-2)
    );
  color: #0b1e32;
}

.showcase-section .eyebrow {
  border-color: rgba(22, 99, 172, 0.2);
  background: rgba(37, 111, 188, 0.08);
  color: #0e639b;
}

.showcase-section h2,
.showcase-section h3 {
  color: #0a1c2e;
}

.showcase-section .section-heading > p {
  color: #405a70;
}

.showcase-layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.workspace-showcase {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(0.5rem, 1.2vw, 0.8rem);
  overflow: hidden;
  border: 1px solid rgba(32, 93, 139, 0.2);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: linear-gradient(145deg, #d5e5f0, #edf5fa);
  box-shadow: 0 28px 75px rgba(22, 55, 82, 0.18);
}

.workspace-showcase picture {
  display: block;
}

.workspace-showcase__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: clamp(0.9rem, 2vw, 1.35rem);
}

.interface-showcase {
  --rx: 72%;
  --ry: 28%;
  position: relative;
  min-width: 0;
  padding: clamp(0.6rem, 1.5vw, 0.9rem);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border: 1px solid rgba(32, 93, 139, 0.2);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: linear-gradient(145deg, #d5e5f0, #edf5fa);
  box-shadow: 0 28px 75px rgba(22, 55, 82, 0.18);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.hero .interface-showcase {
  width: 100%;
  align-self: center;
  justify-self: stretch;
}

.hero .interface-showcase--hero {
  max-width: 58rem;
  margin-left: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero .interface-showcase--hero::before {
  inset: -8%;
  opacity: 0.6;
  border-radius: 2.5rem;
  background: radial-gradient(
    circle at var(--rx) var(--ry),
    rgba(53, 216, 236, 0.16),
    transparent 38%
  );
}

.hero .interface-showcase--hero .interface-frame {
  width: 100%;
  box-shadow:
    0 2rem 5rem rgba(0, 7, 18, 0.42),
    0 0 3rem rgba(48, 129, 220, 0.12);
}

.interface-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.7;
  background: radial-gradient(
    circle at var(--rx) var(--ry),
    rgba(91, 204, 234, 0.2),
    transparent 28%
  );
  pointer-events: none;
}

.interface-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1.38;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(130, 197, 230, 0.24);
  border-radius: clamp(0.9rem, 2vw, 1.35rem);
  background: #0a1b2c;
  box-shadow: 0 20px 55px rgba(7, 25, 43, 0.28);
}

.interface-chrome {
  min-height: clamp(2.25rem, 6cqw, 2.8rem);
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1cqw, 0.48rem);
  padding-inline: clamp(0.75rem, 2.5cqw, 1.15rem);
  border-bottom: 1px solid rgba(137, 194, 228, 0.14);
  background: #10273d;
}

.interface-chrome span {
  width: clamp(0.38rem, 1.25cqw, 0.58rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(137, 204, 235, 0.38);
}

.interface-chrome span:first-child {
  background: #49d3e8;
}

.interface-chrome i {
  width: min(44%, 12rem);
  height: clamp(0.42rem, 1.5cqw, 0.68rem);
  margin-left: auto;
  border-radius: 999px;
  background: rgba(145, 192, 222, 0.14);
}

.interface-canvas {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(3rem, 10cqw, 4.6rem) minmax(0, 1fr);
  overflow: hidden;
}

.interface-sidebar {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.65rem, 2cqw, 1rem);
  padding: clamp(0.8rem, 2.5cqw, 1.2rem) 0.45rem;
  border-right: 1px solid rgba(139, 195, 229, 0.12);
  background: rgba(7, 21, 36, 0.7);
}

.interface-mark {
  width: clamp(1.3rem, 4cqw, 1.8rem);
  aspect-ratio: 1;
  margin-bottom: clamp(0.35rem, 1.5cqw, 0.75rem);
  border-radius: 0.45rem;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 0 1.4rem rgba(53, 216, 236, 0.22);
}

.interface-sidebar span {
  width: clamp(1.05rem, 3.2cqw, 1.5rem);
  aspect-ratio: 1;
  border-radius: 0.38rem;
  background: rgba(144, 191, 220, 0.12);
}

.interface-sidebar span.is-selected {
  background: rgba(61, 125, 255, 0.48);
  box-shadow: 0 0 0 0.22rem rgba(61, 125, 255, 0.09);
}

.interface-workspace {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(0.75rem, 3cqw, 1.5rem);
  background:
    linear-gradient(rgba(127, 186, 223, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 186, 223, 0.04) 1px, transparent 1px),
    #0d2237;
  background-size: 2rem 2rem;
}

.interface-tabs {
  display: flex;
  gap: clamp(0.4rem, 1.5cqw, 0.7rem);
  margin-bottom: clamp(0.7rem, 2.2cqw, 1.1rem);
}

.interface-tabs span {
  width: clamp(2.2rem, 9cqw, 4.25rem);
  height: clamp(0.4rem, 1.4cqw, 0.65rem);
  border-radius: 999px;
  background: rgba(148, 195, 225, 0.13);
}

.interface-tabs span.is-selected {
  background: linear-gradient(90deg, #4f83ff, #41cfe2);
}

.interface-card-grid {
  flex: 1;
  height: auto;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.55rem, 1.8cqw, 0.9rem);
}

.interface-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: clamp(0.38rem, 1.2cqw, 0.58rem);
  padding: clamp(0.65rem, 2.1cqw, 1rem);
  overflow: hidden;
  border: 1px solid rgba(139, 198, 232, 0.14);
  border-radius: clamp(0.65rem, 1.8cqw, 0.95rem);
  background: rgba(20, 48, 74, 0.76);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.interface-card--primary {
  background: linear-gradient(145deg, rgba(40, 83, 145, 0.74), rgba(16, 54, 80, 0.82));
}

.interface-card--wide {
  grid-column: 1 / -1;
}

.interface-card.is-selected,
.interface-card--wide.is-active {
  border-color: rgba(84, 215, 238, 0.55);
  background: linear-gradient(145deg, rgba(39, 87, 145, 0.88), rgba(18, 60, 88, 0.9));
  box-shadow: inset 0 0 0 1px rgba(76, 184, 236, 0.12), 0 0 1.4rem rgba(53, 172, 222, 0.12);
}

.interface-card > i,
.interface-panel > i {
  width: clamp(1.2rem, 4cqw, 1.8rem);
  aspect-ratio: 1;
  margin-bottom: auto;
  border-radius: 0.42rem;
  background: linear-gradient(135deg, rgba(61, 125, 255, 0.95), rgba(53, 216, 236, 0.72));
}

.interface-card > span,
.interface-panel > span {
  width: 78%;
  height: clamp(0.28rem, 1cqw, 0.45rem);
  border-radius: 999px;
  background: rgba(178, 211, 232, 0.2);
}

.interface-card > span:nth-of-type(2),
.interface-panel > span:nth-of-type(2) {
  width: 52%;
}

.interface-toggle {
  position: relative;
  width: clamp(1.9rem, 6cqw, 2.7rem);
  height: clamp(1rem, 3cqw, 1.3rem);
  align-self: flex-end;
  margin-top: auto;
  border-radius: 999px;
  background: rgba(144, 192, 222, 0.2);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.interface-toggle::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 8%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9e8f2;
  transition: transform 0.25s ease;
}

.interface-toggle.is-active {
  background: #35c9de;
  box-shadow: 0 0 1rem rgba(53, 216, 236, 0.28);
}

.interface-toggle.is-active::after {
  transform: translateX(116%);
}

.interface-button {
  width: clamp(3rem, 11cqw, 5rem);
  height: clamp(1rem, 3.2cqw, 1.45rem);
  align-self: flex-end;
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #477dff, #36c9df);
  box-shadow: 0 0.5rem 1.2rem rgba(35, 105, 217, 0.22);
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.interface-button.is-active {
  transform: scale(0.92);
  filter: brightness(1.25);
  box-shadow: 0 0 0 0.28rem rgba(53, 216, 236, 0.13);
}

.interface-panel {
  position: absolute;
  z-index: 4;
  top: 23%;
  right: 7%;
  width: clamp(7.5rem, 30cqw, 13rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.38rem, 1.2cqw, 0.6rem);
  padding: clamp(0.65rem, 2.2cqw, 1rem);
  border: 1px solid rgba(104, 218, 246, 0.36);
  border-radius: clamp(0.7rem, 2cqw, 1rem);
  background: rgba(18, 48, 73, 0.96);
  box-shadow: 0 1.25rem 3rem rgba(0, 8, 20, 0.4);
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.interface-panel b {
  width: 58%;
  height: clamp(0.65rem, 2.2cqw, 1rem);
  margin-top: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b7fff, #38ccdf);
}

.interface-panel.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.interface-panel.is-secondary {
  border-color: rgba(91, 137, 255, 0.58);
  background: rgba(24, 55, 91, 0.97);
  box-shadow: 0 1.25rem 3rem rgba(0, 8, 20, 0.4), 0 0 1.5rem rgba(72, 119, 255, 0.16);
}

.interface-panel.is-secondary b {
  width: 76%;
  background: linear-gradient(90deg, #5e83ff, #4bd2e4);
}

.interface-cursor {
  position: absolute;
  z-index: 7;
  top: 18%;
  left: 13%;
  width: clamp(0.85rem, 2.5cqw, 1.2rem);
  height: clamp(1.1rem, 3.3cqw, 1.55rem);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  clip-path: polygon(0 0, 100% 66%, 58% 73%, 42% 100%);
  background: white;
  filter: drop-shadow(0 0.18rem 0.2rem rgba(0, 13, 28, 0.45));
  pointer-events: none;
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  .interface-showcase:hover {
    transform: translateY(-2px);
    border-color: rgba(32, 123, 173, 0.34);
    box-shadow: 0 32px 85px rgba(22, 55, 82, 0.23);
  }
}

/* Projects */
.project-grid {
  grid-auto-flow: dense;
}

.project-card {
  min-height: 28rem;
  padding-top: clamp(10rem, 18vw, 13rem);
  background: linear-gradient(155deg, #122a43, #0b1c2f);
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 1rem 1rem auto;
  height: clamp(7.5rem, 14vw, 10rem);
  border: 1px solid rgba(135, 197, 234, 0.18);
  border-radius: 1rem;
  background:
    linear-gradient(90deg, rgba(59, 125, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(59, 125, 255, 0.18) 1px, transparent 1px),
    radial-gradient(
      circle at 74% 35%,
      rgba(53, 216, 236, 0.4),
      transparent 3.5rem
    ),
    #0b1928;
  background-size:
    1.5rem 1.5rem,
    1.5rem 1.5rem,
    auto,
    auto;
}

.project-card:nth-child(2)::before {
  background:
    linear-gradient(145deg, rgba(61, 125, 255, 0.55), rgba(9, 27, 44, 0.2) 48%),
    #0b1928;
}

.project-card:nth-child(3)::before {
  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(53, 216, 236, 0.42),
      transparent 4rem
    ),
    radial-gradient(
      circle at 70% 50%,
      rgba(91, 95, 242, 0.42),
      transparent 4rem
    ),
    #0b1928;
}

.project-card:nth-child(4)::before {
  background:
    linear-gradient(
      110deg,
      transparent 35%,
      rgba(61, 125, 255, 0.32) 35% 50%,
      transparent 50%
    ),
    #0b1928;
}

.project-card::after {
  display: none;
}

.project-card h2,
.project-card h3 {
  position: relative;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
}

.project-card > * {
  position: relative;
  z-index: 1;
}

/* Process and expertise */
.process {
  gap: 1rem;
  overflow: visible;
  border: 0;
  background: transparent;
}

.process-step {
  min-height: 15rem;
  border: 1px solid rgba(140, 193, 228, 0.18);
  border-radius: 1.1rem;
  background: linear-gradient(
    150deg,
    rgba(20, 47, 73, 0.9),
    rgba(10, 29, 48, 0.88)
  );
}

.process-step span {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  margin-bottom: 2rem;
  border: 1px solid rgba(79, 215, 239, 0.32);
  border-radius: 50%;
  background: rgba(53, 216, 236, 0.08);
}

.expertise-section {
  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(53, 216, 236, 0.12),
      transparent 30rem
    ),
    #091827;
}

.expertise-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.expertise-layout .section-heading {
  margin-bottom: 0;
}

.expertise-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.expertise-cloud span {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(133, 195, 231, 0.2);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(23, 55, 83, 0.94),
    rgba(13, 36, 58, 0.88)
  );
  color: #d4e5f4;
  font-weight: 750;
  box-shadow: 0 10px 24px rgba(0, 8, 20, 0.12);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.expertise-cloud span:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 216, 236, 0.46);
}

.profile-card {
  border-color: rgba(111, 203, 236, 0.22);
  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(53, 216, 236, 0.16),
      transparent 12rem
    ),
    linear-gradient(145deg, #153451, #0c2238);
  box-shadow: var(--shadow);
}

.profile-monogram {
  border-radius: 50%;
  background: linear-gradient(145deg, #347cff, #2fcada);
  box-shadow: 0 18px 45px rgba(41, 131, 228, 0.28);
}

/* Page headers */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header) + clamp(3.5rem, 6vw, 5.5rem))
    clamp(3.8rem, 6vw, 5.5rem);
  background:
    linear-gradient(120deg, rgba(7, 18, 32, 0.96), rgba(15, 45, 70, 0.9)),
    radial-gradient(
      circle at 80% 20%,
      rgba(53, 216, 236, 0.25),
      transparent 28rem
    );
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: linear-gradient(
    90deg,
    rgba(140, 197, 230, 0.16) 1px,
    transparent 1px
  );
  background-size: 6rem 100%;
  pointer-events: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 5.5vw, 5.9rem);
}

.page-hero p {
  color: #c0d2e4;
}

/* Services showcase page */
.service-detail {
  position: relative;
  gap: clamp(2rem, 5vw, 5rem);
  margin-block: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(139, 195, 229, 0.18);
  border-radius: clamp(1.4rem, 3vw, 2rem);
  background:
    radial-gradient(
      circle at 95% 15%,
      rgba(53, 216, 236, 0.13),
      transparent 18rem
    ),
    linear-gradient(135deg, #102a42, #0b1e32);
  box-shadow: 0 22px 65px rgba(0, 8, 20, 0.16);
}

.service-detail:nth-child(even) {
  background:
    radial-gradient(
      circle at 5% 85%,
      rgba(85, 94, 242, 0.15),
      transparent 18rem
    ),
    linear-gradient(135deg, #132541, #0d2034);
}

.service-index {
  align-self: start;
}

.service-index span {
  display: block;
  margin-bottom: 0.6rem;
  color: #68e3f4;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.service-index strong {
  display: block;
  max-width: 10ch;
  color: #f5f9ff;
  font-size: clamp(2.7rem, 5.5vw, 5.4rem);
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.06em;
  overflow-wrap: normal;
  word-break: normal;
}

.service-content {
  max-width: none;
}

.service-content > h2 {
  max-width: 18ch;
  font-size: clamp(1.7rem, 2.7vw, 3rem);
}

.service-content > p {
  max-width: 62ch;
  color: #b9cadc;
  font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.2rem);
}

.service-content .card {
  min-height: 100%;
  background: rgba(8, 24, 40, 0.56);
}

/* Contact */
.contact-layout {
  gap: clamp(2.5rem, 7vw, 8rem);
}

.contact-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-details a,
.contact-details span {
  border-color: rgba(137, 194, 228, 0.2);
  background: linear-gradient(
    145deg,
    rgba(20, 47, 73, 0.78),
    rgba(10, 29, 48, 0.72)
  );
}

.contact-form {
  border-color: rgba(115, 201, 235, 0.22);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(53, 216, 236, 0.1),
      transparent 16rem
    ),
    linear-gradient(145deg, #132e48, #0b2035);
  box-shadow: var(--shadow);
}

.field input,
.field select,
.field textarea {
  border-color: rgba(132, 185, 222, 0.25);
  background: rgba(5, 17, 29, 0.78);
}

.radio-option {
  background: rgba(7, 21, 36, 0.55);
}

/* CTA */
.cta {
  padding: clamp(2rem, 5.5vw, 5rem);
  border-color: rgba(140, 228, 245, 0.34);
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(84, 229, 221, 0.34),
      transparent 17rem
    ),
    linear-gradient(120deg, #1d63dd, #405ee8 52%, #138fae);
}

.cta h2 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 4vw, 4.3rem);
}

.cta p {
  color: rgba(241, 248, 255, 0.84);
}

.cta .btn {
  background: #f4f9ff;
  color: #0c3154;
  box-shadow: 0 16px 40px rgba(0, 19, 49, 0.24);
}

/* Premium compact footer */
.site-footer {
  padding-top: clamp(3rem, 5vw, 4.75rem);
  border-top-color: rgba(128, 184, 220, 0.16);
  background:
    radial-gradient(
      circle at 14% 0,
      rgba(42, 130, 215, 0.12),
      transparent 23rem
    ),
    #040b14;
}

.footer-grid {
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
}

.footer-brand img {
  width: clamp(7rem, 10vw, 9rem);
  height: auto;
  max-width: 100%;
  margin: 0 0 1.2rem;
  object-fit: contain;
  aspect-ratio: auto;
}

.footer-brand p {
  max-width: 30rem;
  margin-bottom: 0;
  color: #99aec3;
}

.footer-column h2 {
  color: #e8f2fb;
}

.footer-column a {
  color: #96acc1;
}

.footer-bottom {
  align-items: center;
  padding-block: 1.2rem;
}

.footer-bottom p:last-child {
  max-width: 52rem;
  text-align: right;
}

/* Responsive */
@media (min-width: 40rem) {
  .positioning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .positioning-grid p {
    padding: 1.4rem clamp(1rem, 2.4vw, 2rem);
  }

  .positioning-grid p:first-child {
    padding-left: 0;
  }

  .positioning-grid p + p {
    border-top: 0;
    border-left: 1px solid rgba(147, 199, 232, 0.14);
  }

}

@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.84fr) minmax(32rem, 1.16fr);
    gap: clamp(2.5rem, 4vw, 5.5rem);
  }

  .hero-copy {
    min-width: 0;
  }

  .hero .interface-showcase--hero {
    align-self: center;
    justify-self: end;
  }

  .showcase-layout {
    grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
  }

  .showcase-layout .section-heading {
    margin-bottom: 0;
  }

  .project-grid .project-card:first-child {
    grid-column: span 2;
  }

  .process {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .process-step {
    min-height: 19rem;
    padding: 1.25rem;
  }

  .process-step h3 {
    font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  }

  .process-step p {
    font-size: 0.86rem;
  }

  .expertise-layout {
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.9fr);
  }

  .service-detail {
    grid-template-columns: minmax(22rem, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 90rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(38rem, 1.15fr);
  }
}

@media (max-width: 63.99rem) {
  .main-nav {
    background:
      radial-gradient(
        circle at 80% 10%,
        rgba(53, 216, 236, 0.1),
        transparent 20rem
      ),
      rgba(5, 14, 25, 0.985);
  }

  .service-index strong {
    max-width: 14ch;
  }

}

/* Homepage project alignment and final-section rhythm. */
.project-grid.project-grid--home {
  align-items: stretch;
}

.project-grid--home .project-card {
  height: auto;
  align-self: stretch;
}

.project-grid--home .project-meta {
  margin-top: auto;
  padding-top: 1rem;
}

.about-home-section {
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.home-final-cta {
  padding-top: 0;
}

@media (min-width: 64rem) {
  .project-grid--home .project-card:nth-child(n + 3) {
    height: 100%;
  }
}

@media (max-width: 63.99rem) {
  .hero .interface-showcase {
    max-width: 48rem;
    justify-self: center;
  }

  .interface-frame {
    aspect-ratio: 1.18;
  }
}

@media (max-width: 39.99rem) {
  .showcase-layout {
    gap: 1.75rem;
  }

  .interface-showcase {
    padding: 0.5rem;
    border-radius: 1.1rem;
  }

  .workspace-showcase {
    padding: 0.4rem;
    border-radius: 1.1rem;
  }

  .workspace-showcase__image {
    border-radius: 0.8rem;
  }

  .interface-frame {
    aspect-ratio: 0.86;
  }

  .interface-canvas {
    grid-template-columns: 2.65rem minmax(0, 1fr);
  }

  .interface-card-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .interface-card--wide {
    grid-column: auto;
  }

  .interface-panel {
    top: 30%;
    right: 6%;
    width: 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-showcase,
  .interface-card,
  .interface-button,
  .interface-toggle,
  .interface-toggle::after,
  .interface-panel {
    transition: none;
  }

  .interface-cursor {
    display: none;
  }

  .interface-panel {
    opacity: 1;
    transform: none;
  }

  .interface-toggle {
    background: #35c9de;
  }

  .interface-toggle::after {
    transform: translateX(116%);
  }
}

@media (min-width: 64rem) and (max-height: 50rem) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header) + 3rem);
    padding-bottom: 4rem;
  }

  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(3.6rem, 5vw, 4.8rem);
  }

}

@media (max-width: 39.99rem) {
  .hero {
    min-height: auto;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4.35rem);
  }

  .hero-showcase {
    padding: 0.65rem;
  }

  .service-card {
    min-height: 18rem;
  }

  .service-detail {
    padding: 1.3rem;
  }

  .service-index strong {
    font-size: clamp(2.5rem, 13vw, 3.6rem);
  }

  .contact-details {
    grid-template-columns: 1fr;
  }

  .footer-bottom p:last-child {
    text-align: left;
  }
}

/* =========================================================
   COMPACT LAYOUT PASS
   Keeps the current direction while improving content density.
   ========================================================= */

:root {
  --section: clamp(3.75rem, 6.5vw, 6.25rem);
}

body {
  font-size: clamp(0.96rem, 0.2vw + 0.92rem, 1.08rem);
  line-height: 1.62;
}

h1 {
  font-size: clamp(2.35rem, 5.5vw, 5.4rem);
}

h2 {
  font-size: clamp(1.9rem, 3.7vw, 3.8rem);
}

h3 {
  font-size: clamp(1.15rem, 1.35vw, 1.5rem);
}

.section-heading {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}

.section-heading > p {
  font-size: clamp(1rem, 0.45vw + 0.9rem, 1.14rem);
}

.eyebrow {
  margin-bottom: 0.75rem;
  padding: 0.34rem 0.62rem;
  font-size: clamp(0.68rem, 0.14vw + 0.66rem, 0.76rem);
}

.button-row {
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.btn {
  min-height: 3rem;
  padding: 0.7rem 1.05rem;
  border-radius: 0.82rem;
  font-size: 0.95rem;
}

.card {
  padding: clamp(1.1rem, 2vw, 1.55rem);
}

.card-grid,
.project-grid,
.benefit-grid,
.two-col {
  gap: 0.85rem;
}

.hero {
  min-height: 0;
  padding-block: calc(var(--header) + clamp(2.3rem, 4vw, 3.6rem))
    clamp(3.25rem, 5vw, 4.75rem);
}

.hero-grid {
  gap: clamp(2rem, 4vw, 4.5rem);
}

.hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.65rem, 5.4vw, 5.7rem);
}

.hero-copy > p {
  font-size: clamp(1rem, 0.55vw + 0.88rem, 1.22rem);
}

.trust-row {
  margin-top: 1.35rem;
  font-size: 0.86rem;
}

.hero-showcase {
  padding: clamp(0.65rem, 1.5vw, 1rem);
}

.positioning-grid p {
  padding-block: 1rem;
}

.service-card {
  min-height: 0;
  padding: clamp(1.15rem, 2vw, 1.6rem);
}

.service-card .icon-box {
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size: clamp(1.25rem, 1.3vw, 1.65rem);
}

.project-grid {
  align-items: start;
}

.project-card {
  min-height: 0;
  padding-top: 8rem;
}

.project-card::before {
  inset: 0.8rem 0.8rem auto;
  height: 6.25rem;
}

.project-card--soon::before {
  background:
    linear-gradient(135deg, transparent 45%, rgba(53, 216, 236, 0.22) 45% 55%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(61, 125, 255, 0.34), transparent 4rem),
    #0b1928;
}

.project-card h2,
.project-card h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.3rem, 1.5vw, 1.75rem);
}

.project-label {
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
}

.project-meta {
  gap: 0.35rem;
  margin: 1rem 0 0;
  padding-top: 0;
}

.tag {
  padding: 0.26rem 0.52rem;
  font-size: 0.7rem;
}

.disclaimer {
  margin-top: 0.8rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.82rem;
}

.process {
  gap: 0.8rem;
}

.process-step {
  min-height: 0;
  padding: 1.1rem;
}

.process-step span {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
}

.process-step h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.15rem, 0.9vw + 0.95rem, 1.4rem);
}

.process-step p {
  font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.98rem);
  line-height: 1.52;
}

.page-hero {
  padding-block: calc(var(--header) + 3rem) clamp(2.75rem, 5vw, 4.5rem);
}

.page-hero h1 {
  font-size: clamp(2.45rem, 4.7vw, 4.8rem);
}

.page-hero p {
  font-size: clamp(1rem, 0.6vw + 0.88rem, 1.2rem);
}

.service-detail {
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-block: clamp(0.75rem, 2vw, 1.35rem);
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.service-index strong,
.service-detail:nth-of-type(2) .service-index strong {
  font-size: clamp(2.25rem, 3.8vw, 4rem);
}

.service-content > h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.5rem);
}

.service-content > p {
  font-size: clamp(0.98rem, 0.28vw + 0.92rem, 1.1rem);
}

.service-content .card {
  min-height: 0;
}

.quick-cta,
.service-contact-strip {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.split,
.expertise-layout,
.contact-layout {
  gap: clamp(1.75rem, 4.5vw, 4rem);
}

.profile-card,
.contact-form {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.profile-monogram {
  width: clamp(4.25rem, 8vw, 6rem);
  margin-bottom: 1.25rem;
}

.field textarea {
  min-height: 8.5rem;
}

.cta {
  gap: 1.25rem;
  padding: clamp(1.35rem, 3.5vw, 2.75rem);
}

.cta h2 {
  font-size: clamp(1.9rem, 3.1vw, 3.35rem);
}

.site-footer {
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
}

.footer-grid {
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.footer-brand img {
  margin-bottom: 0.8rem;
}

@media (min-width: 64rem) {
  :root {
    --header: 5rem;
  }

  .main-nav {
    gap: clamp(0.7rem, 1.1vw, 1.25rem);
  }

  .main-nav > a:not(.btn) {
    padding-block: 0.4rem;
    font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.99rem);
  }

  .nav-actions .btn {
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-size: 0.92rem;
  }

  .service-detail {
    grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 63.99rem) {
  :root {
    --header: 4.25rem;
  }

  .site-header {
    height: var(--header);
    padding-top: 0;
  }

  .brand img {
    width: clamp(5.8rem, 22vw, 6.8rem);
  }

  .nav-toggle {
    width: 2.7rem;
    height: 2.7rem;
  }

  .main-nav {
    inset: calc(var(--header) + 0.35rem) var(--gutter) auto;
    gap: 0;
    max-height: calc(100svh - var(--header) - 0.7rem);
    padding: 0.55rem 0.75rem 0.7rem;
    overflow-y: auto;
    border: 1px solid rgba(137, 194, 228, 0.22);
    border-radius: 0.9rem;
    background: rgba(7, 20, 34, 0.98);
    box-shadow: 0 22px 55px rgba(0, 7, 18, 0.42);
    backdrop-filter: blur(18px);
  }

  .main-nav > a:not(.btn) {
    min-height: 2.3rem;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.35rem;
    font-size: 1rem;
    line-height: 1.18;
  }

  .nav-actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.55rem;
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
  }

  .nav-actions .btn {
    min-height: 2.55rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }

  .language-switch a {
    min-width: 2.2rem;
    padding: 0.24rem 0.4rem;
  }

  body.nav-open .floating-contact {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 39.99rem) {
  .main-nav > a:not(.btn) {
    padding-block: 0.45rem;
    font-size: 1rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.45rem, 12vw, 3.75rem);
  }

  .hero {
    padding-top: calc(var(--header) + 2rem);
  }

  .service-card,
  .project-card,
  .process-step {
    min-height: 0;
  }

  .service-detail {
    padding: 1.1rem;
  }
}

/* =========================================================
   COMMERCIAL POLISH
   Targeted refinements for contact, readability and rhythm.
   ========================================================= */

:root {
  --bg: #091827;
  --bg-deep: #06111d;
  --surface: #122740;
  --surface-raised: #183650;
}

body {
  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(53, 216, 236, 0.13),
      transparent 24rem
    ),
    linear-gradient(180deg, #0a1b2d 0%, #091522 100%);
}

.main-nav > a:not(.btn) {
  color: #d0dcea;
  font-size: clamp(1.04rem, 0.28vw + 0.96rem, 1.15rem);
  font-weight: 750;
  line-height: 1.25;
}

.nav-actions .btn {
  min-height: 3.1rem;
  padding-inline: 1.25rem;
  font-size: clamp(0.98rem, 0.2vw + 0.94rem, 1.08rem);
}

.positioning-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.positioning-contact a {
  color: #75e8f7;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: rgba(117, 232, 247, 0.35);
  text-underline-offset: 0.25rem;
}

.card {
  background: linear-gradient(
    145deg,
    rgba(27, 57, 86, 0.94),
    rgba(13, 34, 55, 0.92)
  );
}

.section-soft {
  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(74, 155, 238, 0.18),
      transparent 27rem
    ),
    linear-gradient(130deg, #17334f, #102842 56%, #153650);
}

.benefit {
  background: rgba(29, 63, 94, 0.78);
}

.quick-cta {
  display: grid;
  gap: 1.2rem;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(112, 210, 241, 0.24);
  border-radius: 1.2rem;
  background: linear-gradient(
    120deg,
    rgba(25, 66, 99, 0.86),
    rgba(16, 46, 73, 0.82)
  );
  box-shadow: 0 18px 45px rgba(0, 10, 25, 0.16);
}

.quick-cta strong,
.quick-cta span {
  display: block;
}

.quick-cta strong {
  color: #f5faff;
  font-size: clamp(1.08rem, 0.6vw + 0.95rem, 1.35rem);
}

.quick-cta span {
  margin-top: 0.15rem;
  color: #c4d5e5;
}

.quick-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
}

.quick-contact-link {
  color: #8cebf6;
  font-weight: 800;
}

.process-step {
  min-height: 13.5rem;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  background: linear-gradient(
    150deg,
    rgba(29, 65, 96, 0.94),
    rgba(14, 40, 64, 0.92)
  );
}

.process-step span {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1.55rem;
  font-size: 0.84rem;
}

.process-step h3 {
  font-size: clamp(1.35rem, 1.3vw + 1rem, 1.75rem);
}

.process-step p {
  font-size: clamp(0.98rem, 0.2vw + 0.94rem, 1.08rem);
  line-height: 1.6;
}

.service-detail {
  gap: clamp(2.75rem, 7vw, 7.5rem);
  background:
    radial-gradient(
      circle at 95% 15%,
      rgba(53, 216, 236, 0.16),
      transparent 18rem
    ),
    linear-gradient(135deg, #173854, #102b46);
}

.service-detail:nth-child(even) {
  background:
    radial-gradient(
      circle at 5% 85%,
      rgba(85, 94, 242, 0.18),
      transparent 18rem
    ),
    linear-gradient(135deg, #19334f, #112c46);
}

.service-detail:nth-of-type(2) .service-index strong {
  font-size: clamp(2.55rem, 4.25vw, 4.6rem);
  line-height: 0.96;
}

.service-contact-strip {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid rgba(105, 213, 241, 0.25);
  border-radius: 1.2rem;
  background: linear-gradient(110deg, #1b4a70, #173a5c 62%, #124961);
  box-shadow: 0 18px 50px rgba(0, 10, 25, 0.2);
}

.service-contact-strip strong,
.service-contact-strip span {
  display: block;
}

.service-contact-strip strong {
  color: white;
  font-size: clamp(1.15rem, 0.7vw + 1rem, 1.5rem);
}

.service-contact-strip span {
  margin-top: 0.2rem;
  color: #c3d8e8;
}

.floating-contact {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: 1rem;
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(137, 229, 245, 0.38);
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgba(31, 105, 218, 0.96),
    rgba(29, 161, 185, 0.96)
  );
  color: white;
  font-size: 0.94rem;
  font-weight: 850;
  box-shadow: 0 15px 40px rgba(0, 17, 44, 0.34);
  backdrop-filter: blur(12px);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.floating-contact::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #a5f4dc;
  box-shadow: 0 0 0 0.25rem rgba(165, 244, 220, 0.1);
}

.floating-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0, 17, 44, 0.42);
}

body:has(.floating-contact) .to-top {
  bottom: 4.9rem;
}

@media (min-width: 40rem) {
  .quick-cta,
  .service-contact-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 64rem) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process-step {
    min-height: 14.5rem;
  }
}

@media (min-width: 64rem) and (max-width: 74.99rem) {
  .service-detail {
    grid-template-columns: 1fr;
  }

  .service-index strong {
    max-width: 16ch;
  }
}

@media (min-width: 75rem) {
  .service-detail {
    grid-template-columns: minmax(26rem, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 39.99rem) {
  .main-nav > a:not(.btn) {
    font-size: 1.18rem;
    padding-block: 0.9rem;
  }

  .floating-contact {
    right: 0.75rem;
    bottom: 0.75rem;
    min-height: 3rem;
    padding: 0.68rem 0.9rem;
    font-size: 0.88rem;
  }
}

/* Final cascade reconciliation for the compact pass. */
.main-nav > a:not(.btn) {
  font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.99rem);
}

.nav-actions .btn {
  min-height: 2.75rem;
  padding-inline: 1rem;
  font-size: 0.92rem;
}

.quick-cta,
.service-contact-strip {
  margin-block: 1.25rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.process-step {
  min-height: 0;
  padding: 1.1rem;
}

.process-step span {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
}

.process-step h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.15rem, 0.9vw + 0.95rem, 1.4rem);
}

.process-step p {
  font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.98rem);
  line-height: 1.52;
}

.service-detail {
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-block: clamp(0.75rem, 2vw, 1.35rem);
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.service-index strong,
.service-detail:nth-of-type(2) .service-index strong {
  font-size: clamp(2.25rem, 3.8vw, 4rem);
}

@media (min-width: 64rem) {
  .main-nav {
    gap: clamp(0.7rem, 1.1vw, 1.25rem);
  }

  .process-step {
    min-height: 0;
  }

  .service-detail {
    grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 63.99rem) {
  .main-nav > a:not(.btn) {
    min-height: 2.3rem;
    padding: 0.45rem 0.35rem;
    font-size: 1rem;
    line-height: 1.18;
  }

  .nav-actions .btn {
    min-height: 2.55rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
}

/* Subpage polish */
.page-hero {
  padding-block: calc(var(--header) + clamp(2.5rem, 4vw, 4rem))
    clamp(2.75rem, 4.5vw, 4.25rem);
  border-bottom: 1px solid rgba(145, 194, 226, 0.14);
}

.page-hero > .container,
.page-hero > .narrow {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow {
  margin-bottom: clamp(0.85rem, 1.5vw, 1.15rem);
}

.page-hero h1 {
  max-width: 16ch;
  margin-bottom: clamp(0.85rem, 1.5vw, 1.15rem);
  line-height: 1.02;
  text-wrap: balance;
}

.page-hero p {
  max-width: 62ch;
  margin: 0;
  line-height: 1.65;
}

.page-hero + .container {
  padding-top: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

.page-hero + .container .service-detail {
  align-items: start;
}

.page-hero + .container .service-detail:first-child {
  margin-top: 0;
}

.page-hero ~ .section .section-heading > p,
.page-hero ~ .section .notice > p,
.page-hero ~ .section .cta p {
  max-width: 64ch;
}

.page-hero + .section .project-grid {
  align-items: stretch;
}

.page-hero + .section .project-card {
  height: 100%;
}

.page-hero + .section .project-card .project-meta {
  margin-top: auto;
  padding-top: 1rem;
}

.page-hero + .section .contact-layout {
  align-items: start;
}

.page-hero + .section .contact-layout > aside > p {
  max-width: 58ch;
}

.page-hero + .section .legal {
  max-width: 54rem;
}

.page-hero + .section .legal h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.2;
  text-wrap: balance;
}

.page-hero + .section .legal p,
.page-hero + .section .legal li {
  max-width: 72ch;
  line-height: 1.75;
}

@media (max-width: 39.99rem) {
  .page-hero {
    padding-block: calc(var(--header) + 1.9rem) 2.5rem;
  }

  .page-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .page-hero + .container {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
}

/* =========================================================
   FAQ
   Compact, accessible accordion styling for the homepage.
   Uses native <details>/<summary>, so no extra JavaScript is required.
   ========================================================= */

.faq-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(53, 216, 236, 0.1),
      transparent 24rem
    ),
    linear-gradient(180deg, #0b1c2e 0%, #0a1827 100%);
}

.faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(126, 188, 226, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 188, 226, 0.08) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 18%,
    black 82%,
    transparent
  );
}

.faq-section > .container {
  position: relative;
  z-index: 1;
}

.faq-list {
  max-width: 72rem;
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(139, 195, 229, 0.18);
  border-radius: 1rem;
  background:
    linear-gradient(
      145deg,
      rgba(24, 54, 82, 0.92),
      rgba(12, 32, 52, 0.92)
    );
  box-shadow: 0 14px 35px rgba(0, 8, 20, 0.12);
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.faq-item:hover {
  border-color: rgba(79, 214, 239, 0.35);
}

.faq-item[open] {
  border-color: rgba(82, 215, 239, 0.32);
  background:
    linear-gradient(
      145deg,
      rgba(28, 63, 94, 0.96),
      rgba(13, 37, 60, 0.96)
    );
  box-shadow: 0 18px 42px rgba(0, 9, 22, 0.18);
}

.faq-item summary {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  color: #f3f8fd;
  font-size: clamp(1rem, 0.35vw + 0.95rem, 1.18rem);
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
  content: "";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
  border-radius: 0.9rem;
}

.faq-item summary > span:first-child {
  min-width: 0;
}

.faq-icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 218, 246, 0.28);
  border-radius: 50%;
  background: rgba(53, 216, 236, 0.08);
  color: transparent;
  font-size: 0;
  line-height: 1;
  transition:
    background 0.22s ease,
    border-color 0.22s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.11rem;
  border-radius: 999px;
  background: #7fe9f7;
  transition:
    transform 0.22s ease,
    background 0.22s ease;
}

.faq-icon::before {
  left: 50%;
  transform: translate(-82%, -50%) rotate(45deg);
}

.faq-icon::after {
  right: 50%;
  transform: translate(82%, -50%) rotate(-45deg);
}

.faq-item[open] .faq-icon {
  border-color: rgba(104, 218, 246, 0.48);
  background: rgba(53, 216, 236, 0.14);
}

.faq-item[open] .faq-icon::before {
  transform: translate(-82%, -50%) rotate(-45deg);
}

.faq-item[open] .faq-icon::after {
  transform: translate(82%, -50%) rotate(45deg);
}

.faq-answer {
  max-width: 68rem;
  padding: 0 1.15rem 1.15rem;
  color: #b9ccdd;
}

.faq-answer p {
  max-width: 72ch;
  margin: 0;
  font-size: clamp(0.96rem, 0.22vw + 0.92rem, 1.06rem);
  line-height: 1.68;
}

.faq-answer p + p {
  margin-top: 0.75rem;
}

.faq-section + .home-final-cta {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 64rem) {
  .faq-section .section-heading {
    max-width: 58rem;
  }

  .faq-list {
    gap: 0.85rem;
  }

  .faq-item summary {
    padding: 1.1rem 1.35rem;
  }

  .faq-answer {
    padding: 0 1.35rem 1.25rem;
  }
}

@media (max-width: 39.99rem) {
  .faq-list {
    gap: 0.6rem;
  }

  .faq-item {
    border-radius: 0.85rem;
  }

  .faq-item summary {
    min-height: 3.7rem;
    gap: 0.75rem;
    padding: 0.9rem 0.95rem;
    font-size: 0.98rem;
  }

  .faq-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .faq-icon::before,
  .faq-icon::after {
    width: 0.45rem;
    height: 0.1rem;
  }

  .faq-answer {
    padding: 0 0.95rem 1rem;
  }

  .faq-answer p {
    font-size: 0.94rem;
    line-height: 1.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }
}

/* Services page: editorial layout and interactive Solution Lab */
.services-page { overflow: clip; }
.services-hero__grid { display: grid; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.services-hero__copy h1 { max-width: 13ch; }
.services-hero__map {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center;
  min-width: 0; padding: clamp(1rem, 2.5vw, 1.65rem);
  border: 1px solid rgba(131, 207, 239, 0.2); border-radius: 1.35rem;
  background: rgba(7, 23, 39, 0.66); box-shadow: 0 24px 65px rgba(0, 8, 20, 0.22);
  backdrop-filter: blur(16px);
}
.hero-map__step { display: grid; gap: 0.25rem; min-width: 0; padding: 0.75rem; }
.hero-map__step span, .hero-map__step small { color: #88a2ba; font-size: 0.72rem; }
.hero-map__step strong { color: #edf7ff; font-size: clamp(0.96rem, 1.4vw, 1.15rem); }
.hero-map__step.is-accent { border-radius: 0.9rem; background: linear-gradient(145deg, rgba(49, 115, 232, 0.34), rgba(42, 208, 225, 0.14)); }
.hero-map__line { width: clamp(1rem, 2.5vw, 2.5rem); height: 1px; background: linear-gradient(90deg, rgba(62, 134, 241, 0.25), #54deed, rgba(62, 134, 241, 0.25)); }
.services-intro { display: grid; gap: 1.5rem 4rem; align-items: end; padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.services-intro h2 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4vw, 4rem); }
.service-jump { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.service-jump a { padding: 0.55rem 0.8rem; border: 1px solid rgba(125, 186, 224, 0.2); border-radius: 999px; background: rgba(13, 37, 59, 0.68); color: #b7cadc; font-size: 0.86rem; transition: 0.2s ease; }
.service-jump a:hover { transform: translateY(-2px); border-color: rgba(72, 215, 235, 0.5); color: #fff; }
.services-page .service-detail {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start; margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: clamp(2rem, 5vw, 4.5rem); border-radius: clamp(1.25rem, 2.4vw, 2rem);
}
.services-page .service-index strong { max-width: 11ch; font-size: clamp(2.3rem, 4.4vw, 4.75rem); line-height: 0.96; }
.services-page .service-content > h2 { max-width: 22ch; margin-bottom: 1rem; }
.services-page .service-content .two-col { gap: 0.8rem; margin-top: 1.6rem; }
.services-page .service-content .card { padding: clamp(1.1rem, 2vw, 1.45rem); border-color: rgba(133, 193, 226, 0.16); box-shadow: none; }
.services-page .service-content .card::before { display: none; }
.solution-lab-section { position: relative; background: radial-gradient(circle at 80% 25%, rgba(42, 190, 224, 0.13), transparent 28rem), linear-gradient(180deg, rgba(6, 18, 31, 0.15), rgba(12, 32, 51, 0.72)); }
.solution-lab-heading { display: grid; gap: 1.25rem 4rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.solution-lab-heading h2 { max-width: 17ch; margin: 0; }
.solution-lab-heading > p { max-width: 55ch; margin: 0; color: #a9bfd2; }
.solution-lab { display: grid; min-width: 0; overflow: hidden; border: 1px solid rgba(121, 198, 233, 0.22); border-radius: clamp(1.35rem, 3vw, 2.2rem); background: linear-gradient(145deg, rgba(16, 42, 66, 0.96), rgba(7, 23, 39, 0.98)); box-shadow: 0 28px 80px rgba(0, 7, 19, 0.3); }
.solution-lab__controls, .solution-lab__visual { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); }
.solution-lab__controls { display: grid; align-content: start; gap: 1.75rem; border-bottom: 1px solid rgba(125, 187, 221, 0.15); }
.lab-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.lab-fieldset legend { margin-bottom: 0.85rem; color: #e9f4fc; font-weight: 750; }
.lab-fieldset legend span { margin-right: 0.45rem; color: #51d9ea; font-size: 0.78rem; }
.lab-product-options, .lab-feature-options { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.lab-product-options button, .lab-feature-options button {
  min-height: 2.75rem; padding: 0.55rem 0.82rem; border: 1px solid rgba(128, 186, 221, 0.22);
  border-radius: 0.75rem; background: rgba(5, 18, 31, 0.62); color: #afc3d5;
  font: inherit; font-size: 0.86rem; cursor: pointer; transition: 0.18s ease;
}
.lab-product-options button:hover, .lab-feature-options button:hover { transform: translateY(-2px); border-color: rgba(72, 217, 237, 0.48); color: #fff; }
.lab-product-options button[aria-pressed="true"], .lab-feature-options button[aria-pressed="true"] { border-color: rgba(81, 222, 239, 0.7); background: linear-gradient(135deg, rgba(48, 111, 231, 0.5), rgba(38, 190, 211, 0.24)); color: #fff; box-shadow: inset 0 0 0 1px rgba(159, 240, 250, 0.08); }
.lab-product-options button[aria-pressed="true"]::before, .lab-feature-options button[aria-pressed="true"]::before { content: "✓"; margin-right: 0.4rem; color: #75eef5; }
.lab-disclaimer, .lab-status { margin: 0; color: #8299ae; font-size: 0.78rem; line-height: 1.6; }
.solution-lab__visual { display: grid; align-content: center; gap: 0.85rem; background: radial-gradient(circle at 50% 30%, rgba(49, 119, 226, 0.15), transparent 25rem); }
.lab-window { overflow: hidden; border: 1px solid rgba(137, 202, 231, 0.18); border-radius: 1.1rem; background: rgba(4, 15, 27, 0.72); }
.lab-window__bar { display: flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; padding: 0 0.9rem; border-bottom: 1px solid rgba(129, 188, 221, 0.14); }
.lab-window__bar > span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #47637a; }
.lab-window__bar small { margin-left: auto; color: #69869e; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; }
.lab-blueprint { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
.lab-core { display: grid; justify-items: center; }
.lab-node { display: grid; justify-items: center; gap: 0.25rem; width: min(100%, 18rem); padding: 1rem; border: 1px solid rgba(102, 191, 231, 0.28); border-radius: 0.95rem; background: linear-gradient(145deg, rgba(22, 58, 87, 0.94), rgba(9, 32, 52, 0.96)); text-align: center; }
.lab-node__type, .lab-node small { color: #75ddeb; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-node strong { color: #f2f8fe; }
.lab-device { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0.3rem; width: 5rem; height: 2.6rem; margin-top: 0.35rem; padding: 0.35rem; border: 1px solid rgba(125, 218, 235, 0.32); border-radius: 0.35rem; }
.lab-device i { display: block; border-radius: 0.18rem; background: rgba(88, 165, 231, 0.3); }
.lab-device i:first-child { grid-row: span 2; }
.lab-blueprint[data-product="mobile"] .lab-device { width: 2.25rem; height: 4rem; grid-template-columns: 1fr; grid-template-rows: 1fr 0.5fr 0.35fr; border-radius: 0.6rem; }
.lab-blueprint[data-product="internal"] .lab-device, .lab-blueprint[data-product="webapp"] .lab-device { width: 5.4rem; grid-template-columns: 0.55fr 1.45fr; }
.lab-connector { position: relative; width: 2px; height: 2.7rem; overflow: hidden; background: rgba(83, 190, 225, 0.25); }
.lab-connector i { position: absolute; inset: 0 0 auto; height: 0.8rem; border-radius: 999px; background: #5ce8f2; box-shadow: 0 0 12px rgba(92, 232, 242, 0.75); animation: lab-flow 1.8s ease-in-out infinite; }
.lab-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1rem; }
.lab-module { display: grid; gap: 0.15rem; min-width: 0; padding: 0.72rem; border: 1px solid rgba(106, 177, 214, 0.2); border-radius: 0.7rem; background: rgba(13, 37, 59, 0.85); }
.lab-module[hidden] { display: none; }
.lab-module.is-entering { animation: lab-module-in 0.38s cubic-bezier(.2,.75,.3,1); }
.lab-module span { color: #65dce9; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.lab-module strong { min-width: 0; color: #dbe9f4; font-size: 0.75rem; overflow-wrap: anywhere; }
@keyframes lab-flow { 0% { opacity: 0; transform: translateY(-0.9rem); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(2.8rem); } }
@keyframes lab-module-in { from { opacity: 0; transform: translateY(0.45rem) scale(0.98); } to { opacity: 1; transform: none; } }
.services-guide .section-heading { align-items: end; }
.decision-list { display: grid; overflow: hidden; border: 1px solid rgba(126, 190, 224, 0.17); border-radius: 1.4rem; background: rgba(11, 31, 50, 0.65); }
.decision-list article { display: grid; grid-template-columns: auto minmax(6rem, 0.5fr) minmax(0, 1.5fr); gap: 1rem; align-items: baseline; padding: clamp(1rem, 2vw, 1.35rem); border-bottom: 1px solid rgba(126, 190, 224, 0.12); }
.decision-list article:last-child { border-bottom: 0; }
.decision-list span { color: #54ddea; font-size: 0.72rem; font-weight: 850; }
.decision-list h3, .decision-list p { margin: 0; }
.decision-list h3 { color: #eef7fe; font-size: 1.05rem; }
.decision-list p { color: #9eb3c6; font-size: 0.93rem; }
.capability-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1rem; margin-top: 1rem; padding: 1.1rem; border: 1px solid rgba(111, 196, 228, 0.16); border-radius: 1rem; background: linear-gradient(90deg, rgba(42, 101, 190, 0.12), rgba(29, 168, 191, 0.1)); }
.capability-rail span { color: #c3d5e5; font-size: 0.84rem; font-weight: 700; }
.capability-rail i { color: #4ed9e8; font-style: normal; }
.services-page > .section { padding-block: clamp(1.75rem, 3vw, 3rem); }
.services-page > .services-proposal-section { padding-bottom: clamp(1.25rem, 2vw, 2rem); }
.services-page > .services-cta-section { padding-top: clamp(1.25rem, 2vw, 2rem); }
.service-journey {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid rgba(124, 196, 226, 0.2);
  border-radius: clamp(1.25rem, 2.5vw, 1.8rem);
  background:
    radial-gradient(circle at 92% 8%, rgba(56, 208, 229, 0.12), transparent 19rem),
    linear-gradient(145deg, rgba(14, 39, 62, 0.9), rgba(7, 25, 42, 0.94));
  box-shadow: 0 24px 70px rgba(0, 8, 20, 0.2);
}
.service-journey__heading { display: grid; gap: 1rem 3rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.service-journey__heading h2 { max-width: 19ch; margin: 0; font-size: clamp(1.9rem, 3vw, 3.25rem); }
.service-journey__heading > p { max-width: 58ch; margin: 0; color: #a9bdcf; }
.service-journey__steps { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.service-journey__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(123, 190, 222, 0.17);
  border-radius: 1rem;
  background: rgba(7, 26, 44, 0.76);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.service-journey__steps li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3.7rem;
  bottom: -0.9rem;
  left: 2.32rem;
  width: 1px;
  background: linear-gradient(rgba(70, 218, 234, 0.72), rgba(61, 125, 255, 0.3));
}
.service-journey__steps li:last-child::after { display: none; }
.service-journey__steps li:hover { transform: translateY(-0.2rem); border-color: rgba(83, 218, 235, 0.34); background: rgba(12, 37, 59, 0.9); }
.service-journey__number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid rgba(84, 221, 235, 0.42);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(48, 116, 220, 0.32), rgba(35, 189, 208, 0.18));
  color: #72e6ef;
  font-size: 0.72rem;
  font-weight: 850;
  box-shadow: 0 0 0 0.35rem rgba(48, 184, 209, 0.05);
}
.service-journey__steps li > div { position: relative; z-index: 1; min-width: 0; }
.service-journey__steps h3 { margin: 0 0 0.35rem; color: #f2f8fd; font-size: clamp(1.05rem, 1.3vw, 1.3rem); }
.service-journey__steps p { margin: 0; color: #9fb4c7; font-size: clamp(0.88rem, 0.2vw + 0.84rem, 0.97rem); line-height: 1.5; }
@media (min-width: 48rem) {
  .services-intro, .solution-lab-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lab-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-journey__heading { grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr); align-items: end; }
}
@media (min-width: 64rem) {
  .services-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(26rem, 0.92fr); }
  .solution-lab { grid-template-columns: minmax(19rem, 0.82fr) minmax(0, 1.18fr); }
  .solution-lab__controls { border-right: 1px solid rgba(125, 187, 221, 0.15); border-bottom: 0; }
  .services-page #webapplicaties .service-index, .services-page #maatwerk .service-index, .services-page #web-applications .service-index, .services-page #custom-software .service-index { order: 2; }
  .services-page #webapplicaties .service-content, .services-page #maatwerk .service-content, .services-page #web-applications .service-content, .services-page #custom-software .service-content { order: 1; }
  .service-journey__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.5rem; }
  .service-journey__steps li { display: block; min-height: 11.75rem; padding: 1.1rem; }
  .service-journey__number { margin-bottom: 0.85rem; }
  .service-journey__steps li::after { top: 2.42rem; right: -1.25rem; bottom: auto; left: auto; width: 1rem; height: 2px; background: linear-gradient(90deg, rgba(70, 218, 234, 0.72), rgba(61, 125, 255, 0.38)); }
  .service-journey__steps li:nth-child(4)::after { top: calc(100% + 0.25rem); right: auto; left: 2.42rem; width: 2px; height: 2.5rem; background: linear-gradient(rgba(70, 218, 234, 0.72), rgba(61, 125, 255, 0.38)); }
  .service-journey__steps li:nth-child(5) { grid-column: 4; grid-row: 2; }
  .service-journey__steps li:nth-child(6) { grid-column: 3; grid-row: 2; }
  .service-journey__steps li:nth-child(7) { grid-column: 2; grid-row: 2; }
  .service-journey__steps li:nth-child(8) { grid-column: 1; grid-row: 2; }
  .service-journey__steps li:nth-child(5)::after,
  .service-journey__steps li:nth-child(6)::after,
  .service-journey__steps li:nth-child(7)::after { right: auto; left: -1.25rem; background: linear-gradient(90deg, rgba(61, 125, 255, 0.38), rgba(70, 218, 234, 0.72)); }
}
@media (max-width: 63.99rem) {
  .services-page .service-detail { grid-template-columns: 1fr; }
  .services-page .service-index strong { max-width: 16ch; }
}
@media (max-width: 39.99rem) {
  .services-hero__map { grid-template-columns: 1fr; }
  .hero-map__line { width: 1px; height: 1rem; margin-left: 1rem; }
  .hero-map__step { padding: 0.55rem 0.75rem; }
  .services-page .service-detail { padding: 1.35rem; }
  .lab-product-options button, .lab-feature-options button { flex: 1 1 calc(50% - 0.55rem); }
  .decision-list article { grid-template-columns: auto 1fr; }
  .decision-list article p { grid-column: 2; }
  .capability-rail i { display: none; }
  .capability-rail span { flex: 1 1 40%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-connector i { animation: none; opacity: 1; transform: none; }
  .lab-module.is-entering { animation: none; }
  .service-journey__steps li { transition: none; }
  .service-journey__steps li:hover { transform: none; }
}

/* Services: compact split explorer */
.service-explorer {
  display: grid;
  min-width: 0;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid rgba(128, 197, 229, 0.2);
  border-radius: clamp(1.4rem, 3vw, 2.1rem);
  background: linear-gradient(145deg, rgba(14, 39, 62, 0.98), rgba(6, 22, 37, 0.98));
  box-shadow: 0 28px 80px rgba(0, 7, 18, 0.24);
}
.service-explorer__tabs {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  border-bottom: 1px solid rgba(125, 190, 222, 0.16);
  background: rgba(4, 17, 29, 0.44);
}
.service-explorer__tabs button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.05rem 0.7rem;
  width: 100%;
  min-height: 4.3rem;
  padding: 0.75rem 0.85rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  background: transparent;
  color: #b5c9da;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.service-explorer__tabs button:hover {
  transform: translateX(0.2rem);
  background: rgba(24, 60, 88, 0.48);
  color: #fff;
}
.service-explorer__tabs button[aria-selected="true"] {
  border-color: rgba(84, 220, 237, 0.34);
  background: linear-gradient(135deg, rgba(48, 108, 222, 0.34), rgba(31, 170, 194, 0.14));
  color: #fff;
  box-shadow: inset 3px 0 #50dce9;
}
.service-explorer__tabs button > span {
  grid-row: span 2;
  padding-top: 0.1rem;
  color: #56ddea;
  font-size: 0.68rem;
  font-weight: 850;
}
.service-explorer__tabs button > small {
  min-width: 0;
  color: #7890a6;
  font-size: 0.7rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.service-explorer__panels { min-width: 0; }
.service-explorer .service-explorer__panel {
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: 0;
  margin: 0;
  padding: clamp(1.3rem, 4vw, 3.5rem);
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 15% 25%, rgba(50, 151, 221, 0.14), transparent 20rem);
  box-shadow: none;
}
.service-explorer .service-explorer__panel[hidden] { display: none; }
.service-explorer__panel.is-entering { animation: service-panel-in 0.36s cubic-bezier(.2,.75,.3,1); }
.service-explorer .service-index {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 18rem;
  padding: clamp(1.15rem, 3vw, 1.8rem);
  overflow: hidden;
  border: 1px solid rgba(120, 202, 232, 0.2);
  border-radius: 1.2rem;
  background: linear-gradient(155deg, rgba(24, 65, 97, 0.95), rgba(8, 29, 48, 0.98));
}
.service-explorer .service-index::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.36;
  background-image: linear-gradient(rgba(116, 194, 226, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 194, 226, 0.11) 1px, transparent 1px);
  background-size: 2rem 2rem;
}
.service-explorer .service-index::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  right: 10%;
  width: 68%;
  aspect-ratio: 1.5;
  border: 1px solid rgba(111, 225, 238, 0.4);
  border-radius: 0.75rem;
  background: linear-gradient(90deg, rgba(75, 152, 231, 0.38) 22%, transparent 22%), linear-gradient(rgba(91, 217, 231, 0.28) 24%, transparent 24%), rgba(7, 25, 42, 0.78);
  box-shadow: -1.1rem 1.1rem 0 -0.35rem rgba(48, 105, 198, 0.2), 0 18px 45px rgba(0, 10, 24, 0.28);
}
.service-explorer #webapplicaties .service-index::after,
.service-explorer #web-applications .service-index::after { aspect-ratio: 1.25; background: radial-gradient(circle at 72% 30%, rgba(76, 221, 232, 0.55) 0 8%, transparent 9%), linear-gradient(90deg, rgba(75, 152, 231, 0.3) 28%, transparent 28%), rgba(7, 25, 42, 0.8); }
.service-explorer #mobiele-apps .service-index::after,
.service-explorer #mobile-apps .service-index::after { right: 28%; width: 38%; aspect-ratio: 0.58; border-radius: 1rem; background: linear-gradient(rgba(84, 218, 231, 0.4) 18%, transparent 18% 78%, rgba(74, 135, 226, 0.3) 78%), rgba(7, 25, 42, 0.82); }
.service-explorer #maatwerk .service-index::after,
.service-explorer #custom-software .service-index::after { border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(84, 218, 231, 0.48) 0 13%, transparent 14% 30%, rgba(70, 131, 228, 0.32) 31% 38%, transparent 39%), rgba(7, 25, 42, 0.7); }
.service-explorer #onderhoud .service-index::after,
.service-explorer #maintenance .service-index::after { transform: rotate(-6deg); background: linear-gradient(135deg, rgba(71, 144, 229, 0.35) 0 33%, transparent 33% 66%, rgba(80, 219, 231, 0.32) 66%), rgba(7, 25, 42, 0.8); }
.service-explorer .service-index span { margin-bottom: 0.45rem; }
.service-explorer .service-index strong { max-width: 12ch; font-size: clamp(1.75rem, 3vw, 3.1rem); line-height: 1; }
.service-explorer .service-content { align-self: center; min-width: 0; max-width: none; }
.service-explorer .service-content > h2 { max-width: 20ch; font-size: clamp(1.65rem, 2.7vw, 2.8rem); }
.service-explorer .service-content > p { max-width: 58ch; }
.service-explorer .service-content .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.service-explorer .service-content .card { min-width: 0; min-height: 0; overflow: visible; padding: 1.2rem 1.1rem; background: rgba(6, 22, 37, 0.48); }
.service-explorer .service-content .detail-list li { padding-left: 1.35rem; word-break: normal; overflow-wrap: normal; hyphens: none; }
@keyframes service-panel-in { from { opacity: 0; transform: translateY(0.45rem); } to { opacity: 1; transform: none; } }
@media (min-width: 80rem) {
  .service-explorer { grid-template-columns: minmax(13rem, 0.24fr) minmax(0, 1fr); }
  .service-explorer__tabs { border-right: 1px solid rgba(125, 190, 222, 0.16); border-bottom: 0; }
  .service-explorer #webapplicaties,
  .service-explorer #web-applications,
  .service-explorer #maatwerk,
  .service-explorer #custom-software {
    grid-template-columns: minmax(36rem, 1.3fr) minmax(16rem, 0.7fr);
    gap: clamp(1.5rem, 2vw, 2rem);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
  }
}
@media (max-width: 79.99rem) {
  .service-explorer { grid-template-columns: 1fr; }
  .service-explorer .service-explorer__panel { grid-template-columns: 1fr; min-height: 0; }
  .service-explorer .service-content .two-col { grid-template-columns: 1fr; }
  .service-explorer__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-explorer__tabs button:last-child { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .service-explorer__tabs { grid-template-columns: 1fr; }
  .service-explorer__tabs button:last-child { grid-column: auto; }
  .service-explorer .service-explorer__panel { grid-template-columns: 1fr; }
  .service-explorer .service-index { min-height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .service-explorer__panel.is-entering { animation: none; }
  .service-explorer__tabs button { transition: none; }
}

/* Final visual polish: clearer navigation and service illustrations */
.site-header {
  border-bottom: 1px solid rgba(128, 196, 226, 0.16);
  background: linear-gradient(135deg, rgba(18, 39, 63, 0.98), rgba(12, 29, 48, 0.98));
  backdrop-filter: blur(16px);
}
.site-header.scrolled,
.site-header.menu-open {
  background: linear-gradient(135deg, rgba(16, 36, 59, 0.99), rgba(10, 27, 45, 0.99));
  border-color: rgba(128, 196, 226, 0.18);
  box-shadow: 0 10px 34px rgba(0, 7, 18, 0.16);
}
.brand {
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}
.brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(68, 151, 211, 0.2), rgba(42, 101, 165, 0.08) 48%, transparent 74%);
  filter: blur(6px);
  pointer-events: none;
}
.brand img {
  filter: brightness(1.2) saturate(1.1) drop-shadow(0 1px 2px rgba(0, 7, 18, 0.48)) drop-shadow(0 0 8px rgba(74, 196, 235, 0.24));
}
.service-explorer #webapplicaties .service-index::before,
.service-explorer #web-applications .service-index::before,
.service-explorer #webapplicaties .service-index::after,
.service-explorer #web-applications .service-index::after,
.service-explorer #maatwerk .service-index::before,
.service-explorer #custom-software .service-index::before,
.service-explorer #maatwerk .service-index::after,
.service-explorer #custom-software .service-index::after { display: none; }
.service-visual {
  position: absolute;
  z-index: -1;
  inset: 1rem 1rem auto;
  height: 10.5rem;
  pointer-events: none;
}
.webapp-mockup {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(136, 226, 240, 0.5);
  border-radius: 0.8rem;
  background: #071b2d;
  box-shadow: 0 18px 38px rgba(0, 8, 21, 0.42), 0 0 30px rgba(44, 187, 218, 0.12);
  transform: perspective(28rem) rotateX(1deg) rotateY(-2deg);
}
.webapp-mockup__bar {
  display: flex;
  align-items: center;
  gap: 0.26rem;
  height: 1.2rem;
  padding-inline: 0.5rem;
  border-bottom: 1px solid rgba(117, 203, 231, 0.18);
  background: #102f4a;
}
.webapp-mockup__bar i {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #4fcfe0;
  opacity: 0.72;
}
.webapp-mockup__bar span {
  width: 36%;
  height: 0.25rem;
  margin-left: auto;
  border-radius: 1rem;
  background: rgba(143, 191, 222, 0.18);
}
.webapp-mockup__body { display: grid; grid-template-columns: 18% minmax(0, 1fr); height: calc(100% - 1.2rem); }
.webapp-mockup__sidebar {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.75rem 0.45rem;
  border-right: 1px solid rgba(104, 186, 220, 0.16);
  background: linear-gradient(180deg, #123958, #0b2a45);
}
.webapp-mockup__sidebar i { height: 0.28rem; border-radius: 1rem; background: rgba(150, 206, 232, 0.22); }
.webapp-mockup__sidebar i:first-child { width: 72%; background: #47cddd; box-shadow: 0 0 9px rgba(71, 205, 221, 0.35); }
.webapp-mockup__main { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.45rem; min-width: 0; padding: 0.55rem; }
.webapp-mockup__top { display: flex; align-items: center; justify-content: space-between; }
.webapp-mockup__top i { width: 34%; height: 0.32rem; border-radius: 1rem; background: rgba(192, 226, 240, 0.42); }
.webapp-mockup__top span { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: linear-gradient(145deg, #4388e7, #4ad7df); }
.webapp-mockup__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.webapp-mockup__metrics i { height: 1.25rem; border: 1px solid rgba(96, 171, 213, 0.18); border-radius: 0.3rem; background: linear-gradient(145deg, rgba(44, 105, 172, 0.46), rgba(22, 67, 108, 0.44)); }
.webapp-mockup__metrics i:nth-child(2) { background: linear-gradient(145deg, rgba(34, 164, 187, 0.4), rgba(22, 67, 108, 0.44)); }
.webapp-mockup__workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 0.35rem; min-height: 0; }
.webapp-chart, .webapp-activity { min-height: 0; padding: 0.35rem; border: 1px solid rgba(96, 171, 213, 0.16); border-radius: 0.35rem; background: rgba(12, 45, 72, 0.64); }
.webapp-chart { display: flex; align-items: end; gap: 0.22rem; }
.webapp-chart i { flex: 1; height: 35%; border-radius: 0.15rem 0.15rem 0 0; background: linear-gradient(#57dbe4, #337ddd); }
.webapp-chart i:nth-child(2) { height: 58%; }
.webapp-chart i:nth-child(3) { height: 44%; }
.webapp-chart i:nth-child(4) { height: 78%; }
.webapp-chart i:nth-child(5) { height: 64%; }
.webapp-activity { display: grid; align-content: center; gap: 0.38rem; }
.webapp-activity i { height: 0.25rem; border-radius: 1rem; background: rgba(139, 196, 222, 0.25); }
.webapp-activity i:nth-child(2) { width: 70%; background: rgba(72, 208, 222, 0.44); }
.webapp-mockup__table { display: grid; gap: 0.2rem; }
.webapp-mockup__table i { height: 0.24rem; border-radius: 1rem; background: linear-gradient(90deg, rgba(78, 143, 203, 0.32) 26%, rgba(139, 191, 218, 0.16) 26%); }
.architecture-map { position: relative; width: 100%; height: 100%; }
.architecture-line { position: absolute; z-index: 0; display: block; background: linear-gradient(90deg, transparent, rgba(74, 220, 232, 0.75), transparent); box-shadow: 0 0 10px rgba(62, 203, 223, 0.25); }
.architecture-line--horizontal { top: 50%; left: 12%; width: 76%; height: 1px; }
.architecture-line--vertical { top: 8%; left: 50%; width: 1px; height: 84%; background: linear-gradient(transparent, rgba(74, 220, 232, 0.75), transparent); }
.architecture-node {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 0.28rem;
  width: 4.25rem;
  height: 2.65rem;
  padding: 0.45rem;
  border: 1px solid rgba(126, 218, 237, 0.42);
  border-radius: 0.55rem;
  background: linear-gradient(145deg, #174b70, #0b2c49);
  box-shadow: 0 9px 24px rgba(0, 8, 21, 0.38), inset 0 1px rgba(255, 255, 255, 0.04);
}
.architecture-node small { color: #8eecf2; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.13em; }
.architecture-node i { display: block; width: 68%; height: 0.22rem; border-radius: 1rem; background: rgba(159, 207, 229, 0.23); }
.architecture-node--ui { top: 0; left: 50%; transform: translateX(-50%); }
.architecture-node--api { top: 50%; left: 0; transform: translateY(-50%); }
.architecture-node--logic { top: 50%; left: 50%; width: 5rem; height: 3.1rem; transform: translate(-50%, -50%); border-color: rgba(100, 229, 238, 0.72); background: linear-gradient(145deg, #225f87, #104163); box-shadow: 0 0 24px rgba(65, 211, 227, 0.18), 0 10px 25px rgba(0, 8, 21, 0.4); }
.architecture-node--flow { top: 50%; right: 0; transform: translateY(-50%); }
.architecture-node--data { bottom: 0; left: 50%; transform: translateX(-50%); }
.architecture-point { position: absolute; z-index: 1; width: 0.42rem; height: 0.42rem; border: 1px solid #82edf3; border-radius: 50%; background: #1b5878; box-shadow: 0 0 10px rgba(77, 225, 236, 0.7); }
.architecture-point--top { top: 28%; left: 50%; transform: translateX(-50%); }
.architecture-point--left { top: 50%; left: 25%; transform: translateY(-50%); }
.architecture-point--right { top: 50%; right: 25%; transform: translateY(-50%); }
.architecture-point--bottom { bottom: 28%; left: 50%; transform: translateX(-50%); }
@media (max-width: 47.99rem) {
  .service-visual { inset: 0.7rem 0.7rem auto; height: 7.4rem; }
  .webapp-mockup__main { gap: 0.25rem; padding: 0.35rem; }
  .webapp-mockup__metrics, .webapp-mockup__workspace { gap: 0.22rem; }
  .architecture-node { width: 3.25rem; height: 2rem; padding: 0.3rem; }
  .architecture-node--logic { width: 4rem; height: 2.4rem; }
  .architecture-node small { font-size: 0.42rem; }
}
@media (max-width: 63.99rem) {
  .main-nav {
    background: linear-gradient(145deg, rgba(18, 39, 63, 0.995), rgba(12, 29, 48, 0.995));
    border-color: rgba(128, 196, 226, 0.2);
  }
}