/* Maharix Technology — handcrafted rounded / editorial homepage */
.home-reimagined {
  --mx-ink: #10152a;
  --mx-blue: #4f63ff;
  --mx-cyan: #51dbc3;
  --mx-lilac: #b9b4ff;
  --mx-paper: #f6f4ef;
  --mx-soft: #f0effa;
  --mx-line: #dedde8;
  --mx-muted: #6d7184;
  --mx-dark: #0d1225;
  --mx-white: #fffdf9;
  color: var(--mx-ink);
  background: var(--mx-white);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden
}

.home-reimagined h1,
.home-reimagined h2,
.home-reimagined h3 {
  font-family: Manrope, Inter, sans-serif;
  letter-spacing: -.055em
}

.home-reimagined a {
  transition: all .35s cubic-bezier(.16, 1, .3, 1)
}

.mx-section-kicker,
.mx-eyebrow {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase
}

.mx-section-kicker {
  color: var(--mx-blue)
}

.mx-hero {
  min-height: 900px;
  background: var(--mx-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 128px 0 0
}

.mx-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 16%, rgba(79, 99, 255, .28), transparent 28%), radial-gradient(circle at 8% 80%, rgba(81, 219, 195, .15), transparent 25%), linear-gradient(135deg, #0b1021, #111831 60%, #0a1020)
}

.mx-hero-bg:before {
  content: '';
  position: absolute;
  width: 900px;
  height: 900px;
  right: -430px;
  top: -380px;
  border: 1px solid rgba(185, 180, 255, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(185, 180, 255, .025), 0 0 0 180px rgba(185, 180, 255, .018)
}

.mx-hero-bg:after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  left: -300px;
  bottom: -320px;
  border: 1px solid rgba(81, 219, 195, .16);
  border-radius: 50%
}

.mx-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: 70px;
  align-items: center
}

.mx-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a8aec5;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 34px
}

.mx-hero-meta em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #717991;
  margin-left: 8px
}

.mx-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mx-cyan);
  box-shadow: 0 0 0 7px rgba(81, 219, 195, .09)
}

.mx-slide-copy {
  display: none;
  animation: mxIn .7s both
}

.mx-slide-copy.is-active {
  display: block
}

@keyframes mxIn {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.mx-eyebrow {
  color: var(--mx-cyan);
  margin-bottom: 20px
}

.mx-slide-copy h1,
.mx-slide-copy h2 {
  font-size: clamp(3.25rem, 5.25vw, 6.1rem);
  line-height: .93;
  font-weight: 700;
  margin: 0;
  max-width: 760px
}

.mx-slide-copy h1 strong,
.mx-slide-copy h2 strong {
  color: var(--mx-cyan);
  font-weight: 700
}

.mx-hero-text {
  font-size: 1rem;
  line-height: 1.85;
  color: #b3b9cb;
  max-width: 625px;
  margin: 29px 0 31px
}

.mx-hero-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap
}

.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 15px 22px;
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none
}

.mx-btn-fill {
  background: linear-gradient(100deg, var(--mx-blue), #6d78ff);
  color: #fff;
  box-shadow: 0 15px 40px rgba(79, 99, 255, .28)
}

.mx-btn-fill:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(79, 99, 255, .38)
}

.mx-btn-line {
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px)
}

.mx-btn-line:hover {
  border-color: var(--mx-cyan);
  background: rgba(81, 219, 195, .08)
}

.mx-btn-dark {
  background: var(--mx-ink);
  color: #fff;
  border-radius: 999px
}

.mx-hero-tags {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 40px
}

.mx-hero-tags span {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 8px 12px;
  color: #9ba3b9;
  font-size: .63rem;
  background: rgba(255, 255, 255, .025)
}

.mx-hero-stage {
  position: relative;
  min-height: 635px
}

.mx-stage-card {
  position: relative;
  width: min(610px, 100%);
  margin-left: auto;
  background: rgba(255, 253, 249, .96);
  color: var(--mx-ink);
  padding: 11px;
  border-radius: 34px;
  box-shadow: 0 45px 100px rgba(0, 0, 0, .4);
  transform: none
}

.mx-stage-top {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .13em;
  color: #7d8192
}

.mx-stage-media {
  position: relative;
  height: 510px;
  overflow: hidden;
  border-radius: 27px
}

.mx-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform 6.5s linear
}

.mx-stage-image.is-active {
  opacity: 1;
  transform: scale(1)
}

.mx-stage-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 13, 30, .02) 42%, rgba(8, 13, 30, .86))
}

.mx-stage-caption {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  color: #fff
}

.mx-stage-caption span {
  display: block;
  color: var(--mx-cyan);
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px
}

.mx-stage-caption strong {
  font-size: 1.18rem;
  line-height: 1.25;
  display: block;
  max-width: 400px
}

.mx-stage-bottom {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 18px;
  padding: 16px 11px 7px;
  align-items: center
}

.mx-stage-controls {
  display: flex;
  align-items: center;
  gap: 9px
}

.mx-stage-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid #dedee8;
  background: #fff;
  border-radius: 50%;
  font-weight: 900;
  color: var(--mx-ink);
  cursor: pointer
}

.mx-stage-arrow:hover {
  background: var(--mx-ink);
  color: #fff
}

