/* ============================================================
   Solutions index — scoped to .soln-page so it cannot leak into
   the theme. Colours and type are the Figma variables.
   ============================================================ */
.soln-page {
  --soln-bg: #0d1015;            /* Background/Base     */
  --soln-surface: #1a1f28;       /* Background/Surface  */
  --soln-elevated: #242b36;      /* Background/Elevated */
  --soln-cyan: #3567db;          /* Brand/Cyan          */
  --soln-cyan-soft: #7396e6;
  --soln-text: #f4f7fa;          /* Text/Primary        */
  --soln-text-2: #a7b1bf;        /* Text/Secondary      */
  --soln-muted: #697585;         /* Text/Muted          */
  --soln-border: #2a313c;        /* Border/Subtle       */
  --soln-border-strong: #3c4553; /* Border/Strong       */
  /* This page is set entirely in Inter — no display face. */
  --soln-body: 'Inter', system-ui, -apple-system, sans-serif;
  /* Content is capped at 1320px (incl. 24px gutters), matching the footer. */
  --soln-content: 1320px;
  background: var(--soln-bg);
  color: var(--soln-text);
  font-family: var(--soln-body);
  overflow-x: clip;
}
.soln-page *,
.soln-page *::before,
.soln-page *::after { box-sizing: border-box; }
.soln-page p { margin: 0; }
.soln-page h1, .soln-page h2, .soln-page h3 { margin: 0; font-weight: 600; }
/* Centred flex children size to max-content, which pushes long headings past
   narrow viewports. Zero specificity, so any class rule still wins. */
.soln-page :where(h1, h2, h3, p, div, a, img, svg) { max-width: 100%; }
.soln-wrap {
  width: 100%;
  max-width: var(--soln-content);
  margin-inline: auto;
  padding-inline: 24px;
}
/* ============================ HERO ============================
   A 1188 x 684.155 decorative stage (glows, brick grid, connector
   lines, integration tiles) with the copy card layered over it. */
.soln-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 876px;                 /* the design frame's height */
  padding-block: 60px;
  overflow: clip;
  background: var(--soln-bg);
}
.soln-hero__bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.soln-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1188px;
  aspect-ratio: 1188 / 684.155;
}
/* Two wide cyan glows, 6–7% opacity behind a 70px blur. */
.soln-glow {
  position: absolute;
  border-radius: 50%;
  background: var(--soln-cyan);
  filter: blur(70px);
}
.soln-glow--a { left: 42.837%; top: 1.3155%;  width: 54.7138%; height: 76.0058%; opacity: .07; }
.soln-glow--b { left: 10.8165%; top: 11.7779%; width: 52.1886%; height: 76.0058%; opacity: .06; }
/* 88px bricks, 6px radius. Positions come from $soln_bricks. */
.soln-brick {
  position: absolute;
  width: 7.4074%;                    /* 88 / 1188 */
  aspect-ratio: 1;
  border-radius: 6px;
}
.soln-brick--grad-a { background-image: linear-gradient(52.13deg, rgba(53,103,219,.043) 5.15%, rgba(17,23,30,.283) 101.01%); }
.soln-brick--grad-b { background-image: linear-gradient(138.18deg, rgba(53,103,219,.043) 2.14%, rgba(17,23,30,.283) 97.18%); }
/* ---------- Capability constellation ----------
   .soln-orbit fills the hero behind the card. The canvas draws three tilted
   orbits and the data beams; each .soln-node is placed by solutions.js from its
   ring + angle, with --depth (0 back .. 1 front) driving scale, blur and glow. */
