/* =========================================================
   DAWN — RETAIL & ECOMMERCE INDUSTRY PAGE
========================================================= */

.retail-page {
  --retail-blue: #245dff;
  --retail-cyan: #23b7d8;
  --retail-navy: #07162f;
  --retail-heading: #14213d;
  --retail-text: #5f6d84;
  --retail-line: #e1e7f0;

  overflow: hidden;
}

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

.retail-container {
  position: relative;
  z-index: 4;

  width: calc(100% - 96px);
  max-width: 1680px;

  margin: 0 auto;
}

.retail-label {
  display: block;

  margin-bottom: 12px;

  color: #245dff;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.retail-label.light {
  color: #96b1ff;
}


/* =========================================================
   HERO
========================================================= */

.retail-hero {
  position: relative;

  min-height: 760px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: #06152f;
}

.retail-hero-bg {
  position: absolute;
  inset: 0;

  background-image:
    url("../images/retail-ecommerce.webp");

  background-size: cover;
  background-position: center;

  transform: scale(1.04);

  animation:
    retailHeroMove 18s ease-in-out infinite alternate;
}

@keyframes retailHeroMove {
  to {
    transform:
      scale(1.09)
      translate3d(1.2%,-.7%,0);
  }
}

.retail-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2,12,31,.99) 0%,
      rgba(4,18,45,.97) 40%,
      rgba(7,29,67,.78) 71%,
      rgba(7,29,67,.42) 100%
    );
}

.retail-hero-grid,
.retail-int-grid,
.retail-ai-grid,
.retail-process-grid,
.retail-why-grid,
.retail-cta-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.1) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
}

.retail-hero-grid {
  opacity: .08;
}

.retail-orb,
.retail-who-orb,
.retail-services-orb,
.retail-stack-orb,
.retail-faq-orb {
  position: absolute;

  border-radius: 50%;
  filter: blur(110px);

  pointer-events: none;
}

.retail-orb-one {
  width: 490px;
  height: 490px;

  right: 3%;
  top: -170px;

  background: rgba(36,93,255,.34);
}

.retail-orb-two {
  width: 300px;
  height: 300px;

  left: 30%;
  bottom: -180px;

  background: rgba(35,183,216,.16);
}

.retail-beam,
.retail-cta-beam {
  position: absolute;

  width: 720px;
  height: 1px;

  opacity: .38;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(126,166,255,.92),
      transparent
    );
}

.retail-beam-one {
  left: -750px;
  top: 30%;

  animation: retailBeamForward 6.8s linear infinite;
}

.retail-beam-two {
  right: -750px;
  bottom: 23%;

  animation: retailBeamBackward 8s linear infinite;
}

@keyframes retailBeamForward {
  to { left: 110%; }
}

@keyframes retailBeamBackward {
  to { right: 110%; }
}

.retail-hero-copy {
  max-width: 1090px;

  padding: 130px 0 78px;
}

.retail-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #91adff;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.retail-eyebrow::before {
  content: "";

  width: 40px;
  height: 2px;

  background: #245dff;
}

.retail-hero h1 {
  max-width: 1090px;

  margin: 23px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: clamp(58px,5.6vw,89px);
  font-weight: 600;

  line-height: .99;
  letter-spacing: -.057em;
}

.retail-hero h1 span {
  display: block;

  color: #8facff;
}

.retail-hero-lead {
  max-width: 850px;

  margin: 28px 0 0;

  color: rgba(242,246,253,.9);

  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
}

.retail-hero-support {
  max-width: 850px;

  margin: 12px 0 0;

  color: rgba(220,229,244,.68);

  font-size: 14px;
  line-height: 1.72;
}

.retail-hero-signals {
  margin-top: 27px;

  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}

.retail-hero-signals > div {
  min-height: 52px;

  padding: 7px 15px 7px 7px;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 999px;

  background: rgba(255,255,255,.05);

  backdrop-filter: blur(10px);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.retail-hero-signals > div:hover {
  transform: translateY(-4px);

  border-color: rgba(136,170,255,.5);

  background: rgba(36,93,255,.13);
}

.retail-signal-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #9ab5ff;

  background: rgba(36,93,255,.17);

  font-size: 13px;
}

.retail-hero-signals > div > span:last-child {
  display: flex;
  flex-direction: column;

  gap: 1px;
}

.retail-hero-signals small {
  color: rgba(150,180,255,.75);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}

.retail-hero-signals strong {
  color: rgba(255,255,255,.78);

  font-size: 10px;
}

.retail-hero-actions {
  margin-top: 32px;

  display: flex;
  align-items: center;

  gap: 27px;
}

.retail-primary-btn,
.retail-cta-btn {
  display: inline-flex;
  align-items: center;

  color: #fff;

  background:
    linear-gradient(
      120deg,
      #245dff,
      #5383ff
    );

  text-decoration: none;
  font-weight: 700;

  border-radius: 999px;

  box-shadow:
    0 18px 50px rgba(36,93,255,.35);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.retail-primary-btn {
  min-height: 58px;

  padding: 7px 7px 7px 22px;

  gap: 18px;

  font-size: 12px;
}

.retail-primary-btn i,
.retail-cta-btn i {
  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,.18);

  font-style: normal;

  transition: transform .3s ease;
}

.retail-primary-btn i {
  width: 43px;
  height: 43px;
}

.retail-primary-btn:hover,
.retail-cta-btn:hover {
  transform: translateY(-4px);

  box-shadow:
    0 26px 65px rgba(36,93,255,.48);
}

.retail-primary-btn:hover i,
.retail-cta-btn:hover i {
  transform: rotate(45deg);
}

.retail-secondary-link {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: rgba(255,255,255,.78);

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    color .25s ease,
    transform .25s ease;
}

.retail-secondary-link:hover {
  color: #fff;

  transform: translateX(4px);
}


/* =========================================================
   COMMON
========================================================= */