.mx-progress {
  height: 4px;
  background: #e5e4ec;
  border-radius: 999px;
  flex: 1;
  overflow: hidden
}

.mx-progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: linear-gradient(90deg, var(--mx-blue), var(--mx-cyan));
  border-radius: 999px;
  transition: width .4s
}

.mx-stage-note {
  border-left: 1px solid #e2e1e8;
  padding-left: 16px
}

.mx-stage-note span {
  display: none
}

.mx-stage-note p {
  font-size: .65rem;
  line-height: 1.5;
  color: #72778a;
  margin: 0
}

.mx-float-card {
  position: absolute;
  z-index: 5;
  background: rgba(20, 26, 48, .78);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: 15px 17px;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28)
}

.mx-float-card b {
  display: block;
  font-size: .74rem
}

.mx-float-card small {
  display: block;
  color: #8e97ae;
  font-size: .59rem;
  margin-top: 3px
}

.mx-float-one {
  left: -8px;
  top: 21%
}

.mx-float-two {
  right: -12px;
  bottom: 18%
}

.mx-hero-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 70px;
  margin-top: 34px;
  color: #788199;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .14em
}

.mx-hero-foot i {
  height: 1px;
  background: #29324b;
  flex: 1
}

.mx-hero-foot a {
  color: #91eadc;
  margin-left: 12px;
  letter-spacing: .02em
}

.mx-intro {
  padding: 135px 0 120px;
  background: var(--mx-white)
}

.mx-intro-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 100px
}

.mx-intro h2,
.mx-heading-row h2,
.mx-cap-copy h2,
.mx-process h2,
.mx-tech h2,
.mx-faq h2 {
  font-size: clamp(2.7rem, 4.5vw, 5rem);
  line-height: .98;
  margin-top: 15px
}

.mx-intro-copy {
  padding-top: 38px
}

.mx-intro-copy p {
  font-size: 1.07rem;
  line-height: 1.85;
  color: #666c80;
  margin-bottom: 18px
}

.mx-intro-copy strong {
  color: var(--mx-ink)
}

.mx-underlink {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
  color: var(--mx-blue);
  font-size: .76rem;
  font-weight: 900;
  border-bottom: 1px solid #b9c1f5;
  padding-bottom: 5px
}

.mx-underlink:hover {
  gap: 14px
}

.mx-services {
  padding: 110px 0 125px;
  background: var(--mx-paper)
}

.mx-heading-row {
  display: grid;
  grid-template-columns: 1.1fr .7fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 55px
}

.mx-heading-row>p {
  font-size: .92rem;
  line-height: 1.8;
  color: #707487;
  margin: 0
}

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

.mx-service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 25px;
  min-height: 122px;
  padding: 23px 28px;
  border: 1px solid #e3e0d8;
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  text-decoration: none;
  color: var(--mx-ink);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(30, 34, 55, .025)
}

.mx-service-row:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #11172d, #202b52);
  transform: translateX(-101%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  z-index: 0
}

.mx-service-row>* {
  position: relative;
  z-index: 1
}

.mx-service-row:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(15, 20, 42, .13)
}

.mx-service-row:hover:before {
  transform: none
}

.mx-service-row h3 {
  font-size: 1.42rem;
  margin: 0 0 6px
}

.mx-service-row p {
  font-size: .77rem;
  color: #73788b;
  margin: 0;
  line-height: 1.55
}

.mx-service-row:hover p {
  color: #b9bfd0
}

.mx-service-row>strong {
  font-size: 1.25rem;
  width: 42px;
  height: 42px;
  border: 1px solid #d9d9e3;
  border-radius: 50%;
  display: grid;
  place-items: center
}

.mx-service-row:hover>strong {
  border-color: #506079
}

.mx-service-pill {
  justify-self: end;
  border: 1px solid #d5d4dd;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: #777c8e;
  display: none
}

.mx-solutions {
  padding: 125px 0;
  background: #0d1225;
  color: #fff;
  overflow: hidden
}

.mx-dark-heading h2 {
  color: #fff
}

.mx-dark-heading>p {
  color: #969eb3
}

.mx-solution-layout {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px
}

.mx-solution-feature {
  min-height: 625px;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border-radius: 34px
}

.mx-solution-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s
}

.mx-solution-feature:hover img {
  transform: scale(1.045)
}

.mx-solution-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 27, .02), rgba(7, 11, 27, .91))
}

.mx-solution-content {
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 40px
}

.mx-solution-content>span,
.mx-solution-stack span,
.mx-work-side span,
.mx-work-main div>span,
.mx-resource-grid>a>span {
  font-size: .58rem;
  letter-spacing: .15em;
  font-weight: 900;
  color: var(--mx-cyan)
}

.mx-solution-content h3 {
  font-size: clamp(2rem, 3.5vw, 3.7rem);
  line-height: .98;
  margin: 13px 0;
  max-width: 690px
}

.mx-solution-content p {
  color: #bac0d0;
  max-width: 570px;
  line-height: 1.7;
  font-size: .82rem
}

.mx-solution-content b {
  display: inline-flex;
  margin-top: 18px;
  font-size: .68rem
}

.mx-solution-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  background: transparent
}

.mx-solution-stack a {
  background: #171d34;
  padding: 31px 30px;
  border: 1px solid #262d47;
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0
}