.soln-orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.soln-orbit__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.soln-node {
  --depth: 1;
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -50%) scale(calc(.72 + var(--depth) * .38));
  opacity: calc(.38 + var(--depth) * .62);
  filter: blur(calc((1 - var(--depth)) * 1.2px));
  will-change: transform, opacity;
}
.soln-node__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: #dfe7ff;
  background: linear-gradient(150deg, rgba(53, 103, 219, .35), rgba(66, 52, 219, .18) 60%, rgba(13, 16, 21, .6));
  border: 1px solid rgba(131, 162, 233, .35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .03) inset,
    0 10px 24px rgba(0, 0, 0, .45),
    0 0 calc(var(--depth) * 26px) rgba(53, 103, 219, calc(var(--depth) * .55 + var(--ping, 0) * .45));
  backdrop-filter: blur(6px);
  transition: box-shadow .4s var(--ease-out, ease);
}
.soln-node__icon svg { width: 24px; height: 24px; }
.soln-node__label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: rgba(214, 224, 242, calc(.35 + var(--depth) * .55));
}
.soln-hero__card { position: relative; z-index: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.soln-hero__card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(131, 162, 233, calc(.08 + var(--charge, 0) * .45)), 0 0 calc(20px + var(--charge, 0) * 50px) rgba(53, 103, 219, calc(var(--charge, 0) * .45));
}
/* ---------- Hero copy card ----------
   The fill is the design's vertical gradient: transparent at both ends,
   solid slate across the middle. */
.soln-hero__inner { position: relative; display: grid; place-items: center; }
.soln-hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 540px;
  padding: 45px 44px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(58,69,89,0) 0%, #3a4559 46.154%, rgba(58,69,89,0) 100%);
  text-align: center;
}
.soln-hero__title {
  font-size: clamp(30px, 2.19vw, 42px);
  line-height: 1.143;
  letter-spacing: -0.01em;
  color: var(--soln-text);
}
.soln-hero__title span { color: var(--soln-cyan-soft); }
/* The design lets this line run 28px wider than the card's padding box, which
   is what keeps it to two lines. */
.soln-hero__sub {
  width: 480px;
  max-width: calc(100% + 28px);
  margin-inline: -14px;
  font-size: 16px;
  line-height: 24px;
  color: var(--soln-text-2);
}
/* =========================== CARDS ============================ */
.soln-cards { padding-bottom: clamp(72px, 5.7vw, 110px); }
.soln-cards__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.soln-card {
  display: flex;
  flex-direction: column;
  min-height: 470px;
  border: 1px solid var(--soln-border);
  border-radius: 20px;
  background: var(--soln-surface);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease;
}
/* No lift on hover — the glow tracking the pointer is the whole effect. */
.soln-card:hover,
.soln-card:focus-visible { border-color: var(--soln-border-strong); }
/* Artwork band. Its contents are positioned against the design's
   774.87 x 210 box, so they scale with the card. */
.soln-card__band {
  container-type: inline-size;
  position: relative;
  flex: none;
  height: 210px;
  background: var(--soln-bg);
  overflow: hidden;
}
/* The resting position is the design's. On hover the script slides this toward
   the pointer, transform-only so it never costs a layout. */
.soln-card__glow {
  position: absolute;
  left: 9.034%;
  top: 4.762%;
  width: 54.203%;
  aspect-ratio: 420 / 300;
  border-radius: 50%;
  background: var(--soln-cyan);
  opacity: .10;
  filter: blur(45px);
  will-change: transform, opacity;
}
/* Voice mark: a thin ring, a filled disc and the five-bar waveform. */
.soln-mark {
  position: absolute;
  left: 11.615%;
  top: 33.072%;
  width: 9.176%;                     /* 71.098 / 774.87 */
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.2px solid rgba(53, 103, 219, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.soln-mark__disc {
  width: 70%;                        /* 49.768 / 71.098 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--soln-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.soln-mark__disc svg { width: 47.6%; height: 45.2%; display: block; }
/* ERP mark: the four-square grid. */
.soln-grid4 {
  position: absolute;
  left: 12.260%;
  top: 31.079%;
  width: 9.481%;                     /* 73.468 / 774.87 */
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.23%;
}
.soln-grid4 i {
  display: block;
  border-radius: 19.4%;
  border: 0.6px solid var(--soln-border-strong);
  background: var(--soln-elevated);
}
.soln-grid4 i:first-child { background: var(--soln-cyan); border-color: transparent; }
.soln-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  padding: 34px 40px 36px;
}
.soln-card__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8a95a5;
  text-transform: uppercase;
}
.soln-card__title {
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.214;
  letter-spacing: -0.005em;
  color: var(--soln-text);
}
.soln-card__text { font-size: 16px; line-height: 26px; color: var(--soln-text-2); }
.soln-card__spacer { flex: 1 1 auto; min-height: 8px; }
.soln-card__link { font-size: 15px; font-weight: 500; color: #8fb0f0; }
.soln-card:hover .soln-card__link { color: #b9cdf6; }
/* ========================== WHY DESMOK ========================== */
.soln-why { padding-block: clamp(72px, 5.7vw, 110px); }
.soln-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 872fr);
  gap: clamp(40px, 4.7vw, 90px);
  align-items: stretch;
}
.soln-why__left { display: flex; flex-direction: column; gap: 40px; }
.soln-why__head { display: flex; flex-direction: column; gap: 16px; }
.soln-why__title {
  font-size: clamp(30px, 2.29vw, 44px);
  line-height: 1.136;
  letter-spacing: -0.015em;
  text-wrap: balance;   /* the 1320px cap is narrower than the 1582px mock, so
                           this heading wraps — balance it instead of orphaning */
  color: var(--soln-text);
}
.soln-why__sub { font-size: 17px; line-height: 26px; color: var(--soln-text-2); }
.soln-why__media {
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
}
.soln-why__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Accordion ---------- */
.soln-acc { display: flex; flex-direction: column; }
.soln-acc__item { border-bottom: 1px solid var(--soln-border); }
.soln-acc__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  color: var(--soln-text);
  cursor: pointer;
}
/* The icons draw themselves in currentColor, so the open row's icon picks up the
   brand cyan and the closed ones stay in the title's own colour. */