.retail-context h2,
.retail-section-head h2,
.retail-services-head h2,
.retail-int-copy h2,
.retail-scale-head h2,
.retail-ai-head h2,
.retail-modern-copy h2,
.retail-stack-headline h2,
.retail-process-head h2,
.retail-quality-copy h2,
.retail-why-head h2,
.retail-faq-head h2 {
  margin: 0;

  font-family: Manrope, sans-serif;
  font-weight: 600;

  letter-spacing: -.047em;
  line-height: 1.05;
}

.retail-dot-bg,
.retail-who-pattern,
.retail-solutions-pattern,
.retail-modern-pattern,
.retail-stack-pattern,
.retail-quality-pattern,
.retail-engage-pattern,
.retail-faq-pattern {
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(36,93,255,.065) 1px,
      transparent 1px
    );

  background-size: 29px 29px;
}

.retail-context-word,
.retail-services-word,
.retail-solutions-word,
.retail-modern-word,
.retail-engage-word {
  position: absolute;

  color: rgba(36,93,255,.025);

  font-family: Manrope, sans-serif;
  font-weight: 800;
  letter-spacing: -.06em;
}


/* =========================================================
   CONTEXT
========================================================= */

.retail-context {
  position: relative;
  overflow: hidden;

  padding: 88px 0;

  background: #fff;
}

.retail-dot-bg {
  opacity: .35;
}

.retail-context-word {
  right: -30px;
  top: -80px;

  font-size: clamp(110px,15vw,230px);
}

.retail-context-layout {
  display: grid;

  grid-template-columns: .8fr 1fr;

  gap: 95px;
}

.retail-context h2 {
  color: #14213d;

  font-size: clamp(42px,3.8vw,58px);
}

.retail-context h2 span {
  display: block;

  color: #245dff;
}

.retail-context-copy {
  padding-left: 30px;

  border-left: 1px solid #e1e7f0;
}

.retail-context-copy p {
  margin: 0 0 13px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-context-lead {
  color: #30405b !important;

  font-size: 16px !important;
  font-weight: 500;
}

.retail-context-flow {
  margin-top: 40px;

  display: grid;

  grid-template-columns:
    1fr 25px
    1fr 25px
    1fr 25px
    1fr 25px
    1.1fr;

  gap: 7px;

  align-items: center;
}

.retail-context-flow > div {
  min-height: 98px;

  padding: 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1px solid #e1e7f0;

  border-radius: 12px;

  background: rgba(255,255,255,.96);

  box-shadow: 0 7px 20px rgba(25,45,80,.025);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.retail-context-flow > div:hover {
  transform: translateY(-5px);

  border-color: #b9c8f0;

  box-shadow:
    0 17px 35px rgba(36,93,255,.09);
}

.retail-context-flow span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.retail-context-flow strong {
  margin-top: 8px;

  color: #26354f;

  font-family: Manrope, sans-serif;
  font-size: 13px;
}

.retail-context-flow > i {
  color: #9aa7bd;

  text-align: center;
  font-style: normal;
}

.retail-flow-result {
  border-color: #245dff !important;

  background:
    linear-gradient(
      135deg,
      #0b2b62,
      #245dff
    ) !important;
}

.retail-flow-result span {
  color: #adc3ff;
}

.retail-flow-result strong {
  color: #fff;
}


/* =========================================================
   WHO
========================================================= */

.retail-who {
  position: relative;
  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f5f8fc,
      #fff
    );
}

.retail-who-pattern {
  opacity: .32;
}

.retail-who-orb {
  width: 430px;
  height: 430px;

  right: -210px;
  top: -180px;

  background: rgba(36,93,255,.07);
}

.retail-section-head {
  max-width: 940px;

  margin-bottom: 36px;
}

.retail-section-head h2 {
  color: #14213d;

  font-size: clamp(42px,3.8vw,59px);
}

.retail-section-head h2 span {
  display: block;

  color: #245dff;
}

.retail-section-head > p {
  max-width: 770px;

  margin-top: 16px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-who-grid {
  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 13px;
}

.retail-who-card {
  position: relative;

  min-height: 220px;

  padding: 21px;

  overflow: hidden;

  border: 1px solid #e0e6ef;

  border-radius: 15px;

  background: #fff;

  box-shadow: 0 8px 25px rgba(22,42,80,.025);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.retail-who-card::before {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #245dff,
      #23b7d8
    );

  transition: right .35s ease;
}

.retail-who-card:hover {
  transform: translateY(-7px);

  border-color: #b9caf5;

  box-shadow:
    0 24px 50px rgba(36,93,255,.10);
}

.retail-who-card:hover::before {
  right: 0;
}

.retail-who-no {
  position: absolute;

  right: 18px;
  top: 18px;

  color: #9aa5b5;

  font-size: 8px;
  font-weight: 800;
}

.retail-who-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #245dff;

  background: #eef3ff;

  font-size: 16px;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}

.retail-who-card:hover .retail-who-icon {
  transform: rotate(-7deg) scale(1.08);

  color: #fff;

  background: #245dff;
}

.retail-who-card h3 {
  margin: 25px 0 0;

  color: #192741;

  font-family: Manrope, sans-serif;
  font-size: 17px;
}

.retail-who-card p {
  margin-top: 9px;

  color: #617087;

  font-size: 13px;
  line-height: 1.62;
}


/* =========================================================
   SERVICES
========================================================= */

.retail-services {
  position: relative;
  overflow: hidden;

  padding: 92px 0;

  background:
    linear-gradient(
      145deg,
      #06152f,
      #0a2b64
    );
}

.retail-services-grid-bg {
  position: absolute;
  inset: 0;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(255,255,255,.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.1) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
}

.retail-services-orb {
  width: 470px;
  height: 470px;

  right: -190px;
  top: -180px;

  background: rgba(36,93,255,.35);
}

.retail-services-word {
  right: -20px;
  bottom: -60px;

  color: rgba(255,255,255,.025);

  font-size: clamp(120px,15vw,230px);
}

.retail-services-head {
  display: grid;

  grid-template-columns: 1fr .75fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 38px;
}

.retail-services-head h2 {
  color: #fff;

  font-size: clamp(42px,3.8vw,59px);
}

.retail-services-head h2 span {
  display: block;

  color: #8facff;
}

.retail-services-head > div:last-child p {
  margin: 0 0 10px;

  color: rgba(221,230,246,.68);

  font-size: 14px;
  line-height: 1.72;
}

.retail-services-grid {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 14px;
}

.retail-service {
  position: relative;

  padding: 23px;

  border: 1px solid rgba(255,255,255,.11);

  border-radius: 15px;

  background: rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.retail-service::after {
  content: "";

  position: absolute;

  inset: auto 24px 0 24px;

  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #7ea1ff,
      transparent
    );

  transition: opacity .3s ease;
}

.retail-service:hover {
  transform: translateY(-8px);

  border-color: rgba(141,175,255,.42);

  background: rgba(255,255,255,.07);

  box-shadow:
    0 25px 55px rgba(0,0,0,.14);
}

.retail-service:hover::after {
  opacity: 1;
}

.retail-service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.retail-service-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #9db7ff;

  background: rgba(36,93,255,.17);

  font-size: 15px;

  transition:
    transform .3s ease,
    background .3s ease;
}