.mx-solution-stack a:hover {
  background: #202946;
  transform: translateY(-3px);
  border-color: #394565
}

.mx-solution-stack h3 {
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 10px 0 17px
}

.mx-solution-stack b {
  color: var(--mx-cyan);
  margin-top: auto
}

.mx-capability {
  padding: 130px 0;
  background: var(--mx-white)
}

.mx-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center
}

.mx-cap-image {
  position: relative
}

.mx-cap-image img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  border-radius: 34px
}

.mx-cap-stamp {
  position: absolute;
  left: -24px;
  bottom: 32px;
  background: #11172d;
  color: #fff;
  padding: 22px 24px;
  min-width: 210px;
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(7, 20, 38, .22)
}

.mx-cap-stamp span {
  display: block;
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--mx-cyan)
}

.mx-cap-stamp b {
  display: block;
  font-size: 1.1rem;
  margin: 5px 0
}

.mx-cap-stamp small {
  color: #8991a7;
  font-size: .63rem
}

.mx-cap-copy>p {
  color: #687084;
  line-height: 1.85;
  max-width: 560px;
  margin: 22px 0 35px
}

.mx-cap-lines {
  display: grid;
  gap: 10px;
  margin-bottom: 35px
}

.mx-cap-lines div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 5px;
  padding: 18px 19px;
  border: 1px solid #e3e1e8;
  border-radius: 20px;
  background: #fbfaf8
}

.mx-cap-lines span {
  grid-row: span 2;
  color: var(--mx-blue);
  font-size: .62rem;
  font-weight: 900
}

.mx-cap-lines b {
  font-size: .83rem
}

.mx-cap-lines small {
  font-size: .7rem;
  color: #788095;
  line-height: 1.5
}

.mx-process {
  padding: 115px 0;
  background: var(--mx-soft)
}

.mx-process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  border: 0
}

.mx-process-track>div {
  min-height: 240px;
  padding: 28px 22px;
  border: 1px solid #dddbe8;
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  position: relative
}

.mx-process-track span {
  color: var(--mx-blue);
  font-size: .62rem;
  font-weight: 900
}

.mx-process-icon {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  font-size: 0;
  background: var(--mx-cyan);
  box-shadow: 0 0 0 6px rgba(81, 219, 195, .12)
}

.mx-process-track b {
  display: block;
  font-size: 1rem;
  margin: 28px 0 9px
}

.mx-process-track p {
  font-size: .72rem;
  color: #748096;
  line-height: 1.7
}

.mx-work {
  padding: 125px 0;
  background: var(--mx-white)
}

.mx-work-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px
}

.mx-work-main {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  color: #fff;
  border-radius: 34px
}

.mx-work-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s
}

.mx-work-main:hover img,
.mx-work-side a:hover img {
  transform: scale(1.04)
}

.mx-work-main:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5, 15, 29, .92))
}

.mx-work-main div {
  position: absolute;
  z-index: 2;
  left: 36px;
  right: 35px;
  bottom: 35px
}

.mx-work-main h3 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: .98;
  margin: 11px 0
}

.mx-work-main b {
  font-size: .68rem
}

.mx-work-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px
}

.mx-work-side a {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 310px;
  padding: 26px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.mx-work-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s
}

.mx-work-side a:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(5, 15, 29, .85))
}

.mx-work-side a>* {
  position: relative;
  z-index: 2
}

.mx-work-side h3 {
  font-size: 1.5rem;
  line-height: 1.05;
  margin-top: 8px
}

.mx-tech {
  padding: 120px 0;
  background: #0d1225;
  color: #fff
}

.mx-tech-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
  align-items: center
}

.mx-tech h2 {
  color: #fff
}

.mx-tech p {
  color: #969eb3;
  line-height: 1.8;
  max-width: 520px;
  margin: 20px 0
}

.mx-underlink-light {
  color: var(--mx-cyan);
  border-color: #33405e
}

.mx-tech-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.mx-tech-wall span {
  padding: 14px 18px;
  border: 1px solid #28324e;
  background: #151c34;
  color: #d7dbea;
  font-size: .73rem;
  font-weight: 800;
  border-radius: 999px
}

.mx-tech-wall span:nth-child(3n) {
  border-color: #315b6d;
  color: var(--mx-cyan)
}

.mx-resources {
  padding: 125px 0;
  background: var(--mx-paper)
}

.mx-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: transparent
}

.mx-resource-grid>a {
  background: #fff;
  min-height: 390px;
  padding: 31px;
  border: 1px solid #e3e0d8;
  border-radius: 28px;
  color: var(--mx-ink);
  text-decoration: none;
  position: relative
}

.mx-resource-grid>a:hover {
  background: #11172d;
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 25px 55px rgba(18, 23, 45, .15)
}

.mx-resource-grid>a>span {
  color: var(--mx-blue)
}

.mx-resource-grid>a:hover>span {
  color: var(--mx-cyan)
}

.mx-resource-grid h3 {
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 28px 0 12px
}

.mx-resource-grid p {
  font-size: .76rem;
  color: #71778b;
  line-height: 1.7
}

.mx-resource-grid>a:hover p {
  color: #a3abc0
}

.mx-resource-grid b {
  position: absolute;
  left: 31px;
  bottom: 27px;
  font-size: .67rem;
  color: var(--mx-blue)
}