.soln-acc__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
  color: var(--soln-text);
  transition: color .2s ease;
}
.soln-acc__btn[aria-expanded="true"] .soln-acc__icon { color: var(--soln-cyan); }
.soln-acc__gap { flex: 1 1 auto; }
.soln-acc__chev {
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
  transition: transform .2s ease;
}
.soln-acc__btn[aria-expanded="true"] .soln-acc__chev { transform: rotate(180deg); }
/* Every answer reserves the same height, so opening a different one never
   shifts the photo beside it or the page below. The script raises this to the
   tallest answer at the current width; the floor here covers the no-JS case
   and is three lines plus the bottom padding. */
.soln-acc__panel { padding: 0 0 22px; min-height: 91px; }
.soln-acc__panel[hidden] { display: none; }
/* The open row's title sits 14px above its body, per the design. */
.soln-acc__btn[aria-expanded="true"] { padding-bottom: 14px; }
.soln-acc__panel p { font-size: 15px; line-height: 23px; color: var(--soln-text-2); }
.soln-acc__panel a { color: #8fb0f0; text-decoration: underline; text-underline-offset: 3px; }
.soln-hero__actions, .soln-why__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.soln-why__actions { justify-content: flex-start; }
.theme-light .soln-acc__panel a { color: var(--accent); }
/* ========================= Responsive ========================= */
@media (max-width: 1199px) {
  .soln-hero { min-height: 700px; }
}
@media (max-width: 767px) {
  .soln-node__icon { width: 40px; height: 40px; border-radius: 12px; }
  .soln-node__icon svg { width: 19px; height: 19px; }
  .soln-node__label { display: none; }
}
@media (max-width: 991px) {
  .soln-cards__row { grid-template-columns: minmax(0, 1fr); }
  .soln-card { min-height: 0; }
  .soln-why__grid { grid-template-columns: minmax(0, 1fr); }
  .soln-why__media { min-height: 280px; aspect-ratio: 872 / 563; }
}
@media (max-width: 767px) {
  .soln-hero { min-height: 620px; padding-block: 48px; }
  /* The brick grid turns to noise at this size; the glows carry it alone. */
  .soln-brick { display: none; }
  .soln-hero__card { width: 100%; padding: 36px 24px; border-radius: 18px; }
  .soln-hero__sub { width: 100%; max-width: 100%; margin-inline: 0; }
  .soln-card__band { height: 170px; }
  .soln-card__body { padding: 26px 24px 30px; }
  .soln-acc__btn { font-size: 17px; }
}
/* Phones in landscape: the hero shrinks to its copy card. */
@media (max-height: 500px) and (orientation: landscape) {
  .soln-hero { min-height: 0; padding-block: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .soln-page *,
  .soln-page *::before,
  .soln-page *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

.soln-cards__head { margin-bottom: clamp(24px, 2.5vw, 40px); }
.soln-cards__label { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #5b87e3; }
.soln-cards__heading { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; color: #fff; }
.soln-mark__disc svg { width: 50%; height: 50%; }
@media (max-width: 1199px) and (min-width: 992px) { .soln-card__title { font-size: 22px; } }

/* ===== LIGHT THEME (.theme-light) =====
   Light page body and a light orbit hero; the cards' artwork bands keep the
   original dark tokens so their glows and marks read as designed. */
.theme-light .soln-page {
  --soln-bg: #f5f7fb;
  --soln-surface: #ffffff;
  --soln-elevated: #eef2f8;
  --soln-cyan-soft: #2559d2;
  --soln-text: #0e1525;
  --soln-text-2: #5b6577;
  --soln-muted: #8a93a3;
  --soln-border: #e1e6ef;
  --soln-border-strong: #c9d2e1;
}
/* Dark islands: card bands restore the original palette. */
.theme-light .soln-page .soln-card__band {
  --soln-bg: #0d1015;
  --soln-surface: #1a1f28;
  --soln-elevated: #242b36;
  --soln-cyan-soft: #7396e6;
  --soln-text: #f4f7fa;
  --soln-text-2: #a7b1bf;
  --soln-muted: #697585;
  --soln-border: #2a313c;
  --soln-border-strong: #3c4553;
  background: var(--soln-bg);
}
/* Orbit hero: light stage, pale brick grid, white tiles, light copy card. */
.theme-light .soln-hero {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #ffffff 0%, #f5f7fb 55%, #eef2fa 100%);
}
.theme-light .soln-hero__title { color: #0e1525; }
.theme-light .soln-hero__sub { color: #2b3445; }
.theme-light .soln-glow--a { opacity: .10; }
.theme-light .soln-glow--b { opacity: .08; }
.theme-light .soln-brick--grad-a { background-image: linear-gradient(52.13deg, rgba(53,103,219,.05) 5.15%, rgba(53,103,219,.14) 101.01%); }
.theme-light .soln-brick--grad-b { background-image: linear-gradient(138.18deg, rgba(53,103,219,.05) 2.14%, rgba(53,103,219,.14) 97.18%); }
/* Solid bricks carry inline dark fills; override them with pale tiles. */
.theme-light .soln-brick:not(.soln-brick--grad-a):not(.soln-brick--grad-b) {
  background-color: rgba(53, 103, 219, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(53, 103, 219, .10);
}
.theme-light .soln-node__icon {
  color: #3567db;
  background: #ffffff;
  border-color: rgba(53, 103, 219, .28);
  box-shadow:
    0 8px 20px rgba(14, 21, 37, .10),
    0 0 calc(var(--depth) * 22px) rgba(53, 103, 219, calc(var(--depth) * .25 + var(--ping, 0) * .4));
}
.theme-light .soln-node__label { color: rgba(43, 52, 69, calc(.4 + var(--depth) * .55)); }
.theme-light .soln-hero__card {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 46.154%, rgba(255,255,255,0) 100%);
}
.theme-light .soln-hero__card::after {
  box-shadow: 0 0 0 1px rgba(53, 103, 219, calc(.10 + var(--charge, 0) * .4)), 0 0 calc(20px + var(--charge, 0) * 50px) rgba(53, 103, 219, calc(var(--charge, 0) * .3));
}
/* Core offers: white cards with a dark header band. */
.theme-light .soln-cards { padding-top: clamp(72px, 5.7vw, 110px); }
.theme-light .soln-cards__heading { color: var(--soln-text); }
.theme-light .soln-card {
  box-shadow: 0 10px 30px -12px rgba(14, 21, 37, .12);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.theme-light .soln-card:hover,
.theme-light .soln-card:focus-visible {
  border-color: rgba(53, 103, 219, .45);
  box-shadow: 0 16px 40px -14px rgba(14, 21, 37, .2);
}
.theme-light .soln-card__eyebrow { color: var(--soln-cyan); }
/* Pick the shape that fits: white band, light accordion. */
.theme-light .soln-why { background: #fff; border-top: 1px solid var(--soln-border); }
.theme-light .soln-acc__chev path { stroke: #8a93a3; }
.theme-light .soln-why__media { box-shadow: 0 18px 40px -18px rgba(14, 21, 37, .28); }