:root {
  --bg: #081731;
  --ink: #e8efff;
  --muted: #9aaed2;
  --line: #27426b99;
  --card: #0f2244c7;
  --brand: #6f7cff;
  --brand-strong: #8f9dff;
  --shadow: 0 22px 60px #010a18a3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 10%, #142f5d 0%, #0b2146 28%, #081731 62%, #061227 100%);
  overflow-x: hidden;
}

.grid-overlay {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.38;
  pointer-events: none;
  z-index: -1;
}

.ambient-lights {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.light {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  opacity: 0.3;
  background: radial-gradient(circle, #6f8fff, #6f8fff00 72%);
  animation: drift 18s ease-in-out infinite alternate;
}

.light.l1 {
  width: 360px;
  height: 360px;
  top: -100px;
  left: -90px;
}

.light.l2 {
  width: 420px;
  height: 420px;
  top: 30%;
  right: -150px;
  animation-duration: 24s;
}

.light.l3 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: 35%;
  animation-duration: 20s;
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(26px, -22px, 0) scale(1.08);
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  background: #091b37c9;
}

.brand {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f3f7ff;
  text-decoration: none;
}

.topbar nav {
  display: flex;
  gap: 18px;
}

.main-nav {
  align-items: center;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.topbar nav a:hover {
  color: #d3dcff;
}

.topbar nav a.is-active {
  color: #e5ebff;
}

.topbar nav a.coming-soon {
  color: #687da3;
  cursor: not-allowed;
  pointer-events: none;
}

.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid #496693;
  border-radius: 10px;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: #d9e4ff;
}

.mobile-menu {
  display: none;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 170px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #355485;
  border-radius: 10px;
  background: #0d2144f0;
  box-shadow: 0 18px 36px #020a18bf;
  margin-top: 0;
  z-index: 90;
}

.submenu a {
  color: #adc0e3;
  white-space: nowrap;
}

.submenu a.is-active {
  color: #edf1ff;
}

.nav-dropdown:hover .submenu,
.nav-dropdown:focus-within .submenu {
  display: flex;
}

.hero.hero-simple {
  max-width: 940px;
}

.pre-hero-headline {
  padding: clamp(24px, 5vw, 54px) clamp(16px, 5vw, 72px) 0;
}

.pre-hero-main {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.96;
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  color: #17181a;
}

.pre-hero-sub {
  margin: 8px 0 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
  font-size: clamp(1.1rem, 3.3vw, 2.1rem);
}

.word-accent-yellow {
  color: #c9a23a;
}

.solution-card {
  display: grid;
  gap: 10px;
}

.solutions-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.solution-card {
  padding: clamp(20px, 2.8vw, 28px);
  border-radius: 18px;
  border: 1px solid #d8e6f6;
  align-content: start;
}

.solution-card p {
  margin: 0;
}

.solution-btn {
  width: fit-content;
  margin-top: 8px;
}

.solution-card-mvp {
  background: #fffdf4e3;
  border-color: #e7dbab;
}

.solution-btn-mvp {
  background: linear-gradient(135deg, #e1c154, #c9a23a);
  border-color: #cfab44;
  color: #fffef7;
  box-shadow: 0 10px 22px #cca63a33;
}

.solution-btn-mvp:hover {
  background: linear-gradient(135deg, #e9ce71, #d6ae48);
}

.solution-card-custom {
  background: #fffafcdd;
  border-color: #ecd3e0;
}

.solution-btn-custom {
  background: linear-gradient(135deg, #ce7fa6, #b96890);
  border-color: #d287aa;
  color: #fff8fc;
  box-shadow: 0 10px 22px #b9689033;
}

.solution-btn-custom:hover {
  background: linear-gradient(135deg, #d48fb0, #bc7297);
}

.solution-card-erp {
  background: #f6faffd9;
  border-color: #bfd2ea;
}

.solution-btn-erp {
  background: linear-gradient(135deg, #5b9ff0, #3e7fd1);
  border-color: #558dcf;
  color: #f5fbff;
  box-shadow: 0 10px 22px #5b9ff033;
}

.solution-btn-erp:hover {
  background: linear-gradient(135deg, #6aacf8, #4b8cda);
}

.solution-card-esg {
  background: #f8fdfad9;
  border-color: #b8ddcd;
}

.solution-btn-esg {
  background: linear-gradient(135deg, #3da97a, #2d8a62);
  border-color: #55b389;
  color: #f3fff9;
  box-shadow: 0 10px 22px #3da97a33;
}

.solution-btn-esg:hover {
  background: linear-gradient(135deg, #54b889, #399a71);
}

.solutions-stack {
  display: grid;
  gap: 24px;
}

.solution-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(20px, 3vw, 30px);
  border-radius: 18px;
  border: 1px solid #d8e6f6;
  background: #f5faff;
}

.solution-hero-erp {
  background: #eef6ff;
  border-color: #cadcf2;
}

.solution-hero-custom {
  background: #fff2f8;
  border-color: #efd3e3;
}

.solution-hero-esg {
  background: #edf8f2;
  border-color: #c8e2d4;
}

.solution-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.solution-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.solution-copy p {
  color: var(--muted);
  margin: 0;
}

.solution-copy .btn {
  width: fit-content;
  margin-top: 4px;
}

.solution-media {
  display: grid;
  align-items: center;
}

.solution-flow-map {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 34vw, 520px);
  border: 1px solid #c4d9f2;
  border-radius: 16px;
  background: #f8fcff;
  box-shadow: 0 14px 34px #4b77a31f;
  overflow: hidden;
}

.solution-hero-esg .solution-flow-map {
  border-color: #bddfce;
  background: #f8fdfb;
  box-shadow: 0 14px 34px #50896f1f;
}

.solution-hero-custom .solution-flow-map {
  border-color: #ebcfe0;
  background: #fff8fc;
  box-shadow: 0 14px 34px #a25f861a;
}

.solution-flow-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.solution-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1px solid #a8c5e8;
  background: #ffffff;
  color: #2b4f7b;
  border-radius: 12px;
  padding: 9px 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  box-shadow: 0 10px 22px #5e88b426;
  z-index: 2;
}

.solution-hero-esg .solution-node {
  border-color: #9ecfb7;
  color: #2f6f53;
  box-shadow: 0 10px 22px #5f987526;
}

.solution-hero-custom .solution-node {
  border-color: #e1b9cf;
  color: #8b4f6d;
  box-shadow: 0 10px 22px #b26a9230;
}

.solution-node.active {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: #5d9de8;
  box-shadow: 0 12px 24px #5d9de84a;
}

.solution-hero-esg .solution-node.active {
  border-color: #57b98d;
  box-shadow: 0 12px 24px #57b98d4a;
}

.solution-hero-custom .solution-node.active {
  border-color: #ce7fa6;
  box-shadow: 0 12px 24px #ce7fa64a;
}

.solution-flow-map .flow-line {
  fill: none;
  stroke: #8db7eb;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  animation: pulseFlow 2.2s linear infinite;
  opacity: 0.65;
}

.solution-flow-map .flow-line.active {
  stroke: #4c8edf;
  stroke-width: 2.8;
  opacity: 0.95;
}

.solution-hero-esg .solution-flow-map .flow-line {
  stroke: #8ec9ad;
}

.solution-hero-esg .solution-flow-map .flow-line.active {
  stroke: #4aa878;
}

.solution-hero-custom .solution-flow-map .flow-line {
  stroke: #d8abc3;
}

.solution-hero-custom .solution-flow-map .flow-line.active {
  stroke: #be6f95;
}

.solution-flow-map .flow-arrow {
  fill: #6ea5e8;
  opacity: 0.85;
}

.solution-hero-esg .solution-flow-map .flow-arrow {
  fill: #6fbc93;
}

.solution-hero-custom .solution-flow-map .flow-arrow {
  fill: #cb8aad;
}

.solution-flow-map .flow-packet {
  fill: #4c8edf;
  filter: drop-shadow(0 0 4px #7cb0eb);
  opacity: 0.88;
}

.solution-hero-esg .solution-flow-map .flow-packet {
  fill: #4aa878;
  filter: drop-shadow(0 0 4px #7bc9a4);
}

.solution-hero-custom .solution-flow-map .flow-packet {
  fill: #b86b90;
  filter: drop-shadow(0 0 4px #d79aba);
}

.solution-hero-custom .btn {
  background: linear-gradient(135deg, #ce7fa6, #b96890);
  border-color: #d08aac;
  box-shadow: 0 10px 22px #b9689033;
}

.solution-hero-custom .btn:hover {
  background: linear-gradient(135deg, #d993b5, #c2789d);
  box-shadow: 0 14px 28px #b9689040;
}

.solution-tag {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #4a6899;
  color: #bfd0f2;
  background: #122a50;
  font-size: 0.78rem;
  font-weight: 600;
}

.section {
  padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 72px);
  border-top: 1px solid #203b6499;
}

.hero {
  padding-top: clamp(8px, 2.2vw, 26px);
  padding-bottom: clamp(6px, 1.6vw, 20px);
  width: 100%;
  max-width: none;
  position: relative;
  border-top: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
  gap: clamp(2px, 1vw, 14px);
  align-items: stretch;
}

.hero-copy {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(0);
}

.hero-map {
  max-width: none;
  width: clamp(700px, 62vw, 1160px);
  justify-self: end;
  display: flex;
  align-items: center;
  margin-left: -24px;
}

.hero-map-main {
  width: clamp(420px, 44vw, 720px);
}

.hero-image-panel {
  margin: 0;
  width: 100%;
  display: grid;
  place-items: center;
}

.hero-image-panel img {
  width: min(100%, 640px);
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  transform: translateX(18px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: 38px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px dashed #6f8de7;
  animation: spin 22s linear infinite;
  opacity: 0.45;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.eyebrow {
  font-family: "Rajdhani", sans-serif;
  letter-spacing: 0.2em;
  color: #93a6ff;
  font-size: 0.78rem;
  margin: 0 0 8px;
}

h1,
h2,
h3 {
  font-family: "Rajdhani", sans-serif;
  margin: 0;
  line-height: 1.03;
}

h1 {
  font-size: clamp(2.5rem, 6.3vw, 5rem);
  max-width: 18ch;
}

.hero-title-compact {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  max-width: 16ch;
  line-height: 1.08;
}

.word-problem {
  color: #2c8a5f;
  white-space: nowrap;
}

.word-code {
  color: #356fc9;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.lead {
  max-width: 70ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.problems {
  padding-top: clamp(12px, 2vw, 28px);
}

.btn {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #7d8aff, #6f7cff 55%, #6a72f3);
  color: white;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 26px #5f72ff57;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #8f9cff, #7a87ff);
  box-shadow: 0 14px 34px #7384ff6b;
}

.btn-outline {
  background: #0f2348b3;
  color: #ccd7ff;
  border-color: #425f93;
}

.cards {
  display: grid;
  gap: 16px;
}

.cards.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cards.four {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cards.five {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid #2e4c77;
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #4d6da3;
}

.card p {
  color: var(--muted);
}

.process-story > p {
  max-width: 82ch;
  color: var(--muted);
}

.process-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

.process-intro-copy .lead {
  max-width: 76ch;
}

.process-intro-image {
  margin: 0;
  justify-self: end;
  width: 100%;
  text-align: right;
}

.process-intro-image img {
  width: min(100%, 620px);
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  transform: translateX(20px);
}

.process-grid {
  margin-top: 30px;
}

.process-subtitle {
  margin: 24px 0 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.03;
}

.process-step {
  display: grid;
  gap: 10px;
}

.process-visual-placeholder {
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px dashed #4e6d9f;
  border-radius: 10px;
  background: #11264aa6;
  color: #c6d5f2;
  font-size: 0.9rem;
}

.process-proof {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.process-gains-title {
  margin: 34px 0 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.03;
}

.process-gains-grid {
  margin-top: 26px;
}

#case-studies .eyebrow {
  margin-bottom: 10px;
}

#case-studies h2 {
  margin-bottom: 22px;
}

#case-studies .cards {
  margin-top: 0;
}

.flow-map-lower {
  margin-top: 14px;
  justify-self: center;
  width: 100%;
  justify-content: center;
}

.modules-showcase {
  position: relative;
  display: grid;
  gap: 24px;
}

.module-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  border: 1px solid #2f4e79;
  border-radius: 18px;
  padding: clamp(18px, 3vw, 30px);
  background: linear-gradient(154deg, #13294eeb 0%, #0d2144eb 62%, #12284cea 100%);
  box-shadow: 0 22px 56px #020a18ad;
  overflow: hidden;
}

.module-feature::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -120px;
  top: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, #6f8fff42, #6f8fff00 72%);
  pointer-events: none;
}

.module-feature-copy {
  position: relative;
  z-index: 1;
}

.module-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #516f9f;
  color: #b8c8eb;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.module-feature h3 {
  margin-top: 10px;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.module-lead {
  margin-top: 12px;
  color: #a3b8db;
  font-size: 1.03rem;
}

.module-points {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  padding-left: 18px;
}

.module-points li {
  color: #9fb3d5;
}

.module-impact {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #7f90ff;
  background: #132c558a;
  color: #bfd0ef;
  font-weight: 600;
}

.module-feature-media {
  margin: 0;
  position: relative;
  z-index: 1;
}

.module-feature-media img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid #3d5f90;
  box-shadow: 0 16px 36px #020a18a8;
  transform-origin: center;
  animation: mediaBreath 5.5s ease-in-out infinite;
}

.module-image-placeholder {
  width: 100%;
  min-height: clamp(240px, 28vw, 360px);
  border-radius: 14px;
  border: 1px dashed #4f6fa2;
  background: repeating-linear-gradient(
      45deg,
      #132a50,
      #132a50 14px,
      #102545 14px,
      #102545 28px
    ),
    linear-gradient(160deg, #12264a, #10213f);
  box-shadow: 0 16px 36px #020a18a8;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}

.module-image-placeholder span {
  color: #afc3e5;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.module-feature-media figcaption {
  margin-top: 8px;
  color: #97abcf;
  font-size: 0.9rem;
}

@keyframes mediaBreath {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.01);
  }
}

.pillar-card {
  position: relative;
  overflow: hidden;
  animation: pillarFloat 6.8s ease-in-out infinite;
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, #ffffff00 10%, #8ea2ff33 48%, #ffffff00 85%);
  transform: translateX(-120%);
  animation: pillarShine 7.5s ease-in-out infinite;
  pointer-events: none;
}

.pillar-card:nth-child(2) {
  animation-delay: 0.4s;
}

.pillar-card:nth-child(3) {
  animation-delay: 0.8s;
}

.pillar-card:nth-child(4) {
  animation-delay: 1.2s;
}

.pillar-card:nth-child(5) {
  animation-delay: 1.6s;
}

.pillar-kpi {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #4a6ca0;
  background: #10284f;
  color: #c6d6f2;
  font-size: 0.82rem;
  font-weight: 600;
}

@keyframes pillarFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes pillarShine {
  0%,
  28% {
    transform: translateX(-120%);
  }
  45% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.hint {
  max-width: 40ch;
  color: var(--muted);
}

.module-map {
  position: relative;
  width: 100%;
  aspect-ratio: 17 / 10;
  min-height: clamp(560px, 50vw, 760px);
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.main-flow-map {
  min-height: clamp(340px, 34vw, 460px);
  aspect-ratio: 4 / 3;
}

.module-map::after {
  display: none;
}

@keyframes glowShift {
  to {
    transform: translateY(-10px) scale(1.01);
  }
}

#moduleLinks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#mainFlowLinks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.module-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1px solid #4a6ea3;
  background: #0f2245;
  color: #dbe7ff;
  border-radius: 14px;
  padding: 12px 18px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 16px 34px #020a18c4;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}

.main-flow-node {
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  min-width: 144px;
}

.module-node::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid transparent;
  border-radius: 16px;
  transform: scale(0.92);
  opacity: 0;
}

.module-node.active {
  transform: translate(-50%, -50%) scale(1.05);
  border-color: var(--brand-strong);
  box-shadow: 0 14px 34px #6f86ff63;
}

.module-node.active::after {
  border-color: #7f96ff;
  animation: ping 1.6s ease-out infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.flow-line {
  fill: none;
  stroke: #6f8de2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  animation: pulseFlow 2.2s linear infinite;
  opacity: 0.65;
}

.flow-line.active {
  stroke: #9eb0ff;
  stroke-width: 2.8;
  opacity: 0.95;
}

.module-map.burst .flow-line.active {
  stroke-dasharray: 4 6;
  animation-duration: 0.8s;
}

.flow-arrow {
  fill: #89a1ff;
  opacity: 0.85;
}

.flow-packet {
  fill: #8f9dff;
  filter: drop-shadow(0 0 6px #7d8fff);
  opacity: 0.85;
}

@keyframes pulseFlow {
  to {
    stroke-dashoffset: -32;
  }
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.timeline article {
  border-left: 3px solid var(--brand);
  padding: 8px 14px;
  background: #102748c9;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #11284dc2;
  padding: 12px 16px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #d4deff;
}

.faq-item p {
  color: var(--muted);
  margin: 10px 0 2px;
}

ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.cta {
  text-align: center;
  background: linear-gradient(170deg, #122a4fba, #0c1f3fcf);
  border: 1px solid #355483;
  border-radius: 18px;
  margin: 0 clamp(16px, 5vw, 72px) 58px;
  padding: clamp(34px, 5vw, 56px);
  box-shadow: 0 20px 46px #010a18a3;
}

.contact-cta {
  text-align: left;
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}

.contact-copy p {
  margin: 0;
}

.contact-form {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  max-width: none;
  gap: 10px;
  text-align: left;
}

input[type="email"],
input[type="text"],
input[type="tel"],
textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid #3e5f90;
  border-radius: 10px;
  padding: 12px;
  background: #0d2142d6;
  color: var(--ink);
}

input[type="email"]::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: #8097bf;
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: #778bff;
  box-shadow: 0 0 0 3px #7f92ff2e;
}

textarea {
  resize: vertical;
}

.contact-form textarea,
.contact-form .consent,
.contact-form .btn,
.contact-form .form-status {
  grid-column: 1 / -1;
}

.contact-form .btn {
  justify-self: start;
}

.consent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.94rem;
}

.form-status {
  margin: 2px 0 0;
  min-height: 20px;
  color: #a6b7ff;
  font-size: 0.92rem;
}

@media (max-width: 900px) {
  .pre-hero-headline {
    padding-bottom: clamp(16px, 4vw, 28px);
  }

  .topbar {
    padding: 12px 16px;
  }

  .brand {
    font-size: 1.45rem;
  }

  .topbar nav {
    display: none;
  }

  .topbar .btn {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    display: none;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid #3d5e8f;
    border-radius: 12px;
    background: #0d2144f2;
    box-shadow: 0 18px 30px #030c1cab;
    z-index: 120;
  }

  .mobile-menu a {
    text-decoration: none;
    color: #d1dcf4;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 8px;
  }

  .mobile-menu .mobile-menu-brand {
    font-family: "Rajdhani", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    margin-bottom: 2px;
  }

  .mobile-menu .mobile-menu-group-label {
    margin: 8px 2px 2px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fb4d8;
  }

  .mobile-menu .mobile-submenu-link {
    padding-left: 22px;
  }

  .mobile-menu a.is-active,
  .mobile-menu a:hover {
    background: #17345e;
    color: #f1f5ff;
  }

  .mobile-menu .btn {
    display: inline-flex;
    justify-content: center;
    margin-top: 4px;
  }

  .topbar.mobile-menu-open .mobile-menu {
    display: grid;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

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

  .hero-copy {
    transform: none;
    max-width: 100%;
  }

  .hero-map {
    width: 100%;
    justify-self: stretch;
    margin-left: 0;
  }

  .mvp-page .hero-map {
    margin-left: 0;
    width: 100%;
  }

  .mvp-page .module-map {
    width: 100%;
    margin-left: 0;
    overflow: hidden;
    min-height: 520px;
  }

  .mvp-page .module-node {
    font-size: 0.92rem;
    padding: 8px 10px;
  }

  .mvp-page .clear-path-node[data-id="mvp"] {
    font-size: 1rem;
    padding: 10px 12px;
  }

  .hero-image-panel img {
    width: 100%;
    transform: none;
  }

  .module-map {
    aspect-ratio: auto;
    min-height: 560px;
  }

  .main-flow-map {
    min-height: 430px;
  }

  .main-flow-node {
    min-width: 132px;
    font-size: 0.96rem;
    padding: 9px 12px;
  }

  .module-feature {
    grid-template-columns: 1fr;
  }

  .solution-hero {
    grid-template-columns: 1fr;
  }

  .solutions-cards-grid {
    grid-template-columns: 1fr;
  }

  .process-intro-layout {
    grid-template-columns: 1fr;
  }

  .process-intro-image {
    justify-self: start;
    text-align: left;
  }

  .process-intro-image img {
    margin-left: 0;
    transform: none;
  }

  .contact-form {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .topbar .btn {
    display: none;
  }

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

  .contact-form .btn {
    width: 100%;
  }

  .hero::after {
    display: none;
  }

  .main-flow-map {
    min-height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-card,
  .pillar-card::before,
  .module-feature-media img {
    animation: none;
  }
}

/* Homepage visual style inspired by provided PDF */
.home-page {
  --paper: #ffffff;
  --ink-strong: #1f2733;
  --ink-soft: #5b6778;
  --stroke: #e4eaf1;
  --accent: #5b9ff0;
  --accent-strong: #3e7fd1;
  background: #ffffff;
  color: var(--ink-strong);
}

.home-page .grid-overlay {
  background-image: linear-gradient(#edf1f6 1px, transparent 1px),
    linear-gradient(90deg, #edf1f6 1px, transparent 1px);
  opacity: 0.2;
}

.home-page .ambient-lights {
  opacity: 0.08;
}

.home-page .light {
  background: radial-gradient(circle, #d6e5f8, #d6e5f800 72%);
}

.home-page .topbar {
  background: #ffffffeb;
  border-bottom: 1px solid var(--stroke);
}

.home-page .brand {
  color: #17181a;
}

.home-page .topbar nav a {
  color: #4d555e;
}

.home-page .topbar nav a:hover,
.home-page .topbar nav a.is-active {
  color: #2f5f9f;
}

.home-page .submenu {
  background: #ffffff;
  border: 1px solid #e2e9f2;
  box-shadow: 0 12px 22px #3b4f6b14;
}

.home-page .submenu a {
  color: #4d555e;
}

.home-page .mobile-menu-toggle,
.erp-page .mobile-menu-toggle,
.mvp-page .mobile-menu-toggle {
  border-color: #c6d7ec;
}

.home-page .mobile-menu-toggle span,
.erp-page .mobile-menu-toggle span,
.mvp-page .mobile-menu-toggle span {
  background: #355f96;
}

.home-page .mobile-menu,
.erp-page .mobile-menu,
.mvp-page .mobile-menu {
  border-color: #c9d9ec;
  background: #ffffff;
  box-shadow: 0 12px 22px #3b4f6b14;
}

.home-page .mobile-menu a,
.erp-page .mobile-menu a,
.mvp-page .mobile-menu a {
  color: #4d5e76;
}

.home-page .mobile-menu .mobile-menu-group-label,
.erp-page .mobile-menu .mobile-menu-group-label,
.mvp-page .mobile-menu .mobile-menu-group-label {
  color: #6a7f9e;
}

.home-page .mobile-menu a.is-active,
.home-page .mobile-menu a:hover,
.erp-page .mobile-menu a.is-active,
.erp-page .mobile-menu a:hover,
.mvp-page .mobile-menu a.is-active,
.mvp-page .mobile-menu a:hover {
  background: #edf4ff;
  color: #2f5f9f;
}

.home-page .hero::after {
  border-color: #d8e2ef;
  opacity: 0.45;
}

.home-page .eyebrow {
  color: var(--accent-strong);
}

.home-page h1,
.home-page h2,
.home-page h3 {
  color: #17181a;
}

.home-page .lead,
.home-page p,
.home-page li,
.home-page .hint {
  color: var(--ink-soft);
}

.home-page .btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: #4f90df;
  color: #f5fff9;
  box-shadow: 0 10px 22px #5b9ff033;
}

.home-page .btn:hover {
  background: linear-gradient(135deg, #6aacf8, #4b8cda);
  box-shadow: 0 14px 28px #5b9ff040;
}

.home-page .btn-outline {
  background: #ffffff;
  border-color: #cfddee;
  color: #2f568f;
  box-shadow: none;
}

.home-page .card {
  background: #ffffff;
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 22px #3b4f6b14;
}

.home-page .card:hover {
  border-color: #c6d7ec;
}

.home-page .solution-card-mvp {
  background: #fffdf4e3;
  border-color: #e7dbab;
}

.home-page .solution-card-custom {
  background: #fffafcdd;
  border-color: #ecd3e0;
}

.home-page .solution-card-erp {
  background: #f6faffd9;
  border-color: #bfd2ea;
}

.home-page .solution-card-esg {
  background: #f8fdfad9;
  border-color: #b8ddcd;
}

.home-page .solution-btn-mvp {
  background: linear-gradient(135deg, #e1c154, #c9a23a);
  border-color: #cfab44;
  color: #fffef7;
  box-shadow: 0 10px 22px #cca63a33;
}

.home-page .solution-btn-mvp:hover {
  background: linear-gradient(135deg, #e9ce71, #d6ae48);
}

.home-page .solution-btn-custom {
  background: linear-gradient(135deg, #ce7fa6, #b96890);
  border-color: #d287aa;
  color: #fff8fc;
  box-shadow: 0 10px 22px #b9689033;
}

.home-page .solution-btn-custom:hover {
  background: linear-gradient(135deg, #d48fb0, #bc7297);
}

.home-page .solution-btn-erp {
  background: linear-gradient(135deg, #5b9ff0, #3e7fd1);
  border-color: #558dcf;
  color: #f5fbff;
  box-shadow: 0 10px 22px #5b9ff033;
}

.home-page .solution-btn-erp:hover {
  background: linear-gradient(135deg, #6aacf8, #4b8cda);
}

.home-page .solution-btn-esg {
  background: linear-gradient(135deg, #3da97a, #2d8a62);
  border-color: #55b389;
  color: #f3fff9;
  box-shadow: 0 10px 22px #3da97a33;
}

.home-page .solution-btn-esg:hover {
  background: linear-gradient(135deg, #54b889, #399a71);
}

.home-page .module-node {
  background: #ffffff;
  border-color: #c6d8ee;
  color: #2f4d74;
  box-shadow: 0 10px 20px #3b4f6b14;
}

.home-page .module-node.active {
  border-color: #5d9de8;
  box-shadow: 0 12px 24px #5d9de83b;
}

.home-page .flow-line {
  stroke: #9fb9d8;
}

.home-page .flow-line.active {
  stroke: #4c8edf;
}

.home-page .flow-arrow,
.home-page .flow-packet {
  fill: #4c8edf;
}

.home-page .process-visual-placeholder {
  border-color: #d3e0ef;
  background: #f8fbff;
  color: #5f7088;
}

.home-page .cta {
  background: #ffffff;
  border-color: #dde6f1;
  box-shadow: 0 12px 24px #3b4f6b14;
}

.home-page .contact-form input[type="email"],
.home-page .contact-form input[type="text"],
.home-page .contact-form textarea {
  background: #ffffff;
  border-color: #ccdaec;
  color: #1f354f;
}

.home-page .contact-form input::placeholder,
.home-page .contact-form textarea::placeholder {
  color: #7087a5;
}

.home-page .contact-copy p {
  color: var(--ink-soft);
}

.home-page .pre-hero-main {
  color: #17181a;
}

/* ERP page - light blue style aligned with homepage */
.erp-page {
  --erp-paper: #eaf4ff;
  --erp-ink: #1b2a40;
  --erp-soft: #4e6685;
  --erp-stroke: #bfd2ea;
  --erp-accent: #5b9ff0;
  --erp-accent-strong: #3e7fd1;
  background: #eef6ff;
  color: var(--erp-ink);
}

.erp-page .grid-overlay {
  background-image: linear-gradient(#c9dbf1 1px, transparent 1px),
    linear-gradient(90deg, #c9dbf1 1px, transparent 1px);
  opacity: 0.32;
}

.erp-page .light {
  background: radial-gradient(circle, #b5d4f7, #b5d4f700 72%);
}

.erp-page .topbar {
  background: #edf5ffde;
  border-bottom: 1px solid var(--erp-stroke);
}

.erp-page .brand {
  color: #1a2b44;
}

.erp-page .topbar nav a {
  color: #546b88;
}

.erp-page .topbar nav a:hover,
.erp-page .topbar nav a.is-active {
  color: #2c5795;
}

.erp-page .submenu {
  background: #f4f9fff5;
  border: 1px solid #c4d8f1;
  box-shadow: 0 16px 28px #5a7da31f;
}

.erp-page .submenu a {
  color: #546b88;
}

.erp-page .eyebrow {
  color: var(--erp-accent-strong);
}

.erp-page h1,
.erp-page h2,
.erp-page h3 {
  color: #17263b;
}

.erp-page .lead,
.erp-page p,
.erp-page li,
.erp-page .hint {
  color: var(--erp-soft);
}

.erp-page .btn {
  background: linear-gradient(135deg, var(--erp-accent), var(--erp-accent-strong));
  border-color: #558dcf;
  color: #f5fbff;
  box-shadow: 0 10px 22px #5b9ff033;
}

.erp-page .btn:hover {
  background: linear-gradient(135deg, #6aacf8, #4b8cda);
  box-shadow: 0 14px 28px #5b9ff040;
}

.erp-page .btn-outline {
  background: #f5faff;
  border-color: #bdd3ef;
  color: #2f568f;
  box-shadow: none;
}

.erp-page .card,
.erp-page .module-feature,
.erp-page .faq-item,
.erp-page .timeline article {
  background: #f6faffd9;
  border-color: var(--erp-stroke);
  box-shadow: 0 14px 30px #577ba526;
}

.erp-page .timeline article {
  border-left-color: var(--erp-accent);
}

.erp-page .module-feature::before {
  background: radial-gradient(circle, #9cc6f25e, #9cc6f200 72%);
}

.erp-page .module-badge,
.erp-page .pillar-kpi {
  border-color: #a9c6e8;
  background: #ebf4ff;
  color: #2f5f93;
}

.erp-page .module-impact {
  border-left-color: #5a95db;
  background: #edf5ffcf;
  color: #315c8a;
}

.erp-page .module-node {
  background: #f5f9ff;
  border-color: #aac7e8;
  color: #26486d;
  box-shadow: 0 14px 26px #5a7ea633;
}

.erp-page .module-node.active {
  border-color: #5d9de8;
  box-shadow: 0 14px 30px #5d9de84d;
}

.erp-page .flow-line {
  stroke: #8eb7e8;
}

.erp-page .flow-line.active {
  stroke: #4c8edf;
}

.erp-page .flow-arrow {
  fill: #6ea6e8;
}

.erp-page .flow-packet {
  fill: #4c8edf;
  filter: drop-shadow(0 0 4px #7cb0eb);
}

.erp-page input[type="email"],
.erp-page input[type="text"],
.erp-page input[type="tel"],
.erp-page textarea {
  background: #f9fcff;
  border-color: #b9d0eb;
  color: #1e3552;
}

/* MVP page - pastel yellow style aligned with homepage/erp */
.mvp-page {
  --mvp-paper: #fffdf0;
  --mvp-ink: #43371f;
  --mvp-soft: #786548;
  --mvp-stroke: #e7dbab;
  --mvp-accent: #e1c154;
  --mvp-accent-strong: #c9a23a;
  background: #fffdf0;
  color: var(--mvp-ink);
}

.mvp-page .grid-overlay {
  background-image: linear-gradient(#efe8cb 1px, transparent 1px),
    linear-gradient(90deg, #efe8cb 1px, transparent 1px);
  opacity: 0.3;
}

.mvp-page .light {
  background: radial-gradient(circle, #f4e4a7, #f4e4a700 72%);
}

.mvp-page .topbar {
  background: #fffef3ee;
  border-bottom: 1px solid var(--mvp-stroke);
}

.mvp-page .brand {
  color: #3f321c;
}

.mvp-page .topbar nav a {
  color: #776647;
}

.mvp-page .topbar nav a:hover,
.mvp-page .topbar nav a.is-active {
  color: #8a6a1d;
}

.mvp-page .submenu {
  background: #fffeef;
  border: 1px solid #eadca9;
  box-shadow: 0 14px 24px #9c81311a;
}

.mvp-page .submenu a {
  color: #776647;
}

.mvp-page .mobile-menu-toggle {
  border-color: #dfcf93;
}

.mvp-page .mobile-menu-toggle span {
  background: #957228;
}

.mvp-page .mobile-menu {
  border-color: #e4d79f;
  background: #fffef1;
  box-shadow: 0 12px 22px #9c81311f;
}

.mvp-page .mobile-menu a {
  color: #776647;
}

.mvp-page .mobile-menu a.is-active,
.mvp-page .mobile-menu a:hover {
  background: #f8f0cd;
  color: #7f611f;
}

.mvp-page .eyebrow {
  color: #a37b20;
}

.mvp-page h1,
.mvp-page h2,
.mvp-page h3 {
  color: #3b2f1a;
}

.mvp-page .lead,
.mvp-page p,
.mvp-page li,
.mvp-page .hint {
  color: var(--mvp-soft);
}

.mvp-page .btn {
  background: linear-gradient(135deg, var(--mvp-accent), var(--mvp-accent-strong));
  border-color: #cfab44;
  color: #fffef7;
  box-shadow: 0 10px 22px #cca63a33;
}

.mvp-page .btn:hover {
  background: linear-gradient(135deg, #e9ce71, #d6ae48);
  box-shadow: 0 14px 28px #cca63a40;
}

.mvp-page .btn-outline {
  background: #fffef6;
  border-color: #e5d8a5;
  color: #7d6124;
  box-shadow: none;
}

.mvp-page .card,
.mvp-page .module-feature,
.mvp-page .faq-item,
.mvp-page .timeline article {
  background: #fffdf4e3;
  border-color: var(--mvp-stroke);
  box-shadow: 0 14px 30px #9c81311c;
}

.mvp-page .timeline article {
  border-left-color: #d1ae45;
}

.mvp-page .module-node {
  background: #fffdf4;
  border-color: #dec772;
  color: #6f5724;
  box-shadow: 0 14px 26px #9c813129;
}

.mvp-page .hero-map {
  margin-left: 28px;
  width: clamp(640px, 56vw, 1040px);
}

.mvp-page .module-map {
  margin-left: auto;
  width: min(100%, 920px);
  background: linear-gradient(110deg, #fffdf480 0%, #fffdf480 58%, #f2ffea80 58%, #f2ffea80 100%);
}

.mvp-page .module-node[data-id="problem"] {
  border-color: #d5b356;
  box-shadow: 0 16px 28px #b78f2a30;
}

.mvp-page .chaos-node {
  background: #fff1ef;
  border-color: #e0b5ad;
  color: #83524a;
  font-size: 1.02rem;
  padding: 10px 14px;
  box-shadow: 0 10px 20px #a3645433;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.mvp-page .chaos-node:nth-of-type(3n) {
  transform: translate(-50%, -50%) rotate(5deg);
}

.mvp-page .chaos-node:nth-of-type(4n) {
  transform: translate(-50%, -50%) rotate(-8deg);
}

.mvp-page .clear-path-node {
  background: #f5ffef;
  border-color: #aace8f;
  color: #3c6e2a;
  box-shadow: 0 12px 24px #8bb46a38;
}

.mvp-page .clear-path-node[data-id="mvp"] {
  font-size: 1.14rem;
  font-weight: 700;
  padding: 12px 18px;
}

.mvp-page .chaos-node.is-chaos-active {
  border-color: #c98274;
  box-shadow: 0 12px 24px #c9827445;
  transform: translate(-50%, -50%) scale(1.04) rotate(-2deg);
}

.mvp-page .module-node.active {
  border-color: #c9a23a;
  box-shadow: 0 14px 30px #c9a23a4d;
}

.mvp-page .flow-line {
  stroke: #6fb46b;
  stroke-width: 2.6;
  stroke-dasharray: none;
  animation: none;
  opacity: 0.86;
}

.mvp-page .flow-line.active {
  stroke: #3b9a4a;
  stroke-width: 3.1;
  opacity: 1;
}

.mvp-page .flow-line-fail {
  stroke: #cf5f54;
  stroke-width: 2.4;
  stroke-dasharray: 7 6;
  opacity: 0.92;
}

.mvp-page .flow-fail-cross line {
  stroke: #c74233;
  stroke-width: 2.8;
  stroke-linecap: round;
  opacity: 1;
}

.mvp-page .flow-arrow {
  fill: #57a95b;
}

.mvp-page .flow-arrow-fail {
  fill: #cf5f54;
  opacity: 1;
}

.mvp-page .flow-packet {
  fill: #3b9a4a;
  filter: drop-shadow(0 0 4px #8acb8f);
}

@media (max-width: 900px) {
  .mvp-page .hero-map {
    margin-left: 0;
    width: 100%;
  }

  .mvp-page .module-map {
    width: 100%;
    margin-left: 0;
    overflow: hidden;
    min-height: 520px;
  }
}

/* Case studies pages */
.cases-page {
  background: #ffffff;
  color: #1f2733;
}

.cases-page .grid-overlay {
  background-image: linear-gradient(#f3f6fa 1px, transparent 1px),
    linear-gradient(90deg, #f3f6fa 1px, transparent 1px);
  opacity: 0.12;
}

.cases-page .topbar {
  background: #ffffffeb;
  border-bottom: 1px solid #e4eaf1;
}

.cases-page .topbar nav a {
  color: #4d555e;
}

.cases-page .topbar nav a:hover,
.cases-page .topbar nav a.is-active {
  color: #2f5f9f;
}

.cases-page .submenu {
  background: #ffffff;
  border: 1px solid #e2e9f2;
  box-shadow: 0 12px 22px #3b4f6b14;
}

.cases-page .submenu a {
  color: #4d555e;
}

@media (min-width: 901px) {
  .topbar .submenu {
    background: #ffffff !important;
    border: 1px solid #e2e9f2 !important;
    box-shadow: 0 12px 22px #3b4f6b14 !important;
  }

  .topbar .submenu a {
    color: #4d555e !important;
  }

  .topbar .submenu a:hover,
  .topbar .submenu a.is-active {
    color: #2f5f9f !important;
  }
}

.cases-page .eyebrow {
  color: #3e7fd1;
}

.cases-page h1,
.cases-page h2,
.cases-page h3 {
  color: #17181a;
}

.cases-page p,
.cases-page .lead {
  color: #5b6778;
}

.cases-hero h1,
.cases-hero .lead {
  max-width: none;
}

.cases-list {
  display: grid;
  gap: 18px;
}

.case-entry {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  text-decoration: none;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px #3b4f6b12;
  padding: clamp(14px, 2.4vw, 20px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.case-entry:hover {
  transform: translateY(-2px);
  border-color: #c5d6eb;
  box-shadow: 0 14px 28px #3b4f6b1c;
}

.case-cover {
  width: 100%;
  min-height: 170px;
  border-radius: 12px;
  border: 1px solid #d9e3f0;
  margin: 0;
  overflow: hidden;
}

.case-cover img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  display: block;
}

.case-cover-erp {
  background: linear-gradient(135deg, #e9f3ff, #d7e8fb);
}

.case-cover-esg {
  background: linear-gradient(135deg, #e9f8ef, #d5eddf);
}

.case-cover-custom {
  background: linear-gradient(135deg, #fff0f7, #f5deea);
}

.case-cover-reservations {
  background: linear-gradient(135deg, #ffeef7, #efd7e7);
}

.case-copy .eyebrow {
  margin-bottom: 6px;
}

.case-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.1;
}

.case-copy p {
  margin: 0;
}

.case-link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2f5f9f;
  font-weight: 600;
}

.case-link::after {
  content: "→";
}

.case-detail {
  max-width: 940px;
}

.case-hero-reservations {
  padding-top: clamp(18px, 2.6vw, 34px);
  padding-bottom: clamp(26px, 4vw, 42px);
}

.case-hero-reservations h1,
.case-hero-reservations .lead {
  max-width: none;
}

.case-hero-reservations h1 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
}

.case-hero-layout {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.case-hero-copy .lead {
  max-width: 64ch;
}

.reservations-screens {
  position: relative;
}

.reservations-screens-hero {
  min-height: clamp(360px, 40vw, 520px);
}

.reservations-shot {
  margin: 0;
  border: 1px solid #ecd3e0;
  border-radius: 14px;
  background: #fffafc;
  box-shadow: 0 14px 28px #9b5f841f;
  overflow: hidden;
}

.reservations-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.reservations-shot-main {
  width: min(92%, 680px);
}

.reservations-shot-float {
  position: absolute;
  width: min(56%, 420px);
}

.reservations-shot-calendar {
  right: 0;
  top: 18px;
}

.reservations-shot-payments {
  right: 16px;
  bottom: 0;
}

.case-story-block {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;
}

.case-story-block-reverse .case-detail-card {
  order: 2;
}

.case-story-block-reverse .reservations-shot {
  order: 1;
}

.case-detail-card {
  max-width: 940px;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px #3b4f6b12;
}

.case-story-block .case-detail-card,
.case-story-block .reservations-shot {
  min-height: clamp(340px, 34vw, 470px);
}

.case-story-block .case-detail-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3.8vw, 46px);
}

.case-story-block .case-detail-card h2 {
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.02;
}

.case-story-block .case-detail-card p {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.8;
}

.case-story-block .case-detail-card p + p {
  margin-top: 16px;
}

.case-story-block .case-detail-card ul {
  margin: 16px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.case-story-block .case-detail-card li {
  position: relative;
  padding-left: 28px;
  line-height: 1.75;
  color: #17181a;
}

.case-story-block .case-detail-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ce7fa6, #b96890);
  box-shadow: 0 0 0 4px #f4dcea;
}

.case-story-block .reservations-shot img {
  height: 100%;
  object-fit: cover;
}

.case-custom-theme .case-story-block .reservations-shot {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: #fff6fb;
}

.case-custom-theme .case-story-block .reservations-shot img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.reservations-shot-contain {
  display: grid;
  place-items: center;
  padding: 14px;
  background: #fff6fb;
}

.reservations-shot-contain img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.case-back {
  color: #2f5f9f;
  text-decoration: none;
  font-weight: 600;
}

.case-back:hover {
  text-decoration: underline;
}

.case-custom-theme {
  background: linear-gradient(180deg, #fff7fb 0%, #fff1f8 100%);
}

.case-custom-theme .grid-overlay {
  background-image: linear-gradient(#f0dce7 1px, transparent 1px),
    linear-gradient(90deg, #f0dce7 1px, transparent 1px);
  opacity: 0.26;
}

.case-custom-theme .topbar {
  background: #fff4faeb;
  border-bottom: 1px solid #eccfde;
}

.case-custom-theme .topbar nav a {
  color: #725a6d;
}

.case-custom-theme .topbar nav a:hover,
.case-custom-theme .topbar nav a.is-active {
  color: #8a4d70;
}

.case-custom-theme .submenu {
  background: #fff9fc;
  border-color: #efd8e4;
  box-shadow: 0 12px 24px #9b5f8420;
}

.case-custom-theme .submenu a {
  color: #725a6d;
}

.case-custom-theme .eyebrow {
  color: #9a5078;
}

.case-custom-theme h1,
.case-custom-theme h2,
.case-custom-theme h3 {
  color: #3f2b3a;
}

.case-custom-theme p,
.case-custom-theme .lead {
  color: #71586b;
}

.case-custom-theme .case-back {
  color: #8e4d72;
}

.case-custom-theme .case-detail-card {
  background: #fffafcdd;
  border-color: #ecd3e0;
  box-shadow: 0 12px 24px #9c65831f;
}

.case-custom-theme .effects-grid .card {
  background: #fffdf7;
  border-color: #f2dfcf;
  box-shadow: 0 8px 18px #c08a5f14;
}

.case-custom-theme .effects-grid .card h3 {
  color: #744a32;
}

.case-custom-theme .effects-grid .card p {
  color: #7a6050;
}

@media (max-width: 900px) {
  .case-entry {
    grid-template-columns: 1fr;
  }

  .case-cover {
    min-height: 150px;
  }

  .case-hero-layout,
  .case-story-block {
    grid-template-columns: 1fr;
  }

  .reservations-screens-hero {
    min-height: 0;
    display: grid;
    gap: 12px;
  }

  .reservations-shot-main,
  .reservations-shot-float {
    position: static;
    width: 100%;
  }

  .case-story-block-reverse .case-detail-card,
  .case-story-block-reverse .reservations-shot {
    order: initial;
  }

  .case-story-block .case-detail-card,
  .case-story-block .reservations-shot {
    min-height: 0;
  }

  .case-story-block .case-detail-card {
    padding: 22px;
  }
}