.mx-resource-grid>a:hover b {
  color: var(--mx-cyan)
}

.mx-faq {
  padding: 125px 0;
  background: var(--mx-white)
}

.mx-faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px
}

.mx-faq-grid>div:first-child>p {
  color: #687084;
  line-height: 1.8;
  margin: 22px 0 30px
}

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

.mx-faq-list details {
  padding: 24px 25px;
  border: 1px solid #e1dfe8;
  border-radius: 22px;
  background: #fbfaf8
}

.mx-faq-list summary {
  list-style: none;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 900;
  padding-right: 35px;
  position: relative
}

.mx-faq-list summary::-webkit-details-marker {
  display: none
}

.mx-faq-list summary:after {
  content: '+';
  position: absolute;
  right: 0;
  color: var(--mx-blue);
  font-size: 1.3rem
}

.mx-faq-list details[open] summary:after {
  content: '−'
}

.mx-faq-list p {
  max-width: 780px;
  color: #6e7589;
  font-size: .78rem;
  line-height: 1.8;
  margin-top: 13px
}

.mx-cta {
  padding: 115px 0;
  background: radial-gradient(circle at 82% 25%, rgba(79, 99, 255, .28), transparent 25%), linear-gradient(125deg, #0a1021, #182347);
  color: #fff
}

.mx-cta-inner {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 100px;
  align-items: end
}

.mx-cta h2 {
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  line-height: .94;
  margin-top: 14px
}

.mx-cta h2 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--mx-cyan)
}

.mx-cta-inner>div:last-child p {
  color: #aab1c3;
  font-size: .86rem;
  line-height: 1.8;
  margin-bottom: 25px
}

.mx-cta .mx-section-kicker {
  color: var(--mx-cyan)
}

@media(max-width:1100px) {

  .mx-hero-inner,
  .mx-intro-grid,
  .mx-cap-grid,
  .mx-tech-grid,
  .mx-faq-grid,
  .mx-cta-inner {
    gap: 50px
  }

  .mx-slide-copy h1,
  .mx-slide-copy h2 {
    font-size: clamp(3rem, 5.5vw, 5rem)
  }

  .mx-stage-media {
    height: 450px
  }

  .mx-solution-layout,
  .mx-work-grid {
    grid-template-columns: 1fr
  }

  .mx-solution-feature {
    min-height: 560px
  }

  .mx-solution-stack {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr
  }

  .mx-solution-stack a {
    min-height: 230px
  }

  .mx-process-track {
    grid-template-columns: repeat(3, 1fr)
  }

  .mx-resource-grid {
    grid-template-columns: 1fr
  }

  .mx-resource-grid>a {
    min-height: 300px
  }
}

@media(max-width:800px) {
  .mx-hero {
    padding-top: 80px
  }

  .mx-hero-inner,
  .mx-intro-grid,
  .mx-cap-grid,
  .mx-tech-grid,
  .mx-faq-grid,
  .mx-cta-inner {
    grid-template-columns: 1fr
  }

  .mx-hero-stage {
    min-height: 540px;
    margin-top: 30px
  }

  .mx-stage-card {
    margin: 0 auto
  }

  .mx-float-one {
    left: -5px
  }

  .mx-float-two {
    right: -5px
  }

  .mx-hero-foot {
    display: none
  }

  .mx-intro,
  .mx-services,
  .mx-solutions,
  .mx-capability,
  .mx-process,
  .mx-work,
  .mx-tech,
  .mx-resources,
  .mx-faq {
    padding: 85px 0
  }

  .mx-heading-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 38px
  }

  .mx-solution-stack {
    grid-template-columns: 1fr
  }

  .mx-solution-stack a {
    min-height: 190px
  }

  .mx-cap-image img {
    height: 520px
  }

  .mx-cap-stamp {
    left: 12px
  }

  .mx-process-track {
    grid-template-columns: 1fr
  }

  .mx-process-track>div {
    min-height: 180px
  }

  .mx-work-main {
    min-height: 500px
  }

  .mx-work-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr
  }

  .mx-work-side a {
    min-height: 270px
  }

  .mx-cta-inner {
    gap: 40px
  }
}