.retail-service:hover .retail-service-icon {
  transform:
    translateY(-3px)
    rotate(-5deg);

  background: rgba(36,93,255,.3);
}

.retail-service-top small {
  color: rgba(255,255,255,.3);

  font-size: 8px;
  font-weight: 800;
}

.retail-service h3 {
  margin: 25px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: 20px;

  line-height: 1.3;
}

.retail-service > p {
  margin-top: 10px;

  color: rgba(220,230,246,.68);

  font-size: 13px;
  line-height: 1.66;
}

.retail-service ul {
  margin: 15px 0 0;

  padding: 0;

  list-style: none;
}

.retail-service li {
  padding: 7px 0;

  border-bottom: 1px solid rgba(255,255,255,.08);

  color: rgba(255,255,255,.72);

  font-size: 12px;
}

.retail-service-featured {
  border-color: rgba(133,169,255,.6);

  background:
    linear-gradient(
      145deg,
      rgba(36,93,255,.42),
      rgba(36,93,255,.11)
    );
}

.retail-service-tag {
  position: absolute;

  right: 0;
  top: 0;

  padding: 8px 10px;

  color: #c3d3ff;

  background: rgba(255,255,255,.11);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-card-link {
  margin-top: 18px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: #9cb7ff;

  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  transition:
    color .25s ease,
    transform .25s ease;
}

.retail-card-link:hover {
  color: #fff;

  transform: translateX(4px);
}


/* =========================================================
   SOLUTIONS
========================================================= */

.retail-solutions {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background: #fff;
}

.retail-solutions-pattern {
  opacity: .3;
}

.retail-solutions-word {
  right: -40px;
  top: -80px;

  font-size: clamp(110px,15vw,225px);
}

.retail-solution-console {
  display: grid;

  grid-template-columns: 330px 1fr;

  min-height: 460px;

  overflow: hidden;

  border: 1px solid #dfe5ee;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 23px 60px rgba(22,42,80,.07);
}

.retail-solution-nav {
  border-right: 1px solid #e1e7f0;

  background: #f7f9fc;
}

.retail-solution-tab {
  width: 100%;
  min-height: 71px;

  padding: 0 19px;

  display: grid;

  grid-template-columns: 28px 1fr;

  gap: 10px;

  align-items: center;

  border: 0;
  border-bottom: 1px solid #e1e7f0;

  color: #536078;

  background: transparent;

  text-align: left;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color .25s ease,
    background .25s ease,
    padding-left .25s ease;
}

.retail-solution-tab:hover {
  padding-left: 24px;

  color: #245dff;

  background: #f0f4ff;
}

.retail-solution-tab span {
  color: #9ba5b4;

  font-size: 8px;
}

.retail-solution-tab.active {
  color: #245dff;

  background: #edf3ff;
}

.retail-solution-tab.active span {
  color: #245dff;
}

.retail-solution-panels {
  position: relative;

  min-height: 460px;
}

.retail-solution-panel {
  position: absolute;
  inset: 0;

  padding: 50px 58px;

  opacity: 0;

  pointer-events: none;

  transform: translateX(22px);

  transition:
    opacity .38s ease,
    transform .38s ease;
}

.retail-solution-panel.active {
  opacity: 1;

  pointer-events: auto;

  transform: translateX(0);
}

.retail-panel-kicker {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.retail-solution-panel h3 {
  max-width: 710px;

  margin: 17px 0 0;

  color: #14213d;

  font-family: Manrope, sans-serif;
  font-size: clamp(28px,2.7vw,43px);
  font-weight: 600;

  line-height: 1.1;
  letter-spacing: -.04em;
}

.retail-solution-panel > p {
  max-width: 740px;

  margin-top: 15px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-panel-grid {
  margin-top: 30px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px;
}

.retail-panel-grid span {
  min-height: 48px;

  padding: 0 15px;

  display: flex;
  align-items: center;

  border: 1px solid #e1e6ef;

  border-radius: 8px;

  color: #4d5b72;

  background: #f8faff;

  font-size: 12px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.retail-panel-grid span:hover {
  transform: translateX(5px);

  border-color: #aebff0;

  background: #f1f5ff;

  box-shadow:
    0 8px 20px rgba(36,93,255,.06);
}


/* =========================================================
   INTEGRATION
========================================================= */

.retail-interoperability {
  position: relative;
  overflow: hidden;

  padding: 92px 0;

  background: #06152f;
}

.retail-int-grid {
  opacity: .075;
}

.retail-int-glow,
.retail-ai-glow,
.retail-process-glow,
.retail-why-glow {
  position: absolute;

  width: 470px;
  height: 470px;

  right: -190px;
  top: -180px;

  border-radius: 50%;

  background: rgba(36,93,255,.33);

  filter: blur(110px);
}

.retail-int-layout {
  display: grid;

  grid-template-columns: .72fr 1.28fr;

  gap: 85px;

  align-items: center;
}

.retail-int-copy h2 {
  color: #fff;

  font-size: clamp(42px,3.7vw,58px);
}

.retail-int-copy h2 span {
  display: block;

  color: #8facff;
}

.retail-int-copy p {
  margin-top: 14px;

  color: rgba(220,230,246,.68);

  font-size: 14px;
  line-height: 1.72;
}

.retail-dark-link,
.retail-light-link {
  margin-top: 21px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .25s ease,
    color .25s ease;
}

.retail-dark-link {
  color: #97b2ff;
}

.retail-light-link {
  color: #245dff;
}

.retail-dark-link:hover,
.retail-light-link:hover {
  transform: translateX(5px);
}

.retail-dark-link:hover {
  color: #fff;
}

.retail-int-system {
  position: relative;

  min-height: 480px;
}

.retail-int-center {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 175px;
  height: 175px;

  transform: translate(-50%,-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.2);

  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #245dff,
      #103d91
    );

  text-align: center;

  box-shadow:
    0 0 60px rgba(36,93,255,.32);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.retail-int-system:hover .retail-int-center {
  transform:
    translate(-50%,-50%)
    scale(1.05);

  box-shadow:
    0 0 90px rgba(36,93,255,.48);
}

.retail-int-center small {
  color: #bfd0ff;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.retail-int-center strong {
  max-width: 120px;

  margin-top: 7px;

  font-family: Manrope, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.retail-int-ring {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%);

  border: 1px solid rgba(133,168,255,.1);

  border-radius: 50%;
}

.retail-ring-one {
  width: 320px;
  height: 320px;

  animation:
    retailRingPulse 5s ease-in-out infinite alternate;
}

.retail-ring-two {
  width: 445px;
  height: 445px;

  animation:
    retailRingPulse 7s ease-in-out infinite alternate-reverse;
}

@keyframes retailRingPulse {
  to {
    opacity: .55;

    transform:
      translate(-50%,-50%)
      scale(1.04);
  }
}

.retail-int-node {
  position: absolute;

  min-width: 125px;

  padding: 13px;

  border: 1px solid rgba(255,255,255,.11);

  border-radius: 11px;

  background: rgba(255,255,255,.045);

  backdrop-filter: blur(10px);

  animation:
    retailNodeFloat 5s ease-in-out infinite alternate;

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.retail-int-node:hover {
  border-color: rgba(137,171,255,.55);

  background: rgba(36,93,255,.16);

  box-shadow:
    0 16px 35px rgba(0,0,0,.2);
}

@keyframes retailNodeFloat {
  to {
    transform: translateY(-7px);
  }
}

.retail-int-node small {
  display: block;

  color: #83a5ff;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-int-node strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 12px;
}

.retail-node-1 {
  left: 3%;
  top: 13%;
}

.retail-node-2 {
  right: 3%;
  top: 13%;

  animation-delay: .5s;
}

.retail-node-3 {
  left: 0;
  top: 49%;

  animation-delay: 1s;
}

.retail-node-4 {
  right: 0;
  top: 49%;

  animation-delay: 1.5s;
}

.retail-node-5 {
  left: 11%;
  bottom: 7%;

  animation-delay: 2s;
}

.retail-node-6 {
  right: 11%;
  bottom: 7%;

  animation-delay: 2.5s;
}


/* =========================================================
   SCALE
========================================================= */

.retail-scale {
  position: relative;
  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f6f8fc,
      #fff
    );
}

.retail-scale-bg {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(36,93,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(36,93,255,.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;
}

.retail-scale-head {
  max-width: 930px;

  margin-bottom: 35px;
}

.retail-scale-head h2 {
  color: #14213d;

  font-size: clamp(42px,3.8vw,58px);
}

.retail-scale-head h2 span {
  color: #245dff;
}

.retail-scale-head p {
  max-width: 770px;

  margin-top: 16px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-scale-grid {
  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 13px;
}

.retail-scale-card {
  position: relative;

  min-height: 215px;

  padding: 21px;

  overflow: hidden;

  border: 1px solid #e0e6ef;

  border-radius: 15px;

  background: #fff;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.retail-scale-card::before {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  top: -45px;

  border-radius: 50%;

  background: rgba(36,93,255,.06);

  transition:
    transform .35s ease,
    background .35s ease;
}

.retail-scale-card:hover {
  transform: translateY(-6px);

  border-color: #bdcaf0;

  box-shadow:
    0 23px 48px rgba(36,93,255,.09);
}

.retail-scale-card:hover::before {
  transform: scale(1.5);

  background: rgba(36,93,255,.1);
}

.retail-scale-card > span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.retail-scale-card h3 {
  margin: 27px 0 0;

  color: #18263f;

  font-family: Manrope, sans-serif;
  font-size: 18px;
}

.retail-scale-card p {
  margin-top: 8px;

  color: #617087;

  font-size: 13px;
  line-height: 1.62;
}

.retail-scale-card small {
  display: block;

  margin-top: 18px;
  padding-top: 11px;

  border-top: 1px solid #e6eaf1;

  color: #245dff;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* =========================================================
   AI
========================================================= */

.retail-ai {
  position: relative;
  overflow: hidden;

  padding: 92px 0;

  background:
    linear-gradient(
      145deg,
      #07162f,
      #0d2d65
    );
}

.retail-ai-grid {
  opacity: .075;
}

.retail-ai-head {
  max-width: 980px;
}

.retail-ai-head h2 {
  color: #fff;

  font-size: clamp(42px,3.8vw,59px);
}

.retail-ai-head h2 span {
  color: #8facff;
}

.retail-ai-head p {
  max-width: 780px;

  margin-top: 16px;

  color: rgba(220,230,246,.68);

  font-size: 14px;
  line-height: 1.72;
}

.retail-ai-grid-cards {
  margin-top: 38px;

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 13px;
}

.retail-ai-card {
  position: relative;

  min-height: 235px;

  padding: 21px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.11);

  border-radius: 14px;

  background: rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.retail-ai-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -70px;
  bottom: -70px;

  border-radius: 50%;

  background: rgba(36,93,255,.1);

  transition: transform .4s ease;
}

.retail-ai-card:hover {
  transform: translateY(-7px);

  border-color: rgba(145,177,255,.45);

  background: rgba(255,255,255,.06);

  box-shadow:
    0 24px 52px rgba(0,0,0,.15);
}

.retail-ai-card:hover::after {
  transform: scale(1.7);
}

.retail-ai-card > span {
  color: #84a6ff;

  font-size: 8px;
  font-weight: 800;
}

.retail-ai-card small {
  display: block;

  margin-top: 28px;

  color: rgba(144,175,255,.72);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-ai-card h3 {
  margin: 8px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: 18px;
  line-height: 1.3;
}

.retail-ai-card p {
  margin-top: 9px;

  color: rgba(220,230,246,.65);

  font-size: 13px;
  line-height: 1.62;
}


/* =========================================================
   MODERNIZATION
========================================================= */

.retail-modern {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background: #fff;
}

.retail-modern-pattern {
  opacity: .3;
}

.retail-modern-word {
  right: -30px;
  bottom: -65px;

  font-size: clamp(105px,14vw,210px);
}

.retail-modern-layout {
  display: grid;

  grid-template-columns: .72fr 1.28fr;

  gap: 80px;

  align-items: center;
}

.retail-modern-copy h2 {
  color: #14213d;

  font-size: clamp(42px,3.7vw,57px);
}

.retail-modern-copy h2 span {
  display: block;

  color: #245dff;
}

.retail-modern-copy p {
  margin-top: 14px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-modern-board {
  overflow: hidden;

  border: 1px solid #dfe5ee;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 22px 55px rgba(22,42,80,.06);
}

.retail-modern-row {
  min-height: 112px;

  padding: 18px 20px;

  display: grid;

  grid-template-columns: 38px 260px 1fr;

  gap: 15px;

  align-items: center;

  border-bottom: 1px solid #e4e9f1;

  transition:
    padding-left .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.retail-modern-row:last-child {
  border-bottom: 0;
}

.retail-modern-row:hover {
  padding-left: 28px;

  background: #f7f9ff;

  box-shadow:
    inset 3px 0 0 #245dff;
}

.retail-modern-row > span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.retail-modern-row small {
  color: #245dff;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-modern-row strong {
  display: block;

  margin-top: 4px;

  color: #18263f;

  font-family: Manrope, sans-serif;
  font-size: 15px;
}

.retail-modern-row p {
  margin: 0;

  color: #617087;

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   STACK
========================================================= */

.retail-stack {
  position: relative;
  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f5f8fc,
      #fff
    );
}

.retail-stack-pattern {
  opacity: .36;
}

.retail-stack-orb {
  width: 430px;
  height: 430px;

  right: -200px;
  top: -180px;

  background: rgba(36,93,255,.07);
}

.retail-stack-headline {
  max-width: 940px;

  margin-bottom: 34px;
}

.retail-stack-headline h2 {
  color: #14213d;

  font-size: clamp(42px,3.8vw,58px);
}

.retail-stack-headline h2 span {
  display: block;

  color: #245dff;
}

.retail-stack-headline p {
  max-width: 750px;

  margin-top: 15px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-stack-console {
  overflow: hidden;

  border: 1px solid #dce3ee;

  border-radius: 19px;

  background: #fff;

  box-shadow:
    0 22px 55px rgba(22,42,80,.065);
}

.retail-stack-title {
  min-height: 58px;

  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  background:
    linear-gradient(
      120deg,
      #091f49,
      #0b2b61
    );
}

.retail-stack-title > div {
  display: flex;
  align-items: center;

  gap: 10px;
}

.retail-stack-status {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #76a0ff;

  box-shadow:
    0 0 14px rgba(118,160,255,.95);

  animation:
    retailStatusPulse 2s ease-in-out infinite alternate;
}

@keyframes retailStatusPulse {
  to {
    opacity: .45;

    box-shadow:
      0 0 25px rgba(118,160,255,1);
  }
}

.retail-stack-title strong {
  color: rgba(255,255,255,.82);

  font-size: 9px;
  letter-spacing: .11em;
}

.retail-stack-title small {
  color: rgba(255,255,255,.43);

  font-size: 7px;
  letter-spacing: .1em;
}

.retail-stack-row {
  min-height: 103px;

  padding: 18px 22px;

  display: grid;

  grid-template-columns:
    minmax(310px,.78fr)
    1.22fr;

  gap: 35px;

  align-items: center;

  border-bottom: 1px solid #e4e9f1;

  transition:
    background .25s ease,
    opacity .25s ease,
    padding-left .25s ease;
}

.retail-stack-row:last-child {
  border-bottom: 0;
}

.retail-stack-row:hover {
  padding-left: 28px;

  background: #f4f7ff;
}

.retail-stack-category {
  display: grid;

  grid-template-columns: 24px 1fr;

  gap: 11px;

  align-items: center;
}

.retail-stack-category > span {
  color: #9ba5b5;

  font-size: 8px;
  font-weight: 800;
}

.retail-stack-category strong {
  display: block;

  color: #26354f;

  font-family: Manrope, sans-serif;
  font-size: 14px;
}

.retail-stack-category small {
  display: block;

  margin-top: 4px;

  color: #8994a6;

  font-size: 10px;
}

.retail-tech-list {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.retail-tech-list span {
  padding: 8px 10px;

  border: 1px solid #dde4ee;

  border-radius: 7px;

  color: #5d6a80;

  background: #f8f9fc;

  font-size: 10px;

  white-space: nowrap;

  transition:
    transform .25s ease,
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.retail-tech-list span:hover {
  transform: translateY(-3px);

  color: #245dff;

  border-color: #afc1f7;

  background: #fff;

  box-shadow:
    0 8px 18px rgba(36,93,255,.08);
}


/* =========================================================
   PROCESS
========================================================= */

.retail-process {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background:
    linear-gradient(
      145deg,
      #07162f,
      #0d2c64
    );
}

.retail-process-grid {
  opacity: .075;
}

.retail-process-head {
  max-width: 920px;
}

.retail-process-head h2 {
  color: #fff;

  font-size: clamp(42px,3.8vw,58px);
}

.retail-process-head h2 span {
  color: #8facff;
}

.retail-process-track {
  margin-top: 38px;

  display: grid;

  grid-template-columns:
    1fr 28px
    1fr 28px
    1fr 28px
    1fr 28px
    1fr;

  gap: 8px;

  align-items: center;
}

.retail-process-card {
  min-height: 215px;

  padding: 20px;

  border: 1px solid rgba(255,255,255,.11);

  border-radius: 14px;

  background: rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.retail-process-card:hover {
  transform: translateY(-7px);

  border-color: rgba(139,172,255,.5);

  background: rgba(255,255,255,.065);

  box-shadow:
    0 22px 45px rgba(0,0,0,.14);
}

.retail-process-card > span {
  color: #85a5ff;

  font-size: 8px;
  font-weight: 800;
}

.retail-process-card small {
  display: block;

  margin-top: 30px;

  color: rgba(141,172,255,.72);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-process-card h3 {
  margin: 7px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: 16px;
}

.retail-process-card p {
  margin-top: 8px;

  color: rgba(220,230,246,.65);

  font-size: 12px;
  line-height: 1.62;
}

.retail-process-track > i {
  color: #8aa9ff;

  text-align: center;
  font-style: normal;
}


/* =========================================================
   QUALITY
========================================================= */

.retail-quality {
  position: relative;
  overflow: hidden;

  padding: 88px 0;

  background: #fff;
}

.retail-quality-pattern {
  opacity: .3;
}

.retail-quality-layout {
  display: grid;

  grid-template-columns: .72fr 1.28fr;

  gap: 80px;

  align-items: start;
}

.retail-quality-copy h2 {
  color: #14213d;

  font-size: clamp(42px,3.7vw,57px);
}

.retail-quality-copy h2 span {
  display: block;

  color: #245dff;
}

.retail-quality-copy p {
  margin-top: 13px;

  color: #5f6d84;

  font-size: 14px;
  line-height: 1.72;
}

.retail-quality-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  border-top: 1px solid #e0e6ef;
  border-left: 1px solid #e0e6ef;
}

.retail-quality-card {
  min-height: 145px;

  padding: 19px;

  border-right: 1px solid #e0e6ef;
  border-bottom: 1px solid #e0e6ef;

  background: rgba(255,255,255,.8);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.retail-quality-card:hover {
  position: relative;
  z-index: 2;

  transform: translateY(-4px);

  background: #f5f8ff;

  box-shadow:
    0 16px 35px rgba(36,93,255,.08);
}

.retail-quality-card span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.retail-quality-card strong {
  display: block;

  margin-top: 27px;

  color: #18263f;

  font-family: Manrope, sans-serif;
  font-size: 16px;
}

.retail-quality-card small {
  display: block;

  margin-top: 7px;

  color: #8c97a8;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* =========================================================
   WHY DAWN
========================================================= */

.retail-why {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background: #06152f;
}

.retail-why-grid {
  opacity: .07;
}

.retail-why-head {
  max-width: 1000px;

  margin-bottom: 37px;
}

.retail-why-head h2 {
  color: #fff;

  font-size: clamp(42px,3.8vw,59px);
}

.retail-why-head h2 span {
  color: #8facff;
}

.retail-why-layout {
  display: grid;

  grid-template-columns: .68fr 1.32fr;

  gap: 75px;
}

.retail-why-copy p {
  margin: 0 0 14px;

  color: rgba(220,230,246,.68);

  font-size: 14px;
  line-height: 1.72;
}

.retail-inline-link {
  margin-top: 19px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #8dabff;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .25s ease,
    color .25s ease;
}

.retail-inline-link:hover {
  transform: translateX(5px);

  color: #fff;
}

.retail-why-cards {
  display: grid;

  grid-template-columns: 1fr 1fr;

  border-top: 1px solid rgba(255,255,255,.11);
  border-left: 1px solid rgba(255,255,255,.11);
}

.retail-why-card {
  min-height: 185px;

  padding: 21px;

  border-right: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(255,255,255,.11);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.retail-why-card:hover {
  position: relative;
  z-index: 2;

  transform: translateY(-5px);

  background: rgba(255,255,255,.06);

  box-shadow:
    0 20px 42px rgba(0,0,0,.16);
}

.retail-why-card > span {
  color: #87a7ff;

  font-size: 8px;
  font-weight: 800;
}

.retail-why-card h3 {
  margin: 26px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: 17px;
}

.retail-why-card p {
  margin-top: 8px;

  color: rgba(220,230,246,.64);

  font-size: 13px;
  line-height: 1.62;
}


/* =========================================================
   ENGAGEMENT
========================================================= */

.retail-engagement {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background:
    linear-gradient(
      180deg,
      #f6f8fc,
      #fff
    );
}

.retail-engage-pattern {
  opacity: .33;
}

.retail-engage-word {
  right: -20px;
  bottom: -70px;

  font-size: clamp(120px,16vw,235px);
}

.retail-engagement-grid {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 15px;
}

.retail-engagement-card {
  position: relative;

  min-height: 405px;

  padding: 23px;

  border: 1px solid #dfe5ee;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 18px 45px rgba(22,42,80,.045);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.retail-engagement-card:hover {
  transform: translateY(-7px);

  border-color: #bdcaf0;

  box-shadow:
    0 28px 60px rgba(36,93,255,.10);
}

.retail-engagement-card > span:first-child {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.retail-engagement-card > small {
  display: block;

  margin-top: 25px;

  color: #929cac;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.retail-engagement-card h3 {
  margin: 8px 0 0;

  color: #18263f;

  font-family: Manrope, sans-serif;
  font-size: 22px;

  line-height: 1.25;
}

.retail-engagement-card > p {
  margin-top: 12px;

  color: #617087;

  font-size: 13px;
  line-height: 1.65;
}

.retail-engagement-card ul {
  margin: 19px 0 60px;

  padding: 0;

  list-style: none;
}

.retail-engagement-card li {
  position: relative;

  padding: 8px 0 8px 15px;

  border-bottom: 1px solid #edf0f4;

  color: #536078;

  font-size: 12px;
}

.retail-engagement-card li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 14px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #245dff;
}

.retail-engagement-card > a {
  position: absolute;

  left: 23px;
  right: 23px;
  bottom: 21px;

  min-height: 47px;

  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #245dff;

  border: 1px solid #cfdbf4;

  border-radius: 999px;

  background: #f7f9ff;

  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.retail-engagement-card > a:hover {
  color: #fff;

  border-color: #245dff;

  background: #245dff;
}

.retail-engagement-card > a i {
  font-style: normal;

  transition: transform .25s ease;
}

.retail-engagement-card > a:hover i {
  transform: rotate(45deg);
}

.retail-engagement-featured {
  border-color: #245dff;

  box-shadow:
    0 24px 62px rgba(36,93,255,.11);
}

.retail-engagement-tag {
  position: absolute;

  right: 0;
  top: 0;

  padding: 8px 10px;

  color: #fff !important;

  background: #245dff;

  font-size: 7px !important;
  font-weight: 800;
  letter-spacing: .1em;
}


/* =========================================================
   CTA
========================================================= */

.retail-cta {
  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);

  min-height: 300px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: #06152f;
}

.retail-cta-bg {
  position: absolute;

  inset: -60% -15%;

  background:
    radial-gradient(
      ellipse at 12% 45%,
      rgba(36,93,255,.58),
      transparent 31%
    ),
    radial-gradient(
      ellipse at 58% 20%,
      rgba(35,183,216,.20),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 92% 67%,
      rgba(36,93,255,.3),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #06132b,
      #0a285b 48%,
      #071831
    );

  animation:
    retailCtaMove 8s ease-in-out infinite alternate;
}

@keyframes retailCtaMove {
  to {
    transform:
      scale(1.08)
      translate3d(3%,2%,0);
  }
}

.retail-cta-grid {
  opacity: .1;
}

.retail-cta-ring {
  position: absolute;

  border: 1px solid rgba(144,177,255,.12);

  border-radius: 50%;

  animation:
    retailRing 22s linear infinite;
}

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

.retail-cta-ring-one {
  width: 420px;
  height: 420px;

  right: 5%;
  top: -225px;
}

.retail-cta-ring-two {
  width: 300px;
  height: 300px;

  right: 8%;
  top: -160px;

  animation-direction: reverse;
}

.retail-cta-ring-three {
  width: 180px;
  height: 180px;

  right: 11%;
  top: -95px;
}

.retail-cta-beam-one {
  left: -700px;
  top: 34%;

  animation: retailBeamForward 6s linear infinite;
}

.retail-cta-beam-two {
  right: -700px;
  bottom: 22%;

  animation: retailBeamBackward 7.5s linear infinite;
}

.retail-cta-inner {
  position: relative;
  z-index: 5;

  width: calc(100% - 96px);
  max-width: 1680px;

  margin: 0 auto;

  padding: 55px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 70px;
}

.retail-cta-copy {
  max-width: 930px;
}

.retail-cta-copy > span {
  color: #8dabff;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.retail-cta-copy h2 {
  margin: 9px 0 0;

  color: #fff;

  font-family: Manrope, sans-serif;
  font-size: clamp(36px,3.3vw,51px);
  font-weight: 500;

  line-height: 1.07;
  letter-spacing: -.043em;
}

.retail-cta-copy h2 strong {
  color: #91adff;

  font-weight: 500;
}

.retail-cta-copy p {
  max-width: 720px;

  margin-top: 12px;

  color: rgba(221,230,245,.68);

  font-size: 13px;
  line-height: 1.65;
}

.retail-cta-btn {
  min-width: 270px;
  min-height: 59px;

  padding: 7px 7px 7px 21px;

  justify-content: space-between;

  gap: 20px;

  font-size: 11px;
}

.retail-cta-btn i {
  width: 43px;
  height: 43px;
}


/* =========================================================
   FAQ
========================================================= */

.retail-faq {
  position: relative;
  overflow: hidden;

  padding: 86px 0 94px;

  background:
    linear-gradient(
      180deg,
      #f8faff,
      #fff
    );
}

.retail-faq-pattern {
  opacity: .27;
}

.retail-faq-orb {
  width: 500px;
  height: 500px;

  left: 50%;
  top: -380px;

  transform: translateX(-50%);

  background: rgba(36,93,255,.08);
}

.retail-faq-head {
  max-width: 850px;

  margin: 0 auto 35px;

  text-align: center;
}

.retail-faq-head h2 {
  color: #14213d;

  font-size: clamp(38px,3.3vw,51px);
}

.retail-faq-head h2 span {
  color: #245dff;
}

.retail-faq-head > p {
  max-width: 760px;

  margin: 14px auto 0;

  color: #617087;

  font-size: 14px;
  line-height: 1.7;
}

.retail-faq-list {
  max-width: 1000px;

  margin: auto;

  overflow: hidden;

  border: 1px solid #e0e6ef;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 20px 52px rgba(22,42,80,.055);
}

.retail-faq-item {
  border-bottom: 1px solid #e5eaf1;

  transition:
    background .3s ease,
    box-shadow .3s ease;
}

.retail-faq-item:last-child {
  border-bottom: 0;
}

.retail-faq-item:hover {
  background: #f8faff;
}

.retail-faq-item summary {
  min-height: 78px;

  padding: 17px 20px;

  display: grid;

  grid-template-columns: 35px 1fr 34px;

  gap: 13px;

  align-items: center;

  list-style: none;

  cursor: pointer;
}

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

.retail-faq-item summary > span {
  color: #98a3b4;

  font-size: 9px;
  font-weight: 800;
}

.retail-faq-item summary strong {
  color: #18253f;

  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 600;

  line-height: 1.45;
}

.retail-faq-item summary i {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid #dfe5ee;

  border-radius: 50%;

  color: #245dff;

  background: #fff;

  font-style: normal;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}

.retail-faq-item[open] {
  background:
    linear-gradient(
      90deg,
      #f3f6ff,
      #fff
    );
}

.retail-faq-item[open] summary i {
  color: #fff;

  background: #245dff;

  transform: rotate(45deg);
}

.retail-faq-answer {
  overflow: hidden;
}

.retail-faq-answer p {
  max-width: 850px;

  margin: 0 58px 26px 68px;

  color: #5e6d84;

  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(28px)
    scale(.992);

  filter: blur(3px);

  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.7,.2,1),
    filter .72s ease;
}

.reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .retail-context-layout,
  .retail-services-head,
  .retail-int-layout,
  .retail-modern-layout,
  .retail-quality-layout,
  .retail-why-layout {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .retail-context-copy {
    padding: 24px 0 0;

    border-left: 0;
    border-top: 1px solid #e1e7f0;
  }

  .retail-who-grid,
  .retail-scale-grid,
  .retail-ai-grid-cards {
    grid-template-columns: 1fr 1fr;
  }

  .retail-services-grid,
  .retail-engagement-grid {
    grid-template-columns: 1fr 1fr;
  }

  .retail-context-flow {
    grid-template-columns:
      1fr 22px
      1fr 22px
      1fr;
  }

  .retail-solution-console {
    grid-template-columns: 270px 1fr;
  }

  .retail-stack-row {
    grid-template-columns: 1fr;

    gap: 17px;
  }

  .retail-process-track {
    grid-template-columns:
      1fr 24px
      1fr 24px
      1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .retail-container,
  .retail-cta-inner {
    width: calc(100% - 36px);
  }

  .retail-hero {
    min-height: auto;
  }

  .retail-hero-copy {
    padding: 105px 0 58px;
  }

  .retail-hero h1 {
    font-size: clamp(43px,12.5vw,58px);
  }

  .retail-hero-lead {
    font-size: 15px;
  }

  .retail-hero-support {
    font-size: 13px;
  }

  .retail-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .retail-primary-btn {
    width: 100%;

    justify-content: space-between;
  }

  .retail-context,
  .retail-who,
  .retail-services,
  .retail-solutions,
  .retail-interoperability,
  .retail-scale,
  .retail-ai,
  .retail-modern,
  .retail-stack,
  .retail-process,
  .retail-quality,
  .retail-why,
  .retail-engagement,
  .retail-faq {
    padding: 66px 0;
  }

  .retail-who-grid,
  .retail-services-grid,
  .retail-scale-grid,
  .retail-ai-grid-cards,
  .retail-engagement-grid,
  .retail-why-cards,
  .retail-quality-grid {
    grid-template-columns: 1fr;
  }

  .retail-context-flow,
  .retail-process-track {
    grid-template-columns: 1fr;
  }

  .retail-context-flow > i,
  .retail-process-track > i {
    transform: rotate(90deg);
  }

  .retail-solution-console {
    display: block;

    min-height: auto;
  }

  .retail-solution-nav {
    display: flex;

    overflow-x: auto;

    border-right: 0;
    border-bottom: 1px solid #e1e7f0;
  }

  .retail-solution-tab {
    min-width: 185px;

    border-right: 1px solid #e1e7f0;
  }

  .retail-solution-panels {
    min-height: 620px;
  }

  .retail-solution-panel {
    padding: 34px 22px;
  }

  .retail-panel-grid {
    grid-template-columns: 1fr;
  }

  .retail-int-system {
    min-height: 430px;

    transform: scale(.84);
  }

  .retail-modern-row {
    grid-template-columns: 28px 1fr;
  }

  .retail-modern-row p {
    grid-column: 2;
  }

  .retail-stack-title {
    min-height: 72px;

    padding: 14px 17px;

    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .retail-stack-row {
    padding: 20px 17px;
  }

  .retail-cta {
    min-height: 390px;
  }

  .retail-cta-inner {
    padding: 50px 0;

    flex-direction: column;
    align-items: flex-start;

    gap: 28px;
  }

  .retail-cta-btn {
    width: 100%;

    justify-content: space-between;
  }

  .retail-faq-head {
    text-align: left;

    margin-left: 0;
  }

  .retail-faq-head > p {
    margin-left: 0;
  }

  .retail-faq-item summary {
    grid-template-columns: 27px 1fr 31px;

    padding: 16px 14px;
  }

  .retail-faq-item summary strong {
    font-size: 14px;
  }

  .retail-faq-answer p {
    margin: 0 42px 22px 45px;

    font-size: 13px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .retail-page *,
  .retail-page *::before,
  .retail-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

}