@media(max-width:560px) {
  .mx-hero {
    padding: 65px 0 0
  }

  .mx-hero-meta em {
    display: none
  }

  .mx-slide-copy h1,
  .mx-slide-copy h2 {
    font-size: 2.9rem
  }

  .mx-hero-text {
    font-size: .9rem
  }

  .mx-hero-actions .mx-btn {
    width: 100%
  }

  .mx-hero-stage {
    min-height: 450px
  }

  .mx-stage-media {
    height: 355px
  }

  .mx-stage-caption {
    left: 18px;
    right: 18px;
    bottom: 18px
  }

  .mx-stage-caption strong {
    font-size: 1rem
  }

  .mx-stage-bottom {
    grid-template-columns: 1fr
  }

  .mx-stage-note {
    display: none
  }

  .mx-float-card {
    padding: 10px 12px
  }

  .mx-float-card small {
    display: none
  }

  .mx-float-one {
    top: 18%
  }

  .mx-float-two {
    bottom: 15%
  }

  .mx-intro h2,
  .mx-heading-row h2,
  .mx-cap-copy h2,
  .mx-process h2,
  .mx-tech h2,
  .mx-faq h2 {
    font-size: 2.55rem
  }

  .mx-service-row {
    min-height: 120px;
    padding: 21px;
    border-radius: 22px
  }

  .mx-service-row h3 {
    font-size: 1.12rem
  }

  .mx-service-row p {
    font-size: .7rem
  }

  .mx-service-row>strong {
    font-size: 1rem;
    width: 36px;
    height: 36px
  }

  .mx-solution-feature {
    min-height: 520px
  }

  .mx-solution-content {
    left: 22px;
    right: 22px;
    bottom: 25px
  }

  .mx-solution-content h3 {
    font-size: 2rem
  }

  .mx-cap-image img {
    height: 420px
  }

  .mx-cap-stamp {
    bottom: 18px
  }

  .mx-work-main {
    min-height: 430px
  }

  .mx-work-main div {
    left: 22px;
    right: 22px;
    bottom: 22px
  }

  .mx-work-side {
    grid-template-columns: 1fr
  }

  .mx-work-side a {
    min-height: 260px
  }

  .mx-resource-grid>a {
    min-height: 330px
  }

  .mx-cta {
    padding: 85px 0
  }

  .mx-cta h2 {
    font-size: 3rem
  }
}

/* 2026 refinement: unified type, client section, premium service / tech / resource compositions */
.home-reimagined {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px
}

.home-reimagined h1,
.home-reimagined h2,
.home-reimagined h3,
.home-reimagined p,
.home-reimagined a,
.home-reimagined span,
.home-reimagined strong,
.home-reimagined b {
  font-family: inherit
}

.home-reimagined h1,
.home-reimagined h2,
.home-reimagined h3 {
  font-family: Manrope, Inter, system-ui, sans-serif
}

.home-reimagined p {
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.78
}

.home-reimagined .mx-section-kicker,
.home-reimagined .mx-eyebrow {
  font-size: .67rem;
  line-height: 1.3
}

.home-reimagined .mx-btn,
.home-reimagined .mx-underlink,
.home-reimagined .mx-hero-tags span,
.home-reimagined .mx-tech-wall span {
  font-size: .74rem
}

.mx-clients {
  padding: 86px 0 94px;
  background: #fffdf9;
  border-top: 1px solid #eceaf0;
  border-bottom: 1px solid #e8e5ed
}

.mx-client-head {
  display: grid;
  grid-template-columns: 1.05fr .7fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 38px
}

.mx-client-head h2 {
  font-size: clamp(2.3rem, 4vw, 4.6rem);
  line-height: .98;
  margin: 14px 0 0;
  max-width: 820px
}

.mx-client-head p {
  color: #6e7487;
  margin: 0;
  max-width: 540px
}

.mx-client-cloud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

.mx-client-cloud span {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 18px;
  border: 1px solid #e2e0e8;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f7f5fb);
  font-size: .8rem;
  font-weight: 850;
  color: #2a3148;
  box-shadow: 0 10px 25px rgba(25, 30, 55, .035);
  transition: .3s
}

.mx-client-cloud span:hover {
  transform: translateY(-4px);
  border-color: #b8c1f5;
  background: #f5f6ff;
  box-shadow: 0 18px 35px rgba(50, 64, 130, .09)
}

.mx-client-note {
  margin-top: 16px;
  padding: 16px 19px;
  border-radius: 999px;
  background: #11172d;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .73rem
}

.mx-client-note .mx-client-spark {
  color: var(--mx-cyan);
  font-size: 1rem
}

.mx-client-note a {
  margin-left: auto;
  color: var(--mx-cyan);
  font-weight: 850;
  text-decoration: none
}

.mx-client-note b {
  margin-left: 5px
}

.mx-service-heading {
  margin-bottom: 38px
}

.mx-service-heading h2 {
  max-width: 820px
}

.mx-service-featured {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 14px;
  align-items: stretch
}

.mx-service-lead {
  min-height: 620px;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  text-decoration: none;
  color: #fff;
  background: #11172d;
  box-shadow: 0 22px 60px rgba(20, 25, 50, .09)
}

.mx-service-lead-image {
  position: absolute;
  inset: 0
}

.mx-service-lead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s
}

.mx-service-lead:hover img {
  transform: scale(1.045)
}

.mx-service-lead:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 13, 30, .03) 25%, rgba(9, 13, 30, .94) 100%)
}

.mx-service-lead-copy {
  position: absolute;
  z-index: 2;
  left: 34px;
  right: 34px;
  bottom: 34px
}

.mx-service-label {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--mx-cyan)
}

.mx-service-lead h3 {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1;
  margin: 12px 0;
  letter-spacing: -.05em
}

.mx-service-lead p {
  color: #c3c8d5;
  max-width: 590px;
  margin: 0 0 18px
}

.mx-service-lead b {
  font-size: .72rem;
  color: #fff
}

.mx-service-lead b span {
  color: var(--mx-cyan);
  margin-left: 5px
}

.mx-service-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.mx-service-mini-grid a {
  position: relative;
  display: grid;
  grid-template-columns: 45px 1fr 25px;
  gap: 12px;
  align-items: start;
  min-height: 0;
  padding: 27px 25px;
  border: 1px solid #dfdde6;
  border-radius: 28px;
  background: rgba(255, 255, 255, .84);
  color: var(--mx-ink);
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(30, 34, 55, .035);
  transition: .35s
}

.mx-service-mini-grid a:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, #11172d, #202b52);
  opacity: 0;
  transition: .35s;
  z-index: 0
}

.mx-service-mini-grid a>* {
  position: relative;
  z-index: 1
}

.mx-service-mini-grid a:hover {
  transform: translateY(-5px);
  color: #fff;
  border-color: #11172d;
  box-shadow: 0 22px 45px rgba(15, 20, 42, .14)
}

.mx-service-mini-grid a:hover:after {
  opacity: 1
}

.mx-service-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #eef0ff;
  color: var(--mx-blue);
  font-weight: 900;
  font-size: .92rem
}

.mx-service-mini-grid a:hover .mx-service-icon {
  background: rgba(81, 219, 195, .13);
  color: var(--mx-cyan)
}

.mx-service-mini-grid h3 {
  font-size: 1.05rem;
  line-height: 1.12;
  margin: 1px 0 7px
}

.mx-service-mini-grid p {
  font-size: .73rem;
  line-height: 1.6;
  color: #74798b;
  margin: 0
}

.mx-service-mini-grid a:hover p {
  color: #b9bfd0
}

.mx-service-mini-grid a>b {
  font-size: 1rem;
  text-align: right;
  color: var(--mx-blue)
}

.mx-service-mini-grid a:hover>b {
  color: var(--mx-cyan)
}

.mx-tech {
  position: relative
}

.mx-tech:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 50%, rgba(81, 219, 195, .11), transparent 24%), radial-gradient(circle at 20% 15%, rgba(79, 99, 255, .13), transparent 30%);
  pointer-events: none
}

.mx-tech-grid {
  position: relative;
  z-index: 1
}

.mx-tech-copy h2 {
  max-width: 680px
}

.mx-tech-copy p {
  font-size: .95rem
}

.mx-tech-showcase {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 34px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05)
}

.mx-tech-intro-card {
  padding: 23px;
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(79, 99, 255, .17), rgba(81, 219, 195, .08));
  border: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 17px
}

.mx-tech-intro-card span {
  display: block;
  color: var(--mx-cyan);
  font-size: .59rem;
  letter-spacing: .15em;
  font-weight: 900;
  margin-bottom: 9px
}

.mx-tech-intro-card strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  display: block;
  max-width: 420px
}

.mx-tech-wall {
  gap: 9px
}

.mx-tech-wall span {
  padding: 12px 15px;
  font-size: .7rem
}

.mx-resource-grid-premium {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.mx-resource-grid-premium>a {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column
}

.mx-resource-art {
  height: 170px;
  position: relative;
  overflow: hidden
}

.mx-resource-art:before,
.mx-resource-art:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28)
}

.mx-resource-art:before {
  width: 230px;
  height: 230px;
  right: -65px;
  top: -90px
}

.mx-resource-art:after {
  width: 120px;
  height: 120px;
  left: 25px;
  bottom: -65px
}

.mx-resource-art-one {
  background: linear-gradient(135deg, #171d45, #4f63ff)
}

.mx-resource-art-two {
  background: linear-gradient(135deg, #0d3a43, #51dbc3)
}

.mx-resource-art-three {
  background: linear-gradient(135deg, #3b285e, #b9b4ff)
}

.mx-resource-art>span {
  position: absolute;
  left: 25px;
  bottom: 22px;
  color: #fff !important;
  font-size: 1.7rem !important;
  letter-spacing: -.04em !important;
  font-weight: 900 !important;
  z-index: 2
}

.mx-resource-body {
  padding: 27px 29px 31px;
  flex: 1;
  position: relative;
  min-height: 255px
}

.mx-resource-body>span {
  font-size: .58rem !important;
  letter-spacing: .15em;
  font-weight: 900;
  color: var(--mx-blue) !important
}

.mx-resource-body h3 {
  font-size: 1.35rem;
  line-height: 1.08;
  margin: 18px 0 11px
}

.mx-resource-body p {
  font-size: .74rem;
  color: #71778b;
  line-height: 1.7
}

.mx-resource-body b {
  position: absolute;
  left: 29px;
  bottom: 25px;
  font-size: .68rem;
  color: var(--mx-blue)
}

.mx-resource-grid-premium>a:hover .mx-resource-body b {
  color: var(--mx-cyan)
}

/* Inner service SEO content */
.service-seo-content {
  background: #f7f9fc !important
}

.service-seo-panel {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 70px;
  align-items: center;
  padding: 54px;
  border-radius: 32px;
  background: linear-gradient(135deg, #08162c, #10284a);
  color: #fff;
  box-shadow: 0 30px 80px rgba(7, 23, 45, .12);
  overflow: hidden;
  position: relative
}

.service-seo-panel:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(0, 201, 255, .16);
  right: -120px;
  top: -140px;
  box-shadow: 0 0 0 55px rgba(0, 201, 255, .025), 0 0 0 110px rgba(0, 201, 255, .02)
}

.service-seo-copy,
.service-seo-panel ul {
  position: relative;
  z-index: 1
}

.service-seo-copy .eyebrow {
  color: #69e0ff
}

.service-seo-copy h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 12px 0 18px
}

.service-seo-copy p {
  color: #b9c8da;
  line-height: 1.85;
  max-width: 720px
}

.service-seo-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px
}

.service-seo-panel li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: rgba(255, 255, 255, .045);
  font-size: .8rem;
  line-height: 1.5;
  color: #e6edf5
}

.service-seo-panel li>span {
  color: #69e0ff;
  font-weight: 900
}

/* Remove rigid numbering from service problem lists */
.p-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #eaf6ff !important;
  color: #1677ff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1rem !important;
  font-weight: 900 !important
}

@media(max-width:1000px) {

  .mx-client-head,
  .mx-service-featured,
  .service-seo-panel {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .mx-client-cloud {
    grid-template-columns: repeat(2, 1fr)
  }

  .mx-service-lead {
    min-height: 540px
  }

  .mx-tech-showcase {
    margin-top: 10px
  }

  .service-seo-panel {
    padding: 36px
  }
}

@media(max-width:760px) {
  .mx-clients {
    padding: 70px 0
  }

  .mx-client-head {
    gap: 18px
  }

  .mx-client-head h2 {
    font-size: 2.5rem
  }

  .mx-client-cloud {
    grid-template-columns: 1fr 1fr
  }

  .mx-client-cloud span {
    min-height: 68px;
    font-size: .72rem
  }

  .mx-client-note {
    border-radius: 24px;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .mx-client-note a {
    width: 100%;
    margin-left: 31px
  }

  .mx-service-featured {
    gap: 12px
  }

  .mx-service-mini-grid {
    grid-template-columns: 1fr
  }

  .mx-service-lead {
    min-height: 500px
  }

  .mx-service-lead-copy {
    left: 24px;
    right: 24px;
    bottom: 25px
  }

  .mx-service-lead h3 {
    font-size: 2.35rem
  }

  .mx-tech-showcase {
    padding: 18px;
    border-radius: 27px
  }

  .mx-resource-grid-premium {
    grid-template-columns: 1fr
  }

  .mx-resource-art {
    height: 145px
  }

  .service-seo-panel {
    padding: 28px 22px;
    border-radius: 26px
  }

  .service-seo-copy h2 {
    font-size: 2.25rem
  }
}

@media(max-width:520px) {
  .home-reimagined {
    font-size: 15px
  }

  .home-reimagined h1,
  .home-reimagined h2,
  .home-reimagined h3 {
    letter-spacing: -.045em
  }

  .mx-client-cloud {
    grid-template-columns: 1fr
  }

  .mx-client-note {
    font-size: .68rem
  }

  .mx-service-lead {
    min-height: 470px
  }

  .mx-service-lead h3 {
    font-size: 2rem
  }

  .mx-service-mini-grid a {
    padding: 22px 19px
  }

  .mx-resource-body {
    min-height: 270px;
    padding: 23px
  }

  .mx-resource-body b {
    left: 23px
  }

  .service-seo-panel li {
    font-size: .74rem
  }
}

/* 2026-09 creative refinement: technology + group companies */
.v3-tech-premium {
  background: linear-gradient(135deg, #0b1226 0%, #101b3b 58%, #0b2030 100%) !important;
  color: #fff;
  border-radius: 38px;
  margin: 0 18px;
  position: relative;
  overflow: hidden
}

.v3-tech-premium:before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(102, 228, 220, .13);
  border-radius: 50%;
  right: -190px;
  top: -220px;
  box-shadow: 0 0 0 70px rgba(102, 228, 220, .025), 0 0 0 140px rgba(40, 87, 255, .025);
  pointer-events: none
}

.v3-tech-premium .v3-tech-copy,
.v3-tech-premium .v3-tech-visual {
  position: relative;
  z-index: 2
}

.v3-tech-premium h2 {
  max-width: 760px;
  font-size: clamp(2.6rem, 4.5vw, 5rem);
  line-height: .98;
  letter-spacing: -.055em
}

.v3-tech-premium p {
  color: #aeb9ce;
  max-width: 720px;
  line-height: 1.85
}

.v3-tech-capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 30px 0 20px;
  max-width: 760px
}

.v3-tech-capabilities>div {
  padding: 18px 19px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(10px)
}

.v3-tech-capabilities strong {
  display: block;
  font-size: .78rem;
  color: #fff;
  margin-bottom: 5px
}

.v3-tech-capabilities span {
  display: block;
  color: #8997b0;
  font-size: .68rem;
  line-height: 1.55
}

.v3-tech-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important
}

.v3-tech-cloud span {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #d7dfed !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: .62rem !important
}

.v3-tech-visual-premium {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.v3-ai-orbit {
  width: 300px;
  height: 300px;
  border: 1px solid rgba(102, 228, 220, .15);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: 0 0 80px rgba(40, 87, 255, .12)
}

.v3-ai-orbit:before,
.v3-ai-orbit:after {
  content: "";
  position: absolute;
  border: 1px dashed rgba(102, 228, 220, .16);
  border-radius: 50%
}

.v3-ai-orbit:before {
  inset: 34px
}

.v3-ai-orbit:after {
  inset: 76px
}

.orbit-core {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2857ff, #66e4dc);
  color: #081329;
  font-weight: 950;
  font-size: 1.45rem;
  box-shadow: 0 0 55px rgba(102, 228, 220, .28)
}

.orbit-dot {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111d3c;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #bcefe9;
  font-size: .53rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
}

.orbit-dot-one {
  top: 20px;
  left: 123px
}

.orbit-dot-two {
  right: 16px;
  top: 122px
}

.orbit-dot-three {
  bottom: 18px;
  left: 123px
}

.orbit-dot-four {
  left: 16px;
  top: 122px
}

.v3-tech-console {
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 285px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(7, 13, 30, .76);
  backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .25)
}

.console-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #73819a;
  font-size: .49rem;
  letter-spacing: .12em
}

.console-top b {
  color: #66e4dc;
  font-size: .48rem
}

.console-main {
  margin-top: 14px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .04)
}

.console-main small {
  display: block;
  color: #66e4dc;
  font-size: .48rem;
  letter-spacing: .12em
}

.console-main strong {
  display: block;
  color: #fff;
  font-size: .8rem;
  margin: 7px 0
}

.console-main span {
  display: block;
  color: #7f8ba2;
  font-size: .58rem;
  line-height: 1.5
}

.console-bars {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 46px;
  margin-top: 15px
}

.console-bars i {
  display: block;
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(#66e4dc, #2857ff);
  opacity: .8
}

.console-bars i:nth-child(1) {
  height: 38%
}

.console-bars i:nth-child(2) {
  height: 63%
}

.console-bars i:nth-child(3) {
  height: 48%
}

.console-bars i:nth-child(4) {
  height: 86%
}

.v3-group-section {
  background: #f5f7fc !important
}

.v3-group-head {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 38px
}

.v3-group-head h2 {
  font-size: clamp(2.5rem, 4.2vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.055em;
  max-width: 800px;
  margin: 13px 0 0
}

.v3-group-head p {
  color: #66738b;
  line-height: 1.8;
  margin: 0
}

.v3-group-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.v3-group-company {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 24px;
  border: 1px solid #dde4ef;
  border-radius: 26px;
  background: #fff;
  color: #101a36;
  text-decoration: none;
  transition: .35s;
  box-shadow: 0 10px 35px rgba(16, 26, 54, .035)
}

.v3-group-company:hover {
  transform: translateY(-5px);
  border-color: #b7c9ff;
  box-shadow: 0 24px 55px rgba(16, 26, 54, .1)
}

.v3-group-logo {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: #f4f7ff;
  border: 1px solid #e0e7f4;
  display: grid;
  place-items: center;
  overflow: hidden
}

.v3-group-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain
}

.v3-group-company span {
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .14em;
  color: #52617e
}

.v3-group-company h3 {
  font-size: 1.15rem;
  margin: 7px 0 6px;
  letter-spacing: -.03em
}

.v3-group-company p {
  font-size: .68rem;
  color: #68758a;
  line-height: 1.6;
  margin: 0
}

.v3-group-company>b {
  font-size: .62rem;
  color: #2857ff;
  white-space: nowrap;
  padding-top: 5px
}

.v3-group-company>b em {
  font-style: normal;
  margin-left: 3px
}

.v3-group-footer {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #101a36;
  color: #aebbd0;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: .7rem
}

.v3-group-footer strong {
  color: #66e4dc
}

@media(max-width:900px) {
  .v3-tech-premium {
    margin: 0 10px
  }

  .v3-group-head {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .v3-group-list {
    grid-template-columns: 1fr
  }

  .v3-tech-visual-premium {
    min-height: 450px
  }

  .v3-tech-console {
    right: 0
  }
}

@media(max-width:600px) {
  .v3-tech-premium {
    border-radius: 25px
  }

  .v3-tech-capabilities {
    grid-template-columns: 1fr
  }

  .v3-ai-orbit {
    width: 245px;
    height: 245px
  }

  .orbit-core {
    width: 78px;
    height: 78px
  }

  .orbit-dot {
    width: 46px;
    height: 46px
  }

  .orbit-dot-one {
    top: 12px;
    left: 100px
  }

  .orbit-dot-two {
    right: 8px;
    top: 100px
  }

  .orbit-dot-three {
    bottom: 10px;
    left: 100px
  }

  .orbit-dot-four {
    left: 8px;
    top: 100px
  }

  .v3-tech-console {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(285px, 90%);
    margin-top: -30px
  }

  .v3-tech-visual-premium {
    display: flex;
    flex-direction: column;
    min-height: 390px
  }

  .v3-group-company {
    grid-template-columns: 48px 1fr
  }

  .v3-group-company>b {
    grid-column: 2
  }

  .v3-group-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px
  }

  .v3-group-company h3 {
    font-size: 1rem
  }

  .v3-group-footer {
    align-items: flex-start;
    flex-direction: column
  }
}

/* ===== V4 SERVICE BENTO - MOBILE RESPONSIVE ===== */
@media (max-width: 760px) {

  .v4service-bento {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: minmax(150px, auto) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .v4service-bento>* {
    min-width: 0 !important;
    width: auto !important;
  }

}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {

  .container {
    padding: 18px 18px !important;
  }

  .brand-glyph-img {
    height: 38px !important;
  }

}


/* ===== HIDE WEBSITE AUDIT BUTTON ON MOBILE ===== */

@media (max-width: 760px) {



  a.btn.btn-primary.btn-sm[href="/website-audit"] {

    display: none !important;

  }



}